From 559509552c3fe81699785c85577a0db82b1999bf Mon Sep 17 00:00:00 2001 From: Russell Ballestrini Date: Sun, 29 Oct 2023 19:25:56 -0400 Subject: [PATCH] delete button on messages --- app.py | 13 +++++++ templates/chat.html | 84 +++++++++++++++++++++++++++++++-------------- 2 files changed, 71 insertions(+), 26 deletions(-) diff --git a/app.py b/app.py index 74ddb52..5d962db 100644 --- a/app.py +++ b/app.py @@ -116,6 +116,19 @@ def handle_message(data): eventlet.spawn(chat_gpt, data["username"], data["room"], data["message"]) +@socketio.on("delete_message") +def handle_delete_message(data): + msg_id = data['message_id'] + # Delete the message from the database + message = db.session.query(Message).filter(Message.id == msg_id).one_or_none() + if message: + db.session.delete(message) + db.session.commit() + + # Notify all clients in the room to remove the message from their DOM + emit("message_deleted", {"message_id": msg_id}, room=data['room']) + + def chat_claude(username, room, message): with app.app_context(): # claude has a 100,000 token context window for prompts. diff --git a/templates/chat.html b/templates/chat.html index e8fb1c4..580eb91 100644 --- a/templates/chat.html +++ b/templates/chat.html @@ -52,6 +52,16 @@ padding: 5px; } + .message-wrapper { + display: flex; + align-items: start; + } + + .message-wrapper button { + margin-right: 16px; + margin-top: 16px; + } + @@ -79,6 +89,12 @@ function sendMessage() { } } + +function deleteMessage(messageId, room) { + socket.emit('delete_message', {'message_id': messageId, 'room': room}); +} + + // Event listener for form submission document.getElementById('message-form').addEventListener('submit', (e) => { e.preventDefault(); @@ -98,43 +114,52 @@ socket.on('connect', () => { }); socket.on('message', (data) => { - const newMessage = document.createElement('p'); - - // Set the message ID as the id attribute - newMessage.id = "message-" + data.id; // Prefixing with "message-" to ensure the ID starts with a letter - - // Convert the message content to markdown and set it as the innerHTML - newMessage.innerHTML = marked.marked(data.content); - - // Append the new message to the chat container - document.getElementById('chat').appendChild(newMessage); + const messageWrapper = document.createElement('div'); + messageWrapper.className = 'message-wrapper'; + messageWrapper.id = "message-" + data.id; + + const newMessage = document.createElement('p'); + newMessage.innerHTML = marked.marked(data.content); + + // Check if the message is NOT a join notification + if (!data.content.includes('has joined the room.')) { + // Create the delete button + const deleteButton = document.createElement('button'); + deleteButton.innerHTML = 'x'; + deleteButton.onclick = () => deleteMessage(data.id, room); + messageWrapper.appendChild(deleteButton); + } + + messageWrapper.appendChild(newMessage); + + document.getElementById('chat').appendChild(messageWrapper); - // Apply syntax highlighting to any code blocks within the message newMessage.querySelectorAll('pre code').forEach((block) => { hljs.highlightElement(block); }); - // Scroll to the bottom of the chat container document.getElementById('chat').scrollTop = document.getElementById('chat').scrollHeight; }); socket.on('previous_messages', (data) => { - const chat = document.getElementById('chat'); - - // Create a new message element - const newMessage = document.createElement('p'); - - // Set the ID attribute for the message - newMessage.id = "message-" + data.id; - - // Set the inner content for the message - newMessage.innerHTML = `${data.username}: ${marked.marked(data.message)}`; - - // Append the new message to the chat container - chat.appendChild(newMessage); + const messageWrapper = document.createElement('div'); + messageWrapper.className = 'message-wrapper'; + messageWrapper.id = "message-" + data.id; + + const newMessage = document.createElement('p'); + newMessage.innerHTML = `${data.username}: ${marked.marked(data.message)}`; + + // Create the delete button + const deleteButton = document.createElement('button'); + deleteButton.innerHTML = 'x'; + deleteButton.onclick = () => deleteMessage(data.id, room); + + messageWrapper.appendChild(deleteButton); + messageWrapper.appendChild(newMessage); + + document.getElementById('chat').appendChild(messageWrapper); - // Apply syntax highlighting to any code blocks within the message newMessage.querySelectorAll('pre code').forEach((block) => { hljs.highlightElement(block); }); @@ -183,6 +208,13 @@ socket.on('message_chunk', (data) => { document.getElementById('chat').scrollTop = document.getElementById('chat').scrollHeight; }); +socket.on('message_deleted', (data) => { + const messageElement = document.getElementById('message-' + data.message_id); + if (messageElement) { + messageElement.remove(); + } +}); +