@ciridae/ui 0.2.0

package/dist/components/agentic/prompt-input.d.ts

@@ -0,0 +1,79 @@
+import * as React from "react";
+export { AttachmentActionAddFiles as PromptInputActionAddAttachments, AttachmentActionAddScreenshot as PromptInputActionAddScreenshot, } from "@ciridae/ui/attachments";
+export type { AttachmentActionAddFilesProps as PromptInputActionAddAttachmentsProps, AttachmentActionAddScreenshotProps as PromptInputActionAddScreenshotProps, } from "@ciridae/ui/attachments";
+export * from "@ciridae/ui/prompt-input-action-menu";
+export * from "@ciridae/ui/prompt-input-command";
+export * from "@ciridae/ui/prompt-input-hover-card";
+export * from "@ciridae/ui/prompt-input-select";
+export * from "@ciridae/ui/prompt-input-tabs";
+import { type AgenticAttachment, type AttachmentProviderProps } from "@ciridae/ui/attachments";
+import type { AgenticChatStatus } from "@ciridae/ui/types";
+import { Button } from "@ciridae/ui/button";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupTextarea } from "@ciridae/ui/input-group";
+type PromptInputMessage = {
+    attachments: AgenticAttachment[];
+    text: string;
+};
+type PromptInputTextContextValue = {
+    clear: () => void;
+    setValue: (value: string) => void;
+    value: string;
+};
+type PromptInputProviderContextValue = {
+    text: PromptInputTextContextValue;
+};
+type PromptInputProviderProps = AttachmentProviderProps & {
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    value?: string;
+};
+type PromptInputDensity = "comfortable" | "compact";
+type PromptInputSurface = "glass" | "solid";
+type PromptInputProps = Omit<React.ComponentProps<"form">, "onError" | "onSubmit"> & Pick<AttachmentProviderProps, "accept" | "maxAttachmentSizeMb" | "maxAttachments" | "multiple" | "onAttachmentError" | "onCaptureScreenshot"> & {
+    density?: PromptInputDensity;
+    disabled?: boolean;
+    globalDrop?: boolean;
+    onSubmit?: (message: PromptInputMessage) => void | Promise<void>;
+    status?: AgenticChatStatus;
+    surface?: PromptInputSurface;
+};
+type PromptInputBodyProps = React.ComponentProps<typeof InputGroup>;
+type PromptInputTextareaProps = Omit<React.ComponentProps<typeof InputGroupTextarea>, "onChange"> & {
+    onValueChange?: (value: string) => void;
+    value?: string;
+};
+type PromptInputHeaderProps = React.ComponentProps<"div">;
+type PromptInputFooterProps = React.ComponentProps<"div">;
+type PromptInputToolsProps = React.ComponentProps<typeof InputGroupAddon>;
+type PromptInputButtonProps = React.ComponentProps<typeof InputGroupButton> & {
+    label?: string;
+    tooltip?: string;
+};
+type PromptInputSubmitProps = React.ComponentProps<typeof Button> & {
+    label?: string;
+    onStop?: () => void;
+    status?: AgenticChatStatus;
+    stopLabel?: string;
+};
+type PromptInputFocusHintProps = React.ComponentProps<"div"> & {
+    visible?: boolean;
+};
+type PromptInputDropOverlayProps = React.ComponentProps<"div"> & {
+    icon?: React.ReactNode;
+    visible?: boolean;
+};
+declare function PromptInputProvider({ children, defaultValue, onValueChange, value, ...attachmentProviderProps }: PromptInputProviderProps): import("react/jsx-runtime").JSX.Element;
+declare function usePromptInputProvider(): PromptInputProviderContextValue;
+declare function useOptionalPromptInputProvider(): PromptInputProviderContextValue | null;
+declare function PromptInput(props: PromptInputProps): import("react/jsx-runtime").JSX.Element;
+declare function PromptInputBody({ className, ...props }: PromptInputBodyProps): import("react/jsx-runtime").JSX.Element;
+declare function PromptInputTextarea({ className, disabled, onKeyDown, onPaste, onValueChange, value, ...props }: PromptInputTextareaProps): import("react/jsx-runtime").JSX.Element;
+declare function PromptInputFocusHint({ children, className, visible, ...props }: PromptInputFocusHintProps): import("react/jsx-runtime").JSX.Element | null;
+declare function PromptInputDropOverlay({ children, className, icon, visible, ...props }: PromptInputDropOverlayProps): import("react/jsx-runtime").JSX.Element | null;
+declare function PromptInputHeader({ className, ...props }: PromptInputHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function PromptInputFooter({ className, ...props }: PromptInputFooterProps): import("react/jsx-runtime").JSX.Element;
+declare function PromptInputTools({ align, className, ...props }: PromptInputToolsProps): import("react/jsx-runtime").JSX.Element;
+declare function PromptInputButton({ children, className, label, size, tooltip, variant, ...props }: PromptInputButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function PromptInputSubmit({ children, className, disabled, label, onClick, onStop, size, status, stopLabel, type, variant, ...props }: PromptInputSubmitProps): import("react/jsx-runtime").JSX.Element;
+export { PromptInput, PromptInputBody, PromptInputButton, PromptInputDropOverlay, PromptInputFooter, PromptInputFocusHint, PromptInputHeader, PromptInputProvider, PromptInputSubmit, PromptInputTextarea, PromptInputTools, useOptionalPromptInputProvider, usePromptInputProvider, };
+export type { PromptInputBodyProps, PromptInputButtonProps, PromptInputDensity, PromptInputDropOverlayProps, PromptInputFooterProps, PromptInputFocusHintProps, PromptInputHeaderProps, PromptInputMessage, PromptInputProps, PromptInputProviderContextValue, PromptInputProviderProps, PromptInputSubmitProps, PromptInputSurface, PromptInputTextareaProps, PromptInputTextContextValue, PromptInputToolsProps, };

package/dist/components/agentic/prompt-input.js

@@ -0,0 +1,206 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable max-lines, react-refresh/only-export-components */
+import { ArrowUpIcon, SquareIcon, UploadIcon } from "lucide-react";
+import * as React from "react";
+export { AttachmentActionAddFiles as PromptInputActionAddAttachments, AttachmentActionAddScreenshot as PromptInputActionAddScreenshot, } from "@ciridae/ui/attachments";
+export * from "@ciridae/ui/prompt-input-action-menu";
+export * from "@ciridae/ui/prompt-input-command";
+export * from "@ciridae/ui/prompt-input-hover-card";
+export * from "@ciridae/ui/prompt-input-select";
+export * from "@ciridae/ui/prompt-input-tabs";
+import { AttachmentProvider, prepareAttachmentsForSubmit, useAttachmentDropTarget, useAttachments, useOptionalAttachments, } from "@ciridae/ui/attachments";
+import { Button } from "@ciridae/ui/button";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupTextarea, } from "@ciridae/ui/input-group";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@ciridae/ui/tooltip";
+import { cn, glassSurface, glassSurfaceFocus } from "@ciridae/ui/utils";
+const PromptInputProviderContext = React.createContext(null);
+const PromptInputContext = React.createContext({
+    density: "comfortable",
+    surface: "solid",
+    status: "idle",
+});
+function PromptInputProvider({ children, defaultValue = "", onValueChange, value, ...attachmentProviderProps }) {
+    const [localValue, setLocalValue] = React.useState(defaultValue);
+    const resolvedValue = value ?? localValue;
+    const setValue = React.useCallback((nextValue) => {
+        if (value === undefined)
+            setLocalValue(nextValue);
+        onValueChange?.(nextValue);
+    }, [onValueChange, value]);
+    const clear = React.useCallback(() => setValue(""), [setValue]);
+    const contextValue = React.useMemo(() => ({
+        text: {
+            clear,
+            setValue,
+            value: resolvedValue,
+        },
+    }), [clear, resolvedValue, setValue]);
+    return (_jsx(AttachmentProvider, { ...attachmentProviderProps, children: _jsx(PromptInputProviderContext.Provider, { value: contextValue, children: children }) }));
+}
+function usePromptInputProvider() {
+    const context = React.useContext(PromptInputProviderContext);
+    if (!context) {
+        throw new Error("usePromptInputProvider must be used within PromptInputProvider.");
+    }
+    return context;
+}
+function useOptionalPromptInputProvider() {
+    return React.useContext(PromptInputProviderContext);
+}
+function PromptInput(props) {
+    const { accept, children, maxAttachmentSizeMb, maxAttachments, multiple, onAttachmentError, onCaptureScreenshot, ...innerProps } = props;
+    const existingAttachments = useOptionalAttachments();
+    if (existingAttachments)
+        return _jsx(PromptInputInner, { ...innerProps, children: children });
+    return (_jsx(AttachmentProvider, { accept: accept, maxAttachmentSizeMb: maxAttachmentSizeMb, maxAttachments: maxAttachments, multiple: multiple, onAttachmentError: onAttachmentError, onCaptureScreenshot: onCaptureScreenshot, children: _jsx(PromptInputInner, { ...innerProps, children: children }) }));
+}
+function PromptInputInner({ children, className, density = "comfortable", disabled, globalDrop, onSubmit, status = "idle", surface = "solid", ...props }) {
+    const contextValue = React.useMemo(() => ({ density, disabled, status, surface }), [density, disabled, status, surface]);
+    const formRef = React.useRef(null);
+    const attachments = useAttachments();
+    const provider = useOptionalPromptInputProvider();
+    useAttachmentDropTarget({ global: globalDrop, ref: formRef });
+    const handleSubmit = React.useCallback(async (event) => {
+        event.preventDefault();
+        if (!onSubmit)
+            return;
+        const form = event.currentTarget;
+        const text = getPromptInputFormText(form, provider?.text.value);
+        const submitAttachments = await prepareAttachmentsForSubmit(attachments.files);
+        try {
+            await onSubmit({ attachments: submitAttachments, text });
+            attachments.clear();
+            if (provider)
+                provider.text.clear();
+            else
+                form.reset();
+        }
+        catch {
+            // Keep composer state intact so hosts can show retry affordances.
+        }
+    }, [attachments, onSubmit, provider]);
+    return (_jsx(PromptInputContext.Provider, { value: contextValue, children: _jsx("form", { "data-disabled": disabled ? "true" : undefined, "data-density": density, "data-slot": "prompt-input", "data-status": status, "data-surface": surface, onSubmit: handleSubmit, ref: formRef, className: cn("group/prompt-input motion-standard relative grid w-full gap-2 overflow-hidden rounded-lg border transition-all outline-none data-[disabled=true]:opacity-60", density === "comfortable" ? "p-2" : "p-1.5", surface === "glass"
+                ? [glassSurface, glassSurfaceFocus]
+                : [
+                    "border-border/80 bg-background/96 shadow-md",
+                    "focus-within:border-ring focus-within:ring-[var(--focus-ring-width)] focus-within:ring-ring/35",
+                ], className), ...props, children: children }) }));
+}
+function getPromptInputFormText(form, fallback = "") {
+    const textarea = form.querySelector('[data-slot="prompt-input-textarea"]');
+    if (textarea)
+        return textarea.value;
+    const formData = new FormData(form);
+    const message = formData.get("message");
+    return typeof message === "string" ? message : fallback;
+}
+function PromptInputBody({ className, ...props }) {
+    const { density } = React.useContext(PromptInputContext);
+    return (_jsx(InputGroup, { "data-slot": "prompt-input-body", className: cn("items-stretch border-0 bg-transparent shadow-none dark:bg-transparent", density === "comfortable" ? "min-h-24" : "min-h-[4.25rem]", className), ...props }));
+}
+function PromptInputTextarea({ className, disabled, onKeyDown, onPaste, onValueChange, value, ...props }) {
+    const context = React.useContext(PromptInputContext);
+    const provider = useOptionalPromptInputProvider();
+    const attachments = useAttachments();
+    const isDisabled = disabled ?? context.disabled;
+    const resolvedValue = value ?? provider?.text.value;
+    const handleKeyDown = React.useCallback((event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented)
+            return;
+        if (event.key === "Backspace" &&
+            event.currentTarget.value === "" &&
+            attachments.files.length > 0) {
+            event.preventDefault();
+            const lastAttachment = attachments.files[attachments.files.length - 1];
+            if (lastAttachment)
+                attachments.remove(lastAttachment.id);
+            return;
+        }
+        if (event.key !== "Enter" || event.shiftKey)
+            return;
+        if (event.nativeEvent.isComposing)
+            return;
+        if (isStopStatus(context.status))
+            return;
+        event.preventDefault();
+        event.currentTarget.form?.requestSubmit();
+    }, [attachments, context.status, onKeyDown]);
+    const handlePaste = React.useCallback((event) => {
+        onPaste?.(event);
+        if (event.defaultPrevented)
+            return;
+        const files = Array.from(event.clipboardData.files);
+        if (files.length === 0)
+            return;
+        event.preventDefault();
+        attachments.add(files);
+    }, [attachments, onPaste]);
+    const handleChange = React.useCallback((event) => {
+        onValueChange?.(event.target.value);
+        if (value === undefined)
+            provider?.text.setValue(event.target.value);
+    }, [onValueChange, provider, value]);
+    return (_jsx(InputGroupTextarea, { ...props, "data-slot": "prompt-input-textarea", disabled: isDisabled, name: props.name ?? "message", value: resolvedValue, onChange: handleChange, onKeyDown: handleKeyDown, onPaste: handlePaste, className: cn("px-2 py-2 text-sm leading-relaxed placeholder:text-muted-foreground/70", context.density === "comfortable"
+            ? "min-h-24"
+            : "min-h-6 max-h-40 resize-none overflow-y-auto", className) }));
+}
+function PromptInputFocusHint({ children, className, visible = true, ...props }) {
+    const { density } = React.useContext(PromptInputContext);
+    if (!visible)
+        return null;
+    return (_jsx("div", { "aria-hidden": "true", "data-slot": "prompt-input-focus-hint", className: cn("pointer-events-none absolute right-2.5 z-10 flex items-center gap-1 px-1.5 py-0.5 text-xs text-muted-foreground/70 transition-opacity group-focus-within/prompt-input:opacity-0", density === "comfortable" ? "top-2.5" : "top-1.5", className), ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsx("kbd", { className: "font-sans", children: "\u2318L" }), _jsx("span", { children: "to focus" })] })) }));
+}
+function PromptInputDropOverlay({ children, className, icon, visible = false, ...props }) {
+    if (!visible)
+        return null;
+    return (_jsx("div", { "aria-hidden": "true", "data-slot": "prompt-input-drop-overlay", className: cn("pointer-events-none absolute inset-0 z-20 grid place-items-center bg-muted/55 text-foreground dark:bg-muted/40", className), ...props, children: children ?? icon ?? _jsx(UploadIcon, { className: "size-7 text-foreground/65" }) }));
+}
+function PromptInputHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "prompt-input-header", className: cn("flex min-w-0 items-center justify-between gap-2 px-1", className), ...props }));
+}
+function PromptInputFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "prompt-input-footer", className: cn("flex min-w-0 items-center justify-between gap-2 px-1", className), ...props }));
+}
+function PromptInputTools({ align = "block-end", className, ...props }) {
+    return (_jsx(InputGroupAddon, { align: align, "data-slot": "prompt-input-tools", className: cn("min-w-0 justify-between gap-2 px-0 pb-0", className), ...props }));
+}
+function PromptInputButton({ children, className, label, size = "icon-sm", tooltip, variant = "ghost", ...props }) {
+    const button = (_jsx(InputGroupButton, { "aria-label": label ?? tooltip, "data-slot": "prompt-input-button", size: size, variant: variant, className: cn("shrink-0 text-muted-foreground", className), ...props, children: children }));
+    if (!tooltip)
+        return button;
+    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: button }), _jsx(TooltipContent, { children: tooltip })] }) }));
+}
+function PromptInputSubmit({ children, className, disabled, label = "Send message", onClick, onStop, size = "icon-sm", status, stopLabel = "Stop response", type, variant = "default", ...props }) {
+    const context = React.useContext(PromptInputContext);
+    const resolvedStatus = status ?? context.status;
+    const isStopping = isStopStatus(resolvedStatus);
+    const resolvedDisabled = disabled ?? context.disabled;
+    const handleClick = React.useCallback((event) => {
+        onClick?.(event);
+        if (event.defaultPrevented || !isStopping)
+            return;
+        event.preventDefault();
+        onStop?.();
+    }, [isStopping, onClick, onStop]);
+    return (_jsx(Button, { "aria-label": isStopping ? stopLabel : label, "data-slot": "prompt-input-submit", "data-status": resolvedStatus, disabled: resolvedDisabled, onClick: handleClick, size: size, type: getSubmitType(isStopping, type), variant: getSubmitVariant(isStopping, variant), className: cn("shrink-0", className), ...props, children: children ?? getSubmitIcon(isStopping) }));
+}
+function isStopStatus(status) {
+    return status === "submitted" || status === "streaming";
+}
+function getSubmitType(isStopping, type) {
+    if (isStopping)
+        return "button";
+    return type ?? "submit";
+}
+function getSubmitVariant(isStopping, variant) {
+    if (isStopping)
+        return "outline";
+    return variant;
+}
+function getSubmitIcon(isStopping) {
+    if (isStopping)
+        return _jsx(SquareIcon, {});
+    return _jsx(ArrowUpIcon, {});
+}
+export { PromptInput, PromptInputBody, PromptInputButton, PromptInputDropOverlay, PromptInputFooter, PromptInputFocusHint, PromptInputHeader, PromptInputProvider, PromptInputSubmit, PromptInputTextarea, PromptInputTools, useOptionalPromptInputProvider, usePromptInputProvider, };

package/dist/components/agentic/reasoning.d.ts

@@ -0,0 +1,21 @@
+import type * as React from "react";
+import "@ciridae/ui/message-response.css";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@ciridae/ui/collapsible";
+type ReasoningProps = React.ComponentProps<typeof Collapsible> & {
+    defaultOpen?: boolean;
+    duration?: number;
+    isStreaming?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    open?: boolean;
+};
+type ReasoningTriggerProps = React.ComponentProps<typeof CollapsibleTrigger> & {
+    getThinkingMessage?: (isStreaming: boolean, duration?: number) => React.ReactNode;
+};
+type ReasoningContentProps = React.ComponentProps<typeof CollapsibleContent> & {
+    children: string;
+};
+declare const Reasoning: React.MemoExoticComponent<({ children, className, defaultOpen, duration: durationProp, isStreaming, onOpenChange, open, ...props }: ReasoningProps) => import("react/jsx-runtime").JSX.Element>;
+declare const ReasoningTrigger: React.MemoExoticComponent<({ children, className, getThinkingMessage, ...props }: ReasoningTriggerProps) => import("react/jsx-runtime").JSX.Element>;
+declare const ReasoningContent: React.MemoExoticComponent<({ children, className, ...props }: ReasoningContentProps) => import("react/jsx-runtime").JSX.Element>;
+export { Reasoning, ReasoningContent, ReasoningTrigger };
+export type { ReasoningContentProps, ReasoningProps, ReasoningTriggerProps };

package/dist/components/agentic/reasoning.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cjk } from "@streamdown/cjk";
+import { code } from "@streamdown/code";
+import { math } from "@streamdown/math";
+import { mermaid } from "@streamdown/mermaid";
+import { BrainIcon, ChevronDownIcon } from "lucide-react";
+import { createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { Streamdown } from "streamdown";
+import { Shimmer } from "@ciridae/ui/shimmer";
+import "@ciridae/ui/message-response.css";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@ciridae/ui/collapsible";
+import { cn } from "@ciridae/ui/utils";
+const ReasoningContext = createContext(null);
+const AUTO_CLOSE_DELAY = 1000;
+const MS_IN_SECOND = 1000;
+const streamdownPlugins = { cjk, code, math, mermaid };
+function useReasoningContext() {
+    const context = useContext(ReasoningContext);
+    if (!context)
+        throw new Error("Reasoning components must be used within Reasoning");
+    return context;
+}
+const Reasoning = memo(function Reasoning({ children, className, defaultOpen, duration: durationProp, isStreaming = false, onOpenChange, open, ...props }) {
+    const { duration, handleOpenChange, isOpen, setIsOpen } = useReasoningState({
+        defaultOpen,
+        durationProp,
+        isStreaming,
+        onOpenChange,
+        open,
+    });
+    const contextValue = useMemo(() => ({ duration, isOpen, isStreaming, setIsOpen }), [duration, isOpen, isStreaming, setIsOpen]);
+    return (_jsx(ReasoningContext.Provider, { value: contextValue, children: _jsx(Collapsible, { "data-slot": "reasoning", className: cn("rounded-lg border bg-card text-card-foreground", className), onOpenChange: handleOpenChange, open: isOpen, ...props, children: children }) }));
+});
+function useReasoningState({ defaultOpen, durationProp, isStreaming, onOpenChange, open, }) {
+    const [internalOpen, setInternalOpen] = useState(defaultOpen ?? isStreaming);
+    const [internalDuration, setInternalDuration] = useState(durationProp);
+    const hasAutoClosedRef = useRef(false);
+    const hasEverStreamedRef = useRef(isStreaming);
+    const userClosedDuringStreamingRef = useRef(false);
+    const wasStreamingRef = useRef(isStreaming);
+    const startTimeRef = useRef(isStreaming ? Date.now() : null);
+    const isControlled = open !== undefined;
+    const isOpen = open ?? internalOpen;
+    const duration = durationProp ?? internalDuration;
+    const isExplicitlyClosed = defaultOpen === false;
+    const setIsOpen = useCallback((nextOpen) => {
+        if (!isControlled)
+            setInternalOpen(nextOpen);
+        onOpenChange?.(nextOpen);
+    }, [isControlled, onOpenChange]);
+    const handleOpenChange = useCallback((nextOpen) => {
+        if (isStreaming)
+            userClosedDuringStreamingRef.current = !nextOpen;
+        setIsOpen(nextOpen);
+    }, [isStreaming, setIsOpen]);
+    useEffect(() => {
+        if (durationProp !== undefined)
+            setInternalDuration(durationProp);
+    }, [durationProp]);
+    useEffect(() => {
+        const streamStarted = isStreaming && !wasStreamingRef.current;
+        wasStreamingRef.current = isStreaming;
+        if (isStreaming) {
+            hasEverStreamedRef.current = true;
+            hasAutoClosedRef.current = false;
+            if (streamStarted)
+                userClosedDuringStreamingRef.current = false;
+            startTimeRef.current ?? (startTimeRef.current = Date.now());
+            return;
+        }
+        if (startTimeRef.current !== null) {
+            setInternalDuration(Math.max(1, Math.ceil((Date.now() - startTimeRef.current) / MS_IN_SECOND)));
+            startTimeRef.current = null;
+        }
+    }, [isStreaming]);
+    useEffect(() => {
+        if (isStreaming && !isOpen && !isExplicitlyClosed && !userClosedDuringStreamingRef.current) {
+            setIsOpen(true);
+        }
+    }, [isExplicitlyClosed, isOpen, isStreaming, setIsOpen]);
+    useEffect(() => {
+        if (!hasEverStreamedRef.current || isStreaming || !isOpen || hasAutoClosedRef.current)
+            return;
+        const timer = window.setTimeout(() => {
+            hasAutoClosedRef.current = true;
+            setIsOpen(false);
+        }, AUTO_CLOSE_DELAY);
+        return () => window.clearTimeout(timer);
+    }, [isOpen, isStreaming, setIsOpen]);
+    return { duration, handleOpenChange, isOpen, setIsOpen };
+}
+const ReasoningTrigger = memo(function ReasoningTrigger({ children, className, getThinkingMessage = defaultGetThinkingMessage, ...props }) {
+    const { duration, isOpen, isStreaming } = useReasoningContext();
+    return (_jsxs(CollapsibleTrigger, { "data-slot": "reasoning-trigger", className: cn("group flex w-full items-center justify-between gap-3 px-3 py-2 text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring focus-visible:outline-none", className), ...props, children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx(BrainIcon, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: "min-w-0 truncate", children: children ?? getThinkingMessage(isStreaming, duration) })] }), _jsx(ChevronDownIcon, { "aria-hidden": "true", className: cn("size-4 shrink-0 text-muted-foreground transition-transform", isOpen ? "rotate-180" : undefined) })] }));
+});
+const ReasoningContent = memo(function ReasoningContent({ children, className, ...props }) {
+    return (_jsx(CollapsibleContent, { "data-slot": "reasoning-content", className: cn("border-t px-3 py-3 text-sm", className), ...props, children: _jsx(Streamdown, { className: cn("agentic-message-response text-muted-foreground"), plugins: streamdownPlugins, children: children }) }));
+});
+function defaultGetThinkingMessage(isStreaming, duration) {
+    if (isStreaming || duration === 0)
+        return _jsx(Shimmer, { as: "span", children: "Thinking..." });
+    if (duration === undefined)
+        return "Thought for a few seconds";
+    return `Thought for ${duration} ${duration === 1 ? "second" : "seconds"}`;
+}
+export { Reasoning, ReasoningContent, ReasoningTrigger };

package/dist/components/agentic/run-checkpoint.d.ts

@@ -0,0 +1,13 @@
+import { BookmarkIcon } from "lucide-react";
+import type * as React from "react";
+import { Button } from "@ciridae/ui/button";
+type RunCheckpointProps = React.ComponentProps<"div">;
+type RunCheckpointIconProps = React.ComponentProps<typeof BookmarkIcon>;
+type RunCheckpointTriggerProps = React.ComponentProps<typeof Button> & {
+    tooltip?: string;
+};
+declare function RunCheckpoint({ children, className, ...props }: RunCheckpointProps): import("react/jsx-runtime").JSX.Element;
+declare function RunCheckpointIcon({ children, className, ...props }: RunCheckpointIconProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element;
+declare function RunCheckpointTrigger({ children, size, tooltip, type, variant, ...props }: RunCheckpointTriggerProps): import("react/jsx-runtime").JSX.Element;
+export { RunCheckpoint, RunCheckpointIcon, RunCheckpointTrigger };
+export type { RunCheckpointIconProps, RunCheckpointProps, RunCheckpointTriggerProps };

package/dist/components/agentic/run-checkpoint.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BookmarkIcon } from "lucide-react";
+import { Button } from "@ciridae/ui/button";
+import { Separator } from "@ciridae/ui/separator";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@ciridae/ui/tooltip";
+import { cn } from "@ciridae/ui/utils";
+function RunCheckpoint({ children, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "run-checkpoint", className: cn("flex items-center gap-1 overflow-hidden text-muted-foreground", className), ...props, children: [children, _jsx(Separator, { className: "min-w-6 flex-1" })] }));
+}
+function RunCheckpointIcon({ children, className, ...props }) {
+    return (children ?? (_jsx(BookmarkIcon, { "aria-hidden": "true", className: cn("size-4 shrink-0", className), ...props })));
+}
+function RunCheckpointTrigger({ children, size = "sm", tooltip, type = "button", variant = "ghost", ...props }) {
+    const button = (_jsx(Button, { "data-slot": "run-checkpoint-trigger", size: size, type: type, variant: variant, ...props, children: children }));
+    if (!tooltip)
+        return button;
+    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: button }), _jsx(TooltipContent, { align: "start", side: "bottom", children: tooltip })] }) }));
+}
+export { RunCheckpoint, RunCheckpointIcon, RunCheckpointTrigger };

package/dist/components/agentic/run-trace.d.ts

@@ -0,0 +1,30 @@
+import type { LucideIcon } from "lucide-react";
+import type * as React from "react";
+import { Badge } from "@ciridae/ui/badge";
+type RunTraceProps = React.ComponentProps<"div"> & {
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    open?: boolean;
+};
+type RunTraceHeaderProps = React.ComponentProps<"button">;
+type RunTraceContentProps = React.ComponentProps<"div">;
+type RunTraceStepProps = React.ComponentProps<"div"> & {
+    description?: React.ReactNode;
+    icon?: LucideIcon;
+    label: React.ReactNode;
+    status?: "active" | "complete" | "pending";
+};
+type RunTraceSearchResultsProps = React.ComponentProps<"div">;
+type RunTraceSearchResultProps = React.ComponentProps<typeof Badge>;
+type RunTraceImageProps = React.ComponentProps<"div"> & {
+    caption?: string;
+};
+declare const RunTrace: React.MemoExoticComponent<({ children, className, defaultOpen, onOpenChange, open, ...props }: RunTraceProps) => import("react/jsx-runtime").JSX.Element>;
+declare const RunTraceHeader: React.MemoExoticComponent<({ children, className, onClick, type, ...props }: RunTraceHeaderProps) => import("react/jsx-runtime").JSX.Element>;
+declare const RunTraceContent: React.MemoExoticComponent<({ children, className, ...props }: RunTraceContentProps) => import("react/jsx-runtime").JSX.Element | null>;
+declare const RunTraceStep: React.MemoExoticComponent<({ children, className, description, icon: Icon, label, status, ...props }: RunTraceStepProps) => import("react/jsx-runtime").JSX.Element>;
+declare function RunTraceSearchResults({ className, ...props }: RunTraceSearchResultsProps): import("react/jsx-runtime").JSX.Element;
+declare function RunTraceSearchResult({ className, variant, ...props }: RunTraceSearchResultProps): import("react/jsx-runtime").JSX.Element;
+declare function RunTraceImage({ caption, children, className, ...props }: RunTraceImageProps): import("react/jsx-runtime").JSX.Element;
+export { RunTrace, RunTraceContent, RunTraceHeader, RunTraceImage, RunTraceSearchResult, RunTraceSearchResults, RunTraceStep, };
+export type { RunTraceContentProps, RunTraceHeaderProps, RunTraceImageProps, RunTraceProps, RunTraceSearchResultProps, RunTraceSearchResultsProps, RunTraceStepProps, };

package/dist/components/agentic/run-trace.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BrainIcon, ChevronDownIcon, DotIcon } from "lucide-react";
+import { createContext, memo, useCallback, useContext, useMemo, useState } from "react";
+import { Badge } from "@ciridae/ui/badge";
+import { cn } from "@ciridae/ui/utils";
+const RunTraceContext = createContext(null);
+const stepStatusClasses = {
+    active: "text-foreground",
+    complete: "text-muted-foreground",
+    pending: "text-muted-foreground/50",
+};
+function useRunTrace() {
+    const context = useContext(RunTraceContext);
+    if (!context)
+        throw new Error("RunTrace components must be used within RunTrace");
+    return context;
+}
+const RunTrace = memo(function RunTrace({ children, className, defaultOpen = false, onOpenChange, open, ...props }) {
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const isControlled = open !== undefined;
+    const isOpen = open ?? internalOpen;
+    const setIsOpen = useCallback((nextOpen) => {
+        if (!isControlled)
+            setInternalOpen(nextOpen);
+        onOpenChange?.(nextOpen);
+    }, [isControlled, onOpenChange]);
+    const contextValue = useMemo(() => ({ isOpen, setIsOpen }), [isOpen, setIsOpen]);
+    return (_jsx(RunTraceContext.Provider, { value: contextValue, children: _jsx("div", { "data-slot": "run-trace", className: cn("grid w-full gap-3", className), ...props, children: children }) }));
+});
+const RunTraceHeader = memo(function RunTraceHeader({ children, className, onClick, type = "button", ...props }) {
+    const { isOpen, setIsOpen } = useRunTrace();
+    return (_jsxs("button", { "data-slot": "run-trace-header", "aria-expanded": isOpen, className: cn("flex w-full items-center gap-2 rounded-md text-left text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring focus-visible:outline-none", className), ...props, onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented)
+                setIsOpen(!isOpen);
+        }, type: type, children: [_jsx(BrainIcon, { "aria-hidden": "true", className: "size-4 shrink-0" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: children ?? "Run trace" }), _jsx(ChevronDownIcon, { "aria-hidden": "true", className: cn("size-4 shrink-0 transition-transform", isOpen ? "rotate-180" : undefined) })] }));
+});
+const RunTraceContent = memo(function RunTraceContent({ children, className, ...props }) {
+    const { isOpen } = useRunTrace();
+    if (!isOpen)
+        return null;
+    return (_jsx("div", { "data-slot": "run-trace-content", className: cn("grid gap-3", className), ...props, children: children }));
+});
+const RunTraceStep = memo(function RunTraceStep({ children, className, description, icon: Icon = DotIcon, label, status = "complete", ...props }) {
+    return (_jsxs("div", { "data-slot": "run-trace-step", className: cn("flex gap-2 text-sm", stepStatusClasses[status], className), ...props, children: [_jsxs("div", { className: "relative mt-0.5", children: [_jsx(Icon, { "aria-hidden": "true", className: "size-4" }), _jsx("div", { className: "absolute top-7 bottom-0 left-1/2 -mx-px w-px bg-border" })] }), _jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [_jsx("div", { children: label }), description ? _jsx("div", { className: "text-xs text-muted-foreground", children: description }) : null, children] })] }));
+});
+function RunTraceSearchResults({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "run-trace-search-results", className: cn("flex flex-wrap items-center gap-2", className), ...props }));
+}
+function RunTraceSearchResult({ className, variant = "secondary", ...props }) {
+    return (_jsx(Badge, { "data-slot": "run-trace-search-result", className: cn("font-normal", className), variant: variant, ...props }));
+}
+function RunTraceImage({ caption, children, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "run-trace-image", className: cn("grid gap-2", className), ...props, children: [_jsx("div", { className: "flex max-h-80 items-center justify-center overflow-hidden rounded-lg border bg-muted/40 p-3", children: children }), caption ? _jsx("p", { className: "text-xs text-muted-foreground", children: caption }) : null] }));
+}
+export { RunTrace, RunTraceContent, RunTraceHeader, RunTraceImage, RunTraceSearchResult, RunTraceSearchResults, RunTraceStep, };

package/dist/components/agentic/sandbox.d.ts

@@ -0,0 +1,24 @@
+import type * as React from "react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@ciridae/ui/collapsible";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@ciridae/ui/tabs";
+type SandboxProps = React.ComponentProps<typeof Collapsible>;
+type SandboxHeaderProps = React.ComponentProps<typeof CollapsibleTrigger> & {
+    description?: React.ReactNode;
+    title?: React.ReactNode;
+};
+type SandboxContentProps = React.ComponentProps<typeof CollapsibleContent>;
+type SandboxTabsProps = React.ComponentProps<typeof Tabs>;
+type SandboxTabsBarProps = React.ComponentProps<"div">;
+type SandboxTabsListProps = React.ComponentProps<typeof TabsList>;
+type SandboxTabsTriggerProps = React.ComponentProps<typeof TabsTrigger>;
+type SandboxTabContentProps = React.ComponentProps<typeof TabsContent>;
+declare function Sandbox({ className, defaultOpen, ...props }: SandboxProps): import("react/jsx-runtime").JSX.Element;
+declare function SandboxHeader({ children, className, description, title, ...props }: SandboxHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function SandboxContent({ className, ...props }: SandboxContentProps): import("react/jsx-runtime").JSX.Element;
+declare function SandboxTabs({ className, ...props }: SandboxTabsProps): import("react/jsx-runtime").JSX.Element;
+declare function SandboxTabsBar({ className, ...props }: SandboxTabsBarProps): import("react/jsx-runtime").JSX.Element;
+declare function SandboxTabsList(props: SandboxTabsListProps): import("react/jsx-runtime").JSX.Element;
+declare function SandboxTabsTrigger(props: SandboxTabsTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function SandboxTabContent({ className, ...props }: SandboxTabContentProps): import("react/jsx-runtime").JSX.Element;
+export { Sandbox, SandboxContent, SandboxHeader, SandboxTabContent, SandboxTabs, SandboxTabsBar, SandboxTabsList, SandboxTabsTrigger, };
+export type { SandboxContentProps, SandboxHeaderProps, SandboxProps, SandboxTabContentProps, SandboxTabsBarProps, SandboxTabsListProps, SandboxTabsProps, SandboxTabsTriggerProps, };

package/dist/components/agentic/sandbox.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon } from "lucide-react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@ciridae/ui/collapsible";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@ciridae/ui/tabs";
+import { cn } from "@ciridae/ui/utils";
+function Sandbox({ className, defaultOpen = true, ...props }) {
+    return (_jsx(Collapsible, { "data-slot": "sandbox", className: cn("w-full overflow-hidden rounded-lg border bg-card", className), defaultOpen: defaultOpen, ...props }));
+}
+function SandboxHeader({ children, className, description, title = "Sandbox", ...props }) {
+    return (_jsxs(CollapsibleTrigger, { "data-slot": "sandbox-header", className: cn("group flex w-full items-start justify-between gap-3 border-b px-4 py-3 text-left", className), ...props, children: [children ?? _jsx(SandboxHeaderText, { description: description, title: title }), _jsx(ChevronDownIcon, { "aria-hidden": "true", className: "size-4 shrink-0 transition-transform group-data-[state=open]:rotate-180" })] }));
+}
+function SandboxHeaderText({ description, title, }) {
+    return (_jsxs("div", { className: "min-w-0 space-y-1", children: [_jsx("div", { className: "truncate text-sm font-medium", children: title }), description ? _jsx("div", { className: "text-sm text-muted-foreground", children: description }) : null] }));
+}
+function SandboxContent({ className, ...props }) {
+    return (_jsx(CollapsibleContent, { "data-slot": "sandbox-content", className: cn("min-h-0", className), ...props }));
+}
+function SandboxTabs({ className, ...props }) {
+    return (_jsx(Tabs, { "data-slot": "sandbox-tabs", className: cn("flex min-h-0 flex-col", className), ...props }));
+}
+function SandboxTabsBar({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sandbox-tabs-bar", className: cn("flex items-center justify-between gap-3 border-b p-2", className), ...props }));
+}
+function SandboxTabsList(props) {
+    return _jsx(TabsList, { "data-slot": "sandbox-tabs-list", ...props });
+}
+function SandboxTabsTrigger(props) {
+    return _jsx(TabsTrigger, { "data-slot": "sandbox-tabs-trigger", ...props });
+}
+function SandboxTabContent({ className, ...props }) {
+    return (_jsx(TabsContent, { "data-slot": "sandbox-tab-content", className: cn("m-0 min-h-0 p-4", className), ...props }));
+}
+export { Sandbox, SandboxContent, SandboxHeader, SandboxTabContent, SandboxTabs, SandboxTabsBar, SandboxTabsList, SandboxTabsTrigger, };