Feat: The Begin and IterationStart operators cannot be deleted using …

…shortcut keys #4287 (#4288) ### What problem does this PR solve? Feat: The Begin and IterationStart operators cannot be deleted using shortcut keys #4287 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
infiniflow · Dec 30, 2024 · d1971e9 · d1971e9
1 parent 54908eb
commit d1971e9
Show file tree

Hide file tree

Showing 42 changed files with 391 additions and 246 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -46,6 +46,7 @@
     "@tanstack/react-query-devtools": "^5.51.5",
     "@tanstack/react-table": "^8.20.5",
     "@uiw/react-markdown-preview": "^5.1.3",
+    "@xyflow/react": "^11.11.2",
     "ahooks": "^3.7.10",
     "antd": "^5.12.7",
     "axios": "^1.6.3",
@@ -79,7 +80,6 @@
     "react-string-replace": "^1.1.1",
     "react-syntax-highlighter": "^15.5.0",
     "react18-json-view": "^0.2.8",
-    "reactflow": "^11.11.2",
     "recharts": "^2.12.4",
     "rehype-katex": "^7.0.1",
     "rehype-raw": "^7.0.0",

diff --git a/web/src/interfaces/database/flow.ts b/web/src/interfaces/database/flow.ts
@@ -1,4 +1,4 @@
-import { Edge, Node } from 'reactflow';
+import { Edge, Node } from '@xyflow/react';
 import { IReference, Message } from './chat';
 
 export type DSLComponents = Record<string, IOperator>;
@@ -25,11 +25,6 @@ export interface IOperatorNode {
   params: Record<string, unknown>;
 }
 
-export interface IGraph {
-  nodes: Node[];
-  edges: Edge[];
-}
-
 export declare interface IFlow {
   avatar?: null | string;
   canvas_type: null;
@@ -56,3 +51,119 @@ export interface IFlowTemplate {
   update_date: string;
   update_time: number;
 }
+
+export type ICategorizeItemResult = Record<
+  string,
+  Omit<ICategorizeItem, 'name'>
+>;
+
+export interface IGenerateForm {
+  max_tokens?: number;
+  temperature?: number;
+  top_p?: number;
+  presence_penalty?: number;
+  frequency_penalty?: number;
+  cite?: boolean;
+  prompt: number;
+  llm_id: string;
+  parameters: { key: string; component_id: string };
+}
+export interface ICategorizeItem {
+  name: string;
+  description?: string;
+  examples?: string;
+  to?: string;
+  index: number;
+}
+
+export interface ICategorizeForm extends IGenerateForm {
+  category_description: ICategorizeItemResult;
+}
+
+export interface IRelevantForm extends IGenerateForm {
+  yes: string;
+  no: string;
+}
+
+export interface ISwitchCondition {
+  items: ISwitchItem[];
+  logical_operator: string;
+  to: string;
+}
+
+export interface ISwitchItem {
+  cpn_id: string;
+  operator: string;
+  value: string;
+}
+
+export interface ISwitchForm {
+  conditions: ISwitchCondition[];
+  end_cpn_id: string;
+  no: string;
+}
+
+export interface IBeginForm {
+  prologue?: string;
+}
+
+export interface IRetrievalForm {
+  similarity_threshold?: number;
+  keywords_similarity_weight?: number;
+  top_n?: number;
+  top_k?: number;
+  rerank_id?: string;
+  empty_response?: string;
+  kb_ids: string[];
+}
+
+export type BaseNodeData<TForm extends any> = {
+  label: string; // operator type
+  name: string; // operator name
+  color?: string;
+  form?: TForm;
+};
+
+export type BaseNode<T = any> = Node<BaseNodeData<T>>;
+
+export type IBeginNode = BaseNode<IBeginForm>;
+export type IRetrievalNode = BaseNode<IRetrievalForm>;
+export type IGenerateNode = BaseNode<IGenerateForm>;
+export type ICategorizeNode = BaseNode<ICategorizeForm>;
+export type ISwitchNode = BaseNode<ISwitchForm>;
+export type IRagNode = BaseNode;
+export type IRelevantNode = BaseNode;
+export type ILogicNode = BaseNode;
+export type INoteNode = BaseNode;
+export type IMessageNode = BaseNode;
+export type IRewriteNode = BaseNode;
+export type IInvokeNode = BaseNode;
+export type ITemplateNode = BaseNode;
+export type IEmailNode = BaseNode;
+export type IIterationNode = BaseNode;
+export type IIterationStartNode = BaseNode;
+export type IKeywordNode = BaseNode;
+
+export type RAGFlowNodeType =
+  | IBeginNode
+  | IRetrievalNode
+  | IGenerateNode
+  | ICategorizeNode
+  | ISwitchNode
+  | IRagNode
+  | IRelevantNode
+  | ILogicNode
+  | INoteNode
+  | IMessageNode
+  | IRewriteNode
+  | IInvokeNode
+  | ITemplateNode
+  | IEmailNode
+  | IIterationNode
+  | IIterationStartNode
+  | IKeywordNode;
+
+export interface IGraph {
+  nodes: RAGFlowNodeType[];
+  edges: Edge[];
+}
diff --git a/web/src/pages/flow/canvas/context-menu/index.tsx b/web/src/pages/flow/canvas/context-menu/index.tsx
@@ -1,5 +1,5 @@
+import { NodeMouseHandler, useReactFlow } from '@xyflow/react';
 import { useCallback, useRef, useState } from 'react';
-import { NodeMouseHandler, useReactFlow } from 'reactflow';
 
 import styles from './index.less';
 

diff --git a/web/src/pages/flow/canvas/edge/index.tsx b/web/src/pages/flow/canvas/edge/index.tsx
@@ -3,7 +3,7 @@ import {
   EdgeLabelRenderer,
   EdgeProps,
   getBezierPath,
-} from 'reactflow';
+} from '@xyflow/react';
 import useGraphStore from '../../store';
 
 import { useTheme } from '@/components/theme-provider';

diff --git a/web/src/pages/flow/canvas/index.tsx b/web/src/pages/flow/canvas/index.tsx
@@ -4,14 +4,16 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
-import { FolderInput, FolderOutput } from 'lucide-react';
-import ReactFlow, {
+import {
   Background,
   ConnectionMode,
   ControlButton,
   Controls,
-} from 'reactflow';
-import 'reactflow/dist/style.css';
+  NodeTypes,
+  ReactFlow,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { FolderInput, FolderOutput } from 'lucide-react';
 import ChatDrawer from '../chat/drawer';
 import FormDrawer from '../flow-drawer';
 import {
@@ -20,6 +22,7 @@ import {
   useValidateConnection,
   useWatchNodeFormDataChange,
 } from '../hooks';
+import { useBeforeDelete } from '../hooks/use-before-delete';
 import { useHandleExportOrImportJsonFile } from '../hooks/use-export-json';
 import { useShowDrawer } from '../hooks/use-show-drawer';
 import JsonUploadModal from '../json-upload-modal';
@@ -43,7 +46,7 @@ import { RewriteNode } from './node/rewrite-node';
 import { SwitchNode } from './node/switch-node';
 import { TemplateNode } from './node/template-node';
 
-const nodeTypes = {
+const nodeTypes: NodeTypes = {
   ragNode: RagNode,
   categorizeNode: CategorizeNode,
   beginNode: BeginNode,
@@ -113,6 +116,8 @@ function FlowCanvas({ drawerVisible, hideDrawer }: IProps) {
     hideDrawer,
   });
 
+  const { handleBeforeDelete } = useBeforeDelete();
+
   useWatchNodeFormDataChange();
 
   return (
@@ -165,6 +170,7 @@ function FlowCanvas({ drawerVisible, hideDrawer }: IProps) {
           zIndex: 1001, // https://github.com/xyflow/xyflow/discussions/3498
         }}
         deleteKeyCode={['Delete', 'Backspace']}
+        onBeforeDelete={handleBeforeDelete}
       >
         <Background />
         <Controls>