Update static/application.js

static/application.js

@@ -167,37 +167,61 @@ document.addEventListener("DOMContentLoaded", () => {
   const sendBtn = document.querySelector(".sendingQA");
   const fileBtn = document.querySelector(".fa-file");
   const imageBtn = document.querySelector(".fa-image");
+  const resetBtn = document.querySelector(".reset-chat");
 
   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);
 
-  // Trigger file input (DOCS)
   fileBtn.addEventListener("click", () => {
-    fileInput.value = ""; // ✅ allow re-selecting same file
+    fileInput.value = "";
     fileInput.accept = ".pdf,.docx,.pptx,.xlsx";
     fileInput.click();
   });
 
-  // Trigger file input (IMAGES)
   imageBtn.addEventListener("click", () => {
-    fileInput.value = ""; // ✅ allow re-selecting same image
+    fileInput.value = "";
     fileInput.accept = "image/*";
     fileInput.click();
   });
 
-  // When file selected
   fileInput.addEventListener("change", () => {
     const file = fileInput.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;
+    }
+  });
+
+  // Drag & drop
+  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;
 
-      // Replace preview bubble
       if (filePreviewBubble) filePreviewBubble.remove();
 
       filePreviewBubble = document.createElement("div");
@@ -208,6 +232,14 @@ document.addEventListener("DOMContentLoaded", () => {
     }
   });
 
+  // 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"}`;
@@ -220,7 +252,6 @@ document.addEventListener("DOMContentLoaded", () => {
     message.className = "text";
     message.style.whiteSpace = "pre-wrap";
 
-    // User message with file
     if (sender === "You") {
       const fileLine = fileName ? `📎 Selected file: ${fileName}\n` : "";
       message.innerText = `${fileLine}❓ ${text}`;
@@ -233,7 +264,6 @@ document.addEventListener("DOMContentLoaded", () => {
       msgSpan.innerText = text;
       message.appendChild(msgSpan);
 
-      // Chris answer with speaker
       if (audioSrc) {
         const icon = document.createElement("i");
         icon.className = "fa-solid fa-volume-high audio-toggle";
@@ -246,7 +276,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
         icon.addEventListener("click", () => {
           if (audio.muted) {
-            audio.currentTime = 0;  // restart from beginning
+            audio.currentTime = 0;
             audio.muted = false;
             audio.play();
             icon.classList.replace("fa-volume-xmark", "fa-volume-high");
@@ -270,6 +300,7 @@ document.addEventListener("DOMContentLoaded", () => {
   }
 
   sendBtn.addEventListener("click", async () => {
+    input.value = "";
     const question = input.value.trim();
     if (!question) return;
 
@@ -283,15 +314,17 @@ document.addEventListener("DOMContentLoaded", () => {
       filePreviewBubble = null;
     }
 
-    // User message
     createMessageBubble(question, "You", null, selectedFile.name);
-
-    // Thinking bubble
     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", {
@@ -306,7 +339,6 @@ document.addEventListener("DOMContentLoaded", () => {
       const message = thinkingBubble.querySelector(".text");
       message.innerText = answerText;
 
-      // Re-add speaker icon if audio
       if (audioSrc) {
         const icon = document.createElement("i");
         icon.className = "fa-solid fa-volume-high audio-toggle";
@@ -342,7 +374,6 @@ document.addEventListener("DOMContentLoaded", () => {
       message.innerText = "⚠️ Chris had trouble responding.";
     }
 
-    input.value = "";
-    // Do NOT clear selectedFile so user can ask follow-up questions
+    // selectedFile is NOT cleared, so multiple questions work ✅
   });
 });