@difizen/ai-flow
Version:
Scalable, out-of-the-box, agent-oriented flow
174 lines • 8.75 kB
JavaScript
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); }
import { PopoverInNode } from "../../AIBasic/PopoverInNode";
import { HoverBlock } from "../../FlowController/operator";
import { NodePanelTypeEnum } from "../../../interfaces/flow";
import { useFlowStore } from "../../../stores/flowStore";
import classNames from "../../../utils/classnames";
import { RiContractUpDownLine, RiExpandUpDownLine, RiMoreLine, RiPlayLargeLine } from '@remixicon/react';
import { Handle, Position } from '@xyflow/react';
import React from 'react';
import { PanelComponentMap } from '..';
import { useFlowsManagerStore } from "../../../stores/flowsManagerStore";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
export var NodeWrapper = function NodeWrapper(props) {
var nodeProps = props.nodeProps,
children = props.children,
_props$leftHandler = props.leftHandler,
leftHandler = _props$leftHandler === void 0 ? true : _props$leftHandler,
_props$rightHandler = props.rightHandler,
rightHandler = _props$rightHandler === void 0 ? true : _props$rightHandler,
rightHandlerConfig = props.rightHandlerConfig,
icon = props.icon,
name = props.name,
extra = props.extra,
className = props.className,
onClick = props.onClick;
var _nodeProps$data = nodeProps.data,
defaultName = _nodeProps$data.name,
description = _nodeProps$data.description,
defaultIcon = _nodeProps$data.icon;
var nodePanel = useFlowStore(function (state) {
return state.nodePanel;
});
var deleteNode = useFlowStore(function (state) {
return state.deleteNode;
});
var takeSnapshot = useFlowsManagerStore(function (state) {
return state.takeSnapshot;
});
var handlerClasses = 'w-[8px] h-[8px] bg-blue-500 rounded-full';
var setNodeFolded = useFlowStore(function (state) {
return state.setNodeFolded;
});
var getNode = useFlowStore(function (state) {
return state.getNode;
});
var paste = useFlowStore(function (state) {
return state.paste;
});
var Panel = PanelComponentMap[nodeProps.type];
var hasNodeContent = children || nodePanel === NodePanelTypeEnum.InNode && Panel;
return /*#__PURE__*/_jsxs("div", {
className: classNames('relative flex flex-col border-2 justify-center rounded-xl bg-white shadow-lg p-5 hover:shadow-2xl min-w-[300px] max-w-[500px]', nodeProps.selected || nodeProps.data.edited ? 'border-blue-500 shadow-2xl' : 'border-transparent', className),
onClick: onClick,
children: [nodeProps.selected && /*#__PURE__*/_jsxs("div", {
className: "absolute right-0 -top-10 flex items-center text-gray-500 bg-white rounded-lg p-[2px]",
children: [hasNodeContent && /*#__PURE__*/_jsx(HoverBlock, {
tooltip: /*#__PURE__*/_jsx("div", {
className: "text-[15px] font-semibold",
children: nodeProps.data.folded ? '展开' : '折叠'
}),
onClick: function onClick() {
return setNodeFolded(nodeProps.data.id, nodeProps.data.folded === undefined ? true : !nodeProps.data.folded);
},
children: nodeProps.data.folded ? /*#__PURE__*/_jsx(RiExpandUpDownLine, {
className: "w-4"
}) : /*#__PURE__*/_jsx(RiContractUpDownLine, {
className: "w-4"
})
}), /*#__PURE__*/_jsx(HoverBlock, {
tooltip: /*#__PURE__*/_jsx("div", {
className: "text-[15px] font-semibold",
children: "\u6D4B\u8BD5\u8282\u70B9"
}),
children: /*#__PURE__*/_jsx(RiPlayLargeLine, {
className: "w-4"
})
}), /*#__PURE__*/_jsx(PopoverInNode, {
overlayInnerStyle: {
padding: 0
},
placement: "bottomRight",
trigger: "hover",
arrow: false,
content: /*#__PURE__*/_jsxs("div", {
className: "z-[9] p-1 bg-white rounded-lg shadow-sm border-[0.5px] border-gray-200 w-[126px]",
children: [/*#__PURE__*/_jsx("div", {
className: "flex items-center justify-between h-8 px-3 rounded-lg hover:bg-gray-50 cursor-pointer text-[13px] text-gray-600",
onClick: function onClick() {
var node = getNode(nodeProps.data.id);
if (!node) return;
takeSnapshot();
paste({
nodes: [node],
edges: []
}, {
x: node.position.x,
y: node.position.y,
paneX: 100,
paneY: 100
});
},
children: "\u590D\u5236"
}), /*#__PURE__*/_jsx("div", {
onClick: function onClick() {
takeSnapshot();
deleteNode(nodeProps.id);
},
className: "flex items-center justify-between h-8 px-3 rounded-lg hover:bg-red-50 cursor-pointer text-[13px] text-gray-600 hover:text-red-600",
children: "\u5220\u9664"
})]
}),
children: /*#__PURE__*/_jsx(HoverBlock, {
children: /*#__PURE__*/_jsx(RiMoreLine, {})
})
})]
}), /*#__PURE__*/_jsxs("div", {
className: "flex w-full items-center justify-between gap-8 rounded-t-lg",
children: [/*#__PURE__*/_jsxs("div", {
className: "flex items-center justify-between",
children: [(defaultIcon || icon) && /*#__PURE__*/_jsx("img", {
src: icon !== null && icon !== void 0 ? icon : defaultIcon,
className: "h-8 rounded-xl shadow-md"
}), /*#__PURE__*/_jsx("div", {
className: "ml-2 truncate text-gray-700 font-medium",
children: name !== null && name !== void 0 ? name : defaultName
})]
}), extra]
}), leftHandler && /*#__PURE__*/_jsx(Handle, {
type: "target",
position: Position.Left,
style: {
borderColor: 'rgb(59 130 246)'
},
className: classNames('-ml-0.5 ', handlerClasses)
}), rightHandler && (rightHandlerConfig ? /*#__PURE__*/_jsx(_Fragment, {
children: rightHandlerConfig.map(function (item) {
return /*#__PURE__*/_jsx(Handle, {
id: item.id,
type: "source",
position: Position.Right,
style: _objectSpread({
borderColor: 'rgb(59 130 246)'
}, item.style),
className: classNames('-mr-0.5 ', handlerClasses)
}, item.id);
})
}) : /*#__PURE__*/_jsx(Handle, {
type: "source",
position: Position.Right,
style: {
borderColor: 'rgb(59 130 246)'
},
className: classNames('-mr-0.5 ', handlerClasses)
})), description && /*#__PURE__*/_jsx("div", {
className: "h-full w-full text-gray-400 pb-1 pt-2",
children: /*#__PURE__*/_jsx("div", {
className: "w-full pb-2 text-sm truncate",
children: description
})
}), !nodeProps.data.folded && hasNodeContent && /*#__PURE__*/_jsxs("div", {
className: "pt-2",
children: [children, nodePanel === NodePanelTypeEnum.InNode && Panel && /*#__PURE__*/_jsx(Panel, {
data: nodeProps.data
})]
})]
});
};