// translation.jsx — Fire Lingo Face-to-Face live translation screen // Walkie-talkie model. Utterance lifecycle per speaker: // idle → listening (while held) → processing → translating → idle // Transcript OFF by default — toggle in the status-card corner. function TranslationScreen({ language, onBack, onFinish, brand }) { const lang = language || LANGUAGES[0]; const rtl = lang.script === 'rtl'; const [arriving, setArriving] = React.useState(true); // Per-speaker phase: 'idle' | 'listening' | 'processing' | 'translating' // (employeePhase retained internally so the AI can flip the active speaker) const [memberPhase, setMemberPhase] = React.useState('idle'); const [employeePhase, setEmployeePhase] = React.useState('idle'); // Which side the AI thinks is currently speaking (alternates by utterance) const turnRef = React.useRef('member'); // Last completed transcript (mock). Cleared on new utterance start. const [lastTranscript, setLastTranscript] = React.useState(null); // { speaker: 'member'|'employee', source: string, translated: string, at: number } // Transcript visible to employee? OFF by default. const [transcriptOn, setTranscriptOn] = React.useState(false); // Live audio level while listening (for reactive animation) const [memberLevel, setMemberLevel] = React.useState(0); const [employeeLevel, setEmployeeLevel] = React.useState(0); // Mock utterances — cycle so repeated taps feel realistic const MEMBER_UTTERANCES = [ { source: 'Hola, quiero hablar de mi préstamo de auto. Me preocupa que la tasa de interés sea más alta de lo que esperaba, y quisiera entender todas mis opciones antes de decidir qué hacer.', translated: 'Hi, I\u2019d like to talk about my auto loan. I\u2019m worried that the interest rate is higher than I expected, and I\u2019d like to understand all of my options before deciding what to do.' }, { source: '¿Cuál es el saldo actual, por favor?', translated: 'What\u2019s the current balance, please?' }, { source: 'Gracias por su ayuda.', translated: 'Thank you for your help.' }, ]; const EMPLOYEE_UTTERANCES = [ { source: 'Of course — I can pull up your account right now and walk you through the current rate, your remaining balance, and a couple of refinancing options that might lower your monthly payment.', translated: 'Por supuesto — puedo abrir su cuenta ahora mismo y explicarle la tasa actual, el saldo restante y algunas opciones de refinanciamiento que podrían reducir su pago mensual.' }, { source: 'Your current balance is three thousand four hundred.', translated: 'Su saldo actual es de tres mil cuatrocientos.' }, { source: 'Happy to help — have a great day.', translated: 'Con gusto — que tenga un buen día.' }, ]; const memberIdxRef = React.useRef(0); const employeeIdxRef = React.useRef(0); React.useEffect(() => { const t = setTimeout(() => setArriving(false), 900); return () => clearTimeout(t); }, []); // Audio-level simulation — runs while either side is listening React.useEffect(() => { const active = memberPhase === 'listening' || employeePhase === 'listening'; if (!active) { setMemberLevel(0); setEmployeeLevel(0); return; } let raf; let last = performance.now(); const tick = (now) => { const dt = now - last; last = now; const step = (l) => { const target = 0.55 + 0.35 * Math.sin(now / 230) + (Math.random() - 0.5) * 0.4; return Math.max(0.14, Math.min(1, l + (target - l) * (dt / 90))); }; if (memberPhase === 'listening') setMemberLevel(step); else setMemberLevel(0); if (employeePhase === 'listening') setEmployeeLevel(step); else setEmployeeLevel(0); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [memberPhase, employeePhase]); // Run processing → translating → done pipeline after a release const runPipeline = React.useCallback((speaker, utterance) => { const setPhase = speaker === 'member' ? setMemberPhase : setEmployeePhase; setPhase('processing'); setTimeout(() => { setPhase('translating'); setTimeout(() => { setPhase('idle'); setLastTranscript({ speaker, ...utterance, at: Date.now() }); }, 1400); }, 1100); }, []); // Member press handlers — single button serves both speakers (AI detects language) const memberDown = (e) => { e.preventDefault(); if (memberPhase !== 'idle' || employeePhase !== 'idle') return; setLastTranscript(null); // Alternate turns so the demo shows both directions if (turnRef.current === 'member') setMemberPhase('listening'); else setEmployeePhase('listening'); }; const memberUp = (e) => { e.preventDefault(); if (memberPhase === 'listening') { const u = MEMBER_UTTERANCES[memberIdxRef.current % MEMBER_UTTERANCES.length]; memberIdxRef.current += 1; runPipeline('member', u); turnRef.current = 'employee'; } else if (employeePhase === 'listening') { const u = EMPLOYEE_UTTERANCES[employeeIdxRef.current % EMPLOYEE_UTTERANCES.length]; employeeIdxRef.current += 1; runPipeline('employee', u); turnRef.current = 'member'; } }; const nativeFont = lang.script === 'cjk' ? '"Noto Sans SC", "Noto Sans KR", system-ui' : lang.script === 'devanagari' ? '"Noto Sans Devanagari", var(--font-display)' : lang.script === 'rtl' ? '"Noto Naskh Arabic", var(--font-display)' : 'var(--font-display)'; // Localized hold / release labels for the big member button const btnLabels = { es: { hold: 'Mantén presionado', release: 'Habla ahora' }, zh: { hold: '按住说话', release: '正在聆听' }, vi: { hold: 'Nhấn giữ', release: 'Đang nghe' }, ko: { hold: '길게 누르세요', release: '듣는 중' }, ht: { hold: 'Kenbe peze', release: 'N ap koute' }, ar: { hold: 'اضغط مع الاستمرار', release: 'نستمع الآن' }, fr: { hold: 'Maintenir appuyé', release: 'Parlez' }, pt: { hold: 'Toque e segure', release: 'A ouvir' }, ru: { hold: 'Нажмите и держите', release: 'Слушаю' }, hi: { hold: 'दबाकर रखें', release: 'सुन रहे हैं' }, tl: { hold: 'Pindutin at hawakan',release: 'Nakikinig' }, sw: { hold: 'Bonyeza na ushikilie',release: 'Tunasikiliza' }, }; const btn = btnLabels[lang.code] || btnLabels.es; const memberSpeaking = memberPhase === 'listening' || employeePhase === 'listening'; return (
{/* ambient dots */}
{/* ==================== Member side ==================== */}
{brand && brand.useDefaultMark === false ? ( // White-labeled customer: render their logo. Sized to match the // visual weight of the default BrandMark (~64px tall) so the header // doesn't look orphaned above the greeting. Wide logos get a wider // chip; square-ish marks stay compact.
{brand.name}
) : ( )}
{lang.greeting}
{lang.listening}
{/* Big push-to-talk button */}
{memberSpeaking && ( <>
)}
{/* Button label — localized */}
{memberSpeaking && } {memberSpeaking ? btn.release : btn.hold}
{/* ==================== Employee side ==================== */}
Employee view — English
Connected in {lang.english}
Either of you taps and holds the big button to speak — Fire Lingo detects your language automatically.
{/* Status card — lifecycle + transcript toggle */} {/* Finish-session — big, prominent. Tapping triggers feedback flow. */} {/* Mode footer */}
Fire Lingo mode: Turn-based
); } // ------- Status card ---------------------------------------------------- function StatusCard({ memberPhase, employeePhase, memberLevel, employeeLevel, lang, transcriptOn, setTranscriptOn, lastTranscript }) { // Determine the active speaker / phase to display const activeSpeaker = memberPhase !== 'idle' ? 'member' : employeePhase !== 'idle' ? 'employee' : null; const phase = activeSpeaker === 'member' ? memberPhase : activeSpeaker === 'employee' ? employeePhase : 'idle'; const level = activeSpeaker === 'member' ? memberLevel : activeSpeaker === 'employee' ? employeeLevel : 0; // Header tone const tone = phase === 'listening' ? { bg: 'rgba(70,137,200,0.18)', border: 'rgba(120,168,214,0.45)', eyebrow: '#fff', dot: '#fff' } : phase === 'processing' ? { bg: 'rgba(255,255,255,0.08)', border: 'rgba(255,255,255,0.18)', eyebrow: 'rgba(255,255,255,0.8)', dot: 'rgba(255,255,255,0.7)' } : phase === 'translating' ? { bg: 'rgba(207,99,40,0.14)', border: 'rgba(207,99,40,0.45)', eyebrow: '#ffd4b7', dot: 'var(--td-orange)' } : { bg: 'rgba(255,255,255,0.07)', border: 'rgba(255,255,255,0.12)', eyebrow: 'var(--td-blue-300)', dot: 'var(--td-blue-300)' }; const eyebrowLabel = activeSpeaker === 'member' && phase === 'listening' ? `${lang.native} speaking` : activeSpeaker === 'employee' && phase === 'listening' ? 'English speaking' : phase === 'processing' ? 'Processing' : phase === 'translating' ? 'Translating' : 'Member idle'; // Main body copy per phase let body; if (phase === 'listening') { body = activeSpeaker === 'member' ? `Listening to ${lang.english}…` : 'Listening to English…'; } else if (phase === 'processing') { body = 'Processing — please wait.'; } else if (phase === 'translating') { body = activeSpeaker === 'member' ? `Translating into English…` : `Translating into ${lang.english}…`; } else { body = 'Waiting for the member to press and hold their button.'; } return (
{/* Header row: status eyebrow + transcript toggle */}
{eyebrowLabel}
{/* Body copy */}
{body}
{/* Level bars (only while listening) */}
{Array.from({ length: 22 }).map((_, i) => { const phaseShift = (Math.sin((i / 22) * Math.PI * 2 + performance.now() / 300) + 1) / 2; const h = phase === 'listening' ? 6 + phaseShift * level * 26 : 4; return (
); })}
{/* Processing progress indicator */} {(phase === 'processing' || phase === 'translating') && ( )} {/* Transcript area — takes the remaining height and scrolls for very long utterances. */}
{transcriptOn && lastTranscript && phase === 'idle' ? : }
); } function TranscriptPlaceholder({ transcriptOn, phase }) { if (!transcriptOn) { return (
Transcript is off. Turn it on to see each translation after it plays.
); } if (phase !== 'idle') return null; return (
Transcript will appear here once the first translation finishes.
); } function TranscriptToggle({ on, onChange }) { return ( ); } function ProcessingBar({ phase }) { // Indeterminate bar that slides across return (
); } function TranscriptBlock({ tx, lang }) { const isMember = tx.speaker === 'member'; return (
{isMember ? `${lang.native} → English` : `English → ${lang.english}`}
“{tx.source}”
{tx.translated}
); } Object.assign(window, { TranslationScreen });