import { useState, useEffect, useRef, useCallback } from "react"; import { Button, Badge, InputArea, Empty, Surface, Text, PoweredByCloudflare } from "@cloudflare/kumo"; import { TrashIcon, ChatCircleDotsIcon, CaretRightIcon, CheckCircleIcon, StackIcon, MoonIcon, SunIcon, PaperPlaneRightIcon, MagnifyingGlassIcon, EyeIcon, EyeSlashIcon } from "@phosphor-icons/react"; import { useAgent } from "agents/react"; import type { ChatAgent } from "./server"; import type { UIMessage } from "ai"; 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] .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 ( {systemPrompt !== null && (

System Prompt

              {systemPrompt}

)}

{messages.length === 0 && !isLoading && ( } title="Start a conversation" description="Messages persist in Postgres via Hyperdrive. The agent saves facts to memory and a searchable knowledge base. Try clearing the chat — memory survives." /> )} {messages.map((message) => { if (message.role === "user") { return (

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

); } const isCompaction = message.id.startsWith("compaction_"); return (

{isCompaction && (

Compacted Summary

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

{part.text}

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

); } return null; })}

); })} {isLoading && (

)}

{/* Search bar */}

setSearchQuery(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") doSearch(); }} placeholder="FULLTEXT search across messages..." className="flex-1 text-sm bg-transparent outline-none text-kumo-default placeholder:text-kumo-subtle" /> {searchResults && ( )}

{searchResults && (

{searchResults.length === 0 ? (

No results

) : ( searchResults.map((r) => (

{r.role}: {" "} {r.content.slice(0, 120)}

)) )}

)}

{/* Chat input */}

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