class PepeAI { constructor() { this.settings = { theme: 'dark', speed: 5, language: 'auto', voiceEnabled: true, soundEffects: true, autoTranslate: false }; this.history = []; this.isListening = false; this.recognition = null; this.currentTask = null; this.init(); } async init() { await this.loadSettings(); this.setupEventListeners(); this.setupVoiceRecognition(); this.showTutorial(); this.displayWelcomeMessage(); } async loadSettings() { const data = await chrome.storage.local.get(['settings', 'history']); if (data.settings) { this.settings = { ...this.settings, ...data.settings }; this.applySettings(); } if (data.history) { this.history = data.history; } } async saveSettings() { await chrome.storage.local.set({ settings: this.settings }); } async saveHistory() { await chrome.storage.local.set({ history: this.history }); } applySettings() { document.body.className = this.settings.theme === 'light' ? 'light-mode' : ''; document.getElementById('themeSelect').value = this.settings.theme; document.getElementById('speedSlider').value = this.settings.speed; document.getElementById('speedValue').textContent = `${this.settings.speed}x`; document.getElementById('languageSelect').value = this.settings.language; document.getElementById('voiceEnabled').checked = this.settings.voiceEnabled; document.getElementById('soundEffects').checked = this.settings.soundEffects; document.getElementById('autoTranslate').checked = this.settings.autoTranslate; } setupEventListeners() { document.getElementById('sendBtn').addEventListener('click', () => this.sendMessage()); document.getElementById('messageInput').addEventListener('keypress', (e) => { if (e.key === 'Enter') this.sendMessage(); }); document.getElementById('voiceBtn').addEventListener('click', () => this.toggleVoice()); document.getElementById('settingsBtn').addEventListener('click', () => this.showPanel('settings')); document.getElementById('historyBtn').addEventListener('click', () => this.showPanel('history')); document.querySelectorAll('.close-btn').forEach(btn => { btn.addEventListener('click', (e) => { this.hidePanel(e.target.dataset.panel); }); }); document.getElementById('themeSelect').addEventListener('change', (e) => { this.settings.theme = e.target.value; this.applySettings(); this.saveSettings(); }); document.getElementById('speedSlider').addEventListener('input', (e) => { this.settings.speed = parseInt(e.target.value); document.getElementById('speedValue').textContent = `${this.settings.speed}x`; this.saveSettings(); }); document.getElementById('languageSelect').addEventListener('change', (e) => { this.settings.language = e.target.value; this.saveSettings(); }); document.getElementById('voiceEnabled').addEventListener('change', (e) => { this.settings.voiceEnabled = e.target.checked; this.saveSettings(); }); document.getElementById('soundEffects').addEventListener('change', (e) => { this.settings.soundEffects = e.target.checked; this.saveSettings(); }); document.getElementById('autoTranslate').addEventListener('change', (e) => { this.settings.autoTranslate = e.target.checked; this.saveSettings(); }); document.getElementById('clearHistory').addEventListener('click', () => { this.clearHistory(); }); document.getElementById('closeTutorial').addEventListener('click', () => { this.hideTutorial(); }); } setupVoiceRecognition() { if ('webkitSpeechRecognition' in window) { this.recognition = new webkitSpeechRecognition(); this.recognition.continuous = false; this.recognition.interimResults = true; this.recognition.onstart = () => { this.isListening = true; document.getElementById('voiceBtn').classList.add('listening'); document.getElementById('voiceIndicator').classList.remove('hidden'); this.playSound('start'); }; this.recognition.onresult = (event) => { const transcript = Array.from(event.results) .map(result => result[0].transcript) .join(''); document.getElementById('messageInput').value = transcript; }; this.recognition.onend = () => { this.isListening = false; document.getElementById('voiceBtn').classList.remove('listening'); document.getElementById('voiceIndicator').classList.add('hidden'); const message = document.getElementById('messageInput').value.trim(); if (message) { this.sendMessage(); } this.playSound('end'); }; this.recognition.onerror = (event) => { console.error('Speech recognition error:', event.error); this.isListening = false; document.getElementById('voiceBtn').classList.remove('listening'); document.getElementById('voiceIndicator').classList.add('hidden'); }; } } toggleVoice() { if (!this.settings.voiceEnabled) { this.addMessage('ai', 'Voice commands are disabled. Enable them in settings.'); return; } if (!this.recognition) { this.addMessage('ai', 'Voice recognition is not supported in your browser.'); return; } if (this.isListening) { this.recognition.stop(); } else { this.recognition.start(); } } async sendMessage() { const input = document.getElementById('messageInput'); const message = input.value.trim(); if (!message) return; this.addMessage('user', message); input.value = ''; await this.processTask(message); } async processTask(message) { const taskId = Date.now(); this.currentTask = taskId; this.addMessage('ai', '', true); await this.delay(500); const detectedIntent = this.detectIntent(message); const steps = this.generateSteps(detectedIntent, message); const aiMessageElement = document.querySelector('.message.ai:last-child'); const stepsContainer = document.createElement('div'); stepsContainer.className = 'step-container'; aiMessageElement.querySelector('.message-content').appendChild(stepsContainer); for (let i = 0; i < steps.length; i++) { if (this.currentTask !== taskId) break; await this.executeStep(stepsContainer, steps[i], i); } const response = this.generateResponse(detectedIntent, message); await this.typeMessage(aiMessageElement.querySelector('.message-content'), response); this.addToHistory(message, detectedIntent); this.playSound('complete'); } detectIntent(message) { const lower = message.toLowerCase(); if (lower.includes('email') || lower.includes('mail')) return 'email'; if (lower.includes('order') || lower.includes('pizza') || lower.includes('food')) return 'order'; if (lower.includes('search') || lower.includes('find') || lower.includes('look up')) return 'search'; if (lower.includes('schedule') || lower.includes('calendar') || lower.includes('remind')) return 'schedule'; if (lower.includes('translate')) return 'translate'; if (lower.includes('calculate') || lower.includes('math')) return 'calculate'; if (lower.includes('weather')) return 'weather'; if (lower.includes('code') || lower.includes('program')) return 'code'; return 'general'; } generateSteps(intent, message) { const baseSteps = { email: [ { icon: '🔍', text: 'Analyzing email request', delay: 800 }, { icon: '📧', text: 'Connecting to email service', delay: 1000 }, { icon: '✍️', text: 'Composing email draft', delay: 1200 }, { icon: '✅', text: 'Email ready to send', delay: 600 } ], order: [ { icon: '🔍', text: 'Understanding order details', delay: 700 }, { icon: '🍕', text: 'Searching available restaurants', delay: 1000 }, { icon: '💳', text: 'Preparing checkout process', delay: 900 }, { icon: '✅', text: 'Order prepared', delay: 600 } ], search: [ { icon: '🔍', text: 'Searching the web', delay: 800 }, { icon: '📊', text: 'Analyzing results', delay: 1000 }, { icon: '📝', text: 'Summarizing information', delay: 900 }, { icon: '✅', text: 'Search complete', delay: 500 } ], schedule: [ { icon: '📅', text: 'Accessing calendar', delay: 800 }, { icon: '🔍', text: 'Finding available slots', delay: 900 }, { icon: '⏰', text: 'Creating event', delay: 1000 }, { icon: '✅', text: 'Event scheduled', delay: 600 } ], translate: [ { icon: '🔍', text: 'Detecting language', delay: 600 }, { icon: '🌐', text: 'Translating text', delay: 1000 }, { icon: '✅', text: 'Translation complete', delay: 500 } ], calculate: [ { icon: '🔢', text: 'Parsing expression', delay: 600 }, { icon: '🧮', text: 'Computing result', delay: 800 }, { icon: '✅', text: 'Calculation complete', delay: 500 } ], weather: [ { icon: '🌍', text: 'Detecting location', delay: 700 }, { icon: '🌤️', text: 'Fetching weather data', delay: 1000 }, { icon: '✅', text: 'Weather info retrieved', delay: 500 } ], code: [ { icon: '💻', text: 'Analyzing code request', delay: 800 }, { icon: '✏️', text: 'Writing code solution', delay: 1200 }, { icon: '🔍', text: 'Optimizing code', delay: 900 }, { icon: '✅', text: 'Code ready', delay: 500 } ], general: [ { icon: '🧠', text: 'Processing request', delay: 800 }, { icon: '💭', text: 'Formulating response', delay: 1000 }, { icon: '✅', text: 'Response ready', delay: 600 } ] }; return baseSteps[intent] || baseSteps.general; } async executeStep(container, step, index) { const stepElement = document.createElement('div'); stepElement.className = 'step-item'; stepElement.style.animationDelay = `${index * 0.1}s`; stepElement.innerHTML = ` ${step.icon} ${step.text} ⏳ `; container.appendChild(stepElement); const adjustedDelay = step.delay / this.settings.speed; await this.delay(adjustedDelay); const statusElement = stepElement.querySelector('.step-status'); statusElement.textContent = '✓'; statusElement.className = 'step-status complete'; } generateResponse(intent, message) { const responses = { email: "I've prepared your email draft. To send it, I'll need access to your email account. You can review and send it manually, or grant me permission to send emails on your behalf.", order: "I've found several options for your order. To complete the purchase, I'll need access to your preferred delivery service. Would you like me to open the order page for you?", search: "I've gathered information from multiple sources. Here's a summary of what I found. Would you like me to dig deeper into any specific aspect?", schedule: "I've prepared your calendar event. To finalize it, I'll need access to your calendar. You can manually add it or grant me calendar permissions.", translate: "Translation complete! I've processed the text in the detected language and converted it to your target language.", calculate: "I've computed the result for you. Let me know if you need additional calculations or explanations.", weather: "I've retrieved the current weather information for your location. Would you like a detailed forecast?", code: "I've written the code solution for you. The implementation follows best practices and includes necessary error handling.", general: "I've processed your request and prepared a comprehensive response. Is there anything specific you'd like me to elaborate on?" }; return responses[intent] || responses.general; } async typeMessage(element, text) { const thinkingIndicator = element.querySelector('.thinking-indicator'); if (thinkingIndicator) { thinkingIndicator.remove(); } const baseDelay = 30 / this.settings.speed; for (let char of text) { element.textContent += char; await this.delay(baseDelay); } } addMessage(type, content, showThinking = false) { const messagesArea = document.getElementById('messagesArea'); const messageDiv = document.createElement('div'); messageDiv.className = `message ${type}`; const avatar = document.createElement('div'); avatar.className = 'message-avatar'; avatar.textContent = type === 'user' ? '👤' : '🐸'; const contentDiv = document.createElement('div'); contentDiv.className = 'message-content'; if (showThinking) { contentDiv.innerHTML = `

`; } else { contentDiv.textContent = content; } messageDiv.appendChild(avatar); messageDiv.appendChild(contentDiv); messagesArea.appendChild(messageDiv); messagesArea.scrollTop = messagesArea.scrollHeight; } displayWelcomeMessage() { const messagesArea = document.getElementById('messagesArea'); if (messagesArea.children.length === 0) { this.addMessage('ai', "Hi! I'm Pepe AI 🐸. I can help you with emails, ordering food, searching the web, scheduling, translations, and much more. Try typing or using voice commands!"); } } showTutorial() { chrome.storage.local.get(['tutorialShown'], (data) => { if (!data.tutorialShown) { document.getElementById('tutorialOverlay').classList.remove('hidden'); } }); } hideTutorial() { document.getElementById('tutorialOverlay').classList.add('hidden'); chrome.storage.local.set({ tutorialShown: true }); } showPanel(panelName) { document.getElementById(`${panelName}Panel`).classList.remove('hidden'); if (panelName === 'history') { this.renderHistory(); } } hidePanel(panelName) { document.getElementById(`${panelName}Panel`).classList.add('hidden'); } renderHistory() { const historyList = document.getElementById('historyList'); historyList.innerHTML = ''; if (this.history.length === 0) { historyList.innerHTML = '

No history yet

'; return; } this.history.slice().reverse().forEach((item, index) => { const historyItem = document.createElement('div'); historyItem.className = 'history-item'; historyItem.innerHTML = `

${new Date(item.timestamp).toLocaleString()}

${item.task}

Type: ${item.intent}

`; historyItem.addEventListener('click', () => { document.getElementById('messageInput').value = item.task; this.hidePanel('history'); }); historyList.appendChild(historyItem); }); } addToHistory(task, intent) { this.history.push({ task, intent, timestamp: Date.now() }); if (this.history.length > 50) { this.history.shift(); } this.saveHistory(); } clearHistory() { this.history = []; this.saveHistory(); this.renderHistory(); this.playSound('complete'); } playSound(type) { if (!this.settings.soundEffects) return; const audioContext = new (window.AudioContext || window.webkitAudioContext)(); const oscillator = audioContext.createOscillator(); const gainNode = audioContext.createGain(); oscillator.connect(gainNode); gainNode.connect(audioContext.destination); const frequencies = { start: 440, end: 550, complete: 660 }; oscillator.frequency.value = frequencies[type] || 440; oscillator.type = 'sine'; gainNode.gain.setValueAtTime(0.1, audioContext.currentTime); gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1); oscillator.start(audioContext.currentTime); oscillator.stop(audioContext.currentTime + 0.1); } delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } } document.addEventListener('DOMContentLoaded', () => { new PepeAI(); });