@ciridae/ui-agent 0.3.0

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

@@ -0,0 +1,14 @@
+import type * as React from "react";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@ciridae/ui/select";
+type PromptInputSelectProps = React.ComponentProps<typeof Select>;
+type PromptInputSelectTriggerProps = React.ComponentProps<typeof SelectTrigger>;
+type PromptInputSelectContentProps = React.ComponentProps<typeof SelectContent>;
+type PromptInputSelectItemProps = React.ComponentProps<typeof SelectItem>;
+type PromptInputSelectValueProps = React.ComponentProps<typeof SelectValue>;
+declare function PromptInputSelect(props: PromptInputSelectProps): React.JSX.Element;
+declare function PromptInputSelectTrigger({ className, size, ...props }: PromptInputSelectTriggerProps): React.JSX.Element;
+declare function PromptInputSelectContent({ align, className, ...props }: PromptInputSelectContentProps): React.JSX.Element;
+declare function PromptInputSelectItem({ className, ...props }: PromptInputSelectItemProps): React.JSX.Element;
+declare function PromptInputSelectValue(props: PromptInputSelectValueProps): React.JSX.Element;
+export { PromptInputSelect, PromptInputSelectContent, PromptInputSelectItem, PromptInputSelectTrigger, PromptInputSelectValue, };
+export type { PromptInputSelectContentProps, PromptInputSelectItemProps, PromptInputSelectProps, PromptInputSelectTriggerProps, PromptInputSelectValueProps, };

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@ciridae/ui/select";
+import { cn } from "@ciridae/ui/utils";
+function PromptInputSelect(props) {
+    return _jsx(Select, { ...props });
+}
+function PromptInputSelectTrigger({ className, size = "sm", ...props }) {
+    return (_jsx(SelectTrigger, { "data-slot": "prompt-input-select-trigger", size: size, className: cn("h-(--control-height-sm) min-w-0 border-transparent bg-transparent px-2 shadow-none hover:bg-accent hover:text-accent-foreground dark:bg-transparent dark:hover:bg-accent/50 [&_[data-slot=select-value]>svg:not([class*='size-'])]:size-3.5", className), ...props }));
+}
+function PromptInputSelectContent({ align = "start", className, ...props }) {
+    return (_jsx(SelectContent, { "data-slot": "prompt-input-select-content", align: align, className: cn("min-w-52", className), ...props }));
+}
+function PromptInputSelectItem({ className, ...props }) {
+    return (_jsx(SelectItem, { "data-slot": "prompt-input-select-item", className: cn("gap-2", className), ...props }));
+}
+function PromptInputSelectValue(props) {
+    return _jsx(SelectValue, { "data-slot": "prompt-input-select-value", ...props });
+}
+export { PromptInputSelect, PromptInputSelectContent, PromptInputSelectItem, PromptInputSelectTrigger, PromptInputSelectValue, };

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

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { Tabs, TabsContent, TabsTrigger } from "@ciridae/ui/tabs";
+type PromptInputTabsListProps = React.ComponentProps<typeof Tabs>;
+type PromptInputTabProps = React.ComponentProps<typeof TabsTrigger>;
+type PromptInputTabLabelProps = React.ComponentProps<"span">;
+type PromptInputTabBodyProps = React.ComponentProps<typeof TabsContent>;
+type PromptInputTabItemProps = React.ComponentProps<"div">;
+declare function PromptInputTabsList({ children, className, orientation, ...props }: PromptInputTabsListProps): React.JSX.Element;
+declare function PromptInputTab({ className, ...props }: PromptInputTabProps): React.JSX.Element;
+declare namespace PromptInputTab {
+    var displayName: string;
+}
+declare function PromptInputTabLabel({ className, ...props }: PromptInputTabLabelProps): React.JSX.Element;
+declare function PromptInputTabBody({ className, ...props }: PromptInputTabBodyProps): React.JSX.Element;
+declare function PromptInputTabItem({ className, ...props }: PromptInputTabItemProps): React.JSX.Element;
+export { PromptInputTab, PromptInputTabBody, PromptInputTabItem, PromptInputTabLabel, PromptInputTabsList, };
+export type { PromptInputTabBodyProps, PromptInputTabItemProps, PromptInputTabLabelProps, PromptInputTabProps, PromptInputTabsListProps, };

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@ciridae/ui/tabs";
+import { cn } from "@ciridae/ui/utils";
+function PromptInputTabsList({ children, className, orientation = "horizontal", ...props }) {
+    const childrenArray = React.Children.toArray(children);
+    const tabs = childrenArray.filter(isPromptInputTabElement);
+    const bodies = childrenArray.filter((child) => !isPromptInputTabElement(child));
+    return (_jsxs(Tabs, { "data-slot": "prompt-input-tabs-list", orientation: orientation, className: cn("gap-2 rounded-md border bg-background p-1", "data-[orientation=horizontal]:flex-col data-[orientation=vertical]:flex-row", className), ...props, children: [_jsx(TabsList, { variant: "default", className: "h-auto min-w-0 justify-start gap-1 bg-transparent p-0", children: tabs }), bodies] }));
+}
+function PromptInputTab({ className, ...props }) {
+    return (_jsx(TabsTrigger, { "data-slot": "prompt-input-tab", className: cn("h-(--control-height-sm) flex-none gap-1.5 rounded-sm px-2 text-xs", className), ...props }));
+}
+function PromptInputTabLabel({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "prompt-input-tab-label", className: cn("min-w-0 truncate", className), ...props }));
+}
+function PromptInputTabBody({ className, ...props }) {
+    return (_jsx(TabsContent, { "data-slot": "prompt-input-tab-body", className: cn("mt-0 rounded-sm p-2 text-sm", className), ...props }));
+}
+function PromptInputTabItem({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "prompt-input-tab-item", className: cn("flex min-w-0 items-start gap-2 rounded-sm px-2 py-1.5 text-sm text-foreground", "[&_svg]:mt-0.5 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground", className), ...props }));
+}
+function isPromptInputTabElement(child) {
+    if (!React.isValidElement(child))
+        return false;
+    return getPromptInputTabTypeName(child.type) === "PromptInputTab";
+}
+function getPromptInputTabTypeName(type) {
+    if (typeof type === "function") {
+        if ("displayName" in type && typeof type.displayName === "string")
+            return type.displayName;
+        return type.name;
+    }
+    if (typeof type !== "object" || type === null)
+        return undefined;
+    if ("displayName" in type && typeof type.displayName === "string")
+        return type.displayName;
+    if ("type" in type)
+        return getPromptInputTabTypeName(type.type);
+    if ("render" in type)
+        return getPromptInputTabTypeName(type.render);
+    return undefined;
+}
+PromptInputTab.displayName = "PromptInputTab";
+export { PromptInputTab, PromptInputTabBody, PromptInputTabItem, PromptInputTabLabel, PromptInputTabsList, };

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

@@ -0,0 +1,66 @@
+import * as React from "react";
+export { AttachmentActionAddFiles as PromptInputActionAddAttachments, AttachmentActionAddScreenshot as PromptInputActionAddScreenshot, } from "@ciridae/ui-agent/attachments";
+export type { AttachmentActionAddFilesProps as PromptInputActionAddAttachmentsProps, AttachmentActionAddScreenshotProps as PromptInputActionAddScreenshotProps, } from "@ciridae/ui-agent/attachments";
+export * from "@ciridae/ui-agent/prompt-input-action-menu";
+export * from "@ciridae/ui-agent/prompt-input-command";
+export * from "@ciridae/ui-agent/prompt-input-hover-card";
+export * from "@ciridae/ui-agent/prompt-input-select";
+export * from "@ciridae/ui-agent/prompt-input-tabs";
+import { type AgenticAttachment, type AttachmentProviderProps } from "@ciridae/ui-agent/attachments";
+import type { AgenticChatStatus } from "@ciridae/ui-agent/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 PromptInputProps = Omit<React.ComponentProps<"form">, "onError" | "onSubmit"> & Pick<AttachmentProviderProps, "accept" | "maxAttachmentSizeMb" | "maxAttachments" | "multiple" | "onAttachmentError" | "onCaptureScreenshot"> & {
+    disabled?: boolean;
+    globalDrop?: boolean;
+    onSubmit?: (message: PromptInputMessage) => void | Promise<void>;
+    status?: AgenticChatStatus;
+};
+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;
+};
+declare function PromptInputProvider({ children, defaultValue, onValueChange, value, ...attachmentProviderProps }: PromptInputProviderProps): React.JSX.Element;
+declare function usePromptInputProvider(): PromptInputProviderContextValue;
+declare function useOptionalPromptInputProvider(): PromptInputProviderContextValue | null;
+declare function PromptInput(props: PromptInputProps): React.JSX.Element;
+declare function PromptInputBody({ className, ...props }: PromptInputBodyProps): React.JSX.Element;
+declare function PromptInputTextarea({ className, disabled, onKeyDown, onPaste, onValueChange, value, ...props }: PromptInputTextareaProps): React.JSX.Element;
+declare function PromptInputHeader({ className, ...props }: PromptInputHeaderProps): React.JSX.Element;
+declare function PromptInputFooter({ className, ...props }: PromptInputFooterProps): React.JSX.Element;
+declare function PromptInputTools({ align, className, ...props }: PromptInputToolsProps): React.JSX.Element;
+declare function PromptInputButton({ children, className, label, size, tooltip, variant, ...props }: PromptInputButtonProps): React.JSX.Element;
+declare function PromptInputSubmit({ children, className, disabled, label, onClick, onStop, size, status, stopLabel, type, variant, ...props }: PromptInputSubmitProps): React.JSX.Element;
+export { PromptInput, PromptInputBody, PromptInputButton, PromptInputFooter, PromptInputHeader, PromptInputProvider, PromptInputSubmit, PromptInputTextarea, PromptInputTools, useOptionalPromptInputProvider, usePromptInputProvider, };
+export type { PromptInputBodyProps, PromptInputButtonProps, PromptInputFooterProps, PromptInputHeaderProps, PromptInputMessage, PromptInputProps, PromptInputProviderContextValue, PromptInputProviderProps, PromptInputSubmitProps, PromptInputTextareaProps, PromptInputTextContextValue, PromptInputToolsProps, };

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

@@ -0,0 +1,227 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable max-lines, react-refresh/only-export-components */
+import { ArrowUpIcon, SquareIcon } from "lucide-react";
+import * as React from "react";
+export { AttachmentActionAddFiles as PromptInputActionAddAttachments, AttachmentActionAddScreenshot as PromptInputActionAddScreenshot, } from "@ciridae/ui-agent/attachments";
+export * from "@ciridae/ui-agent/prompt-input-action-menu";
+export * from "@ciridae/ui-agent/prompt-input-command";
+export * from "@ciridae/ui-agent/prompt-input-hover-card";
+export * from "@ciridae/ui-agent/prompt-input-select";
+export * from "@ciridae/ui-agent/prompt-input-tabs";
+import { AttachmentProvider, prepareAttachmentsForSubmit, useAttachmentDropTarget, useAttachments, useOptionalAttachments, } from "@ciridae/ui-agent/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 } from "@ciridae/ui/utils";
+import { css } from "@ciridae/ui/styled-system/css";
+const PromptInputProviderContext = React.createContext(null);
+const PromptInputContext = React.createContext({
+    status: "idle",
+});
+const promptInputClassName = css({
+    backgroundColor: "background",
+    borderColor: "border",
+    borderRadius: "lg",
+    borderStyle: "solid",
+    borderWidth: "default",
+    boxShadow: "xs",
+    display: "grid",
+    gap: "gap.2",
+    outline: "none",
+    padding: "spacing.2",
+    transitionProperty: "color, box-shadow",
+    width: "full",
+    "&:focus-within": {
+        borderColor: "ring",
+        boxShadow: "focus",
+    },
+    "&[data-disabled='true']": {
+        opacity: 0.6,
+    },
+});
+const promptInputBodyClassName = css({
+    alignItems: "stretch",
+    backgroundColor: "transparent",
+    borderWidth: 0,
+    boxShadow: "none",
+    minHeight: "6rem",
+    _dark: {
+        backgroundColor: "transparent",
+    },
+});
+const promptInputTextareaClassName = css({
+    fontSize: "sm",
+    lineHeight: "relaxed",
+    minHeight: "6rem",
+    paddingBlock: "spacing.2",
+    paddingInline: "spacing.2",
+    "&::placeholder": {
+        color: "muted.foreground/70",
+    },
+});
+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, disabled, globalDrop, onSubmit, status = "idle", ...props }) {
+    const contextValue = React.useMemo(() => ({ disabled, status }), [disabled, status]);
+    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-slot": "prompt-input", "data-status": status, onSubmit: handleSubmit, ref: formRef, className: cn("group/prompt-input", promptInputClassName, 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 }) {
+    return (_jsx(InputGroup, { "data-slot": "prompt-input-body", className: cn(promptInputBodyClassName, 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(promptInputTextareaClassName, className) }));
+}
+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, PromptInputFooter, 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-agent/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) => React.JSX.Element>;
+declare const ReasoningTrigger: React.MemoExoticComponent<({ children, className, getThinkingMessage, ...props }: ReasoningTriggerProps) => React.JSX.Element>;
+declare const ReasoningContent: React.MemoExoticComponent<({ children, className, ...props }: ReasoningContentProps) => React.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-agent/shimmer";
+import "@ciridae/ui-agent/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): React.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> | React.JSX.Element;
+declare function RunCheckpointTrigger({ children, size, tooltip, type, variant, ...props }: RunCheckpointTriggerProps): React.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) => React.JSX.Element>;
+declare const RunTraceHeader: React.MemoExoticComponent<({ children, className, onClick, type, ...props }: RunTraceHeaderProps) => React.JSX.Element>;
+declare const RunTraceContent: React.MemoExoticComponent<({ children, className, ...props }: RunTraceContentProps) => React.JSX.Element | null>;
+declare const RunTraceStep: React.MemoExoticComponent<({ children, className, description, icon: Icon, label, status, ...props }: RunTraceStepProps) => React.JSX.Element>;
+declare function RunTraceSearchResults({ className, ...props }: RunTraceSearchResultsProps): React.JSX.Element;
+declare function RunTraceSearchResult({ className, variant, ...props }: RunTraceSearchResultProps): React.JSX.Element;
+declare function RunTraceImage({ caption, children, className, ...props }: RunTraceImageProps): React.JSX.Element;
+export { RunTrace, RunTraceContent, RunTraceHeader, RunTraceImage, RunTraceSearchResult, RunTraceSearchResults, RunTraceStep, };
+export type { RunTraceContentProps, RunTraceHeaderProps, RunTraceImageProps, RunTraceProps, RunTraceSearchResultProps, RunTraceSearchResultsProps, RunTraceStepProps, };