import "./styles.css"; import { useAgent } from "agents/react"; import { useAgentChat } from "@cloudflare/ai-chat/react"; import { ArrowClockwiseIcon, ChatsIcon, InfoIcon, MoonIcon, PaperPlaneRightIcon, ProhibitIcon, SunIcon, TrashIcon } from "@phosphor-icons/react"; import { Badge, Button, PoweredByCloudflare, Surface, Text } from "@cloudflare/kumo"; import { createRoot } from "react-dom/client"; import { useCallback, useEffect, useMemo, useState } from "react"; import type { UIMessage } from "ai"; import type { AdminConversation, AdminReplyJob, AdminSetupInfo, TelegramWebhookSetupResult } from "./index"; type ConnectionStatus = "connecting" | "connected" | "disconnected"; const TERMINAL_REPLY_STATUSES = new Set([ "completed", "aborted", "interrupted", "error" ]); 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 ( ); } function SetupCard({ setup }: { setup: AdminSetupInfo | null }) { const [isSettingWebhook, setIsSettingWebhook] = useState(false); const [webhookResult, setWebhookResult] = useState(null); const [webhookError, setWebhookError] = useState(null); const webhookUrl = setup ? `${window.location.origin}${setup.webhookPath}` : `${window.location.origin}/webhooks/telegram`; const isHttpsOrigin = window.location.protocol === "https:"; async function setTelegramWebhook() { setIsSettingWebhook(true); setWebhookResult(null); setWebhookError(null); try { const response = await fetch("/setup/telegram-webhook", { method: "POST" }); const result = (await response.json()) as | TelegramWebhookSetupResult | { ok: false; error?: string }; if (!response.ok || !result.ok) { throw new Error( "error" in result && result.error ? result.error : "Failed to set Telegram webhook." ); } setWebhookResult( result.alreadyConfigured ? "Telegram already points at this tunnel." : result.description ); } catch (error) { setWebhookError(error instanceof Error ? error.message : String(error)); } finally { setIsSettingWebhook(false); } } return (

Messenger setup Telegram is the current adapter, but this dashboard is organized around Chat SDK threads, Think conversations, and managed reply jobs.

Bot token: {setup?.telegramConfigured ? "configured" : "missing"}
Bot username: {setup?.telegramUserName ?? "-"}
Webhook path: {setup?.webhookPath ?? "/webhooks/telegram"}

Webhook URL

{webhookUrl}

{!isHttpsOrigin && ( Telegram requires an HTTPS webhook. Start `npm start`, open the printed `trycloudflare.com` URL, then click this button there. )}

{webhookResult && ( {webhookResult} )} {webhookError && ( {webhookError} )}

); } function ConversationList({ conversations, selected, onSelect }: { conversations: AdminConversation[]; selected: AdminConversation | null; onSelect: (conversation: AdminConversation) => void; }) { return (

Conversations

{conversations.length === 0 ? ( No AI-routed messenger conversations yet. DM the bot or mention it in a group to create one. ) : ( conversations.map((conversation) => { const active = selected?.threadId === conversation.threadId; return ( ); }) )}

); } function ReplyJobs({ jobs, onCancel }: { jobs: AdminReplyJob[]; onCancel: (fiberId: string) => Promise; }) { return (

Managed reply jobs {jobs.length}

{jobs.length === 0 ? ( No retained AI reply jobs for this conversation yet. ) : ( jobs.map((job) => { const terminal = TERMINAL_REPLY_STATUSES.has(job.status); return (

{replyStatusBadge(job)} {job.fiberId}

Created {formatTime(job.createdAt)} · Settled{" "} {formatTime(job.settledAt)}

{!terminal && ( )}

{job.error && (

{job.error}

)}

); }) )}

); } function ThinkPane({ conversation, onReset }: { conversation: AdminConversation; onReset: () => Promise; }) { const [connectionStatus, setConnectionStatus] = useState("connecting"); const [input, setInput] = useState(""); const agent = useAgent({ agent: "ChatIngressAgent", name: "default", sub: [ { agent: "ConversationAgent", name: conversation.conversationName } ], onOpen: useCallback(() => setConnectionStatus("connected"), []), onClose: useCallback(() => setConnectionStatus("disconnected"), []), onError: useCallback(() => setConnectionStatus("disconnected"), []) }); const { messages, sendMessage, status, isStreaming, stop, clearHistory } = useAgentChat({ agent, getInitialMessages: null }); async function submit() { const text = input.trim(); if (!text) return; setInput(""); await sendMessage({ text }); } async function reset() { clearHistory(); await onReset(); } return (

Think conversation Internal admin-only chat for `{conversation.conversationName}`. Messages sent here do not post to the messenger thread.

{isStreaming && ( )}

{messages.length === 0 ? ( No Think messages yet. Messenger-routed AI replies and internal admin prompts will appear here. ) : ( messages.map((message) => { const text = messageText(message); return (

{message.role} id: {message.id.slice(0, 12)} {text.length} chars

); }) )}

); } function App() { const [connectionStatus, setConnectionStatus] = useState("connecting"); const [setup, setSetup] = useState(null); const [conversations, setConversations] = useState([]); const [selectedThreadId, setSelectedThreadId] = useState(null); const [replyJobs, setReplyJobs] = useState([]); const [error, setError] = useState(null); const parent = useAgent({ agent: "ChatIngressAgent", name: "default", onOpen: useCallback(() => setConnectionStatus("connected"), []), onClose: useCallback(() => setConnectionStatus("disconnected"), []), onError: useCallback(() => setConnectionStatus("disconnected"), []) }); const selectedConversation = useMemo( () => conversations.find( (conversation) => conversation.threadId === selectedThreadId ) ?? conversations[0] ?? null, [conversations, selectedThreadId] ); const refresh = useCallback(async () => { try { const [nextSetup, nextConversations] = await Promise.all([ parent.call("getSetupInfo", []) as Promise, parent.call("listConversations", []) as Promise ]); setSetup(nextSetup); setConversations(nextConversations); const selected = selectedThreadId ?? nextConversations[0]?.threadId; setSelectedThreadId(selected ?? null); const nextJobs = selected ? ((await parent.call("listReplyJobs", [selected])) as AdminReplyJob[]) : []; setReplyJobs(nextJobs); setError(null); } catch (err) { setError(err instanceof Error ? err.message : String(err)); } }, [parent, selectedThreadId]); useEffect(() => { void refresh(); const timer = window.setInterval(() => { void refresh(); }, 2_000); return () => window.clearInterval(timer); }, [refresh]); async function resetSelectedConversation() { if (!selectedConversation) return; await parent.call("resetConversationByThread", [ selectedConversation.threadId ]); await refresh(); } async function cancelReplyJob(fiberId: string) { await parent.call("cancelReplyJob", [fiberId]); await refresh(); } return (

Chat SDK Messenger Admin Inspect Chat SDK threads, Think conversations, and managed AI reply jobs for the messenger example.

{error && ( {error} )}

{ setSelectedThreadId(conversation.threadId); }} />

{selectedConversation ? ( ) : ( Select a conversation after the bot receives an AI-routed message. )}

); } const root = document.getElementById("root"); if (!root) { throw new Error("Root element not found"); } createRoot(root).render();