DIAS, tu copiloto AIMaker. Este módulo de Workspace te enseña a crear proyectos web con IA usando solo descripciones en lenguaje natural.', '👋 Bonjour ! Je suis DIAS, ton copilote AIMaker. Ce module Workspace t\'apprend à créer des projets web avec l\'IA en utilisant uniquement des descriptions en langage naturel.', '👋 Hi! I\'m DIAS, your AIMaker copilot. This Workspace module teaches you to create web projects with AI using only natural language descriptions.' )}}/> ); } return (

{gm('¡Hola de nuevo! 👋 Ya completaste','Rebonjour ! 👋 Tu as déjà complété','Welcome back! 👋 You\'ve already completed')}{' '} {completed.map(c => labels[c] || c).join(', ')}.{' '} {gm('Llevas','Tu as','You have')} {p.points} {window.t('quiz.pts')}. {p.badges.length > 0 && (

{p.badges.map(b => 🛡️ {b})}

)}

); } /* ── Quiz ── */ const WA_QUIZ = [ { q: gm( '¿Qué es el vibecoding?', 'Qu\'est-ce que le vibecoding ?', 'What is vibecoding?' ), opts: [ gm('Una técnica avanzada de programación', 'Une technique avancée de programmation', 'An advanced programming technique'), gm('Crear código describiendo lo que quieres en lenguaje natural', 'Créer du code en décrivant ce qu\'on veut en langage naturel', 'Creating code by describing what you want in natural language'), gm('Un editor de código visual', 'Un éditeur de code visuel', 'A visual code editor'), ], correct: 1, }, { q: gm( '¿Para qué sirve la pestaña Preview en el Workspace?', 'À quoi sert l\'onglet Preview dans le Workspace ?', 'What is the Preview tab for in the Workspace?' ), opts: [ gm('Editar los estilos CSS directamente', 'Éditer les styles CSS directement', 'Edit CSS styles directly'), gm('Ver el resultado visual de tu código en tiempo real', 'Voir le résultat visuel du code en temps réel', 'See the visual result of your code in real time'), gm('Exportar los archivos al servidor', 'Exporter les fichiers vers le serveur', 'Export files to the server'), ], correct: 1, }, { q: gm( '¿Cuál es la ventaja principal de usar una plantilla de la Librería?', 'Quel est l\'avantage principal d\'utiliser un modèle de la Bibliothèque ?', 'What is the main advantage of using a Library template?' ), opts: [ gm('Las plantillas son gratis y sin límites', 'Les modèles sont gratuits et sans limites', 'Templates are free and unlimited'), gm('Empezar con una base de código funcional sin escribir nada', 'Commencer avec une base de code fonctionnelle sans rien écrire', 'Start with a functional code base without writing anything'), gm('Tienen más funciones que los proyectos creados manualmente', 'Ils ont plus de fonctions que les projets créés manuellement', 'They have more features than manually created projects'), ], correct: 1, }, ]; function WaQuiz({ onDone }) { const [i, setI] = useStateWA(0); const [picked, setPicked] = useStateWA(null); const [points, setPoints] = useStateWA(0); const [failed, setFailed] = useStateWA(false); function pick(idx) { if (picked !== null) return; setPicked(idx); const np = points + (idx === WA_QUIZ[i].correct ? 25 : 0); setPoints(np); setTimeout(() => { if (i + 1 >= WA_QUIZ.length) { if (np === 75) { onDone(np); } else { setFailed(true); } } else { setI(i + 1); setPicked(null); } }, 950); } if (failed) { const correct = Math.round(points / 25); return (

😅

{correct}/3 {gm('correctas. Necesitas las 3 para continuar.','correctes. Il te faut les 3 pour continuer.','correct. You need all 3 to continue.')}

); } const q = WA_QUIZ[i]; return (

{window.t('quiz.q')} {i + 1} / {WA_QUIZ.length} {points} {window.t('quiz.pts')}

{q.q}

{q.opts.map((o, idx) => { let cls = 'quiz-opt'; if (picked !== null) { if (idx === q.correct) cls += ' right'; else if (idx === picked) cls += ' wrong'; } return ; })}

); } /* ── Badge ── */ function WaBadge({ points }) { return (

✨

{window.t('badge.workspace')}

{window.t('badge.sub.workspace')}

{points} {window.t('quiz.pts')} ⭐

); } /* ── Message renderer ── */ function WaMessage({ m, slot }) { if (m.kind === 'recall') { return (

); } if (m.kind === 'quote') { return (

); } if (m.kind && slot) { return (

{slot}

); } return (

{m.from === 'user' ? gm('Tú','Toi','You') : 'A'}

); } /* ── Spotlight ── */ function WaSpotlight({ selector, label }) { const [rect, setRect] = useStateWA(null); useEffectWA(() => { if (!selector) { setRect(null); return; } function update() { const el = document.querySelector(selector); if (!el) { setRect(null); return; } const r = el.getBoundingClientRect(); setRect({ top: r.top - 6, left: r.left - 6, width: r.width + 12, height: r.height + 12 }); } update(); window.addEventListener('resize', update); window.addEventListener('scroll', update, true); const interval = setInterval(update, 300); return () => { window.removeEventListener('resize', update); window.removeEventListener('scroll', update, true); clearInterval(interval); }; }, [selector]); if (!rect) return null; return (

{label && {label}}

); } /* ── Main AimyWorkspace component ── */ function AimyWorkspace() { const [open, setOpen] = useStateWA(true); const [stepIdx, setStepIdx] = useStateWA(0); const [wsCreated, setWsCreated] = useStateWA(false); const [chatUsed, setChatUsed] = useStateWA(false); const [hasFiles, setHasFiles] = useStateWA(false); const [quizDone, setQuizDone] = useStateWA(false); const [quizPoints, setQuizPoints] = useStateWA(0); const [unread, setUnread] = useStateWA(0); const bodyRef = useRefWA(null); /* Listen to workspace events */ useEffectWA(() => { function onCreated() { setWsCreated(true); } function onChatUsed() { setChatUsed(true); } function onHasFiles() { setHasFiles(true); } window.addEventListener('aimy:wsCreated', onCreated); window.addEventListener('aimy:wsChatUsed', onChatUsed); window.addEventListener('aimy:wsHasFiles', onHasFiles); return () => { window.removeEventListener('aimy:wsCreated', onCreated); window.removeEventListener('aimy:wsChatUsed', onChatUsed); window.removeEventListener('aimy:wsHasFiles', onHasFiles); }; }, []); /* Auto-advance when gate condition is met */ useEffectWA(() => { const step = WA_STEPS[stepIdx]; if (!step || !step.gate) return; const ctx = { wsCreated, chatUsed, hasFiles, quizDone }; if (step.gate(ctx)) { const t = setTimeout(() => { setStepIdx(i => Math.min(i + 1, WA_STEPS.length - 1)); }, 700); return () => clearTimeout(t); } }, [wsCreated, chatUsed, hasFiles, quizDone, stepIdx]); /* Scroll to bottom on new messages */ useEffectWA(() => { if (!open) return; requestAnimationFrame(() => { if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight + 200; }); }, [stepIdx, wsCreated, chatUsed, hasFiles, quizDone, open]); const step = WA_STEPS[stepIdx]; const ctx = { wsCreated, chatUsed, hasFiles, quizDone }; const canContinue = !step.gate || step.gate(ctx); function next() { if (stepIdx < WA_STEPS.length - 1) { const newIdx = stepIdx + 1; setStepIdx(newIdx); if (!open) setUnread(u => u + 1); if (WA_STEPS[newIdx].id === 'done' && window.AIMakerProgress) { window.AIMakerProgress.complete('workspace', { badge: window.t('badge.workspace'), points: 75 + quizPoints, }); } } } function back() { if (stepIdx > 0) setStepIdx(stepIdx - 1); } /* Minimized state — FAB button */ if (!open) { return ( ); } return ( <>

{/* Header */}

🤖

DIAS

{window.t('aimy.role.workspace')}

{/* Progress bar */}

{step.progress}%

{/* Messages */}

{step.msgs.map((m, i) => { let slot = null; if (m.kind === 'wsstats') slot = ; if (m.kind === 'wscode-tip') slot = ; if (m.kind === 'quiz') slot = { setQuizPoints(p); setQuizDone(true); }}/>; if (m.kind === 'badge') slot = ; return ; })} {step.gateHint && !canContinue && (

ⓘ {step.gateHint}

)} {step.quickReplies && (

{step.quickReplies.map((r, ri) => ( ))}

)}

{/* Navigation buttons */}

{stepIdx < WA_STEPS.length - 1 ? ( ) : ( )}

); } window.AimyWorkspace = AimyWorkspace;