Update static/application.js

static/application.js

@@ -85,6 +85,8 @@ document.addEventListener("DOMContentLoaded", () => {
   }
 
   sendBtn.addEventListener("click", async () => {
+    input.value = "";
+    selectedFile = null;
     const question = input.value.trim();
     if (!question) return;
 
@@ -150,78 +152,76 @@ document.addEventListener("DOMContentLoaded", () => {
       message.innerText = "⚠️ Chris had trouble responding.";
     }
 
-    input.value = "";
-    selectedFile = null;
   });
   input.addEventListener("keyup", async (event) => {
     if (event.key === "Enter") {
-      const question = input.value.trim();
-      if (!question) return;
+    input.value = "";
+    selectedFile = null;
+    const question = input.value.trim();
+    if (!question) return;
 
-      if (!selectedFile) {
-        alert("Please upload a document or image first.");
-        return;
-      }
+    if (!selectedFile) {
+      alert("Please upload a document or image first.");
+      return;
+    }
 
-      // Remove file preview bubble
-      if (filePreviewBubble) {
-        filePreviewBubble.remove();
-        filePreviewBubble = null;
-      }
+    // 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 formData = new FormData();
+    formData.append("question", question);
+    formData.append("file", selectedFile);
+
+    try {
+      const response = await fetch("/predict", {
+        method: "POST",
+        body: formData
+      });
+
+      const result = await response.json();
+      const answerText = result.answer || "No response.";
+      const audioSrc = result.audio || null;
 
-      // User message with file info
-      createMessageBubble(question, "You", null, selectedFile.name);
+      // Replace "Let me think..." with actual answer
+      const message = thinkingBubble.querySelector(".text");
+      message.innerText = answerText;
 
-      // Chris is thinking...
-      const thinkingBubble = createMessageBubble("Wait , Let me think 🤔...", "Chris");
+      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 formData = new FormData();
-      formData.append("question", question);
-      formData.append("file", selectedFile);
+        const audio = new Audio(audioSrc);
+        audio.play();
 
-      try {
-        const response = await fetch("/predict", {
-          method: "POST",
-          body: formData
+        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";
         });
 
-        const result = await response.json();
-        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;
-
-        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);
-            icon.classList.toggle("fa-volume-xmark", audio.muted);
-            icon.title = audio.muted ? "Click to unmute" : "Click to mute";
-          });
-
-          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.";
+        message.style.display = "flex";
+        message.style.justifyContent = "space-between";
+        message.appendChild(icon);
       }
-
-      input.value = "";
-      selectedFile = null;
+    } catch (err) {
+      const message = thinkingBubble.querySelector(".text");
+      message.innerText = "⚠️ Chris had trouble responding.";
+    }
     }
+      
   });
 });