Add files via upload

zorginkopen · web-flow · commit e56f61e91121 · 2025-06-16T19:39:22.000+02:00
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Indicatiehulp Webchat</title>
+  <style>
+    body { font-family: sans-serif; margin: 0; padding: 0; display: flex; flex-direction: column; height: 100vh; }
+    #chat { flex: 1; overflow-y: auto; padding: 1em; background: #f4f4f4; }
+    #input-form { display: flex; padding: 1em; background: #fff; }
+    input { flex: 1; padding: 0.5em; font-size: 1em; }
+    button { padding: 0.5em 1em; }
+    .user { font-weight: bold; margin-top: 1em; }
+    .agent { margin-left: 1em; color: #333; }
+  </style>
+</head>
+<body>
+  <div id="chat"></div>
+  <form id="input-form">
+    <input type="text" id="user-input" placeholder="Typ hier je vraag..." autocomplete="off" />
+    <button type="submit">Verzend</button>
+  </form>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,33 @@
+const chat = document.getElementById("chat");
+const form = document.getElementById("input-form");
+const input = document.getElementById("user-input");
+
+form.addEventListener("submit", async (e) => {
+  e.preventDefault();
+  const message = input.value.trim();
+  if (!message) return;
+
+  appendMessage("Gebruiker", message);
+  input.value = "";
+
+  try {
+    const response = await fetch("https://indicatiehulp-fn-py.azurewebsites.net/api/chatproxy", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ message })
+    });
+
+    const text = await response.text();
+    appendMessage("Agent", text);
+  } catch (err) {
+    appendMessage("Agent", "Er ging iets mis.");
+    console.error(err);
+  }
+});
+
+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;
+}
