Update script.js

Author: zorginkopen

script.js

@@ -1,39 +1,40 @@
-const chat = document.getElementById("chat");
-const form = document.getElementById("input-form");
-const input = document.getElementById("user-input");
+const form = document.querySelector('form');
+const input = document.querySelector('#message');
+const chatbox = document.querySelector('#chatbox');
 
-form.addEventListener("submit", async (e) => {
+let thread_id = null;
+
+form.addEventListener('submit', async (e) => {
   e.preventDefault();
   const message = input.value.trim();
   if (!message) return;
 
-  appendMessage("Gebruiker", message);
-  input.value = "";
+  appendMessage('user', message);
+  input.value = '';
 
   try {
-    const response = await fetch("https://chatproxy.azurewebsites.net/api/chatproxy", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ message })
+    const response = await fetch('https://chatproxy.azurewebsites.net/api/chatproxy', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ message, thread_id })
     });
 
-    if (!response.ok) {
-      const errorText = await response.text();
-      console.error("Responsetekst:", errorText);
-      throw new Error(`Serverfout: ${response.status}`);
+    const data = await response.json();
+    if (response.ok) {
+      thread_id = data.thread_id;
+      appendMessage('assistant', data.response);
+    } else {
+      appendMessage('system', 'Fout: ' + data.error);
     }
-
-    const text = await response.text();
-    appendMessage("Agent", text);
   } catch (err) {
-    appendMessage("Agent", "Er ging iets mis.");
-    console.error("Fout in fetch:", err);
+    appendMessage('system', 'Verbinding mislukt: ' + err.message);
   }
 });
 
-function appendMessage(sender, text) {
-  const msg = document.createElement("div");
-  msg.innerHTML = `<div class="user">${sender}:</div><div class="agent">${text}</div>`;
-  chat.appendChild(msg);
-  chat.scrollTop = chat.scrollHeight;
+function appendMessage(role, content) {
+  const div = document.createElement('div');
+  div.className = role;
+  div.textContent = `${role}: ${content}`;
+  chatbox.appendChild(div);
+  chatbox.scrollTop = chatbox.scrollHeight;
 }