Update static/appS.js

static/appS.js

@@ -11,7 +11,6 @@ document.addEventListener('DOMContentLoaded', () => {
     var explainChoixDiv = document.querySelector('.explainChoix');
 
     let selectedFile = null;
-    let filePreviewBubble = null;
 
     // ✅ Default mode: Summarize selected
     const summarizeRadio = document.getElementById('summarize-radio');
@@ -44,14 +43,12 @@ 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);
         }
     });
 
@@ -66,18 +63,16 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 
     function displayFilePreview(file) {
-        if (filePreviewBubble) filePreviewBubble.remove();
+        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 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%";
@@ -90,18 +85,81 @@ document.addEventListener('DOMContentLoaded', () => {
                 text.textContent = `📎 Selected image: ${file.name}`;
                 text.style.fontSize = "13px";
 
-                filePreviewBubble.appendChild(img);
-                filePreviewBubble.appendChild(text);
-                convo.appendChild(filePreviewBubble);
+                newBubble.appendChild(img);
+                newBubble.appendChild(text);
+                convo.appendChild(newBubble);
                 convo.scrollTop = convo.scrollHeight;
             };
             reader.readAsDataURL(file);
         } else {
             // Document preview stays as text
-            filePreviewBubble = createMessageBubble(
-                `📎 Selected document: ${file.name}`,
-                "You"
-            );
+            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");
         }
     }
 
@@ -161,7 +219,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";
@@ -182,64 +240,6 @@ 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 = `