@nadicodeai/ui 0.20.0 → 0.22.0

package/dist/internal/assistant-ui/reasoning.js

@@ -0,0 +1,118 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, memo, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState, } from "react";
+import { cva } from "class-variance-authority";
+import { BrainIcon, ChevronDownIcon } from "lucide-react";
+import { useScrollLock } from "@assistant-ui/react";
+import { MarkdownText } from "./markdown-text.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../components/collapsible.js";
+import { cn } from "../../lib/utils.js";
+const ANIMATION_DURATION = 200;
+const ReasoningPreviewContext = createContext(false);
+const reasoningVariants = cva("aui-reasoning-root mb-4 w-full", {
+    variants: {
+        variant: {
+            outline: "rounded-lg border px-3 py-2",
+            ghost: "",
+            muted: "bg-muted/50 rounded-lg px-3 py-2",
+        },
+    },
+    defaultVariants: {
+        variant: "outline",
+    },
+});
+function ReasoningRoot({ className, variant, open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen = false, streaming, children, ...props }) {
+    const collapsibleRef = useRef(null);
+    const initialOpenRef = useRef(defaultOpen);
+    const [userOpen, setUserOpen] = useState(null);
+    const lockScroll = useScrollLock(collapsibleRef, ANIMATION_DURATION);
+    const isControlled = controlledOpen !== undefined;
+    const isOpen = isControlled
+        ? controlledOpen
+        : (userOpen ?? (streaming || initialOpenRef.current));
+    const isPreview = streaming === true && isOpen;
+    const prevStreamingRef = useRef(streaming);
+    useLayoutEffect(() => {
+        if (prevStreamingRef.current === streaming)
+            return;
+        prevStreamingRef.current = streaming;
+        // A streaming transition only animates the panel when the resting state
+        // is collapsed; with `defaultOpen` the disclosure stays open across it.
+        if (!isControlled && userOpen === null && !initialOpenRef.current) {
+            lockScroll();
+        }
+    }, [streaming, isControlled, userOpen, lockScroll]);
+    const handleOpenChange = useCallback((open) => {
+        lockScroll();
+        if (!isControlled) {
+            setUserOpen(open);
+        }
+        controlledOnOpenChange?.(open);
+    }, [lockScroll, isControlled, controlledOnOpenChange]);
+    return (_jsx(Collapsible, { ref: collapsibleRef, "data-slot": "reasoning-root", "data-variant": variant, open: isOpen, onOpenChange: handleOpenChange, className: cn("group/reasoning-root", reasoningVariants({ variant, className })), style: {
+            "--animation-duration": `${ANIMATION_DURATION}ms`,
+        }, ...props, children: _jsx(ReasoningPreviewContext.Provider, { value: isPreview, children: children }) }));
+}
+function ReasoningFade({ side = "bottom", className, ...props }) {
+    if (side === "top") {
+        return (_jsx("div", { "data-slot": "reasoning-fade", className: cn("aui-reasoning-fade pointer-events-none absolute inset-x-0 top-0 z-10 h-8", "bg-background/90 group-data-[variant=muted]/reasoning-root:bg-muted/90", className), ...props }));
+    }
+    return (_jsx("div", { "data-slot": "reasoning-fade", className: cn("aui-reasoning-fade pointer-events-none absolute inset-x-0 bottom-0 z-10 h-8", "bg-background/90 group-data-[variant=muted]/reasoning-root:bg-muted/90", className), ...props }));
+}
+function ReasoningTrigger({ active, duration, className, ...props }) {
+    const durationText = duration ? ` (${duration}s)` : "";
+    return (_jsxs(CollapsibleTrigger, { "data-slot": "reasoning-trigger", className: cn("aui-reasoning-trigger nc-transition-paint group/trigger flex max-w-[75%] origin-left items-center gap-2 py-1.5 text-sm text-muted-foreground hover:text-foreground", className), ...props, children: [_jsx(BrainIcon, { "data-slot": "reasoning-trigger-icon", className: "aui-reasoning-trigger-icon size-4 shrink-0" }), _jsxs("span", { "data-slot": "reasoning-trigger-label", className: "aui-reasoning-trigger-label-wrapper relative inline-block leading-none tabular-nums", children: [_jsxs("span", { children: ["Reasoning", durationText] }), active ? (_jsxs("span", { "aria-hidden": true, "data-slot": "reasoning-trigger-shimmer", className: "aui-reasoning-trigger-shimmer shimmer pointer-events-none absolute inset-0 motion-reduce:animate-none", children: ["Reasoning", durationText] })) : null] }), _jsx(ChevronDownIcon, { "data-slot": "reasoning-trigger-chevron", className: cn("aui-reasoning-trigger-chevron mt-0.5 size-4 shrink-0", "transition-transform duration-(--animation-duration) ease-[var(--nc-ease-out-strong)] motion-reduce:transition-none", "-rotate-90", "group-data-open/trigger:rotate-0", "group-data-panel-open/trigger:rotate-0") })] }));
+}
+function ReasoningContent({ className, children, ...props }) {
+    const isPreview = useContext(ReasoningPreviewContext);
+    return (_jsxs(CollapsibleContent, { "data-slot": "reasoning-content", className: cn("aui-reasoning-content text-muted-foreground relative overflow-hidden text-sm outline-none", "group/collapsible-content", "data-closed:pointer-events-none", className), ...props, children: [_jsx(ReasoningFade, { side: "top" }), children, isPreview ? _jsx(ReasoningFade, {}) : null] }));
+}
+function ReasoningText({ className, children, ...props }) {
+    const isPreview = useContext(ReasoningPreviewContext);
+    const scrollRef = useRef(null);
+    const contentRef = useRef(null);
+    useEffect(() => {
+        if (!isPreview)
+            return;
+        const scrollEl = scrollRef.current;
+        const contentEl = contentRef.current;
+        if (!scrollEl || !contentEl)
+            return;
+        let pinned = true;
+        let lastScrollTop = scrollEl.scrollTop;
+        let lastScrollHeight = scrollEl.scrollHeight;
+        const isAtBottom = () => Math.abs(scrollEl.scrollHeight - scrollEl.scrollTop - scrollEl.clientHeight) <= 1 ||
+            scrollEl.scrollHeight <= scrollEl.clientHeight;
+        const pin = () => {
+            if (!pinned)
+                return;
+            scrollEl.scrollTop = scrollEl.scrollHeight;
+        };
+        // A pin's own scroll event can arrive after new content grew the scroll
+        // height and read as "not at bottom"; only an upward move at unchanged
+        // scroll height is user intent.
+        const onScroll = () => {
+            if (isAtBottom()) {
+                pinned = true;
+            }
+            else if (scrollEl.scrollTop < lastScrollTop && scrollEl.scrollHeight === lastScrollHeight) {
+                pinned = false;
+            }
+            lastScrollTop = scrollEl.scrollTop;
+            lastScrollHeight = scrollEl.scrollHeight;
+        };
+        pin();
+        scrollEl.addEventListener("scroll", onScroll);
+        const observer = new ResizeObserver(pin);
+        observer.observe(contentEl);
+        return () => {
+            scrollEl.removeEventListener("scroll", onScroll);
+            observer.disconnect();
+        };
+    }, [isPreview]);
+    return (_jsx("div", { ref: scrollRef, "data-slot": "reasoning-text", className: cn("aui-reasoning-text relative z-0 max-h-64 overflow-y-auto ps-6 pt-2 pb-2 leading-relaxed text-pretty", "nc-transition-opacity", className), ...props, children: _jsx("div", { ref: contentRef, className: "aui-reasoning-text-content space-y-4", children: children }) }));
+}
+const ReasoningImpl = () => _jsx(MarkdownText, {});
+const Reasoning = memo(ReasoningImpl);
+Reasoning.displayName = "Reasoning";
+export { Reasoning, ReasoningRoot, ReasoningTrigger, ReasoningContent, ReasoningText };

package/dist/internal/assistant-ui/thread.d.ts

@@ -0,0 +1,26 @@
+import { MessagePrimitive, type ToolCallMessagePartComponent } from "@assistant-ui/react";
+import { type ComponentType, type FC, type PropsWithChildren } from "react";
+export type ThreadGroupPart = MessagePrimitive.GroupedParts.GroupPart;
+/**
+ * Optional component overrides for the thread. `AssistantMessage` and
+ * `Welcome` replace whole sections; the remaining slots override how the
+ * assistant message renders tool calls and part groups. Tool UIs registered
+ * by name (toolkit `render`, `useAssistantDataUI`) take precedence over
+ * `ToolFallback`.
+ */
+export type ThreadComponents = {
+    AssistantMessage?: ComponentType | undefined;
+    Welcome?: ComponentType | undefined;
+    ToolFallback?: ToolCallMessagePartComponent | undefined;
+    ToolGroup?: ComponentType<PropsWithChildren<{
+        group: ThreadGroupPart;
+    }>> | undefined;
+    ReasoningGroup?: ComponentType<PropsWithChildren<{
+        group: ThreadGroupPart;
+    }>> | undefined;
+};
+export type ThreadProps = {
+    components?: ThreadComponents | undefined;
+};
+export declare const Thread: FC<ThreadProps>;
+//# sourceMappingURL=thread.d.ts.map

package/dist/internal/assistant-ui/thread.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"thread.d.ts","sourceRoot":"","sources":["../../../src/internal/assistant-ui/thread.tsx"],"names":[],"mappings":"AAyBA,OAAO,EASL,gBAAgB,EAGhB,KAAK,4BAA4B,EAElC,MAAM,qBAAqB,CAAC;AAe7B,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,EAAE,EACP,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,eAAe,GAAG,gBAAgB,CAAC,YAAY,CAAC,SAAS,CAAC;AAEtE;;;;;;GAMG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,gBAAgB,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAC7C,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IACpC,YAAY,CAAC,EAAE,4BAA4B,GAAG,SAAS,CAAC;IACxD,SAAS,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC;QAAE,KAAK,EAAE,eAAe,CAAA;KAAE,CAAC,CAAC,GAAG,SAAS,CAAC;IACrF,cAAc,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC;QAAE,KAAK,EAAE,eAAe,CAAA;KAAE,CAAC,CAAC,GAAG,SAAS,CAAC;CAC3F,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,UAAU,CAAC,EAAE,gBAAgB,GAAG,SAAS,CAAC;CAC3C,CAAC;AAWF,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAQlC,CAAC"}

package/dist/internal/assistant-ui/thread.js

@@ -0,0 +1,118 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ComposerAddAttachment, ComposerAttachments, UserMessageAttachments, } from "./attachment.js";
+import { ThreadFollowupSuggestions } from "./follow-up-suggestions.js";
+import { MarkdownText } from "./markdown-text.js";
+import { Reasoning, ReasoningContent, ReasoningRoot, ReasoningText, ReasoningTrigger, } from "./reasoning.js";
+import { ToolFallback } from "./tool-fallback.js";
+import { ToolGroupContent, ToolGroupRoot, ToolGroupTrigger, } from "./tool-group.js";
+import { TooltipIconButton } from "./tooltip-icon-button.js";
+import { Button } from "../../components/button.js";
+import { cn } from "../../lib/utils.js";
+import { ActionBarMorePrimitive, ActionBarPrimitive, AuiIf, BranchPickerPrimitive, ComposerPrimitive, ErrorPrimitive, groupPartByType, MessagePrimitive, SuggestionPrimitive, ThreadPrimitive, useAuiState, } from "@assistant-ui/react";
+import { ArrowDownIcon, ArrowUpIcon, CheckIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DownloadIcon, MicIcon, MoreHorizontalIcon, PencilIcon, RefreshCwIcon, SquareIcon, } from "lucide-react";
+import { createContext, useContext, } from "react";
+const EMPTY_COMPONENTS = {};
+const ThreadComponentsContext = createContext(EMPTY_COMPONENTS);
+// Startup exposes a loading placeholder thread; treat it as a new chat so
+// the composer mounts centered. Loads after startup keep the docked layout.
+const isNewChatView = (s) => s.thread.messages.length === 0 && (!s.thread.isLoading || s.threads.isLoading);
+export const Thread = ({ components = EMPTY_COMPONENTS }) => {
+    const isEmpty = useAuiState(isNewChatView);
+    return (_jsx(ThreadComponentsContext.Provider, { value: components, children: _jsx(ThreadRoot, { isEmpty: isEmpty }) }));
+};
+const ThreadRoot = ({ isEmpty }) => {
+    const { Welcome = ThreadWelcome } = useContext(ThreadComponentsContext);
+    return (_jsx(ThreadPrimitive.Root, { className: "aui-root aui-thread-root bg-background @container flex h-full flex-col", style: {
+            ["--thread-max-width"]: "44rem",
+            ["--composer-bg"]: "var(--color-muted)",
+            ["--composer-radius"]: "1.5rem",
+            ["--composer-padding"]: "8px",
+        }, children: _jsx(ThreadPrimitive.Viewport, { turnAnchor: "top", "data-slot": "aui_thread-viewport", className: "relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-smooth", children: _jsxs("div", { className: cn("mx-auto flex w-full max-w-(--thread-max-width) flex-1 flex-col px-4 pt-4", isEmpty && "justify-center"), children: [_jsx(AuiIf, { condition: isNewChatView, children: _jsx(Welcome, {}) }), _jsx("div", { "data-slot": "aui_message-group", className: "mb-14 flex flex-col gap-y-6 empty:hidden", children: _jsx(ThreadPrimitive.Messages, { children: () => _jsx(ThreadMessage, {}) }) }), _jsxs(ThreadPrimitive.ViewportFooter, { className: cn("aui-thread-viewport-footer bg-background flex flex-col gap-4 overflow-visible pb-4 md:pb-6", !isEmpty && "sticky bottom-0 mt-auto rounded-t-(--composer-radius)"), children: [_jsx(ThreadScrollToBottom, {}), _jsx(ThreadFollowupSuggestions, {}), _jsx(Composer, {}), _jsx(AuiIf, { condition: (s) => isNewChatView(s) && s.composer.isEmpty, children: _jsx(ThreadSuggestions, {}) })] })] }) }) }));
+};
+const ThreadMessage = () => {
+    const { AssistantMessage: AssistantMessageComponent = AssistantMessage } = useContext(ThreadComponentsContext);
+    const role = useAuiState((s) => s.message.role);
+    const isEditing = useAuiState((s) => s.message.composer.isEditing);
+    if (isEditing)
+        return _jsx(EditComposer, {});
+    if (role === "user")
+        return _jsx(UserMessage, {});
+    return _jsx(AssistantMessageComponent, {});
+};
+const ThreadScrollToBottom = () => {
+    return (_jsx(ThreadPrimitive.ScrollToBottom, { render: _jsx(TooltipIconButton, { tooltip: "Scroll to bottom", variant: "outline", className: "aui-thread-scroll-to-bottom absolute -top-12 z-10 self-center rounded-full border-border bg-background p-4 hover:bg-accent disabled:invisible" }), children: _jsx(ArrowDownIcon, {}) }));
+};
+const ThreadWelcome = () => {
+    return (_jsx("div", { className: "aui-thread-welcome-root mb-6 flex flex-col items-center px-4 text-center", children: _jsx("h1", { className: "aui-thread-welcome-message-inner text-2xl font-semibold", children: "How can I help you today?" }) }));
+};
+const ThreadSuggestions = () => {
+    return (_jsx("div", { className: "aui-thread-welcome-suggestions flex w-full flex-wrap items-center justify-center gap-2 px-4", children: _jsx(ThreadPrimitive.Suggestions, { children: () => _jsx(ThreadSuggestionItem, {}) }) }));
+};
+const ThreadSuggestionItem = () => {
+    return (_jsx("div", { className: "aui-thread-welcome-suggestion-display", children: _jsxs(SuggestionPrimitive.Trigger, { send: true, render: _jsx(Button, { variant: "ghost", className: "aui-thread-welcome-suggestion text-foreground hover:bg-muted border-border/60 h-auto gap-1.5 rounded-full border px-3.5 py-1.5 text-sm font-normal whitespace-nowrap transition-colors" }), children: [_jsx(SuggestionPrimitive.Title, { className: "aui-thread-welcome-suggestion-text-1" }), _jsx(SuggestionPrimitive.Description, { className: "aui-thread-welcome-suggestion-text-2 empty:hidden" })] }) }));
+};
+const Composer = () => {
+    return (_jsx(ComposerPrimitive.Root, { className: "aui-composer-root relative flex w-full flex-col", children: _jsxs(ComposerPrimitive.AttachmentDropzone, { render: _jsx("div", { "data-slot": "aui_composer-shell", className: "nc-transition-paint flex w-full flex-col gap-2 rounded-(--composer-radius) border border-border bg-(--composer-bg) p-(--composer-padding) shadow-raised focus-within:border-ring data-[dragging=true]:border-dashed data-[dragging=true]:border-ring data-[dragging=true]:bg-accent" }), children: [_jsx(ComposerAttachments, {}), _jsx(ComposerPrimitive.Input, { placeholder: "Send a message...", className: "aui-composer-input caret-primary placeholder:text-muted-foreground/80 max-h-32 min-h-10 w-full resize-none bg-transparent px-2.5 py-1 text-base outline-none", rows: 1, autoFocus: true, enterKeyHint: "send", "aria-label": "Message input" }), _jsx(ComposerAction, {})] }) }));
+};
+const ComposerAction = () => {
+    return (_jsxs("div", { className: "aui-composer-action-wrapper relative flex items-center justify-between", children: [_jsx(ComposerAddAttachment, {}), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs(AuiIf, { condition: (s) => s.thread.capabilities.dictation, children: [_jsx(AuiIf, { condition: (s) => s.composer.dictation == null, children: _jsx(ComposerPrimitive.Dictate, { render: _jsx(TooltipIconButton, { tooltip: "Voice input", side: "bottom", type: "button", variant: "ghost", size: "icon", className: "aui-composer-dictate size-7 rounded-full", "aria-label": "Start voice input" }), children: _jsx(MicIcon, { className: "aui-composer-dictate-icon size-4" }) }) }), _jsx(AuiIf, { condition: (s) => s.composer.dictation != null, children: _jsx(ComposerPrimitive.StopDictation, { render: _jsx(TooltipIconButton, { tooltip: "Stop dictation", side: "bottom", type: "button", variant: "ghost", size: "icon", className: "aui-composer-stop-dictation text-destructive size-7 rounded-full", "aria-label": "Stop voice input" }), children: _jsx(SquareIcon, { className: "aui-composer-stop-dictation-icon size-3.5 fill-current motion-safe:animate-pulse" }) }) })] }), _jsx(AuiIf, { condition: (s) => !s.thread.isRunning, children: _jsx(ComposerPrimitive.Send, { render: _jsx(TooltipIconButton, { tooltip: "Send message", side: "bottom", type: "button", variant: "default", size: "icon", className: "aui-composer-send size-7 rounded-full", "aria-label": "Send message" }), children: _jsx(ArrowUpIcon, { className: "aui-composer-send-icon size-4.5" }) }) }), _jsx(AuiIf, { condition: (s) => s.thread.isRunning, children: _jsx(ComposerPrimitive.Cancel, { render: _jsx(Button, { type: "button", variant: "default", size: "icon", className: "aui-composer-cancel size-7 rounded-full", "aria-label": "Stop generating" }), children: _jsx(SquareIcon, { className: "aui-composer-cancel-icon size-3.5 fill-current" }) }) })] })] }));
+};
+const MessageError = () => {
+    return (_jsx(MessagePrimitive.Error, { children: _jsx(ErrorPrimitive.Root, { className: "aui-message-error-root mt-2 rounded-md border border-[var(--nc-error-deep)] bg-[var(--nc-error-soft)] p-3 text-sm text-[var(--nc-error-deep)]", children: _jsx(ErrorPrimitive.Message, { className: "aui-message-error-message line-clamp-2" }) }) }));
+};
+const AssistantMessage = () => {
+    const { ToolFallback: ToolFallbackComponent = ToolFallback, ToolGroup, ReasoningGroup, } = useContext(ThreadComponentsContext);
+    const ACTION_BAR_PT = "pt-1.5";
+    // Keep the action bar inside the contained root's paint box, then cancel its reserved space in flow.
+    const ACTION_BAR_HEIGHT = `min-h-7.5 ${ACTION_BAR_PT}`;
+    return (_jsxs(MessagePrimitive.Root, { "data-slot": "aui_assistant-message-root", "data-role": "assistant", className: "relative -mb-7.5 pb-7.5 [contain-intrinsic-size:auto_200px] [content-visibility:auto]", children: [_jsxs("div", { "data-slot": "aui_assistant-message-content", className: "text-foreground px-2 leading-relaxed wrap-break-word", children: [_jsx(MessagePrimitive.GroupedParts, { groupBy: groupPartByType({
+                            reasoning: ["group-chainOfThought", "group-reasoning"],
+                            "tool-call": ["group-chainOfThought", "group-tool"],
+                            "standalone-tool-call": [],
+                        }), children: ({ part, children }) => {
+                            switch (part.type) {
+                                case "group-chainOfThought":
+                                    return _jsx("div", { "data-slot": "aui_chain-of-thought", children: children });
+                                case "group-tool":
+                                    if (ToolGroup) {
+                                        return _jsx(ToolGroup, { group: part, children: children });
+                                    }
+                                    return (_jsxs(ToolGroupRoot, { variant: "ghost", children: [_jsx(ToolGroupTrigger, { count: part.indices.length, active: part.status.type === "running" }), _jsx(ToolGroupContent, { children: children })] }));
+                                case "group-reasoning": {
+                                    if (ReasoningGroup) {
+                                        return _jsx(ReasoningGroup, { group: part, children: children });
+                                    }
+                                    const running = part.status.type === "running";
+                                    return (_jsxs(ReasoningRoot, { streaming: running, children: [_jsx(ReasoningTrigger, { active: running }), _jsx(ReasoningContent, { "aria-busy": running, children: _jsx(ReasoningText, { children: children }) })] }));
+                                }
+                                case "text":
+                                    return _jsx(MarkdownText, {});
+                                case "reasoning":
+                                    return _jsx(Reasoning, { ...part });
+                                case "tool-call":
+                                    return part.toolUI ?? _jsx(ToolFallbackComponent, { ...part });
+                                case "data":
+                                    return part.dataRendererUI;
+                                case "indicator":
+                                    return (_jsx("span", { "data-slot": "aui_assistant-message-indicator", className: "font-sans motion-safe:animate-pulse", "aria-label": "Assistant is working", children: "●" }));
+                                default:
+                                    return null;
+                            }
+                        } }), _jsx(MessageError, {})] }), _jsxs("div", { "data-slot": "aui_assistant-message-footer", className: cn("ms-2 flex items-center", ACTION_BAR_HEIGHT), children: [_jsx(BranchPicker, {}), _jsx(AssistantActionBar, {})] })] }));
+};
+const AssistantActionBar = () => {
+    return (_jsxs(ActionBarPrimitive.Root, { hideWhenRunning: true, autohide: "not-last", className: "aui-assistant-action-bar-root nc-transition-opacity col-start-3 row-start-2 -ms-1 flex gap-1 text-muted-foreground", children: [_jsxs(ActionBarPrimitive.Copy, { render: _jsx(TooltipIconButton, { tooltip: "Copy" }), children: [_jsx(AuiIf, { condition: (s) => s.message.isCopied, children: _jsx(CheckIcon, {}) }), _jsx(AuiIf, { condition: (s) => !s.message.isCopied, children: _jsx(CopyIcon, {}) })] }), _jsx(ActionBarPrimitive.Reload, { render: _jsx(TooltipIconButton, { tooltip: "Refresh" }), children: _jsx(RefreshCwIcon, {}) }), _jsxs(ActionBarMorePrimitive.Root, { children: [_jsx(ActionBarMorePrimitive.Trigger, { render: _jsx(TooltipIconButton, { tooltip: "More", className: "data-[state=open]:bg-accent" }), children: _jsx(MoreHorizontalIcon, {}) }), _jsx(ActionBarMorePrimitive.Content, { side: "bottom", align: "start", sideOffset: 6, className: "aui-action-bar-more-content nc-transition-opacity bg-popover/95 text-popover-foreground data-[state=closed]:opacity-0 data-[state=open]:opacity-100 z-50 min-w-[8rem] overflow-hidden rounded-xl border p-1.5 shadow-lg backdrop-blur-sm", children: _jsxs(ActionBarPrimitive.ExportMarkdown, { render: _jsx(ActionBarMorePrimitive.Item, { 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" }), children: [_jsx(DownloadIcon, { className: "size-4" }), "Export as Markdown"] }) })] })] }));
+};
+const UserMessage = () => {
+    return (_jsxs(MessagePrimitive.Root, { "data-slot": "aui_user-message-root", className: "grid auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] content-start gap-y-2 px-2 [contain-intrinsic-size:auto_200px] [content-visibility:auto] [&:where(>*)]:col-start-2", "data-role": "user", children: [_jsx(UserMessageAttachments, {}), _jsxs("div", { className: "aui-user-message-content-wrapper relative col-start-2 min-w-0", children: [_jsx("div", { className: "aui-user-message-content peer bg-muted text-foreground rounded-xl px-4 py-2 wrap-break-word empty:hidden", children: _jsx(MessagePrimitive.Parts, {}) }), _jsx("div", { className: "aui-user-action-bar-wrapper absolute start-0 top-1/2 -translate-x-full -translate-y-1/2 pe-2 peer-empty:hidden rtl:translate-x-full", children: _jsx(UserActionBar, {}) })] }), _jsx(BranchPicker, { "data-slot": "aui_user-branch-picker", className: "col-span-full col-start-1 row-start-3 -me-1 justify-end" })] }));
+};
+const UserActionBar = () => {
+    return (_jsx(ActionBarPrimitive.Root, { hideWhenRunning: true, autohide: "not-last", className: "aui-user-action-bar-root flex flex-col items-end", children: _jsx(ActionBarPrimitive.Edit, { render: _jsx(TooltipIconButton, { tooltip: "Edit", className: "aui-user-action-edit" }), children: _jsx(PencilIcon, {}) }) }));
+};
+const EditComposer = () => {
+    return (_jsx(MessagePrimitive.Root, { "data-slot": "aui_edit-composer-wrapper", className: "flex flex-col px-2 [contain-intrinsic-size:auto_200px] [content-visibility:auto]", children: _jsxs(ComposerPrimitive.Root, { className: "aui-edit-composer-root ms-auto flex w-full max-w-[85%] flex-col rounded-(--composer-radius) border border-border bg-(--composer-bg) shadow-raised", children: [_jsx(ComposerPrimitive.Input, { className: "aui-edit-composer-input text-foreground min-h-14 w-full resize-none bg-transparent px-4 pt-3 pb-1 text-base outline-none", autoFocus: true }), _jsxs("div", { className: "aui-edit-composer-footer mx-2.5 mb-2.5 flex items-center gap-1.5 self-end", children: [_jsx(ComposerPrimitive.Cancel, { render: _jsx(Button, { variant: "ghost", size: "sm", className: "h-8 rounded-full px-3.5" }), children: "Cancel" }), _jsx(ComposerPrimitive.Send, { render: _jsx(Button, { size: "sm", className: "h-8 rounded-full px-3.5" }), children: "Update" })] })] }) }));
+};
+const BranchPicker = ({ className, ...rest }) => {
+    return (_jsxs(BranchPickerPrimitive.Root, { hideWhenSingleBranch: true, className: cn("aui-branch-picker-root text-muted-foreground -ms-2 me-2 inline-flex items-center text-xs", className), ...rest, children: [_jsx(BranchPickerPrimitive.Previous, { render: _jsx(TooltipIconButton, { tooltip: "Previous" }), children: _jsx(ChevronLeftIcon, {}) }), _jsxs("span", { className: "aui-branch-picker-state font-medium", children: [_jsx(BranchPickerPrimitive.Number, {}), " / ", _jsx(BranchPickerPrimitive.Count, {})] }), _jsx(BranchPickerPrimitive.Next, { render: _jsx(TooltipIconButton, { tooltip: "Next" }), children: _jsx(ChevronRightIcon, {}) })] }));
+};

package/dist/internal/assistant-ui/tool-fallback.d.ts

@@ -0,0 +1,10 @@
+import { type ToolCallMessagePartComponent } from "@assistant-ui/react";
+import { Collapsible } from "../../components/collapsible";
+export type ToolFallbackRootProps = Omit<React.ComponentProps<typeof Collapsible>, "open" | "onOpenChange"> & {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    defaultOpen?: boolean;
+};
+declare const ToolFallback: ToolCallMessagePartComponent;
+export { ToolFallback };
+//# sourceMappingURL=tool-fallback.d.ts.map

package/dist/internal/assistant-ui/tool-fallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-fallback.d.ts","sourceRoot":"","sources":["../../../src/internal/assistant-ui/tool-fallback.tsx"],"names":[],"mappings":"AAIA,OAAO,EAOL,KAAK,4BAA4B,EAClC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,WAAW,EAA0C,MAAM,0BAA0B,CAAC;AAQ/F,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACtC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EACxC,MAAM,GAAG,cAAc,CACxB,GAAG;IACF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAieF,QAAA,MAAM,YAAY,EAAwC,4BAA4B,CAAC;AAIvF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/internal/assistant-ui/tool-fallback.js

@@ -0,0 +1,163 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useRef, useState } from "react";
+import { AlertCircleIcon, CheckIcon, ChevronDownIcon, LoaderIcon, XCircleIcon } from "lucide-react";
+import { useScrollLock, useToolCallElapsed, } from "@assistant-ui/react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../components/collapsible.js";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../../components/button.js";
+const ANIMATION_DURATION = 200;
+const pressable = "active:scale-[0.98]";
+function ToolFallbackRoot({ className, open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen = false, children, ...props }) {
+    const collapsibleRef = useRef(null);
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const lockScroll = useScrollLock(collapsibleRef, ANIMATION_DURATION);
+    const isControlled = controlledOpen !== undefined;
+    const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
+    const handleOpenChange = useCallback((open) => {
+        lockScroll();
+        if (!isControlled) {
+            setUncontrolledOpen(open);
+        }
+        controlledOnOpenChange?.(open);
+    }, [lockScroll, isControlled, controlledOnOpenChange]);
+    return (_jsx(Collapsible, { ref: collapsibleRef, "data-slot": "tool-fallback-root", open: isOpen, onOpenChange: handleOpenChange, className: cn("aui-tool-fallback-root group/tool-fallback-root w-full", className), style: {
+            "--animation-duration": `${ANIMATION_DURATION}ms`,
+        }, ...props, children: children }));
+}
+const statusIconMap = {
+    running: LoaderIcon,
+    complete: CheckIcon,
+    incomplete: XCircleIcon,
+    "requires-action": AlertCircleIcon,
+};
+const formatToolDuration = (ms) => {
+    if (ms < 1000)
+        return "<1s";
+    const seconds = ms / 1000;
+    if (seconds < 10)
+        return `${(Math.floor(seconds * 10) / 10).toFixed(1)}s`;
+    if (seconds < 60)
+        return `${Math.floor(seconds)}s`;
+    return `${Math.floor(seconds / 60)}m ${Math.floor(seconds % 60)}s`;
+};
+function ToolFallbackDuration({ className, ...props }) {
+    const elapsedMs = useToolCallElapsed();
+    if (elapsedMs === undefined)
+        return null;
+    return (_jsx("span", { "data-slot": "tool-fallback-duration", className: cn("aui-tool-fallback-duration text-muted-foreground text-xs tabular-nums", className), ...props, children: formatToolDuration(elapsedMs) }));
+}
+function ToolFallbackTrigger({ toolName, status, className, ...props }) {
+    const statusType = status?.type ?? "complete";
+    const isRunning = statusType === "running";
+    const isCancelled = status?.type === "incomplete" && status.reason === "cancelled";
+    const Icon = statusIconMap[statusType];
+    const label = isCancelled ? "Cancelled tool" : "Used tool";
+    return (_jsxs(CollapsibleTrigger, { "data-slot": "tool-fallback-trigger", className: cn("aui-tool-fallback-trigger nc-transition-paint group/trigger flex w-fit origin-left items-center gap-2 py-1.5 text-sm text-muted-foreground hover:text-foreground", className), ...props, children: [_jsx(Icon, { "data-slot": "tool-fallback-trigger-icon", className: cn("aui-tool-fallback-trigger-icon size-4 shrink-0", isCancelled && "text-muted-foreground", isRunning && "animate-spin [animation-duration:0.6s]") }), _jsxs("span", { "data-slot": "tool-fallback-trigger-label", className: cn("aui-tool-fallback-trigger-label-wrapper relative inline-block text-start leading-none", isCancelled && "text-muted-foreground line-through"), children: [_jsxs("span", { children: [label, ": ", _jsx("b", { children: toolName })] }), isRunning && (_jsxs("span", { "aria-hidden": true, "data-slot": "tool-fallback-trigger-shimmer", className: "aui-tool-fallback-trigger-shimmer shimmer pointer-events-none absolute inset-0 motion-reduce:animate-none", children: [label, ": ", _jsx("b", { children: toolName })] }))] }), _jsx(ToolFallbackDuration, {}), _jsx(ChevronDownIcon, { "data-slot": "tool-fallback-trigger-chevron", className: cn("aui-tool-fallback-trigger-chevron size-4 shrink-0", "transition-transform duration-(--animation-duration) ease-[var(--nc-ease-out-strong)] motion-reduce:transition-none", "-rotate-90", "group-data-open/trigger:rotate-0", "group-data-panel-open/trigger:rotate-0") })] }));
+}
+function ToolFallbackContent({ className, children, ...props }) {
+    return (_jsx(CollapsibleContent, { "data-slot": "tool-fallback-content", className: cn("aui-tool-fallback-content relative overflow-hidden text-sm outline-none", "group/collapsible-content", "data-closed:pointer-events-none", className), ...props, children: _jsx("div", { className: cn("nc-transition-opacity flex flex-col gap-2 ps-6 pt-1 pb-2"), children: children }) }));
+}
+function ToolFallbackArgs({ argsText, className, ...props }) {
+    if (!argsText)
+        return null;
+    return (_jsx("div", { "data-slot": "tool-fallback-args", className: cn("aui-tool-fallback-args", className), ...props, children: _jsx("pre", { className: "aui-tool-fallback-args-value bg-muted/50 text-foreground/90 rounded-md p-2.5 text-xs whitespace-pre-wrap", children: argsText }) }));
+}
+function ToolFallbackResult({ result, className, ...props }) {
+    if (result === undefined)
+        return null;
+    return (_jsxs("div", { "data-slot": "tool-fallback-result", className: cn("aui-tool-fallback-result", className), ...props, children: [_jsx("p", { className: "aui-tool-fallback-result-header text-muted-foreground text-xs font-medium", children: "Result:" }), _jsx("pre", { className: "aui-tool-fallback-result-content bg-muted/50 text-foreground/90 mt-1 rounded-md p-2.5 text-xs whitespace-pre-wrap", children: typeof result === "string" ? result : JSON.stringify(result, null, 2) })] }));
+}
+function ToolFallbackError({ status, className, ...props }) {
+    if (status?.type !== "incomplete")
+        return null;
+    const error = status.error;
+    const errorText = error ? (typeof error === "string" ? error : JSON.stringify(error)) : null;
+    if (!errorText)
+        return null;
+    const isCancelled = status.reason === "cancelled";
+    const headerText = isCancelled ? "Cancelled reason:" : "Error:";
+    return (_jsxs("div", { "data-slot": "tool-fallback-error", className: cn("aui-tool-fallback-error", className), ...props, children: [_jsx("p", { className: "aui-tool-fallback-error-header text-muted-foreground font-semibold", children: headerText }), _jsx("p", { className: "aui-tool-fallback-error-reason text-muted-foreground", children: errorText })] }));
+}
+const APPROVED_RESULT = "Approved by user";
+const DENIED_RESULT = "User denied tool execution";
+const APPROVAL_OPTION_DEFAULT_LABELS = {
+    "allow-once": "Allow",
+    "allow-always": "Always allow",
+    "reject-once": "Deny",
+    "reject-always": "Always deny",
+};
+const isAllowKind = (kind) => kind === "allow-once" || kind === "allow-always";
+const approvalOptionLabel = (option) => option.label ??
+    (Object.hasOwn(APPROVAL_OPTION_DEFAULT_LABELS, option.kind)
+        ? APPROVAL_OPTION_DEFAULT_LABELS[option.kind]
+        : undefined) ??
+    option.id;
+function ToolFallbackApproval({ className, addResult, resume, interrupt, approval, respondToApproval, ...props }) {
+    const [submitted, setSubmitted] = useState(false);
+    const [confirmingId, setConfirmingId] = useState(null);
+    if (approval != null && (approval.approved !== undefined || approval.resolution !== undefined))
+        return null;
+    // Custom (`_`-prefixed) kinds cannot be resolved to a boolean by the kit;
+    // hosts using custom kinds render their own bar. A declared option list is
+    // a host constraint: the kit never adds an approval path beyond it, but
+    // always preserves a refusal path.
+    const declaredOptions = respondToApproval ? approval?.options : undefined;
+    const options = declaredOptions?.filter((o) => Object.hasOwn(APPROVAL_OPTION_DEFAULT_LABELS, o.kind));
+    const respond = (approved) => {
+        if (submitted)
+            return;
+        if (approval != null && approval.approved === undefined && respondToApproval) {
+            respondToApproval({ approved });
+        }
+        else if (interrupt) {
+            resume?.({ approved });
+        }
+        else {
+            addResult?.(approved ? APPROVED_RESULT : DENIED_RESULT);
+        }
+        setSubmitted(true);
+    };
+    const respondWithOption = (option) => {
+        if (submitted)
+            return;
+        respondToApproval?.({ optionId: option.id });
+        setSubmitted(true);
+        setConfirmingId(null);
+    };
+    const handleOption = (option) => {
+        if (option.confirm) {
+            setConfirmingId(option.id);
+        }
+        else {
+            respondWithOption(option);
+        }
+    };
+    const confirming = confirmingId != null ? options?.find((o) => o.id === confirmingId) : undefined;
+    if (confirming) {
+        const confirmMeta = typeof confirming.confirm === "object" ? confirming.confirm : undefined;
+        const confirmDescription = confirmMeta?.description ?? confirming.description;
+        return (_jsxs("div", { "data-slot": "tool-fallback-approval-confirm", className: cn("aui-tool-fallback-approval-confirm flex flex-col gap-2 pt-1", className), ...props, children: [_jsx("p", { className: "aui-tool-fallback-approval-confirm-title font-semibold", children: confirmMeta?.title ?? `${approvalOptionLabel(confirming)}?` }), confirmDescription && (_jsx("p", { className: "aui-tool-fallback-approval-confirm-description text-muted-foreground", children: confirmDescription })), confirming.grants && confirming.grants.length > 0 && (_jsx("ul", { className: "aui-tool-fallback-approval-confirm-grants flex flex-col gap-1", children: confirming.grants.map((grant) => (_jsx("li", { children: _jsx("code", { className: "aui-tool-fallback-approval-confirm-grant bg-muted rounded px-1.5 py-0.5 text-xs", children: grant }) }, grant))) })), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { size: "sm", className: pressable, onClick: () => respondWithOption(confirming), disabled: submitted, children: "Confirm" }), _jsx(Button, { size: "sm", variant: "outline", className: pressable, onClick: () => setConfirmingId(null), disabled: submitted, children: "Back" })] })] }));
+    }
+    if (declaredOptions && declaredOptions.length > 0) {
+        const allowOptions = options?.filter((o) => isAllowKind(o.kind)) ?? [];
+        const rejectOptions = options?.filter((o) => !isAllowKind(o.kind)) ?? [];
+        return (_jsxs("div", { "data-slot": "tool-fallback-approval", className: cn("aui-tool-fallback-approval flex flex-wrap items-center gap-2 pt-1", className), ...props, children: [[...allowOptions, ...rejectOptions].map((option) => (_jsx(Button, { size: "sm", variant: option === allowOptions[0] ? "default" : "outline", className: pressable, onClick: () => handleOption(option), disabled: submitted, children: approvalOptionLabel(option) }, option.id))), rejectOptions.length === 0 && (_jsx(Button, { size: "sm", variant: "outline", className: pressable, onClick: () => respond(false), disabled: submitted, children: "Deny" }))] }));
+    }
+    return (_jsxs("div", { "data-slot": "tool-fallback-approval", className: cn("aui-tool-fallback-approval flex items-center gap-2 pt-1", className), ...props, children: [_jsx(Button, { size: "sm", className: pressable, onClick: () => respond(true), disabled: submitted, children: "Allow" }), _jsx(Button, { size: "sm", variant: "outline", className: pressable, onClick: () => respond(false), disabled: submitted, children: "Deny" })] }));
+}
+const ToolFallbackImpl = ({ toolName, argsText, result, status, addResult, resume, interrupt, approval, respondToApproval, }) => {
+    const isCancelled = status?.type === "incomplete" && status.reason === "cancelled";
+    const isRequiresAction = status?.type === "requires-action";
+    const [open, setOpen] = useState(isRequiresAction);
+    const [prevRequiresAction, setPrevRequiresAction] = useState(isRequiresAction);
+    if (isRequiresAction !== prevRequiresAction) {
+        setPrevRequiresAction(isRequiresAction);
+        if (isRequiresAction)
+            setOpen(true);
+    }
+    return (_jsxs(ToolFallbackRoot, { open: open, onOpenChange: setOpen, children: [_jsx(ToolFallbackTrigger, { toolName: toolName, status: status }), _jsxs(ToolFallbackContent, { children: [_jsx(ToolFallbackError, { status: status }), _jsx(ToolFallbackArgs, { argsText: argsText, className: cn(isCancelled && "opacity-60") }), isRequiresAction && (_jsx(ToolFallbackApproval, { addResult: addResult, resume: resume, interrupt: interrupt, approval: approval, respondToApproval: respondToApproval })), !isCancelled && _jsx(ToolFallbackResult, { result: result })] })] }));
+};
+const ToolFallback = memo(ToolFallbackImpl);
+ToolFallback.displayName = "ToolFallback";
+export { ToolFallback };

package/dist/internal/assistant-ui/tool-group.d.ts

@@ -0,0 +1,18 @@
+import { type VariantProps } from "class-variance-authority";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../components/collapsible";
+declare const toolGroupVariants: (props?: ({
+    variant?: "outline" | "ghost" | "muted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ToolGroupRootProps = Omit<React.ComponentProps<typeof Collapsible>, "open" | "onOpenChange"> & VariantProps<typeof toolGroupVariants> & {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    defaultOpen?: boolean;
+};
+declare function ToolGroupRoot({ className, variant, open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, children, ...props }: ToolGroupRootProps): import("react").JSX.Element;
+declare function ToolGroupTrigger({ count, active, className, ...props }: React.ComponentProps<typeof CollapsibleTrigger> & {
+    count: number;
+    active?: boolean;
+}): import("react").JSX.Element;
+declare function ToolGroupContent({ className, children, ...props }: React.ComponentProps<typeof CollapsibleContent>): import("react").JSX.Element;
+export { ToolGroupRoot, ToolGroupTrigger, ToolGroupContent };
+//# sourceMappingURL=tool-group.d.ts.map

package/dist/internal/assistant-ui/tool-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-group.d.ts","sourceRoot":"","sources":["../../../src/internal/assistant-ui/tool-group.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAK/F,QAAA,MAAM,iBAAiB;;8EASrB,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EACxC,MAAM,GAAG,cAAc,CACxB,GACC,YAAY,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACvC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEJ,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,OAAO,EACP,IAAI,EAAE,cAAc,EACpB,YAAY,EAAE,sBAAsB,EACpC,WAAmB,EACnB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAqCpB;AAED,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,MAAc,EACd,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,GAAG;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,+BAqDA;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,+BAyBjD;AAED,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/internal/assistant-ui/tool-group.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+import { ChevronDownIcon, LoaderIcon } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { useScrollLock } from "@assistant-ui/react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../components/collapsible.js";
+import { cn } from "../../lib/utils.js";
+const ANIMATION_DURATION = 200;
+const toolGroupVariants = cva("aui-tool-group-root group/tool-group w-full", {
+    variants: {
+        variant: {
+            outline: "rounded-lg border py-3",
+            ghost: "",
+            muted: "border-muted-foreground/30 bg-muted/30 rounded-lg border py-3",
+        },
+    },
+    defaultVariants: { variant: "outline" },
+});
+function ToolGroupRoot({ className, variant, open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen = false, children, ...props }) {
+    const collapsibleRef = useRef(null);
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const lockScroll = useScrollLock(collapsibleRef, ANIMATION_DURATION);
+    const isControlled = controlledOpen !== undefined;
+    const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
+    const handleOpenChange = useCallback((open) => {
+        lockScroll();
+        if (!isControlled) {
+            setUncontrolledOpen(open);
+        }
+        controlledOnOpenChange?.(open);
+    }, [lockScroll, isControlled, controlledOnOpenChange]);
+    return (_jsx(Collapsible, { ref: collapsibleRef, "data-slot": "tool-group-root", "data-variant": variant ?? "outline", open: isOpen, onOpenChange: handleOpenChange, className: cn(toolGroupVariants({ variant }), "group/tool-group-root", className), style: {
+            "--animation-duration": `${ANIMATION_DURATION}ms`,
+        }, ...props, children: children }));
+}
+function ToolGroupTrigger({ count, active = false, className, ...props }) {
+    const label = `${count} tool ${count === 1 ? "call" : "calls"}`;
+    return (_jsxs(CollapsibleTrigger, { "data-slot": "tool-group-trigger", className: cn("aui-tool-group-trigger nc-transition-paint group/trigger flex origin-left items-center gap-2 text-sm", "group-data-[variant=ghost]/tool-group-root:text-muted-foreground group-data-[variant=ghost]/tool-group-root:hover:text-foreground group-data-[variant=ghost]/tool-group-root:py-1.5", "group-data-[variant=outline]/tool-group-root:w-full group-data-[variant=outline]/tool-group-root:px-4", "group-data-[variant=muted]/tool-group-root:w-full group-data-[variant=muted]/tool-group-root:px-4", className), ...props, children: [active && (_jsx(LoaderIcon, { "data-slot": "tool-group-trigger-loader", className: "aui-tool-group-trigger-loader size-3 shrink-0 animate-spin [animation-duration:0.6s]" })), _jsxs("span", { "data-slot": "tool-group-trigger-label", className: cn("aui-tool-group-trigger-label-wrapper relative inline-block text-start leading-none font-medium", "group-data-[variant=ghost]/tool-group-root:font-normal", "group-data-[variant=outline]/tool-group-root:grow", "group-data-[variant=muted]/tool-group-root:grow"), children: [_jsx("span", { className: "text-xs", children: label }), active && (_jsx("span", { "aria-hidden": true, "data-slot": "tool-group-trigger-shimmer", className: "aui-tool-group-trigger-shimmer shimmer pointer-events-none absolute inset-0 text-xs motion-reduce:animate-none", children: label }))] }), _jsx(ChevronDownIcon, { "data-slot": "tool-group-trigger-chevron", className: cn("aui-tool-group-trigger-chevron size-3 shrink-0", "transition-transform duration-(--animation-duration) ease-[var(--nc-ease-out-strong)] motion-reduce:transition-none", "-rotate-90", "group-data-open/trigger:rotate-0", "group-data-panel-open/trigger:rotate-0") })] }));
+}
+function ToolGroupContent({ className, children, ...props }) {
+    return (_jsx(CollapsibleContent, { "data-slot": "tool-group-content", className: cn("aui-tool-group-content relative overflow-hidden text-sm outline-none", "group/collapsible-content", "data-closed:pointer-events-none", className), ...props, children: _jsx("div", { className: cn("mt-2 flex flex-col gap-2", "group-data-[variant=ghost]/tool-group-root:mt-1 group-data-[variant=ghost]/tool-group-root:gap-1", "group-data-[variant=outline]/tool-group-root:mt-3 group-data-[variant=outline]/tool-group-root:border-t group-data-[variant=outline]/tool-group-root:px-4 group-data-[variant=outline]/tool-group-root:pt-3", "group-data-[variant=muted]/tool-group-root:mt-3 group-data-[variant=muted]/tool-group-root:border-t group-data-[variant=muted]/tool-group-root:px-4 group-data-[variant=muted]/tool-group-root:pt-3", "[&>*]:nc-transition-opacity"), children: children }) }));
+}
+export { ToolGroupRoot, ToolGroupTrigger, ToolGroupContent };

package/dist/internal/assistant-ui/tooltip-icon-button.d.ts

@@ -0,0 +1,8 @@
+import { type ComponentPropsWithRef } from "react";
+import { Button } from "../../components/button";
+export type TooltipIconButtonProps = ComponentPropsWithRef<typeof Button> & {
+    tooltip: string;
+    side?: "top" | "bottom" | "left" | "right";
+};
+export declare const TooltipIconButton: import("react").ForwardRefExoticComponent<Omit<TooltipIconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=tooltip-icon-button.d.ts.map

package/dist/internal/assistant-ui/tooltip-icon-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-icon-button.d.ts","sourceRoot":"","sources":["../../../src/internal/assistant-ui/tooltip-icon-button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,qBAAqB,EAAc,MAAM,OAAO,CAAC;AAG/D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,MAAM,sBAAsB,GAAG,qBAAqB,CAAC,OAAO,MAAM,CAAC,GAAG;IAC1E,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,iBAAiB,mIAwB7B,CAAC"}

package/dist/internal/assistant-ui/tooltip-icon-button.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../components/tooltip.js";
+import { Button } from "../../components/button.js";
+import { cn } from "../../lib/utils.js";
+export const TooltipIconButton = forwardRef(({ children, tooltip, side = "bottom", className, ...rest }, ref) => {
+    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsxs(TooltipTrigger, { render: _jsx(Button, { variant: "ghost", size: "icon", ...rest, className: cn("aui-button-icon size-6 p-1", className), ref: ref }), children: [children, _jsx("span", { className: "aui-sr-only sr-only", children: tooltip })] }), _jsx(TooltipContent, { side: side, children: tooltip })] }) }));
+});
+TooltipIconButton.displayName = "TooltipIconButton";