Update static/appS.js

static/appS.js

@@ -76,87 +76,86 @@ document.addEventListener('DOMContentLoaded', () => {
         );
     }
 
-    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";
-        label.textContent = sender;
-
-        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.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 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);
-                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.muted = true;
-                        audioIcon.classList.remove("fa-volume-high");
-                        audioIcon.classList.add("fa-volume-xmark");
-                        audioIcon.title = "Click to unmute";
-                    }
-                });
-
-                iconContainer.appendChild(audioIcon);
-            }
+   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%";
+    bubble.style.wordWrap = "break-word";
+
+    const label = document.createElement('div');
+    label.className = "label";
+    label.textContent = sender;
+
+    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);
+
+    if (sender !== "You" && (audioSrc || fileName)) {
+        const iconContainer = document.createElement('div');
+        iconContainer.style.marginTop = "10px";
+        iconContainer.style.display = "flex";
+        iconContainer.style.justifyContent = "flex-end";
+        iconContainer.style.gap = "15px";
+
+        // 🎵 Audio Icon
+        if (audioSrc) {
+            const audio = new Audio(audioSrc);
+            const audioIcon = document.createElement("i");
+            audioIcon.className = "fa-solid fa-volume-high audio-toggle";
+            audioIcon.title = "Play Audio";
+            audioIcon.style.cursor = "pointer";
+            audioIcon.style.fontSize = "18px";
+
+            audioIcon.addEventListener("click", () => {
+                if (audio.paused) {
+                    audio.play();
+                    audioIcon.classList.remove("fa-volume-xmark");
+                    audioIcon.classList.add("fa-volume-high");
+                    audioIcon.title = "Mute Audio";
+                } else {
+                    audio.pause();
+                    audioIcon.classList.remove("fa-volume-high");
+                    audioIcon.classList.add("fa-volume-xmark");
+                    audioIcon.title = "Unmute Audio";
+                }
+            });
 
-            if (fileName) {
-                const downloadIcon = document.createElement("a");
-                downloadIcon.href = fileName;
-                downloadIcon.target = "_blank";
-                downloadIcon.title = "Download PDF";
+            iconContainer.appendChild(audioIcon);
+        }
 
-                const icon = document.createElement("i");
-                icon.className = "fa-solid fa-file-arrow-down";
-                icon.style.fontSize = "18px";
-                icon.style.cursor = "pointer";
+        // 📥 Download Icon
+        if (fileName) {
+            const downloadLink = document.createElement('a');
+            downloadLink.href = fileName;
+            downloadLink.target = "_blank";
+            downloadLink.title = "Download PDF";
 
-                downloadIcon.appendChild(icon);
-                iconContainer.appendChild(downloadIcon);
-            }
+            const downloadIcon = document.createElement("i");
+            downloadIcon.className = "fa-solid fa-file-arrow-down";
+            downloadIcon.style.fontSize = "18px";
+            downloadIcon.style.cursor = "pointer";
 
-            message.appendChild(iconContainer);
+            downloadLink.appendChild(downloadIcon);
+            iconContainer.appendChild(downloadLink);
         }
 
-        bubble.appendChild(label);
-        bubble.appendChild(message);
-        convo.appendChild(bubble);
-        convo.scrollTop = convo.scrollHeight;
-        return bubble;
+        message.appendChild(iconContainer);
     }
 
+    bubble.appendChild(label);
+    bubble.appendChild(message);
+    convo.appendChild(bubble);
+    convo.scrollTop = convo.scrollHeight;
+    return bubble;
+}
+
+
     async function handleSubmit() {
         if (!selectedFile) {
             alert("Please upload a file first");
@@ -166,7 +165,7 @@ document.addEventListener('DOMContentLoaded', () => {
         const isSummarizeMode = document.querySelector('input[name="mode"]:checked').value === 'Summarize';
         const endpoint = isSummarizeMode ? '/summarize/' : '/imagecaption/';
         const thinkingText = isSummarizeMode ? 'Processing document...' : "Generating caption... <div class='loader'></div>";
-        const senderName = isSummarizeMode ? 'Assistant' : 'Aidan';
+        const senderName = 'Aidan';
 
         const thinkingBubble = createMessageBubble(thinkingText, senderName);
 
@@ -197,7 +196,7 @@ document.addEventListener('DOMContentLoaded', () => {
             if (isSummarizeMode) {
                 createMessageBubble(
                     result.summary || "No summary generated.",
-                    "Assistant",
+                    "Aidan",
                     result.audioUrl,
                     result.pdfUrl
                 );