@uipath/apollo-react 4.0.0 → 4.1.1

package/dist/canvas/components/CollapseConfig/CollapseConfig.stories.js

@@ -1,481 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Panel, Position, ReactFlowProvider, useReactFlow } from "../../xyflow/react.js";
-import { ApIcon } from "../../../material/components/index.js";
-import { useCallback, useMemo } from "react";
-import { NodeRegistryProvider } from "../../core/NodeRegistryProvider.js";
-import { StoryInfoPanel, allNodeManifests, useCanvasStory } from "../../storybook-utils/index.js";
-import { DefaultCanvasTranslations } from "../../types.js";
-import { contextResourceManifest, escalationResourceManifest, memoryResourceManifest, toolResourceManifest } from "../AgentCanvas/agent-flow.manifest.js";
-import { BaseCanvas } from "../BaseCanvas/index.js";
-import { BaseNode } from "../BaseNode/BaseNode.js";
-import { BaseNodeOverrideConfigProvider } from "../BaseNode/BaseNodeConfigContext.js";
-import { CanvasPositionControls } from "../CanvasPositionControls.js";
-const collapsibleAgentManifest = {
-    nodeType: 'uipath.agent.collapsible',
-    version: '1.0.0',
-    tags: [],
-    sortOrder: 0,
-    display: {
-        label: 'Collapsible Agent',
-        icon: 'uipath.agent',
-        shape: 'rectangle',
-        iconBackground: 'var(--uix-canvas-background-secondary)'
-    },
-    handleConfiguration: []
-};
-const collapseConfigManifest = {
-    version: '1.0.0',
-    categories: [],
-    nodes: [
-        collapsibleAgentManifest,
-        contextResourceManifest,
-        toolResourceManifest,
-        escalationResourceManifest,
-        memoryResourceManifest
-    ]
-};
-const meta = {
-    title: 'Canvas/CollapseConfig',
-    parameters: {
-        layout: 'fullscreen'
-    },
-    decorators: [
-        (Story)=>/*#__PURE__*/ jsx(ReactFlowProvider, {
-                children: /*#__PURE__*/ jsx(NodeRegistryProvider, {
-                    manifest: collapseConfigManifest,
-                    children: /*#__PURE__*/ jsx("div", {
-                        style: {
-                            position: 'absolute',
-                            top: 0,
-                            left: 0,
-                            width: '100%',
-                            height: '100%'
-                        },
-                        children: /*#__PURE__*/ jsx(Story, {})
-                    })
-                })
-            })
-    ]
-};
-const CollapseConfig_stories = meta;
-const agentManifest = allNodeManifests.find((m)=>'uipath.agent' === m.nodeType);
-function CollapsibleAgentNode(props) {
-    const { id, data, selected, ...nodeProps } = props;
-    const { setNodes, setEdges } = useReactFlow();
-    const label = data?.label ?? agentManifest?.display.label ?? 'Agent';
-    const collapsed = data?.collapsed ?? false;
-    const handleToggleCollapse = useCallback(()=>{
-        const newCollapsed = !collapsed;
-        setNodes((nodes)=>nodes.map((node)=>node.id === id ? {
-                    ...node,
-                    data: {
-                        ...node.data,
-                        collapsed: newCollapsed
-                    }
-                } : node));
-        const artifactHandleIds = [
-            'escalation',
-            'memory',
-            'context',
-            'tools'
-        ];
-        setEdges((edges)=>{
-            const connectedNodeIds = new Set();
-            edges.forEach((edge)=>{
-                if (edge.source === id && artifactHandleIds.includes(edge.sourceHandle ?? '')) connectedNodeIds.add(edge.target);
-            });
-            setNodes((nodes)=>nodes.map((node)=>connectedNodeIds.has(node.id) ? {
-                        ...node,
-                        hidden: newCollapsed
-                    } : node));
-            return edges.map((edge)=>connectedNodeIds.has(edge.target) || connectedNodeIds.has(edge.source) ? {
-                    ...edge,
-                    hidden: newCollapsed
-                } : edge);
-        });
-    }, [
-        id,
-        collapsed,
-        setNodes,
-        setEdges
-    ]);
-    const toolbarConfig = useMemo(()=>({
-            position: 'top',
-            align: 'end',
-            actions: [
-                {
-                    id: 'collapse-toggle',
-                    icon: /*#__PURE__*/ jsx(ApIcon, {
-                        name: collapsed ? 'unfold_more' : 'unfold_less',
-                        size: "16px"
-                    }),
-                    label: collapsed ? 'Expand' : 'Collapse',
-                    onAction: handleToggleCollapse
-                }
-            ],
-            overflowActions: [],
-            overflowLabel: ''
-        }), [
-        collapsed,
-        handleToggleCollapse
-    ]);
-    const handleConfigurations = useMemo(()=>[
-            {
-                position: Position.Left,
-                handles: [
-                    {
-                        id: 'input',
-                        type: 'target',
-                        handleType: 'input'
-                    }
-                ],
-                visible: true
-            },
-            {
-                position: Position.Right,
-                handles: [
-                    {
-                        id: 'success',
-                        type: 'source',
-                        handleType: 'output',
-                        label: 'Success'
-                    },
-                    {
-                        id: 'error',
-                        type: 'source',
-                        handleType: 'output',
-                        label: 'Error'
-                    }
-                ],
-                visible: true
-            },
-            ...collapsed ? [] : [
-                {
-                    position: Position.Top,
-                    handles: [
-                        {
-                            id: 'memory',
-                            type: 'source',
-                            handleType: 'artifact',
-                            label: 'Memory',
-                            showButton: true,
-                            onAction: ()=>{}
-                        },
-                        {
-                            id: 'escalation',
-                            type: 'source',
-                            handleType: 'artifact',
-                            label: 'Escalations',
-                            showButton: true,
-                            onAction: ()=>{}
-                        }
-                    ],
-                    visible: true
-                },
-                {
-                    position: Position.Bottom,
-                    handles: [
-                        {
-                            id: 'context',
-                            type: 'source',
-                            handleType: 'artifact',
-                            label: 'Context',
-                            showButton: true,
-                            onAction: ()=>{}
-                        },
-                        {
-                            id: 'tools',
-                            type: 'source',
-                            handleType: 'artifact',
-                            label: 'Tools',
-                            showButton: true,
-                            onAction: ()=>{}
-                        }
-                    ],
-                    visible: true
-                }
-            ]
-        ], [
-        collapsed
-    ]);
-    const baseNodeConfig = useMemo(()=>({
-            handleConfigurations,
-            toolbarConfig
-        }), [
-        handleConfigurations,
-        toolbarConfig
-    ]);
-    return /*#__PURE__*/ jsx(BaseNodeOverrideConfigProvider, {
-        value: baseNodeConfig,
-        children: /*#__PURE__*/ jsx(BaseNode, {
-            ...nodeProps,
-            type: "uipath.agent.collapsible",
-            id: id,
-            selected: selected,
-            data: {
-                ...data,
-                parameters: data?.parameters ?? {},
-                display: {
-                    label,
-                    shape: collapsed ? 'square' : agentManifest?.display.shape ?? 'rectangle',
-                    iconBackground: agentManifest?.display.iconBackground
-                }
-            }
-        })
-    });
-}
-function DefaultStory() {
-    const initialNodes = useMemo(()=>[
-            {
-                id: 'agent-1',
-                type: 'uipath.agent.collapsible',
-                position: {
-                    x: 400,
-                    y: 300
-                },
-                data: {
-                    label: 'AI Agent',
-                    collapsed: false
-                }
-            },
-            {
-                id: 'memory-1',
-                type: 'uipath.resource.memory',
-                position: {
-                    x: 150,
-                    y: 140
-                },
-                data: {
-                    display: {
-                        label: 'Memory'
-                    },
-                    useSmartHandles: true
-                }
-            },
-            {
-                id: 'escalation-1',
-                type: 'uipath.resource.escalation',
-                position: {
-                    x: 350,
-                    y: 80
-                },
-                data: {
-                    display: {
-                        label: 'Escalation 1'
-                    },
-                    useSmartHandles: true
-                }
-            },
-            {
-                id: 'escalation-2',
-                type: 'uipath.resource.escalation',
-                position: {
-                    x: 530,
-                    y: 80
-                },
-                data: {
-                    display: {
-                        label: 'Escalation 2'
-                    },
-                    useSmartHandles: true
-                }
-            },
-            {
-                id: 'escalation-3',
-                type: 'uipath.resource.escalation',
-                position: {
-                    x: 710,
-                    y: 140
-                },
-                data: {
-                    display: {
-                        label: 'Escalation 3'
-                    },
-                    useSmartHandles: true
-                }
-            },
-            {
-                id: 'context-1',
-                type: 'uipath.resource.context',
-                position: {
-                    x: 150,
-                    y: 480
-                },
-                data: {
-                    display: {
-                        label: 'Context 1'
-                    },
-                    useSmartHandles: true
-                }
-            },
-            {
-                id: 'context-2',
-                type: 'uipath.resource.context',
-                position: {
-                    x: 330,
-                    y: 540
-                },
-                data: {
-                    display: {
-                        label: 'Context 2'
-                    },
-                    useSmartHandles: true
-                }
-            },
-            {
-                id: 'tools-1',
-                type: 'uipath.resource.tool',
-                position: {
-                    x: 500,
-                    y: 540
-                },
-                data: {
-                    display: {
-                        label: 'Tool 1'
-                    },
-                    useSmartHandles: true
-                }
-            },
-            {
-                id: 'tools-2',
-                type: 'uipath.resource.tool',
-                position: {
-                    x: 660,
-                    y: 540
-                },
-                data: {
-                    display: {
-                        label: 'Tool 2'
-                    },
-                    useSmartHandles: true
-                }
-            },
-            {
-                id: 'tools-3',
-                type: 'uipath.resource.tool',
-                position: {
-                    x: 820,
-                    y: 480
-                },
-                data: {
-                    display: {
-                        label: 'Tool 3'
-                    },
-                    useSmartHandles: true
-                }
-            },
-            {
-                id: 'tools-4',
-                type: 'uipath.resource.tool',
-                position: {
-                    x: 820,
-                    y: 320
-                },
-                data: {
-                    display: {
-                        label: 'Tool 4'
-                    },
-                    useSmartHandles: true
-                }
-            }
-        ], []);
-    const initialEdges = useMemo(()=>[
-            {
-                id: 'e-agent-memory',
-                source: 'agent-1',
-                target: 'memory-1',
-                sourceHandle: 'memory',
-                targetHandle: 'input'
-            },
-            {
-                id: 'e-agent-escalation-1',
-                source: 'agent-1',
-                target: 'escalation-1',
-                sourceHandle: 'escalation',
-                targetHandle: 'input'
-            },
-            {
-                id: 'e-agent-escalation-2',
-                source: 'agent-1',
-                target: 'escalation-2',
-                sourceHandle: 'escalation',
-                targetHandle: 'input'
-            },
-            {
-                id: 'e-agent-escalation-3',
-                source: 'agent-1',
-                target: 'escalation-3',
-                sourceHandle: 'escalation',
-                targetHandle: 'input'
-            },
-            {
-                id: 'e-agent-context-1',
-                source: 'agent-1',
-                target: 'context-1',
-                sourceHandle: 'context',
-                targetHandle: 'input'
-            },
-            {
-                id: 'e-agent-context-2',
-                source: 'agent-1',
-                target: 'context-2',
-                sourceHandle: 'context',
-                targetHandle: 'input'
-            },
-            {
-                id: 'e-agent-tools-1',
-                source: 'agent-1',
-                target: 'tools-1',
-                sourceHandle: 'tools',
-                targetHandle: 'input'
-            },
-            {
-                id: 'e-agent-tools-2',
-                source: 'agent-1',
-                target: 'tools-2',
-                sourceHandle: 'tools',
-                targetHandle: 'input'
-            },
-            {
-                id: 'e-agent-tools-3',
-                source: 'agent-1',
-                target: 'tools-3',
-                sourceHandle: 'tools',
-                targetHandle: 'input'
-            },
-            {
-                id: 'e-agent-tools-4',
-                source: 'agent-1',
-                target: 'tools-4',
-                sourceHandle: 'tools',
-                targetHandle: 'input'
-            }
-        ], []);
-    const { canvasProps } = useCanvasStory({
-        initialNodes,
-        initialEdges,
-        additionalNodeTypes: {
-            'uipath.agent.collapsible': CollapsibleAgentNode
-        }
-    });
-    return /*#__PURE__*/ jsxs(BaseCanvas, {
-        ...canvasProps,
-        mode: "design",
-        children: [
-            /*#__PURE__*/ jsx(StoryInfoPanel, {
-                title: "Collapsible nodes (Work in Progress)",
-                description: "Click on the agent node to see the collapse/expand button."
-            }),
-            /*#__PURE__*/ jsx(Panel, {
-                position: "bottom-right",
-                children: /*#__PURE__*/ jsx(CanvasPositionControls, {
-                    translations: DefaultCanvasTranslations
-                })
-            })
-        ]
-    });
-}
-const Default = {
-    render: ()=>/*#__PURE__*/ jsx(DefaultStory, {})
-};
-export { Default, CollapseConfig_stories as default };