Update script.js

script.js

@@ -1,28 +1,39 @@
 document.getElementById('send-button').addEventListener('click', function() {
-    let userInput = document.getElementById('user-input').value;
-    sendMessage(userInput);
+    let userInput = document.getElementById('user-input').value.trim();
+    if (userInput) {
+        displayMessage(userInput, 'user');
+        sendMessage(userInput);
+        document.getElementById('user-input').value = '';
+    }
 });
 
 function sendMessage(message) {
-    fetch(https://huggingface.co/spaces/Mosberg-Control/CodeNinjaOpenChat/chat, {
+    fetch('https://huggingface.co/spaces/Mosberg-Control/CodeNinjaOpenChat/chat', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
         },
         body: JSON.stringify({ message: message })
     })
-    .then(response => response.json())
+    .then(response => {
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        return response.json();
+    })
     .then(data => {
-        displayMessage(data);
+        displayMessage(data.response, 'bot');
     })
     .catch((error) => {
         console.error('Error:', error);
+        displayMessage('Sorry, there was an error processing your request.', 'error');
     });
 }
 
-function displayMessage(data) {
+function displayMessage(message, sender) {
     let chatBox = document.getElementById('chat-box');
     let newMessage = document.createElement('div');
-    newMessage.textContent = data.response; // Assuming the response has a 'response' field
+    newMessage.classList.add('message', sender);
+    newMessage.textContent = message;
     chatBox.appendChild(newMessage);
 }