Update static/application.js

static/application.js

@@ -1,12 +1,15 @@
 document.addEventListener("DOMContentLoaded", function () {
     const convo = document.querySelector(".convo");
-    const sendBtn = document.getElementById("sendBtn");
-    const userInput = document.getElementById("questionInput");
-    const fileInput = document.getElementById("fileInput");
+    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 autoScroll = true;
 
-    convo.addEventListener('scroll', () => {
+    // Enable auto-scroll unless user scrolls up
+    convo.addEventListener("scroll", () => {
         const threshold = 150;
         autoScroll = convo.scrollHeight - convo.scrollTop - convo.clientHeight < threshold;
     });
@@ -18,62 +21,82 @@ document.addEventListener("DOMContentLoaded", function () {
     }
 
     function createMessageBubble(text, sender, audioUrl = null) {
-        const message = document.createElement("div");
-        message.classList.add("message", sender === "You" ? "user" : "ai");
+        const bubble = document.createElement("div");
+        bubble.classList.add("bubble", sender === "You" ? "right" : "left");
 
         const label = document.createElement("div");
         label.className = "label";
         label.innerText = sender;
-        message.appendChild(label);
 
-        const bubble = document.createElement("div");
-        bubble.className = "bubble";
-        bubble.innerText = text;
-        message.appendChild(bubble);
+        const messageText = document.createElement("div");
+        messageText.className = "text";
+        messageText.innerText = text;
+
+        bubble.appendChild(label);
+        bubble.appendChild(messageText);
 
         if (audioUrl) {
             const audio = document.createElement("audio");
-            audio.src = audioUrl;
             audio.controls = true;
             audio.autoplay = true;
-            audio.style.display = "block";
-            audio.style.marginTop = "8px";
-            message.appendChild(audio);
+            audio.src = audioUrl;
+            audio.style.marginTop = "10px";
+            bubble.appendChild(audio);
         }
 
-        convo.appendChild(message);
+        convo.appendChild(bubble);
         scrollToBottom();
     }
 
     sendBtn.addEventListener("click", async () => {
         const question = userInput.value.trim();
-        const file = fileInput.files[0];
+        if (!question) return;
 
-        if (!question || !file) return;
+        if (!selectedFile) {
+            alert("Please upload a file or image.");
+            return;
+        }
 
         createMessageBubble(question, "You");
 
         const formData = new FormData();
         formData.append("question", question);
-        formData.append("file", file);
+        formData.append("file", selectedFile);
 
         try {
             const response = await fetch("/predict", {
                 method: "POST",
                 body: formData,
             });
-
             const result = await response.json();
+
             if (result.answer) {
                 createMessageBubble(result.answer, "Chris", result.audio);
             } else {
-                createMessageBubble("Sorry, I couldn't find an answer.", "Chris");
+                createMessageBubble("No response received.", "Chris");
             }
         } catch (err) {
             createMessageBubble("Error connecting to server.", "Chris");
         }
 
         userInput.value = "";
-        fileInput.value = "";
+        selectedFile = null;
+    });
+
+    // File picker handlers
+    imageIcon.addEventListener("click", () => {
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = "image/*";
+        input.onchange = () => selectedFile = input.files[0];
+        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];
+        input.click();
     });
 });