/** * AgentCard — a running agent rendered as a `Card` wrapping the `Message` * anatomy: a header row (agent Avatar + name on the left, `` on the * right) over the agent's reasoning, tool calls, and message text. Composed * entirely from the shared primitives — `Card`, `Avatar`, `Status`, * `Reasoning`, `ToolCall`, `Markdown` — so it reads like a `Message` inside a * card (mirrors Studio's agent/message anatomy). * * @module react/components/chat/agent-card */ import * as React from "react"; import type { AgentMessage, AgentStatus, ToolCall } from "../../../agent/index.js"; import { type StatusColor } from "../ui/status.js"; /** Props accepted by agent card. */ export interface AgentCardProps { /** Agent display name shown in the header (default "Agent"). */ name?: string; /** Agent avatar image; falls back to an initial. */ avatarUrl?: string; /** Agent messages — rendered as Markdown, mirroring `Message.Content`. */ messages?: AgentMessage[]; /** Tool calls — rendered through the shared `ToolCall` card. */ toolCalls?: ToolCall[]; /** Agent status — drives the header `Status` dot + label. */ status: AgentStatus; /** Thinking/reasoning text — rendered through the `Reasoning` component. */ thinking?: string; /** Additional class name for the card. */ className?: string; /** Compose your own card; when omitted, the default anatomy is rendered. */ children?: React.ReactNode; /** React 19: ref is a regular prop. */ ref?: React.Ref; } /** Per-card state shared with `AgentCard.*` sub-parts. */ export interface AgentCardContextValue { name: string; avatarUrl?: string; messages?: AgentMessage[]; toolCalls: ToolCall[]; status: AgentStatus; thinking?: string; presentation: { color: StatusColor; label: string; pulse: boolean; }; } /** * Read the enclosing ``'s state (name, avatar, messages, tool calls, * status, thinking text, and the derived status presentation) so a custom * `AgentCard.*` sub-part can render it. Throws when used outside an `AgentCard`. * * @example * ```tsx * function CustomHeader() { * const { name, presentation } = useAgentCard(); * return

{name}: {presentation.label}

; * } * ``` */ export declare const useAgentCard: () => AgentCardContextValue; /** * `AgentCard.Root` — context provider + the `Card` wrapper. No children renders * the default anatomy (`Header` + `Reasoning` + `Tools` + `Body`); pass children * to recompose. */ declare function AgentCardRoot({ name, avatarUrl, messages, toolCalls, status, thinking, className, children, ref, }: AgentCardProps): React.ReactElement; declare namespace AgentCardRoot { var displayName: string; } /** * The header row: Avatar + name (left), Status (right). Mirrors * `ChatMessageHeader` / `Message.Header`. */ declare function AgentCardHeader({ className, ref, ...props }: React.HTMLAttributes & { ref?: React.Ref; }): React.JSX.Element; declare namespace AgentCardHeader { var displayName: string; } /** The reasoning block. Renders only when `thinking` text is present. */ declare function AgentCardReasoning({ className, ref }: { className?: string; ref?: React.Ref; }): React.JSX.Element | null; declare namespace AgentCardReasoning { var displayName: string; } /** The tool-call list. Renders one `ToolCall` card per entry. */ declare function AgentCardTools({ className, ref, ...props }: React.HTMLAttributes & { ref?: React.Ref; }): React.JSX.Element | null; declare namespace AgentCardTools { var displayName: string; } /** The message body — each message's text rendered as `Markdown`. */ declare function AgentCardBody({ className, ref, ...props }: React.HTMLAttributes & { ref?: React.Ref; }): React.JSX.Element | null; declare namespace AgentCardBody { var displayName: string; } /** * AgentCard — render `` for the default card, or compose * `AgentCard.Header` / `Reasoning` / `Tools` / `Body` for a custom layout. * Mirrors the `ToolCall` compound: render it, or compose it. */ export declare const AgentCard: typeof AgentCardRoot & { Root: typeof AgentCardRoot; Header: typeof AgentCardHeader; Reasoning: typeof AgentCardReasoning; Tools: typeof AgentCardTools; Body: typeof AgentCardBody; }; export {}; //# sourceMappingURL=agent-card.d.ts.map