import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useAgent } from "agents/react"; import { useAgentChat } from "@cloudflare/ai-chat/react"; import { getToolName, isToolUIPart, type UIMessage } from "ai"; import { Badge, Button, InputArea, Surface, Text, PoweredByCloudflare } from "@cloudflare/kumo"; import { PaperPlaneRightIcon, PlusIcon, TrashIcon, PencilIcon, MoonIcon, SunIcon, ChatCircleIcon, InfoIcon, BrainIcon, GearIcon, XCircleIcon } from "@phosphor-icons/react"; import type { ChatSummary, InboxState } from "./server"; const DEMO_USER = "demo-user"; // ── Small UI helpers ─────────────────────────────────────────────── function ConnectionDot({ status }: { status: "connecting" | "connected" | "disconnected"; }) { const dot = status === "connected" ? "bg-green-500" : status === "connecting" ? "bg-yellow-500" : "bg-red-500"; return ; } 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 ( ); } // ── Main app ─────────────────────────────────────────────────────── export default function App() { // Single connection to the user's Inbox. Drives the sidebar state // + the memory editor via @callable. const inbox = useAgent({ agent: "inbox", name: DEMO_USER }); const chats: ChatSummary[] = useMemo( () => inbox.state?.chats ?? [], [inbox.state] ); const [activeId, setActiveId] = useState(null); // When the sidebar updates, auto-select the most recent chat if // nothing is active or the active one was deleted. useEffect(() => { if (chats.length === 0) { if (activeId !== null) setActiveId(null); return; } if (!activeId || !chats.some((c) => c.id === activeId)) { setActiveId(chats[0].id); } }, [chats, activeId]); const createChat = useCallback(async () => { const created = (await inbox.call("createChat")) as ChatSummary; setActiveId(created.id); }, [inbox]); const deleteChat = useCallback( async (id: string) => { await inbox.call("deleteChat", [id]); if (activeId === id) setActiveId(null); }, [inbox, activeId] ); const renameChat = useCallback( async (id: string) => { const title = window.prompt("New chat title"); if (!title) return; await inbox.call("renameChat", [id, title]); }, [inbox] ); // ── Shared memory editor ──────────────────────────────────────── const [memory, setMemory] = useState(""); const [memoryLoaded, setMemoryLoaded] = useState(false); useEffect(() => { let cancelled = false; (async () => { const current = (await inbox.call("getSharedMemory", ["memory"])) as | string | null; if (!cancelled) { setMemory(current ?? ""); setMemoryLoaded(true); } })(); return () => { cancelled = true; }; }, [inbox]); const saveMemory = useCallback(async () => { await inbox.call("setSharedMemory", ["memory", memory]); }, [inbox, memory]); const activeChat = useMemo( () => chats.find((c) => c.id === activeId), [chats, activeId] ); return (

{/* ── Header ────────────────────────────────────────────── */}

Multi AI Chat

{/* ── Explainer ─────────────────────────────────────────── */}

Multi-session AI chat One Inbox Durable Object owns the list of chats + shared per-user memory. Each chat in the sidebar is its own{" "} AIChatAgent Durable Object. Memory you save below is injected into every chat's system prompt.

{/* ── Main 2-pane layout ───────────────────────────────── */}

{/* Sidebar */}

Chats

{chats.length === 0 ? (

No chats yet. Click New to start one.

) : ( chats.map((c) => (

)) )}

{/* Shared memory editor */}

Shared memory

setMemory(e.target.value)} placeholder={ memoryLoaded ? "Facts to remember across chats…" : "Loading…" } rows={3} className="text-xs" />

{/* Active chat */}

{activeId && activeChat ? (

{activeChat.title}

) : (

Create a chat to get started.

)}

); }