@truefoundry/agent-ui-sdk 0.0.1

package/src/atoms/Markdown.tsx

@@ -0,0 +1,288 @@
+import { Children, isValidElement, useMemo, type ReactNode } from "react";
+import ReactMarkdown, { type Components } from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+import { cn } from "./lib/cn.js";
+import { CodeBlockHeader } from "./CodeBlockHeader.js";
+import { OpenUIBlock } from "./OpenUIBlock.js";
+import { SandboxArtifactList, type SandboxArtifactLink } from "./SandboxArtifactList.js";
+
+function extractCodeText(node: ReactNode): string {
+    if (typeof node === "string") return node;
+    if (typeof node === "number") return String(node);
+    if (Array.isArray(node)) return node.map(extractCodeText).join("");
+    if (isValidElement(node)) {
+        return extractCodeText((node.props as { children?: ReactNode }).children);
+    }
+    return "";
+}
+
+const SANDBOX_ARTIFACT_TOKEN = "sandbox_artifact";
+
+/**
+ * By the time this runs, `[Label](path)` has already been parsed into a real
+ * `<a href="path">Label</a>` element by react-markdown — the raw path text is
+ * gone from any flattened string, only present as the anchor's `href` prop.
+ * So detection walks `children` as React elements, not a flattened string.
+ */
+/**
+ * The gateway emits sandbox artifact links as a fenced code block tagged
+ * ```sandbox_artifact(s)``` containing raw `[label](path)` markdown-link text
+ * (never parsed into real anchors, since it's inside a code fence).
+ */
+function parseSandboxArtifactCodeBlock(code: string): SandboxArtifactLink[] | null {
+    const links: SandboxArtifactLink[] = [];
+    for (const match of code.matchAll(/\[([^\]]+)\]\(([^)]+)\)/g)) {
+        links.push({ label: match[1]!, path: match[2]! });
+    }
+    return links.length > 0 ? links : null;
+}
+
+function parseSandboxArtifactParagraph(children: ReactNode): SandboxArtifactLink[] | null {
+    const items = Children.toArray(children);
+    if (items.length === 0) return null;
+
+    const first = items[0];
+    if (typeof first !== "string") return null;
+    const stripped = first.replace(/^\s*/, "");
+    if (!stripped.startsWith(SANDBOX_ARTIFACT_TOKEN)) return null;
+    if (!/^\s*$/.test(stripped.slice(SANDBOX_ARTIFACT_TOKEN.length))) return null;
+
+    const links: SandboxArtifactLink[] = [];
+    for (let i = 1; i < items.length; i++) {
+        const item = items[i];
+        if (typeof item === "string") {
+            const trimmed = item.trim();
+            if (trimmed === "" || trimmed === SANDBOX_ARTIFACT_TOKEN) continue;
+            return null;
+        }
+        if (isValidElement(item) && typeof (item.props as { href?: unknown }).href === "string") {
+            links.push({
+                label: extractCodeText((item.props as { children?: ReactNode }).children),
+                path: (item.props as { href: string }).href,
+            });
+            continue;
+        }
+        return null;
+    }
+    return links.length > 0 ? links : null;
+}
+
+function createMarkdownComponents(
+    isStreaming?: boolean,
+    onDownloadArtifact?: (path: string) => void | Promise<unknown>,
+): Components {
+    return {
+    h1: ({ className, ...props }) => (
+        <h1
+            className={cn(
+                "aui-md-h1 mt-5 mb-2 scroll-m-20 text-xl font-semibold first:mt-0 last:mb-0",
+                className,
+            )}
+            {...props}
+        />
+    ),
+    h2: ({ className, ...props }) => (
+        <h2
+            className={cn(
+                "aui-md-h2 mt-5 mb-2 scroll-m-20 text-lg font-semibold first:mt-0 last:mb-0",
+                className,
+            )}
+            {...props}
+        />
+    ),
+    h3: ({ className, ...props }) => (
+        <h3
+            className={cn(
+                "aui-md-h3 mt-4 mb-1.5 scroll-m-20 text-base font-semibold first:mt-0 last:mb-0",
+                className,
+            )}
+            {...props}
+        />
+    ),
+    h4: ({ className, ...props }) => (
+        <h4
+            className={cn(
+                "aui-md-h4 mt-3.5 mb-1 scroll-m-20 text-base font-medium first:mt-0 last:mb-0",
+                className,
+            )}
+            {...props}
+        />
+    ),
+    h5: ({ className, ...props }) => (
+        <h5
+            className={cn("aui-md-h5 mt-3 mb-1 text-sm font-semibold first:mt-0 last:mb-0", className)}
+            {...props}
+        />
+    ),
+    h6: ({ className, ...props }) => (
+        <h6
+            className={cn("aui-md-h6 mt-3 mb-1 text-sm font-medium first:mt-0 last:mb-0", className)}
+            {...props}
+        />
+    ),
+    p: ({ className, children, ...props }) => {
+        const artifacts = parseSandboxArtifactParagraph(children);
+        if (artifacts != null) {
+            return <SandboxArtifactList artifacts={artifacts} onDownload={onDownloadArtifact} />;
+        }
+        return (
+            <p className={cn("aui-md-p my-3 leading-relaxed first:mt-0 last:mb-0", className)} {...props}>
+                {children}
+            </p>
+        );
+    },
+    a: ({ className, ...props }) => (
+        <a
+            className={cn(
+                "aui-md-a text-primary hover:text-primary/80 underline underline-offset-2",
+                className,
+            )}
+            target="_blank"
+            rel="noopener noreferrer"
+            {...props}
+        />
+    ),
+    blockquote: ({ className, ...props }) => (
+        <blockquote
+            className={cn(
+                "aui-md-blockquote border-muted-foreground/30 text-muted-foreground my-3 border-s-2 ps-4",
+                className,
+            )}
+            {...props}
+        />
+    ),
+    ul: ({ className, ...props }) => (
+        <ul
+            className={cn(
+                "aui-md-ul marker:text-muted-foreground my-3 ms-5 list-disc [&>li]:mt-1",
+                className,
+            )}
+            {...props}
+        />
+    ),
+    ol: ({ className, ...props }) => (
+        <ol
+            className={cn(
+                "aui-md-ol marker:text-muted-foreground my-3 ms-5 list-decimal [&>li]:mt-1",
+                className,
+            )}
+            {...props}
+        />
+    ),
+    hr: ({ className, ...props }) => (
+        <hr className={cn("aui-md-hr border-muted-foreground/20 my-3", className)} {...props} />
+    ),
+    table: ({ className, ...props }) => (
+        <table
+            className={cn(
+                "aui-md-table my-3 w-full border-separate border-spacing-0 overflow-y-auto",
+                className,
+            )}
+            {...props}
+        />
+    ),
+    th: ({ className, ...props }) => (
+        <th
+            className={cn(
+                "aui-md-th bg-muted px-3 py-1.5 text-start font-medium first:rounded-ss-lg last:rounded-se-lg [[align=center]]:text-center [[align=right]]:text-right",
+                className,
+            )}
+            {...props}
+        />
+    ),
+    td: ({ className, ...props }) => (
+        <td
+            className={cn(
+                "aui-md-td border-muted-foreground/20 border-s border-b px-3 py-1.5 text-start last:border-e [[align=center]]:text-center [[align=right]]:text-right",
+                className,
+            )}
+            {...props}
+        />
+    ),
+    tr: ({ className, ...props }) => (
+        <tr
+            className={cn(
+                "aui-md-tr m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-es-lg [&:last-child>td:last-child]:rounded-ee-lg",
+                className,
+            )}
+            {...props}
+        />
+    ),
+    li: ({ className, ...props }) => <li className={cn("aui-md-li leading-relaxed", className)} {...props} />,
+    strong: ({ className, ...props }) => (
+        <strong className={cn("aui-md-strong font-semibold", className)} {...props} />
+    ),
+    sup: ({ className, ...props }) => (
+        <sup className={cn("aui-md-sup [&>a]:text-xs [&>a]:no-underline", className)} {...props} />
+    ),
+    pre: ({ className, children, ...props }) => {
+        const codeElement = isValidElement(children) ? children : undefined;
+        const codeClassName = (codeElement?.props as { className?: string } | undefined)?.className ?? "";
+        const language = /language-(\S+)/.exec(codeClassName)?.[1] ?? "text";
+        const code = extractCodeText(children);
+        if (language === "openui") {
+            return <OpenUIBlock source={code} isStreaming={isStreaming} />;
+        }
+        if (language === "sandbox_artifact" || language === "sandbox_artifacts") {
+            const artifacts = parseSandboxArtifactCodeBlock(code);
+            if (artifacts != null) {
+                return <SandboxArtifactList artifacts={artifacts} onDownload={onDownloadArtifact} />;
+            }
+        }
+        return (
+            <>
+                <CodeBlockHeader language={language} code={code} />
+                <pre
+                    className={cn(
+                        "aui-md-pre border-border/50 bg-muted/30 overflow-x-auto rounded-t-none rounded-b-xl border border-t-0 p-3.5 text-[13px] leading-relaxed",
+                        className,
+                    )}
+                    {...props}
+                >
+                    {children}
+                </pre>
+            </>
+        );
+    },
+    code: ({ className, ...props }) => {
+        const isCodeBlock = /language-/.test(className ?? "");
+        return (
+            <code
+                className={cn(
+                    !isCodeBlock && "aui-md-inline-code bg-muted rounded-md px-1.5 py-0.5 font-mono text-[0.85em]",
+                    className,
+                )}
+                {...props}
+            />
+        );
+    },
+    };
+}
+
+export type MarkdownProps = {
+    content: string;
+    className?: string;
+    isStreaming?: boolean;
+    onDownloadArtifact?: (path: string) => void | Promise<unknown>;
+};
+
+export function Markdown({ content, className, isStreaming, onDownloadArtifact }: MarkdownProps) {
+    const components = useMemo(
+        () => createMarkdownComponents(isStreaming, onDownloadArtifact),
+        [isStreaming, onDownloadArtifact],
+    );
+    return (
+        <div className={cn("aui-md", className)}>
+            <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
+                {content}
+            </ReactMarkdown>
+        </div>
+    );
+}
+
+declare module "../theme/SlotsProvider.js" {
+    interface AtomSlots {
+        Markdown: typeof Markdown;
+    }
+}

package/src/atoms/McpAuthPrompt.tsx

@@ -0,0 +1,60 @@
+import { ExternalLinkIcon } from "lucide-react";
+
+import { cn } from "./lib/cn.js";
+import { Button } from "./primitives/Button.js";
+
+export type McpAuthServer = { id: string; name: string; authUrl: string };
+
+export type McpAuthPromptProps = {
+    servers: McpAuthServer[];
+    disabled: boolean;
+    onContinue: () => void;
+    className?: string;
+};
+
+export function McpAuthPrompt({ servers, disabled, onContinue, className }: McpAuthPromptProps) {
+    return (
+        <div data-slot="aui_mcp-auth-continue-composer" className={cn("flex w-full flex-col gap-3", className)}>
+            <div className="border-primary/20 bg-background overflow-hidden rounded-2xl border">
+                <div className="bg-primary/10 border-primary/20 border-b px-4 py-2.5">
+                    <p className="text-primary text-sm font-semibold">MCP Authentication Required</p>
+                </div>
+                <ul className="divide-border/60 divide-y">
+                    {servers.map((server) => (
+                        <li
+                            key={server.id}
+                            className="flex items-center justify-between gap-3 px-4 py-2.5"
+                        >
+                            <p className="text-sm">
+                                <span className="text-muted-foreground">MCP Server Name</span>
+                                <span className="text-muted-foreground mx-1.5">:</span>
+                                <span className="font-semibold">{server.name}</span>
+                            </p>
+                            <Button
+                                asChild
+                                size="sm"
+                                className="bg-foreground text-background hover:bg-foreground/80 rounded-full"
+                            >
+                                <a href={server.authUrl} target="_blank" rel="noopener noreferrer">
+                                    Connect
+                                    <ExternalLinkIcon className="size-3.5" />
+                                </a>
+                            </Button>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+            <div className="flex justify-end px-2.5">
+                <Button type="button" className="rounded-full px-4" disabled={disabled} onClick={onContinue}>
+                    Continue
+                </Button>
+            </div>
+        </div>
+    );
+}
+
+declare module "../theme/SlotsProvider.js" {
+    interface AtomSlots {
+        McpAuthPrompt: typeof McpAuthPrompt;
+    }
+}

package/src/atoms/MessageActionBar.tsx

@@ -0,0 +1,60 @@
+import { CheckIcon, CopyIcon, DownloadIcon, MoreHorizontalIcon } from "lucide-react";
+import { DropdownMenu } from "radix-ui";
+
+import { cn } from "./lib/cn.js";
+import { IconButton } from "./primitives/IconButton.js";
+
+export type MessageActionBarProps = {
+    isCopied: boolean;
+    onCopy: () => void;
+    onExportMarkdown: () => void;
+    className?: string;
+};
+
+export function MessageActionBar({ isCopied, onCopy, onExportMarkdown, className }: MessageActionBarProps) {
+    return (
+        <div
+            className={cn(
+                "aui-assistant-action-bar-root text-muted-foreground animate-in fade-in flex gap-1 duration-200",
+                className,
+            )}
+        >
+            <IconButton tooltip="Copy" onClick={onCopy}>
+                {isCopied ? (
+                    <CheckIcon className="animate-in zoom-in-50 fade-in duration-200 ease-out" />
+                ) : (
+                    <CopyIcon className="animate-in zoom-in-75 fade-in duration-150" />
+                )}
+            </IconButton>
+            <DropdownMenu.Root>
+                <DropdownMenu.Trigger asChild>
+                    <IconButton tooltip="More" className="data-[state=open]:bg-accent">
+                        <MoreHorizontalIcon />
+                    </IconButton>
+                </DropdownMenu.Trigger>
+                <DropdownMenu.Portal>
+                    <DropdownMenu.Content
+                        side="bottom"
+                        align="start"
+                        sideOffset={6}
+                        className="aui-action-bar-more-content bg-popover/95 text-popover-foreground data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:animate-out data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-xl border p-1.5 shadow-lg backdrop-blur-sm"
+                    >
+                        <DropdownMenu.Item
+                            onSelect={onExportMarkdown}
+                            className="aui-action-bar-more-item hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-pointer items-center gap-2 rounded-lg px-2.5 py-1.5 text-sm outline-none select-none"
+                        >
+                            <DownloadIcon className="size-4" />
+                            Export as Markdown
+                        </DropdownMenu.Item>
+                    </DropdownMenu.Content>
+                </DropdownMenu.Portal>
+            </DropdownMenu.Root>
+        </div>
+    );
+}
+
+declare module "../theme/SlotsProvider.js" {
+    interface AtomSlots {
+        MessageActionBar: typeof MessageActionBar;
+    }
+}

package/src/atoms/MessageBubble.tsx

@@ -0,0 +1,80 @@
+import type { ReactNode } from "react";
+
+import { cn } from "./lib/cn.js";
+
+export type AssistantMessageBubbleProps = {
+    variant: "assistant";
+    children: ReactNode;
+    error?: ReactNode;
+    branchIndicator?: ReactNode;
+    actionBar?: ReactNode;
+    className?: string;
+};
+
+export type UserMessageBubbleProps = {
+    variant: "user";
+    children: ReactNode;
+    attachments?: ReactNode;
+    branchIndicator?: ReactNode;
+    actionBar?: ReactNode;
+    className?: string;
+};
+
+export type MessageBubbleProps = AssistantMessageBubbleProps | UserMessageBubbleProps;
+
+export function MessageBubble(props: MessageBubbleProps) {
+    if (props.variant === "assistant") {
+        const { children, error, branchIndicator, actionBar, className } = props;
+        return (
+            <div
+                data-slot="aui_assistant-message-root"
+                className={cn("fade-in slide-in-from-bottom-1 animate-in relative duration-150", className)}
+            >
+                <div
+                    data-slot="aui_assistant-message-content"
+                    className="text-foreground flex flex-col gap-3 px-2 leading-relaxed wrap-break-word [contain-intrinsic-size:auto_24px] [content-visibility:auto]"
+                >
+                    {children}
+                    {error}
+                </div>
+                <div data-slot="aui_assistant-message-footer" className="ms-2 -mb-7.5 min-h-7.5 pt-1.5 flex items-center">
+                    {branchIndicator}
+                    {actionBar}
+                </div>
+            </div>
+        );
+    }
+
+    const { children, attachments, branchIndicator, actionBar, className } = props;
+    return (
+        <div
+            data-slot="aui_user-message-root"
+            className={cn(
+                "fade-in slide-in-from-bottom-1 animate-in grid auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] content-start gap-y-2 px-2 duration-150 [contain-intrinsic-size:auto_60px] [content-visibility:auto] [&:where(>*)]:col-start-2",
+                className,
+            )}
+        >
+            {attachments}
+            <div className="aui-user-message-content-wrapper relative col-start-2 min-w-0">
+                <div className="aui-user-message-content bg-muted text-foreground rounded-xl px-4 py-2 wrap-break-word empty:hidden">
+                    {children}
+                </div>
+            </div>
+            {(branchIndicator != null || actionBar != null) && (
+                <div
+                    data-slot="aui_user-message-footer"
+                    className="col-span-full col-start-1 row-start-3 -me-1 flex items-center justify-end gap-1"
+                >
+                    {branchIndicator}
+                    {actionBar}
+                </div>
+            )}
+        </div>
+    );
+}
+
+declare module "../theme/SlotsProvider.js" {
+    interface AtomSlots {
+        MessageBubble: typeof MessageBubble;
+    }
+}

package/src/atoms/MessageErrorBanner.tsx

@@ -0,0 +1,26 @@
+import { cn } from "./lib/cn.js";
+
+export type MessageErrorBannerProps = {
+    message: string;
+    className?: string;
+};
+
+export function MessageErrorBanner({ message, className }: MessageErrorBannerProps) {
+    return (
+        <div
+            role="alert"
+            className={cn(
+                "aui-message-error-root border-destructive bg-destructive/10 text-destructive dark:bg-destructive/5 mt-2 rounded-md border p-3 text-sm dark:text-red-200",
+                className,
+            )}
+        >
+            <span className="aui-message-error-message line-clamp-2">{message}</span>
+        </div>
+    );
+}
+
+declare module "../theme/SlotsProvider.js" {
+    interface AtomSlots {
+        MessageErrorBanner: typeof MessageErrorBanner;
+    }
+}

package/src/atoms/MessageIndicator.tsx

@@ -0,0 +1,23 @@
+import { cn } from "./lib/cn.js";
+
+export type MessageIndicatorProps = {
+    className?: string;
+};
+
+export function MessageIndicator({ className }: MessageIndicatorProps) {
+    return (
+        <span
+            data-slot="aui_assistant-message-indicator"
+            className={cn("animate-pulse font-sans", className)}
+            aria-label="Assistant is working"
+        >
+            {"●"}
+        </span>
+    );
+}
+
+declare module "../theme/SlotsProvider.js" {
+    interface AtomSlots {
+        MessageIndicator: typeof MessageIndicator;
+    }
+}

package/src/atoms/OpenUIBlock.test.tsx

@@ -0,0 +1,37 @@
+// @vitest-environment jsdom
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { OpenUIBlock } from "./OpenUIBlock.js";
+
+describe("OpenUIBlock", () => {
+    it("renders OpenUI source through Renderer", () => {
+        render(<OpenUIBlock source={'Card() { title: "Hello" }'} />);
+        expect(screen.getByTestId("openui-renderer")).toHaveTextContent('Card() { title: "Hello" }');
+        expect(screen.getByTestId("openui-renderer")).toHaveAttribute("data-streaming", "false");
+    });
+
+    it("forwards isStreaming to Renderer", () => {
+        render(<OpenUIBlock source="Card() {}" isStreaming />);
+        expect(screen.getByTestId("openui-renderer")).toHaveAttribute("data-streaming", "true");
+    });
+
+    it("exposes a stable wrapper slot for integration tests", () => {
+        render(<OpenUIBlock source="Card() {}" />);
+        expect(screen.getByTestId("openui-renderer").closest("[data-slot='openui-block']")).toBeTruthy();
+    });
+
+    it("wraps content in OpenUI ThemeProvider using the html .dark class by default", () => {
+        document.documentElement.classList.add("dark");
+        render(<OpenUIBlock source="Card() {}" />);
+        expect(screen.getByTestId("openui-theme-provider")).toHaveAttribute("data-mode", "dark");
+        document.documentElement.classList.remove("dark");
+    });
+
+    it("honors an explicit mode override", () => {
+        document.documentElement.classList.add("dark");
+        render(<OpenUIBlock source="Card() {}" mode="light" />);
+        expect(screen.getByTestId("openui-theme-provider")).toHaveAttribute("data-mode", "light");
+        document.documentElement.classList.remove("dark");
+    });
+});

package/src/atoms/OpenUIBlock.tsx

@@ -0,0 +1,50 @@
+import { memo, useId } from "react";
+import { Renderer } from "@openuidev/react-lang";
+import { ThemeProvider } from "@openuidev/react-ui";
+import { openuiLibrary } from "@openuidev/react-ui/genui-lib";
+
+import { useClassDarkMode, type ThemeMode } from "../theme/useClassDarkMode.js";
+import { cn } from "./lib/cn.js";
+
+export type OpenUIBlockProps = {
+    source: string;
+    isStreaming?: boolean;
+    className?: string;
+    /** Override light/dark mode. Defaults to syncing with a `.dark` class on `<html>`. */
+    mode?: ThemeMode;
+};
+
+/** Renders an OpenUI Lang fenced code block (```openui ... ```). */
+export const OpenUIBlock = memo(
+    function OpenUIBlock({ source, isStreaming, className, mode: modeProp }: OpenUIBlockProps) {
+        const detectedMode = useClassDarkMode();
+        const mode = modeProp ?? detectedMode;
+        const scopeClass = `aui-openui-theme-${useId().replace(/:/g, "")}`;
+
+        return (
+            <ThemeProvider mode={mode} cssSelector={`.${scopeClass}`}>
+                <div
+                    data-slot="openui-block"
+                    className={cn("aui-openui-block my-3", scopeClass, className)}
+                    style={{ contain: "layout paint" }}
+                >
+                    <Renderer
+                        response={source}
+                        library={openuiLibrary}
+                        isStreaming={!!isStreaming}
+                    />
+                </div>
+            </ThemeProvider>
+        );
+    },
+    (prev, next) =>
+        prev.source === next.source &&
+        !!prev.isStreaming === !!next.isStreaming &&
+        prev.mode === next.mode,
+);
+
+declare module "../theme/SlotsProvider.js" {
+    interface AtomSlots {
+        OpenUIBlock: typeof OpenUIBlock;
+    }
+}

package/src/atoms/ReasoningCard.tsx

@@ -0,0 +1,52 @@
+import type { ReactNode } from "react";
+import { BrainIcon, ChevronDownIcon } from "lucide-react";
+
+import { cn } from "./lib/cn.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./primitives/Collapsible.js";
+
+export type ReasoningCardProps = {
+    streaming: boolean;
+    expanded: boolean;
+    onToggle: () => void;
+    children: ReactNode;
+    className?: string;
+};
+
+export function ReasoningCard({ streaming, expanded, onToggle, children, className }: ReasoningCardProps) {
+    return (
+        <Collapsible
+            data-slot="reasoning-card"
+            open={expanded}
+            onOpenChange={onToggle}
+            className={cn("aui-reasoning-card w-full rounded-lg border px-3 py-2", className)}
+        >
+            <CollapsibleTrigger className="text-muted-foreground hover:text-foreground flex max-w-[75%] origin-left items-center gap-2 py-1.5 text-sm transition-[color,scale] active:scale-[0.98]">
+                <BrainIcon className="size-4 shrink-0" />
+                <span className="leading-none tabular-nums">
+                    Reasoning
+                    {streaming && (
+                        <span aria-hidden className="shimmer pointer-events-none">
+                            {" "}
+                            …
+                        </span>
+                    )}
+                </span>
+                <ChevronDownIcon
+                    className={cn(
+                        "mt-0.5 size-4 shrink-0 transition-transform duration-200 ease-[cubic-bezier(0.32,0.72,0,1)]",
+                        expanded ? "rotate-0" : "-rotate-90",
+                    )}
+                />
+            </CollapsibleTrigger>
+            <CollapsibleContent className="text-muted-foreground max-h-64 overflow-y-auto pt-2 pb-1 pl-6 text-sm leading-relaxed">
+                {children}
+            </CollapsibleContent>
+        </Collapsible>
+    );
+}
+
+declare module "../theme/SlotsProvider.js" {
+    interface AtomSlots {
+        ReasoningCard: typeof ReasoningCard;
+    }
+}