Update static/application.js

static/application.js

@@ -1,138 +1,73 @@
-document.addEventListener("DOMContentLoaded", function () {
-    const convo = document.querySelector(".convo");
-    const sendBtn = document.querySelector(".sendingQA");
-    const userInput = document.querySelector(".qt input");
-    const imageIcon = document.querySelector(".fa-image");
-    const fileIcon = document.querySelector(".fa-file");
-
-    let selectedFile = null;
-    let filePreviewDiv = null;
-    let autoScroll = true;
-
-    convo.addEventListener("scroll", () => {
-        const threshold = 150;
-        autoScroll = convo.scrollHeight - convo.scrollTop - convo.clientHeight < threshold;
-    });
-
-    function scrollToBottom() {
-        if (autoScroll) {
-            convo.scrollTo({ top: convo.scrollHeight, behavior: "smooth" });
-        }
+document.addEventListener("DOMContentLoaded", () => {
+  const convo = document.querySelector(".convo");
+  const sendBtn = document.querySelector(".sendingQA");
+  const questionInput = document.querySelector(".qt");
+  const fileInput = document.querySelector("#file-upload");
+  const imageInput = document.querySelector("#image-upload");
+
+  // Handle text or file submission
+  function sendQuestion() {
+    const question = questionInput.value.trim();
+    if (!question && !fileInput.files.length && !imageInput.files.length) return;
+
+    const userBubble = document.createElement("div");
+    userBubble.className = "bubble right";
+    userBubble.textContent = question || "Sent a file/image";
+    convo.appendChild(userBubble);
+
+    // Preview file name (if any)
+    const file = fileInput.files[0];
+    if (file) {
+      const filePreview = document.createElement("div");
+      filePreview.className = "file-preview-bubble bubble right";
+      filePreview.textContent = `Selected: ${file.name}`;
+      convo.appendChild(filePreview);
     }
 
-    function createMessageBubble(text, sender, audioUrl = null, fileName = null) {
-        const bubble = document.createElement("div");
-        bubble.classList.add("bubble", sender === "You" ? "right" : "left");
-
-        const label = document.createElement("div");
-        label.className = "label";
-        label.innerText = sender;
-
-        const textDiv = document.createElement("div");
-        textDiv.className = "text";
-        textDiv.innerText = text;
-
-        bubble.appendChild(label);
-        bubble.appendChild(textDiv);
-
-        if (fileName) {
-            const fileLine = document.createElement("div");
-            fileLine.style.fontSize = "0.85rem";
-            fileLine.style.color = "#555";
-            fileLine.innerHTML = `📎 <strong>File:</strong> ${fileName}`;
-            bubble.appendChild(fileLine);
-        }
-
-        if (audioUrl) {
-            const audio = document.createElement("audio");
-            audio.controls = true;
-            audio.autoplay = true;
-            audio.src = audioUrl;
-            audio.style.marginTop = "10px";
-            bubble.appendChild(audio);
-        }
-
-        convo.appendChild(bubble);
-        scrollToBottom();
-        return bubble;
+    // Preview image name (if any)
+    const image = imageInput.files[0];
+    if (image) {
+      const imagePreview = document.createElement("div");
+      imagePreview.className = "file-preview-bubble bubble right";
+      imagePreview.textContent = `Selected: ${image.name}`;
+      convo.appendChild(imagePreview);
     }
 
-  function showFilePreview(filename, icon = "📎") {
-    if (filePreviewDiv) filePreviewDiv.remove();
-
-    filePreviewDiv = document.createElement("div");
-    filePreviewDiv.className = "file-preview-bubble";
-    filePreviewDiv.innerHTML = `${icon} <strong>Selected:</strong> ${filename}`;
-
-    convo.appendChild(filePreviewDiv); 
-    scrollToBottom();
-}
+    convo.scrollTop = convo.scrollHeight;
+    questionInput.value = "";
 
-    sendBtn.addEventListener("click", async () => {
-        const question = userInput.value.trim();
-        if (!question) return;
+    // TODO: Send data to backend here
+  }
 
-        if (!selectedFile) {
-            alert("Please upload a file before asking a question.");
-            return;
-        }
-
-        if (filePreviewDiv) filePreviewDiv.remove();  // Remove preview bubble
-
-        createMessageBubble(question, "You", null, selectedFile.name);
-
-        const thinkingBubble = createMessageBubble("Waiat 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();
+  // Handle send button click
+  sendBtn.addEventListener("click", sendQuestion);
 
-            thinkingBubble.querySelector(".text").innerText = result.answer || "No response received.";
-
-            if (result.audio) {
-                const audio = document.createElement("audio");
-                audio.controls = true;
-                audio.autoplay = true;
-                audio.src = result.audio;
-                audio.style.marginTop = "10px";
-                thinkingBubble.appendChild(audio);
-            }
-
-        } catch (err) {
-            thinkingBubble.querySelector(".text").innerText = "⚠️ Chris had trouble connecting.";
+  // Handle Enter key in input
+  questionInput.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      sendQuestion();
+    }
+  });
+
+  // Toggle audio mute/unmute
+  convo.addEventListener("click", (e) => {
+    if (e.target.classList.contains("audio-toggle")) {
+      const audioIcon = e.target;
+      const answerBlock = audioIcon.closest(".bubble");
+      const audioElement = answerBlock.querySelector("audio");
+
+      if (audioElement) {
+        if (audioElement.muted) {
+          audioElement.muted = false;
+          audioIcon.classList.replace("fa-volume-xmark", "fa-volume-high");
+          audioIcon.title = "Click to mute";
+        } else {
+          audioElement.muted = true;
+          audioIcon.classList.replace("fa-volume-high", "fa-volume-xmark");
+          audioIcon.title = "Click to unmute";
         }
-
-        userInput.value = "";
-        selectedFile = null;
-    });
-
-    imageIcon.addEventListener("click", () => {
-        const input = document.createElement("input");
-        input.type = "file";
-        input.accept = "image/*";
-        input.onchange = () => {
-            selectedFile = input.files[0];
-            if (selectedFile) showFilePreview(selectedFile.name, "🖼️");
-        };
-        input.click();
-    });
-
-    fileIcon.addEventListener("click", () => {
-        const input = document.createElement("input");
-        input.type = "file";
-        input.accept = ".pdf,.docx,.pptx,.xlsx";
-        input.onchange = () => {
-            selectedFile = input.files[0];
-            if (selectedFile) showFilePreview(selectedFile.name, "📄");
-        };
-        input.click();
-    });
+      }
+    }
+  });
 });