diff --git a/web/src/hooks/flow-hooks.ts b/web/src/hooks/flow-hooks.ts
index 55abc2941..5acfd0649 100644
--- a/web/src/hooks/flow-hooks.ts
+++ b/web/src/hooks/flow-hooks.ts
@@ -1,79 +1,14 @@
-import { ResponseType } from '@/interfaces/database/base';
-import { DSL, IFlow, IFlowTemplate } from '@/interfaces/database/flow';
+import { DSL, IFlow } from '@/interfaces/database/flow';
 import { IDebugSingleRequestBody } from '@/interfaces/request/flow';
 import i18n from '@/locales/config';
 import { useGetSharedChatSearchParams } from '@/pages/chat/shared-hooks';
-import { BeginId } from '@/pages/flow/constant';
 import flowService from '@/services/flow-service';
 import { buildMessageListWithUuid } from '@/utils/chat';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { message } from 'antd';
 import { set } from 'lodash';
 import get from 'lodash/get';
-import { useTranslation } from 'react-i18next';
 import { useParams } from 'umi';
-import { v4 as uuid } from 'uuid';
-
-export const EmptyDsl = {
-  graph: {
-    nodes: [
-      {
-        id: BeginId,
-        type: 'beginNode',
-        position: {
-          x: 50,
-          y: 200,
-        },
-        data: {
-          label: 'Begin',
-          name: 'begin',
-        },
-        sourcePosition: 'left',
-        targetPosition: 'right',
-      },
-    ],
-    edges: [],
-  },
-  components: {
-    begin: {
-      obj: {
-        component_name: 'Begin',
-        params: {},
-      },
-      downstream: ['Answer:China'], // other edge target is downstream, edge source is current node id
-      upstream: [], // edge source is upstream, edge target is current node id
-    },
-  },
-  messages: [],
-  reference: [],
-  history: [],
-  path: [],
-  answer: [],
-};
-
-export const useFetchFlowTemplates = (): ResponseType<IFlowTemplate[]> => {
-  const { t } = useTranslation();
-
-  const { data } = useQuery({
-    queryKey: ['fetchFlowTemplates'],
-    initialData: [],
-    queryFn: async () => {
-      const { data } = await flowService.listTemplates();
-      if (Array.isArray(data?.data)) {
-        data.data.unshift({
-          id: uuid(),
-          title: t('flow.blank'),
-          description: t('flow.createFromNothing'),
-          dsl: EmptyDsl,
-        });
-      }
-
-      return data;
-    },
-  });
-
-  return data;
-};
 
 export const useFetchFlowList = (): { data: IFlow[]; loading: boolean } => {
   const { data, isFetching: loading } = useQuery({
diff --git a/web/src/pages/flow/canvas/context-menu/index.less b/web/src/pages/flow/canvas/context-menu/index.less
deleted file mode 100644
index 5594aa912..000000000
--- a/web/src/pages/flow/canvas/context-menu/index.less
+++ /dev/null
@@ -1,18 +0,0 @@
-.contextMenu {
-  background: rgba(255, 255, 255, 0.1);
-  border-style: solid;
-  box-shadow: 10px 19px 20px rgba(0, 0, 0, 10%);
-  position: absolute;
-  z-index: 10;
-  button {
-    border: none;
-    display: block;
-    padding: 0.5em;
-    text-align: left;
-    width: 100%;
-  }
-
-  button:hover {
-    background: rgba(255, 255, 255, 0.1);
-  }
-}
diff --git a/web/src/pages/flow/canvas/context-menu/index.tsx b/web/src/pages/flow/canvas/context-menu/index.tsx
deleted file mode 100644
index 6cb306af9..000000000
--- a/web/src/pages/flow/canvas/context-menu/index.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { NodeMouseHandler, useReactFlow } from '@xyflow/react';
-import { useCallback, useRef, useState } from 'react';
-
-import styles from './index.less';
-
-export interface INodeContextMenu {
-  id: string;
-  top: number;
-  left: number;
-  right?: number;
-  bottom?: number;
-  [key: string]: unknown;
-}
-
-export function NodeContextMenu({
-  id,
-  top,
-  left,
-  right,
-  bottom,
-  ...props
-}: INodeContextMenu) {
-  const { getNode, setNodes, addNodes, setEdges } = useReactFlow();
-
-  const duplicateNode = useCallback(() => {
-    const node = getNode(id);
-    const position = {
-      x: node?.position?.x || 0 + 50,
-      y: node?.position?.y || 0 + 50,
-    };
-
-    addNodes({
-      ...(node || {}),
-      data: node?.data,
-      selected: false,
-      dragging: false,
-      id: `${node?.id}-copy`,
-      position,
-    });
-  }, [id, getNode, addNodes]);
-
-  const deleteNode = useCallback(() => {
-    setNodes((nodes) => nodes.filter((node) => node.id !== id));
-    setEdges((edges) => edges.filter((edge) => edge.source !== id));
-  }, [id, setNodes, setEdges]);
-
-  return (
-    <div
-      style={{ top, left, right, bottom }}
-      className={styles.contextMenu}
-      {...props}
-    >
-      <p style={{ margin: '0.5em' }}>
-        <small>node: {id}</small>
-      </p>
-      <button onClick={duplicateNode} type={'button'}>
-        duplicate
-      </button>
-      <button onClick={deleteNode} type={'button'}>
-        delete
-      </button>
-    </div>
-  );
-}
-
-/*  @deprecated
- */
-export const useHandleNodeContextMenu = (sideWidth: number) => {
-  const [menu, setMenu] = useState<INodeContextMenu>({} as INodeContextMenu);
-  const ref = useRef<any>(null);
-
-  const onNodeContextMenu: NodeMouseHandler = useCallback(
-    (event, node) => {
-      // Prevent native context menu from showing
-      event.preventDefault();
-
-      // Calculate position of the context menu. We want to make sure it
-      // doesn't get positioned off-screen.
-      const pane = ref.current?.getBoundingClientRect();
-      // setMenu({
-      //   id: node.id,
-      //   top: event.clientY < pane.height - 200 ? event.clientY : 0,
-      //   left: event.clientX < pane.width - 200 ? event.clientX : 0,
-      //   right: event.clientX >= pane.width - 200 ? pane.width - event.clientX : 0,
-      //   bottom:
-      //     event.clientY >= pane.height - 200 ? pane.height - event.clientY : 0,
-      // });
-
-      setMenu({
-        id: node.id,
-        top: event.clientY - 144,
-        left: event.clientX - sideWidth,
-        // top: event.clientY < pane.height - 200 ? event.clientY - 72 : 0,
-        // left: event.clientX < pane.width - 200 ? event.clientX : 0,
-      });
-    },
-    [sideWidth],
-  );
-
-  // Close the context menu if it's open whenever the window is clicked.
-  const onPaneClick = useCallback(
-    () => setMenu({} as INodeContextMenu),
-    [setMenu],
-  );
-
-  return { onNodeContextMenu, menu, onPaneClick, ref };
-};
diff --git a/web/src/pages/flow/canvas/edge/index.less b/web/src/pages/flow/canvas/edge/index.less
deleted file mode 100644
index 281b67251..000000000
--- a/web/src/pages/flow/canvas/edge/index.less
+++ /dev/null
@@ -1,31 +0,0 @@
-.edgeButton {
-  width: 14px;
-  height: 14px;
-  background: #eee;
-  border: 1px solid #fff;
-  padding: 0;
-  cursor: pointer;
-  border-radius: 50%;
-  font-size: 10px;
-  line-height: 1;
-}
-
-.edgeButton:hover {
-  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.08);
-}
-
-.edgeButtonDark {
-  width: 14px;
-  height: 14px;
-  background: #0e0c0c;
-  border: 1px solid #fff;
-  padding: 0;
-  cursor: pointer;
-  border-radius: 50%;
-  font-size: 10px;
-  line-height: 1;
-}
-
-.edgeButtonDark:hover {
-  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.08);
-}
diff --git a/web/src/pages/flow/canvas/edge/index.tsx b/web/src/pages/flow/canvas/edge/index.tsx
deleted file mode 100644
index 52f939b8d..000000000
--- a/web/src/pages/flow/canvas/edge/index.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import {
-  BaseEdge,
-  EdgeLabelRenderer,
-  EdgeProps,
-  getBezierPath,
-} from '@xyflow/react';
-import useGraphStore from '../../store';
-
-import { useTheme } from '@/components/theme-provider';
-import { useFetchFlow } from '@/hooks/flow-hooks';
-import { useMemo } from 'react';
-import styles from './index.less';
-
-export function ButtonEdge({
-  id,
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
-  sourcePosition,
-  targetPosition,
-  source,
-  target,
-  style = {},
-  markerEnd,
-  selected,
-}: EdgeProps) {
-  const deleteEdgeById = useGraphStore((state) => state.deleteEdgeById);
-  const [edgePath, labelX, labelY] = getBezierPath({
-    sourceX,
-    sourceY,
-    sourcePosition,
-    targetX,
-    targetY,
-    targetPosition,
-  });
-  const { theme } = useTheme();
-  const selectedStyle = useMemo(() => {
-    return selected ? { strokeWidth: 2, stroke: '#1677ff' } : {};
-  }, [selected]);
-
-  const onEdgeClick = () => {
-    deleteEdgeById(id);
-  };
-
-  // highlight the nodes that the workflow passes through
-  const { data: flowDetail } = useFetchFlow();
-
-  const graphPath = useMemo(() => {
-    // TODO: this will be called multiple times
-    const path = flowDetail?.dsl?.path ?? [];
-    // The second to last
-    const previousGraphPath: string[] = path.at(-2) ?? [];
-    let graphPath: string[] = path.at(-1) ?? [];
-    // The last of the second to last article
-    const previousLatestElement = previousGraphPath.at(-1);
-    if (previousGraphPath.length > 0 && previousLatestElement) {
-      graphPath = [previousLatestElement, ...graphPath];
-    }
-    return graphPath;
-  }, [flowDetail.dsl?.path]);
-
-  const highlightStyle = useMemo(() => {
-    const idx = graphPath.findIndex((x) => x === source);
-    if (idx !== -1) {
-      // The set of elements following source
-      const slicedGraphPath = graphPath.slice(idx + 1);
-      if (slicedGraphPath.some((x) => x === target)) {
-        return { strokeWidth: 2, stroke: 'red' };
-      }
-    }
-    return {};
-  }, [source, target, graphPath]);
-
-  return (
-    <>
-      <BaseEdge
-        path={edgePath}
-        markerEnd={markerEnd}
-        style={{ ...style, ...selectedStyle, ...highlightStyle }}
-      />
-      <EdgeLabelRenderer>
-        <div
-          style={{
-            position: 'absolute',
-            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
-            fontSize: 12,
-            // everything inside EdgeLabelRenderer has no pointer events by default
-            // if you have an interactive element, set pointer-events: all
-            pointerEvents: 'all',
-            zIndex: 1001, // https://github.com/xyflow/xyflow/discussions/3498
-          }}
-          className="nodrag nopan"
-        >
-          <button
-            className={
-              theme === 'dark' ? styles.edgeButtonDark : styles.edgeButton
-            }
-            type="button"
-            onClick={onEdgeClick}
-          >
-            ×
-          </button>
-        </div>
-      </EdgeLabelRenderer>
-    </>
-  );
-}
diff --git a/web/src/pages/flow/canvas/index.less b/web/src/pages/flow/canvas/index.less
deleted file mode 100644
index d824d88f1..000000000
--- a/web/src/pages/flow/canvas/index.less
+++ /dev/null
@@ -1,10 +0,0 @@
-.canvasWrapper {
-  position: relative;
-  height: 100%;
-  :global(.react-flow__node-group) {
-    .commonNode();
-    padding: 0;
-    border: 0;
-    background-color: transparent;
-  }
-}
diff --git a/web/src/pages/flow/canvas/index.tsx b/web/src/pages/flow/canvas/index.tsx
deleted file mode 100644
index e9ce10ac7..000000000
--- a/web/src/pages/flow/canvas/index.tsx
+++ /dev/null
@@ -1,237 +0,0 @@
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
-import {
-  Background,
-  ConnectionMode,
-  ControlButton,
-  Controls,
-  NodeTypes,
-  ReactFlow,
-} from '@xyflow/react';
-import '@xyflow/react/dist/style.css';
-import { Book, FolderInput, FolderOutput } from 'lucide-react';
-import ChatDrawer from '../chat/drawer';
-import FormDrawer from '../flow-drawer';
-import {
-  useHandleDrop,
-  useSelectCanvasData,
-  useValidateConnection,
-  useWatchNodeFormDataChange,
-} from '../hooks';
-import { useBeforeDelete } from '../hooks/use-before-delete';
-import { useHandleExportOrImportJsonFile } from '../hooks/use-export-json';
-import { useOpenDocument } from '../hooks/use-open-document';
-import { useShowDrawer } from '../hooks/use-show-drawer';
-import JsonUploadModal from '../json-upload-modal';
-import RunDrawer from '../run-drawer';
-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 { EmailNode } from './node/email-node';
-import { GenerateNode } from './node/generate-node';
-import { InvokeNode } from './node/invoke-node';
-import { IterationNode, IterationStartNode } from './node/iteration-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';
-import { TemplateNode } from './node/template-node';
-
-export const nodeTypes: 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,
-  templateNode: TemplateNode,
-  emailNode: EmailNode,
-  group: IterationNode,
-  iterationStartNode: IterationStartNode,
-};
-
-export const edgeTypes = {
-  buttonEdge: ButtonEdge,
-};
-
-interface IProps {
-  drawerVisible: boolean;
-  hideDrawer(): void;
-}
-
-function FlowCanvas({ drawerVisible, hideDrawer }: IProps) {
-  const {
-    nodes,
-    edges,
-    onConnect,
-    onEdgesChange,
-    onNodesChange,
-    onSelectionChange,
-  } = useSelectCanvasData();
-  const isValidConnection = useValidateConnection();
-
-  const { onDrop, onDragOver, setReactFlowInstance } = useHandleDrop();
-
-  const {
-    handleExportJson,
-    handleImportJson,
-    fileUploadVisible,
-    onFileUploadOk,
-    hideFileUploadModal,
-  } = useHandleExportOrImportJsonFile();
-
-  const openDocument = useOpenDocument();
-
-  const {
-    onNodeClick,
-    onPaneClick,
-    clickedNode,
-    formDrawerVisible,
-    hideFormDrawer,
-    singleDebugDrawerVisible,
-    hideSingleDebugDrawer,
-    showSingleDebugDrawer,
-    chatVisible,
-    runVisible,
-    hideRunOrChatDrawer,
-    showChatModal,
-  } = useShowDrawer({
-    drawerVisible,
-    hideDrawer,
-  });
-
-  const { handleBeforeDelete } = useBeforeDelete();
-
-  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}
-        onSelectionChange={onSelectionChange}
-        nodeOrigin={[0.5, 0]}
-        isValidConnection={isValidConnection}
-        defaultEdgeOptions={{
-          type: 'buttonEdge',
-          markerEnd: 'logo',
-          style: {
-            strokeWidth: 2,
-            stroke: 'rgb(202 197 245)',
-          },
-          zIndex: 1001, // https://github.com/xyflow/xyflow/discussions/3498
-        }}
-        deleteKeyCode={['Delete', 'Backspace']}
-        onBeforeDelete={handleBeforeDelete}
-      >
-        <Background />
-        <Controls className="text-black !flex-col-reverse">
-          <ControlButton onClick={handleImportJson}>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <FolderInput className="!fill-none" />
-              </TooltipTrigger>
-              <TooltipContent>Import</TooltipContent>
-            </Tooltip>
-          </ControlButton>
-          <ControlButton onClick={handleExportJson}>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <FolderOutput className="!fill-none" />
-              </TooltipTrigger>
-              <TooltipContent>Export</TooltipContent>
-            </Tooltip>
-          </ControlButton>
-          <ControlButton onClick={openDocument}>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Book className="!fill-none" />
-              </TooltipTrigger>
-              <TooltipContent>Document</TooltipContent>
-            </Tooltip>
-          </ControlButton>
-        </Controls>
-      </ReactFlow>
-      {formDrawerVisible && (
-        <FormDrawer
-          node={clickedNode}
-          visible={formDrawerVisible}
-          hideModal={hideFormDrawer}
-          singleDebugDrawerVisible={singleDebugDrawerVisible}
-          hideSingleDebugDrawer={hideSingleDebugDrawer}
-          showSingleDebugDrawer={showSingleDebugDrawer}
-        ></FormDrawer>
-      )}
-      {chatVisible && (
-        <ChatDrawer
-          visible={chatVisible}
-          hideModal={hideRunOrChatDrawer}
-        ></ChatDrawer>
-      )}
-
-      {runVisible && (
-        <RunDrawer
-          hideModal={hideRunOrChatDrawer}
-          showModal={showChatModal}
-        ></RunDrawer>
-      )}
-      {fileUploadVisible && (
-        <JsonUploadModal
-          onOk={onFileUploadOk}
-          visible={fileUploadVisible}
-          hideModal={hideFileUploadModal}
-        ></JsonUploadModal>
-      )}
-    </div>
-  );
-}
-
-export default FlowCanvas;
diff --git a/web/src/pages/flow/canvas/node/begin-node.tsx b/web/src/pages/flow/canvas/node/begin-node.tsx
deleted file mode 100644
index 83e36652b..000000000
--- a/web/src/pages/flow/canvas/node/begin-node.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { useTheme } from '@/components/theme-provider';
-import { IBeginNode } from '@/interfaces/database/flow';
-import { Handle, NodeProps, Position } from '@xyflow/react';
-import { Flex } from 'antd';
-import classNames from 'classnames';
-import get from 'lodash/get';
-import { useTranslation } from 'react-i18next';
-import {
-  BeginQueryType,
-  BeginQueryTypeIconMap,
-  Operator,
-  operatorMap,
-} from '../../constant';
-import { BeginQuery } from '../../interface';
-import OperatorIcon from '../../operator-icon';
-import { RightHandleStyle } from './handle-icon';
-import styles from './index.less';
-
-// TODO: do not allow other nodes to connect to this node
-export function BeginNode({ selected, data }: NodeProps<IBeginNode>) {
-  const { t } = useTranslation();
-  const query: BeginQuery[] = get(data, 'form.query', []);
-  const { theme } = useTheme();
-  return (
-    <section
-      className={classNames(
-        styles.ragNode,
-        theme === 'dark' ? styles.dark : '',
-        {
-          [styles.selectedNode]: selected,
-        },
-      )}
-    >
-      <Handle
-        type="source"
-        position={Position.Right}
-        isConnectable
-        className={styles.handle}
-        style={RightHandleStyle}
-      ></Handle>
-
-      <Flex align="center" justify={'center'} gap={10}>
-        <OperatorIcon
-          name={data.label as Operator}
-          fontSize={24}
-          color={operatorMap[data.label as Operator].color}
-        ></OperatorIcon>
-        <div className="truncate text-center font-semibold text-sm">
-          {t(`flow.begin`)}
-        </div>
-      </Flex>
-      <Flex gap={8} vertical className={styles.generateParameters}>
-        {query.map((x, idx) => {
-          const Icon = BeginQueryTypeIconMap[x.type as BeginQueryType];
-          return (
-            <Flex
-              key={idx}
-              align="center"
-              gap={6}
-              className={styles.conditionBlock}
-            >
-              <Icon className="size-4" />
-              <label htmlFor="">{x.key}</label>
-              <span className={styles.parameterValue}>{x.name}</span>
-              <span className="flex-1">{x.optional ? 'Yes' : 'No'}</span>
-            </Flex>
-          );
-        })}
-      </Flex>
-    </section>
-  );
-}
diff --git a/web/src/pages/flow/canvas/node/card.tsx b/web/src/pages/flow/canvas/node/card.tsx
deleted file mode 100644
index 042ca45e0..000000000
--- a/web/src/pages/flow/canvas/node/card.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-
-export function CardWithForm() {
-  return (
-    <Card className="w-[350px]">
-      <CardHeader>
-        <CardTitle>Create project</CardTitle>
-        <CardDescription>Deploy your new project in one-click.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form>
-          <div className="grid w-full items-center gap-4">
-            <div className="flex flex-col space-y-1.5">
-              <Label htmlFor="name">Name</Label>
-              <Input id="name" placeholder="Name of your project" />
-            </div>
-            <div className="flex flex-col space-y-1.5">
-              <Label htmlFor="framework">Framework</Label>
-              <Select>
-                <SelectTrigger id="framework">
-                  <SelectValue placeholder="Select" />
-                </SelectTrigger>
-                <SelectContent position="popper">
-                  <SelectItem value="next">Next.js</SelectItem>
-                  <SelectItem value="sveltekit">SvelteKit</SelectItem>
-                  <SelectItem value="astro">Astro</SelectItem>
-                  <SelectItem value="nuxt">Nuxt.js</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
-        </form>
-      </CardContent>
-      <CardFooter className="flex justify-between">
-        <Button variant="outline">Cancel</Button>
-        <Button>Deploy</Button>
-      </CardFooter>
-    </Card>
-  );
-}
diff --git a/web/src/pages/flow/canvas/node/categorize-handle.tsx b/web/src/pages/flow/canvas/node/categorize-handle.tsx
deleted file mode 100644
index ce1fc3624..000000000
--- a/web/src/pages/flow/canvas/node/categorize-handle.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Handle, Position } from '@xyflow/react';
-
-import React from 'react';
-import styles from './index.less';
-
-const DEFAULT_HANDLE_STYLE = {
-  width: 6,
-  height: 6,
-  bottom: -5,
-  fontSize: 8,
-};
-
-interface IProps extends React.PropsWithChildren {
-  top: number;
-  right: number;
-  id: string;
-  idx?: number;
-}
-
-const CategorizeHandle = ({ top, right, id, children }: IProps) => {
-  return (
-    <Handle
-      type="source"
-      position={Position.Right}
-      id={id}
-      isConnectable
-      style={{
-        ...DEFAULT_HANDLE_STYLE,
-        top: `${top}%`,
-        right: `${right}%`,
-        background: 'red',
-        color: 'black',
-      }}
-    >
-      <span className={styles.categorizeAnchorPointText}>{children || id}</span>
-    </Handle>
-  );
-};
-
-export default CategorizeHandle;
diff --git a/web/src/pages/flow/canvas/node/categorize-node.tsx b/web/src/pages/flow/canvas/node/categorize-node.tsx
deleted file mode 100644
index 18c3cdff0..000000000
--- a/web/src/pages/flow/canvas/node/categorize-node.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import LLMLabel from '@/components/llm-select/llm-label';
-import { useTheme } from '@/components/theme-provider';
-import { ICategorizeNode } from '@/interfaces/database/flow';
-import { Handle, NodeProps, Position } from '@xyflow/react';
-import { Flex } from 'antd';
-import classNames from 'classnames';
-import { get } from 'lodash';
-import { RightHandleStyle } from './handle-icon';
-import { useBuildCategorizeHandlePositions } from './hooks';
-import styles from './index.less';
-import NodeHeader from './node-header';
-
-export function CategorizeNode({
-  id,
-  data,
-  selected,
-}: NodeProps<ICategorizeNode>) {
-  const { positions } = useBuildCategorizeHandlePositions({ data, id });
-  const { theme } = useTheme();
-  return (
-    <section
-      className={classNames(
-        styles.logicNode,
-        theme === 'dark' ? styles.dark : '',
-        {
-          [styles.selectedNode]: selected,
-        },
-      )}
-    >
-      <Handle
-        type="target"
-        position={Position.Left}
-        isConnectable
-        className={styles.handle}
-        id={'a'}
-      ></Handle>
-
-      <NodeHeader
-        id={id}
-        name={data.name}
-        label={data.label}
-        className={styles.nodeHeader}
-      ></NodeHeader>
-
-      <Flex vertical gap={8}>
-        <div className={styles.nodeText}>
-          <LLMLabel value={get(data, 'form.llm_id')}></LLMLabel>
-        </div>
-        {positions.map((position, idx) => {
-          return (
-            <div key={idx}>
-              <div className={styles.nodeText}>{position.text}</div>
-              <Handle
-                key={position.text}
-                id={position.text}
-                type="source"
-                position={Position.Right}
-                isConnectable
-                className={styles.handle}
-                style={{ ...RightHandleStyle, top: position.top }}
-              ></Handle>
-            </div>
-          );
-        })}
-      </Flex>
-    </section>
-  );
-}
diff --git a/web/src/pages/flow/canvas/node/dropdown.tsx b/web/src/pages/flow/canvas/node/dropdown.tsx
deleted file mode 100644
index dd5263abc..000000000
--- a/web/src/pages/flow/canvas/node/dropdown.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import OperateDropdown from '@/components/operate-dropdown';
-import { CopyOutlined } from '@ant-design/icons';
-import { Flex, MenuProps } from 'antd';
-import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Operator } from '../../constant';
-import { useDuplicateNode } from '../../hooks';
-import useGraphStore from '../../store';
-
-interface IProps {
-  id: string;
-  iconFontColor?: string;
-  label: string;
-}
-
-const NodeDropdown = ({ id, iconFontColor, label }: IProps) => {
-  const { t } = useTranslation();
-  const deleteNodeById = useGraphStore((store) => store.deleteNodeById);
-  const deleteIterationNodeById = useGraphStore(
-    (store) => store.deleteIterationNodeById,
-  );
-
-  const deleteNode = useCallback(() => {
-    if (label === Operator.Iteration) {
-      deleteIterationNodeById(id);
-    } else {
-      deleteNodeById(id);
-    }
-  }, [label, deleteIterationNodeById, id, deleteNodeById]);
-
-  const duplicateNode = useDuplicateNode();
-
-  const items: MenuProps['items'] = [
-    {
-      key: '2',
-      onClick: () => duplicateNode(id, label),
-      label: (
-        <Flex justify={'space-between'}>
-          {t('common.copy')}
-          <CopyOutlined />
-        </Flex>
-      ),
-    },
-  ];
-
-  return (
-    <OperateDropdown
-      iconFontSize={22}
-      height={14}
-      deleteItem={deleteNode}
-      items={items}
-      needsDeletionValidation={false}
-      iconFontColor={iconFontColor}
-    ></OperateDropdown>
-  );
-};
-
-export default NodeDropdown;
diff --git a/web/src/pages/flow/canvas/node/email-node.tsx b/web/src/pages/flow/canvas/node/email-node.tsx
deleted file mode 100644
index ae4af848c..000000000
--- a/web/src/pages/flow/canvas/node/email-node.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { IEmailNode } from '@/interfaces/database/flow';
-import { Handle, NodeProps, Position } from '@xyflow/react';
-import { Flex } from 'antd';
-import classNames from 'classnames';
-import { useState } from 'react';
-import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
-import styles from './index.less';
-import NodeHeader from './node-header';
-
-export function EmailNode({
-  id,
-  data,
-  isConnectable = true,
-  selected,
-}: NodeProps<IEmailNode>) {
-  const [showDetails, setShowDetails] = useState(false);
-
-  return (
-    <section
-      className={classNames(styles.ragNode, {
-        [styles.selectedNode]: selected,
-      })}
-    >
-      <Handle
-        id="c"
-        type="source"
-        position={Position.Left}
-        isConnectable={isConnectable}
-        className={styles.handle}
-        style={LeftHandleStyle}
-      ></Handle>
-      <Handle
-        type="source"
-        position={Position.Right}
-        isConnectable={isConnectable}
-        className={styles.handle}
-        style={RightHandleStyle}
-        id="b"
-      ></Handle>
-      <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
-
-      <Flex vertical gap={8} className={styles.emailNodeContainer}>
-        <div
-          className={styles.emailConfig}
-          onClick={() => setShowDetails(!showDetails)}
-        >
-          <div className={styles.configItem}>
-            <span className={styles.configLabel}>SMTP:</span>
-            <span className={styles.configValue}>{data.form?.smtp_server}</span>
-          </div>
-          <div className={styles.configItem}>
-            <span className={styles.configLabel}>Port:</span>
-            <span className={styles.configValue}>{data.form?.smtp_port}</span>
-          </div>
-          <div className={styles.configItem}>
-            <span className={styles.configLabel}>From:</span>
-            <span className={styles.configValue}>{data.form?.email}</span>
-          </div>
-          <div className={styles.expandIcon}>{showDetails ? '▼' : '▶'}</div>
-        </div>
-
-        {showDetails && (
-          <div className={styles.jsonExample}>
-            <div className={styles.jsonTitle}>Expected Input JSON:</div>
-            <pre className={styles.jsonContent}>
-              {`{
-  "to_email": "...",
-  "cc_email": "...", 
-  "subject": "...",
-  "content": "..."
-}`}
-            </pre>
-          </div>
-        )}
-      </Flex>
-    </section>
-  );
-}
diff --git a/web/src/pages/flow/canvas/node/generate-node.tsx b/web/src/pages/flow/canvas/node/generate-node.tsx
deleted file mode 100644
index 255eccd99..000000000
--- a/web/src/pages/flow/canvas/node/generate-node.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import LLMLabel from '@/components/llm-select/llm-label';
-import { useTheme } from '@/components/theme-provider';
-import { IGenerateNode } from '@/interfaces/database/flow';
-import { Handle, NodeProps, Position } from '@xyflow/react';
-import classNames from 'classnames';
-import { get } from 'lodash';
-import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
-import styles from './index.less';
-import NodeHeader from './node-header';
-
-export function GenerateNode({
-  id,
-  data,
-  isConnectable = true,
-  selected,
-}: NodeProps<IGenerateNode>) {
-  const { theme } = useTheme();
-  return (
-    <section
-      className={classNames(
-        styles.logicNode,
-        theme === 'dark' ? styles.dark : '',
-        {
-          [styles.selectedNode]: selected,
-        },
-      )}
-    >
-      <Handle
-        id="c"
-        type="source"
-        position={Position.Left}
-        isConnectable={isConnectable}
-        className={styles.handle}
-        style={LeftHandleStyle}
-      ></Handle>
-      <Handle
-        type="source"
-        position={Position.Right}
-        isConnectable={isConnectable}
-        className={styles.handle}
-        style={RightHandleStyle}
-        id="b"
-      ></Handle>
-
-      <NodeHeader
-        id={id}
-        name={data.name}
-        label={data.label}
-        className={styles.nodeHeader}
-      ></NodeHeader>
-
-      <div className={styles.nodeText}>
-        <LLMLabel value={get(data, 'form.llm_id')}></LLMLabel>
-      </div>
-    </section>
-  );
-}
diff --git a/web/src/pages/flow/canvas/node/handle-icon.tsx b/web/src/pages/flow/canvas/node/handle-icon.tsx
deleted file mode 100644
index 36c7f3634..000000000
--- a/web/src/pages/flow/canvas/node/handle-icon.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { PlusOutlined } from '@ant-design/icons';
-import { CSSProperties } from 'react';
-
-export const HandleIcon = () => {
-  return (
-    <PlusOutlined
-      style={{ fontSize: 6, color: 'white', position: 'absolute', zIndex: 10 }}
-    />
-  );
-};
-
-export const RightHandleStyle: CSSProperties = {
-  right: 0,
-};
-
-export const LeftHandleStyle: CSSProperties = {
-  left: 0,
-};
-
-export default HandleIcon;
diff --git a/web/src/pages/flow/canvas/node/hooks.ts b/web/src/pages/flow/canvas/node/hooks.ts
deleted file mode 100644
index fbea8f166..000000000
--- a/web/src/pages/flow/canvas/node/hooks.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import { useUpdateNodeInternals } from '@xyflow/react';
-import get from 'lodash/get';
-import { useEffect, useMemo } from 'react';
-import { SwitchElseTo } from '../../constant';
-
-import {
-  ICategorizeItemResult,
-  ISwitchCondition,
-  RAGFlowNodeType,
-} from '@/interfaces/database/flow';
-import { generateSwitchHandleText } from '../../utils';
-
-export const useBuildCategorizeHandlePositions = ({
-  data,
-  id,
-}: {
-  id: string;
-  data: RAGFlowNodeType['data'];
-}) => {
-  const updateNodeInternals = useUpdateNodeInternals();
-
-  const categoryData: ICategorizeItemResult = useMemo(() => {
-    return get(data, `form.category_description`, {});
-  }, [data]);
-
-  const positions = useMemo(() => {
-    const list: Array<{
-      text: string;
-      top: number;
-      idx: number;
-    }> = [];
-
-    Object.keys(categoryData)
-      .sort((a, b) => categoryData[a].index - categoryData[b].index)
-      .forEach((x, idx) => {
-        list.push({
-          text: x,
-          idx,
-          top: idx === 0 ? 98 + 20 : list[idx - 1].top + 8 + 26,
-        });
-      });
-
-    return list;
-  }, [categoryData]);
-
-  useEffect(() => {
-    updateNodeInternals(id);
-  }, [id, updateNodeInternals, categoryData]);
-
-  return { positions };
-};
-
-export const useBuildSwitchHandlePositions = ({
-  data,
-  id,
-}: {
-  id: string;
-  data: RAGFlowNodeType['data'];
-}) => {
-  const updateNodeInternals = useUpdateNodeInternals();
-
-  const conditions: ISwitchCondition[] = useMemo(() => {
-    return get(data, 'form.conditions', []);
-  }, [data]);
-
-  const positions = useMemo(() => {
-    const list: Array<{
-      text: string;
-      top: number;
-      idx: number;
-      condition?: ISwitchCondition;
-    }> = [];
-
-    [...conditions, ''].forEach((x, idx) => {
-      let top = idx === 0 ? 58 + 20 : list[idx - 1].top + 32; // case number (Case 1) height + flex gap
-      if (idx - 1 >= 0) {
-        const previousItems = conditions[idx - 1]?.items ?? [];
-        if (previousItems.length > 0) {
-          top += 12; // ConditionBlock padding
-          top += previousItems.length * 22; // condition variable height
-          top += (previousItems.length - 1) * 25; // operator height
-        }
-      }
-
-      list.push({
-        text:
-          idx < conditions.length
-            ? generateSwitchHandleText(idx)
-            : SwitchElseTo,
-        idx,
-        top,
-        condition: typeof x === 'string' ? undefined : x,
-      });
-    });
-
-    return list;
-  }, [conditions]);
-
-  useEffect(() => {
-    updateNodeInternals(id);
-  }, [id, updateNodeInternals, conditions]);
-
-  return { positions };
-};
diff --git a/web/src/pages/flow/canvas/node/index.less b/web/src/pages/flow/canvas/node/index.less
deleted file mode 100644
index 14d7e6077..000000000
--- a/web/src/pages/flow/canvas/node/index.less
+++ /dev/null
@@ -1,285 +0,0 @@
-.dark {
-  background: rgb(63, 63, 63) !important;
-}
-.ragNode {
-  .commonNode();
-  .nodeName {
-    font-size: 10px;
-    color: black;
-  }
-  label {
-    display: block;
-    color: #777;
-    font-size: 12px;
-  }
-  .description {
-    font-size: 10px;
-  }
-
-  .categorizeAnchorPointText {
-    position: absolute;
-    top: -4px;
-    left: 8px;
-    white-space: nowrap;
-  }
-}
-
-@lightBackgroundColor: rgba(150, 150, 150, 0.1);
-@darkBackgroundColor: rgba(150, 150, 150, 0.2);
-
-.selectedNode {
-  border: 1.5px solid rgb(59, 118, 244);
-}
-
-.selectedIterationNode {
-  border-bottom: 1.5px solid rgb(59, 118, 244);
-  border-left: 1.5px solid rgb(59, 118, 244);
-  border-right: 1.5px solid rgb(59, 118, 244);
-}
-
-.iterationHeader {
-  .commonNodeShadow();
-}
-
-.selectedHeader {
-  border-top: 1.9px solid rgb(59, 118, 244);
-  border-left: 1.9px solid rgb(59, 118, 244);
-  border-right: 1.9px solid rgb(59, 118, 244);
-}
-
-.handle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 12px;
-  height: 12px;
-  background: rgb(59, 88, 253);
-  border: 1px solid white;
-  z-index: 1;
-  background-image: url('@/assets/svg/plus.svg');
-  background-size: cover;
-  background-position: center;
-}
-
-.jsonView {
-  word-wrap: break-word;
-  overflow: auto;
-  max-width: 300px;
-  max-height: 500px;
-}
-
-.logicNode {
-  .commonNode();
-
-  .nodeName {
-    font-size: 10px;
-    color: black;
-  }
-  label {
-    display: block;
-    color: #777;
-    font-size: 12px;
-  }
-
-  .description {
-    font-size: 10px;
-  }
-
-  .categorizeAnchorPointText {
-    position: absolute;
-    top: -4px;
-    left: 8px;
-    white-space: nowrap;
-  }
-  .relevantSourceLabel {
-    font-size: 10px;
-  }
-}
-
-.noteNode {
-  .commonNode();
-  min-width: 140px;
-  width: auto;
-  height: 100%;
-  padding: 8px;
-  border-radius: 10px;
-  min-height: 128px;
-  .noteTitle {
-    background-color: #edfcff;
-    font-size: 12px;
-    padding: 6px 6px 4px;
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-  }
-  .noteTitleDark {
-    background-color: #edfcff;
-    font-size: 12px;
-    padding: 6px 6px 4px;
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-  }
-  .noteForm {
-    margin-top: 4px;
-    height: calc(100% - 50px);
-  }
-  .noteName {
-    padding: 0px 4px;
-  }
-  .noteTextarea {
-    resize: none;
-    border: 0;
-    border-radius: 0;
-    height: 100%;
-    &:focus {
-      border: none;
-      box-shadow: none;
-    }
-  }
-}
-
-.iterationNode {
-  .commonNodeShadow();
-  border-bottom-left-radius: 10px;
-  border-bottom-right-radius: 10px;
-}
-
-.nodeText {
-  padding-inline: 0.4em;
-  padding-block: 0.2em 0.1em;
-  background: @lightBackgroundColor;
-  border-radius: 3px;
-  min-height: 22px;
-  .textEllipsis();
-}
-
-.nodeHeader {
-  padding-bottom: 12px;
-}
-
-.zeroDivider {
-  margin: 0 !important;
-}
-
-.conditionBlock {
-  border-radius: 4px;
-  padding: 6px;
-  background: @lightBackgroundColor;
-}
-
-.conditionLine {
-  border-radius: 4px;
-  padding: 0 4px;
-  background: @darkBackgroundColor;
-  .textEllipsis();
-}
-
-.conditionKey {
-  flex: 1;
-}
-
-.conditionOperator {
-  padding: 0 2px;
-  text-align: center;
-}
-
-.relevantLabel {
-  text-align: right;
-}
-
-.knowledgeNodeName {
-  .textEllipsis();
-}
-
-.messageNodeContainer {
-  overflow-y: auto;
-  max-height: 300px;
-}
-
-.generateParameters {
-  padding-top: 8px;
-  label {
-    flex: 2;
-    .textEllipsis();
-  }
-  .parameterValue {
-    flex: 3;
-    .conditionLine;
-  }
-}
-
-.emailNodeContainer {
-  padding: 8px;
-  font-size: 12px;
-
-  .emailConfig {
-    background: rgba(0, 0, 0, 0.02);
-    border-radius: 4px;
-    padding: 8px;
-    position: relative;
-    cursor: pointer;
-
-    &:hover {
-      background: rgba(0, 0, 0, 0.04);
-    }
-
-    .configItem {
-      display: flex;
-      align-items: center;
-      margin-bottom: 4px;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-
-      .configLabel {
-        color: #666;
-        width: 45px;
-        flex-shrink: 0;
-      }
-
-      .configValue {
-        color: #333;
-        word-break: break-all;
-      }
-    }
-
-    .expandIcon {
-      position: absolute;
-      right: 8px;
-      top: 50%;
-      transform: translateY(-50%);
-      color: #666;
-      font-size: 12px;
-    }
-  }
-
-  .jsonExample {
-    background: #f5f5f5;
-    border-radius: 4px;
-    padding: 8px;
-    margin-top: 4px;
-    animation: slideDown 0.2s ease-out;
-
-    .jsonTitle {
-      color: #666;
-      margin-bottom: 4px;
-    }
-
-    .jsonContent {
-      margin: 0;
-      color: #333;
-      font-family: monospace;
-    }
-  }
-}
-
-@keyframes slideDown {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
diff --git a/web/src/pages/flow/canvas/node/index.tsx b/web/src/pages/flow/canvas/node/index.tsx
deleted file mode 100644
index 32191f5cc..000000000
--- a/web/src/pages/flow/canvas/node/index.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { useTheme } from '@/components/theme-provider';
-import { IRagNode } from '@/interfaces/database/flow';
-import { Handle, NodeProps, Position } from '@xyflow/react';
-import classNames from 'classnames';
-import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
-import styles from './index.less';
-import NodeHeader from './node-header';
-
-export function RagNode({
-  id,
-  data,
-  isConnectable = true,
-  selected,
-}: NodeProps<IRagNode>) {
-  const { theme } = useTheme();
-  return (
-    <section
-      className={classNames(
-        styles.ragNode,
-        theme === 'dark' ? styles.dark : '',
-        {
-          [styles.selectedNode]: selected,
-        },
-      )}
-    >
-      <Handle
-        id="c"
-        type="source"
-        position={Position.Left}
-        isConnectable={isConnectable}
-        className={styles.handle}
-        style={LeftHandleStyle}
-      ></Handle>
-      <Handle
-        type="source"
-        position={Position.Right}
-        isConnectable={isConnectable}
-        className={styles.handle}
-        id="b"
-        style={RightHandleStyle}
-      ></Handle>
-      <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
-    </section>
-  );
-}
diff --git a/web/src/pages/flow/canvas/node/invoke-node.tsx b/web/src/pages/flow/canvas/node/invoke-node.tsx
deleted file mode 100644
index 42d109f3d..000000000
--- a/web/src/pages/flow/canvas/node/invoke-node.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { useTheme } from '@/components/theme-provider';
-import { IInvokeNode } from '@/interfaces/database/flow';
-import { Handle, NodeProps, Position } from '@xyflow/react';
-import { Flex } from 'antd';
-import classNames from 'classnames';
-import { get } from 'lodash';
-import { useTranslation } from 'react-i18next';
-import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
-import styles from './index.less';
-import NodeHeader from './node-header';
-
-export function InvokeNode({
-  id,
-  data,
-  isConnectable = true,
-  selected,
-}: NodeProps<IInvokeNode>) {
-  const { t } = useTranslation();
-  const { theme } = useTheme();
-  const url = get(data, 'form.url');
-  return (
-    <section
-      className={classNames(
-        styles.ragNode,
-        theme === 'dark' ? styles.dark : '',
-        {
-          [styles.selectedNode]: selected,
-        },
-      )}
-    >
-      <Handle
-        id="c"
-        type="source"
-        position={Position.Left}
-        isConnectable={isConnectable}
-        className={styles.handle}
-        style={LeftHandleStyle}
-      ></Handle>
-      <Handle
-        type="source"
-        position={Position.Right}
-        isConnectable={isConnectable}
-        className={styles.handle}
-        id="b"
-        style={RightHandleStyle}
-      ></Handle>
-      <NodeHeader
-        id={id}
-        name={data.name}
-        label={data.label}
-        className={styles.nodeHeader}
-      ></NodeHeader>
-      <Flex vertical>
-        <div>{t('flow.url')}</div>
-        <div className={styles.nodeText}>{url}</div>
-      </Flex>
-    </section>
-  );
-}
diff --git a/web/src/pages/flow/canvas/node/iteration-node.tsx b/web/src/pages/flow/canvas/node/iteration-node.tsx
deleted file mode 100644
index c15b4fc6c..000000000
--- a/web/src/pages/flow/canvas/node/iteration-node.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import { useTheme } from '@/components/theme-provider';
-import {
-  IIterationNode,
-  IIterationStartNode,
-} from '@/interfaces/database/flow';
-import { cn } from '@/lib/utils';
-import { Handle, NodeProps, NodeResizeControl, Position } from '@xyflow/react';
-import { ListRestart } from 'lucide-react';
-import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
-import styles from './index.less';
-import NodeHeader from './node-header';
-
-function ResizeIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="#5025f9"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      style={{
-        position: 'absolute',
-        right: 5,
-        bottom: 5,
-      }}
-    >
-      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-      <polyline points="16 20 20 20 20 16" />
-      <line x1="14" y1="14" x2="20" y2="20" />
-      <polyline points="8 4 4 4 4 8" />
-      <line x1="4" y1="4" x2="10" y2="10" />
-    </svg>
-  );
-}
-
-const controlStyle = {
-  background: 'transparent',
-  border: 'none',
-  cursor: 'nwse-resize',
-};
-
-export function IterationNode({
-  id,
-  data,
-  isConnectable = true,
-  selected,
-}: NodeProps<IIterationNode>) {
-  const { theme } = useTheme();
-
-  return (
-    <section
-      className={cn(
-        'w-full h-full bg-zinc-200 opacity-70',
-        styles.iterationNode,
-        {
-          ['bg-gray-800']: theme === 'dark',
-          [styles.selectedIterationNode]: selected,
-        },
-      )}
-    >
-      <NodeResizeControl style={controlStyle} minWidth={100} minHeight={50}>
-        <ResizeIcon />
-      </NodeResizeControl>
-      <Handle
-        id="c"
-        type="source"
-        position={Position.Left}
-        isConnectable={isConnectable}
-        className={styles.handle}
-        style={LeftHandleStyle}
-      ></Handle>
-      <Handle
-        type="source"
-        position={Position.Right}
-        isConnectable={isConnectable}
-        className={styles.handle}
-        id="b"
-        style={RightHandleStyle}
-      ></Handle>
-      <NodeHeader
-        id={id}
-        name={data.name}
-        label={data.label}
-        wrapperClassName={cn(
-          'p-2 bg-white rounded-t-[10px] absolute w-full top-[-60px] left-[-0.3px]',
-          styles.iterationHeader,
-          {
-            [`${styles.dark} text-white`]: theme === 'dark',
-            [styles.selectedHeader]: selected,
-          },
-        )}
-      ></NodeHeader>
-    </section>
-  );
-}
-
-export function IterationStartNode({
-  isConnectable = true,
-  selected,
-}: NodeProps<IIterationStartNode>) {
-  const { theme } = useTheme();
-
-  return (
-    <section
-      className={cn('bg-white p-2 rounded-xl', {
-        [styles.dark]: theme === 'dark',
-        [styles.selectedNode]: selected,
-      })}
-    >
-      <Handle
-        type="source"
-        position={Position.Right}
-        isConnectable={isConnectable}
-        className={styles.handle}
-        style={RightHandleStyle}
-        isConnectableEnd={false}
-      ></Handle>
-      <div>
-        <ListRestart className="size-7" />
-      </div>
-    </section>
-  );
-}
diff --git a/web/src/pages/flow/canvas/node/keyword-node.tsx b/web/src/pages/flow/canvas/node/keyword-node.tsx
deleted file mode 100644
index f607d4317..000000000
--- a/web/src/pages/flow/canvas/node/keyword-node.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import LLMLabel from '@/components/llm-select/llm-label';
-import { useTheme } from '@/components/theme-provider';
-import { IKeywordNode } from '@/interfaces/database/flow';
-import { Handle, NodeProps, Position } from '@xyflow/react';
-import classNames from 'classnames';
-import { get } from 'lodash';
-import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
-import styles from './index.less';
-import NodeHeader from './node-header';
-
-export function KeywordNode({
-  id,
-  data,
-  isConnectable = true,
-  selected,
-}: NodeProps<IKeywordNode>) {
-  const { theme } = useTheme();
-  return (
-    <section
-      className={classNames(
-        styles.logicNode,
-        theme === 'dark' ? styles.dark : '',
-        {
-          [styles.selectedNode]: selected,
-        },
-      )}
-    >
-      <Handle
-        id="c"
-        type="source"
-        position={Position.Left}
-        isConnectable={isConnectable}
-        className={styles.handle}
-        style={LeftHandleStyle}
-      ></Handle>
-      <Handle
-        type="source"
-        position={Position.Right}
-        isConnectable={isConnectable}
-        className={styles.handle}
-        style={RightHandleStyle}
-        id="b"
-      ></Handle>
-
-      <NodeHeader
-        id={id}
-        name={data.name}
-        label={data.label}
-        className={styles.nodeHeader}
-      ></NodeHeader>
-
-      <div className={styles.nodeText}>
-        <LLMLabel value={get(data, 'form.llm_id')}></LLMLabel>
-      </div>
-    </section>
-  );
-}
diff --git a/web/src/pages/flow/canvas/node/logic-node.tsx b/web/src/pages/flow/canvas/node/logic-node.tsx
deleted file mode 100644
index 28215617b..000000000
--- a/web/src/pages/flow/canvas/node/logic-node.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { useTheme } from '@/components/theme-provider';
-import { ILogicNode } from '@/interfaces/database/flow';
-import { Handle, NodeProps, Position } from '@xyflow/react';
-import classNames from 'classnames';
-import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
-import styles from './index.less';
-import NodeHeader from './node-header';
-
-export function LogicNode({
-  id,
-  data,
-  isConnectable = true,
-  selected,
-}: NodeProps<ILogicNode>) {
-  const { theme } = useTheme();
-  return (
-    <section
-      className={classNames(
-        styles.logicNode,
-        theme === 'dark' ? styles.dark : '',
-        {
-          [styles.selectedNode]: selected,
-        },
-      )}
-    >
-      <Handle
-        id="c"
-        type="source"
-        position={Position.Left}
-        isConnectable={isConnectable}
-        className={styles.handle}
-        style={LeftHandleStyle}
-      ></Handle>
-      <Handle
-        type="source"
-        position={Position.Right}
-        isConnectable={isConnectable}
-        className={styles.handle}
-        style={RightHandleStyle}
-        id="b"
-      ></Handle>
-      <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
-    </section>
-  );
-}
diff --git a/web/src/pages/flow/canvas/node/message-node.tsx b/web/src/pages/flow/canvas/node/message-node.tsx
deleted file mode 100644
index 5b3a1736e..000000000
--- a/web/src/pages/flow/canvas/node/message-node.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { useTheme } from '@/components/theme-provider';
-import { IMessageNode } from '@/interfaces/database/flow';
-import { Handle, NodeProps, Position } from '@xyflow/react';
-import { Flex } from 'antd';
-import classNames from 'classnames';
-import { get } from 'lodash';
-import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
-import styles from './index.less';
-import NodeHeader from './node-header';
-
-export function MessageNode({
-  id,
-  data,
-  isConnectable = true,
-  selected,
-}: NodeProps<IMessageNode>) {
-  const messages: string[] = get(data, 'form.messages', []);
-  const { theme } = useTheme();
-  return (
-    <section
-      className={classNames(
-        styles.logicNode,
-        theme === 'dark' ? styles.dark : '',
-        {
-          [styles.selectedNode]: selected,
-        },
-      )}
-    >
-      <Handle
-        id="c"
-        type="source"
-        position={Position.Left}
-        isConnectable={isConnectable}
-        className={styles.handle}
-        style={LeftHandleStyle}
-      ></Handle>
-      <Handle
-        type="source"
-        position={Position.Right}
-        isConnectable={isConnectable}
-        className={styles.handle}
-        style={RightHandleStyle}
-        id="b"
-      ></Handle>
-      <NodeHeader
-        id={id}
-        name={data.name}
-        label={data.label}
-        className={classNames({
-          [styles.nodeHeader]: messages.length > 0,
-        })}
-      ></NodeHeader>
-
-      <Flex vertical gap={8} className={styles.messageNodeContainer}>
-        {messages.map((message, idx) => {
-          return (
-            <div className={styles.nodeText} key={idx}>
-              {message}
-            </div>
-          );
-        })}
-      </Flex>
-    </section>
-  );
-}
diff --git a/web/src/pages/flow/canvas/node/node-header.tsx b/web/src/pages/flow/canvas/node/node-header.tsx
deleted file mode 100644
index 99a37dc1e..000000000
--- a/web/src/pages/flow/canvas/node/node-header.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { useTranslate } from '@/hooks/common-hooks';
-import { Flex } from 'antd';
-import { Play } from 'lucide-react';
-import { Operator, operatorMap } from '../../constant';
-import OperatorIcon from '../../operator-icon';
-import { needsSingleStepDebugging } from '../../utils';
-import NodeDropdown from './dropdown';
-import { NextNodePopover } from './popover';
-
-import { RunTooltip } from '../../flow-tooltip';
-interface IProps {
-  id: string;
-  label: string;
-  name: string;
-  gap?: number;
-  className?: string;
-  wrapperClassName?: string;
-}
-
-const ExcludedRunStateOperators = [Operator.Answer];
-
-export function RunStatus({ id, name, label }: IProps) {
-  const { t } = useTranslate('flow');
-  return (
-    <section className="flex  justify-end items-center pb-1 gap-2 text-blue-600">
-      {needsSingleStepDebugging(label) && (
-        <RunTooltip>
-          <Play className="size-3 cursor-pointer" data-play />
-        </RunTooltip> // data-play is used to trigger single step debugging
-      )}
-      <NextNodePopover nodeId={id} name={name}>
-        <span className="cursor-pointer text-[10px]">
-          {t('operationResults')}
-        </span>
-      </NextNodePopover>
-    </section>
-  );
-}
-
-const NodeHeader = ({
-  label,
-  id,
-  name,
-  gap = 4,
-  className,
-  wrapperClassName,
-}: IProps) => {
-  return (
-    <section className={wrapperClassName}>
-      {!ExcludedRunStateOperators.includes(label as Operator) && (
-        <RunStatus id={id} name={name} label={label}></RunStatus>
-      )}
-      <Flex
-        flex={1}
-        align="center"
-        justify={'space-between'}
-        gap={gap}
-        className={className}
-      >
-        <OperatorIcon
-          name={label as Operator}
-          color={operatorMap[label as Operator]?.color}
-        ></OperatorIcon>
-        <span className="truncate text-center font-semibold text-sm">
-          {name}
-        </span>
-        <NodeDropdown id={id} label={label}></NodeDropdown>
-      </Flex>
-    </section>
-  );
-};
-
-export default NodeHeader;
diff --git a/web/src/pages/flow/canvas/node/note-node.tsx b/web/src/pages/flow/canvas/node/note-node.tsx
deleted file mode 100644
index 1917a8150..000000000
--- a/web/src/pages/flow/canvas/node/note-node.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { NodeProps, NodeResizeControl } from '@xyflow/react';
-import { Flex, Form, Input } from 'antd';
-import classNames from 'classnames';
-import NodeDropdown from './dropdown';
-
-import SvgIcon from '@/components/svg-icon';
-import { useTheme } from '@/components/theme-provider';
-import { INoteNode } from '@/interfaces/database/flow';
-import { memo, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  useHandleFormValuesChange,
-  useHandleNodeNameChange,
-} from '../../hooks';
-import styles from './index.less';
-
-const { TextArea } = Input;
-
-const controlStyle = {
-  background: 'transparent',
-  border: 'none',
-};
-
-function NoteNode({ data, id }: NodeProps<INoteNode>) {
-  const { t } = useTranslation();
-  const [form] = Form.useForm();
-  const { theme } = useTheme();
-
-  const { name, handleNameBlur, handleNameChange } = useHandleNodeNameChange({
-    id,
-    data,
-  });
-  const { handleValuesChange } = useHandleFormValuesChange(id);
-
-  useEffect(() => {
-    form.setFieldsValue(data?.form);
-  }, [form, data?.form]);
-
-  return (
-    <>
-      <NodeResizeControl style={controlStyle} minWidth={190} minHeight={128}>
-        <SvgIcon
-          name="resize"
-          width={12}
-          style={{
-            position: 'absolute',
-            right: 5,
-            bottom: 5,
-            cursor: 'nwse-resize',
-          }}
-        ></SvgIcon>
-      </NodeResizeControl>
-      <section
-        className={classNames(
-          styles.noteNode,
-          theme === 'dark' ? styles.dark : '',
-        )}
-      >
-        <Flex
-          justify={'space-between'}
-          className={classNames('note-drag-handle')}
-          align="center"
-          gap={6}
-        >
-          <SvgIcon name="note" width={14}></SvgIcon>
-          <Input
-            value={name ?? t('flow.note')}
-            onBlur={handleNameBlur}
-            onChange={handleNameChange}
-            className={styles.noteName}
-          ></Input>
-          <NodeDropdown id={id} label={data.label}></NodeDropdown>
-        </Flex>
-        <Form
-          onValuesChange={handleValuesChange}
-          form={form}
-          className={styles.noteForm}
-        >
-          <Form.Item name="text" noStyle>
-            <TextArea
-              rows={3}
-              placeholder={t('flow.notePlaceholder')}
-              className={styles.noteTextarea}
-            />
-          </Form.Item>
-        </Form>
-      </section>
-    </>
-  );
-}
-
-export default memo(NoteNode);
diff --git a/web/src/pages/flow/canvas/node/popover.tsx b/web/src/pages/flow/canvas/node/popover.tsx
deleted file mode 100644
index 871aa8064..000000000
--- a/web/src/pages/flow/canvas/node/popover.tsx
+++ /dev/null
@@ -1,313 +0,0 @@
-import { useFetchFlow } from '@/hooks/flow-hooks';
-import get from 'lodash/get';
-import React, {
-  MouseEventHandler,
-  useCallback,
-  useMemo,
-  useState,
-} from 'react';
-import JsonView from 'react18-json-view';
-import 'react18-json-view/src/style.css';
-import { useReplaceIdWithText } from '../../hooks';
-
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { useTranslate } from '@/hooks/common-hooks';
-import {
-  Button,
-  Card,
-  Col,
-  Input,
-  Row,
-  Space,
-  Tabs,
-  Typography,
-  message,
-} from 'antd';
-import { useGetComponentLabelByValue } from '../../hooks/use-get-begin-query';
-
-interface IProps extends React.PropsWithChildren {
-  nodeId: string;
-  name?: string;
-}
-
-export function NextNodePopover({ children, nodeId, name }: IProps) {
-  const { t } = useTranslate('flow');
-
-  const { data } = useFetchFlow();
-  console.log(data);
-
-  const component = useMemo(() => {
-    return get(data, ['dsl', 'components', nodeId], {});
-  }, [nodeId, data]);
-
-  const inputs: Array<{ component_id: string; content: string }> = get(
-    component,
-    ['obj', 'inputs'],
-    [],
-  );
-  const output = get(component, ['obj', 'output'], {});
-  const { conf, messages, prompt } = get(
-    component,
-    ['obj', 'params', 'infor'],
-    {},
-  );
-  const { replacedOutput } = useReplaceIdWithText(output);
-  const stopPropagation: MouseEventHandler = useCallback((e) => {
-    e.stopPropagation();
-  }, []);
-
-  const getLabel = useGetComponentLabelByValue(nodeId);
-
-  const [inputPage, setInputPage] = useState(1);
-  const pageSize = 3;
-  const pagedInputs = inputs.slice(
-    (inputPage - 1) * pageSize,
-    inputPage * pageSize,
-  );
-
-  return (
-    <Popover>
-      <PopoverTrigger onClick={stopPropagation} asChild>
-        {children}
-      </PopoverTrigger>
-      <PopoverContent
-        align={'start'}
-        side={'right'}
-        sideOffset={20}
-        onClick={stopPropagation}
-        className="w-[800px] p-4"
-        style={{ maxHeight: 600, overflow: 'auto' }}
-      >
-        <Card
-          bordered={false}
-          style={{ marginBottom: 16, padding: 0 }}
-          bodyStyle={{ padding: 0 }}
-        >
-          <Typography.Title
-            level={5}
-            style={{
-              marginBottom: 16,
-              fontWeight: 600,
-              fontSize: 18,
-              borderBottom: '1px solid #f0f0f0',
-              paddingBottom: 8,
-            }}
-          >
-            {name} {t('operationResults')}
-          </Typography.Title>
-        </Card>
-        <Tabs
-          defaultActiveKey="input"
-          items={[
-            {
-              key: 'input',
-              label: t('input'),
-              children: (
-                <Card
-                  size="small"
-                  className="bg-gray-50 dark:bg-gray-800"
-                  style={{ borderRadius: 8, border: '1px solid #e5e7eb' }}
-                  bodyStyle={{ padding: 16 }}
-                >
-                  <Table>
-                    <TableHeader>
-                      <TableRow>
-                        <TableHead>{t('componentId')}</TableHead>
-                        <TableHead className="w-[60px]">
-                          {t('content')}
-                        </TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {pagedInputs.map((x, idx) => (
-                        <TableRow key={idx + (inputPage - 1) * pageSize}>
-                          <TableCell>{getLabel(x.component_id)}</TableCell>
-                          <TableCell className="truncate">
-                            {x.content}
-                          </TableCell>
-                        </TableRow>
-                      ))}
-                    </TableBody>
-                  </Table>
-                  {/* Pagination */}
-                  {inputs.length > pageSize && (
-                    <Row justify="end" style={{ marginTop: 8 }}>
-                      <Space>
-                        <Button
-                          size="small"
-                          disabled={inputPage === 1}
-                          onClick={() => setInputPage(inputPage - 1)}
-                        >
-                          Prev
-                        </Button>
-                        <span className="mx-2 text-sm">
-                          {inputPage} / {Math.ceil(inputs.length / pageSize)}
-                        </span>
-                        <Button
-                          size="small"
-                          disabled={
-                            inputPage === Math.ceil(inputs.length / pageSize)
-                          }
-                          onClick={() => setInputPage(inputPage + 1)}
-                        >
-                          Next
-                        </Button>
-                      </Space>
-                    </Row>
-                  )}
-                </Card>
-              ),
-            },
-            {
-              key: 'output',
-              label: t('output'),
-              children: (
-                <Card
-                  size="small"
-                  className="bg-gray-50 dark:bg-gray-800"
-                  style={{ borderRadius: 8, border: '1px solid #e5e7eb' }}
-                  bodyStyle={{ padding: 16 }}
-                >
-                  <JsonView
-                    src={replacedOutput}
-                    displaySize={30}
-                    className="w-full max-h-[300px] break-words overflow-auto"
-                  />
-                </Card>
-              ),
-            },
-            {
-              key: 'infor',
-              label: t('infor'),
-              children: (
-                <Card
-                  size="small"
-                  className="bg-gray-50 dark:bg-gray-800"
-                  style={{ borderRadius: 8, border: '1px solid #e5e7eb' }}
-                  bodyStyle={{ padding: 16 }}
-                >
-                  <Row gutter={16}>
-                    <Col span={12}>
-                      {conf && (
-                        <Card
-                          size="small"
-                          bordered={false}
-                          style={{
-                            marginBottom: 16,
-                            background: 'transparent',
-                          }}
-                          bodyStyle={{ padding: 0 }}
-                        >
-                          <Typography.Text
-                            strong
-                            style={{
-                              color: '#888',
-                              marginBottom: 8,
-                              display: 'block',
-                            }}
-                          >
-                            Configuration:
-                          </Typography.Text>
-                          <JsonView
-                            src={conf}
-                            displaySize={30}
-                            className="w-full max-h-[120px] break-words overflow-auto"
-                          />
-                        </Card>
-                      )}
-                      {prompt && (
-                        <Card
-                          size="small"
-                          bordered={false}
-                          style={{ background: 'transparent' }}
-                          bodyStyle={{ padding: 0 }}
-                        >
-                          <Row
-                            align="middle"
-                            justify="space-between"
-                            style={{ marginBottom: 8 }}
-                          >
-                            <Col>
-                              <Typography.Text strong style={{ color: '#888' }}>
-                                Prompt:
-                              </Typography.Text>
-                            </Col>
-                            <Col>
-                              <Button
-                                size="small"
-                                onClick={() => {
-                                  const inlineString = prompt
-                                    .replace(/\s+/g, ' ')
-                                    .trim();
-                                  navigator.clipboard.writeText(inlineString);
-                                  message.success(
-                                    'Prompt copied as single line!',
-                                  );
-                                }}
-                              >
-                                Copy as single line
-                              </Button>
-                            </Col>
-                          </Row>
-                          <Input.TextArea
-                            value={prompt}
-                            readOnly
-                            autoSize={{ minRows: 2, maxRows: 6 }}
-                            className="bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700"
-                          />
-                        </Card>
-                      )}
-                    </Col>
-                    <Col span={12}>
-                      {messages && (
-                        <Card
-                          size="small"
-                          bordered={false}
-                          style={{
-                            marginBottom: 16,
-                            background: 'transparent',
-                          }}
-                          bodyStyle={{ padding: 0 }}
-                        >
-                          <Typography.Text
-                            strong
-                            style={{
-                              color: '#888',
-                              marginBottom: 8,
-                              display: 'block',
-                            }}
-                          >
-                            Messages:
-                          </Typography.Text>
-                          <div className="max-h-[300px] overflow-auto">
-                            <JsonView
-                              src={messages}
-                              displaySize={30}
-                              className="w-full break-words"
-                            />
-                          </div>
-                        </Card>
-                      )}
-                    </Col>
-                  </Row>
-                </Card>
-              ),
-            },
-          ]}
-        />
-      </PopoverContent>
-    </Popover>
-  );
-}
diff --git a/web/src/pages/flow/canvas/node/relevant-node.tsx b/web/src/pages/flow/canvas/node/relevant-node.tsx
deleted file mode 100644
index acc098d69..000000000
--- a/web/src/pages/flow/canvas/node/relevant-node.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Handle, NodeProps, Position } from '@xyflow/react';
-import { Flex } from 'antd';
-import classNames from 'classnames';
-import { RightHandleStyle } from './handle-icon';
-
-import { useTheme } from '@/components/theme-provider';
-import { IRelevantNode } from '@/interfaces/database/flow';
-import { get } from 'lodash';
-import { useReplaceIdWithName } from '../../hooks';
-import styles from './index.less';
-import NodeHeader from './node-header';
-
-export function RelevantNode({ id, data, selected }: NodeProps<IRelevantNode>) {
-  const yes = get(data, 'form.yes');
-  const no = get(data, 'form.no');
-  const replaceIdWithName = useReplaceIdWithName();
-  const { theme } = useTheme();
-  return (
-    <section
-      className={classNames(
-        styles.logicNode,
-        theme === 'dark' ? styles.dark : '',
-        {
-          [styles.selectedNode]: selected,
-        },
-      )}
-    >
-      <Handle
-        type="target"
-        position={Position.Left}
-        isConnectable
-        className={styles.handle}
-        id={'a'}
-      ></Handle>
-      <Handle
-        type="source"
-        position={Position.Right}
-        isConnectable
-        className={styles.handle}
-        id={'yes'}
-        style={{ ...RightHandleStyle, top: 57 + 20 }}
-      ></Handle>
-      <Handle
-        type="source"
-        position={Position.Right}
-        isConnectable
-        className={styles.handle}
-        id={'no'}
-        style={{ ...RightHandleStyle, top: 115 + 20 }}
-      ></Handle>
-      <NodeHeader
-        id={id}
-        name={data.name}
-        label={data.label}
-        className={styles.nodeHeader}
-      ></NodeHeader>
-
-      <Flex vertical gap={10}>
-        <Flex vertical>
-          <div className={styles.relevantLabel}>Yes</div>
-          <div className={styles.nodeText}>{replaceIdWithName(yes)}</div>
-        </Flex>
-        <Flex vertical>
-          <div className={styles.relevantLabel}>No</div>
-          <div className={styles.nodeText}>{replaceIdWithName(no)}</div>
-        </Flex>
-      </Flex>
-    </section>
-  );
-}
diff --git a/web/src/pages/flow/canvas/node/retrieval-node.tsx b/web/src/pages/flow/canvas/node/retrieval-node.tsx
deleted file mode 100644
index e9ffd669a..000000000
--- a/web/src/pages/flow/canvas/node/retrieval-node.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { useTheme } from '@/components/theme-provider';
-import { useFetchKnowledgeList } from '@/hooks/knowledge-hooks';
-import { IRetrievalNode } from '@/interfaces/database/flow';
-import { UserOutlined } from '@ant-design/icons';
-import { Handle, NodeProps, Position } from '@xyflow/react';
-import { Avatar, Button, Flex } from 'antd';
-import classNames from 'classnames';
-import { get } from 'lodash';
-import { useMemo, useState } from 'react';
-import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
-import styles from './index.less';
-import NodeHeader from './node-header';
-
-export function RetrievalNode({
-  id,
-  data,
-  isConnectable = true,
-  selected,
-}: NodeProps<IRetrievalNode>) {
-  const knowledgeBaseIds: string[] = get(data, 'form.kb_ids', []);
-  const { theme } = useTheme();
-  const { list: knowledgeList } = useFetchKnowledgeList(true);
-  const [showAllKnowledge, setShowAllKnowledge] = useState(false);
-  const knowledgeBases = useMemo(() => {
-    return knowledgeBaseIds.map((x) => {
-      const item = knowledgeList.find((y) => x === y.id);
-      return {
-        name: item?.name,
-        avatar: item?.avatar,
-        id: x,
-      };
-    });
-  }, [knowledgeList, knowledgeBaseIds]);
-
-  const displayedKnowledgeBases = showAllKnowledge
-    ? knowledgeBases
-    : knowledgeBases.slice(0, 3);
-  function showAllItem(e: any) {
-    e.stopPropagation(); // Prevent event from bubbling to parent
-    setShowAllKnowledge(!showAllKnowledge);
-  }
-  return (
-    <section
-      className={classNames(
-        styles.logicNode,
-        theme === 'dark' ? styles.dark : '',
-        {
-          [styles.selectedNode]: selected,
-        },
-      )}
-    >
-      <Handle
-        id="c"
-        type="source"
-        position={Position.Left}
-        isConnectable={isConnectable}
-        className={styles.handle}
-        style={LeftHandleStyle}
-      ></Handle>
-      <Handle
-        type="source"
-        position={Position.Right}
-        isConnectable={isConnectable}
-        className={styles.handle}
-        style={RightHandleStyle}
-        id="b"
-      ></Handle>
-      <NodeHeader
-        id={id}
-        name={data.name}
-        label={data.label}
-        className={classNames({
-          [styles.nodeHeader]: knowledgeBaseIds.length > 0,
-        })}
-      ></NodeHeader>
-      <Flex vertical gap={8}>
-        {displayedKnowledgeBases.map((knowledge) => {
-          return (
-            <div className={styles.nodeText} key={knowledge.id}>
-              <Flex align={'center'} gap={6}>
-                <Avatar
-                  size={26}
-                  icon={<UserOutlined />}
-                  src={knowledge.avatar}
-                />
-                <Flex className={styles.knowledgeNodeName} flex={1}>
-                  {knowledge.name}
-                </Flex>
-              </Flex>
-            </div>
-          );
-        })}
-        {knowledgeBases.length > 3 && (
-          <div className={styles.nodeText}>
-            <Button
-              type="link"
-              size="small"
-              onClick={showAllItem}
-              style={{
-                padding: 0,
-                height: 'auto',
-                lineHeight: '1.5',
-                textAlign: 'left',
-              }}
-            >
-              {showAllKnowledge
-                ? 'Hide'
-                : `Show more ${knowledgeBases.length - 3} knowledge`}
-            </Button>
-          </div>
-        )}
-      </Flex>
-    </section>
-  );
-}
diff --git a/web/src/pages/flow/canvas/node/rewrite-node.tsx b/web/src/pages/flow/canvas/node/rewrite-node.tsx
deleted file mode 100644
index 093b2c80e..000000000
--- a/web/src/pages/flow/canvas/node/rewrite-node.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import LLMLabel from '@/components/llm-select/llm-label';
-import { useTheme } from '@/components/theme-provider';
-import { IRewriteNode } from '@/interfaces/database/flow';
-import { Handle, NodeProps, Position } from '@xyflow/react';
-import classNames from 'classnames';
-import { get } from 'lodash';
-import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
-import styles from './index.less';
-import NodeHeader from './node-header';
-
-export function RewriteNode({
-  id,
-  data,
-  isConnectable = true,
-  selected,
-}: NodeProps<IRewriteNode>) {
-  const { theme } = useTheme();
-  return (
-    <section
-      className={classNames(
-        styles.logicNode,
-        theme === 'dark' ? styles.dark : '',
-        {
-          [styles.selectedNode]: selected,
-        },
-      )}
-    >
-      <Handle
-        id="c"
-        type="source"
-        position={Position.Left}
-        isConnectable={isConnectable}
-        className={styles.handle}
-        style={LeftHandleStyle}
-      ></Handle>
-      <Handle
-        type="source"
-        position={Position.Right}
-        isConnectable={isConnectable}
-        className={styles.handle}
-        style={RightHandleStyle}
-        id="b"
-      ></Handle>
-
-      <NodeHeader
-        id={id}
-        name={data.name}
-        label={data.label}
-        className={styles.nodeHeader}
-      ></NodeHeader>
-
-      <div className={styles.nodeText}>
-        <LLMLabel value={get(data, 'form.llm_id')}></LLMLabel>
-      </div>
-    </section>
-  );
-}
diff --git a/web/src/pages/flow/canvas/node/switch-node.tsx b/web/src/pages/flow/canvas/node/switch-node.tsx
deleted file mode 100644
index 860a0ba96..000000000
--- a/web/src/pages/flow/canvas/node/switch-node.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import { useTheme } from '@/components/theme-provider';
-import { ISwitchCondition, ISwitchNode } from '@/interfaces/database/flow';
-import { Handle, NodeProps, Position } from '@xyflow/react';
-import { Divider, Flex } from 'antd';
-import classNames from 'classnames';
-import { useGetComponentLabelByValue } from '../../hooks/use-get-begin-query';
-import { RightHandleStyle } from './handle-icon';
-import { useBuildSwitchHandlePositions } from './hooks';
-import styles from './index.less';
-import NodeHeader from './node-header';
-
-const getConditionKey = (idx: number, length: number) => {
-  if (idx === 0 && length !== 1) {
-    return 'If';
-  } else if (idx === length - 1) {
-    return 'Else';
-  }
-
-  return 'ElseIf';
-};
-
-const ConditionBlock = ({
-  condition,
-  nodeId,
-}: {
-  condition: ISwitchCondition;
-  nodeId: string;
-}) => {
-  const items = condition?.items ?? [];
-  const getLabel = useGetComponentLabelByValue(nodeId);
-  return (
-    <Flex vertical className={styles.conditionBlock}>
-      {items.map((x, idx) => (
-        <div key={idx}>
-          <Flex>
-            <div
-              className={classNames(styles.conditionLine, styles.conditionKey)}
-            >
-              {getLabel(x?.cpn_id)}
-            </div>
-            <span className={styles.conditionOperator}>{x?.operator}</span>
-            <Flex flex={1} className={styles.conditionLine}>
-              {x?.value}
-            </Flex>
-          </Flex>
-          {idx + 1 < items.length && (
-            <Divider orientationMargin="0" className={styles.zeroDivider}>
-              {condition?.logical_operator}
-            </Divider>
-          )}
-        </div>
-      ))}
-    </Flex>
-  );
-};
-
-export function SwitchNode({ id, data, selected }: NodeProps<ISwitchNode>) {
-  const { positions } = useBuildSwitchHandlePositions({ data, id });
-  const { theme } = useTheme();
-  return (
-    <section
-      className={classNames(
-        styles.logicNode,
-        theme === 'dark' ? styles.dark : '',
-        {
-          [styles.selectedNode]: selected,
-        },
-      )}
-    >
-      <Handle
-        type="target"
-        position={Position.Left}
-        isConnectable
-        className={styles.handle}
-        id={'a'}
-      ></Handle>
-      <NodeHeader
-        id={id}
-        name={data.name}
-        label={data.label}
-        className={styles.nodeHeader}
-      ></NodeHeader>
-      <Flex vertical gap={10}>
-        {positions.map((position, idx) => {
-          return (
-            <div key={idx}>
-              <Flex vertical>
-                <Flex justify={'space-between'}>
-                  <span>{idx < positions.length - 1 && position.text}</span>
-                  <span>{getConditionKey(idx, positions.length)}</span>
-                </Flex>
-                {position.condition && (
-                  <ConditionBlock
-                    nodeId={id}
-                    condition={position.condition}
-                  ></ConditionBlock>
-                )}
-              </Flex>
-              <Handle
-                key={position.text}
-                id={position.text}
-                type="source"
-                position={Position.Right}
-                isConnectable
-                className={styles.handle}
-                style={{ ...RightHandleStyle, top: position.top }}
-              ></Handle>
-            </div>
-          );
-        })}
-      </Flex>
-    </section>
-  );
-}
diff --git a/web/src/pages/flow/canvas/node/template-node.tsx b/web/src/pages/flow/canvas/node/template-node.tsx
deleted file mode 100644
index 971fbab38..000000000
--- a/web/src/pages/flow/canvas/node/template-node.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { useTheme } from '@/components/theme-provider';
-import { Handle, NodeProps, Position } from '@xyflow/react';
-import { Flex } from 'antd';
-import classNames from 'classnames';
-import { get } from 'lodash';
-import { useGetComponentLabelByValue } from '../../hooks/use-get-begin-query';
-import { IGenerateParameter } from '../../interface';
-import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
-import NodeHeader from './node-header';
-
-import { ITemplateNode } from '@/interfaces/database/flow';
-import styles from './index.less';
-
-export function TemplateNode({
-  id,
-  data,
-  isConnectable = true,
-  selected,
-}: NodeProps<ITemplateNode>) {
-  const parameters: IGenerateParameter[] = get(data, 'form.parameters', []);
-  const getLabel = useGetComponentLabelByValue(id);
-  const { theme } = useTheme();
-  return (
-    <section
-      className={classNames(
-        styles.logicNode,
-        theme === 'dark' ? styles.dark : '',
-
-        {
-          [styles.selectedNode]: selected,
-        },
-      )}
-    >
-      <Handle
-        id="c"
-        type="source"
-        position={Position.Left}
-        isConnectable={isConnectable}
-        className={styles.handle}
-        style={LeftHandleStyle}
-      ></Handle>
-      <Handle
-        type="source"
-        position={Position.Right}
-        isConnectable={isConnectable}
-        className={styles.handle}
-        style={RightHandleStyle}
-        id="b"
-      ></Handle>
-
-      <NodeHeader
-        id={id}
-        name={data.name}
-        label={data.label}
-        className={styles.nodeHeader}
-      ></NodeHeader>
-
-      <Flex gap={8} vertical className={styles.generateParameters}>
-        {parameters.map((x) => (
-          <Flex
-            key={x.id}
-            align="center"
-            gap={6}
-            className={styles.conditionBlock}
-          >
-            <label htmlFor="">{x.key}</label>
-            <span className={styles.parameterValue}>
-              {getLabel(x.component_id)}
-            </span>
-          </Flex>
-        ))}
-      </Flex>
-    </section>
-  );
-}
diff --git a/web/src/pages/flow/chat/box.tsx b/web/src/pages/flow/chat/box.tsx
deleted file mode 100644
index a7196130c..000000000
--- a/web/src/pages/flow/chat/box.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import MessageItem from '@/components/message-item';
-import { MessageType } from '@/constants/chat';
-import { useGetFileIcon } from '@/pages/chat/hooks';
-import { buildMessageItemReference } from '@/pages/chat/utils';
-import { Flex, Spin } from 'antd';
-
-import { useSendNextMessage } from './hooks';
-
-import MessageInput from '@/components/message-input';
-import PdfDrawer from '@/components/pdf-drawer';
-import { useClickDrawer } from '@/components/pdf-drawer/hooks';
-import { useFetchFlow } from '@/hooks/flow-hooks';
-import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
-import { buildMessageUuidWithRole } from '@/utils/chat';
-import styles from './index.less';
-
-const FlowChatBox = () => {
-  const {
-    sendLoading,
-    handleInputChange,
-    handlePressEnter,
-    value,
-    loading,
-    ref,
-    derivedMessages,
-    reference,
-    stopOutputMessage,
-  } = useSendNextMessage();
-
-  const { visible, hideModal, documentId, selectedChunk, clickDocumentButton } =
-    useClickDrawer();
-  useGetFileIcon();
-  const { data: userInfo } = useFetchUserInfo();
-  const { data: canvasInfo } = useFetchFlow();
-
-  return (
-    <>
-      <Flex flex={1} className={styles.chatContainer} vertical>
-        <Flex flex={1} vertical className={styles.messageContainer}>
-          <div>
-            <Spin spinning={loading}>
-              {derivedMessages?.map((message, i) => {
-                return (
-                  <MessageItem
-                    loading={
-                      message.role === MessageType.Assistant &&
-                      sendLoading &&
-                      derivedMessages.length - 1 === i
-                    }
-                    key={buildMessageUuidWithRole(message)}
-                    nickname={userInfo.nickname}
-                    avatar={userInfo.avatar}
-                    avatarDialog={canvasInfo.avatar}
-                    item={message}
-                    reference={buildMessageItemReference(
-                      { message: derivedMessages, reference },
-                      message,
-                    )}
-                    clickDocumentButton={clickDocumentButton}
-                    index={i}
-                    showLikeButton={false}
-                    sendLoading={sendLoading}
-                  ></MessageItem>
-                );
-              })}
-            </Spin>
-          </div>
-          <div ref={ref} />
-        </Flex>
-        <MessageInput
-          showUploadIcon={false}
-          value={value}
-          sendLoading={sendLoading}
-          disabled={false}
-          sendDisabled={sendLoading}
-          conversationId=""
-          onPressEnter={handlePressEnter}
-          onInputChange={handleInputChange}
-          stopOutputMessage={stopOutputMessage}
-        />
-      </Flex>
-      <PdfDrawer
-        visible={visible}
-        hideModal={hideModal}
-        documentId={documentId}
-        chunk={selectedChunk}
-      ></PdfDrawer>
-    </>
-  );
-};
-
-export default FlowChatBox;
diff --git a/web/src/pages/flow/chat/drawer.tsx b/web/src/pages/flow/chat/drawer.tsx
deleted file mode 100644
index e86422957..000000000
--- a/web/src/pages/flow/chat/drawer.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useFetchFlow } from '@/hooks/flow-hooks';
-import { IModalProps } from '@/interfaces/common';
-import { Drawer } from 'antd';
-import { getDrawerWidth } from '../utils';
-import FlowChatBox from './box';
-
-const ChatDrawer = ({ visible, hideModal }: IModalProps<any>) => {
-  const { data } = useFetchFlow();
-
-  return (
-    <Drawer
-      title={data.title}
-      placement="right"
-      onClose={hideModal}
-      open={visible}
-      getContainer={false}
-      width={getDrawerWidth()}
-      mask={false}
-    >
-      <FlowChatBox></FlowChatBox>
-    </Drawer>
-  );
-};
-
-export default ChatDrawer;
diff --git a/web/src/pages/flow/chat/hooks.ts b/web/src/pages/flow/chat/hooks.ts
deleted file mode 100644
index dc4fda33d..000000000
--- a/web/src/pages/flow/chat/hooks.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-import { MessageType } from '@/constants/chat';
-import { useFetchFlow } from '@/hooks/flow-hooks';
-import {
-  useHandleMessageInputChange,
-  useSelectDerivedMessages,
-  useSendMessageWithSse,
-} from '@/hooks/logic-hooks';
-import { Message } from '@/interfaces/database/chat';
-import i18n from '@/locales/config';
-import api from '@/utils/api';
-import { message } from 'antd';
-import trim from 'lodash/trim';
-import { useCallback, useEffect } from 'react';
-import { useParams } from 'umi';
-import { v4 as uuid } from 'uuid';
-import { receiveMessageError } from '../utils';
-
-const antMessage = message;
-
-export const useSelectNextMessages = () => {
-  const { data: flowDetail, loading } = useFetchFlow();
-  const reference = flowDetail.dsl.reference;
-  const {
-    derivedMessages,
-    ref,
-    addNewestQuestion,
-    addNewestAnswer,
-    removeLatestMessage,
-    removeMessageById,
-    removeMessagesAfterCurrentMessage,
-  } = useSelectDerivedMessages();
-
-  return {
-    reference,
-    loading,
-    derivedMessages,
-    ref,
-    addNewestQuestion,
-    addNewestAnswer,
-    removeLatestMessage,
-    removeMessageById,
-    removeMessagesAfterCurrentMessage,
-  };
-};
-
-export const useSendNextMessage = () => {
-  const {
-    reference,
-    loading,
-    derivedMessages,
-    ref,
-    addNewestQuestion,
-    addNewestAnswer,
-    removeLatestMessage,
-    removeMessageById,
-  } = useSelectNextMessages();
-  const { id: flowId } = useParams();
-  const { handleInputChange, value, setValue } = useHandleMessageInputChange();
-  const { refetch } = useFetchFlow();
-
-  const { send, answer, done, stopOutputMessage } = useSendMessageWithSse(
-    api.runCanvas,
-  );
-
-  const sendMessage = useCallback(
-    async ({ message }: { message: Message; messages?: Message[] }) => {
-      const params: Record<string, unknown> = {
-        id: flowId,
-      };
-      params.running_hint_text = i18n.t('flow.runningHintText', {
-        defaultValue: 'is running...🕞',
-      });
-      if (message.content) {
-        params.message = message.content;
-        params.message_id = message.id;
-      }
-      const res = await send(params);
-
-      if (receiveMessageError(res)) {
-        antMessage.error(res?.data?.message);
-
-        // cancel loading
-        setValue(message.content);
-        removeLatestMessage();
-      } else {
-        refetch(); // pull the message list after sending the message successfully
-      }
-    },
-    [flowId, send, setValue, removeLatestMessage, refetch],
-  );
-
-  const handleSendMessage = useCallback(
-    async (message: Message) => {
-      sendMessage({ message });
-    },
-    [sendMessage],
-  );
-
-  useEffect(() => {
-    if (answer.answer) {
-      addNewestAnswer(answer);
-    }
-  }, [answer, addNewestAnswer]);
-
-  const handlePressEnter = useCallback(() => {
-    if (trim(value) === '') return;
-    const id = uuid();
-    if (done) {
-      setValue('');
-      handleSendMessage({ id, content: value.trim(), role: MessageType.User });
-    }
-    addNewestQuestion({
-      content: value,
-      id,
-      role: MessageType.User,
-    });
-  }, [addNewestQuestion, handleSendMessage, done, setValue, value]);
-
-  const fetchPrologue = useCallback(async () => {
-    // fetch prologue
-    const sendRet = await send({ id: flowId });
-    if (receiveMessageError(sendRet)) {
-      message.error(sendRet?.data?.message);
-    } else {
-      refetch();
-    }
-  }, [flowId, refetch, send]);
-
-  useEffect(() => {
-    fetchPrologue();
-  }, [fetchPrologue]);
-
-  return {
-    handlePressEnter,
-    handleInputChange,
-    value,
-    sendLoading: !done,
-    reference,
-    loading,
-    derivedMessages,
-    ref,
-    removeMessageById,
-    stopOutputMessage,
-  };
-};
diff --git a/web/src/pages/flow/chat/index.less b/web/src/pages/flow/chat/index.less
deleted file mode 100644
index ee2b21bff..000000000
--- a/web/src/pages/flow/chat/index.less
+++ /dev/null
@@ -1,8 +0,0 @@
-.chatContainer {
-  padding: 0;
-  height: 100%;
-  .messageContainer {
-    overflow-y: auto;
-    padding-right: 24px;
-  }
-}
diff --git a/web/src/pages/flow/constant.tsx b/web/src/pages/flow/constant.tsx
deleted file mode 100644
index b4ec32902..000000000
--- a/web/src/pages/flow/constant.tsx
+++ /dev/null
@@ -1,3002 +0,0 @@
-import {
-  GitHubIcon,
-  KeywordIcon,
-  QWeatherIcon,
-  WikipediaIcon,
-} from '@/assets/icon/next-icon';
-import { ReactComponent as AkShareIcon } from '@/assets/svg/akshare.svg';
-import { ReactComponent as ArXivIcon } from '@/assets/svg/arxiv.svg';
-import { ReactComponent as baiduFanyiIcon } from '@/assets/svg/baidu-fanyi.svg';
-import { ReactComponent as BaiduIcon } from '@/assets/svg/baidu.svg';
-import { ReactComponent as BeginIcon } from '@/assets/svg/begin.svg';
-import { ReactComponent as BingIcon } from '@/assets/svg/bing.svg';
-import { ReactComponent as ConcentratorIcon } from '@/assets/svg/concentrator.svg';
-import { ReactComponent as CrawlerIcon } from '@/assets/svg/crawler.svg';
-import { ReactComponent as DeepLIcon } from '@/assets/svg/deepl.svg';
-import { ReactComponent as DuckIcon } from '@/assets/svg/duck.svg';
-import { ReactComponent as EmailIcon } from '@/assets/svg/email.svg';
-import { ReactComponent as ExeSqlIcon } from '@/assets/svg/exesql.svg';
-import { ReactComponent as GoogleScholarIcon } from '@/assets/svg/google-scholar.svg';
-import { ReactComponent as GoogleIcon } from '@/assets/svg/google.svg';
-import { ReactComponent as InvokeIcon } from '@/assets/svg/invoke-ai.svg';
-import { ReactComponent as Jin10Icon } from '@/assets/svg/jin10.svg';
-import { ReactComponent as NoteIcon } from '@/assets/svg/note.svg';
-import { ReactComponent as PubMedIcon } from '@/assets/svg/pubmed.svg';
-import { ReactComponent as SwitchIcon } from '@/assets/svg/switch.svg';
-import { ReactComponent as TemplateIcon } from '@/assets/svg/template.svg';
-import { ReactComponent as TuShareIcon } from '@/assets/svg/tushare.svg';
-import { ReactComponent as WenCaiIcon } from '@/assets/svg/wencai.svg';
-import { ReactComponent as YahooFinanceIcon } from '@/assets/svg/yahoo-finance.svg';
-import { CodeTemplateStrMap, ProgrammingLanguage } from '@/constants/agent';
-
-// 邮件功能
-
-import {
-  ChatVariableEnabledField,
-  variableEnabledFieldMap,
-} from '@/constants/chat';
-import i18n from '@/locales/config';
-import { setInitialChatVariableEnabledFieldValue } from '@/utils/chat';
-
-// DuckDuckGo's channel options
-export enum Channel {
-  Text = 'text',
-  News = 'news',
-}
-
-import {
-  BranchesOutlined,
-  DatabaseOutlined,
-  FormOutlined,
-  MergeCellsOutlined,
-  MessageOutlined,
-  RocketOutlined,
-  SendOutlined,
-} from '@ant-design/icons';
-import upperFirst from 'lodash/upperFirst';
-import {
-  CirclePower,
-  CloudUpload,
-  CodeXml,
-  Database,
-  IterationCcw,
-  ListOrdered,
-  OptionIcon,
-  TextCursorInput,
-  ToggleLeft,
-  WrapText,
-} from 'lucide-react';
-
-export const BeginId = 'begin';
-
-export enum Operator {
-  Begin = 'Begin',
-  Retrieval = 'Retrieval',
-  Generate = 'Generate',
-  Answer = 'Answer',
-  Categorize = 'Categorize',
-  Message = 'Message',
-  Relevant = 'Relevant',
-  RewriteQuestion = 'RewriteQuestion',
-  KeywordExtract = 'KeywordExtract',
-  Baidu = 'Baidu',
-  DuckDuckGo = 'DuckDuckGo',
-  Wikipedia = 'Wikipedia',
-  PubMed = 'PubMed',
-  ArXiv = 'ArXiv',
-  Google = 'Google',
-  Bing = 'Bing',
-  GoogleScholar = 'GoogleScholar',
-  DeepL = 'DeepL',
-  GitHub = 'GitHub',
-  BaiduFanyi = 'BaiduFanyi',
-  QWeather = 'QWeather',
-  ExeSQL = 'ExeSQL',
-  Switch = 'Switch',
-  WenCai = 'WenCai',
-  AkShare = 'AkShare',
-  YahooFinance = 'YahooFinance',
-  Jin10 = 'Jin10',
-  Concentrator = 'Concentrator',
-  TuShare = 'TuShare',
-  Note = 'Note',
-  Crawler = 'Crawler',
-  Invoke = 'Invoke',
-  Template = 'Template',
-  Email = 'Email',
-  Iteration = 'Iteration',
-  IterationStart = 'IterationItem',
-  Code = 'Code',
-}
-
-export const CommonOperatorList = Object.values(Operator).filter(
-  (x) => x !== Operator.Note,
-);
-
-export const operatorIconMap = {
-  [Operator.Retrieval]: RocketOutlined,
-  [Operator.Generate]: MergeCellsOutlined,
-  [Operator.Answer]: SendOutlined,
-  [Operator.Begin]: BeginIcon,
-  [Operator.Categorize]: DatabaseOutlined,
-  [Operator.Message]: MessageOutlined,
-  [Operator.Relevant]: BranchesOutlined,
-  [Operator.RewriteQuestion]: FormOutlined,
-  [Operator.KeywordExtract]: KeywordIcon,
-  [Operator.DuckDuckGo]: DuckIcon,
-  [Operator.Baidu]: BaiduIcon,
-  [Operator.Wikipedia]: WikipediaIcon,
-  [Operator.PubMed]: PubMedIcon,
-  [Operator.ArXiv]: ArXivIcon,
-  [Operator.Google]: GoogleIcon,
-  [Operator.Bing]: BingIcon,
-  [Operator.GoogleScholar]: GoogleScholarIcon,
-  [Operator.DeepL]: DeepLIcon,
-  [Operator.GitHub]: GitHubIcon,
-  [Operator.BaiduFanyi]: baiduFanyiIcon,
-  [Operator.QWeather]: QWeatherIcon,
-  [Operator.ExeSQL]: ExeSqlIcon,
-  [Operator.Switch]: SwitchIcon,
-  [Operator.WenCai]: WenCaiIcon,
-  [Operator.AkShare]: AkShareIcon,
-  [Operator.YahooFinance]: YahooFinanceIcon,
-  [Operator.Jin10]: Jin10Icon,
-  [Operator.Concentrator]: ConcentratorIcon,
-  [Operator.TuShare]: TuShareIcon,
-  [Operator.Note]: NoteIcon,
-  [Operator.Crawler]: CrawlerIcon,
-  [Operator.Invoke]: InvokeIcon,
-  [Operator.Template]: TemplateIcon,
-  [Operator.Email]: EmailIcon,
-  [Operator.Iteration]: IterationCcw,
-  [Operator.IterationStart]: CirclePower,
-  [Operator.Code]: CodeXml,
-};
-
-export const operatorMap: Record<
-  Operator,
-  {
-    backgroundColor?: string;
-    color?: string;
-    width?: number;
-    height?: number;
-    fontSize?: number;
-    iconFontSize?: number;
-    iconWidth?: number;
-    moreIconColor?: string;
-  }
-> = {
-  [Operator.Retrieval]: {
-    backgroundColor: '#cad6e0',
-    color: '#385974',
-  },
-  [Operator.Generate]: {
-    backgroundColor: '#ebd6d6',
-    width: 150,
-    height: 150,
-    fontSize: 20,
-    iconFontSize: 30,
-    color: '#996464',
-  },
-  [Operator.Answer]: {
-    backgroundColor: '#f4816d',
-    color: '#f4816d',
-  },
-  [Operator.Begin]: {
-    backgroundColor: '#4f51d6',
-  },
-  [Operator.Categorize]: {
-    backgroundColor: '#ffebcd',
-    color: '#cc8a26',
-  },
-  [Operator.Message]: {
-    backgroundColor: '#c5ddc7',
-    color: 'green',
-  },
-  [Operator.Relevant]: {
-    backgroundColor: '#9fd94d',
-    color: '#8ef005',
-    width: 70,
-    height: 70,
-    fontSize: 12,
-    iconFontSize: 16,
-  },
-  [Operator.RewriteQuestion]: {
-    backgroundColor: '#f8c7f8',
-    color: '#f32bf3',
-    width: 70,
-    height: 70,
-    fontSize: 12,
-    iconFontSize: 16,
-  },
-  [Operator.KeywordExtract]: {
-    width: 70,
-    height: 70,
-    backgroundColor: '#6E5494',
-    color: '#6E5494',
-    fontSize: 12,
-    iconWidth: 16,
-  },
-  [Operator.DuckDuckGo]: {
-    backgroundColor: '#e7e389',
-    color: '#aea00c',
-  },
-  [Operator.Baidu]: {
-    backgroundColor: '#d9e0f8',
-  },
-  [Operator.Wikipedia]: {
-    backgroundColor: '#dee0e2',
-  },
-  [Operator.PubMed]: {
-    backgroundColor: '#a2ccf0',
-  },
-  [Operator.ArXiv]: {
-    width: 70,
-    height: 70,
-    fontSize: 12,
-    iconWidth: 16,
-    iconFontSize: 16,
-    moreIconColor: 'white',
-    backgroundColor: '#b31b1b',
-    color: 'white',
-  },
-  [Operator.Google]: {
-    backgroundColor: 'pink',
-  },
-  [Operator.Bing]: {
-    backgroundColor: '#c0dcc4',
-  },
-  [Operator.GoogleScholar]: {
-    backgroundColor: '#b4e4f6',
-  },
-  [Operator.DeepL]: {
-    backgroundColor: '#f5e8e6',
-  },
-  [Operator.GitHub]: {
-    backgroundColor: 'purple',
-    color: 'purple',
-  },
-  [Operator.BaiduFanyi]: { backgroundColor: '#e5f2d3' },
-  [Operator.QWeather]: {
-    backgroundColor: '#a4bbf3',
-    color: '#a4bbf3',
-  },
-  [Operator.ExeSQL]: { backgroundColor: '#b9efe8' },
-  [Operator.Switch]: { backgroundColor: '#dbaff6', color: '#dbaff6' },
-  [Operator.WenCai]: { backgroundColor: '#faac5b' },
-  [Operator.AkShare]: { backgroundColor: '#8085f5' },
-  [Operator.YahooFinance]: { backgroundColor: '#b474ff' },
-  [Operator.Jin10]: { backgroundColor: '#a0b9f8' },
-  [Operator.Concentrator]: {
-    backgroundColor: '#32d2a3',
-    color: '#32d2a3',
-    width: 70,
-    height: 70,
-    fontSize: 10,
-    iconFontSize: 16,
-  },
-  [Operator.TuShare]: { backgroundColor: '#f8cfa0' },
-  [Operator.Note]: { backgroundColor: '#f8cfa0' },
-  [Operator.Crawler]: {
-    backgroundColor: '#dee0e2',
-  },
-  [Operator.Invoke]: {
-    backgroundColor: '#dee0e2',
-  },
-  [Operator.Template]: {
-    backgroundColor: '#dee0e2',
-  },
-  [Operator.Email]: { backgroundColor: '#e6f7ff' },
-  [Operator.Iteration]: { backgroundColor: '#e6f7ff' },
-  [Operator.IterationStart]: { backgroundColor: '#e6f7ff' },
-  [Operator.Code]: { backgroundColor: '#4c5458' },
-};
-
-export const componentMenuList = [
-  {
-    name: Operator.Retrieval,
-  },
-  {
-    name: Operator.Generate,
-  },
-  {
-    name: Operator.Answer,
-  },
-  {
-    name: Operator.Categorize,
-  },
-  {
-    name: Operator.Message,
-  },
-
-  {
-    name: Operator.RewriteQuestion,
-  },
-  {
-    name: Operator.KeywordExtract,
-  },
-  {
-    name: Operator.Switch,
-  },
-  {
-    name: Operator.Concentrator,
-  },
-  {
-    name: Operator.Template,
-  },
-  {
-    name: Operator.Iteration,
-  },
-  {
-    name: Operator.Code,
-  },
-  {
-    name: Operator.Note,
-  },
-  {
-    name: Operator.DuckDuckGo,
-  },
-  {
-    name: Operator.Baidu,
-  },
-  {
-    name: Operator.Wikipedia,
-  },
-  {
-    name: Operator.PubMed,
-  },
-  {
-    name: Operator.ArXiv,
-  },
-  {
-    name: Operator.Google,
-  },
-  {
-    name: Operator.Bing,
-  },
-  {
-    name: Operator.GoogleScholar,
-  },
-  {
-    name: Operator.DeepL,
-  },
-  {
-    name: Operator.GitHub,
-  },
-  {
-    name: Operator.BaiduFanyi,
-  },
-  {
-    name: Operator.QWeather,
-  },
-  {
-    name: Operator.ExeSQL,
-  },
-  {
-    name: Operator.WenCai,
-  },
-  {
-    name: Operator.AkShare,
-  },
-  {
-    name: Operator.YahooFinance,
-  },
-  {
-    name: Operator.Jin10,
-  },
-  {
-    name: Operator.TuShare,
-  },
-  {
-    name: Operator.Crawler,
-  },
-  {
-    name: Operator.Invoke,
-  },
-  {
-    name: Operator.Email,
-  },
-];
-
-const initialQueryBaseValues = {
-  query: [],
-};
-
-export const initialRetrievalValues = {
-  similarity_threshold: 0.2,
-  keywords_similarity_weight: 0.3,
-  top_n: 8,
-  use_kg: false,
-  ...initialQueryBaseValues,
-};
-
-export const initialBeginValues = {
-  prologue: `Hi! I'm your assistant. What can I do for you?`,
-};
-
-export const variableCheckBoxFieldMap = Object.keys(
-  variableEnabledFieldMap,
-).reduce<Record<string, boolean>>((pre, cur) => {
-  pre[cur] = setInitialChatVariableEnabledFieldValue(
-    cur as ChatVariableEnabledField,
-  );
-  return pre;
-}, {});
-
-const initialLlmBaseValues = {
-  ...variableCheckBoxFieldMap,
-  temperature: 0.1,
-  top_p: 0.3,
-  frequency_penalty: 0.7,
-  presence_penalty: 0.4,
-  max_tokens: 256,
-};
-
-export const initialGenerateValues = {
-  ...initialLlmBaseValues,
-  prompt: i18n.t('flow.promptText'),
-  cite: true,
-  message_history_window_size: 12,
-  parameters: [],
-};
-
-export const initialRewriteQuestionValues = {
-  ...initialLlmBaseValues,
-  language: '',
-  message_history_window_size: 6,
-};
-
-export const initialRelevantValues = {
-  ...initialLlmBaseValues,
-};
-
-export const initialCategorizeValues = {
-  ...initialLlmBaseValues,
-  message_history_window_size: 1,
-  category_description: {},
-  ...initialQueryBaseValues,
-};
-
-export const initialMessageValues = {
-  messages: [],
-};
-
-export const initialKeywordExtractValues = {
-  ...initialLlmBaseValues,
-  top_n: 3,
-  ...initialQueryBaseValues,
-};
-export const initialDuckValues = {
-  top_n: 10,
-  channel: Channel.Text,
-  ...initialQueryBaseValues,
-};
-
-export const initialBaiduValues = {
-  top_n: 10,
-  ...initialQueryBaseValues,
-};
-
-export const initialWikipediaValues = {
-  top_n: 10,
-  language: 'en',
-  ...initialQueryBaseValues,
-};
-
-export const initialPubMedValues = {
-  top_n: 10,
-  email: '',
-  ...initialQueryBaseValues,
-};
-
-export const initialArXivValues = {
-  top_n: 10,
-  sort_by: 'relevance',
-  ...initialQueryBaseValues,
-};
-
-export const initialGoogleValues = {
-  top_n: 10,
-  api_key: 'YOUR_API_KEY (obtained from https://serpapi.com/manage-api-key)',
-  country: 'cn',
-  language: 'en',
-  ...initialQueryBaseValues,
-};
-
-export const initialBingValues = {
-  top_n: 10,
-  channel: 'Webpages',
-  api_key:
-    'YOUR_API_KEY (obtained from https://www.microsoft.com/en-us/bing/apis/bing-web-search-api)',
-  country: 'CH',
-  language: 'en',
-  ...initialQueryBaseValues,
-};
-
-export const initialGoogleScholarValues = {
-  top_n: 5,
-  sort_by: 'relevance',
-  patents: true,
-  ...initialQueryBaseValues,
-};
-
-export const initialDeepLValues = {
-  top_n: 5,
-  auth_key: 'relevance',
-};
-
-export const initialGithubValues = {
-  top_n: 5,
-  ...initialQueryBaseValues,
-};
-
-export const initialBaiduFanyiValues = {
-  appid: 'xxx',
-  secret_key: 'xxx',
-  trans_type: 'translate',
-  ...initialQueryBaseValues,
-};
-
-export const initialQWeatherValues = {
-  web_apikey: 'xxx',
-  type: 'weather',
-  user_type: 'free',
-  time_period: 'now',
-  ...initialQueryBaseValues,
-};
-
-export const initialExeSqlValues = {
-  ...initialLlmBaseValues,
-  db_type: 'mysql',
-  database: '',
-  username: '',
-  host: '',
-  port: 3306,
-  password: '',
-  loop: 3,
-  top_n: 30,
-  ...initialQueryBaseValues,
-};
-
-export const initialSwitchValues = { conditions: [] };
-
-export const initialWenCaiValues = {
-  top_n: 20,
-  query_type: 'stock',
-  ...initialQueryBaseValues,
-};
-
-export const initialAkShareValues = { top_n: 10, ...initialQueryBaseValues };
-
-export const initialYahooFinanceValues = {
-  info: true,
-  history: false,
-  financials: false,
-  balance_sheet: false,
-  cash_flow_statement: false,
-  news: true,
-  ...initialQueryBaseValues,
-};
-
-export const initialJin10Values = {
-  type: 'flash',
-  secret_key: 'xxx',
-  flash_type: '1',
-  contain: '',
-  filter: '',
-  ...initialQueryBaseValues,
-};
-
-export const initialConcentratorValues = {};
-
-export const initialTuShareValues = {
-  token: 'xxx',
-  src: 'eastmoney',
-  start_date: '2024-01-01 09:00:00',
-  ...initialQueryBaseValues,
-};
-
-export const initialNoteValues = {
-  text: '',
-};
-
-export const initialCrawlerValues = {
-  extract_type: 'markdown',
-  ...initialQueryBaseValues,
-};
-
-export const initialInvokeValues = {
-  url: 'http://',
-  method: 'GET',
-  timeout: 60,
-  headers: `{
-  "Accept": "*/*",
-  "Cache-Control": "no-cache",
-  "Connection": "keep-alive"
-}`,
-  proxy: 'http://',
-  clean_html: false,
-  datatype: 'json',
-};
-
-export const initialTemplateValues = {
-  content: '',
-  parameters: [],
-};
-
-export const initialEmailValues = {
-  smtp_server: '',
-  smtp_port: 587,
-  email: '',
-  password: '',
-  sender_name: '',
-  to_email: '',
-  cc_email: '',
-  subject: '',
-  content: '',
-};
-
-export const initialIterationValues = {
-  delimiter: ',',
-};
-export const initialIterationStartValues = {};
-
-export const initialCodeValues = {
-  lang: 'python',
-  script: CodeTemplateStrMap[ProgrammingLanguage.Python],
-  arguments: [
-    {
-      name: 'arg1',
-    },
-    {
-      name: 'arg2',
-    },
-  ],
-};
-
-export const CategorizeAnchorPointPositions = [
-  { top: 1, right: 34 },
-  { top: 8, right: 18 },
-  { top: 15, right: 10 },
-  { top: 24, right: 4 },
-  { top: 31, right: 1 },
-  { top: 38, right: -2 },
-  { top: 62, right: -2 }, //bottom
-  { top: 71, right: 1 },
-  { top: 79, right: 6 },
-  { top: 86, right: 12 },
-  { top: 91, right: 20 },
-  { top: 98, right: 34 },
-];
-
-// key is the source of the edge, value is the target of the edge
-// no connection lines are allowed between key and value
-export const RestrictedUpstreamMap = {
-  [Operator.Begin]: [Operator.Relevant],
-  [Operator.Categorize]: [
-    Operator.Begin,
-    Operator.Categorize,
-    Operator.Answer,
-    Operator.Relevant,
-  ],
-  [Operator.Answer]: [
-    Operator.Begin,
-    Operator.Answer,
-    Operator.Message,
-    Operator.Relevant,
-  ],
-  [Operator.Retrieval]: [Operator.Begin, Operator.Retrieval],
-  [Operator.Generate]: [Operator.Begin, Operator.Relevant],
-  [Operator.Message]: [
-    Operator.Begin,
-    Operator.Message,
-    Operator.Generate,
-    Operator.Retrieval,
-    Operator.RewriteQuestion,
-    Operator.Categorize,
-    Operator.Relevant,
-  ],
-  [Operator.Relevant]: [Operator.Begin, Operator.Answer, Operator.Relevant],
-  [Operator.RewriteQuestion]: [
-    Operator.Begin,
-    Operator.Message,
-    Operator.RewriteQuestion,
-    Operator.Relevant,
-  ],
-  [Operator.KeywordExtract]: [
-    Operator.Begin,
-    Operator.Message,
-    Operator.Relevant,
-  ],
-  [Operator.Baidu]: [Operator.Begin, Operator.Retrieval],
-  [Operator.DuckDuckGo]: [Operator.Begin, Operator.Retrieval],
-  [Operator.Wikipedia]: [Operator.Begin, Operator.Retrieval],
-  [Operator.PubMed]: [Operator.Begin, Operator.Retrieval],
-  [Operator.ArXiv]: [Operator.Begin, Operator.Retrieval],
-  [Operator.Google]: [Operator.Begin, Operator.Retrieval],
-  [Operator.Bing]: [Operator.Begin, Operator.Retrieval],
-  [Operator.GoogleScholar]: [Operator.Begin, Operator.Retrieval],
-  [Operator.DeepL]: [Operator.Begin, Operator.Retrieval],
-  [Operator.GitHub]: [Operator.Begin, Operator.Retrieval],
-  [Operator.BaiduFanyi]: [Operator.Begin, Operator.Retrieval],
-  [Operator.QWeather]: [Operator.Begin, Operator.Retrieval],
-  [Operator.ExeSQL]: [Operator.Begin],
-  [Operator.Switch]: [Operator.Begin],
-  [Operator.WenCai]: [Operator.Begin],
-  [Operator.AkShare]: [Operator.Begin],
-  [Operator.YahooFinance]: [Operator.Begin],
-  [Operator.Jin10]: [Operator.Begin],
-  [Operator.Concentrator]: [Operator.Begin],
-  [Operator.TuShare]: [Operator.Begin],
-  [Operator.Crawler]: [Operator.Begin],
-  [Operator.Note]: [],
-  [Operator.Invoke]: [Operator.Begin],
-  [Operator.Template]: [Operator.Begin, Operator.Relevant],
-  [Operator.Email]: [Operator.Begin],
-  [Operator.Iteration]: [Operator.Begin],
-  [Operator.IterationStart]: [Operator.Begin],
-  [Operator.Code]: [Operator.Begin],
-};
-
-export const NodeMap = {
-  [Operator.Begin]: 'beginNode',
-  [Operator.Categorize]: 'categorizeNode',
-  [Operator.Retrieval]: 'retrievalNode',
-  [Operator.Generate]: 'generateNode',
-  [Operator.Answer]: 'logicNode',
-  [Operator.Message]: 'messageNode',
-  [Operator.Relevant]: 'relevantNode',
-  [Operator.RewriteQuestion]: 'rewriteNode',
-  [Operator.KeywordExtract]: 'keywordNode',
-  [Operator.DuckDuckGo]: 'ragNode',
-  [Operator.Baidu]: 'ragNode',
-  [Operator.Wikipedia]: 'ragNode',
-  [Operator.PubMed]: 'ragNode',
-  [Operator.ArXiv]: 'ragNode',
-  [Operator.Google]: 'ragNode',
-  [Operator.Bing]: 'ragNode',
-  [Operator.GoogleScholar]: 'ragNode',
-  [Operator.DeepL]: 'ragNode',
-  [Operator.GitHub]: 'ragNode',
-  [Operator.BaiduFanyi]: 'ragNode',
-  [Operator.QWeather]: 'ragNode',
-  [Operator.ExeSQL]: 'ragNode',
-  [Operator.Switch]: 'switchNode',
-  [Operator.Concentrator]: 'logicNode',
-  [Operator.WenCai]: 'ragNode',
-  [Operator.AkShare]: 'ragNode',
-  [Operator.YahooFinance]: 'ragNode',
-  [Operator.Jin10]: 'ragNode',
-  [Operator.TuShare]: 'ragNode',
-  [Operator.Note]: 'noteNode',
-  [Operator.Crawler]: 'ragNode',
-  [Operator.Invoke]: 'invokeNode',
-  [Operator.Template]: 'templateNode',
-  [Operator.Email]: 'emailNode',
-  [Operator.Iteration]: 'group',
-  [Operator.IterationStart]: 'iterationStartNode',
-  [Operator.Code]: 'ragNode',
-};
-
-export const LanguageOptions = [
-  {
-    value: 'af',
-    label: 'Afrikaans',
-  },
-  {
-    value: 'pl',
-    label: 'Polski',
-  },
-  {
-    value: 'ar',
-    label: 'العربية',
-  },
-  {
-    value: 'ast',
-    label: 'Asturianu',
-  },
-  {
-    value: 'az',
-    label: 'Azərbaycanca',
-  },
-  {
-    value: 'bg',
-    label: 'Български',
-  },
-  {
-    value: 'nan',
-    label: '閩南語 / Bân-lâm-gú',
-  },
-  {
-    value: 'bn',
-    label: 'বাংলা',
-  },
-  {
-    value: 'be',
-    label: 'Беларуская',
-  },
-  {
-    value: 'ca',
-    label: 'Català',
-  },
-  {
-    value: 'cs',
-    label: 'Čeština',
-  },
-  {
-    value: 'cy',
-    label: 'Cymraeg',
-  },
-  {
-    value: 'da',
-    label: 'Dansk',
-  },
-  {
-    value: 'de',
-    label: 'Deutsch',
-  },
-  {
-    value: 'fr',
-    label: 'Français',
-  },
-  {
-    value: 'et',
-    label: 'Eesti',
-  },
-  {
-    value: 'el',
-    label: 'Ελληνικά',
-  },
-  {
-    value: 'en',
-    label: 'English',
-  },
-  {
-    value: 'es',
-    label: 'Español',
-  },
-  {
-    value: 'eo',
-    label: 'Esperanto',
-  },
-  {
-    value: 'eu',
-    label: 'Euskara',
-  },
-  {
-    value: 'fa',
-    label: 'فارسی',
-  },
-  {
-    value: 'fr',
-    label: 'Français',
-  },
-  {
-    value: 'gl',
-    label: 'Galego',
-  },
-  {
-    value: 'ko',
-    label: '한국어',
-  },
-  {
-    value: 'hy',
-    label: 'Հայերեն',
-  },
-  {
-    value: 'hi',
-    label: 'हिन्दी',
-  },
-  {
-    value: 'hr',
-    label: 'Hrvatski',
-  },
-  {
-    value: 'id',
-    label: 'Bahasa Indonesia',
-  },
-  {
-    value: 'it',
-    label: 'Italiano',
-  },
-  {
-    value: 'he',
-    label: 'עברית',
-  },
-  {
-    value: 'ka',
-    label: 'ქართული',
-  },
-  {
-    value: 'lld',
-    label: 'Ladin',
-  },
-  {
-    value: 'la',
-    label: 'Latina',
-  },
-  {
-    value: 'lv',
-    label: 'Latviešu',
-  },
-  {
-    value: 'lt',
-    label: 'Lietuvių',
-  },
-  {
-    value: 'hu',
-    label: 'Magyar',
-  },
-  {
-    value: 'mk',
-    label: 'Македонски',
-  },
-  {
-    value: 'arz',
-    label: 'مصرى',
-  },
-  {
-    value: 'ms',
-    label: 'Bahasa Melayu',
-  },
-  {
-    value: 'min',
-    label: 'Bahaso Minangkabau',
-  },
-  {
-    value: 'my',
-    label: 'မြန်မာဘာသာ',
-  },
-  {
-    value: 'nl',
-    label: 'Nederlands',
-  },
-  {
-    value: 'ja',
-    label: '日本語',
-  },
-  {
-    value: 'no',
-    label: 'Norsk (bokmål)',
-  },
-  {
-    value: 'nn',
-    label: 'Norsk (nynorsk)',
-  },
-  {
-    value: 'ce',
-    label: 'Нохчийн',
-  },
-  {
-    value: 'uz',
-    label: 'Oʻzbekcha / Ўзбекча',
-  },
-  {
-    value: 'pt',
-    label: 'Português',
-  },
-  {
-    value: 'kk',
-    label: 'Қазақша / Qazaqşa / قازاقشا',
-  },
-  {
-    value: 'ro',
-    label: 'Română',
-  },
-  {
-    value: 'ru',
-    label: 'Русский',
-  },
-  {
-    value: 'ceb',
-    label: 'Sinugboanong Binisaya',
-  },
-  {
-    value: 'sk',
-    label: 'Slovenčina',
-  },
-  {
-    value: 'sl',
-    label: 'Slovenščina',
-  },
-  {
-    value: 'sr',
-    label: 'Српски / Srpski',
-  },
-  {
-    value: 'sh',
-    label: 'Srpskohrvatski / Српскохрватски',
-  },
-  {
-    value: 'fi',
-    label: 'Suomi',
-  },
-  {
-    value: 'sv',
-    label: 'Svenska',
-  },
-  {
-    value: 'ta',
-    label: 'தமிழ்',
-  },
-  {
-    value: 'tt',
-    label: 'Татарча / Tatarça',
-  },
-  {
-    value: 'th',
-    label: 'ภาษาไทย',
-  },
-  {
-    value: 'tg',
-    label: 'Тоҷикӣ',
-  },
-  {
-    value: 'azb',
-    label: 'تۆرکجه',
-  },
-  {
-    value: 'tr',
-    label: 'Türkçe',
-  },
-  {
-    value: 'uk',
-    label: 'Українська',
-  },
-  {
-    value: 'ur',
-    label: 'اردو',
-  },
-  {
-    value: 'vi',
-    label: 'Tiếng Việt',
-  },
-  {
-    value: 'war',
-    label: 'Winaray',
-  },
-  {
-    value: 'zh',
-    label: '中文',
-  },
-  {
-    value: 'yue',
-    label: '粵語',
-  },
-];
-
-export const GoogleLanguageOptions = [
-  {
-    language_code: 'af',
-    language_name: 'Afrikaans',
-  },
-  {
-    language_code: 'ak',
-    language_name: 'Akan',
-  },
-  {
-    language_code: 'sq',
-    language_name: 'Albanian',
-  },
-  {
-    language_code: 'ws',
-    language_name: 'Samoa',
-  },
-  {
-    language_code: 'am',
-    language_name: 'Amharic',
-  },
-  {
-    language_code: 'ar',
-    language_name: 'Arabic',
-  },
-  {
-    language_code: 'hy',
-    language_name: 'Armenian',
-  },
-  {
-    language_code: 'az',
-    language_name: 'Azerbaijani',
-  },
-  {
-    language_code: 'eu',
-    language_name: 'Basque',
-  },
-  {
-    language_code: 'be',
-    language_name: 'Belarusian',
-  },
-  {
-    language_code: 'bem',
-    language_name: 'Bemba',
-  },
-  {
-    language_code: 'bn',
-    language_name: 'Bengali',
-  },
-  {
-    language_code: 'bh',
-    language_name: 'Bihari',
-  },
-  {
-    language_code: 'xx-bork',
-    language_name: 'Bork, bork, bork!',
-  },
-  {
-    language_code: 'bs',
-    language_name: 'Bosnian',
-  },
-  {
-    language_code: 'br',
-    language_name: 'Breton',
-  },
-  {
-    language_code: 'bg',
-    language_name: 'Bulgarian',
-  },
-  {
-    language_code: 'bt',
-    language_name: 'Bhutanese',
-  },
-  {
-    language_code: 'km',
-    language_name: 'Cambodian',
-  },
-  {
-    language_code: 'ca',
-    language_name: 'Catalan',
-  },
-  {
-    language_code: 'chr',
-    language_name: 'Cherokee',
-  },
-  {
-    language_code: 'ny',
-    language_name: 'Chichewa',
-  },
-  {
-    language_code: 'zh-cn',
-    language_name: 'Chinese (Simplified)',
-  },
-  {
-    language_code: 'zh-tw',
-    language_name: 'Chinese (Traditional)',
-  },
-  {
-    language_code: 'co',
-    language_name: 'Corsican',
-  },
-  {
-    language_code: 'hr',
-    language_name: 'Croatian',
-  },
-  {
-    language_code: 'cs',
-    language_name: 'Czech',
-  },
-  {
-    language_code: 'da',
-    language_name: 'Danish',
-  },
-  {
-    language_code: 'nl',
-    language_name: 'Dutch',
-  },
-  {
-    language_code: 'xx-elmer',
-    language_name: 'Elmer Fudd',
-  },
-  {
-    language_code: 'en',
-    language_name: 'English',
-  },
-  {
-    language_code: 'eo',
-    language_name: 'Esperanto',
-  },
-  {
-    language_code: 'et',
-    language_name: 'Estonian',
-  },
-  {
-    language_code: 'ee',
-    language_name: 'Ewe',
-  },
-  {
-    language_code: 'fo',
-    language_name: 'Faroese',
-  },
-  {
-    language_code: 'tl',
-    language_name: 'Filipino',
-  },
-  {
-    language_code: 'fi',
-    language_name: 'Finnish',
-  },
-  {
-    language_code: 'fr',
-    language_name: 'French',
-  },
-  {
-    language_code: 'fy',
-    language_name: 'Frisian',
-  },
-  {
-    language_code: 'gaa',
-    language_name: 'Ga',
-  },
-  {
-    language_code: 'gl',
-    language_name: 'Galician',
-  },
-  {
-    language_code: 'ka',
-    language_name: 'Georgian',
-  },
-  {
-    language_code: 'de',
-    language_name: 'German',
-  },
-  {
-    language_code: 'el',
-    language_name: 'Greek',
-  },
-  {
-    language_code: 'kl',
-    language_name: 'Greenlandic',
-  },
-  {
-    language_code: 'gn',
-    language_name: 'Guarani',
-  },
-  {
-    language_code: 'gu',
-    language_name: 'Gujarati',
-  },
-  {
-    language_code: 'xx-hacker',
-    language_name: 'Hacker',
-  },
-  {
-    language_code: 'ht',
-    language_name: 'Haitian Creole',
-  },
-  {
-    language_code: 'ha',
-    language_name: 'Hausa',
-  },
-  {
-    language_code: 'haw',
-    language_name: 'Hawaiian',
-  },
-  {
-    language_code: 'iw',
-    language_name: 'Hebrew',
-  },
-  {
-    language_code: 'hi',
-    language_name: 'Hindi',
-  },
-  {
-    language_code: 'hu',
-    language_name: 'Hungarian',
-  },
-  {
-    language_code: 'is',
-    language_name: 'Icelandic',
-  },
-  {
-    language_code: 'ig',
-    language_name: 'Igbo',
-  },
-  {
-    language_code: 'id',
-    language_name: 'Indonesian',
-  },
-  {
-    language_code: 'ia',
-    language_name: 'Interlingua',
-  },
-  {
-    language_code: 'ga',
-    language_name: 'Irish',
-  },
-  {
-    language_code: 'it',
-    language_name: 'Italian',
-  },
-  {
-    language_code: 'ja',
-    language_name: 'Japanese',
-  },
-  {
-    language_code: 'jw',
-    language_name: 'Javanese',
-  },
-  {
-    language_code: 'kn',
-    language_name: 'Kannada',
-  },
-  {
-    language_code: 'kk',
-    language_name: 'Kazakh',
-  },
-  {
-    language_code: 'rw',
-    language_name: 'Kinyarwanda',
-  },
-  {
-    language_code: 'rn',
-    language_name: 'Kirundi',
-  },
-  {
-    language_code: 'xx-klingon',
-    language_name: 'Klingon',
-  },
-  {
-    language_code: 'kg',
-    language_name: 'Kongo',
-  },
-  {
-    language_code: 'ko',
-    language_name: 'Korean',
-  },
-  {
-    language_code: 'kri',
-    language_name: 'Krio (Sierra Leone)',
-  },
-  {
-    language_code: 'ku',
-    language_name: 'Kurdish',
-  },
-  {
-    language_code: 'ckb',
-    language_name: 'Kurdish (Soranî)',
-  },
-  {
-    language_code: 'ky',
-    language_name: 'Kyrgyz',
-  },
-  {
-    language_code: 'lo',
-    language_name: 'Laothian',
-  },
-  {
-    language_code: 'la',
-    language_name: 'Latin',
-  },
-  {
-    language_code: 'lv',
-    language_name: 'Latvian',
-  },
-  {
-    language_code: 'ln',
-    language_name: 'Lingala',
-  },
-  {
-    language_code: 'lt',
-    language_name: 'Lithuanian',
-  },
-  {
-    language_code: 'loz',
-    language_name: 'Lozi',
-  },
-  {
-    language_code: 'lg',
-    language_name: 'Luganda',
-  },
-  {
-    language_code: 'ach',
-    language_name: 'Luo',
-  },
-  {
-    language_code: 'mk',
-    language_name: 'Macedonian',
-  },
-  {
-    language_code: 'mg',
-    language_name: 'Malagasy',
-  },
-  {
-    language_code: 'ms',
-    language_name: 'Malay',
-  },
-  {
-    language_code: 'ml',
-    language_name: 'Malayalam',
-  },
-  {
-    language_code: 'mt',
-    language_name: 'Maltese',
-  },
-  {
-    language_code: 'mv',
-    language_name: 'Maldives',
-  },
-  {
-    language_code: 'mi',
-    language_name: 'Maori',
-  },
-  {
-    language_code: 'mr',
-    language_name: 'Marathi',
-  },
-  {
-    language_code: 'mfe',
-    language_name: 'Mauritian Creole',
-  },
-  {
-    language_code: 'mo',
-    language_name: 'Moldavian',
-  },
-  {
-    language_code: 'mn',
-    language_name: 'Mongolian',
-  },
-  {
-    language_code: 'sr-me',
-    language_name: 'Montenegrin',
-  },
-  {
-    language_code: 'my',
-    language_name: 'Myanmar',
-  },
-  {
-    language_code: 'ne',
-    language_name: 'Nepali',
-  },
-  {
-    language_code: 'pcm',
-    language_name: 'Nigerian Pidgin',
-  },
-  {
-    language_code: 'nso',
-    language_name: 'Northern Sotho',
-  },
-  {
-    language_code: 'no',
-    language_name: 'Norwegian',
-  },
-  {
-    language_code: 'nn',
-    language_name: 'Norwegian (Nynorsk)',
-  },
-  {
-    language_code: 'oc',
-    language_name: 'Occitan',
-  },
-  {
-    language_code: 'or',
-    language_name: 'Oriya',
-  },
-  {
-    language_code: 'om',
-    language_name: 'Oromo',
-  },
-  {
-    language_code: 'ps',
-    language_name: 'Pashto',
-  },
-  {
-    language_code: 'fa',
-    language_name: 'Persian',
-  },
-  {
-    language_code: 'xx-pirate',
-    language_name: 'Pirate',
-  },
-  {
-    language_code: 'pl',
-    language_name: 'Polish',
-  },
-  {
-    language_code: 'pt',
-    language_name: 'Portuguese',
-  },
-  {
-    language_code: 'pt-br',
-    language_name: 'Portuguese (Brazil)',
-  },
-  {
-    language_code: 'pt-pt',
-    language_name: 'Portuguese (Portugal)',
-  },
-  {
-    language_code: 'pa',
-    language_name: 'Punjabi',
-  },
-  {
-    language_code: 'qu',
-    language_name: 'Quechua',
-  },
-  {
-    language_code: 'ro',
-    language_name: 'Romanian',
-  },
-  {
-    language_code: 'rm',
-    language_name: 'Romansh',
-  },
-  {
-    language_code: 'nyn',
-    language_name: 'Runyakitara',
-  },
-  {
-    language_code: 'ru',
-    language_name: 'Russian',
-  },
-  {
-    language_code: 'gd',
-    language_name: 'Scots Gaelic',
-  },
-  {
-    language_code: 'sr',
-    language_name: 'Serbian',
-  },
-  {
-    language_code: 'sh',
-    language_name: 'Serbo-Croatian',
-  },
-  {
-    language_code: 'st',
-    language_name: 'Sesotho',
-  },
-  {
-    language_code: 'tn',
-    language_name: 'Setswana',
-  },
-  {
-    language_code: 'crs',
-    language_name: 'Seychellois Creole',
-  },
-  {
-    language_code: 'sn',
-    language_name: 'Shona',
-  },
-  {
-    language_code: 'sd',
-    language_name: 'Sindhi',
-  },
-  {
-    language_code: 'si',
-    language_name: 'Sinhalese',
-  },
-  {
-    language_code: 'sk',
-    language_name: 'Slovak',
-  },
-  {
-    language_code: 'sl',
-    language_name: 'Slovenian',
-  },
-  {
-    language_code: 'so',
-    language_name: 'Somali',
-  },
-  {
-    language_code: 'es',
-    language_name: 'Spanish',
-  },
-  {
-    language_code: 'es-419',
-    language_name: 'Spanish (Latin American)',
-  },
-  {
-    language_code: 'su',
-    language_name: 'Sundanese',
-  },
-  {
-    language_code: 'sw',
-    language_name: 'Swahili',
-  },
-  {
-    language_code: 'sv',
-    language_name: 'Swedish',
-  },
-  {
-    language_code: 'tg',
-    language_name: 'Tajik',
-  },
-  {
-    language_code: 'ta',
-    language_name: 'Tamil',
-  },
-  {
-    language_code: 'tt',
-    language_name: 'Tatar',
-  },
-  {
-    language_code: 'te',
-    language_name: 'Telugu',
-  },
-  {
-    language_code: 'th',
-    language_name: 'Thai',
-  },
-  {
-    language_code: 'ti',
-    language_name: 'Tigrinya',
-  },
-  {
-    language_code: 'to',
-    language_name: 'Tonga',
-  },
-  {
-    language_code: 'lua',
-    language_name: 'Tshiluba',
-  },
-  {
-    language_code: 'tum',
-    language_name: 'Tumbuka',
-  },
-  {
-    language_code: 'tr',
-    language_name: 'Turkish',
-  },
-  {
-    language_code: 'tk',
-    language_name: 'Turkmen',
-  },
-  {
-    language_code: 'tw',
-    language_name: 'Twi',
-  },
-  {
-    language_code: 'ug',
-    language_name: 'Uighur',
-  },
-  {
-    language_code: 'uk',
-    language_name: 'Ukrainian',
-  },
-  {
-    language_code: 'ur',
-    language_name: 'Urdu',
-  },
-  {
-    language_code: 'uz',
-    language_name: 'Uzbek',
-  },
-  {
-    language_code: 'vu',
-    language_name: 'Vanuatu',
-  },
-  {
-    language_code: 'vi',
-    language_name: 'Vietnamese',
-  },
-  {
-    language_code: 'cy',
-    language_name: 'Welsh',
-  },
-  {
-    language_code: 'wo',
-    language_name: 'Wolof',
-  },
-  {
-    language_code: 'xh',
-    language_name: 'Xhosa',
-  },
-  {
-    language_code: 'yi',
-    language_name: 'Yiddish',
-  },
-  {
-    language_code: 'yo',
-    language_name: 'Yoruba',
-  },
-  {
-    language_code: 'zu',
-    language_name: 'Zulu',
-  },
-].map((x) => ({ label: x.language_name, value: x.language_code }));
-
-export const GoogleCountryOptions = [
-  {
-    country_code: 'af',
-    country_name: 'Afghanistan',
-  },
-  {
-    country_code: 'al',
-    country_name: 'Albania',
-  },
-  {
-    country_code: 'dz',
-    country_name: 'Algeria',
-  },
-  {
-    country_code: 'as',
-    country_name: 'American Samoa',
-  },
-  {
-    country_code: 'ad',
-    country_name: 'Andorra',
-  },
-  {
-    country_code: 'ao',
-    country_name: 'Angola',
-  },
-  {
-    country_code: 'ai',
-    country_name: 'Anguilla',
-  },
-  {
-    country_code: 'aq',
-    country_name: 'Antarctica',
-  },
-  {
-    country_code: 'ag',
-    country_name: 'Antigua and Barbuda',
-  },
-  {
-    country_code: 'ar',
-    country_name: 'Argentina',
-  },
-  {
-    country_code: 'am',
-    country_name: 'Armenia',
-  },
-  {
-    country_code: 'aw',
-    country_name: 'Aruba',
-  },
-  {
-    country_code: 'au',
-    country_name: 'Australia',
-  },
-  {
-    country_code: 'at',
-    country_name: 'Austria',
-  },
-  {
-    country_code: 'az',
-    country_name: 'Azerbaijan',
-  },
-  {
-    country_code: 'bs',
-    country_name: 'Bahamas',
-  },
-  {
-    country_code: 'bh',
-    country_name: 'Bahrain',
-  },
-  {
-    country_code: 'bd',
-    country_name: 'Bangladesh',
-  },
-  {
-    country_code: 'bb',
-    country_name: 'Barbados',
-  },
-  {
-    country_code: 'by',
-    country_name: 'Belarus',
-  },
-  {
-    country_code: 'be',
-    country_name: 'Belgium',
-  },
-  {
-    country_code: 'bz',
-    country_name: 'Belize',
-  },
-  {
-    country_code: 'bj',
-    country_name: 'Benin',
-  },
-  {
-    country_code: 'bm',
-    country_name: 'Bermuda',
-  },
-  {
-    country_code: 'bt',
-    country_name: 'Bhutan',
-  },
-  {
-    country_code: 'bo',
-    country_name: 'Bolivia',
-  },
-  {
-    country_code: 'ba',
-    country_name: 'Bosnia and Herzegovina',
-  },
-  {
-    country_code: 'bw',
-    country_name: 'Botswana',
-  },
-  {
-    country_code: 'bv',
-    country_name: 'Bouvet Island',
-  },
-  {
-    country_code: 'br',
-    country_name: 'Brazil',
-  },
-  {
-    country_code: 'io',
-    country_name: 'British Indian Ocean Territory',
-  },
-  {
-    country_code: 'bn',
-    country_name: 'Brunei Darussalam',
-  },
-  {
-    country_code: 'bg',
-    country_name: 'Bulgaria',
-  },
-  {
-    country_code: 'bf',
-    country_name: 'Burkina Faso',
-  },
-  {
-    country_code: 'bi',
-    country_name: 'Burundi',
-  },
-  {
-    country_code: 'kh',
-    country_name: 'Cambodia',
-  },
-  {
-    country_code: 'cm',
-    country_name: 'Cameroon',
-  },
-  {
-    country_code: 'ca',
-    country_name: 'Canada',
-  },
-  {
-    country_code: 'cv',
-    country_name: 'Cape Verde',
-  },
-  {
-    country_code: 'ky',
-    country_name: 'Cayman Islands',
-  },
-  {
-    country_code: 'cf',
-    country_name: 'Central African Republic',
-  },
-  {
-    country_code: 'td',
-    country_name: 'Chad',
-  },
-  {
-    country_code: 'cl',
-    country_name: 'Chile',
-  },
-  {
-    country_code: 'cn',
-    country_name: 'China',
-  },
-  {
-    country_code: 'cx',
-    country_name: 'Christmas Island',
-  },
-  {
-    country_code: 'cc',
-    country_name: 'Cocos (Keeling) Islands',
-  },
-  {
-    country_code: 'co',
-    country_name: 'Colombia',
-  },
-  {
-    country_code: 'km',
-    country_name: 'Comoros',
-  },
-  {
-    country_code: 'cg',
-    country_name: 'Congo',
-  },
-  {
-    country_code: 'cd',
-    country_name: 'Congo, the Democratic Republic of the',
-  },
-  {
-    country_code: 'ck',
-    country_name: 'Cook Islands',
-  },
-  {
-    country_code: 'cr',
-    country_name: 'Costa Rica',
-  },
-  {
-    country_code: 'ci',
-    country_name: "Cote D'ivoire",
-  },
-  {
-    country_code: 'hr',
-    country_name: 'Croatia',
-  },
-  {
-    country_code: 'cu',
-    country_name: 'Cuba',
-  },
-  {
-    country_code: 'cy',
-    country_name: 'Cyprus',
-  },
-  {
-    country_code: 'cz',
-    country_name: 'Czech Republic',
-  },
-  {
-    country_code: 'dk',
-    country_name: 'Denmark',
-  },
-  {
-    country_code: 'dj',
-    country_name: 'Djibouti',
-  },
-  {
-    country_code: 'dm',
-    country_name: 'Dominica',
-  },
-  {
-    country_code: 'do',
-    country_name: 'Dominican Republic',
-  },
-  {
-    country_code: 'ec',
-    country_name: 'Ecuador',
-  },
-  {
-    country_code: 'eg',
-    country_name: 'Egypt',
-  },
-  {
-    country_code: 'sv',
-    country_name: 'El Salvador',
-  },
-  {
-    country_code: 'gq',
-    country_name: 'Equatorial Guinea',
-  },
-  {
-    country_code: 'er',
-    country_name: 'Eritrea',
-  },
-  {
-    country_code: 'ee',
-    country_name: 'Estonia',
-  },
-  {
-    country_code: 'et',
-    country_name: 'Ethiopia',
-  },
-  {
-    country_code: 'fk',
-    country_name: 'Falkland Islands (Malvinas)',
-  },
-  {
-    country_code: 'fo',
-    country_name: 'Faroe Islands',
-  },
-  {
-    country_code: 'fj',
-    country_name: 'Fiji',
-  },
-  {
-    country_code: 'fi',
-    country_name: 'Finland',
-  },
-  {
-    country_code: 'fr',
-    country_name: 'France',
-  },
-  {
-    country_code: 'gf',
-    country_name: 'French Guiana',
-  },
-  {
-    country_code: 'pf',
-    country_name: 'French Polynesia',
-  },
-  {
-    country_code: 'tf',
-    country_name: 'French Southern Territories',
-  },
-  {
-    country_code: 'ga',
-    country_name: 'Gabon',
-  },
-  {
-    country_code: 'gm',
-    country_name: 'Gambia',
-  },
-  {
-    country_code: 'ge',
-    country_name: 'Georgia',
-  },
-  {
-    country_code: 'de',
-    country_name: 'Germany',
-  },
-  {
-    country_code: 'gh',
-    country_name: 'Ghana',
-  },
-  {
-    country_code: 'gi',
-    country_name: 'Gibraltar',
-  },
-  {
-    country_code: 'gr',
-    country_name: 'Greece',
-  },
-  {
-    country_code: 'gl',
-    country_name: 'Greenland',
-  },
-  {
-    country_code: 'gd',
-    country_name: 'Grenada',
-  },
-  {
-    country_code: 'gp',
-    country_name: 'Guadeloupe',
-  },
-  {
-    country_code: 'gu',
-    country_name: 'Guam',
-  },
-  {
-    country_code: 'gt',
-    country_name: 'Guatemala',
-  },
-  {
-    country_code: 'gn',
-    country_name: 'Guinea',
-  },
-  {
-    country_code: 'gw',
-    country_name: 'Guinea-Bissau',
-  },
-  {
-    country_code: 'gy',
-    country_name: 'Guyana',
-  },
-  {
-    country_code: 'ht',
-    country_name: 'Haiti',
-  },
-  {
-    country_code: 'hm',
-    country_name: 'Heard Island and Mcdonald Islands',
-  },
-  {
-    country_code: 'va',
-    country_name: 'Holy See (Vatican City State)',
-  },
-  {
-    country_code: 'hn',
-    country_name: 'Honduras',
-  },
-  {
-    country_code: 'hk',
-    country_name: 'Hong Kong',
-  },
-  {
-    country_code: 'hu',
-    country_name: 'Hungary',
-  },
-  {
-    country_code: 'is',
-    country_name: 'Iceland',
-  },
-  {
-    country_code: 'in',
-    country_name: 'India',
-  },
-  {
-    country_code: 'id',
-    country_name: 'Indonesia',
-  },
-  {
-    country_code: 'ir',
-    country_name: 'Iran, Islamic Republic of',
-  },
-  {
-    country_code: 'iq',
-    country_name: 'Iraq',
-  },
-  {
-    country_code: 'ie',
-    country_name: 'Ireland',
-  },
-  {
-    country_code: 'il',
-    country_name: 'Israel',
-  },
-  {
-    country_code: 'it',
-    country_name: 'Italy',
-  },
-  {
-    country_code: 'jm',
-    country_name: 'Jamaica',
-  },
-  {
-    country_code: 'jp',
-    country_name: 'Japan',
-  },
-  {
-    country_code: 'jo',
-    country_name: 'Jordan',
-  },
-  {
-    country_code: 'kz',
-    country_name: 'Kazakhstan',
-  },
-  {
-    country_code: 'ke',
-    country_name: 'Kenya',
-  },
-  {
-    country_code: 'ki',
-    country_name: 'Kiribati',
-  },
-  {
-    country_code: 'kp',
-    country_name: "Korea, Democratic People's Republic of",
-  },
-  {
-    country_code: 'kr',
-    country_name: 'Korea, Republic of',
-  },
-  {
-    country_code: 'kw',
-    country_name: 'Kuwait',
-  },
-  {
-    country_code: 'kg',
-    country_name: 'Kyrgyzstan',
-  },
-  {
-    country_code: 'la',
-    country_name: "Lao People's Democratic Republic",
-  },
-  {
-    country_code: 'lv',
-    country_name: 'Latvia',
-  },
-  {
-    country_code: 'lb',
-    country_name: 'Lebanon',
-  },
-  {
-    country_code: 'ls',
-    country_name: 'Lesotho',
-  },
-  {
-    country_code: 'lr',
-    country_name: 'Liberia',
-  },
-  {
-    country_code: 'ly',
-    country_name: 'Libyan Arab Jamahiriya',
-  },
-  {
-    country_code: 'li',
-    country_name: 'Liechtenstein',
-  },
-  {
-    country_code: 'lt',
-    country_name: 'Lithuania',
-  },
-  {
-    country_code: 'lu',
-    country_name: 'Luxembourg',
-  },
-  {
-    country_code: 'mo',
-    country_name: 'Macao',
-  },
-  {
-    country_code: 'mk',
-    country_name: 'Macedonia, the Former Yugosalv Republic of',
-  },
-  {
-    country_code: 'mg',
-    country_name: 'Madagascar',
-  },
-  {
-    country_code: 'mw',
-    country_name: 'Malawi',
-  },
-  {
-    country_code: 'my',
-    country_name: 'Malaysia',
-  },
-  {
-    country_code: 'mv',
-    country_name: 'Maldives',
-  },
-  {
-    country_code: 'ml',
-    country_name: 'Mali',
-  },
-  {
-    country_code: 'mt',
-    country_name: 'Malta',
-  },
-  {
-    country_code: 'mh',
-    country_name: 'Marshall Islands',
-  },
-  {
-    country_code: 'mq',
-    country_name: 'Martinique',
-  },
-  {
-    country_code: 'mr',
-    country_name: 'Mauritania',
-  },
-  {
-    country_code: 'mu',
-    country_name: 'Mauritius',
-  },
-  {
-    country_code: 'yt',
-    country_name: 'Mayotte',
-  },
-  {
-    country_code: 'mx',
-    country_name: 'Mexico',
-  },
-  {
-    country_code: 'fm',
-    country_name: 'Micronesia, Federated States of',
-  },
-  {
-    country_code: 'md',
-    country_name: 'Moldova, Republic of',
-  },
-  {
-    country_code: 'mc',
-    country_name: 'Monaco',
-  },
-  {
-    country_code: 'mn',
-    country_name: 'Mongolia',
-  },
-  {
-    country_code: 'ms',
-    country_name: 'Montserrat',
-  },
-  {
-    country_code: 'ma',
-    country_name: 'Morocco',
-  },
-  {
-    country_code: 'mz',
-    country_name: 'Mozambique',
-  },
-  {
-    country_code: 'mm',
-    country_name: 'Myanmar',
-  },
-  {
-    country_code: 'na',
-    country_name: 'Namibia',
-  },
-  {
-    country_code: 'nr',
-    country_name: 'Nauru',
-  },
-  {
-    country_code: 'np',
-    country_name: 'Nepal',
-  },
-  {
-    country_code: 'nl',
-    country_name: 'Netherlands',
-  },
-  {
-    country_code: 'an',
-    country_name: 'Netherlands Antilles',
-  },
-  {
-    country_code: 'nc',
-    country_name: 'New Caledonia',
-  },
-  {
-    country_code: 'nz',
-    country_name: 'New Zealand',
-  },
-  {
-    country_code: 'ni',
-    country_name: 'Nicaragua',
-  },
-  {
-    country_code: 'ne',
-    country_name: 'Niger',
-  },
-  {
-    country_code: 'ng',
-    country_name: 'Nigeria',
-  },
-  {
-    country_code: 'nu',
-    country_name: 'Niue',
-  },
-  {
-    country_code: 'nf',
-    country_name: 'Norfolk Island',
-  },
-  {
-    country_code: 'mp',
-    country_name: 'Northern Mariana Islands',
-  },
-  {
-    country_code: 'no',
-    country_name: 'Norway',
-  },
-  {
-    country_code: 'om',
-    country_name: 'Oman',
-  },
-  {
-    country_code: 'pk',
-    country_name: 'Pakistan',
-  },
-  {
-    country_code: 'pw',
-    country_name: 'Palau',
-  },
-  {
-    country_code: 'ps',
-    country_name: 'Palestinian Territory, Occupied',
-  },
-  {
-    country_code: 'pa',
-    country_name: 'Panama',
-  },
-  {
-    country_code: 'pg',
-    country_name: 'Papua New Guinea',
-  },
-  {
-    country_code: 'py',
-    country_name: 'Paraguay',
-  },
-  {
-    country_code: 'pe',
-    country_name: 'Peru',
-  },
-  {
-    country_code: 'ph',
-    country_name: 'Philippines',
-  },
-  {
-    country_code: 'pn',
-    country_name: 'Pitcairn',
-  },
-  {
-    country_code: 'pl',
-    country_name: 'Poland',
-  },
-  {
-    country_code: 'pt',
-    country_name: 'Portugal',
-  },
-  {
-    country_code: 'pr',
-    country_name: 'Puerto Rico',
-  },
-  {
-    country_code: 'qa',
-    country_name: 'Qatar',
-  },
-  {
-    country_code: 're',
-    country_name: 'Reunion',
-  },
-  {
-    country_code: 'ro',
-    country_name: 'Romania',
-  },
-  {
-    country_code: 'ru',
-    country_name: 'Russian Federation',
-  },
-  {
-    country_code: 'rw',
-    country_name: 'Rwanda',
-  },
-  {
-    country_code: 'sh',
-    country_name: 'Saint Helena',
-  },
-  {
-    country_code: 'kn',
-    country_name: 'Saint Kitts and Nevis',
-  },
-  {
-    country_code: 'lc',
-    country_name: 'Saint Lucia',
-  },
-  {
-    country_code: 'pm',
-    country_name: 'Saint Pierre and Miquelon',
-  },
-  {
-    country_code: 'vc',
-    country_name: 'Saint Vincent and the Grenadines',
-  },
-  {
-    country_code: 'ws',
-    country_name: 'Samoa',
-  },
-  {
-    country_code: 'sm',
-    country_name: 'San Marino',
-  },
-  {
-    country_code: 'st',
-    country_name: 'Sao Tome and Principe',
-  },
-  {
-    country_code: 'sa',
-    country_name: 'Saudi Arabia',
-  },
-  {
-    country_code: 'sn',
-    country_name: 'Senegal',
-  },
-  {
-    country_code: 'rs',
-    country_name: 'Serbia and Montenegro',
-  },
-  {
-    country_code: 'sc',
-    country_name: 'Seychelles',
-  },
-  {
-    country_code: 'sl',
-    country_name: 'Sierra Leone',
-  },
-  {
-    country_code: 'sg',
-    country_name: 'Singapore',
-  },
-  {
-    country_code: 'sk',
-    country_name: 'Slovakia',
-  },
-  {
-    country_code: 'si',
-    country_name: 'Slovenia',
-  },
-  {
-    country_code: 'sb',
-    country_name: 'Solomon Islands',
-  },
-  {
-    country_code: 'so',
-    country_name: 'Somalia',
-  },
-  {
-    country_code: 'za',
-    country_name: 'South Africa',
-  },
-  {
-    country_code: 'gs',
-    country_name: 'South Georgia and the South Sandwich Islands',
-  },
-  {
-    country_code: 'es',
-    country_name: 'Spain',
-  },
-  {
-    country_code: 'lk',
-    country_name: 'Sri Lanka',
-  },
-  {
-    country_code: 'sd',
-    country_name: 'Sudan',
-  },
-  {
-    country_code: 'sr',
-    country_name: 'Suriname',
-  },
-  {
-    country_code: 'sj',
-    country_name: 'Svalbard and Jan Mayen',
-  },
-  {
-    country_code: 'sz',
-    country_name: 'Swaziland',
-  },
-  {
-    country_code: 'se',
-    country_name: 'Sweden',
-  },
-  {
-    country_code: 'ch',
-    country_name: 'Switzerland',
-  },
-  {
-    country_code: 'sy',
-    country_name: 'Syrian Arab Republic',
-  },
-  {
-    country_code: 'tw',
-    country_name: 'Taiwan, Province of China',
-  },
-  {
-    country_code: 'tj',
-    country_name: 'Tajikistan',
-  },
-  {
-    country_code: 'tz',
-    country_name: 'Tanzania, United Republic of',
-  },
-  {
-    country_code: 'th',
-    country_name: 'Thailand',
-  },
-  {
-    country_code: 'tl',
-    country_name: 'Timor-Leste',
-  },
-  {
-    country_code: 'tg',
-    country_name: 'Togo',
-  },
-  {
-    country_code: 'tk',
-    country_name: 'Tokelau',
-  },
-  {
-    country_code: 'to',
-    country_name: 'Tonga',
-  },
-  {
-    country_code: 'tt',
-    country_name: 'Trinidad and Tobago',
-  },
-  {
-    country_code: 'tn',
-    country_name: 'Tunisia',
-  },
-  {
-    country_code: 'tr',
-    country_name: 'Turkiye',
-  },
-  {
-    country_code: 'tm',
-    country_name: 'Turkmenistan',
-  },
-  {
-    country_code: 'tc',
-    country_name: 'Turks and Caicos Islands',
-  },
-  {
-    country_code: 'tv',
-    country_name: 'Tuvalu',
-  },
-  {
-    country_code: 'ug',
-    country_name: 'Uganda',
-  },
-  {
-    country_code: 'ua',
-    country_name: 'Ukraine',
-  },
-  {
-    country_code: 'ae',
-    country_name: 'United Arab Emirates',
-  },
-  {
-    country_code: 'uk',
-    country_name: 'United Kingdom',
-  },
-  {
-    country_code: 'gb',
-    country_name: 'United Kingdom',
-  },
-  {
-    country_code: 'us',
-    country_name: 'United States',
-  },
-  {
-    country_code: 'um',
-    country_name: 'United States Minor Outlying Islands',
-  },
-  {
-    country_code: 'uy',
-    country_name: 'Uruguay',
-  },
-  {
-    country_code: 'uz',
-    country_name: 'Uzbekistan',
-  },
-  {
-    country_code: 'vu',
-    country_name: 'Vanuatu',
-  },
-  {
-    country_code: 've',
-    country_name: 'Venezuela',
-  },
-  {
-    country_code: 'vn',
-    country_name: 'Viet Nam',
-  },
-  {
-    country_code: 'vg',
-    country_name: 'Virgin Islands, British',
-  },
-  {
-    country_code: 'vi',
-    country_name: 'Virgin Islands, U.S.',
-  },
-  {
-    country_code: 'wf',
-    country_name: 'Wallis and Futuna',
-  },
-  {
-    country_code: 'eh',
-    country_name: 'Western Sahara',
-  },
-  {
-    country_code: 'ye',
-    country_name: 'Yemen',
-  },
-  {
-    country_code: 'zm',
-    country_name: 'Zambia',
-  },
-  {
-    country_code: 'zw',
-    country_name: 'Zimbabwe',
-  },
-].map((x) => ({ label: x.country_name, value: x.country_code }));
-
-export const BingCountryOptions = [
-  { label: 'Argentina AR', value: 'AR' },
-  { label: 'Australia AU', value: 'AU' },
-  { label: 'Austria AT', value: 'AT' },
-  { label: 'Belgium BE', value: 'BE' },
-  { label: 'Brazil BR', value: 'BR' },
-  { label: 'Canada CA', value: 'CA' },
-  { label: 'Chile CL', value: 'CL' },
-  { label: 'Denmark DK', value: 'DK' },
-  { label: 'Finland FI', value: 'FI' },
-  { label: 'France FR', value: 'FR' },
-  { label: 'Germany DE', value: 'DE' },
-  { label: 'Hong Kong SAR HK', value: 'HK' },
-  { label: 'India IN', value: 'IN' },
-  { label: 'Indonesia ID', value: 'ID' },
-  { label: 'Italy IT', value: 'IT' },
-  { label: 'Japan JP', value: 'JP' },
-  { label: 'Korea KR', value: 'KR' },
-  { label: 'Malaysia MY', value: 'MY' },
-  { label: 'Mexico MX', value: 'MX' },
-  { label: 'Netherlands NL', value: 'NL' },
-  { label: 'New Zealand NZ', value: 'NZ' },
-  { label: 'Norway NO', value: 'NO' },
-  { label: "People's Republic of China CN", value: 'CN' },
-  { label: 'Poland PL', value: 'PL' },
-  { label: 'Portugal PT', value: 'PT' },
-  { label: 'Republic of the Philippines PH', value: 'PH' },
-  { label: 'Russia RU', value: 'RU' },
-  { label: 'Saudi Arabia SA', value: 'SA' },
-  { label: 'South Africa ZA', value: 'ZA' },
-  { label: 'Spain ES', value: 'ES' },
-  { label: 'Sweden SE', value: 'SE' },
-  { label: 'Switzerland CH', value: 'CH' },
-  { label: 'Taiwan TW', value: 'TW' },
-  { label: 'Türkiye TR', value: 'TR' },
-  { label: 'United Kingdom GB', value: 'GB' },
-  { label: 'United States US', value: 'US' },
-];
-
-export const BingLanguageOptions = [
-  { label: 'Arabic ar', value: 'ar' },
-  { label: 'Basque eu', value: 'eu' },
-  { label: 'Bengali bn', value: 'bn' },
-  { label: 'Bulgarian bg', value: 'bg' },
-  { label: 'Catalan ca', value: 'ca' },
-  { label: 'Chinese (Simplified) zh-hans', value: 'ns' },
-  { label: 'Chinese (Traditional) zh-hant', value: 'nt' },
-  { label: 'Croatian hr', value: 'hr' },
-  { label: 'Czech cs', value: 'cs' },
-  { label: 'Danish da', value: 'da' },
-  { label: 'Dutch nl', value: 'nl' },
-  { label: 'English en', value: 'en' },
-  { label: 'English-United Kingdom en-gb', value: 'gb' },
-  { label: 'Estonian et', value: 'et' },
-  { label: 'Finnish fi', value: 'fi' },
-  { label: 'French fr', value: 'fr' },
-  { label: 'Galician gl', value: 'gl' },
-  { label: 'German de', value: 'de' },
-  { label: 'Gujarati gu', value: 'gu' },
-  { label: 'Hebrew he', value: 'he' },
-  { label: 'Hindi hi', value: 'hi' },
-  { label: 'Hungarian hu', value: 'hu' },
-  { label: 'Icelandic is', value: 'is' },
-  { label: 'Italian it', value: 'it' },
-  { label: 'Japanese jp', value: 'jp' },
-  { label: 'Kannada kn', value: 'kn' },
-  { label: 'Korean ko', value: 'ko' },
-  { label: 'Latvian lv', value: 'lv' },
-  { label: 'Lithuanian lt', value: 'lt' },
-  { label: 'Malay ms', value: 'ms' },
-  { label: 'Malayalam ml', value: 'ml' },
-  { label: 'Marathi mr', value: 'mr' },
-  { label: 'Norwegian (Bokmål) nb', value: 'nb' },
-  { label: 'Polish pl', value: 'pl' },
-  { label: 'Portuguese (Brazil) pt-br', value: 'br' },
-  { label: 'Portuguese (Portugal) pt-pt', value: 'pt' },
-  { label: 'Punjabi pa', value: 'pa' },
-  { label: 'Romanian ro', value: 'ro' },
-  { label: 'Russian ru', value: 'ru' },
-  { label: 'Serbian (Cyrylic) sr', value: 'sr' },
-  { label: 'Slovak sk', value: 'sk' },
-  { label: 'Slovenian sl', value: 'sl' },
-  { label: 'Spanish es', value: 'es' },
-  { label: 'Swedish sv', value: 'sv' },
-  { label: 'Tamil ta', value: 'ta' },
-  { label: 'Telugu te', value: 'te' },
-  { label: 'Thai th', value: 'th' },
-  { label: 'Turkish tr', value: 'tr' },
-  { label: 'Ukrainian uk', value: 'uk' },
-  { label: 'Vietnamese vi', value: 'vi' },
-];
-
-export const DeepLSourceLangOptions = [
-  { label: 'Arabic [1]', value: 'AR' },
-  { label: 'Bulgarian', value: 'BG' },
-  { label: 'Czech', value: 'CS' },
-  { label: 'Danish', value: 'DA' },
-  { label: 'German', value: 'DE' },
-  { label: 'Greek', value: 'EL' },
-  { label: 'English', value: 'EN' },
-  { label: 'Spanish', value: 'ES' },
-  { label: 'Estonian', value: 'ET' },
-  { label: 'Finnish', value: 'FI' },
-  { label: 'French', value: 'FR' },
-  { label: 'Hungarian', value: 'HU' },
-  { label: 'Indonesian', value: 'ID' },
-  { label: 'Italian', value: 'IT' },
-  { label: 'Japanese', value: 'JA' },
-  { label: 'Korean', value: 'KO' },
-  { label: 'Lithuanian', value: 'LT' },
-  { label: 'Latvian', value: 'LV' },
-  { label: 'Norwegian Bokmål', value: 'NB' },
-  { label: 'Dutch', value: 'NL' },
-  { label: 'Polish', value: 'PL' },
-  { label: 'Portuguese (all Portuguese varieties mixed)', value: 'PT' },
-  { label: 'Romanian', value: 'RO' },
-  { label: 'Russian', value: 'RU' },
-  { label: 'Slovak', value: 'SK' },
-  { label: 'Slovenian', value: 'SL' },
-  { label: 'Swedish', value: 'SV' },
-  { label: 'Turkish', value: 'TR' },
-  { label: 'Ukrainian', value: 'UK' },
-  { label: 'Chinese', value: 'ZH' },
-];
-export const DeepLTargetLangOptions = [
-  { label: 'Arabic [1]', value: 'AR' },
-  { label: 'Bulgarian', value: 'BG' },
-  { label: 'Czech', value: 'CS' },
-  { label: 'Danish', value: 'DA' },
-  { label: 'German', value: 'DE' },
-  { label: 'Greek', value: 'EL' },
-  { label: 'English (British)', value: 'EN-GB' },
-  { label: 'English (American)', value: 'EN-US' },
-  { label: 'Spanish', value: 'ES' },
-  { label: 'Estonian', value: 'ET' },
-  { label: 'Finnish', value: 'FI' },
-  { label: 'French', value: 'FR' },
-  { label: 'Hungarian', value: 'HU' },
-  { label: 'Indonesian', value: 'ID' },
-  { label: 'Italian', value: 'IT' },
-  { label: 'Japanese', value: 'JA' },
-  { label: 'Korean', value: 'KO' },
-  { label: 'Lithuanian', value: 'LT' },
-  { label: 'Latvian', value: 'LV' },
-  { label: 'Norwegian Bokmål', value: 'NB' },
-  { label: 'Dutch', value: 'NL' },
-  { label: 'Polish', value: 'PL' },
-  { label: 'Portuguese (Brazilian)', value: 'PT-BR' },
-  {
-    label:
-      'Portuguese (all Portuguese varieties excluding Brazilian Portuguese)',
-    value: 'PT-PT',
-  },
-  { label: 'Romanian', value: 'RO' },
-  { label: 'Russian', value: 'RU' },
-  { label: 'Slovak', value: 'SK' },
-  { label: 'Slovenian', value: 'SL' },
-  { label: 'Swedish', value: 'SV' },
-  { label: 'Turkish', value: 'TR' },
-  { label: 'Ukrainian', value: 'UK' },
-  { label: 'Chinese (simplified)', value: 'ZH' },
-];
-
-export const BaiduFanyiDomainOptions = [
-  'it',
-  'finance',
-  'machinery',
-  'senimed',
-  'novel',
-  'academic',
-  'aerospace',
-  'wiki',
-  'news',
-  'law',
-  'contract',
-];
-
-export const BaiduFanyiSourceLangOptions = [
-  'auto',
-  'zh',
-  'en',
-  'yue',
-  'wyw',
-  'jp',
-  'kor',
-  'fra',
-  'spa',
-  'th',
-  'ara',
-  'ru',
-  'pt',
-  'de',
-  'it',
-  'el',
-  'nl',
-  'pl',
-  'bul',
-  'est',
-  'dan',
-  'fin',
-  'cs',
-  'rom',
-  'slo',
-  'swe',
-  'hu',
-  'cht',
-  'vie',
-];
-
-export const QWeatherLangOptions = [
-  'zh',
-  'zh-hant',
-  'en',
-  'de',
-  'es',
-  'fr',
-  'it',
-  'ja',
-  'ko',
-  'ru',
-  'hi',
-  'th',
-  'ar',
-  'pt',
-  'bn',
-  'ms',
-  'nl',
-  'el',
-  'la',
-  'sv',
-  'id',
-  'pl',
-  'tr',
-  'cs',
-  'et',
-  'vi',
-  'fil',
-  'fi',
-  'he',
-  'is',
-  'nb',
-];
-
-export const QWeatherTypeOptions = ['weather', 'indices', 'airquality'];
-
-export const QWeatherUserTypeOptions = ['free', 'paid'];
-
-export const QWeatherTimePeriodOptions = [
-  'now',
-  '3d',
-  '7d',
-  '10d',
-  '15d',
-  '30d',
-];
-
-export const ExeSQLOptions = ['mysql', 'postgres', 'mariadb', 'mssql'].map(
-  (x) => ({
-    label: upperFirst(x),
-    value: x,
-  }),
-);
-
-export const SwitchElseTo = 'end_cpn_id';
-
-export const SwitchOperatorOptions = [
-  { value: '=', label: 'equal' },
-  { value: '≠', label: 'notEqual' },
-  { value: '>', label: 'gt' },
-  { value: '≥', label: 'ge' },
-  { value: '<', label: 'lt' },
-  { value: '≤', label: 'le' },
-  { value: 'contains', label: 'contains' },
-  { value: 'not contains', label: 'notContains' },
-  { value: 'start with', label: 'startWith' },
-  { value: 'end with', label: 'endWith' },
-  { value: 'empty', label: 'empty' },
-  { value: 'not empty', label: 'notEmpty' },
-];
-
-export const SwitchLogicOperatorOptions = ['and', 'or'];
-
-export const WenCaiQueryTypeOptions = [
-  'stock',
-  'zhishu',
-  'fund',
-  'hkstock',
-  'usstock',
-  'threeboard',
-  'conbond',
-  'insurance',
-  'futures',
-  'lccp',
-  'foreign_exchange',
-];
-
-export const Jin10TypeOptions = ['flash', 'calendar', 'symbols', 'news'];
-export const Jin10FlashTypeOptions = new Array(5)
-  .fill(1)
-  .map((x, idx) => (idx + 1).toString());
-export const Jin10CalendarTypeOptions = ['cj', 'qh', 'hk', 'us'];
-export const Jin10CalendarDatashapeOptions = ['data', 'event', 'holiday'];
-export const Jin10SymbolsTypeOptions = ['GOODS', 'FOREX', 'FUTURE', 'CRYPTO'];
-export const Jin10SymbolsDatatypeOptions = ['symbols', 'quotes'];
-export const TuShareSrcOptions = [
-  'sina',
-  'wallstreetcn',
-  '10jqka',
-  'eastmoney',
-  'yuncaijing',
-  'fenghuang',
-  'jinrongjie',
-];
-export const CrawlerResultOptions = ['markdown', 'html', 'content'];
-
-export enum BeginQueryType {
-  Line = 'line',
-  Paragraph = 'paragraph',
-  Options = 'options',
-  File = 'file',
-  Integer = 'integer',
-  Boolean = 'boolean',
-  KnowledgeBases = 'kb',
-}
-
-export const BeginQueryTypeIconMap = {
-  [BeginQueryType.Line]: TextCursorInput,
-  [BeginQueryType.Paragraph]: WrapText,
-  [BeginQueryType.Options]: OptionIcon,
-  [BeginQueryType.File]: CloudUpload,
-  [BeginQueryType.Integer]: ListOrdered,
-  [BeginQueryType.Boolean]: ToggleLeft,
-  [BeginQueryType.KnowledgeBases]: Database,
-};
-
-export const NoDebugOperatorsList = [
-  Operator.Begin,
-  Operator.Answer,
-  Operator.Concentrator,
-  Operator.Template,
-  Operator.Message,
-  Operator.RewriteQuestion,
-  Operator.Switch,
-  Operator.Iteration,
-];
diff --git a/web/src/pages/flow/context.ts b/web/src/pages/flow/context.ts
deleted file mode 100644
index fe51d8d6d..000000000
--- a/web/src/pages/flow/context.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { RAGFlowNodeType } from '@/interfaces/database/flow';
-import { createContext } from 'react';
-
-export const FlowFormContext = createContext<RAGFlowNodeType | undefined>(
-  undefined,
-);
diff --git a/web/src/pages/flow/customer_service.json b/web/src/pages/flow/customer_service.json
deleted file mode 100644
index 497ee6cda..000000000
--- a/web/src/pages/flow/customer_service.json
+++ /dev/null
@@ -1,312 +0,0 @@
-{
-  "edges": [
-    {
-      "id": "63a2f242-8e71-4098-a46a-459a76d538bd",
-      "label": "",
-      "source": "begin",
-      "target": "answer:0"
-    },
-    {
-      "id": "cc6dd8bb-e9dc-46e8-9009-5b96f98ae6c0",
-      "label": "",
-      "source": "generate:casual",
-      "target": "answer:0"
-    },
-    {
-      "id": "58dbf05a-07fc-4a0a-8c03-5f9117e48c35",
-      "label": "",
-      "source": "generate:answer",
-      "target": "answer:0"
-    },
-    {
-      "id": "dd0ff4f2-4d75-4e7d-a505-3e9533402823",
-      "label": "",
-      "source": "generate:complain",
-      "target": "answer:0"
-    },
-    {
-      "id": "3dc7a511-9cde-4080-a572-6b06a64e0458",
-      "label": "",
-      "source": "generate:ask_contact",
-      "target": "answer:0"
-    },
-    {
-      "id": "20e31fee-c392-4257-860a-5844d264198e",
-      "label": "",
-      "source": "message:get_contact",
-      "target": "answer:0"
-    },
-    {
-      "id": "104ac8bb-5d75-4eca-8065-1d8fc2805b8e",
-      "label": "",
-      "source": "answer:0",
-      "target": "categorize:0"
-    },
-    {
-      "id": "755864b5-9eef-44ec-a560-9a23b5a3f9ee",
-      "label": "",
-      "source": "categorize:0",
-      "target": "retrieval:0",
-      "sourceHandle": "product_related"
-    },
-    {
-      "id": "7f68384d-3441-4bfa-bf13-69af67e857d2",
-      "label": "",
-      "source": "categorize:0",
-      "target": "generate:casual",
-      "sourceHandle": "casual"
-    },
-    {
-      "id": "c9bf8e81-9345-4885-b565-be2f5b16f6ef",
-      "label": "",
-      "source": "categorize:0",
-      "target": "generate:complain",
-      "sourceHandle": "complain"
-    },
-    {
-      "id": "2f326699-621b-4d28-ab98-70d99ad21add",
-      "label": "",
-      "source": "categorize:0",
-      "target": "message:get_contact",
-      "sourceHandle": "answer"
-    },
-    {
-      "id": "03e45174-55df-47d6-8e5f-fbe2ffc148d7",
-      "label": "",
-      "source": "retrieval:0",
-      "target": "relevant:0"
-    },
-    {
-      "id": "a26027ac-e8a9-48e4-814c-3262b8d81913",
-      "label": "",
-      "source": "relevant:0",
-      "target": "generate:answer"
-    },
-    {
-      "id": "04d99dc7-6120-4169-98c6-7bc2813aa85b",
-      "label": "",
-      "source": "relevant:0",
-      "target": "generate:ask_contact"
-    }
-  ],
-  "nodes": [
-    {
-      "id": "begin",
-      "type": "beginNode",
-      "position": {
-        "x": 0,
-        "y": 0
-      },
-      "data": {
-        "label": "Begin",
-        "name": "LegalPoetsAttack",
-        "form": {
-          "prologue": "Hi! How can I help you?"
-        }
-      },
-      "sourcePosition": "left",
-      "targetPosition": "right"
-    },
-    {
-      "id": "answer:0",
-      "type": "ragNode",
-      "position": {
-        "x": 0,
-        "y": 0
-      },
-      "data": {
-        "label": "Answer",
-        "name": "ThreeGeeseBehave",
-        "form": {}
-      },
-      "sourcePosition": "left",
-      "targetPosition": "right"
-    },
-    {
-      "id": "categorize:0",
-      "type": "categorizeNode",
-      "position": {
-        "x": 0,
-        "y": 0
-      },
-      "data": {
-        "label": "Categorize",
-        "name": "PublicComicsHammer",
-        "form": {
-          "llm_id": "deepseek-chat",
-          "category_description": {
-            "product_related": {
-              "description": "The question is about the product usage, appearance and how it works.",
-              "examples": "Why it always beaming?\nHow to install it onto the wall?\nIt leaks, what to do?\nException: Can't connect to ES cluster\nHow to build the RAGFlow image from scratch",
-              "to": "retrieval:0"
-            },
-            "casual": {
-              "description": "The question is not about the product usage, appearance and how it works. Just casual chat.",
-              "examples": "How are you doing?\nWhat is your name?\nAre you a robot?\nWhat's the weather?\nWill it rain?",
-              "to": "generate:casual"
-            },
-            "complain": {
-              "description": "Complain even curse about the product or service you provide. But the comment is not specific enough.",
-              "examples": "How bad is it.\nIt's really sucks.\nDamn, for God's sake, can it be more steady?\nShit, I just can't use this shit.\nI can't stand it anymore.",
-              "to": "generate:complain"
-            },
-            "answer": {
-              "description": "This answer provide a specific contact information, like e-mail, phone number, wechat number, line number, twitter, discord, etc,.",
-              "examples": "My phone number is 203921\nkevinhu.hk@gmail.com\nThis is my discord number: johndowson_29384",
-              "to": "message:get_contact"
-            }
-          },
-          "message_history_window_size": 8
-        }
-      },
-      "sourcePosition": "left",
-      "targetPosition": "right"
-    },
-    {
-      "id": "generate:casual",
-      "type": "ragNode",
-      "position": {
-        "x": 0,
-        "y": 0
-      },
-      "data": {
-        "label": "Generate",
-        "name": "SourKnivesPay",
-        "form": {
-          "llm_id": "deepseek-chat",
-          "prompt": "You are a customer support. But the customer wants to have a casual chat with you instead of consulting about the product. Be nice, funny, enthusiasm and concern.",
-          "temperature": 0.9,
-          "message_history_window_size": 12,
-          "cite": false
-        }
-      },
-      "sourcePosition": "left",
-      "targetPosition": "right"
-    },
-    {
-      "id": "generate:complain",
-      "type": "ragNode",
-      "position": {
-        "x": 0,
-        "y": 0
-      },
-      "data": {
-        "label": "Generate",
-        "name": "TameLlamasSniff",
-        "form": {
-          "llm_id": "deepseek-chat",
-          "prompt": "You are a customer support. the Customers complain even curse about the products but not specific enough. You need to ask him/her what's the specific problem with the product. Be nice, patient and concern to soothe your customers’ emotions at first place.",
-          "temperature": 0.9,
-          "message_history_window_size": 12,
-          "cite": false
-        }
-      },
-      "sourcePosition": "left",
-      "targetPosition": "right"
-    },
-    {
-      "id": "retrieval:0",
-      "type": "ragNode",
-      "position": {
-        "x": 0,
-        "y": 0
-      },
-      "data": {
-        "label": "Retrieval",
-        "name": "ShinyPathsDraw",
-        "form": {
-          "similarity_threshold": 0.2,
-          "keywords_similarity_weight": 0.3,
-          "top_n": 6,
-          "top_k": 1024,
-          "rerank_id": "BAAI/bge-reranker-v2-m3",
-          "kb_ids": ["869a236818b811ef91dffa163e197198"]
-        }
-      },
-      "sourcePosition": "left",
-      "targetPosition": "right"
-    },
-    {
-      "id": "relevant:0",
-      "type": "relevantNode",
-      "position": {
-        "x": 0,
-        "y": 0
-      },
-      "data": {
-        "label": "Relevant",
-        "name": "LegalPotsLick",
-        "form": {
-          "llm_id": "deepseek-chat",
-          "temperature": 0.02,
-          "yes": "generate:answer",
-          "no": "generate:ask_contact"
-        }
-      },
-      "sourcePosition": "left",
-      "targetPosition": "right"
-    },
-    {
-      "id": "generate:answer",
-      "type": "ragNode",
-      "position": {
-        "x": 0,
-        "y": 0
-      },
-      "data": {
-        "label": "Generate",
-        "name": "YellowGamesReport",
-        "form": {
-          "llm_id": "deepseek-chat",
-          "prompt": "You are an intelligent assistant. Please answer the question based on content of knowledge base. When all knowledge base content is irrelevant to the question, your answer must include the sentence \"The answer you are looking for is not found in the knowledge base!\". Answers need to consider chat history.\n      Knowledge base content is as following:\n      {input}\n      The above is the content of knowledge base.",
-          "temperature": 0.02
-        }
-      },
-      "sourcePosition": "left",
-      "targetPosition": "right"
-    },
-    {
-      "id": "generate:ask_contact",
-      "type": "ragNode",
-      "position": {
-        "x": 0,
-        "y": 0
-      },
-      "data": {
-        "label": "Generate",
-        "name": "FamousChefsRetire",
-        "form": {
-          "llm_id": "deepseek-chat",
-          "prompt": "You are a customer support. But you can't answer to customers' question. You need to request their contact like E-mail, phone number, Wechat number, LINE number, twitter, discord, etc,. Product experts will contact them later. Please do not ask the same question twice.",
-          "temperature": 0.9,
-          "message_history_window_size": 12,
-          "cite": false
-        }
-      },
-      "sourcePosition": "left",
-      "targetPosition": "right"
-    },
-    {
-      "id": "message:get_contact",
-      "type": "ragNode",
-      "position": {
-        "x": 0,
-        "y": 0
-      },
-      "data": {
-        "label": "Message",
-        "name": "BlueBooksTan",
-        "form": {
-          "messages": [
-            "Okay, I've already write this down. What else I can do for you?",
-            "Get it. What else I can do for you?",
-            "Thanks for your trust! Our expert will contact ASAP. So, anything else I can do for you?",
-            "Thanks! So, anything else I can do for you?"
-          ]
-        }
-      },
-      "sourcePosition": "left",
-      "targetPosition": "right"
-    }
-  ]
-}
diff --git a/web/src/pages/flow/debug-content/index.less b/web/src/pages/flow/debug-content/index.less
deleted file mode 100644
index fda707810..000000000
--- a/web/src/pages/flow/debug-content/index.less
+++ /dev/null
@@ -1,5 +0,0 @@
-.formWrapper {
-  :global(.ant-form-item-label) {
-    font-weight: 600 !important;
-  }
-}
diff --git a/web/src/pages/flow/debug-content/index.tsx b/web/src/pages/flow/debug-content/index.tsx
deleted file mode 100644
index 6fcd4e9a7..000000000
--- a/web/src/pages/flow/debug-content/index.tsx
+++ /dev/null
@@ -1,250 +0,0 @@
-import { Authorization } from '@/constants/authorization';
-import { useSetModalState } from '@/hooks/common-hooks';
-import { useSetSelectedRecord } from '@/hooks/logic-hooks';
-import { useHandleSubmittable } from '@/hooks/login-hooks';
-import api from '@/utils/api';
-import { getAuthorization } from '@/utils/authorization-util';
-import { UploadOutlined } from '@ant-design/icons';
-import {
-  Button,
-  Form,
-  FormItemProps,
-  Input,
-  InputNumber,
-  Select,
-  Switch,
-  Upload,
-} from 'antd';
-import { UploadChangeParam, UploadFile } from 'antd/es/upload';
-import { pick } from 'lodash';
-import { Link } from 'lucide-react';
-import React, { useCallback, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { BeginQueryType } from '../constant';
-import { BeginQuery } from '../interface';
-import { PopoverForm } from './popover-form';
-
-import styles from './index.less';
-import KnowledgeBaseItem from '@/components/knowledge-base-item';
-
-interface IProps {
-  parameters: BeginQuery[];
-  ok(parameters: any[]): void;
-  isNext?: boolean;
-  loading?: boolean;
-  submitButtonDisabled?: boolean;
-}
-
-const DebugContent = ({
-  parameters,
-  ok,
-  isNext = true,
-  loading = false,
-  submitButtonDisabled = false,
-}: IProps) => {
-  const { t } = useTranslation();
-  const [form] = Form.useForm();
-  const {
-    visible,
-    hideModal: hidePopover,
-    switchVisible,
-    showModal: showPopover,
-  } = useSetModalState();
-  const { setRecord, currentRecord } = useSetSelectedRecord<number>();
-  const { submittable } = useHandleSubmittable(form);
-  const [isUploading, setIsUploading] = useState(false);
-
-  const handleShowPopover = useCallback(
-    (idx: number) => () => {
-      setRecord(idx);
-      showPopover();
-    },
-    [setRecord, showPopover],
-  );
-
-  const normFile = (e: any) => {
-    if (Array.isArray(e)) {
-      return e;
-    }
-    return e?.fileList;
-  };
-
-  const onChange = useCallback(
-    (optional: boolean) =>
-      ({ fileList }: UploadChangeParam<UploadFile>) => {
-        if (!optional) {
-          setIsUploading(fileList.some((x) => x.status === 'uploading'));
-        }
-      },
-    [],
-  );
-
-  const renderWidget = useCallback(
-    (q: BeginQuery, idx: number) => {
-      const props: FormItemProps & { key: number } = {
-        key: idx,
-        label: q.name ?? q.key,
-        name: idx,
-      };
-      if (q.optional === false) {
-        props.rules = [{ required: true }];
-      }
-
-      const urlList: { url: string; result: string }[] =
-        form.getFieldValue(idx) || [];
-
-      const BeginQueryTypeMap = {
-        [BeginQueryType.Line]: (
-          <Form.Item {...props}>
-            <Input></Input>
-          </Form.Item>
-        ),
-        [BeginQueryType.Paragraph]: (
-          <Form.Item {...props}>
-            <Input.TextArea rows={1}></Input.TextArea>
-          </Form.Item>
-        ),
-        [BeginQueryType.Options]: (
-          <Form.Item {...props}>
-            <Select
-              allowClear
-              options={q.options?.map((x) => ({ label: x, value: x })) ?? []}
-            ></Select>
-          </Form.Item>
-        ),
-        [BeginQueryType.File]: (
-          <React.Fragment key={idx}>
-            <Form.Item label={q.name ?? q.key} required={!q.optional}>
-              <div className="relative">
-                <Form.Item
-                  {...props}
-                  valuePropName="fileList"
-                  getValueFromEvent={normFile}
-                  noStyle
-                >
-                  <Upload
-                    name="file"
-                    action={api.parse}
-                    multiple
-                    headers={{ [Authorization]: getAuthorization() }}
-                    onChange={onChange(q.optional)}
-                  >
-                    <Button icon={<UploadOutlined />}>
-                      {t('common.upload')}
-                    </Button>
-                  </Upload>
-                </Form.Item>
-                <Form.Item
-                  {...pick(props, ['key', 'label', 'rules'])}
-                  required={!q.optional}
-                  className={urlList.length > 0 ? 'mb-1' : ''}
-                  noStyle
-                >
-                  <PopoverForm visible={visible} switchVisible={switchVisible}>
-                    <Button
-                      onClick={handleShowPopover(idx)}
-                      className="absolute left-1/2 top-0"
-                      icon={<Link className="size-3" />}
-                    >
-                      {t('flow.pasteFileLink')}
-                    </Button>
-                  </PopoverForm>
-                </Form.Item>
-              </div>
-            </Form.Item>
-            <Form.Item name={idx} noStyle {...pick(props, ['rules'])} />
-          </React.Fragment>
-        ),
-        [BeginQueryType.Integer]: (
-          <Form.Item {...props}>
-            <InputNumber></InputNumber>
-          </Form.Item>
-        ),
-        [BeginQueryType.Boolean]: (
-          <Form.Item valuePropName={'checked'} {...props}>
-            <Switch></Switch>
-          </Form.Item>
-        ),
-        [BeginQueryType.KnowledgeBases]: (
-          <KnowledgeBaseItem
-            name={idx.toString()}
-            label={q.name || q.key}
-            required={!q.optional}
-          ></KnowledgeBaseItem>
-        )
-      };
-
-      return (
-        BeginQueryTypeMap[q.type as BeginQueryType] ??
-        BeginQueryTypeMap[BeginQueryType.Paragraph]
-      );
-    },
-    [form, handleShowPopover, onChange, switchVisible, t, visible],
-  );
-
-  const onOk = useCallback(async () => {
-    const values = await form.validateFields();
-    const nextValues = Object.entries(values).map(([key, value]) => {
-      const item = parameters[Number(key)];
-      let nextValue = value;
-      if (Array.isArray(value)) {
-        nextValue = ``;
-
-        if (item.type === 'kb') {
-          nextValue = value.join(',')
-        } else {
-          value.forEach((x) => {
-            nextValue +=
-              x?.originFileObj instanceof File
-                ? `${x.name}\n${x.response?.data}\n----\n`
-                : `${x.url}\n${x.result}\n----\n`;
-          });
-        }
-      }
-      return { ...item, value: nextValue };
-    });
-
-    ok(nextValues);
-  }, [form, ok, parameters]);
-
-  return (
-    <>
-      <section className={styles.formWrapper}>
-        <Form.Provider
-          onFormFinish={(name, { values, forms }) => {
-            if (name === 'urlForm') {
-              const { basicForm } = forms;
-              const urlInfo = basicForm.getFieldValue(currentRecord) || [];
-              basicForm.setFieldsValue({
-                [currentRecord]: [...urlInfo, { ...values, name: values.url }],
-              });
-              hidePopover();
-            }
-          }}
-        >
-          <Form
-            name="basicForm"
-            autoComplete="off"
-            layout={'vertical'}
-            form={form}
-          >
-            {parameters.map((x, idx) => {
-              return renderWidget(x, idx);
-            })}
-          </Form>
-        </Form.Provider>
-      </section>
-      <Button
-        type={'primary'}
-        block
-        onClick={onOk}
-        loading={loading}
-        disabled={!submittable || isUploading || submitButtonDisabled}
-      >
-        {t(isNext ? 'common.next' : 'flow.run')}
-      </Button>
-    </>
-  );
-};
-
-export default DebugContent;
diff --git a/web/src/pages/flow/debug-content/popover-form.tsx b/web/src/pages/flow/debug-content/popover-form.tsx
deleted file mode 100644
index 557e3185b..000000000
--- a/web/src/pages/flow/debug-content/popover-form.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { useParseDocument } from '@/hooks/document-hooks';
-import { useResetFormOnCloseModal } from '@/hooks/logic-hooks';
-import { IModalProps } from '@/interfaces/common';
-import { Button, Form, Input, Popover } from 'antd';
-import { PropsWithChildren } from 'react';
-import { useTranslation } from 'react-i18next';
-
-const reg =
-  /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/;
-
-export const PopoverForm = ({
-  children,
-  visible,
-  switchVisible,
-}: PropsWithChildren<IModalProps<any>>) => {
-  const [form] = Form.useForm();
-  const { parseDocument, loading } = useParseDocument();
-  const { t } = useTranslation();
-
-  useResetFormOnCloseModal({
-    form,
-    visible,
-  });
-
-  const onOk = async () => {
-    const values = await form.validateFields();
-    const val = values.url;
-
-    if (reg.test(val)) {
-      const ret = await parseDocument(val);
-      if (ret?.data?.code === 0) {
-        form.setFieldValue('result', ret?.data?.data);
-        form.submit();
-      }
-    }
-  };
-
-  const content = (
-    <Form form={form} name="urlForm">
-      <Form.Item
-        name="url"
-        rules={[{ required: true, type: 'url' }]}
-        className="m-0"
-      >
-        <Input
-          onPressEnter={(e) => e.preventDefault()}
-          placeholder={t('flow.pasteFileLink')}
-          suffix={
-            <Button
-              type="primary"
-              onClick={onOk}
-              size={'small'}
-              loading={loading}
-            >
-              {t('common.submit')}
-            </Button>
-          }
-        />
-      </Form.Item>
-      <Form.Item name={'result'} noStyle />
-    </Form>
-  );
-
-  return (
-    <Popover
-      content={content}
-      open={visible}
-      trigger={'click'}
-      onOpenChange={switchVisible}
-    >
-      {children}
-    </Popover>
-  );
-};
diff --git a/web/src/pages/flow/flow-drawer/index.less b/web/src/pages/flow/flow-drawer/index.less
deleted file mode 100644
index 1348cc66d..000000000
--- a/web/src/pages/flow/flow-drawer/index.less
+++ /dev/null
@@ -1,21 +0,0 @@
-.title {
-  flex-basis: 60px;
-}
-
-.formWrapper {
-  :global(.ant-form-item-label) {
-    font-weight: 600;
-  }
-}
-
-.operatorDescription {
-  font-size: 14px;
-  padding-top: 16px;
-  font-weight: normal;
-}
-
-.formDrawer {
-  :global(.ant-drawer-content-wrapper) {
-    transform: translateX(0) !important;
-  }
-}
diff --git a/web/src/pages/flow/flow-drawer/index.tsx b/web/src/pages/flow/flow-drawer/index.tsx
deleted file mode 100644
index e9778f1b5..000000000
--- a/web/src/pages/flow/flow-drawer/index.tsx
+++ /dev/null
@@ -1,218 +0,0 @@
-import { useTranslate } from '@/hooks/common-hooks';
-import { IModalProps } from '@/interfaces/common';
-import { CloseOutlined } from '@ant-design/icons';
-import { Drawer, Flex, Form, Input } from 'antd';
-import { get, isPlainObject, lowerFirst } from 'lodash';
-import { Play } from 'lucide-react';
-import { useEffect, useRef } from 'react';
-import { BeginId, Operator, operatorMap } from '../constant';
-import AkShareForm from '../form/akshare-form';
-import AnswerForm from '../form/answer-form';
-import ArXivForm from '../form/arxiv-form';
-import BaiduFanyiForm from '../form/baidu-fanyi-form';
-import BaiduForm from '../form/baidu-form';
-import BeginForm from '../form/begin-form';
-import BingForm from '../form/bing-form';
-import CategorizeForm from '../form/categorize-form';
-import CodeForm from '../form/code-form';
-import CrawlerForm from '../form/crawler-form';
-import DeepLForm from '../form/deepl-form';
-import DuckDuckGoForm from '../form/duckduckgo-form';
-import EmailForm from '../form/email-form';
-import ExeSQLForm from '../form/exesql-form';
-import GenerateForm from '../form/generate-form';
-import GithubForm from '../form/github-form';
-import GoogleForm from '../form/google-form';
-import GoogleScholarForm from '../form/google-scholar-form';
-import InvokeForm from '../form/invoke-form';
-import Jin10Form from '../form/jin10-form';
-import KeywordExtractForm from '../form/keyword-extract-form';
-import MessageForm from '../form/message-form';
-import PubMedForm from '../form/pubmed-form';
-import QWeatherForm from '../form/qweather-form';
-import RelevantForm from '../form/relevant-form';
-import RetrievalForm from '../form/retrieval-form';
-import RewriteQuestionForm from '../form/rewrite-question-form';
-import SwitchForm from '../form/switch-form';
-import TemplateForm from '../form/template-form';
-import TuShareForm from '../form/tushare-form';
-import WenCaiForm from '../form/wencai-form';
-import WikipediaForm from '../form/wikipedia-form';
-import YahooFinanceForm from '../form/yahoo-finance-form';
-import { useHandleFormValuesChange, useHandleNodeNameChange } from '../hooks';
-import OperatorIcon from '../operator-icon';
-import {
-  buildCategorizeListFromObject,
-  getDrawerWidth,
-  needsSingleStepDebugging,
-} from '../utils';
-import SingleDebugDrawer from './single-debug-drawer';
-
-import { RAGFlowNodeType } from '@/interfaces/database/flow';
-import { FlowFormContext } from '../context';
-import { RunTooltip } from '../flow-tooltip';
-import IterationForm from '../form/iteration-from';
-import styles from './index.less';
-
-interface IProps {
-  node?: RAGFlowNodeType;
-  singleDebugDrawerVisible: IModalProps<any>['visible'];
-  hideSingleDebugDrawer: IModalProps<any>['hideModal'];
-  showSingleDebugDrawer: IModalProps<any>['showModal'];
-}
-
-const FormMap = {
-  [Operator.Begin]: BeginForm,
-  [Operator.Retrieval]: RetrievalForm,
-  [Operator.Generate]: GenerateForm,
-  [Operator.Answer]: AnswerForm,
-  [Operator.Categorize]: CategorizeForm,
-  [Operator.Message]: MessageForm,
-  [Operator.Relevant]: RelevantForm,
-  [Operator.RewriteQuestion]: RewriteQuestionForm,
-  [Operator.Baidu]: BaiduForm,
-  [Operator.DuckDuckGo]: DuckDuckGoForm,
-  [Operator.KeywordExtract]: KeywordExtractForm,
-  [Operator.Wikipedia]: WikipediaForm,
-  [Operator.PubMed]: PubMedForm,
-  [Operator.ArXiv]: ArXivForm,
-  [Operator.Google]: GoogleForm,
-  [Operator.Bing]: BingForm,
-  [Operator.GoogleScholar]: GoogleScholarForm,
-  [Operator.DeepL]: DeepLForm,
-  [Operator.GitHub]: GithubForm,
-  [Operator.BaiduFanyi]: BaiduFanyiForm,
-  [Operator.QWeather]: QWeatherForm,
-  [Operator.ExeSQL]: ExeSQLForm,
-  [Operator.Switch]: SwitchForm,
-  [Operator.WenCai]: WenCaiForm,
-  [Operator.AkShare]: AkShareForm,
-  [Operator.YahooFinance]: YahooFinanceForm,
-  [Operator.Jin10]: Jin10Form,
-  [Operator.TuShare]: TuShareForm,
-  [Operator.Crawler]: CrawlerForm,
-  [Operator.Invoke]: InvokeForm,
-  [Operator.Concentrator]: () => <></>,
-  [Operator.Note]: () => <></>,
-  [Operator.Template]: TemplateForm,
-  [Operator.Email]: EmailForm,
-  [Operator.Iteration]: IterationForm,
-  [Operator.IterationStart]: () => <></>,
-  [Operator.Code]: CodeForm,
-};
-
-const EmptyContent = () => <div></div>;
-
-const FormDrawer = ({
-  visible,
-  hideModal,
-  node,
-  singleDebugDrawerVisible,
-  hideSingleDebugDrawer,
-  showSingleDebugDrawer,
-}: IModalProps<any> & IProps) => {
-  const operatorName: Operator = node?.data.label as Operator;
-  const OperatorForm = FormMap[operatorName] ?? EmptyContent;
-  const [form] = Form.useForm();
-  const { name, handleNameBlur, handleNameChange } = useHandleNodeNameChange({
-    id: node?.id,
-    data: node?.data,
-  });
-  const previousId = useRef<string | undefined>(node?.id);
-
-  const { t } = useTranslate('flow');
-
-  const { handleValuesChange } = useHandleFormValuesChange(node?.id);
-
-  useEffect(() => {
-    if (visible) {
-      if (node?.id !== previousId.current) {
-        form.resetFields();
-      }
-
-      if (operatorName === Operator.Categorize) {
-        const items = buildCategorizeListFromObject(
-          get(node, 'data.form.category_description', {}),
-        );
-        const formData = node?.data?.form;
-        if (isPlainObject(formData)) {
-          form.setFieldsValue({ ...formData, items });
-        }
-      } else {
-        form.setFieldsValue(node?.data?.form);
-      }
-      previousId.current = node?.id;
-    }
-  }, [visible, form, node?.data?.form, node?.id, node, operatorName]);
-
-  return (
-    <Drawer
-      title={
-        <Flex vertical>
-          <Flex gap={'middle'} align="center">
-            <OperatorIcon
-              name={operatorName}
-              color={operatorMap[operatorName]?.color}
-            ></OperatorIcon>
-            <Flex align="center" gap={'small'} flex={1}>
-              <label htmlFor="" className={styles.title}>
-                {t('title')}
-              </label>
-              {node?.id === BeginId ? (
-                <span>{t(BeginId)}</span>
-              ) : (
-                <Input
-                  value={name}
-                  onBlur={handleNameBlur}
-                  onChange={handleNameChange}
-                ></Input>
-              )}
-            </Flex>
-
-            {needsSingleStepDebugging(operatorName) && (
-              <RunTooltip>
-                <Play
-                  className="size-5 cursor-pointer"
-                  onClick={showSingleDebugDrawer}
-                />
-              </RunTooltip>
-            )}
-            <CloseOutlined onClick={hideModal} />
-          </Flex>
-          <span className={styles.operatorDescription}>
-            {t(`${lowerFirst(operatorName)}Description`)}
-          </span>
-        </Flex>
-      }
-      placement="right"
-      onClose={hideModal}
-      open={visible}
-      getContainer={false}
-      mask={false}
-      width={getDrawerWidth()}
-      closeIcon={null}
-      rootClassName={styles.formDrawer}
-    >
-      <section className={styles.formWrapper}>
-        {visible && (
-          <FlowFormContext.Provider value={node}>
-            <OperatorForm
-              onValuesChange={handleValuesChange}
-              form={form}
-              node={node}
-            ></OperatorForm>
-          </FlowFormContext.Provider>
-        )}
-      </section>
-      {singleDebugDrawerVisible && (
-        <SingleDebugDrawer
-          visible={singleDebugDrawerVisible}
-          hideModal={hideSingleDebugDrawer}
-          componentId={node?.id}
-        ></SingleDebugDrawer>
-      )}
-    </Drawer>
-  );
-};
-
-export default FormDrawer;
diff --git a/web/src/pages/flow/flow-drawer/single-debug-drawer/index.tsx b/web/src/pages/flow/flow-drawer/single-debug-drawer/index.tsx
deleted file mode 100644
index f9908ef7e..000000000
--- a/web/src/pages/flow/flow-drawer/single-debug-drawer/index.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import CopyToClipboard from '@/components/copy-to-clipboard';
-import { useDebugSingle, useFetchInputElements } from '@/hooks/flow-hooks';
-import { IModalProps } from '@/interfaces/common';
-import { CloseOutlined } from '@ant-design/icons';
-import { Drawer } from 'antd';
-import { isEmpty } from 'lodash';
-import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import JsonView from 'react18-json-view';
-import 'react18-json-view/src/style.css';
-import DebugContent from '../../debug-content';
-
-interface IProps {
-  componentId?: string;
-}
-
-const SingleDebugDrawer = ({
-  componentId,
-  visible,
-  hideModal,
-}: IModalProps<any> & IProps) => {
-  const { t } = useTranslation();
-  const { data: list } = useFetchInputElements(componentId);
-  const { debugSingle, data, loading } = useDebugSingle();
-
-  const onOk = useCallback(
-    (nextValues: any[]) => {
-      if (componentId) {
-        debugSingle({ component_id: componentId, params: nextValues });
-      }
-    },
-    [componentId, debugSingle],
-  );
-
-  const content = JSON.stringify(data, null, 2);
-
-  return (
-    <Drawer
-      title={
-        <div className="flex justify-between">
-          {t('flow.testRun')}
-          <CloseOutlined onClick={hideModal} />
-        </div>
-      }
-      width={'100%'}
-      onClose={hideModal}
-      open={visible}
-      getContainer={false}
-      mask={false}
-      placement={'bottom'}
-      height={'95%'}
-      closeIcon={null}
-    >
-      <section className="overflow-y-auto">
-        <DebugContent
-          parameters={list}
-          ok={onOk}
-          isNext={false}
-          loading={loading}
-          submitButtonDisabled={list.length === 0}
-        ></DebugContent>
-        {!isEmpty(data) ? (
-          <div className="mt-4 rounded-md bg-slate-200 border border-neutral-200">
-            <div className="flex justify-between p-2">
-              <span>JSON</span>
-              <CopyToClipboard text={content}></CopyToClipboard>
-            </div>
-            <JsonView
-              src={data}
-              displaySize
-              collapseStringsAfterLength={100000000000}
-              className="w-full h-[800px] break-words overflow-auto p-2 bg-slate-100"
-            />
-          </div>
-        ) : null}
-      </section>
-    </Drawer>
-  );
-};
-
-export default SingleDebugDrawer;
diff --git a/web/src/pages/flow/flow-id-modal/index.less b/web/src/pages/flow/flow-id-modal/index.less
deleted file mode 100644
index c95b34c95..000000000
--- a/web/src/pages/flow/flow-id-modal/index.less
+++ /dev/null
@@ -1,3 +0,0 @@
-.id {
-  .linkText();
-}
diff --git a/web/src/pages/flow/flow-id-modal/index.tsx b/web/src/pages/flow/flow-id-modal/index.tsx
deleted file mode 100644
index 7c54a3c44..000000000
--- a/web/src/pages/flow/flow-id-modal/index.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { useTranslate } from '@/hooks/common-hooks';
-import { IModalProps } from '@/interfaces/common';
-import { Modal, Typography } from 'antd';
-
-import { useParams } from 'umi';
-import styles from './index.less';
-
-const { Paragraph, Link } = Typography;
-
-const FlowIdModal = ({ hideModal }: IModalProps<any>) => {
-  const { t } = useTranslate('flow');
-  const { id } = useParams();
-
-  return (
-    <Modal
-      title={'Agent ID'}
-      open
-      onCancel={hideModal}
-      cancelButtonProps={{ style: { display: 'none' } }}
-      onOk={hideModal}
-      okText={t('close', { keyPrefix: 'common' })}
-    >
-      <Paragraph copyable={{ text: id }} className={styles.id}>
-        {id}
-      </Paragraph>
-      <Link
-        href="https://ragflow.io/docs/dev/http_api_reference#create-session-with-an-agent"
-        target="_blank"
-      >
-        {t('howUseId')}
-      </Link>
-    </Modal>
-  );
-};
-
-export default FlowIdModal;
diff --git a/web/src/pages/flow/flow-setting/index.less b/web/src/pages/flow/flow-setting/index.less
deleted file mode 100644
index e69de29bb..000000000
diff --git a/web/src/pages/flow/flow-setting/index.tsx b/web/src/pages/flow/flow-setting/index.tsx
deleted file mode 100644
index d371e3f40..000000000
--- a/web/src/pages/flow/flow-setting/index.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import { useTranslate } from '@/hooks/common-hooks';
-import { useFetchFlow, useSettingFlow } from '@/hooks/flow-hooks';
-import { normFile } from '@/utils/file-util';
-import { PlusOutlined } from '@ant-design/icons';
-import { Form, Input, Modal, Radio, Upload } from 'antd';
-import React, { useCallback, useEffect } from 'react';
-export function useFlowSettingModal() {
-  const [visibleSettingModal, setVisibleSettingMModal] = React.useState(false);
-
-  return {
-    visibleSettingModal,
-    setVisibleSettingMModal,
-  };
-}
-
-type FlowSettingModalProps = {
-  visible: boolean;
-  hideModal: () => void;
-  id: string;
-};
-export const FlowSettingModal = ({
-  hideModal,
-  visible,
-  id,
-}: FlowSettingModalProps) => {
-  const { data, refetch } = useFetchFlow();
-  const [form] = Form.useForm();
-  const { t } = useTranslate('flow.settings');
-  const { loading, settingFlow } = useSettingFlow();
-  // Initialize form with data when it becomes available
-  useEffect(() => {
-    if (data) {
-      form.setFieldsValue({
-        title: data.title,
-        description: data.description,
-        permission: data.permission,
-        avatar: data.avatar ? [{ thumbUrl: data.avatar }] : [],
-      });
-    }
-  }, [data, form]);
-
-  const handleSubmit = useCallback(async () => {
-    if (!id) return;
-    try {
-      const { avatar, ...others } = await form.validateFields();
-      const param = {
-        ...others,
-        id,
-        avatar: avatar && avatar.length > 0 ? avatar[0].thumbUrl : '',
-      };
-      settingFlow(param);
-    } catch (error) {
-      console.error('Validation failed:', error);
-    }
-  }, [form, id, settingFlow]);
-  React.useEffect(() => {
-    if (!loading && refetch && visible) {
-      refetch();
-    }
-  }, [loading, refetch, visible]);
-  return (
-    <Modal
-      confirmLoading={loading}
-      title={t('agentSetting')}
-      open={visible}
-      onCancel={hideModal}
-      onOk={handleSubmit}
-      okText={t('save', { keyPrefix: 'common' })}
-      cancelText={t('cancel', { keyPrefix: 'common' })}
-    >
-      <Form
-        form={form}
-        labelCol={{ span: 6 }}
-        wrapperCol={{ span: 18 }}
-        layout="horizontal"
-        style={{ maxWidth: 600 }}
-      >
-        <Form.Item
-          name="title"
-          label={t('title')}
-          rules={[{ required: true, message: 'Please input a title!' }]}
-        >
-          <Input />
-        </Form.Item>
-        <Form.Item
-          name="avatar"
-          label={t('photo')}
-          valuePropName="fileList"
-          getValueFromEvent={normFile}
-        >
-          <Upload
-            listType="picture-card"
-            maxCount={1}
-            beforeUpload={() => false}
-            showUploadList={{ showPreviewIcon: false, showRemoveIcon: false }}
-          >
-            <button style={{ border: 0, background: 'none' }} type="button">
-              <PlusOutlined />
-              <div style={{ marginTop: 8 }}>{t('upload')}</div>
-            </button>
-          </Upload>
-        </Form.Item>
-        <Form.Item name="description" label={t('description')}>
-          <Input.TextArea rows={4} />
-        </Form.Item>
-
-        <Form.Item
-          name="permission"
-          label={t('permissions')}
-          tooltip={t('permissionsTip')}
-          rules={[{ required: true }]}
-        >
-          <Radio.Group>
-            <Radio value="me">{t('me')}</Radio>
-            <Radio value="team">{t('team')}</Radio>
-          </Radio.Group>
-        </Form.Item>
-      </Form>
-    </Modal>
-  );
-};
diff --git a/web/src/pages/flow/flow-sider/index.less b/web/src/pages/flow/flow-sider/index.less
deleted file mode 100644
index 52d09a15c..000000000
--- a/web/src/pages/flow/flow-sider/index.less
+++ /dev/null
@@ -1,16 +0,0 @@
-.operatorCard {
-  :global(.ant-card-body) {
-    padding: 10px;
-  }
-  .cubeIcon {
-    &:hover {
-      cursor: pointer;
-    }
-  }
-}
-
-.siderContent {
-  padding: 10px 4px;
-  overflow: auto;
-  height: calc(100vh - 80px);
-}
diff --git a/web/src/pages/flow/flow-sider/index.tsx b/web/src/pages/flow/flow-sider/index.tsx
deleted file mode 100644
index b8e888b70..000000000
--- a/web/src/pages/flow/flow-sider/index.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { useTranslate } from '@/hooks/common-hooks';
-import { Card, Divider, Flex, Layout, Tooltip } from 'antd';
-import classNames from 'classnames';
-import lowerFirst from 'lodash/lowerFirst';
-import React from 'react';
-import { Operator, componentMenuList, operatorMap } from '../constant';
-import { useHandleDrag } from '../hooks';
-import OperatorIcon from '../operator-icon';
-import styles from './index.less';
-
-const { Sider } = Layout;
-
-interface IProps {
-  setCollapsed: (width: boolean) => void;
-  collapsed: boolean;
-}
-
-const dividerProps = {
-  marginTop: 10,
-  marginBottom: 10,
-  padding: 0,
-  borderBlockColor: '#b4afaf',
-  borderStyle: 'dotted',
-};
-
-const FlowSide = ({ setCollapsed, collapsed }: IProps) => {
-  const { handleDragStart } = useHandleDrag();
-  const { t } = useTranslate('flow');
-
-  return (
-    <Sider
-      collapsible
-      collapsed={collapsed}
-      collapsedWidth={0}
-      theme={'light'}
-      onCollapse={(value) => setCollapsed(value)}
-    >
-      <Flex vertical gap={10} className={styles.siderContent}>
-        {componentMenuList.map((x) => {
-          return (
-            <React.Fragment key={x.name}>
-              {x.name === Operator.Note && (
-                <Divider style={dividerProps}></Divider>
-              )}
-              {x.name === Operator.DuckDuckGo && (
-                <Divider style={dividerProps}></Divider>
-              )}
-              <Card
-                key={x.name}
-                hoverable
-                draggable
-                className={classNames(styles.operatorCard)}
-                onDragStart={handleDragStart(x.name)}
-              >
-                <Flex align="center" gap={15}>
-                  <OperatorIcon
-                    name={x.name}
-                    color={operatorMap[x.name].color}
-                  ></OperatorIcon>
-                  <section>
-                    <Tooltip title={t(`${lowerFirst(x.name)}Description`)}>
-                      <b>{t(lowerFirst(x.name))}</b>
-                    </Tooltip>
-                  </section>
-                </Flex>
-              </Card>
-            </React.Fragment>
-          );
-        })}
-      </Flex>
-    </Sider>
-  );
-};
-
-export default FlowSide;
diff --git a/web/src/pages/flow/flow-tooltip.tsx b/web/src/pages/flow/flow-tooltip.tsx
deleted file mode 100644
index 9386dd06b..000000000
--- a/web/src/pages/flow/flow-tooltip.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
-import { PropsWithChildren } from 'react';
-import { useTranslation } from 'react-i18next';
-
-export const RunTooltip = ({ children }: PropsWithChildren) => {
-  const { t } = useTranslation();
-  return (
-    <Tooltip>
-      <TooltipTrigger>{children}</TooltipTrigger>
-      <TooltipContent>
-        <p>{t('flow.testRun')}</p>
-      </TooltipContent>
-    </Tooltip>
-  );
-};
diff --git a/web/src/pages/flow/form-hooks.ts b/web/src/pages/flow/form-hooks.ts
deleted file mode 100644
index 372288e6f..000000000
--- a/web/src/pages/flow/form-hooks.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { useTranslate } from '@/hooks/common-hooks';
-import { useCallback, useMemo } from 'react';
-import { Operator, RestrictedUpstreamMap } from './constant';
-import useGraphStore from './store';
-
-export const useBuildFormSelectOptions = (
-  operatorName: Operator,
-  selfId?: string, // exclude the current node
-) => {
-  const nodes = useGraphStore((state) => state.nodes);
-
-  const buildCategorizeToOptions = useCallback(
-    (toList: string[]) => {
-      const excludedNodes: Operator[] = [
-        Operator.Note,
-        ...(RestrictedUpstreamMap[operatorName] ?? []),
-      ];
-      return nodes
-        .filter(
-          (x) =>
-            excludedNodes.every((y) => y !== x.data.label) &&
-            x.id !== selfId &&
-            !toList.some((y) => y === x.id), // filter out selected values ​​in other to fields from the current drop-down box options
-        )
-        .map((x) => ({ label: x.data.name, value: x.id }));
-    },
-    [nodes, operatorName, selfId],
-  );
-
-  return buildCategorizeToOptions;
-};
-
-/**
- * dumped
- * @param nodeId
- * @returns
- */
-export const useHandleFormSelectChange = (nodeId?: string) => {
-  const { addEdge, deleteEdgeBySourceAndSourceHandle } = useGraphStore(
-    (state) => state,
-  );
-  const handleSelectChange = useCallback(
-    (name?: string) => (value?: string) => {
-      if (nodeId && name) {
-        if (value) {
-          addEdge({
-            source: nodeId,
-            target: value,
-            sourceHandle: name,
-            targetHandle: null,
-          });
-        } else {
-          // clear selected value
-          deleteEdgeBySourceAndSourceHandle({
-            source: nodeId,
-            sourceHandle: name,
-          });
-        }
-      }
-    },
-    [addEdge, nodeId, deleteEdgeBySourceAndSourceHandle],
-  );
-
-  return { handleSelectChange };
-};
-
-export const useBuildSortOptions = () => {
-  const { t } = useTranslate('flow');
-
-  const options = useMemo(() => {
-    return ['data', 'relevance'].map((x) => ({
-      value: x,
-      label: t(x),
-    }));
-  }, [t]);
-  return options;
-};
diff --git a/web/src/pages/flow/form/akshare-form/index.tsx b/web/src/pages/flow/form/akshare-form/index.tsx
deleted file mode 100644
index 1f7ce99f1..000000000
--- a/web/src/pages/flow/form/akshare-form/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import TopNItem from '@/components/top-n-item';
-import { Form } from 'antd';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
-
-const AkShareForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <TopNItem initialValue={10} max={99}></TopNItem>
-    </Form>
-  );
-};
-
-export default AkShareForm;
diff --git a/web/src/pages/flow/form/answer-form/index.tsx b/web/src/pages/flow/form/answer-form/index.tsx
deleted file mode 100644
index 8db015c05..000000000
--- a/web/src/pages/flow/form/answer-form/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const AnswerForm = () => {
-  return <div></div>;
-};
-
-export default AnswerForm;
diff --git a/web/src/pages/flow/form/arxiv-form/index.tsx b/web/src/pages/flow/form/arxiv-form/index.tsx
deleted file mode 100644
index a44592148..000000000
--- a/web/src/pages/flow/form/arxiv-form/index.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import TopNItem from '@/components/top-n-item';
-import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Select } from 'antd';
-import { useMemo } from 'react';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
-
-const ArXivForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const { t } = useTranslate('flow');
-
-  const options = useMemo(() => {
-    return ['submittedDate', 'lastUpdatedDate', 'relevance'].map((x) => ({
-      value: x,
-      label: t(x),
-    }));
-  }, [t]);
-
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-
-      <TopNItem initialValue={10}></TopNItem>
-      <Form.Item label={t('sortBy')} name={'sort_by'}>
-        <Select options={options}></Select>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default ArXivForm;
diff --git a/web/src/pages/flow/form/baidu-fanyi-form/index.tsx b/web/src/pages/flow/form/baidu-fanyi-form/index.tsx
deleted file mode 100644
index c4b399026..000000000
--- a/web/src/pages/flow/form/baidu-fanyi-form/index.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Input, Select } from 'antd';
-import { useMemo } from 'react';
-import {
-  BaiduFanyiDomainOptions,
-  BaiduFanyiSourceLangOptions,
-} from '../../constant';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
-
-const BaiduFanyiForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const { t } = useTranslate('flow');
-  const options = useMemo(() => {
-    return ['translate', 'fieldtranslate'].map((x) => ({
-      value: x,
-      label: t(`baiduSecretKeyOptions.${x}`),
-    }));
-  }, [t]);
-
-  const baiduFanyiOptions = useMemo(() => {
-    return BaiduFanyiDomainOptions.map((x) => ({
-      value: x,
-      label: t(`baiduDomainOptions.${x}`),
-    }));
-  }, [t]);
-
-  const baiduFanyiSourceLangOptions = useMemo(() => {
-    return BaiduFanyiSourceLangOptions.map((x) => ({
-      value: x,
-      label: t(`baiduSourceLangOptions.${x}`),
-    }));
-  }, [t]);
-
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <Form.Item label={t('appid')} name={'appid'}>
-        <Input></Input>
-      </Form.Item>
-      <Form.Item label={t('secretKey')} name={'secret_key'}>
-        <Input></Input>
-      </Form.Item>
-      <Form.Item label={t('transType')} name={'trans_type'}>
-        <Select options={options}></Select>
-      </Form.Item>
-      <Form.Item noStyle dependencies={['model_type']}>
-        {({ getFieldValue }) =>
-          getFieldValue('trans_type') === 'fieldtranslate' && (
-            <Form.Item label={t('domain')} name={'domain'}>
-              <Select options={baiduFanyiOptions}></Select>
-            </Form.Item>
-          )
-        }
-      </Form.Item>
-      <Form.Item label={t('sourceLang')} name={'source_lang'}>
-        <Select options={baiduFanyiSourceLangOptions}></Select>
-      </Form.Item>
-      <Form.Item label={t('targetLang')} name={'target_lang'}>
-        <Select options={baiduFanyiSourceLangOptions}></Select>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default BaiduFanyiForm;
diff --git a/web/src/pages/flow/form/baidu-form/index.tsx b/web/src/pages/flow/form/baidu-form/index.tsx
deleted file mode 100644
index 0c866e488..000000000
--- a/web/src/pages/flow/form/baidu-form/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import TopNItem from '@/components/top-n-item';
-import { Form } from 'antd';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
-
-const BaiduForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <TopNItem initialValue={10}></TopNItem>
-    </Form>
-  );
-};
-
-export default BaiduForm;
diff --git a/web/src/pages/flow/form/begin-form/begin-dynamic-options.tsx b/web/src/pages/flow/form/begin-form/begin-dynamic-options.tsx
deleted file mode 100644
index bcc9c5788..000000000
--- a/web/src/pages/flow/form/begin-form/begin-dynamic-options.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
-import { Button, Form, Input } from 'antd';
-
-const BeginDynamicOptions = () => {
-  return (
-    <Form.List
-      name="options"
-      rules={[
-        {
-          validator: async (_, names) => {
-            if (!names || names.length < 1) {
-              return Promise.reject(new Error('At least 1 option'));
-            }
-          },
-        },
-      ]}
-    >
-      {(fields, { add, remove }, { errors }) => (
-        <>
-          {fields.map((field, index) => (
-            <Form.Item
-              label={index === 0 ? 'Options' : ''}
-              required={false}
-              key={field.key}
-            >
-              <Form.Item
-                {...field}
-                validateTrigger={['onChange', 'onBlur']}
-                rules={[
-                  {
-                    required: true,
-                    whitespace: true,
-                    message: 'Please input option or delete this field.',
-                  },
-                ]}
-                noStyle
-              >
-                <Input
-                  placeholder="option"
-                  style={{ width: '90%', marginRight: 16 }}
-                />
-              </Form.Item>
-              {fields.length > 1 ? (
-                <MinusCircleOutlined
-                  className="dynamic-delete-button"
-                  onClick={() => remove(field.name)}
-                />
-              ) : null}
-            </Form.Item>
-          ))}
-          <Form.Item>
-            <Button
-              type="dashed"
-              onClick={() => add()}
-              icon={<PlusOutlined />}
-              block
-            >
-              Add option
-            </Button>
-            <Form.ErrorList errors={errors} />
-          </Form.Item>
-        </>
-      )}
-    </Form.List>
-  );
-};
-
-export default BeginDynamicOptions;
diff --git a/web/src/pages/flow/form/begin-form/hooks.ts b/web/src/pages/flow/form/begin-form/hooks.ts
deleted file mode 100644
index b045f5dc5..000000000
--- a/web/src/pages/flow/form/begin-form/hooks.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { useSetModalState } from '@/hooks/common-hooks';
-import { useSetSelectedRecord } from '@/hooks/logic-hooks';
-import { useCallback, useMemo, useState } from 'react';
-import { BeginQuery, IOperatorForm } from '../../interface';
-
-export const useEditQueryRecord = ({ form, onValuesChange }: IOperatorForm) => {
-  const { setRecord, currentRecord } = useSetSelectedRecord<BeginQuery>();
-  const { visible, hideModal, showModal } = useSetModalState();
-  const [index, setIndex] = useState(-1);
-
-  const otherThanCurrentQuery = useMemo(() => {
-    const query: BeginQuery[] = form?.getFieldValue('query') || [];
-    return query.filter((item, idx) => idx !== index);
-  }, [form, index]);
-
-  const handleEditRecord = useCallback(
-    (record: BeginQuery) => {
-      const query: BeginQuery[] = form?.getFieldValue('query') || [];
-
-      const nextQuery: BeginQuery[] =
-        index > -1 ? query.toSpliced(index, 1, record) : [...query, record];
-
-      onValuesChange?.(
-        { query: nextQuery },
-        { query: nextQuery, prologue: form?.getFieldValue('prologue') },
-      );
-      hideModal();
-    },
-    [form, hideModal, index, onValuesChange],
-  );
-
-  const handleShowModal = useCallback(
-    (idx?: number, record?: BeginQuery) => {
-      setIndex(idx ?? -1);
-      setRecord(record ?? ({} as BeginQuery));
-      showModal();
-    },
-    [setRecord, showModal],
-  );
-
-  return {
-    ok: handleEditRecord,
-    currentRecord,
-    setRecord,
-    visible,
-    hideModal,
-    showModal: handleShowModal,
-    otherThanCurrentQuery,
-  };
-};
diff --git a/web/src/pages/flow/form/begin-form/index.less b/web/src/pages/flow/form/begin-form/index.less
deleted file mode 100644
index 0a03d4743..000000000
--- a/web/src/pages/flow/form/begin-form/index.less
+++ /dev/null
@@ -1,24 +0,0 @@
-.dynamicInputVariable {
-  background-color: #ebe9e950;
-  :global(.ant-collapse-content) {
-    background-color: #f6f6f657;
-  }
-  :global(.ant-collapse-content-box) {
-    padding: 0 !important;
-  }
-  margin-bottom: 20px;
-  .title {
-    font-weight: 600;
-    font-size: 16px;
-  }
-
-  .addButton {
-    color: rgb(22, 119, 255);
-    font-weight: 600;
-  }
-}
-
-.addButton {
-  color: rgb(22, 119, 255);
-  font-weight: 600;
-}
diff --git a/web/src/pages/flow/form/begin-form/index.tsx b/web/src/pages/flow/form/begin-form/index.tsx
deleted file mode 100644
index 8df1181f1..000000000
--- a/web/src/pages/flow/form/begin-form/index.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { PlusOutlined } from '@ant-design/icons';
-import { Button, Form, Input } from 'antd';
-import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { BeginQuery, IOperatorForm } from '../../interface';
-import { useEditQueryRecord } from './hooks';
-import { ModalForm } from './paramater-modal';
-import QueryTable from './query-table';
-
-import styles from './index.less';
-
-type FieldType = {
-  prologue?: string;
-};
-
-const BeginForm = ({ onValuesChange, form }: IOperatorForm) => {
-  const { t } = useTranslation();
-  const {
-    ok,
-    currentRecord,
-    visible,
-    hideModal,
-    showModal,
-    otherThanCurrentQuery,
-  } = useEditQueryRecord({
-    form,
-    onValuesChange,
-  });
-
-  const handleDeleteRecord = useCallback(
-    (idx: number) => {
-      const query = form?.getFieldValue('query') || [];
-      const nextQuery = query.filter(
-        (item: BeginQuery, index: number) => index !== idx,
-      );
-      onValuesChange?.(
-        { query: nextQuery },
-        { query: nextQuery, prologue: form?.getFieldValue('prologue') },
-      );
-    },
-    [form, onValuesChange],
-  );
-
-  return (
-    <Form.Provider
-      onFormFinish={(name, { values }) => {
-        if (name === 'queryForm') {
-          ok(values as BeginQuery);
-        }
-      }}
-    >
-      <Form
-        name="basicForm"
-        onValuesChange={onValuesChange}
-        autoComplete="off"
-        form={form}
-        layout="vertical"
-      >
-        <Form.Item<FieldType>
-          name={'prologue'}
-          label={t('chat.setAnOpener')}
-          tooltip={t('chat.setAnOpenerTip')}
-          initialValue={t('chat.setAnOpenerInitial')}
-        >
-          <Input.TextArea autoSize={{ minRows: 5 }} />
-        </Form.Item>
-        {/* Create a hidden field to make Form instance record this */}
-        <Form.Item name="query" noStyle />
-
-        <Form.Item
-          shouldUpdate={(prevValues, curValues) =>
-            prevValues.query !== curValues.query
-          }
-        >
-          {({ getFieldValue }) => {
-            const query: BeginQuery[] = getFieldValue('query') || [];
-            return (
-              <QueryTable
-                data={query}
-                showModal={showModal}
-                deleteRecord={handleDeleteRecord}
-              ></QueryTable>
-            );
-          }}
-        </Form.Item>
-
-        <Button
-          htmlType="button"
-          style={{ margin: '0 8px' }}
-          onClick={() => showModal()}
-          icon={<PlusOutlined />}
-          block
-          className={styles.addButton}
-        >
-          {t('flow.addItem')}
-        </Button>
-        {visible && (
-          <ModalForm
-            visible={visible}
-            hideModal={hideModal}
-            initialValue={currentRecord}
-            onOk={ok}
-            otherThanCurrentQuery={otherThanCurrentQuery}
-          />
-        )}
-      </Form>
-    </Form.Provider>
-  );
-};
-
-export default BeginForm;
diff --git a/web/src/pages/flow/form/begin-form/paramater-modal.tsx b/web/src/pages/flow/form/begin-form/paramater-modal.tsx
deleted file mode 100644
index 7d689601b..000000000
--- a/web/src/pages/flow/form/begin-form/paramater-modal.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import { useResetFormOnCloseModal } from '@/hooks/logic-hooks';
-import { IModalProps } from '@/interfaces/common';
-import { Form, Input, Modal, Select, Switch } from 'antd';
-import { DefaultOptionType } from 'antd/es/select';
-import { useEffect, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { BeginQueryType, BeginQueryTypeIconMap } from '../../constant';
-import { BeginQuery } from '../../interface';
-import BeginDynamicOptions from './begin-dynamic-options';
-
-export const ModalForm = ({
-  visible,
-  initialValue,
-  hideModal,
-  otherThanCurrentQuery,
-}: IModalProps<BeginQuery> & {
-  initialValue: BeginQuery;
-  otherThanCurrentQuery: BeginQuery[];
-}) => {
-  const { t } = useTranslation();
-  const [form] = Form.useForm();
-  const options = useMemo(() => {
-    return Object.values(BeginQueryType).reduce<DefaultOptionType[]>(
-      (pre, cur) => {
-        const Icon = BeginQueryTypeIconMap[cur];
-
-        return [
-          ...pre,
-          {
-            label: (
-              <div className="flex items-center gap-2">
-                <Icon
-                  className={`size-${cur === BeginQueryType.Options ? 4 : 5}`}
-                ></Icon>
-                {cur}
-              </div>
-            ),
-            value: cur,
-          },
-        ];
-      },
-      [],
-    );
-  }, []);
-
-  useResetFormOnCloseModal({
-    form,
-    visible: visible,
-  });
-
-  useEffect(() => {
-    form.setFieldsValue(initialValue);
-  }, [form, initialValue]);
-
-  const onOk = () => {
-    form.submit();
-  };
-
-  return (
-    <Modal
-      title={t('flow.variableSettings')}
-      open={visible}
-      onOk={onOk}
-      onCancel={hideModal}
-      centered
-    >
-      <Form form={form} layout="vertical" name="queryForm" autoComplete="false">
-        <Form.Item
-          name="type"
-          label="Type"
-          rules={[{ required: true }]}
-          initialValue={BeginQueryType.Line}
-        >
-          <Select options={options} />
-        </Form.Item>
-        <Form.Item
-          name="key"
-          label="Key"
-          rules={[
-            { required: true },
-            () => ({
-              validator(_, value) {
-                if (
-                  !value ||
-                  !otherThanCurrentQuery.some((x) => x.key === value)
-                ) {
-                  return Promise.resolve();
-                }
-                return Promise.reject(new Error('The key cannot be repeated!'));
-              },
-            }),
-          ]}
-        >
-          <Input />
-        </Form.Item>
-        <Form.Item name="name" label="Name" rules={[{ required: true }]}>
-          <Input />
-        </Form.Item>
-        <Form.Item
-          name="optional"
-          label={'Optional'}
-          valuePropName="checked"
-          initialValue={false}
-        >
-          <Switch />
-        </Form.Item>
-        <Form.Item
-          shouldUpdate={(prevValues, curValues) =>
-            prevValues.type !== curValues.type
-          }
-        >
-          {({ getFieldValue }) => {
-            const type: BeginQueryType = getFieldValue('type');
-            return (
-              type === BeginQueryType.Options && (
-                <BeginDynamicOptions></BeginDynamicOptions>
-              )
-            );
-          }}
-        </Form.Item>
-      </Form>
-    </Modal>
-  );
-};
diff --git a/web/src/pages/flow/form/begin-form/query-table.tsx b/web/src/pages/flow/form/begin-form/query-table.tsx
deleted file mode 100644
index c7614e682..000000000
--- a/web/src/pages/flow/form/begin-form/query-table.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
-import type { TableProps } from 'antd';
-import { Collapse, Space, Table, Tooltip } from 'antd';
-import { BeginQuery } from '../../interface';
-
-import { useTranslation } from 'react-i18next';
-import styles from './index.less';
-
-interface IProps {
-  data: BeginQuery[];
-  deleteRecord(index: number): void;
-  showModal(index: number, record: BeginQuery): void;
-}
-
-const QueryTable = ({ data, deleteRecord, showModal }: IProps) => {
-  const { t } = useTranslation();
-
-  const columns: TableProps<BeginQuery>['columns'] = [
-    {
-      title: 'Key',
-      dataIndex: 'key',
-      key: 'key',
-      ellipsis: {
-        showTitle: false,
-      },
-      render: (key) => (
-        <Tooltip placement="topLeft" title={key}>
-          {key}
-        </Tooltip>
-      ),
-    },
-    {
-      title: t('flow.name'),
-      dataIndex: 'name',
-      key: 'name',
-      ellipsis: {
-        showTitle: false,
-      },
-      render: (name) => (
-        <Tooltip placement="topLeft" title={name}>
-          {name}
-        </Tooltip>
-      ),
-    },
-    {
-      title: t('flow.type'),
-      dataIndex: 'type',
-      key: 'type',
-    },
-    {
-      title: t('flow.optional'),
-      dataIndex: 'optional',
-      key: 'optional',
-      render: (optional) => (optional ? 'Yes' : 'No'),
-    },
-    {
-      title: t('common.action'),
-      key: 'action',
-      render: (_, record, idx) => (
-        <Space>
-          <EditOutlined onClick={() => showModal(idx, record)} />
-          <DeleteOutlined
-            className="cursor-pointer"
-            onClick={() => deleteRecord(idx)}
-          />
-        </Space>
-      ),
-    },
-  ];
-
-  return (
-    <Collapse
-      defaultActiveKey={['1']}
-      className={styles.dynamicInputVariable}
-      items={[
-        {
-          key: '1',
-          label: <span className={styles.title}>{t('flow.input')}</span>,
-          children: (
-            <Table<BeginQuery>
-              columns={columns}
-              dataSource={data}
-              pagination={false}
-            />
-          ),
-        },
-      ]}
-    />
-  );
-};
-
-export default QueryTable;
diff --git a/web/src/pages/flow/form/bing-form/index.tsx b/web/src/pages/flow/form/bing-form/index.tsx
deleted file mode 100644
index b640f08d0..000000000
--- a/web/src/pages/flow/form/bing-form/index.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import TopNItem from '@/components/top-n-item';
-import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Input, Select } from 'antd';
-import { useMemo } from 'react';
-import { BingCountryOptions, BingLanguageOptions } from '../../constant';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
-
-const BingForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const { t } = useTranslate('flow');
-
-  const options = useMemo(() => {
-    return ['Webpages', 'News'].map((x) => ({ label: x, value: x }));
-  }, []);
-
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <TopNItem initialValue={10}></TopNItem>
-      <Form.Item label={t('channel')} name={'channel'}>
-        <Select options={options}></Select>
-      </Form.Item>
-      <Form.Item label={t('apiKey')} name={'api_key'}>
-        <Input></Input>
-      </Form.Item>
-      <Form.Item label={t('country')} name={'country'}>
-        <Select options={BingCountryOptions}></Select>
-      </Form.Item>
-      <Form.Item label={t('language')} name={'language'}>
-        <Select options={BingLanguageOptions}></Select>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default BingForm;
diff --git a/web/src/pages/flow/form/categorize-form/dynamic-categorize.tsx b/web/src/pages/flow/form/categorize-form/dynamic-categorize.tsx
deleted file mode 100644
index 7d3987971..000000000
--- a/web/src/pages/flow/form/categorize-form/dynamic-categorize.tsx
+++ /dev/null
@@ -1,225 +0,0 @@
-import { useTranslate } from '@/hooks/common-hooks';
-import { CloseOutlined, PlusOutlined } from '@ant-design/icons';
-import { useUpdateNodeInternals } from '@xyflow/react';
-import {
-  Button,
-  Collapse,
-  Flex,
-  Form,
-  FormListFieldData,
-  Input,
-  Select,
-} from 'antd';
-import { FormInstance } from 'antd/lib';
-import { humanId } from 'human-id';
-import trim from 'lodash/trim';
-import {
-  ChangeEventHandler,
-  FocusEventHandler,
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
-import { Operator } from '../../constant';
-import { useBuildFormSelectOptions } from '../../form-hooks';
-
-import styles from './index.less';
-
-interface IProps {
-  nodeId?: string;
-}
-
-interface INameInputProps {
-  value?: string;
-  onChange?: (value: string) => void;
-  otherNames?: string[];
-  validate(errors: string[]): void;
-}
-
-const getOtherFieldValues = (
-  form: FormInstance,
-  formListName: string = 'items',
-  field: FormListFieldData,
-  latestField: string,
-) =>
-  (form.getFieldValue([formListName]) ?? [])
-    .map((x: any) => x[latestField])
-    .filter(
-      (x: string) =>
-        x !== form.getFieldValue([formListName, field.name, latestField]),
-    );
-
-const NameInput = ({
-  value,
-  onChange,
-  otherNames,
-  validate,
-}: INameInputProps) => {
-  const [name, setName] = useState<string | undefined>();
-  const { t } = useTranslate('flow');
-
-  const handleNameChange: ChangeEventHandler<HTMLInputElement> = useCallback(
-    (e) => {
-      const val = e.target.value;
-      // trigger validation
-      if (otherNames?.some((x) => x === val)) {
-        validate([t('nameRepeatedMsg')]);
-      } else if (trim(val) === '') {
-        validate([t('nameRequiredMsg')]);
-      } else {
-        validate([]);
-      }
-      setName(val);
-    },
-    [otherNames, validate, t],
-  );
-
-  const handleNameBlur: FocusEventHandler<HTMLInputElement> = useCallback(
-    (e) => {
-      const val = e.target.value;
-      if (otherNames?.every((x) => x !== val) && trim(val) !== '') {
-        onChange?.(val);
-      }
-    },
-    [onChange, otherNames],
-  );
-
-  useEffect(() => {
-    setName(value);
-  }, [value]);
-
-  return (
-    <Input
-      value={name}
-      onChange={handleNameChange}
-      onBlur={handleNameBlur}
-    ></Input>
-  );
-};
-
-const FormSet = ({ nodeId, field }: IProps & { field: FormListFieldData }) => {
-  const form = Form.useFormInstance();
-  const { t } = useTranslate('flow');
-  const buildCategorizeToOptions = useBuildFormSelectOptions(
-    Operator.Categorize,
-    nodeId,
-  );
-
-  return (
-    <section>
-      <Form.Item
-        label={t('categoryName')}
-        name={[field.name, 'name']}
-        validateTrigger={['onChange', 'onBlur']}
-        rules={[
-          {
-            required: true,
-            whitespace: true,
-            message: t('nameMessage'),
-          },
-        ]}
-      >
-        <NameInput
-          otherNames={getOtherFieldValues(form, 'items', field, 'name')}
-          validate={(errors: string[]) =>
-            form.setFields([
-              {
-                name: ['items', field.name, 'name'],
-                errors,
-              },
-            ])
-          }
-        ></NameInput>
-      </Form.Item>
-      <Form.Item label={t('description')} name={[field.name, 'description']}>
-        <Input.TextArea rows={3} />
-      </Form.Item>
-      <Form.Item label={t('examples')} name={[field.name, 'examples']}>
-        <Input.TextArea rows={3} />
-      </Form.Item>
-      <Form.Item label={t('nextStep')} name={[field.name, 'to']}>
-        <Select
-          allowClear
-          options={buildCategorizeToOptions(
-            getOtherFieldValues(form, 'items', field, 'to'),
-          )}
-        />
-      </Form.Item>
-      <Form.Item hidden name={[field.name, 'index']}>
-        <Input />
-      </Form.Item>
-    </section>
-  );
-};
-
-const DynamicCategorize = ({ nodeId }: IProps) => {
-  const updateNodeInternals = useUpdateNodeInternals();
-  const form = Form.useFormInstance();
-
-  const { t } = useTranslate('flow');
-
-  return (
-    <>
-      <Form.List name="items">
-        {(fields, { add, remove }) => {
-          const handleAdd = () => {
-            const idx = form.getFieldValue([
-              'items',
-              fields.at(-1)?.name,
-              'index',
-            ]);
-            add({
-              name: humanId(),
-              index: fields.length === 0 ? 0 : idx + 1,
-            });
-            if (nodeId) updateNodeInternals(nodeId);
-          };
-
-          return (
-            <Flex gap={18} vertical>
-              {fields.map((field) => (
-                <Collapse
-                  size="small"
-                  key={field.key}
-                  className={styles.caseCard}
-                  items={[
-                    {
-                      key: field.key,
-                      label: (
-                        <div className="flex justify-between">
-                          <span>
-                            {form.getFieldValue(['items', field.name, 'name'])}
-                          </span>
-                          <CloseOutlined
-                            onClick={() => {
-                              remove(field.name);
-                            }}
-                          />
-                        </div>
-                      ),
-                      children: (
-                        <FormSet nodeId={nodeId} field={field}></FormSet>
-                      ),
-                    },
-                  ]}
-                ></Collapse>
-              ))}
-
-              <Button
-                type="dashed"
-                onClick={handleAdd}
-                block
-                className={styles.addButton}
-                icon={<PlusOutlined />}
-              >
-                {t('addCategory')}
-              </Button>
-            </Flex>
-          );
-        }}
-      </Form.List>
-    </>
-  );
-};
-
-export default DynamicCategorize;
diff --git a/web/src/pages/flow/form/categorize-form/hooks.ts b/web/src/pages/flow/form/categorize-form/hooks.ts
deleted file mode 100644
index a7e8f23f3..000000000
--- a/web/src/pages/flow/form/categorize-form/hooks.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import {
-  ICategorizeItem,
-  ICategorizeItemResult,
-} from '@/interfaces/database/flow';
-import omit from 'lodash/omit';
-import { useCallback } from 'react';
-import { IOperatorForm } from '../../interface';
-
-/**
-   * Convert the list in the following form into an object
-   * {
-    "items": [
-      {
-        "name": "Categorize 1",
-        "description": "111",
-        "examples": "ddd",
-        "to": "Retrieval:LazyEelsStick"
-      }
-     ]
-    }
-*/
-const buildCategorizeObjectFromList = (list: Array<ICategorizeItem>) => {
-  return list.reduce<ICategorizeItemResult>((pre, cur) => {
-    if (cur?.name) {
-      pre[cur.name] = omit(cur, 'name');
-    }
-    return pre;
-  }, {});
-};
-
-export const useHandleFormValuesChange = ({
-  onValuesChange,
-}: IOperatorForm) => {
-  const handleValuesChange = useCallback(
-    (changedValues: any, values: any) => {
-      onValuesChange?.(changedValues, {
-        ...omit(values, 'items'),
-        category_description: buildCategorizeObjectFromList(values.items),
-      });
-    },
-    [onValuesChange],
-  );
-
-  return { handleValuesChange };
-};
diff --git a/web/src/pages/flow/form/categorize-form/index.less b/web/src/pages/flow/form/categorize-form/index.less
deleted file mode 100644
index 6d78e80f9..000000000
--- a/web/src/pages/flow/form/categorize-form/index.less
+++ /dev/null
@@ -1,13 +0,0 @@
-@lightBackgroundColor: rgba(150, 150, 150, 0.07);
-@darkBackgroundColor: rgba(150, 150, 150, 0.12);
-
-.caseCard {
-  :global(.ant-collapse-content) {
-    background-color: @darkBackgroundColor;
-  }
-}
-
-.addButton {
-  color: rgb(22, 119, 255);
-  font-weight: 600;
-}
diff --git a/web/src/pages/flow/form/categorize-form/index.tsx b/web/src/pages/flow/form/categorize-form/index.tsx
deleted file mode 100644
index cb6651a24..000000000
--- a/web/src/pages/flow/form/categorize-form/index.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import LLMSelect from '@/components/llm-select';
-import MessageHistoryWindowSizeItem from '@/components/message-history-window-size-item';
-import { useTranslate } from '@/hooks/common-hooks';
-import { Form } from 'antd';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
-import DynamicCategorize from './dynamic-categorize';
-import { useHandleFormValuesChange } from './hooks';
-
-const CategorizeForm = ({ form, onValuesChange, node }: IOperatorForm) => {
-  const { t } = useTranslate('flow');
-  const { handleValuesChange } = useHandleFormValuesChange({
-    form,
-    nodeId: node?.id,
-    onValuesChange,
-  });
-
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={handleValuesChange}
-      initialValues={{ items: [{}] }}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <Form.Item
-        name={'llm_id'}
-        label={t('model', { keyPrefix: 'chat' })}
-        tooltip={t('modelTip', { keyPrefix: 'chat' })}
-      >
-        <LLMSelect></LLMSelect>
-      </Form.Item>
-      <MessageHistoryWindowSizeItem
-        initialValue={1}
-      ></MessageHistoryWindowSizeItem>
-      <DynamicCategorize nodeId={node?.id}></DynamicCategorize>
-    </Form>
-  );
-};
-
-export default CategorizeForm;
diff --git a/web/src/pages/flow/form/code-form/dynamic-input-variable.tsx b/web/src/pages/flow/form/code-form/dynamic-input-variable.tsx
deleted file mode 100644
index 8fc55c0be..000000000
--- a/web/src/pages/flow/form/code-form/dynamic-input-variable.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { RAGFlowNodeType } from '@/interfaces/database/flow';
-import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
-import { Button, Form, Input, Select } from 'antd';
-import { useTranslation } from 'react-i18next';
-import { useBuildComponentIdSelectOptions } from '../../hooks/use-get-begin-query';
-import { FormCollapse } from '../components/dynamic-input-variable';
-
-type DynamicInputVariableProps = {
-  name?: string;
-  node?: RAGFlowNodeType;
-};
-
-export const DynamicInputVariable = ({
-  name = 'arguments',
-  node,
-}: DynamicInputVariableProps) => {
-  const { t } = useTranslation();
-
-  const valueOptions = useBuildComponentIdSelectOptions(
-    node?.id,
-    node?.parentId,
-  );
-
-  return (
-    <FormCollapse title={t('flow.inputVariables')}>
-      <Form.List name={name}>
-        {(fields, { add, remove }) => (
-          <>
-            {fields.map(({ key, name, ...restField }) => (
-              <div key={key} className="flex items-center gap-2 pb-4">
-                <Form.Item
-                  {...restField}
-                  name={[name, 'name']}
-                  className="m-0 flex-1"
-                >
-                  <Input />
-                </Form.Item>
-                <Form.Item
-                  {...restField}
-                  name={[name, 'component_id']}
-                  className="m-0 flex-1"
-                >
-                  <Select
-                    placeholder={t('common.pleaseSelect')}
-                    options={valueOptions}
-                  ></Select>
-                </Form.Item>
-                <MinusCircleOutlined onClick={() => remove(name)} />
-              </div>
-            ))}
-            <Form.Item>
-              <Button
-                type="dashed"
-                onClick={() => add()}
-                block
-                icon={<PlusOutlined />}
-              >
-                {t('flow.addVariable')}
-              </Button>
-            </Form.Item>
-          </>
-        )}
-      </Form.List>
-    </FormCollapse>
-  );
-};
diff --git a/web/src/pages/flow/form/code-form/dynamic-output-variable.tsx b/web/src/pages/flow/form/code-form/dynamic-output-variable.tsx
deleted file mode 100644
index 0e7e3a03c..000000000
--- a/web/src/pages/flow/form/code-form/dynamic-output-variable.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
-import { Button, Form, Input, Select } from 'antd';
-import { useTranslation } from 'react-i18next';
-import { FormCollapse } from '../components/dynamic-input-variable';
-
-type DynamicOutputVariableProps = {
-  name?: string;
-};
-
-const options = [
-  'String',
-  'Number',
-  'Boolean',
-  'Array[String]',
-  'Array[Number]',
-  'Object',
-].map((x) => ({ label: x, value: x }));
-
-export const DynamicOutputVariable = ({
-  name = 'output',
-}: DynamicOutputVariableProps) => {
-  const { t } = useTranslation();
-
-  return (
-    <FormCollapse title={t('flow.output')}>
-      <Form.List name={name}>
-        {(fields, { add, remove }) => (
-          <>
-            {fields.map(({ key, name, ...restField }) => (
-              <div key={key} className="flex items-center gap-2 pb-4">
-                <Form.Item
-                  {...restField}
-                  name={[name, 'first']}
-                  className="m-0 flex-1"
-                >
-                  <Input />
-                </Form.Item>
-                <Form.Item
-                  {...restField}
-                  name={[name, 'last']}
-                  className="m-0 flex-1"
-                >
-                  <Select
-                    placeholder={t('common.pleaseSelect')}
-                    options={options}
-                  ></Select>
-                </Form.Item>
-                <MinusCircleOutlined onClick={() => remove(name)} />
-              </div>
-            ))}
-            <Form.Item>
-              <Button
-                type="dashed"
-                onClick={() => add()}
-                block
-                icon={<PlusOutlined />}
-              >
-                {t('flow.addVariable')}
-              </Button>
-            </Form.Item>
-          </>
-        )}
-      </Form.List>
-    </FormCollapse>
-  );
-};
diff --git a/web/src/pages/flow/form/code-form/index.less b/web/src/pages/flow/form/code-form/index.less
deleted file mode 100644
index cde868bb6..000000000
--- a/web/src/pages/flow/form/code-form/index.less
+++ /dev/null
@@ -1,16 +0,0 @@
-.languageItem {
-  margin: 0;
-  :global(.ant-select-selector) {
-    background: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
-  }
-  :global(.ant-select-selector:hover) {
-    border: none !important;
-    box-shadow: none !important;
-  }
-  :global(.ant-select-focused .ant-select-selector) {
-    border: none !important;
-    box-shadow: none !important;
-  }
-}
diff --git a/web/src/pages/flow/form/code-form/index.tsx b/web/src/pages/flow/form/code-form/index.tsx
deleted file mode 100644
index 754ffa3f4..000000000
--- a/web/src/pages/flow/form/code-form/index.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import Editor, { loader } from '@monaco-editor/react';
-import { Form, Select } from 'antd';
-import { IOperatorForm } from '../../interface';
-import { DynamicInputVariable } from './dynamic-input-variable';
-
-import { CodeTemplateStrMap, ProgrammingLanguage } from '@/constants/agent';
-import { ICodeForm } from '@/interfaces/database/flow';
-import { useCallback } from 'react';
-import useGraphStore from '../../store';
-import styles from './index.less';
-
-loader.config({ paths: { vs: '/vs' } });
-
-const options = [
-  ProgrammingLanguage.Python,
-  ProgrammingLanguage.Javascript,
-].map((x) => ({ value: x, label: x }));
-
-const CodeForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const formData = node?.data.form as ICodeForm;
-  const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
-
-  const handleChange = useCallback(
-    (value: ProgrammingLanguage) => {
-      if (node?.id) {
-        updateNodeForm(
-          node?.id,
-          CodeTemplateStrMap[value as ProgrammingLanguage],
-          ['script'],
-        );
-      }
-    },
-    [node?.id, updateNodeForm],
-  );
-
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <Form.Item
-        name={'script'}
-        label={
-          <Form.Item name={'lang'} className={styles.languageItem}>
-            <Select
-              defaultValue={ProgrammingLanguage.Python}
-              popupMatchSelectWidth={false}
-              options={options}
-              onChange={handleChange}
-            />
-          </Form.Item>
-        }
-        className="bg-gray-100 rounded dark:bg-gray-800"
-      >
-        <Editor
-          height={600}
-          theme="vs-dark"
-          language={formData.lang}
-          options={{
-            minimap: { enabled: false },
-            automaticLayout: true,
-          }}
-        />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default CodeForm;
diff --git a/web/src/pages/flow/form/components/dynamic-input-variable.tsx b/web/src/pages/flow/form/components/dynamic-input-variable.tsx
deleted file mode 100644
index 269719dcd..000000000
--- a/web/src/pages/flow/form/components/dynamic-input-variable.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import { RAGFlowNodeType } from '@/interfaces/database/flow';
-import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
-import { Button, Collapse, Flex, Form, Input, Select } from 'antd';
-import { PropsWithChildren, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useBuildComponentIdSelectOptions } from '../../hooks/use-get-begin-query';
-
-import styles from './index.less';
-
-interface IProps {
-  name?: string;
-  node?: RAGFlowNodeType;
-  title?: string;
-}
-
-enum VariableType {
-  Reference = 'reference',
-  Input = 'input',
-}
-
-const getVariableName = (type: string) =>
-  type === VariableType.Reference ? 'component_id' : 'value';
-
-const DynamicVariableForm = ({ name: formName, node }: IProps) => {
-  const nextFormName = formName || 'query';
-  const { t } = useTranslation();
-  const valueOptions = useBuildComponentIdSelectOptions(
-    node?.id,
-    node?.parentId,
-  );
-  const form = Form.useFormInstance();
-
-  const options = [
-    { value: VariableType.Reference, label: t('flow.reference') },
-    { value: VariableType.Input, label: t('flow.text') },
-  ];
-
-  const handleTypeChange = useCallback(
-    (name: number) => () => {
-      setTimeout(() => {
-        form.setFieldValue([nextFormName, name, 'component_id'], undefined);
-        form.setFieldValue([nextFormName, name, 'value'], undefined);
-      }, 0);
-    },
-    [form, nextFormName],
-  );
-
-  return (
-    <Form.List name={nextFormName}>
-      {(fields, { add, remove }) => (
-        <>
-          {fields.map(({ key, name, ...restField }) => (
-            <Flex key={key} gap={10} align={'baseline'}>
-              <Form.Item
-                {...restField}
-                name={[name, 'type']}
-                className={styles.variableType}
-              >
-                <Select
-                  options={options}
-                  onChange={handleTypeChange(name)}
-                ></Select>
-              </Form.Item>
-              <Form.Item noStyle dependencies={[name, 'type']}>
-                {({ getFieldValue }) => {
-                  const type = getFieldValue([nextFormName, name, 'type']);
-                  return (
-                    <Form.Item
-                      {...restField}
-                      name={[name, getVariableName(type)]}
-                      className={styles.variableValue}
-                    >
-                      {type === VariableType.Reference ? (
-                        <Select
-                          placeholder={t('common.pleaseSelect')}
-                          options={valueOptions}
-                        ></Select>
-                      ) : (
-                        <Input placeholder={t('common.pleaseInput')} />
-                      )}
-                    </Form.Item>
-                  );
-                }}
-              </Form.Item>
-              <MinusCircleOutlined onClick={() => remove(name)} />
-            </Flex>
-          ))}
-          <Form.Item>
-            <Button
-              type="dashed"
-              onClick={() => add({ type: VariableType.Reference })}
-              block
-              icon={<PlusOutlined />}
-              className={styles.addButton}
-            >
-              {t('flow.addVariable')}
-            </Button>
-          </Form.Item>
-        </>
-      )}
-    </Form.List>
-  );
-};
-
-export function FormCollapse({
-  children,
-  title,
-}: PropsWithChildren<{ title: string }>) {
-  return (
-    <Collapse
-      className={styles.dynamicInputVariable}
-      defaultActiveKey={['1']}
-      items={[
-        {
-          key: '1',
-          label: <span className={styles.title}>{title}</span>,
-          children,
-        },
-      ]}
-    />
-  );
-}
-
-const DynamicInputVariable = ({ name, node, title }: IProps) => {
-  const { t } = useTranslation();
-  return (
-    <FormCollapse title={title || t('flow.input')}>
-      <DynamicVariableForm name={name} node={node}></DynamicVariableForm>
-    </FormCollapse>
-  );
-};
-
-export default DynamicInputVariable;
diff --git a/web/src/pages/flow/form/components/index.less b/web/src/pages/flow/form/components/index.less
deleted file mode 100644
index 344514d9e..000000000
--- a/web/src/pages/flow/form/components/index.less
+++ /dev/null
@@ -1,22 +0,0 @@
-.dynamicInputVariable {
-  background-color: #ebe9e950;
-  :global(.ant-collapse-content) {
-    background-color: #f6f6f657;
-  }
-  margin-bottom: 20px;
-  .title {
-    font-weight: 600;
-    font-size: 16px;
-  }
-  .variableType {
-    width: 30%;
-  }
-  .variableValue {
-    flex: 1;
-  }
-
-  .addButton {
-    color: rgb(22, 119, 255);
-    font-weight: 600;
-  }
-}
diff --git a/web/src/pages/flow/form/concentrator-form/index.tsx b/web/src/pages/flow/form/concentrator-form/index.tsx
deleted file mode 100644
index d409f3099..000000000
--- a/web/src/pages/flow/form/concentrator-form/index.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Form } from 'antd';
-import { IOperatorForm } from '../../interface';
-
-const ConcentratorForm = ({ onValuesChange, form }: IOperatorForm) => {
-  return (
-    <Form
-      name="basic"
-      labelCol={{ span: 8 }}
-      wrapperCol={{ span: 16 }}
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-    ></Form>
-  );
-};
-
-export default ConcentratorForm;
diff --git a/web/src/pages/flow/form/crawler-form/index.tsx b/web/src/pages/flow/form/crawler-form/index.tsx
deleted file mode 100644
index 8ef5f14d6..000000000
--- a/web/src/pages/flow/form/crawler-form/index.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Input, Select } from 'antd';
-import { useMemo } from 'react';
-import { CrawlerResultOptions } from '../../constant';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
-const CrawlerForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const { t } = useTranslate('flow');
-  const crawlerResultOptions = useMemo(() => {
-    return CrawlerResultOptions.map((x) => ({
-      value: x,
-      label: t(`crawlerResultOptions.${x}`),
-    }));
-  }, [t]);
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <Form.Item label={t('proxy')} name={'proxy'}>
-        <Input placeholder="like: http://127.0.0.1:8888"></Input>
-      </Form.Item>
-      <Form.Item
-        label={t('extractType')}
-        name={'extract_type'}
-        initialValue="markdown"
-      >
-        <Select options={crawlerResultOptions}></Select>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default CrawlerForm;
diff --git a/web/src/pages/flow/form/deepl-form/index.tsx b/web/src/pages/flow/form/deepl-form/index.tsx
deleted file mode 100644
index 1fc8cfc26..000000000
--- a/web/src/pages/flow/form/deepl-form/index.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import TopNItem from '@/components/top-n-item';
-import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Select } from 'antd';
-import { DeepLSourceLangOptions, DeepLTargetLangOptions } from '../../constant';
-import { useBuildSortOptions } from '../../form-hooks';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
-
-const DeepLForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const { t } = useTranslate('flow');
-  const options = useBuildSortOptions();
-
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <TopNItem initialValue={5}></TopNItem>
-      <Form.Item label={t('authKey')} name={'auth_key'}>
-        <Select options={options}></Select>
-      </Form.Item>
-      <Form.Item label={t('sourceLang')} name={'source_lang'}>
-        <Select options={DeepLSourceLangOptions}></Select>
-      </Form.Item>
-      <Form.Item label={t('targetLang')} name={'target_lang'}>
-        <Select options={DeepLTargetLangOptions}></Select>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default DeepLForm;
diff --git a/web/src/pages/flow/form/duckduckgo-form/index.tsx b/web/src/pages/flow/form/duckduckgo-form/index.tsx
deleted file mode 100644
index 53462da31..000000000
--- a/web/src/pages/flow/form/duckduckgo-form/index.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import TopNItem from '@/components/top-n-item';
-import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Select } from 'antd';
-import { useMemo } from 'react';
-import { Channel } from '../../constant';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
-
-const DuckDuckGoForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const { t } = useTranslate('flow');
-
-  const options = useMemo(() => {
-    return Object.values(Channel).map((x) => ({ value: x, label: t(x) }));
-  }, [t]);
-
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <TopNItem initialValue={10}></TopNItem>
-      <Form.Item
-        label={t('channel')}
-        name={'channel'}
-        tooltip={t('channelTip')}
-        initialValue={'text'}
-      >
-        <Select options={options}></Select>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default DuckDuckGoForm;
diff --git a/web/src/pages/flow/form/email-form/index.tsx b/web/src/pages/flow/form/email-form/index.tsx
deleted file mode 100644
index 9bee7997f..000000000
--- a/web/src/pages/flow/form/email-form/index.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Input } from 'antd';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
-
-const EmailForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const { t } = useTranslate('flow');
-
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-
-      {/* SMTP服务器配置 */}
-      <Form.Item label={t('smtpServer')} name={'smtp_server'}>
-        <Input placeholder="smtp.example.com" />
-      </Form.Item>
-      <Form.Item label={t('smtpPort')} name={'smtp_port'}>
-        <Input type="number" placeholder="587" />
-      </Form.Item>
-      <Form.Item label={t('senderEmail')} name={'email'}>
-        <Input placeholder="sender@example.com" />
-      </Form.Item>
-      <Form.Item label={t('authCode')} name={'password'}>
-        <Input.Password placeholder="your_password" />
-      </Form.Item>
-      <Form.Item label={t('senderName')} name={'sender_name'}>
-        <Input placeholder="Sender Name" />
-      </Form.Item>
-
-      {/* 动态参数说明 */}
-      <div style={{ marginBottom: 24 }}>
-        <h4>{t('dynamicParameters')}</h4>
-        <div>{t('jsonFormatTip')}</div>
-        <pre style={{ background: '#f5f5f5', padding: 12, borderRadius: 4 }}>
-          {`{
-  "to_email": "recipient@example.com",  
-  "cc_email": "cc@example.com",
-  "subject": "Email Subject",           
-  "content": "Email Content"            
-}`}
-        </pre>
-      </div>
-    </Form>
-  );
-};
-
-export default EmailForm;
diff --git a/web/src/pages/flow/form/exesql-form/index.tsx b/web/src/pages/flow/form/exesql-form/index.tsx
deleted file mode 100644
index f88f593d0..000000000
--- a/web/src/pages/flow/form/exesql-form/index.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import LLMSelect from '@/components/llm-select';
-import TopNItem from '@/components/top-n-item';
-import { useTranslate } from '@/hooks/common-hooks';
-import { useTestDbConnect } from '@/hooks/flow-hooks';
-import { Button, Flex, Form, Input, InputNumber, Select } from 'antd';
-import { useCallback } from 'react';
-import { ExeSQLOptions } from '../../constant';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
-
-const ExeSQLForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const { t } = useTranslate('flow');
-  const { testDbConnect, loading } = useTestDbConnect();
-
-  const handleTest = useCallback(async () => {
-    const ret = await form?.validateFields();
-    testDbConnect(ret);
-  }, [form, testDbConnect]);
-
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <Form.Item
-        name={'llm_id'}
-        label={t('model', { keyPrefix: 'chat' })}
-        tooltip={t('modelTip', { keyPrefix: 'chat' })}
-      >
-        <LLMSelect></LLMSelect>
-      </Form.Item>
-      <Form.Item
-        label={t('dbType')}
-        name={'db_type'}
-        rules={[{ required: true }]}
-      >
-        <Select options={ExeSQLOptions}></Select>
-      </Form.Item>
-      <Form.Item
-        label={t('database')}
-        name={'database'}
-        rules={[{ required: true }]}
-      >
-        <Input></Input>
-      </Form.Item>
-      <Form.Item
-        label={t('username')}
-        name={'username'}
-        rules={[{ required: true }]}
-      >
-        <Input></Input>
-      </Form.Item>
-      <Form.Item label={t('host')} name={'host'} rules={[{ required: true }]}>
-        <Input></Input>
-      </Form.Item>
-      <Form.Item label={t('port')} name={'port'} rules={[{ required: true }]}>
-        <InputNumber></InputNumber>
-      </Form.Item>
-      <Form.Item
-        label={t('password')}
-        name={'password'}
-        rules={[{ required: true }]}
-      >
-        <Input.Password></Input.Password>
-      </Form.Item>
-      <Form.Item
-        label={t('loop')}
-        name={'loop'}
-        tooltip={t('loopTip')}
-        rules={[{ required: true }]}
-      >
-        <InputNumber></InputNumber>
-      </Form.Item>
-      <TopNItem initialValue={30} max={1000}></TopNItem>
-      <Flex justify={'end'}>
-        <Button type={'primary'} loading={loading} onClick={handleTest}>
-          Test
-        </Button>
-      </Flex>
-    </Form>
-  );
-};
-
-export default ExeSQLForm;
diff --git a/web/src/pages/flow/form/generate-form/dynamic-parameters.tsx b/web/src/pages/flow/form/generate-form/dynamic-parameters.tsx
deleted file mode 100644
index 463437da3..000000000
--- a/web/src/pages/flow/form/generate-form/dynamic-parameters.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { EditableCell, EditableRow } from '@/components/editable-cell';
-import { useTranslate } from '@/hooks/common-hooks';
-import { RAGFlowNodeType } from '@/interfaces/database/flow';
-import { DeleteOutlined } from '@ant-design/icons';
-import { Button, Flex, Select, Table, TableProps } from 'antd';
-import { useBuildComponentIdSelectOptions } from '../../hooks/use-get-begin-query';
-import { IGenerateParameter } from '../../interface';
-import { useHandleOperateParameters } from './hooks';
-
-import styles from './index.less';
-interface IProps {
-  node?: RAGFlowNodeType;
-}
-
-const components = {
-  body: {
-    row: EditableRow,
-    cell: EditableCell,
-  },
-};
-
-const DynamicParameters = ({ node }: IProps) => {
-  const nodeId = node?.id;
-  const { t } = useTranslate('flow');
-
-  const options = useBuildComponentIdSelectOptions(nodeId, node?.parentId);
-  const {
-    dataSource,
-    handleAdd,
-    handleRemove,
-    handleSave,
-    handleComponentIdChange,
-  } = useHandleOperateParameters(nodeId!);
-
-  const columns: TableProps<IGenerateParameter>['columns'] = [
-    {
-      title: t('key'),
-      dataIndex: 'key',
-      key: 'key',
-      width: '40%',
-      onCell: (record: IGenerateParameter) => ({
-        record,
-        editable: true,
-        dataIndex: 'key',
-        title: 'key',
-        handleSave,
-      }),
-    },
-    {
-      title: t('value'),
-      dataIndex: 'component_id',
-      key: 'component_id',
-      align: 'center',
-      width: '40%',
-      render(text, record) {
-        return (
-          <Select
-            style={{ width: '100%' }}
-            allowClear
-            options={options}
-            value={text}
-            onChange={handleComponentIdChange(record)}
-          />
-        );
-      },
-    },
-    {
-      title: t('operation'),
-      dataIndex: 'operation',
-      width: 20,
-      key: 'operation',
-      align: 'center',
-      fixed: 'right',
-      render(_, record) {
-        return <DeleteOutlined onClick={handleRemove(record.id)} />;
-      },
-    },
-  ];
-
-  return (
-    <section>
-      <Flex justify="end">
-        <Button size="small" onClick={handleAdd}>
-          {t('add')}
-        </Button>
-      </Flex>
-      <Table
-        dataSource={dataSource}
-        columns={columns}
-        rowKey={'id'}
-        className={styles.variableTable}
-        components={components}
-        rowClassName={() => styles.editableRow}
-        scroll={{ x: true }}
-        bordered
-      />
-    </section>
-  );
-};
-
-export default DynamicParameters;
diff --git a/web/src/pages/flow/form/generate-form/hooks.ts b/web/src/pages/flow/form/generate-form/hooks.ts
deleted file mode 100644
index 8aa179cf9..000000000
--- a/web/src/pages/flow/form/generate-form/hooks.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import get from 'lodash/get';
-import { useCallback, useMemo } from 'react';
-import { v4 as uuid } from 'uuid';
-import { IGenerateParameter } from '../../interface';
-import useGraphStore from '../../store';
-
-export const useHandleOperateParameters = (nodeId: string) => {
-  const { getNode, updateNodeForm } = useGraphStore((state) => state);
-  const node = getNode(nodeId);
-  const dataSource: IGenerateParameter[] = useMemo(
-    () => get(node, 'data.form.parameters', []) as IGenerateParameter[],
-    [node],
-  );
-
-  const handleComponentIdChange = useCallback(
-    (row: IGenerateParameter) => (value: string) => {
-      const newData = [...dataSource];
-      const index = newData.findIndex((item) => row.id === item.id);
-      const item = newData[index];
-      newData.splice(index, 1, {
-        ...item,
-        component_id: value,
-      });
-
-      updateNodeForm(nodeId, { parameters: newData });
-    },
-    [updateNodeForm, nodeId, dataSource],
-  );
-
-  const handleRemove = useCallback(
-    (id?: string) => () => {
-      const newData = dataSource.filter((item) => item.id !== id);
-      updateNodeForm(nodeId, { parameters: newData });
-    },
-    [updateNodeForm, nodeId, dataSource],
-  );
-
-  const handleAdd = useCallback(() => {
-    updateNodeForm(nodeId, {
-      parameters: [
-        ...dataSource,
-        {
-          id: uuid(),
-          key: '',
-          component_id: undefined,
-        },
-      ],
-    });
-  }, [dataSource, nodeId, updateNodeForm]);
-
-  const handleSave = (row: IGenerateParameter) => {
-    const newData = [...dataSource];
-    const index = newData.findIndex((item) => row.id === item.id);
-    const item = newData[index];
-    newData.splice(index, 1, {
-      ...item,
-      ...row,
-    });
-
-    updateNodeForm(nodeId, { parameters: newData });
-  };
-
-  return {
-    handleAdd,
-    handleRemove,
-    handleComponentIdChange,
-    handleSave,
-    dataSource,
-  };
-};
diff --git a/web/src/pages/flow/form/generate-form/index.less b/web/src/pages/flow/form/generate-form/index.less
deleted file mode 100644
index 8de5a4f53..000000000
--- a/web/src/pages/flow/form/generate-form/index.less
+++ /dev/null
@@ -1,21 +0,0 @@
-.variableTable {
-  margin-top: 14px;
-}
-.editableRow {
-  :global(.editable-cell) {
-    position: relative;
-  }
-
-  :global(.editable-cell-value-wrap) {
-    padding: 5px 12px;
-    cursor: pointer;
-    height: 30px !important;
-  }
-  &:hover {
-    :global(.editable-cell-value-wrap) {
-      padding: 4px 11px;
-      border: 1px solid #d9d9d9;
-      border-radius: 2px;
-    }
-  }
-}
diff --git a/web/src/pages/flow/form/generate-form/index.tsx b/web/src/pages/flow/form/generate-form/index.tsx
deleted file mode 100644
index e2e7ed5b7..000000000
--- a/web/src/pages/flow/form/generate-form/index.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import LLMSelect from '@/components/llm-select';
-import MessageHistoryWindowSizeItem from '@/components/message-history-window-size-item';
-import { PromptEditor } from '@/components/prompt-editor';
-import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Switch } from 'antd';
-import { IOperatorForm } from '../../interface';
-import LLMToolsSelect from '@/components/llm-tools-select';
-import { useState } from 'react';
-
-const GenerateForm = ({ onValuesChange, form }: IOperatorForm) => {
-  const { t } = useTranslate('flow');
-
-  const [isCurrentLlmSupportTools, setCurrentLlmSupportTools] = useState(false);
-
-  const onLlmSelectChanged = (_: string, option: any) => {
-    setCurrentLlmSupportTools(option.is_tools);
-  };
-
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <Form.Item
-        name={'llm_id'}
-        label={t('model', { keyPrefix: 'chat' })}
-        tooltip={t('modelTip', { keyPrefix: 'chat' })}
-      >
-        <LLMSelect onInitialValue={onLlmSelectChanged} onChange={onLlmSelectChanged}></LLMSelect>
-      </Form.Item>
-      <Form.Item
-        name={['prompt']}
-        label={t('systemPrompt')}
-        initialValue={t('promptText')}
-        tooltip={t('promptTip')}
-        rules={[
-          {
-            required: true,
-            message: t('promptMessage'),
-          },
-        ]}
-      >
-        {/* <Input.TextArea rows={8}></Input.TextArea> */}
-        <PromptEditor></PromptEditor>
-      </Form.Item>
-      <Form.Item
-        name={'llm_enabled_tools'}
-        label={t('modelEnabledTools', { keyPrefix: 'chat' })}
-        tooltip={t('modelEnabledToolsTip', { keyPrefix: 'chat' })}
-      >
-        <LLMToolsSelect disabled={!isCurrentLlmSupportTools}></LLMToolsSelect>
-      </Form.Item>
-      <Form.Item
-        name={['cite']}
-        label={t('cite')}
-        initialValue={true}
-        valuePropName="checked"
-        tooltip={t('citeTip')}
-      >
-        <Switch />
-      </Form.Item>
-      <MessageHistoryWindowSizeItem
-        initialValue={12}
-      ></MessageHistoryWindowSizeItem>
-    </Form>
-  );
-};
-
-export default GenerateForm;
diff --git a/web/src/pages/flow/form/github-form/index.tsx b/web/src/pages/flow/form/github-form/index.tsx
deleted file mode 100644
index 691dd5d36..000000000
--- a/web/src/pages/flow/form/github-form/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import TopNItem from '@/components/top-n-item';
-import { Form } from 'antd';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
-
-const GithubForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <TopNItem initialValue={5}></TopNItem>
-    </Form>
-  );
-};
-
-export default GithubForm;
diff --git a/web/src/pages/flow/form/google-form/index.tsx b/web/src/pages/flow/form/google-form/index.tsx
deleted file mode 100644
index 75bd3fb5e..000000000
--- a/web/src/pages/flow/form/google-form/index.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import TopNItem from '@/components/top-n-item';
-import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Input, Select } from 'antd';
-import { GoogleCountryOptions, GoogleLanguageOptions } from '../../constant';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
-
-const GoogleForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const { t } = useTranslate('flow');
-
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <TopNItem initialValue={10}></TopNItem>
-      <Form.Item label={t('apiKey')} name={'api_key'}>
-        <Input></Input>
-      </Form.Item>
-      <Form.Item label={t('country')} name={'country'}>
-        <Select options={GoogleCountryOptions}></Select>
-      </Form.Item>
-      <Form.Item label={t('language')} name={'language'}>
-        <Select options={GoogleLanguageOptions}></Select>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default GoogleForm;
diff --git a/web/src/pages/flow/form/google-scholar-form/index.tsx b/web/src/pages/flow/form/google-scholar-form/index.tsx
deleted file mode 100644
index 4e87fac25..000000000
--- a/web/src/pages/flow/form/google-scholar-form/index.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import TopNItem from '@/components/top-n-item';
-import { useTranslate } from '@/hooks/common-hooks';
-import { DatePicker, DatePickerProps, Form, Select, Switch } from 'antd';
-import dayjs from 'dayjs';
-import { useCallback, useMemo } from 'react';
-import { useBuildSortOptions } from '../../form-hooks';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
-
-const YearPicker = ({
-  onChange,
-  value,
-}: {
-  onChange?: (val: number | undefined) => void;
-  value?: number | undefined;
-}) => {
-  const handleChange: DatePickerProps['onChange'] = useCallback(
-    (val: any) => {
-      const nextVal = val?.format('YYYY');
-      onChange?.(nextVal ? Number(nextVal) : undefined);
-    },
-    [onChange],
-  );
-  // The year needs to be converted into a number and saved to the backend
-  const nextValue = useMemo(() => {
-    if (value) {
-      return dayjs(value.toString());
-    }
-    return undefined;
-  }, [value]);
-
-  return <DatePicker picker="year" onChange={handleChange} value={nextValue} />;
-};
-
-const GoogleScholarForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const { t } = useTranslate('flow');
-
-  const options = useBuildSortOptions();
-
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <TopNItem initialValue={5}></TopNItem>
-      <Form.Item
-        label={t('sortBy')}
-        name={'sort_by'}
-        initialValue={'relevance'}
-      >
-        <Select options={options}></Select>
-      </Form.Item>
-      <Form.Item label={t('yearLow')} name={'year_low'}>
-        <YearPicker />
-      </Form.Item>
-      <Form.Item label={t('yearHigh')} name={'year_high'}>
-        <YearPicker />
-      </Form.Item>
-      <Form.Item
-        label={t('patents')}
-        name={'patents'}
-        valuePropName="checked"
-        initialValue={true}
-      >
-        <Switch></Switch>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default GoogleScholarForm;
diff --git a/web/src/pages/flow/form/invoke-form/dynamic-variables.tsx b/web/src/pages/flow/form/invoke-form/dynamic-variables.tsx
deleted file mode 100644
index 9571c66c2..000000000
--- a/web/src/pages/flow/form/invoke-form/dynamic-variables.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import { EditableCell, EditableRow } from '@/components/editable-cell';
-import { useTranslate } from '@/hooks/common-hooks';
-import { RAGFlowNodeType } from '@/interfaces/database/flow';
-import { DeleteOutlined } from '@ant-design/icons';
-import { Button, Collapse, Flex, Input, Select, Table, TableProps } from 'antd';
-import { trim } from 'lodash';
-import { useBuildComponentIdSelectOptions } from '../../hooks/use-get-begin-query';
-import { IInvokeVariable } from '../../interface';
-import { useHandleOperateParameters } from './hooks';
-import styles from './index.less';
-
-interface IProps {
-  node?: RAGFlowNodeType;
-}
-
-const components = {
-  body: {
-    row: EditableRow,
-    cell: EditableCell,
-  },
-};
-
-const DynamicVariablesForm = ({ node }: IProps) => {
-  const nodeId = node?.id;
-  const { t } = useTranslate('flow');
-
-  const options = useBuildComponentIdSelectOptions(nodeId, node?.parentId);
-  const {
-    dataSource,
-    handleAdd,
-    handleRemove,
-    handleSave,
-    handleComponentIdChange,
-    handleValueChange,
-  } = useHandleOperateParameters(nodeId!);
-
-  const columns: TableProps<IInvokeVariable>['columns'] = [
-    {
-      title: t('key'),
-      dataIndex: 'key',
-      key: 'key',
-      onCell: (record: IInvokeVariable) => ({
-        record,
-        editable: true,
-        dataIndex: 'key',
-        title: 'key',
-        handleSave,
-      }),
-    },
-    {
-      title: t('componentId'),
-      dataIndex: 'component_id',
-      key: 'component_id',
-      align: 'center',
-      width: 140,
-      render(text, record) {
-        return (
-          <Select
-            style={{ width: '100%' }}
-            allowClear
-            options={options}
-            value={text}
-            disabled={trim(record.value) !== ''}
-            onChange={handleComponentIdChange(record)}
-          />
-        );
-      },
-    },
-    {
-      title: t('value'),
-      dataIndex: 'value',
-      key: 'value',
-      align: 'center',
-      width: 140,
-      render(text, record) {
-        return (
-          <Input
-            value={text}
-            disabled={!!record.component_id}
-            onChange={handleValueChange(record)}
-          />
-        );
-      },
-    },
-    {
-      title: t('operation'),
-      dataIndex: 'operation',
-      width: 20,
-      key: 'operation',
-      align: 'center',
-      fixed: 'right',
-      render(_, record) {
-        return <DeleteOutlined onClick={handleRemove(record.id)} />;
-      },
-    },
-  ];
-
-  return (
-    <Collapse
-      className={styles.dynamicParameterVariable}
-      defaultActiveKey={['1']}
-      items={[
-        {
-          key: '1',
-          label: (
-            <Flex justify={'space-between'}>
-              <span className={styles.title}>{t('parameter')}</span>
-              <Button size="small" onClick={handleAdd}>
-                {t('add')}
-              </Button>
-            </Flex>
-          ),
-          children: (
-            <Table
-              dataSource={dataSource}
-              columns={columns}
-              rowKey={'id'}
-              components={components}
-              rowClassName={() => styles.editableRow}
-              scroll={{ x: true }}
-              bordered
-            />
-          ),
-        },
-      ]}
-    />
-  );
-};
-
-export default DynamicVariablesForm;
diff --git a/web/src/pages/flow/form/invoke-form/hooks.ts b/web/src/pages/flow/form/invoke-form/hooks.ts
deleted file mode 100644
index 951cd42ae..000000000
--- a/web/src/pages/flow/form/invoke-form/hooks.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import get from 'lodash/get';
-import {
-  ChangeEventHandler,
-  MouseEventHandler,
-  useCallback,
-  useMemo,
-} from 'react';
-import { v4 as uuid } from 'uuid';
-import { IGenerateParameter, IInvokeVariable } from '../../interface';
-import useGraphStore from '../../store';
-
-export const useHandleOperateParameters = (nodeId: string) => {
-  const { getNode, updateNodeForm } = useGraphStore((state) => state);
-  const node = getNode(nodeId);
-  const dataSource: IGenerateParameter[] = useMemo(
-    () => get(node, 'data.form.variables', []) as IGenerateParameter[],
-    [node],
-  );
-
-  const changeValue = useCallback(
-    (row: IInvokeVariable, field: string, value: string) => {
-      const newData = [...dataSource];
-      const index = newData.findIndex((item) => row.id === item.id);
-      const item = newData[index];
-      newData.splice(index, 1, {
-        ...item,
-        [field]: value,
-      });
-
-      updateNodeForm(nodeId, { variables: newData });
-    },
-    [dataSource, nodeId, updateNodeForm],
-  );
-
-  const handleComponentIdChange = useCallback(
-    (row: IInvokeVariable) => (value: string) => {
-      changeValue(row, 'component_id', value);
-    },
-    [changeValue],
-  );
-
-  const handleValueChange = useCallback(
-    (row: IInvokeVariable): ChangeEventHandler<HTMLInputElement> =>
-      (e) => {
-        changeValue(row, 'value', e.target.value);
-      },
-    [changeValue],
-  );
-
-  const handleRemove = useCallback(
-    (id?: string) => () => {
-      const newData = dataSource.filter((item) => item.id !== id);
-      updateNodeForm(nodeId, { variables: newData });
-    },
-    [updateNodeForm, nodeId, dataSource],
-  );
-
-  const handleAdd: MouseEventHandler = useCallback(
-    (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      updateNodeForm(nodeId, {
-        variables: [
-          ...dataSource,
-          {
-            id: uuid(),
-            key: '',
-            component_id: undefined,
-            value: '',
-          },
-        ],
-      });
-    },
-    [dataSource, nodeId, updateNodeForm],
-  );
-
-  const handleSave = (row: IGenerateParameter) => {
-    const newData = [...dataSource];
-    const index = newData.findIndex((item) => row.id === item.id);
-    const item = newData[index];
-    newData.splice(index, 1, {
-      ...item,
-      ...row,
-    });
-
-    updateNodeForm(nodeId, { variables: newData });
-  };
-
-  return {
-    handleAdd,
-    handleRemove,
-    handleComponentIdChange,
-    handleValueChange,
-    handleSave,
-    dataSource,
-  };
-};
diff --git a/web/src/pages/flow/form/invoke-form/index.less b/web/src/pages/flow/form/invoke-form/index.less
deleted file mode 100644
index e5bada1ef..000000000
--- a/web/src/pages/flow/form/invoke-form/index.less
+++ /dev/null
@@ -1,44 +0,0 @@
-.editableRow {
-  :global(.editable-cell) {
-    position: relative;
-  }
-
-  :global(.editable-cell-value-wrap) {
-    padding: 5px 12px;
-    cursor: pointer;
-    height: 30px !important;
-  }
-  &:hover {
-    :global(.editable-cell-value-wrap) {
-      padding: 4px 11px;
-      border: 1px solid #d9d9d9;
-      border-radius: 2px;
-    }
-  }
-}
-
-.dynamicParameterVariable {
-  background-color: #ebe9e950;
-  :global(.ant-collapse-content) {
-    background-color: #f6f6f634;
-  }
-  :global(.ant-collapse-content-box) {
-    padding: 0 !important;
-  }
-  margin-bottom: 20px;
-  .title {
-    font-weight: 600;
-    font-size: 16px;
-  }
-  .variableType {
-    width: 30%;
-  }
-  .variableValue {
-    flex: 1;
-  }
-
-  .addButton {
-    color: rgb(22, 119, 255);
-    font-weight: 600;
-  }
-}
diff --git a/web/src/pages/flow/form/invoke-form/index.tsx b/web/src/pages/flow/form/invoke-form/index.tsx
deleted file mode 100644
index a62723ebc..000000000
--- a/web/src/pages/flow/form/invoke-form/index.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import Editor, { loader } from '@monaco-editor/react';
-import { Form, Input, InputNumber, Select, Space, Switch } from 'antd';
-import { useTranslation } from 'react-i18next';
-import { IOperatorForm } from '../../interface';
-import DynamicVariablesForm from './dynamic-variables';
-
-loader.config({ paths: { vs: '/vs' } });
-
-enum Method {
-  GET = 'GET',
-  POST = 'POST',
-  PUT = 'PUT',
-}
-
-const MethodOptions = [Method.GET, Method.POST, Method.PUT].map((x) => ({
-  label: x,
-  value: x,
-}));
-
-interface TimeoutInputProps {
-  value?: number;
-  onChange?: (value: number | null) => void;
-}
-
-const TimeoutInput = ({ value, onChange }: TimeoutInputProps) => {
-  const { t } = useTranslation();
-  return (
-    <Space>
-      <InputNumber value={value} onChange={onChange} /> {t('common.s')}
-    </Space>
-  );
-};
-
-const InvokeForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const { t } = useTranslation();
-
-  return (
-    <>
-      <Form
-        name="basic"
-        autoComplete="off"
-        form={form}
-        onValuesChange={onValuesChange}
-        layout={'vertical'}
-      >
-        <Form.Item name={'url'} label={t('flow.url')}>
-          <Input />
-        </Form.Item>
-        <Form.Item
-          name={'method'}
-          label={t('flow.method')}
-          initialValue={Method.GET}
-        >
-          <Select options={MethodOptions} />
-        </Form.Item>
-        <Form.Item name={'timeout'} label={t('flow.timeout')}>
-          <TimeoutInput></TimeoutInput>
-        </Form.Item>
-        <Form.Item name={'headers'} label={t('flow.headers')}>
-          <Editor height={200} defaultLanguage="json" theme="vs-dark" />
-        </Form.Item>
-        <Form.Item name={'proxy'} label={t('flow.proxy')}>
-          <Input />
-        </Form.Item>
-        <Form.Item
-          name={'clean_html'}
-          label={t('flow.cleanHtml')}
-          tooltip={t('flow.cleanHtmlTip')}
-        >
-          <Switch />
-        </Form.Item>
-        <Form.Item name={'datatype'} label={t('flow.datatype')}>
-          <Select
-            options={[
-              { value: 'json', label: 'application/json' },
-              { value: 'formdata', label: 'multipart/form-data' },
-            ]}
-            allowClear={true}
-          ></Select>
-        </Form.Item>
-        <DynamicVariablesForm node={node}></DynamicVariablesForm>
-      </Form>
-    </>
-  );
-};
-
-export default InvokeForm;
diff --git a/web/src/pages/flow/form/iteration-from/index.tsx b/web/src/pages/flow/form/iteration-from/index.tsx
deleted file mode 100644
index bff468ff6..000000000
--- a/web/src/pages/flow/form/iteration-from/index.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { CommaIcon, SemicolonIcon } from '@/assets/icon/next-icon';
-import { Form, Select } from 'antd';
-import {
-  CornerDownLeft,
-  IndentIncrease,
-  Minus,
-  Slash,
-  Underline,
-} from 'lucide-react';
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
-
-const optionList = [
-  {
-    value: ',',
-    icon: CommaIcon,
-    text: 'comma',
-  },
-  {
-    value: '\n',
-    icon: CornerDownLeft,
-    text: 'lineBreak',
-  },
-  {
-    value: 'tab',
-    icon: IndentIncrease,
-    text: 'tab',
-  },
-  {
-    value: '_',
-    icon: Underline,
-    text: 'underline',
-  },
-  {
-    value: '/',
-    icon: Slash,
-    text: 'diagonal',
-  },
-  {
-    value: '-',
-    icon: Minus,
-    text: 'minus',
-  },
-  {
-    value: ';',
-    icon: SemicolonIcon,
-    text: 'semicolon',
-  },
-];
-
-const IterationForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const { t } = useTranslation();
-
-  const options = useMemo(() => {
-    return optionList.map((x) => {
-      let Icon = x.icon;
-
-      return {
-        value: x.value,
-        label: (
-          <div className="flex items-center gap-2">
-            <Icon className={'size-4'}></Icon>
-            {t(`flow.delimiterOptions.${x.text}`)}
-          </div>
-        ),
-      };
-    });
-  }, [t]);
-
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <Form.Item
-        name={['delimiter']}
-        label={t('knowledgeDetails.delimiter')}
-        initialValue={`\\n!?;。；！？`}
-        rules={[{ required: true }]}
-        tooltip={t('flow.delimiterTip')}
-      >
-        <Select options={options}></Select>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default IterationForm;
diff --git a/web/src/pages/flow/form/jin10-form/index.tsx b/web/src/pages/flow/form/jin10-form/index.tsx
deleted file mode 100644
index aa9bb169f..000000000
--- a/web/src/pages/flow/form/jin10-form/index.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Input, Select } from 'antd';
-import { useMemo } from 'react';
-import {
-  Jin10CalendarDatashapeOptions,
-  Jin10CalendarTypeOptions,
-  Jin10FlashTypeOptions,
-  Jin10SymbolsDatatypeOptions,
-  Jin10SymbolsTypeOptions,
-  Jin10TypeOptions,
-} from '../../constant';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
-
-const Jin10Form = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const { t } = useTranslate('flow');
-
-  const jin10TypeOptions = useMemo(() => {
-    return Jin10TypeOptions.map((x) => ({
-      value: x,
-      label: t(`jin10TypeOptions.${x}`),
-    }));
-  }, [t]);
-
-  const jin10FlashTypeOptions = useMemo(() => {
-    return Jin10FlashTypeOptions.map((x) => ({
-      value: x,
-      label: t(`jin10FlashTypeOptions.${x}`),
-    }));
-  }, [t]);
-
-  const jin10CalendarTypeOptions = useMemo(() => {
-    return Jin10CalendarTypeOptions.map((x) => ({
-      value: x,
-      label: t(`jin10CalendarTypeOptions.${x}`),
-    }));
-  }, [t]);
-
-  const jin10CalendarDatashapeOptions = useMemo(() => {
-    return Jin10CalendarDatashapeOptions.map((x) => ({
-      value: x,
-      label: t(`jin10CalendarDatashapeOptions.${x}`),
-    }));
-  }, [t]);
-
-  const jin10SymbolsTypeOptions = useMemo(() => {
-    return Jin10SymbolsTypeOptions.map((x) => ({
-      value: x,
-      label: t(`jin10SymbolsTypeOptions.${x}`),
-    }));
-  }, [t]);
-
-  const jin10SymbolsDatatypeOptions = useMemo(() => {
-    return Jin10SymbolsDatatypeOptions.map((x) => ({
-      value: x,
-      label: t(`jin10SymbolsDatatypeOptions.${x}`),
-    }));
-  }, [t]);
-
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <Form.Item label={t('type')} name={'type'} initialValue={'flash'}>
-        <Select options={jin10TypeOptions}></Select>
-      </Form.Item>
-      <Form.Item label={t('secretKey')} name={'secret_key'}>
-        <Input></Input>
-      </Form.Item>
-      <Form.Item noStyle dependencies={['type']}>
-        {({ getFieldValue }) => {
-          const type = getFieldValue('type');
-          switch (type) {
-            case 'flash':
-              return (
-                <>
-                  <Form.Item label={t('flashType')} name={'flash_type'}>
-                    <Select options={jin10FlashTypeOptions}></Select>
-                  </Form.Item>
-                  <Form.Item label={t('contain')} name={'contain'}>
-                    <Input></Input>
-                  </Form.Item>
-                  <Form.Item label={t('filter')} name={'filter'}>
-                    <Input></Input>
-                  </Form.Item>
-                </>
-              );
-
-            case 'calendar':
-              return (
-                <>
-                  <Form.Item label={t('calendarType')} name={'calendar_type'}>
-                    <Select options={jin10CalendarTypeOptions}></Select>
-                  </Form.Item>
-                  <Form.Item
-                    label={t('calendarDatashape')}
-                    name={'calendar_datashape'}
-                  >
-                    <Select options={jin10CalendarDatashapeOptions}></Select>
-                  </Form.Item>
-                </>
-              );
-
-            case 'symbols':
-              return (
-                <>
-                  <Form.Item label={t('symbolsType')} name={'symbols_type'}>
-                    <Select options={jin10SymbolsTypeOptions}></Select>
-                  </Form.Item>
-                  <Form.Item
-                    label={t('symbolsDatatype')}
-                    name={'symbols_datatype'}
-                  >
-                    <Select options={jin10SymbolsDatatypeOptions}></Select>
-                  </Form.Item>
-                </>
-              );
-
-            case 'news':
-              return (
-                <>
-                  <Form.Item label={t('contain')} name={'contain'}>
-                    <Input></Input>
-                  </Form.Item>
-                  <Form.Item label={t('filter')} name={'filter'}>
-                    <Input></Input>
-                  </Form.Item>
-                </>
-              );
-
-            default:
-              return <></>;
-          }
-        }}
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default Jin10Form;
diff --git a/web/src/pages/flow/form/keyword-extract-form/index.tsx b/web/src/pages/flow/form/keyword-extract-form/index.tsx
deleted file mode 100644
index 089df5eab..000000000
--- a/web/src/pages/flow/form/keyword-extract-form/index.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import LLMSelect from '@/components/llm-select';
-import TopNItem from '@/components/top-n-item';
-import { useTranslate } from '@/hooks/common-hooks';
-import { Form } from 'antd';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
-
-const KeywordExtractForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const { t } = useTranslate('flow');
-
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <Form.Item
-        name={'llm_id'}
-        label={t('model', { keyPrefix: 'chat' })}
-        tooltip={t('modelTip', { keyPrefix: 'chat' })}
-      >
-        <LLMSelect></LLMSelect>
-      </Form.Item>
-      <TopNItem initialValue={3}></TopNItem>
-    </Form>
-  );
-};
-
-export default KeywordExtractForm;
diff --git a/web/src/pages/flow/form/message-form/index.less b/web/src/pages/flow/form/message-form/index.less
deleted file mode 100644
index 9725f89d2..000000000
--- a/web/src/pages/flow/form/message-form/index.less
+++ /dev/null
@@ -1,16 +0,0 @@
-.dynamicDeleteButton {
-  position: relative;
-  top: 4px;
-  margin: 0 8px;
-  color: #999;
-  font-size: 24px;
-  cursor: pointer;
-  transition: all 0.3s;
-  &:hover {
-    color: #777;
-  }
-  &[disabled] {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-}
diff --git a/web/src/pages/flow/form/message-form/index.tsx b/web/src/pages/flow/form/message-form/index.tsx
deleted file mode 100644
index 6040b929d..000000000
--- a/web/src/pages/flow/form/message-form/index.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { useTranslate } from '@/hooks/common-hooks';
-import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
-import { Button, Form, Input } from 'antd';
-import { IOperatorForm } from '../../interface';
-
-import styles from './index.less';
-
-const formItemLayout = {
-  labelCol: {
-    sm: { span: 6 },
-  },
-  wrapperCol: {
-    sm: { span: 18 },
-  },
-};
-
-const formItemLayoutWithOutLabel = {
-  wrapperCol: {
-    sm: { span: 18, offset: 6 },
-  },
-};
-
-const MessageForm = ({ onValuesChange, form }: IOperatorForm) => {
-  const { t } = useTranslate('flow');
-
-  return (
-    <Form
-      name="basic"
-      {...formItemLayoutWithOutLabel}
-      onValuesChange={onValuesChange}
-      autoComplete="off"
-      form={form}
-    >
-      <Form.List name="messages">
-        {(fields, { add, remove }, {}) => (
-          <>
-            {fields.map((field, index) => (
-              <Form.Item
-                {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
-                label={index === 0 ? t('msg') : ''}
-                required={false}
-                key={field.key}
-              >
-                <Form.Item
-                  {...field}
-                  validateTrigger={['onChange', 'onBlur']}
-                  rules={[
-                    {
-                      required: true,
-                      whitespace: true,
-                      message: t('messageMsg'),
-                    },
-                  ]}
-                  noStyle
-                >
-                  <Input.TextArea
-                    rows={4}
-                    placeholder={t('messagePlaceholder')}
-                    style={{ width: '80%' }}
-                  />
-                </Form.Item>
-                {fields.length > 1 ? (
-                  <MinusCircleOutlined
-                    className={styles.dynamicDeleteButton}
-                    onClick={() => remove(field.name)}
-                  />
-                ) : null}
-              </Form.Item>
-            ))}
-            <Form.Item>
-              <Button
-                type="dashed"
-                onClick={() => add()}
-                style={{ width: '80%' }}
-                icon={<PlusOutlined />}
-              >
-                {t('addMessage')}
-              </Button>
-            </Form.Item>
-          </>
-        )}
-      </Form.List>
-    </Form>
-  );
-};
-
-export default MessageForm;
diff --git a/web/src/pages/flow/form/pubmed-form/index.tsx b/web/src/pages/flow/form/pubmed-form/index.tsx
deleted file mode 100644
index a10962b6e..000000000
--- a/web/src/pages/flow/form/pubmed-form/index.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import TopNItem from '@/components/top-n-item';
-import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Input } from 'antd';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
-
-const PubMedForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const { t } = useTranslate('flow');
-
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <TopNItem initialValue={10}></TopNItem>
-      <Form.Item
-        label={t('email')}
-        name={'email'}
-        tooltip={t('emailTip')}
-        rules={[{ type: 'email' }]}
-      >
-        <Input></Input>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default PubMedForm;
diff --git a/web/src/pages/flow/form/qweather-form/index.tsx b/web/src/pages/flow/form/qweather-form/index.tsx
deleted file mode 100644
index b69939826..000000000
--- a/web/src/pages/flow/form/qweather-form/index.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Input, Select } from 'antd';
-import { useCallback, useMemo } from 'react';
-import {
-  QWeatherLangOptions,
-  QWeatherTimePeriodOptions,
-  QWeatherTypeOptions,
-  QWeatherUserTypeOptions,
-} from '../../constant';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
-
-const QWeatherForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const { t } = useTranslate('flow');
-  const qWeatherLangOptions = useMemo(() => {
-    return QWeatherLangOptions.map((x) => ({
-      value: x,
-      label: t(`qWeatherLangOptions.${x}`),
-    }));
-  }, [t]);
-
-  const qWeatherTypeOptions = useMemo(() => {
-    return QWeatherTypeOptions.map((x) => ({
-      value: x,
-      label: t(`qWeatherTypeOptions.${x}`),
-    }));
-  }, [t]);
-
-  const qWeatherUserTypeOptions = useMemo(() => {
-    return QWeatherUserTypeOptions.map((x) => ({
-      value: x,
-      label: t(`qWeatherUserTypeOptions.${x}`),
-    }));
-  }, [t]);
-
-  const getQWeatherTimePeriodOptions = useCallback(
-    (userType: string) => {
-      let options = QWeatherTimePeriodOptions;
-      if (userType === 'free') {
-        options = options.slice(0, 3);
-      }
-      return options.map((x) => ({
-        value: x,
-        label: t(`qWeatherTimePeriodOptions.${x}`),
-      }));
-    },
-    [t],
-  );
-
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <Form.Item label={t('webApiKey')} name={'web_apikey'}>
-        <Input></Input>
-      </Form.Item>
-      <Form.Item label={t('lang')} name={'lang'}>
-        <Select options={qWeatherLangOptions}></Select>
-      </Form.Item>
-      <Form.Item label={t('type')} name={'type'}>
-        <Select options={qWeatherTypeOptions}></Select>
-      </Form.Item>
-      <Form.Item label={t('userType')} name={'user_type'}>
-        <Select options={qWeatherUserTypeOptions}></Select>
-      </Form.Item>
-      <Form.Item noStyle dependencies={['type', 'user_type']}>
-        {({ getFieldValue }) =>
-          getFieldValue('type') === 'weather' && (
-            <Form.Item label={t('timePeriod')} name={'time_period'}>
-              <Select
-                options={getQWeatherTimePeriodOptions(
-                  getFieldValue('user_type'),
-                )}
-              ></Select>
-            </Form.Item>
-          )
-        }
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default QWeatherForm;
diff --git a/web/src/pages/flow/form/relevant-form/hooks.ts b/web/src/pages/flow/form/relevant-form/hooks.ts
deleted file mode 100644
index 5a9340cd3..000000000
--- a/web/src/pages/flow/form/relevant-form/hooks.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import pick from 'lodash/pick';
-import { useCallback, useEffect } from 'react';
-import { IOperatorForm } from '../../interface';
-import useGraphStore from '../../store';
-
-export const useBuildRelevantOptions = () => {
-  const nodes = useGraphStore((state) => state.nodes);
-
-  const buildRelevantOptions = useCallback(
-    (toList: string[]) => {
-      return nodes
-        .filter(
-          (x) => !toList.some((y) => y === x.id), // filter out selected values ​​in other to fields from the current drop-down box options
-        )
-        .map((x) => ({ label: x.data.name, value: x.id }));
-    },
-    [nodes],
-  );
-
-  return buildRelevantOptions;
-};
-
-// const getTargetOfEdge = (edges: Edge[], sourceHandle: string) =>
-//   edges.find((x) => x.sourceHandle === sourceHandle)?.target;
-
-/**
- *  monitor changes in the connection and synchronize the target to the yes and no fields of the form
- *  similar to the categorize-form's useHandleFormValuesChange method
- * @param param0
- */
-export const useWatchConnectionChanges = ({ nodeId, form }: IOperatorForm) => {
-  // const edges = useGraphStore((state) => state.edges);
-  const getNode = useGraphStore((state) => state.getNode);
-  const node = getNode(nodeId);
-
-  const watchFormChanges = useCallback(() => {
-    if (node) {
-      form?.setFieldsValue(pick(node, ['yes', 'no']));
-    }
-  }, [node, form]);
-
-  // const watchConnectionChanges = useCallback(() => {
-  //   const edgeList = edges.filter((x) => x.source === nodeId);
-  //   const yes = getTargetOfEdge(edgeList, 'yes');
-  //   const no = getTargetOfEdge(edgeList, 'no');
-  //   form?.setFieldsValue({ yes, no });
-  // }, [edges, nodeId, form]);
-
-  useEffect(() => {
-    watchFormChanges();
-  }, [watchFormChanges]);
-};
diff --git a/web/src/pages/flow/form/relevant-form/index.tsx b/web/src/pages/flow/form/relevant-form/index.tsx
deleted file mode 100644
index e2366f6f0..000000000
--- a/web/src/pages/flow/form/relevant-form/index.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import LLMSelect from '@/components/llm-select';
-import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Select } from 'antd';
-import { Operator } from '../../constant';
-import { useBuildFormSelectOptions } from '../../form-hooks';
-import { IOperatorForm } from '../../interface';
-import { useWatchConnectionChanges } from './hooks';
-
-const RelevantForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const { t } = useTranslate('flow');
-  const buildRelevantOptions = useBuildFormSelectOptions(
-    Operator.Relevant,
-    node?.id,
-  );
-  useWatchConnectionChanges({ nodeId: node?.id, form });
-
-  return (
-    <Form
-      name="basic"
-      labelCol={{ span: 4 }}
-      wrapperCol={{ span: 20 }}
-      onValuesChange={onValuesChange}
-      autoComplete="off"
-      form={form}
-    >
-      <Form.Item
-        name={'llm_id'}
-        label={t('model', { keyPrefix: 'chat' })}
-        tooltip={t('modelTip', { keyPrefix: 'chat' })}
-      >
-        <LLMSelect></LLMSelect>
-      </Form.Item>
-      <Form.Item label={t('yes')} name={'yes'}>
-        <Select
-          allowClear
-          options={buildRelevantOptions([form?.getFieldValue('no')])}
-        />
-      </Form.Item>
-      <Form.Item label={t('no')} name={'no'}>
-        <Select
-          allowClear
-          options={buildRelevantOptions([form?.getFieldValue('yes')])}
-        />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default RelevantForm;
diff --git a/web/src/pages/flow/form/retrieval-form/index.tsx b/web/src/pages/flow/form/retrieval-form/index.tsx
deleted file mode 100644
index fa3da7131..000000000
--- a/web/src/pages/flow/form/retrieval-form/index.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import KnowledgeBaseItem from '@/components/knowledge-base-item';
-import Rerank from '@/components/rerank';
-import SimilaritySlider from '@/components/similarity-slider';
-import { TavilyItem } from '@/components/tavily-item';
-import TopNItem from '@/components/top-n-item';
-import { UseKnowledgeGraphItem } from '@/components/use-knowledge-graph-item';
-import { useTranslate } from '@/hooks/common-hooks';
-import type { FormProps } from 'antd';
-import { Form, Input } from 'antd';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
-
-type FieldType = {
-  top_n?: number;
-};
-
-const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
-  console.log('Success:', values);
-};
-
-const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
-  console.log('Failed:', errorInfo);
-};
-
-const RetrievalForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const { t } = useTranslate('flow');
-  return (
-    <Form
-      name="basic"
-      onFinish={onFinish}
-      onFinishFailed={onFinishFailed}
-      autoComplete="off"
-      onValuesChange={onValuesChange}
-      form={form}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <SimilaritySlider
-        isTooltipShown
-        vectorSimilarityWeightName="keywords_similarity_weight"
-      ></SimilaritySlider>
-      <TopNItem></TopNItem>
-      <Rerank></Rerank>
-      <TavilyItem name={'tavily_api_key'}></TavilyItem>
-      <UseKnowledgeGraphItem filedName={'use_kg'}></UseKnowledgeGraphItem>
-      <KnowledgeBaseItem
-        tooltipText={t('knowledgeBasesTip')}
-      ></KnowledgeBaseItem>
-      <DynamicInputVariable
-        name={'kb_vars'}
-        node={node}
-        title={t('knowledgeBaseVars')}
-      ></DynamicInputVariable>
-      <Form.Item
-        name={'empty_response'}
-        label={t('emptyResponse', { keyPrefix: 'chat' })}
-        tooltip={t('emptyResponseTip', { keyPrefix: 'chat' })}
-      >
-        <Input.TextArea placeholder="" rows={4} />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default RetrievalForm;
diff --git a/web/src/pages/flow/form/rewrite-question-form/index.tsx b/web/src/pages/flow/form/rewrite-question-form/index.tsx
deleted file mode 100644
index c2b2e8db8..000000000
--- a/web/src/pages/flow/form/rewrite-question-form/index.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import LLMSelect from '@/components/llm-select';
-import MessageHistoryWindowSizeItem from '@/components/message-history-window-size-item';
-import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Select } from 'antd';
-import { GoogleLanguageOptions } from '../../constant';
-import { IOperatorForm } from '../../interface';
-
-const RewriteQuestionForm = ({ onValuesChange, form }: IOperatorForm) => {
-  const { t } = useTranslate('chat');
-
-  return (
-    <Form
-      name="basic"
-      labelCol={{ span: 8 }}
-      wrapperCol={{ span: 16 }}
-      onValuesChange={onValuesChange}
-      autoComplete="off"
-      form={form}
-    >
-      <Form.Item
-        name={'llm_id'}
-        label={t('model', { keyPrefix: 'chat' })}
-        tooltip={t('modelTip', { keyPrefix: 'chat' })}
-      >
-        <LLMSelect></LLMSelect>
-      </Form.Item>
-      <Form.Item
-        label={t('language')}
-        name={'language'}
-        tooltip={t('languageTip')}
-      >
-        <Select options={GoogleLanguageOptions} allowClear={true}></Select>
-      </Form.Item>
-      <MessageHistoryWindowSizeItem
-        initialValue={6}
-      ></MessageHistoryWindowSizeItem>
-    </Form>
-  );
-};
-
-export default RewriteQuestionForm;
diff --git a/web/src/pages/flow/form/switch-form/index.less b/web/src/pages/flow/form/switch-form/index.less
deleted file mode 100644
index c5e2c7fe8..000000000
--- a/web/src/pages/flow/form/switch-form/index.less
+++ /dev/null
@@ -1,21 +0,0 @@
-@lightBackgroundColor: rgba(150, 150, 150, 0.07);
-@darkBackgroundColor: rgba(150, 150, 150, 0.12);
-
-.caseCard {
-  background-color: @lightBackgroundColor;
-}
-
-.conditionCard {
-  background-color: @darkBackgroundColor;
-}
-
-.elseCase {
-  background-color: @lightBackgroundColor;
-  padding: 12px;
-  border-radius: 8px;
-}
-
-.addButton {
-  color: rgb(22, 119, 255);
-  font-weight: 600;
-}
diff --git a/web/src/pages/flow/form/switch-form/index.tsx b/web/src/pages/flow/form/switch-form/index.tsx
deleted file mode 100644
index 222a2baa3..000000000
--- a/web/src/pages/flow/form/switch-form/index.tsx
+++ /dev/null
@@ -1,204 +0,0 @@
-import { CloseOutlined } from '@ant-design/icons';
-import { Button, Card, Divider, Form, Input, Select } from 'antd';
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  Operator,
-  SwitchElseTo,
-  SwitchLogicOperatorOptions,
-  SwitchOperatorOptions,
-} from '../../constant';
-import { useBuildFormSelectOptions } from '../../form-hooks';
-import { useBuildComponentIdSelectOptions } from '../../hooks/use-get-begin-query';
-import { IOperatorForm } from '../../interface';
-import { getOtherFieldValues } from '../../utils';
-
-import { ISwitchForm } from '@/interfaces/database/flow';
-import styles from './index.less';
-
-const SwitchForm = ({ onValuesChange, node, form }: IOperatorForm) => {
-  const { t } = useTranslation();
-  const buildCategorizeToOptions = useBuildFormSelectOptions(
-    Operator.Switch,
-    node?.id,
-  );
-
-  const getSelectedConditionTos = () => {
-    const conditions: ISwitchForm['conditions'] =
-      form?.getFieldValue('conditions');
-
-    return conditions?.filter((x) => !!x).map((x) => x?.to) ?? [];
-  };
-
-  const switchOperatorOptions = useMemo(() => {
-    return SwitchOperatorOptions.map((x) => ({
-      value: x.value,
-      label: t(`flow.switchOperatorOptions.${x.label}`),
-    }));
-  }, [t]);
-
-  const switchLogicOperatorOptions = useMemo(() => {
-    return SwitchLogicOperatorOptions.map((x) => ({
-      value: x,
-      label: t(`flow.switchLogicOperatorOptions.${x}`),
-    }));
-  }, [t]);
-
-  const componentIdOptions = useBuildComponentIdSelectOptions(
-    node?.id,
-    node?.parentId,
-  );
-
-  return (
-    <Form
-      form={form}
-      name="dynamic_form_complex"
-      autoComplete="off"
-      initialValues={{ conditions: [{}] }}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <Form.List name="conditions">
-        {(fields, { add, remove }) => (
-          <div style={{ display: 'flex', rowGap: 16, flexDirection: 'column' }}>
-            {fields.map((field) => {
-              return (
-                <Card
-                  size="small"
-                  title={`Case ${field.name + 1}`}
-                  key={field.key}
-                  className={styles.caseCard}
-                  extra={
-                    <CloseOutlined
-                      onClick={() => {
-                        remove(field.name);
-                      }}
-                    />
-                  }
-                >
-                  <Form.Item noStyle dependencies={[field.name, 'items']}>
-                    {({ getFieldValue }) =>
-                      getFieldValue(['conditions', field.name, 'items'])
-                        ?.length > 1 && (
-                        <Form.Item
-                          label={t('flow.logicalOperator')}
-                          name={[field.name, 'logical_operator']}
-                        >
-                          <Select options={switchLogicOperatorOptions} />
-                        </Form.Item>
-                      )
-                    }
-                  </Form.Item>
-                  <Form.Item
-                    label={t('flow.nextStep')}
-                    name={[field.name, 'to']}
-                  >
-                    <Select
-                      allowClear
-                      options={buildCategorizeToOptions([
-                        form?.getFieldValue(SwitchElseTo),
-                        ...getOtherFieldValues(
-                          form!,
-                          'conditions',
-                          field,
-                          'to',
-                        ),
-                      ])}
-                    />
-                  </Form.Item>
-                  <Form.Item label="Condition">
-                    <Form.List name={[field.name, 'items']}>
-                      {(subFields, subOpt) => (
-                        <div
-                          style={{
-                            display: 'flex',
-                            flexDirection: 'column',
-                            rowGap: 16,
-                          }}
-                        >
-                          {subFields.map((subField) => (
-                            <Card
-                              key={subField.key}
-                              title={null}
-                              size="small"
-                              className={styles.conditionCard}
-                              bordered
-                              extra={
-                                <CloseOutlined
-                                  onClick={() => {
-                                    subOpt.remove(subField.name);
-                                  }}
-                                />
-                              }
-                            >
-                              <Form.Item
-                                label={t('flow.componentId')}
-                                name={[subField.name, 'cpn_id']}
-                              >
-                                <Select
-                                  placeholder={t('flow.componentId')}
-                                  options={componentIdOptions}
-                                />
-                              </Form.Item>
-                              <Form.Item
-                                label={t('flow.operator')}
-                                name={[subField.name, 'operator']}
-                              >
-                                <Select
-                                  placeholder={t('flow.operator')}
-                                  options={switchOperatorOptions}
-                                />
-                              </Form.Item>
-                              <Form.Item
-                                label={t('flow.value')}
-                                name={[subField.name, 'value']}
-                              >
-                                <Input placeholder={t('flow.value')} />
-                              </Form.Item>
-                            </Card>
-                          ))}
-                          <Button
-                            onClick={() => {
-                              form?.setFieldValue(
-                                ['conditions', field.name, 'logical_operator'],
-                                SwitchLogicOperatorOptions[0],
-                              );
-                              subOpt.add({
-                                operator: SwitchOperatorOptions[0].value,
-                              });
-                            }}
-                            block
-                            className={styles.addButton}
-                          >
-                            + Add Condition
-                          </Button>
-                        </div>
-                      )}
-                    </Form.List>
-                  </Form.Item>
-                </Card>
-              );
-            })}
-
-            <Button onClick={() => add()} block className={styles.addButton}>
-              + Add Case
-            </Button>
-          </div>
-        )}
-      </Form.List>
-      <Divider />
-      <Form.Item
-        label={'ELSE'}
-        name={[SwitchElseTo]}
-        className={styles.elseCase}
-      >
-        <Select
-          allowClear
-          options={buildCategorizeToOptions(getSelectedConditionTos())}
-        />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default SwitchForm;
diff --git a/web/src/pages/flow/form/template-form/index.tsx b/web/src/pages/flow/form/template-form/index.tsx
deleted file mode 100644
index ddf5c7883..000000000
--- a/web/src/pages/flow/form/template-form/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { PromptEditor } from '@/components/prompt-editor';
-import { Form } from 'antd';
-import { useTranslation } from 'react-i18next';
-import { IOperatorForm } from '../../interface';
-
-const TemplateForm = ({ onValuesChange, form }: IOperatorForm) => {
-  const { t } = useTranslation();
-
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <Form.Item name={['content']} label={t('flow.content')}>
-        <PromptEditor></PromptEditor>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default TemplateForm;
diff --git a/web/src/pages/flow/form/tushare-form/index.tsx b/web/src/pages/flow/form/tushare-form/index.tsx
deleted file mode 100644
index 01b11c220..000000000
--- a/web/src/pages/flow/form/tushare-form/index.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { useTranslate } from '@/hooks/common-hooks';
-import { DatePicker, DatePickerProps, Form, Input, Select } from 'antd';
-import dayjs from 'dayjs';
-import { useCallback, useMemo } from 'react';
-import { TuShareSrcOptions } from '../../constant';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
-
-const DateTimePicker = ({
-  onChange,
-  value,
-}: {
-  onChange?: (val: number | undefined) => void;
-  value?: number | undefined;
-}) => {
-  const handleChange: DatePickerProps['onChange'] = useCallback(
-    (val: any) => {
-      const nextVal = val?.format('YYYY-MM-DD HH:mm:ss');
-      onChange?.(nextVal ? nextVal : undefined);
-    },
-    [onChange],
-  );
-  // The value needs to be converted into a string and saved to the backend
-  const nextValue = useMemo(() => {
-    if (value) {
-      return dayjs(value);
-    }
-    return undefined;
-  }, [value]);
-
-  return (
-    <DatePicker
-      showTime
-      format="YYYY-MM-DD HH:mm:ss"
-      onChange={handleChange}
-      value={nextValue}
-    />
-  );
-};
-
-const TuShareForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const { t } = useTranslate('flow');
-
-  const tuShareSrcOptions = useMemo(() => {
-    return TuShareSrcOptions.map((x) => ({
-      value: x,
-      label: t(`tuShareSrcOptions.${x}`),
-    }));
-  }, [t]);
-
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <Form.Item
-        label={t('token')}
-        name={'token'}
-        tooltip={'Get from https://tushare.pro/'}
-      >
-        <Input></Input>
-      </Form.Item>
-      <Form.Item label={t('src')} name={'src'}>
-        <Select options={tuShareSrcOptions}></Select>
-      </Form.Item>
-      <Form.Item label={t('startDate')} name={'start_date'}>
-        <DateTimePicker />
-      </Form.Item>
-      <Form.Item label={t('endDate')} name={'end_date'}>
-        <DateTimePicker />
-      </Form.Item>
-      <Form.Item label={t('keyword')} name={'keyword'}>
-        <Input></Input>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default TuShareForm;
diff --git a/web/src/pages/flow/form/wencai-form/index.tsx b/web/src/pages/flow/form/wencai-form/index.tsx
deleted file mode 100644
index 7c44c182f..000000000
--- a/web/src/pages/flow/form/wencai-form/index.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import TopNItem from '@/components/top-n-item';
-import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Select } from 'antd';
-import { useMemo } from 'react';
-import { WenCaiQueryTypeOptions } from '../../constant';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
-
-const WenCaiForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const { t } = useTranslate('flow');
-
-  const wenCaiQueryTypeOptions = useMemo(() => {
-    return WenCaiQueryTypeOptions.map((x) => ({
-      value: x,
-      label: t(`wenCaiQueryTypeOptions.${x}`),
-    }));
-  }, [t]);
-
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <TopNItem initialValue={20} max={99}></TopNItem>
-      <Form.Item label={t('queryType')} name={'query_type'}>
-        <Select options={wenCaiQueryTypeOptions}></Select>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default WenCaiForm;
diff --git a/web/src/pages/flow/form/wikipedia-form/index.tsx b/web/src/pages/flow/form/wikipedia-form/index.tsx
deleted file mode 100644
index 9e28bf21d..000000000
--- a/web/src/pages/flow/form/wikipedia-form/index.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import TopNItem from '@/components/top-n-item';
-import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Select } from 'antd';
-import { LanguageOptions } from '../../constant';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
-
-const WikipediaForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const { t } = useTranslate('common');
-
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <TopNItem initialValue={10}></TopNItem>
-      <Form.Item label={t('language')} name={'language'}>
-        <Select options={LanguageOptions}></Select>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default WikipediaForm;
diff --git a/web/src/pages/flow/form/yahoo-finance-form/index.tsx b/web/src/pages/flow/form/yahoo-finance-form/index.tsx
deleted file mode 100644
index ce7a3e7d2..000000000
--- a/web/src/pages/flow/form/yahoo-finance-form/index.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Switch } from 'antd';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
-
-const YahooFinanceForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const { t } = useTranslate('flow');
-
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <Form.Item label={t('info')} name={'info'}>
-        <Switch></Switch>
-      </Form.Item>
-      <Form.Item label={t('history')} name={'history'}>
-        <Switch></Switch>
-      </Form.Item>
-      <Form.Item label={t('financials')} name={'financials'}>
-        <Switch></Switch>
-      </Form.Item>
-      <Form.Item label={t('balanceSheet')} name={'balance_sheet'}>
-        <Switch></Switch>
-      </Form.Item>
-      <Form.Item label={t('cashFlowStatement')} name={'cash_flow_statement'}>
-        <Switch></Switch>
-      </Form.Item>
-      <Form.Item label={t('news')} name={'news'}>
-        <Switch></Switch>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default YahooFinanceForm;
diff --git a/web/src/pages/flow/header/index.less b/web/src/pages/flow/header/index.less
deleted file mode 100644
index 714b24d4f..000000000
--- a/web/src/pages/flow/header/index.less
+++ /dev/null
@@ -1,10 +0,0 @@
-.flowHeader {
-  padding: 10px 20px;
-}
-.hideRibbon {
-  display: none !important;
-}
-
-.ribbon {
-  top: 4px;
-}
diff --git a/web/src/pages/flow/header/index.tsx b/web/src/pages/flow/header/index.tsx
deleted file mode 100644
index 41626387f..000000000
--- a/web/src/pages/flow/header/index.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-import EmbedModal from '@/components/api-service/embed-modal';
-import { useShowEmbedModal } from '@/components/api-service/hooks';
-import { SharedFrom } from '@/constants/chat';
-import { useTranslate } from '@/hooks/common-hooks';
-import { useFetchFlow } from '@/hooks/flow-hooks';
-import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
-import { ArrowLeftOutlined } from '@ant-design/icons';
-import { Badge, Button, Flex, Space } from 'antd';
-import classNames from 'classnames';
-import { useCallback } from 'react';
-import { Link, useParams } from 'umi';
-import { FlowSettingModal, useFlowSettingModal } from '../flow-setting';
-import {
-  useGetBeginNodeDataQuery,
-  useGetBeginNodeDataQueryIsSafe,
-} from '../hooks/use-get-begin-query';
-import {
-  useSaveGraph,
-  useSaveGraphBeforeOpeningDebugDrawer,
-  useWatchAgentChange,
-} from '../hooks/use-save-graph';
-import { BeginQuery } from '../interface';
-
-import {
-  HistoryVersionModal,
-  useHistoryVersionModal,
-} from '../history-version-modal';
-import styles from './index.less';
-
-interface IProps {
-  showChatDrawer(): void;
-  chatDrawerVisible: boolean;
-}
-
-const FlowHeader = ({ showChatDrawer, chatDrawerVisible }: IProps) => {
-  const { saveGraph } = useSaveGraph();
-  const { handleRun } = useSaveGraphBeforeOpeningDebugDrawer(showChatDrawer);
-  const { data: userInfo } = useFetchUserInfo();
-
-  const { data } = useFetchFlow();
-  const { t } = useTranslate('flow');
-  const { id } = useParams();
-  const time = useWatchAgentChange(chatDrawerVisible);
-  const getBeginNodeDataQuery = useGetBeginNodeDataQuery();
-  const { showEmbedModal, hideEmbedModal, embedVisible, beta } =
-    useShowEmbedModal();
-  const { setVisibleSettingMModal, visibleSettingModal } =
-    useFlowSettingModal();
-  const isBeginNodeDataQuerySafe = useGetBeginNodeDataQueryIsSafe();
-  const { setVisibleHistoryVersionModal, visibleHistoryVersionModal } =
-    useHistoryVersionModal();
-  const handleShowEmbedModal = useCallback(() => {
-    showEmbedModal();
-  }, [showEmbedModal]);
-
-  const handleRunAgent = useCallback(() => {
-    const query: BeginQuery[] = getBeginNodeDataQuery();
-    if (query.length > 0) {
-      showChatDrawer();
-    } else {
-      handleRun();
-    }
-  }, [getBeginNodeDataQuery, handleRun, showChatDrawer]);
-
-  const showSetting = useCallback(() => {
-    setVisibleSettingMModal(true);
-  }, [setVisibleSettingMModal]);
-
-  const showListVersion = useCallback(() => {
-    setVisibleHistoryVersionModal(true);
-  }, [setVisibleHistoryVersionModal]);
-  return (
-    <>
-      <Flex
-        align="center"
-        justify={'space-between'}
-        gap={'large'}
-        className={styles.flowHeader}
-      >
-        <Badge.Ribbon
-          text={data?.nickname}
-          style={{ marginRight: -data?.nickname?.length * 5 }}
-          color={userInfo?.nickname === data?.nickname ? '#1677ff' : 'pink'}
-          className={classNames(styles.ribbon, {
-            [styles.hideRibbon]: data.permission !== 'team',
-          })}
-        >
-          <Space className={styles.headerTitle} size={'large'}>
-            <Link to={`/flow`}>
-              <ArrowLeftOutlined />
-            </Link>
-            <div className="flex flex-col">
-              <span className="font-semibold text-[18px]">{data.title}</span>
-              <span className="font-normal text-sm">
-                {t('autosaved')} {time}
-              </span>
-            </div>
-          </Space>
-        </Badge.Ribbon>
-        <Space size={'large'}>
-          <Button
-            disabled={userInfo.nickname !== data.nickname}
-            onClick={handleRunAgent}
-          >
-            <b>{t('run')}</b>
-          </Button>
-          <Button
-            disabled={userInfo.nickname !== data.nickname}
-            type="primary"
-            onClick={() => saveGraph()}
-          >
-            <b>{t('save')}</b>
-          </Button>
-          <Button
-            type="primary"
-            onClick={handleShowEmbedModal}
-            disabled={
-              !isBeginNodeDataQuerySafe || userInfo.nickname !== data.nickname
-            }
-          >
-            <b>{t('embedIntoSite', { keyPrefix: 'common' })}</b>
-          </Button>
-          <Button
-            disabled={userInfo.nickname !== data.nickname}
-            type="primary"
-            onClick={showSetting}
-          >
-            <b>{t('setting')}</b>
-          </Button>
-          <Button type="primary" onClick={showListVersion}>
-            <b>{t('historyversion')}</b>
-          </Button>
-        </Space>
-      </Flex>
-      {embedVisible && (
-        <EmbedModal
-          visible={embedVisible}
-          hideModal={hideEmbedModal}
-          token={id!}
-          form={SharedFrom.Agent}
-          beta={beta}
-          isAgent
-        ></EmbedModal>
-      )}
-      {visibleSettingModal && (
-        <FlowSettingModal
-          id={id || ''}
-          visible={visibleSettingModal}
-          hideModal={() => setVisibleSettingMModal(false)}
-        ></FlowSettingModal>
-      )}
-      {visibleHistoryVersionModal && (
-        <HistoryVersionModal
-          id={id || ''}
-          visible={visibleHistoryVersionModal}
-          hideModal={() => setVisibleHistoryVersionModal(false)}
-        ></HistoryVersionModal>
-      )}
-    </>
-  );
-};
-
-export default FlowHeader;
diff --git a/web/src/pages/flow/headhunter_zh.json b/web/src/pages/flow/headhunter_zh.json
deleted file mode 100644
index 6445bb31f..000000000
--- a/web/src/pages/flow/headhunter_zh.json
+++ /dev/null
@@ -1,397 +0,0 @@
-{
-  "edges": [
-    {
-      "id": "85fcec8f-7663-4221-99fa-1d41a6358cc5",
-      "label": "",
-      "source": "begin",
-      "target": "answer:0"
-    },
-    {
-      "id": "36bf941f-b8df-46e7-87d3-5ce51b5378fb",
-      "label": "",
-      "source": "message:reject",
-      "target": "answer:0"
-    },
-    {
-      "id": "e5cca6d3-ffd2-4824-9471-3fe83891dd73",
-      "label": "",
-      "source": "answer:0",
-      "target": "categorize:0"
-    },
-    {
-      "id": "8a39ca91-5b04-4970-ad64-968797eb62a2",
-      "label": "",
-      "source": "categorize:0",
-      "target": "message:introduction",
-      "sourceHandle": "interested"
-    },
-    {
-      "id": "675752ca-6c81-432b-a6b1-eaca4a6c3a96",
-      "label": "",
-      "source": "categorize:0",
-      "target": "generate:casual",
-      "sourceHandle": "casual"
-    },
-    {
-      "id": "cc1628b4-b1c3-4941-ab19-3777993e094a",
-      "label": "",
-      "source": "categorize:0",
-      "target": "message:reject",
-      "sourceHandle": "answer"
-    },
-    {
-      "id": "8a11d81f-820a-41df-a47b-daec65c5fb61",
-      "label": "",
-      "source": "categorize:0",
-      "target": "retrieval:0",
-      "sourceHandle": "about_job"
-    },
-    {
-      "id": "3afa4bbd-1151-4452-8f58-9cc03496c2e7",
-      "label": "",
-      "source": "message:introduction",
-      "target": "answer:1"
-    },
-    {
-      "id": "6e705ec1-d7c2-4278-8ddd-03ed05ec2973",
-      "label": "",
-      "source": "generate:aboutJob",
-      "target": "answer:1"
-    },
-    {
-      "id": "9c6b9bfc-e8ff-4903-8479-67f89f159b55",
-      "label": "",
-      "source": "generate:casual",
-      "target": "answer:1"
-    },
-    {
-      "id": "ddefbff1-2cca-4251-bc34-2f3cea7a5593",
-      "label": "",
-      "source": "generate:get_wechat",
-      "target": "answer:1"
-    },
-    {
-      "id": "13e14da1-3865-4539-af77-4e9627e67273",
-      "label": "",
-      "source": "generate:nowechat",
-      "target": "answer:1"
-    },
-    {
-      "id": "de6b8407-8af3-4450-9f74-6f4e6b99da9f",
-      "label": "",
-      "source": "answer:1",
-      "target": "categorize:1"
-    },
-    {
-      "id": "36f0f440-129b-4073-8d1b-55eaf452ebd2",
-      "label": "",
-      "source": "categorize:1",
-      "target": "retrieval:0",
-      "sourceHandle": "about_job"
-    },
-    {
-      "id": "72d63756-f054-488f-adfd-b3a376047fa2",
-      "label": "",
-      "source": "categorize:1",
-      "target": "generate:casual",
-      "sourceHandle": "casual"
-    },
-    {
-      "id": "5ee58522-246c-427a-806b-e82fccdd7dc6",
-      "label": "",
-      "source": "categorize:1",
-      "target": "generate:get_wechat",
-      "sourceHandle": "wechat"
-    },
-    {
-      "id": "994cbb21-9dad-40af-aee3-9d4b8199a843",
-      "label": "",
-      "source": "categorize:1",
-      "target": "generate:nowechat",
-      "sourceHandle": "giveup"
-    },
-    {
-      "id": "5b864e95-f44e-428b-8a2e-323c3bed0701",
-      "label": "",
-      "source": "retrieval:0",
-      "target": "generate:aboutJob"
-    },
-    {
-      "id": "e882800b-077e-445a-a544-e147f7a9911c",
-      "label": "",
-      "source": "relevant:0",
-      "target": "generate:aboutJob"
-    }
-  ],
-  "nodes": [
-    {
-      "id": "begin",
-      "type": "beginNode",
-      "position": {
-        "x": 0,
-        "y": 0
-      },
-      "data": {
-        "label": "Begin",
-        "name": "TrueBagsAllow",
-        "form": {
-          "prologue": "您好！我是AGI方向的猎头，了解到您是这方面的大佬，然后冒昧的就联系到您。这边有个机会想和您分享，RAGFlow正在招聘您这个岗位的资深的工程师不知道您那边是不是感兴趣？"
-        }
-      },
-      "sourcePosition": "left",
-      "targetPosition": "right"
-    },
-    {
-      "id": "answer:0",
-      "type": "ragNode",
-      "position": {
-        "x": 0,
-        "y": 0
-      },
-      "data": {
-        "label": "Answer",
-        "name": "YoungWeeksArgue",
-        "form": {}
-      },
-      "sourcePosition": "left",
-      "targetPosition": "right"
-    },
-    {
-      "id": "categorize:0",
-      "type": "categorizeNode",
-      "position": {
-        "x": 0,
-        "y": 0
-      },
-      "data": {
-        "label": "Categorize",
-        "name": "FancyBooksLose",
-        "form": {
-          "llm_id": "deepseek-chat",
-          "category_description": {
-            "about_job": {
-              "description": "该问题关于职位本身或公司的信息。",
-              "examples": "什么岗位？\n汇报对象是谁?\n公司多少人？\n公司有啥产品？\n具体工作内容是啥？\n地点哪里？\n双休吗？",
-              "to": "retrieval:0"
-            },
-            "casual": {
-              "description": "该问题不关于职位本身或公司的信息，属于闲聊。",
-              "examples": "你好\n好久不见\n你男的女的？\n你是猴子派来的救兵吗？\n上午开会了?\n你叫啥？\n最近市场如何?生意好做吗？",
-              "to": "generate:casual"
-            },
-            "interested": {
-              "description": "该回答表示他对于该职位感兴趣。",
-              "examples": "嗯\n说吧\n说说看\n还好吧\n是的\n哦\nyes\n具体说说",
-              "to": "message:introduction"
-            },
-            "answer": {
-              "description": "该回答表示他对于该职位不感兴趣，或感觉受到骚扰。",
-              "examples": "不需要\n不感兴趣\n暂时不看\n不要\nno\n我已经不干这个了\n我不是这个方向的",
-              "to": "message:reject"
-            }
-          }
-        }
-      },
-      "sourcePosition": "left",
-      "targetPosition": "right"
-    },
-    {
-      "id": "message:introduction",
-      "type": "ragNode",
-      "position": {
-        "x": 0,
-        "y": 0
-      },
-      "data": {
-        "label": "Message",
-        "name": "CyanMangosStudy",
-        "form": {
-          "messages": [
-            "我简单介绍以下：\nRAGFlow 是一款基于深度文档理解构建的开源 RAG（Retrieval-Augmented Generation）引擎。RAGFlow 可以为各种规模的企业及个人提供一套精简的 RAG 工作流程，结合大语言模型（LLM）针对用户各类不同的复杂格式数据提供可靠的问答以及有理有据的引用。https://github.com/infiniflow/ragflow\n您那边还有什么要了解的？"
-          ]
-        }
-      },
-      "sourcePosition": "left",
-      "targetPosition": "right"
-    },
-    {
-      "id": "answer:1",
-      "type": "ragNode",
-      "position": {
-        "x": 0,
-        "y": 0
-      },
-      "data": {
-        "label": "Answer",
-        "name": "SwiftEyesReply",
-        "form": {}
-      },
-      "sourcePosition": "left",
-      "targetPosition": "right"
-    },
-    {
-      "id": "categorize:1",
-      "type": "categorizeNode",
-      "position": {
-        "x": 0,
-        "y": 0
-      },
-      "data": {
-        "label": "Categorize",
-        "name": "KhakiEmusGive",
-        "form": {
-          "llm_id": "deepseek-chat",
-          "category_description": {
-            "about_job": {
-              "description": "该问题关于职位本身或公司的信息。",
-              "examples": "什么岗位？\n汇报对象是谁?\n公司多少人？\n公司有啥产品？\n具体工作内容是啥？\n地点哪里？\n双休吗？",
-              "to": "retrieval:0"
-            },
-            "casual": {
-              "description": "该问题不关于职位本身或公司的信息，属于闲聊。",
-              "examples": "你好\n好久不见\n你男的女的？\n你是猴子派来的救兵吗？\n上午开会了?\n你叫啥？\n最近市场如何?生意好做吗？",
-              "to": "generate:casual"
-            },
-            "wechat": {
-              "description": "该回答表示他愿意加微信,或者已经报了微信号。",
-              "examples": "嗯\n可以\n是的\n哦\nyes\n15002333453\nwindblow_2231",
-              "to": "generate:get_wechat"
-            },
-            "giveup": {
-              "description": "该回答表示他不愿意加微信。",
-              "examples": "不需要\n不感兴趣\n暂时不看\n不要\nno\n不方便\n不知道还要加我微信",
-              "to": "generate:nowechat"
-            }
-          },
-          "message_history_window_size": 8
-        }
-      },
-      "sourcePosition": "left",
-      "targetPosition": "right"
-    },
-    {
-      "id": "generate:casual",
-      "type": "ragNode",
-      "position": {
-        "x": 0,
-        "y": 0
-      },
-      "data": {
-        "label": "Generate",
-        "name": "BigToesSee",
-        "form": {
-          "llm_id": "deepseek-chat",
-          "prompt": "你是AGI方向的猎头，现在候选人的聊了和职位无关的话题，请耐心的回应候选人，并将话题往该AGI的职位上带，最好能要到候选人微信号以便后面保持联系。",
-          "temperature": 0.9,
-          "message_history_window_size": 12,
-          "cite": false
-        }
-      },
-      "sourcePosition": "left",
-      "targetPosition": "right"
-    },
-    {
-      "id": "retrieval:0",
-      "type": "ragNode",
-      "position": {
-        "x": 0,
-        "y": 0
-      },
-      "data": {
-        "label": "Retrieval",
-        "name": "SilentWormsOpen",
-        "form": {
-          "similarity_threshold": 0.2,
-          "keywords_similarity_weight": 0.3,
-          "top_n": 6,
-          "top_k": 1024,
-          "rerank_id": "BAAI/bge-reranker-v2-m3",
-          "kb_ids": ["869a236818b811ef91dffa163e197198"]
-        }
-      },
-      "sourcePosition": "left",
-      "targetPosition": "right"
-    },
-    {
-      "id": "generate:aboutJob",
-      "type": "ragNode",
-      "position": {
-        "x": 0,
-        "y": 0
-      },
-      "data": {
-        "label": "Generate",
-        "name": "ItchySuitsWait",
-        "form": {
-          "llm_id": "deepseek-chat",
-          "prompt": "你是AGI方向的猎头，候选人问了有关职位或公司的问题，你根据以下职位信息回答。如果职位信息中不包含候选人的问题就回答不清楚、不知道、有待确认等。回答完后引导候选人加微信号，如：\n - 方便加一下微信吗，我把JD发您看看？\n  - 微信号多少，我把详细职位JD发您？\n      职位信息如下:\n      {input}\n      职位信息如上。",
-          "temperature": 0.02
-        }
-      },
-      "sourcePosition": "left",
-      "targetPosition": "right"
-    },
-    {
-      "id": "generate:get_wechat",
-      "type": "ragNode",
-      "position": {
-        "x": 0,
-        "y": 0
-      },
-      "data": {
-        "label": "Generate",
-        "name": "PlentyCasesPoke",
-        "form": {
-          "llm_id": "deepseek-chat",
-          "prompt": "你是AGI方向的猎头，候选人表示不反感加微信，如果对方已经报了微信号，表示感谢和信任并表示马上会加上；如果没有，则问对方微信号多少。你的微信号是weixin_kevin，E-mail是kkk@ragflow.com。说话不要重复。不要总是您好。",
-          "temperature": 0.1,
-          "message_history_window_size": 12,
-          "cite": false
-        }
-      },
-      "sourcePosition": "left",
-      "targetPosition": "right"
-    },
-    {
-      "id": "generate:nowechat",
-      "type": "ragNode",
-      "position": {
-        "x": 0,
-        "y": 0
-      },
-      "data": {
-        "label": "Generate",
-        "name": "SharpEggsLove",
-        "form": {
-          "llm_id": "deepseek-chat",
-          "prompt": "你是AGI方向的猎头，当你提出加微信时对方表示拒绝。你需要耐心礼貌的回应候选人，表示对于保护隐私信息给予理解，也可以询问他对该职位的看法和顾虑。并在恰当的时机再次询问微信联系方式。也可以鼓励候选人主动与你取得联系。你的微信号是weixin_kevin，E-mail是kkk@ragflow.com。说话不要重复。不要总是您好。",
-          "temperature": 0.1,
-          "message_history_window_size": 12,
-          "cite": false
-        }
-      },
-      "sourcePosition": "left",
-      "targetPosition": "right"
-    },
-    {
-      "id": "message:reject",
-      "type": "ragNode",
-      "position": {
-        "x": 0,
-        "y": 0
-      },
-      "data": {
-        "label": "Message",
-        "name": "MetalWolvesBeam",
-        "form": {
-          "messages": [
-            "好的，祝您生活愉快，工作顺利。",
-            "哦，好的，感谢您宝贵的时间！"
-          ]
-        }
-      },
-      "sourcePosition": "left",
-      "targetPosition": "right"
-    }
-  ]
-}
diff --git a/web/src/pages/flow/history-version-modal/index.tsx b/web/src/pages/flow/history-version-modal/index.tsx
deleted file mode 100644
index 96213c694..000000000
--- a/web/src/pages/flow/history-version-modal/index.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-import { useTranslate } from '@/hooks/common-hooks';
-import { useFetchListVersion, useFetchVersion } from '@/hooks/flow-hooks';
-import {
-  Background,
-  ConnectionMode,
-  ReactFlow,
-  ReactFlowProvider,
-} from '@xyflow/react';
-import { Card, Col, Empty, List, Modal, Row, Spin, Typography } from 'antd';
-import React, { useState } from 'react';
-import { nodeTypes } from '../canvas';
-
-export function useHistoryVersionModal() {
-  const [visibleHistoryVersionModal, setVisibleHistoryVersionModal] =
-    React.useState(false);
-
-  return {
-    visibleHistoryVersionModal,
-    setVisibleHistoryVersionModal,
-  };
-}
-
-type HistoryVersionModalProps = {
-  visible: boolean;
-  hideModal: () => void;
-  id: string;
-};
-
-export function HistoryVersionModal({
-  visible,
-  hideModal,
-  id,
-}: HistoryVersionModalProps) {
-  const { t } = useTranslate('flow');
-  const { data, loading } = useFetchListVersion(id);
-  const [selectedVersion, setSelectedVersion] = useState<any>(null);
-  const { data: flow, loading: loadingVersion } = useFetchVersion(
-    selectedVersion?.id,
-  );
-
-  React.useEffect(() => {
-    if (!loading && data?.length > 0 && !selectedVersion) {
-      setSelectedVersion(data[0]);
-    }
-  }, [data, loading, selectedVersion]);
-
-  const downloadfile = React.useCallback(
-    function (e: any) {
-      e.stopPropagation();
-      console.log('Restore version:', selectedVersion);
-      // Create a JSON blob and trigger download
-      const jsonContent = JSON.stringify(flow?.dsl.graph, null, 2);
-      const blob = new Blob([jsonContent], {
-        type: 'application/json',
-      });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = `${selectedVersion.filename || 'flow-version'}-${selectedVersion.id}.json`;
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
-    },
-    [selectedVersion, flow?.dsl],
-  );
-  return (
-    <React.Fragment>
-      <Modal
-        title={t('historyversion')}
-        open={visible}
-        width={'80vw'}
-        onCancel={hideModal}
-        footer={null}
-        getContainer={() => document.body}
-      >
-        <Row gutter={16} style={{ height: '60vh' }}>
-          <Col span={10} style={{ height: '100%', overflowY: 'auto' }}>
-            {loading && <Spin />}
-            {!loading && data.length === 0 && (
-              <Empty description="No versions found" />
-            )}
-            {!loading && data.length > 0 && (
-              <List
-                itemLayout="horizontal"
-                dataSource={data}
-                pagination={{
-                  pageSize: 5,
-                  simple: true,
-                }}
-                renderItem={(item) => (
-                  <List.Item
-                    key={item.id}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setSelectedVersion(item);
-                    }}
-                    style={{
-                      cursor: 'pointer',
-                      background:
-                        selectedVersion?.id === item.id ? '#f0f5ff' : 'inherit',
-                      padding: '8px 12px',
-                      borderRadius: '4px',
-                    }}
-                  >
-                    <List.Item.Meta
-                      title={`${t('filename')}: ${item.title || '-'}`}
-                      description={item.created_at}
-                    />
-                  </List.Item>
-                )}
-              />
-            )}
-          </Col>
-
-          {/* Right panel - Version details */}
-          <Col span={14} style={{ height: '100%', overflowY: 'auto' }}>
-            {selectedVersion ? (
-              <Card title={t('version.details')} bordered={false}>
-                <Row gutter={[16, 16]}>
-                  {/* Add actions for the selected version (restore, download, etc.) */}
-                  <Col span={24}>
-                    <div style={{ textAlign: 'right' }}>
-                      <Typography.Link onClick={downloadfile}>
-                        {t('version.download')}
-                      </Typography.Link>
-                    </div>
-                  </Col>
-                </Row>
-                <Typography.Title level={4}>
-                  {selectedVersion.title || '-'}
-                </Typography.Title>
-
-                <Typography.Text
-                  type="secondary"
-                  style={{ display: 'block', marginBottom: 16 }}
-                >
-                  {t('version.created')}: {selectedVersion.create_date}
-                </Typography.Text>
-
-                {/*render dsl  form api*/}
-                {loadingVersion && <Spin />}
-                {!loadingVersion && flow?.dsl && (
-                  <ReactFlowProvider key={`flow-${selectedVersion.id}`}>
-                    <div
-                      style={{
-                        height: '400px',
-                        position: 'relative',
-                        zIndex: 0,
-                      }}
-                    >
-                      <ReactFlow
-                        connectionMode={ConnectionMode.Loose}
-                        nodes={flow?.dsl.graph?.nodes || []}
-                        edges={
-                          flow?.dsl.graph?.edges.flatMap((x) => ({
-                            ...x,
-                            type: 'default',
-                          })) || []
-                        }
-                        fitView
-                        nodeTypes={nodeTypes}
-                        edgeTypes={{}}
-                        zoomOnScroll={true}
-                        panOnDrag={true}
-                        zoomOnDoubleClick={false}
-                        preventScrolling={true}
-                        minZoom={0.1}
-                      >
-                        <Background />
-                      </ReactFlow>
-                    </div>
-                  </ReactFlowProvider>
-                )}
-              </Card>
-            ) : (
-              <Empty description={t('version.select')} />
-            )}
-          </Col>
-        </Row>
-      </Modal>
-    </React.Fragment>
-  );
-}
diff --git a/web/src/pages/flow/hooks.tsx b/web/src/pages/flow/hooks.tsx
deleted file mode 100644
index 9467e0b6f..000000000
--- a/web/src/pages/flow/hooks.tsx
+++ /dev/null
@@ -1,572 +0,0 @@
-import {
-  Connection,
-  Edge,
-  Node,
-  Position,
-  ReactFlowInstance,
-} from '@xyflow/react';
-import React, {
-  ChangeEvent,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-// import { shallow } from 'zustand/shallow';
-import { settledModelVariableMap } from '@/constants/knowledge';
-import { useFetchModelId } from '@/hooks/logic-hooks';
-import {
-  ICategorizeForm,
-  IRelevantForm,
-  ISwitchForm,
-  RAGFlowNodeType,
-} from '@/interfaces/database/flow';
-import { setChatVariableEnabledFieldValuePage } from '@/utils/chat';
-import { message } from 'antd';
-import { humanId } from 'human-id';
-import { get, lowerFirst } from 'lodash';
-import trim from 'lodash/trim';
-import { useTranslation } from 'react-i18next';
-import { v4 as uuid } from 'uuid';
-import {
-  NodeMap,
-  Operator,
-  RestrictedUpstreamMap,
-  SwitchElseTo,
-  initialAkShareValues,
-  initialArXivValues,
-  initialBaiduFanyiValues,
-  initialBaiduValues,
-  initialBeginValues,
-  initialBingValues,
-  initialCategorizeValues,
-  initialCodeValues,
-  initialConcentratorValues,
-  initialCrawlerValues,
-  initialDeepLValues,
-  initialDuckValues,
-  initialEmailValues,
-  initialExeSqlValues,
-  initialGenerateValues,
-  initialGithubValues,
-  initialGoogleScholarValues,
-  initialGoogleValues,
-  initialInvokeValues,
-  initialIterationValues,
-  initialJin10Values,
-  initialKeywordExtractValues,
-  initialMessageValues,
-  initialNoteValues,
-  initialPubMedValues,
-  initialQWeatherValues,
-  initialRelevantValues,
-  initialRetrievalValues,
-  initialRewriteQuestionValues,
-  initialSwitchValues,
-  initialTemplateValues,
-  initialTuShareValues,
-  initialWenCaiValues,
-  initialWikipediaValues,
-  initialYahooFinanceValues,
-} from './constant';
-import useGraphStore, { RFState } from './store';
-import {
-  generateNodeNamesWithIncreasingIndex,
-  generateSwitchHandleText,
-  getNodeDragHandle,
-  getRelativePositionToIterationNode,
-  replaceIdWithText,
-} from './utils';
-
-const selector = (state: RFState) => ({
-  nodes: state.nodes,
-  edges: state.edges,
-  onNodesChange: state.onNodesChange,
-  onEdgesChange: state.onEdgesChange,
-  onConnect: state.onConnect,
-  setNodes: state.setNodes,
-  onSelectionChange: state.onSelectionChange,
-});
-
-export const useSelectCanvasData = () => {
-  // return useStore(useShallow(selector)); // throw error
-  // return useStore(selector, shallow);
-  return useGraphStore(selector);
-};
-
-export const useInitializeOperatorParams = () => {
-  const llmId = useFetchModelId();
-
-  const initialFormValuesMap = useMemo(() => {
-    return {
-      [Operator.Begin]: initialBeginValues,
-      [Operator.Retrieval]: initialRetrievalValues,
-      [Operator.Generate]: { ...initialGenerateValues, llm_id: llmId },
-      [Operator.Answer]: {},
-      [Operator.Categorize]: { ...initialCategorizeValues, llm_id: llmId },
-      [Operator.Relevant]: { ...initialRelevantValues, llm_id: llmId },
-      [Operator.RewriteQuestion]: {
-        ...initialRewriteQuestionValues,
-        llm_id: llmId,
-      },
-      [Operator.Message]: initialMessageValues,
-      [Operator.KeywordExtract]: {
-        ...initialKeywordExtractValues,
-        llm_id: llmId,
-      },
-      [Operator.DuckDuckGo]: initialDuckValues,
-      [Operator.Baidu]: initialBaiduValues,
-      [Operator.Wikipedia]: initialWikipediaValues,
-      [Operator.PubMed]: initialPubMedValues,
-      [Operator.ArXiv]: initialArXivValues,
-      [Operator.Google]: initialGoogleValues,
-      [Operator.Bing]: initialBingValues,
-      [Operator.GoogleScholar]: initialGoogleScholarValues,
-      [Operator.DeepL]: initialDeepLValues,
-      [Operator.GitHub]: initialGithubValues,
-      [Operator.BaiduFanyi]: initialBaiduFanyiValues,
-      [Operator.QWeather]: initialQWeatherValues,
-      [Operator.ExeSQL]: { ...initialExeSqlValues, llm_id: llmId },
-      [Operator.Switch]: initialSwitchValues,
-      [Operator.WenCai]: initialWenCaiValues,
-      [Operator.AkShare]: initialAkShareValues,
-      [Operator.YahooFinance]: initialYahooFinanceValues,
-      [Operator.Jin10]: initialJin10Values,
-      [Operator.Concentrator]: initialConcentratorValues,
-      [Operator.TuShare]: initialTuShareValues,
-      [Operator.Note]: initialNoteValues,
-      [Operator.Crawler]: initialCrawlerValues,
-      [Operator.Invoke]: initialInvokeValues,
-      [Operator.Template]: initialTemplateValues,
-      [Operator.Email]: initialEmailValues,
-      [Operator.Iteration]: initialIterationValues,
-      [Operator.IterationStart]: initialIterationValues,
-      [Operator.Code]: initialCodeValues,
-    };
-  }, [llmId]);
-
-  const initializeOperatorParams = useCallback(
-    (operatorName: Operator) => {
-      return initialFormValuesMap[operatorName];
-    },
-    [initialFormValuesMap],
-  );
-
-  return initializeOperatorParams;
-};
-
-export const useHandleDrag = () => {
-  const handleDragStart = useCallback(
-    (operatorId: string) => (ev: React.DragEvent<HTMLDivElement>) => {
-      ev.dataTransfer.setData('application/@xyflow/react', operatorId);
-      ev.dataTransfer.effectAllowed = 'move';
-    },
-    [],
-  );
-
-  return { handleDragStart };
-};
-
-export const useGetNodeName = () => {
-  const { t } = useTranslation();
-
-  return (type: string) => {
-    const name = t(`flow.${lowerFirst(type)}`);
-    return name;
-  };
-};
-
-export const useHandleDrop = () => {
-  const addNode = useGraphStore((state) => state.addNode);
-  const nodes = useGraphStore((state) => state.nodes);
-  const [reactFlowInstance, setReactFlowInstance] =
-    useState<ReactFlowInstance<any, any>>();
-  const initializeOperatorParams = useInitializeOperatorParams();
-  const getNodeName = useGetNodeName();
-
-  const onDragOver = useCallback((event: React.DragEvent<HTMLDivElement>) => {
-    event.preventDefault();
-    event.dataTransfer.dropEffect = 'move';
-  }, []);
-
-  const onDrop = useCallback(
-    (event: React.DragEvent<HTMLDivElement>) => {
-      event.preventDefault();
-
-      const type = event.dataTransfer.getData('application/@xyflow/react');
-
-      // check if the dropped element is valid
-      if (typeof type === 'undefined' || !type) {
-        return;
-      }
-
-      // reactFlowInstance.project was renamed to reactFlowInstance.screenToFlowPosition
-      // and you don't need to subtract the reactFlowBounds.left/top anymore
-      // details: https://@xyflow/react.dev/whats-new/2023-11-10
-      const position = reactFlowInstance?.screenToFlowPosition({
-        x: event.clientX,
-        y: event.clientY,
-      });
-      const newNode: Node<any> = {
-        id: `${type}:${humanId()}`,
-        type: NodeMap[type as Operator] || 'ragNode',
-        position: position || {
-          x: 0,
-          y: 0,
-        },
-        data: {
-          label: `${type}`,
-          name: generateNodeNamesWithIncreasingIndex(getNodeName(type), nodes),
-          form: initializeOperatorParams(type as Operator),
-        },
-        sourcePosition: Position.Right,
-        targetPosition: Position.Left,
-        dragHandle: getNodeDragHandle(type),
-      };
-
-      if (type === Operator.Iteration) {
-        newNode.width = 500;
-        newNode.height = 250;
-        const iterationStartNode: Node<any> = {
-          id: `${Operator.IterationStart}:${humanId()}`,
-          type: 'iterationStartNode',
-          position: { x: 50, y: 100 },
-          // draggable: false,
-          data: {
-            label: Operator.IterationStart,
-            name: Operator.IterationStart,
-            form: {},
-          },
-          parentId: newNode.id,
-          extent: 'parent',
-        };
-        addNode(newNode);
-        addNode(iterationStartNode);
-      } else {
-        const subNodeOfIteration = getRelativePositionToIterationNode(
-          nodes,
-          position,
-        );
-        if (subNodeOfIteration) {
-          newNode.parentId = subNodeOfIteration.parentId;
-          newNode.position = subNodeOfIteration.position;
-          newNode.extent = 'parent';
-        }
-        addNode(newNode);
-      }
-    },
-    [reactFlowInstance, getNodeName, nodes, initializeOperatorParams, addNode],
-  );
-
-  return { onDrop, onDragOver, setReactFlowInstance };
-};
-
-export const useHandleFormValuesChange = (id?: string) => {
-  const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
-  const handleValuesChange = useCallback(
-    (changedValues: any, values: any) => {
-      let nextValues: any = values;
-      // Fixed the issue that the related form value does not change after selecting the freedom field of the model
-      if (
-        Object.keys(changedValues).length === 1 &&
-        'parameter' in changedValues &&
-        changedValues['parameter'] in settledModelVariableMap
-      ) {
-        const enabledValues = setChatVariableEnabledFieldValuePage();
-        nextValues = {
-          ...values,
-          ...settledModelVariableMap[
-            changedValues['parameter'] as keyof typeof settledModelVariableMap
-          ],
-          ...enabledValues,
-        };
-      }
-      if (id) {
-        updateNodeForm(id, nextValues);
-      }
-    },
-    [updateNodeForm, id],
-  );
-
-  return { handleValuesChange };
-};
-
-export const useValidateConnection = () => {
-  const { edges, getOperatorTypeFromId, getParentIdById } = useGraphStore(
-    (state) => state,
-  );
-
-  const isSameNodeChild = useCallback(
-    (connection: Connection | Edge) => {
-      const sourceParentId = getParentIdById(connection.source);
-      const targetParentId = getParentIdById(connection.target);
-      if (sourceParentId || targetParentId) {
-        return sourceParentId === targetParentId;
-      }
-      return true;
-    },
-    [getParentIdById],
-  );
-
-  // restricted lines cannot be connected successfully.
-  const isValidConnection = useCallback(
-    (connection: Connection | Edge) => {
-      // node cannot connect to itself
-      const isSelfConnected = connection.target === connection.source;
-
-      // limit the connection between two nodes to only one connection line in one direction
-      const hasLine = edges.some(
-        (x) => x.source === connection.source && x.target === connection.target,
-      );
-
-      const ret =
-        !isSelfConnected &&
-        !hasLine &&
-        RestrictedUpstreamMap[
-          getOperatorTypeFromId(connection.source) as Operator
-        ]?.every((x) => x !== getOperatorTypeFromId(connection.target)) &&
-        isSameNodeChild(connection);
-      return ret;
-    },
-    [edges, getOperatorTypeFromId, isSameNodeChild],
-  );
-
-  return isValidConnection;
-};
-
-export const useHandleNodeNameChange = ({
-  id,
-  data,
-}: {
-  id?: string;
-  data: any;
-}) => {
-  const [name, setName] = useState<string>('');
-  const { updateNodeName, nodes } = useGraphStore((state) => state);
-  const previousName = data?.name;
-
-  const handleNameBlur = useCallback(() => {
-    const existsSameName = nodes.some((x) => x.data.name === name);
-    if (trim(name) === '' || existsSameName) {
-      if (existsSameName && previousName !== name) {
-        message.error('The name cannot be repeated');
-      }
-      setName(previousName);
-      return;
-    }
-
-    if (id) {
-      updateNodeName(id, name);
-    }
-  }, [name, id, updateNodeName, previousName, nodes]);
-
-  const handleNameChange = useCallback((e: ChangeEvent<any>) => {
-    setName(e.target.value);
-  }, []);
-
-  useEffect(() => {
-    setName(previousName);
-  }, [previousName]);
-
-  return { name, handleNameBlur, handleNameChange };
-};
-
-export const useReplaceIdWithName = () => {
-  const getNode = useGraphStore((state) => state.getNode);
-
-  const replaceIdWithName = useCallback(
-    (id?: string) => {
-      return getNode(id)?.data.name;
-    },
-    [getNode],
-  );
-
-  return replaceIdWithName;
-};
-
-export const useReplaceIdWithText = (output: unknown) => {
-  const getNameById = useReplaceIdWithName();
-
-  return {
-    replacedOutput: replaceIdWithText(output, getNameById),
-    getNameById,
-  };
-};
-
-/**
- *  monitor changes in the data.form field of the categorize and relevant operators
- *  and then synchronize them to the edge
- */
-export const useWatchNodeFormDataChange = () => {
-  const { getNode, nodes, setEdgesByNodeId } = useGraphStore((state) => state);
-
-  const buildCategorizeEdgesByFormData = useCallback(
-    (nodeId: string, form: ICategorizeForm) => {
-      // add
-      // delete
-      // edit
-      const categoryDescription = form.category_description;
-      const downstreamEdges = Object.keys(categoryDescription).reduce<Edge[]>(
-        (pre, sourceHandle) => {
-          const target = categoryDescription[sourceHandle]?.to;
-          if (target) {
-            pre.push({
-              id: uuid(),
-              source: nodeId,
-              target,
-              sourceHandle,
-            });
-          }
-
-          return pre;
-        },
-        [],
-      );
-
-      setEdgesByNodeId(nodeId, downstreamEdges);
-    },
-    [setEdgesByNodeId],
-  );
-
-  const buildRelevantEdgesByFormData = useCallback(
-    (nodeId: string, form: IRelevantForm) => {
-      const downstreamEdges = ['yes', 'no'].reduce<Edge[]>((pre, cur) => {
-        const target = form[cur as keyof IRelevantForm] as string;
-        if (target) {
-          pre.push({ id: uuid(), source: nodeId, target, sourceHandle: cur });
-        }
-
-        return pre;
-      }, []);
-
-      setEdgesByNodeId(nodeId, downstreamEdges);
-    },
-    [setEdgesByNodeId],
-  );
-
-  const buildSwitchEdgesByFormData = useCallback(
-    (nodeId: string, form: ISwitchForm) => {
-      // add
-      // delete
-      // edit
-      const conditions = form.conditions;
-      const downstreamEdges = conditions.reduce<Edge[]>((pre, _, idx) => {
-        const target = conditions[idx]?.to;
-        if (target) {
-          pre.push({
-            id: uuid(),
-            source: nodeId,
-            target,
-            sourceHandle: generateSwitchHandleText(idx),
-          });
-        }
-
-        return pre;
-      }, []);
-
-      // Splice the else condition of the conditional judgment to the edge list
-      const elseTo = form[SwitchElseTo];
-      if (elseTo) {
-        downstreamEdges.push({
-          id: uuid(),
-          source: nodeId,
-          target: elseTo,
-          sourceHandle: SwitchElseTo,
-        });
-      }
-
-      setEdgesByNodeId(nodeId, downstreamEdges);
-    },
-    [setEdgesByNodeId],
-  );
-
-  useEffect(() => {
-    nodes.forEach((node) => {
-      const currentNode = getNode(node.id);
-      const form = currentNode?.data.form ?? {};
-      const operatorType = currentNode?.data.label;
-      switch (operatorType) {
-        case Operator.Relevant:
-          buildRelevantEdgesByFormData(node.id, form as IRelevantForm);
-          break;
-        case Operator.Categorize:
-          buildCategorizeEdgesByFormData(node.id, form as ICategorizeForm);
-          break;
-        case Operator.Switch:
-          buildSwitchEdgesByFormData(node.id, form as ISwitchForm);
-          break;
-        default:
-          break;
-      }
-    });
-  }, [
-    nodes,
-    buildCategorizeEdgesByFormData,
-    getNode,
-    buildRelevantEdgesByFormData,
-    buildSwitchEdgesByFormData,
-  ]);
-};
-
-export const useDuplicateNode = () => {
-  const duplicateNodeById = useGraphStore((store) => store.duplicateNode);
-  const getNodeName = useGetNodeName();
-
-  const duplicateNode = useCallback(
-    (id: string, label: string) => {
-      duplicateNodeById(id, getNodeName(label));
-    },
-    [duplicateNodeById, getNodeName],
-  );
-
-  return duplicateNode;
-};
-
-export const useCopyPaste = () => {
-  const nodes = useGraphStore((state) => state.nodes);
-  const duplicateNode = useDuplicateNode();
-
-  const onCopyCapture = useCallback(
-    (event: ClipboardEvent) => {
-      if (get(event, 'srcElement.tagName') !== 'BODY') return;
-
-      event.preventDefault();
-      const nodesStr = JSON.stringify(
-        nodes.filter((n) => n.selected && n.data.label !== Operator.Begin),
-      );
-
-      event.clipboardData?.setData('agent:nodes', nodesStr);
-    },
-    [nodes],
-  );
-
-  const onPasteCapture = useCallback(
-    (event: ClipboardEvent) => {
-      const nodes = JSON.parse(
-        event.clipboardData?.getData('agent:nodes') || '[]',
-      ) as RAGFlowNodeType[] | undefined;
-
-      if (Array.isArray(nodes) && nodes.length) {
-        event.preventDefault();
-        nodes.forEach((n) => {
-          duplicateNode(n.id, n.data.label);
-        });
-      }
-    },
-    [duplicateNode],
-  );
-
-  useEffect(() => {
-    window.addEventListener('copy', onCopyCapture);
-    return () => {
-      window.removeEventListener('copy', onCopyCapture);
-    };
-  }, [onCopyCapture]);
-
-  useEffect(() => {
-    window.addEventListener('paste', onPasteCapture);
-    return () => {
-      window.removeEventListener('paste', onPasteCapture);
-    };
-  }, [onPasteCapture]);
-};
diff --git a/web/src/pages/flow/hooks/use-before-delete.tsx b/web/src/pages/flow/hooks/use-before-delete.tsx
deleted file mode 100644
index 14512ae96..000000000
--- a/web/src/pages/flow/hooks/use-before-delete.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-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 };
-}
diff --git a/web/src/pages/flow/hooks/use-build-dsl.ts b/web/src/pages/flow/hooks/use-build-dsl.ts
deleted file mode 100644
index 17a0681ed..000000000
--- a/web/src/pages/flow/hooks/use-build-dsl.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useFetchFlow } from '@/hooks/flow-hooks';
-import { RAGFlowNodeType } from '@/interfaces/database/flow';
-import { useCallback } from 'react';
-import useGraphStore from '../store';
-import { buildDslComponentsByGraph } from '../utils';
-
-export const useBuildDslData = () => {
-  const { data } = useFetchFlow();
-  const { nodes, edges } = useGraphStore((state) => state);
-
-  const buildDslData = useCallback(
-    (currentNodes?: RAGFlowNodeType[]) => {
-      const dslComponents = buildDslComponentsByGraph(
-        currentNodes ?? nodes,
-        edges,
-        data.dsl.components,
-      );
-
-      return {
-        ...data.dsl,
-        graph: { nodes: currentNodes ?? nodes, edges },
-        components: dslComponents,
-      };
-    },
-    [data.dsl, edges, nodes],
-  );
-
-  return { buildDslData };
-};
diff --git a/web/src/pages/flow/hooks/use-export-json.ts b/web/src/pages/flow/hooks/use-export-json.ts
deleted file mode 100644
index 5b8618de8..000000000
--- a/web/src/pages/flow/hooks/use-export-json.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { FileMimeType } from '@/constants/common';
-import { useSetModalState } from '@/hooks/common-hooks';
-import { useFetchFlow } from '@/hooks/flow-hooks';
-import { IGraph } from '@/interfaces/database/flow';
-import { downloadJsonFile } from '@/utils/file-util';
-import { message, UploadFile } from 'antd';
-import isEmpty from 'lodash/isEmpty';
-import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useBuildDslData } from './use-build-dsl';
-import { useSetGraphInfo } from './use-set-graph';
-
-export const useHandleExportOrImportJsonFile = () => {
-  const { buildDslData } = useBuildDslData();
-  const {
-    visible: fileUploadVisible,
-    hideModal: hideFileUploadModal,
-    showModal: showFileUploadModal,
-  } = useSetModalState();
-  const setGraphInfo = useSetGraphInfo();
-  const { data } = useFetchFlow();
-  const { t } = useTranslation();
-
-  const onFileUploadOk = useCallback(
-    async (fileList: UploadFile[]) => {
-      if (fileList.length > 0) {
-        const file: File = fileList[0] as unknown as File;
-        if (file.type !== FileMimeType.Json) {
-          message.error(t('flow.jsonUploadTypeErrorMessage'));
-          return;
-        }
-
-        const graphStr = await file.text();
-        const errorMessage = t('flow.jsonUploadContentErrorMessage');
-        try {
-          const graph = JSON.parse(graphStr);
-          if (graphStr && !isEmpty(graph) && Array.isArray(graph?.nodes)) {
-            setGraphInfo(graph ?? ({} as IGraph));
-            hideFileUploadModal();
-          } else {
-            message.error(errorMessage);
-          }
-        } catch (error) {
-          message.error(errorMessage);
-        }
-      }
-    },
-    [hideFileUploadModal, setGraphInfo, t],
-  );
-
-  const handleExportJson = useCallback(() => {
-    downloadJsonFile(buildDslData().graph, `${data.title}.json`);
-  }, [buildDslData, data.title]);
-
-  return {
-    fileUploadVisible,
-    handleExportJson,
-    handleImportJson: showFileUploadModal,
-    hideFileUploadModal,
-    onFileUploadOk,
-  };
-};
diff --git a/web/src/pages/flow/hooks/use-fetch-data.ts b/web/src/pages/flow/hooks/use-fetch-data.ts
deleted file mode 100644
index 245ea6abf..000000000
--- a/web/src/pages/flow/hooks/use-fetch-data.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useFetchFlow } from '@/hooks/flow-hooks';
-import { IGraph } from '@/interfaces/database/flow';
-import { useEffect } from 'react';
-import { useSetGraphInfo } from './use-set-graph';
-
-export const useFetchDataOnMount = () => {
-  const { loading, data, refetch } = useFetchFlow();
-  const setGraphInfo = useSetGraphInfo();
-
-  useEffect(() => {
-    setGraphInfo(data?.dsl?.graph ?? ({} as IGraph));
-  }, [setGraphInfo, data]);
-
-  useEffect(() => {
-    refetch();
-  }, [refetch]);
-
-  return { loading, flowDetail: data };
-};
diff --git a/web/src/pages/flow/hooks/use-get-begin-query.tsx b/web/src/pages/flow/hooks/use-get-begin-query.tsx
deleted file mode 100644
index 557bbfce0..000000000
--- a/web/src/pages/flow/hooks/use-get-begin-query.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import { RAGFlowNodeType } from '@/interfaces/database/flow';
-import { DefaultOptionType } from 'antd/es/select';
-import get from 'lodash/get';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { BeginId, Operator } from '../constant';
-import { BeginQuery } from '../interface';
-import useGraphStore from '../store';
-
-export const useGetBeginNodeDataQuery = () => {
-  const getNode = useGraphStore((state) => state.getNode);
-
-  const getBeginNodeDataQuery = useCallback(() => {
-    return get(getNode(BeginId), 'data.form.query', []);
-  }, [getNode]);
-
-  return getBeginNodeDataQuery;
-};
-
-export const useGetBeginNodeDataQueryIsSafe = () => {
-  const [isBeginNodeDataQuerySafe, setIsBeginNodeDataQuerySafe] =
-    useState(false);
-  const getBeginNodeDataQuery = useGetBeginNodeDataQuery();
-  const nodes = useGraphStore((state) => state.nodes);
-
-  useEffect(() => {
-    const query: BeginQuery[] = getBeginNodeDataQuery();
-    const isSafe = !query.some((q) => !q.optional && q.type === 'file');
-    setIsBeginNodeDataQuerySafe(isSafe);
-  }, [getBeginNodeDataQuery, nodes]);
-
-  return isBeginNodeDataQuerySafe;
-};
-
-// exclude nodes with branches
-const ExcludedNodes = [
-  Operator.Categorize,
-  Operator.Relevant,
-  Operator.Begin,
-  Operator.Note,
-];
-
-export const useBuildComponentIdSelectOptions = (
-  nodeId?: string,
-  parentId?: string,
-) => {
-  const nodes = useGraphStore((state) => state.nodes);
-  const getBeginNodeDataQuery = useGetBeginNodeDataQuery();
-  const query: BeginQuery[] = getBeginNodeDataQuery();
-
-  // 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: RAGFlowNodeType) => {
-      // Node inside iteration
-      if (parentId) {
-        return (
-          (node.parentId === parentId || node.parentId === undefined) &&
-          node.id !== parentId
-        );
-      }
-
-      return node.parentId === undefined; // The outermost node
-    },
-    [parentId],
-  );
-
-  const componentIdOptions = useMemo(() => {
-    return nodes
-      .filter(
-        (x) =>
-          x.id !== nodeId &&
-          !ExcludedNodes.some((y) => y === x.data.label) &&
-          filterChildNodesToSameParentOrExternal(x),
-      )
-      .map((x) => ({ label: x.data.name, value: x.id }));
-  }, [nodes, nodeId, filterChildNodesToSameParentOrExternal]);
-
-  const groupedOptions = [
-    {
-      label: <span>Component Output</span>,
-      title: 'Component Output',
-      options: componentIdOptions,
-    },
-    {
-      label: <span>Begin Input</span>,
-      title: 'Begin Input',
-      options: query.map((x) => ({
-        label: x.name,
-        value: `begin@${x.key}`,
-      })),
-    },
-  ];
-
-  return groupedOptions;
-};
-
-export const useGetComponentLabelByValue = (nodeId: string) => {
-  const options = useBuildComponentIdSelectOptions(nodeId);
-  const flattenOptions = useMemo(
-    () =>
-      options.reduce<DefaultOptionType[]>((pre, cur) => {
-        return [...pre, ...cur.options];
-      }, []),
-    [options],
-  );
-
-  const getLabel = useCallback(
-    (val?: string) => {
-      return flattenOptions.find((x) => x.value === val)?.label;
-    },
-    [flattenOptions],
-  );
-  return getLabel;
-};
diff --git a/web/src/pages/flow/hooks/use-iteration.ts b/web/src/pages/flow/hooks/use-iteration.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/web/src/pages/flow/hooks/use-open-document.ts b/web/src/pages/flow/hooks/use-open-document.ts
deleted file mode 100644
index 384529c15..000000000
--- a/web/src/pages/flow/hooks/use-open-document.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { useCallback } from 'react';
-
-export function useOpenDocument() {
-  const openDocument = useCallback(() => {
-    window.open(
-      'https://ragflow.io/docs/dev/category/agent-components',
-      '_blank',
-    );
-  }, []);
-
-  return openDocument;
-}
diff --git a/web/src/pages/flow/hooks/use-save-graph.ts b/web/src/pages/flow/hooks/use-save-graph.ts
deleted file mode 100644
index 89507bdae..000000000
--- a/web/src/pages/flow/hooks/use-save-graph.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-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 { useParams } from 'umi';
-import useGraphStore from '../store';
-import { useBuildDslData } from './use-build-dsl';
-
-export const useSaveGraph = () => {
-  const { data } = useFetchFlow();
-  const { setFlow, loading } = useSetFlow();
-  const { id } = useParams();
-  const { buildDslData } = useBuildDslData();
-
-  const saveGraph = useCallback(
-    async (currentNodes?: RAGFlowNodeType[]) => {
-      return setFlow({
-        id,
-        title: data.title,
-        dsl: buildDslData(currentNodes),
-      });
-    },
-    [setFlow, id, data.title, buildDslData],
-  );
-
-  return { saveGraph, loading };
-};
-
-export const useSaveGraphBeforeOpeningDebugDrawer = (show: () => void) => {
-  const { saveGraph, loading } = useSaveGraph();
-  const { resetFlow } = useResetFlow();
-
-  const handleRun = useCallback(
-    async (nextNodes?: RAGFlowNodeType[]) => {
-      const saveRet = await saveGraph(nextNodes);
-      if (saveRet?.code === 0) {
-        // Call the reset api before opening the run drawer each time
-        const resetRet = await resetFlow();
-        // After resetting, all previous messages will be cleared.
-        if (resetRet?.code === 0) {
-          show();
-        }
-      }
-    },
-    [saveGraph, resetFlow, show],
-  );
-
-  return { handleRun, loading };
-};
-
-export const useWatchAgentChange = (chatDrawerVisible: boolean) => {
-  console.log(
-    '🚀 ~ useWatchAgentChange ~ chatDrawerVisible:',
-    chatDrawerVisible,
-  );
-  const [time, setTime] = useState<string>();
-  const nodes = useGraphStore((state) => state.nodes);
-  const edges = useGraphStore((state) => state.edges);
-  // const { saveGraph } = useSaveGraph();
-  const { data: flowDetail } = useFetchFlow();
-
-  const setSaveTime = useCallback((updateTime: number) => {
-    setTime(dayjs(updateTime).format('YYYY-MM-DD HH:mm:ss'));
-  }, []);
-
-  useEffect(() => {
-    setSaveTime(flowDetail?.update_time);
-  }, [flowDetail, setSaveTime]);
-
-  // const saveAgent = useCallback(async () => {
-  //   if (!chatDrawerVisible) {
-  //     const ret = await saveGraph();
-  //     setSaveTime(ret.data.update_time);
-  //   }
-  // }, [chatDrawerVisible, saveGraph, setSaveTime]);
-
-  useDebounceEffect(
-    () => {
-      // saveAgent();
-    },
-    [nodes, edges],
-    {
-      wait: 1000 * 20,
-    },
-  );
-
-  return time;
-};
diff --git a/web/src/pages/flow/hooks/use-set-graph.ts b/web/src/pages/flow/hooks/use-set-graph.ts
deleted file mode 100644
index 6dd68a330..000000000
--- a/web/src/pages/flow/hooks/use-set-graph.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { IGraph } from '@/interfaces/database/flow';
-import { useCallback } from 'react';
-import useGraphStore from '../store';
-
-export const useSetGraphInfo = () => {
-  const { setEdges, setNodes } = useGraphStore((state) => state);
-  const setGraphInfo = useCallback(
-    ({ nodes = [], edges = [] }: IGraph) => {
-      if (nodes.length || edges.length) {
-        setNodes(nodes);
-        setEdges(edges);
-      }
-    },
-    [setEdges, setNodes],
-  );
-  return setGraphInfo;
-};
diff --git a/web/src/pages/flow/hooks/use-show-drawer.tsx b/web/src/pages/flow/hooks/use-show-drawer.tsx
deleted file mode 100644
index efc4cf32a..000000000
--- a/web/src/pages/flow/hooks/use-show-drawer.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import { useSetModalState } from '@/hooks/common-hooks';
-import { Node, NodeMouseHandler } from '@xyflow/react';
-import get from 'lodash/get';
-import { useCallback, useEffect } from 'react';
-import { Operator } from '../constant';
-import { BeginQuery } from '../interface';
-import useGraphStore from '../store';
-import { useGetBeginNodeDataQuery } from './use-get-begin-query';
-import { useSaveGraph } from './use-save-graph';
-
-export const useShowFormDrawer = () => {
-  const {
-    clickedNodeId: clickNodeId,
-    setClickedNodeId,
-    getNode,
-  } = useGraphStore((state) => state);
-  const {
-    visible: formDrawerVisible,
-    hideModal: hideFormDrawer,
-    showModal: showFormDrawer,
-  } = useSetModalState();
-
-  const handleShow = useCallback(
-    (node: Node) => {
-      setClickedNodeId(node.id);
-      showFormDrawer();
-    },
-    [showFormDrawer, setClickedNodeId],
-  );
-
-  return {
-    formDrawerVisible,
-    hideFormDrawer,
-    showFormDrawer: handleShow,
-    clickedNode: getNode(clickNodeId),
-  };
-};
-
-export const useShowSingleDebugDrawer = () => {
-  const { visible, showModal, hideModal } = useSetModalState();
-  const { saveGraph } = useSaveGraph();
-
-  const showSingleDebugDrawer = useCallback(async () => {
-    const saveRet = await saveGraph();
-    if (saveRet?.code === 0) {
-      showModal();
-    }
-  }, [saveGraph, showModal]);
-
-  return {
-    singleDebugDrawerVisible: visible,
-    hideSingleDebugDrawer: hideModal,
-    showSingleDebugDrawer,
-  };
-};
-
-const ExcludedNodes = [Operator.IterationStart, Operator.Note];
-
-export function useShowDrawer({
-  drawerVisible,
-  hideDrawer,
-}: {
-  drawerVisible: boolean;
-  hideDrawer(): void;
-}) {
-  const {
-    visible: runVisible,
-    showModal: showRunModal,
-    hideModal: hideRunModal,
-  } = useSetModalState();
-  const {
-    visible: chatVisible,
-    showModal: showChatModal,
-    hideModal: hideChatModal,
-  } = useSetModalState();
-  const {
-    singleDebugDrawerVisible,
-    showSingleDebugDrawer,
-    hideSingleDebugDrawer,
-  } = useShowSingleDebugDrawer();
-  const { formDrawerVisible, hideFormDrawer, showFormDrawer, clickedNode } =
-    useShowFormDrawer();
-  const getBeginNodeDataQuery = useGetBeginNodeDataQuery();
-
-  useEffect(() => {
-    if (drawerVisible) {
-      const query: BeginQuery[] = getBeginNodeDataQuery();
-      if (query.length > 0) {
-        showRunModal();
-        hideChatModal();
-      } else {
-        showChatModal();
-        hideRunModal();
-      }
-    }
-  }, [
-    hideChatModal,
-    hideRunModal,
-    showChatModal,
-    showRunModal,
-    drawerVisible,
-    getBeginNodeDataQuery,
-  ]);
-
-  const hideRunOrChatDrawer = useCallback(() => {
-    hideChatModal();
-    hideRunModal();
-    hideDrawer();
-  }, [hideChatModal, hideDrawer, hideRunModal]);
-
-  const onPaneClick = useCallback(() => {
-    hideFormDrawer();
-  }, [hideFormDrawer]);
-
-  const onNodeClick: NodeMouseHandler = useCallback(
-    (e, node) => {
-      if (!ExcludedNodes.some((x) => x === node.data.label)) {
-        hideSingleDebugDrawer();
-        hideRunOrChatDrawer();
-        showFormDrawer(node);
-      }
-      // handle single debug icon click
-      if (
-        get(e.target, 'dataset.play') === 'true' ||
-        get(e.target, 'parentNode.dataset.play') === 'true'
-      ) {
-        showSingleDebugDrawer();
-      }
-    },
-    [
-      hideRunOrChatDrawer,
-      hideSingleDebugDrawer,
-      showFormDrawer,
-      showSingleDebugDrawer,
-    ],
-  );
-
-  return {
-    chatVisible,
-    runVisible,
-    onPaneClick,
-    singleDebugDrawerVisible,
-    showSingleDebugDrawer,
-    hideSingleDebugDrawer,
-    formDrawerVisible,
-    showFormDrawer,
-    clickedNode,
-    onNodeClick,
-    hideFormDrawer,
-    hideRunOrChatDrawer,
-    showChatModal,
-  };
-}
diff --git a/web/src/pages/flow/index.tsx b/web/src/pages/flow/index.tsx
deleted file mode 100644
index 1d758e347..000000000
--- a/web/src/pages/flow/index.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { useSetModalState } from '@/hooks/common-hooks';
-import { ReactFlowProvider } from '@xyflow/react';
-import { Layout } from 'antd';
-import { useState } from 'react';
-import FlowCanvas from './canvas';
-import Sider from './flow-sider';
-import FlowHeader from './header';
-import { useCopyPaste } from './hooks';
-import { useFetchDataOnMount } from './hooks/use-fetch-data';
-
-const { Content } = Layout;
-
-function RagFlow() {
-  const [collapsed, setCollapsed] = useState(false);
-  const {
-    visible: chatDrawerVisible,
-    hideModal: hideChatDrawer,
-    showModal: showChatDrawer,
-  } = useSetModalState();
-
-  useFetchDataOnMount();
-  useCopyPaste();
-
-  return (
-    <Layout>
-      <ReactFlowProvider>
-        <Sider setCollapsed={setCollapsed} collapsed={collapsed}></Sider>
-        <Layout>
-          <FlowHeader
-            showChatDrawer={showChatDrawer}
-            chatDrawerVisible={chatDrawerVisible}
-          ></FlowHeader>
-          <Content style={{ margin: 0 }}>
-            <FlowCanvas
-              drawerVisible={chatDrawerVisible}
-              hideDrawer={hideChatDrawer}
-            ></FlowCanvas>
-          </Content>
-        </Layout>
-      </ReactFlowProvider>
-    </Layout>
-  );
-}
-
-export default RagFlow;
diff --git a/web/src/pages/flow/interface.ts b/web/src/pages/flow/interface.ts
deleted file mode 100644
index ff70f1e69..000000000
--- a/web/src/pages/flow/interface.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { RAGFlowNodeType } from '@/interfaces/database/flow';
-import { FormInstance } from 'antd';
-
-export interface IOperatorForm {
-  onValuesChange?(changedValues: any, values: any): void;
-  form?: FormInstance;
-  node?: RAGFlowNodeType;
-  nodeId?: string;
-}
-
-export interface IGenerateParameter {
-  id?: string;
-  key: string;
-  component_id?: string;
-}
-
-export interface IInvokeVariable extends IGenerateParameter {
-  value?: string;
-}
-
-export type IPosition = { top: number; right: number; idx: number };
-
-export interface BeginQuery {
-  key: string;
-  type: string;
-  value: string;
-  optional: boolean;
-  name: string;
-  options: (number | string | boolean)[];
-}
diff --git a/web/src/pages/flow/interpreter.json b/web/src/pages/flow/interpreter.json
deleted file mode 100644
index 8bc5f149d..000000000
--- a/web/src/pages/flow/interpreter.json
+++ /dev/null
@@ -1,75 +0,0 @@
-{
-  "edges": [
-    {
-      "id": "c87c7805-8cf0-4cd4-b45b-152031811020",
-      "label": "",
-      "source": "begin",
-      "target": "answer:0"
-    },
-    {
-      "id": "e30320bb-601b-4885-acb3-79becdc49f08",
-      "label": "",
-      "source": "generate:0",
-      "target": "answer:0"
-    },
-    {
-      "id": "83927e42-739a-402a-9f75-a88d4fab37ed",
-      "label": "",
-      "source": "answer:0",
-      "target": "generate:0"
-    }
-  ],
-  "nodes": [
-    {
-      "id": "begin",
-      "type": "beginNode",
-      "position": {
-        "x": 0,
-        "y": 0
-      },
-      "data": {
-        "label": "Begin",
-        "name": "FruityPianosSend",
-        "form": {
-          "prologue": "Hi there! Please enter the text you want to translate in format like: 'text you want to translate' => target language. For an example: 您好！ => English"
-        }
-      },
-      "sourcePosition": "left",
-      "targetPosition": "right"
-    },
-    {
-      "id": "answer:0",
-      "type": "ragNode",
-      "position": {
-        "x": 0,
-        "y": 0
-      },
-      "data": {
-        "label": "Answer",
-        "name": "YummyBoatsFlow",
-        "form": {}
-      },
-      "sourcePosition": "left",
-      "targetPosition": "right"
-    },
-    {
-      "id": "generate:0",
-      "type": "ragNode",
-      "position": {
-        "x": 0,
-        "y": 0
-      },
-      "data": {
-        "label": "Generate",
-        "name": "SwiftTramsDrop",
-        "form": {
-          "llm_id": "deepseek-chat",
-          "prompt": "You are an professional interpreter.\n- Role: an professional interpreter.\n- Input format: content need to be translated => target language. \n- Answer format: => translated content in target language. \n- Examples:\n  - user: 您好！ => English. assistant: => How are you doing!\n  - user: You look good today. => Japanese. assistant: => 今日は調子がいいですね 。\n",
-          "temperature": 0.5
-        }
-      },
-      "sourcePosition": "left",
-      "targetPosition": "right"
-    }
-  ]
-}
diff --git a/web/src/pages/flow/json-upload-modal/index.less b/web/src/pages/flow/json-upload-modal/index.less
deleted file mode 100644
index 8472339fe..000000000
--- a/web/src/pages/flow/json-upload-modal/index.less
+++ /dev/null
@@ -1,13 +0,0 @@
-.uploader {
-  :global {
-    .ant-upload-list {
-      max-height: 40vh;
-      overflow-y: auto;
-    }
-  }
-}
-
-.uploadLimit {
-  color: red;
-  font-size: 12px;
-}
diff --git a/web/src/pages/flow/json-upload-modal/index.tsx b/web/src/pages/flow/json-upload-modal/index.tsx
deleted file mode 100644
index 085ecf349..000000000
--- a/web/src/pages/flow/json-upload-modal/index.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { useTranslate } from '@/hooks/common-hooks';
-import { IModalProps } from '@/interfaces/common';
-import { InboxOutlined } from '@ant-design/icons';
-import { Modal, Upload, UploadFile, UploadProps } from 'antd';
-import { Dispatch, SetStateAction, useState } from 'react';
-
-import { FileMimeType } from '@/constants/common';
-
-import styles from './index.less';
-
-const { Dragger } = Upload;
-
-const FileUpload = ({
-  directory,
-  fileList,
-  setFileList,
-}: {
-  directory: boolean;
-  fileList: UploadFile[];
-  setFileList: Dispatch<SetStateAction<UploadFile[]>>;
-}) => {
-  const { t } = useTranslate('fileManager');
-  const props: UploadProps = {
-    multiple: false,
-    accept: FileMimeType.Json,
-    onRemove: (file) => {
-      const index = fileList.indexOf(file);
-      const newFileList = fileList.slice();
-      newFileList.splice(index, 1);
-      setFileList(newFileList);
-    },
-    beforeUpload: (file) => {
-      setFileList(() => {
-        return [file];
-      });
-
-      return false;
-    },
-    directory,
-    fileList,
-  };
-
-  return (
-    <Dragger {...props} className={styles.uploader}>
-      <p className="ant-upload-drag-icon">
-        <InboxOutlined />
-      </p>
-      <p className="ant-upload-text">{t('uploadTitle')}</p>
-      <p className="ant-upload-hint">{t('uploadDescription')}</p>
-      {false && <p className={styles.uploadLimit}>{t('uploadLimit')}</p>}
-    </Dragger>
-  );
-};
-
-const JsonUploadModal = ({
-  visible,
-  hideModal,
-  loading,
-  onOk: onFileUploadOk,
-}: IModalProps<UploadFile[]>) => {
-  const { t } = useTranslate('fileManager');
-  const [fileList, setFileList] = useState<UploadFile[]>([]);
-  const [directoryFileList, setDirectoryFileList] = useState<UploadFile[]>([]);
-
-  const clearFileList = () => {
-    setFileList([]);
-    setDirectoryFileList([]);
-  };
-
-  const onOk = async () => {
-    const ret = await onFileUploadOk?.([...fileList, ...directoryFileList]);
-    return ret;
-  };
-
-  const afterClose = () => {
-    clearFileList();
-  };
-
-  return (
-    <Modal
-      title={t('uploadFile')}
-      open={visible}
-      onOk={onOk}
-      onCancel={hideModal}
-      confirmLoading={loading}
-      afterClose={afterClose}
-    >
-      <FileUpload
-        directory={false}
-        fileList={fileList}
-        setFileList={setFileList}
-      ></FileUpload>
-    </Modal>
-  );
-};
-
-export default JsonUploadModal;
diff --git a/web/src/pages/flow/list/agent-template-modal.tsx b/web/src/pages/flow/list/agent-template-modal.tsx
deleted file mode 100644
index ac19ff0de..000000000
--- a/web/src/pages/flow/list/agent-template-modal.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import { IModalManagerChildrenProps } from '@/components/modal-manager';
-import { useSetModalState, useTranslate } from '@/hooks/common-hooks';
-import { IFlowTemplate } from '@/interfaces/database/flow';
-// import { useFetchFlowTemplates } from '@/hooks/flow-hooks';
-import { useSelectItem } from '@/hooks/logic-hooks';
-import { Button, Card, Flex, List, Modal, Typography } from 'antd';
-import { useCallback, useState } from 'react';
-import CreateAgentModal from './create-agent-modal';
-import GraphAvatar from './graph-avatar';
-
-import DOMPurify from 'dompurify';
-import styles from './index.less';
-
-const { Title, Text, Paragraph } = Typography;
-interface IProps extends Omit<IModalManagerChildrenProps, 'showModal'> {
-  loading: boolean;
-  onOk: (name: string, templateId: string) => void;
-  showModal?(): void;
-  templateList: IFlowTemplate[];
-}
-
-const AgentTemplateModal = ({
-  visible,
-  hideModal,
-  loading,
-  onOk,
-  templateList,
-}: IProps) => {
-  const { t } = useTranslate('common');
-  // const { data: list } = useFetchFlowTemplates();
-  const { selectedId, handleItemClick } = useSelectItem('');
-  const [checkedId, setCheckedId] = useState<string>('');
-
-  const {
-    visible: creatingVisible,
-    hideModal: hideCreatingModal,
-    showModal: showCreatingModal,
-  } = useSetModalState();
-
-  const handleOk = useCallback(
-    async (name: string) => {
-      return onOk(name, checkedId);
-    },
-    [onOk, checkedId],
-  );
-
-  const onShowCreatingModal = useCallback(
-    (id: string) => () => {
-      showCreatingModal();
-      setCheckedId(id);
-    },
-    [showCreatingModal],
-  );
-
-  return (
-    <Modal
-      title={t('createGraph', { keyPrefix: 'flow' })}
-      open={visible}
-      width={'100vw'}
-      onCancel={hideModal}
-      okButtonProps={{ loading }}
-      confirmLoading={loading}
-      className={styles.agentTemplateModal}
-      wrapClassName={styles.agentTemplateModalWrapper}
-      footer={null}
-    >
-      <section className={styles.createModalContent}>
-        <Title level={5}>
-          {t('createFromTemplates', { keyPrefix: 'flow' })}
-        </Title>
-        <List
-          grid={{ gutter: 16, column: 4 }}
-          dataSource={templateList}
-          renderItem={(x) => (
-            <List.Item>
-              <Card
-                key={x.id}
-                onMouseEnter={handleItemClick(x.id)}
-                onMouseLeave={handleItemClick('')}
-                className={styles.flowTemplateCard}
-              >
-                <Flex gap={'middle'} align="center">
-                  <GraphAvatar avatar={x.avatar}></GraphAvatar>
-                  <b className={styles.agentTitleWrapper}>
-                    <Text
-                      style={{ width: '96%' }}
-                      ellipsis={{ tooltip: x.title }}
-                    >
-                      {x.title}
-                    </Text>
-                  </b>
-                </Flex>
-                <div className={styles.agentDescription}>
-                  <Paragraph ellipsis={{ tooltip: x.description, rows: 5 }}>
-                    <div
-                      dangerouslySetInnerHTML={{
-                        __html: DOMPurify.sanitize(x.description),
-                      }}
-                    ></div>
-                  </Paragraph>
-                </div>
-                {selectedId === x.id && (
-                  <Button
-                    type={'primary'}
-                    block
-                    onClick={onShowCreatingModal(x.id)}
-                    className={styles.useButton}
-                  >
-                    {t('useTemplate', { keyPrefix: 'flow' })}
-                  </Button>
-                )}
-              </Card>
-            </List.Item>
-          )}
-        />
-      </section>
-      {creatingVisible && (
-        <CreateAgentModal
-          loading={loading}
-          visible={creatingVisible}
-          hideModal={hideCreatingModal}
-          onOk={handleOk}
-        ></CreateAgentModal>
-      )}
-    </Modal>
-  );
-};
-
-export default AgentTemplateModal;
diff --git a/web/src/pages/flow/list/create-agent-modal.tsx b/web/src/pages/flow/list/create-agent-modal.tsx
deleted file mode 100644
index 52e6601c8..000000000
--- a/web/src/pages/flow/list/create-agent-modal.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { IModalManagerChildrenProps } from '@/components/modal-manager';
-import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Input, Modal } from 'antd';
-
-interface IProps extends Omit<IModalManagerChildrenProps, 'showModal'> {
-  loading: boolean;
-  onOk: (name: string) => void;
-  showModal?(): void;
-}
-
-const CreateAgentModal = ({ visible, hideModal, loading, onOk }: IProps) => {
-  const [form] = Form.useForm();
-  const { t } = useTranslate('common');
-
-  type FieldType = {
-    name?: string;
-  };
-
-  const handleOk = async () => {
-    const ret = await form.validateFields();
-
-    return onOk(ret.name);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      handleOk();
-    }
-  };
-
-  return (
-    <Modal
-      title={t('createGraph', { keyPrefix: 'flow' })}
-      open={visible}
-      onOk={handleOk}
-      onCancel={hideModal}
-      okButtonProps={{ loading }}
-      confirmLoading={loading}
-    >
-      <Form
-        name="basic"
-        labelCol={{ span: 4 }}
-        wrapperCol={{ span: 20 }}
-        style={{ maxWidth: 600 }}
-        autoComplete="off"
-        form={form}
-      >
-        <Form.Item<FieldType>
-          label={t('name')}
-          name="name"
-          rules={[{ required: true, message: t('namePlaceholder') }]}
-        >
-          <Input onKeyDown={handleKeyDown} />
-        </Form.Item>
-      </Form>
-    </Modal>
-  );
-};
-
-export default CreateAgentModal;
diff --git a/web/src/pages/flow/list/flow-card/index.less b/web/src/pages/flow/list/flow-card/index.less
deleted file mode 100644
index d483d46f0..000000000
--- a/web/src/pages/flow/list/flow-card/index.less
+++ /dev/null
@@ -1,84 +0,0 @@
-.container {
-  height: 160px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-
-  .delete {
-    height: 24px;
-  }
-
-  .content {
-    display: flex;
-    justify-content: space-between;
-
-    .context {
-      flex: 1;
-    }
-  }
-
-  .footer {
-    // text-align: left;
-  }
-  .footerTop {
-    padding-bottom: 2px;
-  }
-}
-
-.card {
-  border-radius: 12px;
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  background-color: rgba(255, 255, 255, 0.1);
-  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-  padding: 24px;
-  width: 300px;
-  cursor: pointer;
-
-  .titleWrapper {
-    // flex: 1;
-    .title {
-      font-size: 24px;
-      line-height: 32px;
-      font-weight: 600;
-      word-break: break-all;
-    }
-    .description {
-      font-size: 12px;
-      font-weight: 600;
-      line-height: 20px;
-    }
-  }
-
-  :global {
-    .ant-card-body {
-      padding: 0;
-      margin: 0;
-    }
-  }
-  .bottom {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  .bottomLeft {
-    vertical-align: middle;
-  }
-  .leftIcon {
-    margin-right: 10px;
-    font-size: 18px;
-    vertical-align: middle;
-  }
-  .rightText {
-    font-size: 12px;
-    font-weight: 600;
-    vertical-align: middle;
-  }
-}
-
-.hideRibbon {
-  display: none !important;
-}
-
-.ribbon {
-  top: 4px;
-}
diff --git a/web/src/pages/flow/list/flow-card/index.tsx b/web/src/pages/flow/list/flow-card/index.tsx
deleted file mode 100644
index 38586a8e7..000000000
--- a/web/src/pages/flow/list/flow-card/index.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { formatDate } from '@/utils/date';
-import { CalendarOutlined } from '@ant-design/icons';
-import { Badge, Card, Typography } from 'antd';
-import { useNavigate } from 'umi';
-
-import OperateDropdown from '@/components/operate-dropdown';
-import { useDeleteFlow } from '@/hooks/flow-hooks';
-import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
-import { IFlow } from '@/interfaces/database/flow';
-import classNames from 'classnames';
-import { useCallback } from 'react';
-import GraphAvatar from '../graph-avatar';
-import styles from './index.less';
-
-interface IProps {
-  item: IFlow;
-  onDelete?: (string: string) => void;
-}
-
-const FlowCard = ({ item }: IProps) => {
-  const navigate = useNavigate();
-  const { deleteFlow } = useDeleteFlow();
-  const { data: userInfo } = useFetchUserInfo();
-
-  const removeFlow = useCallback(() => {
-    return deleteFlow([item.id]);
-  }, [deleteFlow, item]);
-
-  const handleCardClick = () => {
-    navigate(`/flow/${item.id}`);
-  };
-
-  return (
-    <Badge.Ribbon
-      text={item?.nickname}
-      color={userInfo?.nickname === item?.nickname ? '#1677ff' : 'pink'}
-      className={classNames(styles.ribbon, {
-        [styles.hideRibbon]: item.permission !== 'team',
-      })}
-    >
-      <Card className={styles.card} onClick={handleCardClick}>
-        <div className={styles.container}>
-          <div className={styles.content}>
-            <GraphAvatar avatar={item.avatar}></GraphAvatar>
-            <OperateDropdown deleteItem={removeFlow}></OperateDropdown>
-          </div>
-          <div className={styles.titleWrapper}>
-            <Typography.Title
-              className={styles.title}
-              ellipsis={{ tooltip: item.title }}
-            >
-              {item.title}
-            </Typography.Title>
-            <p className="truncate" title={item.description}>
-              {item.description}
-            </p>
-          </div>
-          <div className={styles.footer}>
-            <div className={styles.bottom}>
-              <div className={styles.bottomLeft}>
-                <CalendarOutlined className={styles.leftIcon} />
-                <span className={styles.rightText}>
-                  {formatDate(item.update_time)}
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </Card>
-    </Badge.Ribbon>
-  );
-};
-
-export default FlowCard;
diff --git a/web/src/pages/flow/list/graph-avatar.tsx b/web/src/pages/flow/list/graph-avatar.tsx
deleted file mode 100644
index 5d1dedecb..000000000
--- a/web/src/pages/flow/list/graph-avatar.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { ReactComponent as NothingIcon } from '@/assets/svg/nothing.svg';
-import { Avatar } from 'antd';
-
-const GraphAvatar = ({ avatar }: { avatar?: string | null }) => {
-  return (
-    <div>
-      {avatar ? (
-        <Avatar size={40} icon={<NothingIcon />} src={avatar} />
-      ) : (
-        <NothingIcon width={40} height={30} />
-      )}
-    </div>
-  );
-};
-
-export default GraphAvatar;
diff --git a/web/src/pages/flow/list/hooks.ts b/web/src/pages/flow/list/hooks.ts
deleted file mode 100644
index 35c994d56..000000000
--- a/web/src/pages/flow/list/hooks.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import { useSetModalState } from '@/hooks/common-hooks';
-import { useFetchFlowTemplates, useSetFlow } from '@/hooks/flow-hooks';
-import { useHandleSearchChange } from '@/hooks/logic-hooks';
-import flowService from '@/services/flow-service';
-import { useInfiniteQuery } from '@tanstack/react-query';
-import { useDebounce } from 'ahooks';
-import { useCallback } from 'react';
-import { useNavigate } from 'umi';
-
-export const useFetchDataOnMount = () => {
-  const { searchString, handleInputChange } = useHandleSearchChange();
-  const debouncedSearchString = useDebounce(searchString, { wait: 500 });
-
-  const PageSize = 30;
-  const {
-    data,
-    error,
-    fetchNextPage,
-    hasNextPage,
-    isFetching,
-    isFetchingNextPage,
-    status,
-  } = useInfiniteQuery({
-    queryKey: ['infiniteFetchFlowListTeam', debouncedSearchString],
-    queryFn: async ({ pageParam }) => {
-      const { data } = await flowService.listCanvasTeam({
-        page: pageParam,
-        page_size: PageSize,
-        keywords: debouncedSearchString,
-      });
-      const list = data?.data ?? [];
-      return list;
-    },
-    initialPageParam: 1,
-    getNextPageParam: (lastPage, pages, lastPageParam) => {
-      if (lastPageParam * PageSize <= lastPage.total) {
-        return lastPageParam + 1;
-      }
-      return undefined;
-    },
-  });
-  return {
-    data,
-    loading: isFetching,
-    error,
-    fetchNextPage,
-    hasNextPage,
-    isFetching,
-    isFetchingNextPage,
-    status,
-    handleInputChange,
-    searchString,
-  };
-};
-
-export const useSaveFlow = () => {
-  const {
-    visible: flowSettingVisible,
-    hideModal: hideFlowSettingModal,
-    showModal: showFileRenameModal,
-  } = useSetModalState();
-  const { loading, setFlow } = useSetFlow();
-  const navigate = useNavigate();
-  const { data: list } = useFetchFlowTemplates();
-
-  const onFlowOk = useCallback(
-    async (title: string, templateId: string) => {
-      const templateItem = list.find((x) => x.id === templateId);
-
-      let dsl = templateItem?.dsl;
-      const ret = await setFlow({
-        title,
-        dsl,
-        avatar: templateItem?.avatar,
-      });
-
-      if (ret?.code === 0) {
-        hideFlowSettingModal();
-        navigate(`/flow/${ret.data.id}`);
-      }
-    },
-    [setFlow, hideFlowSettingModal, navigate, list],
-  );
-
-  return {
-    flowSettingLoading: loading,
-    initialFlowName: '',
-    onFlowOk,
-    flowSettingVisible,
-    hideFlowSettingModal,
-    templateList: list,
-    showFlowSettingModal: showFileRenameModal,
-  };
-};
diff --git a/web/src/pages/flow/list/index.less b/web/src/pages/flow/list/index.less
deleted file mode 100644
index 7dffd8a32..000000000
--- a/web/src/pages/flow/list/index.less
+++ /dev/null
@@ -1,99 +0,0 @@
-.flowListWrapper {
-  padding: 48px;
-}
-
-.topWrapper {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  padding: 0 60px 72px;
-
-  .title {
-    font-family: Inter;
-    font-size: 30px;
-    font-style: normal;
-    font-weight: @fontWeight600;
-    line-height: 38px;
-    color: rgba(16, 24, 40, 1);
-  }
-  .description {
-    font-family: Inter;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 24px;
-    color: rgba(71, 84, 103, 1);
-  }
-
-  .topButton {
-    font-family: Inter;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: @fontWeight600;
-    line-height: 20px;
-  }
-
-  .filterButton {
-    display: flex;
-    align-items: center;
-    .topButton();
-  }
-}
-.flowCardContainer {
-  padding: 0 60px;
-  overflow: auto;
-  .knowledgeEmpty {
-    width: 100%;
-  }
-}
-
-.templatesBox {
-  max-height: 70vh;
-  overflow: auto;
-}
-
-.agentTemplateModal {
-  top: 0;
-  margin: 0;
-  width: 100%;
-  max-width: 100%;
-  height: 100vh;
-  max-height: 100vh;
-  padding: 0;
-
-  :global(.ant-modal-content) {
-    // width: 100vw;
-    height: 100%;
-    border-radius: 0;
-  }
-  .agentDescription {
-    padding-top: 18px;
-    height: 110px;
-  }
-  .createModalContent {
-    height: 90vh;
-  }
-  .agentTitleWrapper {
-    width: 80%;
-  }
-  .flowTemplateCard {
-    position: relative;
-    cursor: pointer;
-  }
-
-  .selectedFlowTemplateCard {
-    background-color: @selectedBackgroundColor;
-  }
-  .useButton {
-    position: absolute;
-    width: 84%;
-    left: 0;
-    right: 0;
-    bottom: 10px;
-    margin: auto;
-  }
-}
-
-.agentTemplateModalWrapper {
-  margin: 0;
-}
diff --git a/web/src/pages/flow/list/index.tsx b/web/src/pages/flow/list/index.tsx
deleted file mode 100644
index 9bc0a845d..000000000
--- a/web/src/pages/flow/list/index.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
-import {
-  Button,
-  Divider,
-  Empty,
-  Flex,
-  Input,
-  Skeleton,
-  Space,
-  Spin,
-} from 'antd';
-import AgentTemplateModal from './agent-template-modal';
-import FlowCard from './flow-card';
-import { useFetchDataOnMount, useSaveFlow } from './hooks';
-
-import { useTranslate } from '@/hooks/common-hooks';
-import { useMemo } from 'react';
-import InfiniteScroll from 'react-infinite-scroll-component';
-import styles from './index.less';
-
-const FlowList = () => {
-  const {
-    showFlowSettingModal,
-    hideFlowSettingModal,
-    flowSettingVisible,
-    flowSettingLoading,
-    templateList,
-    onFlowOk,
-  } = useSaveFlow();
-  const { t } = useTranslate('flow');
-
-  const {
-    data,
-    loading,
-    searchString,
-    handleInputChange,
-    fetchNextPage,
-    hasNextPage,
-  } = useFetchDataOnMount();
-
-  const nextList = useMemo(() => {
-    const list =
-      data?.pages?.flatMap((x) => (Array.isArray(x.kbs) ? x.kbs : [])) ?? [];
-    return list;
-  }, [data?.pages]);
-
-  const total = useMemo(() => {
-    return data?.pages.at(-1).total ?? 0;
-  }, [data?.pages]);
-
-  return (
-    <Flex className={styles.flowListWrapper} vertical flex={1} gap={'large'}>
-      <Flex justify={'end'}>
-        <Space size={'large'}>
-          <Input
-            placeholder={t('searchAgentPlaceholder')}
-            value={searchString}
-            style={{ width: 220 }}
-            allowClear
-            onChange={handleInputChange}
-            prefix={<SearchOutlined />}
-          />
-          <Button
-            type="primary"
-            icon={<PlusOutlined />}
-            onClick={showFlowSettingModal}
-          >
-            {t('createGraph')}
-          </Button>
-        </Space>
-      </Flex>
-
-      <Spin spinning={loading}>
-        <div
-          id="scrollableDiv"
-          style={{
-            height: 'calc(100vh - 200px)',
-            overflow: 'auto',
-          }}
-        >
-          <InfiniteScroll
-            dataLength={nextList?.length ?? 0}
-            next={fetchNextPage}
-            hasMore={hasNextPage}
-            loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
-            endMessage={
-              !!total && <Divider plain>{t('noMoreData')} 🤐</Divider>
-            }
-            scrollableTarget="scrollableDiv"
-            scrollThreshold="200px"
-          >
-            <Flex
-              gap={'large'}
-              wrap="wrap"
-              className={styles.flowCardContainer}
-            >
-              {nextList.length > 0 ? (
-                nextList.map((item) => {
-                  return <FlowCard item={item} key={item.id}></FlowCard>;
-                })
-              ) : (
-                <Empty className={styles.knowledgeEmpty}></Empty>
-              )}
-            </Flex>
-          </InfiniteScroll>
-        </div>
-      </Spin>
-      {flowSettingVisible && (
-        <AgentTemplateModal
-          visible={flowSettingVisible}
-          onOk={onFlowOk}
-          loading={flowSettingLoading}
-          hideModal={hideFlowSettingModal}
-          templateList={templateList}
-        ></AgentTemplateModal>
-      )}
-    </Flex>
-  );
-};
-
-export default FlowList;
diff --git a/web/src/pages/flow/mock.tsx b/web/src/pages/flow/mock.tsx
deleted file mode 100644
index 79c61d73d..000000000
--- a/web/src/pages/flow/mock.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-import { Position } from '@xyflow/react';
-
-export const initialNodes = [
-  {
-    sourcePosition: Position.Left,
-    targetPosition: Position.Right,
-    id: 'node-1',
-    type: 'ragNode',
-    position: { x: 0, y: 0 },
-    // position: { x: 400, y: 100 },
-    data: { label: 123 },
-  },
-  {
-    sourcePosition: Position.Right,
-    targetPosition: Position.Left,
-    id: '1',
-    data: { label: 'Hello' },
-    position: { x: 0, y: 0 },
-    // position: { x: 0, y: 50 },
-    type: 'input',
-  },
-  {
-    sourcePosition: Position.Right,
-    targetPosition: Position.Left,
-    id: '2',
-    data: { label: 'World' },
-    position: { x: 0, y: 0 },
-    // position: { x: 200, y: 50 },
-  },
-];
-
-export const initialEdges = [
-  { id: '1-2', source: '1', target: '2', label: 'to the', type: 'step' },
-];
-
-export const dsl = {
-  graph: {
-    nodes: [
-      {
-        id: 'Begin',
-        type: 'beginNode',
-        position: {
-          x: 50,
-          y: 200,
-        },
-        data: {
-          label: 'Begin',
-          name: 'begin',
-        },
-        sourcePosition: 'left',
-        targetPosition: 'right',
-      },
-      // {
-      //   id: 'Answer:China',
-      //   type: 'ragNode',
-      //   position: {
-      //     x: 150,
-      //     y: 200,
-      //   },
-      //   data: {
-      //     label: 'Answer',
-      //   },
-      //   sourcePosition: 'left',
-      //   targetPosition: 'right',
-      // },
-      // {
-      //   id: 'Retrieval:China',
-      //   type: 'ragNode',
-      //   position: {
-      //     x: 250,
-      //     y: 200,
-      //   },
-      //   data: {
-      //     label: 'Retrieval',
-      //   },
-      //   sourcePosition: 'left',
-      //   targetPosition: 'right',
-      // },
-      // {
-      //   id: 'Generate:China',
-      //   type: 'ragNode',
-      //   position: {
-      //     x: 100,
-      //     y: 100,
-      //   },
-      //   data: {
-      //     label: 'Generate',
-      //   },
-      //   sourcePosition: 'left',
-      //   targetPosition: 'right',
-      // },
-    ],
-    edges: [
-      // {
-      //   id: '7facb53d-65c9-43b3-ac55-339c445d3891',
-      //   label: '',
-      //   source: 'begin',
-      //   target: 'Answer:China',
-      //   markerEnd: {
-      //     type: 'arrow',
-      //   },
-      // },
-      // {
-      //   id: '7ac83631-502d-410f-a6e7-bec6866a5e99',
-      //   label: '',
-      //   source: 'Generate:China',
-      //   target: 'Answer:China',
-      //   markerEnd: {
-      //     type: 'arrow',
-      //   },
-      // },
-      // {
-      //   id: '0aaab297-5779-43ed-9281-2c4d3741566f',
-      //   label: '',
-      //   source: 'Answer:China',
-      //   target: 'Retrieval:China',
-      //   markerEnd: {
-      //     type: 'arrow',
-      //   },
-      // },
-      // {
-      //   id: '3477f9f3-0a7d-400e-af96-a11ea7673183',
-      //   label: '',
-      //   source: 'Retrieval:China',
-      //   target: 'Generate:China',
-      //   markerEnd: {
-      //     type: 'arrow',
-      //   },
-      // },
-    ],
-  },
-  components: {
-    begin: {
-      obj: {
-        component_name: 'Begin',
-        params: {},
-      },
-      downstream: ['Answer:China'], // other edge target is downstream, edge source is current node id
-      upstream: [], // edge source is upstream, edge target is current node id
-    },
-    // 'Answer:China': {
-    //   obj: {
-    //     component_name: 'Answer',
-    //     params: {},
-    //   },
-    //   downstream: ['Retrieval:China'],
-    //   upstream: ['begin', 'Generate:China'],
-    // },
-    // 'Retrieval:China': {
-    //   obj: {
-    //     component_name: 'Retrieval',
-    //     params: {
-    //       similarity_threshold: 0.2,
-    //       keywords_similarity_weight: 0.3,
-    //       top_n: 6,
-    //       top_k: 1024,
-    //       rerank_id: 'BAAI/bge-reranker-v2-m3',
-    //       kb_ids: ['568aa82603b611efa9d9fa163e197198'],
-    //     },
-    //   },
-    //   downstream: ['Generate:China'],
-    //   upstream: ['Answer:China'],
-    // },
-    // 'Generate:China': {
-    //   obj: {
-    //     component_name: 'Generate',
-    //     params: {
-    //       llm_id: 'deepseek-chat',
-    //       prompt:
-    //         'You are an intelligent assistant. Please summarize the content of the knowledge base to answer the question. Please list the data in the knowledge base and answer in detail. When all knowledge base content is irrelevant to the question, your answer must include the sentence "The answer you are looking for is not found in the knowledge base!" Answers need to consider chat history.\n      Here is the knowledge base:\n      {input}\n      The above is the knowledge base.',
-    //       temperature: 0.2,
-    //     },
-    //   },
-    //   downstream: ['Answer:China'],
-    //   upstream: ['Retrieval:China'],
-    // },
-  },
-  messages: [],
-  reference: [],
-  history: [],
-  path: [],
-  answer: [],
-};
diff --git a/web/src/pages/flow/operator-icon/index.less b/web/src/pages/flow/operator-icon/index.less
deleted file mode 100644
index a8746c13b..000000000
--- a/web/src/pages/flow/operator-icon/index.less
+++ /dev/null
@@ -1,6 +0,0 @@
-.icon {
-  color: rgb(59, 118, 244);
-  font-size: 24px;
-  max-width: 24px;
-  max-height: 24px;
-}
diff --git a/web/src/pages/flow/operator-icon/index.tsx b/web/src/pages/flow/operator-icon/index.tsx
deleted file mode 100644
index c6f74b5f6..000000000
--- a/web/src/pages/flow/operator-icon/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import { Operator, operatorIconMap } from '../constant';
-
-import styles from './index.less';
-
-interface IProps {
-  name: Operator;
-  fontSize?: number;
-  width?: number;
-  color?: string;
-}
-
-const OperatorIcon = ({ name, fontSize, width, color }: IProps) => {
-  const Icon = operatorIconMap[name] || React.Fragment;
-  return (
-    <Icon
-      className={styles.icon}
-      style={{ fontSize, color }}
-      width={width}
-    ></Icon>
-  );
-};
-
-export default OperatorIcon;
diff --git a/web/src/pages/flow/retrieval_relevant_rewrite_and_generate.json b/web/src/pages/flow/retrieval_relevant_rewrite_and_generate.json
deleted file mode 100644
index 5c14b16a1..000000000
--- a/web/src/pages/flow/retrieval_relevant_rewrite_and_generate.json
+++ /dev/null
@@ -1,160 +0,0 @@
-{
-  "edges": [
-    {
-      "id": "81de838d-a541-4b3f-9d68-9172ffd7c6b4",
-      "label": "",
-      "source": "begin",
-      "target": "answer:0"
-    },
-    {
-      "id": "8fa8daaa-58e7-4494-84c9-d53f379d2550",
-      "label": "",
-      "source": "generate:0",
-      "target": "answer:0"
-    },
-    {
-      "id": "6720a5b8-96bc-4535-8800-ad3f35431a16",
-      "label": "",
-      "source": "answer:0",
-      "target": "retrieval:0"
-    },
-    {
-      "id": "81476d89-707f-4d87-8aa3-fecb9d8499b3",
-      "label": "",
-      "source": "rewrite:0",
-      "target": "retrieval:0"
-    },
-    {
-      "id": "2bba4a81-44e7-4796-b25f-e68c3fc7e54a",
-      "label": "",
-      "source": "retrieval:0",
-      "target": "relevant:0"
-    },
-    {
-      "id": "eb205b7a-a87e-4bcc-94c5-bddff13f8ddd",
-      "label": "",
-      "source": "relevant:0",
-      "target": "generate:0"
-    },
-    {
-      "id": "b8611b17-a01a-485c-ad40-377329eb8d96",
-      "label": "",
-      "source": "relevant:0",
-      "target": "rewrite:0"
-    }
-  ],
-  "nodes": [
-    {
-      "id": "begin",
-      "type": "beginNode",
-      "position": {
-        "x": 0,
-        "y": 0
-      },
-      "data": {
-        "label": "Begin",
-        "name": "FiftyDeerDeny",
-        "form": {
-          "prologue": "Hi there!"
-        }
-      },
-      "sourcePosition": "left",
-      "targetPosition": "right"
-    },
-    {
-      "id": "answer:0",
-      "type": "ragNode",
-      "position": {
-        "x": 0,
-        "y": 0
-      },
-      "data": {
-        "label": "Answer",
-        "name": "NinePointsSmoke",
-        "form": {}
-      },
-      "sourcePosition": "left",
-      "targetPosition": "right"
-    },
-    {
-      "id": "retrieval:0",
-      "type": "ragNode",
-      "position": {
-        "x": 0,
-        "y": 0
-      },
-      "data": {
-        "label": "Retrieval",
-        "name": "ProudLiesPull",
-        "form": {
-          "similarity_threshold": 0.2,
-          "keywords_similarity_weight": 0.3,
-          "top_n": 6,
-          "top_k": 1024,
-          "rerank_id": "BAAI/bge-reranker-v2-m3",
-          "kb_ids": ["869a236818b811ef91dffa163e197198"],
-          "empty_response": "Sorry, knowledge base has noting related information."
-        }
-      },
-      "sourcePosition": "left",
-      "targetPosition": "right"
-    },
-    {
-      "id": "relevant:0",
-      "type": "relevantNode",
-      "position": {
-        "x": 0,
-        "y": 0
-      },
-      "data": {
-        "label": "Relevant",
-        "name": "StrongBooksPay",
-        "form": {
-          "llm_id": "deepseek-chat",
-          "temperature": 0.02,
-          "yes": "generate:0",
-          "no": "rewrite:0"
-        }
-      },
-      "sourcePosition": "left",
-      "targetPosition": "right"
-    },
-    {
-      "id": "generate:0",
-      "type": "ragNode",
-      "position": {
-        "x": 0,
-        "y": 0
-      },
-      "data": {
-        "label": "Generate",
-        "name": "CyanBooksTell",
-        "form": {
-          "llm_id": "deepseek-chat",
-          "prompt": "You are an intelligent assistant. Please answer the question based on content of knowledge base. When all knowledge base content is irrelevant to the question, your answer must include the sentence \"The answer you are looking for is not found in the knowledge base!\". Answers need to consider chat history.\n      Knowledge base content is as following:\n      {input}\n      The above is the content of knowledge base.",
-          "temperature": 0.02
-        }
-      },
-      "sourcePosition": "left",
-      "targetPosition": "right"
-    },
-    {
-      "id": "rewrite:0",
-      "type": "ragNode",
-      "position": {
-        "x": 0,
-        "y": 0
-      },
-      "data": {
-        "label": "RewriteQuestion",
-        "name": "SourPapersMake",
-        "form": {
-          "llm_id": "deepseek-chat",
-          "temperature": 0.8
-        }
-      },
-      "sourcePosition": "left",
-      "targetPosition": "right"
-    }
-  ]
-}
diff --git a/web/src/pages/flow/run-drawer/index.less b/web/src/pages/flow/run-drawer/index.less
deleted file mode 100644
index fda707810..000000000
--- a/web/src/pages/flow/run-drawer/index.less
+++ /dev/null
@@ -1,5 +0,0 @@
-.formWrapper {
-  :global(.ant-form-item-label) {
-    font-weight: 600 !important;
-  }
-}
diff --git a/web/src/pages/flow/run-drawer/index.tsx b/web/src/pages/flow/run-drawer/index.tsx
deleted file mode 100644
index d6cf4593a..000000000
--- a/web/src/pages/flow/run-drawer/index.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { IModalProps } from '@/interfaces/common';
-import { Drawer } from 'antd';
-import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { BeginId } from '../constant';
-import DebugContent from '../debug-content';
-import { useGetBeginNodeDataQuery } from '../hooks/use-get-begin-query';
-import { useSaveGraphBeforeOpeningDebugDrawer } from '../hooks/use-save-graph';
-import { BeginQuery } from '../interface';
-import useGraphStore from '../store';
-import { getDrawerWidth } from '../utils';
-
-const RunDrawer = ({
-  hideModal,
-  showModal: showChatModal,
-}: IModalProps<any>) => {
-  const { t } = useTranslation();
-  const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
-
-  const getBeginNodeDataQuery = useGetBeginNodeDataQuery();
-  const query: BeginQuery[] = getBeginNodeDataQuery();
-
-  const { handleRun, loading } = useSaveGraphBeforeOpeningDebugDrawer(
-    showChatModal!,
-  );
-
-  const handleRunAgent = useCallback(
-    (nextValues: Record<string, any>) => {
-      const currentNodes = updateNodeForm(BeginId, nextValues, ['query']);
-      handleRun(currentNodes);
-      hideModal?.();
-    },
-    [handleRun, hideModal, updateNodeForm],
-  );
-
-  const onOk = useCallback(
-    async (nextValues: any[]) => {
-      handleRunAgent(nextValues);
-    },
-    [handleRunAgent],
-  );
-
-  return (
-    <Drawer
-      title={t('flow.testRun')}
-      placement="right"
-      onClose={hideModal}
-      open
-      getContainer={false}
-      width={getDrawerWidth()}
-      mask={false}
-    >
-      <DebugContent
-        ok={onOk}
-        parameters={query}
-        loading={loading}
-      ></DebugContent>
-    </Drawer>
-  );
-};
-
-export default RunDrawer;
diff --git a/web/src/pages/flow/run-drawer/popover-form.tsx b/web/src/pages/flow/run-drawer/popover-form.tsx
deleted file mode 100644
index 557e3185b..000000000
--- a/web/src/pages/flow/run-drawer/popover-form.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { useParseDocument } from '@/hooks/document-hooks';
-import { useResetFormOnCloseModal } from '@/hooks/logic-hooks';
-import { IModalProps } from '@/interfaces/common';
-import { Button, Form, Input, Popover } from 'antd';
-import { PropsWithChildren } from 'react';
-import { useTranslation } from 'react-i18next';
-
-const reg =
-  /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/;
-
-export const PopoverForm = ({
-  children,
-  visible,
-  switchVisible,
-}: PropsWithChildren<IModalProps<any>>) => {
-  const [form] = Form.useForm();
-  const { parseDocument, loading } = useParseDocument();
-  const { t } = useTranslation();
-
-  useResetFormOnCloseModal({
-    form,
-    visible,
-  });
-
-  const onOk = async () => {
-    const values = await form.validateFields();
-    const val = values.url;
-
-    if (reg.test(val)) {
-      const ret = await parseDocument(val);
-      if (ret?.data?.code === 0) {
-        form.setFieldValue('result', ret?.data?.data);
-        form.submit();
-      }
-    }
-  };
-
-  const content = (
-    <Form form={form} name="urlForm">
-      <Form.Item
-        name="url"
-        rules={[{ required: true, type: 'url' }]}
-        className="m-0"
-      >
-        <Input
-          onPressEnter={(e) => e.preventDefault()}
-          placeholder={t('flow.pasteFileLink')}
-          suffix={
-            <Button
-              type="primary"
-              onClick={onOk}
-              size={'small'}
-              loading={loading}
-            >
-              {t('common.submit')}
-            </Button>
-          }
-        />
-      </Form.Item>
-      <Form.Item name={'result'} noStyle />
-    </Form>
-  );
-
-  return (
-    <Popover
-      content={content}
-      open={visible}
-      trigger={'click'}
-      onOpenChange={switchVisible}
-    >
-      {children}
-    </Popover>
-  );
-};
diff --git a/web/src/pages/flow/store.ts b/web/src/pages/flow/store.ts
deleted file mode 100644
index c6e8c69b6..000000000
--- a/web/src/pages/flow/store.ts
+++ /dev/null
@@ -1,455 +0,0 @@
-import { RAGFlowNodeType } from '@/interfaces/database/flow';
-import type {} from '@redux-devtools/extension';
-import {
-  Connection,
-  Edge,
-  EdgeChange,
-  OnConnect,
-  OnEdgesChange,
-  OnNodesChange,
-  OnSelectionChangeFunc,
-  OnSelectionChangeParams,
-  addEdge,
-  applyEdgeChanges,
-  applyNodeChanges,
-} 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 {
-  duplicateNodeForm,
-  generateDuplicateNode,
-  generateNodeNamesWithIncreasingIndex,
-  getOperatorIndex,
-  isEdgeEqual,
-} from './utils';
-
-export type RFState = {
-  nodes: RAGFlowNodeType[];
-  edges: Edge[];
-  selectedNodeIds: string[];
-  selectedEdgeIds: string[];
-  clickedNodeId: string; // currently selected node
-  onNodesChange: OnNodesChange<RAGFlowNodeType>;
-  onEdgesChange: OnEdgesChange;
-  onConnect: OnConnect;
-  setNodes: (nodes: RAGFlowNodeType[]) => void;
-  setEdges: (edges: Edge[]) => void;
-  setEdgesByNodeId: (nodeId: string, edges: Edge[]) => void;
-  updateNodeForm: (
-    nodeId: string,
-    values: any,
-    path?: (string | number)[],
-  ) => RAGFlowNodeType[];
-  onSelectionChange: OnSelectionChangeFunc;
-  addNode: (nodes: RAGFlowNodeType) => void;
-  getNode: (id?: string | null) => RAGFlowNodeType | undefined;
-  addEdge: (connection: Connection) => void;
-  getEdge: (id: string) => Edge | undefined;
-  updateFormDataOnConnect: (connection: Connection) => void;
-  updateSwitchFormData: (
-    source: string,
-    sourceHandle?: string | null,
-    target?: string | null,
-  ) => void;
-  deletePreviousEdgeOfClassificationNode: (connection: Connection) => void;
-  duplicateNode: (id: string, name: string) => void;
-  duplicateIterationNode: (id: string, name: string) => void;
-  deleteEdge: () => void;
-  deleteEdgeById: (id: string) => void;
-  deleteNodeById: (id: string) => void;
-  deleteIterationNodeById: (id: string) => void;
-  deleteEdgeBySourceAndSourceHandle: (connection: Partial<Connection>) => void;
-  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;
-  updateNodeName: (id: string, name: string) => void;
-  generateNodeName: (name: string) => string;
-  setClickedNodeId: (id?: string) => void;
-};
-
-// this is our useStore hook that we can use in our components to get parts of the store and call actions
-const useGraphStore = create<RFState>()(
-  devtools(
-    immer((set, get) => ({
-      nodes: [] as RAGFlowNodeType[],
-      edges: [] as Edge[],
-      selectedNodeIds: [] as string[],
-      selectedEdgeIds: [] as string[],
-      clickedNodeId: '',
-      onNodesChange: (changes) => {
-        set({
-          nodes: applyNodeChanges(changes, get().nodes),
-        });
-      },
-      onEdgesChange: (changes: EdgeChange[]) => {
-        set({
-          edges: applyEdgeChanges(changes, get().edges),
-        });
-      },
-      onConnect: (connection: Connection) => {
-        const {
-          deletePreviousEdgeOfClassificationNode,
-          updateFormDataOnConnect,
-        } = get();
-        set({
-          edges: addEdge(connection, get().edges),
-        });
-        deletePreviousEdgeOfClassificationNode(connection);
-        updateFormDataOnConnect(connection);
-      },
-      onSelectionChange: ({ nodes, edges }: OnSelectionChangeParams) => {
-        set({
-          selectedEdgeIds: edges.map((x) => x.id),
-          selectedNodeIds: nodes.map((x) => x.id),
-        });
-      },
-      setNodes: (nodes: RAGFlowNodeType[]) => {
-        set({ nodes });
-      },
-      setEdges: (edges: Edge[]) => {
-        set({ edges });
-      },
-      setEdgesByNodeId: (nodeId: string, currentDownstreamEdges: Edge[]) => {
-        const { edges, setEdges } = get();
-        // the previous downstream edge of this node
-        const previousDownstreamEdges = edges.filter(
-          (x) => x.source === nodeId,
-        );
-        const isDifferent =
-          previousDownstreamEdges.length !== currentDownstreamEdges.length ||
-          !previousDownstreamEdges.every((x) =>
-            currentDownstreamEdges.some(
-              (y) =>
-                y.source === x.source &&
-                y.target === x.target &&
-                y.sourceHandle === x.sourceHandle,
-            ),
-          ) ||
-          !currentDownstreamEdges.every((x) =>
-            previousDownstreamEdges.some(
-              (y) =>
-                y.source === x.source &&
-                y.target === x.target &&
-                y.sourceHandle === x.sourceHandle,
-            ),
-          );
-
-        const intersectionDownstreamEdges = intersectionWith(
-          previousDownstreamEdges,
-          currentDownstreamEdges,
-          isEdgeEqual,
-        );
-        if (isDifferent) {
-          // other operator's edges
-          const irrelevantEdges = edges.filter((x) => x.source !== nodeId);
-          // the added downstream edges
-          const selfAddedDownstreamEdges = differenceWith(
-            currentDownstreamEdges,
-            intersectionDownstreamEdges,
-            isEdgeEqual,
-          );
-          setEdges([
-            ...irrelevantEdges,
-            ...intersectionDownstreamEdges,
-            ...selfAddedDownstreamEdges,
-          ]);
-        }
-      },
-      addNode: (node: RAGFlowNodeType) => {
-        set({ nodes: get().nodes.concat(node) });
-      },
-      getNode: (id?: string | null) => {
-        return get().nodes.find((x) => x.id === id);
-      },
-      getOperatorTypeFromId: (id?: string | null) => {
-        return get().getNode(id)?.data?.label;
-      },
-      getParentIdById: (id?: string | null) => {
-        return get().getNode(id)?.parentId;
-      },
-      addEdge: (connection: Connection) => {
-        set({
-          edges: addEdge(connection, get().edges),
-        });
-        get().deletePreviousEdgeOfClassificationNode(connection);
-        //  TODO: This may not be reasonable. You need to choose between listening to changes in the form.
-        get().updateFormDataOnConnect(connection);
-      },
-      getEdge: (id: string) => {
-        return get().edges.find((x) => x.id === id);
-      },
-      updateFormDataOnConnect: (connection: Connection) => {
-        const { getOperatorTypeFromId, updateNodeForm, updateSwitchFormData } =
-          get();
-        const { source, target, sourceHandle } = connection;
-        const operatorType = getOperatorTypeFromId(source);
-        if (source) {
-          switch (operatorType) {
-            case Operator.Relevant:
-              updateNodeForm(source, { [sourceHandle as string]: target });
-              break;
-            case Operator.Categorize:
-              if (sourceHandle)
-                updateNodeForm(source, target, [
-                  'category_description',
-                  sourceHandle,
-                  'to',
-                ]);
-              break;
-            case Operator.Switch: {
-              updateSwitchFormData(source, sourceHandle, target);
-              break;
-            }
-            default:
-              break;
-          }
-        }
-      },
-      deletePreviousEdgeOfClassificationNode: (connection: Connection) => {
-        // Delete the edge on the classification node or relevant node anchor when the anchor is connected to other nodes
-        const { edges, getOperatorTypeFromId, deleteEdgeById } = get();
-        // the node containing the anchor
-        const anchoredNodes = [
-          Operator.Categorize,
-          Operator.Relevant,
-          Operator.Switch,
-        ];
-        if (
-          anchoredNodes.some(
-            (x) => x === getOperatorTypeFromId(connection.source),
-          )
-        ) {
-          const previousEdge = edges.find(
-            (x) =>
-              x.source === connection.source &&
-              x.sourceHandle === connection.sourceHandle &&
-              x.target !== connection.target,
-          );
-          if (previousEdge) {
-            deleteEdgeById(previousEdge.id);
-          }
-        }
-      },
-      duplicateNode: (id: string, name: string) => {
-        const { getNode, addNode, generateNodeName, duplicateIterationNode } =
-          get();
-        const node = getNode(id);
-
-        if (node?.data.label === Operator.Iteration) {
-          duplicateIterationNode(id, name);
-          return;
-        }
-
-        addNode({
-          ...(node || {}),
-          data: {
-            ...duplicateNodeForm(node?.data),
-            name: generateNodeName(name),
-          },
-          ...generateDuplicateNode(node?.position, node?.data?.label),
-        });
-      },
-      duplicateIterationNode: (id: string, name: string) => {
-        const { getNode, generateNodeName, nodes } = get();
-        const node = getNode(id);
-
-        const iterationNode: RAGFlowNodeType = {
-          ...(node || {}),
-          data: {
-            ...(node?.data || { label: Operator.Iteration, form: {} }),
-            name: generateNodeName(name),
-          },
-          ...generateDuplicateNode(node?.position, node?.data?.label),
-        };
-
-        const children = nodes
-          .filter((x) => x.parentId === node?.id)
-          .map((x) => ({
-            ...(x || {}),
-            data: {
-              ...duplicateNodeForm(x?.data),
-              name: generateNodeName(x.data.name),
-            },
-            ...omit(generateDuplicateNode(x?.position, x?.data?.label), [
-              'position',
-            ]),
-            parentId: iterationNode.id,
-          }));
-
-        set({ nodes: nodes.concat(iterationNode, ...children) });
-      },
-      deleteEdge: () => {
-        const { edges, selectedEdgeIds } = get();
-        set({
-          edges: edges.filter((edge) =>
-            selectedEdgeIds.every((x) => x !== edge.id),
-          ),
-        });
-      },
-      deleteEdgeById: (id: string) => {
-        const {
-          edges,
-          updateNodeForm,
-          getOperatorTypeFromId,
-          updateSwitchFormData,
-        } = get();
-        const currentEdge = edges.find((x) => x.id === id);
-
-        if (currentEdge) {
-          const { source, sourceHandle } = currentEdge;
-          const operatorType = getOperatorTypeFromId(source);
-          // After deleting the edge, set the corresponding field in the node's form field to undefined
-          switch (operatorType) {
-            case Operator.Relevant:
-              updateNodeForm(source, {
-                [sourceHandle as string]: undefined,
-              });
-              break;
-            case Operator.Categorize:
-              if (sourceHandle)
-                updateNodeForm(source, undefined, [
-                  'category_description',
-                  sourceHandle,
-                  'to',
-                ]);
-              break;
-            case Operator.Switch: {
-              updateSwitchFormData(source, sourceHandle, undefined);
-              break;
-            }
-            default:
-              break;
-          }
-        }
-        set({
-          edges: edges.filter((edge) => edge.id !== id),
-        });
-      },
-      deleteEdgeBySourceAndSourceHandle: ({
-        source,
-        sourceHandle,
-      }: Partial<Connection>) => {
-        const { edges } = get();
-        const nextEdges = edges.filter(
-          (edge) =>
-            edge.source !== source || edge.sourceHandle !== sourceHandle,
-        );
-        set({
-          edges: nextEdges,
-        });
-      },
-      deleteNodeById: (id: string) => {
-        const { nodes, edges } = get();
-        set({
-          nodes: nodes.filter((node) => node.id !== id),
-          edges: edges
-            .filter((edge) => edge.source !== id)
-            .filter((edge) => edge.target !== id),
-        });
-      },
-      deleteIterationNodeById: (id: string) => {
-        const { nodes, edges } = get();
-        const children = nodes.filter((node) => node.parentId === id);
-        set({
-          nodes: nodes.filter((node) => node.id !== id && node.parentId !== id),
-          edges: edges.filter(
-            (edge) =>
-              edge.source !== id &&
-              edge.target !== id &&
-              !children.some(
-                (child) => edge.source === child.id && edge.target === child.id,
-              ),
-          ),
-        });
-      },
-      findNodeByName: (name: Operator) => {
-        return get().nodes.find((x) => x.data.label === name);
-      },
-      updateNodeForm: (
-        nodeId: string,
-        values: any,
-        path: (string | number)[] = [],
-      ) => {
-        const nextNodes = get().nodes.map((node) => {
-          if (node.id === nodeId) {
-            let nextForm: Record<string, unknown> = { ...node.data.form };
-            if (path.length === 0) {
-              nextForm = Object.assign(nextForm, values);
-            } else {
-              lodashSet(nextForm, path, values);
-            }
-            return {
-              ...node,
-              data: {
-                ...node.data,
-                form: nextForm,
-              },
-            } as any;
-          }
-
-          return node;
-        });
-        set({
-          nodes: nextNodes,
-        });
-
-        return nextNodes;
-      },
-      updateSwitchFormData: (source, sourceHandle, target) => {
-        const { updateNodeForm } = get();
-        if (sourceHandle) {
-          if (sourceHandle === SwitchElseTo) {
-            updateNodeForm(source, target, [SwitchElseTo]);
-          } else {
-            const operatorIndex = getOperatorIndex(sourceHandle);
-            if (operatorIndex) {
-              updateNodeForm(source, target, [
-                'conditions',
-                Number(operatorIndex) - 1, // The index is the conditions form index
-                'to',
-              ]);
-            }
-          }
-        }
-      },
-      updateMutableNodeFormItem: (id: string, field: string, value: any) => {
-        const { nodes } = get();
-        const idx = nodes.findIndex((x) => x.id === id);
-        if (idx) {
-          lodashSet(nodes, [idx, 'data', 'form', field], value);
-        }
-      },
-      updateNodeName: (id, name) => {
-        if (id) {
-          set({
-            nodes: get().nodes.map((node) => {
-              if (node.id === id) {
-                node.data.name = name;
-              }
-
-              return node;
-            }),
-          });
-        }
-      },
-      setClickedNodeId: (id?: string) => {
-        set({ clickedNodeId: id });
-      },
-      generateNodeName: (name: string) => {
-        const { nodes } = get();
-
-        return generateNodeNamesWithIncreasingIndex(name, nodes);
-      },
-    })),
-    { name: 'graph' },
-  ),
-);
-
-export default useGraphStore;
diff --git a/web/src/pages/flow/utils.test.ts b/web/src/pages/flow/utils.test.ts
deleted file mode 100644
index dbb89ce7e..000000000
--- a/web/src/pages/flow/utils.test.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import customer_service from '../../../../graph/test/dsl_examples/customer_service.json';
-import headhunter_zh from '../../../../graph/test/dsl_examples/headhunter_zh.json';
-import interpreter from '../../../../graph/test/dsl_examples/interpreter.json';
-import retrievalRelevantRewriteAndGenerate from '../../../../graph/test/dsl_examples/retrieval_relevant_rewrite_and_generate.json';
-import { dsl } from './mock';
-import { buildNodesAndEdgesFromDSLComponents } from './utils';
-
-test('buildNodesAndEdgesFromDSLComponents', () => {
-  const { edges, nodes } = buildNodesAndEdgesFromDSLComponents(dsl.components);
-
-  expect(nodes.length).toEqual(4);
-  expect(edges.length).toEqual(4);
-
-  expect(edges).toEqual(
-    expect.arrayContaining([
-      expect.objectContaining({
-        source: 'begin',
-        target: 'Answer:China',
-      }),
-      expect.objectContaining({
-        source: 'Answer:China',
-        target: 'Retrieval:China',
-      }),
-      expect.objectContaining({
-        source: 'Retrieval:China',
-        target: 'Generate:China',
-      }),
-      expect.objectContaining({
-        source: 'Generate:China',
-        target: 'Answer:China',
-      }),
-    ]),
-  );
-});
-
-test('build nodes and edges from  headhunter_zh dsl', () => {
-  const { edges, nodes } = buildNodesAndEdgesFromDSLComponents(
-    headhunter_zh.components,
-  );
-  console.info('node length', nodes.length);
-  console.info('edge length', edges.length);
-  try {
-    fs.writeFileSync(
-      path.join(__dirname, 'headhunter_zh.json'),
-      JSON.stringify({ edges, nodes }, null, 4),
-    );
-    console.log('JSON data is saved.');
-  } catch (error) {
-    console.warn(error);
-  }
-  expect(nodes.length).toEqual(12);
-});
-
-test('build nodes and edges from customer_service dsl', () => {
-  const { edges, nodes } = buildNodesAndEdgesFromDSLComponents(
-    customer_service.components,
-  );
-  console.info('node length', nodes.length);
-  console.info('edge length', edges.length);
-  try {
-    fs.writeFileSync(
-      path.join(__dirname, 'customer_service.json'),
-      JSON.stringify({ edges, nodes }, null, 4),
-    );
-    console.log('JSON data is saved.');
-  } catch (error) {
-    console.warn(error);
-  }
-  expect(nodes.length).toEqual(12);
-});
-
-test('build nodes and edges from interpreter dsl', () => {
-  const { edges, nodes } = buildNodesAndEdgesFromDSLComponents(
-    interpreter.components,
-  );
-  console.info('node length', nodes.length);
-  console.info('edge length', edges.length);
-  try {
-    fs.writeFileSync(
-      path.join(__dirname, 'interpreter.json'),
-      JSON.stringify({ edges, nodes }, null, 4),
-    );
-    console.log('JSON data is saved.');
-  } catch (error) {
-    console.warn(error);
-  }
-  expect(nodes.length).toEqual(12);
-});
-
-test('build nodes and edges from chat bot dsl', () => {
-  const { edges, nodes } = buildNodesAndEdgesFromDSLComponents(
-    retrievalRelevantRewriteAndGenerate.components,
-  );
-  try {
-    fs.writeFileSync(
-      path.join(__dirname, 'retrieval_relevant_rewrite_and_generate.json'),
-      JSON.stringify({ edges, nodes }, null, 4),
-    );
-    console.log('JSON data is saved.');
-  } catch (error) {
-    console.warn(error);
-  }
-  expect(nodes.length).toEqual(12);
-});
diff --git a/web/src/pages/flow/utils.ts b/web/src/pages/flow/utils.ts
deleted file mode 100644
index dcd0867dd..000000000
--- a/web/src/pages/flow/utils.ts
+++ /dev/null
@@ -1,418 +0,0 @@
-import {
-  DSLComponents,
-  ICategorizeItem,
-  ICategorizeItemResult,
-  RAGFlowNodeType,
-} from '@/interfaces/database/flow';
-import { removeUselessFieldsFromValues } from '@/utils/form';
-import { Edge, Node, Position, XYPosition } from '@xyflow/react';
-import { FormInstance, FormListFieldData } from 'antd';
-import { humanId } from 'human-id';
-import { curry, get, intersectionWith, isEqual, sample } from 'lodash';
-import pipe from 'lodash/fp/pipe';
-import isObject from 'lodash/isObject';
-import { v4 as uuidv4 } from 'uuid';
-import {
-  CategorizeAnchorPointPositions,
-  NoDebugOperatorsList,
-  NodeMap,
-  Operator,
-} from './constant';
-import { IPosition } from './interface';
-
-const buildEdges = (
-  operatorIds: string[],
-  currentId: string,
-  allEdges: Edge[],
-  isUpstream = false,
-  componentName: string,
-  nodeParams: Record<string, unknown>,
-) => {
-  operatorIds.forEach((cur) => {
-    const source = isUpstream ? cur : currentId;
-    const target = isUpstream ? currentId : cur;
-    if (!allEdges.some((e) => e.source === source && e.target === target)) {
-      const edge: Edge = {
-        id: uuidv4(),
-        label: '',
-        // type: 'step',
-        source: source,
-        target: target,
-        // markerEnd: {
-        //   type: MarkerType.ArrowClosed,
-        //   color: 'rgb(157 149 225)',
-        //   width: 20,
-        //   height: 20,
-        // },
-      };
-      if (componentName === Operator.Categorize && !isUpstream) {
-        const categoryDescription =
-          nodeParams.category_description as ICategorizeItemResult;
-
-        const name = Object.keys(categoryDescription).find(
-          (x) => categoryDescription[x].to === target,
-        );
-
-        if (name) {
-          edge.sourceHandle = name;
-        }
-      }
-      allEdges.push(edge);
-    }
-  });
-};
-
-export const buildNodesAndEdgesFromDSLComponents = (data: DSLComponents) => {
-  const nodes: Node[] = [];
-  let edges: Edge[] = [];
-
-  Object.entries(data).forEach(([key, value]) => {
-    const downstream = [...value.downstream];
-    const upstream = [...value.upstream];
-    const { component_name: componentName, params } = value.obj;
-    nodes.push({
-      id: key,
-      type: NodeMap[value.obj.component_name as Operator] || 'ragNode',
-      position: { x: 0, y: 0 },
-      data: {
-        label: componentName,
-        name: humanId(),
-        form: params,
-      },
-      sourcePosition: Position.Left,
-      targetPosition: Position.Right,
-    });
-
-    buildEdges(upstream, key, edges, true, componentName, params);
-    buildEdges(downstream, key, edges, false, componentName, params);
-  });
-
-  return { nodes, edges };
-};
-
-const buildComponentDownstreamOrUpstream = (
-  edges: Edge[],
-  nodeId: string,
-  isBuildDownstream = true,
-) => {
-  return edges
-    .filter((y) => y[isBuildDownstream ? 'source' : 'target'] === nodeId)
-    .map((y) => y[isBuildDownstream ? 'target' : 'source']);
-};
-
-const removeUselessDataInTheOperator = curry(
-  (operatorName: string, params: Record<string, unknown>) => {
-    if (
-      operatorName === Operator.Generate ||
-      operatorName === Operator.Categorize
-    ) {
-      return removeUselessFieldsFromValues(params, '');
-    }
-    return params;
-  },
-);
-// initialize data for operators without parameters
-// const initializeOperatorParams = curry((operatorName: string, values: any) => {
-//   if (isEmpty(values)) {
-//     return initialFormValuesMap[operatorName as Operator];
-//   }
-//   return values;
-// });
-
-const buildOperatorParams = (operatorName: string) =>
-  pipe(
-    removeUselessDataInTheOperator(operatorName),
-    // initializeOperatorParams(operatorName), // Final processing, for guarantee
-  );
-
-// construct a dsl based on the node information of the graph
-export const buildDslComponentsByGraph = (
-  nodes: RAGFlowNodeType[],
-  edges: Edge[],
-  oldDslComponents: DSLComponents,
-): DSLComponents => {
-  const components: DSLComponents = {};
-
-  nodes
-    ?.filter((x) => x.data.label !== Operator.Note)
-    .forEach((x) => {
-      const id = x.id;
-      const operatorName = x.data.label;
-      components[id] = {
-        obj: {
-          ...(oldDslComponents[id]?.obj ?? {}),
-          component_name: operatorName,
-          params:
-            buildOperatorParams(operatorName)(
-              x.data.form as Record<string, unknown>,
-            ) ?? {},
-        },
-        downstream: buildComponentDownstreamOrUpstream(edges, id, true),
-        upstream: buildComponentDownstreamOrUpstream(edges, id, false),
-        parent_id: x?.parentId,
-      };
-    });
-
-  return components;
-};
-
-export const receiveMessageError = (res: any) =>
-  res && (res?.response.status !== 200 || res?.data?.code !== 0);
-
-// Replace the id in the object with text
-export const replaceIdWithText = (
-  obj: Record<string, unknown> | unknown[] | unknown,
-  getNameById: (id?: string) => string | undefined,
-) => {
-  if (isObject(obj)) {
-    const ret: Record<string, unknown> | unknown[] = Array.isArray(obj)
-      ? []
-      : {};
-    Object.keys(obj).forEach((key) => {
-      const val = (obj as Record<string, unknown>)[key];
-      const text = typeof val === 'string' ? getNameById(val) : undefined;
-      (ret as Record<string, unknown>)[key] = text
-        ? text
-        : replaceIdWithText(val, getNameById);
-    });
-
-    return ret;
-  }
-
-  return obj;
-};
-
-export const isEdgeEqual = (previous: Edge, current: Edge) =>
-  previous.source === current.source &&
-  previous.target === current.target &&
-  previous.sourceHandle === current.sourceHandle;
-
-export const buildNewPositionMap = (
-  currentKeys: string[],
-  previousPositionMap: Record<string, IPosition>,
-) => {
-  // index in use
-  const indexesInUse = Object.values(previousPositionMap).map((x) => x.idx);
-  const previousKeys = Object.keys(previousPositionMap);
-  const intersectionKeys = intersectionWith(
-    previousKeys,
-    currentKeys,
-    (categoryDataKey: string, positionMapKey: string) =>
-      categoryDataKey === positionMapKey,
-  );
-  // difference set
-  const currentDifferenceKeys = currentKeys.filter(
-    (x) => !intersectionKeys.some((y: string) => y === x),
-  );
-  const newPositionMap = currentDifferenceKeys.reduce<
-    Record<string, IPosition>
-  >((pre, cur) => {
-    // take a coordinate
-    const effectiveIdxes = CategorizeAnchorPointPositions.map(
-      (x, idx) => idx,
-    ).filter((x) => !indexesInUse.some((y) => y === x));
-    const idx = sample(effectiveIdxes);
-    if (idx !== undefined) {
-      indexesInUse.push(idx);
-      pre[cur] = { ...CategorizeAnchorPointPositions[idx], idx };
-    }
-
-    return pre;
-  }, {});
-
-  return { intersectionKeys, newPositionMap };
-};
-
-export const isKeysEqual = (currentKeys: string[], previousKeys: string[]) => {
-  return isEqual(currentKeys.sort(), previousKeys.sort());
-};
-
-export const getOperatorIndex = (handleTitle: string) => {
-  return handleTitle.split(' ').at(-1);
-};
-
-// Get the value of other forms except itself
-export const getOtherFieldValues = (
-  form: FormInstance,
-  formListName: string = 'items',
-  field: FormListFieldData,
-  latestField: string,
-) =>
-  (form.getFieldValue([formListName]) ?? [])
-    .map((x: any) => {
-      return get(x, latestField);
-    })
-    .filter(
-      (x: string) =>
-        x !== form.getFieldValue([formListName, field.name, latestField]),
-    );
-
-export const generateSwitchHandleText = (idx: number) => {
-  return `Case ${idx + 1}`;
-};
-
-export const getNodeDragHandle = (nodeType?: string) => {
-  return nodeType === Operator.Note ? '.note-drag-handle' : undefined;
-};
-
-const splitName = (name: string) => {
-  const names = name.split('_');
-  const type = names.at(0);
-  const index = Number(names.at(-1));
-
-  return { type, index };
-};
-
-export const generateNodeNamesWithIncreasingIndex = (
-  name: string,
-  nodes: RAGFlowNodeType[],
-) => {
-  const templateNameList = nodes
-    .filter((x) => {
-      const temporaryName = x.data.name;
-
-      const { type, index } = splitName(temporaryName);
-
-      return (
-        temporaryName.match(/_/g)?.length === 1 &&
-        type === name &&
-        !isNaN(index)
-      );
-    })
-    .map((x) => {
-      const temporaryName = x.data.name;
-      const { index } = splitName(temporaryName);
-
-      return {
-        idx: index,
-        name: temporaryName,
-      };
-    })
-    .sort((a, b) => a.idx - b.idx);
-
-  let index: number = 0;
-  for (let i = 0; i < templateNameList.length; i++) {
-    const idx = templateNameList[i]?.idx;
-    const nextIdx = templateNameList[i + 1]?.idx;
-    if (idx + 1 !== nextIdx) {
-      index = idx + 1;
-      break;
-    }
-  }
-
-  return `${name}_${index}`;
-};
-
-export const duplicateNodeForm = (nodeData?: RAGFlowNodeType['data']) => {
-  const form: Record<string, any> = { ...(nodeData?.form ?? {}) };
-
-  // Delete the downstream node corresponding to the to field of the Categorize operator
-  if (nodeData?.label === Operator.Categorize) {
-    form.category_description = Object.keys(form.category_description).reduce<
-      Record<string, Record<string, any>>
-    >((pre, cur) => {
-      pre[cur] = {
-        ...form.category_description[cur],
-        to: undefined,
-      };
-      return pre;
-    }, {});
-  }
-
-  // Delete the downstream nodes corresponding to the yes and no fields of the Relevant operator
-  if (nodeData?.label === Operator.Relevant) {
-    form.yes = undefined;
-    form.no = undefined;
-  }
-
-  return {
-    ...(nodeData ?? { label: '' }),
-    form,
-  };
-};
-
-export const getDrawerWidth = () => {
-  return window.innerWidth > 1278 ? '40%' : 470;
-};
-
-export const needsSingleStepDebugging = (label: string) => {
-  return !NoDebugOperatorsList.some((x) => (label as Operator) === x);
-};
-
-// Get the coordinates of the node relative to the Iteration node
-export function getRelativePositionToIterationNode(
-  nodes: RAGFlowNodeType[],
-  position?: XYPosition, // relative position
-) {
-  if (!position) {
-    return;
-  }
-
-  const iterationNodes = nodes.filter(
-    (node) => node.data.label === Operator.Iteration,
-  );
-
-  for (const iterationNode of iterationNodes) {
-    const {
-      position: { x, y },
-      width,
-      height,
-    } = iterationNode;
-    const halfWidth = (width || 0) / 2;
-    if (
-      position.x >= x - halfWidth &&
-      position.x <= x + halfWidth &&
-      position.y >= y &&
-      position.y <= y + (height || 0)
-    ) {
-      return {
-        parentId: iterationNode.id,
-        position: { x: position.x - x + halfWidth, y: position.y - y },
-      };
-    }
-  }
-}
-
-export const generateDuplicateNode = (
-  position?: XYPosition,
-  label?: string,
-) => {
-  const nextPosition = {
-    x: (position?.x || 0) + 50,
-    y: (position?.y || 0) + 50,
-  };
-
-  return {
-    selected: false,
-    dragging: false,
-    id: `${label}:${humanId()}`,
-    position: nextPosition,
-    dragHandle: getNodeDragHandle(label),
-  };
-};
-
-/**
-   * convert the following object into a list
-   * 
-   * {
-      "product_related": {
-      "description": "The question is about product usage, appearance and how it works.",
-      "examples": "Why it always beaming?\nHow to install it onto the wall?\nIt leaks, what to do?",
-      "to": "generate:0"
-      }
-      }
-*/
-export const buildCategorizeListFromObject = (
-  categorizeItem: ICategorizeItemResult,
-) => {
-  // Categorize's to field has two data sources, with edges as the data source.
-  // Changes in the edge or to field need to be synchronized to the form field.
-  return Object.keys(categorizeItem)
-    .reduce<Array<ICategorizeItem>>((pre, cur) => {
-      // synchronize edge data to the to field
-
-      pre.push({ name: cur, ...categorizeItem[cur] });
-      return pre;
-    }, [])
-    .sort((a, b) => a.index - b.index);
-};
diff --git a/web/src/routes.ts b/web/src/routes.ts
index b09eceae9..a464b0b38 100644
--- a/web/src/routes.ts
+++ b/web/src/routes.ts
@@ -126,18 +126,10 @@ const routes = [
     path: '/file',
     component: '@/pages/file-manager',
   },
-  {
-    path: '/flow',
-    component: '@/pages/flow/list',
-  },
   {
     path: Routes.AgentList,
     component: `@/pages/${Routes.Agents}`,
   },
-  {
-    path: '/flow/:id',
-    component: '@/pages/flow',
-  },
   {
     path: '/search',
     component: '@/pages/search',