Update static/application.js

static/application.js

@@ -42,7 +42,7 @@ 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` : "";
@@ -84,9 +84,7 @@ document.addEventListener("DOMContentLoaded", () => {
     return bubble;
   }
 
-  sendBtn.addEventListener("click", async () => {
-    input.value = "";
-    selectedFile = null;
+  async function sendMessage() {
     const question = input.value.trim();
     if (!question) return;
 
@@ -152,76 +150,18 @@ document.addEventListener("DOMContentLoaded", () => {
       message.innerText = "⚠️ Chris had trouble responding.";
     }
 
-  });
-  input.addEventListener("keyup", async (event) => {
-    if (event.key === "Enter") {
+    // Clear inputs AFTER processing
     input.value = "";
     selectedFile = null;
-    const question = input.value.trim();
-    if (!question) return;
-
-    if (!selectedFile) {
-      alert("Please upload a document or image first.");
-      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 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;
-
-      // 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";
-        });
+  // Click event for send button
+  sendBtn.addEventListener("click", sendMessage);
 
-        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.";
-    }
+  // Enter key event for input field
+  input.addEventListener("keyup", (event) => {
+    if (event.key === "Enter") {
+      sendMessage();
     }
-      
   });
-});
+});