37 lines
1.2 KiB
HTML
37 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Chat UI</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; margin: 20px; }
|
|
#messages { border: 1px solid #ccc; height: 300px; overflow-y: scroll; padding: 10px; }
|
|
#messages div { margin-bottom: 10px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Conversation</h1>
|
|
<div id="messages"></div>
|
|
<input type="text" id="input" placeholder="Type a message" style="width:80%" />
|
|
<button id="send">Send</button>
|
|
<script>
|
|
const messages = document.getElementById('messages');
|
|
const input = document.getElementById('input');
|
|
document.getElementById('send').onclick = async () => {
|
|
const text = input.value;
|
|
if (!text) return;
|
|
messages.innerHTML += `<div><b>You:</b> ${text}</div>`;
|
|
input.value = '';
|
|
const res = await fetch('/send', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ message: text })
|
|
});
|
|
const data = await res.json();
|
|
messages.innerHTML += `<div><b>Agent:</b> ${data.reply || data}</div>`;
|
|
messages.scrollTop = messages.scrollHeight;
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|