Spaces:
Sleeping
Sleeping
File size: 2,797 Bytes
45aeeb7 |
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 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chatbot</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="chat-container">
<h1>Chatbot</h1>
<div id="chat-box"></div>
<input type="text" id="user-input" placeholder="Nhập tin nhắn ở đây...">
<input type="text" id="username" placeholder="Nhập tên của bạn..." />
<button id="send-button">Gửi</button>
<button id="clear-button">Xóa lịch sử</button>
</div>
<script>
const chatBox = document.getElementById('chat-box');
const userInput = document.getElementById('user-input');
const usernameInput = document.getElementById('username');
const sendButton = document.getElementById('send-button');
const clearButton = document.getElementById('clear-button');
// Lưu trữ lịch sử tin nhắn
const chatHistory = JSON.parse(localStorage.getItem('chatHistory')) || [];
// Hiển thị lịch sử tin nhắn
chatHistory.forEach(msg => {
chatBox.innerHTML += `<div class="${msg.role}-message">${msg.content}</div>`;
});
function addMessage(role, content) {
chatHistory.push({ role, content });
localStorage.setItem('chatHistory', JSON.stringify(chatHistory));
chatBox.innerHTML += `<div class="${role}-message">${content}</div>`;
chatBox.scrollTop = chatBox.scrollHeight; // Cuộn xuống dưới
}
sendButton.addEventListener('click', sendMessage);
userInput.addEventListener('keypress', function (e) {
if (e.key === 'Enter') {
sendMessage();
}
});
clearButton.addEventListener('click', clearChat);
function sendMessage() {
const message = userInput.value;
const username = usernameInput.value || "Người dùng";
if (!message) return;
addMessage('user', `<strong>${username}:</strong> ${message}`);
userInput.value = '';
fetch('/chat', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ message })
})
.then(response => response.json())
.then(data => {
addMessage('bot', `<strong>Bot:</strong> ${data.response}`);
});
}
function clearChat() {
localStorage.removeItem('chatHistory');
chatHistory.length = 0;
chatBox.innerHTML = '';
}
</script>
</body>
</html>
|