{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "agent-10", "title": "Agent 10: console with handoff", "author": "Ballmac ", "description": "An agent console: the conversation with each tool call as a step you can open to see what was asked and what came back, Stop while it works, Enter to send, and a clear Take over and Hand back so a person is never mistaken for the agent.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/skeleton.json", "https://ui.ballmac.com/r/state-view.json" ], "files": [ { "path": "registry/ballmac/components/blocks/agent-10/agent-10.tsx", "content": "// Ballmac UI: Agent 10. https://ui.ballmac.com/blocks/agent-10\n\"use client\"\n\nimport * as React from \"react\"\nimport { CircleAlert, Hand, Loader2, SendHorizontal, Square, Wrench } from \"lucide-react\"\n\nimport { Button } from \"@/components/ballmac/button\"\nimport { Skeleton } from \"@/components/ballmac/skeleton\"\nimport { frameProps, StateView, type StateProps } from \"@/components/ballmac/state-view\"\nimport { cn } from \"@/lib/utils\"\n\ntype Agent10Tool = { name: string; /** What it was asked, in words. */ input: string; /** What came back, in words. */ output?: string; status: \"running\" | \"done\" | \"failed\" }\ntype Agent10Message =\n | { id: string; role: \"user\"; text: string; at?: string }\n | { id: string; role: \"agent\"; text: string; at?: string; tools?: Agent10Tool[] }\n | { id: string; role: \"human\"; text: string; at?: string; name: string }\n\ntype Agent10Props = Omit, \"title\"> &\n StateProps & {\n messages?: Agent10Message[]\n title?: string\n /** True while the agent is working. Shows Stop in place of Send. */\n running?: boolean\n /** Whether a person has taken over. The agent stays silent until it is handed back. */\n humanActive?: boolean\n onSend?: (text: string) => void | Promise\n onStop?: () => void\n /** Called to take over from, or hand back to, the agent. */\n onHandoff?: (takeOver: boolean) => void | Promise\n }\n\nconst messages: Agent10Message[] = [\n { id: \"1\", role: \"user\", text: \"Why did my refund for order 4821 not arrive?\", at: \"10:02\" },\n {\n id: \"2\",\n role: \"agent\",\n text: \"The refund was issued on 14 October, but it was sent to a card that has since expired, so the bank returned it. I can re-issue it to the card on file, or to store credit instantly.\",\n at: \"10:02\",\n tools: [\n { name: \"lookup_order\", input: \"Order 4821\", output: \"Delivered 6 Oct, refund requested 12 Oct\", status: \"done\" },\n { name: \"check_refund\", input: \"Refund for order 4821\", output: \"Issued 14 Oct, returned by the bank (card expired)\", status: \"done\" },\n ],\n },\n { id: \"3\", role: \"user\", text: \"Store credit please. And can someone confirm it by email?\", at: \"10:03\" },\n]\n\nfunction Skel() {\n return (\n
\n \n \n \n
\n )\n}\n\nconst TOOL_LABEL = { running: \"Working\", done: \"Done\", failed: \"Failed\" } as const\n\n/**\n * An agent console: the conversation with each tool call shown as a step you can open, Stop while the agent works, and a clear way for a person to take over and hand back.\n * Who said what is written, not only coloured; a person's reply is marked so it is never mistaken for the agent; sending is refused with an empty message.\n */\nfunction Agent10({ messages: list = messages, title = \"Support agent\", running = false, humanActive = false, onSend, onStop, onHandoff, state = \"ready\", onRetry, emptyState, errorState, className, ...props }: Agent10Props) {\n const id = React.useId()\n const [text, setText] = React.useState(\"\")\n const [busy, setBusy] = React.useState(false)\n const [error, setError] = React.useState(null)\n const [human, setHuman] = React.useState(humanActive)\n const [local, setLocal] = React.useState([])\n const end = React.useRef(null)\n const view = state === \"ready\" && list.length === 0 && local.length === 0 ? \"empty\" : state\n const all = [...list, ...local]\n\n React.useEffect(() => { end.current?.scrollIntoView?.({ block: \"end\" }) }, [all.length])\n\n async function send(e: React.FormEvent) {\n e.preventDefault()\n const t = text.trim()\n if (!t) { setError(\"Write a message first.\"); return }\n setBusy(true)\n setError(null)\n try {\n await onSend?.(t)\n setLocal((l) => [...l, human ? { id: `l${l.length}`, role: \"human\", name: \"You\", text: t } : { id: `l${l.length}`, role: \"user\", text: t }])\n setText(\"\")\n } catch (err) {\n setError(err instanceof Error ? err.message : \"The message was not sent. It is still here.\")\n } finally {\n setBusy(false)\n }\n }\n async function handoff() {\n const next = !human\n setError(null)\n try {\n await onHandoff?.(next)\n setHuman(next)\n } catch (err) {\n setError(err instanceof Error ? err.message : \"The handoff did not go through.\")\n }\n }\n\n return (\n
\n
\n
\n

{title}

\n

{human ? \"A person is handling this. The agent is paused.\" : running ? \"The agent is working…\" : \"The agent is answering.\"}

\n
\n \n
\n\n } empty={{ title: \"No messages yet\", description: \"Start the conversation below.\", ...emptyState }} error={{ title: \"The conversation could not be loaded\", description: \"Nothing was sent. Check your connection and try again.\", ...errorState }}>\n
\n
\n
    \n {all.map((m) => (\n
  1. \n \n {m.role === \"user\" ? \"You\" : m.role === \"agent\" ? \"Agent\" : `${m.name} (a person)`}{m.at ? ` · ${m.at}` : \"\"}\n \n
    {m.text}
    \n {m.role === \"agent\" && m.tools?.length ? (\n
      \n {m.tools.map((t, i) => (\n
    • \n
      \n \n {t.status === \"running\" ? : t.status === \"failed\" ? : }\n {t.name}\n {TOOL_LABEL[t.status]}\n \n
      \n
      Asked:
      {t.input}
      \n {t.output &&
      Got:
      {t.output}
      }\n
      \n
      \n
      • \n ))}\n
    \n ) : null}\n
    2. \n ))}\n
\n
\n
\n\n
void send(e)} noValidate className=\"border-t p-3\">\n \n
\n