File size: 4,316 Bytes
be99f83 dcce454 438f028 dcce454 5365cac dcce454 cd85d9e 5365cac e3322d7 be99f83 e3322d7 67bae62 970e973 e3322d7 cd85d9e be99f83 cd85d9e 457b4e6 4138aee 391120b 4138aee 95ccaf9 4138aee cd85d9e 64b1da0 4138aee be99f83 457b4e6 64b1da0 95ccaf9 cd85d9e 4138aee 391120b 457b4e6 dcce454 be99f83 5365cac 09502ac 5365cac 4a674c0 be99f83 67bae62 e3322d7 be99f83 dcce454 be99f83 cd85d9e be99f83 dcce454 b9ad0fd be99f83 e3322d7 be99f83 970e973 dcce454 be99f83 591888d dcce454 438f028 dcce454 5365cac dcce454 be99f83 5365cac b9ad0fd 5365cac e3322d7 be99f83 457b4e6 8da11cb be99f83 591888d be99f83 dcce454 be99f83 69e5f04 dcce454 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 |
import { useCallback } from 'react';
import ReactFlow, {
Background,
ConnectionMode,
Controls,
NodeMouseHandler,
} from 'reactflow';
import 'reactflow/dist/style.css';
import ChatDrawer from '../chat/drawer';
import { Operator } from '../constant';
import FlowDrawer from '../flow-drawer';
import {
useHandleDrop,
useHandleKeyUp,
useSelectCanvasData,
useShowDrawer,
useValidateConnection,
useWatchNodeFormDataChange,
} from '../hooks';
import { ButtonEdge } from './edge';
import styles from './index.less';
import { RagNode } from './node';
import { BeginNode } from './node/begin-node';
import { CategorizeNode } from './node/categorize-node';
import { GenerateNode } from './node/generate-node';
import { InvokeNode } from './node/invoke-node';
import { KeywordNode } from './node/keyword-node';
import { LogicNode } from './node/logic-node';
import { MessageNode } from './node/message-node';
import NoteNode from './node/note-node';
import { RelevantNode } from './node/relevant-node';
import { RetrievalNode } from './node/retrieval-node';
import { RewriteNode } from './node/rewrite-node';
import { SwitchNode } from './node/switch-node';
const nodeTypes = {
ragNode: RagNode,
categorizeNode: CategorizeNode,
beginNode: BeginNode,
relevantNode: RelevantNode,
logicNode: LogicNode,
noteNode: NoteNode,
switchNode: SwitchNode,
generateNode: GenerateNode,
retrievalNode: RetrievalNode,
messageNode: MessageNode,
rewriteNode: RewriteNode,
keywordNode: KeywordNode,
invokeNode: InvokeNode,
};
const edgeTypes = {
buttonEdge: ButtonEdge,
};
interface IProps {
chatDrawerVisible: boolean;
hideChatDrawer(): void;
}
function FlowCanvas({ chatDrawerVisible, hideChatDrawer }: IProps) {
const {
nodes,
edges,
onConnect,
onEdgesChange,
onNodesChange,
onSelectionChange,
} = useSelectCanvasData();
const isValidConnection = useValidateConnection();
const { drawerVisible, hideDrawer, showDrawer, clickedNode } =
useShowDrawer();
const onNodeClick: NodeMouseHandler = useCallback(
(e, node) => {
if (node.data.label !== Operator.Note) {
showDrawer(node);
}
},
[showDrawer],
);
const onPaneClick = useCallback(() => {
hideDrawer();
}, [hideDrawer]);
const { onDrop, onDragOver, setReactFlowInstance } = useHandleDrop();
const { handleKeyUp } = useHandleKeyUp();
useWatchNodeFormDataChange();
return (
<div className={styles.canvasWrapper}>
<svg
xmlns="http://www.w3.org/2000/svg"
style={{ position: 'absolute', top: 10, left: 0 }}
>
<defs>
<marker
fill="rgb(157 149 225)"
id="logo"
viewBox="0 0 40 40"
refX="8"
refY="5"
markerUnits="strokeWidth"
markerWidth="20"
markerHeight="20"
orient="auto-start-reverse"
>
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
</defs>
</svg>
<ReactFlow
connectionMode={ConnectionMode.Loose}
nodes={nodes}
onNodesChange={onNodesChange}
edges={edges}
onEdgesChange={onEdgesChange}
fitView
onConnect={onConnect}
nodeTypes={nodeTypes}
edgeTypes={edgeTypes}
onDrop={onDrop}
onDragOver={onDragOver}
onNodeClick={onNodeClick}
onPaneClick={onPaneClick}
onInit={setReactFlowInstance}
onKeyUp={handleKeyUp}
onSelectionChange={onSelectionChange}
nodeOrigin={[0.5, 0]}
isValidConnection={isValidConnection}
onChange={(...params) => {
console.info('params:', ...params);
}}
defaultEdgeOptions={{
type: 'buttonEdge',
markerEnd: 'logo',
style: {
strokeWidth: 2,
stroke: 'rgb(202 197 245)',
},
}}
>
<Background />
<Controls />
</ReactFlow>
<FlowDrawer
node={clickedNode}
visible={drawerVisible}
hideModal={hideDrawer}
></FlowDrawer>
{chatDrawerVisible && (
<ChatDrawer
visible={chatDrawerVisible}
hideModal={hideChatDrawer}
></ChatDrawer>
)}
</div>
);
}
export default FlowCanvas;
|