@agentscope-ai/flow 0.0.1

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

@@ -0,0 +1,346 @@
+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 _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; }
+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 { FILE_PROPERTIES, VALUE_TYPE_OPTIONS } from "../../constant";
+import $i18n from "../../i18n";
+import { Button, Form, getCommonConfig, Input } from '@agentscope-ai/design';
+import { SparkDeleteLine, SparkPlusLine, SparkUpLine } from '@agentscope-ai/icons';
+import { Cascader } from 'antd';
+import classNames from 'classnames';
+import React, { memo, useEffect, useMemo, useState } from 'react';
+import { typeAbbr } from "../var-type-prefix";
+import "./index.less";
+var _displayRender = function displayRender(labels, isMini) {
+  var lastLabel = labels[labels.length - 1];
+  if (isMini) {
+    return /*#__PURE__*/React.createElement("span", {
+      className: "text-[12px]"
+    }, typeAbbr[lastLabel]);
+  }
+  return lastLabel;
+};
+var parseType = function parseType(type) {
+  if (!type) return [];
+  if (type.includes('Array')) return ['Array', type];
+  return [type];
+};
+export var VariableTypeSelect = /*#__PURE__*/memo(function (props) {
+  var handleChange = props.handleChange,
+    type = props.type,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style,
+    enabledTypes = props.enabledTypes,
+    _props$disabledTypes = props.disabledTypes,
+    disabledTypes = _props$disabledTypes === void 0 ? [] : _props$disabledTypes;
+  var typeOptions = useMemo(function () {
+    // 如果既没有白名单也没有黑名单，返回所有选项
+    if ((!enabledTypes || !enabledTypes.length) && (!disabledTypes || !disabledTypes.length)) {
+      return VALUE_TYPE_OPTIONS;
+    }
+    var list = [];
+
+    // 白名单优先：如果设置了enabledTypes，只有在白名单中的类型才可用
+    if (enabledTypes && enabledTypes.length > 0) {
+      VALUE_TYPE_OPTIONS.forEach(function (item) {
+        var _item$children;
+        if (!enabledTypes.includes(item.value)) return;
+        list.push(_objectSpread(_objectSpread({}, item), {}, {
+          children: (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.filter(function (child) {
+            return enabledTypes.includes(child.value);
+          })
+        }));
+      });
+    }
+    // 黑名单策略：如果没有设置enabledTypes，使用disabledTypes
+    else if (disabledTypes && disabledTypes.length > 0) {
+      VALUE_TYPE_OPTIONS.forEach(function (item) {
+        var _item$children2;
+        if (disabledTypes.includes(item.value)) return;
+        list.push(_objectSpread(_objectSpread({}, item), {}, {
+          children: (_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.filter(function (child) {
+            return !disabledTypes.includes(child.value);
+          })
+        }));
+      });
+    }
+    return list;
+  }, [enabledTypes, disabledTypes]);
+  return /*#__PURE__*/React.createElement(Cascader, {
+    className: "spark-flow-variable-type-select ".concat(props.className),
+    allowClear: false,
+    style: _objectSpread({
+      width: 140,
+      flexShrink: 0
+    }, style),
+    options: typeOptions,
+    placeholder: $i18n.get({
+      id: 'spark-flow.components.CustomOutputsForm.index.selectVariableType',
+      dm: '请选择变量类型'
+    })
+    // getPopupContainer={(ele) => ele}
+    ,
+    value: parseType(type),
+    onChange: function onChange(selectedList) {
+      var type = selectedList[selectedList.length - 1];
+      handleChange(type);
+    },
+    displayRender: function displayRender(payload) {
+      return _displayRender(payload, props.isMini);
+    },
+    disabled: props.disabled
+  });
+});
+var getDisableStatus = function getDisableStatus(index, readyOnly, key) {
+  if (readyOnly === undefined || readyOnly === null) {
+    return false;
+  }
+  if (typeof readyOnly === 'boolean') {
+    return readyOnly;
+  }
+  var detail = readyOnly[index];
+  if (!detail) {
+    return false;
+  }
+  if (typeof detail === 'boolean') {
+    return detail;
+  }
+  return detail.includes(key || '');
+};
+
+/**
+ * 创建变量名验证规则
+ * @param allValues 所有变量的值数组，用于检查重复
+ * @param currentIndex 当前编辑的变量索引
+ */
+var createVariableNameRules = function createVariableNameRules(allValues, currentIndex) {
+  return [{
+    validator: function validator(_, value) {
+      if (!value || value.trim() === '') {
+        return Promise.resolve();
+      }
+
+      // 检查是否以数字开头
+      if (/^\d/.test(value)) {
+        return Promise.reject(new Error($i18n.get({
+          id: 'spark-flow.components.CustomOutputsForm.index.variableNameCannotStartWithNumber',
+          dm: '变量名不能以数字开头'
+        })));
+      }
+
+      // 检查是否包含非法字符
+      if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(value)) {
+        return Promise.reject(new Error($i18n.get({
+          id: 'spark-flow.components.CustomOutputsForm.index.variableNameOnlyAllowLettersNumbersUnderscores',
+          dm: '变量名只能包含字母、数字和下划线'
+        })));
+      }
+
+      // 检查是否重复
+      var isDuplicate = allValues.some(function (item, index) {
+        return index !== currentIndex && item.key === value && item.key !== '';
+      });
+      if (isDuplicate) {
+        return Promise.reject(new Error($i18n.get({
+          id: 'spark-flow.components.CustomOutputsForm.index.variableNameDuplicate',
+          dm: '变量名不能重复'
+        })));
+      }
+      return Promise.resolve();
+    }
+  }];
+};
+export var CustomOutputsForm = /*#__PURE__*/memo(function (_ref) {
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? [] : _ref$value,
+    onChange = _ref.onChange,
+    readyOnly = _ref.readyOnly,
+    _ref$isRoot = _ref.isRoot,
+    isRoot = _ref$isRoot === void 0 ? false : _ref$isRoot,
+    enabledTypes = _ref.enabledTypes,
+    disabledTypes = _ref.disabledTypes;
+  var _Form$useForm = Form.useForm(),
+    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+    form = _Form$useForm2[0];
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    expand = _useState2[0],
+    setExpand = _useState2[1];
+
+  // 同步 value 到 form
+  useEffect(function () {
+    var formValues = {};
+    value.forEach(function (item, index) {
+      formValues["var_".concat(index)] = item.key;
+    });
+    form.setFieldsValue(formValues);
+  }, [value, form]);
+  var _handleChange = function handleChange(ind, payload) {
+    var newValue = value.map(function (item, index) {
+      if (index === ind) return _objectSpread(_objectSpread({}, item), payload);
+      return item;
+    });
+    onChange === null || onChange === void 0 || onChange(newValue);
+  };
+  var handleAdd = function handleAdd() {
+    onChange === null || onChange === void 0 || onChange(value.concat({
+      key: '',
+      type: 'String',
+      desc: ''
+    }));
+  };
+  var handleDelete = function handleDelete(index) {
+    onChange === null || onChange === void 0 || onChange(value.filter(function (_, i) {
+      return i !== index;
+    }));
+  };
+  var _getCommonConfig = getCommonConfig(),
+    antPrefix = _getCommonConfig.antPrefix;
+  return /*#__PURE__*/React.createElement(Form, {
+    form: form,
+    component: false
+  }, value.map(function (item, index) {
+    var hasProperties = item.type === 'Array<Object>' || item.type === 'Object';
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: classNames('flex flex-col gap-[8px]', _defineProperty(_defineProperty({}, 'spark-flow-inputs-form-parent-node', hasProperties), 'spark-flow-inputs-form-parent-node-hidden', !expand))
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "spark-flow-inputs-form-item flex gap-[8px] align-center"
+    }, /*#__PURE__*/React.createElement(Form.Item, {
+      name: "var_".concat(index),
+      style: {
+        flex: 1,
+        marginBottom: 0
+      },
+      validateTrigger: ['onChange', 'onBlur'],
+      rules: createVariableNameRules(value, index)
+    }, /*#__PURE__*/React.createElement(Input, {
+      disabled: getDisableStatus(index, readyOnly, 'key'),
+      placeholder: $i18n.get({
+        id: 'spark-flow.components.CustomOutputsForm.index.enterVariableName',
+        dm: '请输入变量名'
+      }),
+      onChange: function onChange(e) {
+        return _handleChange(index, {
+          key: e.target.value
+        });
+      }
+    })), /*#__PURE__*/React.createElement(VariableTypeSelect, {
+      type: item.type,
+      disabled: getDisableStatus(index, readyOnly, 'type'),
+      handleChange: function handleChange(type) {
+        _handleChange(index, {
+          type: type,
+          properties: type.includes('File') ? FILE_PROPERTIES : []
+        });
+      },
+      enabledTypes: enabledTypes,
+      disabledTypes: disabledTypes
+    }), /*#__PURE__*/React.createElement(Input, {
+      style: {
+        width: 100,
+        flexShrink: 0,
+        height: 32
+      },
+      disabled: getDisableStatus(index, readyOnly, 'desc'),
+      value: item.desc,
+      placeholder: $i18n.get({
+        id: 'spark-flow.components.CustomOutputsForm.index.enterVariableDescription',
+        dm: '请输入变量描述'
+      }),
+      onChange: function onChange(e) {
+        return _handleChange(index, {
+          desc: e.target.value
+        });
+      }
+    }), !getDisableStatus(index, readyOnly, 'delete') && /*#__PURE__*/React.createElement(SparkDeleteLine, {
+      className: "flex-shrink-0 cursor-pointer",
+      style: {
+        color: "var(--".concat(antPrefix, "-color-text-tertiary)"),
+        height: 32
+      },
+      onClick: function onClick() {
+        return handleDelete(index);
+      },
+      size: 16
+    })), hasProperties && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SparkUpLine, {
+      onClick: function onClick() {
+        return setExpand(!expand);
+      },
+      className: "spark-flow-inputs-expand-btn cursor-pointer",
+      size: 16
+    }), expand && /*#__PURE__*/React.createElement("div", {
+      className: "pl-[16px] flex flex-col gap-[8px]"
+    }, /*#__PURE__*/React.createElement(CustomOutputsForm, {
+      value: item.properties,
+      readyOnly: getDisableStatus(index, readyOnly, ''),
+      onChange: function onChange(properties) {
+        return _handleChange(index, {
+          properties: properties
+        });
+      },
+      enabledTypes: enabledTypes,
+      disabledTypes: disabledTypes
+    }))));
+  }), readyOnly !== true && /*#__PURE__*/React.createElement(Button, {
+    type: "link",
+    onClick: handleAdd,
+    size: "small",
+    className: "self-start spark-flow-text-btn",
+    icon: /*#__PURE__*/React.createElement(SparkPlusLine, null)
+  }, 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,
+    onChange = props.onChange,
+    readyOnly = props.readyOnly,
+    enabledTypes = props.enabledTypes,
+    disabledTypes = props.disabledTypes;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col gap-[8px]"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "spark-flow-inputs-form-label flex gap-[8px]"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1
+    }
+  }, $i18n.get({
+    id: 'spark-flow.components.CustomOutputsForm.index.variableName',
+    dm: '变量名'
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 140
+    }
+  }, $i18n.get({
+    id: 'spark-flow.components.CustomOutputsForm.index.type',
+    dm: '类型'
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: readyOnly ? 100 : 124
+    }
+  }, $i18n.get({
+    id: 'spark-flow.components.CustomOutputsForm.index.description',
+    dm: '描述'
+  }))), /*#__PURE__*/React.createElement(CustomOutputsForm, {
+    value: value,
+    onChange: onChange,
+    readyOnly: readyOnly,
+    isRoot: true,
+    enabledTypes: enabledTypes,
+    disabledTypes: disabledTypes
+  }));
+});

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

@@ -0,0 +1,51 @@
+@import '../../index.less';
+
+.spark-flow-inputs-form-label {
+  font-size: 12px;
+  color: e('var(--@{ant-prefix}-color-text-secondary)');
+}
+
+.spark-flow-inputs-form-parent-node {
+  position: relative;
+
+  &:not(&-hidden)::after {
+    content: '';
+    height: calc(100% - 24px);
+    bottom: 0;
+    left: -10.5px;
+    width: 1px;
+    background: e('var(--@{ant-prefix}-color-border-secondary)');
+    position: absolute;
+  }
+
+  .spark-flow-inputs-expand-btn {
+    transition: transform 0.3s ease-in-out;
+    position: absolute;
+    top: 4px;
+    left: -18px;
+  }
+
+  &-hidden {
+    .spark-flow-inputs-expand-btn {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+.spark-flow-inputs-form-item {
+  .ant-select-sm .ant-select-selector,
+  .ant-input-sm {
+    font-size: 12px;
+    line-height: 22px;
+  }
+}
+
+.spark-flow-variable-type-select {
+  .@{ant-prefix}-cascader-dropdown .@{ant-prefix}-cascader-menu {
+    height: auto;
+  }
+  
+  .@{ant-prefix}-select-selection-item {
+    height: 30px;
+  }
+}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import './index.less';
+interface DragPanelProps {
+    maxWidth: number;
+    minWidth: number;
+    children?: React.ReactNode;
+    defaultWidth?: number;
+}
+declare const DragPanel: React.FC<DragPanelProps>;
+export default DragPanel;

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

@@ -0,0 +1,79 @@
+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 classNames from 'classnames';
+import React, { useCallback, useRef, useState } from 'react';
+import "./index.less";
+var DragPanel = function DragPanel(_ref) {
+  var maxWidth = _ref.maxWidth,
+    minWidth = _ref.minWidth,
+    children = _ref.children,
+    _ref$defaultWidth = _ref.defaultWidth,
+    defaultWidth = _ref$defaultWidth === void 0 ? 300 : _ref$defaultWidth;
+  var _useState = useState(defaultWidth),
+    _useState2 = _slicedToArray(_useState, 2),
+    width = _useState2[0],
+    setWidth = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isDragging = _useState4[0],
+    setIsDragging = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isHovering = _useState6[0],
+    setIsHovering = _useState6[1];
+  var panelRef = useRef(null);
+  var startXRef = useRef(0);
+  var startWidthRef = useRef(0);
+  var handleMouseDown = useCallback(function (e) {
+    setIsDragging(true);
+    startXRef.current = e.clientX;
+    startWidthRef.current = width;
+    e.preventDefault();
+  }, [width]);
+  var handleMouseMove = useCallback(function (e) {
+    if (!isDragging) return;
+    var deltaX = startXRef.current - e.clientX;
+    var newWidth = startWidthRef.current + deltaX;
+    var clampedWidth = Math.min(Math.max(newWidth, minWidth), maxWidth);
+    requestAnimationFrame(function () {
+      setWidth(clampedWidth);
+    });
+  }, [isDragging, maxWidth, minWidth]);
+  var handleMouseUp = useCallback(function () {
+    setIsDragging(false);
+  }, []);
+  React.useEffect(function () {
+    if (isDragging) {
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+    }
+    return function () {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: panelRef,
+    className: "spark-drag-panel",
+    style: {
+      width: width
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('spark-drag-panel-handle', {
+      'spark-drag-panel-handle--dragging': isDragging,
+      'spark-drag-panel-handle--hovering': isHovering
+    }),
+    onMouseDown: handleMouseDown,
+    onMouseEnter: function onMouseEnter() {
+      return setIsHovering(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsHovering(false);
+    }
+  }), children);
+};
+export default DragPanel;

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

@@ -0,0 +1,23 @@
+.spark-drag-panel {
+  position: relative;
+  height: 100%;
+
+  &-handle {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    cursor: ew-resize;
+    background-color: transparent;
+    transition: background-color 0.2s ease;
+
+    &--dragging {
+      background-color: #1890ff;
+    }
+
+    &--hovering {
+      background-color: #e6f7ff;
+    }
+  }
+}

package/dist/components/draggable-with-handle/index.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+import './index.less';
+interface DraggableWithHandleProps<T> {
+    items: T[];
+    onChange: (items: T[]) => void;
+    renderItem: (item: T, dragHandleProps: ReactNode) => ReactNode;
+    getItemId: (item: T) => string;
+    dragIcon?: ReactNode;
+    className?: string;
+    disabled?: boolean;
+}
+export declare function DraggableWithHandle<T>({ items, onChange, renderItem, getItemId, dragIcon, className, disabled, }: DraggableWithHandleProps<T>): React.JSX.Element;
+export default DraggableWithHandle;

package/dist/components/draggable-with-handle/index.js

@@ -0,0 +1,81 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import { SparkDragDotLine } from '@agentscope-ai/icons';
+import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
+import { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import React from 'react';
+import "./index.less";
+var SortableItem = function SortableItem(_ref) {
+  var id = _ref.id,
+    children = _ref.children;
+  var _useSortable = useSortable({
+      id: id
+    }),
+    attributes = _useSortable.attributes,
+    listeners = _useSortable.listeners,
+    setNodeRef = _useSortable.setNodeRef,
+    transform = _useSortable.transform,
+    transition = _useSortable.transition,
+    isDragging = _useSortable.isDragging;
+  var style = {
+    transform: CSS.Transform.toString(transform),
+    transition: transition,
+    opacity: isDragging ? 0.5 : 1
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: setNodeRef,
+    style: style
+  }, attributes, {
+    className: "draggable-item"
+  }), children(listeners));
+};
+export function DraggableWithHandle(_ref2) {
+  var items = _ref2.items,
+    onChange = _ref2.onChange,
+    renderItem = _ref2.renderItem,
+    getItemId = _ref2.getItemId,
+    _ref2$dragIcon = _ref2.dragIcon,
+    dragIcon = _ref2$dragIcon === void 0 ? /*#__PURE__*/React.createElement(SparkDragDotLine, null) : _ref2$dragIcon,
+    className = _ref2.className,
+    disabled = _ref2.disabled;
+  var sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+    coordinateGetter: sortableKeyboardCoordinates
+  }));
+  var handleDragEnd = function handleDragEnd(event) {
+    var active = event.active,
+      over = event.over;
+    if (over && active.id !== over.id) {
+      var oldIndex = items.findIndex(function (item) {
+        return getItemId(item) === active.id;
+      });
+      var newIndex = items.findIndex(function (item) {
+        return getItemId(item) === over.id;
+      });
+      onChange(arrayMove(items, oldIndex, newIndex));
+    }
+  };
+  var renderHandle = function renderHandle(listeners) {
+    return /*#__PURE__*/React.createElement("div", _extends({
+      className: "drag-handle"
+    }, listeners), dragIcon);
+  };
+  return /*#__PURE__*/React.createElement(DndContext, {
+    sensors: sensors,
+    collisionDetection: closestCenter,
+    onDragEnd: handleDragEnd
+  }, /*#__PURE__*/React.createElement(SortableContext, {
+    disabled: disabled,
+    items: items.map(getItemId),
+    strategy: verticalListSortingStrategy
+  }, /*#__PURE__*/React.createElement("div", {
+    className: className
+  }, items.map(function (item) {
+    return /*#__PURE__*/React.createElement(SortableItem, {
+      key: getItemId(item),
+      id: getItemId(item)
+    }, function (listeners) {
+      return renderItem(item, renderHandle(listeners));
+    });
+  }))));
+}
+export default DraggableWithHandle;

package/dist/components/draggable-with-handle/index.less

@@ -0,0 +1,23 @@
+@import '../../index.less';
+
+.draggable-item {
+  position: relative;
+}
+
+.drag-handle {
+  cursor: grab;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  -webkit-touch-callout: none;
+  user-select: none;
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  i {
+    font-size: 16px;
+    color: e('var(--@{ant-prefix}-color-text-secondary)');
+  }
+}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.less';
+declare const _default: React.NamedExoticComponent<object>;
+export default _default;