Update static/appS.js

static/appS.js

@@ -7,6 +7,8 @@ document.addEventListener('DOMContentLoaded', () => {
     const sendButtons = document.querySelectorAll('.sendingQA');
     const SummarizeInput = document.querySelector(".SummarizeInput");
     const CaptionInput = document.querySelector(".CaptionInput");
+    const gotItButton = document.getElementById('got-it-btn'); // ✅ Button to hide explain div
+    const explainChoixDiv = document.getElementById('explainChoix'); // ✅ Div to hide
 
     let selectedFile = null;
     let filePreviewBubble = null;
@@ -49,34 +51,16 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     });
 
-    // Drag and drop
-    convo.addEventListener('dragover', (e) => {
-        e.preventDefault();
-        convo.classList.add('drag-over');
-    });
-
-    convo.addEventListener('dragleave', () => {
-        convo.classList.remove('drag-over');
-    });
-
-    convo.addEventListener('drop', (e) => {
-        e.preventDefault();
-        convo.classList.remove('drag-over');
-        if (e.dataTransfer.files.length) {
-            const file = e.dataTransfer.files[0];
-            const dataTransfer = new DataTransfer();
-            dataTransfer.items.add(file);
+    // ✅ REMOVE Drag & Drop handlers (completely deleted!)
 
-            const isSummarizeMode = document.querySelector('input[name="mode"]:checked').value === 'Summarize';
-            if (isSummarizeMode) {
-                fileUpload.files = dataTransfer.files;
-            } else {
-                imageUpload.files = dataTransfer.files;
+    // ✅ "Got it" button to hide explanation div
+    if (gotItButton) {
+        gotItButton.addEventListener('click', () => {
+            if (explainChoixDiv) {
+                explainChoixDiv.style.display = "none";
             }
-            selectedFile = file;
-            displayFilePreview(file);
-        }
-    });
+        });
+    }
 
     // Send button handlers
     sendButtons.forEach(button => {
@@ -92,9 +76,11 @@ document.addEventListener('DOMContentLoaded', () => {
         );
     }
 
-    function createMessageBubble(text, sender = "You", audioSrc = null) {
+    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%"; // ✅ Max width 50% of screen
+        bubble.style.wordWrap = "break-word";
 
         const label = document.createElement('div');
         label.className = "label";
@@ -102,40 +88,66 @@ document.addEventListener('DOMContentLoaded', () => {
 
         const message = document.createElement('div');
         message.className = "text";
+        message.style.whiteSpace = "pre-wrap";
+        message.style.display = "flex";
+        message.style.flexDirection = "column";
 
-        if (sender === "You") {
-            message.textContent = text;
-        } else {
-            message.innerHTML = typeof text === 'string' ? text : 'Processing...';
+        const textSpan = document.createElement("span");
+        textSpan.innerText = text;
+        message.appendChild(textSpan);
+
+        if (sender !== "You") {
+            const iconContainer = document.createElement('div');
+            iconContainer.style.marginTop = "10px";
+            iconContainer.style.display = "flex";
+            iconContainer.style.justifyContent = "flex-end";
+            iconContainer.style.gap = "10px";
 
             if (audioSrc) {
-                const audioContainer = document.createElement('div');
-                audioContainer.style.display = 'flex';
-                audioContainer.style.alignItems = 'center';
-                audioContainer.style.gap = '10px';
-                audioContainer.style.marginTop = '8px';
+                const audioIcon = document.createElement("i");
+                audioIcon.className = "fa-solid fa-volume-high audio-toggle";
+                audioIcon.title = "Click to mute";
+                audioIcon.style.cursor = "pointer";
+                audioIcon.style.fontSize = "18px";
 
                 const audio = new Audio(audioSrc);
-                const audioIcon = document.createElement('i');
-                audioIcon.className = 'fa-solid fa-volume-high audio-toggle';
-                audioIcon.style.cursor = 'pointer';
-
-                audioIcon.addEventListener('click', () => {
-                    if (audio.paused) {
-                        audio.play();
-                        audioIcon.classList.replace('fa-volume-xmark', 'fa-volume-high');
+                audio.play();
+
+                audioIcon.addEventListener("click", () => {
+                    if (audio.muted) {
+                        audio.currentTime = 0;
+                        audio.muted = false;
+                        audioIcon.classList.remove("fa-volume-xmark");
+                        audioIcon.classList.add("fa-volume-high");
                         audioIcon.title = "Click to mute";
+                        audio.play();
                     } else {
-                        audio.pause();
-                        audioIcon.classList.replace('fa-volume-high', 'fa-volume-xmark');
+                        audio.muted = true;
+                        audioIcon.classList.remove("fa-volume-high");
+                        audioIcon.classList.add("fa-volume-xmark");
                         audioIcon.title = "Click to unmute";
                     }
                 });
 
-                audioContainer.appendChild(audioIcon);
-                audioContainer.appendChild(document.createTextNode('Listen'));
-                message.appendChild(audioContainer);
+                iconContainer.appendChild(audioIcon);
             }
+
+            if (fileName) {
+                const downloadIcon = document.createElement("a");
+                downloadIcon.href = fileName;
+                downloadIcon.target = "_blank";
+                downloadIcon.title = "Download PDF";
+
+                const icon = document.createElement("i");
+                icon.className = "fa-solid fa-file-arrow-down";
+                icon.style.fontSize = "18px";
+                icon.style.cursor = "pointer";
+
+                downloadIcon.appendChild(icon);
+                iconContainer.appendChild(downloadIcon);
+            }
+
+            message.appendChild(iconContainer);
         }
 
         bubble.appendChild(label);
@@ -168,42 +180,30 @@ document.addEventListener('DOMContentLoaded', () => {
                 body: formData
             });
 
-           if (!response.ok) {
-    let errorMessage = 'Request failed';
-    try {
-        const error = await response.json();
-        errorMessage = error.detail || error.error || errorMessage;
-    } catch (e) {
-        // Response wasn't valid JSON
-    }
-    throw new Error(errorMessage);
-}
+            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.", "Assistant");
-
-                if (result.audioUrl) {
-                    const audio = document.createElement('audio');
-                    audio.src = result.audioUrl;
-                    audio.controls = true;
-                    convo.appendChild(audio);
-                }
-
-                if (result.pdfUrl) {
-                    const link = document.createElement('a');
-                    link.href = result.pdfUrl;
-                    link.textContent = 'Download Summary PDF';
-                    link.className = 'download-link';
-                    link.target = "_blank";
-                    convo.appendChild(link);
-                }
+                createMessageBubble(
+                    result.summary || "No summary generated.",
+                    "Assistant",
+                    result.audioUrl,
+                    result.pdfUrl
+                );
             } else {
                 createMessageBubble(
-                    `<strong>Caption:</strong><br><br>${result.answer || result.caption}
-                    ${result.audio ? `<br><audio controls src="${result.audio}"></audio>` : ''}`,
+                    `<strong>Caption:</strong><br><br>${result.answer || result.caption}`,
                     "Aidan",
                     result.audio
                 );
@@ -242,18 +242,6 @@ document.addEventListener('DOMContentLoaded', () => {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
-        .download-link {
-            display: inline-block;
-            margin-top: 10px;
-            padding: 5px 10px;
-            background: #3b82f6;
-            color: white;
-            border-radius: 5px;
-            text-decoration: none;
-        }
-        .download-link:hover {
-            background: #2563eb;
-        }
         .audio-toggle {
             cursor: pointer;
             transition: all 0.2s;