import { Badge, Button, Empty, InputArea, PoweredByCloudflare, Surface, Text } from "@cloudflare/kumo"; import { BookOpenIcon, CaretRightIcon, CheckCircleIcon, FloppyDiskIcon, MoonIcon, PaperPlaneRightIcon, PencilSimpleIcon, PlusIcon, StopCircleIcon, SunIcon, TrashIcon, XIcon } from "@phosphor-icons/react"; import { useAgent } from "agents/react"; import type { UIMessage } from "ai"; import { useCallback, useEffect, useRef, useState } from "react"; import type { Skill, SkillsAgent } from "./server"; type ToolPart = Extract & { toolCallId: string; toolName: string; state: string; input?: Record; output?: unknown; }; function isToolPart(part: UIMessage["parts"][number]): part is ToolPart { return part.type === "dynamic-tool" || part.type.startsWith("tool-"); } function ToolCard({ part }: { part: ToolPart }) { const [open, setOpen] = useState(false); const done = part.state === "output-available"; const label = [part.input?.action, part.input?.label, part.input?.key] .filter(Boolean) .join(" "); return ( {open && (

{part.input && (

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

)} {part.output != null && (

              {typeof part.output === "string"
                ? part.output
                : JSON.stringify(part.output, null, 2)}

)}

)} ); } type ConnectionStatus = "connecting" | "connected" | "disconnected"; function ConnectionIndicator({ status }: { status: ConnectionStatus }) { const dot = status === "connected" ? "bg-green-500" : status === "connecting" ? "bg-yellow-500" : "bg-red-500"; const text = status === "connected" ? "text-kumo-success" : status === "connecting" ? "text-kumo-warning" : "text-kumo-danger"; const label = status === "connected" ? "Connected" : status === "connecting" ? "Connecting..." : "Disconnected"; return (

{label}

); } 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 ( {editing ? (

{editing.isNew ? "New Skill" : `Edit: ${editing.key}`}

{editing.isNew && ( setEditing({ ...editing, key: v })} placeholder="skill-name" rows={1} /> )}

Description

setEditing({ ...editing, description: v })} placeholder="Short description..." rows={1} />

Content

setEditing({ ...editing, content: v })} placeholder="Write the skill instructions here..." rows={12} className="flex-1 font-mono" />

) : (

{skills.length === 0 && ( } title="No skills yet" description="Create a skill and the model can load it on demand." /> )} {skills.map((skill) => (

{skill.key}

{skill.description && (

{skill.description}

)}

))}

)} ); } // ── Main Chat ─────────────────────────────────────────────────────── function Chat() { const [connectionStatus, setConnectionStatus] = useState("connecting"); const [input, setInput] = useState(""); const [messages, setMessages] = useState([]); const [isLoading, setIsLoading] = useState(false); const messagesEndRef = useRef(null); const hasFetched = useRef(false); const abortRef = useRef<(() => void) | null>(null); const agent = useAgent({ agent: "SkillsAgent", name: "default", onOpen: useCallback(() => setConnectionStatus("connected"), []), onClose: useCallback(() => { setConnectionStatus("disconnected"); hasFetched.current = false; }, []) }); const isConnected = connectionStatus === "connected"; if (isConnected && !hasFetched.current) { hasFetched.current = true; agent .call("getMessages") .then(setMessages) .catch(console.error); } useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }, [messages]); const stop = useCallback(() => { abortRef.current?.(); abortRef.current = null; setIsLoading(false); }, []); const send = useCallback(async () => { const text = input.trim(); if (!text || isLoading) return; setInput(""); setIsLoading(true); const userMsg: UIMessage = { id: `user-${crypto.randomUUID()}`, role: "user", parts: [{ type: "text", text }] }; setMessages((prev) => [...prev, userMsg]); const streamId = `streaming-${crypto.randomUUID()}`; let stopped = false; abortRef.current = () => { stopped = true; }; try { await agent.call("chat", [text, userMsg.id], { onChunk: (chunk: unknown) => { if (stopped) return; const c = chunk as { type?: string; text?: string }; if (c.type === "text-delta" && c.text) { setMessages((prev) => { const existing = prev.find((m) => m.id === streamId); if (existing) { const oldText = existing.parts[0]?.type === "text" ? existing.parts[0].text : ""; return prev.map((m) => m.id === streamId ? { ...m, parts: [ { type: "text" as const, text: oldText + c.text } ] } : m ); } return [ ...prev, { id: streamId, role: "assistant" as const, parts: [{ type: "text" as const, text: c.text! }] } ]; }); } }, onDone: (final: unknown) => { if (stopped) return; const f = final as { message?: UIMessage }; if (f.message) { setMessages((prev) => prev.map((m) => (m.id === streamId ? f.message! : m)) ); } }, onError: (err: string) => { console.error("Stream error:", err); } }); } catch (err) { if (!stopped) console.error("Failed to send:", err); } finally { abortRef.current = null; setIsLoading(false); } }, [input, isLoading, agent]); return (

{/* Chat area */}

Session Skills

{messages.length} msgs

{messages.length === 0 && !isLoading && ( } title="Skills-powered chat" description="Create skills in the sidebar, then ask the agent to use them. It will load skills on demand via the get_catalog tool." /> )} {messages.map((message) => { if (message.role === "user") { return (

{message.parts .filter((p) => p.type === "text") .map((p) => (p.type === "text" ? p.text : "")) .join("")}

); } return (

{message.parts.map((part, i) => { if (part.type === "text" && part.text?.trim()) { return (

{part.text}

); } if (isToolPart(part)) { return (

); } return null; })}

); })} {isLoading && !messages.some((m) => m.id.startsWith("streaming-")) && (

)}

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

{ if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); } }} placeholder={ isConnected ? "Ask me to use a skill..." : "Connecting..." } disabled={!isConnected || isLoading} rows={2} className="flex-1 !ring-0 focus:!ring-0 !shadow-none !bg-transparent !outline-none" /> {isLoading ? (

{/* Skills sidebar */}

); } export default function App() { return ; }