Refaktoriseringar och test av alternativa lösningar.

2024-07-16 23:16:39 +02:00
parent 99e3737718
commit 3fef179723
4 changed files with 115 additions and 54 deletions
@@ -4,36 +4,63 @@ const chatbox = document.getElementById('chatbox');
 const userInput = document.getElementById('userInput');

 // Define a function to send the user's message to the AI
+// function sendMessage() {
+//   // Get the user's input message and trim any whitespace
+//     const message = userInput.value.trim();
+
+//     // Check if the message is not empty
+//     if (message !== '') {
+//         // Send a POST request to the /api/chat endpoint with the message
+//         fetch('/api/chat', {
+//             method: 'POST',
+//             headers: { 'Content-Type': 'application/json' },
+//             body: JSON.stringify({ message }),
+//         })
+//         .then(response => response.json())
+//         .then(data => {
+//             // Get the AI's response from the API data
+//             const aiResponse = data.response;
+
+//             // Render the user's original message in the chatbox
+//             renderMessage(message, 'user-message');
+
+//             // Render the AI's response in the chatbox
+//             renderMessage(aiResponse, 'ai-response');
+
+//             // Clear the user input field for the next message
+//             userInput.value = '';
+//         })
+//         .catch(error => console.error('Error sending message:', error));
+//     }
+// }
+
 function sendMessage() {
-  // Get the user's input message and trim any whitespace
-    const message = userInput.value.trim();
+  const message = userInput.value.trim();
+  if (message !== '') {
+    // Create a new XMLHttpRequest object
+    const xhr = new XMLHttpRequest();

-    // Check if the message is not empty
-    if (message !== '') {
-        // Send a POST request to the /api/chat endpoint with the message
-        fetch('/api/chat', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ message }),
-        })
-        .then(response => response.json())
-        .then(data => {
-            // Get the AI's response from the API data
-            const aiResponse = data.response;
+    // Configure the request
+    xhr.open('POST', '/api/chat'); // Set method to POST and URL
+    xhr.setRequestHeader('Content-Type', 'application/json'); // Essential for sending JSON

-            // Render the user's original message in the chatbox
-            renderMessage(message, 'user-message');
+    // Handle response data 
+    xhr.onload = function() {
+      if (xhr.status >= 200 && xhr.status < 300) { // Successful response
+        const data = JSON.parse(xhr.responseText);
+        renderMessage(data.response, 'ai-response');

-            // Render the AI's response in the chatbox
-            renderMessage(aiResponse, 'ai-response');
+      } else {
+        console.error('Request failed. Status:', xhr.status);
+      }
+    };

-            // Clear the user input field for the next message
-            userInput.value = '';
-        })
-        .catch(error => console.error('Error sending message:', error));
-    }
+    // Send the request
+    xhr.send(JSON.stringify({ message })); 
+  }
 }

+
 // Define a function to render a message in the chatbox with a specific class name
 function renderMessage(text, className) {
    // Create a new div element to hold the message