script.js

document.addEventListener('DOMContentLoaded', function() {
    const chatMessages = document.getElementById('chatMessages');
    const messageInput = document.getElementById('messageInput');
    const sendBtn = document.getElementById('sendBtn');
    const attachBtn = document.getElementById('attachBtn');
    const attachmentOptions = document.getElementById('attachmentOptions');
    const audioModeBtn = document.getElementById('audioModeBtn');
    
    // Initial bot message
    addMessage("Hello! I'm your English tutor. How can I help you today? You can ask me about grammar, vocabulary, or practice conversation!", 'bot');
    
    // Send message when clicking send button
    sendBtn.addEventListener('click', sendMessage);
    
    // Send message when pressing Enter
    messageInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            sendMessage();
        }
    });
    
    // Toggle attachment options
    attachBtn.addEventListener('click', function() {
        attachmentOptions.classList.toggle('hidden');
    });
    
    // Audio mode toggle
    audioModeBtn.addEventListener('click', function() {
        addMessage("Audio mode activated! Let's practice speaking English together. Click the microphone icon to start recording.", 'system');
        audioModeBtn.innerHTML = '<i data-feather="mic-off" class="w-5 h-5 text-red-500"></i>';
        feather.replace();
    });
    
    function sendMessage() {
        const message = messageInput.value.trim();
        if (message) {
            addMessage(message, 'user');
            messageInput.value = '';
            
            // Show typing indicator
            showTypingIndicator();
            
            // Simulate bot response after delay
            setTimeout(() => {
                removeTypingIndicator();
                generateBotResponse(message);
            }, 1500);
        }
    }
    
    function addMessage(text, sender) {
        const messageElement = document.createElement('div');
        messageElement.classList.add('message', sender);
        
        const now = new Date();
        const timeString = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0');
        
        messageElement.innerHTML = `
            <div class="message-content">${formatMessage(text)}</div>
            <div class="message-time">${timeString}</div>
        `;
        
        chatMessages.appendChild(messageElement);
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }
    
    function formatMessage(text) {
        // Simple formatting for line breaks
        return text.replace(/\n/g, '<br>');
    }
    
    function showTypingIndicator() {
        const typingElement = document.createElement('div');
        typingElement.classList.add('typing-indicator');
        typingElement.id = 'typingIndicator';
        typingElement.innerHTML = `
            <div class="typing-dot"></div>
            <div class="typing-dot"></div>
            <div class="typing-dot"></div>
        `;
        chatMessages.appendChild(typingElement);
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }
    
    function removeTypingIndicator() {
        const typingIndicator = document.getElementById('typingIndicator');
        if (typingIndicator) {
            typingIndicator.remove();
        }
    }
    
    function generateBotResponse(userMessage) {
        // Convert to lowercase for easier matching
        const msg = userMessage.toLowerCase();
        
        let response = "";
        
        // Grammar-related responses
        if (msg.includes('grammar') || msg.includes('rule')) {
            response = "Grammar is the foundation of language! For example, remember that in English we usually follow Subject-Verb-Object order. Would you like to practice with specific tenses?";
        } 
        // Vocabulary-related responses
        else if (msg.includes('vocabulary') || msg.includes('word') || msg.includes('learn')) {
            response = "Great! Learning vocabulary is key. Try using new words in sentences immediately. For example, if you learn 'fascinating', say 'This book is fascinating!' instead of just memorizing it.";
        }
        // Pronunciation practice
        else if (msg.includes('pronounce') || msg.includes('say') || msg.includes('sound')) {
            response = "Let's practice pronunciation! Try saying: 'The weather is wonderful today.' Focus on the 'th' sound in 'the' and 'weather'. Would you like to record yourself?";
        }
        // Conversation practice
        else if (msg.includes('talk') || msg.includes('conversation') || msg.includes('speak')) {
            response = "Perfect! Let's have a conversation. Tell me about your favorite hobby and why you enjoy it. I'll respond and correct any mistakes gently!";
        }
        // Default response
        else {
            response = "That's interesting! As your English tutor, I can help with grammar explanations, vocabulary building, pronunciation practice, and conversation skills. What would you like to work on?";
        }
        
        addMessage(response, 'bot');
    }
});