/* voice-mode.jsx — ChatGPT-Advanced-Voice-style fullscreen voice UI. * Single mock conversation: AI greets, then 3 user-AI exchange turns. * State machine: idle -> speaking -> listening -> thinking -> speaking ... -> done. * Mobile-first. Uses Tailwind utility classes for layout. */ function ScreenVoice({ scenario, onComplete }) { const T = useT(); const { lang } = useLang(); // Conversation state // turn = 0..3 (3 user turns + final AI summary cue). Greeting is turn -1. const [turn, setTurn] = React.useState(-1); const [state, setState] = React.useState('idle'); // idle | speaking | listening | thinking | done const [caption, setCaption] = React.useState(''); const timerRef = React.useRef(null); // Reset timer helper const schedule = (fn, ms) => { if (timerRef.current) clearTimeout(timerRef.current); timerRef.current = setTimeout(fn, ms); }; React.useEffect(() => () => { if (timerRef.current) clearTimeout(timerRef.current); }, []); // Build dialog lines const greeting = T({ th: 'สวัสดีค่ะ ดิฉันเป็น AI พยาบาลคัดกรองนะคะ วันนี้มาด้วยอาการอะไรบ้างคะ?', en: 'Hello, I am the AI triage nurse. What brings you in today?', }); // Each turn = user STT phrase, then AI follow-up question (or final line) const triage = scenario.triage || []; const userLineFor = (t) => window.getSTTPhrase(scenario, t, lang); const aiQuestionFor = (t) => { if (t < triage.length) return T(triage[t].q); // Final wrap-up line after last user reply return T({ th: 'ขอบคุณค่ะ ข้อมูลครบแล้ว กำลังประมวลผลและสรุปแผนกที่เหมาะสมให้นะคะ', en: 'Thank you. I have enough information. Let me prepare your summary now.', }); }; // Kick off greeting on mount React.useEffect(() => { setState('speaking'); setCaption(greeting); schedule(() => { // After greeting, listen for user setState('listening'); setCaption(''); schedule(() => { setCaption(userLineFor(0)); schedule(() => { setState('thinking'); schedule(() => { setState('speaking'); setCaption(aiQuestionFor(0)); schedule(advanceFromAi(1), 3200); }, 1200); }, 1100); }, 2500); }, 3600); // eslint-disable-next-line react-hooks/exhaustive-deps }, [lang, scenario.id]); // Returns a function that advances to "listening" for turn `nextTurn` function advanceFromAi(nextTurn) { return () => { if (nextTurn > 3) { setState('done'); setCaption(T({ th: 'สรุปผลพร้อมแล้ว กดปุ่ม "ดูสรุป" ด้านล่างค่ะ', en: 'Your summary is ready. Tap "View summary" below.', })); return; } setState('listening'); setCaption(''); schedule(() => { setCaption(userLineFor(nextTurn)); schedule(() => { setState('thinking'); schedule(() => { setState('speaking'); setCaption(aiQuestionFor(nextTurn)); schedule(advanceFromAi(nextTurn + 1), 3200); }, 1200); }, 1100); }, 2500); setTurn(nextTurn); }; } const statusText = (() => { switch (state) { case 'speaking': return T({ th: 'AI กำลังพูด...', en: 'AI is speaking...' }); case 'listening': return T({ th: 'กำลังฟัง...', en: 'Listening...' }); case 'thinking': return T({ th: 'กำลังคิด...', en: 'Thinking...' }); case 'done': return T({ th: 'พร้อมสรุปผล', en: 'Ready for summary' }); default: return T({ th: 'แตะไมค์เพื่อเริ่ม', en: 'Tap mic to start' }); } })(); // Restart whole conversation (mic toggle behaviour for demo) const restart = () => { setTurn(-1); setState('speaking'); setCaption(greeting); schedule(() => { setState('listening'); setCaption(''); schedule(() => { setCaption(userLineFor(0)); schedule(() => { setState('thinking'); schedule(() => { setState('speaking'); setCaption(aiQuestionFor(0)); schedule(advanceFromAi(1), 3200); }, 1200); }, 1100); }, 2500); }, 3600); }; return (
{/* Top bar */}
MorDee VOICE
{/* Center — orb + caption */}
{statusText}

{caption}

{/* Bottom controls */}
{state === 'done' ? ( ) : ( )}
); } // ───────────────────────────────────────────────────────────── // Orb — gradient sphere that morphs by state // ───────────────────────────────────────────────────────────── function Orb({ state }) { const sizeCls = 'w-[60vw] max-w-[320px] aspect-square'; const animation = (() => { switch (state) { case 'speaking': return 'orb-speak-pulse 1.1s ease-in-out infinite'; case 'listening': return 'orb-listen-pulse 1.6s ease-in-out infinite'; case 'thinking': return 'orb-think-rotate 2.4s linear infinite'; default: return 'orb-breathe 4.5s ease-in-out infinite'; } })(); const scaleClassExtra = state === 'thinking' ? 'scale-90' : ''; return (
{/* Outer glow ring(s) — only during speaking/listening */} {(state === 'speaking' || state === 'listening') && ( <>
)} {/* Conic gradient blurry blob — the heart of the orb */}
{/* Inner glossy sphere — radial highlight + soft fill */}
{/* Inner darker core for depth */}
); } window.ScreenVoice = ScreenVoice;