Update script.js

script.js

@@ -2,17 +2,40 @@ document.addEventListener('DOMContentLoaded', () => {
     var socket = io();
 
     document.querySelector('#send-button').onclick = () => {
-        const message = document.querySelector('#user-input').value;
+        const messageInput = document.querySelector('#user-input');
+        const message = messageInput.value;
         const selectedModel = document.querySelector('#model-selector').value;
-        socket.emit('send_message', {'message': message, 'model': selectedModel});
-        document.querySelector('#user-input').value = '';
+        
+        if (message.trim() !== '') {
+            displayMessage(message, 'user');
+            socket.emit('send_message', {'message': message, 'model': selectedModel});
+            messageInput.value = '';
+        }
         return false;
     };
 
     socket.on('receive_message', data => {
-        const node = document.createElement("div");
-        const textnode = document.createTextNode(data.message);
-        node.appendChild(textnode);
-        document.querySelector('#chat-box').appendChild(node);
+        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;
+}