modified: app.py

modified:   templates/chat.html

app.py

@@ -180,6 +180,7 @@ def load_s3_file(room_name, s3_file_path, username):
                 "message",
                 {
                     "id": new_message.id,
+                    "username": username,
                     "content": formatted_content,
                 },
                 room=room_name,
@@ -205,6 +206,7 @@ def load_s3_file(room_name, s3_file_path, username):
                 "message",
                 {
                     "id": new_error_message.id,
+                    "username": username,
                     "content": error_message,
                 },
                 room=room_name,
@@ -229,7 +231,8 @@ def handle_message(data):
         "message",
         {
             "id": new_message.id,
-            "content": f"**{data['username']}:**\n\n{data['message']}",
+            "username": data["username"],
+            "content": data["message"],
         },
         room=room.name,
     )

templates/chat.html

@@ -209,10 +209,12 @@ socket.on("message", (data) => {
     messageWrapper.id = "message-" + data.id;
 
     const newMessage = document.createElement("p");
-    newMessage.innerHTML = DOMPurify.sanitize(marked.marked(data.content), dompurify_config);
+    // Check if the username is present and prepend it to the message content
+    const messageContent = data.username ? `**${data.username}:**\n\n${data.content}` : data.content;
+    newMessage.innerHTML = DOMPurify.sanitize(marked.marked(messageContent), dompurify_config);
 
-    // Check if the message is NOT a join notification
-    if (!data.content.includes("has joined the room.") && !data.content.includes("Processing...")) {
+    // Check if the message has an id which means we can delete it.
+    if (data.id) {
         // Create the delete button
         const deleteButton = document.createElement("button");
         deleteButton.innerHTML = "x";