script.js

document.addEventListener('DOMContentLoaded', () => {
    const messageForm = document.getElementById('message-form');
    const messageInput = document.getElementById('message-input');
    const chatMessages = document.getElementById('chat-messages');
    
    // Sample AI responses
    const aiResponses = [
        "I'm analyzing your request...",
        "That's an interesting question!",
        "Let me think about that for a moment.",
        "Based on my knowledge, here's what I found...",
        "I'd be happy to help with that!"
    ];
    
    // Add a sample welcome message
    addMessage('ai', "Hello! I'm your AI assistant. How can I help you today?");
    
    messageForm.addEventListener('submit', (e) => {
        e.preventDefault();
        const message = messageInput.value.trim();
        
        if (message) {
            // Add user message
            addMessage('user', message);
            messageInput.value = '';
            
            // Simulate AI thinking
            setTimeout(() => {
                const randomResponse = aiResponses[Math.floor(Math.random() * aiResponses.length)];
                addMessage('ai', randomResponse);
            }, 1000 + Math.random() * 2000);
        }
    });
    
    function addMessage(sender, text) {
        const messageElement = document.createElement('div');
        messageElement.classList.add('message');
        
        if (sender === 'user') {
            messageElement.innerHTML = `
                <div class="flex justify-end">
                    <div class="max-w-xs md:max-w-md lg:max-w-lg bg-indigo-600 text-white rounded-2xl px-4 py-2">
                        ${text}
                    </div>
                </div>
            `;
        } else {
            messageElement.innerHTML = `
                <div class="flex justify-start">
                    <div class="max-w-xs md:max-w-md lg:max-w-lg bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-2xl px-4 py-2">
                        ${text}
                    </div>
                </div>
            `;
        }
        
        chatMessages.appendChild(messageElement);
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }
});