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 = ''; 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 = `
${formatMessage(text)}
${timeString}
`; chatMessages.appendChild(messageElement); chatMessages.scrollTop = chatMessages.scrollHeight; } function formatMessage(text) { // Simple formatting for line breaks return text.replace(/\n/g, '
'); } function showTypingIndicator() { const typingElement = document.createElement('div'); typingElement.classList.add('typing-indicator'); typingElement.id = 'typingIndicator'; typingElement.innerHTML = `
`; 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'); } });