Update static/application.js

static/application.js

@@ -11,12 +11,21 @@ document.addEventListener("DOMContentLoaded", () => {
   // 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);
 
-  fileBtn.addEventListener("click", () => fileInput.click());
-  imageBtn.addEventListener("click", () => fileInput.click());
+  // Handle file button clicks
+  fileBtn.addEventListener("click", () => {
+    fileInput.value = ""; // allow reselecting the same file
+    fileInput.accept = ".pdf,.docx,.pptx,.xlsx";
+    fileInput.click();
+  });
+
+  imageBtn.addEventListener("click", () => {
+    fileInput.value = "";
+    fileInput.accept = "image/*";
+    fileInput.click();
+  });
 
   fileInput.addEventListener("change", () => {
     const file = fileInput.files[0];
@@ -32,6 +41,33 @@ document.addEventListener("DOMContentLoaded", () => {
     }
   });
 
+  // Drag & drop support
+  convo.addEventListener("dragover", (e) => {
+    e.preventDefault();
+    convo.classList.add("drag-over");
+  });
+
+  convo.addEventListener("dragleave", () => {
+    convo.classList.remove("drag-over");
+  });
+
+  convo.addEventListener("drop", (e) => {
+    e.preventDefault();
+    convo.classList.remove("drag-over");
+
+    const file = e.dataTransfer.files[0];
+    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;
+    }
+  });
+
   function createMessageBubble(text, sender = "You", audioSrc = null, fileName = null) {
     const bubble = document.createElement("div");
     bubble.className = `bubble ${sender === "You" ? "right" : "left"}`;
@@ -42,10 +78,10 @@ document.addEventListener("DOMContentLoaded", () => {
 
     const message = document.createElement("div");
     message.className = "text";
-    message.style.whiteSpace = "pre-wrap"; // preserve line breaks
+    message.style.whiteSpace = "pre-wrap";
 
     if (sender === "You") {
-      let fileLine = fileName ? `📎 Selected file: ${fileName}\n` : "";
+      const fileLine = fileName ? `📎 Selected file: ${fileName}\n` : "";
       message.innerText = `${fileLine}❓ ${text}`;
     } else {
       message.style.display = "flex";
@@ -63,22 +99,24 @@ document.addEventListener("DOMContentLoaded", () => {
         icon.style.cursor = "pointer";
         icon.style.fontSize = "18px";
 
-        const audio = new Audio(audioSrc);
-        audio.play();
+        let currentAudio = new Audio(audioSrc);
+        currentAudio.play();
 
-       icon.addEventListener("click", () => {
-        if (audio.muted) {
-        audio.currentTime = 0;     // ⏮️ Rewind to beginning
-        audio.muted = false;
-        audio.play();              // 🔊 Play from start
-        icon.classList.replace("fa-volume-xmark", "fa-volume-high");
-        icon.title = "Click to mute";
-       } else {
-       audio.muted = 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); // restart
+            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);
       }
@@ -100,17 +138,13 @@ document.addEventListener("DOMContentLoaded", () => {
       return;
     }
 
-    // Remove file preview bubble
     if (filePreviewBubble) {
       filePreviewBubble.remove();
       filePreviewBubble = null;
     }
 
-    // User message with file info
     createMessageBubble(question, "You", null, selectedFile.name);
-
-    // Chris is thinking...
-    const thinkingBubble = createMessageBubble("Wait , Let me think 🤔...", "Chris");
+    const thinkingBubble = createMessageBubble("Wait, let me think 🤔...", "Chris");
 
     const formData = new FormData();
     formData.append("question", question);
@@ -126,7 +160,6 @@ document.addEventListener("DOMContentLoaded", () => {
       const answerText = result.answer || "No response.";
       const audioSrc = result.audio || null;
 
-      // Replace "Let me think..." with actual answer
       const message = thinkingBubble.querySelector(".text");
       message.innerText = answerText;
 
@@ -138,14 +171,23 @@ document.addEventListener("DOMContentLoaded", () => {
         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", () => {
-          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";
+          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.style.display = "flex";
@@ -158,9 +200,9 @@ document.addEventListener("DOMContentLoaded", () => {
     }
 
     input.value = "";
-    selectedFile = null;
   });
-}); /*
+});
+ /*
 document.addEventListener("DOMContentLoaded", () => {
   const convo = document.querySelector(".convo");
   const input = document.querySelector(".qt input");