// Voice Mode — full-screen overlay for face-to-face spoken conversation.
//
// Mental model:
// • You're standing next to / across from someone. Phone between you.
// • Two big halves: top = "내 차례" (Korean → English audio TO them),
// bottom = "상대 차례" (English → Korean text FOR me).
// • Big tap-to-talk button in the middle. Long-press = continuous listen.
// • Live waveform / pulsing while listening. Live transcription as it streams.
// • TTS speaks the translation out loud so the other person hears English.
function VoiceMode({ palette, dark, onClose, onLog, target = 'EN', native = 'KO' }) {
const c = palette;
const I = window.CT_ICONS;
const targetLang = window.CT_LANG.byCode(target); // conversation language (the OTHER person)
const nativeLang = window.CT_LANG.byCode(native); // my own language
// active = which side is currently speaking ('me' | 'them' | null)
const [active, setActive] = React.useState(null);
const [recordMode, setRecordMode] = React.useState('tap');
// live transcription
const [myInterim, setMyInterim] = React.useState('');
const [myFinal, setMyFinal] = React.useState('');
const [myTrans, setMyTrans] = React.useState('');
const [themInterim, setThemInterim] = React.useState('');
const [themFinal, setThemFinal] = React.useState('');
const [themTrans, setThemTrans] = React.useState('');
const [translating, setTranslating] = React.useState(false);
const [sttSupported] = React.useState(() => window.CT_RECOGNIZE && window.CT_RECOGNIZE.supported());
const recRef = React.useRef(null);
// Stop any active recognition on unmount.
React.useEffect(() => () => { if (recRef.current) recRef.current.abort(); }, []);
// Translate helper using Claude.
async function translate(text, fromLang, toLang) {
try {
const res = await window.CT_API.complete(
`Translate this ${fromLang.native} to natural ${toLang.native} (polite, conversational register). Output only the ${toLang.native} translation — no quotes, no explanation.\n\n${fromLang.native}: ${text}`
);
return String(res).trim().replace(/^["'`]|["'`]$/g, '');
} catch (e) {
return '(translation unavailable)';
}
}
// Finalize a turn: translate + TTS + log.
async function finalizeTurn(side, spoken) {
if (!spoken || !spoken.trim()) { setActive(null); return; }
setTranslating(true);
// me: speak native → translate to target → TTS target aloud (for the other person)
// them: speak target → translate to native → show to me
const fromLang = side === 'me' ? nativeLang : targetLang;
const toLang = side === 'me' ? targetLang : nativeLang;
const out = await translate(spoken, fromLang, toLang);
if (side === 'me') {
setMyTrans(out);
window.CT_SPEAK && window.CT_SPEAK.once(out, toLang.locale);
} else {
setThemTrans(out);
}
setTranslating(false);
setActive(null);
onLog && onLog(side === 'me'
? { side: 'me', orig: spoken, trans: out, inputKind: 'foreign' }
: { side: 'them', orig: spoken, trans: out });
}
// Start/stop real speech recognition for a side.
async function toggleListening(side) {
// If already listening on this side → stop.
if (active === side && recRef.current) {
recRef.current.stop();
return;
}
if (active) return; // other side busy
// Reset this side's text.
if (side === 'me') { setMyInterim(''); setMyFinal(''); setMyTrans(''); }
else { setThemInterim(''); setThemFinal(''); setThemTrans(''); }
const locale = side === 'me' ? nativeLang.locale : targetLang.locale;
setActive(side);
const rec = await window.CT_RECOGNIZE.startWithPermission(locale, {
continuous: recordMode === 'hands-free',
onInterim: (t) => { side === 'me' ? setMyInterim(t) : setThemInterim(t); },
onFinal: (t) => { side === 'me' ? setMyFinal(t) : setThemFinal(t); },
onError: () => { setActive(null); },
onPermission: (status) => { setActive(null); alert(window.CT_MIC_HELP(status)); },
onEnd: (finalText) => {
if (side === 'me') setMyInterim('');
else setThemInterim('');
finalizeTurn(side, finalText);
recRef.current = null;
},
});
if (!rec) { setActive(null); return; }
recRef.current = rec;
}
return (
{/* Header */}
보이스 모드 · 실시간 통역
{/* MY HALF — top: I speak my own language → other person hears target */}
toggleListening('me')}
privateLabel={`내 ${nativeLang.name} 원문 — 나만 보임`}
publicLabel={`상대에게 들리는 ${targetLang.name}`}
listening={active === 'me'}
ttsLocale={targetLang.locale}
/>
{/* divider with central control */}
{/* mode pill */}
{/* THEIR HALF — bottom: other person speaks target → I read my own language */}
toggleListening('them')}
privateLabel={`실제 들린 ${targetLang.name}`}
publicLabel={`내가 보는 ${nativeLang.name} 번역 — 나만 보임`}
listening={active === 'them'}
ttsLocale={nativeLang.locale}
/>