@uipath/apollo-wind 2.68.0 → 2.69.0

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 };