Update script.js

Author: zorginkopen

script.js

@@ -1,111 +1,65 @@
-const chat = document.getElementById("chat");
 const form = document.getElementById("input-form");
 const input = document.getElementById("user-input");
-
-let threadId = null;
-
-// Openingsbericht bij het laden van de pagina
-window.onload = () => {
-  const welkomstHTML = `
-    Welkom bij de <strong>AI Indicatiehulp</strong>!<br>
-    Ik ben jouw digitale adviseur voor:<br>
-    het stellen van de juiste indicatie en het opstellen van een conceptadvies voor de zorgexpert (Kim Brand).<br><br>
-
-    <strong>Kies een optie om te starten:</strong><br>
-    1. In kaart brengen cliëntsituatie<br>
-    2. Indicatiestelling extramuraal (zorg thuis)<br>
-    3. Indicatiestelling intramuraal (verpleeghuis)<br><br>
-
-    Wil je direct een indicatieadvies laten opstellen? Dan heb ik meer informatie nodig over de cliënt.<br>
-    Geef bij voorkeur ook je naam en een e-mailadres of telefoonnummer,<br>
-    zodat we het conceptadvies voor beoordeling kunnen indienen.<br><br>
-
-    <em>Met welke optie wil je verder?</em>
+const messagesContainer = document.getElementById("messages");
+
+// 🔸 Openingsbericht bij laden
+window.addEventListener("DOMContentLoaded", () => {
+  const openingText = `
+**Hallo! Welkom bij de AI Indicatiehulp.** 😊<br><br>
+Mijn naam is Indi, en ik help je graag bij het stellen van de juiste indicatie voor je cliënt.<br><br>
+Waarmee kan ik je vandaag ondersteunen?<br><br>
+- **1.** In kaart brengen cliëntsituatie<br>
+- **2.** Indicatiestelling extramuraal (Zorg Thuis)<br>
+- **3.** Indicatiestelling intramuraal (verpleeghuis)<br><br>
+Kies een optie of stel gerust je vraag!
   `;
-  appendFormattedMessage("agent-message", welkomstHTML);
-};
+  appendMessage("assistant", openingText);
+});
 
+// 🔸 Form submit handler
 form.addEventListener("submit", async (e) => {
   e.preventDefault();
-  const message = input.value.trim();
-  if (!message) return;
+  const userMessage = input.value.trim();
+  if (!userMessage) return;
 
-  appendMessage("user-message", message);
+  appendMessage("user", userMessage);
   input.value = "";
 
   try {
-    const response = await fetch("https://chatproxy2-f5hygzgbckapejcu.francecentral-01.azurewebsites.net/api/chatproxy2", {
+    const response = await fetch("https://chatproxy2-f5hygzgbckapejcu.francecentral-01.azurewebsites.net/api/chatproxy2, {
       method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ message, thread_id: threadId })
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({ message: userMessage })
     });
 
     if (!response.ok) {
-      const errorText = await response.text();
-      console.error("Responsetekst:", errorText);
-      throw new Error(`Serverfout: ${response.status}`);
+      throw new Error("Serverfout: " + response.status);
     }
 
     const data = await response.json();
-    threadId = data.thread_id;
-    streamMessage("agent-message", data.reply);
-  } catch (err) {
-    streamMessage("agent-message", "Er ging iets mis.");
-    console.error("Fout in fetch:", err);
+    const formattedReply = formatReply(data.reply);
+    appendMessage("assistant", formattedReply);
+  } catch (error) {
+    appendMessage("assistant", "Er is iets misgegaan. Probeer het later opnieuw.");
+    console.error("Fout in fetch:", error);
   }
 });
 
-function appendMessage(cssClass, text) {
-  const msg = document.createElement("div");
-  msg.classList.add("message", cssClass);
-  msg.textContent = text;
-  chat.appendChild(msg);
-  chat.scrollTop = chat.scrollHeight;
+// 🔸 Bericht toevoegen aan chat
+function appendMessage(role, message) {
+  const messageElement = document.createElement("div");
+  messageElement.classList.add("message", role);
+  messageElement.innerHTML = message;
+  messagesContainer.appendChild(messageElement);
+  messagesContainer.scrollTop = messagesContainer.scrollHeight;
 }
 
-function appendFormattedMessage(cssClass, htmlContent) {
-  const msg = document.createElement("div");
-  msg.classList.add("message", cssClass);
-  msg.innerHTML = htmlContent;
-  chat.appendChild(msg);
-  chat.scrollTop = chat.scrollHeight;
-}
-
-function streamMessage(cssClass, text) {
-  const msg = document.createElement("div");
-  msg.classList.add("message", cssClass);
-  chat.appendChild(msg);
-
-  const lines = text.split("\n").filter(line => line.trim() !== "");
-
-  const isNumberedList = lines.length > 1 && lines.every(line => /^\d+\.\s+/.test(line.trim()));
-  const isBulletedList = lines.length > 1 && lines.every(line => /^[-*•]\s+/.test(line.trim()));
-
-  if (isNumberedList || isBulletedList) {
-    const listElement = document.createElement(isNumberedList ? "ol" : "ul");
-    msg.appendChild(listElement);
-    let i = 0;
-
-    const interval = setInterval(() => {
-      if (i < lines.length) {
-        const li = document.createElement("li");
-        li.textContent = lines[i].replace(/^(\d+\.\s+|[-*•]\s+)/, "").trim();
-        listElement.appendChild(li);
-        chat.scrollTop = chat.scrollHeight;
-        i++;
-      } else {
-        clearInterval(interval);
-      }
-    }, 200);
-  } else {
-    let index = 0;
-    const interval = setInterval(() => {
-      if (index < text.length) {
-        msg.textContent += text.charAt(index++);
-        chat.scrollTop = chat.scrollHeight;
-      } else {
-        clearInterval(interval);
-      }
-    }, 15);
-  }
+// 🔸 Formatter voor GPT-reacties (vet, bullets, witregels)
+function formatReply(rawText) {
+  return rawText
+    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')  // vet
+    .replace(/\n\n/g, '<br><br>')                      // dubbele witregel
+    .replace(/\n/g, '<br>');                           // enkele witregel
 }