Hugging Face's logo

Spaces:
ruslanmv
/
HomePilot
Sleeping

App Files Community
HomePilot / frontend /src /ui /CallOverlay.jsx
HomePilot Deploy Bot
chore(hf): sync HomePilot to HF Space
921d377
Raw History Blame Contribute Delete
51.1 kB
/**
* CallOverlay.tsx — TSX port of the frontend/src/ui/phone/ design set.
*
* Maps 1:1 onto the design-only mockups in `phone/`:
* tokens.jsx → HP_CALL + hpCallStateColor/Label (inlined below)
* icons.jsx → <Icon* /> components
* controls.jsx → <ControlBtn />
* avatar.jsx → <CallAvatar />
* waveform.jsx → <CallWaveform />
* call-modal.jsx → <CallModal /> + the ModalPresentation wrapper
*
* Layered as a distinct "call mode" on top of the chat — it is NOT
* the same thing as Voice mode:
* 🎤 Voice = input method inside the chat
* 📞 Call = a separate immersive session (this component)
*
* States (mirrors the designer's set):
* connecting · listening · thinking · speaking · muted
* (ended is intentionally short-lived — the overlay fades out.)
*
* This pass wires the visual shell. Real STT/TTS plumbing from
* useVoiceController maps `listening/thinking/speaking` later.
*/
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useVoiceController } from './voice/useVoiceController';
import { useCallSession } from './call/useCallSession';
import Waveform from './phone/primitives/Waveform';
import Aura from './phone/primitives/Aura';
import { createStreamingTts } from './call/streamTts';
import { clog, speakOwned, isCallFullDuplexEnabled } from './call/log';
import { useBargeInDetector } from './call/bargeIn';
// ── Staged lifecycle timings. Numbers chosen so the user *feels* the
// handshake instead of getting a hard screen flip: dial (ringing) →
// connecting → listening (live). Dial is long enough for ~one full
// PSTN ringback cadence (2 s on / 4 s off in the US) so the user
// actually hears the phone "ring" before pickup.
const DIAL_MS = 2200; // 📞 "calling…" — pulse-ring phase + one PSTN ring
const CONNECT_MS = 500; // 🔵 "connecting…" — dots-pulse phase
const END_FADE_MS = 220; // 🔴 end button → modal fade-out → onClose
// ── Design tokens (ported from phone/tokens.jsx) ──────────────────
const HP_CALL = {
font: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif',
fontTabular: 'ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, monospace',
backdrop: 'rgba(5, 5, 6, 0.72)',
surface: '#0b0b0c',
surface2: '#121214',
border: 'rgba(255, 255, 255, 0.08)',
text: 'rgba(255, 255, 255, 0.92)',
text2: 'rgba(255, 255, 255, 0.55)',
text3: 'rgba(255, 255, 255, 0.35)',
accent: '#22d3ee',
stateListening: '#22d3ee',
stateThinking: '#a78bfa',
stateSpeaking: '#10b981',
stateError: '#f87171',
end: '#ef4444',
};
function hpCallStateColor(state) {
switch (state) {
case 'listening': return HP_CALL.stateListening;
case 'thinking': return HP_CALL.stateThinking;
case 'speaking': return HP_CALL.stateSpeaking;
case 'dialing':
case 'connecting': return HP_CALL.accent;
case 'muted':
case 'ended': return HP_CALL.text3;
default: return HP_CALL.text2;
}
}
// Map the voice-controller's internal machine onto our UI machine.
// Returns null for states we don't want to reflect (OFF — overlay is
// open so "off" is not a meaningful UI frame; render last mapped).
function mapVoiceState(s) {
switch (s) {
case 'LISTENING': return 'listening';
case 'THINKING': return 'thinking';
case 'SPEAKING': return 'speaking';
case 'IDLE': return 'listening';
case 'OFF': return null;
default: return null;
}
}
// Map the overlay's richer CallState onto the primitive Waveform's
// four-valued mode enum. The primitive doesn't know about dialing /
// connecting / thinking — those all fold to 'idle' (low ambient
// amplitude, faint colour); only the three audible states drive
// distinct waveform modes.
function waveformModeFromCallState(state) {
if (state === 'listening' || state === 'thinking')
return 'listening';
if (state === 'speaking')
return 'speaking';
if (state === 'muted')
return 'muted';
return 'idle';
}
function hpCallStateLabel(state, personaName) {
switch (state) {
case 'dialing': return `calling ${personaName.toLowerCase()}…`;
case 'connecting': return 'connecting…';
case 'listening': return 'listening';
case 'thinking': return 'thinking';
case 'speaking': return 'speaking';
case 'muted': return 'microphone off';
case 'ended': return 'call ended';
default: return '';
}
}
const IconBase = ({ size = 20, color = 'currentColor', strokeWidth = 1.75, children, }) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
{children}
</svg>);
const IconPhoneEnd = (p) => (<IconBase {...p} strokeWidth={1.9}>
<path d="M4 14c5-5 11-5 16 0l-2 2-3-1v-2a9 9 0 0 0-6 0v2l-3 1-2-2z" transform="rotate(135 12 12)"/>
</IconBase>);
const IconMic = (p) => (<IconBase {...p}>
<rect x="9" y="3" width="6" height="12" rx="3"/>
<path d="M5 11a7 7 0 0 0 14 0M12 18v3"/>
</IconBase>);
const IconMicOff = (p) => (<IconBase {...p}>
<path d="M9 9V6a3 3 0 0 1 6 0v5m0 4a3 3 0 0 1-6 0"/>
<path d="M5 11a7 7 0 0 0 11.5 5.3M19 11a7 7 0 0 1-.4 2.3M12 18v3"/>
<path d="M3 3l18 18"/>
</IconBase>);
const IconChat = (p) => (<IconBase {...p}>
<path d="M4 5h16v11H9l-5 4z"/>
</IconBase>);
const IconBack = (p) => (<IconBase {...p} strokeWidth={1.9}>
<path d="M15 5l-7 7 7 7"/>
</IconBase>);
const ControlBtn = ({ size = 48, tone = 'neutral', active = false, disabled, label, ariaLabel, onClick, children, }) => {
const bg = tone === 'danger' ? HP_CALL.end :
tone === 'start' ? HP_CALL.stateSpeaking :
tone === 'accent' ? HP_CALL.accent :
active ? 'rgba(255,255,255,0.92)' : HP_CALL.surface2;
const fg = tone === 'danger' || tone === 'start' ? '#ffffff' :
tone === 'accent' ? '#052c33' :
active ? '#0b0b0c' : HP_CALL.text;
const glow = tone === 'danger' ? 'rgba(239, 68, 68, 0.45)' :
tone === 'start' ? 'rgba(16, 185, 129, 0.45)' :
tone === 'accent' ? 'rgba(34, 211, 238, 0.4)' :
'rgba(0, 0, 0, 0.3)';
const border = tone === 'neutral' && !active ? `1px solid ${HP_CALL.border}` : 'none';
return (<div style={{
display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
opacity: disabled ? 0.45 : 1,
}}>
<button type="button" onClick={onClick} disabled={disabled} aria-label={ariaLabel || label || ''} style={{
width: size, height: size, borderRadius: '50%',
background: bg, border, color: fg, padding: 0,
display: 'flex', alignItems: 'center', justifyContent: 'center',
cursor: disabled ? 'not-allowed' : 'pointer',
boxShadow: tone === 'neutral' && !active
? 'inset 0 1px 0 rgba(255,255,255,0.04)'
: `0 8px 22px ${glow}, inset 0 1px 0 rgba(255,255,255,0.12)`,
transition: 'transform 80ms ease, background 120ms ease, box-shadow 120ms ease',
}}>
{children}
</button>
{label ? (<span style={{
fontFamily: HP_CALL.font, fontSize: 11, fontWeight: 500, letterSpacing: 0.2,
color: HP_CALL.text3, textTransform: 'lowercase',
}}>{label}</span>) : null}
</div>);
};
// ── CallAvatar (ported from phone/avatar.jsx) ─────────────────────
const CallAvatar = ({ size = 156, state, imageUrl = null, accentColor = null }) => {
const stateColor = hpCallStateColor(state);
const breathes = state === 'listening' ||
state === 'connecting' ||
state === 'speaking' ||
state === 'dialing';
const showPulseRings = state === 'dialing';
const haloOuter = size + 28;
// seed + hue derivation now live inside the Aura primitive
// (hashHue + moodOffset). This component only owns the halo +
// ring decorations that depend on CallState.
return (<div style={{
position: 'relative', width: haloOuter, height: haloOuter,
display: 'flex', alignItems: 'center', justifyContent: 'center',
}}>
{/* Expanding pulse rings — only while dialing. Three rings on
staggered delays so the modal reads as "ringing", not just
"spinning up". */}
{showPulseRings && [0, 1, 2].map(i => (<div key={i} aria-hidden="true" style={{
position: 'absolute', inset: 0, borderRadius: '50%',
border: `1.5px solid ${stateColor}`,
// Split to longhand so per-ring animationDelay doesn't race
// the shorthand reset — React warns when both are set
// (mixing shorthand + longhand produces inconsistent results
// across browsers).
animationName: 'hp-call-pulse-ring',
animationDuration: '1600ms',
animationTimingFunction: 'ease-out',
animationIterationCount: 'infinite',
animationDelay: `${i * 420}ms`,
opacity: 0,
}}/>))}
<div style={{
position: 'absolute', inset: 0, borderRadius: '50%',
background: `radial-gradient(circle, ${stateColor}55 0%, transparent 68%)`,
filter: 'blur(14px)',
opacity: breathes ? 0.8 : 0.35,
animation: breathes ? 'hp-halo-breathe 2s ease-in-out infinite' : 'none',
}}/>
<div style={{
position: 'absolute', width: size + 10, height: size + 10,
borderRadius: '50%',
border: `2px solid ${stateColor}`,
opacity: state === 'ended' || state === 'muted' ? 0.25 : 0.92,
}}/>
<div style={{
// ``state === 'ended'`` filter stays on this wrapper so
// the Aura primitive stays state-agnostic while the
// overlay still gets a visible "call's over" cue.
filter: state === 'ended'
? 'grayscale(0.6) brightness(0.7)'
: 'none',
borderRadius: '50%',
}}>
<Aura seed={imageUrl || accentColor || 'homepilot'} size={size} photoUrl={imageUrl}
// Hue-drift polish is the only thing the Aura primitive
// animates internally. We disable it here — the overlay
// already owns the halo breath + dialing rings, and the
// combined motion was too busy on the call surface.
animated={false}/>
</div>
</div>);
};
const CallModal = ({ state, personaName, imageUrl = null, accentColor = null, durationSec, onEnd, onToggleMute, onMinimize, onSwitchToChat, intensityRef, }) => {
const stateColor = hpCallStateColor(state);
const stateLabel = hpCallStateLabel(state, personaName);
const mm = Math.floor(durationSec / 60).toString().padStart(2, '0');
const ss = (durationSec % 60).toString().padStart(2, '0');
const preConnect = state === 'dialing' || state === 'connecting';
const timer = preConnect ? '—:—' : `${mm}:${ss}`;
return (<div style={{
width: 'min(420px, 92vw)',
padding: '18px 22px 26px',
borderRadius: 24,
background: HP_CALL.surface,
border: `1px solid ${HP_CALL.border}`,
boxShadow: '0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04)',
position: 'relative', overflow: 'hidden',
fontFamily: HP_CALL.font, color: HP_CALL.text,
animation: 'hp-call-in 180ms ease-out',
}}>
<div style={{
position: 'absolute', inset: '-40% -10% auto -10%', height: '60%',
background: `radial-gradient(ellipse at 50% 100%, ${stateColor}26 0%, transparent 65%)`,
pointerEvents: 'none', opacity: state === 'muted' ? 0.1 : 0.35,
}}/>
{/* Header row */}
<div style={{
position: 'relative', zIndex: 2,
display: 'flex', alignItems: 'center',
height: 32, marginBottom: 10,
}}>
<button type="button" onClick={onMinimize} aria-label="Minimize call" style={{
width: 32, height: 32, borderRadius: 10, padding: 0,
background: 'transparent', border: 'none', cursor: 'pointer',
color: HP_CALL.text2,
display: 'flex', alignItems: 'center', justifyContent: 'center',
}}>
<IconBack size={18} color={HP_CALL.text2}/>
</button>
<div style={{
position: 'absolute', left: 40, right: 40, textAlign: 'center',
fontSize: 16, fontWeight: 600, letterSpacing: -0.1,
color: HP_CALL.text,
whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
pointerEvents: 'none',
}}>{personaName}</div>
</div>
{/* Timer */}
<div style={{
position: 'relative', zIndex: 2, textAlign: 'center',
fontSize: 13, color: HP_CALL.text2,
fontFamily: HP_CALL.fontTabular,
fontVariantNumeric: 'tabular-nums',
marginBottom: 18,
}}>{timer}</div>
{/* Avatar + halo */}
<div style={{
position: 'relative', zIndex: 2,
display: 'flex', justifyContent: 'center', marginBottom: 18,
}}>
<CallAvatar size={156} state={state} imageUrl={imageUrl} accentColor={accentColor}/>
</div>
{/* State label + waveform/dots */}
<div style={{
position: 'relative', zIndex: 2,
display: 'flex', flexDirection: 'column', alignItems: 'center',
gap: 10, marginBottom: 22, minHeight: 52,
}}>
{preConnect ? (<div style={{ display: 'flex', gap: 5 }}>
{[0, 1, 2].map(i => (<div key={i} style={{
width: 5, height: 5, borderRadius: '50%',
background: HP_CALL.text,
opacity: 0.35 + i * 0.2,
// Longhand — keeps per-dot animationDelay from being
// reset by the shorthand during React rerenders.
animationName: 'hp-dot-pulse',
animationDuration: state === 'dialing' ? '1.2s' : '0.8s',
animationTimingFunction: 'ease-in-out',
animationIterationCount: 'infinite',
animationDelay: `${i * 0.12}s`,
}}/>))}
</div>) : (<Waveform bars={26} height={24} mode={waveformModeFromCallState(state)} seed={personaName} intensityRef={intensityRef}/>)}
<div style={{
fontSize: 14, fontWeight: 500, letterSpacing: 0.3,
color: stateColor, textTransform: 'lowercase',
}}>{stateLabel}</div>
</div>
{/* Three-button dock */}
<div style={{
position: 'relative', zIndex: 2,
display: 'flex', justifyContent: 'center', alignItems: 'center',
gap: 28,
}}>
<ControlBtn size={56} active={state === 'muted'} ariaLabel={state === 'muted' ? 'Unmute microphone' : 'Mute microphone'} onClick={onToggleMute} disabled={state === 'dialing' || state === 'connecting' || state === 'ended'}>
{state === 'muted'
? <IconMicOff size={22} color="#0b0b0c"/>
: <IconMic size={22}/>}
</ControlBtn>
<ControlBtn size={72} tone="danger" ariaLabel="End call" onClick={onEnd}>
<IconPhoneEnd size={26} color="#ffffff"/>
</ControlBtn>
<ControlBtn size={56} ariaLabel="Switch to text chat" onClick={onSwitchToChat} disabled={!onSwitchToChat || state === 'dialing' || state === 'connecting' || state === 'ended'}>
<IconChat size={22}/>
</ControlBtn>
</div>
</div>);
};
// Outer shell — renders nothing when closed so the voice hook inside
// CallOverlayInner only mounts during an active call. This matters: the
// voice controller requests mic permission + starts the VAD as soon as
// it mounts. Keeping it gated behind `open` means the mic is only
// touched while the user is in a call.
export default function CallOverlay(props) {
if (!props.open)
return null;
return <CallOverlayInner {...props}/>;
}
function CallOverlayInner({ onClose, personaName = 'Assistant', avatarUrl = null, accentColor = null, onMinimize, onSwitchToChat, skipDialing = false, onEnded, onSendText, backend, messages, }) {
const initial = skipDialing ? 'connecting' : 'dialing';
const [state, setState] = useState(initial);
const [muted, setMuted] = useState(false);
const [durationSec, setDurationSec] = useState(0);
// Staged lifecycle on mount:
// dialing (DIAL_MS) → connecting (CONNECT_MS) → listening
// (or: connecting → listening when skipDialing).
useEffect(() => {
const timers = [];
if (!skipDialing) {
timers.push(window.setTimeout(() => {
setState(s => (s === 'dialing' ? 'connecting' : s));
}, DIAL_MS));
}
timers.push(window.setTimeout(() => {
setState(s => (s === 'connecting' || s === 'dialing') ? 'listening' : s);
}, (skipDialing ? 0 : DIAL_MS) + CONNECT_MS));
return () => { timers.forEach(t => window.clearTimeout(t)); };
}, [skipDialing]);
// Live timer during active call (dialing + connecting don't count).
useEffect(() => {
if (state === 'dialing' || state === 'connecting' || state === 'ended')
return;
const iv = window.setInterval(() => setDurationSec((n) => n + 1), 1000);
return () => window.clearInterval(iv);
}, [state]);
// Ringback tone — PSTN-standard two-frequency synthesis via
// WebAudio. US telephony uses 440 Hz + 480 Hz played together, 2 s
// on / 4 s off. We play one full on-phase (2 s) during dialing so
// the user hears a real phone-style ring before pickup. Nothing
// plays during connecting or live — a phone that keeps ringing
// after pickup is a broken phone.
useEffect(() => {
if (state !== 'dialing')
return;
const AC = window.AudioContext ||
window.webkitAudioContext;
if (!AC)
return;
let ctx = null;
try {
ctx = new AC();
}
catch {
return;
}
const start = ctx.currentTime + 0.03;
const durationSec = 2.0; // "on" portion of the 2-on-4-off cadence
const peakGain = 0.07; // loud enough to be heard, soft enough to sit
// under the persona's TTS once it lands
// 440 Hz + 480 Hz fundamentals — the exact CCITT-spec recipe for
// "ringing signal, North American" (Precise Tone Plan).
const freqs = [440, 480];
const oscs = [];
const gain = ctx.createGain();
gain.gain.setValueAtTime(0, start);
gain.gain.linearRampToValueAtTime(peakGain, start + 0.08);
gain.gain.setValueAtTime(peakGain, start + durationSec - 0.2);
gain.gain.linearRampToValueAtTime(0, start + durationSec);
gain.connect(ctx.destination);
for (const f of freqs) {
const o = ctx.createOscillator();
o.type = 'sine';
o.frequency.setValueAtTime(f, start);
o.connect(gain);
o.start(start);
o.stop(start + durationSec + 0.05);
oscs.push(o);
}
return () => {
for (const o of oscs) {
try {
o.stop();
}
catch { /* ignore */ }
}
try {
ctx?.close();
}
catch { /* ignore */ }
};
}, [state]);
// End-call chime — plays once on ``dialing/connecting/listening/…
// → ended`` transition. Matches the WhatsApp / FaceTime / Slack
// Huddle convention: two-tone descending sine (perfect fifth down,
// 660 → 440 Hz), short (~400 ms), quiet (peak gain 0.15), soft
// attack + exponential-ish release so there's no click. The second
// tone overlaps the first by 50 ms for smoothness. Fires inside
// the END_FADE_MS window so the audio "goodbye" lands with the
// visual fade — matches every industry example.
//
// Same WebAudio pattern as the ringback above so behaviour across
// browsers is identical. Muted state suppresses the tone — the
// user already signalled "quiet please".
useEffect(() => {
if (state !== 'ended')
return;
if (muted)
return;
const AC = window.AudioContext ||
window.webkitAudioContext;
if (!AC)
return;
let ctx = null;
try {
ctx = new AC();
}
catch {
return;
}
const t0 = ctx.currentTime + 0.02;
const peakGain = 0.15;
const attack = 0.02; // 20 ms — no click
const release = 0.08; // 80 ms — gentle tail
// Tone 1 — 660 Hz for 180 ms
const t1Start = t0;
const t1Dur = 0.18;
// Tone 2 — 440 Hz, overlaps tone 1 by 50 ms, runs 220 ms
const t2Start = t0 + 0.13;
const t2Dur = 0.22;
const makeTone = (freq, startAt, durSec) => {
const osc = ctx.createOscillator();
osc.type = 'sine';
osc.frequency.setValueAtTime(freq, startAt);
const gain = ctx.createGain();
gain.gain.setValueAtTime(0, startAt);
gain.gain.linearRampToValueAtTime(peakGain, startAt + attack);
gain.gain.setValueAtTime(peakGain, startAt + durSec - release);
gain.gain.linearRampToValueAtTime(0, startAt + durSec);
osc.connect(gain).connect(ctx.destination);
osc.start(startAt);
osc.stop(startAt + durSec + 0.05);
return osc;
};
const oscs = [
makeTone(660, t1Start, t1Dur),
makeTone(440, t2Start, t2Dur),
];
const totalDuration = (t2Start - t0) + t2Dur + 0.05;
// Close the context after the tones finish so we don't leave a
// live audio node dangling. The overlay unmounts ~END_FADE_MS
// after state='ended' anyway, but being explicit is cheap.
const closeTimer = window.setTimeout(() => {
try {
ctx?.close();
}
catch { /* ignore */ }
}, Math.ceil(totalDuration * 1000) + 50);
return () => {
window.clearTimeout(closeTimer);
for (const o of oscs) {
try {
o.stop();
}
catch { /* ignore */ }
}
try {
ctx?.close();
}
catch { /* ignore */ }
};
}, [state, muted]);
const handleEnd = useCallback(() => {
setState('ended');
// If the backend session is live, send a graceful call.control
// 'end' envelope so the server-side ledger closes cleanly.
if (useBackendRef.current) {
try {
sessionRef.current.end();
}
catch { /* ignore */ }
}
// Capture the live-phase duration NOW — durationSec is frozen at
// the last tick because the interval effect tears down on
// state==='ended'. Close after a short fade so the backdrop +
// modal get a chance to animate out.
const endedWith = durationSec;
window.setTimeout(() => {
if (onEnded)
onEnded(endedWith);
onClose();
}, END_FADE_MS);
}, [onClose, onEnded, durationSec]);
// Esc ends.
useEffect(() => {
const onKey = (e) => { if (e.key === 'Escape')
handleEnd(); };
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [handleEnd]);
// ── Backend voice_call session (preferred transport) ───────────
// When a `backend` prop is supplied we attempt the dedicated
// voice_call WebSocket. If the backend responds 404/501 we stay
// in 'unavailable' and the chat-REST fallback takes over below.
const session = useCallSession({
enabled: !!backend,
backendUrl: backend?.backendUrl ?? '',
authToken: backend?.authToken ?? null,
request: useMemo(() => ({
conversation_id: backend?.conversationId ?? null,
persona_id: backend?.personaId ?? null,
entry_mode: 'call',
// Declare Phase 2/3 client capability. Server replies with
// its own capability advertisement; effective mode is the
// intersection (useCallSession reads capabilities from the
// session-create response).
device_info: {
tz: Intl.DateTimeFormat().resolvedOptions().timeZone,
platform: navigator.platform,
streaming: true,
barge_in: true,
},
}), [backend?.conversationId, backend?.personaId]),
});
const useBackend = !!backend &&
session.status !== 'unavailable' &&
session.status !== 'error';
// ── "Listen first" gate — opener-TTS is playing ───────────────
// When the backend emits the curated opening greeting as a
// transcript.final right after call.state live, the client's
// microphone must stay CLOSED until the greeting has finished
// speaking. Otherwise the user's natural "hello?" mid-greeting
// triggers a barge-in and cuts the persona off — the opposite
// of the "AI answers first, user listens" product spec.
//
// openerDoneRef is a one-shot — once the first assistant
// utterance has finished, subsequent utterances (responses to
// user turns) do NOT relock the mic; the user can barge-in on
// those freely, which is the correct UX.
const [openerPlaying, setOpenerPlaying] = useState(false);
// ``connected`` is a pure derivation from ``state``; declared early
// so effects that fire before the setHandsFree gate (fallback opener
// below) can reference it without a forward-ref.
const connected = state !== 'dialing' && state !== 'connecting' && state !== 'ended';
const openerDoneRef = useRef(false);
useEffect(() => {
if (session.status === 'creating') {
openerDoneRef.current = false;
setOpenerPlaying(false);
}
}, [session.status]);
// ── Real voice pipeline ────────────────────────────────────────
// STT capture → preferred transport. If the backend session is
// live we route transcripts through the voice_call WS; otherwise
// we fall back to onSendText (regular chat REST) so the overlay
// still works when VOICE_CALL_ENABLED is off server-side.
const onSendTextRef = useRef(onSendText);
useEffect(() => { onSendTextRef.current = onSendText; }, [onSendText]);
const sessionRef = useRef(session);
useEffect(() => { sessionRef.current = session; }, [session]);
const useBackendRef = useRef(useBackend);
useEffect(() => { useBackendRef.current = useBackend; }, [useBackend]);
const voice = useVoiceController((text) => {
clog({
e: 'turn',
action: 'user_out',
route: useBackendRef.current ? 'ws' : 'chat_rest',
});
if (useBackendRef.current) {
sessionRef.current.sendTranscript(text);
}
else {
onSendTextRef.current?.(text);
}
});
const turnLockRef = useRef('idle');
const turnUnlockTimerRef = useRef(null);
const fullDuplexEnabledRef = useRef(isCallFullDuplexEnabled());
const setTurnLock = useCallback((next, trigger) => {
if (!fullDuplexEnabledRef.current)
return;
const prev = turnLockRef.current;
if (prev === next)
return;
turnLockRef.current = next;
voice.setListeningSuppressed(next === 'ai', `turn_lock:${trigger}`);
clog({ e: 'state', from: prev, to: next, trigger });
}, [voice]);
const releaseAiTurnWithMargin = useCallback((trigger) => {
if (turnUnlockTimerRef.current) {
window.clearTimeout(turnUnlockTimerRef.current);
turnUnlockTimerRef.current = null;
}
turnUnlockTimerRef.current = window.setTimeout(() => {
setTurnLock('idle', `${trigger}:margin_release`);
turnUnlockTimerRef.current = null;
}, 300);
}, [setTurnLock]);
useEffect(() => {
return () => {
if (turnUnlockTimerRef.current) {
window.clearTimeout(turnUnlockTimerRef.current);
turnUnlockTimerRef.current = null;
}
};
}, []);
const speakText = useCallback((text) => {
if (!text || !text.trim())
return;
setTurnLock('ai', 'speak:start');
const isOpener = !openerDoneRef.current;
if (isOpener)
setOpenerPlaying(true);
const markDone = () => {
openerDoneRef.current = true;
setOpenerPlaying(false);
// 300 ms margin before we flip the lock back to 'idle'. Echo
// tail can linger after TTS says "ended"; releasing immediately
// would let the mic re-open while our own voice is still in
// the air.
releaseAiTurnWithMargin('speak:end');
};
// Length-based estimate for the SpeechService path (the shim
// doesn't expose onend). ~12 chars/sec; floor 1.5 s so "Yes?"
// still gives the user a beat; ceiling 8 s so a runaway
// greeting can't lock the mic indefinitely.
const estimateSpeechMs = (t) => Math.max(1500, Math.min(8000, t.length * 80));
try {
// Prefer the owned TTS path when full-duplex is on. speakOwned
// handles both the window.SpeechService route AND the
// cross-source dedupe (see call/log.ts). Returns true iff this
// caller owns the utterance; false means another source
// (App-level TTS) was mid-speak — we fall through to the legacy
// speechSynthesis path unchanged so the overlay isn't silent.
if (fullDuplexEnabledRef.current) {
const spoke = speakOwned('overlay', text, {
onEnd: markDone,
onError: () => markDone(),
});
if (spoke) {
if (isOpener)
window.setTimeout(markDone, estimateSpeechMs(text));
return;
}
}
else {
const w = window;
if (w.SpeechService?.speak) {
w.SpeechService.speak(text);
if (isOpener)
window.setTimeout(markDone, estimateSpeechMs(text));
return;
}
}
if ('speechSynthesis' in window) {
const utt = new SpeechSynthesisUtterance(text);
if (isOpener) {
utt.onend = markDone;
utt.onerror = markDone;
window.setTimeout(markDone, estimateSpeechMs(text));
}
window.speechSynthesis.speak(utt);
return;
}
if (isOpener)
markDone();
}
catch {
if (isOpener)
markDone();
}
}, [setTurnLock, releaseAiTurnWithMargin]);
// WS path — speak every assistant transcript.final (the opening
// greeting from ws.py, and in unary mode every reply). In
// streaming mode, per-token partials go through streamTts below
// and THIS path fires only for transcript.final emitted outside
// a streamed turn — e.g. the opener itself.
useEffect(() => {
if (!useBackend)
return;
const unsub = session.onAssistantTranscript((p) => {
clog({ e: 'turn', action: 'assistant_in', route: 'ws' });
speakText(p.text);
});
return unsub;
}, [useBackend, session, speakText]);
// ── Fallback mode (VOICE_CALL_ENABLED=false on backend) ───────
// When the backend voice_call route isn't mounted, the session
// POST 404s, useBackend stays false, and the STT pipeline routes
// through the regular chat-REST path (onSendText above). That
// works for text round-tripping — but without the hooks below,
// the assistant's replies land in chatMessages and are never
// spoken, so the user hears nothing.
//
// These two effects close that gap so the overlay is functional
// even with the WS disabled:
// (a) a synthetic opener fires when the call connects, so the
// AI still "answers first"
// (b) every new assistant message arriving in ``messages``
// during the call is spoken via the same TTS path the WS
// reply path uses
// (a) Fallback opener — once per session, when the line connects
// and we're running fallback mode, pick a short greeting and
// speak it. The greeting is marked as opener via speakText's
// first-utterance heuristic, so the mic gate stays closed
// exactly like the WS path.
const fallbackOpeners = useMemo(() => [
'Hello?',
'Yes?',
`Hi, this is ${personaName}.`,
`${personaName} speaking.`,
`Hey — ${personaName}.`,
`Hi, ${personaName} here.`,
], [personaName]);
const fallbackOpenerFiredRef = useRef(false);
useEffect(() => {
if (useBackend)
return;
if (!connected)
return;
if (fallbackOpenerFiredRef.current)
return;
fallbackOpenerFiredRef.current = true;
const g = fallbackOpeners[Math.floor(Math.random() * fallbackOpeners.length)];
speakText(g);
}, [useBackend, connected, fallbackOpeners, speakText]);
// (b) Ongoing assistant replies in fallback mode are now spoken
// by the App-level TTS effect (App.tsx — gated on callOpen). That
// pipeline already handles stripMarkdownForSpeech + per-message
// dedupe via lastSpokenMessageIdRef, so we don't duplicate it
// here. The fallback OPENER above stays — it's synthesized in
// the overlay and never enters chatMessages, so the App-level
// effect can't produce it.
//
// ``messages`` prop is still accepted for future use (mid-call
// transcript viewer, etc.) but intentionally unused here — no
// TTS side-effect reads it.
// ── Phase 2: streaming TTS pipeline ───────────────────────────
// Holds one streamTts instance per mounted overlay. Stopped on
// unmount so a re-entry creates a fresh engine.
const ttsRef = useRef(null);
useEffect(() => {
if (!useBackend || !session.streamingNegotiated) {
ttsRef.current = null;
return;
}
const tts = createStreamingTts();
ttsRef.current = tts;
return () => {
try {
tts.stop();
}
catch { /* ignore */ }
ttsRef.current = null;
};
}, [useBackend, session.streamingNegotiated]);
// Track the currently-streaming turn_id so the barge-in path can
// address the right turn without racing a new one.
const currentTurnIdRef = useRef(null);
// Partial deltas → streamTts.appendDelta. Each delta triggers
// sentence-boundary flushing inside the TTS engine; callers don't
// see the buffering.
useEffect(() => {
if (!useBackend || !session.streamingNegotiated)
return;
return session.onAssistantPartial((p) => {
currentTurnIdRef.current = p.turn_id;
ttsRef.current?.appendDelta(p.delta);
});
}, [useBackend, session]);
// Turn end → flush residual buffer + clear the active turn id.
useEffect(() => {
if (!useBackend || !session.streamingNegotiated)
return;
return session.onAssistantTurnEnd((p) => {
if (p.reason === 'cancelled' || p.reason === 'error') {
ttsRef.current?.stop();
}
else {
ttsRef.current?.flush();
}
if (currentTurnIdRef.current === p.turn_id) {
currentTurnIdRef.current = null;
}
});
}, [useBackend, session]);
// Server-initiated cancel (barge-in ack) → stop TTS immediately.
// Must land inside ~50 ms of receipt (§ 5.3 contract).
useEffect(() => {
if (!useBackend || !session.streamingNegotiated)
return;
return session.onAssistantCancel((_p) => {
ttsRef.current?.stop();
});
}, [useBackend, session]);
// ── Phase 3: barge-in VAD tap ─────────────────────────────────
// Audio level mirror — useVoiceController returns fresh values
// every render; we stash the latest into a ref so the rAF loop
// inside useBargeInDetector always sees the current value.
const voiceLevelRef = useRef(0);
useEffect(() => {
voiceLevelRef.current = voice.audioLevel;
}, [voice.audioLevel]);
// Re-evaluated each render; the detector's rAF loop reads its own
// refs so identity changes don't thrash.
const bargeInEnabled = useBackend &&
session.bargeInNegotiated &&
(ttsRef.current?.isSpeaking ?? false);
useBargeInDetector({
audioLevelRef: voiceLevelRef,
enabled: bargeInEnabled,
onBargeIn: () => {
const tid = currentTurnIdRef.current;
clog({ e: 'turn', action: 'barge_in', route: 'ws' });
ttsRef.current?.stop();
if (tid)
session.sendBargeIn(tid);
},
});
// Call-center-style auto-greeting — the moment the backend session
// goes live, prompt the persona to answer first (the way a real
// person picks up the phone). We send a short synthetic transcript
// the backend's persona_call phase machine will treat as turn 0 of
// the opening sequence — it responds with a contextual "hello?" /
// "hey, what's up?" in the persona's own voice.
//
// This is a one-shot per call session. `greetedRef` guards against
// reconnect storms triggering a second "hello".
const greetedRef = useRef(false);
useEffect(() => {
if (!useBackend)
return;
if (session.callState !== 'live')
return;
if (greetedRef.current)
return;
greetedRef.current = true;
// One very short open-channel ping. persona_call reads this as the
// caller-initiated summons in the Schegloff opening structure and
// the persona answers.
session.sendTranscript('[phone-call-open]');
}, [useBackend, session]);
// Reset the greet guard when a fresh session is (re)created.
useEffect(() => {
if (session.status === 'creating')
greetedRef.current = false;
}, [session.status]);
// Backchannel + filler events are short, low-volume TTS clips.
// We route them through the same speak path; they're short enough
// (one token) that interrupting a reply mid-stream is fine.
useEffect(() => {
if (!useBackend)
return;
const unsub1 = session.onAssistantBackchannel((p) => {
try {
window.speechSynthesis?.speak?.(new SpeechSynthesisUtterance(p.token));
}
catch { /* ignore */ }
});
const unsub2 = session.onAssistantFiller((p) => {
try {
window.speechSynthesis?.speak?.(new SpeechSynthesisUtterance(p.token));
}
catch { /* ignore */ }
});
return () => { unsub1(); unsub2(); };
}, [useBackend, session]);
// Enter hands-free once the line is "connected" AND the opener
// has finished speaking. The second gate is the "listen first"
// rule — the AI speaks its greeting and the user hears it out
// before the mic opens; otherwise a natural early "hello?" trips
// the barge-in detector and cuts the persona off mid-greeting.
// ``connected`` is declared earlier (near state).
//
// This effect intentionally has NO cleanup that toggles handsFree —
// the original cleanup raced against `openerPlaying` transitions
// and re-render-driven re-runs (voice + setTurnLock change identity
// on every render), which flipped handsFree OFF mid-call and left
// state on OFF right when the user started speaking. The STT path
// then dropped the VAD speech_start because state !== IDLE. Tear-
// down lives in the dedicated unmount effect below.
const voiceHandleRef = useRef(voice);
useEffect(() => { voiceHandleRef.current = voice; }, [voice]);
const setTurnLockRef = useRef(setTurnLock);
useEffect(() => { setTurnLockRef.current = setTurnLock; }, [setTurnLock]);
useEffect(() => {
if (!connected)
return;
if (openerPlaying)
return;
setTurnLockRef.current('idle', 'connected_open_mic');
voiceHandleRef.current.setHandsFree(true);
}, [connected, openerPlaying]);
// Unmount-only cleanup. Guarantees the mic is released and the
// turn-lock is reset when the overlay actually tears down (call
// ended, user navigated away), without coupling that teardown to
// the normal-effect re-run cycle above.
useEffect(() => {
return () => {
try {
voiceHandleRef.current.setHandsFree(false);
}
catch { /* ignore */ }
try {
setTurnLockRef.current('idle', 'cleanup');
}
catch { /* ignore */ }
};
}, []);
// Mirror the voice-controller's machine onto our UI state so the
// halo + waveform + label actually reflect what's happening:
// LISTENING → 'listening'
// THINKING → 'thinking'
// SPEAKING → 'speaking'
// IDLE → 'listening' (ready, nothing to say yet)
// OFF / muted → preserved
useEffect(() => {
if (!connected)
return;
if (muted)
return;
const mapped = mapVoiceState(voice.state);
if (!mapped)
return;
setState(prev => {
if (prev === 'ended' || prev === 'muted')
return prev;
return mapped;
});
}, [voice.state, connected, muted]);
// Mirror the voice-controller's LISTENING / THINKING onto the
// turn-lock 'user' slot. The AI owns 'ai' (see speakText); VAD
// drives 'user' only when the AI isn't already speaking. This is
// the industry-standard "who has the floor" gate — with it, the
// AI's TTS bleed through the speaker can't trip a false user turn
// (the root cause of the "AI says yes, hears itself, stops" bug).
useEffect(() => {
if (!fullDuplexEnabledRef.current)
return;
if (!connected)
return;
if (muted)
return;
if (voice.state === 'LISTENING' && turnLockRef.current === 'idle') {
clog({ e: 'vad', action: 'speech_start', state: voice.state });
setTurnLock('user', 'voice_listening');
}
else if (voice.state === 'THINKING' && turnLockRef.current === 'user') {
clog({ e: 'vad', action: 'speech_end', state: voice.state });
setTurnLock('idle', 'voice_thinking');
}
}, [voice.state, connected, muted, setTurnLock]);
// While the opener TTS is playing, the UI label must read
// 'speaking' — the persona is literally talking. Default state
// transitions would land on 'listening' (post-connect default)
// which is a lie: audio is going OUT of the speaker, not coming
// IN to the mic. The mic is still closed (see the openerPlaying
// gate on setHandsFree above), so voice.state stays OFF during
// this window and the mirror effect above doesn't override us.
useEffect(() => {
if (!openerPlaying)
return;
setState(prev => (prev === 'ended' || prev === 'muted') ? prev : 'speaking');
}, [openerPlaying]);
// ── Live waveform intensity (0..1) ─────────────────────────────
// One rAF loop per state-group writes to a ref that CallWaveform
// reads directly (no React re-renders). React only sees the state
// label; the bars themselves are driven straight from the DOM.
//
// listening / muted → voice.audioLevel (real mic RMS)
// speaking → synthesised speech envelope — browser TTS
// audio isn't routable through an AnalyserNode,
// so we generate a natural-sounding envelope
// (sum of 3 sines + a small noise floor). The
// visual cadence matches syllable rate + the
// amplitude range matches what mic analysers
// produce on voiced speech, so the persona's
// bars and the user's bars "look like the
// same kind of thing."
// thinking → slow 0.15..0.25 drift — "processing"
// dialing/connecting/ended → 0.05 floor — visible but quiet
const intensityRef = useRef(0.05);
const voiceRef = useRef(voice);
useEffect(() => { voiceRef.current = voice; }, [voice]);
useEffect(() => {
let raf = 0;
const start = performance.now();
if (state === 'listening' || state === 'muted') {
const tick = () => {
// Real mic level. useVoiceController already smooths with
// an EMA internally; we pass it through unmodified.
intensityRef.current = muted ? 0 : voiceRef.current.audioLevel;
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}
if (state === 'speaking') {
const tick = () => {
const t = (performance.now() - start) / 1000;
// Three sines at the frequencies you'd see in actual
// voiced speech analysis: ~2 Hz syllable rate, ~5 Hz
// mid-band, ~10 Hz high-band flutter. A small noise floor
// breaks the periodicity so bars don't pulse in lockstep.
const v = 0.45 +
Math.sin(t * 2.3) * 0.22 +
Math.sin(t * 5.7 + 1.3) * 0.16 +
Math.sin(t * 11.1 + 2.7) * 0.09 +
(Math.random() - 0.5) * 0.07;
intensityRef.current = Math.max(0, Math.min(1, v));
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}
if (state === 'thinking') {
const tick = () => {
const t = (performance.now() - start) / 1000;
intensityRef.current = 0.18 + Math.sin(t * 1.1) * 0.06;
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}
// dialing / connecting / ended → static low floor.
intensityRef.current = 0.05;
}, [state, muted]);
const toggleMute = useCallback(() => {
setMuted((m) => {
const next = !m;
if (next) {
voice.setHandsFree(false);
setState('muted');
}
else {
voice.setHandsFree(true);
setState('listening');
}
if (useBackendRef.current) {
try {
sessionRef.current.sendUiState({ muted: next });
}
catch { /* ignore */ }
}
return next;
});
}, [voice]);
const handleMinimize = useCallback(() => {
if (onMinimize)
onMinimize();
else
onClose();
}, [onMinimize, onClose]);
return (<div role="dialog" aria-modal="true" aria-label={`Call with ${personaName}`} className="fixed inset-0 z-[100] flex items-center justify-center">
<div className="absolute inset-0" style={{
background: HP_CALL.backdrop,
backdropFilter: 'blur(20px)',
WebkitBackdropFilter: 'blur(20px)',
transition: 'opacity 200ms ease',
opacity: state === 'ended' ? 0 : 1,
}}/>
<div className="relative z-10">
<CallModal state={state} personaName={personaName} imageUrl={avatarUrl} accentColor={accentColor} durationSec={durationSec} onEnd={handleEnd} onToggleMute={toggleMute} onMinimize={handleMinimize} onSwitchToChat={onSwitchToChat} intensityRef={intensityRef}/>
</div>
<style>{`
@keyframes hp-call-in {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
@keyframes hp-halo-breathe {
0%, 100% { opacity: 0.30; transform: scale(1); }
50% { opacity: 0.85; transform: scale(1.06); }
}
@keyframes hp-dot-pulse {
0%, 100% { transform: translateY(0); opacity: 0.35; }
50% { transform: translateY(-3px); opacity: 1; }
}
@keyframes hp-call-pulse-ring {
0% { transform: scale(1); opacity: 0.65; }
80% { opacity: 0; }
100% { transform: scale(1.55); opacity: 0; }
}
@keyframes hp-call-toast-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
`}</style>
</div>);
}
// ── Call-ended toast removed ──────────────────────────────────────
// The former CallEndedToast has been retired. The inline
// CallEventRow (rendered directly in the chat stream) now carries
// the post-call record + Resume affordance, so a floating toast
// would be redundant. Kept this comment as a reviewer breadcrumb.