File size: 1,513 Bytes
3edac2b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat with Amara</title>
<style>
body { font-family: Arial, sans-serif; }
#chat-box { border: 1px solid #ccc; padding: 10px; margin: 20px; height: 400px; overflow-y: scroll; }
#user-input { margin: 20px; }
</style>
</head>
<body>
<h1>Chat with Amara</h1>
<div id="chat-box"></div>
<div id="user-input">
<input type="text" id="message" placeholder="Type your message here..." />
<button onclick="sendMessage()">Send</button>
</div>
<script>
async function sendMessage() {
const messageInput = document.getElementById('message');
const message = messageInput.value;
messageInput.value = '';
// Display the user's message
addMessage(`You: ${message}`);
// Send the message to the chatbot
const response = await fetch('/chat', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ message })
});
const data = await response.json();
addMessage(`Amara: ${data.response}`);
}
function addMessage(message) {
const chatBox = document.getElementById('chat-box');
chatBox.innerHTML += `<div>${message}</div>`;
chatBox.scrollTop = chatBox.scrollHeight; // Scroll to the bottom
}
</script>
</body>
</html>
|