import { useState, useEffect, useRef, useCallback } from "react"; import { useAgent } from "agents/react"; import { useAgentChat } from "@cloudflare/ai-chat/react"; import { isToolUIPart, getToolName, type UIMessage } from "ai"; import type { VoiceChatAgent, VoiceChatState } from "../agents/voice-chat"; import { Button, Badge, InputArea, Empty, Surface, Text } from "@cloudflare/kumo"; import { PaperPlaneRightIcon, StopIcon, ChatCircleDotsIcon, CircleIcon, CaretDownIcon, MicrophoneIcon, TrashIcon, StopCircleIcon, GearIcon, BrainIcon, SpeakerHighIcon, SpinnerIcon } from "@phosphor-icons/react"; import { Streamdown } from "streamdown"; import { code } from "@streamdown/code"; interface Voice { voiceId: string; name: string; } function float32ToInt16Base64(float32: Float32Array): string { const int16 = new Int16Array(float32.length); for (let i = 0; i < float32.length; i++) { int16[i] = Math.max( -32768, Math.min(32767, Math.round(float32[i] * 32767)) ); } const bytes = new Uint8Array(int16.buffer); let binary = ""; for (let i = 0; i < bytes.length; i++) { binary += String.fromCharCode(bytes[i]); } return btoa(binary); } function ReplayButton({ onReplay }: { onReplay: () => Promise }) { const [loading, setLoading] = useState(false); return ( {showVoices && voices.length > 0 && (

{voices.map((v) => ( ))}

)} {speaking && ( )} {/* Messages */}

{messages.length === 0 && ( } title="Voice Chat" contents={

{[ "Tell me a joke", "Explain quantum computing simply", "Write a haiku about the ocean" ].map((prompt) => ( ))}

} /> )} {messages.map((message: UIMessage, index: number) => { const isUser = message.role === "user"; const isLastAssistant = message.role === "assistant" && index === messages.length - 1; return (

{/* Tool parts */} {message.parts.filter(isToolUIPart).map((part) => { const toolName = getToolName(part); return (

{toolName} {part.state === "output-available" ? "Done" : "Running"}

{part.state === "output-available" && (

                            {JSON.stringify(part.output, null, 2)}

)}

); })} {/* Reasoning parts */} {message.parts .filter( (p) => p.type === "reasoning" && (p as { text?: string }).text?.trim() ) .map((part, i) => { const reasoning = part as { type: "reasoning"; text: string; state?: "streaming" | "done"; }; const isDone = reasoning.state === "done" || !isStreaming; return (

Reasoning {isDone ? ( Complete ) : ( Thinking... )}

                            {reasoning.text}

); })} {/* Text parts */} {message.parts .filter((p) => p.type === "text") .map((part, i) => { const text = (part as { text: string }).text; if (!text) return null; if (isUser) { return (

{text}

); } return (

{text}

{!isStreaming && text.length > 0 && ( { const uri = (await agent.call("speak", [ text ])) as string; playAudio(uri); }} /> )}

); })}

{/* Live transcript preview */} {recording && liveText && (

{liveText} |

)} {/* Input */}

{ e.preventDefault(); send(); }} className="max-w-3xl mx-auto px-5 py-4" >

); }