import { TelzinoProvider, useTelzino, useMuted, useAgentState, useTranscript, useNeedsUserGesture } from '@telzino/react';
const config = { publishableKey: 'pk_live_...' }; // inline objects are fine
function Call() {
const { start, end, status, error } = useTelzino();
const [muted, setMuted] = useMuted();
const agentState = useAgentState();
const transcript = useTranscript();
const [needsGesture, resume] = useNeedsUserGesture();
const live = status === 'connecting' || status === 'connected' || status === 'reconnecting';
return (
<div>
<button onClick={() => (live ? end() : start({ agentId: '3f1c2a4e-8b7d-4c3a-9e2f-1a2b3c4d5e6f' }))}>{live ? 'Hang up' : 'Call'}</button>
<button onClick={() => setMuted(!muted)} disabled={!live}>{muted ? 'Unmute' : 'Mute'}</button>
<span>{agentState}</span>
{needsGesture && <button onClick={resume}>Enable audio</button>}
{error && <p role="alert">{error.message}</p>}
<ul>{transcript.map((t) => <li key={t.id}>{t.role}: {t.text}</li>)}</ul>
</div>
);
}
export const App = () => <TelzinoProvider config={config}><Call /></TelzinoProvider>;
