Update static/appS.js

static/appS.js

@@ -11,7 +11,6 @@ document.addEventListener('DOMContentLoaded', () => {
     const explainChoixDiv = document.getElementById('explainChoix');
 
     let selectedFile = null;
-    let filePreviewBubble = null;
 
     // ✅ Default mode: Summarize selected
     const summarizeRadio = document.getElementById('summarize-radio');
@@ -44,14 +43,14 @@ document.addEventListener('DOMContentLoaded', () => {
     fileUpload.addEventListener('change', (e) => {
         if (e.target.files.length) {
             selectedFile = e.target.files[0];
-            displayFilePreview(selectedFile);
+            handleFileUpload(selectedFile);
         }
     });
 
     imageUpload.addEventListener('change', (e) => {
         if (e.target.files.length) {
             selectedFile = e.target.files[0];
-            displayFilePreview(selectedFile);
+            handleFileUpload(selectedFile);
         }
     });
 
@@ -60,17 +59,70 @@ document.addEventListener('DOMContentLoaded', () => {
         explainChoixDiv.style.display = "none";
     });
 
-    // Send button handlers
-    sendButtons.forEach(button => {
-        button.addEventListener('click', handleSubmit);
-    });
+    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);
+            }
 
-    function displayFilePreview(file) {
-        if (filePreviewBubble) filePreviewBubble.remove();
-        filePreviewBubble = createMessageBubble(
-            `📎 Selected ${file.type.startsWith('image/') ? 'image' : 'document'}: ${file.name}`,
-            "You"
-        );
+            const result = await response.json();
+            thinkingBubble.remove();
+
+            // 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 createMessageBubble(text, sender = "You", audioSrc = null, fileUrl = null) {
@@ -86,19 +138,15 @@ document.addEventListener('DOMContentLoaded', () => {
         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);
+        message.innerHTML = text;
 
+        // Extra controls (audio/PDF download)
         if (sender !== "You" && (audioSrc || fileUrl)) {
             const iconContainer = document.createElement('div');
             iconContainer.style.marginTop = "10px";
             iconContainer.style.display = "flex";
-            iconContainer.style.justifyContent = "flex-end";
             iconContainer.style.gap = "15px";
+            iconContainer.style.justifyContent = "flex-end";
 
             if (audioSrc) {
                 const audio = new Audio(audioSrc);
@@ -111,14 +159,10 @@ document.addEventListener('DOMContentLoaded', () => {
                 audioIcon.addEventListener("click", () => {
                     if (audio.paused) {
                         audio.play();
-                        audioIcon.classList.remove("fa-volume-xmark");
-                        audioIcon.classList.add("fa-volume-high");
-                        audioIcon.title = "Mute Audio";
+                        audioIcon.title = "Pause Audio";
                     } else {
                         audio.pause();
-                        audioIcon.classList.remove("fa-volume-high");
-                        audioIcon.classList.add("fa-volume-xmark");
-                        audioIcon.title = "Unmute Audio";
+                        audioIcon.title = "Play Audio";
                     }
                 });
 
@@ -150,74 +194,10 @@ 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) {
-            // Grab length choice if exists (short, medium, long)
-            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);
-            }
-
-            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();
-        }
-    }
-
     function resetFileInputs() {
         selectedFile = null;
         fileUpload.value = '';
         imageUpload.value = '';
-        // 🛑 File preview bubble stays!
     }
 
     // Loader CSS
@@ -236,10 +216,6 @@ document.addEventListener('DOMContentLoaded', () => {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
-        .audio-toggle {
-            cursor: pointer;
-            transition: all 0.2s;
-        }
     `;
     document.head.appendChild(style);
 });