import { useEffect, useRef, useState } from "react"; import { createRoot } from "react-dom/client"; import { WebSocketVoiceTransport } from "@cloudflare/voice/client"; import type { TranscriptMessage, VoicePipelineMetrics, VoiceStatus } from "@cloudflare/voice/client"; import { createTelnyxVoiceConfig, TelnyxPhoneClient } from "@cloudflare/voice-telnyx/browser"; import { Badge, Button, PoweredByCloudflare, Surface, Text } from "@cloudflare/kumo"; import { ChatCircleDotsIcon, InfoIcon, MicrophoneIcon, MicrophoneSlashIcon, MoonIcon, PaperPlaneRightIcon, PhoneDisconnectIcon, PhoneIcon, SpinnerGapIcon, SunIcon, WaveformIcon, WifiHighIcon, WifiSlashIcon } from "@phosphor-icons/react"; import "./styles.css"; function getSessionId(): string { const key = "telnyx-phone-voice-agent-session-id"; let id = localStorage.getItem(key); if (!id) { id = crypto.randomUUID(); localStorage.setItem(key, id); } return id; } function ModeToggle() { const [mode, setMode] = useState( () => localStorage.getItem("theme") || "light" ); useEffect(() => { document.documentElement.setAttribute("data-mode", mode); document.documentElement.style.colorScheme = mode; localStorage.setItem("theme", mode); }, [mode]); return ( ) : ( )} {metrics ? ( LLM {metrics.llm_ms}ms · TTS {metrics.tts_ms}ms · first audio {metrics.first_audio_ms}ms · total {metrics.total_ms} ms ) : null} {error ? ( {error} ) : null}

Phone call transcript

{transcript.length === 0 && !interimTranscript ? ( Connect the bridge, call your Telnyx number, and speak to the agent over the phone. You can also send a text turn once connected. ) : null} {transcript.map((message, index) => (

{message.role === "user" ? "Caller" : "Assistant"} {message.text}

))} {interimTranscript ? (

Caller {interimTranscript}

) : null}

); } createRoot(document.getElementById("root")!).render();