Update static/application.js

static/application.js

@@ -1,4 +1,4 @@
-document.addEventListener("DOMContentLoaded", () => {
+/*document.addEventListener("DOMContentLoaded", () => {
   const convo = document.querySelector(".convo");
   const input = document.querySelector(".qt input");
   const sendBtn = document.querySelector(".sendingQA");
@@ -66,12 +66,19 @@ document.addEventListener("DOMContentLoaded", () => {
         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";
-        });
+       icon.addEventListener("click", () => {
+        if (audio.muted) {
+        audio.currentTime = 0;     // ⏮️ Rewind to beginning
+        audio.muted = false;
+        audio.play();              // 🔊 Play from start
+        icon.classList.replace("fa-volume-xmark", "fa-volume-high");
+        icon.title = "Click to mute";
+       } else {
+       audio.muted = true;
+       icon.classList.replace("fa-volume-high", "fa-volume-xmark");
+       icon.title = "Click to unmute";
+  }
+});
 
         message.appendChild(icon);
       }
@@ -153,4 +160,189 @@ document.addEventListener("DOMContentLoaded", () => {
     input.value = "";
     selectedFile = null;
   });
+}); */
+document.addEventListener("DOMContentLoaded", () => {
+  const convo = document.querySelector(".convo");
+  const input = document.querySelector(".qt input");
+  const sendBtn = document.querySelector(".sendingQA");
+  const fileBtn = document.querySelector(".fa-file");
+  const imageBtn = document.querySelector(".fa-image");
+
+  let selectedFile = null;
+  let filePreviewBubble = null;
+
+  // Hidden file 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.accept = ".pdf,.docx,.pptx,.xlsx";
+    fileInput.click();
+  });
+
+  // Trigger file input (IMAGES)
+  imageBtn.addEventListener("click", () => {
+    fileInput.value = ""; // ✅ allow re-selecting same image
+    fileInput.accept = "image/*";
+    fileInput.click();
+  });
+
+  // When file selected
+  fileInput.addEventListener("change", () => {
+    const file = fileInput.files[0];
+    if (file) {
+      selectedFile = file;
+
+      // Replace preview bubble
+      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(text, sender = "You", audioSrc = null, fileName = null) {
+    const bubble = document.createElement("div");
+    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.style.whiteSpace = "pre-wrap";
+
+    // User message with file
+    if (sender === "You") {
+      const fileLine = fileName ? `📎 Selected file: ${fileName}\n` : "";
+      message.innerText = `${fileLine}❓ ${text}`;
+    } else {
+      message.style.display = "flex";
+      message.style.justifyContent = "space-between";
+      message.style.alignItems = "center";
+
+      const msgSpan = document.createElement("span");
+      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";
+        icon.title = "Click to mute";
+        icon.style.cursor = "pointer";
+        icon.style.fontSize = "18px";
+
+        const audio = new Audio(audioSrc);
+        audio.play();
+
+        icon.addEventListener("click", () => {
+          if (audio.muted) {
+            audio.currentTime = 0;  // restart from beginning
+            audio.muted = false;
+            audio.play();
+            icon.classList.replace("fa-volume-xmark", "fa-volume-high");
+            icon.title = "Click to mute";
+          } else {
+            audio.muted = true;
+            icon.classList.replace("fa-volume-high", "fa-volume-xmark");
+            icon.title = "Click to unmute";
+          }
+        });
+
+        message.appendChild(icon);
+      }
+    }
+
+    bubble.appendChild(label);
+    bubble.appendChild(message);
+    convo.appendChild(bubble);
+    convo.scrollTop = convo.scrollHeight;
+    return bubble;
+  }
+
+  sendBtn.addEventListener("click", async () => {
+    const question = input.value.trim();
+    if (!question) return;
+
+    if (!selectedFile) {
+      alert("Please upload a document or image first.");
+      return;
+    }
+
+    if (filePreviewBubble) {
+      filePreviewBubble.remove();
+      filePreviewBubble = null;
+    }
+
+    // User message
+    createMessageBubble(question, "You", null, selectedFile.name);
+
+    // Thinking bubble
+    const thinkingBubble = createMessageBubble("🧠 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;
+
+      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";
+        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", () => {
+          if (audio.muted) {
+            audio.currentTime = 0;
+            audio.muted = false;
+            audio.play();
+            icon.classList.replace("fa-volume-xmark", "fa-volume-high");
+            icon.title = "Click to mute";
+          } else {
+            audio.muted = true;
+            icon.classList.replace("fa-volume-high", "fa-volume-xmark");
+            icon.title = "Click to unmute";
+          }
+        });
+
+        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 = "";
+    // Do NOT clear selectedFile so user can ask follow-up questions
+  });
 });