Mosberg-Control/CodeNinjaOpenChat

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