engineering/opencompletion.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

delete button on messages

Browse source
This commit is contained in:
Russell Ballestrini 2023-10-29 19:25:56 -04:00
parent 0b0ef8c792
commit 559509552c
2 changed files with 71 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

13
app.py
View file

@ -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.

84
templates/chat.html
View file

@ -52,6 +52,16 @@
padding: 5px;
}
.message-wrapper {
display: flex;
align-items: start;
}
.message-wrapper button {
margin-right: 16px;
margin-top: 16px;
}
</style>
</head>
<body>
@ -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();
}
});
</script>
</body>