@uipath/apollo-wind 2.67.1 → 2.69.0

package/dist/components/ui/tool-call.d.ts

@@ -0,0 +1,75 @@
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { CollapsibleContent } from './collapsible';
+import { type JsonTreeViewStrings } from './json-tree-view';
+export type ToolCallStatus = 'pending' | 'executing' | 'completed' | 'failed';
+export interface ToolCallStrings {
+    pending: string;
+    executing: string;
+    completed: string;
+    failed: string;
+    /** Status line while the call is pending or executing. */
+    running: (name: string) => string;
+    /** Status line once the call has finished. `duration` is pre-formatted, e.g. "1.23 seconds". */
+    ran: (name: string, duration?: string) => string;
+    input: string;
+    output: string;
+    errors: string;
+}
+export declare const DEFAULT_TOOL_CALL_STRINGS: ToolCallStrings;
+declare const toolCallVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ToolCallProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof toolCallVariants> {
+    status: ToolCallStatus;
+    /** Controlled open state of the body. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Overrides for any subset of the English strings. */
+    strings?: Partial<ToolCallStrings>;
+    /** Overrides for the JSON tree's strings, merged over any outer `JsonTreeViewProvider`. */
+    jsonTreeStrings?: Partial<JsonTreeViewStrings>;
+}
+/**
+ * One agent tool call, laid out like the Material ApToolCall: a status line ("Ran 'x' for 1.2
+ * seconds") that toggles an indented body of collapsible sections (input, errors, output, or any
+ * `ToolCallSection`). The body is not rendered while closed. Omit `ToolCallContent` for a
+ * name-only line (the toggle hides itself).
+ */
+declare const ToolCall: React.ForwardRefExoticComponent<ToolCallProps & React.RefAttributes<HTMLDivElement>>;
+export interface ToolCallHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Tool name, as it should read inside the status line. */
+    name: string;
+    /** Pre-formatted elapsed time, e.g. "1.23 seconds". Shown once the call has finished. */
+    duration?: string;
+}
+declare const ToolCallHeader: React.ForwardRefExoticComponent<ToolCallHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export type ToolCallContentProps = React.ComponentPropsWithoutRef<typeof CollapsibleContent>;
+declare const ToolCallContent: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-collapsible").CollapsibleContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface ToolCallSectionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    title: React.ReactNode;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. Sections start closed, like ApToolCall's. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/** A collapsible section of the body, for input/output/errors or custom ones such as traces. */
+declare const ToolCallSection: React.ForwardRefExoticComponent<ToolCallSectionProps & React.RefAttributes<HTMLDivElement>>;
+/** Returns a node to replace the default rendering, or `undefined` to keep it. */
+export type ToolCallRenderValue = (value: unknown) => React.ReactNode | undefined;
+export interface ToolCallValueProps extends Omit<ToolCallSectionProps, 'title' | 'children'> {
+    /**
+     * Arrays and plain objects render as a read-only JSON tree with nested values folded; anything
+     * else as text. `undefined` and `null` hide the section, as ApToolCall hides empty data.
+     */
+    value: unknown;
+    /** Custom renderer, e.g. a syntax-highlighted code block. */
+    renderValue?: ToolCallRenderValue;
+}
+declare const ToolCallInput: React.ForwardRefExoticComponent<ToolCallValueProps & React.RefAttributes<HTMLDivElement>>;
+declare const ToolCallOutput: React.ForwardRefExoticComponent<ToolCallValueProps & React.RefAttributes<HTMLDivElement>>;
+declare const ToolCallError: React.ForwardRefExoticComponent<ToolCallValueProps & React.RefAttributes<HTMLDivElement>>;
+export { ToolCall, ToolCallHeader, ToolCallContent, ToolCallSection, ToolCallInput, ToolCallOutput, ToolCallError, toolCallVariants, };

package/dist/components/ui/tool-call.js

@@ -0,0 +1,301 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { ChevronDown, ChevronRight, CircleCheck, CircleX, Clock, Loader2 } from "lucide-react";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useState } from "react";
+import { cn } from "../../lib/index.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible.js";
+import { JsonTreeView, buildJsonTree, collectContainerPaths } from "./json-tree-view/index.js";
+const DEFAULT_TOOL_CALL_STRINGS = {
+    pending: 'Pending',
+    executing: 'Running',
+    completed: 'Completed',
+    failed: 'Failed',
+    running: (name)=>`Running '${name}'`,
+    ran: (name, duration)=>duration ? `Ran '${name}' for ${duration}` : `Ran '${name}'`,
+    input: 'Input',
+    output: 'Output',
+    errors: 'Errors'
+};
+const ToolCallContext = /*#__PURE__*/ createContext(null);
+function useToolCallContext(component) {
+    const context = useContext(ToolCallContext);
+    if (!context) throw new Error(`${component} must be used within a ToolCall`);
+    return context;
+}
+function mergeStrings(overrides) {
+    const merged = {
+        ...DEFAULT_TOOL_CALL_STRINGS
+    };
+    if (!overrides) return merged;
+    for (const key of Object.keys(overrides)){
+        const value = overrides[key];
+        if (void 0 !== value) merged[key] = value;
+    }
+    return merged;
+}
+const useIsomorphicLayoutEffect = "u" < typeof window ? useEffect : useLayoutEffect;
+const TOGGLE_CLASSES = 'flex w-full min-w-0 items-center gap-2 rounded p-1 text-left transition-colors hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none';
+const toolCallVariants = cva('group/tool-call flex w-full min-w-0 flex-col text-muted-foreground', {
+    variants: {
+        size: {
+            sm: 'p-2 text-xs',
+            md: 'p-3 text-sm'
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+const ToolCall = /*#__PURE__*/ forwardRef(({ className, status, size = 'md', open, defaultOpen, onOpenChange, strings, jsonTreeStrings, ...props }, ref)=>{
+    const [contentCount, setContentCount] = useState(0);
+    const registerContent = useCallback(()=>{
+        setContentCount((count)=>count + 1);
+        return ()=>setContentCount((count)=>count - 1);
+    }, []);
+    const context = useMemo(()=>({
+            status,
+            strings: mergeStrings(strings),
+            jsonTreeStrings,
+            hasContent: contentCount > 0,
+            registerContent
+        }), [
+        status,
+        strings,
+        jsonTreeStrings,
+        contentCount,
+        registerContent
+    ]);
+    return /*#__PURE__*/ jsx(ToolCallContext.Provider, {
+        value: context,
+        children: /*#__PURE__*/ jsx(Collapsible, {
+            asChild: true,
+            open: open,
+            defaultOpen: defaultOpen,
+            onOpenChange: onOpenChange,
+            children: /*#__PURE__*/ jsx("div", {
+                ref: ref,
+                "data-slot": "tool-call",
+                "data-status": status,
+                "data-size": size,
+                className: cn(toolCallVariants({
+                    size
+                }), className),
+                ...props
+            })
+        })
+    });
+});
+ToolCall.displayName = 'ToolCall';
+const STATUS_ICONS = {
+    pending: Clock,
+    executing: Loader2,
+    completed: CircleCheck,
+    failed: CircleX
+};
+const toolCallStatusIconVariants = cva('size-5 shrink-0 group-data-[size=sm]/tool-call:size-4', {
+    variants: {
+        status: {
+            pending: 'text-muted-foreground',
+            executing: 'animate-spin text-primary motion-reduce:animate-none',
+            completed: 'text-success',
+            failed: 'text-destructive'
+        }
+    }
+});
+const ToolCallHeader = /*#__PURE__*/ forwardRef(({ className, name, duration, ...props }, ref)=>{
+    const { status, strings, hasContent } = useToolCallContext('ToolCallHeader');
+    const StatusIcon = STATUS_ICONS[status];
+    const finished = 'completed' === status || 'failed' === status;
+    const line = /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(StatusIcon, {
+                "data-slot": "tool-call-status-icon",
+                "aria-hidden": "true",
+                className: toolCallStatusIconVariants({
+                    status
+                })
+            }),
+            /*#__PURE__*/ jsx("span", {
+                "data-slot": "tool-call-status",
+                className: "sr-only",
+                children: strings[status]
+            }),
+            ' ',
+            /*#__PURE__*/ jsx("span", {
+                "data-slot": "tool-call-label",
+                className: "min-w-0 wrap-break-word",
+                children: finished ? strings.ran(name, duration) : strings.running(name)
+            })
+        ]
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        "data-slot": "tool-call-header",
+        className: cn('flex min-w-0', className),
+        ...props,
+        children: hasContent ? /*#__PURE__*/ jsxs(CollapsibleTrigger, {
+            "data-slot": "tool-call-toggle",
+            className: cn('group/tool-call-toggle', TOGGLE_CLASSES),
+            children: [
+                line,
+                /*#__PURE__*/ jsx(ChevronDown, {
+                    "aria-hidden": "true",
+                    className: "size-4 shrink-0 transition-transform motion-reduce:transition-none group-data-[state=open]/tool-call-toggle:rotate-180"
+                })
+            ]
+        }) : /*#__PURE__*/ jsx("div", {
+            className: "flex min-w-0 items-center gap-2 p-1",
+            children: line
+        })
+    });
+});
+ToolCallHeader.displayName = 'ToolCallHeader';
+const ToolCallContent = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
+    const { registerContent } = useToolCallContext('ToolCallContent');
+    useIsomorphicLayoutEffect(()=>registerContent(), [
+        registerContent
+    ]);
+    return /*#__PURE__*/ jsx(CollapsibleContent, {
+        ref: ref,
+        "data-slot": "tool-call-content",
+        className: cn('mt-2 ml-3 flex min-w-0 flex-col border-l pl-3 group-data-[size=sm]/tool-call:ml-2 group-data-[size=sm]/tool-call:pl-2', className),
+        ...props
+    });
+});
+ToolCallContent.displayName = 'ToolCallContent';
+const ToolCallSection = /*#__PURE__*/ forwardRef(({ className, title, open, defaultOpen = false, onOpenChange, children, ...props }, ref)=>{
+    useToolCallContext('ToolCallSection');
+    return /*#__PURE__*/ jsx(Collapsible, {
+        asChild: true,
+        open: open,
+        defaultOpen: defaultOpen,
+        onOpenChange: onOpenChange,
+        children: /*#__PURE__*/ jsxs("div", {
+            ref: ref,
+            "data-slot": "tool-call-section",
+            className: cn('flex min-w-0 flex-col', className),
+            ...props,
+            children: [
+                /*#__PURE__*/ jsxs(CollapsibleTrigger, {
+                    "data-slot": "tool-call-section-toggle",
+                    className: cn('group/tool-call-section-toggle', TOGGLE_CLASSES),
+                    children: [
+                        /*#__PURE__*/ jsx(ChevronRight, {
+                            "aria-hidden": "true",
+                            className: "size-4 shrink-0 transition-transform motion-reduce:transition-none group-data-[state=open]/tool-call-section-toggle:rotate-90"
+                        }),
+                        title
+                    ]
+                }),
+                /*#__PURE__*/ jsx(CollapsibleContent, {
+                    "data-slot": "tool-call-section-content",
+                    className: "ml-7 min-w-0",
+                    children: children
+                })
+            ]
+        })
+    });
+});
+ToolCallSection.displayName = 'ToolCallSection';
+function isJsonContainer(value) {
+    if (Array.isArray(value)) return true;
+    if ('object' != typeof value || null === value) return false;
+    const prototype = Object.getPrototypeOf(value);
+    return prototype === Object.prototype || null === prototype;
+}
+const VIRTUALIZE_NODE_COUNT = 200;
+function countNodes(nodes) {
+    let count = 0;
+    const stack = [
+        ...nodes
+    ];
+    while(stack.length > 0){
+        const node = stack.pop();
+        count += 1;
+        if (node.children) stack.push(...node.children);
+    }
+    return count;
+}
+function ToolCallJsonValue({ value }) {
+    const { jsonTreeStrings } = useToolCallContext('ToolCallJsonValue');
+    const nodes = useMemo(()=>buildJsonTree({
+            value
+        }), [
+        value
+    ]);
+    const [opened, setOpened] = useState({});
+    const collapsed = useMemo(()=>Object.fromEntries(collectContainerPaths(nodes).map(({ path })=>[
+                path,
+                !opened[path]
+            ])), [
+        nodes,
+        opened
+    ]);
+    const toggle = useCallback((path)=>setOpened((prev)=>({
+                ...prev,
+                [path]: !prev[path]
+            })), []);
+    const virtualized = useMemo(()=>countNodes(nodes) > VIRTUALIZE_NODE_COUNT, [
+        nodes
+    ]);
+    const [scrollElement, setScrollElement] = useState(null);
+    return /*#__PURE__*/ jsx("div", {
+        ref: setScrollElement,
+        "data-slot": "tool-call-value",
+        className: "my-2 max-h-80 overflow-auto rounded-md border bg-background",
+        children: /*#__PURE__*/ jsx(JsonTreeView, {
+            nodes: nodes,
+            collapsed: collapsed,
+            onToggleCollapsed: toggle,
+            readOnly: true,
+            strings: jsonTreeStrings,
+            virtualized: virtualized,
+            scrollElement: virtualized ? scrollElement : void 0
+        })
+    });
+}
+function ToolCallTextValue({ value }) {
+    return /*#__PURE__*/ jsx("div", {
+        tabIndex: 0,
+        "data-slot": "tool-call-value",
+        className: "my-2 max-h-45 overflow-y-auto rounded bg-muted px-3 py-2 text-xs wrap-break-word whitespace-pre-wrap outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+        children: String(value)
+    });
+}
+function ToolCallValue({ value, renderValue }) {
+    const custom = renderValue?.(value);
+    if (void 0 !== custom) return /*#__PURE__*/ jsx(Fragment, {
+        children: custom
+    });
+    if (!isJsonContainer(value)) return /*#__PURE__*/ jsx(ToolCallTextValue, {
+        value: value
+    });
+    if (0 === Object.keys(value).length) return /*#__PURE__*/ jsx(ToolCallTextValue, {
+        value: Array.isArray(value) ? '[]' : '{}'
+    });
+    return /*#__PURE__*/ jsx(ToolCallJsonValue, {
+        value: value
+    });
+}
+function createValueSection(slot, titleKey, displayName) {
+    const Section = /*#__PURE__*/ forwardRef(({ value, renderValue, ...props }, ref)=>{
+        const { strings } = useToolCallContext(displayName);
+        if (null == value) return null;
+        return /*#__PURE__*/ jsx(ToolCallSection, {
+            ref: ref,
+            "data-slot": `tool-call-${slot}`,
+            title: strings[titleKey],
+            ...props,
+            children: /*#__PURE__*/ jsx(ToolCallValue, {
+                value: value,
+                renderValue: renderValue
+            })
+        });
+    });
+    Section.displayName = displayName;
+    return Section;
+}
+const ToolCallInput = createValueSection('input', 'input', 'ToolCallInput');
+const ToolCallOutput = createValueSection('output', 'output', 'ToolCallOutput');
+const ToolCallError = createValueSection('error', 'errors', 'ToolCallError');
+export { DEFAULT_TOOL_CALL_STRINGS, ToolCall, ToolCallContent, ToolCallError, ToolCallHeader, ToolCallInput, ToolCallOutput, ToolCallSection, toolCallVariants };