Update static/application.js

static/application.js

@@ -6,9 +6,9 @@ document.addEventListener("DOMContentLoaded", function () {
     const fileIcon = document.querySelector(".fa-file");
 
     let selectedFile = null;
+    let filePreviewDiv = null;
     let autoScroll = true;
 
-    // Enable auto-scroll unless user scrolls up
     convo.addEventListener("scroll", () => {
         const threshold = 150;
         autoScroll = convo.scrollHeight - convo.scrollTop - convo.clientHeight < threshold;
@@ -20,7 +20,7 @@ document.addEventListener("DOMContentLoaded", function () {
         }
     }
 
-    function createMessageBubble(text, sender, audioUrl = null) {
+    function createMessageBubble(text, sender, audioUrl = null, fileName = null) {
         const bubble = document.createElement("div");
         bubble.classList.add("bubble", sender === "You" ? "right" : "left");
 
@@ -28,12 +28,20 @@ document.addEventListener("DOMContentLoaded", function () {
         label.className = "label";
         label.innerText = sender;
 
-        const messageText = document.createElement("div");
-        messageText.className = "text";
-        messageText.innerText = text;
+        const textDiv = document.createElement("div");
+        textDiv.className = "text";
+        textDiv.innerText = text;
 
         bubble.appendChild(label);
-        bubble.appendChild(messageText);
+        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");
@@ -46,6 +54,20 @@ document.addEventListener("DOMContentLoaded", function () {
 
         convo.appendChild(bubble);
         scrollToBottom();
+        return bubble;
+    }
+
+    function showFilePreview(filename, icon = "📎") {
+        if (filePreviewDiv) filePreviewDiv.remove();
+
+        filePreviewDiv = document.createElement("div");
+        filePreviewDiv.classList.add("bubble", "right");
+        filePreviewDiv.innerHTML = `
+            <div class="label">You</div>
+            <div class="text">${icon} <strong>Selected:</strong> ${filename}</div>
+        `;
+        convo.appendChild(filePreviewDiv);
+        scrollToBottom();
     }
 
     sendBtn.addEventListener("click", async () => {
@@ -53,11 +75,18 @@ document.addEventListener("DOMContentLoaded", function () {
         if (!question) return;
 
         if (!selectedFile) {
-            alert("Please upload a file or image.");
+            alert("Please upload a file before asking a question.");
             return;
         }
 
-        createMessageBubble(question, "You");
+        // Remove preview
+        if (filePreviewDiv) filePreviewDiv.remove();
+
+        // Show user message + file
+        createMessageBubble(question, "You", null, selectedFile.name);
+
+        // Show thinking placeholder
+        const thinkingBubble = createMessageBubble("Chris is thinking...", "Chris");
 
         const formData = new FormData();
         formData.append("question", question);
@@ -66,29 +95,39 @@ document.addEventListener("DOMContentLoaded", function () {
         try {
             const response = await fetch("/predict", {
                 method: "POST",
-                body: formData,
+                body: formData
             });
+
             const result = await response.json();
 
-            if (result.answer) {
-                createMessageBubble(result.answer, "Chris", result.audio);
-            } else {
-                createMessageBubble("No response received.", "Chris");
+            // Replace thinking bubble with actual answer
+            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) {
-            createMessageBubble("Error connecting to server.", "Chris");
+            thinkingBubble.querySelector(".text").innerText = "⚠️ Chris had trouble connecting.";
         }
 
         userInput.value = "";
         selectedFile = null;
     });
 
-    // File picker handlers
+    // File icon handlers
     imageIcon.addEventListener("click", () => {
         const input = document.createElement("input");
         input.type = "file";
         input.accept = "image/*";
-        input.onchange = () => selectedFile = input.files[0];
+        input.onchange = () => {
+            selectedFile = input.files[0];
+            if (selectedFile) showFilePreview(selectedFile.name, "🖼️");
+        };
         input.click();
     });
 
@@ -96,7 +135,10 @@ document.addEventListener("DOMContentLoaded", function () {
         const input = document.createElement("input");
         input.type = "file";
         input.accept = ".pdf,.docx,.pptx,.xlsx";
-        input.onchange = () => selectedFile = input.files[0];
+        input.onchange = () => {
+            selectedFile = input.files[0];
+            if (selectedFile) showFilePreview(selectedFile.name, "📄");
+        };
         input.click();
     });
 });