@agentscope-ai/flow 0.0.1

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

@@ -0,0 +1,155 @@
+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 _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); }
+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 $i18n from "../../i18n";
+import { Pagination } from '@agentscope-ai/design';
+import { SparkUpLine } from '@agentscope-ai/icons';
+import { Typography } from 'antd';
+import classNames from 'classnames';
+import React, { memo, useMemo, useState } from 'react';
+import "./index.less";
+var statusNameMap = {
+  success: $i18n.get({
+    id: 'spark-flow.components.NodeResultPanel.index.success',
+    dm: '成功'
+  }),
+  executing: $i18n.get({
+    id: 'spark-flow.components.NodeResultPanel.index.executing',
+    dm: '执行中'
+  }),
+  skip: $i18n.get({
+    id: 'spark-flow.components.NodeResultPanel.index.skipped',
+    dm: '跳过'
+  }),
+  fail: $i18n.get({
+    id: 'spark-flow.components.NodeResultPanel.index.failed',
+    dm: '失败'
+  }),
+  stop: $i18n.get({
+    id: 'spark-flow.components.NodeResultPanel.index.stopped',
+    dm: '停止'
+  }),
+  wait: $i18n.get({
+    id: 'spark-flow.components.NodeResultPanel.index.paused',
+    dm: '暂停'
+  })
+};
+var ResultContent = function ResultContent(props) {
+  var _slots$nodeResultCont;
+  var input = props.input,
+    output = props.output,
+    className = props.className;
+  var slots = useStore(function (state) {
+    return state.slots;
+  });
+  var resultContent = ((_slots$nodeResultCont = slots.nodeResultContentRenderer) === null || _slots$nodeResultCont === void 0 ? void 0 : _slots$nodeResultCont.call(slots, props)) || null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('spark-flow-node-result-content', className)
+  }, resultContent || /*#__PURE__*/React.createElement(React.Fragment, null, !!input && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "spark-flow-node-result-content-title"
+  }, $i18n.get({
+    id: 'spark-flow.components.NodeResultPanel.index.input',
+    dm: '输入'
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "spark-flow-node-result-content-area"
+  }, input)), !!output && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "spark-flow-node-result-content-title"
+  }, $i18n.get({
+    id: 'spark-flow.components.NodeResultPanel.index.output',
+    dm: '输出'
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "spark-flow-node-result-content-area"
+  }, output))));
+};
+var NodeResultPanel = function NodeResultPanel(props) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    expand = _useState2[0],
+    setExpand = _useState2[1];
+  var isBatch = props.data.is_batch && !!props.data.batches;
+  var _useState3 = useState(1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    batchIndex = _useState4[0],
+    setBatchIndex = _useState4[1];
+  var inputContent = useMemo(function () {
+    if (isBatch) {
+      var _props$data$batches;
+      return (_props$data$batches = props.data.batches[batchIndex - 1]) === null || _props$data$batches === void 0 ? void 0 : _props$data$batches.input;
+    }
+    return props.data.input;
+  }, [props.data, batchIndex]);
+  var outputContent = useMemo(function () {
+    if (isBatch) {
+      var _props$data$batches2;
+      return (_props$data$batches2 = props.data.batches[batchIndex - 1]) === null || _props$data$batches2 === void 0 ? void 0 : _props$data$batches2.output;
+    }
+    return props.data.output;
+  }, [props.data, batchIndex]);
+  var errorInfoContent = useMemo(function () {
+    if (isBatch) {
+      var _props$data$batches3;
+      return (_props$data$batches3 = props.data.batches[batchIndex - 1]) === null || _props$data$batches3 === void 0 ? void 0 : _props$data$batches3.error_info;
+    }
+    return props.data.error_info;
+  }, [props.data, batchIndex]);
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick(e) {
+      e.stopPropagation();
+    },
+    className: classNames("spark-flow-node-result-panel nodrag spark-flow-node-result-panel-".concat(props.data.node_status), _defineProperty({}, 'spark-flow-node-result-panel-hidden', !expand))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "spark-flow-node-result-header flex flex-col gap-[4px]",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex-justify-between",
+    onClick: function onClick(e) {
+      setExpand(!expand);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex-center gap-[8px]"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "spark-flow-node-result-status"
+  }, statusNameMap[props.data.node_status]), /*#__PURE__*/React.createElement("span", {
+    className: "spark-flow-node-result-time"
+  }, props.data.node_exec_time)), props.data.node_status !== 'skip' && /*#__PURE__*/React.createElement(SparkUpLine, {
+    className: "text-base spark-flow-node-result-expand-icon"
+  })), expand && isBatch && /*#__PURE__*/React.createElement(Pagination, {
+    current: batchIndex,
+    total: props.data.batches.length,
+    pageSize: 1,
+    onChange: function onChange(page) {
+      return setBatchIndex(page);
+    },
+    simple: true
+    // @ts-ignore
+    ,
+    hideTips: true,
+    hideSwitchButton: true,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }), expand && props.data.node_status === 'fail' && /*#__PURE__*/React.createElement(Typography.Text, {
+    ellipsis: {
+      tooltip: {
+        title: errorInfoContent,
+        destroyTooltipOnHide: true
+      }
+    },
+    className: 'spark-flow-node-result-error-info'
+  }, errorInfoContent)), expand && (!!inputContent || !!outputContent) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResultContent, {
+    input: inputContent,
+    output: outputContent,
+    className: "nowheel"
+  })));
+};
+export default /*#__PURE__*/memo(NodeResultPanel);

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

@@ -0,0 +1,132 @@
+@import '../../index.less';
+
+.spark-flow-node-result-panel {
+  max-height: 30vh;
+  padding: 0 8px 8px;
+  border-radius: 12px;
+  position: absolute;
+  left: 0;
+  top: calc(100% + 10px);
+  width: 100%;
+  cursor: initial !important;
+  transition: 0.4s ease-in-out;
+  z-index: 1;
+
+  * {
+    cursor: initial;
+  }
+
+  .spark-flow-node-result-status,
+  .spark-flow-node-result-time {
+    line-height: 24px;
+  }
+
+  .spark-flow-node-result-status {
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  .spark-flow-node-result-time {
+    font-size: 12px;
+    font-family: Menlo, monospace;
+    color: e('var(--@{ant-prefix}-color-text-tertiary)');
+  }
+
+  .spark-flow-node-result-header {
+    cursor: pointer;
+    padding: 8px;
+  }
+
+  .spark-flow-node-result-expand-icon {
+    cursor: pointer;
+    transition: 0.3s ease-in-out;
+
+    svg {
+      cursor: pointer;
+    }
+  }
+
+  &.spark-flow-node-result-panel-success {
+    background: e('var(--@{ant-prefix}-color-success-bg)');
+    border: 1px solid e('var(--@{ant-prefix}-color-success-border)');
+
+    .spark-flow-node-result-status {
+      color: e('var(--@{ant-prefix}-color-success)');
+    }
+  }
+
+  &.spark-flow-node-result-panel-fail {
+    background: e('var(--@{ant-prefix}-color-error-bg)');
+    border: 1px solid e('var(--@{ant-prefix}-color-error-border)');
+
+    .spark-flow-node-result-status {
+      color: e('var(--@{ant-prefix}-color-error)');
+    }
+  }
+
+  &.spark-flow-node-result-panel-executing {
+    background: e('var(--@{ant-prefix}-color-info-bg)');
+    border: 1px solid e('var(--@{ant-prefix}-color-info-border)');
+
+    .spark-flow-node-result-status {
+      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 {
+    border: 1px solid e('var(--@{ant-prefix}-color-border-secondary)');
+    background-color: e('var(--@{ant-prefix}-color-bg-layout)');
+
+    .spark-flow-node-result-status {
+      color: e('var(--@{ant-prefix}-color-text-secondary)');
+    }
+  }
+
+  &.spark-flow-node-result-panel-hidden {
+    padding-bottom: 0;
+
+    .spark-flow-node-result-expand-icon {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+// 当节点被选中时，提升NodeResultPanel的z-index
+.react-flow__node.selected .spark-flow-node-result-panel {
+  z-index: 1001;
+}
+
+.spark-flow-node-result-error-info {
+  font-size: 12px;
+  line-height: 20px;
+  color: e('var(--@{ant-prefix}-color-text-secondary)');
+}
+
+.park-flow-node-result-content-title {
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 20px;
+  color: e('var(--@{ant-prefix}-color-text)');
+}
+
+.spark-flow-node-result-content-area {
+  font-size: 12px;
+  line-height: 18px;
+  color: e('var(--@{ant-prefix}-color-text-secondary)');
+  border-radius: 6px;
+  padding: 6px 8px;
+  background: e('var(--@{ant-prefix}-color-fill-tertiary)');
+  word-break: break-all;
+}
+
+.spark-flow-node-result-content {
+  padding: 8px;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  background: e('var(--@{ant-prefix}-color-bg-base)');
+  height: calc(30vh - 80px);
+  overflow-y: auto;
+}

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

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

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

@@ -0,0 +1,213 @@
+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 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); }
+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 _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 _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+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 { useNodesInteraction } from "../../hooks";
+import $i18n from "../../i18n";
+import { Input } from '@agentscope-ai/design';
+import { SparkDownLine, SparkSearchLine } from '@agentscope-ai/icons';
+import { useStore as useReactFlowStore } from '@xyflow/react';
+import { Tree } from 'antd';
+import { debounce } from 'lodash-es';
+import React, { memo, useCallback, useMemo, useState } from 'react';
+import "./index.less";
+var HighlightText = function HighlightText(_ref) {
+  var text = _ref.text,
+    keyword = _ref.keyword;
+  if (!keyword) return /*#__PURE__*/React.createElement(React.Fragment, null, text);
+  var parts = text.split(new RegExp("(".concat(keyword, ")"), 'gi'));
+  return /*#__PURE__*/React.createElement("span", null, parts.map(function (part, i) {
+    return part.toLowerCase() === keyword.toLowerCase() ? /*#__PURE__*/React.createElement("span", {
+      key: i,
+      className: "bg-yellow-200"
+    }, part) : part;
+  }));
+};
+export default /*#__PURE__*/memo(function NodeTree() {
+  var nodes = useReactFlowStore(function (store) {
+    return store.nodes;
+  });
+  var nodeSchemaMap = useStore(function (store) {
+    return store.nodeSchemaMap;
+  });
+  var _useNodesInteraction = useNodesInteraction(),
+    handleNodeClickByNodeId = _useNodesInteraction.handleNodeClickByNodeId;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchValue = _useState2[0],
+    setSearchValue = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    expandedKeys = _useState4[0],
+    setExpandedKeys = _useState4[1];
+  var findParentKeys = function findParentKeys(nodes, targetKey) {
+    var parentKeys = [];
+    var findParent = function findParent(items, parentId) {
+      var _iterator = _createForOfIteratorHelper(items),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var item = _step.value;
+          if (item.key === targetKey) {
+            if (parentId) parentKeys.push(parentId);
+            return true;
+          }
+          if (item.children) {
+            if (findParent(item.children, item.key)) {
+              if (parentId) parentKeys.push(parentId);
+              return true;
+            }
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      return false;
+    };
+    findParent(nodes);
+    return parentKeys;
+  };
+  var filterNodes = useMemo(function () {
+    return nodes.map(function (item) {
+      return {
+        title: /*#__PURE__*/React.createElement("div", {
+          className: "spark-flow-node-tree-sub-title"
+        }, /*#__PURE__*/React.createElement(HighlightText, {
+          text: item.data.label,
+          keyword: searchValue
+        })),
+        key: item.id,
+        type: item.type,
+        parentId: item.parentId,
+        label: item.data.label
+      };
+    });
+  }, [nodes, searchValue]);
+  var treeData = useMemo(function () {
+    var newTree = [];
+    var subFlowNodesMap = {};
+    filterNodes.forEach(function (item) {
+      if (item.parentId) {
+        subFlowNodesMap[item.parentId] = [].concat(_toConsumableArray(subFlowNodesMap[item.parentId] || []), [item]);
+      } else {
+        newTree.push(item);
+      }
+    });
+    newTree = newTree.map(function (item) {
+      if (['Iterator', 'Parallel'].includes(item.type)) {
+        return _objectSpread(_objectSpread({}, item), {}, {
+          children: subFlowNodesMap[item.key]
+        });
+      }
+      return item;
+    });
+    var categoryMap = {};
+    newTree.forEach(function (item) {
+      if (categoryMap[item.type]) {
+        categoryMap[item.type].push(item);
+      } else {
+        categoryMap[item.type] = [item];
+      }
+    });
+    return Object.keys(categoryMap).map(function (itemKey) {
+      var _nodeSchemaMap$itemKe;
+      return {
+        title: /*#__PURE__*/React.createElement("div", {
+          className: "flex items-center spark-flow-node-tree-title"
+        }, (_nodeSchemaMap$itemKe = nodeSchemaMap[itemKey]) === null || _nodeSchemaMap$itemKe === void 0 ? void 0 : _nodeSchemaMap$itemKe.iconType({
+          size: 20
+        }), /*#__PURE__*/React.createElement(HighlightText, {
+          text: nodeSchemaMap[itemKey].title,
+          keyword: searchValue
+        })),
+        key: itemKey,
+        children: categoryMap[itemKey],
+        renderType: itemKey,
+        selectable: false,
+        label: nodeSchemaMap[itemKey].title
+      };
+    });
+  }, [filterNodes, nodeSchemaMap, searchValue]);
+  var getAllKeys = function getAllKeys(nodes) {
+    var keys = [];
+    var traverse = function traverse(items) {
+      items.forEach(function (item) {
+        keys.push(item.key);
+        if (item.children) {
+          traverse(item.children);
+        }
+      });
+    };
+    traverse(nodes);
+    return keys;
+  };
+  var updateExpandedKeys = useCallback(function (value) {
+    if (!value) {
+      setExpandedKeys(getAllKeys(treeData));
+      return;
+    }
+    var matchedKeys = filterNodes.filter(function (node) {
+      return node.label.toLowerCase().includes(value.toLowerCase());
+    }).map(function (node) {
+      return node.key;
+    });
+    var parentKeys = matchedKeys.reduce(function (acc, key) {
+      return [].concat(_toConsumableArray(acc), _toConsumableArray(findParentKeys(treeData, key)));
+    }, []);
+    setExpandedKeys(Array.from(new Set([].concat(_toConsumableArray(matchedKeys), _toConsumableArray(parentKeys)))));
+  }, [filterNodes, treeData]);
+  var debouncedUpdateExpandedKeys = useMemo(function () {
+    return debounce(updateExpandedKeys, 300);
+  }, [updateExpandedKeys]);
+  React.useEffect(function () {
+    debouncedUpdateExpandedKeys(searchValue);
+    return function () {
+      debouncedUpdateExpandedKeys.cancel();
+    };
+  }, [searchValue, debouncedUpdateExpandedKeys]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "spark-flow-node-tree h-full flex flex-col"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "spark-flow-node-tree-search flex-shrink-0"
+  }, /*#__PURE__*/React.createElement(Input, {
+    placeholder: $i18n.get({
+      id: 'spark-flow.components.NodeTree.index.searchNodeName',
+      dm: '搜索节点名称'
+    }),
+    prefix: /*#__PURE__*/React.createElement(SparkSearchLine, null),
+    value: searchValue,
+    onChange: function onChange(e) {
+      return setSearchValue(e.target.value);
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "flex-1 overflow-y-auto px-[16px]"
+  }, /*#__PURE__*/React.createElement(Tree, {
+    expandedKeys: expandedKeys,
+    onExpand: function onExpand(keys) {
+      return setExpandedKeys(keys);
+    },
+    switcherIcon: /*#__PURE__*/React.createElement(SparkDownLine, null),
+    treeData: treeData,
+    onSelect: function onSelect(_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 1),
+        key = _ref3[0];
+      handleNodeClickByNodeId(key);
+    }
+  })));
+});

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

@@ -0,0 +1,51 @@
+@import '../../index.less';
+
+.spark-flow-node-tree {
+  .@{ant-prefix}-tree {
+    background: transparent;
+  }
+
+  .@{ant-prefix}-tree-switcher,
+  .@{ant-prefix}-tree-switcher::before {
+    width: 16px;
+    height: 16px;
+  }
+
+  .@{ant-prefix}-tree-switcher {
+    align-self: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &::before {
+      display: none;
+    }
+
+    .@{ant-prefix}-tree-switcher-icon {
+      font-size: 16px;
+    }
+  }
+
+  .@{ant-prefix}-tree-node-content-wrapper {
+    padding: 0;
+
+    &:hover,
+    &.@{ant-prefix}-tree-node-selected {
+      background: transparent;
+    }
+  }
+}
+
+.spark-flow-node-tree-title {
+  gap: 6px;
+  font-weight: 500;
+  color: e('var(--@{ant-prefix}-color-text)');
+}
+
+.spark-flow-node-tree-sub-title {
+  color: e('var(--@{ant-prefix}-color-text-secondary)');
+}
+
+.spark-flow-node-tree-search {
+  padding: 8px 16px 16px;
+}

package/dist/components/output-params-tree/index.d.ts

@@ -0,0 +1,10 @@
+import { INodeDataOutputParamItem } from "../../types/work-flow";
+import React from 'react';
+import './index.less';
+export declare const OutputParamsTreeNode: React.MemoExoticComponent<(props: {
+    data: INodeDataOutputParamItem;
+}) => React.JSX.Element>;
+declare const _default: React.NamedExoticComponent<{
+    data: INodeDataOutputParamItem[];
+}>;
+export default _default;

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

@@ -0,0 +1,34 @@
+import { Typography } from 'antd';
+import React, { memo } from 'react';
+import "./index.less";
+export var OutputParamsTreeNode = /*#__PURE__*/memo(function (props) {
+  var _props$data$propertie;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "spark-flow-output-params-tree-node"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "spark-flow-output-params-tree-node-label"
+  }, /*#__PURE__*/React.createElement(Typography.Text, {
+    ellipsis: {
+      tooltip: props.data.key
+    }
+  }, props.data.key), /*#__PURE__*/React.createElement("span", {
+    className: "spark-flow-output-params-tree-node-desc"
+  }, props.data.type)), /*#__PURE__*/React.createElement("div", {
+    className: "spark-flow-output-params-tree-node-desc"
+  }, props.data.desc), !!((_props$data$propertie = props.data.properties) !== null && _props$data$propertie !== void 0 && _props$data$propertie.length) && /*#__PURE__*/React.createElement("div", {
+    className: "spark-flow-output-params-tree-node-properties"
+  }, props.data.properties.map(function (property, index) {
+    return /*#__PURE__*/React.createElement(OutputParamsTreeNode, {
+      key: index,
+      data: property
+    });
+  })));
+});
+export default /*#__PURE__*/memo(function OutputParamsTree(props) {
+  return /*#__PURE__*/React.createElement("div", null, props.data.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(OutputParamsTreeNode, {
+      key: index,
+      data: item
+    });
+  }));
+});

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

@@ -0,0 +1,27 @@
+@import '../../index.less';
+.spark-flow-output-params-tree-node {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  .spark-flow-output-params-tree-node-label {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-weight: 500;
+    font-size: 14px;
+    color: e('var(--@{ant-prefix}-color-text)');
+  }
+
+  .spark-flow-output-params-tree-node-desc {
+    font-size: 12px;
+    line-height: 20px;
+    color: e('var(--@{ant-prefix}-color-text-tertiary)');
+  }
+}
+
+.spark-flow-output-params-tree-node-properties {
+  margin-left: 6px;
+  padding-left: 8px;
+  border-left: 1px solid e('var(--@{ant-prefix}-color-border-secondary)');
+}

package/dist/components/script-code-mirror/index.d.ts

@@ -0,0 +1,14 @@
+import { INodeDataInputParamItem, INodeDataOutputParamItem } from "../../types/work-flow";
+import React from 'react';
+import './index.less';
+export interface IScriptCodeMirrorProps {
+    value: string;
+    onChange: (value: string) => void;
+    inputParams: INodeDataInputParamItem[];
+    outputParams: INodeDataOutputParamItem[];
+    language: 'javascript' | 'python';
+    theme?: 'light' | 'dark';
+    disabled?: boolean;
+}
+declare const _default: React.NamedExoticComponent<IScriptCodeMirrorProps>;
+export default _default;