Update static/application.js

static/application.js

@@ -79,74 +79,148 @@ document.addEventListener("DOMContentLoaded", () => {
   const fileBtn = document.querySelector(".fa-file");
   const imageBtn = document.querySelector(".fa-image");
 
-  // Create file input dynamically (not visible)
+  let selectedFile = null;
+  let filePreviewBubble = null;
+
+  // Create 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);
 
+  // Handle file icon click
   fileBtn.addEventListener("click", () => fileInput.click());
+  imageBtn.addEventListener("click", () => fileInput.click());
 
+  // Handle file selection
   fileInput.addEventListener("change", () => {
     const file = fileInput.files[0];
     if (file) {
-      const fileBubble = document.createElement("div");
-      fileBubble.className = "file-preview-bubble bubble right";
-      fileBubble.textContent = `Selected: ${file.name}`;
-      convo.appendChild(fileBubble);
+      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(message, isUser = true, audioSrc = null) {
+  function createMessageBubble(text, sender = "You", audioSrc = null) {
     const bubble = document.createElement("div");
-    bubble.className = `bubble ${isUser ? "right" : "left"}`;
-    bubble.innerHTML = `<span>${message}</span>`;
+    bubble.className = `bubble ${sender === "You" ? "right" : "left"}`;
+
+    const label = document.createElement("div");
+    label.className = "label";
+    label.innerText = sender;
+
+    const message = document.createElement("div");
+    message.className = "text";
+    message.innerText = text;
 
-    if (audioSrc && !isUser) {
+    bubble.appendChild(label);
+    bubble.appendChild(message);
+
+    if (audioSrc && sender === "Chris") {
       const audio = document.createElement("audio");
       audio.src = audioSrc;
       audio.autoplay = true;
-      audio.muted = false;
-
-      const audioIcon = document.createElement("i");
-      audioIcon.className = "fa-solid fa-volume-high audio-toggle";
-      audioIcon.style.marginLeft = "10px";
-      audioIcon.title = "Click to mute";
+      audio.controls = true;
 
-      bubble.appendChild(audio);
-      bubble.appendChild(audioIcon);
+      const icon = document.createElement("i");
+      icon.className = "fa-solid fa-volume-high audio-toggle";
+      icon.style.cursor = "pointer";
+      icon.title = "Click to mute";
+      icon.style.marginLeft = "10px";
 
-      // Add toggle logic
-      audioIcon.addEventListener("click", () => {
+      icon.addEventListener("click", () => {
         audio.muted = !audio.muted;
-        if (audio.muted) {
-          audioIcon.classList.replace("fa-volume-high", "fa-volume-xmark");
-          audioIcon.title = "Click to unmute";
-        } else {
-          audioIcon.classList.replace("fa-volume-xmark", "fa-volume-high");
-          audioIcon.title = "Click to mute";
-        }
+        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 audioWrap = document.createElement("div");
+      audioWrap.style.display = "flex";
+      audioWrap.style.alignItems = "center";
+      audioWrap.style.gap = "8px";
+      audioWrap.appendChild(icon);
+      audioWrap.appendChild(audio);
+
+      bubble.appendChild(audioWrap);
     }
 
     convo.appendChild(bubble);
     convo.scrollTop = convo.scrollHeight;
   }
 
-  sendBtn.addEventListener("click", () => {
-    const question = input.value?.trim();
+  sendBtn.addEventListener("click", async () => {
+    const question = input.value.trim();
     if (!question) return;
 
-    // Add user's question to convo
-    createMessageBubble(question, true);
-    input.value = "";
+    if (!selectedFile) {
+      alert("Please upload a document or image first.");
+      return;
+    }
+
+    // Remove file preview
+    if (filePreviewBubble) {
+      filePreviewBubble.remove();
+      filePreviewBubble = null;
+    }
+
+    createMessageBubble(question, "You", null);
+
+    // Simulate "thinking"
+    const thinkingBubble = createMessageBubble("Chris is thinking...", "Chris");
+
+    const formData = new FormData();
+    formData.append("question", question);
+    formData.append("file", selectedFile);
 
-    // Simulate a bot answer for now
-    setTimeout(() => {
-      const answerText = "Here's a simulated answer from Chris!";
-      const audioPath = "/static/audio/response.mp3"; // Replace this with dynamic path if needed
-      createMessageBubble(answerText, false, audioPath);
-    }, 1000);
+    try {
+      const response = await fetch("/predict", {
+        method: "POST",
+        body: formData
+      });
+      const result = await response.json();
+
+      thinkingBubble.querySelector(".text").innerText = result.answer || "No response.";
+      if (result.audio) {
+        const audioWrap = document.createElement("div");
+        const audio = document.createElement("audio");
+        audio.src = result.audio;
+        audio.controls = true;
+        audio.autoplay = true;
+
+        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.marginLeft = "10px";
+
+        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";
+        });
+
+        audioWrap.style.display = "flex";
+        audioWrap.style.alignItems = "center";
+        audioWrap.style.gap = "8px";
+        audioWrap.appendChild(icon);
+        audioWrap.appendChild(audio);
+        thinkingBubble.appendChild(audioWrap);
+      }
+
+    } catch (err) {
+      thinkingBubble.querySelector(".text").innerText = "⚠️ Chris had trouble responding.";
+    }
+
+    input.value = "";
+    selectedFile = null;
   });
 });