Update static/appS.js

static/appS.js

@@ -11,6 +11,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const explainChoixDiv = document.getElementById('explainChoix');
 
     let selectedFile = null;
+    let filePreviewBubble = null;
 
     // ✅ Default mode: Summarize selected
     const summarizeRadio = document.getElementById('summarize-radio');
@@ -43,89 +44,41 @@ document.addEventListener('DOMContentLoaded', () => {
     fileUpload.addEventListener('change', (e) => {
         if (e.target.files.length) {
             selectedFile = e.target.files[0];
-            handleFileUpload(selectedFile);
+            displayFilePreview(selectedFile);
         }
     });
 
     imageUpload.addEventListener('change', (e) => {
         if (e.target.files.length) {
             selectedFile = e.target.files[0];
-            handleFileUpload(selectedFile);
+            displayFilePreview(selectedFile);
         }
     });
 
-    // "Got it" button
-    gotItButton.addEventListener('click', () => {
-        explainChoixDiv.style.display = "none";
-    });
-
-    async function handleFileUpload(file) {
-        if (!file) return;
-
-        const isImage = file.type.startsWith('image/');
-        const icon = isImage ? '🖼️' : '📎';
-
-        // User bubble: Uploaded file
-        createMessageBubble(`${icon} Uploaded: ${file.name}`, "You");
-
-        const isSummarizeMode = document.querySelector('input[name="mode"]:checked').value === 'Summarize';
-        const endpoint = isSummarizeMode ? '/summarize/' : '/imagecaption/';
-        const thinkingText = isSummarizeMode ? 'Analyzing document... <div class="loader"></div>' : 'Analyzing image... <div class="loader"></div>';
-
-        // AI thinking bubble
-        const thinkingBubble = createMessageBubble(thinkingText, "Aidan");
-
-        const formData = new FormData();
-        formData.append('file', file);
-
-        if (isSummarizeMode) {
-            const selectedLength = document.querySelector('input[name="length"]:checked')?.value || 'medium';
-            formData.append('length', selectedLength);
-        }
-
-        try {
-            const response = await fetch(endpoint, {
-                method: 'POST',
-                body: formData
-            });
-
-            if (!response.ok) {
-                let errorMessage = 'Request failed';
-                try {
-                    const error = await response.json();
-                    errorMessage = error.detail || error.error || errorMessage;
-                } catch (e) {}
-                throw new Error(errorMessage);
+    // "Got it" button to hide explanation div
+    if (gotItButton) {
+        gotItButton.addEventListener('click', () => {
+            if (explainChoixDiv) {
+                explainChoixDiv.style.display = "none";
             }
+        });
+    }
 
-            const result = await response.json();
-            thinkingBubble.remove();
+    // Send button handlers
+    sendButtons.forEach(button => {
+        button.addEventListener('click', handleSubmit);
+    });
 
-            // Aidan's response bubble
-            if (isSummarizeMode) {
-                createMessageBubble(
-                    result.summary || "No summary generated.",
-                    "Aidan",
-                    result.audioUrl,
-                    result.pdfUrl
-                );
-            } else {
-                createMessageBubble(
-                    result.caption || result.answer || "No caption generated.",
-                    "Aidan",
-                    result.audio,
-                    null
-                );
-            }
-        } catch (error) {
-            thinkingBubble.remove();
-            createMessageBubble(`⚠️ Error: ${error.message}`, "Aidan");
-        } finally {
-            resetFileInputs();
-        }
+    function displayFilePreview(file) {
+        if (filePreviewBubble) filePreviewBubble.remove();
+
+        filePreviewBubble = createMessageBubble(
+            `📎 Selected ${file.type.startsWith('image/') ? 'image' : 'document'}: ${file.name}`,
+            "You"
+        );
     }
 
-    function createMessageBubble(text, sender = "You", audioSrc = null, fileUrl = null) {
+    function createMessageBubble(text, sender = "You", audioSrc = null, fileName = null) {
         const bubble = document.createElement('div');
         bubble.className = `bubble ${sender === "You" ? "right" : "left"}`;
         bubble.style.maxWidth = "50%";
@@ -138,15 +91,19 @@ document.addEventListener('DOMContentLoaded', () => {
         const message = document.createElement('div');
         message.className = "text";
         message.style.whiteSpace = "pre-wrap";
-        message.innerHTML = text;
+        message.style.display = "flex";
+        message.style.flexDirection = "column";
+
+        const textSpan = document.createElement("span");
+        textSpan.innerHTML = text;
+        message.appendChild(textSpan);
 
-        // Extra controls (audio/PDF download)
-        if (sender !== "You" && (audioSrc || fileUrl)) {
+        if (sender !== "You" && (audioSrc || fileName)) {
             const iconContainer = document.createElement('div');
             iconContainer.style.marginTop = "10px";
             iconContainer.style.display = "flex";
-            iconContainer.style.gap = "15px";
             iconContainer.style.justifyContent = "flex-end";
+            iconContainer.style.gap = "15px";
 
             if (audioSrc) {
                 const audio = new Audio(audioSrc);
@@ -159,21 +116,25 @@ document.addEventListener('DOMContentLoaded', () => {
                 audioIcon.addEventListener("click", () => {
                     if (audio.paused) {
                         audio.play();
-                        audioIcon.title = "Pause Audio";
+                        audioIcon.classList.remove("fa-volume-xmark");
+                        audioIcon.classList.add("fa-volume-high");
+                        audioIcon.title = "Mute Audio";
                     } else {
                         audio.pause();
-                        audioIcon.title = "Play Audio";
+                        audioIcon.classList.remove("fa-volume-high");
+                        audioIcon.classList.add("fa-volume-xmark");
+                        audioIcon.title = "Unmute Audio";
                     }
                 });
 
                 iconContainer.appendChild(audioIcon);
             }
 
-            if (fileUrl) {
+            if (fileName) {
                 const downloadLink = document.createElement('a');
-                downloadLink.href = fileUrl;
-                downloadLink.setAttribute('download', 'summary.pdf');
+                downloadLink.href = fileName;
                 downloadLink.target = "_blank";
+                downloadLink.download = "summary.pdf"; // ✅ Suggest filename to browser
 
                 const downloadIcon = document.createElement("i");
                 downloadIcon.className = "fa-solid fa-file-arrow-down";
@@ -194,10 +155,71 @@ document.addEventListener('DOMContentLoaded', () => {
         return bubble;
     }
 
+    async function handleSubmit() {
+        if (!selectedFile) {
+            alert("Please upload a file first");
+            return;
+        }
+
+        const isSummarizeMode = document.querySelector('input[name="mode"]:checked').value === 'Summarize';
+        const endpoint = isSummarizeMode ? '/summarize/' : '/imagecaption/';
+        const thinkingText = isSummarizeMode ? 'Processing document...' : "Generating caption... <div class='loader'></div>";
+        const senderName = "Aidan";
+
+        const thinkingBubble = createMessageBubble(thinkingText, senderName);
+
+        const formData = new FormData();
+        formData.append('file', selectedFile);
+        if (isSummarizeMode) formData.append('length', 'medium');
+
+        try {
+            const response = await fetch(endpoint, {
+                method: 'POST',
+                body: formData
+            });
+
+            if (!response.ok) {
+                let errorMessage = 'Request failed';
+                try {
+                    const error = await response.json();
+                    errorMessage = error.detail || error.error || errorMessage;
+                } catch (e) {
+                    // response not JSON
+                }
+                throw new Error(errorMessage);
+            }
+
+            const result = await response.json();
+            thinkingBubble.remove();
+
+            if (isSummarizeMode) {
+                createMessageBubble(
+                    result.summary || "No summary generated.",
+                    "Aidan",
+                    result.audioUrl,
+                    result.pdfUrl
+                );
+            } else {
+                createMessageBubble(
+                    result.caption || result.answer || "No caption generated.",
+                    "Aidan",
+                    result.audio,
+                    null
+                );
+            }
+        } catch (error) {
+            thinkingBubble.remove();
+            createMessageBubble(`⚠️ Error: ${error.message}`, "Aidan");
+        } finally {
+            resetFileInputs(); // ✅ Only reset upload inputs, KEEP preview bubble
+        }
+    }
+
     function resetFileInputs() {
         selectedFile = null;
         fileUpload.value = '';
         imageUpload.value = '';
+        // ✅ DO NOT remove file preview bubble anymore
     }
 
     // Loader CSS
@@ -216,6 +238,10 @@ document.addEventListener('DOMContentLoaded', () => {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
+        .audio-toggle {
+            cursor: pointer;
+            transition: all 0.2s;
+        }
     `;
     document.head.appendChild(style);
-});
+});