Update static/application.js

static/application.js

@@ -153,4 +153,75 @@ document.addEventListener("DOMContentLoaded", () => {
     input.value = "";
     selectedFile = null;
   });
+  input.addEventListener("keyup", async (event) => {
+    if (event.key === "Enter") {
+      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";
+          });
+
+          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.";
+      }
+
+      input.value = "";
+      selectedFile = null;
+    }
+  });
 });