@agentscope-ai/flow 0.0.6 → 0.0.8

package/dist/components/base-node/index.less

@@ -2,6 +2,7 @@
 
 .spark-flow-node-container {
   --angle: 0deg;
+
   border: 1px solid e('var(--@{ant-prefix}-color-border-secondary)');
   background: e('var(--@{ant-prefix}-color-bg-base)');
   display: flex;
@@ -32,7 +33,7 @@
     }
 
     &.spark-flow-node-container-hovered {
-      box-shadow: 0px 2px 8px 0px rgba(38, 36, 76, 0.3);
+      box-shadow: 0 2px 8px 0 rgba(38, 36, 76, 30%);
       border-color: e('var(--@{ant-prefix}-color-primary)');
     }
   }
@@ -99,7 +100,8 @@
   }
 
   &:hover {
-    box-shadow: 0px 4px 36px 0px rgba(60, 52, 197, 0.08);
+    box-shadow: 0 4px 36px 0 rgba(60, 52, 197, 8%);
+
     .spark-flow-target-handle {
       box-shadow: 0 0 0 2px rgb(105 83 245 / 15%);
       width: 16px;
@@ -227,6 +229,7 @@
 
 .spark-flow-status-icon {
   font-size: 20px;
+
   &-success {
     color: e('var(--@{ant-prefix}-color-success)');
   }
@@ -245,6 +248,7 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }

package/dist/components/custom-inputs-control/index.less

@@ -1,10 +1,12 @@
 @import '../../index.less';
+
 .spark-flow-variable-select {
   .@{ant-prefix}-popover-content {
     max-height: 300px;
     overflow-y: auto;
   }
 }
+
 .spark-flow-variable-from-select {
   .@{ant-prefix}-select-selection-item {
     height: 30px;

package/dist/components/custom-outputs-form/index.d.ts

@@ -19,6 +19,8 @@ export interface ICustomOutputsFormProps {
     isRoot?: boolean;
     enabledTypes?: (IValueType | 'Array')[];
     disabledTypes?: (IValueType | 'Array')[];
+    tier?: number;
+    maxTier?: number;
 }
 export declare const CustomOutputsForm: React.NamedExoticComponent<ICustomOutputsFormProps>;
 export declare const CustomOutputsFormWrap: React.NamedExoticComponent<ICustomOutputsFormProps>;

package/dist/components/custom-outputs-form/index.js

@@ -12,7 +12,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { FILE_PROPERTIES, VALUE_TYPE_OPTIONS } from "../../constant";
 import $i18n from "../../i18n";
-import { Button, Form, getCommonConfig, Input } from '@agentscope-ai/design';
+import { Button, Form, getCommonConfig, Input, Tooltip } from '@agentscope-ai/design';
 import { SparkDeleteLine, SparkPlusLine, SparkUpLine } from '@agentscope-ai/icons';
 import { Cascader } from 'antd';
 import classNames from 'classnames';
@@ -166,7 +166,11 @@ export var CustomOutputsForm = /*#__PURE__*/memo(function (_ref) {
     _ref$isRoot = _ref.isRoot,
     isRoot = _ref$isRoot === void 0 ? false : _ref$isRoot,
     enabledTypes = _ref.enabledTypes,
-    disabledTypes = _ref.disabledTypes;
+    disabledTypes = _ref.disabledTypes,
+    _ref$tier = _ref.tier,
+    tier = _ref$tier === void 0 ? 0 : _ref$tier,
+    _ref$maxTier = _ref.maxTier,
+    maxTier = _ref$maxTier === void 0 ? undefined : _ref$maxTier;
   var _Form$useForm = Form.useForm(),
     _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
     form = _Form$useForm2[0];
@@ -288,21 +292,29 @@ export var CustomOutputsForm = /*#__PURE__*/memo(function (_ref) {
         });
       },
       enabledTypes: enabledTypes,
-      disabledTypes: disabledTypes
+      disabledTypes: disabledTypes,
+      tier: tier + 1,
+      maxTier: maxTier
     }))));
-  }), readyOnly !== true && /*#__PURE__*/React.createElement(Button, {
+  }), readyOnly !== true && /*#__PURE__*/React.createElement(Tooltip, {
+    title: maxTier !== undefined && tier >= maxTier ? $i18n.get({
+      id: 'spark-flow.components.CustomOutputsForm.index.maxTierReached',
+      dm: '最大层级已达到，无法添加子变量'
+    }) : null
+  }, /*#__PURE__*/React.createElement(Button, {
     type: "link",
     onClick: handleAdd,
     size: "small",
     className: "self-start spark-flow-text-btn",
-    icon: /*#__PURE__*/React.createElement(SparkPlusLine, null)
+    icon: /*#__PURE__*/React.createElement(SparkPlusLine, null),
+    disabled: maxTier !== undefined && tier >= maxTier
   }, isRoot ? $i18n.get({
     id: 'spark-flow.components.CustomOutputsForm.index.addVariable',
     dm: '添加变量'
   }) : $i18n.get({
     id: 'spark-flow.components.CustomOutputsForm.index.addSubVariable',
     dm: '添加子变量'
-  })));
+  }))));
 });
 export var CustomOutputsFormWrap = /*#__PURE__*/memo(function (props) {
   var value = props.value,

package/dist/components/flow-base-edge/index.less

@@ -15,13 +15,14 @@
 }
 
 .spark-flow-animate-gradient-edge {
-  animation: gradientAnimation 2s linear infinite;
+  animation: gradient-animation 2s linear infinite;
 }
 
-@keyframes gradientAnimation {
+@keyframes gradient-animation {
   0% {
     transform: translateX(0);
   }
+
   100% {
     transform: translateX(100%);
   }

package/dist/components/flow-mini-map/index.less

@@ -8,9 +8,11 @@
   margin: 0 !important;
   border-radius: 6px;
   border: 1px solid e('var(--@{ant-prefix}-color-border-secondary)');
+
 .react-flow__minimap-node{
   fill: e('var(--@{ant-prefix}-color-primary-border-hover)');
 }
+
   > svg {
     width: 100%;
     height: 100%;

package/dist/components/flow-panel/index.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 import './index.less';
 interface IFlowPanel {
     children?: React.ReactNode[] | React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
 }
 declare const _default: React.NamedExoticComponent<IFlowPanel>;
 export default _default;

package/dist/components/flow-panel/index.js

@@ -1,7 +1,9 @@
 import React, { memo } from 'react';
 import "./index.less";
+import classNames from 'classnames';
 export default /*#__PURE__*/memo(function FlowPanel(props) {
   return /*#__PURE__*/React.createElement("div", {
-    className: "spark-flow-panel-group absolute flex gap-[16px] flex-nowrap"
+    className: classNames("spark-flow-panel-group absolute flex gap-[16px] flex-nowrap", props.className),
+    style: props.style
   }, props.children);
 });

package/dist/components/flow-panel/index.less

@@ -58,6 +58,7 @@
   flex-direction: column;
   gap: 20px;
   padding: 20px;
+
   &:not(:last-of-type){
     border-bottom: 1px solid e('var(--@{ant-prefix}-color-border-secondary)');
   }

package/dist/components/flow-tools/index.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
 import './index.less';
-declare const _default: React.NamedExoticComponent<object>;
+export interface IFlowToolsProps {
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const _default: React.NamedExoticComponent<IFlowToolsProps>;
 export default _default;

package/dist/components/flow-tools/index.js

@@ -8,10 +8,12 @@ import MiniMapBtn from "./mini-map-btn";
 import ScaleBtn from "./scale-btn";
 import ShortKeyBtn from "./short-key-btn";
 import TouchModeBtn from "./touch-mode-btn";
-export default /*#__PURE__*/memo(function FlowTools() {
+import classNames from 'classnames';
+export default /*#__PURE__*/memo(function FlowTools(props) {
   return /*#__PURE__*/React.createElement("div", {
     id: "spark-flow-bottom-tools-container",
-    className: "nopan absolute items-center flex left-[16px] bottom-[16px] gap-[12px]"
+    className: classNames("nopan absolute items-center flex left-[16px] bottom-[16px] gap-[12px]", props.className),
+    style: props.style
   }, /*#__PURE__*/React.createElement("div", {
     className: "spark-flow-tools gap-[8px] items-center flex"
   }, /*#__PURE__*/React.createElement(MiniMapBtn, null), /*#__PURE__*/React.createElement(Divider, {

package/dist/components/flow-tools/index.less

@@ -1,4 +1,5 @@
 @import '../../index.less';
+
 .spark-flow-tools {
   box-shadow:
     0 12px 24px -16px rgb(54 54 73 / 4%),

package/dist/components/flow-tools/short-key-content.less

@@ -1,4 +1,5 @@
 @import '../../index.less';
+
 .spark-flow-short-key-container {
   min-width: 224px;
 

package/dist/components/node-result-panel/index.less

@@ -72,6 +72,7 @@
       color: e('var(--@{ant-prefix}-color-info)');
     }
   }
+
   &.spark-flow-node-result-panel-skip,
   &.spark-flow-node-result-panel-wait,
   &.spark-flow-node-result-panel-stop {

package/dist/components/output-params-tree/index.less

@@ -1,4 +1,5 @@
 @import '../../index.less';
+
 .spark-flow-output-params-tree-node {
   display: flex;
   flex-direction: column;

package/dist/components/script-edit-modal/index.less

@@ -3,7 +3,7 @@
 .spark-flow-script-edit-modal {
   margin: 8px!important;
   max-width: 100vw!important;
-  top: 0px!important;
+  top: 0!important;
   .@{ant-prefix}-modal-header {
     position: relative;
     

package/dist/components/task-status/index.less

@@ -23,6 +23,7 @@
     display: inline-flex !important;
     align-items: center;
     gap: 2px;
+
     > span {
       margin-inline-start: 0 !important;
     }

package/dist/components/var-input-text-area/index.less

@@ -52,6 +52,7 @@
   .spark-flow-var-input-var-tag-icon {
     font-size: 12px !important;
   }
+
   .spark-flow-var-input-var-tag-key {
     color: e('var(--@{ant-prefix}-color-primary)');
     font-weight: 500;

package/dist/components/variable-input/index.less

@@ -1,4 +1,5 @@
 @import '../../index.less';
+
 .variable-input-container {
   display: flex;
   align-items: stretch;

package/dist/components/variable-tree-select/index.d.ts

@@ -29,5 +29,5 @@ export declare const VariableTreeNodeItem: React.MemoExoticComponent<(props: IVa
     value?: string | undefined;
     onChange?: ((value: Pick<IVarItem, 'type' | 'value'>) => void) | undefined;
 }) => React.JSX.Element>;
-declare const VariableTreeSelect: React.MemoExoticComponent<(props: IVariableTreeSelectProps) => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined>;
+declare const VariableTreeSelect: React.MemoExoticComponent<(props: IVariableTreeSelectProps) => string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined>;
 export default VariableTreeSelect;

package/dist/hooks/use-nodes-interaction.js

@@ -350,7 +350,7 @@ export var useNodesInteraction = function useNodesInteraction() {
   }, [store]);
   var onAddNewNodeWithSource = useCallback( /*#__PURE__*/function () {
     var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref5, source, target) {
-      var type, parentId, _store$getState5, nodes, setNodes, sourceNode, nodeInfo, newNodes, newNode, _tempNodes, targetNode, x, y, _newNode, _store$getState6, edges, setEdges, newEdges, tempNodes, sourceHandle;
+      var type, parentId, _store$getState5, nodes, setNodes, sourceNode, nodeInfo, newNodes, _sourceNode$width, newNode, _sourceNode$width2, _tempNodes, targetNode, x, y, _sourceNode$width3, _newNode, _store$getState6, edges, setEdges, newEdges, tempNodes, sourceHandle;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
@@ -359,10 +359,16 @@ export var useNodesInteraction = function useNodesInteraction() {
             sourceNode = nodes.find(function (item) {
               return item.id === source.id;
             });
+            if (sourceNode) {
+              _context2.next = 5;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 5:
             nodeInfo = nodeSchemaMap[type];
             newNodes = [];
             if (target) {
-              _context2.next = 24;
+              _context2.next = 26;
               break;
             }
             newNode = generateNewNode({
@@ -370,8 +376,8 @@ export var useNodesInteraction = function useNodesInteraction() {
               parentId: parentId,
               disableScreenToFlowPosition: true
             }, {
-              x: (sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.position.x) + (sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.width) + NEW_NODE_PADDING.x,
-              y: (sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.position.y) || 0
+              x: sourceNode.position.x + ((_sourceNode$width = sourceNode.width) !== null && _sourceNode$width !== void 0 ? _sourceNode$width : 0) + NEW_NODE_PADDING.x,
+              y: sourceNode.position.y || 0
             });
             if (nodeInfo.isGroup) {
               /* Iteration start and batch body nodes need to add loop start/end nodes by default; */
@@ -396,28 +402,28 @@ export var useNodesInteraction = function useNodesInteraction() {
                 y: 152
               }));
             }
-            _context2.prev = 8;
+            _context2.prev = 10;
             if (!nodeInfo.customAdd) {
-              _context2.next = 13;
+              _context2.next = 15;
               break;
             }
-            _context2.next = 12;
+            _context2.next = 14;
             return onAddCustomNode(newNode);
-          case 12:
+          case 14:
             newNode = _context2.sent;
-          case 13:
-            _context2.next = 17;
-            break;
           case 15:
-            _context2.prev = 15;
-            _context2.t0 = _context2["catch"](8);
+            _context2.next = 19;
+            break;
           case 17:
+            _context2.prev = 17;
+            _context2.t0 = _context2["catch"](10);
+          case 19:
             if (newNode) {
-              _context2.next = 19;
+              _context2.next = 21;
               break;
             }
             return _context2.abrupt("return");
-          case 19:
+          case 21:
             newNode.selected = true;
             addNewNodeCallback({
               newNodes: [newNode].concat(newNodes),
@@ -429,22 +435,22 @@ export var useNodesInteraction = function useNodesInteraction() {
               target: newNode.id,
               targetHandle: newNode.id
             });
-            _context2.next = 54;
+            _context2.next = 56;
             break;
-          case 24:
+          case 26:
             targetNode = nodes.find(function (item) {
               return item.id === target.id;
             });
             if (targetNode) {
-              _context2.next = 27;
+              _context2.next = 29;
               break;
             }
             return _context2.abrupt("return");
-          case 27:
-            x = (targetNode.position.x - (sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.position.x)) / 2 + (sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.position.x);
-            y = (targetNode.position.y - (sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.position.y)) / 2 + (sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.position.y);
-            if (x <= (sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.position.x) + (sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.width) + NEW_NODE_PADDING.x) {
-              x = (sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.position.x) + (sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.width) + NEW_NODE_PADDING.x;
+          case 29:
+            x = (targetNode.position.x - sourceNode.position.x) / 2 + sourceNode.position.x;
+            y = (targetNode.position.y - sourceNode.position.y) / 2 + sourceNode.position.y;
+            if (x <= sourceNode.position.x + ((_sourceNode$width2 = sourceNode.width) !== null && _sourceNode$width2 !== void 0 ? _sourceNode$width2 : 0) + NEW_NODE_PADDING.x) {
+              x = sourceNode.position.x + ((_sourceNode$width3 = sourceNode.width) !== null && _sourceNode$width3 !== void 0 ? _sourceNode$width3 : 0) + NEW_NODE_PADDING.x;
             }
             _newNode = generateNewNode({
               type: type,
@@ -454,22 +460,22 @@ export var useNodesInteraction = function useNodesInteraction() {
               x: x,
               y: y
             });
-            _context2.prev = 31;
+            _context2.prev = 33;
             if (!nodeInfo.customAdd) {
-              _context2.next = 36;
+              _context2.next = 38;
               break;
             }
-            _context2.next = 35;
+            _context2.next = 37;
             return onAddCustomNode(_newNode);
-          case 35:
+          case 37:
             _newNode = _context2.sent;
-          case 36:
-            _context2.next = 40;
-            break;
           case 38:
-            _context2.prev = 38;
-            _context2.t1 = _context2["catch"](31);
+            _context2.next = 42;
+            break;
           case 40:
+            _context2.prev = 40;
+            _context2.t1 = _context2["catch"](33);
+          case 42:
             if (nodeInfo.isGroup) {
               /* Iteration start and batch body nodes need to add loop start/end nodes by default; */
               newNodes.push(generateNewNode({
@@ -556,13 +562,13 @@ export var useNodesInteraction = function useNodesInteraction() {
             setNodes(tempNodes);
             setEdges(_toConsumableArray(newEdges));
             handleNodeClick(_newNode);
-          case 54:
+          case 56:
             handleSaveFlowDraft();
-          case 55:
+          case 57:
           case "end":
             return _context2.stop();
         }
-      }, _callee2, null, [[8, 15], [31, 38]]);
+      }, _callee2, null, [[10, 17], [33, 40]]);
     }));
     return function (_x3, _x4, _x5) {
       return _ref6.apply(this, arguments);

package/dist/hooks/use-nodes-output-params.js

@@ -168,7 +168,9 @@ export var filterVarItemsByType = function filterVarItemsByType(items, types) {
         });
       }
     }
-    filteredItem && filtered.push(filteredItem);
+    if (filteredItem) {
+      filtered.push(filteredItem);
+    }
     return filtered;
   }, []);
 };

package/dist/i18n/locales/en-us.json

@@ -39,6 +39,7 @@
   "spark-flow.components.CustomOutputsForm.index.variableName": "Name",
   "spark-flow.components.CustomOutputsForm.index.type": "Type",
   "spark-flow.components.CustomOutputsForm.index.description": "Description",
+  "spark-flow.components.CustomOutputsForm.index.maxTierReached": "Maximum tier reached, cannot add sub-variable",
   "spark-flow.components.FlowAside.index.nodeManagement": "Node",
   "spark-flow.components.FlowAside.index.nodeLibrary": "Library",
   "spark-flow.components.FlowAside.index.current": "Current",

package/dist/i18n/locales/ja-jp.json

@@ -39,6 +39,7 @@
     "spark-flow.components.CustomOutputsForm.index.variableName": "変数名",
     "spark-flow.components.CustomOutputsForm.index.type": "タイプ",
     "spark-flow.components.CustomOutputsForm.index.description": "説明",
+    "spark-flow.components.CustomOutputsForm.index.maxTierReached": "最大階層に達しました、子変数を追加できません",
     "spark-flow.components.FlowAside.index.nodeManagement": "ノード管理",
     "spark-flow.components.FlowAside.index.nodeLibrary": "ノードライブラリ",
     "spark-flow.components.FlowAside.index.current": "現在",

package/dist/i18n/locales/zh-cn.json

@@ -39,6 +39,7 @@
   "spark-flow.components.CustomOutputsForm.index.variableName": "变量名",
   "spark-flow.components.CustomOutputsForm.index.type": "类型",
   "spark-flow.components.CustomOutputsForm.index.description": "描述",
+  "spark-flow.components.CustomOutputsForm.index.maxTierReached": "最大层级已达到，无法添加子变量",
   "spark-flow.components.FlowAside.index.nodeManagement": "节点管理",
   "spark-flow.components.FlowAside.index.nodeLibrary": "节点库",
   "spark-flow.components.FlowAside.index.current": "当前",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentscope-ai/flow",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "A powerful and flexible flow canvas rendering engine designed for AI applications. Provides comprehensive workflow visualization and interaction capabilities for platforms like Bailian and AgentScope, enabling seamless creation and management of complex AI agent workflows with an intuitive drag-and-drop interface.",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",