Update public/chat.html

public/chat.html

@@ -73,42 +73,52 @@
 
         // Add a message to the chat box
         function addMessageToChat(msg) {
-            const messageDiv = document.createElement('div');
-            messageDiv.style = `
-                max-width: 70%;
-                padding: 10px;
-                border-radius: 8px;
-                background-color: ${msg.sender === 'You' ? '#4caf50' : '#2c2c2c'};
-                color: #ffffff;
-                align-self: ${msg.sender === 'You' ? 'flex-end' : 'flex-start'};
-                word-wrap: break-word;
-                cursor: pointer;
-            `;
-
-            // Add reply thumbnail if applicable
-            if (msg.replyTo) {
-                const replyDiv = document.createElement('div');
-                replyDiv.style = `
-                    margin-bottom: 8px;
-                    padding: 5px;
-                    border-left: 4px solid #888;
-                    font-size: 0.85rem;
-                    color: #bbb;
-                `;
-                replyDiv.textContent = msg.replyTo;
-                messageDiv.appendChild(replyDiv);
-            }
+    const messageDiv = document.createElement('div');
+    messageDiv.style = `
+        max-width: 70%;
+        padding: 10px;
+        border-radius: 8px;
+        background-color: ${msg.sender === 'You' ? '#4caf50' : '#2c2c2c'};
+        color: #ffffff;
+        align-self: ${msg.sender === 'You' ? 'flex-end' : 'flex-start'};
+        word-wrap: break-word;
+        cursor: pointer;
+    `;
+
+    // Add reply thumbnail if applicable
+    if (msg.replyTo) {
+        const replyDiv = document.createElement('div');
+        replyDiv.style = `
+            margin-bottom: 8px;
+            padding: 5px;
+            border-left: 4px solid #888;
+            font-size: 0.85rem;
+            color: #bbb;
+        `;
+        replyDiv.textContent = msg.replyTo;
+        messageDiv.appendChild(replyDiv);
+    }
 
-            messageDiv.innerHTML += `<strong>${msg.sender}</strong><br>${msg.content}`;
-            messageDiv.addEventListener('click', () => {
-                replyTo = msg.content;
-                replyPreview.textContent = `Replying to: ${msg.content}`;
-                replyPreview.style.display = 'block';
-            });
+    // Add image if available
+    if (msg.imageUrl) {
+        const img = document.createElement('img');
+        img.src = msg.imageUrl;
+        img.alt = 'Image';
+        img.style = 'max-width: 100%; border-radius: 8px; margin-top: 10px;';
+        messageDiv.appendChild(img);
+    }
 
-            chatBox.appendChild(messageDiv);
-            chatBox.scrollTop = chatBox.scrollHeight;
-        }
+    // Add sender and content
+    messageDiv.innerHTML += `<strong>${msg.sender}</strong><br>${msg.content || ''}`;
+    messageDiv.addEventListener('click', () => {
+        replyTo = msg.content;
+        replyPreview.textContent = `Replying to: ${msg.content}`;
+        replyPreview.style.display = 'block';
+    });
+
+    chatBox.appendChild(messageDiv);
+    chatBox.scrollTop = chatBox.scrollHeight;
+}
 
         // Load chat messages
         async function loadMessages() {