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 { CharacterAgent, CharacterState, VoicePreview } from "../agents/character"; import { Button, Badge, InputArea, Empty, Surface, Text } from "@cloudflare/kumo"; import { PaperPlaneRightIcon, StopIcon, UserCircleIcon, MagicWandIcon, PlayIcon, PauseIcon, CheckIcon, ArrowCounterClockwiseIcon, TrashIcon, SpinnerIcon, SpeakerHighIcon, GearIcon, BrainIcon, CaretDownIcon } from "@phosphor-icons/react"; import { Streamdown } from "streamdown"; import { code } from "@streamdown/code"; import { SpeakButton } from "../components/audio-player"; type DesignStep = | "idle" | "generating-prompt" | "generating-voices" | "previewing" | "saving" | "ready"; function VoicePreviewCard({ preview, selected, onSelect }: { preview: VoicePreview; selected: boolean; onSelect: () => void; }) { const [playing, setPlaying] = useState(false); const audioRef = useRef(null); const togglePlay = useCallback(() => { if (playing && audioRef.current) { audioRef.current.pause(); setPlaying(false); return; } const mimeType = preview.mediaType || "audio/mpeg"; const src = preview.audioBase64.startsWith("data:") ? preview.audioBase64 : `data:${mimeType};base64,${preview.audioBase64}`; const audio = new Audio(src); audioRef.current = audio; audio.onended = () => setPlaying(false); audio.play(); setPlaying(true); }, [playing, preview.audioBase64, preview.mediaType]); return (

{selected && ( )} Voice {preview.generatedVoiceId.slice(0, 6)}

); } type AgentHandle = ReturnType>; function DesignPhase({ agent, onComplete }: { agent: AgentHandle; onComplete: () => void; }) { const [personality, setPersonality] = useState(""); const [voiceDescription, setVoiceDescription] = useState(""); const [name, setName] = useState(""); const [step, setStep] = useState("idle"); const [systemPrompt, setSystemPrompt] = useState(""); const [previews, setPreviews] = useState([]); const [selectedPreview, setSelectedPreview] = useState(""); const generate = useCallback(async () => { if (!personality.trim() || !voiceDescription.trim()) return; setStep("generating-prompt"); try { const prompt = (await agent.call("generateSystemPrompt", [ personality ])) as string; setSystemPrompt(prompt); setStep("generating-voices"); const voicePreviews = (await agent.call("designVoice", [ voiceDescription ])) as VoicePreview[]; setPreviews(voicePreviews); if (voicePreviews.length > 0) { setSelectedPreview(voicePreviews[0].generatedVoiceId); } setStep("previewing"); } catch (e) { console.error("Design failed:", e); setStep("idle"); } }, [personality, voiceDescription, agent]); const save = useCallback(async () => { if (!selectedPreview || !name.trim()) return; setStep("saving"); try { await agent.call("saveCharacter", [ name, personality, systemPrompt, voiceDescription, selectedPreview ]); setStep("ready"); onComplete(); } catch (e) { console.error("Save failed:", e); setStep("previewing"); } }, [ selectedPreview, name, personality, systemPrompt, voiceDescription, agent, onComplete ]); const isGenerating = step === "generating-prompt" || step === "generating-voices"; return (

Design Your Character

Personality

Voice Description

{( [ { label: "Pirate Captain", personality: "A boisterous pirate captain who peppers every sentence with nautical metaphors and loves telling tall tales about treasure", voice: "A hearty, booming male voice with a rough edge and a hint of mischief" }, { label: "Noir Detective", personality: "A world-weary 1940s detective who narrates everything like a film noir monologue and is deeply cynical about human nature", voice: "A low, gravelly American voice with a slow, deliberate cadence" }, { label: "Fairy Guide", personality: "An enthusiastic woodland fairy who speaks in riddles, giggles often, and knows everything about mushrooms and moonlight", voice: "A light, airy, high-pitched voice with a musical, whimsical quality" }, { label: "Robot Butler", personality: "An overly polite robot butler who takes everything literally, apologizes constantly, and secretly wants to be a poet", voice: "A crisp, slightly monotone British voice with precise enunciation" } ] as const ).map((preset) => ( ))}

{/* System prompt preview */} {systemPrompt && ( Generated System Prompt

            {systemPrompt}

)} {/* Voice previews */} {previews.length > 0 && (step === "previewing" || step === "saving") && (

Pick a voice

{previews.map((preview) => ( setSelectedPreview(preview.generatedVoiceId)} /> ))}

Character Name

setName(e.target.value)} placeholder="Inspector Bramblewood" className="flex-1 px-3 py-2 text-sm rounded-lg border border-kumo-line bg-kumo-base text-kumo-default placeholder:text-kumo-inactive focus:outline-none focus:ring-1 focus:ring-kumo-accent" />

)} {step === "idle" && ( } title="Create a character" contents="Describe a personality and a voice. ElevenLabs will generate a custom voice, and Workers AI will craft the personality. Then chat with your creation!" /> )}

); } function ChatPhase({ agent }: { agent: AgentHandle }) { const [input, setInput] = useState(""); const messagesEndRef = useRef(null); const textareaRef = useRef(null); const character = agent.state?.character; const { messages, sendMessage, clearHistory, stop, status } = useAgentChat({ agent }); const isStreaming = status === "streaming" || status === "submitted"; useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }, [messages]); useEffect(() => { if (!isStreaming && textareaRef.current) textareaRef.current.focus(); }, [isStreaming]); const send = useCallback(() => { const text = input.trim(); if (!text || isStreaming) return; setInput(""); sendMessage({ role: "user", parts: [{ type: "text", text }] }); if (textareaRef.current) textareaRef.current.style.height = "auto"; }, [input, isStreaming, sendMessage]); const reset = useCallback(async () => { clearHistory(); await agent.call("resetCharacter", []); }, [agent, clearHistory]); return (

{/* Character banner */}

{character?.name ?? "Character"} Custom voice

{/* Messages */}

{messages.length === 0 && ( } title={`Chat with ${character?.name ?? "your character"}`} contents={

{[ "Tell me about yourself", "What do you think of modern technology?", "Tell me a story" ].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 && ( agent.call("speak", [text]) as Promise } /> )}

); })}

{/* Input */}

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

{ if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); } }} onInput={(e) => { const el = e.currentTarget; el.style.height = "auto"; el.style.height = `${el.scrollHeight}px`; }} placeholder={`Say something to ${character?.name ?? "your character"}...`} disabled={isStreaming} rows={1} className="flex-1 ring-0! focus:ring-0! shadow-none! bg-transparent! outline-none! resize-none max-h-40" /> {isStreaming ? (

); } export function CharacterTab() { const [connected, setConnected] = useState(false); const agent = useAgent({ agent: "CharacterAgent", onOpen: useCallback(() => setConnected(true), []), onClose: useCallback(() => setConnected(false), []) }); const phase = agent.state?.phase ?? "idle"; if (!connected) { return (

); } if (phase === "chatting" && agent.state?.character) { return ; } return ( { /* state drives the transition */ }} /> ); }