File size: 1,402 Bytes
429430e 6bdd515 429430e b713381 429430e b713381 429430e 6bdd515 429430e b713381 429430e b713381 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
document.addEventListener('DOMContentLoaded', () => {
var socket = io();
document.querySelector('#send-button').onclick = () => {
const messageInput = document.querySelector('#user-input');
const message = messageInput.value;
const selectedModel = document.querySelector('#model-selector').value;
if (message.trim() !== '') {
displayMessage(message, 'user');
socket.emit('send_message', {'message': message, 'model': selectedModel});
messageInput.value = '';
}
return false;
};
socket.on('receive_message', data => {
displayMessage(data.message, 'model');
});
});
function displayMessage(message, sender) {
const chatBox = document.querySelector('#chat-box');
const messageContainer = document.createElement("div");
const avatar = document.createElement("img");
const textNode = document.createElement("span");
avatar.src = sender === 'user' ? 'user.png' : 'model.png';
textNode.textContent = message;
messageContainer.classList.add('message', sender);
avatar.classList.add('avatar');
textNode.classList.add('message-text');
messageContainer.appendChild(avatar);
messageContainer.appendChild(textNode);
chatBox.appendChild(messageContainer);
// Scroll to the latest message
chatBox.scrollTop = chatBox.scrollHeight;
}
|