Update static/application.js

static/application.js

@@ -1,213 +1,110 @@
 document.addEventListener("DOMContentLoaded", () => {
   const convo = document.querySelector(".convo");
-  const input = document.querySelector("#questionInput");
+  const input = document.querySelector("#user-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);
+  const fileBtn = document.querySelector("#file-btn");
+  const imageBtn = document.querySelector("#image-btn");
+  const fileInput = document.querySelector("#file-upload");
+  const imageInput = document.querySelector("#image-upload");
 
-  // 📄 Handle document icon click
+  // --- File Upload Logic (Supports Re-selection) ---
   fileBtn.addEventListener("click", () => {
-    fileInput.value = "";
-    fileInput.accept = ".pdf,.docx,.pptx,.xlsx";
+    fileInput.value = ""; // Reset to allow same-file reselection
     fileInput.click();
   });
 
-  // 🖼️ Handle image icon click
   imageBtn.addEventListener("click", () => {
-    fileInput.value = "";
-    fileInput.accept = "image/*";
-    fileInput.click();
+    imageInput.value = ""; // Reset to allow same-file reselection
+    imageInput.click();
   });
 
-  // When file is selected
-  fileInput.addEventListener("change", () => {
-    const file = fileInput.files[0];
-    if (file) {
-      selectedFile = file;
-      if (filePreviewBubble) filePreviewBubble.remove();
+  // Handle file/image selection
+  const handleFileUpload = (file, type) => {
+    if (!file) return;
+    createFilePreview(file.name, type);
+  };
 
-      filePreviewBubble = document.createElement("div");
-      filePreviewBubble.className = "file-preview-bubble bubble right";
-      filePreviewBubble.textContent = 📎 Selected: ${file.name};
-      convo.appendChild(filePreviewBubble);
-      convo.scrollTop = convo.scrollHeight;
-    }
-  });
+  fileInput.addEventListener("change", () => handleFileUpload(fileInput.files[0], "file"));
+  imageInput.addEventListener("change", () => handleFileUpload(imageInput.files[0], "image"));
 
-  // 🖱️ Drag & drop file support
+  // --- Drag & Drop Support ---
   convo.addEventListener("dragover", (e) => {
     e.preventDefault();
-    convo.classList.add("drag-over");
+    convo.classList.add("drag-active");
   });
 
   convo.addEventListener("dragleave", () => {
-    convo.classList.remove("drag-over");
+    convo.classList.remove("drag-active");
   });
 
   convo.addEventListener("drop", (e) => {
     e.preventDefault();
-    convo.classList.remove("drag-over");
-
-    const file = e.dataTransfer.files[0];
-    if (file) {
-      selectedFile = file;
-
-      if (filePreviewBubble) filePreviewBubble.remove();
+    convo.classList.remove("drag-active");
 
-      filePreviewBubble = document.createElement("div");
-      filePreviewBubble.className = "file-preview-bubble bubble right";
-      filePreviewBubble.textContent = 📎 Selected: ${file.name};
-      convo.appendChild(filePreviewBubble);
-      convo.scrollTop = convo.scrollHeight;
+    const files = e.dataTransfer.files;
+    if (files.length > 0) {
+      const file = files[0];
+      const type = file.type.startsWith("image") ? "image" : "file";
+      createFilePreview(file.name, type);
     }
   });
 
-  function createMessageBubble(text, sender = "You", audioSrc = null, fileName = null) {
+  // --- Chat Bubbles & Audio Toggle ---
+  function createMessageBubble(message, isUser = true, audioSrc = 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";
-
-    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);
-
-      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 = "20px";
-        icon.style.marginLeft = "40px";
-
-        let currentAudio = new Audio(audioSrc);
-        currentAudio.play();
-
-        let isMuted = false;
-        icon.addEventListener("click", () => {
-          if (isMuted) {
-            currentAudio = new Audio(audioSrc); 
-            currentAudio.play();
-            isMuted = false;
-            icon.classList.replace("fa-volume-xmark", "fa-volume-high");
-            icon.title = "Click to mute";
-          } else {
-            currentAudio.pause();
-            isMuted = true;
-            icon.classList.replace("fa-volume-high", "fa-volume-xmark");
-            icon.title = "Click to unmute";
-          }
-        });
-
-        message.appendChild(icon);
-      }
+    bubble.className = `bubble ${isUser ? "right" : "left"}`;
+    bubble.innerHTML = `<span>${message}</span>`;
+
+    if (audioSrc && !isUser) {
+      const audio = document.createElement("audio");
+      audio.src = audioSrc;
+      audio.autoplay = true;
+      audio.currentTime = 0; // Restarts audio when unmuted
+
+      const audioIcon = document.createElement("i");
+      audioIcon.className = "fa-solid fa-volume-high audio-toggle";
+      audioIcon.title = "Click to mute";
+
+      bubble.appendChild(audio);
+      bubble.appendChild(audioIcon);
+
+      audioIcon.addEventListener("click", () => {
+        audio.muted = !audio.muted;
+        if (!audio.muted) audio.currentTime = 0; // Restart on unmute
+        audioIcon.classList.toggle("fa-volume-high");
+        audioIcon.classList.toggle("fa-volume-xmark");
+        audioIcon.title = audio.muted ? "Click to unmute" : "Click to mute";
+      });
     }
 
-    bubble.appendChild(label);
-    bubble.appendChild(message);
     convo.appendChild(bubble);
     convo.scrollTop = convo.scrollHeight;
-    return bubble;
   }
 
-  // 🧠 Send question
-  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;
-    }
-
-    createMessageBubble(question, "You", null, selectedFile.name);
-    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
-      });
+  // --- Send Message ---
+  function sendMessage() {
+    const message = input.value.trim();
+    if (!message && !fileInput.files.length && !imageInput.files.length) return;
 
-      const result = await response.json();
-      const answerText = result.answer || "No response.";
-      const audioSrc = result.audio || null;
+    if (message) createMessageBubble(message, true);
+    if (fileInput.files.length) handleFileUpload(fileInput.files[0], "file");
+    if (imageInput.files.length) handleFileUpload(imageInput.files[0], "image");
 
-      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";
-
-        let currentAudio = new Audio(audioSrc);
-        currentAudio.play();
-
-        let isMuted = false;
-        icon.addEventListener("click", () => {
-          if (isMuted) {
-            currentAudio = new Audio(audioSrc); // restart
-            currentAudio.play();
-            isMuted = false;
-            icon.classList.replace("fa-volume-xmark", "fa-volume-high");
-            icon.title = "Click to mute";
-          } else {
-            currentAudio.pause();
-            isMuted = 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.";
-    }
+    // Simulate bot response
+    setTimeout(() => {
+      createMessageBubble("Here's your answer!", false, "/static/audio/response.mp3");
+    }, 1000);
 
+    // Reset inputs
     input.value = "";
-  });
-});
+    fileInput.value = "";
+    imageInput.value = "";
+  }
 
+  // Event listeners
+  sendBtn.addEventListener("click", sendMessage);
+  input.addEventListener("keydown", (e) => e.key === "Enter" && sendMessage());
+});
 
  /*
 document.addEventListener("DOMContentLoaded", () => {