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/hooks/use-before-delete.tsx

@@ -0,0 +1,57 @@
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { OnBeforeDelete } from '@xyflow/react';
+import { Operator } from '../constant';
+import useGraphStore from '../store';
+
+const UndeletableNodes = [Operator.Begin, Operator.IterationStart];
+
+export function useBeforeDelete() {
+  const getOperatorTypeFromId = useGraphStore(
+    (state) => state.getOperatorTypeFromId,
+  );
+  const handleBeforeDelete: OnBeforeDelete<RAGFlowNodeType> = async ({
+    nodes, // Nodes to be deleted
+    edges, // Edges to be deleted
+  }) => {
+    const toBeDeletedNodes = nodes.filter((node) => {
+      const operatorType = node.data?.label as Operator;
+      if (operatorType === Operator.Begin) {
+        return false;
+      }
+
+      if (
+        operatorType === Operator.IterationStart &&
+        !nodes.some((x) => x.id === node.parentId)
+      ) {
+        return false;
+      }
+
+      return true;
+    });
+
+    const toBeDeletedEdges = edges.filter((edge) => {
+      const sourceType = getOperatorTypeFromId(edge.source) as Operator;
+      const downStreamNodes = nodes.filter((x) => x.id === edge.target);
+
+      // This edge does not need to be deleted, the range of edges that do not need to be deleted is smaller, so consider the case where it does not need to be deleted
+      if (
+        UndeletableNodes.includes(sourceType) && // Upstream node is Begin or IterationStart
+        downStreamNodes.length === 0 // Downstream node does not exist in the nodes to be deleted
+      ) {
+        if (!nodes.some((x) => x.id === edge.source)) {
+          return true; // Can be deleted
+        }
+        return false; // Cannot be deleted
+      }
+
+      return true;
+    });
+
+    return {
+      nodes: toBeDeletedNodes,
+      edges: toBeDeletedEdges,
+    };
+  };
+
+  return { handleBeforeDelete };
+}

web/src/pages/flow/hooks/use-build-dsl.ts

@@ -1,6 +1,6 @@
 import { useFetchFlow } from '@/hooks/flow-hooks';
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
 import { useCallback } from 'react';
-import { Node } from 'reactflow';
 import useGraphStore from '../store';
 import { buildDslComponentsByGraph } from '../utils';
 
@@ -9,7 +9,7 @@ export const useBuildDslData = () => {
   const { nodes, edges } = useGraphStore((state) => state);
 
   const buildDslData = useCallback(
-    (currentNodes?: Node[]) => {
+    (currentNodes?: RAGFlowNodeType[]) => {
       const dslComponents = buildDslComponentsByGraph(
         currentNodes ?? nodes,
         edges,

web/src/pages/flow/hooks/use-get-begin-query.tsx

@@ -1,9 +1,8 @@
 import { DefaultOptionType } from 'antd/es/select';
 import get from 'lodash/get';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Node } from 'reactflow';
 import { BeginId, Operator } from '../constant';
-import { BeginQuery, NodeData } from '../interface';
+import { BeginQuery, RAGFlowNodeType } from '../interface';
 import useGraphStore from '../store';
 
 export const useGetBeginNodeDataQuery = () => {
@@ -48,7 +47,7 @@ export const useBuildComponentIdSelectOptions = (
 
   // Limit the nodes inside iteration to only reference peer nodes with the same parentId and other external nodes other than their parent nodes
   const filterChildNodesToSameParentOrExternal = useCallback(
-    (node: Node<NodeData>) => {
+    (node: RAGFlowNodeType) => {
       // Node inside iteration
       if (parentId) {
         return (

web/src/pages/flow/hooks/use-save-graph.ts

@@ -1,8 +1,8 @@
 import { useFetchFlow, useResetFlow, useSetFlow } from '@/hooks/flow-hooks';
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
 import { useDebounceEffect } from 'ahooks';
 import dayjs from 'dayjs';
 import { useCallback, useEffect, useState } from 'react';
-import { Node } from 'reactflow';
 import { useParams } from 'umi';
 import useGraphStore from '../store';
 import { useBuildDslData } from './use-build-dsl';
@@ -14,7 +14,7 @@ export const useSaveGraph = () => {
   const { buildDslData } = useBuildDslData();
 
   const saveGraph = useCallback(
-    async (currentNodes?: Node[]) => {
+    async (currentNodes?: RAGFlowNodeType[]) => {
       return setFlow({
         id,
         title: data.title,
@@ -32,7 +32,7 @@ export const useSaveGraphBeforeOpeningDebugDrawer = (show: () => void) => {
   const { resetFlow } = useResetFlow();
 
   const handleRun = useCallback(
-    async (nextNodes?: Node[]) => {
+    async (nextNodes?: RAGFlowNodeType[]) => {
       const saveRet = await saveGraph(nextNodes);
       if (saveRet?.code === 0) {
         // Call the reset api before opening the run drawer each time

web/src/pages/flow/hooks/use-show-drawer.tsx

@@ -1,7 +1,7 @@
 import { useSetModalState } from '@/hooks/common-hooks';
+import { Node, NodeMouseHandler } from '@xyflow/react';
 import get from 'lodash/get';
 import { useCallback, useEffect } from 'react';
-import { Node, NodeMouseHandler } from 'reactflow';
 import { Operator } from '../constant';
 import { BeginQuery } from '../interface';
 import useGraphStore from '../store';