Update static/application.js

static/application.js

@@ -1,112 +1,3 @@
-document.addEventListener("DOMContentLoaded", () => {
-  const convo = document.querySelector(".convo");
-  const input = document.querySelector("#user-input");
-  const sendBtn = document.querySelector(".sendingQA");
-  const fileBtn = document.querySelector("#file-btn");
-  const imageBtn = document.querySelector("#image-btn");
-  const fileInput = document.querySelector("#file-upload");
-  const imageInput = document.querySelector("#image-upload");
-
-  // --- File Upload Logic (Supports Re-selection) ---
-  fileBtn.addEventListener("click", () => {
-    fileInput.value = ""; // Reset to allow same-file reselection
-    fileInput.click();
-  });
-
-  imageBtn.addEventListener("click", () => {
-    imageInput.value = ""; // Reset to allow same-file reselection
-    imageInput.click();
-  });
-
-  // Handle file/image selection
-  const handleFileUpload = (file, type) => {
-    if (!file) return;
-    createFilePreview(file.name, type);
-  };
-
-  fileInput.addEventListener("change", () => handleFileUpload(fileInput.files[0], "file"));
-  imageInput.addEventListener("change", () => handleFileUpload(imageInput.files[0], "image"));
-
-  // --- Drag & Drop Support ---
-  convo.addEventListener("dragover", (e) => {
-    e.preventDefault();
-    convo.classList.add("drag-active");
-  });
-
-  convo.addEventListener("dragleave", () => {
-    convo.classList.remove("drag-active");
-  });
-
-  convo.addEventListener("drop", (e) => {
-    e.preventDefault();
-    convo.classList.remove("drag-active");
-
-    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);
-    }
-  });
-
-  // --- Chat Bubbles & Audio Toggle ---
-  function createMessageBubble(message, isUser = true, audioSrc = null) {
-    const bubble = document.createElement("div");
-    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";
-      });
-    }
-
-    convo.appendChild(bubble);
-    convo.scrollTop = convo.scrollHeight;
-  }
-
-  // --- Send Message ---
-  function sendMessage() {
-    const message = input.value.trim();
-    if (!message && !fileInput.files.length && !imageInput.files.length) return;
-
-    if (message) createMessageBubble(message, true);
-    if (fileInput.files.length) handleFileUpload(fileInput.files[0], "file");
-    if (imageInput.files.length) handleFileUpload(imageInput.files[0], "image");
-
-    // 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", () => {
   const convo = document.querySelector(".convo");
   const input = document.querySelector(".qt input");
@@ -117,27 +8,16 @@ document.addEventListener("DOMContentLoaded", () => {
   let selectedFile = null;
   let filePreviewBubble = null;
 
-  // Create a hidden input
+  // 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);
 
-  // Choose document
-  fileBtn.addEventListener("click", () => {
-    fileInput.value = ""; // ✅ allow selecting same file again
-    fileInput.accept = ".pdf,.docx,.pptx,.xlsx";
-    fileInput.click();
-  });
-
-  // Choose image
-  imageBtn.addEventListener("click", () => {
-    fileInput.value = "";
-    fileInput.accept = "image/*";
-    fileInput.click();
-  });
+  fileBtn.addEventListener("click", () => fileInput.click());
+  imageBtn.addEventListener("click", () => fileInput.click());
 
-  // Handle file selection
   fileInput.addEventListener("change", () => {
     const file = fileInput.files[0];
     if (file) {
@@ -152,34 +32,6 @@ document.addEventListener("DOMContentLoaded", () => {
     }
   });
 
-  // Drag & drop support
-  convo.addEventListener("dragover", (e) => {
-    e.preventDefault();
-    convo.classList.add("drag-over");
-  });
-
-  convo.addEventListener("dragleave", () => {
-    convo.classList.remove("drag-over");
-  });
-
-  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();
-
-      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"}`;
@@ -190,10 +42,10 @@ document.addEventListener("DOMContentLoaded", () => {
 
     const message = document.createElement("div");
     message.className = "text";
-    message.style.whiteSpace = "pre-wrap";
+    message.style.whiteSpace = "pre-wrap"; // preserve line breaks
 
     if (sender === "You") {
-      const fileLine = fileName ? `📎 Selected file: ${fileName}\n` : "";
+      let fileLine = fileName ? `📎 Selected file: ${fileName}\n` : "";
       message.innerText = `${fileLine}❓ ${text}`;
     } else {
       message.style.display = "flex";
@@ -211,23 +63,14 @@ document.addEventListener("DOMContentLoaded", () => {
         icon.style.cursor = "pointer";
         icon.style.fontSize = "18px";
 
-        let currentAudio = new Audio(audioSrc);
-        currentAudio.play();
+        const audio = new Audio(audioSrc);
+        audio.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";
-          }
+          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.appendChild(icon);
@@ -250,21 +93,21 @@ document.addEventListener("DOMContentLoaded", () => {
       return;
     }
 
+    // Remove file preview bubble
     if (filePreviewBubble) {
       filePreviewBubble.remove();
       filePreviewBubble = null;
     }
 
+    // User message with file info
     createMessageBubble(question, "You", null, selectedFile.name);
-    const thinkingBubble = createMessageBubble("🧠 Let me think...", "Chris");
 
-    const wrappedFile = new File([selectedFile], selectedFile.name, {
-      type: selectedFile.type,
-    });
+    // Chris is thinking...
+    const thinkingBubble = createMessageBubble("Wait , Let me think 🤔...", "Chris");
 
     const formData = new FormData();
     formData.append("question", question);
-    formData.append("file", wrappedFile);
+    formData.append("file", selectedFile);
 
     try {
       const response = await fetch("/predict", {
@@ -276,6 +119,7 @@ document.addEventListener("DOMContentLoaded", () => {
       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;
 
@@ -287,35 +131,26 @@ document.addEventListener("DOMContentLoaded", () => {
         icon.style.fontSize = "18px";
         icon.style.marginLeft = "10px";
 
-        let currentAudio = new Audio(audioSrc);
-        currentAudio.play();
+        const audio = new Audio(audioSrc);
+        audio.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";
-          }
+          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;
   });
 });