Untitled

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AI Assistant</title> <style> body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 20px; background-color: #f0f0f0; } .container { max-width: 800px; margin: 0 auto; background-color: #ffffff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } h1 { color: #2c3e50; text-align: center; } #chatbox { height: 400px; overflow-y: auto; border: 1px solid #ddd; padding: 10px; margin-bottom: 20px; background-color: #f9f9f9; } #userInput { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 5px; } #sendButton { width: 100%; padding: 10px; background-color: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer; } #sendButton:hover { background-color: #2980b9; } </style> </head> <body> <div class="container"> <h1>AI Assistant</h1> <div id="chatbox"></div> <input type="text" id="userInput" placeholder="Type your message here..."> <button id="sendButton">Send</button> </div>
text
<script>
    const chatbox = document.getElementById('chatbox');
    const userInput = document.getElementById('userInput');
    const sendButton = document.getElementById('sendButton');

    function addMessage(sender, message) {
        const messageElement = document.createElement('p');
        messageElement.innerHTML = `<strong>${sender}:</strong> ${message}`;
        chatbox.appendChild(messageElement);
        chatbox.scrollTop = chatbox.scrollHeight;
    }

    function handleUserInput() {
        const message = userInput.value.trim();
        if (message) {
            addMessage('You', message);
            userInput.value = '';
            // Here you would typically send the message to your AI backend
            // and receive a response. For this example, we'll just echo the message.
            setTimeout(() => {
                addMessage('AI', `I received your message: "${message}"`);
            }, 1000);
        }
    }

    sendButton.addEventListener('click', handleUserInput);
    userInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            handleUserInput();
        }
    });
</script>
</body> </html>
Editor is loading...