@stack-spot/ai-chat-widget 0.11.0 → 1.0.0-dev.1768324407795

package/dist/views/Stacks.js

@@ -1,15 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button } from '@citric/core';
-import { Search } from '@citric/icons';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@stack-spot/citric-react';
 import { Placeholder } from '@stack-spot/portal-components/Placeholder';
-import { aiClient } from '@stack-spot/portal-network';
+import { aiClient, workspaceAiClient } from '@stack-spot/portal-network';
 import { useTranslate } from '@stack-spot/portal-translate';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { DescribedRadioGroup } from '../components/form/DescribedRadioGroup.js';
-import { IconInput } from '../components/IconInput.js';
+import { RightPanelContentList } from '../components/RightPanelContentList.js';
 import { RightPanelTabs } from '../components/RightPanelTabs.js';
+import { WorkspaceTabNavigator } from '../components/WorkspaceTabNavigator.js';
 import { useCurrentChat, useWidget, useWidgetState } from '../context/hooks.js';
 import { useRightPanel } from '../right-panel/hooks.js';
+import { checkIsTrial } from '../utils/check-is-trial.js';
+/**
+ * Renders the Stack selection form in the Right Panel if this is the panel that is currently opened.
+ */
 export const Stacks = () => {
     const t = useTranslate(dictionary);
     const panel = useWidgetState('panel');
@@ -24,29 +28,117 @@ export const Stacks = () => {
 const StacksPanel = () => {
     const t = useTranslate(dictionary);
     const chat = useCurrentChat();
-    return _jsx(RightPanelTabs, { tabs: [
-            { title: t.personal, content: _jsx(StacksTab, { visibility: "personal" }, "personal") },
-            { title: t.shared, content: _jsx(StacksTab, { visibility: "shared" }, "shared") },
-            { title: t.account, content: _jsx(StacksTab, { visibility: "account" }, "account") },
-        ] }, chat.id);
+    const isTrial = checkIsTrial();
+    const stack = useRef(chat.get('stack'));
+    const features = useWidgetState('features');
+    const isGroupResourcesByScope = features?.groupResourcesByScope;
+    const scopes = features?.scopes ?? [];
+    const spotId = features?.workspaceId;
+    useEffect(() => {
+        stack.current = chat.get('stack');
+    }, [chat]);
+    const allTabsMap = {
+        favorite: { label: t.favorites, content: _jsx(StacksTab, { visibility: "favorite", stack: stack }, "favorites") },
+        personal: { label: t.personal, content: _jsx(StacksTab, { visibility: "personal", stack: stack }, "personal") },
+        shared: { label: t.shared, content: _jsx(StacksTab, { visibility: "shared", stack: stack }, "shared") },
+        workspace: { label: t.spots, content: _jsx(StacksTabWorkspace, { visibility: "workspace", stack: stack }, "workspace") },
+        account: { label: t.account, content: _jsx(StacksTab, { visibility: "account", stack: stack }, "account") },
+    };
+    const defaultScopes = ['favorite', 'personal', 'shared', 'workspace', 'account'];
+    const rawScopes = scopes?.length ? scopes : defaultScopes;
+    const scopesToRender = isTrial
+        ? ['favorite', 'personal']
+        : rawScopes;
+    const tabs = scopesToRender
+        .map(scope => scope in allTabsMap ? { key: scope, ...allTabsMap[scope] } : undefined)
+        .filter(Boolean);
+    return (isGroupResourcesByScope ? (_jsx(RightPanelTabs, { tabs: tabs }, chat.id)) : (_jsx(RightPanelContentList, { children: _jsx(StacksTab, { stack: stack, workspaceId: spotId }) })));
 };
-const StacksTab = ({ visibility }) => {
+export const StacksTab = ({ visibility, workspaceId, stack, showSubmitButton = true }) => {
     const t = useTranslate(dictionary);
     const { close } = useRightPanel();
     const chat = useCurrentChat();
-    const [filter, setFilter] = useState('');
-    const stacks = aiClient.aiStacks.useQuery({ visibility, order: 'a-to-z' });
-    const [value, setValue] = useState(stacks.find(s => s.id === chat.get('stack')?.id));
-    const filtered = useMemo(() => filter ? stacks.filter(s => s === value || s.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) : stacks, [stacks, filter, value]);
+    const listFavorites = aiClient.aiStacks.useQuery({ visibility: 'favorite' });
+    const [addFavorite, pendingAddFav] = aiClient.addFavoriteStackAi.useMutation();
+    const [removeFavorite, pendingRemoveFav] = aiClient.removeFavoriteStackAi.useMutation();
+    const [submitEnabled, setSubmitEnabled] = useState(false);
+    const removeFavoriteStack = async (idOrSlug) => {
+        try {
+            await removeFavorite({ stackId: idOrSlug });
+            await aiClient.aiStacks.invalidate();
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.error(error);
+        }
+    };
+    // eslint-disable-next-line no-async-promise-executor
+    const onRemoveFavorite = (idOrSlug) => new Promise(async (resolve, reject) => {
+        try {
+            await removeFavoriteStack(idOrSlug);
+            if (!pendingRemoveFav) {
+                resolve(true);
+            }
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.error(error);
+            reject(error);
+        }
+    });
+    const addFavoriteStack = async (idOrSlug) => {
+        try {
+            await addFavorite({ stackId: idOrSlug });
+            await aiClient.aiStacks.invalidate();
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.error(error);
+        }
+    };
+    // eslint-disable-next-line no-async-promise-executor
+    const onAddFavorite = (idOrSlug) => new Promise(async (resolve, reject) => {
+        try {
+            await addFavoriteStack(idOrSlug);
+            if (!pendingAddFav) {
+                resolve(true);
+            }
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.error(error);
+            reject(error);
+        }
+    });
+    const stacks = workspaceId
+        ? workspaceAiClient.getStackFromWorkspaceAi.useQuery({ workspaceId })
+        //@ts-ignore
+        : aiClient.aiStacks.useQuery({ visibility, order: 'a-to-z' });
+    const initialValue = useMemo(() => {
+        const currentStackId = stack.current ? stack.current.id : chat.get('stack')?.id;
+        const initial = stacks.find(s => s.id === currentStackId);
+        if (initial)
+            setSubmitEnabled(true);
+        return initial;
+    }, [stacks]);
     function submit() {
-        if (value)
-            chat.set('stack', { id: value.id, label: value.name });
+        if (stack.current)
+            chat.set('stack', stack.current);
         close();
     }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "content", children: [_jsx(IconInput, { icon: _jsx(Search, {}), value: filter, onChange: setFilter, className: "search" }), !!filtered.length && _jsx(DescribedRadioGroup, { options: filtered, keygen: s => s.id, value: value, onChange: setValue, renderLabel: s => s.name, renderDescription: s => s.use_case, optionClassName: s => (s === value && filter && !s.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()))
-                            ? 'filtered-out'
-                            : '', className: "option-list" }), !!stacks.length && !filtered.length && _jsx(Placeholder, { title: t.noSearchResults, description: t.noSearchResultsDescription }), !stacks.length && _jsx(Placeholder, { title: t.noData, description: t.noDataDescription })] }), _jsx(Button, { onClick: submit, disabled: !value, children: t.apply })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "content", children: _jsx(DescribedRadioGroup, { options: stacks, initialValue: initialValue, data: s => ({ idOrSlug: s.id, description: s.use_case, name: s.name, listFavorites, onAddFavorite, onRemoveFavorite }), emptyResults: _jsx(Placeholder, { title: t.noSearchResults, description: t.noSearchResultsDescription, className: "no-data-placeholder" }), emptyDataset: _jsx(Placeholder, { title: t.noData, description: t.noDataDescription }), onChange: (s) => {
+                        stack.current = s ? { ...s, label: s.name } : undefined;
+                        setSubmitEnabled(true);
+                    } }) }), !!stacks.length && showSubmitButton && _jsx(Button, { onClick: submit, disabled: !submitEnabled, children: t.apply })] }));
 };
+function StacksTabWorkspace({ stack, visibility, showSubmitButton }) {
+    const workspaceTabComponents = useMemo(() => ({ stack: StacksTab }), [stack]);
+    const buildNavigateParams = (workspace) => ({
+        component: 'stack',
+        props: { visibility, workspaceId: workspace.id, stack, showSubmitButton },
+    });
+    return _jsx(WorkspaceTabNavigator, { components: workspaceTabComponents, getNavigateParam: buildNavigateParams });
+}
 const dictionary = {
     en: {
         title: 'Stacks AI',
@@ -59,6 +151,8 @@ const dictionary = {
         noSearchResultsDescription: 'Please, try another search term.',
         noData: 'There are no stacks in this category yet.',
         noDataDescription: 'Use the tabs above to try other categories or use the AI portal to create new stacks.',
+        favorites: 'Favorites',
+        spots: 'Spots',
     },
     pt: {
         title: 'Stacks AI',
@@ -71,6 +165,8 @@ const dictionary = {
         noSearchResultsDescription: 'Por favor, tente outra busca.',
         noData: 'Ainda não há stacks nesta categoria.',
         noDataDescription: 'Use as abas acima para tentar outras categorias ou use o Portal AI para criar novas stacks.',
+        favorites: 'Favoritos',
+        spots: 'Spots',
     },
 };
 //# sourceMappingURL=Stacks.js.map

package/dist/views/Stacks.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stacks.js","sourceRoot":"","sources":["../../src/views/Stacks.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Stacks.js","sourceRoot":"","sources":["../../src/views/Stacks.tsx"],"names":[],"mappings":"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"}

package/dist/views/Steps/FlowChart/HandleGroup.d.ts

@@ -0,0 +1,10 @@
+import { Position } from '@xyflow/react';
+interface Props {
+    renderSource?: boolean;
+    renderTarget?: boolean;
+    targetPosition?: Position;
+    sourcePosition?: Position;
+}
+export declare const HandleGroup: ({ renderSource, renderTarget, targetPosition, sourcePosition }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=HandleGroup.d.ts.map

package/dist/views/Steps/FlowChart/HandleGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HandleGroup.d.ts","sourceRoot":"","sources":["../../../../src/views/Steps/FlowChart/HandleGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,QAAQ,EAAE,MAAM,eAAe,CAAA;AAEhD,UAAU,KAAK;IACb,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,cAAc,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,eAAO,MAAM,WAAW,mEAAkF,KAAK,4CAK9G,CAAA"}

package/dist/views/Steps/FlowChart/HandleGroup.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Handle, Position } from '@xyflow/react';
+export const HandleGroup = ({ renderSource = true, renderTarget = true, targetPosition, sourcePosition }) => (_jsxs(_Fragment, { children: [renderTarget && _jsx(Handle, { type: "target", position: targetPosition || Position.Left, isConnectable: true, className: "target-handle" }), renderSource && _jsx(Handle, { type: "source", position: sourcePosition || Position.Right, isConnectable: true, className: "source-handle" })] }));
+//# sourceMappingURL=HandleGroup.js.map

package/dist/views/Steps/FlowChart/HandleGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HandleGroup.js","sourceRoot":"","sources":["../../../../src/views/Steps/FlowChart/HandleGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAQhD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,YAAY,GAAG,IAAI,EAAE,YAAY,GAAG,IAAI,EAAE,cAAc,EAAE,cAAc,EAAS,EAAE,EAAE,CAAC,CAClH,8BACG,YAAY,IAAI,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,cAAc,IAAI,QAAQ,CAAC,IAAI,EAAE,aAAa,QAAC,SAAS,EAAC,eAAe,GAAG,EAC3H,YAAY,IAAI,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,cAAc,IAAI,QAAQ,CAAC,KAAK,EAAE,aAAa,QAAC,SAAS,EAAC,eAAe,GAAG,IAC5H,CACJ,CAAA"}

package/dist/views/Steps/FlowChart/NodeDynamic.d.ts

@@ -0,0 +1,15 @@
+import { ChatAgentTool } from '@stack-spot/portal-network';
+import { Position } from '@xyflow/react';
+import { NodeData } from './types.js';
+export declare const ListTools: ({ tools, onClick }: {
+    tools: ChatAgentTool[];
+    onClick?: (toolIndex?: number) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+interface Props {
+    data: NodeData;
+    targetPosition?: Position;
+    sourcePosition?: Position;
+}
+export declare const NodeDynamic: ({ data, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=NodeDynamic.d.ts.map

package/dist/views/Steps/FlowChart/NodeDynamic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeDynamic.d.ts","sourceRoot":"","sources":["../../../../src/views/Steps/FlowChart/NodeDynamic.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAE1D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAMxC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAuBlC,eAAO,MAAM,SAAS,uBAAwB;IAAE,KAAK,EAAE,aAAa,EAAE,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE,4CAU/G,CAAA;AAcD,UAAU,KAAK;IACb,IAAI,EAAE,QAAQ,CAAC;IACf,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,cAAc,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAED,eAAO,MAAM,WAAW,uBAAwB,KAAK,4CAgCpD,CAAA"}

package/dist/views/Steps/FlowChart/NodeDynamic.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@stack-spot/citric-icons';
+import { Avatar, Column, IconBox, Row, Skeleton, Text } from '@stack-spot/citric-react';
+import { AnimatedHeight } from '@stack-spot/portal-components/AnimatedHeight';
+import { listToClass } from '@stack-spot/portal-theme';
+import { useChatEntry } from '../../../context/hooks.js';
+import { useStepsDictionary } from '../dictionary.js';
+import { getTitle, getTypeIcon } from '../utils.js';
+import { HandleGroup } from './HandleGroup.js';
+import { useResizeObserver } from './hooks.js';
+const ToolItem = ({ tool, index, onClick }) => {
+    const { name, image, input, status } = tool;
+    if (status === 'running') {
+        return _jsx(Skeleton, { height: "48px", bgLevel: 600 });
+    }
+    return (_jsxs("div", { className: "tool", onClick: () => onClick?.(index), children: [_jsxs(Row, { gap: "4px", alignItems: "center", mb: 2, children: [image
+                        ? _jsx(Avatar, { size: "xxs", image: image, name: name })
+                        : _jsx(Icon, { icon: "Cog", group: "outline" }), _jsx(Text, { weight: "500", className: "title", children: name })] }), _jsx(Text, { nowrapEllipsis: true, color: "light.700", children: input })] }));
+};
+export const ListTools = ({ tools, onClick }) => (_jsx(AnimatedHeight, { children: _jsx(Column, { gap: "8px", children: tools.map((tool, index) => (_jsx(Column, { className: "wrapper-tool", children: _jsx(ToolItem, { tool: tool, index: index, onClick: onClick }) }, `${tool.id}-${index}`))) }) }));
+const NodeBox = ({ title, icon, content, onClick }) => (_jsxs(Column, { onClick: onClick, style: { cursor: onClick ? 'pointer' : 'default' }, children: [_jsxs(Row, { gap: "4px", alignItems: "center", children: [_jsx(IconBox, { ...icon, appearance: "none", colorScheme: "light", size: "sm" }), _jsx(Text, { className: "step-index", weight: "500", children: title })] }), _jsx(Text, { nowrapEllipsis: true, color: "light.700", children: content })] }));
+export const NodeDynamic = ({ data, ...props }) => {
+    const { step, index, onClick, onResize, message } = data;
+    const content = useChatEntry(message)?.content;
+    const t = useStepsDictionary();
+    const ref = useResizeObserver(onResize);
+    const tools = step.type === 'step' ? step?.attempts?.[0]?.tools : undefined;
+    const renderContent = () => {
+        if (step.type === 'planning') {
+            return _jsx(NodeBox, { title: t.userPrompt, content: step.user_question, icon: { ...getTypeIcon(step.type) } });
+        }
+        if (step.type === 'step') {
+            return tools?.length ? _jsx(ListTools, { onClick: onClick, tools: tools }) : null;
+        }
+        if (step.type === 'answer') {
+            return _jsx(Column, { p: 3, bg: "light.400", onClick: () => onClick?.(index), children: _jsx(NodeBox, { onClick: onClick, title: t.finalAnswer, content: content, icon: { ...getTypeIcon(step.type) } }) });
+        }
+    };
+    return (_jsx("div", { ref: ref, "aria-label": getTitle(t, step, index), children: _jsxs("div", { className: listToClass(['chart-node', null, step.status]), children: [renderContent(), _jsx(HandleGroup, { ...props, renderSource: step.type !== 'answer', renderTarget: step.type !== 'planning' })] }) }));
+};
+//# sourceMappingURL=NodeDynamic.js.map

package/dist/views/Steps/FlowChart/NodeDynamic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeDynamic.js","sourceRoot":"","sources":["../../../../src/views/Steps/FlowChart/NodeDynamic.tsx"],"names":[],"mappings":"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"}

package/dist/views/Steps/FlowChart/NodeStep.d.ts

@@ -0,0 +1,10 @@
+import { Position } from '@xyflow/react';
+import { NodeData } from './types.js';
+interface Props {
+    data: NodeData;
+    targetPosition?: Position;
+    sourcePosition?: Position;
+}
+export declare const NodeStep: ({ data: { step, index, nextStatus, onClick }, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=NodeStep.d.ts.map

package/dist/views/Steps/FlowChart/NodeStep.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeStep.d.ts","sourceRoot":"","sources":["../../../../src/views/Steps/FlowChart/NodeStep.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAKxC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAElC,UAAU,KAAK;IACb,IAAI,EAAE,QAAQ,CAAC;IACf,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,cAAc,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAED,eAAO,MAAM,QAAQ,6DAA8D,KAAK,4CAgCvF,CAAA"}

package/dist/views/Steps/FlowChart/NodeStep.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@stack-spot/citric-icons';
+import { Text } from '@stack-spot/citric-react';
+import { listToClass } from '@stack-spot/portal-theme';
+import { StackedBadge } from '../../../components/StackedBadge.js';
+import { useStepsDictionary } from '../dictionary.js';
+import { getStatusIcon, getTitle, getTypeIcon } from '../utils.js';
+import { HandleGroup } from './HandleGroup.js';
+export const NodeStep = ({ data: { step, index, nextStatus, onClick }, ...props }) => {
+    const t = useStepsDictionary();
+    return (_jsxs("div", { className: listToClass(['chart-node', step.type, nextStatus]), onClick: () => onClick?.(), onKeyDown: e => e.key === 'Enter' && onClick?.(), tabIndex: 0, role: "button", "aria-label": getTitle(t, step, index), children: [_jsxs("header", { children: [_jsx(Icon, { ...getTypeIcon(step.type) }), _jsx(Text, { className: "step-index", children: getTitle(t, step, index) }), getStatusIcon(step.status)] }), step.type === 'planning' && _jsx(Text, { className: "step-title", children: step.goal }), step.type === 'step' && step.input && _jsx(Text, { className: "step-title", children: step.input }), step.type === 'step' && _jsxs("div", { className: "step-details", children: [_jsx(Text, { className: listToClass(['step-description', !!step.attempts[0].tools?.length && 'with-tools']), children: step.output }), !!step.attempts[0].tools?.length && _jsx(StackedBadge, { label: t.tools, images: step.attempts[0].tools?.slice(0, 3).map(tool => ({ key: tool.id, name: tool.name ?? '', url: tool.image, icon: _jsx(Icon, { icon: "Cog" }) })) })] }), _jsx(HandleGroup, { ...props, renderSource: step.type !== 'answer', renderTarget: step.type !== 'planning' }), "    "] }));
+};
+//# sourceMappingURL=NodeStep.js.map

package/dist/views/Steps/FlowChart/NodeStep.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeStep.js","sourceRoot":"","sources":["../../../../src/views/Steps/FlowChart/NodeStep.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAA;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAS3C,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,EAAE,GAAG,KAAK,EAAS,EAAE,EAAE;IAC1F,MAAM,CAAC,GAAG,kBAAkB,EAAE,CAAA;IAE9B,OAAO,CACL,eACE,SAAS,EAAE,WAAW,CAAC,CAAC,YAAY,EAAE,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC,EAC7D,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,EAC1B,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,OAAO,EAAE,EAAE,EAChD,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,gBACD,QAAQ,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,aAEpC,6BACE,KAAC,IAAI,OAAK,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAI,EACpC,KAAC,IAAI,IAAC,SAAS,EAAC,YAAY,YAAE,QAAQ,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,GAAQ,EAC7D,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,IACpB,EACR,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,KAAC,IAAI,IAAC,SAAS,EAAC,YAAY,YAAE,IAAI,CAAC,IAAI,GAAQ,EAC3E,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,KAAK,IAAI,KAAC,IAAI,IAAC,SAAS,EAAC,YAAY,YAAE,IAAI,CAAC,KAAK,GAAQ,EACtF,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,eAAK,SAAS,EAAC,cAAc,aACpD,KAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,CAAC,kBAAkB,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,IAAI,YAAY,CAAC,CAAC,YACjG,IAAI,CAAC,MAAM,GACP,EACN,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,IAAI,KAAC,YAAY,IAChD,KAAK,EAAE,CAAC,CAAC,KAAK,EACd,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAC7C,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,KAAK,GAAG,EAAE,CAAC,CAC9F,GACD,IACE,EACN,KAAC,WAAW,OAAK,KAAK,EAAE,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU,GAAI,YAAU,CACrH,CAAA;AACH,CAAC,CAAA"}

package/dist/views/Steps/FlowChart/hooks.d.ts

@@ -0,0 +1,7 @@
+interface Size {
+    width: number;
+    height: number;
+}
+export declare const useResizeObserver: (callback?: (size: Size) => void, delay?: number) => import("react").MutableRefObject<HTMLDivElement | null>;
+export {};
+//# sourceMappingURL=hooks.d.ts.map

package/dist/views/Steps/FlowChart/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../src/views/Steps/FlowChart/hooks.ts"],"names":[],"mappings":"AAGA,UAAU,IAAI;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,iBAAiB,cAAe,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,4EAgChE,CAAA"}

package/dist/views/Steps/FlowChart/hooks.js

@@ -0,0 +1,31 @@
+import { debounce } from 'lodash';
+import { useEffect, useRef } from 'react';
+export const useResizeObserver = (callback, delay = 50) => {
+    const ref = useRef(null);
+    const previousSizeRef = useRef(null);
+    useEffect(() => {
+        if (!ref.current || !callback)
+            return;
+        const debouncedCallback = debounce((newSize) => {
+            const prevSize = previousSizeRef.current;
+            const hasChanged = !prevSize || prevSize.width !== newSize.width || prevSize.height !== newSize.height;
+            if (hasChanged) {
+                previousSizeRef.current = newSize;
+                callback(newSize);
+            }
+        }, delay);
+        const resizeObserver = new ResizeObserver((entries) => {
+            if (!entries.length)
+                return;
+            const { width, height } = entries[0].contentRect;
+            debouncedCallback({ width, height });
+        });
+        resizeObserver.observe(ref.current);
+        return () => {
+            resizeObserver.disconnect();
+            debouncedCallback.cancel();
+        };
+    }, [callback]);
+    return ref;
+};
+//# sourceMappingURL=hooks.js.map

package/dist/views/Steps/FlowChart/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../../src/views/Steps/FlowChart/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAOzC,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,QAA+B,EAAE,KAAK,GAAG,EAAE,EAAE,EAAE;IAC/E,MAAM,GAAG,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAA;IAC/C,MAAM,eAAe,GAAG,MAAM,CAAc,IAAI,CAAC,CAAA;IAEjD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,CAAC,QAAQ;YAAE,OAAM;QAErC,MAAM,iBAAiB,GAAG,QAAQ,CAAC,CAAC,OAAa,EAAE,EAAE;YACnD,MAAM,QAAQ,GAAG,eAAe,CAAC,OAAO,CAAA;YACxC,MAAM,UAAU,GAAG,CAAC,QAAQ,IAAI,QAAQ,CAAC,KAAK,KAAK,OAAO,CAAC,KAAK,IAAI,QAAQ,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM,CAAA;YAEtG,IAAI,UAAU,EAAE,CAAC;gBACf,eAAe,CAAC,OAAO,GAAG,OAAO,CAAA;gBACjC,QAAQ,CAAC,OAAO,CAAC,CAAA;YACnB,CAAC;QACH,CAAC,EAAE,KAAK,CAAC,CAAA;QAET,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;YACpD,IAAI,CAAC,OAAO,CAAC,MAAM;gBAAE,OAAM;YAC3B,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAA;YAChD,iBAAiB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAA;QACtC,CAAC,CAAC,CAAA;QAEF,cAAc,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;QAEnC,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,UAAU,EAAE,CAAA;YAC3B,iBAAiB,CAAC,MAAM,EAAE,CAAA;QAC5B,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,OAAO,GAAG,CAAA;AACZ,CAAC,CAAA"}

package/dist/views/Steps/FlowChart/index.d.ts

@@ -0,0 +1,12 @@
+import { ChatStep } from '@stack-spot/portal-network';
+import '@xyflow/react/dist/style.css';
+import { ChatEntry } from '../../../state/ChatEntry.js';
+import { LayoutDirection } from './layout.js';
+interface Props {
+    message: ChatEntry;
+    onClick: (step: ChatStep, toolIndex?: number) => void;
+    direction?: LayoutDirection;
+}
+export declare const FlowChart: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/views/Steps/FlowChart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Steps/FlowChart/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAA;AAGrD,OAAO,8BAA8B,CAAA;AAIrC,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACpD,OAAO,EAAE,eAAe,EAAuB,MAAM,UAAU,CAAA;AAM/D,UAAU,KAAK;IACb,OAAO,EAAE,SAAS,CAAC;IACnB,OAAO,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,SAAS,CAAC,EAAE,eAAe,CAAC;CAC7B;AAwFD,eAAO,MAAM,SAAS,UAAW,KAAK,4CAIrC,CAAA"}

package/dist/views/Steps/FlowChart/index.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { listToClass, theme } from '@stack-spot/portal-theme';
+import { Background, Controls, MarkerType, ReactFlow, ReactFlowProvider, useReactFlow } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { last } from 'lodash';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useChatEntry } from '../../../context/hooks.js';
+import { useLayoutedElements } from './layout.js';
+import { NodeDynamic } from './NodeDynamic.js';
+import { NodeStep } from './NodeStep.js';
+import { FlowChartBox } from './styled.js';
+const NODE_TYPES = {
+    step: { planning: NodeStep, step: NodeStep, answer: NodeStep },
+    stepDynamic: { planning: NodeDynamic, step: NodeDynamic, answer: NodeDynamic },
+};
+const Flow = ({ message, onClick, direction = 'LR' }) => {
+    const steps = useChatEntry(message).steps;
+    const [nodeSizes, setNodeSizes] = useState({});
+    const reactFlowInstance = useReactFlow();
+    const isDynamic = useMemo(() => steps?.some((step) => step.id === 'dynamic'), [steps]);
+    const nodeTypes = useMemo(() => NODE_TYPES[isDynamic ? 'stepDynamic' : 'step'], [isDynamic]);
+    const handleNodeSizeChange = useCallback((id, size) => {
+        setNodeSizes((prev) => {
+            const current = prev[id];
+            if (current?.width === size.width && current?.height === size.height)
+                return prev;
+            return { ...prev, [id]: size };
+        });
+    }, []);
+    const baseElements = useMemo(() => {
+        const nodes = steps?.map((s, index) => {
+            const nodeSize = nodeSizes[s.id];
+            return {
+                id: s.id,
+                type: s.type,
+                focusable: false,
+                ...(nodeSize && { width: nodeSize.width, height: nodeSize.height }),
+                origin: [1, 0],
+                data: {
+                    message,
+                    step: s,
+                    index,
+                    nextStatus: steps[index + 1]?.status,
+                    onClick: (toolIndex) => onClick(s, toolIndex),
+                    onResize: (size) => handleNodeSizeChange(s.id, size),
+                },
+            };
+        }) ?? [];
+        const edges = [];
+        for (let i = 0; i < nodes.length - 1; i++) {
+            edges.push({
+                id: `${nodes[i].id}-${nodes[i + 1].id}`,
+                source: nodes[i].id,
+                target: nodes[i + 1].id,
+                className: listToClass(['edge', nodes[i]?.data?.nextStatus ?? 'pending']),
+                focusable: false,
+                markerEnd: {
+                    type: MarkerType.Arrow,
+                    strokeWidth: 2,
+                    color: theme.color.light[700],
+                },
+            });
+        }
+        return { nodes, edges };
+    }, [steps, nodeSizes, message, onClick, handleNodeSizeChange]);
+    const { nodes, edges } = useLayoutedElements(baseElements.nodes, baseElements.edges, direction);
+    useEffect(() => {
+        const lastNode = last(nodes);
+        const isRunning = lastNode?.data?.step?.status === 'running';
+        const shouldFitView = nodes.length > 2 && isRunning || (lastNode?.height ?? 0 > 180) && isRunning;
+        if (shouldFitView) {
+            reactFlowInstance.fitView({ duration: 1000, padding: { bottom: '120px', top: '20px' } });
+        }
+    }, [nodes, edges, reactFlowInstance]);
+    return (_jsx(FlowChartBox, { children: _jsxs(ReactFlow, { nodes: nodes, edges: edges, nodeTypes: nodeTypes, snapToGrid: true, fitView: true, maxZoom: 1, children: [_jsx(Controls, { orientation: "horizontal", className: "controls", showInteractive: false }), _jsx(Background, {})] }) }));
+};
+export const FlowChart = (props) => (_jsx(ReactFlowProvider, { children: _jsx(Flow, { ...props }) }));
+//# sourceMappingURL=index.js.map

package/dist/views/Steps/FlowChart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/views/Steps/FlowChart/index.tsx"],"names":[],"mappings":"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"}

package/dist/views/Steps/FlowChart/layout.d.ts

@@ -0,0 +1,8 @@
+import { Edge } from '@xyflow/react';
+import { NodeFullProps } from './types.js';
+export type LayoutDirection = 'TB' | 'BT' | 'LR' | 'RL';
+export declare function useLayoutedElements(nodes: NodeFullProps[], edges: Edge[], direction?: LayoutDirection): {
+    nodes: NodeFullProps[];
+    edges: Edge[];
+};
+//# sourceMappingURL=layout.d.ts.map

package/dist/views/Steps/FlowChart/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../src/views/Steps/FlowChart/layout.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAY,MAAM,eAAe,CAAA;AAG9C,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AASvC,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAevD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,SAAS,GAAE,eAAsB;;;EA2C3G"}

package/dist/views/Steps/FlowChart/layout.js

@@ -0,0 +1,59 @@
+import dagre from '@dagrejs/dagre';
+import { Position } from '@xyflow/react';
+import { useMemo } from 'react';
+import { answerNodeSize, planningNodeSize, stepNodeSize } from './styled.js';
+const nodesSizes = {
+    step: stepNodeSize,
+    planning: planningNodeSize,
+    answer: answerNodeSize,
+    tool: stepNodeSize,
+};
+const getHandlePositions = (direction) => {
+    switch (direction) {
+        case 'TB':
+            return { target: Position.Top, source: Position.Bottom };
+        case 'BT':
+            return { target: Position.Bottom, source: Position.Top };
+        case 'LR':
+            return { target: Position.Left, source: Position.Right };
+        case 'RL':
+            return { target: Position.Right, source: Position.Left };
+    }
+};
+export function useLayoutedElements(nodes, edges, direction = 'LR') {
+    const dagreGraph = useMemo(() => new dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({})), []);
+    return useMemo(() => {
+        dagreGraph.setGraph({ rankdir: direction });
+        nodes.forEach((node) => {
+            const { width, height } = nodesSizes[node.type];
+            const nodeWidth = node.width ?? width;
+            const nodeHeight = node.height ?? height;
+            dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
+        });
+        edges.forEach((edge) => {
+            dagreGraph.setEdge(edge.source, edge.target);
+        });
+        dagre.layout(dagreGraph);
+        const { target, source } = getHandlePositions(direction);
+        const newNodes = nodes.map((node) => {
+            const { width, height } = nodesSizes[node.type];
+            const nodeWidth = node?.width ?? width;
+            const nodeHeight = node.height ?? height;
+            const nodeWithPosition = dagreGraph.node(node.id);
+            const newNode = {
+                ...node,
+                targetPosition: target,
+                sourcePosition: source,
+                // We are shifting the dagre node position (anchor=center center) to the top left
+                // so it matches the React Flow node anchor point (top left).
+                position: {
+                    x: nodeWithPosition.x - nodeWidth / 2,
+                    y: nodeWithPosition.y - nodeHeight / 2,
+                },
+            };
+            return newNode;
+        });
+        return { nodes: newNodes, edges };
+    }, [nodes, edges]);
+}
+//# sourceMappingURL=layout.js.map

package/dist/views/Steps/FlowChart/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../../src/views/Steps/FlowChart/layout.ts"],"names":[],"mappings":"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"}

package/dist/views/Steps/FlowChart/styled.d.ts

@@ -0,0 +1,14 @@
+export declare const stepNodeSize: {
+    width: number;
+    height: number;
+};
+export declare const planningNodeSize: {
+    width: number;
+    height: number;
+};
+export declare const answerNodeSize: {
+    width: number;
+    height: number;
+};
+export declare const FlowChartBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+//# sourceMappingURL=styled.d.ts.map

package/dist/views/Steps/FlowChart/styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../../src/views/Steps/FlowChart/styled.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY;;;CAA8B,CAAA;AACvD,eAAO,MAAM,gBAAgB;;;CAA6B,CAAA;AAC1D,eAAO,MAAM,cAAc;;;CAA6B,CAAA;AAExD,eAAO,MAAM,YAAY,wOAqJxB,CAAA"}