From 32d8c859b138c453cabaef525c377b38180f6241 Mon Sep 17 00:00:00 2001
From: Ettore Di Giacinto <mudler@localai.io>
Date: Fri, 30 May 2025 18:40:01 +0200
Subject: [PATCH] show preview of files

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
---
 core/http/static/chat.js  | 64 +++++++++++++++++++++++++++++++++++++++
 core/http/views/chat.html | 36 +++++++++++++++++++---
 2 files changed, 96 insertions(+), 4 deletions(-)

diff --git a/core/http/static/chat.js b/core/http/static/chat.js
index 4100a9e8..8653689c 100644
--- a/core/http/static/chat.js
+++ b/core/http/static/chat.js
@@ -364,3 +364,67 @@ marked.setOptions({
     return hljs.highlightAuto(code).value;
   },
 });
+
+document.addEventListener("alpine:init", () => {
+  Alpine.store("chat", {
+    history: [],
+    languages: [undefined],
+    systemPrompt: "",
+    clear() {
+      this.history.length = 0;
+    },
+    add(role, content, image, audio) {
+      const N = this.history.length - 1;
+      if (this.history.length && this.history[N].role === role) {
+        this.history[N].content += content;
+        this.history[N].html = DOMPurify.sanitize(
+          marked.parse(this.history[N].content)
+        );
+        // Merge new images and audio with existing ones
+        if (image && image.length > 0) {
+          this.history[N].image = [...(this.history[N].image || []), ...image];
+        }
+        if (audio && audio.length > 0) {
+          this.history[N].audio = [...(this.history[N].audio || []), ...audio];
+        }
+      } else {
+        let c = "";
+        const lines = content.split("\n");
+        lines.forEach((line) => {
+          c += DOMPurify.sanitize(marked.parse(line));
+        });
+        this.history.push({ 
+          role, 
+          content, 
+          html: c, 
+          image: image || [], 
+          audio: audio || [] 
+        });
+      }
+      document.getElementById('messages').scrollIntoView(false);
+      const parser = new DOMParser();
+      const html = parser.parseFromString(
+        this.history[this.history.length - 1].html,
+        "text/html"
+      );
+      const code = html.querySelectorAll("pre code");
+      if (!code.length) return;
+      code.forEach((el) => {
+        const language = el.className.split("language-")[1];
+        if (this.languages.includes(language)) return;
+        const script = document.createElement("script");
+        script.src = `https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.8.0/build/languages/${language}.min.js`;
+        document.head.appendChild(script);
+        this.languages.push(language);
+      });
+    },
+    messages() {
+      return this.history.map((message) => ({
+        role: message.role,
+        content: message.content,
+        image: message.image,
+        audio: message.audio,
+      }));
+    },
+  });
+});
diff --git a/core/http/views/chat.html b/core/http/views/chat.html
index 01d396f1..4198c2aa 100644
--- a/core/http/views/chat.html
+++ b/core/http/views/chat.html
@@ -237,8 +237,22 @@ SOFTWARE.
                     <div class="flex flex-col flex-1 items-end">
                       <span class="text-xs font-semibold text-gray-400">You</span>
                       <div class="p-2 flex-1 rounded bg-gray-700 text-white" x-html="message.html"></div>
-                      <template x-if="message.image">
-                        <img :src="message.image" alt="Image" class="rounded-lg mt-2 max-w-xs">
+                      <template x-if="message.image && message.image.length > 0">
+                        <div class="mt-2 space-y-2">
+                          <template x-for="(img, index) in message.image" :key="index">
+                            <img :src="img" :alt="'Image ' + (index + 1)" class="rounded-lg max-w-xs">
+                          </template>
+                        </div>
+                      </template>
+                      <template x-if="message.audio && message.audio.length > 0">
+                        <div class="mt-2 space-y-2">
+                          <template x-for="(audio, index) in message.audio" :key="index">
+                            <audio controls class="w-full">
+                              <source :src="audio" type="audio/*">
+                              Your browser does not support the audio element.
+                            </audio>
+                          </template>
+                        </div>
                       </template>
                     </div>
                   </div>
@@ -256,8 +270,22 @@ SOFTWARE.
                           <i class="fa-solid fa-copy"></i>
                         </button>
                       </div>
-                      <template x-if="message.image">
-                        <img :src="message.image" alt="Image" class="rounded-lg mt-2 max-w-xs">
+                      <template x-if="message.image && message.image.length > 0">
+                        <div class="mt-2 space-y-2">
+                          <template x-for="(img, index) in message.image" :key="index">
+                            <img :src="img" :alt="'Image ' + (index + 1)" class="rounded-lg max-w-xs">
+                          </template>
+                        </div>
+                      </template>
+                      <template x-if="message.audio && message.audio.length > 0">
+                        <div class="mt-2 space-y-2">
+                          <template x-for="(audio, index) in message.audio" :key="index">
+                            <audio controls class="w-full">
+                              <source :src="audio" type="audio/*">
+                              Your browser does not support the audio element.
+                            </audio>
+                          </template>
+                        </div>
                       </template>
                     </div>
                   </div>