73 lines
3.4 KiB
HTML
73 lines
3.4 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>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
</head>
|
|
<body class="bg-gray-50 min-h-screen flex items-center justify-center">
|
|
<div id="chatbox" class="w-full max-w-md md:max-w-lg lg:max-w-xl mx-auto bg-white rounded-xl shadow-lg p-4 sm: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 flex-col sm:flex-row gap-2">
|
|
<input id="input" type="text" placeholder="Type your message..." autofocus class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400 text-base" />
|
|
<button id="send" class="px-4 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition text-base">Send</button>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const messages = document.getElementById('messages');
|
|
const input = document.getElementById('input');
|
|
const send = document.getElementById('send');
|
|
function appendMsg(text, who, isHtml) {
|
|
const div = document.createElement('div');
|
|
div.className = who === 'user' ? 'text-gray-800 mb-2' : 'text-green-700 mb-2';
|
|
if (isHtml) {
|
|
div.innerHTML = text;
|
|
} else {
|
|
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) {
|
|
let html = '';
|
|
html += `<div class='font-bold'>Match: <span class='text-green-800'>${data.match}</span></div>`;
|
|
if (data.notes) {
|
|
html += `<div class='my-2 p-2 bg-yellow-100 border-l-4 border-yellow-400 text-yellow-900'><b>Notes:</b> ${data.notes}</div>`;
|
|
}
|
|
if (data.procedures && data.procedures.length > 0) {
|
|
html += `<div class='mt-2 mb-1 font-semibold'>Procedures:</div>`;
|
|
html += `<ol class='list-decimal ml-6'>`;
|
|
data.procedures.forEach(function(p) {
|
|
html += `<li class='mb-2'><span class='font-bold'>${p.name}</span><br>`;
|
|
html += `<span class='block'>Cost: <span class='font-semibold'>${p.price} Ft</span></span>`;
|
|
html += `<span class='block'>Time: <span class='font-semibold'>${p.duration_minutes} min</span></span>`;
|
|
if (p.note && p.note.trim()) html += `<span class='block text-gray-600'>Note: ${p.note}</span>`;
|
|
html += `</li>`;
|
|
});
|
|
html += `</ol>`;
|
|
html += `<div class='mt-2 font-bold'>Total: <span class='text-green-800'>${data.total_price} Ft</span>, <span class='text-green-800'>${data.total_duration} min</span></div>`;
|
|
}
|
|
appendMsg(html, 'bot', true);
|
|
} else {
|
|
appendMsg(data.reply || 'No match found.', 'bot');
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|