Update static/application.js

static/application.js

@@ -145,10 +145,9 @@
     // Create user's message bubble
     createMessageBubble(question, "You", null, selectedFile.name);
 
-    // Thinking bubble
+    // Thinking bubble with loader
     const thinkingBubble = createMessageBubble("Wait, let me think 🤔... <div class='loader'></div>", "Aidan");
 
-
     const formData = new FormData();
     formData.append("question", question);
     formData.append("file", selectedFile);
@@ -163,10 +162,11 @@
       const answerText = result.answer || "No response.";
       const audioSrc = result.audio || null;
 
-      // Update the thinking bubble
+      // Update the thinking bubble to show the answer text and remove the loader
       const message = thinkingBubble.querySelector(".text");
-      message.innerText = answerText;
+      message.innerHTML = answerText; // Replacing with answer
 
+      // If audio exists, add audio toggle icon
       if (audioSrc) {
         const icon = document.createElement("i");
         icon.className = "fa-solid fa-volume-high audio-toggle";
@@ -217,24 +217,24 @@
   });
 
   const style = document.createElement('style');
-style.textContent = `
-  .loader {
-      display: inline-block;
-      border: 2px solid #f3f3f3;
-      border-top: 2px solid #3b82f6;
-      border-radius: 50%;
-      width: 16px;
-      height: 16px;
-      animation: spin 1s linear infinite;
-      margin-left: 8px;
-  }
-  @keyframes spin {
-      0% { transform: rotate(0deg); }
-      100% { transform: rotate(360deg); }
-  }
-`;
-document.head.appendChild(style);
- 
+  style.textContent = `
+    .loader {
+        display: inline-block;
+        border: 2px solid #f3f3f3;
+        border-top: 2px solid #3b82f6;
+        border-radius: 50%;
+        width: 16px;
+        height: 16px;
+        animation: spin 1s linear infinite;
+        margin-left: 8px;
+    }
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+  `;
+  document.head.appendChild(style);
+
 });
 */
 document.addEventListener("DOMContentLoaded", () => { 
@@ -304,12 +304,14 @@ document.addEventListener("DOMContentLoaded", () => {
     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 = "200px"; // Adjust the size of the image as needed
-      img.style.maxHeight = "200px"; // Adjust the size of the image as needed
-      img.style.borderRadius = "8px"; // Optional, for rounded corners
+      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}`));
     }
@@ -486,5 +488,4 @@ document.addEventListener("DOMContentLoaded", () => {
     }
   `;
   document.head.appendChild(style);
-
 });