doc/code/targets/playwright_demo/index.html (104 lines of code) (raw):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chatbot Demo</title>
<style>
/* Styles for the chat interface */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
#chat-container {
width: 500px;
margin: 30px auto;
background-color: #ffffff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 15px;
}
#chat-box {
height: 400px;
overflow-y: auto;
margin-bottom: 15px;
border: 1px solid #ddd;
padding: 10px;
}
.message {
margin-bottom: 10px;
}
.user-message {
text-align: right;
color: blue;
}
.bot-message {
text-align: left;
color: green;
}
#message-form {
display: flex;
}
#message-input {
flex: 1;
padding: 10px;
font-size: 16px;
}
#send-button {
padding: 10px 20px;
font-size: 16px;
}
</style>
</head>
<body>
<div id="chat-container">
<h2>Chat with a Cowboy 🤠</h2>
<div id="chat-box">
</div>
<form id="message-form">
<input type="text" id="message-input" name="message" placeholder="Type your message here..." autocomplete="off">
<button type="submit" id="send-button">Send</button>
</form>
</div>
<script>
const messageForm = document.getElementById('message-form');
const messageInput = document.getElementById('message-input');
const chatBox = document.getElementById('chat-box');
const messageHistory = [];
messageForm.addEventListener('submit', function(event) {
event.preventDefault();
const message = messageInput.value.trim();
if (message === '') return;
messageHistory.push({ role: 'user', content: message });
// Display user's message
const userMessageDiv = document.createElement('div');
userMessageDiv.classList.add('message', 'user-message');
userMessageDiv.textContent = message;
chatBox.appendChild(userMessageDiv);
// Scroll to the bottom
chatBox.scrollTop = chatBox.scrollHeight;
// Send message to the server
const xhr = new XMLHttpRequest();
xhr.open('POST', '/send_message');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
if (xhr.status === 200) {
const jsonResponse = JSON.parse(xhr.responseText);
messageHistory.push({ role: 'assistant', content: jsonResponse.bot_message });
// Display bot's message
const botMessageDiv = document.createElement('div');
botMessageDiv.classList.add('message', 'bot-message');
botMessageDiv.textContent = jsonResponse.bot_message;
chatBox.appendChild(botMessageDiv);
// Scroll to the bottom
chatBox.scrollTop = chatBox.scrollHeight;
} else {
console.error('Error:', xhr.responseText);
}
};
xhr.send(JSON.stringify({ messages: messageHistory }));
// Clear the input field
messageInput.value = '';
});
</script>
</body>
</html>