|
1 | | -<!DOCTYPE html> |
2 | | -<html lang="nl"> |
3 | | -<head> |
4 | | - <meta charset="UTF-8" /> |
5 | | - <meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
6 | | - <title>Chat met Agent</title> |
7 | | - <style> |
8 | | - body { |
9 | | - font-family: Arial, sans-serif; |
10 | | - background-color: #f4f4f4; |
11 | | - margin: 0; |
12 | | - padding: 0; |
13 | | - display: flex; |
14 | | - flex-direction: column; |
15 | | - height: 100vh; |
16 | | - } |
17 | | - |
18 | | - #chat { |
19 | | - flex-grow: 1; |
20 | | - padding: 20px; |
21 | | - overflow-y: auto; |
22 | | - display: flex; |
23 | | - flex-direction: column; |
24 | | - } |
25 | | - |
26 | | - .message { |
27 | | - margin: 10px; |
28 | | - padding: 10px; |
29 | | - border-radius: 10px; |
30 | | - max-width: 70%; |
31 | | - clear: both; |
32 | | - } |
33 | | - |
34 | | - .message.user { |
35 | | - background-color: #e0f7fa; |
36 | | - align-self: flex-end; |
37 | | - margin-left: auto; |
38 | | - } |
39 | | - |
40 | | - .message.agent { |
41 | | - background-color: #f1f8e9; |
42 | | - align-self: flex-start; |
43 | | - margin-right: auto; |
44 | | - } |
45 | | - |
46 | | - .message-header { |
47 | | - font-size: 0.8em; |
48 | | - color: #555; |
49 | | - margin-bottom: 4px; |
50 | | - } |
51 | | - |
52 | | - .timestamp { |
53 | | - float: right; |
54 | | - font-size: 0.75em; |
55 | | - color: #999; |
56 | | - } |
57 | | - |
58 | | - form { |
59 | | - display: flex; |
60 | | - padding: 10px; |
61 | | - background-color: #fff; |
62 | | - border-top: 1px solid #ccc; |
63 | | - } |
64 | | - |
65 | | - input[type="text"] { |
66 | | - flex-grow: 1; |
67 | | - padding: 10px; |
68 | | - font-size: 16px; |
69 | | - border: 1px solid #ccc; |
70 | | - border-radius: 5px; |
71 | | - } |
72 | | - |
73 | | - button { |
74 | | - padding: 10px 15px; |
75 | | - font-size: 16px; |
76 | | - background-color: #1976d2; |
77 | | - color: white; |
78 | | - border: none; |
79 | | - border-radius: 5px; |
80 | | - margin-left: 10px; |
81 | | - cursor: pointer; |
82 | | - } |
83 | | - </style> |
84 | | -</head> |
85 | | -<body> |
86 | | - <div id="chat"></div> |
87 | | - |
88 | | - <form id="input-form"> |
89 | | - <input type="text" id="user-input" placeholder="Typ hier je bericht..." autocomplete="off" /> |
90 | | - <button type="submit">Verstuur</button> |
91 | | - </form> |
92 | | - |
93 | | - <script> |
94 | | - const chat = document.getElementById("chat"); |
95 | | - const form = document.getElementById("input-form"); |
96 | | - const input = document.getElementById("user-input"); |
97 | | - |
98 | | - form.addEventListener("submit", async (e) => { |
99 | | - e.preventDefault(); |
100 | | - const message = input.value.trim(); |
101 | | - if (!message) return; |
102 | | - |
103 | | - appendMessage("Gebruiker", message); |
104 | | - input.value = ""; |
105 | | - |
106 | | - try { |
107 | | - const response = await fetch("https://chatproxy.azurewebsites.net/api/chatproxy", { |
108 | | - method: "POST", |
109 | | - headers: { "Content-Type": "application/json" }, |
110 | | - body: JSON.stringify({ message }) |
111 | | - }); |
112 | | - |
113 | | - if (!response.ok) { |
114 | | - const errorText = await response.text(); |
115 | | - console.error("Responsetekst:", errorText); |
116 | | - throw new Error(`Serverfout: ${response.status}`); |
117 | | - } |
118 | | - |
119 | | - const text = await response.text(); |
120 | | - appendMessage("Agent", text); |
121 | | - } catch (err) { |
122 | | - appendMessage("Agent", "Er ging iets mis."); |
123 | | - console.error("Fout in fetch:", err); |
124 | | - } |
| 1 | +const chat = document.getElementById("chat"); |
| 2 | +const form = document.getElementById("input-form"); |
| 3 | +const input = document.getElementById("user-input"); |
| 4 | + |
| 5 | +form.addEventListener("submit", async (e) => { |
| 6 | + e.preventDefault(); |
| 7 | + const message = input.value.trim(); |
| 8 | + if (!message) return; |
| 9 | + |
| 10 | + appendMessage("Gebruiker", message); |
| 11 | + input.value = ""; |
| 12 | + |
| 13 | + try { |
| 14 | + const response = await fetch("https://chatproxy.azurewebsites.net/api/chatproxy", { |
| 15 | + method: "POST", |
| 16 | + headers: { "Content-Type": "application/json" }, |
| 17 | + body: JSON.stringify({ message }) |
125 | 18 | }); |
126 | 19 |
|
127 | | - function appendMessage(sender, text) { |
128 | | - const timestamp = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); |
129 | | - |
130 | | - const msgWrapper = document.createElement("div"); |
131 | | - msgWrapper.className = sender === "Gebruiker" ? "message user" : "message agent"; |
132 | | - |
133 | | - msgWrapper.innerHTML = ` |
134 | | - <div class="message-header"> |
135 | | - <strong>${sender}</strong> <span class="timestamp">${timestamp}</span> |
136 | | - </div> |
137 | | - <div class="message-body">${text}</div> |
138 | | - `; |
139 | | - |
140 | | - chat.appendChild(msgWrapper); |
141 | | - chat.scrollTop = chat.scrollHeight; |
142 | | - } |
143 | | - </script> |
144 | | -</body> |
145 | | -</html> |
| 20 | + if (!response.ok) { |
| 21 | + const errorText = await response.text(); |
| 22 | + console.error("Responsetekst:", errorText); |
| 23 | + throw new Error(`Serverfout: ${response.status}`); |
| 24 | + } |
| 25 | + |
| 26 | + const text = await response.text(); |
| 27 | + appendMessage("Agent", text); |
| 28 | + } catch (err) { |
| 29 | + appendMessage("Agent", "Er ging iets mis."); |
| 30 | + console.error("Fout in fetch:", err); |
| 31 | + } |
| 32 | +}); |
| 33 | + |
| 34 | +function appendMessage(sender, text) { |
| 35 | + const msg = document.createElement("div"); |
| 36 | + msg.innerHTML = `<div class="user">${sender}:</div><div class="agent">${text}</div>`; |
| 37 | + chat.appendChild(msg); |
| 38 | + chat.scrollTop = chat.scrollHeight; |
| 39 | +} |
0 commit comments