@difizen/ai-flow
Version:
Scalable, out-of-the-box, agent-oriented flow
51 lines • 1.6 kB
JavaScript
import { DefaultTemplateNodes, Flow, NodesPanel, useFlowStore } from "../../index";
import { Button } from 'antd';
import React, { useEffect } from 'react';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var Toolbar = function Toolbar() {
var _useFlowStore = useFlowStore(),
nodes = _useFlowStore.nodes,
edges = _useFlowStore.edges;
return /*#__PURE__*/_jsxs("div", {
className: "flex gap-2",
children: [/*#__PURE__*/_jsx(Button, {
onClick: function onClick() {},
children: "\u53D1\u5E03"
}), /*#__PURE__*/_jsx(Button, {
onClick: function onClick() {
localStorage.setItem('ai-flow-test-data', JSON.stringify({
nodes: nodes,
edges: edges
}));
},
children: "\u4FDD\u5B58"
})]
});
};
export var FlowWithPanel = function FlowWithPanel() {
useEffect(function () {
var data = localStorage.getItem('ai-flow-test-data');
if (data) {
var _JSON$parse = JSON.parse(data),
nodes = _JSON$parse.nodes,
edges = _JSON$parse.edges;
useFlowStore.setState({
nodes: nodes,
edges: edges
});
}
}, []);
return /*#__PURE__*/_jsxs("div", {
className: "flex h-[100%] w-[100%]",
children: [/*#__PURE__*/_jsx(NodesPanel, {
className: "w-[220px] z-10 bg-gray-50 shadow-lg h-[100%]",
nodes: DefaultTemplateNodes
}), /*#__PURE__*/_jsx("div", {
className: "flex-1",
children: /*#__PURE__*/_jsx(Flow, {
toolbar: /*#__PURE__*/_jsx(Toolbar, {})
})
})]
});
};