From 1c185b309f32bcd9d71d9b5d16387971360cccdc Mon Sep 17 00:00:00 2001
From: cdez <cdez4200@gmail.com>
Date: Fri, 28 Mar 2025 21:16:45 -0700
Subject: [PATCH] Fix the webclient rendering the message.

---
 chatserver/templates/index.html | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/chatserver/templates/index.html b/chatserver/templates/index.html
index 021517b..05186c8 100644
--- a/chatserver/templates/index.html
+++ b/chatserver/templates/index.html
@@ -199,8 +199,13 @@
         // Listen for messages from the server
         socket.on('message', (data) => {
             const messageElement = document.createElement('div');
+
+            // Create a span for the metadata (timestamp, username, chat room)
+            const metadataSpan = document.createElement('span');
             const timestamp = data.timestamp ? `[${data.timestamp}]` : '';
             const chatRoomInfo = data.chat_room ? `(${data.chat_room})` : '';
+            metadataSpan.textContent = `${timestamp} ${data.username || 'Server'} ${chatRoomInfo}: `;
+            metadataSpan.style.fontWeight = 'bold'; // Optional: Make metadata bold
 
             // Render the message as HTML using marked.js
             const renderedMessage = marked.parse(data.message);
@@ -208,8 +213,15 @@
             // Sanitize the HTML using DOMPurify
             const sanitizedMessage = DOMPurify.sanitize(renderedMessage);
 
-            // Set the inner HTML of the message element
-            messageElement.innerHTML = `${timestamp} ${data.username || 'Server'} ${chatRoomInfo}: ${sanitizedMessage}`;
+            // Create a span for the message content
+            const messageContentSpan = document.createElement('span');
+            messageContentSpan.innerHTML = sanitizedMessage;
+
+            // Append the metadata and message content to the message element
+            messageElement.appendChild(metadataSpan);
+            messageElement.appendChild(messageContentSpan);
+
+            // Append the message element to the chat div
             chatDiv.appendChild(messageElement);
             chatDiv.scrollTop = chatDiv.scrollHeight; // Auto-scroll to the bottom
         });