<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Chat</title>
<!-- Bootstrap CSS -->
<link
href="[Link]
rel="stylesheet"
xintegrity="sha384-QWTKZT6kI6bA0Qe+QjS585L7/x+c6r2/zL3Wb5/6f6T5D12jQ2IeN+3N8M2J/
F2L4B4V4K5N4A9K6S7F3D/E2H5" crossorigin="anonymous">
<!-- Custom CSS -->
<style>
@import url('[Link]
family=Inter:wght@400;500;700&display=swap');
body {
font-family: 'Inter', sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.chat-container {
width: 100%;
max-width: 600px;
height: 80vh;
display: flex;
flex-direction: column;
border-radius: 1rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
overflow: hidden;
}
.chat-header {
background-color: #0d6efd;
color: white;
padding: 1rem;
text-align: center;
font-weight: 600;
}
.chat-messages {
flex-grow: 1;
padding: 1.5rem;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 1rem;
background-color: white;
}
.message {
max-width: 85%;
padding: 0.75rem 1.25rem;
border-radius: 1.5rem;
word-wrap: break-word;
}
.user-message {
background-color: #0d6efd;
color: white;
align-self: flex-end;
border-bottom-right-radius: 0.25rem;
}
.bot-message {
background-color: #e9e9eb;
color: #2c3e50;
align-self: flex-start;
border-bottom-left-radius: 0.25rem;
}
.chat-input {
padding: 1rem;
background-color: #f0f2f5;
display: flex;
align-items: center;
gap: 0.5rem;
}
.chat-input input {
flex-grow: 1;
border-radius: 1.5rem;
border: 1px solid #ced4da;
padding: 0.75rem 1.25rem;
outline: none;
}
.chat-input button {
border-radius: 1.5rem;
padding: 0.75rem 1.5rem;
font-weight: 500;
}
</style>
</head>
<body>
<div class="chat-container">
<div class="chat-header">Simple Chat Simulation</div>
<div class="chat-messages" id="chat-messages">
<!-- Initial bot message -->
<div class="message bot-message">Hello! Type a message to start
chatting.</div>
</div>
<div class="chat-input">
<input type="text" id="message-input" class="form-control"
placeholder="Type your message...">
<button id="send-btn" class="btn btn-primary">Send</button>
</div>
</div>
<script>
// Get references to the DOM elements
const chatMessages = [Link]('chat-messages');
const messageInput = [Link]('message-input');
const sendButton = [Link]('send-btn');
// Function to add a new message to the chat
function addMessage(message, isUser) {
const messageDiv = [Link]('div');
[Link]('message', isUser ? 'user-message' : 'bot-
message');
[Link] = message;
[Link](messageDiv);
// Scroll to the bottom to show the latest message
[Link] = [Link];
}
// Function to simulate a bot response
function simulateBotResponse() {
// A list of simple, canned responses
const responses = [
"That's interesting!",
"I hear you loud and clear.",
"Can you tell me more about that?",
"I'm just a simple bot, but I understand.",
"That sounds like a great idea!"
];
// Get a random response from the list
const botMessage = responses[[Link]([Link]() * [Link])];
// Add the bot's message after a short delay
setTimeout(() => {
addMessage(botMessage, false);
}, 1000); // 1-second delay
}
// Function to handle sending a message
function sendMessage() {
const userMessage = [Link]();
if (userMessage === '') {
return; // Don't send empty messages
}
// Add the user's message to the chat
addMessage(userMessage, true);
// Clear the input field
[Link] = '';
// Trigger the bot's response
simulateBotResponse();
}
// Event listener for the Send button
[Link]('click', sendMessage);
// Event listener for the Enter key on the input field
[Link]('keypress', (event) => {
if ([Link] === 'Enter') {
sendMessage();
}
});
</script>
<!-- Bootstrap JS (optional, for components that use JS) -->
<script
src="[Link]
xintegrity="sha384-cK/s85K6b3hH/vJ4X5b4K3T5yV2d5o5C5N5S6A6K2F7G1T1/4V5Z7L5D2X1H5D6A
5D3S5A6K7G4F6B5C2A2D4B2G5F6C6A6E4F6D4C5B6A7K5L6N7M8I7J7L4S5T5Y5Z"
crossorigin="anonymous"></script>
</body>
</html>
