diff --git a/app.py b/app.py index cdc223e..ac9582a 100644 --- a/app.py +++ b/app.py @@ -811,7 +811,10 @@ def chat_claude( "message_chunk", { "id": msg_id, - "content": f"**{username} ({model_name}):**\n\n{content}", + "content": content, + "username": username, + "model_name": model_name, + "is_first_chunk": True, }, room=room.name, ) @@ -969,7 +972,10 @@ def chat_gpt(username, room_name, model_name="gpt-4o-mini"): "message_chunk", { "id": msg_id, - "content": f"**{username} ({model_name}):**\n\n{content}", + "content": content, + "username": username, + "model_name": model_name, + "is_first_chunk": True, }, room=room.name, ) @@ -1083,7 +1089,10 @@ def chat_llama(username, room_name, model_name="mistral-7b-instruct-v0.2.Q3_K_L. "message_chunk", { "id": msg_id, - "content": f"**{username} ({model_name}):**\n\n{content}", + "content": content, + "username": username, + "model_name": model_name, + "is_first_chunk": True, }, room=room.name, ) diff --git a/templates/chat.html b/templates/chat.html index 29c82d5..2d4e57c 100644 --- a/templates/chat.html +++ b/templates/chat.html @@ -762,12 +762,18 @@ socket.on("message_chunk", (data) => { // Append the chunk to the buffer messageBuffers[data.id] += data.content; - - // Process the entire buffer with marked and set it as the content of the target element - const sanitizedContent = DOMPurify.sanitize(marked.marked(messageBuffers[data.id]), dompurify_config); + + // Build the content for display (includes header for first chunk) + let displayContent = messageBuffers[data.id]; + if (data.is_first_chunk && data.username && data.model_name) { + displayContent = `**${data.username} (${data.model_name}):**\n\n${displayContent}`; + } + + // Process the display content with marked and set it as the content of the target element + const sanitizedContent = DOMPurify.sanitize(marked.marked(displayContent), dompurify_config); targetMessageElement.innerHTML = sanitizedContent; - // Store the raw markdown in a data attribute for later use in editing + // Store the raw markdown in a data attribute for later use in editing (without header for clean editing) targetMessageElement.dataset.rawMarkdown = messageBuffers[data.id]; // Apply syntax highlighting to code blocks within the content