Update script.js

Author: zorginkopen

script.js

@@ -1,6 +1,17 @@
+function appendMessage(sender, message) {
+  const chat = document.getElementById("chat");
+  const msg = document.createElement("div");
+
+  msg.classList.add("message");
+  msg.classList.add(sender === "user" ? "user-message" : "agent-message");
+  msg.textContent = message;
+
+  chat.appendChild(msg);
+  chat.scrollTop = chat.scrollHeight;
+}
+
 async function startSignalR() {
   try {
-    // Stap 1: Vraag negotiate-informatie op van je Azure Function
     const response = await fetch("https://chatproxy.azurewebsites.net/api/negotiate", {
       method: "POST"
     });
@@ -11,40 +22,41 @@ async function startSignalR() {
 
     const connectionInfo = await response.json();
 
-    // Logging: check de opgehaalde data
     console.log("🔗 Verbinding URL:", connectionInfo.url);
     console.log("🔑 Token start:", connectionInfo.accessToken?.slice(0, 30) + "...");
 
-    // Stap 2: Bouw de SignalR-verbinding
     const connection = new signalR.HubConnectionBuilder()
       .withUrl(connectionInfo.url, {
-        accessTokenFactory: () => connectionInfo.accessToken
+        accessTokenFactory: () => connectionInfo.accessToken,
+        skipNegotiation: true,
+        transport: signalR.HttpTransportType.WebSockets
       })
       .configureLogging(signalR.LogLevel.Information)
       .build();
 
-    // Stap 3: Event handler voor binnenkomende berichten
     connection.on("newMessage", message => {
-      if (typeof appendMessage === "function") {
-        appendMessage("assistant", message);
-      } else {
-        console.log("📩 Bericht ontvangen (fallback):", message);
-      }
+      appendMessage("assistant", message);
     });
 
-    // Stap 4: Start de verbinding
     await connection.start();
     console.log("✅ Verbonden met SignalR hub");
 
   } catch (err) {
     console.error("❌ SignalR fout:", err);
-    if (typeof appendMessage === "function") {
-      appendMessage("assistant", "⚠️ Verbinden met SignalR is mislukt.");
-    } else {
-      console.warn("⚠️ Verbinding mislukt (fallback):", err.message);
-    }
+    appendMessage("assistant", "⚠️ Verbinden met SignalR is mislukt.");
   }
 }
 
-// Start de verbinding zodra het script geladen wordt
+document.getElementById("input-form").addEventListener("submit", async event => {
+  event.preventDefault();
+  const inputField = document.getElementById("user-input");
+  const message = inputField.value.trim();
+  if (message === "") return;
+
+  appendMessage("user", message);
+  inputField.value = "";
+
+  // Hier kun je eventueel later een fetch toevoegen naar je backend
+});
+
 startSignalR();