Update static/application.js

static/application.js

@@ -300,29 +300,46 @@ document.addEventListener("DOMContentLoaded", () => {
 
     filePreviewBubble = document.createElement("div");
     filePreviewBubble.className = "file-preview-bubble bubble right";
+    filePreviewBubble.style.display = "flex";
+    filePreviewBubble.style.flexDirection = "column";
+    filePreviewBubble.style.maxWidth = "50%";
+
+    if (file.type.startsWith('image/')) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const img = document.createElement("img");
+        img.src = e.target.result;
+        img.style.width = "100%";
+        img.style.height = "200px";
+        img.style.objectFit = "cover";
+        img.style.borderRadius = "10px";
+        img.style.marginBottom = "8px";
+
+        const text = document.createElement("span");
+        text.textContent = `📎 Selected image: ${file.name}`;
+        text.style.fontSize = "13px";
+
+        filePreviewBubble.appendChild(img);
+        filePreviewBubble.appendChild(text);
+        convo.appendChild(filePreviewBubble);
+        convo.scrollTop = convo.scrollHeight;
+      };
+      reader.readAsDataURL(file);
+    } else {
+      const text = document.createElement("span");
+      text.textContent = `📎 Selected document: ${file.name}`;
+      text.style.fontSize = "13px";
 
-    if (type === "document") {
-      filePreviewBubble.textContent = `📎 Selected: ${file.name}`;
-    } else if (type === "image") {
-      // Create an image element for preview
-      const img = document.createElement("img");
-      img.src = URL.createObjectURL(file);
-      img.alt = "Selected Image";
-      img.style.maxWidth = "100%"; // Make the image fill the bubble width
-      img.style.borderRadius = "8px"; // Optional: Rounded corners for images
-
-      // Append the image to the preview bubble
-      filePreviewBubble.appendChild(img);
-      filePreviewBubble.appendChild(document.createTextNode(` Selected: ${file.name}`));
+      filePreviewBubble.appendChild(text);
+      convo.appendChild(filePreviewBubble);
+      convo.scrollTop = convo.scrollHeight;
     }
-
-    convo.appendChild(filePreviewBubble);
-    convo.scrollTop = convo.scrollHeight;
   }
 
-  function createMessageBubble(text, sender = "You", audioSrc = null, fileName = null) {
+  function createMessageBubble(text, sender = "You", audioSrc = null, fileName = null, imageSrc = null) {
     const bubble = document.createElement("div");
     bubble.className = `bubble ${sender === "You" ? "right" : "left"}`;
+    bubble.style.maxWidth = "50%";
 
     const label = document.createElement("div");
     label.className = "label";
@@ -332,46 +349,20 @@ document.addEventListener("DOMContentLoaded", () => {
     message.className = "text";
     message.style.whiteSpace = "pre-wrap";
 
-    if (sender === "You") {
-      let fileLine = fileName ? `📎 Selected file: ${fileName}\n` : "";
-      message.innerText = `${fileLine}❓ ${text}`;
-    } else {
-      message.style.display = "flex";
-      message.style.justifyContent = "space-between";
-      message.style.alignItems = "center";
-
-      const msgSpan = document.createElement("span");
-      msgSpan.innerHTML = text; 
-      message.appendChild(msgSpan);
-
-      if (audioSrc) {
-        const icon = document.createElement("i");
-        icon.className = "fa-solid fa-volume-high audio-toggle";
-        icon.title = "Click to mute";
-        icon.style.cursor = "pointer";
-        icon.style.fontSize = "18px";
-
-        const audio = new Audio(audioSrc);
-        audio.play();
+    const textSpan = document.createElement("span");
+    textSpan.innerHTML = text;
+    message.appendChild(textSpan);
 
-        icon.addEventListener("click", () => {
-          if (audio.muted) {
-            audio.currentTime = 0;
-            audio.muted = false;
-            icon.classList.remove("fa-volume-xmark");
-            icon.classList.add("fa-volume-high");
-            icon.title = "Click to mute";
-            audio.play();
-          } else {
-            audio.muted = true;
-            icon.classList.remove("fa-volume-high");
-            icon.classList.add("fa-volume-xmark");
-            icon.title = "Click to unmute";
-          }
-        });
-
-        message.appendChild(icon);
-      }
+    // Display image if available
+    if (imageSrc) {
+      const img = document.createElement("img");
+      img.src = imageSrc;
+      img.style.width = "100%";
+      img.style.height = "200px";
+      img.style.objectFit = "cover";
+      img.style.borderRadius = "10px";
+      img.style.marginTop = "8px";
+      message.appendChild(img);
     }
 
     bubble.appendChild(label);
@@ -397,7 +388,7 @@ document.addEventListener("DOMContentLoaded", () => {
     }
 
     // Create user's message bubble
-    createMessageBubble(question, "You", null, selectedFile.name);
+    createMessageBubble(question, "You", null, selectedFile.name, selectedFile.type.startsWith('image/') ? URL.createObjectURL(selectedFile) : null);
 
     // Thinking bubble with loader
     const thinkingBubble = createMessageBubble("Wait, let me think 🤔... <div class='loader'></div>", "Aidan");
@@ -418,7 +409,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
       // Update the thinking bubble to show the answer text and remove the loader
       const message = thinkingBubble.querySelector(".text");
-      message.innerHTML = answerText; // Replacing with answer
+      message.innerHTML = answerText;
 
       // If audio exists, add audio toggle icon
       if (audioSrc) {
@@ -488,4 +479,5 @@ document.addEventListener("DOMContentLoaded", () => {
     }
   `;
   document.head.appendChild(style);
-});
+
+});