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)

web/src/pages/flow/store.ts

@@ -1,14 +1,9 @@
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
 import type {} from '@redux-devtools/extension';
-import { omit } from 'lodash';
-import differenceWith from 'lodash/differenceWith';
-import intersectionWith from 'lodash/intersectionWith';
-import lodashSet from 'lodash/set';
 import {
   Connection,
   Edge,
   EdgeChange,
-  Node,
-  NodeChange,
   OnConnect,
   OnEdgesChange,
   OnNodesChange,
@@ -17,12 +12,15 @@ import {
   addEdge,
   applyEdgeChanges,
   applyNodeChanges,
-} from 'reactflow';
+} from '@xyflow/react';
+import { omit } from 'lodash';
+import differenceWith from 'lodash/differenceWith';
+import intersectionWith from 'lodash/intersectionWith';
+import lodashSet from 'lodash/set';
 import { create } from 'zustand';
 import { devtools } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
 import { Operator, SwitchElseTo } from './constant';
-import { NodeData } from './interface';
 import {
   duplicateNodeForm,
   generateDuplicateNode,
@@ -32,25 +30,25 @@ import {
 } from './utils';
 
 export type RFState = {
-  nodes: Node<NodeData>[];
+  nodes: RAGFlowNodeType[];
   edges: Edge[];
   selectedNodeIds: string[];
   selectedEdgeIds: string[];
   clickedNodeId: string; // currently selected node
-  onNodesChange: OnNodesChange;
+  onNodesChange: OnNodesChange<RAGFlowNodeType>;
   onEdgesChange: OnEdgesChange;
   onConnect: OnConnect;
-  setNodes: (nodes: Node[]) => void;
+  setNodes: (nodes: RAGFlowNodeType[]) => void;
   setEdges: (edges: Edge[]) => void;
   setEdgesByNodeId: (nodeId: string, edges: Edge[]) => void;
   updateNodeForm: (
     nodeId: string,
     values: any,
     path?: (string | number)[],
-  ) => Node[];
+  ) => RAGFlowNodeType[];
   onSelectionChange: OnSelectionChangeFunc;
-  addNode: (nodes: Node) => void;
-  getNode: (id?: string | null) => Node<NodeData> | undefined;
+  addNode: (nodes: RAGFlowNodeType) => void;
+  getNode: (id?: string | null) => RAGFlowNodeType | undefined;
   addEdge: (connection: Connection) => void;
   getEdge: (id: string) => Edge | undefined;
   updateFormDataOnConnect: (connection: Connection) => void;
@@ -67,7 +65,7 @@ export type RFState = {
   deleteNodeById: (id: string) => void;
   deleteIterationNodeById: (id: string) => void;
   deleteEdgeBySourceAndSourceHandle: (connection: Partial<Connection>) => void;
-  findNodeByName: (operatorName: Operator) => Node | undefined;
+  findNodeByName: (operatorName: Operator) => RAGFlowNodeType | undefined;
   updateMutableNodeFormItem: (id: string, field: string, value: any) => void;
   getOperatorTypeFromId: (id?: string | null) => string | undefined;
   getParentIdById: (id?: string | null) => string | undefined;
@@ -80,12 +78,12 @@ export type RFState = {
 const useGraphStore = create<RFState>()(
   devtools(
     immer((set, get) => ({
-      nodes: [] as Node[],
+      nodes: [] as RAGFlowNodeType[],
       edges: [] as Edge[],
       selectedNodeIds: [] as string[],
       selectedEdgeIds: [] as string[],
       clickedNodeId: '',
-      onNodesChange: (changes: NodeChange[]) => {
+      onNodesChange: (changes) => {
         set({
           nodes: applyNodeChanges(changes, get().nodes),
         });
@@ -112,7 +110,7 @@ const useGraphStore = create<RFState>()(
           selectedNodeIds: nodes.map((x) => x.id),
         });
       },
-      setNodes: (nodes: Node[]) => {
+      setNodes: (nodes: RAGFlowNodeType[]) => {
         set({ nodes });
       },
       setEdges: (edges: Edge[]) => {
@@ -164,7 +162,7 @@ const useGraphStore = create<RFState>()(
           ]);
         }
       },
-      addNode: (node: Node) => {
+      addNode: (node: RAGFlowNodeType) => {
         set({ nodes: get().nodes.concat(node) });
       },
       getNode: (id?: string | null) => {
@@ -262,7 +260,7 @@ const useGraphStore = create<RFState>()(
         const { getNode, generateNodeName, nodes } = get();
         const node = getNode(id);
 
-        const iterationNode: Node<NodeData> = {
+        const iterationNode: RAGFlowNodeType = {
           ...(node || {}),
           data: {
             ...(node?.data || { label: Operator.Iteration, form: {} }),