Update static/application.js

static/application.js

@@ -1,30 +1,34 @@
 document.addEventListener("DOMContentLoaded", () => {
   const convo = document.querySelector(".convo");
-  const input = document.querySelector(".qt input");
+  const input = document.querySelector("#questionInput");
   const sendBtn = document.querySelector(".sendingQA");
   const fileBtn = document.querySelector(".fa-file");
   const imageBtn = document.querySelector(".fa-image");
+
   let selectedFile = null;
   let filePreviewBubble = null;
 
-  // Hidden input
+  // Hidden file input
   const fileInput = document.createElement("input");
   fileInput.type = "file";
   fileInput.style.display = "none";
   document.body.appendChild(fileInput);
 
+  // 📄 Handle document icon click
   fileBtn.addEventListener("click", () => {
     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
   fileInput.addEventListener("change", () => {
     const file = fileInput.files[0];
     if (file) {
@@ -33,13 +37,13 @@ document.addEventListener("DOMContentLoaded", () => {
 
       filePreviewBubble = document.createElement("div");
       filePreviewBubble.className = "file-preview-bubble bubble right";
-      filePreviewBubble.textContent = `📎 Selected: ${file.name}`;
+      filePreviewBubble.textContent = 📎 Selected: ${file.name};
       convo.appendChild(filePreviewBubble);
       convo.scrollTop = convo.scrollHeight;
     }
   });
 
-  // Drag & drop
+  // 🖱️ Drag & drop file support
   convo.addEventListener("dragover", (e) => {
     e.preventDefault();
     convo.classList.add("drag-over");
@@ -61,23 +65,15 @@ document.addEventListener("DOMContentLoaded", () => {
 
       filePreviewBubble = document.createElement("div");
       filePreviewBubble.className = "file-preview-bubble bubble right";
-      filePreviewBubble.textContent = `📎 Selected: ${file.name}`;
+      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");
-    bubble.className = `bubble ${sender === "You" ? "right" : "left"}`;
+    bubble.className = bubble ${sender === "You" ? "right" : "left"};
 
     const label = document.createElement("div");
     label.className = "label";
@@ -88,8 +84,8 @@ document.addEventListener("DOMContentLoaded", () => {
     message.style.whiteSpace = "pre-wrap";
 
     if (sender === "You") {
-      const fileLine = fileName ? `📎 Selected file: ${fileName}\n` : "";
-      message.innerText = `${fileLine}❓ ${text}`;
+      const fileLine = fileName ? 📎 Selected file: ${fileName}\n : "";
+      message.innerText = ${fileLine}❓ ${text};
     } else {
       message.style.display = "flex";
       message.style.justifyContent = "space-between";
@@ -104,31 +100,27 @@ document.addEventListener("DOMContentLoaded", () => {
         icon.className = "fa-solid fa-volume-high audio-toggle";
         icon.title = "Click to mute";
         icon.style.cursor = "pointer";
-        icon.style.fontSize = "18px";
+        icon.style.fontSize = "20px";
+        icon.style.marginLeft = "40px";
 
-        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 currentAudio = new Audio(audioSrc);
+        currentAudio.play();
 
+        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);
       }
@@ -141,8 +133,8 @@ icon.addEventListener("click", () => {
     return bubble;
   }
 
+  // 🧠 Send question
   sendBtn.addEventListener("click", async () => {
-    input.value = "";
     const question = input.value.trim();
     if (!question) return;
 
@@ -157,16 +149,11 @@ icon.addEventListener("click", () => {
     }
 
     createMessageBubble(question, "You", null, selectedFile.name);
-    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 thinkingBubble = createMessageBubble("Wait, let me think 🤔...", "Chris");
 
     const formData = new FormData();
     formData.append("question", question);
-    formData.append("file", wrappedFile);
+    formData.append("file", selectedFile);
 
     try {
       const response = await fetch("/predict", {
@@ -189,18 +176,20 @@ icon.addEventListener("click", () => {
         icon.style.fontSize = "18px";
         icon.style.marginLeft = "10px";
 
-        const audio = new Audio(audioSrc);
-        audio.play();
+        let currentAudio = new Audio(audioSrc);
+        currentAudio.play();
 
+        let isMuted = false;
         icon.addEventListener("click", () => {
-          if (audio.muted) {
-            audio.currentTime = 0;
-            audio.muted = false;
-            audio.play();
+          if (isMuted) {
+            currentAudio = new Audio(audioSrc); // restart
+            currentAudio.play();
+            isMuted = false;
             icon.classList.replace("fa-volume-xmark", "fa-volume-high");
             icon.title = "Click to mute";
           } else {
-            audio.muted = true;
+            currentAudio.pause();
+            isMuted = true;
             icon.classList.replace("fa-volume-high", "fa-volume-xmark");
             icon.title = "Click to unmute";
           }
@@ -210,18 +199,16 @@ icon.addEventListener("click", () => {
         message.style.justifyContent = "space-between";
         message.appendChild(icon);
       }
-
     } catch (err) {
       const message = thinkingBubble.querySelector(".text");
       message.innerText = "⚠️ Chris had trouble responding.";
     }
 
-    // selectedFile is NOT cleared, so multiple questions work ✅
+    input.value = "";
   });
 });
 
 
-
  /*
 document.addEventListener("DOMContentLoaded", () => {
   const convo = document.querySelector(".convo");