veryfront 0.0.75 → 0.0.78

package/esm/src/react/components/ProviderComponent.js

@@ -0,0 +1,38 @@
+import { useMemo, useRef } from "react";
+import { mdxRenderer } from "../../transforms/mdx/index.js";
+import { rendererLogger as logger } from "../../utils/index.js";
+function useStableFrontmatter(frontmatter) {
+    const ref = useRef(frontmatter);
+    const serialized = JSON.stringify(frontmatter);
+    const prevSerialized = useRef(serialized);
+    if (prevSerialized.current !== serialized) {
+        ref.current = frontmatter;
+        prevSerialized.current = serialized;
+    }
+    return ref.current;
+}
+export function ProviderComponent({ mdxBundle, children, components = {}, }) {
+    const stableFrontmatter = useStableFrontmatter(mdxBundle.frontmatter);
+    const element = useMemo(() => {
+        try {
+            return mdxRenderer.render(mdxBundle.compiledCode, {
+                components,
+                frontmatter: stableFrontmatter,
+                globals: mdxBundle.globals,
+                extractLayout: true,
+                children,
+            });
+        }
+        catch (error) {
+            logger.error("[ProviderComponent] Render failed:", error);
+            return null;
+        }
+    }, [
+        mdxBundle.compiledCode,
+        stableFrontmatter,
+        components,
+        mdxBundle.globals,
+        children,
+    ]);
+    return element ?? React.createElement(React.Fragment, null, children);
+}

package/esm/src/react/components/ai/agent-card.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import type { AgentStatus, Message, ToolCall } from "../../../agent/index.js";
+import { type AgentTheme } from "./theme.js";
+export interface AgentCardProps {
+    /** Agent messages */
+    messages?: Message[];
+    /** Tool calls */
+    toolCalls?: ToolCall[];
+    /** Agent status */
+    status: AgentStatus;
+    /** Thinking/reasoning text */
+    thinking?: string;
+    /** Additional class name */
+    className?: string;
+    /** Theme customization */
+    theme?: Partial<AgentTheme>;
+    /** Custom tool renderer */
+    renderTool?: (toolCall: ToolCall) => React.ReactNode;
+}
+export declare const AgentCard: any;
+//# sourceMappingURL=agent-card.d.ts.map

package/esm/src/react/components/ai/agent-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent-card.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ai/agent-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9E,OAAO,EAAE,KAAK,UAAU,EAAsC,MAAM,YAAY,CAAC;AAEjF,MAAM,WAAW,cAAc;IAC7B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IAErB,iBAAiB;IACjB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IAEvB,mBAAmB;IACnB,MAAM,EAAE,WAAW,CAAC;IAEpB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAE5B,2BAA2B;IAC3B,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,KAAK,CAAC,SAAS,CAAC;CACtD;AAED,eAAO,MAAM,SAAS,KAwFrB,CAAC"}

package/esm/src/react/components/ai/agent-card.js

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { AgentContainer, AgentStatus as AgentStatusPrimitive, ThinkingIndicator, ToolInvocation, ToolList, ToolResult, } from "../../primitives/index.js";
+import { cn, defaultAgentTheme, mergeThemes } from "./theme.js";
+export const AgentCard = React.forwardRef(({ messages, toolCalls = [], status, thinking, className, theme: userTheme, renderTool, }, ref) => {
+    const theme = mergeThemes(defaultAgentTheme, userTheme);
+    const toolRenderer = renderTool ??
+        ((tool) => (React.createElement(ToolInvocation, { name: tool.name, args: tool.args, status: tool.status, className: theme.tool },
+            tool.result !== undefined && (React.createElement(ToolResult, { result: tool.result, className: theme.toolResult })),
+            tool.error && (React.createElement("div", { className: "mt-2 p-3 bg-red-50 dark:bg-red-900/20 text-red-900 dark:text-red-100 rounded-xl text-sm border border-red-200 dark:border-red-800" },
+                "Error: ",
+                tool.error)))));
+    return (React.createElement(AgentContainer, { ref: ref, className: cn(theme.container, className) },
+        React.createElement(AgentStatusPrimitive, { status: status, className: cn(theme.status, getStatusColor(status)) }),
+        thinking && (React.createElement(ThinkingIndicator, { className: theme.thinking },
+            React.createElement("span", { className: "font-semibold" }, "Thinking:"),
+            thinking)),
+        toolCalls.length > 0 && (React.createElement("div", { className: "space-y-3" },
+            React.createElement("h3", { className: "text-sm font-semibold text-neutral-700 dark:text-neutral-300" }, "Tool Calls"),
+            React.createElement(ToolList, { toolCalls: toolCalls, className: "space-y-3", renderTool: toolRenderer }))),
+        messages?.length
+            ? (React.createElement("div", { className: "space-y-3" },
+                React.createElement("h3", { className: "text-sm font-semibold text-neutral-700 dark:text-neutral-300" }, "Messages"),
+                React.createElement("div", { className: "space-y-2 max-h-96 overflow-y-auto" }, messages.map((msg) => (React.createElement("div", { key: msg.id, className: "text-sm p-3 rounded-xl bg-neutral-50 dark:bg-neutral-800" },
+                    React.createElement("span", { className: "font-semibold capitalize text-neutral-900 dark:text-neutral-100" },
+                        msg.role,
+                        ":"),
+                    React.createElement("span", { className: "text-neutral-600 dark:text-neutral-400 ml-1" },
+                        msg.content.substring(0, 200),
+                        "...")))))))
+            : null));
+});
+AgentCard.displayName = "AgentCard";
+function getStatusColor(status) {
+    switch (status) {
+        case "idle":
+            return "bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300";
+        case "thinking":
+            return "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300";
+        case "tool_execution":
+            return "bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300";
+        case "streaming":
+            return "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300";
+        case "completed":
+            return "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300";
+        case "error":
+            return "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300";
+        default:
+            return "bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300";
+    }
+}

package/esm/src/react/components/ai/chat/components/animations.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+export declare function Shimmer({ children }: {
+    children: React.ReactNode;
+}): React.ReactElement;
+export declare function Loader({ className, size, }: {
+    className?: string;
+    size?: number;
+}): React.ReactElement;
+//# sourceMappingURL=animations.d.ts.map

package/esm/src/react/components/ai/chat/components/animations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animations.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/ai/chat/components/animations.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CAMvF;AAED,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,IAAS,GACV,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,KAAK,CAAC,YAAY,CAerB"}

package/esm/src/react/components/ai/chat/components/animations.js

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { cn } from "../../theme.js";
+export function Shimmer({ children }) {
+    return (React.createElement("span", { className: "relative inline-block overflow-hidden" },
+        React.createElement("span", { className: "animate-pulse" }, children)));
+}
+export function Loader({ className, size = 16, }) {
+    const dotSize = size / 4;
+    const delays = ["0ms", "150ms", "300ms"];
+    return (React.createElement("div", { className: cn("flex items-center gap-1", className) }, delays.map((animationDelay) => (React.createElement("span", { key: animationDelay, className: "animate-bounce rounded-full bg-muted-foreground", style: { width: dotSize, height: dotSize, animationDelay } })))));
+}

package/esm/src/react/components/ai/chat/components/empty-state.d.ts

@@ -0,0 +1,33 @@
+/****
+ * Empty State Components
+ * @module ai/react/components/chat/components/empty-state
+ */
+import * as React from "react";
+export interface SuggestionProps {
+    suggestion: string;
+    onClick?: (suggestion: string) => void;
+    className?: string;
+    icon?: React.ReactNode;
+}
+export declare function Suggestion({ suggestion, onClick, className, icon, }: SuggestionProps): React.ReactElement;
+export interface SuggestionsProps {
+    children: React.ReactNode;
+    className?: string;
+    layout?: "grid" | "horizontal";
+}
+export declare function Suggestions({ children, className, layout, }: SuggestionsProps): React.ReactElement;
+export interface ConversationEmptyStateProps {
+    icon?: React.ReactNode;
+    title?: string;
+    description?: string;
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare function ConversationEmptyState({ icon, title, description, children, className, }: ConversationEmptyStateProps): React.ReactElement;
+export interface ConversationScrollButtonProps {
+    onClick?: () => void;
+    visible?: boolean;
+    className?: string;
+}
+export declare function ConversationScrollButton({ onClick, visible, className, }: ConversationScrollButtonProps): React.ReactElement | null;
+//# sourceMappingURL=empty-state.d.ts.map

package/esm/src/react/components/ai/chat/components/empty-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/ai/chat/components/empty-state.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,wBAAgB,UAAU,CAAC,EACzB,UAAU,EACV,OAAO,EACP,SAAS,EACT,IAAI,GACL,EAAE,eAAe,GAAG,KAAK,CAAC,YAAY,CAoBtC;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;CAChC;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,MAAe,GAChB,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,CAMvC;AAED,MAAM,WAAW,2BAA2B;IAC1C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,KAA+B,EAC/B,WAAW,EACX,QAAQ,EACR,SAAS,GACV,EAAE,2BAA2B,GAAG,KAAK,CAAC,YAAY,CAWlD;AAED,MAAM,WAAW,6BAA6B;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,wBAAwB,CAAC,EACvC,OAAO,EACP,OAAc,EACd,SAAS,GACV,EAAE,6BAA6B,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAe3D"}

package/esm/src/react/components/ai/chat/components/empty-state.js

@@ -0,0 +1,35 @@
+/****
+ * Empty State Components
+ * @module ai/react/components/chat/components/empty-state
+ */
+import * as React from "react";
+import { cn } from "../../theme.js";
+import { ArrowDownIcon } from "../../icons/index.js";
+export function Suggestion({ suggestion, onClick, className, icon, }) {
+    return (React.createElement("button", { type: "button", onClick: () => onClick?.(suggestion), className: cn("group flex items-start gap-3 rounded-xl border border-border bg-background p-4 text-left text-sm text-foreground transition-all hover:bg-muted hover:border-muted-foreground/20", className) },
+        icon
+            ? (React.createElement("span", { className: "shrink-0 text-muted-foreground transition-colors group-hover:text-foreground" }, icon))
+            : null,
+        React.createElement("span", { className: "line-clamp-2" }, suggestion)));
+}
+export function Suggestions({ children, className, layout = "grid", }) {
+    const containerClassName = layout === "horizontal"
+        ? "flex gap-2 overflow-x-auto pb-2 scrollbar-hide"
+        : "grid grid-cols-2 gap-3 max-w-2xl mx-auto";
+    return React.createElement("div", { className: cn(containerClassName, className) }, children);
+}
+export function ConversationEmptyState({ icon, title = "What can I help with?", description, children, className, }) {
+    return (React.createElement("div", { className: cn("flex flex-col items-center justify-center text-center", className) },
+        icon ? React.createElement("div", { className: "mb-4 text-muted-foreground" }, icon) : null,
+        React.createElement("h1", { className: "text-3xl font-semibold text-foreground" }, title),
+        description
+            ? React.createElement("p", { className: "mt-2 max-w-md text-base text-muted-foreground" }, description)
+            : null,
+        children));
+}
+export function ConversationScrollButton({ onClick, visible = true, className, }) {
+    if (!visible)
+        return null;
+    return (React.createElement("button", { type: "button", onClick: onClick, className: cn("absolute bottom-4 left-1/2 -translate-x-1/2 rounded-full border border-border bg-background p-2 shadow-lg transition-all hover:bg-muted", className) },
+        React.createElement(ArrowDownIcon, { className: "size-4" })));
+}

package/esm/src/react/components/ai/chat/components/message-actions.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export interface MessageActionsProps {
+    content: string;
+    className?: string;
+}
+export declare function MessageActions({ content, className, }: MessageActionsProps): React.ReactElement;
+//# sourceMappingURL=message-actions.d.ts.map

package/esm/src/react/components/ai/chat/components/message-actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-actions.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/ai/chat/components/message-actions.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,SAAS,GACV,EAAE,mBAAmB,GAAG,KAAK,CAAC,YAAY,CAoD1C"}

package/esm/src/react/components/ai/chat/components/message-actions.js

@@ -0,0 +1,38 @@
+import * as dntShim from "../../../../../../_dnt.shims.js";
+import * as React from "react";
+import { cn } from "../../theme.js";
+import { CheckIcon, CopyIcon } from "../../icons/index.js";
+export function MessageActions({ content, className, }) {
+    const [copied, setCopied] = React.useState(false);
+    const setCopiedWithTimeout = React.useCallback(() => {
+        setCopied(true);
+        dntShim.setTimeout(() => setCopied(false), 2000);
+    }, []);
+    const fallbackCopy = React.useCallback(() => {
+        const textarea = document.createElement("textarea");
+        textarea.value = content;
+        document.body.appendChild(textarea);
+        textarea.select();
+        document.execCommand("copy");
+        document.body.removeChild(textarea);
+    }, [content]);
+    const handleCopy = React.useCallback(async () => {
+        try {
+            await navigator.clipboard.writeText(content);
+            setCopiedWithTimeout();
+        }
+        catch {
+            // Fallback for older browsers
+            fallbackCopy();
+            setCopiedWithTimeout();
+        }
+    }, [content, fallbackCopy, setCopiedWithTimeout]);
+    return (React.createElement("div", { className: cn("flex items-center gap-1 mt-2", className) },
+        React.createElement("button", { type: "button", onClick: handleCopy, className: "inline-flex items-center gap-1 px-2 py-1 text-xs text-muted-foreground hover:text-foreground hover:bg-muted rounded transition-colors", title: copied ? "Copied!" : "Copy to clipboard" }, copied
+            ? (React.createElement(React.Fragment, null,
+                React.createElement(CheckIcon, { className: "size-3" }),
+                React.createElement("span", null, "Copied")))
+            : (React.createElement(React.Fragment, null,
+                React.createElement(CopyIcon, { className: "size-3" }),
+                React.createElement("span", null, "Copy"))))));
+}

package/esm/src/react/components/ai/chat/components/reasoning.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+type ReasoningCardProps = {
+    text: string;
+    isStreaming?: boolean;
+};
+export declare function ReasoningCard({ text, isStreaming, }: ReasoningCardProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=reasoning.d.ts.map

package/esm/src/react/components/ai/chat/components/reasoning.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reasoning.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/ai/chat/components/reasoning.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,WAAmB,GACpB,EAAE,kBAAkB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA+BxC"}

package/esm/src/react/components/ai/chat/components/reasoning.js

@@ -0,0 +1,22 @@
+import * as dntShim from "../../../../../../_dnt.shims.js";
+import * as React from "react";
+import { cn } from "../../theme.js";
+import { Markdown } from "../../markdown.js";
+import { BrainIcon, ChevronDownIcon } from "../../icons/index.js";
+import { Shimmer } from "./animations.js";
+export function ReasoningCard({ text, isStreaming = false, }) {
+    const [isOpen, setIsOpen] = React.useState(true);
+    React.useEffect(() => {
+        if (isStreaming || !isOpen)
+            return;
+        const timer = dntShim.setTimeout(() => setIsOpen(false), 1000);
+        return () => clearTimeout(timer);
+    }, [isStreaming, isOpen]);
+    return (React.createElement("div", { className: "not-prose mb-4" },
+        React.createElement("button", { type: "button", onClick: () => setIsOpen((open) => !open), className: "flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground" },
+            React.createElement(BrainIcon, { className: "size-4" }),
+            isStreaming ? React.createElement(Shimmer, null, "Thinking...") : React.createElement("span", null, "Thought process"),
+            React.createElement(ChevronDownIcon, { className: cn("size-4 transition-transform", isOpen && "rotate-180") })),
+        isOpen && (React.createElement("div", { className: "mt-4 text-sm text-muted-foreground border-l-2 border-muted pl-4 ml-2" },
+            React.createElement(Markdown, { className: "text-sm" }, text)))));
+}

package/esm/src/react/components/ai/chat/components/tool-ui.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Tool UI Components
+ * @module ai/react/components/chat/components/tool-ui
+ */
+import * as React from "react";
+import type { DynamicToolUIPart, ToolUIPart } from "../../../../../agent/react/index.js";
+/** Tool call status badge component (AI Elements style) */
+export declare function ToolStatusBadge({ state }: {
+    state: string;
+}): React.JSX.Element;
+/**
+ * Tool call card component - renders tool invocations with parameters and results
+ * Styled to match AI Elements (https://ai-sdk.dev/elements)
+ */
+export declare function ToolCallCard({ tool, }: {
+    tool: ToolUIPart | DynamicToolUIPart;
+}): React.JSX.Element;
+//# sourceMappingURL=tool-ui.d.ts.map

package/esm/src/react/components/ai/chat/components/tool-ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-ui.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/ai/chat/components/tool-ui.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AA2BzF,2DAA2D;AAC3D,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAS/E;AAyFD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAI,GACL,EAAE;IACD,IAAI,EAAE,UAAU,GAAG,iBAAiB,CAAC;CACtC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA+DpB"}

package/esm/src/react/components/ai/chat/components/tool-ui.js

@@ -0,0 +1,109 @@
+/**
+ * Tool UI Components
+ * @module ai/react/components/chat/components/tool-ui
+ */
+import * as React from "react";
+import { cn } from "../../theme.js";
+import { CheckCircleIcon, ChevronDownIcon, CircleIcon, ClockIcon, WrenchIcon, XCircleIcon, } from "../../icons/index.js";
+/** Tool status configuration mapping state to label and icon */
+const TOOL_STATUS_CONFIG = {
+    "input-streaming": { label: "Pending", icon: React.createElement(CircleIcon, { className: "size-3.5" }) },
+    "input-available": { label: "Running", icon: React.createElement(ClockIcon, { className: "size-3.5 animate-pulse" }) },
+    "approval-requested": {
+        label: "Awaiting Approval",
+        icon: React.createElement(ClockIcon, { className: "size-3.5 text-yellow-600" }),
+    },
+    "approval-responded": {
+        label: "Responded",
+        icon: React.createElement(CheckCircleIcon, { className: "size-3.5 text-blue-600" }),
+    },
+    "output-available": {
+        label: "Completed",
+        icon: React.createElement(CheckCircleIcon, { className: "size-3.5 text-green-600" }),
+    },
+    "output-error": { label: "Error", icon: React.createElement(XCircleIcon, { className: "size-3.5 text-red-600" }) },
+    "output-denied": { label: "Denied", icon: React.createElement(XCircleIcon, { className: "size-3.5 text-orange-600" }) },
+    // Legacy states
+    call: { label: "Running", icon: React.createElement(ClockIcon, { className: "size-3.5 animate-pulse" }) },
+    "partial-call": { label: "Running", icon: React.createElement(ClockIcon, { className: "size-3.5 animate-pulse" }) },
+    result: { label: "Completed", icon: React.createElement(CheckCircleIcon, { className: "size-3.5 text-green-600" }) },
+    error: { label: "Error", icon: React.createElement(XCircleIcon, { className: "size-3.5 text-red-600" }) },
+};
+/** Tool call status badge component (AI Elements style) */
+export function ToolStatusBadge({ state }) {
+    const config = TOOL_STATUS_CONFIG[state];
+    return (React.createElement("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-secondary px-2.5 py-0.5 text-xs font-medium text-secondary-foreground border border-border" },
+        config?.icon ?? React.createElement(CircleIcon, { className: "size-3.5" }),
+        config?.label ?? state));
+}
+/**
+ * Escape HTML special characters to prevent XSS
+ */
+function escapeHtml(str) {
+    return str
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+}
+/**
+ * Format JSON with syntax highlighting
+ * Note: Escapes HTML first to prevent XSS, then applies safe highlighting
+ */
+function formatJsonWithHighlight(obj) {
+    if (obj == null)
+        return null;
+    const jsonStr = typeof obj === "string" ? obj : JSON.stringify(obj, null, 2);
+    // SECURITY: Escape HTML first to prevent XSS attacks
+    const escaped = escapeHtml(jsonStr);
+    const highlighted = escaped
+        .replace(/&quot;([^&]*)&quot;:/g, '<span class="text-green-600 dark:text-green-400">&quot;$1&quot;</span>:')
+        .replace(/: &quot;([^&]*)&quot;/g, ': <span class="text-amber-600 dark:text-amber-400">&quot;$1&quot;</span>')
+        .replace(/: (\d+)/g, ': <span class="text-blue-600 dark:text-blue-400">$1</span>')
+        .replace(/: (true|false)/g, ': <span class="text-purple-600 dark:text-purple-400">$1</span>');
+    return (React.createElement("pre", { className: "text-sm font-mono whitespace-pre-wrap", dangerouslySetInnerHTML: { __html: highlighted } }));
+}
+/**
+ * Render output as table if it's an array of objects
+ */
+function renderOutputAsTable(output) {
+    if (!Array.isArray(output) || output.length === 0)
+        return null;
+    const firstItem = output[0];
+    if (typeof firstItem !== "object" || firstItem == null)
+        return null;
+    const keys = Object.keys(firstItem);
+    if (keys.length === 0)
+        return null;
+    return (React.createElement("div", { className: "overflow-x-auto" },
+        React.createElement("table", { className: "min-w-full text-sm" },
+            React.createElement("thead", null,
+                React.createElement("tr", { className: "border-b border-neutral-200 dark:border-neutral-700" }, keys.map((key) => (React.createElement("th", { key: key, className: "px-4 py-2 text-left font-semibold text-neutral-900 dark:text-neutral-100" }, key.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())))))),
+            React.createElement("tbody", null, output.map((row, i) => (React.createElement("tr", { key: i, className: "border-b border-neutral-100 dark:border-neutral-800" }, keys.map((key) => (React.createElement("td", { key: key, className: "px-4 py-2 text-neutral-700 dark:text-neutral-300" }, String(row?.[key] ?? "")))))))))));
+}
+/**
+ * Tool call card component - renders tool invocations with parameters and results
+ * Styled to match AI Elements (https://ai-sdk.dev/elements)
+ */
+export function ToolCallCard({ tool, }) {
+    const [isExpanded, setIsExpanded] = React.useState(true);
+    const tableOutput = tool.output !== undefined ? renderOutputAsTable(tool.output) : null;
+    return (React.createElement("div", { className: "not-prose w-full rounded-md border border-border bg-card" },
+        React.createElement("button", { type: "button", onClick: () => setIsExpanded((v) => !v), className: "group flex w-full items-center justify-between gap-4 p-3 hover:bg-muted/50 transition-colors" },
+            React.createElement("div", { className: "flex items-center gap-2" },
+                React.createElement(WrenchIcon, { className: "size-4 text-muted-foreground" }),
+                React.createElement("span", { className: "font-medium text-sm text-foreground" }, tool.toolName),
+                React.createElement(ToolStatusBadge, { state: tool.state })),
+            React.createElement(ChevronDownIcon, { className: cn("size-4 text-muted-foreground transition-transform", isExpanded && "rotate-180") })),
+        isExpanded && (React.createElement("div", { className: "border-t border-border" },
+            tool.input !== undefined && (React.createElement("div", { className: "space-y-2 overflow-hidden p-4" },
+                React.createElement("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide" }, "Parameters"),
+                React.createElement("div", { className: "rounded-md bg-muted/50 p-3" }, formatJsonWithHighlight(tool.input)))),
+            tool.output !== undefined && (React.createElement("div", { className: "space-y-2 p-4 border-t border-border" },
+                React.createElement("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide" }, "Result"),
+                React.createElement("div", { className: "overflow-x-auto rounded-md bg-muted/50 text-foreground" }, tableOutput ?? React.createElement("div", { className: "p-3" }, formatJsonWithHighlight(tool.output))))),
+            tool.errorText && (React.createElement("div", { className: "space-y-2 p-4 border-t border-border" },
+                React.createElement("h4", { className: "font-medium text-destructive text-xs uppercase tracking-wide" }, "Error"),
+                React.createElement("div", { className: "rounded-md bg-destructive/10 text-destructive p-3 text-sm" }, tool.errorText)))))));
+}

package/esm/src/react/components/ai/chat/composition/api.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Chat Composition API
+ * @module ai/react/components/chat/composition/api
+ */
+export declare const ChatHeader: any;
+export declare const ChatMessages: any;
+export declare const ChatInput: any;
+export declare const ChatFooter: any;
+//# sourceMappingURL=api.d.ts.map

package/esm/src/react/components/ai/chat/composition/api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../../../../../../src/src/react/components/ai/chat/composition/api.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,eAAO,MAAM,UAAU,KAgBrB,CAAC;AAGH,eAAO,MAAM,YAAY,KAAc,CAAC;AAGxC,eAAO,MAAM,SAAS,KAepB,CAAC;AAGH,eAAO,MAAM,UAAU,KAgBrB,CAAC"}

package/esm/src/react/components/ai/chat/composition/api.js

@@ -0,0 +1,23 @@
+/**
+ * Chat Composition API
+ * @module ai/react/components/chat/composition/api
+ */
+import * as React from "react";
+import { InputBox, MessageList } from "../../../../primitives/index.js";
+import { cn, defaultChatTheme } from "../../theme.js";
+export const ChatHeader = React.forwardRef(function ChatHeader({ className, children, ...props }, ref) {
+    return (React.createElement("div", { ref: ref, className: cn("border-b border-gray-200 dark:border-gray-800 p-4 bg-gray-50 dark:bg-gray-900", className), ...props }, children));
+});
+ChatHeader.displayName = "ChatHeader";
+export const ChatMessages = MessageList;
+ChatMessages.displayName = "ChatMessages";
+export const ChatInput = React.forwardRef(function ChatInput({ className, ...props }, ref) {
+    return (React.createElement("div", { className: "border-t border-gray-200 dark:border-gray-800 p-4" },
+        React.createElement("div", { className: "flex gap-2" },
+            React.createElement(InputBox, { ref: ref, className: cn(defaultChatTheme.input, className), ...props }))));
+});
+ChatInput.displayName = "ChatInput";
+export const ChatFooter = React.forwardRef(function ChatFooter({ className, children, ...props }, ref) {
+    return (React.createElement("div", { ref: ref, className: cn("border-t border-gray-200 dark:border-gray-800 p-4 text-sm text-gray-500", className), ...props }, children));
+});
+ChatFooter.displayName = "ChatFooter";

package/esm/src/react/components/ai/chat/index.d.ts

@@ -0,0 +1,44 @@
+import * as React from "react";
+import type { DynamicToolUIPart, ToolUIPart, UIMessage } from "../../../../agent/react/index.js";
+import { type ChatTheme } from "../theme.js";
+export { Loader, Shimmer } from "./components/animations.js";
+export { ReasoningCard } from "./components/reasoning.js";
+export { ConversationEmptyState, type ConversationEmptyStateProps, ConversationScrollButton, type ConversationScrollButtonProps, Suggestion, type SuggestionProps, Suggestions, type SuggestionsProps, } from "./components/empty-state.js";
+export { MessageActions, type MessageActionsProps } from "./components/message-actions.js";
+export { ToolCallCard, ToolStatusBadge } from "./components/tool-ui.js";
+export { getTextContent, groupPartsInOrder, isReasoningPart, isToolPart, type PartGroup, } from "./utils/message-parts.js";
+export { ChatFooter, ChatHeader, ChatInput, ChatMessages } from "./composition/api.js";
+export interface ChatProps {
+    messages: UIMessage[];
+    input: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    handleInputChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onSubmit?: (e: React.FormEvent) => void | Promise<void>;
+    handleSubmit?: (e: React.FormEvent) => void | Promise<void>;
+    stop?: () => void;
+    reload?: () => void;
+    enableVoice?: boolean;
+    onVoice?: () => void;
+    setInput?: (value: string) => void;
+    isLoading?: boolean;
+    error?: Error | null;
+    placeholder?: string;
+    maxHeight?: string;
+    className?: string;
+    theme?: Partial<ChatTheme>;
+    renderMessage?: (message: UIMessage) => React.ReactNode;
+    renderTool?: (tool: ToolUIPart | DynamicToolUIPart) => React.ReactNode;
+    multiline?: boolean;
+    suggestions?: string[];
+    onSuggestionClick?: (suggestion: string) => void;
+    emptyState?: {
+        icon?: React.ReactNode;
+        title?: string;
+        description?: string;
+    };
+    showScrollButton?: boolean;
+    showMessageActions?: boolean;
+}
+export declare const Chat: any;
+export declare const ChatComponents: any;
+//# sourceMappingURL=index.d.ts.map

package/esm/src/react/components/ai/chat/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/ai/chat/index.tsx"],"names":[],"mappings":"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"}