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;
}