@agentscope-ai/flow 0.0.1

package/dist/components/branch-title-header/index.js

@@ -0,0 +1,176 @@
+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 $i18n from "../../i18n";
+import { Select } from '@agentscope-ai/design';
+import { SparkDeleteLine, SparkEditLine, SparkFalseLine, SparkTrueLine } from '@agentscope-ai/icons';
+import { useSetState } from 'ahooks';
+import { Flex, Input, message, Typography } from 'antd';
+import React, { memo, useCallback, useRef } from 'react';
+import "./index.less";
+export default /*#__PURE__*/memo(function BranchTitleHeader(props) {
+  var _useSetState = useSetState({
+      isEdit: false,
+      tempName: props.data.label
+    }),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    state = _useSetState2[0],
+    setState = _useSetState2[1];
+  var isComposingRef = useRef(false);
+  var handleSure = function handleSure() {
+    if (!state.tempName) {
+      message.warning($i18n.get({
+        id: 'spark-flow.BranchTitleHeader.index.conditionGroupNameEmpty',
+        dm: '条件组名称不能为空'
+      }));
+      return;
+    }
+    if (props.branches.some(function (item) {
+      return item.label === state.tempName && item.id !== props.data.id;
+    })) {
+      message.warning($i18n.get({
+        id: 'spark-flow.BranchTitleHeader.index.conditionGroupNameExists',
+        dm: '条件组名称已存在'
+      }));
+      return;
+    }
+    props.onChange({
+      label: state.tempName
+    });
+    setState({
+      isEdit: false
+    });
+  };
+
+  // handle Chinese input start event
+  var handleCompositionStart = useCallback(function () {
+    isComposingRef.current = true;
+  }, []);
+
+  // handle Chinese input end event
+  var handleCompositionEnd = useCallback(function () {
+    isComposingRef.current = false;
+  }, []);
+
+  // handle enter event
+  var handlePressEnter = useCallback(function (e) {
+    // if Chinese input is ongoing, do not handle enter event
+    if (isComposingRef.current) {
+      return;
+    }
+
+    // trigger confirm operation
+    handleSure();
+
+    // prevent default behavior (such as form submission)
+    e.preventDefault();
+  }, [handleSure]);
+  return /*#__PURE__*/React.createElement(Flex, {
+    justify: "space-between"
+  }, state.isEdit ? /*#__PURE__*/React.createElement(Flex, {
+    className: "flex-1",
+    gap: 8,
+    align: "center"
+  }, /*#__PURE__*/React.createElement(Input, {
+    onCompositionStart: handleCompositionStart,
+    onCompositionEnd: handleCompositionEnd,
+    onPressEnter: handlePressEnter,
+    value: state.tempName,
+    onChange: function onChange(e) {
+      return setState({
+        tempName: e.target.value
+      });
+    },
+    placeholder: $i18n.get({
+      id: 'spark-flow.BranchTitleHeader.index.enterConditionGroupName',
+      dm: '请输入条件组名称'
+    })
+  }), /*#__PURE__*/React.createElement(SparkTrueLine, {
+    onClick: handleSure,
+    style: {
+      cursor: 'pointer'
+    },
+    className: "spark-flow-name-input-ok-btn"
+  }), /*#__PURE__*/React.createElement(SparkFalseLine, {
+    onClick: function onClick() {
+      return setState({
+        isEdit: false,
+        tempName: props.data.label
+      });
+    },
+    style: {
+      cursor: 'pointer'
+    }
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex, {
+    align: "center",
+    gap: 16
+  }, /*#__PURE__*/React.createElement(Typography.Text, {
+    ellipsis: {
+      tooltip: props.data.label
+    },
+    style: {
+      maxWidth: 120
+    },
+    className: "spark-flow-panel-form-title"
+  }, props.data.label), /*#__PURE__*/React.createElement(Flex, {
+    align: "center",
+    gap: 4,
+    className: "text-[12px]"
+  }, /*#__PURE__*/React.createElement("span", null, $i18n.get({
+    id: 'spark-flow.BranchTitleHeader.index.whenSatisfy',
+    dm: '当满足以下'
+  })), /*#__PURE__*/React.createElement(Select, {
+    disabled: props.disabled,
+    className: "spark-flow-logic-selector",
+    value: props.data.logic,
+    onChange: function onChange(val) {
+      return props.onChange({
+        logic: val
+      });
+    },
+    options: [{
+      label: $i18n.get({
+        id: 'spark-flow.BranchTitleHeader.index.all',
+        dm: '所有'
+      }),
+      value: 'and'
+    }, {
+      label: $i18n.get({
+        id: 'spark-flow.BranchTitleHeader.index.any',
+        dm: '任意'
+      }),
+      value: 'or'
+    }],
+    popupMatchSelectWidth: false,
+    size: "small",
+    variant: "borderless"
+  }), /*#__PURE__*/React.createElement("span", null, $i18n.get({
+    id: 'spark-flow.BranchTitleHeader.index.conditions',
+    dm: '条件时'
+  })))), /*#__PURE__*/React.createElement(Flex, {
+    gap: 12
+  }, /*#__PURE__*/React.createElement(SparkEditLine, {
+    className: props.disabled ? 'disabled-icon-btn' : '',
+    onClick: function onClick() {
+      if (props.disabled) return;
+      setState({
+        isEdit: true,
+        tempName: props.data.label
+      });
+    },
+    size: 16,
+    style: {
+      cursor: props.disabled ? 'not-allowed' : 'pointer'
+    }
+  }), /*#__PURE__*/React.createElement(SparkDeleteLine, {
+    onClick: props.disabled ? void 0 : props.deleteBranchItem,
+    className: props.disabled ? 'disabled-icon-btn' : '',
+    size: 16,
+    style: {
+      cursor: props.disabled ? 'not-allowed' : 'pointer'
+    }
+  }))));
+});

package/dist/components/branch-title-header/index.less

@@ -0,0 +1,28 @@
+@import '../../index.less';
+
+.spark-flow-name-input-ok-btn {
+  color: e('var(--@{ant-prefix}-color-teal)');
+
+  &:hover {
+    color: e('var(--@{ant-prefix}-color-teal)');
+  }
+}
+
+.spark-flow-logic-selector {
+  .@{ant-prefix}-select-selection-item {
+    font-size: 12px;
+    font-weight: 500;
+  }
+
+  .@{ant-prefix}-select-selector {
+    padding: 0 !important;
+  }
+  
+  .@{ant-prefix}-select-selection-search, .@{ant-prefix}-select-selection-item {
+    padding-right: 12px !important;
+  }
+
+  .@{ant-prefix}-select-arrow {
+    right: 0;
+  }
+}

package/dist/components/check-list-btn/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/check-list-btn/index.js

@@ -0,0 +1,144 @@
+import { useStore } from "../../flow/context";
+import { useNodesInteraction } from "../../hooks";
+import $i18n from "../../i18n";
+import { Empty, IconButton } from '@agentscope-ai/design';
+import { SparkFalseLine, SparkOrganizeAnswerFill, SparkWarningCircleLine } from '@agentscope-ai/icons';
+import { useStore as useFlowStore } from '@xyflow/react';
+import { Badge, Popover, Typography } from 'antd';
+import { debounce } from 'lodash-es';
+import React, { memo, useCallback, useEffect, useMemo } from 'react';
+import FlowIcon from "../flow-icon";
+import "./index.less";
+export default /*#__PURE__*/memo(function CheckListBtn() {
+  var showCheckList = useStore(function (state) {
+    return state.showCheckList;
+  });
+  var setShowCheckList = useStore(function (state) {
+    return state.setShowCheckList;
+  });
+  var nodes = useFlowStore(function (store) {
+    return store.nodes;
+  });
+  var edges = useFlowStore(function (store) {
+    return store.edges;
+  });
+  var nodeSchemaMap = useStore(function (store) {
+    return store.nodeSchemaMap;
+  });
+  var checkList = useStore(function (state) {
+    return state.checkList;
+  });
+  var setCheckList = useStore(function (state) {
+    return state.setCheckList;
+  });
+  var _useNodesInteraction = useNodesInteraction(),
+    handleNodeClickByNodeId = _useNodesInteraction.handleNodeClickByNodeId;
+  var checkNodesList = useCallback(function () {
+    var list = [];
+    nodes.forEach(function (item) {
+      var nodeInfo = nodeSchemaMap[item.type];
+      if (!(nodeInfo !== null && nodeInfo !== void 0 && nodeInfo.checkValid)) return;
+      var error_msgs = nodeInfo.checkValid(item.data);
+      if (error_msgs.length > 0) {
+        list.push({
+          node_id: item.id,
+          error_msgs: error_msgs,
+          node_type: item.type,
+          node_name: item.data.label
+        });
+      }
+    });
+    setCheckList(list);
+  }, [nodes, edges, nodeSchemaMap, setCheckList]);
+  var debouncedCheckNodesList = useMemo(function () {
+    return debounce(checkNodesList, 300);
+  }, [checkNodesList]);
+  useEffect(function () {
+    debouncedCheckNodesList();
+    return function () {
+      debouncedCheckNodesList.cancel();
+    };
+  }, [nodes, edges, debouncedCheckNodesList]);
+  var memoCheckList = useMemo(function () {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "spark-flow-check-list-header flex-justify-between"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "spark-flow-check-list-header-title"
+    }, $i18n.get({
+      id: 'spark-flow.components.CheckListBtn.index.checklistVar1',
+      dm: '检查清单 · {var1}'
+    }, {
+      var1: "".concat(checkList.length)
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "p-[4px] cursor-pointer"
+    }, /*#__PURE__*/React.createElement(SparkFalseLine, {
+      onClick: function onClick() {
+        return setShowCheckList(false);
+      },
+      className: "spark-flow-operator-icon-with-bg"
+    }))), !checkList.length ? /*#__PURE__*/React.createElement("div", {
+      className: "spark-flow-check-list-empty flex flex-col items-center"
+    }, /*#__PURE__*/React.createElement(Empty, {
+      description: $i18n.get({
+        id: 'spark-flow.components.CheckListBtn.index.allResolved',
+        dm: '所有清单项已解决'
+      }),
+      type: "success"
+    })) : /*#__PURE__*/React.createElement("div", {
+      className: "spark-flow-check-list-content px-[8px] pb-[8px] overflow-y-auto flex flex-col gap-[8px]"
+    }, checkList.map(function (item) {
+      return /*#__PURE__*/React.createElement("div", {
+        onClick: function onClick() {
+          handleNodeClickByNodeId(item.node_id);
+          setShowCheckList(false);
+        },
+        key: item.node_id,
+        className: "spark-flow-node-check-container"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "spark-flow-node-check-container-header"
+      }, /*#__PURE__*/React.createElement(FlowIcon, {
+        size: "small",
+        nodeType: item.node_type
+      }), /*#__PURE__*/React.createElement(Typography.Text, {
+        ellipsis: {
+          tooltip: item.node_name
+        },
+        className: "spark-flow-node-check-container-header-title"
+      }, item.node_name)), /*#__PURE__*/React.createElement("div", {
+        className: "spark-flow-node-check-container-content"
+      }, item.error_msgs.map(function (msg, index) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "spark-flow-node-check-container-content-item",
+          key: index
+        }, /*#__PURE__*/React.createElement(SparkWarningCircleLine, {
+          size: 16,
+          className: "spark-flow-node-check-container-content-item-icon"
+        }), /*#__PURE__*/React.createElement("span", {
+          className: "spark-flow-node-check-container-content-item-title"
+        }, msg.label), /*#__PURE__*/React.createElement("span", {
+          className: "spark-flow-node-check-container-content-item-error"
+        }, msg.error));
+      })));
+    })));
+  }, [showCheckList, checkList]);
+  return /*#__PURE__*/React.createElement(Popover, {
+    getPopupContainer: function getPopupContainer(ele) {
+      return ele;
+    },
+    content: memoCheckList,
+    trigger: 'click',
+    placement: "bottomRight",
+    open: showCheckList,
+    onOpenChange: setShowCheckList
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "spark-flow-check-list-btn"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    className: "spark-flow-check-list-btn-child",
+    icon: /*#__PURE__*/React.createElement(SparkOrganizeAnswerFill, null)
+  }, !!checkList.length && /*#__PURE__*/React.createElement(Badge, {
+    className: "spark-flow-check-list-btn-count",
+    showZero: true,
+    count: checkList.length,
+    color: "orange"
+  }))));
+});

package/dist/components/check-list-btn/index.less

@@ -0,0 +1,113 @@
+@import '../../index.less';
+
+.spark-flow-check-list-btn {
+  .@{ant-prefix}-popover .@{ant-prefix}-popover-inner {
+    padding: 0;
+  }
+}
+
+.spark-flow-check-list-header {
+  height: 44px;
+  padding: 0 12px 0 16px;
+  gap: 16px;
+
+  &-title {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    color: e('var(--@{ant-prefix}-color-text)');
+  }
+}
+
+.spark-flow-check-list-btn-child {
+  position: relative;
+  width: 32px;
+
+  .spark-flow-check-list-btn-count {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+  }
+}
+
+.spark-flow-check-list-content {
+  max-height: calc(75vh - 44px);
+  overflow-y: auto;
+}
+
+.spark-flow-node-check-container {
+  border-radius: 6px;
+  width: 304px;
+  background: e('var(--@{ant-prefix}-color-bg-white)');
+  border: 1px solid e('var(--@{ant-prefix}-color-border-secondary)');
+  transition: 0.4s ease-in-out;
+  cursor: pointer;
+
+  &:hover {
+    box-shadow: e('var(--@{ant-prefix}-box-shadow)');
+  }
+
+  &-header {
+    display: flex;
+    align-items: center;
+    padding: 6px 12px;
+    gap: 6px;
+    border-radius: 6px 6px 0 0;
+    background: e('var(--@{ant-prefix}-color-fill-tertiary)');
+
+    * {
+      flex-shrink: 0;
+    }
+
+    &-title {
+      flex: 1;
+      font-size: 12px;
+      font-weight: 500;
+      line-height: 20px;
+      color: e('var(--@{ant-prefix}-color-text-secondary)');
+    }
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    padding: 8px 12px;
+    gap: 4px;
+
+    &-item {
+      display: flex;
+      gap: 6px;
+      align-items: center;
+
+      &-icon {
+        color: e('var(--@{ant-prefix}-color-warning)');
+      }
+
+      &-title {
+        font-size: 12px;
+        font-weight: 500;
+        line-height: 20px;
+        color: e('var(--@{ant-prefix}-color-text)');
+      }
+  
+      &-error {
+        font-size: 12px;
+        line-height: 20px;
+        color: e('var(--@{ant-prefix}-color-text)');
+      }
+    }
+  }
+}
+
+.spark-flow-check-list-empty {
+  gap: 8px;
+  width: 320px;
+  padding: 58px 0 70px;
+
+  &-title {
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    color: e('var(--@{ant-prefix}-color-text)');
+  }
+}

package/dist/components/code-input/index.d.ts

@@ -0,0 +1,24 @@
+import { IValueType } from "../../types/work-flow";
+import React from 'react';
+import './index.less';
+interface CodeInputProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    type: IValueType;
+    height?: string;
+    className?: string;
+    isCompact?: boolean;
+    disabled?: boolean;
+    style?: React.CSSProperties;
+    onErrorChange?: (hasErrors: boolean) => void;
+}
+export declare const CodeInputModal: ({ value, onOk, type, onClose, disabled, onErrorChange, }: {
+    value?: string | undefined;
+    onOk: (value?: string) => void;
+    type: IValueType;
+    onClose: () => void;
+    disabled?: boolean | undefined;
+    onErrorChange?: ((hasErrors: boolean) => void) | undefined;
+}) => React.JSX.Element;
+declare const CodeInput: React.FC<CodeInputProps>;
+export default CodeInput;