MessageChatbot.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat with Assistant</title>
    <style>
        body { font-family: Arial, sans-serif; }
        #chatbox { width: 300px; height: 400px; border: 1px solid #ccc; padding: 8px; overflow-y: scroll; }
        #userInput { width: 300px; }
    </style>
</head>
<body>
    <div id="chatbox"></div>
    <input type="text" id="userInput" placeholder="Type your message...">
    <button onclick="sendMessage()">Send</button>

    <script>
        let chatHistory = [];

        function sendMessage() {
            const input = document.getElementById('userInput');
            const message = input.value;
            input.value = '';  // Clear input after sending

            updateChatbox('You', message);  // Update chatbox with user's message

            fetch('http://localhost:5000/api/chat', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ message: message, chat_history: chatHistory })
            })
            .then(response => response.json())
            .then(data => {
                updateChatbox('Assistant', data.response);  // Update chatbox with assistant's response
                chatHistory = data.chat_history;  // Update chat history from server
            })
            .catch(error => console.error('Error:', error));
        }

        function updateChatbox(sender, message) {
            const chatbox = document.getElementById('chatbox');
            chatbox.innerHTML += `<strong>${sender}:</strong> ${message}<br>`;
            chatbox.scrollTop = chatbox.scrollHeight;  // Scroll to the bottom
        }
    </script>
</body>
</html>