@agentscope-ai/flow 0.0.1

package/dist/components/judge-form/index.js

@@ -0,0 +1,182 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+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 $i18n from "../../i18n";
+import { generateUniqueName } from "../../utils";
+import uniqueId from "../../utils/unique-id";
+import { Button } from '@agentscope-ai/design';
+import { SparkDeleteLine, SparkPlusLine } from '@agentscope-ai/icons';
+import { Flex } from 'antd';
+import classNames from 'classnames';
+import React, { memo, useCallback } from 'react';
+import BranchTitleHeader from "../branch-title-header";
+import ConditionItem from "../condition-item";
+import "./index.less";
+export default /*#__PURE__*/memo(function JudgeForm(props) {
+  var _props$value = props.value,
+    value = _props$value === void 0 ? [] : _props$value,
+    onChange = props.onChange,
+    disabled = props.disabled,
+    areaStyle = props.areaStyle;
+  var changeBranchItem = useCallback(function (id, payload) {
+    onChange(value.map(function (item) {
+      return item.id === id ? _objectSpread(_objectSpread({}, item), payload) : item;
+    }));
+  }, [value, onChange]);
+  var changeConditionItem = useCallback(function (branchId, condIndex, payload) {
+    var _value$find;
+    changeBranchItem(branchId, {
+      conditions: ((_value$find = value.find(function (item) {
+        return item.id === branchId;
+      })) === null || _value$find === void 0 || (_value$find = _value$find.conditions) === null || _value$find === void 0 ? void 0 : _value$find.map(function (item, index) {
+        return index === condIndex ? _objectSpread(_objectSpread({}, item), payload) : item;
+      })) || []
+    });
+  }, [value, changeBranchItem]);
+  var addBranchItem = useCallback(function () {
+    onChange([].concat(_toConsumableArray(value), [{
+      id: uniqueId(4),
+      label: generateUniqueName($i18n.get({
+        id: 'spark-flow.JudgeForm.index.newConditionGroup',
+        dm: '新条件组'
+      }), value.map(function (item) {
+        return item.label;
+      })),
+      logic: 'and',
+      conditions: [{
+        left: {
+          value_from: 'refer',
+          type: 'String',
+          value: void 0
+        },
+        right: {
+          value_from: 'input',
+          type: 'String',
+          value: void 0
+        },
+        operator: void 0
+      }]
+    }]));
+  }, [value]);
+  var addConditionItem = useCallback(function (branchId) {
+    var targetBranch = value.find(function (item) {
+      return item.id === branchId;
+    });
+    if (!targetBranch) return;
+    changeBranchItem(branchId, {
+      conditions: [].concat(_toConsumableArray(targetBranch.conditions || []), [{
+        left: {
+          value_from: 'refer',
+          type: 'String',
+          value: void 0
+        },
+        right: {
+          value_from: 'input',
+          type: 'String',
+          value: void 0
+        },
+        operator: void 0
+      }])
+    });
+  }, [value, changeBranchItem]);
+  var deleteConditionItem = useCallback(function (branchId, condIndex) {
+    var _value$find2;
+    changeBranchItem(branchId, {
+      conditions: ((_value$find2 = value.find(function (item) {
+        return item.id === branchId;
+      })) === null || _value$find2 === void 0 || (_value$find2 = _value$find2.conditions) === null || _value$find2 === void 0 ? void 0 : _value$find2.filter(function (_, index) {
+        return index !== condIndex;
+      })) || []
+    });
+  }, [value, changeBranchItem]);
+  var _deleteBranchItem = useCallback(function (branchId) {
+    onChange(value.filter(function (item) {
+      return item.id !== branchId;
+    }));
+  }, [value, onChange]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, value.map(function (item) {
+    if (item.id === 'default') return null;
+    return /*#__PURE__*/React.createElement("div", {
+      key: item.id
+    }, /*#__PURE__*/React.createElement("div", {
+      key: item.id,
+      style: areaStyle,
+      className: "spark-flow-panel-form-section"
+    }, /*#__PURE__*/React.createElement(Flex, {
+      vertical: true,
+      gap: 16
+    }, /*#__PURE__*/React.createElement(BranchTitleHeader, {
+      data: item,
+      onChange: function onChange(payload) {
+        return changeBranchItem(item.id, payload);
+      },
+      deleteBranchItem: function deleteBranchItem() {
+        return _deleteBranchItem(item.id);
+      },
+      branches: value,
+      disabled: disabled
+    }), (item.conditions || []).map(function (condition, index) {
+      return /*#__PURE__*/React.createElement(Flex, {
+        key: index,
+        gap: 8
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "flex-1 flex-start"
+      }, /*#__PURE__*/React.createElement(ConditionItem, {
+        disabled: disabled,
+        onChange: function onChange(val) {
+          return changeConditionItem(item.id, index, val);
+        },
+        value: condition,
+        leftVariableList: props.leftVariableList,
+        rightVariableList: props.rightVariableList
+      })), /*#__PURE__*/React.createElement("div", {
+        className: classNames('py-[8px] flex-shrink-0', 'spark-flow-judge-form-delete-btn-wrap')
+      }, /*#__PURE__*/React.createElement(SparkDeleteLine, {
+        onClick: function onClick() {
+          deleteConditionItem(item.id, index);
+        },
+        className: disabled ? 'disabled-icon-btn' : '',
+        size: 16,
+        style: {
+          cursor: disabled ? 'not-allowed' : 'pointer'
+        }
+      })));
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "pr-[24px]"
+    }, /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick() {
+        return addConditionItem(item.id);
+      },
+      icon: /*#__PURE__*/React.createElement(SparkPlusLine, null),
+      type: "dashed",
+      disabled: disabled,
+      className: "spark-flow-judge-form-add-branch-btn"
+    }, $i18n.get({
+      id: 'spark-flow.JudgeForm.index.addCondition',
+      dm: '添加条件'
+    }))))));
+  }), /*#__PURE__*/React.createElement("div", {
+    style: areaStyle,
+    className: "spark-flow-panel-form-section"
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return addBranchItem();
+    },
+    icon: /*#__PURE__*/React.createElement(SparkPlusLine, null),
+    type: "dashed",
+    className: "spark-flow-judge-form-add-branch-btn",
+    disabled: disabled
+  }, $i18n.get({
+    id: 'spark-flow.JudgeForm.index.addConditionGroup',
+    dm: '添加条件组'
+  }))));
+});

package/dist/components/judge-form/index.less

@@ -0,0 +1,11 @@
+@import '../../index.less';
+
+.spark-flow-judge-form-add-branch-btn {
+  width: 100%;
+  background: e('var(--@{ant-prefix}-color-bg-layout)');
+}
+
+.spark-flow-judge-form-delete-btn-wrap {
+  line-height: 1;
+  align-self: flex-start;
+}

package/dist/components/node-menu/index.d.ts

@@ -0,0 +1,35 @@
+import { IPointItem } from "../../types/work-flow";
+import { SparkIconProps } from '@agentscope-ai/icons/src/utils';
+import { TooltipPlacement } from 'antd/es/tooltip';
+import React, { ReactNode } from 'react';
+import './index.less';
+export interface INodeMenuItemProps {
+    data: {
+        title: string;
+        type: string;
+        iconType: (props: SparkIconProps) => ReactNode;
+        desc: string;
+    };
+    onDragStart: (event: React.DragEvent<HTMLDivElement>, nodeType: string) => void;
+    draggable?: boolean;
+    onClick: () => void;
+}
+export declare const NodeMenuItem: React.MemoExoticComponent<(props: INodeMenuItemProps) => React.JSX.Element>;
+interface IProps {
+    source?: IPointItem;
+    target?: IPointItem;
+    onSelect?: (data: INodeMenuItemProps['data']) => void | boolean;
+    disableDrag?: boolean;
+    parentId?: string;
+}
+export declare const NodeMenu: React.MemoExoticComponent<(props: IProps) => React.JSX.Element>;
+interface IPopoverNodeMenuProps extends IProps {
+    children: React.ReactNode;
+    onOpenChange?: (open: boolean) => void;
+    placement?: TooltipPlacement;
+    disableDrag?: boolean;
+    getPopupContainer?: () => HTMLElement;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+}
+export declare const PopoverNodeMenu: React.MemoExoticComponent<(props: IPopoverNodeMenuProps) => React.JSX.Element>;
+export default NodeMenu;

package/dist/components/node-menu/index.js

@@ -0,0 +1,266 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useStore } from "../../flow/context";
+import { useNodesReadOnly } from "../../hooks";
+import { useNodesInteraction } from "../../hooks/use-nodes-interaction";
+import $i18n from "../../i18n";
+import { Empty, Input, Popover } from '@agentscope-ai/design';
+import { SparkSearchLine } from '@agentscope-ai/icons';
+import { useNodes } from '@xyflow/react';
+import { debounce, groupBy } from 'lodash-es';
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import FlowIcon from "../flow-icon";
+import "./index.less";
+export var NodeMenuItem = /*#__PURE__*/memo(function (props) {
+  var data = props.data,
+    onDragStart = props.onDragStart;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _dragStart = useCallback(function (event) {
+    onDragStart(event, data.type);
+    setOpen(false);
+  }, [onDragStart, data.type]);
+  return /*#__PURE__*/React.createElement(Popover, {
+    key: data.type,
+    placement: "left",
+    arrow: false,
+    onOpenChange: setOpen,
+    open: open,
+    destroyTooltipOnHide: true,
+    getPopupContainer: function getPopupContainer() {
+      return document.querySelector('.spark-flow-node-menu') || document.body;
+    },
+    content: /*#__PURE__*/React.createElement("div", {
+      className: "spark-flow-node-menu-item-info"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: 'cursor-pointer spark-flow-node-menu-item-info-title flex items-center gap-[8px]'
+    }, /*#__PURE__*/React.createElement(FlowIcon, {
+      nodeType: data.type
+    }), /*#__PURE__*/React.createElement("span", null, data.title)), /*#__PURE__*/React.createElement("div", {
+      className: "spark-flow-node-menu-item-info-desc"
+    }, data.desc))
+  }, /*#__PURE__*/React.createElement("div", {
+    draggable: props.draggable,
+    onDragStart: _dragStart,
+    onClick: props.onClick,
+    className: 'spark-flow-node-menu-item cursor-pointer flex items-center gap-[8px] h-9'
+  }, /*#__PURE__*/React.createElement(FlowIcon, {
+    nodeType: data.type
+  }), /*#__PURE__*/React.createElement("span", null, data.title)));
+});
+var generateMenuList = function generateMenuList(_ref) {
+  var nodeSchemaMap = _ref.nodeSchemaMap,
+    searchValue = _ref.searchValue,
+    hasParent = _ref.hasParent,
+    parentNodeType = _ref.parentNodeType;
+  var list = [];
+  Object.keys(nodeSchemaMap).forEach(function (nodeTypeKey) {
+    if (nodeSchemaMap[nodeTypeKey].hideInMenu) return;
+    if (hasParent && nodeSchemaMap[nodeTypeKey].isGroup) return;
+
+    // 判断 disableInGroup
+    if (hasParent && nodeSchemaMap[nodeTypeKey].disableInGroup) {
+      var disableInGroup = nodeSchemaMap[nodeTypeKey].disableInGroup;
+      if (typeof disableInGroup === 'boolean') {
+        return;
+      } else if (Array.isArray(disableInGroup) && parentNodeType && disableInGroup.includes(parentNodeType)) {
+        return;
+      }
+    }
+    var nodeSchemaItem = nodeSchemaMap[nodeTypeKey];
+    if (searchValue && !nodeSchemaItem.title.toLowerCase().includes(searchValue.toLowerCase())) {
+      return;
+    }
+    list.push({
+      title: nodeSchemaItem.title,
+      type: nodeSchemaItem.type,
+      desc: nodeSchemaItem.desc,
+      iconType: nodeSchemaItem.iconType,
+      group: nodeSchemaItem.groupLabel
+    });
+  });
+  return list;
+};
+export var NodeMenu = /*#__PURE__*/memo(function (props) {
+  var NodeMenuItemRenderer = useStore(function (store) {
+    return store.NodeMenuItemRenderer;
+  });
+  var nodeSchemaMap = useStore(function (store) {
+    return store.nodeSchemaMap;
+  });
+  var nodes = useNodes();
+  var _useNodesInteraction = useNodesInteraction(),
+    onAddNewNodeWithSource = _useNodesInteraction.onAddNewNodeWithSource;
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    searchValue = _useState4[0],
+    setSearchValue = _useState4[1];
+  var setIsDragging = useStore(function (state) {
+    return state.setIsDragging;
+  });
+  var _useNodesReadOnly = useNodesReadOnly(),
+    nodesReadOnly = _useNodesReadOnly.nodesReadOnly;
+  var parentNode = useMemo(function () {
+    return nodes.find(function (node) {
+      return node.id === props.parentId;
+    });
+  }, [nodes, props.parentId]);
+  var _useState5 = useState(generateMenuList({
+      nodeSchemaMap: nodeSchemaMap,
+      searchValue: searchValue,
+      hasParent: !!props.parentId,
+      parentNodeType: parentNode === null || parentNode === void 0 ? void 0 : parentNode.type
+    })),
+    _useState6 = _slicedToArray(_useState5, 2),
+    menuList = _useState6[0],
+    setMenuList = _useState6[1];
+  var debouncedSetMenuList = useCallback(debounce(function (params) {
+    setMenuList(generateMenuList(params));
+  }, 300), []);
+  useEffect(function () {
+    debouncedSetMenuList({
+      nodeSchemaMap: nodeSchemaMap,
+      searchValue: searchValue,
+      hasParent: !!props.parentId,
+      parentNodeType: parentNode === null || parentNode === void 0 ? void 0 : parentNode.type
+    });
+    return function () {
+      debouncedSetMenuList.cancel();
+    };
+  }, [nodeSchemaMap, searchValue, props.parentId, parentNode, debouncedSetMenuList]);
+  var groupList = useMemo(function () {
+    if (!menuList) return [];
+    var groups = groupBy(menuList, function (item) {
+      return item.group || $i18n.get({
+        id: 'spark-flow.components.NodeMenu.index.ungrouped',
+        dm: '未分组'
+      });
+    });
+    return Object.entries(groups).map(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        group = _ref3[0],
+        items = _ref3[1];
+      return {
+        group: group,
+        items: items
+      };
+    });
+  }, [menuList]);
+  var onDragStart = useCallback(function (event, nodeType) {
+    event.dataTransfer.setData('application/reactflow', nodeType);
+    event.dataTransfer.effectAllowed = 'move';
+    setIsDragging(true);
+  }, [setIsDragging]);
+  var onMenuItemClick = useCallback(function (data) {
+    var _nodes$find, _props$onSelect;
+    if (!props.source || nodesReadOnly) return;
+    var parentId = props.parentId || ((_nodes$find = nodes.find(function (item) {
+      var _props$source;
+      return item.id === ((_props$source = props.source) === null || _props$source === void 0 ? void 0 : _props$source.id);
+    })) === null || _nodes$find === void 0 ? void 0 : _nodes$find.parentId);
+    var isPrevent = (_props$onSelect = props.onSelect) === null || _props$onSelect === void 0 ? void 0 : _props$onSelect.call(props, data);
+    if (isPrevent !== false) {
+      onAddNewNodeWithSource({
+        type: data.type,
+        parentId: parentId
+      }, props.source, props.target);
+    }
+  }, [props.parentId, props.source, props.target, props.onSelect, nodes]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "spark-flow-node-menu h-full flex flex-col"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "spark-flow-node-menu-search"
+  }, /*#__PURE__*/React.createElement(Input, {
+    prefix: /*#__PURE__*/React.createElement(SparkSearchLine, null),
+    placeholder: $i18n.get({
+      id: 'spark-flow.components.NodeMenu.index.searchNodeName',
+      dm: '搜索节点名称'
+    }),
+    value: searchValue,
+    onChange: function onChange(e) {
+      return setSearchValue(e.target.value);
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "flex-1 overflow-y-auto nowheel flex flex-col gap-[16px] px-[16px] spark-flow-node-menu-list pb-[16px]"
+  }, !groupList.length ? /*#__PURE__*/React.createElement("div", {
+    className: "full-center"
+  }, /*#__PURE__*/React.createElement(Empty, {
+    size: 204,
+    description: $i18n.get({
+      id: 'main.pages.App.components.MCPSelector.index.noSearchResult',
+      dm: '暂无搜索结果'
+    })
+  })) : groupList.map(function (groupItem, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "spark-flow-node-menu-group-title"
+    }, groupItem.group), groupItem.items.map(function (item) {
+      return NodeMenuItemRenderer ? /*#__PURE__*/React.createElement(NodeMenuItemRenderer, {
+        onClick: function onClick() {
+          return onMenuItemClick(item);
+        },
+        draggable: !props.disableDrag && !nodesReadOnly,
+        onDragStart: onDragStart,
+        data: item,
+        key: item.type
+      }) : /*#__PURE__*/React.createElement(NodeMenuItem, {
+        onClick: function onClick() {
+          return onMenuItemClick(item);
+        },
+        draggable: !props.disableDrag && !nodesReadOnly,
+        onDragStart: onDragStart,
+        data: item,
+        key: item.type
+      });
+    }));
+  })));
+});
+export var PopoverNodeMenu = /*#__PURE__*/memo(function (props) {
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    open = _useState8[0],
+    setOpen = _useState8[1];
+  var _useNodesReadOnly2 = useNodesReadOnly(),
+    nodesReadOnly = _useNodesReadOnly2.nodesReadOnly;
+  var closeOpen = useCallback(function () {
+    setOpen(false);
+  }, []);
+  useEffect(function () {
+    var _props$onOpenChange;
+    (_props$onOpenChange = props.onOpenChange) === null || _props$onOpenChange === void 0 || _props$onOpenChange.call(props, open);
+  }, [open]);
+  return /*#__PURE__*/React.createElement(Popover, {
+    placement: props.placement || 'right',
+    trigger: "click",
+    onOpenChange: setOpen,
+    open: open && !nodesReadOnly,
+    destroyTooltipOnHide: true,
+    getPopupContainer: props.getPopupContainer || function (ele) {
+      return ele;
+    },
+    content: /*#__PURE__*/React.createElement("div", {
+      onClick: props.onClick || function (e) {
+        return e.stopPropagation();
+      },
+      className: 'spark-flow-popover-node-menu'
+    }, /*#__PURE__*/React.createElement(NodeMenu, {
+      disableDrag: props.disableDrag,
+      onSelect: function onSelect(data) {
+        var _props$onSelect2;
+        closeOpen();
+        (_props$onSelect2 = props.onSelect) === null || _props$onSelect2 === void 0 || _props$onSelect2.call(props, data);
+      },
+      source: props.source,
+      target: props.target,
+      parentId: props.parentId
+    }))
+  }, props.children);
+});
+export default NodeMenu;

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

@@ -0,0 +1,79 @@
+@import '../../index.less';
+
+.spark-flow-drag-node-item-image {
+  padding: 16px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  border-radius: 12px;
+  opacity: 0.7;
+  width: 320px;
+
+  &-icon-bg {
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+  }
+
+  &-title {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    color: e('var(--@{ant-prefix}-color-text-base)');
+  }
+}
+
+.spark-flow-node-menu {
+  &-group-title {
+    color: e('var(--@{ant-prefix}-color-text-tertiary)');
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 20px;
+  }
+
+  &-item {
+    padding: 0 8px 0 0;
+    color: e('var(--@{ant-prefix}-color-text)');
+    font-weight: 500;
+    border-radius: 4px;
+
+    &:hover {
+      background: e('var(--@{ant-prefix}-color-fill-secondary)');
+    }
+  }
+}
+
+.spark-flow-node-menu-item-info {
+  max-width: 274px;
+  margin: 0 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  &-title {
+    font-weight: 600;
+    line-height: 24px;
+  }
+
+  &-desc {
+    font-size: 13px;
+    line-height: 20px;
+    color: e('var(--@{ant-prefix}-color-text)');
+  }
+}
+
+.spark-flow-node-menu-search {
+  padding: 8px 16px 16px;
+}
+
+.spark-flow-popover-node-menu {
+  height: 400px;
+
+  .spark-flow-node-menu-list {
+    padding: 0;
+  }
+
+  .spark-flow-node-menu-search {
+    padding: 4px 0 16px;
+  }
+}

package/dist/components/node-resizer/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import './index.less';
+type NodeResizerProps = {
+    nodeId: string;
+    icon?: JSX.Element;
+    minWidth?: number;
+    minHeight?: number;
+    maxWidth?: number;
+};
+declare const _default: React.MemoExoticComponent<({ nodeId, icon, minWidth, minHeight, maxWidth, }: NodeResizerProps) => React.JSX.Element>;
+export default _default;

package/dist/components/node-resizer/index.js

@@ -0,0 +1,46 @@
+import { useNodesInteraction } from "../../hooks";
+import { getCommonConfig } from '@agentscope-ai/design';
+import { NodeResizeControl } from '@xyflow/react';
+import React, { memo } from 'react';
+import "./index.less";
+var Icon = function Icon() {
+  var _getCommonConfig = getCommonConfig(),
+    antPrefix = _getCommonConfig.antPrefix;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M5.19009 11.8398C8.26416 10.6196 10.7144 8.16562 11.9297 5.08904",
+    stroke: "var(--".concat(antPrefix, "-color-border-secondary)"),
+    strokeWidth: "2",
+    strokeLinecap: "round"
+  }));
+};
+var NodeResizer = function NodeResizer(_ref) {
+  var nodeId = _ref.nodeId,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? /*#__PURE__*/React.createElement(Icon, null) : _ref$icon,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? 320 : _ref$minWidth,
+    _ref$minHeight = _ref.minHeight,
+    minHeight = _ref$minHeight === void 0 ? 58 : _ref$minHeight,
+    maxWidth = _ref.maxWidth;
+  var _useNodesInteraction = useNodesInteraction(),
+    onNodeResize = _useNodesInteraction.onNodeResize;
+  return /*#__PURE__*/React.createElement(NodeResizeControl, {
+    position: "bottom-right",
+    className: 'spark-flow-node-resizer',
+    onResize: function onResize(_, resizeBound) {
+      return onNodeResize(resizeBound, nodeId);
+    },
+    minWidth: minWidth,
+    minHeight: minHeight,
+    maxWidth: maxWidth
+  }, /*#__PURE__*/React.createElement("div", {
+    className: 'spark-flow-node-resizer-icon'
+  }, icon));
+};
+export default /*#__PURE__*/memo(NodeResizer);

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

@@ -0,0 +1,12 @@
+.spark-flow-node-resizer {
+  border-style: none !important;
+  background: transparent !important;
+  border: 1px solid red;
+
+  &-icon {
+    position: absolute;
+    right: 1px;
+    bottom: 1px;
+    line-height: 1;
+  }
+}

package/dist/components/node-result-panel/index.d.ts

@@ -0,0 +1,9 @@
+import { IWorkFlowNodeResultItem } from "../../types/work-flow";
+import React from 'react';
+import './index.less';
+interface INodeResultPanelProps {
+    data: IWorkFlowNodeResultItem;
+    onNodeClick?: (nodeId: string) => void;
+}
+declare const _default: React.MemoExoticComponent<(props: INodeResultPanelProps) => React.JSX.Element>;
+export default _default;