1 line
31 KiB
JSON
1 line
31 KiB
JSON
{"repo": "2024-1-0782dapdapog-stack/codequest", "files": {"js/mentor.js": {"41552d28140e2e04059aa8985d4f1990cd6bd349": {"t": 1785768936.5641983, "n": 14476, "h": "14e1821b26f7e68b", "c": "/**\r\n * CODEQUEST – MENTOR UI\r\n * Voice guide selection, mentor portraits, and AI helper popup.\r\n */\r\n(function() {\r\n const STORAGE_KEYS = {\r\n mentorId: 'codequest_selected_mentor',\r\n aiMuted: 'codequest_ai_muted'\r\n };\r\n\r\n const mentorProfiles = [\r\n {\r\n id: 'clara',\r\n label: 'Clara',\r\n voiceHints: ['zira', 'samantha', 'serena', 'female', 'clara'],\r\n langHints: ['en-us', 'en-gb'],\r\n rate: 0.98,\r\n pitch: 1.05,\r\n icon: 'Pixel Art/Clara/Clara_Icon.png',\r\n happy: 'Pixel Art/Clara/Clara_Happy.png',\r\n sad: 'Pixel Art/Clara/Clara_Sad.png',\r\n talking: 'Pixel Art/Clara/Clara_Talking.png'\r\n },\r\n {\r\n id: 'client',\r\n label: 'Client',\r\n voiceHints: ['david', 'male', 'alex', 'daniel', 'client'],\r\n langHints: ['en-us', 'en-gb'],\r\n rate: 0.95,\r\n pitch: 0.92,\r\n icon: 'Pixel Art/Client/Client_Icon.png',\r\n happy: 'Pixel Art/Client/Client_Happy.png',\r\n sad: 'Pixel Art/Client/Client_Sad.png',\r\n talking: 'Pixel Art/Client/Client_Talking.png'\r\n },\r\n {\r\n id: 'kenji',\r\n label: 'Kenji',\r\n voiceHints: ['kenji', 'japan', 'haruka', 'takumi', 'male'],\r\n langHints: ['ja', 'en-us'],\r\n rate: 0.92,\r\n pitch: 0.97,\r\n icon: 'Pixel Art/Kenji/Kenji_Icon.png',\r\n happy: 'Pixel Art/Kenji/Kenji_Happy.png',\r\n sad: 'Pixel Art/Kenji/Kenji_Sad.png',\r\n talking: 'Pixel Art/Kenji/Kenji_Talking.png'\r\n },\r\n {\r\n id: 'scarlet',\r\n label: 'Scarlet',\r\n voiceHints: ['scarlet', 'female', 'victoria', 'fiona', 'microsoft zira'],\r\n langHints: ['en-gb', 'en-us'],\r\n rate: 1.01,\r\n pitch: 1.12,\r\n icon: 'Pixel Art/Scarlet/Scarlet_Icon.png',\r\n happy: 'Pixel Art/Scarlet/Scarlet_Happy.png',\r\n sad: 'Pixel Art/Scarlet/Scarlet_Sad.png',\r\n talking: 'Pixel Art/Scarlet/Scarlet_Talking.png'\r\n }\r\n ];\r\n\r\n const state = {\r\n mentorId: 'clara',\r\n mood: 'idle',\r\n talking: false,\r\n aiMuted: false,\r\n aiOpen: false,\r\n voicesReady: false,\r\n voices: []\r\n };\r\n\r\n let elements = {};\r\n\r\n function safeGetStorage(key, fallback) {\r\n try {\r\n const value = localStorage.getItem(key);\r\n return value === null ? fallback : value;\r\n } catch (e) {\r\n return fallback;\r\n }\r\n }\r\n\r\n function safeSetStorage(key, value) {\r\n try {\r\n localStorage.setItem(key, value);\r\n } catch (e) {}\r\n }\r\n\r\n function getMentorProfile(mentorId) {\r\n return mentorProfiles.find((profile) => profile.id === mentorId) || mentorProfiles[0];\r\n }\r\n\r\n function portraitFor(profile, mood) {\r\n const source = mood === 'talking'\r\n ? profile.talking\r\n : mood === 'happy'\r\n ? profile.happy\r\n : mood === 'sad'\r\n ? profile.sad\r\n : profile.icon;\r\n return encodeURI(source);\r\n }\r\n\r\n function getActiveMood() {\r\n return state.talking ? 'talking' : state.mood;\r\n }\r\n\r\n function syncMentorDisplay() {\r\n const profile = getMentorProfile(state.mentorId);\r\n const activeMood = getActiveMood();\r\n const portrait = portraitFor(profile, activeMood);\r\n\r\n document.querySelectorAll('[data-mentor-portrait]').forEach((node) => {\r\n node.src = portrait;\r\n node.alt = profile.label + ' ' + activeMood + ' portrait';\r\n });\r\n\r\n document.querySelectorAll('[data-mentor-option]').forEach((button) => {\r\n const selected = button.dataset.mentorId === profile.id;\r\n button.classList.toggle('selected', selected);\r\n button.setAttribute('aria-checked', selected ? 'true' : 'false');\r\n });\r\n\r\n if (elements.aiMuteBtn) {\r\n elements.aiMuteBtn.textContent = state.aiMuted ? '🔇' : '🔊';\r\n elements.aiMuteBtn.title = state.aiMuted ? 'Unmute AI voice' : 'Mute AI voice';\r\n }\r\n }\r\n\r\n function setMentorMood(mood) {\r\n state.mood = mood === 'happy' || mood === 'sad' ? mood : 'idle';\r\n syncMentorDisplay();\r\n return state.mood;\r\n }\r\n\r\n function setMentorTalking(talking) {\r\n state.talking = !!talking;\r\n syncMentorDisplay();\r\n return state.talking;\r\n }\r\n\r\n function setSelectedMentorId(mentorId) {\r\n state.mentorId = getMentorProfile(mentorId).id;\r\n safeSetStorage(STORAGE_KEYS.mentorId, state.mentorId);\r\n syncMentorDisplay();\r\n return state.mentorId;\r\n }\r\n\r\n function getSelectedMentorProfile() {\r\n return getMentorProfile(state.mentorId);\r\n }\r\n\r\n function refreshVoices() {\r\n if (!window.speechSynthesis || typeof window.speechSynthesis.getVoices !== 'function') return;\r\n state.voices = window.speechSynthesis.getVoices() || [];\r\n state.voicesReady = state.voices.length > 0;\r\n }\r\n\r\n function pickSpeechVoice(profile) {\r\n refreshVoices();\r\n if (!state.voices.length) return null;\r\n\r\n const loweredHints = profile.voiceHints.map((hint) => hint.toLowerCase());\r\n const loweredLangHints = profile.langHints.map((hint) => hint.toLowerCase());\r\n\r\n const scored = state.voices.map((voice) => {\r\n const name = (voice.name || '').toLowerCase();\r\n const lang = (voice.lang || '').toLowerCase();\r\n let score = 0;\r\n loweredHints.forEach((hint) => {\r\n if (name.includes(hint)) score += 4;\r\n });\r\n loweredLangHints.forEach((hint) => {\r\n if (lang.startsWith(hint)) score += 2;\r\n });\r\n if (name.includes('microsoft')) score += 1;\r\n return { voice, score };\r\n }).sort((left, right) => right.score - left.score);\r\n\r\n return scored.length && scored[0].score > 0\r\n ? scored[0].voice\r\n : state.voices[0];\r\n }\r\n\r\n function pickAiVoice() {\r\n refreshVoices();\r\n if (!state.voices.length) return null;\r\n\r\n const syntheticHints = ['zira', 'david', 'microsoft', 'google', 'female', 'male'];\r\n const scored = state.voices.map((voice) => {\r\n const name = (voice.name || '').toLowerCase();\r\n let score = 0;\r\n syntheticHints.forEach((hint) => {\r\n if (name.includes(hint)) score += 1;\r\n });\r\n return { voice, score };\r\n }).sort((left, right) => right.score - left.score);\r\n\r\n return scored.length ? scored[0].voice : null;\r\n }\r\n\r\n function setAiMuted(muted) {\r\n state.aiMuted = !!muted;\r\n safeSetStorage(STORAGE_KEYS.aiMuted, state.aiMuted ? '1' : '0');\r\n if (state.aiMuted && window.speechSynthesis) {\r\n window.speechSynthesis.cancel();\r\n }\r\n syncMentorDisplay();\r\n return state.aiMuted;\r\n }\r\n\r\n function getAiMuted() {\r\n return state.aiMuted;\r\n }\r\n\r\n function openAiPanel() {\r\n if (!elements.aiPanel) return;\r\n state.aiOpen = true;\r\n elements.aiPanel.classList.add('open');\r\n elements.aiPanel.setAttribute('aria-hidden', 'false');\r\n if (elements.aiInput) elements.aiInput.focus();\r\n if (elements.aiMessages && !elements.aiMessages.childElementCount) {\r\n addAiMessage('bot', 'Hi, I am the AI helper. Ask me for a hint or tell me the level you are stuck on.');\r\n }\r\n }\r\n\r\n function closeAiPanel() {\r\n if (!elements.aiPanel) return;\r\n state.aiOpen = false;\r\n elements.aiPanel.classList.remove('open');\r\n elements.aiPanel.setAttribute('aria-hidden', 'true');\r\n }\r\n\r\n function toggleAiPanel() {\r\n if (state.aiOpen) closeAiPanel();\r\n else openAiPanel();\r\n }\r\n\r\n function addAiMessage(role, text) {\r\n if (!elements.aiMessages) return null;\r\n const message = document.createElement('div');\r\n message.className = 'ai-message ' + (role === 'user' ? 'user' : 'bot');\r\n message.textContent = text;\r\n elements.aiMessages.appendChild(message);\r\n elements.aiMessages.scrollTop = elements.aiMessages.scrollHeight;\r\n return message;\r\n }\r\n\r\n function speakAiText(text) {\r\n if (state.aiMuted || !text || !window.speechSynthesis || !window.SpeechSynthesisUtterance) return;\r\n try {\r\n window.speechSynthesis.cancel();\r\n const utterance = new SpeechSynthesisUtterance(text);\r\n const voice = pickAiVoice();\r\n if (voice) utterance.voice = voice;\r\n utterance.rate = 1.06;\r\n utterance.pitch = 0.72;\r\n utterance.volume = 1;\r\n window.speechSynthesis.speak(utterance);\r\n } catch (e) {}\r\n }\r\n\r\n function buildAiContext() {\r\n const levelTitle = document.getElementById('level-title');\r\n const instructions = document.getElementById('instructions');\r\n const title = levelTitle ? levelTitle.textContent : 'current level';\r\n const task = instructions ? (instructions.textContent || '').replace(/\\s+/g, ' ').trim() : '';\r\n return { title, task };\r\n }\r\n\r\n function fallbackAiReply(userText) {\r\n const prompt = (userText || '').toLowerCase();\r\n const context = buildAiContext();\r\n\r\n if (prompt.includes('html') || context.title.toLowerCase().includes('html')) {\r\n return 'Check the required tag name, then compare your markup to the instructions. If you are stuck, ask me for the exact structure.';\r\n }\r\n if (prompt.includes('css') || context.title.toLowerCase().includes('css')) {\r\n return 'Focus on selector, property, and value. The fastest fix is usually a missing colon, brace, or class name.';\r\n }\r\n if (prompt.includes('javascript') || prompt.includes('js')) {\r\n return 'Look for the event or function the task asks for, then match the variable and method names exactly.';\r\n }\r\n return 'Tell me the level name or paste the code you are trying to write, and I will give you a targeted hint.';\r\n }\r\n\r\n async function fetchAiReply(userText) {\r\n const endpoint = window.CODEQUEST_AI_ENDPOINT || window.CODEQUEST_AI_API_URL || safeGetStorage('codequest_ai_endpoint', '');\r\n const apiKey = window.CODEQUEST_AI_API_KEY || safeGetStorage('codequest_ai_api_key', '');\r\n\r\n if (!endpoint) return fallbackAiReply(userText);\r\n\r\n const context = buildAiContext();\r\n const requestBody = {\r\n model: window.CODEQUEST_AI_MODEL || 'gpt-4o-mini',\r\n messages: [\r\n {\r\n role: 'system',\r\n content: 'You are the CodeQuest AI helper. Answer briefly, clearly, and with coding-specific help. Keep replies under 90 words when possible.'\r\n },\r\n {\r\n role: 'system',\r\n content: 'Current level: ' + context.title + '. Instructions: ' + context.task\r\n },\r\n {\r\n role: 'user',\r\n content: userText\r\n }\r\n ],\r\n temperature: 0.4\r\n };\r\n\r\n const response = await fetch(endpoint, {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n ...(apiKey ? { Authorization: 'Bearer ' + apiKey } : {})\r\n },\r\n body: JSON.stringify(requestBody)\r\n });\r\n\r\n if (!response.ok) {\r\n throw new Error('AI request failed with status ' + response.status);\r\n }\r\n\r\n const data = await response.json();\r\n const reply = data?.choices?.[0]?.message?.content\r\n || data?.output_text\r\n || data?.message\r\n || data?.text\r\n || '';\r\n\r\n return (reply || fallbackAiReply(userText)).toString().trim();\r\n }\r\n\r\n async function handleAiSubmit(userText) {\r\n const cleanText = (userText || '').trim();\r\n if (!cleanText) return;\r\n\r\n addAiMessage('user', cleanText);\r\n if (elements.aiInput) elements.aiInput.value = '';\r\n if (elements.aiStatus) elements.aiStatus.textContent = 'Thinking...';\r\n\r\n let replyText = '';\r\n try {\r\n replyText = await fetchAiReply(cleanText);\r\n } catch (e) {\r\n replyText = fallbackAiReply(cleanText);\r\n }\r\n\r\n addAiMessage('bot', replyText);\r\n if (elements.aiStatus) elements.aiStatus.textContent = state.aiMuted ? 'Muted' : 'Ready';\r\n speakAiText(replyText);\r\n }\r\n\r\n function initMentorPicker() {\r\n document.querySelectorAll('[data-mentor-option]').forEach((button) => {\r\n button.addEventListener('click', () => {\r\n setSelectedMentorId(button.dataset.mentorId);\r\n });\r\n });\r\n syncMentorDisplay();\r\n }\r\n\r\n function initAiUi() {\r\n elements = {\r\n launcher: document.getElementById('ai-launcher'),\r\n panel: document.getElementById('ai-panel'),\r\n messages: document.getElementById('ai-messages'),\r\n form: document.getElementById('ai-form'),\r\n input: document.getElementById('ai-input'),\r\n sendBtn: document.getElementById('ai-send-btn'),\r\n muteBtn: document.getElementById('ai-mute-btn'),\r\n closeBtn: document.getElementById('ai-close-btn'),\r\n status: document.getElementById('ai-status')\r\n };\r\n\r\n if (!elements.launcher || !elements.panel) return;\r\n\r\n state.aiMuted = safeGetStorage(STORAGE_KEYS.aiMuted, '0') === '1';\r\n syncMentorDisplay();\r\n\r\n elements.launcher.addEventListener('click', toggleAiPanel);\r\n elements.closeBtn?.addEventListener('click', closeAiPanel);\r\n elements.muteBtn?.addEventListener('click', () => setAiMuted(!state.aiMuted));\r\n elements.form?.addEventListener('submit', (event) => {\r\n event.preventDefault();\r\n handleAiSubmit(elements.input ? elements.input.value : '');\r\n });\r\n elements.input?.addEventListener('keydown', (event) => {\r\n if (event.key === 'Escape') closeAiPanel();\r\n });\r\n\r\n if (window.speechSynthesis) {\r\n window.speechSynthesis.onvoiceschanged = refreshVoices;\r\n }\r\n\r\n if (state.aiMuted) {\r\n elements.muteBtn.textContent = '🔇';\r\n elements.muteBtn.title = 'Unmute AI voice';\r\n }\r\n }\r\n\r\n function initMentorSelection() {\r\n state.mentorId = getMentorProfile(safeGetStorage(STORAGE_KEYS.mentorId, 'clara')).id;\r\n syncMentorDisplay();\r\n }\r\n\r\n window.getSelectedMentorProfile = getSelectedMentorProfile;\r\n window.getSelectedMentorId = function() { return state.mentorId; };\r\n window.setSelectedMentorId = setSelectedMentorId;\r\n window.setMentorMood = setMentorMood;\r\n window.setMentorTalking = setMentorTalking;\r\n window.getMentorTalking = function() { return state.talking; };\r\n window.getMentorPortraitState = getActiveMood;\r\n window.getMentorVoiceForProfile = pickSpeechVoice;\r\n window.getAiMuted = getAiMuted;\r\n window.setAiMuted = setAiMuted;\r\n window.toggleAiMuted = function() { return setAiMuted(!state.aiMuted); };\r\n window.openAiHelper = openAiPanel;\r\n window.closeAiHelper = closeAiPanel;\r\n window.toggleAiHelper = toggleAiPanel;\r\n window.sendAiHelperMessage = handleAiSubmit;\r\n window.addAiHelperMessage = addAiMessage;\r\n\r\n function init() {\r\n initMentorSelection();\r\n initMentorPicker();\r\n initAiUi();\r\n syncMentorDisplay();\r\n }\r\n\r\n if (document.readyState === 'loading') {\r\n document.addEventListener('DOMContentLoaded', init, { once: true });\r\n } else {\r\n init();\r\n }\r\n})();"}}, "js/mentor-ui.js": {"41552d28140e2e04059aa8985d4f1990cd6bd349": {"t": 1785768943.7658768, "n": 15040, "h": "8221cad37a204be6", "c": "/**\r\n * CODEQUEST – MENTOR UI\r\n * Mentor picker, avatar badge, and bottom-right AI helper.\r\n */\r\n(function() {\r\n const state = {\r\n aiOpen: false,\r\n voicePickerOpen: false,\r\n selectedMentorId: null,\r\n elements: {}\r\n };\r\n\r\n function getVoiceProfile(mentorId) {\r\n const profiles = window.CODEQUEST_MENTOR_PROFILES || [];\r\n console.log('getVoiceProfile called with:', mentorId, 'profiles count:', profiles.length);\r\n const profile = profiles.find((profile) => profile.id === mentorId) || profiles[0] || null;\r\n console.log('Returning profile:', profile ? profile.id : 'null');\r\n return profile;\r\n }\r\n\r\n function getActivePickerMentorId() {\r\n // First check global state (mentor-core.js) - this is the source of truth\r\n if (window.getSelectedMentorId) {\r\n const currentId = window.getSelectedMentorId();\r\n if (currentId) {\r\n state.selectedMentorId = currentId;\r\n return currentId;\r\n }\r\n }\r\n // Then check local state\r\n if (state.selectedMentorId) return state.selectedMentorId;\r\n // Then check window global\r\n if (window.__codequestSelectedMentorId) return window.__codequestSelectedMentorId;\r\n // Then check UI selection\r\n const selectedButton = state.elements.voicePicker ? state.elements.voicePicker.querySelector('[data-tts-option].selected, [data-tts-option][aria-checked=\"true\"]') : null;\r\n if (selectedButton && selectedButton.dataset.mentorId) return selectedButton.dataset.mentorId;\r\n // Default to clara\r\n return 'clara';\r\n }\r\n\r\n function getVoiceIntro(profile) {\r\n if (!profile) return 'Pick a mentor to hear a short introduction before you start.';\r\n if (window.getMentorIntroText) return window.getMentorIntroText(profile.id);\r\n return profile.intro || ('Hi, I am ' + profile.label + '.');\r\n }\r\n\r\n function syncAiMuteButton() {\r\n const button = state.elements.aiMuteBtn;\r\n if (!button) return;\r\n const muted = window.getAiMuted ? window.getAiMuted() : false;\r\n button.textContent = muted ? '🔇' : '🔊';\r\n button.title = muted ? 'Unmute AI voice' : 'Mute AI voice';\r\n }\r\n\r\n function syncMentorBadge() {\r\n if (window.syncMentorDisplay) window.syncMentorDisplay();\r\n syncVoicePicker();\r\n }\r\n\r\n function syncVoicePicker() {\r\n const panel = state.elements.voicePicker;\r\n if (!panel) return;\r\n\r\n const selectedId = getActivePickerMentorId();\r\n\r\n panel.querySelectorAll('[data-tts-option]').forEach((button) => {\r\n const selected = button.dataset.mentorId === selectedId;\r\n button.classList.toggle('selected', selected);\r\n button.setAttribute('aria-checked', selected ? 'true' : 'false');\r\n });\r\n }\r\n\r\n function commitVoiceSelection(mentorId, speak) {\r\n console.log('commitVoiceSelection called with:', mentorId, 'speak:', speak);\r\n const profile = getVoiceProfile(mentorId);\r\n if (!profile) {\r\n console.log('ERROR: No profile found for mentorId:', mentorId);\r\n return;\r\n }\r\n console.log('Selected mentor:', profile.id, profile.label);\r\n state.selectedMentorId = profile.id;\r\n window.__codequestSelectedMentorId = profile.id;\r\n \r\n // Set global flag for Scarlet to force ResponsiveVoice\r\n window.__isScarletSelected = (profile.id === 'scarlet');\r\n \r\n if (window.setSelectedMentorId) {\r\n console.log('Calling setSelectedMentorId:', profile.id);\r\n window.setSelectedMentorId(profile.id);\r\n }\r\n\r\n // Direct DOM update - update portrait immediately\r\n document.querySelectorAll('[data-mentor-portrait]').forEach((node) => {\r\n node.src = profile.icon;\r\n node.alt = profile.label + ' portrait';\r\n });\r\n\r\n const intro = getVoiceIntro(profile);\r\n if (window.setMentorMood) window.setMentorMood('idle');\r\n if (window.setMentorDialogueText) window.setMentorDialogueText(intro);\r\n if (speak && window.speakMentorText) {\r\n if (window.getTtsMuted && window.setTtsMuted && window.getTtsMuted()) {\r\n window.setTtsMuted(false);\r\n }\r\n window.speakMentorText(intro);\r\n }\r\n\r\n syncVoicePicker();\r\n syncMentorBadge();\r\n if (window.syncMentorDisplay) window.syncMentorDisplay();\r\n }\r\n\r\n function openVoicePicker() {\r\n if (!state.elements.voicePicker) {\r\n state.elements.voicePicker = document.getElementById('tts-picker');\r\n }\r\n if (!state.elements.voicePicker) return;\r\n state.voicePickerOpen = true;\r\n state.selectedMentorId = getActivePickerMentorId();\r\n syncMentorBadge();\r\n state.elements.voicePicker.classList.add('open');\r\n state.elements.voicePicker.setAttribute('aria-hidden', 'false');\r\n state.elements.voicePicker.style.opacity = '1';\r\n state.elements.voicePicker.style.pointerEvents = 'auto';\r\n state.elements.voicePicker.style.visibility = 'visible';\r\n syncVoicePicker();\r\n }\r\n\r\n function closeVoicePicker() {\r\n if (!state.elements.voicePicker) return;\r\n state.voicePickerOpen = false;\r\n state.elements.voicePicker.classList.remove('open');\r\n state.elements.voicePicker.setAttribute('aria-hidden', 'true');\r\n state.elements.voicePicker.style.opacity = '';\r\n state.elements.voicePicker.style.pointerEvents = '';\r\n state.elements.voicePicker.style.visibility = '';\r\n }\r\n\r\n function openAiPanel() {\r\n if (!state.elements.aiPanel) return;\r\n state.aiOpen = true;\r\n state.elements.aiPanel.classList.add('open');\r\n state.elements.aiPanel.setAttribute('aria-hidden', 'false');\r\n if (state.elements.aiInput) state.elements.aiInput.focus();\r\n if (state.elements.aiMessages && !state.elements.aiMessages.childElementCount) {\r\n addAiMessage('bot', 'Hi, I am the AI helper. Ask me for a hint or tell me the level you are stuck on.');\r\n }\r\n }\r\n\r\n function closeAiPanel() {\r\n if (!state.elements.aiPanel) return;\r\n state.aiOpen = false;\r\n state.elements.aiPanel.classList.remove('open');\r\n state.elements.aiPanel.setAttribute('aria-hidden', 'true');\r\n }\r\n\r\n function toggleAiPanel() {\r\n if (state.aiOpen) closeAiPanel();\r\n else openAiPanel();\r\n }\r\n\r\n function addAiMessage(role, text) {\r\n if (!state.elements.aiMessages) return null;\r\n const message = document.createElement('div');\r\n message.className = 'ai-message ' + (role === 'user' ? 'user' : 'bot');\r\n message.textContent = text;\r\n state.elements.aiMessages.appendChild(message);\r\n state.elements.aiMessages.scrollTop = state.elements.aiMessages.scrollHeight;\r\n return message;\r\n }\r\n\r\n function speakAiText(text) {\r\n if (window.getAiMuted && window.getAiMuted()) return;\r\n if (!text || !window.speechSynthesis || !window.SpeechSynthesisUtterance) return;\r\n try {\r\n window.speechSynthesis.cancel();\r\n const utterance = new SpeechSynthesisUtterance(text);\r\n const voice = window.getAiVoiceForHelper ? window.getAiVoiceForHelper() : null;\r\n if (voice) utterance.voice = voice;\r\n utterance.rate = 1.06;\r\n utterance.pitch = 0.72;\r\n utterance.volume = 1;\r\n window.speechSynthesis.speak(utterance);\r\n } catch (e) {}\r\n }\r\n\r\n function buildAiContext() {\r\n const levelTitle = document.getElementById('level-title');\r\n const instructions = document.getElementById('instructions');\r\n const title = levelTitle ? levelTitle.textContent : 'current level';\r\n const task = instructions ? (instructions.textContent || '').replace(/\\s+/g, ' ').trim() : '';\r\n return { title, task };\r\n }\r\n\r\n function fallbackAiReply(userText) {\r\n const prompt = (userText || '').toLowerCase();\r\n const context = buildAiContext();\r\n\r\n if (prompt.includes('html') || context.title.toLowerCase().includes('html')) {\r\n return 'Check the required tag name, then compare your markup to the instructions. If you are stuck, ask me for the exact structure.';\r\n }\r\n if (prompt.includes('css') || context.title.toLowerCase().includes('css')) {\r\n return 'Focus on selector, property, and value. The fastest fix is usually a missing colon, brace, or class name.';\r\n }\r\n if (prompt.includes('javascript') || prompt.includes('js')) {\r\n return 'Look for the event or function the task asks for, then match the variable and method names exactly.';\r\n }\r\n return 'Tell me the level name or paste the code you are trying to write, and I will give you a targeted hint.';\r\n }\r\n\r\n async function fetchAiReply(userText) {\r\n const endpoint = window.CODEQUEST_AI_ENDPOINT || window.CODEQUEST_AI_API_URL || '';\r\n const apiKey = window.CODEQUEST_AI_API_KEY || '';\r\n\r\n if (!endpoint) return fallbackAiReply(userText);\r\n\r\n const context = buildAiContext();\r\n const requestBody = {\r\n model: window.CODEQUEST_AI_MODEL || 'gpt-4o-mini',\r\n messages: [\r\n {\r\n role: 'system',\r\n content: 'You are the CodeQuest AI helper. Answer briefly, clearly, and with coding-specific help. Keep replies under 90 words when possible.'\r\n },\r\n {\r\n role: 'system',\r\n content: 'Current level: ' + context.title + '. Instructions: ' + context.task\r\n },\r\n {\r\n role: 'user',\r\n content: userText\r\n }\r\n ],\r\n temperature: 0.4\r\n };\r\n\r\n const response = await fetch(endpoint, {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n ...(apiKey ? { Authorization: 'Bearer ' + apiKey } : {})\r\n },\r\n body: JSON.stringify(requestBody)\r\n });\r\n\r\n if (!response.ok) {\r\n throw new Error('AI request failed with status ' + response.status);\r\n }\r\n\r\n const data = await response.json();\r\n const reply = data?.choices?.[0]?.message?.content\r\n || data?.output_text\r\n || data?.message\r\n || data?.text\r\n || '';\r\n\r\n return (reply || fallbackAiReply(userText)).toString().trim();\r\n }\r\n\r\n async function handleAiSubmit(userText) {\r\n const cleanText = (userText || '').trim();\r\n if (!cleanText) return;\r\n\r\n addAiMessage('user', cleanText);\r\n if (state.elements.aiInput) state.elements.aiInput.value = '';\r\n if (state.elements.aiStatus) state.elements.aiStatus.textContent = 'Thinking...';\r\n\r\n let replyText = '';\r\n try {\r\n replyText = await fetchAiReply(cleanText);\r\n } catch (e) {\r\n replyText = fallbackAiReply(cleanText);\r\n }\r\n\r\n addAiMessage('bot', replyText);\r\n if (state.elements.aiStatus) state.elements.aiStatus.textContent = window.getAiMuted && window.getAiMuted() ? 'Muted' : 'Ready';\r\n speakAiText(replyText);\r\n }\r\n\r\n function initMentorPicker() {\r\n document.querySelectorAll('[data-mentor-option]').forEach((button) => {\r\n button.addEventListener('click', () => {\r\n const mentorId = button.getAttribute('data-mentor-id') || button.dataset.mentorId;\r\n commitVoiceSelection(mentorId, true);\r\n });\r\n });\r\n syncMentorBadge();\r\n }\r\n\r\n function initVoicePicker() {\r\n state.elements.voicePicker = document.getElementById('tts-picker');\r\n state.elements.voicePickerContinue = document.querySelector('[data-tts-continue]');\r\n state.elements.voicePickerBack = document.querySelector('[data-tts-back]');\r\n\r\n if (!state.elements.voicePicker) return;\r\n\r\n state.elements.voicePicker.querySelectorAll('[data-tts-option]').forEach((button) => {\r\n button.addEventListener('click', () => {\r\n const mentorId = button.getAttribute('data-mentor-id') || button.dataset.mentorId;\r\n commitVoiceSelection(mentorId, true);\r\n });\r\n });\r\n\r\n state.elements.voicePickerContinue?.addEventListener('click', () => {\r\n const selectedButton = state.elements.voicePicker.querySelector('[data-tts-option].selected, [data-tts-option][aria-checked=\"true\"]');\r\n const mentorId = selectedButton ? (selectedButton.getAttribute('data-mentor-id') || selectedButton.dataset.mentorId) : getActivePickerMentorId();\r\n if (mentorId) commitVoiceSelection(mentorId, false);\r\n closeVoicePicker();\r\n if (window.startCodeQuestGame) window.startCodeQuestGame();\r\n });\r\n\r\n state.elements.voicePickerBack?.addEventListener('click', closeVoicePicker);\r\n\r\n document.querySelectorAll('[data-tts-close]').forEach((button) => {\r\n button.addEventListener('click', closeVoicePicker);\r\n });\r\n\r\n state.elements.voicePicker.addEventListener('click', (event) => {\r\n if (event.target === state.elements.voicePicker) closeVoicePicker();\r\n });\r\n\r\n syncVoicePicker();\r\n }\r\n\r\n function initAiUi() {\r\n state.elements = {\r\n ...state.elements,\r\n launcher: document.getElementById('ai-launcher'),\r\n panel: document.getElementById('ai-panel'),\r\n messages: document.getElementById('ai-messages'),\r\n form: document.getElementById('ai-form'),\r\n input: document.getElementById('ai-input'),\r\n sendBtn: document.getElementById('ai-send-btn'),\r\n muteBtn: document.getElementById('ai-mute-btn'),\r\n closeBtn: document.getElementById('ai-close-btn'),\r\n status: document.getElementById('ai-status')\r\n };\r\n\r\n if (!state.elements.launcher || !state.elements.panel) return;\r\n\r\n syncAiMuteButton();\r\n\r\n state.elements.launcher.addEventListener('click', toggleAiPanel);\r\n state.elements.closeBtn?.addEventListener('click', closeAiPanel);\r\n state.elements.muteBtn?.addEventListener('click', () => {\r\n if (window.toggleAiMuted) window.toggleAiMuted();\r\n syncAiMuteButton();\r\n });\r\n state.elements.form?.addEventListener('submit', (event) => {\r\n event.preventDefault();\r\n handleAiSubmit(state.elements.input ? state.elements.input.value : '');\r\n });\r\n state.elements.input?.addEventListener('keydown', (event) => {\r\n if (event.key === 'Escape') closeAiPanel();\r\n });\r\n }\r\n\r\n function init() {\r\n console.log('mentor-ui init starting...');\r\n initMentorPicker();\r\n initVoicePicker();\r\n initAiUi();\r\n // Sync mentor display on load - get from mentor-core state\r\n const currentMentorId = window.getSelectedMentorId ? window.getSelectedMentorId() : 'clara';\r\n console.log('Init - currentMentorId from getSelectedMentorId:', currentMentorId);\r\n const profile = getVoiceProfile(currentMentorId);\r\n console.log('Init - profile:', profile ? profile.id : 'null');\r\n if (profile) {\r\n document.querySelectorAll('[data-mentor-portrait]').forEach((node) => {\r\n node.src = profile.icon;\r\n node.alt = profile.label + ' portrait';\r\n });\r\n }\r\n if (window.syncMentorDisplay) window.syncMentorDisplay();\r\n syncMentorBadge();\r\n console.log('mentor-ui init complete');\r\n }\r\n\r\n window.syncAiMuteButton = syncAiMuteButton;\r\n window.openTtsVoicePicker = openVoicePicker;\r\n window.closeTtsVoicePicker = closeVoicePicker;\r\n window.openAiHelper = openAiPanel;\r\n window.closeAiHelper = closeAiPanel;\r\n window.toggleAiHelper = toggleAiPanel;\r\n window.sendAiHelperMessage = handleAiSubmit;\r\n window.addAiHelperMessage = addAiMessage;\r\n\r\n if (document.readyState === 'loading') {\r\n document.addEventListener('DOMContentLoaded', init, { once: true });\r\n } else {\r\n init();\r\n }\r\n})();"}}}} |