Update static/appS.js

static/appS.js

@@ -7,11 +7,10 @@ document.addEventListener('DOMContentLoaded', () => {
     const sendButtons = document.querySelectorAll('.sendingQA');
     const SummarizeInput = document.querySelector(".SummarizeInput");
     const CaptionInput = document.querySelector(".CaptionInput");
-    var gotItButton = document.querySelector('.explainChoix button');
-    var explainChoixDiv = document.querySelector('.explainChoix');
+    const gotItButton = document.querySelector('.explainChoix button');
+    const explainChoixDiv = document.querySelector('.explainChoix');
 
     let selectedFile = null;
-    let filePreviewBubble = null;
 
     // ✅ Default mode: Summarize selected
     const summarizeRadio = document.getElementById('summarize-radio');
@@ -66,23 +65,21 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 
     function displayFilePreview(file) {
-        if (filePreviewBubble) filePreviewBubble.remove();
+        // ✅ DO NOT remove old previews anymore
+        const previewBubble = document.createElement("div");
+        previewBubble.className = "file-preview-bubble bubble right";
+        previewBubble.style.display = "flex";
+        previewBubble.style.flexDirection = "column";
+        previewBubble.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%";
-                img.style.height = "200px"; // You can adjust the height if you want
-                img.style.objectFit = "cover"; // Makes it fill nicely
+                img.style.height = "200px";
+                img.style.objectFit = "cover";
                 img.style.borderRadius = "10px";
                 img.style.marginBottom = "8px";
 
@@ -90,18 +87,20 @@ document.addEventListener('DOMContentLoaded', () => {
                 text.textContent = `📎 Selected image: ${file.name}`;
                 text.style.fontSize = "13px";
 
-                filePreviewBubble.appendChild(img);
-                filePreviewBubble.appendChild(text);
-                convo.appendChild(filePreviewBubble);
+                previewBubble.appendChild(img);
+                previewBubble.appendChild(text);
+                convo.appendChild(previewBubble);
                 convo.scrollTop = convo.scrollHeight;
             };
             reader.readAsDataURL(file);
         } else {
-            // Document preview stays as text
-            filePreviewBubble = createMessageBubble(
-                `📎 Selected document: ${file.name}`,
-                "You"
-            );
+            const text = document.createElement("span");
+            text.textContent = `📎 Selected document: ${file.name}`;
+            text.style.fontSize = "13px";
+
+            previewBubble.appendChild(text);
+            convo.appendChild(previewBubble);
+            convo.scrollTop = convo.scrollHeight;
         }
     }
 
@@ -161,13 +160,11 @@ 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
                 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);
             }
@@ -210,9 +207,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 try {
                     const error = await response.json();
                     errorMessage = error.detail || error.error || errorMessage;
-                } catch (e) {
-                    // response not JSON
-                }
+                } catch (e) {}
                 throw new Error(errorMessage);
             }
 
@@ -237,6 +232,8 @@ document.addEventListener('DOMContentLoaded', () => {
         } catch (error) {
             thinkingBubble.remove();
             createMessageBubble(`⚠️ Error: ${error.message}`, "Aidan");
+        } finally {
+            selectedFile = null; // ✅ Reset selected file AFTER send
         }
     }
 
@@ -262,4 +259,4 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     `;
     document.head.appendChild(style);
-});
+});