Update static/appS.js

static/appS.js

@@ -583,78 +583,85 @@ 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%";
-
-        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 span = document.createElement("span");
-        span.innerHTML = text;
-        message.appendChild(span);
-
-        if (sender !== "You" && (audioSrc || fileName)) {
-            const iconRow = document.createElement('div');
-            iconRow.style.marginTop = "10px";
-            iconRow.style.display = "flex";
-            iconRow.style.justifyContent = "flex-end";
-            iconRow.style.gap = "15px";
-
-            if (audioSrc) {
-                const audio = new Audio(audioSrc);
-                const icon = document.createElement("i");
-                icon.className = "fa-solid fa-volume-high audio-toggle";
-                icon.style.cursor = "pointer";
-                icon.title = "Play Audio";
-                icon.addEventListener("click", () => {
-                    if (audio.paused) {
-                        audio.play();
-                        icon.classList.replace("fa-volume-xmark", "fa-volume-high");
-                        icon.title = "Mute Audio";
-                    } else {
-                        audio.pause();
-                        icon.classList.replace("fa-volume-high", "fa-volume-xmark");
-                        icon.title = "Unmute Audio";
-                    }
-                });
-                iconRow.appendChild(icon);
-            }
-
-          if (fileName) {
-    const downloadLink = document.createElement('a');
-    downloadLink.href = `/files/${fileName.split('/').pop()}`;  
-    downloadLink.target = "_blank";
-    downloadLink.download = fileName.split('/').pop();          
+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);
+
+    // ✅ Only define and append icon container if needed
+    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";
+
+        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";
+                }
+            });
 
-    const downloadIcon = document.createElement("i");
-    downloadIcon.className = "fa-solid fa-file-arrow-down";
-    downloadIcon.style.fontSize = "18px";
-    downloadIcon.style.cursor = "pointer";
+            iconContainer.appendChild(audioIcon);
+        }
 
-    downloadLink.appendChild(downloadIcon);
-    iconContainer.appendChild(downloadLink);
-}
+        if (fileName) {
+            const filenameOnly = fileName.split("/").pop(); 
+            const downloadLink = document.createElement('a');
+            downloadLink.href = `/files/${filenameOnly}`;
+            downloadLink.target = "_blank";
+            downloadLink.download = filenameOnly;
 
+            const downloadIcon = document.createElement("i");
+            downloadIcon.className = "fa-solid fa-file-arrow-down";
+            downloadIcon.style.fontSize = "18px";
+            downloadIcon.style.cursor = "pointer";
 
-            message.appendChild(iconRow);
+            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");