Update static/appS.js

static/appS.js

@@ -7,12 +7,16 @@ document.addEventListener('DOMContentLoaded', () => {
     const sendButtons = document.querySelectorAll('.sendingQA');
     const SummarizeInput = document.querySelector(".SummarizeInput");
     const CaptionInput = document.querySelector(".CaptionInput");
-    const gotItButton = document.querySelector('.explainChoix Botton'); // ✅ Button to hide explain div
-    const explainChoixDiv = document.querySelector('.explainChoix'); // ✅ Div to hide
+    const gotItButton = document.getElementById('got-it-btn');
+    const explainChoixDiv = document.getElementById('explainChoix');
 
     let selectedFile = null;
     let filePreviewBubble = null;
 
+    // ✅ Default mode: Summarize selected
+    const summarizeRadio = document.getElementById('summarize-radio');
+    if (summarizeRadio) summarizeRadio.checked = true;
+
     // Mode switching
     document.querySelectorAll('.select-options input[name="mode"]').forEach(radio => {
         radio.addEventListener('change', (e) => {
@@ -51,9 +55,7 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     });
 
-    // ✅ REMOVE Drag & Drop handlers (completely deleted!)
-
-    // ✅ "Got it" button to hide explanation div
+    // "Got it" button to hide explanation div
     if (gotItButton) {
         gotItButton.addEventListener('click', () => {
             if (explainChoixDiv) {
@@ -76,86 +78,83 @@ document.addEventListener('DOMContentLoaded', () => {
         );
     }
 
-   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%";
-    bubble.style.wordWrap = "break-word";
-
-    const label = document.createElement('div');
-    label.className = "label";
-    label.textContent = sender;
-
-    const message = document.createElement('div');
-    message.className = "text";
-    message.style.whiteSpace = "pre-wrap";
-    message.style.display = "flex";
-    message.style.flexDirection = "column";
-
-    const textSpan = document.createElement("span");
-    textSpan.innerHTML = text;
-    message.appendChild(textSpan);
-
-    if (sender !== "You" && (audioSrc || fileName)) {
-        const iconContainer = document.createElement('div');
-        iconContainer.style.marginTop = "10px";
-        iconContainer.style.display = "flex";
-        iconContainer.style.justifyContent = "flex-end";
-        iconContainer.style.gap = "15px";
-
-        // 🎵 Audio Icon
-        if (audioSrc) {
-            const audio = new Audio(audioSrc);
-            const audioIcon = document.createElement("i");
-            audioIcon.className = "fa-solid fa-volume-high audio-toggle";
-            audioIcon.title = "Play Audio";
-            audioIcon.style.cursor = "pointer";
-            audioIcon.style.fontSize = "18px";
-
-            audioIcon.addEventListener("click", () => {
-                if (audio.paused) {
-                    audio.play();
-                    audioIcon.classList.remove("fa-volume-xmark");
-                    audioIcon.classList.add("fa-volume-high");
-                    audioIcon.title = "Mute Audio";
-                } else {
-                    audio.pause();
-                    audioIcon.classList.remove("fa-volume-high");
-                    audioIcon.classList.add("fa-volume-xmark");
-                    audioIcon.title = "Unmute Audio";
-                }
-            });
+    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%";
+        bubble.style.wordWrap = "break-word";
+
+        const label = document.createElement('div');
+        label.className = "label";
+        label.textContent = sender;
+
+        const message = document.createElement('div');
+        message.className = "text";
+        message.style.whiteSpace = "pre-wrap";
+        message.style.display = "flex";
+        message.style.flexDirection = "column";
+
+        const textSpan = document.createElement("span");
+        textSpan.innerHTML = text;
+        message.appendChild(textSpan);
+
+        if (sender !== "You" && (audioSrc || fileName)) {
+            const iconContainer = document.createElement('div');
+            iconContainer.style.marginTop = "10px";
+            iconContainer.style.display = "flex";
+            iconContainer.style.justifyContent = "flex-end";
+            iconContainer.style.gap = "15px";
+
+            if (audioSrc) {
+                const audio = new Audio(audioSrc);
+                const audioIcon = document.createElement("i");
+                audioIcon.className = "fa-solid fa-volume-high audio-toggle";
+                audioIcon.title = "Play Audio";
+                audioIcon.style.cursor = "pointer";
+                audioIcon.style.fontSize = "18px";
+
+                audioIcon.addEventListener("click", () => {
+                    if (audio.paused) {
+                        audio.play();
+                        audioIcon.classList.remove("fa-volume-xmark");
+                        audioIcon.classList.add("fa-volume-high");
+                        audioIcon.title = "Mute Audio";
+                    } else {
+                        audio.pause();
+                        audioIcon.classList.remove("fa-volume-high");
+                        audioIcon.classList.add("fa-volume-xmark");
+                        audioIcon.title = "Unmute Audio";
+                    }
+                });
+
+                iconContainer.appendChild(audioIcon);
+            }
 
-            iconContainer.appendChild(audioIcon);
-        }
+            if (fileName) {
+                const downloadLink = document.createElement('a');
+                downloadLink.href = fileName;
+                downloadLink.target = "_blank";
+                downloadLink.download = "summary.pdf"; // ✅ Suggest filename to browser
 
-        // 📥 Download Icon
-        if (fileName) {
-            const downloadLink = document.createElement('a');
-            downloadLink.href = fileName;
-            downloadLink.target = "_blank";
-            downloadLink.title = "Download PDF";
+                const downloadIcon = document.createElement("i");
+                downloadIcon.className = "fa-solid fa-file-arrow-down";
+                downloadIcon.style.fontSize = "18px";
+                downloadIcon.style.cursor = "pointer";
 
-            const downloadIcon = document.createElement("i");
-            downloadIcon.className = "fa-solid fa-file-arrow-down";
-            downloadIcon.style.fontSize = "18px";
-            downloadIcon.style.cursor = "pointer";
+                downloadLink.appendChild(downloadIcon);
+                iconContainer.appendChild(downloadLink);
+            }
 
-            downloadLink.appendChild(downloadIcon);
-            iconContainer.appendChild(downloadLink);
+            message.appendChild(iconContainer);
         }
 
-        message.appendChild(iconContainer);
+        bubble.appendChild(label);
+        bubble.appendChild(message);
+        convo.appendChild(bubble);
+        convo.scrollTop = convo.scrollHeight;
+        return bubble;
     }
 
-    bubble.appendChild(label);
-    bubble.appendChild(message);
-    convo.appendChild(bubble);
-    convo.scrollTop = convo.scrollHeight;
-    return bubble;
-}
-
-
     async function handleSubmit() {
         if (!selectedFile) {
             alert("Please upload a file first");
@@ -165,7 +164,7 @@ document.addEventListener('DOMContentLoaded', () => {
         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 senderName = "Aidan";
 
         const thinkingBubble = createMessageBubble(thinkingText, senderName);
 
@@ -202,16 +201,17 @@ document.addEventListener('DOMContentLoaded', () => {
                 );
             } else {
                 createMessageBubble(
-                    `<strong>Caption:</strong><br><br>${result.answer || result.caption}`,
+                    result.caption || result.answer || "No caption generated.",
                     "Aidan",
-                    result.audio
+                    result.audio,
+                    null
                 );
             }
         } catch (error) {
             thinkingBubble.remove();
-            createMessageBubble(`⚠️ Error: ${error.message}`, senderName);
+            createMessageBubble(`⚠️ Error: ${error.message}`, "Aidan");
         } finally {
-            resetFileInputs();
+            resetFileInputs(); // ✅ Only reset upload inputs, KEEP preview bubble
         }
     }
 
@@ -219,10 +219,7 @@ document.addEventListener('DOMContentLoaded', () => {
         selectedFile = null;
         fileUpload.value = '';
         imageUpload.value = '';
-        if (filePreviewBubble) {
-            filePreviewBubble.remove();
-            filePreviewBubble = null;
-        }
+        // ✅ DO NOT remove file preview bubble anymore
     }
 
     // Loader CSS