Update static/application.js

static/application.js

@@ -1,41 +1,45 @@
 document.addEventListener("DOMContentLoaded", () => {
   const convo = document.querySelector(".convo");
-  const input = document.querySelector("#questionInput");
+  const input = document.querySelector(".qt input");
   const sendBtn = document.querySelector(".sendingQA");
   const fileBtn = document.querySelector(".fa-file");
   const imageBtn = document.querySelector(".fa-image");
-
   let selectedFile = null;
   let filePreviewBubble = null;
 
-  // Hidden file input
+  // Hidden input
   const fileInput = document.createElement("input");
   fileInput.type = "file";
   fileInput.style.display = "none";
   document.body.appendChild(fileInput);
 
-  // 📄 Handle document icon click
   fileBtn.addEventListener("click", () => {
-    console.log("clicked")
     fileInput.value = "";
     fileInput.accept = ".pdf,.docx,.pptx,.xlsx";
     fileInput.click();
   });
 
-  // 🖼️ Handle image icon click
   imageBtn.addEventListener("click", () => {
     fileInput.value = "";
     fileInput.accept = "image/*";
     fileInput.click();
   });
 
-  // When file is selected via input
   fileInput.addEventListener("change", () => {
     const file = fileInput.files[0];
-    if (file) handleSelectedFile(file);
+    if (file) {
+      selectedFile = file;
+      if (filePreviewBubble) filePreviewBubble.remove();
+
+      filePreviewBubble = document.createElement("div");
+      filePreviewBubble.className = "file-preview-bubble bubble right";
+      filePreviewBubble.textContent = `📎 Selected: ${file.name}`;
+      convo.appendChild(filePreviewBubble);
+      convo.scrollTop = convo.scrollHeight;
+    }
   });
 
-  // 🖱️ Drag & drop file support
+  // Drag & drop
   convo.addEventListener("dragover", (e) => {
     e.preventDefault();
     convo.classList.add("drag-over");
@@ -50,19 +54,26 @@ document.addEventListener("DOMContentLoaded", () => {
     convo.classList.remove("drag-over");
 
     const file = e.dataTransfer.files[0];
-    if (file) handleSelectedFile(file);
-  });
+    if (file) {
+      selectedFile = file;
 
-  function handleSelectedFile(file) {
-    selectedFile = file;
-    if (filePreviewBubble) filePreviewBubble.remove();
+      if (filePreviewBubble) filePreviewBubble.remove();
 
-    filePreviewBubble = document.createElement("div");
-    filePreviewBubble.className = "file-preview-bubble bubble right";
-    filePreviewBubble.textContent = `📎 Selected: ${file.name}`;
-    convo.appendChild(filePreviewBubble);
-    convo.scrollTop = convo.scrollHeight;
-  }
+      filePreviewBubble = document.createElement("div");
+      filePreviewBubble.className = "file-preview-bubble bubble right";
+      filePreviewBubble.textContent = `📎 Selected: ${file.name}`;
+      convo.appendChild(filePreviewBubble);
+      convo.scrollTop = convo.scrollHeight;
+    }
+  });
+
+  // Reset chat
+  resetBtn.addEventListener("click", () => {
+    convo.innerHTML = "";
+    selectedFile = null;
+    filePreviewBubble = null;
+    input.value = "";
+  });
 
   function createMessageBubble(text, sender = "You", audioSrc = null, fileName = null) {
     const bubble = document.createElement("div");
@@ -80,12 +91,12 @@ document.addEventListener("DOMContentLoaded", () => {
       const fileLine = fileName ? `📎 Selected file: ${fileName}\n` : "";
       message.innerText = `${fileLine}❓ ${text}`;
     } else {
-      const msgSpan = document.createElement("span");
-      msgSpan.innerText = text;
-
       message.style.display = "flex";
       message.style.justifyContent = "space-between";
       message.style.alignItems = "center";
+
+      const msgSpan = document.createElement("span");
+      msgSpan.innerText = text;
       message.appendChild(msgSpan);
 
       if (audioSrc) {
@@ -93,27 +104,31 @@ document.addEventListener("DOMContentLoaded", () => {
         icon.className = "fa-solid fa-volume-high audio-toggle";
         icon.title = "Click to mute";
         icon.style.cursor = "pointer";
-        icon.style.fontSize = "20px";
-        icon.style.marginLeft = "40px";
+        icon.style.fontSize = "18px";
 
-        let currentAudio = new Audio(audioSrc);
-        currentAudio.play();
+        const audio = new Audio(audioSrc);
+        audio.play();
+
+      let isMuted = false;
+let audio = new Audio(audioSrc);
+audio.play();
+
+icon.addEventListener("click", () => {
+  if (isMuted) {
+    // Recreate audio to force replay
+    audio = new Audio(audioSrc);
+    audio.play();
+    isMuted = false;
+    icon.classList.replace("fa-volume-xmark", "fa-volume-high");
+    icon.title = "Click to mute";
+  } else {
+    audio.pause();
+    isMuted = true;
+    icon.classList.replace("fa-volume-high", "fa-volume-xmark");
+    icon.title = "Click to unmute";
+  }
+});
 
-        let isMuted = false;
-        icon.addEventListener("click", () => {
-          if (isMuted) {
-            currentAudio = new Audio(audioSrc);
-            currentAudio.play();
-            isMuted = false;
-            icon.classList.replace("fa-volume-xmark", "fa-volume-high");
-            icon.title = "Click to mute";
-          } else {
-            currentAudio.pause();
-            isMuted = true;
-            icon.classList.replace("fa-volume-high", "fa-volume-xmark");
-            icon.title = "Click to unmute";
-          }
-        });
 
         message.appendChild(icon);
       }
@@ -126,8 +141,8 @@ document.addEventListener("DOMContentLoaded", () => {
     return bubble;
   }
 
-  // 🧠 Send question
   sendBtn.addEventListener("click", async () => {
+    input.value = "";
     const question = input.value.trim();
     if (!question) return;
 
@@ -142,11 +157,16 @@ document.addEventListener("DOMContentLoaded", () => {
     }
 
     createMessageBubble(question, "You", null, selectedFile.name);
-    const thinkingBubble = createMessageBubble("Wait, let me think 🤔...", "Chris");
+    const thinkingBubble = createMessageBubble("🧠 Let me think...", "Chris");
+
+    // Rewrap file if needed (for reuse in FormData)
+    const wrappedFile = new File([selectedFile], selectedFile.name, {
+      type: selectedFile.type,
+    });
 
     const formData = new FormData();
     formData.append("question", question);
-    formData.append("file", selectedFile);
+    formData.append("file", wrappedFile);
 
     try {
       const response = await fetch("/predict", {
@@ -159,11 +179,7 @@ document.addEventListener("DOMContentLoaded", () => {
       const audioSrc = result.audio || null;
 
       const message = thinkingBubble.querySelector(".text");
-      message.innerHTML = ""; // Clear placeholder
-
-      const msgSpan = document.createElement("span");
-      msgSpan.innerText = answerText;
-      message.appendChild(msgSpan);
+      message.innerText = answerText;
 
       if (audioSrc) {
         const icon = document.createElement("i");
@@ -173,38 +189,39 @@ document.addEventListener("DOMContentLoaded", () => {
         icon.style.fontSize = "18px";
         icon.style.marginLeft = "10px";
 
-        let currentAudio = new Audio(audioSrc);
-        currentAudio.play();
+        const audio = new Audio(audioSrc);
+        audio.play();
 
-        let isMuted = false;
         icon.addEventListener("click", () => {
-          if (isMuted) {
-            currentAudio = new Audio(audioSrc);
-            currentAudio.play();
-            isMuted = false;
+          if (audio.muted) {
+            audio.currentTime = 0;
+            audio.muted = false;
+            audio.play();
             icon.classList.replace("fa-volume-xmark", "fa-volume-high");
             icon.title = "Click to mute";
           } else {
-            currentAudio.pause();
-            isMuted = true;
+            audio.muted = true;
             icon.classList.replace("fa-volume-high", "fa-volume-xmark");
             icon.title = "Click to unmute";
           }
         });
 
+        message.style.display = "flex";
+        message.style.justifyContent = "space-between";
         message.appendChild(icon);
       }
+
     } catch (err) {
       const message = thinkingBubble.querySelector(".text");
       message.innerText = "⚠️ Chris had trouble responding.";
     }
 
-    input.value = "";
-    selectedFile = null;
+    // selectedFile is NOT cleared, so multiple questions work ✅
   });
 });
 
 
+
  /*
 document.addEventListener("DOMContentLoaded", () => {
   const convo = document.querySelector(".convo");