70 lines
2.4 KiB
HTML
70 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Vet Clinic Chat Assistant</title>
|
|
<style>
|
|
body { font-family: sans-serif; margin: 2em; }
|
|
#chatbox { width: 100%; max-width: 600px; margin: 0 auto; }
|
|
#messages { border: 1px solid #ccc; min-height: 120px; padding: 1em; margin-bottom: 1em; background: #fafafa; }
|
|
.msg-user { color: #333; }
|
|
.msg-bot { color: #007a3d; margin-bottom: 1em; }
|
|
#input { width: 80%; padding: 0.5em; }
|
|
#send { padding: 0.5em 1em; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="chatbox">
|
|
<h2>Vet Clinic Chat Assistant</h2>
|
|
<div id="messages"></div>
|
|
<input id="input" type="text" placeholder="Type your message..." autofocus />
|
|
<button id="send">Send</button>
|
|
</div>
|
|
<script>
|
|
const messages = document.getElementById('messages');
|
|
const input = document.getElementById('input');
|
|
const send = document.getElementById('send');
|
|
function appendMsg(text, who) {
|
|
const div = document.createElement('div');
|
|
div.className = who === 'user' ? 'msg-user' : 'msg-bot';
|
|
div.textContent = text;
|
|
messages.appendChild(div);
|
|
messages.scrollTop = messages.scrollHeight;
|
|
}
|
|
send.onclick = async function() {
|
|
const msg = input.value.trim();
|
|
if (!msg) return;
|
|
appendMsg(msg, 'user');
|
|
input.value = '';
|
|
appendMsg('Thinking...', 'bot');
|
|
const resp = await fetch('/chat', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ message: msg })
|
|
});
|
|
const data = await resp.json();
|
|
messages.lastChild.remove(); // remove 'Thinking...'
|
|
if (data.match) {
|
|
var txt = "Match: " + data.match + "\n";
|
|
if (data.procedures) {
|
|
txt += "Procedures:\n";
|
|
data.procedures.forEach(function(p) {
|
|
txt += "- " + p.name + ": " + p.price + " Ft, " + p.duration_minutes + " perc\n";
|
|
});
|
|
}
|
|
if (data.total_price) txt += "Total: " + data.total_price + " Ft\n";
|
|
if (data.total_duration) txt += "Total duration: " + data.total_duration + " perc\n";
|
|
if (data.notes) txt += "Notes: " + data.notes + "\n";
|
|
appendMsg(txt, 'bot');
|
|
} else {
|
|
appendMsg('Sorry, no match found. Your message will be sent to the vet.', 'bot');
|
|
}
|
|
};
|
|
input.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Enter') send.onclick();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|