Update static/appS.js

static/appS.js

@@ -11,6 +11,7 @@ document.addEventListener('DOMContentLoaded', () => {
     var explainChoixDiv = document.querySelector('.explainChoix');
 
     let selectedFile = null;
+    let filePreviewBubble = null;
 
     // ✅ Default mode: Summarize selected
     const summarizeRadio = document.getElementById('summarize-radio');
@@ -43,12 +44,14 @@ document.addEventListener('DOMContentLoaded', () => {
     fileUpload.addEventListener('change', (e) => {
         if (e.target.files.length) {
             selectedFile = e.target.files[0];
+            displayFilePreview(selectedFile);
         }
     });
 
     imageUpload.addEventListener('change', (e) => {
         if (e.target.files.length) {
             selectedFile = e.target.files[0];
+            displayFilePreview(selectedFile);
         }
     });
 
@@ -63,16 +66,18 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 
     function displayFilePreview(file) {
-        const newBubble = document.createElement("div");
-        newBubble.className = "file-preview-bubble bubble right";
-        newBubble.style.display = "flex";
-        newBubble.style.flexDirection = "column";
-        newBubble.style.maxWidth = "50%";
+        if (filePreviewBubble) filePreviewBubble.remove();
 
         // If it's an image
         if (file.type.startsWith('image/')) {
             const reader = new FileReader();
             reader.onload = (e) => {
+                filePreviewBubble = document.createElement("div");
+                filePreviewBubble.className = "file-preview-bubble bubble right";
+                filePreviewBubble.style.display = "flex";
+                filePreviewBubble.style.flexDirection = "column";
+                filePreviewBubble.style.maxWidth = "50%";
+
                 const img = document.createElement("img");
                 img.src = e.target.result;
                 img.style.width = "100%";
@@ -85,81 +90,18 @@ document.addEventListener('DOMContentLoaded', () => {
                 text.textContent = `📎 Selected image: ${file.name}`;
                 text.style.fontSize = "13px";
 
-                newBubble.appendChild(img);
-                newBubble.appendChild(text);
-                convo.appendChild(newBubble);
+                filePreviewBubble.appendChild(img);
+                filePreviewBubble.appendChild(text);
+                convo.appendChild(filePreviewBubble);
                 convo.scrollTop = convo.scrollHeight;
             };
             reader.readAsDataURL(file);
         } else {
             // Document preview stays as text
-            const textPreview = `📎 Selected document: ${file.name}`;
-            const textNode = document.createElement('span');
-            textNode.textContent = textPreview;
-            newBubble.appendChild(textNode);
-            convo.appendChild(newBubble);
-            convo.scrollTop = convo.scrollHeight;
-        }
-    }
-
-    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... <div class="loader"></div>' : "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');
-
-        // Display file preview in new bubble
-        displayFilePreview(selectedFile);
-
-        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");
+            filePreviewBubble = createMessageBubble(
+                `📎 Selected document: ${file.name}`,
+                "You"
+            );
         }
     }
 
@@ -219,7 +161,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 const downloadLink = document.createElement('a');
                 downloadLink.href = fileName;
                 downloadLink.target = "_blank";
-                //downloadLink.download = "summary.pdf"; // ✅ Suggest filename to browser
+                downloadLink.download = "summary.pdf"; // ✅ Suggest filename to browser
 
                 const downloadIcon = document.createElement("i");
                 downloadIcon.className = "fa-solid fa-file-arrow-down";
@@ -240,6 +182,64 @@ 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... <div class="loader"></div>' : "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");
+        }
+    }
+
     // Loader CSS
     const style = document.createElement('style');
     style.textContent = `