Spaces:
Sleeping
Sleeping
| <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> | |