* { margin: 0; padding: 0; box-sizing: border-box; } body, html { height: 100%; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f7f7f8; } .chat-container { display: flex; flex-direction: column; justify-content: flex-end; height: 100vh; width: 100%; background-color: #ffffff; } .chat-body { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; background-color: #f7f7f8; } .message { margin-bottom: 20px; padding: 12px; border-radius: 10px; max-width: 70%; } .bot-message { background-color: #e0e0e0; align-self: flex-start; color: #333; } .user-message { background-color: #007bff; align-self: flex-end; color: white; } .chat-input-container { display: flex; align-items: center; padding: 10px; background-color: #ffffff; border-top: 1px solid #ccc; } #chat-input { flex: 1; padding: 12px; border-radius: 20px; border: 1px solid #ccc; font-size: 16px; outline: none; } #send-btn { background: none; border: none; margin-left: 10px; cursor: pointer; padding: 10px; } #send-btn svg { fill: #007bff; transition: fill 0.3s; } #send-btn:hover svg { fill: #0056b3; } document.getElementById('send-btn').addEventListener('click', function() { sendMessage(); }); document.getElementById('chat-input').addEventListener('keypress', function(e) { if (e.key === 'Enter') { sendMessage(); } }); function sendMessage() { const inputField = document.getElementById('chat-input'); const message = inputField.value.trim(); if (message !== '') { appendMessage(message, 'user-message'); inputField.value = ''; // Simulate bot response after a short delay setTimeout(() => { appendMessage('This is a response from GPT.', 'bot-message'); }, 1000); } } function appendMessage(text, className) { const messageContainer = document.createElement('div'); messageContainer.classList.add('message', className); messageContainer.innerHTML = `

${text}

`; const chatBody = document.getElementById('chat-body'); chatBody.appendChild(messageContainer); chatBody.scrollTop = chatBody.scrollHeight; // Auto scroll to bottom }