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.tsx

@@ -1,3 +1,10 @@
+import {
+  Connection,
+  Edge,
+  Node,
+  Position,
+  ReactFlowInstance,
+} from '@xyflow/react';
 import React, {
   ChangeEvent,
   useCallback,
@@ -5,7 +12,6 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import { Connection, Edge, Node, Position, ReactFlowInstance } from 'reactflow';
 // import { shallow } from 'zustand/shallow';
 import { variableEnabledFieldMap } from '@/constants/chat';
 import {
@@ -14,6 +20,12 @@ import {
 } from '@/constants/knowledge';
 import { useFetchModelId } from '@/hooks/logic-hooks';
 import { Variable } from '@/interfaces/database/chat';
+import {
+  ICategorizeForm,
+  IRelevantForm,
+  ISwitchForm,
+  RAGFlowNodeType,
+} from '@/interfaces/database/flow';
 import { FormInstance, message } from 'antd';
 import { humanId } from 'human-id';
 import { get, isEmpty, lowerFirst, pick } from 'lodash';
@@ -60,7 +72,6 @@ import {
   initialWikipediaValues,
   initialYahooFinanceValues,
 } from './constant';
-import { ICategorizeForm, IRelevantForm, ISwitchForm } from './interface';
 import useGraphStore, { RFState } from './store';
 import {
   generateNodeNamesWithIncreasingIndex,
@@ -149,7 +160,7 @@ export const useInitializeOperatorParams = () => {
 export const useHandleDrag = () => {
   const handleDragStart = useCallback(
     (operatorId: string) => (ev: React.DragEvent<HTMLDivElement>) => {
-      ev.dataTransfer.setData('application/reactflow', operatorId);
+      ev.dataTransfer.setData('application/@xyflow/react', operatorId);
       ev.dataTransfer.effectAllowed = 'move';
     },
     [],
@@ -184,7 +195,7 @@ export const useHandleDrop = () => {
     (event: React.DragEvent<HTMLDivElement>) => {
       event.preventDefault();
 
-      const type = event.dataTransfer.getData('application/reactflow');
+      const type = event.dataTransfer.getData('application/@xyflow/react');
 
       // check if the dropped element is valid
       if (typeof type === 'undefined' || !type) {
@@ -193,7 +204,7 @@ export const useHandleDrop = () => {
 
       // reactFlowInstance.project was renamed to reactFlowInstance.screenToFlowPosition
       // and you don't need to subtract the reactFlowBounds.left/top anymore
-      // details: https://reactflow.dev/whats-new/2023-11-10
+      // details: https://@xyflow/react.dev/whats-new/2023-11-10
       const position = reactFlowInstance?.screenToFlowPosition({
         x: event.clientX,
         y: event.clientY,
@@ -216,10 +227,8 @@ export const useHandleDrop = () => {
       };
 
       if (type === Operator.Iteration) {
-        newNode.style = {
-          width: 500,
-          height: 250,
-        };
+        newNode.width = 500;
+        newNode.height = 250;
         const iterationStartNode: Node<any> = {
           id: `${Operator.IterationStart}:${humanId()}`,
           type: 'iterationStartNode',
@@ -320,7 +329,7 @@ export const useValidateConnection = () => {
   );
 
   const isSameNodeChild = useCallback(
-    (connection: Connection) => {
+    (connection: Connection | Edge) => {
       const sourceParentId = getParentIdById(connection.source);
       const targetParentId = getParentIdById(connection.target);
       if (sourceParentId || targetParentId) {
@@ -333,7 +342,7 @@ export const useValidateConnection = () => {
 
   // restricted lines cannot be connected successfully.
   const isValidConnection = useCallback(
-    (connection: Connection) => {
+    (connection: Connection | Edge) => {
       // node cannot connect to itself
       const isSelfConnected = connection.target === connection.source;
 
@@ -567,7 +576,7 @@ export const useCopyPaste = () => {
     (event: ClipboardEvent) => {
       const nodes = JSON.parse(
         event.clipboardData?.getData('agent:nodes') || '[]',
-      ) as Node[] | undefined;
+      ) as RAGFlowNodeType[] | undefined;
 
       if (Array.isArray(nodes) && nodes.length) {
         event.preventDefault();