Update static/application.js

static/application.js

@@ -8,18 +8,16 @@ document.addEventListener("DOMContentLoaded", () => {
   let selectedFile = null;
   let filePreviewBubble = null;
 
-  // Create hidden file input
+  // Hidden file input
   const fileInput = document.createElement("input");
   fileInput.type = "file";
   fileInput.accept = ".pdf,.docx,.pptx,.xlsx,image/*";
   fileInput.style.display = "none";
   document.body.appendChild(fileInput);
 
-  // Handle file icon click
   fileBtn.addEventListener("click", () => fileInput.click());
   imageBtn.addEventListener("click", () => fileInput.click());
 
-  // Handle file selection
   fileInput.addEventListener("change", () => {
     const file = fileInput.files[0];
     if (file) {
@@ -34,57 +32,57 @@ document.addEventListener("DOMContentLoaded", () => {
     }
   });
 
-function createMessageBubble(text, sender = "You", audioSrc = null) {
-  const bubble = document.createElement("div");
-  bubble.className = `bubble ${sender === "You" ? "right" : "left"}`;
-
-  const label = document.createElement("div");
-  label.className = "label";
-  label.innerText = sender;
-
-  const messageRow = document.createElement("div");
-  messageRow.className = "text";
-  messageRow.style.display = "flex";
-  messageRow.style.justifyContent = "space-between";
-  messageRow.style.alignItems = "center";
-  messageRow.style.gap = "8px";
-
-  const messageText = document.createElement("span");
-  messageText.innerText = text;
-
-  messageRow.appendChild(messageText);
-
-  // Only add icon for Chris's answer
-  if (sender === "Chris" && audioSrc) {
-    const icon = document.createElement("i");
-    icon.className = "fa-solid fa-volume-high audio-toggle";
-    icon.style.cursor = "pointer";
-    icon.style.fontSize = "18px";
-    icon.title = "Click to mute";
-
-    let isMuted = false;
-    let audio = new Audio(audioSrc);
-    audio.play();
-
-    icon.addEventListener("click", () => {
-      isMuted = !isMuted;
-      audio.muted = isMuted;
-      icon.classList.toggle("fa-volume-high", !isMuted);
-      icon.classList.toggle("fa-volume-xmark", isMuted);
-      icon.title = isMuted ? "Click to unmute" : "Click to mute";
-    });
-
-    messageRow.appendChild(icon);
-  }
+  function createMessageBubble(text, sender = "You", audioSrc = null, fileName = null) {
+    const bubble = document.createElement("div");
+    bubble.className = `bubble ${sender === "You" ? "right" : "left"}`;
+
+    const label = document.createElement("div");
+    label.className = "label";
+    label.innerText = sender;
+
+    const message = document.createElement("div");
+    message.className = "text";
+    message.style.whiteSpace = "pre-wrap"; // preserve line breaks
 
-  bubble.appendChild(label);
-  bubble.appendChild(messageRow);
+    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";
 
-  convo.appendChild(bubble);
-  convo.scrollTop = convo.scrollHeight;
+      const msgSpan = document.createElement("span");
+      msgSpan.innerText = 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";
 
-  return bubble;
-}
+        const audio = new Audio(audioSrc);
+        audio.play();
+
+        icon.addEventListener("click", () => {
+          audio.muted = !audio.muted;
+          icon.classList.toggle("fa-volume-high", !audio.muted);
+          icon.classList.toggle("fa-volume-xmark", audio.muted);
+          icon.title = audio.muted ? "Click to unmute" : "Click to mute";
+        });
+
+        message.appendChild(icon);
+      }
+    }
+
+    bubble.appendChild(label);
+    bubble.appendChild(message);
+    convo.appendChild(bubble);
+    convo.scrollTop = convo.scrollHeight;
+    return bubble;
+  }
 
   sendBtn.addEventListener("click", async () => {
     const question = input.value.trim();
@@ -95,16 +93,17 @@ function createMessageBubble(text, sender = "You", audioSrc = null) {
       return;
     }
 
-    // Remove file preview
+    // Remove file preview bubble
     if (filePreviewBubble) {
       filePreviewBubble.remove();
       filePreviewBubble = null;
     }
 
-    createMessageBubble(question, "You", null);
+    // User message with file info
+    createMessageBubble(question, "You", null, selectedFile.name);
 
-    // Simulate "thinking"
-    const thinkingBubble = createMessageBubble("Wait , let me think...", "Chris");
+    // Chris is thinking...
+    const thinkingBubble = createMessageBubble("Wait , Let me think 🤔...", "Chris");
 
     const formData = new FormData();
     formData.append("question", question);
@@ -115,22 +114,26 @@ function createMessageBubble(text, sender = "You", audioSrc = null) {
         method: "POST",
         body: formData
       });
+
       const result = await response.json();
+      const answerText = result.answer || "No response.";
+      const audioSrc = result.audio || null;
 
-      thinkingBubble.querySelector(".text").innerText = result.answer || "No response.";
-      if (result.audio) {
-        const audioWrap = document.createElement("div");
-        const audio = document.createElement("audio");
-        audio.src = result.audio;
-        audio.controls = true;
-        audio.autoplay = true;
+      // Replace "Let me think..." with actual answer
+      const message = thinkingBubble.querySelector(".text");
+      message.innerText = answerText;
 
+      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";
         icon.style.marginLeft = "10px";
 
+        const audio = new Audio(audioSrc);
+        audio.play();
+
         icon.addEventListener("click", () => {
           audio.muted = !audio.muted;
           icon.classList.toggle("fa-volume-high", !audio.muted);
@@ -138,16 +141,13 @@ function createMessageBubble(text, sender = "You", audioSrc = null) {
           icon.title = audio.muted ? "Click to unmute" : "Click to mute";
         });
 
-        audioWrap.style.display = "flex";
-        audioWrap.style.alignItems = "center";
-        audioWrap.style.gap = "8px";
-        audioWrap.appendChild(icon);
-        audioWrap.appendChild(audio);
-        thinkingBubble.appendChild(audioWrap);
+        message.style.display = "flex";
+        message.style.justifyContent = "space-between";
+        message.appendChild(icon);
       }
-
     } catch (err) {
-      thinkingBubble.querySelector(".text").innerText = "⚠️ Chris had trouble responding.";
+      const message = thinkingBubble.querySelector(".text");
+      message.innerText = "⚠️ Chris had trouble responding.";
     }
 
     input.value = "";