AI Chat Interface

AI Assistant

Hello! How can I help you today?

10:00 AM

:root { --primary: #007bff; --background: #ffffff; --text: #333333; --border: #dddddd; --shadow: rgba(0,0,0,0.1); --message-user-bg: #e3f2fd; --message-ai-bg: #f5f5f5; } [data-theme="dark"] { --primary: #0d6efd; --background: #1a1a1a; --text: #ffffff; --border: #333333; --shadow: rgba(255,255,255,0.1); --message-user-bg: #2d2d2d; --message-ai-bg: #333333; } [data-theme="beige"] { --primary: #a0522d; --background: #f5f3e7; --text: #4a4a4a; --border: #d4c8b1; --shadow: rgba(168,129,89,0.1); --message-user-bg: #e8d9c5; --message-ai-bg: #f0eae1; } [data-theme="caramel"] { --primary: #d2691e; --background: #fff8dc; --text: #4b3621; --border: #deb887; --shadow: rgba(210,105,30,0.1); --message-user-bg: #f4d03f; --message-ai-bg: #f8e5b5; } * { box-sizing: border-box; margin: 0; padding: 0; transition: background 0.3s, color 0.3s; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--background); color: var(--text); min-height: 100vh; display: flex; justify-content: center; align-items: center; } .chat-container { width: 100%; max-width: 800px; height: 90vh; background: var(--background); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 4px 6px var(--shadow); display: flex; flex-direction: column; margin: 20px; } .chat-header { padding: 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .theme-switcher { display: flex; gap: 8px; } .theme-btn { width: 24px; height: 24px; border: 2px solid var(--border); border-radius: 50%; cursor: pointer; padding: 0; } .theme-btn[data-theme="beige"] { background: #f5f3e7; } .theme-btn[data-theme="light"] { background: #ffffff; } .theme-btn[data-theme="dark"] { background: #1a1a1a; } .theme-btn[data-theme="caramel"] { background: #fff8dc; } .messages-container { flex: 1; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; } .message { max-width: 70%; padding: 12px; border-radius: 12px; display: flex; flex-direction: column; gap: 4px; } .message-user { background: var(--message-user-bg); align-self: flex-end; } .message-ai { background: var(--message-ai-bg); align-self: flex-start; } .message-time { font-size: 0.75rem; color: var(--text); opacity: 0.7; align-self: flex-end; } .input-group { display: flex; gap: 8px; padding: 16px; border-top: 1px solid var(--border); } #message-input { flex: 1; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); color: var(--text); } #send-btn { padding: 12px 24px; background: var(--primary); color: white; border: none; border-radius: 8px; cursor: pointer; } .upload-btn { background: none; border: none; cursor: pointer; padding: 8px; display: grid; place-items: center; } .upload-btn svg { fill: var(--primary); } @media (max-width: 600px) { .chat-container { height: 100vh; margin: 0; border-radius: 0; } } document.addEventListener('DOMContentLoaded', () => { const messagesContainer = document.getElementById('messages'); const messageInput = document.getElementById('message-input'); const sendBtn = document.getElementById('send-btn'); const fileUpload = document.getElementById('file-upload'); const themeButtons = document.querySelectorAll('.theme-btn'); // Theme switching themeButtons.forEach(btn => { btn.addEventListener('click', () => { document.body.setAttribute('data-theme', btn.dataset.theme); }); }); // Message handling function addMessage(text, isUser = true) { const messageDiv = document.createElement('div'); messageDiv.className = `message ${isUser ? 'message-user' : 'message-ai'}`; const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); messageDiv.innerHTML = `

${text}

${time}

`; messagesContainer.appendChild(messageDiv); messagesContainer.scrollTop = messagesContainer.scrollHeight; } // Send message sendBtn.addEventListener('click', () => { const message = messageInput.value.trim(); if (message) { addMessage(message, true); messageInput.value = ''; // Simulate AI response setTimeout(() => { addMessage('This is a simulated AI response.', false); }, 1000); } }); // File upload handling fileUpload.addEventListener('change', (e) => { const file = e.target.files[0]; if (file) { addMessage(`Uploaded file: ${file.name}`, true); } }); // Enter key support messageInput.addEventListener('keypress', (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendBtn.click(); } }); });