AI Chat Interface

Here's a modern, engaging AI chat interface design with clean styling and interactive elements: AI Chat Interface

AI Assistant

Online

Hello! I'm your AI assistant. How can I help you today?

12:34 PM

:root { --primary-color: #6e48aa; --secondary-color: #9d50bb; --ai-message-bg: #f0f0f5; --user-message-bg: #6e48aa; --text-color: #333; --light-text: #777; --border-radius: 12px; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); margin: 0; padding: 20px; min-height: 100vh; display: flex; justify-content: center; align-items: center; color: var(--text-color); } .chat-container { width: 100%; max-width: 500px; background: white; border-radius: var(--border-radius); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); overflow: hidden; display: flex; flex-direction: column; height: 80vh; } .chat-header { display: flex; align-items: center; padding: 15px 20px; background: linear-gradient(to right, var(--primary-color), var(--secondary-color)); color: white; } .ai-avatar { margin-right: 15px; } .ai-icon { width: 40px; height: 40px; background: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: var(--primary-color); font-weight: bold; font-size: 16px; } .header-text h2 { margin: 0; font-size: 18px; } .status { margin: 0; font-size: 12px; opacity: 0.8; } .chat-messages { flex: 1; padding: 20px; overflow-y: auto; background-color: #f9f9f9; } .message { display: flex; margin-bottom: 15px; max-width: 80%; } .message-content { padding: 12px 15px; border-radius: var(--border-radius); position: relative; } .ai-message { align-self: flex-start; } .ai-message .message-content { background: var(--ai-message-bg); border-top-left-radius: 4px; } .user-message { align-self: flex-end; flex-direction: row-reverse; } .user-message .message-content { background: var(--user-message-bg); color: white; border-top-right-radius: 4px; } .message-time { font-size: 11px; color: var(--light-text); align-self: flex-end; margin: 0 8px; } .user-message .message-time { color: rgba(255, 255, 255, 0.7); } .chat-input { display: flex; padding: 15px; border-top: 1px solid #eee; background: white; } .chat-input textarea { flex: 1; border: 1px solid #ddd; border-radius: 20px; padding: 10px 15px; font-family: inherit; resize: none; outline: none; max-height: 100px; transition: border 0.3s; } .chat-input textarea:focus { border-color: var(--primary-color); } .send-button { width: 40px; height: 40px; border-radius: 50%; background: var(--primary-color); color: white; border: none; margin-left: 10px; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: background 0.3s; } .send-button:hover { background: var(--secondary-color); } /* Typing indicator animation */ .typing-indicator { display: flex; padding: 10px 15px; } .typing-dot { width: 8px; height: 8px; background: var(--light-text); border-radius: 50%; margin: 0 2px; animation: typingAnimation 1.4s infinite ease-in-out; } .typing-dot:nth-child(1) { animation-delay: 0s; } .typing-dot:nth-child(2) { animation-delay: 0.2s; } .typing-dot:nth-child(3) { animation-delay: 0.4s; } @keyframes typingAnimation { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } } document.addEventListener('DOMContentLoaded', () => { const chatInput = document.querySelector('.chat-input textarea'); const sendButton = document.querySelector('.send-button'); const chatMessages = document.querySelector('.chat-messages'); // Auto-resize textarea chatInput.addEventListener('input', function() { this.style.height = 'auto'; this.style.height = (this.scrollHeight) + 'px'; }); // Send message function function sendMessage() { const message = chatInput.value.trim(); if (message) { addMessage(message, 'user'); chatInput.value = ''; chatInput.style.height = 'auto'; // Simulate AI response after a delay setTimeout(() => { showTypingIndicator(); setTimeout(() => { removeTypingIndicator(); addMessage(getAIResponse(message), 'ai'); }, 1500); }, 500); } } // Add message to chat function addMessage(text, sender) { const messageDiv = document.createElement('div'); messageDiv.classList.add('message', `${sender}-message`); const contentDiv = document.createElement('div'); contentDiv.classList.add('message-content'); contentDiv.innerHTML = `

${text}

`; const timeDiv = document.createElement('div'); timeDiv.classList.add('message-time'); timeDiv.textContent = getCurrentTime(); messageDiv.appendChild(contentDiv); messageDiv.appendChild(timeDiv); chatMessages.appendChild(messageDiv); chatMessages.scrollTop = chatMessages.scrollHeight; } // Show typing indicator function showTypingIndicator() { const typingDiv = document.createElement('div'); typingDiv.classList.add('message', 'ai-message', 'typing-indicator'); typingDiv.id = 'typing-indicator'; for (let i = 0; i < 3; i++) { const dot = document.createElement('div'); dot.classList.add('typing-dot'); typingDiv.appendChild(dot); } chatMessages.appendChild(typingDiv); chatMessages.scrollTop = chatMessages.scrollHeight; } // Remove typing indicator function removeTypingIndicator() { const typingIndicator = document.getElementById('typing-indicator'); if (typingIndicator) { typingIndicator.remove(); } } // Get current time in HH:MM AM/PM format function getCurrentTime() { const now = new Date(); let hours = now.getHours(); const minutes = now.getMinutes().toString().padStart(2, '0'); const ampm = hours >= 12 ? 'PM' : 'AM'; hours = hours % 12; hours = hours ? hours : 12; return `${hours}:${minutes} ${ampm}`; } // Simple AI response logic function getAIResponse(userMessage) { const responses = [ "I understand what you're saying about: " + userMessage, "That's an interesting point about " + userMessage, "Let me think about that... " + userMessage, "I can help you with that!", "Could you tell me more about what you mean by " + userMessage + "?", "Thanks for sharing that with me." ]; return responses[Math.floor(Math.random() * responses.length)]; } // Event listeners sendButton.addEventListener('click', sendMessage); chatInput.addEventListener('keypress', (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } }); });