|
1 | | -const chat = document.getElementById("chat"); |
2 | | -const form = document.getElementById("input-form"); |
3 | | -const input = document.getElementById("user-input"); |
4 | | - |
5 | | -let threadId = null; |
6 | | - |
7 | | -// Openingsbericht bij het laden van de pagina |
8 | | -window.onload = () => { |
9 | | - const welkomstHTML = ` |
10 | | - Welkom bij de <strong>AI Indicatiehulp</strong>!<br> |
11 | | - Ik ben jouw digitale adviseur voor:<br> |
12 | | - het stellen van de juiste indicatie en het opstellen van een conceptadvies voor de zorgexpert (Kim Brand).<br><br> |
13 | | -
|
14 | | - <strong>Kies een optie om te starten:</strong><br> |
15 | | - 1. In kaart brengen cliëntsituatie<br> |
16 | | - 2. Indicatiestelling extramuraal (zorg thuis)<br> |
17 | | - 3. Indicatiestelling intramuraal (verpleeghuis)<br><br> |
18 | | -
|
19 | | - Wil je direct een indicatieadvies laten opstellen? Dan heb ik meer informatie nodig over de cliënt.<br> |
20 | | - Geef bij voorkeur ook je naam en een e-mailadres of telefoonnummer,<br> |
21 | | - zodat we het conceptadvies voor beoordeling kunnen indienen.<br><br> |
22 | | -
|
23 | | - <em>Met welke optie wil je verder?</em> |
24 | | - `; |
25 | | - appendFormattedMessage("agent-message", welkomstHTML); |
26 | | -}; |
27 | | - |
28 | | -form.addEventListener("submit", async (e) => { |
29 | | - e.preventDefault(); |
30 | | - const message = input.value.trim(); |
31 | | - if (!message) return; |
32 | | - |
33 | | - appendMessage("user-message", message); |
34 | | - input.value = ""; |
35 | | - |
36 | | - try { |
37 | | - const response = await fetch("https://chatproxy.azurewebsites.net/api/chatproxy", { |
38 | | - method: "POST", |
39 | | - headers: { "Content-Type": "application/json" }, |
40 | | - body: JSON.stringify({ message, thread_id: threadId }) |
| 1 | +document.addEventListener("DOMContentLoaded", () => { |
| 2 | + const form = document.getElementById("chat-form"); |
| 3 | + const input = document.getElementById("user-input"); |
| 4 | + |
| 5 | + form.addEventListener("submit", async (event) => { |
| 6 | + event.preventDefault(); |
| 7 | + const message = input.value.trim(); |
| 8 | + if (!message) return; |
| 9 | + |
| 10 | + try { |
| 11 | + console.log("📤 Verzenden naar backend:", message); |
| 12 | + |
| 13 | + const response = await fetch("https://chatproxy.azurewebsites.net/api/chatproxy", { |
| 14 | + method: "POST", |
| 15 | + headers: { "Content-Type": "application/json" }, |
| 16 | + body: JSON.stringify({ message }) |
| 17 | + }); |
| 18 | + |
| 19 | + const text = await response.text(); |
| 20 | + console.log("📥 Responsetekst:", text); |
| 21 | + |
| 22 | + if (!response.ok) { |
| 23 | + throw new Error(`Serverfout: ${response.status}`); |
| 24 | + } |
| 25 | + } catch (error) { |
| 26 | + console.error("❌ Fout in fetch:", error); |
| 27 | + } |
| 28 | + |
| 29 | + input.value = ""; |
41 | 30 | }); |
42 | | - |
43 | | - if (!response.ok) { |
44 | | - const errorText = await response.text(); |
45 | | - console.error("Responsetekst:", errorText); |
46 | | - throw new Error(`Serverfout: ${response.status}`); |
47 | | - } |
48 | | - |
49 | | - const data = await response.json(); |
50 | | - threadId = data.thread_id; |
51 | | - streamMessage("agent-message", data.reply); |
52 | | - } catch (err) { |
53 | | - streamMessage("agent-message", "Er ging iets mis."); |
54 | | - console.error("Fout in fetch:", err); |
55 | | - } |
56 | 31 | }); |
57 | | - |
58 | | -function appendMessage(cssClass, text) { |
59 | | - const msg = document.createElement("div"); |
60 | | - msg.classList.add("message", cssClass); |
61 | | - msg.textContent = text; |
62 | | - chat.appendChild(msg); |
63 | | - chat.scrollTop = chat.scrollHeight; |
64 | | -} |
65 | | - |
66 | | -function appendFormattedMessage(cssClass, htmlContent) { |
67 | | - const msg = document.createElement("div"); |
68 | | - msg.classList.add("message", cssClass); |
69 | | - msg.innerHTML = htmlContent; |
70 | | - chat.appendChild(msg); |
71 | | - chat.scrollTop = chat.scrollHeight; |
72 | | -} |
73 | | - |
74 | | -function streamMessage(cssClass, text) { |
75 | | - const msg = document.createElement("div"); |
76 | | - msg.classList.add("message", cssClass); |
77 | | - chat.appendChild(msg); |
78 | | - |
79 | | - const lines = text.split("\n").filter(line => line.trim() !== ""); |
80 | | - |
81 | | - const isNumberedList = lines.length > 1 && lines.every(line => /^\d+\.\s+/.test(line.trim())); |
82 | | - const isBulletedList = lines.length > 1 && lines.every(line => /^[-*•]\s+/.test(line.trim())); |
83 | | - |
84 | | - if (isNumberedList || isBulletedList) { |
85 | | - const listElement = document.createElement(isNumberedList ? "ol" : "ul"); |
86 | | - msg.appendChild(listElement); |
87 | | - let i = 0; |
88 | | - |
89 | | - const interval = setInterval(() => { |
90 | | - if (i < lines.length) { |
91 | | - const li = document.createElement("li"); |
92 | | - li.textContent = lines[i].replace(/^(\d+\.\s+|[-*•]\s+)/, "").trim(); |
93 | | - listElement.appendChild(li); |
94 | | - chat.scrollTop = chat.scrollHeight; |
95 | | - i++; |
96 | | - } else { |
97 | | - clearInterval(interval); |
98 | | - } |
99 | | - }, 200); |
100 | | - } else { |
101 | | - let index = 0; |
102 | | - const interval = setInterval(() => { |
103 | | - if (index < text.length) { |
104 | | - msg.textContent += text.charAt(index++); |
105 | | - chat.scrollTop = chat.scrollHeight; |
106 | | - } else { |
107 | | - clearInterval(interval); |
108 | | - } |
109 | | - }, 15); |
110 | | - } |
111 | | -} |
0 commit comments