Update static/appS.js

static/appS.js

@@ -68,14 +68,43 @@ document.addEventListener('DOMContentLoaded', () => {
         button.addEventListener('click', handleSubmit);
     });
 
-    function displayFilePreview(file) {
-        if (filePreviewBubble) filePreviewBubble.remove();
-
+   function displayFilePreview(file) {
+    if (filePreviewBubble) filePreviewBubble.remove();
+
+    // 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";
+
+            const img = document.createElement("img");
+            img.src = e.target.result;
+            img.style.maxWidth = "250px";
+            img.style.borderRadius = "8px";
+            img.style.marginBottom = "5px";
+
+            const text = document.createElement("span");
+            text.textContent = `📎 Selected image: ${file.name}`;
+            text.style.fontSize = "13px";
+
+            filePreviewBubble.appendChild(img);
+            filePreviewBubble.appendChild(text);
+            convo.appendChild(filePreviewBubble);
+            convo.scrollTop = convo.scrollHeight;
+        };
+        reader.readAsDataURL(file);
+    } else {
+        // Document preview stays as text
         filePreviewBubble = createMessageBubble(
-            `📎 Selected ${file.type.startsWith('image/') ? 'image' : 'document'}: ${file.name}`,
+            `📎 Selected document: ${file.name}`,
             "You"
         );
     }
+}
+
 
     function createMessageBubble(text, sender = "You", audioSrc = null, fileName = null) {
         const bubble = document.createElement('div');