57 lines
2.2 KiB
HTML
57 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Vet Clinic Chat Assistant</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
<body class="bg-gray-50 min-h-screen flex items-center justify-center">
|
|
<div id="chatbox" class="w-full max-w-md mx-auto bg-white rounded-xl shadow-lg p-6">
|
|
<h2 class="text-2xl font-bold mb-4 text-center text-green-700">Vet Clinic Chat Assistant</h2>
|
|
<div id="messages" class="border border-gray-300 min-h-[120px] p-3 mb-4 bg-gray-100 rounded-lg overflow-y-auto" style="max-height: 300px;"></div>
|
|
<div class="flex gap-2">
|
|
<input id="input" type="text" placeholder="Type your message..." autofocus class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400" />
|
|
<button id="send" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">Send</button>
|
|
</div>
|
|
</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' ? 'text-gray-800 mb-2' : 'text-green-700 mb-2';
|
|
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 + "\n";
|
|
});
|
|
}
|
|
appendMsg(txt, 'bot');
|
|
} else {
|
|
appendMsg(data.reply || 'No match found.', 'bot');
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|