Skip to content

Commit bec77fe

Browse files
zorginkopenzorginkopen
authored
Update script.js
1 parent 8ed126b commit bec77fe

File tree

1 file changed

+143
-40
lines changed

1 file changed

+143
-40
lines changed

‎script.js‎

Lines changed: 143 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,145 @@
1-
// script.js - Werkende basisversie met minimale aanpassingen voor UX
2-
3-
document.addEventListener("DOMContentLoaded", function () {
4-
const form = document.getElementById("chat-form");
5-
const input = document.getElementById("user-input");
6-
const chatBox = document.getElementById("chat-box");
7-
8-
function appendMessage(sender, text) {
9-
const messageElem = document.createElement("div");
10-
messageElem.className = sender === "user" ? "user-message" : "bot-message";
11-
messageElem.textContent = text;
12-
chatBox.appendChild(messageElem);
13-
chatBox.scrollTop = chatBox.scrollHeight;
14-
}
15-
16-
form.addEventListener("submit", async function (event) {
17-
event.preventDefault();
18-
const userInput = input.value.trim();
19-
if (!userInput) return;
20-
21-
appendMessage("user", userInput);
22-
input.value = "";
23-
24-
try {
25-
const response = await fetch("https://chatproxy.azurewebsites.net/api/chatproxy", {
26-
method: "POST",
27-
headers: { "Content-Type": "application/json" },
28-
body: JSON.stringify({ message: userInput })
29-
});
30-
31-
const result = await response.text();
32-
33-
if (!response.ok) {
34-
appendMessage("bot", "(Fout): " + result);
35-
} else {
36-
appendMessage("bot", result);
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);
37124
}
38-
} catch (error) {
39-
appendMessage("bot", "(Fout bij ophalen): " + error.message);
125+
});
126+
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;
40142
}
41-
});
42-
});
143+
</script>
144+
</body>
145+
</html>

0 commit comments

Comments
 (0)