From 24ab8574717448cc690ad8320d756e046e8230a5 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Mon, 27 Oct 2025 10:36:36 +0800
Subject: [PATCH] Feat: Adjust the style of the canvas node #10703 (#10795)

### What problem does this PR solve?

Feat: Adjust the style of the canvas node #10703


### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 web/package-lock.json                         |   8 +-
 web/package.json                              |   2 +-
 web/src/components/collapse.tsx               |  19 +-
 web/src/components/llm-select/llm-label.tsx   |   2 +-
 web/src/components/ui/button.tsx              |   1 +
 web/src/components/ui/card.tsx                |   2 +-
 web/src/components/ui/checkbox.tsx            |   4 +-
 web/src/components/ui/ragflow-pagination.tsx  |   6 +-
 web/src/components/ui/tooltip.tsx             |  12 +
 web/src/components/xyflow/base-node.tsx       |   1 -
 web/src/constants/agent.ts                    |   1 -
 web/src/hooks/logic-hooks/navigate-hooks.ts   |   8 -
 web/src/locales/en.ts                         |   5 +-
 web/src/locales/zh.ts                         |   3 +
 web/src/pages/agent/canvas/edge/index.tsx     |   6 +-
 web/src/pages/agent/canvas/index.tsx          |  15 +-
 .../pages/agent/canvas/node/agent-node.tsx    |   6 +-
 .../pages/agent/canvas/node/begin-node.tsx    |  18 +-
 web/src/pages/agent/canvas/node/card.tsx      |  19 +-
 .../agent/canvas/node/categorize-node.tsx     |   6 +-
 .../node/dropdown/next-step-dropdown.tsx      |   4 +-
 .../agent/canvas/node/extractor-node.tsx      |   7 +-
 .../pages/agent/canvas/node/generate-node.tsx |  60 ---
 web/src/pages/agent/canvas/node/index.tsx     |   8 +-
 .../pages/agent/canvas/node/keyword-node.tsx  |   6 +-
 .../pages/agent/canvas/node/node-wrapper.tsx  |   2 +-
 .../agent/canvas/node/retrieval-node.tsx      |   1 -
 .../pages/agent/canvas/node/rewrite-node.tsx  |   6 +-
 .../pages/agent/canvas/node/switch-node.tsx   |   2 +-
 web/src/pages/agent/canvas/node/toolbar.tsx   |  22 +-
 .../agent/form/agent-form/agent-tools.tsx     |  11 +-
 web/src/pages/agent/setting-dialog/index.tsx  |   9 +-
 .../agent/setting-dialog/setting-form.tsx     |  58 +--
 web/src/pages/agent/utils.ts                  |   5 +-
 .../pages/agents/hooks/use-create-agent.ts    |  21 +-
 .../data-flow/canvas/context-menu/index.less  |  18 -
 .../data-flow/canvas/context-menu/index.tsx   | 107 -----
 web/src/pages/data-flow/canvas/context.tsx    |  56 ---
 web/src/pages/data-flow/canvas/edge/index.tsx | 110 -----
 web/src/pages/data-flow/canvas/index.less     |  11 -
 web/src/pages/data-flow/canvas/index.tsx      | 330 -------------
 .../data-flow/canvas/node/begin-node.tsx      |  36 --
 web/src/pages/data-flow/canvas/node/card.tsx  |  12 -
 .../node/dropdown/next-step-dropdown.tsx      | 294 ------------
 .../data-flow/canvas/node/extractor-node.tsx  |  18 -
 .../data-flow/canvas/node/handle-icon.tsx     |  20 -
 .../pages/data-flow/canvas/node/handle.tsx    |  72 ---
 .../pages/data-flow/canvas/node/index.less    | 285 -----------
 web/src/pages/data-flow/canvas/node/index.tsx |  56 ---
 .../data-flow/canvas/node/node-header.tsx     |  36 --
 .../data-flow/canvas/node/node-wrapper.tsx    |  18 -
 .../data-flow/canvas/node/note-node/index.tsx |  17 -
 .../canvas/node/note-node/use-watch-change.ts |  30 --
 .../data-flow/canvas/node/parser-node.tsx     |  57 ---
 .../data-flow/canvas/node/resize-icon.tsx     |  32 --
 .../data-flow/canvas/node/splitter-node.tsx   |  52 ---
 .../data-flow/canvas/node/tokenizer-node.tsx  |  55 ---
 .../pages/data-flow/canvas/node/toolbar.tsx   |  85 ----
 web/src/pages/data-flow/constant.tsx          | 324 -------------
 web/src/pages/data-flow/context.ts            |  39 --
 web/src/pages/data-flow/flow-tooltip.tsx      |  19 -
 .../data-flow/form-sheet/form-config-map.tsx  |  30 --
 web/src/pages/data-flow/form-sheet/next.tsx   | 104 -----
 .../form/components/form-wrapper.tsx          |  16 -
 .../data-flow/form/components/index.less      |  22 -
 .../data-flow/form/components/output.tsx      |  35 --
 .../data-flow/form/extractor-form/index.tsx   | 107 -----
 .../form/extractor-form/use-switch-prompt.ts  |  69 ---
 .../form/hierarchical-merger-form/index.tsx   | 188 --------
 .../form/parser-form/common-form-fields.tsx   | 106 -----
 .../form/parser-form/email-form-fields.tsx    |  30 --
 .../form/parser-form/image-form-fields.tsx    |  60 ---
 .../data-flow/form/parser-form/index.tsx      | 226 ---------
 .../data-flow/form/parser-form/interface.ts   |   3 -
 .../form/parser-form/pdf-form-fields.tsx      |  44 --
 .../parser-form/use-set-initial-language.ts   |  29 --
 .../pages/data-flow/form/parser-form/utils.ts |   3 -
 .../form/parser-form/video-form-fields.tsx    |  22 -
 .../data-flow/form/splitter-form/index.tsx    | 101 ----
 .../data-flow/form/tokenizer-form/index.tsx   |  91 ----
 web/src/pages/data-flow/hooks.tsx             | 144 ------
 web/src/pages/data-flow/hooks/use-add-node.ts | 218 ---------
 .../data-flow/hooks/use-before-delete.tsx     |  49 --
 .../pages/data-flow/hooks/use-build-dsl.ts    |  29 --
 .../data-flow/hooks/use-build-options.tsx     |  19 -
 .../data-flow/hooks/use-cache-chat-log.ts     |  88 ----
 .../data-flow/hooks/use-cancel-dataflow.ts    |  21 -
 .../data-flow/hooks/use-change-node-name.ts   | 116 -----
 .../data-flow/hooks/use-download-output.ts    |  38 --
 .../pages/data-flow/hooks/use-export-json.ts  |  17 -
 .../pages/data-flow/hooks/use-fetch-data.ts   |  19 -
 .../pages/data-flow/hooks/use-fetch-log.ts    |  56 ---
 .../pages/data-flow/hooks/use-form-values.ts  |  20 -
 .../pages/data-flow/hooks/use-move-note.ts    |  35 --
 .../pages/data-flow/hooks/use-run-dataflow.ts |  59 ---
 .../pages/data-flow/hooks/use-save-graph.ts   |  87 ----
 .../pages/data-flow/hooks/use-set-graph.ts    |  17 -
 .../pages/data-flow/hooks/use-show-drawer.tsx | 147 ------
 .../data-flow/hooks/use-watch-form-change.ts  |  15 -
 web/src/pages/data-flow/index.tsx             | 232 ---------
 web/src/pages/data-flow/interface.ts          |  43 --
 .../data-flow/log-sheet/dataflow-timeline.tsx | 137 ------
 web/src/pages/data-flow/log-sheet/index.tsx   | 114 -----
 web/src/pages/data-flow/operator-icon.tsx     |  59 ---
 web/src/pages/data-flow/run-sheet/index.tsx   |  31 --
 .../pages/data-flow/run-sheet/uploader.tsx    |  57 ---
 .../pages/data-flow/setting-dialog/index.tsx  |  53 ---
 .../data-flow/setting-dialog/setting-form.tsx | 158 -------
 web/src/pages/data-flow/store.ts              | 442 ------------------
 .../data-flow/use-agent-history-manager.ts    | 163 -------
 web/src/pages/data-flow/utils.ts              | 424 -----------------
 .../data-flow/utils/build-output-list.ts      |   8 -
 web/src/pages/data-flow/utils/delete-node.ts  |  34 --
 .../utils/filter-downstream-nodes.ts          |  63 ---
 .../pages/data-flow/version-dialog/index.tsx  | 143 ------
 web/src/pages/profile-setting/mcp/index.tsx   |  78 +++-
 .../pages/profile-setting/mcp/mcp-card.tsx    |  30 +-
 .../profile-setting/mcp/mcp-dropdown.tsx      |  60 ---
 .../profile-setting/mcp/mcp-operation.tsx     |  43 ++
 .../mcp/use-bulk-operate-mcp.tsx              |  19 +-
 web/src/pages/user-setting/index.tsx          |   2 +-
 web/src/routes.ts                             |  18 -
 122 files changed, 290 insertions(+), 7156 deletions(-)
 delete mode 100644 web/src/pages/agent/canvas/node/generate-node.tsx
 delete mode 100644 web/src/pages/data-flow/canvas/context-menu/index.less
 delete mode 100644 web/src/pages/data-flow/canvas/context-menu/index.tsx
 delete mode 100644 web/src/pages/data-flow/canvas/context.tsx
 delete mode 100644 web/src/pages/data-flow/canvas/edge/index.tsx
 delete mode 100644 web/src/pages/data-flow/canvas/index.less
 delete mode 100644 web/src/pages/data-flow/canvas/index.tsx
 delete mode 100644 web/src/pages/data-flow/canvas/node/begin-node.tsx
 delete mode 100644 web/src/pages/data-flow/canvas/node/card.tsx
 delete mode 100644 web/src/pages/data-flow/canvas/node/dropdown/next-step-dropdown.tsx
 delete mode 100644 web/src/pages/data-flow/canvas/node/extractor-node.tsx
 delete mode 100644 web/src/pages/data-flow/canvas/node/handle-icon.tsx
 delete mode 100644 web/src/pages/data-flow/canvas/node/handle.tsx
 delete mode 100644 web/src/pages/data-flow/canvas/node/index.less
 delete mode 100644 web/src/pages/data-flow/canvas/node/index.tsx
 delete mode 100644 web/src/pages/data-flow/canvas/node/node-header.tsx
 delete mode 100644 web/src/pages/data-flow/canvas/node/node-wrapper.tsx
 delete mode 100644 web/src/pages/data-flow/canvas/node/note-node/index.tsx
 delete mode 100644 web/src/pages/data-flow/canvas/node/note-node/use-watch-change.ts
 delete mode 100644 web/src/pages/data-flow/canvas/node/parser-node.tsx
 delete mode 100644 web/src/pages/data-flow/canvas/node/resize-icon.tsx
 delete mode 100644 web/src/pages/data-flow/canvas/node/splitter-node.tsx
 delete mode 100644 web/src/pages/data-flow/canvas/node/tokenizer-node.tsx
 delete mode 100644 web/src/pages/data-flow/canvas/node/toolbar.tsx
 delete mode 100644 web/src/pages/data-flow/constant.tsx
 delete mode 100644 web/src/pages/data-flow/context.ts
 delete mode 100644 web/src/pages/data-flow/flow-tooltip.tsx
 delete mode 100644 web/src/pages/data-flow/form-sheet/form-config-map.tsx
 delete mode 100644 web/src/pages/data-flow/form-sheet/next.tsx
 delete mode 100644 web/src/pages/data-flow/form/components/form-wrapper.tsx
 delete mode 100644 web/src/pages/data-flow/form/components/index.less
 delete mode 100644 web/src/pages/data-flow/form/components/output.tsx
 delete mode 100644 web/src/pages/data-flow/form/extractor-form/index.tsx
 delete mode 100644 web/src/pages/data-flow/form/extractor-form/use-switch-prompt.ts
 delete mode 100644 web/src/pages/data-flow/form/hierarchical-merger-form/index.tsx
 delete mode 100644 web/src/pages/data-flow/form/parser-form/common-form-fields.tsx
 delete mode 100644 web/src/pages/data-flow/form/parser-form/email-form-fields.tsx
 delete mode 100644 web/src/pages/data-flow/form/parser-form/image-form-fields.tsx
 delete mode 100644 web/src/pages/data-flow/form/parser-form/index.tsx
 delete mode 100644 web/src/pages/data-flow/form/parser-form/interface.ts
 delete mode 100644 web/src/pages/data-flow/form/parser-form/pdf-form-fields.tsx
 delete mode 100644 web/src/pages/data-flow/form/parser-form/use-set-initial-language.ts
 delete mode 100644 web/src/pages/data-flow/form/parser-form/utils.ts
 delete mode 100644 web/src/pages/data-flow/form/parser-form/video-form-fields.tsx
 delete mode 100644 web/src/pages/data-flow/form/splitter-form/index.tsx
 delete mode 100644 web/src/pages/data-flow/form/tokenizer-form/index.tsx
 delete mode 100644 web/src/pages/data-flow/hooks.tsx
 delete mode 100644 web/src/pages/data-flow/hooks/use-add-node.ts
 delete mode 100644 web/src/pages/data-flow/hooks/use-before-delete.tsx
 delete mode 100644 web/src/pages/data-flow/hooks/use-build-dsl.ts
 delete mode 100644 web/src/pages/data-flow/hooks/use-build-options.tsx
 delete mode 100644 web/src/pages/data-flow/hooks/use-cache-chat-log.ts
 delete mode 100644 web/src/pages/data-flow/hooks/use-cancel-dataflow.ts
 delete mode 100644 web/src/pages/data-flow/hooks/use-change-node-name.ts
 delete mode 100644 web/src/pages/data-flow/hooks/use-download-output.ts
 delete mode 100644 web/src/pages/data-flow/hooks/use-export-json.ts
 delete mode 100644 web/src/pages/data-flow/hooks/use-fetch-data.ts
 delete mode 100644 web/src/pages/data-flow/hooks/use-fetch-log.ts
 delete mode 100644 web/src/pages/data-flow/hooks/use-form-values.ts
 delete mode 100644 web/src/pages/data-flow/hooks/use-move-note.ts
 delete mode 100644 web/src/pages/data-flow/hooks/use-run-dataflow.ts
 delete mode 100644 web/src/pages/data-flow/hooks/use-save-graph.ts
 delete mode 100644 web/src/pages/data-flow/hooks/use-set-graph.ts
 delete mode 100644 web/src/pages/data-flow/hooks/use-show-drawer.tsx
 delete mode 100644 web/src/pages/data-flow/hooks/use-watch-form-change.ts
 delete mode 100644 web/src/pages/data-flow/index.tsx
 delete mode 100644 web/src/pages/data-flow/interface.ts
 delete mode 100644 web/src/pages/data-flow/log-sheet/dataflow-timeline.tsx
 delete mode 100644 web/src/pages/data-flow/log-sheet/index.tsx
 delete mode 100644 web/src/pages/data-flow/operator-icon.tsx
 delete mode 100644 web/src/pages/data-flow/run-sheet/index.tsx
 delete mode 100644 web/src/pages/data-flow/run-sheet/uploader.tsx
 delete mode 100644 web/src/pages/data-flow/setting-dialog/index.tsx
 delete mode 100644 web/src/pages/data-flow/setting-dialog/setting-form.tsx
 delete mode 100644 web/src/pages/data-flow/store.ts
 delete mode 100644 web/src/pages/data-flow/use-agent-history-manager.ts
 delete mode 100644 web/src/pages/data-flow/utils.ts
 delete mode 100644 web/src/pages/data-flow/utils/build-output-list.ts
 delete mode 100644 web/src/pages/data-flow/utils/delete-node.ts
 delete mode 100644 web/src/pages/data-flow/utils/filter-downstream-nodes.ts
 delete mode 100644 web/src/pages/data-flow/version-dialog/index.tsx
 delete mode 100644 web/src/pages/profile-setting/mcp/mcp-dropdown.tsx
 create mode 100644 web/src/pages/profile-setting/mcp/mcp-operation.tsx

diff --git a/web/package-lock.json b/web/package-lock.json
index 27034742e..e1b9d21a3 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -66,7 +66,7 @@
         "jsencrypt": "^3.3.2",
         "lexical": "^0.23.1",
         "lodash": "^4.17.21",
-        "lucide-react": "^0.542.0",
+        "lucide-react": "^0.546.0",
         "mammoth": "^1.7.2",
         "next-themes": "^0.4.6",
         "openai-speech-stream-player": "^1.0.8",
@@ -25175,9 +25175,9 @@
       }
     },
     "node_modules/lucide-react": {
-      "version": "0.542.0",
-      "resolved": "https://registry.npmmirror.com/lucide-react/-/lucide-react-0.542.0.tgz",
-      "integrity": "sha512-w3hD8/SQB7+lzU2r4VdFyzzOzKnUjTZIF/MQJGSSvni7Llewni4vuViRppfRAa2guOsY5k4jZyxw/i9DQHv+dw==",
+      "version": "0.546.0",
+      "resolved": "https://registry.npmmirror.com/lucide-react/-/lucide-react-0.546.0.tgz",
+      "integrity": "sha512-Z94u6fKT43lKeYHiVyvyR8fT7pwCzDu7RyMPpTvh054+xahSgj4HFQ+NmflvzdXsoAjYGdCguGaFKYuvq0ThCQ==",
       "license": "ISC",
       "peerDependencies": {
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
diff --git a/web/package.json b/web/package.json
index c01465a13..d11824850 100644
--- a/web/package.json
+++ b/web/package.json
@@ -79,7 +79,7 @@
     "jsencrypt": "^3.3.2",
     "lexical": "^0.23.1",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.542.0",
+    "lucide-react": "^0.546.0",
     "mammoth": "^1.7.2",
     "next-themes": "^0.4.6",
     "openai-speech-stream-player": "^1.0.8",
diff --git a/web/src/components/collapse.tsx b/web/src/components/collapse.tsx
index e91269b0c..3482929cc 100644
--- a/web/src/components/collapse.tsx
+++ b/web/src/components/collapse.tsx
@@ -5,7 +5,12 @@ import {
 } from '@/components/ui/collapsible';
 import { cn } from '@/lib/utils';
 import { CollapsibleProps } from '@radix-ui/react-collapsible';
-import { ChevronDown, ChevronUp } from 'lucide-react';
+import {
+  ChevronDown,
+  ChevronUp,
+  ListChevronsDownUp,
+  ListChevronsUpDown,
+} from 'lucide-react';
 import * as React from 'react';
 import {
   PropsWithChildren,
@@ -14,7 +19,6 @@ import {
   useEffect,
   useState,
 } from 'react';
-import { IconFontFill } from './icon-font';
 
 type CollapseProps = Omit<CollapsibleProps, 'title'> & {
   title?: ReactNode;
@@ -54,12 +58,11 @@ export function Collapse({
       <CollapsibleTrigger className={'w-full'}>
         <section className="flex justify-between items-center">
           <div className="flex items-center gap-1">
-            <IconFontFill
-              name={`more`}
-              className={cn('size-4', {
-                'rotate-90': !currentOpen,
-              })}
-            ></IconFontFill>
+            {currentOpen ? (
+              <ListChevronsUpDown className="size-4" />
+            ) : (
+              <ListChevronsDownUp className="size-4 text-text-secondary" />
+            )}
             <div
               className={cn('text-text-secondary', {
                 'text-text-primary': open,
diff --git a/web/src/components/llm-select/llm-label.tsx b/web/src/components/llm-select/llm-label.tsx
index 1bccd1778..7a42c308c 100644
--- a/web/src/components/llm-select/llm-label.tsx
+++ b/web/src/components/llm-select/llm-label.tsx
@@ -13,7 +13,7 @@ const LLMLabel = ({ value }: IProps) => {
   const { llmName, fId } = getLlmNameAndFIdByLlmId(value);
 
   return (
-    <div className="flex items-center gap-1">
+    <div className="flex items-center gap-1 text-xs text-text-secondary">
       <LlmIcon
         name={getLLMIconName(fId, llmName)}
         width={20}
diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx
index 500081cf2..44e6da165 100644
--- a/web/src/components/ui/button.tsx
+++ b/web/src/components/ui/button.tsx
@@ -24,6 +24,7 @@ const buttonVariants = cva(
         icon: 'bg-colors-background-inverse-standard text-foreground hover:bg-colors-background-inverse-standard/80',
         dashed: 'border border-dashed border-input hover:bg-accent',
         transparent: 'bg-transparent hover:bg-accent border',
+        danger: 'bg-transparent border border-state-error text-state-error',
       },
       size: {
         default: 'h-8 px-2.5 py-1.5 ',
diff --git a/web/src/components/ui/card.tsx b/web/src/components/ui/card.tsx
index 66cfe6504..0ff2a1183 100644
--- a/web/src/components/ui/card.tsx
+++ b/web/src/components/ui/card.tsx
@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      'rounded-lg border-border-default border shadow-sm bg-bg-input',
+      'rounded-lg border-border-default border shadow-sm bg-bg-input hover:shadow-md',
       className,
     )}
     {...props}
diff --git a/web/src/components/ui/checkbox.tsx b/web/src/components/ui/checkbox.tsx
index 5b5261842..eb338959e 100644
--- a/web/src/components/ui/checkbox.tsx
+++ b/web/src/components/ui/checkbox.tsx
@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      'peer h-3.5 w-3.5 shrink-0 rounded-sm border border-text-secondary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
       className,
     )}
     {...props}
@@ -21,7 +21,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn('flex items-center justify-center text-current')}
     >
-      <Check className="h-4 w-4" />
+      <Check className="h-3.5 w-3.5" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));
diff --git a/web/src/components/ui/ragflow-pagination.tsx b/web/src/components/ui/ragflow-pagination.tsx
index 1426425d3..eeb1a0736 100644
--- a/web/src/components/ui/ragflow-pagination.tsx
+++ b/web/src/components/ui/ragflow-pagination.tsx
@@ -135,7 +135,9 @@ export function RAGFlowPagination({
 
   return (
     <section className="flex items-center justify-end text-text-sub-title-invert">
-      <span className="mr-4">{t('pagination.total', { total: total })}</span>
+      <span className="mr-4 text-text-primary">
+        {t('pagination.total', { total: total })}
+      </span>
       <Pagination className="w-auto mx-0 mr-4">
         <PaginationContent>
           <PaginationItem>
@@ -150,7 +152,7 @@ export function RAGFlowPagination({
             ) : (
               <PaginationItem
                 key={page}
-                className={cn({
+                className={cn('text-text-disabled', {
                   ['bg-bg-card rounded-md text-text-primary']:
                     currentPage === page,
                 })}
diff --git a/web/src/components/ui/tooltip.tsx b/web/src/components/ui/tooltip.tsx
index b1fe01139..be90ee314 100644
--- a/web/src/components/ui/tooltip.tsx
+++ b/web/src/components/ui/tooltip.tsx
@@ -46,6 +46,18 @@ export const FormTooltip = ({ tooltip }: { tooltip: React.ReactNode }) => {
   );
 };
 
+export function RAGFlowTooltip({
+  children,
+  tooltip,
+}: React.PropsWithChildren & { tooltip: React.ReactNode }) {
+  return (
+    <Tooltip>
+      <TooltipTrigger>{children}</TooltipTrigger>
+      <TooltipContent>{tooltip}</TooltipContent>
+    </Tooltip>
+  );
+}
+
 export interface AntToolTipProps {
   title: React.ReactNode;
   children: React.ReactNode;
diff --git a/web/src/components/xyflow/base-node.tsx b/web/src/components/xyflow/base-node.tsx
index accfb4b42..6e0de064a 100644
--- a/web/src/components/xyflow/base-node.tsx
+++ b/web/src/components/xyflow/base-node.tsx
@@ -12,7 +12,6 @@ export const BaseNode = forwardRef<
       'relative rounded bg-card text-card-foreground',
       className,
       selected ? 'border-muted-foreground shadow-lg' : '',
-      'hover:ring-1',
     )}
     tabIndex={0}
     {...props}
diff --git a/web/src/constants/agent.ts b/web/src/constants/agent.ts
index f6af4f57c..47e581e70 100644
--- a/web/src/constants/agent.ts
+++ b/web/src/constants/agent.ts
@@ -116,5 +116,4 @@ export enum Operator {
   Splitter = 'Splitter',
   HierarchicalMerger = 'HierarchicalMerger',
   Extractor = 'Extractor',
-  Generate = 'Generate',
 }
diff --git a/web/src/hooks/logic-hooks/navigate-hooks.ts b/web/src/hooks/logic-hooks/navigate-hooks.ts
index 92f573010..8b61d1559 100644
--- a/web/src/hooks/logic-hooks/navigate-hooks.ts
+++ b/web/src/hooks/logic-hooks/navigate-hooks.ts
@@ -77,13 +77,6 @@ export const useNavigatePage = () => {
     [navigate],
   );
 
-  const navigateToDataflow = useCallback(
-    (id: string) => () => {
-      navigate(`${Routes.DataFlow}/${id}`);
-    },
-    [navigate],
-  );
-
   const navigateToAgentLogs = useCallback(
     (id: string) => () => {
       navigate(`${Routes.AgentLogPage}/${id}`);
@@ -185,7 +178,6 @@ export const useNavigatePage = () => {
     navigateToAgentList,
     navigateToOldProfile,
     navigateToDataflowResult,
-    navigateToDataflow,
     navigateToDataFile,
   };
 };
diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts
index 3d9ee54fe..8cd30196c 100644
--- a/web/src/locales/en.ts
+++ b/web/src/locales/en.ts
@@ -3,7 +3,7 @@ export default {
     common: {
       noResults: 'No results.',
       selectPlaceholder: 'select value',
-      selectAll: 'Select All',
+      selectAll: 'Select all',
       delete: 'Delete',
       deleteModalTitle: 'Are you sure to delete this item?',
       ok: 'Ok',
@@ -1747,6 +1747,9 @@ Important structured information may include: names, dates, locations, events, k
       mcpServers: 'MCP Servers',
       customizeTheListOfMcpServers: 'Customize the list of MCP servers',
       cachedTools: 'cached tools',
+      bulkManage: 'Bulk manage',
+      exitBulkManage: 'Exit bulk manage',
+      selected: 'Selected',
     },
     search: {
       searchApps: 'Search Apps',
diff --git a/web/src/locales/zh.ts b/web/src/locales/zh.ts
index 537fc8f23..8605246d0 100644
--- a/web/src/locales/zh.ts
+++ b/web/src/locales/zh.ts
@@ -1634,6 +1634,9 @@ Tokenizer 会根据所选方式将内容存储为对应的数据结构。`,
       mcpServers: 'MCP 服务器',
       customizeTheListOfMcpServers: '自定义 MCP 服务器列表',
       cachedTools: '缓存工具',
+      selected: '已选择',
+      bulkManage: '批量管理',
+      exitBulkManage: '退出批量管理',
     },
     search: {
       searchApps: '搜索',
diff --git a/web/src/pages/agent/canvas/edge/index.tsx b/web/src/pages/agent/canvas/edge/index.tsx
index 5b66e5be8..f1a714d5b 100644
--- a/web/src/pages/agent/canvas/edge/index.tsx
+++ b/web/src/pages/agent/canvas/edge/index.tsx
@@ -10,6 +10,7 @@ import useGraphStore from '../../store';
 
 import { useFetchAgent } from '@/hooks/use-agent-request';
 import { cn } from '@/lib/utils';
+import { isEmpty } from 'lodash';
 import { useMemo } from 'react';
 import { NodeHandleId, Operator } from '../../constant';
 
@@ -91,11 +92,14 @@ function InnerButtonEdge({
     );
   }, [data?.isHovered, isTargetPlaceholder, sourceHandleId, target]);
 
+  const activeMarkerEnd =
+    selected || !isEmpty(showHighlight) ? 'url(#selected-marker)' : markerEnd;
+
   return (
     <>
       <BaseEdge
         path={edgePath}
-        markerEnd={markerEnd}
+        markerEnd={activeMarkerEnd}
         style={{
           ...style,
           ...selectedStyle,
diff --git a/web/src/pages/agent/canvas/index.tsx b/web/src/pages/agent/canvas/index.tsx
index ec81bd9e6..c68b40c1a 100644
--- a/web/src/pages/agent/canvas/index.tsx
+++ b/web/src/pages/agent/canvas/index.tsx
@@ -59,7 +59,6 @@ import { CategorizeNode } from './node/categorize-node';
 import { NextStepDropdown } from './node/dropdown/next-step-dropdown';
 import { ExtractorNode } from './node/extractor-node';
 import { FileNode } from './node/file-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';
@@ -84,7 +83,6 @@ export const nodeTypes: NodeTypes = {
   relevantNode: RelevantNode,
   noteNode: NoteNode,
   switchNode: SwitchNode,
-  generateNode: GenerateNode,
   retrievalNode: RetrievalNode,
   messageNode: MessageNode,
   rewriteNode: RewriteNode,
@@ -249,6 +247,19 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
         style={{ position: 'absolute', top: 10, left: 0 }}
       >
         <defs>
+          <marker
+            fill="rgb(var(--accent-primary))"
+            id="selected-marker"
+            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>
           <marker
             fill="var(--text-disabled)"
             id="logo"
diff --git a/web/src/pages/agent/canvas/node/agent-node.tsx b/web/src/pages/agent/canvas/node/agent-node.tsx
index 6b0e4b0b3..30e15febd 100644
--- a/web/src/pages/agent/canvas/node/agent-node.tsx
+++ b/web/src/pages/agent/canvas/node/agent-node.tsx
@@ -1,4 +1,3 @@
-import LLMLabel from '@/components/llm-select/llm-label';
 import { IAgentNode } from '@/interfaces/database/flow';
 import { cn } from '@/lib/utils';
 import { Handle, NodeProps, Position } from '@xyflow/react';
@@ -9,6 +8,7 @@ import { AgentExceptionMethod, NodeHandleId } from '../../constant';
 import { AgentFormSchemaType } from '../../form/agent-form';
 import useGraphStore from '../../store';
 import { hasSubAgent, isBottomSubAgent } from '../../utils';
+import { LLMLabelCard } from './card';
 import { CommonHandle, LeftEndHandle } from './handle';
 import { RightHandleStyle } from './handle-icon';
 import NodeHeader from './node-header';
@@ -90,9 +90,7 @@ function InnerAgentNode({
         ></Handle>
         <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
         <section className="flex flex-col gap-2">
-          <div className={'bg-bg-card rounded-sm p-1'}>
-            <LLMLabel value={get(data, 'form.llm_id')}></LLMLabel>
-          </div>
+          <LLMLabelCard llmId={get(data, 'form.llm_id')}></LLMLabelCard>
           {(isGotoMethod ||
             exceptionMethod === AgentExceptionMethod.Comment) && (
             <div className="bg-bg-card rounded-sm p-1 flex justify-between gap-2">
diff --git a/web/src/pages/agent/canvas/node/begin-node.tsx b/web/src/pages/agent/canvas/node/begin-node.tsx
index be80d56ae..48f69e5f6 100644
--- a/web/src/pages/agent/canvas/node/begin-node.tsx
+++ b/web/src/pages/agent/canvas/node/begin-node.tsx
@@ -12,6 +12,7 @@ import {
 } from '../../constant';
 import { BeginQuery } from '../../interface';
 import OperatorIcon from '../../operator-icon';
+import { LabelCard } from './card';
 import { CommonHandle } from './handle';
 import { RightHandleStyle } from './handle-icon';
 import styles from './index.less';
@@ -43,15 +44,16 @@ function InnerBeginNode({ data, id, selected }: NodeProps<IBeginNode>) {
         {Object.entries(inputs).map(([key, val], idx) => {
           const Icon = BeginQueryTypeIconMap[val.type as BeginQueryType];
           return (
-            <div
-              key={idx}
-              className={cn(styles.conditionBlock, 'flex gap-1.5 items-center')}
-            >
-              <Icon className="size-4" />
-              <label htmlFor="">{key}</label>
-              <span className={styles.parameterValue}>{val.name}</span>
+            <LabelCard key={idx} className={cn('flex gap-1.5 items-center')}>
+              <Icon className="size-3.5" />
+              <label htmlFor="" className="text-accent-primary text-sm italic">
+                {key}
+              </label>
+              <LabelCard className="py-0.5 truncate flex-1">
+                {val.name}
+              </LabelCard>
               <span className="flex-1">{val.optional ? 'Yes' : 'No'}</span>
-            </div>
+            </LabelCard>
           );
         })}
       </section>
diff --git a/web/src/pages/agent/canvas/node/card.tsx b/web/src/pages/agent/canvas/node/card.tsx
index cd5e1ae09..19fe5623f 100644
--- a/web/src/pages/agent/canvas/node/card.tsx
+++ b/web/src/pages/agent/canvas/node/card.tsx
@@ -1,3 +1,4 @@
+import LLMLabel from '@/components/llm-select/llm-label';
 import { Button } from '@/components/ui/button';
 import {
   Card,
@@ -16,7 +17,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-
 import { cn } from '@/lib/utils';
 import { PropsWithChildren } from 'react';
 
@@ -65,6 +65,21 @@ type LabelCardProps = {
 
 export function LabelCard({ children, className }: LabelCardProps) {
   return (
-    <div className={cn('bg-bg-card rounded-sm p-1', className)}>{children}</div>
+    <div
+      className={cn(
+        'bg-bg-card rounded-sm p-1 text-text-secondary text-xs',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function LLMLabelCard({ llmId }: { llmId?: string }) {
+  return (
+    <LabelCard>
+      <LLMLabel value={llmId}></LLMLabel>
+    </LabelCard>
   );
 }
diff --git a/web/src/pages/agent/canvas/node/categorize-node.tsx b/web/src/pages/agent/canvas/node/categorize-node.tsx
index f036cfbc9..2afece467 100644
--- a/web/src/pages/agent/canvas/node/categorize-node.tsx
+++ b/web/src/pages/agent/canvas/node/categorize-node.tsx
@@ -1,8 +1,8 @@
-import LLMLabel from '@/components/llm-select/llm-label';
 import { ICategorizeNode } from '@/interfaces/database/flow';
 import { NodeProps, Position } from '@xyflow/react';
 import { get } from 'lodash';
 import { memo } from 'react';
+import { LLMLabelCard } from './card';
 import { CommonHandle, LeftEndHandle } from './handle';
 import { RightHandleStyle } from './handle-icon';
 import NodeHeader from './node-header';
@@ -24,9 +24,7 @@ export function InnerCategorizeNode({
         <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
 
         <section className="flex flex-col gap-2">
-          <div className={'bg-bg-card rounded-sm px-1'}>
-            <LLMLabel value={get(data, 'form.llm_id')}></LLMLabel>
-          </div>
+          <LLMLabelCard llmId={get(data, 'form.llm_id')}></LLMLabelCard>
           {positions.map((position) => {
             return (
               <div key={position.uuid}>
diff --git a/web/src/pages/agent/canvas/node/dropdown/next-step-dropdown.tsx b/web/src/pages/agent/canvas/node/dropdown/next-step-dropdown.tsx
index dd2945b77..3b7acfc71 100644
--- a/web/src/pages/agent/canvas/node/dropdown/next-step-dropdown.tsx
+++ b/web/src/pages/agent/canvas/node/dropdown/next-step-dropdown.tsx
@@ -96,7 +96,9 @@ export function InnerNextStepDropdown({
         onClick={(e) => e.stopPropagation()}
         className="w-[300px] font-semibold"
       >
-        <DropdownMenuLabel>{t('flow.nextStep')}</DropdownMenuLabel>
+        <DropdownMenuLabel className="text-xs text-text-primary">
+          {t('flow.nextStep')}
+        </DropdownMenuLabel>
         <HideModalContext.Provider value={hideModal}>
           {isPipeline ? (
             <PipelineAccordionOperators></PipelineAccordionOperators>
diff --git a/web/src/pages/agent/canvas/node/extractor-node.tsx b/web/src/pages/agent/canvas/node/extractor-node.tsx
index 8b2e03483..c60b5611a 100644
--- a/web/src/pages/agent/canvas/node/extractor-node.tsx
+++ b/web/src/pages/agent/canvas/node/extractor-node.tsx
@@ -1,8 +1,7 @@
-import LLMLabel from '@/components/llm-select/llm-label';
 import { IRagNode } from '@/interfaces/database/agent';
 import { NodeProps } from '@xyflow/react';
 import { get } from 'lodash';
-import { LabelCard } from './card';
+import { LLMLabelCard } from './card';
 import { RagNode } from './index';
 
 export function ExtractorNode({ ...props }: NodeProps<IRagNode>) {
@@ -10,9 +9,7 @@ export function ExtractorNode({ ...props }: NodeProps<IRagNode>) {
 
   return (
     <RagNode {...props}>
-      <LabelCard>
-        <LLMLabel value={get(data, 'form.llm_id')}></LLMLabel>
-      </LabelCard>
+      <LLMLabelCard llmId={get(data, 'form.llm_id')}></LLMLabelCard>
     </RagNode>
   );
 }
diff --git a/web/src/pages/agent/canvas/node/generate-node.tsx b/web/src/pages/agent/canvas/node/generate-node.tsx
deleted file mode 100644
index 8ffbbd79c..000000000
--- a/web/src/pages/agent/canvas/node/generate-node.tsx
+++ /dev/null
@@ -1,60 +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 { memo } from 'react';
-import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
-import styles from './index.less';
-import NodeHeader from './node-header';
-
-export function InnerGenerateNode({
-  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>
-  );
-}
-
-export const GenerateNode = memo(InnerGenerateNode);
diff --git a/web/src/pages/agent/canvas/node/index.tsx b/web/src/pages/agent/canvas/node/index.tsx
index 953bb6daa..45bbd83f5 100644
--- a/web/src/pages/agent/canvas/node/index.tsx
+++ b/web/src/pages/agent/canvas/node/index.tsx
@@ -1,6 +1,6 @@
 import { IRagNode } from '@/interfaces/database/flow';
 import { NodeProps, Position } from '@xyflow/react';
-import { memo } from 'react';
+import { PropsWithChildren, memo } from 'react';
 import { NodeHandleId } from '../../constant';
 import { needsSingleStepDebugging, showCopyIcon } from '../../utils';
 import { CommonHandle, LeftEndHandle } from './handle';
@@ -9,12 +9,15 @@ import NodeHeader from './node-header';
 import { NodeWrapper } from './node-wrapper';
 import { ToolBar } from './toolbar';
 
+type RagNodeProps = NodeProps<IRagNode> & PropsWithChildren;
+
 function InnerRagNode({
   id,
   data,
   isConnectable = true,
   selected,
-}: NodeProps<IRagNode>) {
+  children,
+}: RagNodeProps) {
   return (
     <ToolBar
       selected={selected}
@@ -35,6 +38,7 @@ function InnerRagNode({
           isConnectableEnd={false}
         ></CommonHandle>
         <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
+        {children}
       </NodeWrapper>
     </ToolBar>
   );
diff --git a/web/src/pages/agent/canvas/node/keyword-node.tsx b/web/src/pages/agent/canvas/node/keyword-node.tsx
index 012dcf26c..3c1320396 100644
--- a/web/src/pages/agent/canvas/node/keyword-node.tsx
+++ b/web/src/pages/agent/canvas/node/keyword-node.tsx
@@ -1,10 +1,10 @@
-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 { memo } from 'react';
+import { LLMLabelCard } from './card';
 import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
 import styles from './index.less';
 import NodeHeader from './node-header';
@@ -50,9 +50,7 @@ export function InnerKeywordNode({
         className={styles.nodeHeader}
       ></NodeHeader>
 
-      <div className={styles.nodeText}>
-        <LLMLabel value={get(data, 'form.llm_id')}></LLMLabel>
-      </div>
+      <LLMLabelCard llmId={get(data, 'form.llm_id')}></LLMLabelCard>
     </section>
   );
 }
diff --git a/web/src/pages/agent/canvas/node/node-wrapper.tsx b/web/src/pages/agent/canvas/node/node-wrapper.tsx
index b7d160673..0a0188255 100644
--- a/web/src/pages/agent/canvas/node/node-wrapper.tsx
+++ b/web/src/pages/agent/canvas/node/node-wrapper.tsx
@@ -7,7 +7,7 @@ export function NodeWrapper({ children, className, selected }: IProps) {
   return (
     <section
       className={cn(
-        'bg-text-title-invert p-2.5 rounded-md w-[200px] text-xs group',
+        'bg-bg-component p-2.5 rounded-md w-[200px] border border-border-button text-xs group hover:shadow-md',
         { 'border border-accent-primary': selected },
         className,
       )}
diff --git a/web/src/pages/agent/canvas/node/retrieval-node.tsx b/web/src/pages/agent/canvas/node/retrieval-node.tsx
index 75c9e6bd4..ad5bae9b1 100644
--- a/web/src/pages/agent/canvas/node/retrieval-node.tsx
+++ b/web/src/pages/agent/canvas/node/retrieval-node.tsx
@@ -57,7 +57,6 @@ function InnerRetrievalNode({
                     className="size-6 rounded-lg"
                     avatar={id}
                     name={item?.name || (label as string) || 'CN'}
-                    isPerson={true}
                   />
 
                   <div className={'truncate flex-1'}>{label || item?.name}</div>
diff --git a/web/src/pages/agent/canvas/node/rewrite-node.tsx b/web/src/pages/agent/canvas/node/rewrite-node.tsx
index 134899c8b..659e65af0 100644
--- a/web/src/pages/agent/canvas/node/rewrite-node.tsx
+++ b/web/src/pages/agent/canvas/node/rewrite-node.tsx
@@ -1,10 +1,10 @@
-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 { memo } from 'react';
+import { LLMLabelCard } from './card';
 import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
 import styles from './index.less';
 import NodeHeader from './node-header';
@@ -50,9 +50,7 @@ function InnerRewriteNode({
         className={styles.nodeHeader}
       ></NodeHeader>
 
-      <div className={styles.nodeText}>
-        <LLMLabel value={get(data, 'form.llm_id')}></LLMLabel>
-      </div>
+      <LLMLabelCard llmId={get(data, 'form.llm_id')}></LLMLabelCard>
     </section>
   );
 }
diff --git a/web/src/pages/agent/canvas/node/switch-node.tsx b/web/src/pages/agent/canvas/node/switch-node.tsx
index ea4b1cc83..9622e1f48 100644
--- a/web/src/pages/agent/canvas/node/switch-node.tsx
+++ b/web/src/pages/agent/canvas/node/switch-node.tsx
@@ -43,7 +43,7 @@ const ConditionBlock = ({
   }, []);
 
   return (
-    <Card>
+    <Card className="bg-bg-card border-transparent rounded-md">
       <CardContent className="p-0 divide-y divide-background-card">
         {items.map((x, idx) => (
           <div key={idx}>
diff --git a/web/src/pages/agent/canvas/node/toolbar.tsx b/web/src/pages/agent/canvas/node/toolbar.tsx
index 565378575..74f6ae3db 100644
--- a/web/src/pages/agent/canvas/node/toolbar.tsx
+++ b/web/src/pages/agent/canvas/node/toolbar.tsx
@@ -3,6 +3,7 @@ import {
   TooltipNode,
   TooltipTrigger,
 } from '@/components/xyflow/tooltip-node';
+import { cn } from '@/lib/utils';
 import { Position } from '@xyflow/react';
 import { Copy, Play, Trash2 } from 'lucide-react';
 import {
@@ -15,9 +16,19 @@ import { Operator } from '../../constant';
 import { useDuplicateNode } from '../../hooks';
 import useGraphStore from '../../store';
 
-function IconWrapper({ children, ...props }: HTMLAttributes<HTMLDivElement>) {
+function IconWrapper({
+  children,
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
   return (
-    <div className="p-1.5 bg-text-title rounded-sm cursor-pointer" {...props}>
+    <div
+      className={cn(
+        'p-1.5 bg-bg-component border border-border-button rounded-sm cursor-pointer hover:text-text-primary',
+        className,
+      )}
+      {...props}
+    >
       {children}
     </div>
   );
@@ -71,7 +82,7 @@ export function ToolBar({
       <TooltipTrigger className="h-full">{children}</TooltipTrigger>
 
       <TooltipContent position={Position.Top}>
-        <section className="flex gap-2 items-center">
+        <section className="flex gap-2 items-center text-text-secondary">
           {showRun && (
             <IconWrapper>
               <Play className="size-3.5" data-play />
@@ -82,7 +93,10 @@ export function ToolBar({
               <Copy className="size-3.5" />
             </IconWrapper>
           )}
-          <IconWrapper onClick={deleteNode}>
+          <IconWrapper
+            onClick={deleteNode}
+            className="hover:text-state-error hover:border-state-error"
+          >
             <Trash2 className="size-3.5" />
           </IconWrapper>
         </section>
diff --git a/web/src/pages/agent/form/agent-form/agent-tools.tsx b/web/src/pages/agent/form/agent-form/agent-tools.tsx
index 9e5620823..567d79164 100644
--- a/web/src/pages/agent/form/agent-form/agent-tools.tsx
+++ b/web/src/pages/agent/form/agent-form/agent-tools.tsx
@@ -15,6 +15,7 @@ import {
   useContext,
   useMemo,
 } from 'react';
+import { LabelCard } from '../../canvas/node/card';
 import { Operator } from '../../constant';
 import { AgentInstanceContext } from '../../context';
 import { useFindMcpById } from '../../hooks/use-find-mcp-by-id';
@@ -34,15 +35,9 @@ export function ToolCard({
 }: PropsWithChildren & React.HTMLAttributes<HTMLLIElement>) {
   const element = useMemo(() => {
     return (
-      <li
-        {...props}
-        className={cn(
-          'flex bg-bg-card p-1 rounded-sm justify-between',
-          className,
-        )}
-      >
+      <LabelCard {...props} className={cn('flex justify-between', className)}>
         {children}
-      </li>
+      </LabelCard>
     );
   }, [children, className, props]);
 
diff --git a/web/src/pages/agent/setting-dialog/index.tsx b/web/src/pages/agent/setting-dialog/index.tsx
index 6d0e1e976..37d11ec1c 100644
--- a/web/src/pages/agent/setting-dialog/index.tsx
+++ b/web/src/pages/agent/setting-dialog/index.tsx
@@ -8,7 +8,6 @@ import {
 } from '@/components/ui/dialog';
 import { useSetAgentSetting } from '@/hooks/use-agent-request';
 import { IModalProps } from '@/interfaces/common';
-import { transformFile2Base64 } from '@/utils/file-util';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
@@ -23,11 +22,7 @@ export function SettingDialog({ hideModal }: IModalProps<any>) {
 
   const submit = useCallback(
     async (values: SettingFormSchemaType) => {
-      const avatar = values.avatar;
-      const code = await setAgentSetting({
-        ...values,
-        avatar: avatar.length > 0 ? await transformFile2Base64(avatar[0]) : '',
-      });
+      const code = await setAgentSetting(values);
       if (code === 0) {
         hideModal?.();
       }
@@ -39,7 +34,7 @@ export function SettingDialog({ hideModal }: IModalProps<any>) {
     <Dialog open onOpenChange={hideModal}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Are you absolutely sure?</DialogTitle>
+          <DialogTitle>{t('common.edit')}</DialogTitle>
         </DialogHeader>
         <SettingForm submit={submit}></SettingForm>
         <DialogFooter>
diff --git a/web/src/pages/agent/setting-dialog/setting-form.tsx b/web/src/pages/agent/setting-dialog/setting-form.tsx
index e39ad2416..bad6b1f70 100644
--- a/web/src/pages/agent/setting-dialog/setting-form.tsx
+++ b/web/src/pages/agent/setting-dialog/setting-form.tsx
@@ -1,32 +1,20 @@
 import { z } from 'zod';
 
-import {
-  FileUpload,
-  FileUploadDropzone,
-  FileUploadItem,
-  FileUploadItemDelete,
-  FileUploadItemMetadata,
-  FileUploadItemPreview,
-  FileUploadList,
-  FileUploadTrigger,
-} from '@/components/file-upload';
+import { AvatarUpload } from '@/components/avatar-upload';
 import { RAGFlowFormItem } from '@/components/ragflow-form';
-import { Button } from '@/components/ui/button';
 import { Form, FormControl, FormItem, FormLabel } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { Textarea } from '@/components/ui/textarea';
 import { useTranslate } from '@/hooks/common-hooks';
 import { useFetchAgent } from '@/hooks/use-agent-request';
-import { transformBase64ToFile } from '@/utils/file-util';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { CloudUpload, X } from 'lucide-react';
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 
 const formSchema = z.object({
   title: z.string().min(1, {}),
-  avatar: z.array(z.custom<File>()).optional().nullable(),
+  avatar: z.string().optional(),
   description: z.string().optional().nullable(),
   permission: z.string(),
 });
@@ -55,7 +43,7 @@ export function SettingForm({ submit }: SettingFormProps) {
     form.reset({
       title: data?.title,
       description: data?.description,
-      avatar: data.avatar ? [transformBase64ToFile(data.avatar)] : [],
+      avatar: data.avatar,
       permission: data?.permission,
     });
   }, [data, form]);
@@ -71,45 +59,7 @@ export function SettingForm({ submit }: SettingFormProps) {
           <Input />
         </RAGFlowFormItem>
         <RAGFlowFormItem name="avatar" label={t('photo')}>
-          {(field) => (
-            <FileUpload
-              value={field.value}
-              onValueChange={field.onChange}
-              accept="image/*"
-              maxFiles={1}
-              onFileReject={(_, message) => {
-                form.setError('avatar', {
-                  message,
-                });
-              }}
-              multiple
-            >
-              <FileUploadDropzone className="flex-row flex-wrap border-dotted text-center">
-                <CloudUpload className="size-4" />
-                Drag and drop or
-                <FileUploadTrigger asChild>
-                  <Button variant="link" size="sm" className="p-0">
-                    choose files
-                  </Button>
-                </FileUploadTrigger>
-                to upload
-              </FileUploadDropzone>
-              <FileUploadList>
-                {field.value?.map((file: File, index: number) => (
-                  <FileUploadItem key={index} value={file}>
-                    <FileUploadItemPreview />
-                    <FileUploadItemMetadata />
-                    <FileUploadItemDelete asChild>
-                      <Button variant="ghost" size="icon" className="size-7">
-                        <X />
-                        <span className="sr-only">Delete</span>
-                      </Button>
-                    </FileUploadItemDelete>
-                  </FileUploadItem>
-                ))}
-              </FileUploadList>
-            </FileUpload>
-          )}
+          <AvatarUpload></AvatarUpload>
         </RAGFlowFormItem>
         <RAGFlowFormItem name="description" label={t('description')}>
           <Textarea rows={4} />
diff --git a/web/src/pages/agent/utils.ts b/web/src/pages/agent/utils.ts
index a22e2fedc..9757b436b 100644
--- a/web/src/pages/agent/utils.ts
+++ b/web/src/pages/agent/utils.ts
@@ -78,10 +78,7 @@ const buildComponentDownstreamOrUpstream = (
 
 const removeUselessDataInTheOperator = curry(
   (operatorName: string, params: Record<string, unknown>) => {
-    if (
-      operatorName === Operator.Generate ||
-      operatorName === Operator.Categorize
-    ) {
+    if (operatorName === Operator.Categorize) {
       return removeUselessFieldsFromValues(params, '');
     }
     return params;
diff --git a/web/src/pages/agents/hooks/use-create-agent.ts b/web/src/pages/agents/hooks/use-create-agent.ts
index da1915290..7f3c61c35 100644
--- a/web/src/pages/agents/hooks/use-create-agent.ts
+++ b/web/src/pages/agents/hooks/use-create-agent.ts
@@ -1,12 +1,9 @@
-import { AgentCategory } from '@/constants/agent';
+import { AgentCategory, Operator } from '@/constants/agent';
 import { useSetModalState } from '@/hooks/common-hooks';
 import { EmptyDsl, useSetAgent } from '@/hooks/use-agent-request';
 import { DSL } from '@/interfaces/database/agent';
-import {
-  BeginId,
-  Operator,
-  initialParserValues,
-} from '@/pages/data-flow/constant';
+
+import { FileId, initialParserValues } from '@/pages/agent/constant';
 import { useCallback } from 'react';
 import { FlowType } from '../constant';
 import { FormSchemaType } from '../create-agent-form';
@@ -15,15 +12,15 @@ export const DataflowEmptyDsl = {
   graph: {
     nodes: [
       {
-        id: BeginId,
+        id: FileId,
         type: 'beginNode',
         position: {
           x: 50,
           y: 200,
         },
         data: {
-          label: Operator.Begin,
-          name: Operator.Begin,
+          label: Operator.File,
+          name: Operator.File,
         },
         sourcePosition: 'left',
         targetPosition: 'right',
@@ -53,7 +50,7 @@ export const DataflowEmptyDsl = {
     edges: [
       {
         id: 'xy-edge__Filestart-Parser:HipSignsRhymeend',
-        source: BeginId,
+        source: FileId,
         sourceHandle: 'start',
         target: 'Parser:HipSignsRhyme',
         targetHandle: 'end',
@@ -61,9 +58,9 @@ export const DataflowEmptyDsl = {
     ],
   },
   components: {
-    [Operator.Begin]: {
+    [Operator.File]: {
       obj: {
-        component_name: Operator.Begin,
+        component_name: Operator.File,
         params: {},
       },
       downstream: [], // other edge target is downstream, edge source is current node id
diff --git a/web/src/pages/data-flow/canvas/context-menu/index.less b/web/src/pages/data-flow/canvas/context-menu/index.less
deleted file mode 100644
index 5594aa912..000000000
--- a/web/src/pages/data-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/data-flow/canvas/context-menu/index.tsx b/web/src/pages/data-flow/canvas/context-menu/index.tsx
deleted file mode 100644
index 6cb306af9..000000000
--- a/web/src/pages/data-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/data-flow/canvas/context.tsx b/web/src/pages/data-flow/canvas/context.tsx
deleted file mode 100644
index 203c37e99..000000000
--- a/web/src/pages/data-flow/canvas/context.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import {
-  createContext,
-  ReactNode,
-  useCallback,
-  useContext,
-  useRef,
-} from 'react';
-
-interface DropdownContextType {
-  canShowDropdown: () => boolean;
-  setActiveDropdown: (type: 'handle' | 'drag') => void;
-  clearActiveDropdown: () => void;
-}
-
-const DropdownContext = createContext<DropdownContextType | null>(null);
-
-export const useDropdownManager = () => {
-  const context = useContext(DropdownContext);
-  if (!context) {
-    throw new Error('useDropdownManager must be used within DropdownProvider');
-  }
-  return context;
-};
-
-interface DropdownProviderProps {
-  children: ReactNode;
-}
-
-export const DropdownProvider = ({ children }: DropdownProviderProps) => {
-  const activeDropdownRef = useRef<'handle' | 'drag' | null>(null);
-
-  const canShowDropdown = useCallback(() => {
-    const current = activeDropdownRef.current;
-    return !current;
-  }, []);
-
-  const setActiveDropdown = useCallback((type: 'handle' | 'drag') => {
-    activeDropdownRef.current = type;
-  }, []);
-
-  const clearActiveDropdown = useCallback(() => {
-    activeDropdownRef.current = null;
-  }, []);
-
-  const value: DropdownContextType = {
-    canShowDropdown,
-    setActiveDropdown,
-    clearActiveDropdown,
-  };
-
-  return (
-    <DropdownContext.Provider value={value}>
-      {children}
-    </DropdownContext.Provider>
-  );
-};
diff --git a/web/src/pages/data-flow/canvas/edge/index.tsx b/web/src/pages/data-flow/canvas/edge/index.tsx
deleted file mode 100644
index 40c8bb14d..000000000
--- a/web/src/pages/data-flow/canvas/edge/index.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import {
-  BaseEdge,
-  Edge,
-  EdgeLabelRenderer,
-  EdgeProps,
-  getBezierPath,
-} from '@xyflow/react';
-import { memo } from 'react';
-import useGraphStore from '../../store';
-
-import { useFetchAgent } from '@/hooks/use-agent-request';
-import { cn } from '@/lib/utils';
-import { useMemo } from 'react';
-import { Operator } from '../../constant';
-
-function InnerButtonEdge({
-  id,
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
-  sourcePosition,
-  targetPosition,
-  source,
-  target,
-  style = {},
-  markerEnd,
-  selected,
-  data,
-}: EdgeProps<Edge<{ isHovered: boolean }>>) {
-  const deleteEdgeById = useGraphStore((state) => state.deleteEdgeById);
-  const [edgePath, labelX, labelY] = getBezierPath({
-    sourceX,
-    sourceY,
-    sourcePosition,
-    targetX,
-    targetY,
-    targetPosition,
-  });
-  const selectedStyle = useMemo(() => {
-    return selected ? { strokeWidth: 1, stroke: 'rgba(76, 164, 231, 1)' } : {};
-  }, [selected]);
-
-  const onEdgeClick = () => {
-    deleteEdgeById(id);
-  };
-
-  // highlight the nodes that the workflow passes through
-  const { data: flowDetail } = useFetchAgent();
-
-  const showHighlight = useMemo(() => {
-    const path = flowDetail?.dsl?.path ?? [];
-    const idx = path.findIndex((x) => x === target);
-    if (idx !== -1) {
-      let index = idx - 1;
-      while (index >= 0) {
-        if (path[index] === source) {
-          return { strokeWidth: 1, stroke: 'var(--accent-primary)' };
-        }
-        index--;
-      }
-      return {};
-    }
-    return {};
-  }, [flowDetail?.dsl?.path, source, target]);
-
-  const visible = useMemo(() => {
-    return data?.isHovered && source !== Operator.Begin;
-  }, [data?.isHovered, source]);
-
-  return (
-    <>
-      <BaseEdge
-        path={edgePath}
-        markerEnd={markerEnd}
-        style={{ ...style, ...selectedStyle, ...showHighlight }}
-        className="text-text-secondary"
-      />
-
-      <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={cn(
-              'size-3.5 border border-state-error text-state-error rounded-full leading-none',
-              'invisible',
-              { visible },
-            )}
-            type="button"
-            onClick={onEdgeClick}
-          >
-            ×
-          </button>
-        </div>
-      </EdgeLabelRenderer>
-    </>
-  );
-}
-
-export const ButtonEdge = memo(InnerButtonEdge);
diff --git a/web/src/pages/data-flow/canvas/index.less b/web/src/pages/data-flow/canvas/index.less
deleted file mode 100644
index 0183d41b5..000000000
--- a/web/src/pages/data-flow/canvas/index.less
+++ /dev/null
@@ -1,11 +0,0 @@
-.canvasWrapper {
-  position: relative;
-  height: calc(100% - 64px);
-  :global(.react-flow__node-group) {
-    .commonNode();
-    border-radius: 0 0 10px 10px;
-    padding: 0;
-    border: 0;
-    background-color: transparent;
-  }
-}
diff --git a/web/src/pages/data-flow/canvas/index.tsx b/web/src/pages/data-flow/canvas/index.tsx
deleted file mode 100644
index d7eb615f6..000000000
--- a/web/src/pages/data-flow/canvas/index.tsx
+++ /dev/null
@@ -1,330 +0,0 @@
-import { useIsDarkTheme, useTheme } from '@/components/theme-provider';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
-import { useSetModalState } from '@/hooks/common-hooks';
-import { cn } from '@/lib/utils';
-import {
-  Connection,
-  ConnectionMode,
-  ControlButton,
-  Controls,
-  NodeTypes,
-  OnConnectEnd,
-  Position,
-  ReactFlow,
-  ReactFlowInstance,
-} from '@xyflow/react';
-import '@xyflow/react/dist/style.css';
-import { NotebookPen } from 'lucide-react';
-import { memo, useCallback, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { AgentInstanceContext, HandleContext } from '../context';
-
-import FormSheet from '../form-sheet/next';
-import { useSelectCanvasData, useValidateConnection } from '../hooks';
-import { useAddNode } from '../hooks/use-add-node';
-import { useBeforeDelete } from '../hooks/use-before-delete';
-import { useMoveNote } from '../hooks/use-move-note';
-import { useDropdownManager } from './context';
-
-import { AgentBackground } from '@/components/canvas/background';
-import Spotlight from '@/components/spotlight';
-import { useRunDataflow } from '../hooks/use-run-dataflow';
-import {
-  useHideFormSheetOnNodeDeletion,
-  useShowDrawer,
-} from '../hooks/use-show-drawer';
-import RunSheet from '../run-sheet';
-import useGraphStore from '../store';
-import { ButtonEdge } from './edge';
-import styles from './index.less';
-import { RagNode } from './node';
-import { BeginNode } from './node/begin-node';
-import { NextStepDropdown } from './node/dropdown/next-step-dropdown';
-import { ExtractorNode } from './node/extractor-node';
-import NoteNode from './node/note-node';
-import ParserNode from './node/parser-node';
-import { SplitterNode } from './node/splitter-node';
-import TokenizerNode from './node/tokenizer-node';
-
-export const nodeTypes: NodeTypes = {
-  ragNode: RagNode,
-  beginNode: BeginNode,
-  noteNode: NoteNode,
-  parserNode: ParserNode,
-  tokenizerNode: TokenizerNode,
-  splitterNode: SplitterNode,
-  contextNode: ExtractorNode,
-};
-
-const edgeTypes = {
-  buttonEdge: ButtonEdge,
-};
-
-interface IProps {
-  drawerVisible: boolean;
-  hideDrawer(): void;
-  showLogSheet(): void;
-}
-
-function DataFlowCanvas({ drawerVisible, hideDrawer, showLogSheet }: IProps) {
-  const { t } = useTranslation();
-  const {
-    nodes,
-    edges,
-    onConnect: originalOnConnect,
-    onEdgesChange,
-    onNodesChange,
-    onSelectionChange,
-    onEdgeMouseEnter,
-    onEdgeMouseLeave,
-  } = useSelectCanvasData();
-  const isValidConnection = useValidateConnection();
-
-  const [reactFlowInstance, setReactFlowInstance] =
-    useState<ReactFlowInstance<any, any>>();
-
-  const {
-    onNodeClick,
-    clickedNode,
-    formDrawerVisible,
-    hideFormDrawer,
-    singleDebugDrawerVisible,
-    hideSingleDebugDrawer,
-    showSingleDebugDrawer,
-    chatVisible,
-    runVisible,
-    hideRunOrChatDrawer,
-    showFormDrawer,
-  } = useShowDrawer({
-    drawerVisible,
-    hideDrawer,
-  });
-
-  const { handleBeforeDelete } = useBeforeDelete();
-
-  const { addCanvasNode, addNoteNode } = useAddNode(reactFlowInstance);
-
-  const { ref, showImage, hideImage, imgVisible, mouse } = useMoveNote();
-
-  const { theme } = useTheme();
-
-  const isDarkTheme = useIsDarkTheme();
-
-  useHideFormSheetOnNodeDeletion({ hideFormDrawer });
-
-  const { visible, hideModal, showModal } = useSetModalState();
-
-  const [dropdownPosition, setDropdownPosition] = useState({ x: 0, y: 0 });
-
-  const isConnectedRef = useRef(false);
-  const connectionStartRef = useRef<{
-    nodeId: string;
-    handleId: string;
-  } | null>(null);
-
-  const preventCloseRef = useRef(false);
-
-  const { setActiveDropdown, clearActiveDropdown } = useDropdownManager();
-
-  const { hasChildNode } = useGraphStore((state) => state);
-
-  const onPaneClick = useCallback(() => {
-    hideFormDrawer();
-    if (visible && !preventCloseRef.current) {
-      hideModal();
-      clearActiveDropdown();
-    }
-    if (imgVisible) {
-      addNoteNode(mouse);
-      hideImage();
-    }
-  }, [
-    hideFormDrawer,
-    visible,
-    hideModal,
-    imgVisible,
-    addNoteNode,
-    mouse,
-    hideImage,
-    clearActiveDropdown,
-  ]);
-
-  const { run, loading: running } = useRunDataflow(
-    showLogSheet!,
-    hideRunOrChatDrawer,
-  );
-
-  const onConnect = (connection: Connection) => {
-    originalOnConnect(connection);
-    isConnectedRef.current = true;
-  };
-
-  const onConnectStart = (event: any, params: any) => {
-    isConnectedRef.current = false;
-
-    if (params && params.nodeId && params.handleId) {
-      connectionStartRef.current = {
-        nodeId: params.nodeId,
-        handleId: params.handleId,
-      };
-    } else {
-      connectionStartRef.current = null;
-    }
-  };
-
-  const onConnectEnd: OnConnectEnd = (event, connectionState) => {
-    const target = event.target as HTMLElement;
-    const nodeId = connectionState.fromNode?.id;
-
-    // Events triggered by Handle are directly interrupted
-    if (
-      target?.classList.contains('react-flow__handle') ||
-      (nodeId && hasChildNode(nodeId))
-    ) {
-      return;
-    }
-
-    if ('clientX' in event && 'clientY' in event) {
-      const { clientX, clientY } = event;
-      setDropdownPosition({ x: clientX, y: clientY });
-      if (!isConnectedRef.current) {
-        setActiveDropdown('drag');
-        showModal();
-        preventCloseRef.current = true;
-        setTimeout(() => {
-          preventCloseRef.current = false;
-        }, 300);
-      }
-    }
-  };
-
-  return (
-    <div className={cn(styles.canvasWrapper, 'px-5 pb-5')}>
-      <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>
-      <AgentInstanceContext.Provider value={{ addCanvasNode, showFormDrawer }}>
-        <ReactFlow
-          connectionMode={ConnectionMode.Loose}
-          nodes={nodes}
-          onNodesChange={onNodesChange}
-          edges={edges}
-          onEdgesChange={onEdgesChange}
-          fitView
-          onConnect={onConnect}
-          nodeTypes={nodeTypes}
-          edgeTypes={edgeTypes}
-          onConnectStart={onConnectStart}
-          onConnectEnd={onConnectEnd}
-          onNodeClick={onNodeClick}
-          onPaneClick={onPaneClick}
-          onInit={setReactFlowInstance}
-          onSelectionChange={onSelectionChange}
-          nodeOrigin={[0.5, 0]}
-          isValidConnection={isValidConnection}
-          onEdgeMouseEnter={onEdgeMouseEnter}
-          onEdgeMouseLeave={onEdgeMouseLeave}
-          className="h-full"
-          colorMode={theme}
-          defaultEdgeOptions={{
-            type: 'buttonEdge',
-            markerEnd: 'logo',
-            style: {
-              strokeWidth: 1,
-              stroke: isDarkTheme
-                ? 'rgba(91, 93, 106, 1)'
-                : 'rgba(151, 154, 171, 1)',
-            },
-            zIndex: 1001, // https://github.com/xyflow/xyflow/discussions/3498
-          }}
-          deleteKeyCode={['Delete', 'Backspace']}
-          onBeforeDelete={handleBeforeDelete}
-        >
-          <AgentBackground></AgentBackground>
-          <Spotlight className="z-0" opcity={0.7} coverage={70} />
-          <Controls position={'bottom-center'} orientation="horizontal">
-            <ControlButton>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <NotebookPen className="!fill-none" onClick={showImage} />
-                </TooltipTrigger>
-                <TooltipContent>{t('flow.note')}</TooltipContent>
-              </Tooltip>
-            </ControlButton>
-          </Controls>
-        </ReactFlow>
-        {visible && (
-          <HandleContext.Provider
-            value={{
-              nodeId: connectionStartRef.current?.nodeId || '',
-              id: connectionStartRef.current?.handleId || '',
-              type: 'source',
-              position: Position.Right,
-              isFromConnectionDrag: true,
-            }}
-          >
-            <NextStepDropdown
-              hideModal={() => {
-                hideModal();
-                clearActiveDropdown();
-              }}
-              position={dropdownPosition}
-              nodeId={connectionStartRef.current?.nodeId || ''}
-            >
-              <span></span>
-            </NextStepDropdown>
-          </HandleContext.Provider>
-        )}
-      </AgentInstanceContext.Provider>
-      <NotebookPen
-        className={cn('hidden absolute size-6', { block: imgVisible })}
-        ref={ref}
-      ></NotebookPen>
-      {formDrawerVisible && (
-        <AgentInstanceContext.Provider
-          value={{ addCanvasNode, showFormDrawer }}
-        >
-          <FormSheet
-            node={clickedNode}
-            visible={formDrawerVisible}
-            hideModal={hideFormDrawer}
-            chatVisible={chatVisible}
-            singleDebugDrawerVisible={singleDebugDrawerVisible}
-            hideSingleDebugDrawer={hideSingleDebugDrawer}
-            showSingleDebugDrawer={showSingleDebugDrawer}
-          ></FormSheet>
-        </AgentInstanceContext.Provider>
-      )}
-      {runVisible && (
-        <RunSheet
-          hideModal={hideRunOrChatDrawer}
-          run={run}
-          loading={running}
-        ></RunSheet>
-      )}
-    </div>
-  );
-}
-
-export default memo(DataFlowCanvas);
diff --git a/web/src/pages/data-flow/canvas/node/begin-node.tsx b/web/src/pages/data-flow/canvas/node/begin-node.tsx
deleted file mode 100644
index 88b8cd870..000000000
--- a/web/src/pages/data-flow/canvas/node/begin-node.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { IBeginNode } from '@/interfaces/database/flow';
-import { NodeProps, Position } from '@xyflow/react';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { NodeHandleId, Operator } from '../../constant';
-import OperatorIcon from '../../operator-icon';
-import { CommonHandle } from './handle';
-import { RightHandleStyle } from './handle-icon';
-import { NodeWrapper } from './node-wrapper';
-
-// TODO: do not allow other nodes to connect to this node
-function InnerBeginNode({ data, id, selected }: NodeProps<IBeginNode>) {
-  const { t } = useTranslation();
-
-  return (
-    <NodeWrapper selected={selected}>
-      <CommonHandle
-        type="source"
-        position={Position.Right}
-        isConnectable
-        style={RightHandleStyle}
-        nodeId={id}
-        id={NodeHandleId.Start}
-      ></CommonHandle>
-
-      <section className="flex items-center  gap-2">
-        <OperatorIcon name={data.label as Operator}></OperatorIcon>
-        <div className="truncate text-center font-semibold text-sm">
-          {t(`dataflow.begin`)}
-        </div>
-      </section>
-    </NodeWrapper>
-  );
-}
-
-export const BeginNode = memo(InnerBeginNode);
diff --git a/web/src/pages/data-flow/canvas/node/card.tsx b/web/src/pages/data-flow/canvas/node/card.tsx
deleted file mode 100644
index 7b2f39ba7..000000000
--- a/web/src/pages/data-flow/canvas/node/card.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { cn } from '@/lib/utils';
-import { PropsWithChildren } from 'react';
-
-type LabelCardProps = {
-  className?: string;
-} & PropsWithChildren;
-
-export function LabelCard({ children, className }: LabelCardProps) {
-  return (
-    <div className={cn('bg-bg-card rounded-sm p-1', className)}>{children}</div>
-  );
-}
diff --git a/web/src/pages/data-flow/canvas/node/dropdown/next-step-dropdown.tsx b/web/src/pages/data-flow/canvas/node/dropdown/next-step-dropdown.tsx
deleted file mode 100644
index 2e8c8c30f..000000000
--- a/web/src/pages/data-flow/canvas/node/dropdown/next-step-dropdown.tsx
+++ /dev/null
@@ -1,294 +0,0 @@
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@/components/ui/accordion';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
-import { IModalProps } from '@/interfaces/common';
-import { useGetNodeDescription, useGetNodeName } from '@/pages/data-flow/hooks';
-import useGraphStore from '@/pages/data-flow/store';
-import { Position } from '@xyflow/react';
-import { t } from 'i18next';
-import {
-  PropsWithChildren,
-  createContext,
-  memo,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-} from 'react';
-import { Operator } from '../../../constant';
-import { AgentInstanceContext, HandleContext } from '../../../context';
-import OperatorIcon from '../../../operator-icon';
-
-type OperatorItemProps = {
-  operators: Operator[];
-  isCustomDropdown?: boolean;
-  mousePosition?: { x: number; y: number };
-};
-
-const HideModalContext = createContext<IModalProps<any>['showModal']>(() => {});
-const OnNodeCreatedContext = createContext<
-  ((newNodeId: string) => void) | undefined
->(undefined);
-
-function OperatorItemList({
-  operators,
-  isCustomDropdown = false,
-  mousePosition,
-}: OperatorItemProps) {
-  const { addCanvasNode } = useContext(AgentInstanceContext);
-  const handleContext = useContext(HandleContext);
-  const hideModal = useContext(HideModalContext);
-  const onNodeCreated = useContext(OnNodeCreatedContext);
-
-  const getNodeName = useGetNodeName();
-  const getNodeDescription = useGetNodeDescription();
-
-  const handleClick =
-    (operator: Operator): React.MouseEventHandler<HTMLElement> =>
-    (e) => {
-      const contextData = handleContext || {
-        nodeId: '',
-        id: '',
-        type: 'source' as const,
-        position: Position.Right,
-        isFromConnectionDrag: true,
-      };
-
-      const mockEvent = mousePosition
-        ? {
-            clientX: mousePosition.x,
-            clientY: mousePosition.y,
-          }
-        : e;
-
-      const newNodeId = addCanvasNode(operator, contextData)(mockEvent);
-
-      if (onNodeCreated && newNodeId) {
-        onNodeCreated(newNodeId);
-      }
-
-      hideModal?.();
-    };
-
-  const renderOperatorItem = (operator: Operator) => {
-    const commonContent = (
-      <div className="hover:bg-background-card py-1 px-3 cursor-pointer rounded-sm flex gap-2 items-center justify-start">
-        <OperatorIcon name={operator} />
-        {getNodeName(operator)}
-      </div>
-    );
-
-    return (
-      <Tooltip key={operator}>
-        <TooltipTrigger asChild>
-          {isCustomDropdown ? (
-            <li onClick={handleClick(operator)}>{commonContent}</li>
-          ) : (
-            <DropdownMenuItem
-              key={operator}
-              className="hover:bg-background-card py-1 px-3 cursor-pointer rounded-sm flex gap-2 items-center justify-start"
-              onClick={handleClick(operator)}
-              onSelect={() => hideModal?.()}
-            >
-              <OperatorIcon name={operator} />
-              {getNodeName(operator)}
-            </DropdownMenuItem>
-          )}
-        </TooltipTrigger>
-        <TooltipContent side="right">
-          <p>{getNodeDescription(operator)}</p>
-        </TooltipContent>
-      </Tooltip>
-    );
-  };
-
-  return <ul className="space-y-2">{operators.map(renderOperatorItem)}</ul>;
-}
-
-// Limit the number of operators of a certain type on the canvas to only one
-function useRestrictSingleOperatorOnCanvas() {
-  const { findNodeByName } = useGraphStore((state) => state);
-
-  const restrictSingleOperatorOnCanvas = useCallback(
-    (singleOperators: Operator[]) => {
-      const list: Operator[] = [];
-      singleOperators.forEach((operator) => {
-        if (!findNodeByName(operator)) {
-          list.push(operator);
-        }
-      });
-      return list;
-    },
-    [findNodeByName],
-  );
-
-  return restrictSingleOperatorOnCanvas;
-}
-
-function AccordionOperators({
-  isCustomDropdown = false,
-  mousePosition,
-  nodeId,
-}: {
-  isCustomDropdown?: boolean;
-  mousePosition?: { x: number; y: number };
-  nodeId?: string;
-}) {
-  const restrictSingleOperatorOnCanvas = useRestrictSingleOperatorOnCanvas();
-  const { getOperatorTypeFromId } = useGraphStore((state) => state);
-
-  const operators = useMemo(() => {
-    let list = [
-      ...restrictSingleOperatorOnCanvas([Operator.Parser, Operator.Tokenizer]),
-    ];
-    list.push(Operator.Extractor);
-    return list;
-  }, [restrictSingleOperatorOnCanvas]);
-
-  const chunkerOperators = useMemo(() => {
-    return [
-      ...restrictSingleOperatorOnCanvas([
-        Operator.Splitter,
-        Operator.HierarchicalMerger,
-      ]),
-    ];
-  }, [restrictSingleOperatorOnCanvas]);
-
-  const showChunker = useMemo(() => {
-    return (
-      getOperatorTypeFromId(nodeId) !== Operator.Extractor &&
-      chunkerOperators.length > 0
-    );
-  }, [chunkerOperators.length, getOperatorTypeFromId, nodeId]);
-
-  return (
-    <>
-      <OperatorItemList
-        operators={operators}
-        isCustomDropdown={isCustomDropdown}
-        mousePosition={mousePosition}
-      ></OperatorItemList>
-      {showChunker && (
-        <Accordion
-          type="single"
-          collapsible
-          className="w-full px-4"
-          defaultValue="item-1"
-        >
-          <AccordionItem value="item-1">
-            <AccordionTrigger>Chunker</AccordionTrigger>
-            <AccordionContent className="flex flex-col gap-4 text-balance">
-              <OperatorItemList
-                operators={chunkerOperators}
-                isCustomDropdown={isCustomDropdown}
-                mousePosition={mousePosition}
-              ></OperatorItemList>
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      )}
-    </>
-  );
-}
-
-type NextStepDropdownProps = PropsWithChildren &
-  IModalProps<any> & {
-    position?: { x: number; y: number };
-    onNodeCreated?: (newNodeId: string) => void;
-    nodeId?: string;
-  };
-export function InnerNextStepDropdown({
-  children,
-  hideModal,
-  position,
-  onNodeCreated,
-  nodeId,
-}: NextStepDropdownProps) {
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (position && hideModal) {
-      const handleKeyDown = (event: KeyboardEvent) => {
-        if (event.key === 'Escape') {
-          hideModal();
-        }
-      };
-
-      document.addEventListener('keydown', handleKeyDown);
-
-      return () => {
-        document.removeEventListener('keydown', handleKeyDown);
-      };
-    }
-  }, [position, hideModal]);
-
-  if (position) {
-    return (
-      <div
-        ref={dropdownRef}
-        style={{
-          position: 'fixed',
-          left: position.x,
-          top: position.y + 10,
-          zIndex: 1000,
-        }}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="w-[300px] font-semibold bg-bg-base border border-border rounded-md shadow-lg">
-          <div className="px-3 py-2 border-b border-border">
-            <div className="text-sm font-medium">{t('flow.nextStep')}</div>
-          </div>
-          <HideModalContext.Provider value={hideModal}>
-            <OnNodeCreatedContext.Provider value={onNodeCreated}>
-              <AccordionOperators
-                isCustomDropdown={true}
-                mousePosition={position}
-                nodeId={nodeId}
-              ></AccordionOperators>
-            </OnNodeCreatedContext.Provider>
-          </HideModalContext.Provider>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <DropdownMenu
-      open={true}
-      onOpenChange={(open) => {
-        if (!open && hideModal) {
-          hideModal();
-        }
-      }}
-    >
-      <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
-      <DropdownMenuContent
-        onClick={(e) => e.stopPropagation()}
-        className="w-[300px] font-semibold"
-      >
-        <DropdownMenuLabel>{t('flow.nextStep')}</DropdownMenuLabel>
-        <HideModalContext.Provider value={hideModal}>
-          <AccordionOperators nodeId={nodeId}></AccordionOperators>
-        </HideModalContext.Provider>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-
-export const NextStepDropdown = memo(InnerNextStepDropdown);
diff --git a/web/src/pages/data-flow/canvas/node/extractor-node.tsx b/web/src/pages/data-flow/canvas/node/extractor-node.tsx
deleted file mode 100644
index 8b2e03483..000000000
--- a/web/src/pages/data-flow/canvas/node/extractor-node.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import LLMLabel from '@/components/llm-select/llm-label';
-import { IRagNode } from '@/interfaces/database/agent';
-import { NodeProps } from '@xyflow/react';
-import { get } from 'lodash';
-import { LabelCard } from './card';
-import { RagNode } from './index';
-
-export function ExtractorNode({ ...props }: NodeProps<IRagNode>) {
-  const { data } = props;
-
-  return (
-    <RagNode {...props}>
-      <LabelCard>
-        <LLMLabel value={get(data, 'form.llm_id')}></LLMLabel>
-      </LabelCard>
-    </RagNode>
-  );
-}
diff --git a/web/src/pages/data-flow/canvas/node/handle-icon.tsx b/web/src/pages/data-flow/canvas/node/handle-icon.tsx
deleted file mode 100644
index 36c7f3634..000000000
--- a/web/src/pages/data-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/data-flow/canvas/node/handle.tsx b/web/src/pages/data-flow/canvas/node/handle.tsx
deleted file mode 100644
index 17fe28390..000000000
--- a/web/src/pages/data-flow/canvas/node/handle.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { useSetModalState } from '@/hooks/common-hooks';
-import { cn } from '@/lib/utils';
-import { Handle, HandleProps } from '@xyflow/react';
-import { Plus } from 'lucide-react';
-import { useMemo } from 'react';
-import { HandleContext } from '../../context';
-import useGraphStore from '../../store';
-import { useDropdownManager } from '../context';
-import { NextStepDropdown } from './dropdown/next-step-dropdown';
-
-export function CommonHandle({
-  className,
-  nodeId,
-  ...props
-}: HandleProps & { nodeId: string }) {
-  const { visible, hideModal, showModal } = useSetModalState();
-
-  const { canShowDropdown, setActiveDropdown, clearActiveDropdown } =
-    useDropdownManager();
-
-  const { hasChildNode } = useGraphStore((state) => state);
-
-  const value = useMemo(
-    () => ({
-      nodeId,
-      id: props.id || undefined,
-      type: props.type,
-      position: props.position,
-      isFromConnectionDrag: false,
-    }),
-    [nodeId, props.id, props.position, props.type],
-  );
-
-  return (
-    <HandleContext.Provider value={value}>
-      <Handle
-        {...props}
-        className={cn(
-          'inline-flex justify-center items-center !bg-accent-primary !size-4 !rounded-sm !border-none ',
-          className,
-        )}
-        onClick={(e) => {
-          e.stopPropagation();
-
-          if (hasChildNode(nodeId)) {
-            return;
-          }
-
-          if (!canShowDropdown()) {
-            return;
-          }
-
-          setActiveDropdown('handle');
-          showModal();
-        }}
-      >
-        <Plus className="size-3 pointer-events-none text-text-title-invert" />
-        {visible && (
-          <NextStepDropdown
-            hideModal={() => {
-              hideModal();
-              clearActiveDropdown();
-            }}
-            nodeId={nodeId}
-          >
-            <span></span>
-          </NextStepDropdown>
-        )}
-      </Handle>
-    </HandleContext.Provider>
-  );
-}
diff --git a/web/src/pages/data-flow/canvas/node/index.less b/web/src/pages/data-flow/canvas/node/index.less
deleted file mode 100644
index 14d7e6077..000000000
--- a/web/src/pages/data-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/data-flow/canvas/node/index.tsx b/web/src/pages/data-flow/canvas/node/index.tsx
deleted file mode 100644
index 4e004aa83..000000000
--- a/web/src/pages/data-flow/canvas/node/index.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { IRagNode } from '@/interfaces/database/flow';
-import { NodeProps, Position } from '@xyflow/react';
-import { PropsWithChildren, memo, useMemo } from 'react';
-import { NodeHandleId, SingleOperators } from '../../constant';
-import useGraphStore from '../../store';
-import { CommonHandle } from './handle';
-import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
-import NodeHeader from './node-header';
-import { NodeWrapper } from './node-wrapper';
-import { ToolBar } from './toolbar';
-
-type RagNodeProps = NodeProps<IRagNode> & PropsWithChildren;
-function InnerRagNode({
-  id,
-  data,
-  isConnectable = true,
-  selected,
-  children,
-}: RagNodeProps) {
-  const getOperatorTypeFromId = useGraphStore(
-    (state) => state.getOperatorTypeFromId,
-  );
-
-  const showCopy = useMemo(() => {
-    const operatorName = getOperatorTypeFromId(id);
-    return SingleOperators.every((x) => x !== operatorName);
-  }, [getOperatorTypeFromId, id]);
-
-  return (
-    <ToolBar selected={selected} id={id} label={data.label} showCopy={showCopy}>
-      <NodeWrapper selected={selected}>
-        <CommonHandle
-          id={NodeHandleId.End}
-          type="target"
-          position={Position.Left}
-          isConnectable={isConnectable}
-          style={LeftHandleStyle}
-          nodeId={id}
-        ></CommonHandle>
-        <CommonHandle
-          type="source"
-          position={Position.Right}
-          isConnectable={isConnectable}
-          id={NodeHandleId.Start}
-          style={RightHandleStyle}
-          nodeId={id}
-          isConnectableEnd={false}
-        ></CommonHandle>
-        <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
-        {children}
-      </NodeWrapper>
-    </ToolBar>
-  );
-}
-
-export const RagNode = memo(InnerRagNode);
diff --git a/web/src/pages/data-flow/canvas/node/node-header.tsx b/web/src/pages/data-flow/canvas/node/node-header.tsx
deleted file mode 100644
index a030e3a11..000000000
--- a/web/src/pages/data-flow/canvas/node/node-header.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { cn } from '@/lib/utils';
-import { memo } from 'react';
-import { Operator } from '../../constant';
-import OperatorIcon from '../../operator-icon';
-interface IProps {
-  id: string;
-  label: string;
-  name: string;
-  gap?: number;
-  className?: string;
-  wrapperClassName?: string;
-  icon?: React.ReactNode;
-}
-
-const InnerNodeHeader = ({
-  label,
-  name,
-  className,
-  wrapperClassName,
-  icon,
-}: IProps) => {
-  return (
-    <section className={cn(wrapperClassName, 'pb-4')}>
-      <div className={cn(className, 'flex gap-2.5')}>
-        {icon || <OperatorIcon name={label as Operator}></OperatorIcon>}
-        <span className="truncate text-center font-semibold text-sm">
-          {name}
-        </span>
-      </div>
-    </section>
-  );
-};
-
-const NodeHeader = memo(InnerNodeHeader);
-
-export default NodeHeader;
diff --git a/web/src/pages/data-flow/canvas/node/node-wrapper.tsx b/web/src/pages/data-flow/canvas/node/node-wrapper.tsx
deleted file mode 100644
index ab53466ff..000000000
--- a/web/src/pages/data-flow/canvas/node/node-wrapper.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { cn } from '@/lib/utils';
-import { HTMLAttributes } from 'react';
-
-type IProps = HTMLAttributes<HTMLDivElement> & { selected?: boolean };
-
-export function NodeWrapper({ children, className, selected }: IProps) {
-  return (
-    <section
-      className={cn(
-        'bg-text-title-invert p-2.5 rounded-sm w-[200px] text-xs',
-        { 'border border-accent-primary': selected },
-        className,
-      )}
-    >
-      {children}
-    </section>
-  );
-}
diff --git a/web/src/pages/data-flow/canvas/node/note-node/index.tsx b/web/src/pages/data-flow/canvas/node/note-node/index.tsx
deleted file mode 100644
index 729fd4bc2..000000000
--- a/web/src/pages/data-flow/canvas/node/note-node/index.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { INoteNode } from '@/interfaces/database/flow';
-import BaseNoteNode from '@/pages/agent/canvas/node/note-node';
-import { NodeProps } from '@xyflow/react';
-import { memo } from 'react';
-import { useWatchFormChange, useWatchNameFormChange } from './use-watch-change';
-
-function NoteNode({ ...props }: NodeProps<INoteNode>) {
-  return (
-    <BaseNoteNode
-      {...props}
-      useWatchNoteFormChange={useWatchFormChange}
-      useWatchNoteNameFormChange={useWatchNameFormChange}
-    ></BaseNoteNode>
-  );
-}
-
-export default memo(NoteNode);
diff --git a/web/src/pages/data-flow/canvas/node/note-node/use-watch-change.ts b/web/src/pages/data-flow/canvas/node/note-node/use-watch-change.ts
deleted file mode 100644
index 504d9d64b..000000000
--- a/web/src/pages/data-flow/canvas/node/note-node/use-watch-change.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import useGraphStore from '@/pages/data-flow/store';
-import { useEffect } from 'react';
-import { UseFormReturn, useWatch } from 'react-hook-form';
-
-export function useWatchFormChange(id?: string, form?: UseFormReturn<any>) {
-  let values = useWatch({ control: form?.control });
-  const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
-
-  useEffect(() => {
-    // Manually triggered form updates are synchronized to the canvas
-    if (id) {
-      values = form?.getValues() || {};
-      let nextValues: any = values;
-
-      updateNodeForm(id, nextValues);
-    }
-  }, [id, updateNodeForm, values]);
-}
-
-export function useWatchNameFormChange(id?: string, form?: UseFormReturn<any>) {
-  let values = useWatch({ control: form?.control });
-  const updateNodeName = useGraphStore((state) => state.updateNodeName);
-
-  useEffect(() => {
-    // Manually triggered form updates are synchronized to the canvas
-    if (id) {
-      updateNodeName(id, values.name);
-    }
-  }, [id, updateNodeName, values]);
-}
diff --git a/web/src/pages/data-flow/canvas/node/parser-node.tsx b/web/src/pages/data-flow/canvas/node/parser-node.tsx
deleted file mode 100644
index 15539d0b8..000000000
--- a/web/src/pages/data-flow/canvas/node/parser-node.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { NodeCollapsible } from '@/components/collapse';
-import { BaseNode } from '@/interfaces/database/agent';
-import { NodeProps, Position } from '@xyflow/react';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { NodeHandleId } from '../../constant';
-import { ParserFormSchemaType } from '../../form/parser-form';
-import { LabelCard } from './card';
-import { CommonHandle } from './handle';
-import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
-import NodeHeader from './node-header';
-import { NodeWrapper } from './node-wrapper';
-
-function ParserNode({
-  id,
-  data,
-  isConnectable = true,
-  selected,
-}: NodeProps<BaseNode<ParserFormSchemaType>>) {
-  const { t } = useTranslation();
-  return (
-    <NodeWrapper selected={selected}>
-      <CommonHandle
-        id={NodeHandleId.End}
-        type="target"
-        position={Position.Left}
-        isConnectable={isConnectable}
-        style={LeftHandleStyle}
-        nodeId={id}
-      ></CommonHandle>
-      <CommonHandle
-        type="source"
-        position={Position.Right}
-        isConnectable={isConnectable}
-        id={NodeHandleId.Start}
-        style={RightHandleStyle}
-        nodeId={id}
-        isConnectableEnd={false}
-      ></CommonHandle>
-      <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
-
-      <NodeCollapsible items={data.form?.setups}>
-        {(x, idx) => (
-          <LabelCard
-            key={idx}
-            className="flex flex-col text-text-primary gap-1"
-          >
-            <span className="text-text-secondary">Parser {idx + 1}</span>
-            {t(`dataflow.fileFormatOptions.${x.fileFormat}`)}
-          </LabelCard>
-        )}
-      </NodeCollapsible>
-    </NodeWrapper>
-  );
-}
-
-export default memo(ParserNode);
diff --git a/web/src/pages/data-flow/canvas/node/resize-icon.tsx b/web/src/pages/data-flow/canvas/node/resize-icon.tsx
deleted file mode 100644
index e01188924..000000000
--- a/web/src/pages/data-flow/canvas/node/resize-icon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-export function ResizeIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="rgba(76, 164, 231, 1)"
-      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>
-  );
-}
-
-export const controlStyle = {
-  background: 'transparent',
-  border: 'none',
-  cursor: 'nwse-resize',
-};
diff --git a/web/src/pages/data-flow/canvas/node/splitter-node.tsx b/web/src/pages/data-flow/canvas/node/splitter-node.tsx
deleted file mode 100644
index c6a486719..000000000
--- a/web/src/pages/data-flow/canvas/node/splitter-node.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { IRagNode } from '@/interfaces/database/flow';
-import { NodeProps, Position } from '@xyflow/react';
-import { PropsWithChildren, memo } from 'react';
-import { NodeHandleId, Operator } from '../../constant';
-import OperatorIcon from '../../operator-icon';
-import { LabelCard } from './card';
-import { CommonHandle } from './handle';
-import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
-import NodeHeader from './node-header';
-import { NodeWrapper } from './node-wrapper';
-import { ToolBar } from './toolbar';
-
-type RagNodeProps = NodeProps<IRagNode> & PropsWithChildren;
-function InnerSplitterNode({
-  id,
-  data,
-  isConnectable = true,
-  selected,
-}: RagNodeProps) {
-  return (
-    <ToolBar selected={selected} id={id} label={data.label} showCopy={false}>
-      <NodeWrapper selected={selected}>
-        <CommonHandle
-          id={NodeHandleId.End}
-          type="target"
-          position={Position.Left}
-          isConnectable={isConnectable}
-          style={LeftHandleStyle}
-          nodeId={id}
-        ></CommonHandle>
-        <CommonHandle
-          type="source"
-          position={Position.Right}
-          isConnectable={isConnectable}
-          id={NodeHandleId.Start}
-          style={RightHandleStyle}
-          nodeId={id}
-          isConnectableEnd={false}
-        ></CommonHandle>
-        <NodeHeader
-          id={id}
-          name={'Chunker'}
-          label={data.label}
-          icon={<OperatorIcon name={Operator.Splitter}></OperatorIcon>}
-        ></NodeHeader>
-        <LabelCard>{data.name}</LabelCard>
-      </NodeWrapper>
-    </ToolBar>
-  );
-}
-
-export const SplitterNode = memo(InnerSplitterNode);
diff --git a/web/src/pages/data-flow/canvas/node/tokenizer-node.tsx b/web/src/pages/data-flow/canvas/node/tokenizer-node.tsx
deleted file mode 100644
index 20b261bf4..000000000
--- a/web/src/pages/data-flow/canvas/node/tokenizer-node.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { BaseNode } from '@/interfaces/database/agent';
-import { NodeProps, Position } from '@xyflow/react';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { NodeHandleId } from '../../constant';
-import { TokenizerFormSchemaType } from '../../form/tokenizer-form';
-import { LabelCard } from './card';
-import { CommonHandle } from './handle';
-import { LeftHandleStyle } from './handle-icon';
-import NodeHeader from './node-header';
-import { NodeWrapper } from './node-wrapper';
-import { ToolBar } from './toolbar';
-
-function TokenizerNode({
-  id,
-  data,
-  isConnectable = true,
-  selected,
-}: NodeProps<BaseNode<TokenizerFormSchemaType>>) {
-  const { t } = useTranslation();
-
-  return (
-    <ToolBar
-      selected={selected}
-      id={id}
-      label={data.label}
-      showRun={false}
-      showCopy={false}
-    >
-      <NodeWrapper selected={selected}>
-        <CommonHandle
-          id={NodeHandleId.End}
-          type="target"
-          position={Position.Left}
-          isConnectable={isConnectable}
-          style={LeftHandleStyle}
-          nodeId={id}
-        ></CommonHandle>
-        <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
-        <LabelCard className="text-text-primary flex justify-between flex-col gap-1">
-          <span className="text-text-secondary">
-            {t('dataflow.searchMethod')}
-          </span>
-          <ul className="space-y-1">
-            {data.form?.search_method.map((x) => (
-              <li key={x}>{t(`dataflow.tokenizerSearchMethodOptions.${x}`)}</li>
-            ))}
-          </ul>
-        </LabelCard>
-      </NodeWrapper>
-    </ToolBar>
-  );
-}
-
-export default memo(TokenizerNode);
diff --git a/web/src/pages/data-flow/canvas/node/toolbar.tsx b/web/src/pages/data-flow/canvas/node/toolbar.tsx
deleted file mode 100644
index 58b8261e4..000000000
--- a/web/src/pages/data-flow/canvas/node/toolbar.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import {
-  TooltipContent,
-  TooltipNode,
-  TooltipTrigger,
-} from '@/components/xyflow/tooltip-node';
-import { Position } from '@xyflow/react';
-import { Copy, Play, Trash2 } from 'lucide-react';
-import {
-  HTMLAttributes,
-  MouseEventHandler,
-  PropsWithChildren,
-  useCallback,
-} from 'react';
-import { useDuplicateNode } from '../../hooks';
-import useGraphStore from '../../store';
-
-function IconWrapper({ children, ...props }: HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div className="p-1.5 bg-text-title rounded-sm cursor-pointer" {...props}>
-      {children}
-    </div>
-  );
-}
-
-type ToolBarProps = {
-  selected?: boolean | undefined;
-  label: string;
-  id: string;
-  showRun?: boolean;
-  showCopy?: boolean;
-} & PropsWithChildren;
-
-export function ToolBar({
-  selected,
-  children,
-  label,
-  id,
-  showRun = false,
-  showCopy = true,
-}: ToolBarProps) {
-  const deleteNodeById = useGraphStore((store) => store.deleteNodeById);
-
-  const deleteNode: MouseEventHandler<HTMLDivElement> = useCallback(
-    (e) => {
-      e.stopPropagation();
-      deleteNodeById(id);
-    },
-    [deleteNodeById, id],
-  );
-
-  const duplicateNode = useDuplicateNode();
-
-  const handleDuplicate: MouseEventHandler<HTMLDivElement> = useCallback(
-    (e) => {
-      e.stopPropagation();
-      duplicateNode(id, label);
-    },
-    [duplicateNode, id, label],
-  );
-
-  return (
-    <TooltipNode selected={selected}>
-      <TooltipTrigger>{children}</TooltipTrigger>
-
-      <TooltipContent position={Position.Top}>
-        <section className="flex gap-2 items-center">
-          {showRun && (
-            <IconWrapper>
-              <Play className="size-3.5" data-play />
-            </IconWrapper>
-          )}
-          {showCopy && (
-            <IconWrapper onClick={handleDuplicate}>
-              <Copy className="size-3.5" />
-            </IconWrapper>
-          )}
-
-          <IconWrapper onClick={deleteNode}>
-            <Trash2 className="size-3.5" />
-          </IconWrapper>
-        </section>
-      </TooltipContent>
-    </TooltipNode>
-  );
-}
diff --git a/web/src/pages/data-flow/constant.tsx b/web/src/pages/data-flow/constant.tsx
deleted file mode 100644
index e586cc1ec..000000000
--- a/web/src/pages/data-flow/constant.tsx
+++ /dev/null
@@ -1,324 +0,0 @@
-import { ParseDocumentType } from '@/components/layout-recognize-form-field';
-import {
-  initialLlmBaseValues,
-  DataflowOperator as Operator,
-} from '@/constants/agent';
-export { DataflowOperator as Operator } from '@/constants/agent';
-
-export enum FileType {
-  PDF = 'pdf',
-  Spreadsheet = 'spreadsheet',
-  Image = 'image',
-  Email = 'email',
-  TextMarkdown = 'text&markdown',
-  Docx = 'word',
-  PowerPoint = 'slides',
-  Video = 'video',
-  Audio = 'audio',
-}
-
-export enum PdfOutputFormat {
-  Json = 'json',
-  Markdown = 'markdown',
-}
-
-export enum SpreadsheetOutputFormat {
-  Json = 'json',
-  Html = 'html',
-}
-
-export enum ImageOutputFormat {
-  Text = 'text',
-}
-
-export enum EmailOutputFormat {
-  Json = 'json',
-  Text = 'text',
-}
-
-export enum TextMarkdownOutputFormat {
-  Text = 'text',
-}
-
-export enum DocxOutputFormat {
-  Markdown = 'markdown',
-  Json = 'json',
-}
-
-export enum PptOutputFormat {
-  Json = 'json',
-}
-
-export enum VideoOutputFormat {
-  Json = 'json',
-}
-
-export enum AudioOutputFormat {
-  Text = 'text',
-}
-
-export const OutputFormatMap = {
-  [FileType.PDF]: PdfOutputFormat,
-  [FileType.Spreadsheet]: SpreadsheetOutputFormat,
-  [FileType.Image]: ImageOutputFormat,
-  [FileType.Email]: EmailOutputFormat,
-  [FileType.TextMarkdown]: TextMarkdownOutputFormat,
-  [FileType.Docx]: DocxOutputFormat,
-  [FileType.PowerPoint]: PptOutputFormat,
-  [FileType.Video]: VideoOutputFormat,
-  [FileType.Audio]: AudioOutputFormat,
-};
-
-export const InitialOutputFormatMap = {
-  [FileType.PDF]: PdfOutputFormat.Json,
-  [FileType.Spreadsheet]: SpreadsheetOutputFormat.Html,
-  [FileType.Image]: ImageOutputFormat.Text,
-  [FileType.Email]: EmailOutputFormat.Text,
-  [FileType.TextMarkdown]: TextMarkdownOutputFormat.Text,
-  [FileType.Docx]: DocxOutputFormat.Json,
-  [FileType.PowerPoint]: PptOutputFormat.Json,
-  [FileType.Video]: VideoOutputFormat.Json,
-  [FileType.Audio]: AudioOutputFormat.Text,
-};
-
-export enum ContextGeneratorFieldName {
-  Summary = 'summary',
-  Keywords = 'keywords',
-  Questions = 'questions',
-  Metadata = 'metadata',
-}
-
-export const BeginId = 'File';
-
-export const SwitchElseTo = 'end_cpn_ids';
-
-export enum TokenizerSearchMethod {
-  Embedding = 'embedding',
-  FullText = 'full_text',
-}
-
-export enum ImageParseMethod {
-  OCR = 'ocr',
-}
-
-export enum TokenizerFields {
-  Text = 'text',
-  Questions = 'questions',
-  Summary = 'summary',
-}
-
-export enum ParserFields {
-  From = 'from',
-  To = 'to',
-  Cc = 'cc',
-  Bcc = 'bcc',
-  Date = 'date',
-  Subject = 'subject',
-  Body = 'body',
-  Attachments = 'attachments',
-}
-
-export const initialBeginValues = {
-  outputs: {
-    name: {
-      type: 'string',
-      value: '',
-    },
-    file: {
-      type: 'Object',
-      value: {},
-    },
-  },
-};
-
-export const initialNoteValues = {
-  text: '',
-};
-
-export const initialTokenizerValues = {
-  search_method: [
-    TokenizerSearchMethod.Embedding,
-    TokenizerSearchMethod.FullText,
-  ],
-  filename_embd_weight: 0.1,
-  fields: TokenizerFields.Text,
-  outputs: {},
-};
-
-export enum StringTransformMethod {
-  Merge = 'merge',
-  Split = 'split',
-}
-
-export enum StringTransformDelimiter {
-  Comma = ',',
-  Semicolon = ';',
-  Period = '.',
-  LineBreak = '\n',
-  Tab = '\t',
-  Space = ' ',
-}
-
-export const initialParserValues = {
-  outputs: {
-    markdown: { type: 'string', value: '' },
-    text: { type: 'string', value: '' },
-    html: { type: 'string', value: '' },
-    json: { type: 'Array<object>', value: [] },
-  },
-  setups: [
-    {
-      fileFormat: FileType.PDF,
-      output_format: PdfOutputFormat.Json,
-      parse_method: ParseDocumentType.DeepDOC,
-    },
-    {
-      fileFormat: FileType.Spreadsheet,
-      output_format: SpreadsheetOutputFormat.Html,
-    },
-    {
-      fileFormat: FileType.Image,
-      output_format: ImageOutputFormat.Text,
-      parse_method: ImageParseMethod.OCR,
-      system_prompt: '',
-    },
-    {
-      fileFormat: FileType.Email,
-      fields: Object.values(ParserFields),
-      output_format: EmailOutputFormat.Text,
-    },
-    {
-      fileFormat: FileType.TextMarkdown,
-      output_format: TextMarkdownOutputFormat.Text,
-    },
-    {
-      fileFormat: FileType.Docx,
-      output_format: DocxOutputFormat.Json,
-    },
-    {
-      fileFormat: FileType.PowerPoint,
-      output_format: PptOutputFormat.Json,
-    },
-  ],
-};
-
-export const initialSplitterValues = {
-  outputs: {
-    chunks: { type: 'Array<Object>', value: [] },
-  },
-  chunk_token_size: 512,
-  overlapped_percent: 0,
-  delimiters: [{ value: '\n' }],
-};
-
-export enum Hierarchy {
-  H1 = '1',
-  H2 = '2',
-  H3 = '3',
-  H4 = '4',
-  H5 = '5',
-}
-
-export const initialHierarchicalMergerValues = {
-  outputs: {
-    chunks: { type: 'Array<Object>', value: [] },
-  },
-  hierarchy: Hierarchy.H3,
-  levels: [
-    { expressions: [{ expression: '^#[^#]' }] },
-    { expressions: [{ expression: '^##[^#]' }] },
-    { expressions: [{ expression: '^###[^#]' }] },
-    { expressions: [{ expression: '^####[^#]' }] },
-  ],
-};
-
-export const initialExtractorValues = {
-  ...initialLlmBaseValues,
-  field_name: ContextGeneratorFieldName.Summary,
-  outputs: {
-    chunks: { type: 'Array<Object>', value: [] },
-  },
-};
-
-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: Record<Operator, Operator[]> = {
-  [Operator.Begin]: [] as Operator[],
-  [Operator.Parser]: [Operator.Begin],
-  [Operator.Splitter]: [Operator.Begin],
-  [Operator.HierarchicalMerger]: [Operator.Begin],
-  [Operator.Tokenizer]: [Operator.Begin],
-  [Operator.Extractor]: [Operator.Begin],
-  [Operator.Note]: [Operator.Begin],
-};
-
-export const NodeMap = {
-  [Operator.Begin]: 'beginNode',
-  [Operator.Note]: 'noteNode',
-  [Operator.Parser]: 'parserNode',
-  [Operator.Tokenizer]: 'tokenizerNode',
-  [Operator.Splitter]: 'splitterNode',
-  [Operator.HierarchicalMerger]: 'splitterNode',
-  [Operator.Extractor]: 'contextNode',
-};
-
-export const NoDebugOperatorsList = [Operator.Begin];
-
-export enum NodeHandleId {
-  Start = 'start',
-  End = 'end',
-  Tool = 'tool',
-  AgentTop = 'agentTop',
-  AgentBottom = 'agentBottom',
-  AgentException = 'agentException',
-}
-
-export const FileTypeSuffixMap = {
-  [FileType.PDF]: ['pdf'],
-  [FileType.Spreadsheet]: ['xls', 'xlsx', 'csv'],
-  [FileType.Image]: ['jpg', 'jpeg', 'png', 'gif'],
-  [FileType.Email]: ['eml', 'msg'],
-  [FileType.TextMarkdown]: ['md', 'markdown', 'mdx', 'txt'],
-  [FileType.Docx]: ['doc', 'docx'],
-  [FileType.PowerPoint]: ['pptx'],
-  [FileType.Video]: [],
-  [FileType.Audio]: [
-    'da',
-    'wave',
-    'wav',
-    'mp3',
-    'aac',
-    'flac',
-    'ogg',
-    'aiff',
-    'au',
-    'midi',
-    'wma',
-    'realaudio',
-    'vqf',
-    'oggvorbis',
-    'ape',
-  ],
-};
-
-export const SingleOperators = [
-  Operator.Tokenizer,
-  Operator.Splitter,
-  Operator.HierarchicalMerger,
-  Operator.Parser,
-];
diff --git a/web/src/pages/data-flow/context.ts b/web/src/pages/data-flow/context.ts
deleted file mode 100644
index e1b20b0df..000000000
--- a/web/src/pages/data-flow/context.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { RAGFlowNodeType } from '@/interfaces/database/flow';
-import { HandleType, Position } from '@xyflow/react';
-import { createContext } from 'react';
-import { useAddNode } from './hooks/use-add-node';
-import { useShowFormDrawer } from './hooks/use-show-drawer';
-
-export const AgentFormContext = createContext<RAGFlowNodeType | undefined>(
-  undefined,
-);
-
-type AgentInstanceContextType = Pick<
-  ReturnType<typeof useAddNode>,
-  'addCanvasNode'
-> &
-  Pick<ReturnType<typeof useShowFormDrawer>, 'showFormDrawer'>;
-
-export const AgentInstanceContext = createContext<AgentInstanceContextType>(
-  {} as AgentInstanceContextType,
-);
-
-export type HandleContextType = {
-  nodeId?: string;
-  id?: string;
-  type: HandleType;
-  position: Position;
-  isFromConnectionDrag: boolean;
-};
-
-export const HandleContext = createContext<HandleContextType>(
-  {} as HandleContextType,
-);
-
-export type LogContextType = {
-  messageId: string;
-  setMessageId: (messageId: string) => void;
-  setUploadedFileData: (data: Record<string, any>) => void;
-};
-
-export const LogContext = createContext<LogContextType>({} as LogContextType);
diff --git a/web/src/pages/data-flow/flow-tooltip.tsx b/web/src/pages/data-flow/flow-tooltip.tsx
deleted file mode 100644
index 9386dd06b..000000000
--- a/web/src/pages/data-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/data-flow/form-sheet/form-config-map.tsx b/web/src/pages/data-flow/form-sheet/form-config-map.tsx
deleted file mode 100644
index d868ab02f..000000000
--- a/web/src/pages/data-flow/form-sheet/form-config-map.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Operator } from '../constant';
-import ExtractorForm from '../form/extractor-form';
-import HierarchicalMergerForm from '../form/hierarchical-merger-form';
-import ParserForm from '../form/parser-form';
-import SplitterForm from '../form/splitter-form';
-import TokenizerForm from '../form/tokenizer-form';
-
-export const FormConfigMap = {
-  [Operator.Begin]: {
-    component: () => <></>,
-  },
-  [Operator.Note]: {
-    component: () => <></>,
-  },
-  [Operator.Parser]: {
-    component: ParserForm,
-  },
-  [Operator.Tokenizer]: {
-    component: TokenizerForm,
-  },
-  [Operator.Splitter]: {
-    component: SplitterForm,
-  },
-  [Operator.HierarchicalMerger]: {
-    component: HierarchicalMergerForm,
-  },
-  [Operator.Extractor]: {
-    component: ExtractorForm,
-  },
-};
diff --git a/web/src/pages/data-flow/form-sheet/next.tsx b/web/src/pages/data-flow/form-sheet/next.tsx
deleted file mode 100644
index a5c819a31..000000000
--- a/web/src/pages/data-flow/form-sheet/next.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { Input } from '@/components/ui/input';
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { IModalProps } from '@/interfaces/common';
-import { RAGFlowNodeType } from '@/interfaces/database/flow';
-import { cn } from '@/lib/utils';
-import { X } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-import { BeginId, Operator } from '../constant';
-import { AgentFormContext } from '../context';
-import { useHandleNodeNameChange } from '../hooks/use-change-node-name';
-import OperatorIcon from '../operator-icon';
-import { FormConfigMap } from './form-config-map';
-
-interface IProps {
-  node?: RAGFlowNodeType;
-  singleDebugDrawerVisible: IModalProps<any>['visible'];
-  hideSingleDebugDrawer: IModalProps<any>['hideModal'];
-  showSingleDebugDrawer: IModalProps<any>['showModal'];
-  chatVisible: boolean;
-}
-
-const EmptyContent = () => <div></div>;
-
-const FormSheet = ({
-  visible,
-  hideModal,
-  node,
-  chatVisible,
-}: IModalProps<any> & IProps) => {
-  const operatorName: Operator = node?.data.label as Operator;
-  // const clickedToolId = useGraphStore((state) => state.clickedToolId);
-
-  const currentFormMap = FormConfigMap[operatorName];
-
-  const OperatorForm = currentFormMap?.component ?? EmptyContent;
-
-  const { name, handleNameBlur, handleNameChange } = useHandleNodeNameChange({
-    id: node?.id,
-    data: node?.data,
-  });
-
-  const { t } = useTranslation();
-
-  return (
-    <Sheet open={visible} modal={false}>
-      <SheetContent
-        className={cn('top-20 p-0 flex flex-col pb-20 ', {
-          'right-[620px]': chatVisible,
-        })}
-        closeIcon={false}
-      >
-        <SheetHeader>
-          <SheetTitle className="hidden"></SheetTitle>
-          <section className="flex-col border-b py-2 px-5">
-            <div className="flex items-center gap-2 pb-3">
-              <OperatorIcon
-                name={
-                  operatorName === Operator.HierarchicalMerger
-                    ? Operator.Splitter
-                    : operatorName
-                }
-              ></OperatorIcon>
-              <div className="flex items-center gap-1 flex-1">
-                <label htmlFor="">{t('flow.title')}</label>
-                {node?.id === BeginId ? (
-                  <span>{t(BeginId)}</span>
-                ) : (
-                  <Input
-                    value={name}
-                    onBlur={handleNameBlur}
-                    onChange={handleNameChange}
-                  ></Input>
-                )}
-              </div>
-              {/* {needsSingleStepDebugging(operatorName) && (
-                <RunTooltip>
-                  <Play
-                    className="size-5 cursor-pointer"
-                    onClick={showSingleDebugDrawer}
-                  />
-                </RunTooltip>
-              )} */}
-              <X onClick={hideModal} />
-            </div>
-          </section>
-        </SheetHeader>
-        <section className="pt-4 overflow-auto flex-1">
-          {visible && (
-            <AgentFormContext.Provider value={node}>
-              <OperatorForm node={node} key={node?.id}></OperatorForm>
-            </AgentFormContext.Provider>
-          )}
-        </section>
-      </SheetContent>
-    </Sheet>
-  );
-};
-
-export default FormSheet;
diff --git a/web/src/pages/data-flow/form/components/form-wrapper.tsx b/web/src/pages/data-flow/form/components/form-wrapper.tsx
deleted file mode 100644
index d1985b18e..000000000
--- a/web/src/pages/data-flow/form/components/form-wrapper.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-type FormProps = React.ComponentProps<'form'>;
-
-export function FormWrapper({ children, ...props }: FormProps) {
-  return (
-    <form
-      className="space-y-6 p-4"
-      autoComplete="off"
-      onSubmit={(e) => {
-        e.preventDefault();
-      }}
-      {...props}
-    >
-      {children}
-    </form>
-  );
-}
diff --git a/web/src/pages/data-flow/form/components/index.less b/web/src/pages/data-flow/form/components/index.less
deleted file mode 100644
index 344514d9e..000000000
--- a/web/src/pages/data-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/data-flow/form/components/output.tsx b/web/src/pages/data-flow/form/components/output.tsx
deleted file mode 100644
index c481c7a38..000000000
--- a/web/src/pages/data-flow/form/components/output.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { t } from 'i18next';
-
-export type OutputType = {
-  title: string;
-  type?: string;
-};
-
-type OutputProps = {
-  list: Array<OutputType>;
-};
-
-export function transferOutputs(outputs: Record<string, any>) {
-  return Object.entries(outputs).map(([key, value]) => ({
-    title: key,
-    type: value?.type,
-  }));
-}
-
-export function Output({ list }: OutputProps) {
-  return (
-    <section className="space-y-2">
-      <div>{t('flow.output')}</div>
-      <ul>
-        {list.map((x, idx) => (
-          <li
-            key={idx}
-            className="bg-background-highlight text-accent-primary rounded-sm px-2 py-1"
-          >
-            {x.title}: <span className="text-text-secondary">{x.type}</span>
-          </li>
-        ))}
-      </ul>
-    </section>
-  );
-}
diff --git a/web/src/pages/data-flow/form/extractor-form/index.tsx b/web/src/pages/data-flow/form/extractor-form/index.tsx
deleted file mode 100644
index ddc0b8bdd..000000000
--- a/web/src/pages/data-flow/form/extractor-form/index.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { ConfirmDeleteDialog } from '@/components/confirm-delete-dialog';
-import { LargeModelFormField } from '@/components/large-model-form-field';
-import { LlmSettingSchema } from '@/components/llm-setting-items/next';
-import { SelectWithSearch } from '@/components/originui/select-with-search';
-import { RAGFlowFormItem } from '@/components/ragflow-form';
-import { Form } from '@/components/ui/form';
-import { PromptEditor } from '@/pages/agent/form/components/prompt-editor';
-import { buildOptions } from '@/utils/form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { memo } from 'react';
-import { useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { z } from 'zod';
-import {
-  ContextGeneratorFieldName,
-  initialExtractorValues,
-} from '../../constant';
-import { useBuildNodeOutputOptions } from '../../hooks/use-build-options';
-import { useFormValues } from '../../hooks/use-form-values';
-import { useWatchFormChange } from '../../hooks/use-watch-form-change';
-import { INextOperatorForm } from '../../interface';
-import { buildOutputList } from '../../utils/build-output-list';
-import { FormWrapper } from '../components/form-wrapper';
-import { Output } from '../components/output';
-import { useSwitchPrompt } from './use-switch-prompt';
-
-export const FormSchema = z.object({
-  field_name: z.string(),
-  sys_prompt: z.string(),
-  prompts: z.string().optional(),
-  ...LlmSettingSchema,
-});
-
-export type ExtractorFormSchemaType = z.infer<typeof FormSchema>;
-
-const outputList = buildOutputList(initialExtractorValues.outputs);
-
-const ExtractorForm = ({ node }: INextOperatorForm) => {
-  const defaultValues = useFormValues(initialExtractorValues, node);
-  const { t } = useTranslation();
-
-  const form = useForm<ExtractorFormSchemaType>({
-    defaultValues,
-    resolver: zodResolver(FormSchema),
-    // mode: 'onChange',
-  });
-
-  const promptOptions = useBuildNodeOutputOptions(node?.id);
-
-  const options = buildOptions(ContextGeneratorFieldName, t, 'dataflow');
-
-  const {
-    handleFieldNameChange,
-    confirmSwitch,
-    hideModal,
-    visible,
-    cancelSwitch,
-  } = useSwitchPrompt(form);
-
-  useWatchFormChange(node?.id, form);
-
-  return (
-    <Form {...form}>
-      <FormWrapper>
-        <LargeModelFormField></LargeModelFormField>
-        <RAGFlowFormItem label={t('dataflow.fieldName')} name="field_name">
-          {(field) => (
-            <SelectWithSearch
-              onChange={(value) => {
-                field.onChange(value);
-                handleFieldNameChange(value);
-              }}
-              value={field.value}
-              placeholder={t('dataFlowPlaceholder')}
-              options={options}
-            ></SelectWithSearch>
-          )}
-        </RAGFlowFormItem>
-        <RAGFlowFormItem label={t('flow.systemPrompt')} name="sys_prompt">
-          <PromptEditor
-            placeholder={t('flow.messagePlaceholder')}
-            showToolbar={true}
-            baseOptions={promptOptions}
-          ></PromptEditor>
-        </RAGFlowFormItem>
-        <RAGFlowFormItem label={t('flow.userPrompt')} name="prompts">
-          <PromptEditor
-            showToolbar={true}
-            baseOptions={promptOptions}
-          ></PromptEditor>
-        </RAGFlowFormItem>
-        <Output list={outputList}></Output>
-      </FormWrapper>
-      {visible && (
-        <ConfirmDeleteDialog
-          title={t('dataflow.switchPromptMessage')}
-          open
-          onOpenChange={hideModal}
-          onOk={confirmSwitch}
-          onCancel={cancelSwitch}
-        ></ConfirmDeleteDialog>
-      )}
-    </Form>
-  );
-};
-
-export default memo(ExtractorForm);
diff --git a/web/src/pages/data-flow/form/extractor-form/use-switch-prompt.ts b/web/src/pages/data-flow/form/extractor-form/use-switch-prompt.ts
deleted file mode 100644
index 4efb2c472..000000000
--- a/web/src/pages/data-flow/form/extractor-form/use-switch-prompt.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { LlmSettingSchema } from '@/components/llm-setting-items/next';
-import { useSetModalState } from '@/hooks/common-hooks';
-import { useCallback, useRef } from 'react';
-import { UseFormReturn } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { z } from 'zod';
-
-export const FormSchema = z.object({
-  field_name: z.string(),
-  sys_prompt: z.string(),
-  prompts: z.string().optional(),
-  ...LlmSettingSchema,
-});
-
-export type ExtractorFormSchemaType = z.infer<typeof FormSchema>;
-
-export function useSwitchPrompt(form: UseFormReturn<ExtractorFormSchemaType>) {
-  const { visible, showModal, hideModal } = useSetModalState();
-  const { t } = useTranslation();
-  const previousFieldNames = useRef<string[]>([form.getValues('field_name')]);
-
-  const setPromptValue = useCallback(
-    (field: keyof ExtractorFormSchemaType, key: string, value: string) => {
-      form.setValue(field, t(`dataflow.prompts.${key}.${value}`), {
-        shouldDirty: true,
-        shouldValidate: true,
-      });
-    },
-    [form, t],
-  );
-
-  const handleFieldNameChange = useCallback(
-    (value: string) => {
-      if (value) {
-        const names = previousFieldNames.current;
-        if (names.length > 1) {
-          names.shift();
-        }
-        names.push(value);
-        showModal();
-      }
-    },
-    [showModal],
-  );
-
-  const confirmSwitch = useCallback(() => {
-    const value = form.getValues('field_name');
-    setPromptValue('sys_prompt', 'system', value);
-    setPromptValue('prompts', 'user', value);
-  }, [form, setPromptValue]);
-
-  const cancelSwitch = useCallback(() => {
-    const previousValue = previousFieldNames.current.at(-2);
-    if (previousValue) {
-      form.setValue('field_name', previousValue, {
-        shouldDirty: true,
-        shouldValidate: true,
-      });
-    }
-  }, [form]);
-
-  return {
-    handleFieldNameChange,
-    confirmSwitch,
-    hideModal,
-    visible,
-    cancelSwitch,
-  };
-}
diff --git a/web/src/pages/data-flow/form/hierarchical-merger-form/index.tsx b/web/src/pages/data-flow/form/hierarchical-merger-form/index.tsx
deleted file mode 100644
index 6ce32fd6b..000000000
--- a/web/src/pages/data-flow/form/hierarchical-merger-form/index.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import { SelectWithSearch } from '@/components/originui/select-with-search';
-import { RAGFlowFormItem } from '@/components/ragflow-form';
-import { BlockButton, Button } from '@/components/ui/button';
-import { Card, CardContent, CardHeader } from '@/components/ui/card';
-import { Form, FormLabel } from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Plus, Trash2 } from 'lucide-react';
-import { memo } from 'react';
-import { useFieldArray, useForm, useFormContext } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { z } from 'zod';
-import { Hierarchy, initialHierarchicalMergerValues } from '../../constant';
-import { useFormValues } from '../../hooks/use-form-values';
-import { useWatchFormChange } from '../../hooks/use-watch-form-change';
-import { INextOperatorForm } from '../../interface';
-import { buildOutputList } from '../../utils/build-output-list';
-import { FormWrapper } from '../components/form-wrapper';
-import { Output } from '../components/output';
-
-const outputList = buildOutputList(initialHierarchicalMergerValues.outputs);
-
-const HierarchyOptions = [
-  { label: 'H1', value: Hierarchy.H1 },
-  { label: 'H2', value: Hierarchy.H2 },
-  { label: 'H3', value: Hierarchy.H3 },
-  { label: 'H4', value: Hierarchy.H4 },
-  { label: 'H5', value: Hierarchy.H5 },
-];
-
-export const FormSchema = z.object({
-  hierarchy: z.string(),
-  levels: z.array(
-    z.object({
-      expressions: z.array(
-        z.object({
-          expression: z.string().refine(
-            (val) => {
-              try {
-                // Try converting the string to a RegExp
-                new RegExp(val);
-                return true;
-              } catch {
-                return false;
-              }
-            },
-            {
-              message: 'Must be a valid regular expression string',
-            },
-          ),
-        }),
-      ),
-    }),
-  ),
-});
-
-export type HierarchicalMergerFormSchemaType = z.infer<typeof FormSchema>;
-
-type RegularExpressionsProps = {
-  index: number;
-  parentName: string;
-  removeParent: (index: number) => void;
-  isLatest: boolean;
-};
-
-export function RegularExpressions({
-  index,
-  parentName,
-  isLatest,
-  removeParent,
-}: RegularExpressionsProps) {
-  const { t } = useTranslation();
-  const form = useFormContext();
-
-  const name = `${parentName}.${index}.expressions`;
-
-  const { fields, append, remove } = useFieldArray({
-    name: name,
-    control: form.control,
-  });
-
-  return (
-    <Card>
-      <CardHeader className="flex-row justify-between items-center">
-        <span>H{index + 1}</span>
-        {isLatest && (
-          <Button
-            type="button"
-            variant={'ghost'}
-            onClick={() => removeParent(index)}
-          >
-            <Trash2 />
-          </Button>
-        )}
-      </CardHeader>
-      <CardContent>
-        <FormLabel required className="mb-2 text-text-secondary">
-          {t('dataflow.regularExpressions')}
-        </FormLabel>
-        <section className="space-y-4">
-          {fields.map((field, index) => (
-            <div key={field.id} className="flex items-center gap-2">
-              <div className="space-y-2 flex-1">
-                <RAGFlowFormItem
-                  name={`${name}.${index}.expression`}
-                  label={'expression'}
-                  labelClassName="!hidden"
-                >
-                  <Input className="!m-0"></Input>
-                </RAGFlowFormItem>
-              </div>
-              {index === 0 ? (
-                <Button
-                  onClick={() => append({ expression: '' })}
-                  variant={'ghost'}
-                >
-                  <Plus></Plus>
-                </Button>
-              ) : (
-                <Button
-                  type="button"
-                  variant={'ghost'}
-                  onClick={() => remove(index)}
-                >
-                  <Trash2 />
-                </Button>
-              )}
-            </div>
-          ))}
-        </section>
-      </CardContent>
-    </Card>
-  );
-}
-
-const HierarchicalMergerForm = ({ node }: INextOperatorForm) => {
-  const { t } = useTranslation();
-  const defaultValues = useFormValues(initialHierarchicalMergerValues, node);
-
-  const form = useForm<HierarchicalMergerFormSchemaType>({
-    defaultValues,
-    resolver: zodResolver(FormSchema),
-    mode: 'onChange',
-  });
-
-  const name = 'levels';
-
-  const { fields, append, remove } = useFieldArray({
-    name: name,
-    control: form.control,
-  });
-
-  useWatchFormChange(node?.id, form);
-
-  return (
-    <Form {...form}>
-      <FormWrapper>
-        <RAGFlowFormItem name={'hierarchy'} label={t('dataflow.hierarchy')}>
-          <SelectWithSearch options={HierarchyOptions}></SelectWithSearch>
-        </RAGFlowFormItem>
-        {fields.map((field, index) => (
-          <div key={field.id} className="flex items-center">
-            <div className="flex-1">
-              <RegularExpressions
-                parentName={name}
-                index={index}
-                removeParent={remove}
-                isLatest={index === fields.length - 1}
-              ></RegularExpressions>
-            </div>
-          </div>
-        ))}
-        {fields.length < 5 && (
-          <BlockButton
-            onClick={() => append({ expressions: [{ expression: '' }] })}
-          >
-            {t('common.add')}
-          </BlockButton>
-        )}
-      </FormWrapper>
-      <div className="p-5">
-        <Output list={outputList}></Output>
-      </div>
-    </Form>
-  );
-};
-
-export default memo(HierarchicalMergerForm);
diff --git a/web/src/pages/data-flow/form/parser-form/common-form-fields.tsx b/web/src/pages/data-flow/form/parser-form/common-form-fields.tsx
deleted file mode 100644
index 86a136884..000000000
--- a/web/src/pages/data-flow/form/parser-form/common-form-fields.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { crossLanguageOptions } from '@/components/cross-language-form-field';
-import { LayoutRecognizeFormField } from '@/components/layout-recognize-form-field';
-import {
-  LLMFormField,
-  LLMFormFieldProps,
-} from '@/components/llm-setting-items/llm-form-field';
-import {
-  SelectWithSearch,
-  SelectWithSearchFlagOptionType,
-} from '@/components/originui/select-with-search';
-import { RAGFlowFormItem } from '@/components/ragflow-form';
-import { upperCase, upperFirst } from 'lodash';
-import { useTranslation } from 'react-i18next';
-import {
-  FileType,
-  OutputFormatMap,
-  SpreadsheetOutputFormat,
-} from '../../constant';
-import { CommonProps } from './interface';
-import { buildFieldNameWithPrefix } from './utils';
-
-const UppercaseFields = [
-  SpreadsheetOutputFormat.Html,
-  SpreadsheetOutputFormat.Json,
-];
-
-function buildOutputOptionsFormatMap() {
-  return Object.entries(OutputFormatMap).reduce<
-    Record<string, SelectWithSearchFlagOptionType[]>
-  >((pre, [key, value]) => {
-    pre[key] = Object.values(value).map((v) => ({
-      label: UppercaseFields.some((x) => x === v)
-        ? upperCase(v)
-        : upperFirst(v),
-      value: v,
-    }));
-    return pre;
-  }, {});
-}
-
-export type OutputFormatFormFieldProps = CommonProps & {
-  fileType: FileType;
-};
-
-export function OutputFormatFormField({
-  prefix,
-  fileType,
-}: OutputFormatFormFieldProps) {
-  const { t } = useTranslation();
-  return (
-    <RAGFlowFormItem
-      name={buildFieldNameWithPrefix(`output_format`, prefix)}
-      label={t('dataflow.outputFormat')}
-    >
-      <SelectWithSearch
-        options={buildOutputOptionsFormatMap()[fileType]}
-      ></SelectWithSearch>
-    </RAGFlowFormItem>
-  );
-}
-
-export function ParserMethodFormField({
-  prefix,
-  optionsWithoutLLM,
-}: CommonProps & { optionsWithoutLLM?: { value: string; label: string }[] }) {
-  const { t } = useTranslation();
-  return (
-    <LayoutRecognizeFormField
-      name={buildFieldNameWithPrefix(`parse_method`, prefix)}
-      horizontal={false}
-      optionsWithoutLLM={optionsWithoutLLM}
-      label={t('dataflow.parserMethod')}
-    ></LayoutRecognizeFormField>
-  );
-}
-
-export function LargeModelFormField({
-  prefix,
-  options,
-}: CommonProps & Pick<LLMFormFieldProps, 'options'>) {
-  return (
-    <LLMFormField
-      name={buildFieldNameWithPrefix('llm_id', prefix)}
-      options={options}
-    ></LLMFormField>
-  );
-}
-
-export function LanguageFormField({ prefix }: CommonProps) {
-  const { t } = useTranslation();
-
-  return (
-    <RAGFlowFormItem
-      name={buildFieldNameWithPrefix(`lang`, prefix)}
-      label={t('dataflow.lang')}
-    >
-      {(field) => (
-        <SelectWithSearch
-          options={crossLanguageOptions}
-          value={field.value}
-          onChange={field.onChange}
-        ></SelectWithSearch>
-      )}
-    </RAGFlowFormItem>
-  );
-}
diff --git a/web/src/pages/data-flow/form/parser-form/email-form-fields.tsx b/web/src/pages/data-flow/form/parser-form/email-form-fields.tsx
deleted file mode 100644
index 640c271f9..000000000
--- a/web/src/pages/data-flow/form/parser-form/email-form-fields.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { RAGFlowFormItem } from '@/components/ragflow-form';
-import { MultiSelect } from '@/components/ui/multi-select';
-import { buildOptions } from '@/utils/form';
-import { useTranslation } from 'react-i18next';
-import { ParserFields } from '../../constant';
-import { CommonProps } from './interface';
-import { buildFieldNameWithPrefix } from './utils';
-
-const options = buildOptions(ParserFields);
-
-export function EmailFormFields({ prefix }: CommonProps) {
-  const { t } = useTranslation();
-  return (
-    <>
-      <RAGFlowFormItem
-        name={buildFieldNameWithPrefix(`fields`, prefix)}
-        label={t('dataflow.fields')}
-      >
-        {(field) => (
-          <MultiSelect
-            options={options}
-            onValueChange={field.onChange}
-            defaultValue={field.value}
-            variant="inverted"
-          ></MultiSelect>
-        )}
-      </RAGFlowFormItem>
-    </>
-  );
-}
diff --git a/web/src/pages/data-flow/form/parser-form/image-form-fields.tsx b/web/src/pages/data-flow/form/parser-form/image-form-fields.tsx
deleted file mode 100644
index 8dbde3a96..000000000
--- a/web/src/pages/data-flow/form/parser-form/image-form-fields.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { RAGFlowFormItem } from '@/components/ragflow-form';
-import { Textarea } from '@/components/ui/textarea';
-import { buildOptions } from '@/utils/form';
-import { isEmpty } from 'lodash';
-import { useEffect, useMemo } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { ImageParseMethod } from '../../constant';
-import { LanguageFormField, ParserMethodFormField } from './common-form-fields';
-import { CommonProps } from './interface';
-import { useSetInitialLanguage } from './use-set-initial-language';
-import { buildFieldNameWithPrefix } from './utils';
-
-export function ImageFormFields({ prefix }: CommonProps) {
-  const { t } = useTranslation();
-  const form = useFormContext();
-  const options = buildOptions(
-    ImageParseMethod,
-    t,
-    'dataflow.imageParseMethodOptions',
-  );
-  const parseMethodName = buildFieldNameWithPrefix('parse_method', prefix);
-
-  const parseMethod = useWatch({
-    name: parseMethodName,
-  });
-
-  const languageShown = useMemo(() => {
-    return !isEmpty(parseMethod) && parseMethod !== ImageParseMethod.OCR;
-  }, [parseMethod]);
-
-  useEffect(() => {
-    if (isEmpty(form.getValues(parseMethodName))) {
-      form.setValue(parseMethodName, ImageParseMethod.OCR, {
-        shouldValidate: true,
-        shouldDirty: true,
-      });
-    }
-  }, [form, parseMethodName]);
-
-  useSetInitialLanguage({ prefix, languageShown });
-
-  return (
-    <>
-      <ParserMethodFormField
-        prefix={prefix}
-        optionsWithoutLLM={options}
-      ></ParserMethodFormField>
-      {languageShown && <LanguageFormField prefix={prefix}></LanguageFormField>}
-      {languageShown && (
-        <RAGFlowFormItem
-          name={buildFieldNameWithPrefix('system_prompt', prefix)}
-          label={t('dataflow.systemPrompt')}
-        >
-          <Textarea placeholder={t('dataflow.systemPromptPlaceholder')} />
-        </RAGFlowFormItem>
-      )}
-    </>
-  );
-}
diff --git a/web/src/pages/data-flow/form/parser-form/index.tsx b/web/src/pages/data-flow/form/parser-form/index.tsx
deleted file mode 100644
index 610c10506..000000000
--- a/web/src/pages/data-flow/form/parser-form/index.tsx
+++ /dev/null
@@ -1,226 +0,0 @@
-import {
-  SelectWithSearch,
-  SelectWithSearchFlagOptionType,
-} from '@/components/originui/select-with-search';
-import { RAGFlowFormItem } from '@/components/ragflow-form';
-import { BlockButton, Button } from '@/components/ui/button';
-import { Form } from '@/components/ui/form';
-import { Separator } from '@/components/ui/separator';
-import { cn } from '@/lib/utils';
-import { buildOptions } from '@/utils/form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useHover } from 'ahooks';
-import { Trash2 } from 'lucide-react';
-import { memo, useCallback, useMemo, useRef } from 'react';
-import {
-  UseFieldArrayRemove,
-  useFieldArray,
-  useForm,
-  useFormContext,
-} from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { z } from 'zod';
-import {
-  FileType,
-  InitialOutputFormatMap,
-  initialParserValues,
-} from '../../constant';
-import { useFormValues } from '../../hooks/use-form-values';
-import { useWatchFormChange } from '../../hooks/use-watch-form-change';
-import { INextOperatorForm } from '../../interface';
-import { buildOutputList } from '../../utils/build-output-list';
-import { Output } from '../components/output';
-import { OutputFormatFormField } from './common-form-fields';
-import { EmailFormFields } from './email-form-fields';
-import { ImageFormFields } from './image-form-fields';
-import { PdfFormFields } from './pdf-form-fields';
-import { buildFieldNameWithPrefix } from './utils';
-import { VideoFormFields } from './video-form-fields';
-
-const outputList = buildOutputList(initialParserValues.outputs);
-
-const FileFormatWidgetMap = {
-  [FileType.PDF]: PdfFormFields,
-  [FileType.Video]: VideoFormFields,
-  [FileType.Audio]: VideoFormFields,
-  [FileType.Email]: EmailFormFields,
-  [FileType.Image]: ImageFormFields,
-};
-
-type ParserItemProps = {
-  name: string;
-  index: number;
-  fieldLength: number;
-  remove: UseFieldArrayRemove;
-  fileFormatOptions: SelectWithSearchFlagOptionType[];
-};
-
-export const FormSchema = z.object({
-  setups: z.array(
-    z.object({
-      fileFormat: z.string().nullish(),
-      output_format: z.string().optional(),
-      parse_method: z.string().optional(),
-      lang: z.string().optional(),
-      fields: z.array(z.string()).optional(),
-      llm_id: z.string().optional(),
-      system_prompt: z.string().optional(),
-    }),
-  ),
-});
-
-export type ParserFormSchemaType = z.infer<typeof FormSchema>;
-
-function ParserItem({
-  name,
-  index,
-  fieldLength,
-  remove,
-  fileFormatOptions,
-}: ParserItemProps) {
-  const { t } = useTranslation();
-  const form = useFormContext<ParserFormSchemaType>();
-  const ref = useRef(null);
-  const isHovering = useHover(ref);
-
-  const prefix = `${name}.${index}`;
-  const fileFormat = form.getValues(`setups.${index}.fileFormat`);
-
-  const values = form.getValues();
-  const parserList = values.setups.slice(); // Adding, deleting, or modifying the parser array will not change the reference.
-
-  const filteredFileFormatOptions = useMemo(() => {
-    const otherFileFormatList = parserList
-      .filter((_, idx) => idx !== index)
-      .map((x) => x.fileFormat);
-
-    return fileFormatOptions.filter((x) => {
-      return !otherFileFormatList.includes(x.value);
-    });
-  }, [fileFormatOptions, index, parserList]);
-
-  const Widget =
-    typeof fileFormat === 'string' && fileFormat in FileFormatWidgetMap
-      ? FileFormatWidgetMap[fileFormat as keyof typeof FileFormatWidgetMap]
-      : () => <></>;
-
-  const handleFileTypeChange = useCallback(
-    (value: FileType) => {
-      form.setValue(
-        `setups.${index}.output_format`,
-        InitialOutputFormatMap[value],
-        { shouldDirty: true, shouldValidate: true, shouldTouch: true },
-      );
-    },
-    [form, index],
-  );
-
-  return (
-    <section
-      className={cn('space-y-5 py-2.5 rounded-md', {
-        'bg-state-error-5': isHovering,
-      })}
-    >
-      <div className="flex justify-between items-center">
-        <span className="text-text-primary text-sm font-medium">
-          Parser {index + 1}
-        </span>
-        {index > 0 && (
-          <Button variant={'ghost'} onClick={() => remove(index)} ref={ref}>
-            <Trash2 />
-          </Button>
-        )}
-      </div>
-      <RAGFlowFormItem
-        name={buildFieldNameWithPrefix(`fileFormat`, prefix)}
-        label={t('dataflow.fileFormats')}
-      >
-        {(field) => (
-          <SelectWithSearch
-            value={field.value}
-            onChange={(val) => {
-              field.onChange(val);
-              handleFileTypeChange(val as FileType);
-            }}
-            options={filteredFileFormatOptions}
-          ></SelectWithSearch>
-        )}
-      </RAGFlowFormItem>
-      <Widget prefix={prefix} fileType={fileFormat as FileType}></Widget>
-      <div className="hidden">
-        <OutputFormatFormField
-          prefix={prefix}
-          fileType={fileFormat as FileType}
-        />
-      </div>
-      {index < fieldLength - 1 && <Separator />}
-    </section>
-  );
-}
-
-const ParserForm = ({ node }: INextOperatorForm) => {
-  const { t } = useTranslation();
-  const defaultValues = useFormValues(initialParserValues, node);
-
-  const FileFormatOptions = buildOptions(
-    FileType,
-    t,
-    'dataflow.fileFormatOptions',
-  ).filter(
-    (x) => x.value !== FileType.Video, // Temporarily hide the video option
-  );
-
-  const form = useForm<z.infer<typeof FormSchema>>({
-    defaultValues,
-    resolver: zodResolver(FormSchema),
-    shouldUnregister: true,
-  });
-
-  const name = 'setups';
-  const { fields, remove, append } = useFieldArray({
-    name,
-    control: form.control,
-  });
-
-  const add = useCallback(() => {
-    append({
-      fileFormat: null,
-      output_format: '',
-      parse_method: '',
-      lang: '',
-      fields: [],
-      llm_id: '',
-    });
-  }, [append]);
-
-  useWatchFormChange(node?.id, form);
-
-  return (
-    <Form {...form}>
-      <form className="px-5">
-        {fields.map((field, index) => {
-          return (
-            <ParserItem
-              key={field.id}
-              name={name}
-              index={index}
-              fieldLength={fields.length}
-              remove={remove}
-              fileFormatOptions={FileFormatOptions}
-            ></ParserItem>
-          );
-        })}
-        {fields.length < FileFormatOptions.length && (
-          <BlockButton onClick={add} type="button" className="mt-2.5">
-            {t('dataflow.addParser')}
-          </BlockButton>
-        )}
-      </form>
-      <div className="p-5">
-        <Output list={outputList}></Output>
-      </div>
-    </Form>
-  );
-};
-
-export default memo(ParserForm);
diff --git a/web/src/pages/data-flow/form/parser-form/interface.ts b/web/src/pages/data-flow/form/parser-form/interface.ts
deleted file mode 100644
index 698ba8e64..000000000
--- a/web/src/pages/data-flow/form/parser-form/interface.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export type CommonProps = {
-  prefix: string;
-};
diff --git a/web/src/pages/data-flow/form/parser-form/pdf-form-fields.tsx b/web/src/pages/data-flow/form/parser-form/pdf-form-fields.tsx
deleted file mode 100644
index d6c3eb7f4..000000000
--- a/web/src/pages/data-flow/form/parser-form/pdf-form-fields.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { ParseDocumentType } from '@/components/layout-recognize-form-field';
-import { isEmpty } from 'lodash';
-import { useEffect, useMemo } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
-import { LanguageFormField, ParserMethodFormField } from './common-form-fields';
-import { CommonProps } from './interface';
-import { useSetInitialLanguage } from './use-set-initial-language';
-import { buildFieldNameWithPrefix } from './utils';
-
-export function PdfFormFields({ prefix }: CommonProps) {
-  const form = useFormContext();
-
-  const parseMethodName = buildFieldNameWithPrefix('parse_method', prefix);
-
-  const parseMethod = useWatch({
-    name: parseMethodName,
-  });
-
-  const languageShown = useMemo(() => {
-    return (
-      !isEmpty(parseMethod) &&
-      parseMethod !== ParseDocumentType.DeepDOC &&
-      parseMethod !== ParseDocumentType.PlainText
-    );
-  }, [parseMethod]);
-
-  useSetInitialLanguage({ prefix, languageShown });
-
-  useEffect(() => {
-    if (isEmpty(form.getValues(parseMethodName))) {
-      form.setValue(parseMethodName, ParseDocumentType.DeepDOC, {
-        shouldValidate: true,
-        shouldDirty: true,
-      });
-    }
-  }, [form, parseMethodName]);
-
-  return (
-    <>
-      <ParserMethodFormField prefix={prefix}></ParserMethodFormField>
-      {languageShown && <LanguageFormField prefix={prefix}></LanguageFormField>}
-    </>
-  );
-}
diff --git a/web/src/pages/data-flow/form/parser-form/use-set-initial-language.ts b/web/src/pages/data-flow/form/parser-form/use-set-initial-language.ts
deleted file mode 100644
index 0eb56cfa9..000000000
--- a/web/src/pages/data-flow/form/parser-form/use-set-initial-language.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { crossLanguageOptions } from '@/components/cross-language-form-field';
-import { isEmpty } from 'lodash';
-import { useEffect } from 'react';
-import { useFormContext } from 'react-hook-form';
-import { buildFieldNameWithPrefix } from './utils';
-
-export function useSetInitialLanguage({
-  prefix,
-  languageShown,
-}: {
-  prefix: string;
-  languageShown: boolean;
-}) {
-  const form = useFormContext();
-  const lang = form.getValues(buildFieldNameWithPrefix('lang', prefix));
-
-  useEffect(() => {
-    if (languageShown && isEmpty(lang)) {
-      form.setValue(
-        buildFieldNameWithPrefix('lang', prefix),
-        crossLanguageOptions[0].value,
-        {
-          shouldValidate: true,
-          shouldDirty: true,
-        },
-      );
-    }
-  }, [form, lang, languageShown, prefix]);
-}
diff --git a/web/src/pages/data-flow/form/parser-form/utils.ts b/web/src/pages/data-flow/form/parser-form/utils.ts
deleted file mode 100644
index 851429f77..000000000
--- a/web/src/pages/data-flow/form/parser-form/utils.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function buildFieldNameWithPrefix(name: string, prefix: string) {
-  return `${prefix}.${name}`;
-}
diff --git a/web/src/pages/data-flow/form/parser-form/video-form-fields.tsx b/web/src/pages/data-flow/form/parser-form/video-form-fields.tsx
deleted file mode 100644
index 352958867..000000000
--- a/web/src/pages/data-flow/form/parser-form/video-form-fields.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { LlmModelType } from '@/constants/knowledge';
-import { useComposeLlmOptionsByModelTypes } from '@/hooks/llm-hooks';
-import {
-  LargeModelFormField,
-  OutputFormatFormFieldProps,
-} from './common-form-fields';
-
-export function VideoFormFields({ prefix }: OutputFormatFormFieldProps) {
-  const modelOptions = useComposeLlmOptionsByModelTypes([
-    LlmModelType.Speech2text,
-  ]);
-
-  return (
-    <>
-      {/* Multimodal Model */}
-      <LargeModelFormField
-        prefix={prefix}
-        options={modelOptions}
-      ></LargeModelFormField>
-    </>
-  );
-}
diff --git a/web/src/pages/data-flow/form/splitter-form/index.tsx b/web/src/pages/data-flow/form/splitter-form/index.tsx
deleted file mode 100644
index 5f66647c7..000000000
--- a/web/src/pages/data-flow/form/splitter-form/index.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { DelimiterInput } from '@/components/delimiter-form-field';
-import { RAGFlowFormItem } from '@/components/ragflow-form';
-import { SliderInputFormField } from '@/components/slider-input-form-field';
-import { BlockButton, Button } from '@/components/ui/button';
-import { Form } from '@/components/ui/form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Trash2 } from 'lucide-react';
-import { memo } from 'react';
-import { useFieldArray, useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { z } from 'zod';
-import { initialSplitterValues } from '../../constant';
-import { useFormValues } from '../../hooks/use-form-values';
-import { useWatchFormChange } from '../../hooks/use-watch-form-change';
-import { INextOperatorForm } from '../../interface';
-import { buildOutputList } from '../../utils/build-output-list';
-import { FormWrapper } from '../components/form-wrapper';
-import { Output } from '../components/output';
-
-const outputList = buildOutputList(initialSplitterValues.outputs);
-
-export const FormSchema = z.object({
-  chunk_token_size: z.number(),
-  delimiters: z.array(
-    z.object({
-      value: z.string().optional(),
-    }),
-  ),
-  overlapped_percent: z.number(), // 0.0 - 0.3 , 0% - 30%
-});
-
-export type SplitterFormSchemaType = z.infer<typeof FormSchema>;
-
-const SplitterForm = ({ node }: INextOperatorForm) => {
-  const defaultValues = useFormValues(initialSplitterValues, node);
-  const { t } = useTranslation();
-
-  const form = useForm<SplitterFormSchemaType>({
-    defaultValues,
-    resolver: zodResolver(FormSchema),
-  });
-  const name = 'delimiters';
-
-  const { fields, append, remove } = useFieldArray({
-    name: name,
-    control: form.control,
-  });
-
-  useWatchFormChange(node?.id, form);
-
-  return (
-    <Form {...form}>
-      <FormWrapper>
-        <SliderInputFormField
-          name="chunk_token_size"
-          max={2048}
-          label={t('knowledgeConfiguration.chunkTokenNumber')}
-        ></SliderInputFormField>
-        <SliderInputFormField
-          name="overlapped_percent"
-          max={30}
-          min={0}
-          label={t('dataflow.overlappedPercent')}
-        ></SliderInputFormField>
-        <section>
-          <span className="mb-2 inline-block">{t('flow.delimiters')}</span>
-          <div className="space-y-4">
-            {fields.map((field, index) => (
-              <div key={field.id} className="flex items-center gap-2">
-                <div className="space-y-2 flex-1">
-                  <RAGFlowFormItem
-                    name={`${name}.${index}.value`}
-                    label="delimiter"
-                    labelClassName="!hidden"
-                  >
-                    <DelimiterInput className="!m-0"></DelimiterInput>
-                  </RAGFlowFormItem>
-                </div>
-                <Button
-                  type="button"
-                  variant={'ghost'}
-                  onClick={() => remove(index)}
-                >
-                  <Trash2 />
-                </Button>
-              </div>
-            ))}
-          </div>
-        </section>
-        <BlockButton onClick={() => append({ value: '\n' })}>
-          {t('common.add')}
-        </BlockButton>
-      </FormWrapper>
-      <div className="p-5">
-        <Output list={outputList}></Output>
-      </div>
-    </Form>
-  );
-};
-
-export default memo(SplitterForm);
diff --git a/web/src/pages/data-flow/form/tokenizer-form/index.tsx b/web/src/pages/data-flow/form/tokenizer-form/index.tsx
deleted file mode 100644
index 358554508..000000000
--- a/web/src/pages/data-flow/form/tokenizer-form/index.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { SelectWithSearch } from '@/components/originui/select-with-search';
-import { RAGFlowFormItem } from '@/components/ragflow-form';
-import { SliderInputFormField } from '@/components/slider-input-form-field';
-import { Form } from '@/components/ui/form';
-import { MultiSelect } from '@/components/ui/multi-select';
-import { buildOptions } from '@/utils/form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { memo } from 'react';
-import { useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { z } from 'zod';
-import {
-  initialTokenizerValues,
-  TokenizerFields,
-  TokenizerSearchMethod,
-} from '../../constant';
-import { useFormValues } from '../../hooks/use-form-values';
-import { useWatchFormChange } from '../../hooks/use-watch-form-change';
-import { INextOperatorForm } from '../../interface';
-import { buildOutputList } from '../../utils/build-output-list';
-import { FormWrapper } from '../components/form-wrapper';
-import { Output } from '../components/output';
-
-const outputList = buildOutputList(initialTokenizerValues.outputs);
-
-export const FormSchema = z.object({
-  search_method: z.array(z.string()).min(1),
-  filename_embd_weight: z.number(),
-  fields: z.string(),
-});
-
-export type TokenizerFormSchemaType = z.infer<typeof FormSchema>;
-
-const TokenizerForm = ({ node }: INextOperatorForm) => {
-  const { t } = useTranslation();
-  const defaultValues = useFormValues(initialTokenizerValues, node);
-
-  const SearchMethodOptions = buildOptions(
-    TokenizerSearchMethod,
-    t,
-    `dataflow.tokenizerSearchMethodOptions`,
-  );
-  const FieldsOptions = buildOptions(
-    TokenizerFields,
-    t,
-    'dataflow.tokenizerFieldsOptions',
-  );
-
-  const form = useForm<TokenizerFormSchemaType>({
-    defaultValues,
-    resolver: zodResolver(FormSchema),
-    mode: 'onChange',
-  });
-
-  useWatchFormChange(node?.id, form);
-
-  return (
-    <Form {...form}>
-      <FormWrapper>
-        <RAGFlowFormItem
-          name="search_method"
-          label={t('dataflow.searchMethod')}
-          tooltip={t('dataflow.searchMethodTip')}
-        >
-          {(field) => (
-            <MultiSelect
-              options={SearchMethodOptions}
-              onValueChange={field.onChange}
-              defaultValue={field.value}
-              variant="inverted"
-            />
-          )}
-        </RAGFlowFormItem>
-        <SliderInputFormField
-          name="filename_embd_weight"
-          label={t('dataflow.filenameEmbeddingWeight')}
-          max={0.5}
-          step={0.01}
-        ></SliderInputFormField>
-        <RAGFlowFormItem name="fields" label={t('dataflow.fields')}>
-          {(field) => <SelectWithSearch options={FieldsOptions} {...field} />}
-        </RAGFlowFormItem>
-      </FormWrapper>
-      <div className="p-5">
-        <Output list={outputList}></Output>
-      </div>
-    </Form>
-  );
-};
-
-export default memo(TokenizerForm);
diff --git a/web/src/pages/data-flow/hooks.tsx b/web/src/pages/data-flow/hooks.tsx
deleted file mode 100644
index f8ccddc79..000000000
--- a/web/src/pages/data-flow/hooks.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import { Connection, Edge, getOutgoers } from '@xyflow/react';
-import { useCallback } from 'react';
-// import { shallow } from 'zustand/shallow';
-import { RAGFlowNodeType } from '@/interfaces/database/flow';
-import { lowerFirst } from 'lodash';
-import { useTranslation } from 'react-i18next';
-import { Operator, RestrictedUpstreamMap } from './constant';
-import useGraphStore, { RFState } from './store';
-import { 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,
-  onEdgeMouseEnter: state.onEdgeMouseEnter,
-  onEdgeMouseLeave: state.onEdgeMouseLeave,
-});
-
-export const useSelectCanvasData = () => {
-  // return useStore(useShallow(selector)); // throw error
-  // return useStore(selector, shallow);
-  return useGraphStore(selector);
-};
-
-export const useGetNodeName = () => {
-  const { t } = useTranslation();
-
-  return (type: string) => {
-    const name = t(`dataflow.${lowerFirst(type)}`);
-    return name;
-  };
-};
-
-export const useGetNodeDescription = () => {
-  const { t } = useTranslation();
-
-  return (type: string) => {
-    const name = t(`dataflow.${lowerFirst(type)}Description`);
-    return name;
-  };
-};
-
-export const useValidateConnection = () => {
-  const { getOperatorTypeFromId, getParentIdById, edges, nodes } =
-    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],
-  );
-
-  const hasCanvasCycle = useCallback(
-    (connection: Connection | Edge) => {
-      const target = nodes.find((node) => node.id === connection.target);
-      const hasCycle = (node: RAGFlowNodeType, visited = new Set()) => {
-        if (visited.has(node.id)) return false;
-
-        visited.add(node.id);
-
-        for (const outgoer of getOutgoers(node, nodes, edges)) {
-          if (outgoer.id === connection.source) return true;
-          if (hasCycle(outgoer, visited)) return true;
-        }
-      };
-
-      if (target?.id === connection.source) return false;
-
-      return target ? !hasCycle(target) : false;
-    },
-    [edges, nodes],
-  );
-
-  // 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 &&
-        RestrictedUpstreamMap[
-          getOperatorTypeFromId(connection.source) as Operator
-        ]?.every((x) => x !== getOperatorTypeFromId(connection.target)) &&
-        isSameNodeChild(connection) &&
-        hasCanvasCycle(connection);
-      return ret;
-    },
-    [getOperatorTypeFromId, hasCanvasCycle, isSameNodeChild],
-  );
-
-  return isValidConnection;
-};
-
-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,
-  };
-};
-
-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;
-};
diff --git a/web/src/pages/data-flow/hooks/use-add-node.ts b/web/src/pages/data-flow/hooks/use-add-node.ts
deleted file mode 100644
index 2b3e23c9d..000000000
--- a/web/src/pages/data-flow/hooks/use-add-node.ts
+++ /dev/null
@@ -1,218 +0,0 @@
-import { useFetchModelId } from '@/hooks/logic-hooks';
-import { Connection, Node, Position, ReactFlowInstance } from '@xyflow/react';
-import humanId from 'human-id';
-import { lowerFirst } from 'lodash';
-import { useCallback, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  NodeHandleId,
-  NodeMap,
-  Operator,
-  initialBeginValues,
-  initialExtractorValues,
-  initialHierarchicalMergerValues,
-  initialNoteValues,
-  initialParserValues,
-  initialSplitterValues,
-  initialTokenizerValues,
-} from '../constant';
-import useGraphStore from '../store';
-import {
-  generateNodeNamesWithIncreasingIndex,
-  getNodeDragHandle,
-} from '../utils';
-
-export const useInitializeOperatorParams = () => {
-  const llmId = useFetchModelId();
-  const { t } = useTranslation();
-
-  const initialFormValuesMap = useMemo(() => {
-    return {
-      [Operator.Begin]: initialBeginValues,
-      [Operator.Note]: initialNoteValues,
-      [Operator.Parser]: initialParserValues,
-      [Operator.Tokenizer]: initialTokenizerValues,
-      [Operator.Splitter]: initialSplitterValues,
-      [Operator.HierarchicalMerger]: initialHierarchicalMergerValues,
-      [Operator.Extractor]: {
-        ...initialExtractorValues,
-        llm_id: llmId,
-        sys_prompt: t('dataflow.prompts.system.summary'),
-        prompts: t('dataflow.prompts.user.summary'),
-      },
-    };
-  }, [llmId, t]);
-
-  const initializeOperatorParams = useCallback(
-    (operatorName: Operator) => {
-      const initialValues = initialFormValuesMap[operatorName];
-
-      return initialValues;
-    },
-    [initialFormValuesMap],
-  );
-
-  return { initializeOperatorParams, initialFormValuesMap };
-};
-
-export const useGetNodeName = () => {
-  const { t } = useTranslation();
-
-  return (type: string) => {
-    const name = t(`dataflow.${lowerFirst(type)}`);
-    return name;
-  };
-};
-
-export function useCalculateNewlyChildPosition() {
-  const getNode = useGraphStore((state) => state.getNode);
-  const nodes = useGraphStore((state) => state.nodes);
-  const edges = useGraphStore((state) => state.edges);
-
-  const calculateNewlyBackChildPosition = useCallback(
-    (id?: string, sourceHandle?: string) => {
-      const parentNode = getNode(id);
-
-      // Calculate the coordinates of child nodes to prevent newly added child nodes from covering other child nodes
-      const allChildNodeIds = edges
-        .filter((x) => x.source === id && x.sourceHandle === sourceHandle)
-        .map((x) => x.target);
-
-      const yAxises = nodes
-        .filter((x) => allChildNodeIds.some((y) => y === x.id))
-        .map((x) => x.position.y);
-
-      const maxY = Math.max(...yAxises);
-
-      const position = {
-        y: yAxises.length > 0 ? maxY + 150 : parentNode?.position.y || 0,
-        x: (parentNode?.position.x || 0) + 300,
-      };
-
-      return position;
-    },
-    [edges, getNode, nodes],
-  );
-
-  return { calculateNewlyBackChildPosition };
-}
-
-function useAddChildEdge() {
-  const addEdge = useGraphStore((state) => state.addEdge);
-
-  const addChildEdge = useCallback(
-    (position: Position = Position.Right, edge: Partial<Connection>) => {
-      if (
-        position === Position.Right &&
-        edge.source &&
-        edge.target &&
-        edge.sourceHandle
-      ) {
-        addEdge({
-          source: edge.source,
-          target: edge.target,
-          sourceHandle: edge.sourceHandle,
-          targetHandle: NodeHandleId.End,
-        });
-      }
-    },
-    [addEdge],
-  );
-
-  return { addChildEdge };
-}
-
-type CanvasMouseEvent = Pick<
-  React.MouseEvent<HTMLElement>,
-  'clientX' | 'clientY'
->;
-
-export function useAddNode(reactFlowInstance?: ReactFlowInstance<any, any>) {
-  const { nodes, addNode } = useGraphStore((state) => state);
-  const getNodeName = useGetNodeName();
-  const { initializeOperatorParams } = useInitializeOperatorParams();
-  const { calculateNewlyBackChildPosition } = useCalculateNewlyChildPosition();
-  const { addChildEdge } = useAddChildEdge();
-  //   const [reactFlowInstance, setReactFlowInstance] =
-  //     useState<ReactFlowInstance<any, any>>();
-
-  const addCanvasNode = useCallback(
-    (
-      type: string,
-      params: {
-        nodeId?: string;
-        position: Position;
-        id?: string;
-        isFromConnectionDrag?: boolean;
-      } = {
-        position: Position.Right,
-      },
-    ) =>
-      (event?: CanvasMouseEvent): string | undefined => {
-        const nodeId = params.nodeId;
-
-        // 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
-        let position = reactFlowInstance?.screenToFlowPosition({
-          x: event?.clientX || 0,
-          y: event?.clientY || 0,
-        });
-
-        if (
-          params.position === Position.Right &&
-          type !== Operator.Note &&
-          !params.isFromConnectionDrag
-        ) {
-          position = calculateNewlyBackChildPosition(nodeId, params.id);
-        }
-
-        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),
-        };
-
-        addNode(newNode);
-        addChildEdge(params.position, {
-          source: params.nodeId,
-          target: newNode.id,
-          sourceHandle: params.id,
-        });
-
-        return newNode.id;
-      },
-    [
-      addChildEdge,
-      addNode,
-      calculateNewlyBackChildPosition,
-      getNodeName,
-      initializeOperatorParams,
-      nodes,
-      reactFlowInstance,
-    ],
-  );
-
-  const addNoteNode = useCallback(
-    (e: CanvasMouseEvent) => {
-      addCanvasNode(Operator.Note)(e);
-    },
-    [addCanvasNode],
-  );
-
-  return { addCanvasNode, addNoteNode };
-}
diff --git a/web/src/pages/data-flow/hooks/use-before-delete.tsx b/web/src/pages/data-flow/hooks/use-before-delete.tsx
deleted file mode 100644
index bbeeaae10..000000000
--- a/web/src/pages/data-flow/hooks/use-before-delete.tsx
+++ /dev/null
@@ -1,49 +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];
-
-export function useBeforeDelete() {
-  const { getOperatorTypeFromId } = useGraphStore((state) => state);
-
-  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;
-      }
-
-      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/data-flow/hooks/use-build-dsl.ts b/web/src/pages/data-flow/hooks/use-build-dsl.ts
deleted file mode 100644
index eb32b2317..000000000
--- a/web/src/pages/data-flow/hooks/use-build-dsl.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useFetchAgent } from '@/hooks/use-agent-request';
-import { RAGFlowNodeType } from '@/interfaces/database/flow';
-import { useCallback } from 'react';
-import useGraphStore from '../store';
-import { buildDslComponentsByGraph } from '../utils';
-
-export const useBuildDslData = () => {
-  const { data } = useFetchAgent();
-  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/data-flow/hooks/use-build-options.tsx b/web/src/pages/data-flow/hooks/use-build-options.tsx
deleted file mode 100644
index d1214f729..000000000
--- a/web/src/pages/data-flow/hooks/use-build-options.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { buildNodeOutputOptions } from '@/utils/canvas-util';
-import { useMemo } from 'react';
-import { Operator } from '../constant';
-import OperatorIcon from '../operator-icon';
-import useGraphStore from '../store';
-
-export function useBuildNodeOutputOptions(nodeId?: string) {
-  const nodes = useGraphStore((state) => state.nodes);
-  const edges = useGraphStore((state) => state.edges);
-
-  return useMemo(() => {
-    return buildNodeOutputOptions({
-      nodes,
-      edges,
-      nodeId,
-      Icon: ({ name }) => <OperatorIcon name={name as Operator}></OperatorIcon>,
-    });
-  }, [edges, nodeId, nodes]);
-}
diff --git a/web/src/pages/data-flow/hooks/use-cache-chat-log.ts b/web/src/pages/data-flow/hooks/use-cache-chat-log.ts
deleted file mode 100644
index c61079003..000000000
--- a/web/src/pages/data-flow/hooks/use-cache-chat-log.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import {
-  IEventList,
-  INodeEvent,
-  MessageEventType,
-} from '@/hooks/use-send-message';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-
-export const ExcludeTypes = [
-  MessageEventType.Message,
-  MessageEventType.MessageEnd,
-];
-
-export function useCacheChatLog() {
-  const [eventList, setEventList] = useState<IEventList>([]);
-  const [messageIdPool, setMessageIdPool] = useState<
-    Record<string, IEventList>
-  >({});
-
-  const [currentMessageId, setCurrentMessageId] = useState('');
-  useEffect(() => {
-    setMessageIdPool((prev) => ({ ...prev, [currentMessageId]: eventList }));
-  }, [currentMessageId, eventList]);
-
-  const filterEventListByMessageId = useCallback(
-    (messageId: string) => {
-      return messageIdPool[messageId]?.filter(
-        (x) => x.message_id === messageId,
-      );
-    },
-    [messageIdPool],
-  );
-
-  const filterEventListByEventType = useCallback(
-    (eventType: string) => {
-      return messageIdPool[currentMessageId]?.filter(
-        (x) => x.event === eventType,
-      );
-    },
-    [messageIdPool, currentMessageId],
-  );
-
-  const clearEventList = useCallback(() => {
-    setEventList([]);
-    setMessageIdPool({});
-  }, []);
-
-  const addEventList = useCallback((events: IEventList, message_id: string) => {
-    setEventList((x) => {
-      const list = [...x, ...events];
-      setMessageIdPool((prev) => ({ ...prev, [message_id]: list }));
-      return list;
-    });
-  }, []);
-
-  const currentEventListWithoutMessage = useMemo(() => {
-    const list = messageIdPool[currentMessageId]?.filter(
-      (x) =>
-        x.message_id === currentMessageId &&
-        ExcludeTypes.every((y) => y !== x.event),
-    );
-    return list as INodeEvent[];
-  }, [currentMessageId, messageIdPool]);
-
-  const currentEventListWithoutMessageById = useCallback(
-    (messageId: string) => {
-      const list = messageIdPool[messageId]?.filter(
-        (x) =>
-          x.message_id === messageId &&
-          ExcludeTypes.every((y) => y !== x.event),
-      );
-      return list as INodeEvent[];
-    },
-    [messageIdPool],
-  );
-
-  return {
-    eventList,
-    currentEventListWithoutMessage,
-    currentEventListWithoutMessageById,
-    setEventList,
-    clearEventList,
-    addEventList,
-    filterEventListByEventType,
-    filterEventListByMessageId,
-    setCurrentMessageId,
-    currentMessageId,
-  };
-}
diff --git a/web/src/pages/data-flow/hooks/use-cancel-dataflow.ts b/web/src/pages/data-flow/hooks/use-cancel-dataflow.ts
deleted file mode 100644
index 96705a0f8..000000000
--- a/web/src/pages/data-flow/hooks/use-cancel-dataflow.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useCancelDataflow } from '@/hooks/use-agent-request';
-import { useCallback } from 'react';
-
-export function useCancelCurrentDataflow({
-  messageId,
-  stopFetchTrace,
-}: {
-  messageId: string;
-  stopFetchTrace(): void;
-}) {
-  const { cancelDataflow } = useCancelDataflow();
-
-  const handleCancel = useCallback(async () => {
-    const code = await cancelDataflow(messageId);
-    if (code === 0) {
-      stopFetchTrace();
-    }
-  }, [cancelDataflow, messageId, stopFetchTrace]);
-
-  return { handleCancel };
-}
diff --git a/web/src/pages/data-flow/hooks/use-change-node-name.ts b/web/src/pages/data-flow/hooks/use-change-node-name.ts
deleted file mode 100644
index da7316a84..000000000
--- a/web/src/pages/data-flow/hooks/use-change-node-name.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import message from '@/components/ui/message';
-import { trim } from 'lodash';
-import {
-  ChangeEvent,
-  Dispatch,
-  SetStateAction,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-import useGraphStore from '../store';
-import { getAgentNodeTools } from '../utils';
-
-export function useHandleTooNodeNameChange({
-  id,
-  name,
-  setName,
-}: {
-  id?: string;
-  name?: string;
-  setName: Dispatch<SetStateAction<string>>;
-}) {
-  const { clickedToolId, findUpstreamNodeById, updateNodeForm } = useGraphStore(
-    (state) => state,
-  );
-  const agentNode = findUpstreamNodeById(id);
-  const tools = getAgentNodeTools(agentNode);
-
-  const previousName = useMemo(() => {
-    const tool = tools.find((x) => x.component_name === clickedToolId);
-    return tool?.name || tool?.component_name;
-  }, [clickedToolId, tools]);
-
-  const handleToolNameBlur = useCallback(() => {
-    const trimmedName = trim(name);
-    const existsSameName = tools.some((x) => x.name === trimmedName);
-    if (trimmedName === '' || existsSameName) {
-      if (existsSameName && previousName !== name) {
-        message.error('The name cannot be repeated');
-      }
-      setName(previousName || '');
-      return;
-    }
-
-    if (agentNode?.id) {
-      const nextTools = tools.map((x) => {
-        if (x.component_name === clickedToolId) {
-          return {
-            ...x,
-            name,
-          };
-        }
-        return x;
-      });
-      updateNodeForm(agentNode?.id, nextTools, ['tools']);
-    }
-  }, [
-    agentNode?.id,
-    clickedToolId,
-    name,
-    previousName,
-    setName,
-    tools,
-    updateNodeForm,
-  ]);
-
-  return { handleToolNameBlur, previousToolName: previousName };
-}
-
-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 { previousToolName } = useHandleTooNodeNameChange({
-    id,
-    name,
-    setName,
-  });
-
-  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, previousToolName]);
-
-  return {
-    name,
-    handleNameBlur: handleNameBlur,
-    handleNameChange,
-  };
-};
diff --git a/web/src/pages/data-flow/hooks/use-download-output.ts b/web/src/pages/data-flow/hooks/use-download-output.ts
deleted file mode 100644
index 8e02105e8..000000000
--- a/web/src/pages/data-flow/hooks/use-download-output.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { useFetchAgent } from '@/hooks/use-agent-request';
-import { ITraceData } from '@/interfaces/database/agent';
-import { downloadJsonFile } from '@/utils/file-util';
-import { get, isEmpty } from 'lodash';
-import { useCallback } from 'react';
-
-export function findEndOutput(list?: ITraceData[]) {
-  if (Array.isArray(list)) {
-    const trace = list.find((x) => x.component_id === 'END')?.trace;
-
-    const str = get(trace, '0.message');
-
-    try {
-      if (!isEmpty(str)) {
-        const json = JSON.parse(str);
-        return json;
-      }
-    } catch (error) {}
-  }
-}
-
-export function isEndOutputEmpty(list?: ITraceData[]) {
-  return isEmpty(findEndOutput(list));
-}
-export function useDownloadOutput(data?: ITraceData[]) {
-  const { data: agent } = useFetchAgent();
-
-  const handleDownloadJson = useCallback(() => {
-    const output = findEndOutput(data);
-    if (!isEndOutputEmpty(data)) {
-      downloadJsonFile(output, `${agent.title}.json`);
-    }
-  }, [agent.title, data]);
-
-  return {
-    handleDownloadJson,
-  };
-}
diff --git a/web/src/pages/data-flow/hooks/use-export-json.ts b/web/src/pages/data-flow/hooks/use-export-json.ts
deleted file mode 100644
index 87a811cf5..000000000
--- a/web/src/pages/data-flow/hooks/use-export-json.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useFetchAgent } from '@/hooks/use-agent-request';
-import { downloadJsonFile } from '@/utils/file-util';
-import { useCallback } from 'react';
-import { useBuildDslData } from './use-build-dsl';
-
-export const useHandleExportOrImportJsonFile = () => {
-  const { buildDslData } = useBuildDslData();
-  const { data } = useFetchAgent();
-
-  const handleExportJson = useCallback(() => {
-    downloadJsonFile(buildDslData().graph, `${data.title}.json`);
-  }, [buildDslData, data.title]);
-
-  return {
-    handleExportJson,
-  };
-};
diff --git a/web/src/pages/data-flow/hooks/use-fetch-data.ts b/web/src/pages/data-flow/hooks/use-fetch-data.ts
deleted file mode 100644
index 5a1ca40cb..000000000
--- a/web/src/pages/data-flow/hooks/use-fetch-data.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useFetchAgent } from '@/hooks/use-agent-request';
-import { IGraph } from '@/interfaces/database/flow';
-import { useEffect } from 'react';
-import { useSetGraphInfo } from './use-set-graph';
-
-export const useFetchDataOnMount = () => {
-  const { loading, data, refetch } = useFetchAgent();
-  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/data-flow/hooks/use-fetch-log.ts b/web/src/pages/data-flow/hooks/use-fetch-log.ts
deleted file mode 100644
index e8918bdad..000000000
--- a/web/src/pages/data-flow/hooks/use-fetch-log.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { useFetchMessageTrace } from '@/hooks/use-agent-request';
-import { isEmpty } from 'lodash';
-import { useCallback, useEffect, useMemo } from 'react';
-
-export function useFetchLog(logSheetVisible: boolean) {
-  const {
-    setMessageId,
-    data,
-    loading,
-    messageId,
-    setISStopFetchTrace,
-    isStopFetchTrace,
-  } = useFetchMessageTrace();
-
-  const isCompleted = useMemo(() => {
-    if (Array.isArray(data)) {
-      const latest = data?.at(-1);
-      return (
-        latest?.component_id === 'END' && !isEmpty(latest?.trace[0].message)
-      );
-    }
-    return false;
-  }, [data]);
-
-  const isLogEmpty = !data || !data.length;
-
-  const stopFetchTrace = useCallback(() => {
-    setISStopFetchTrace(true);
-  }, [setISStopFetchTrace]);
-
-  // cancel request
-  useEffect(() => {
-    if (isCompleted) {
-      stopFetchTrace();
-    }
-  }, [isCompleted, stopFetchTrace]);
-
-  useEffect(() => {
-    if (logSheetVisible) {
-      setISStopFetchTrace(false);
-    }
-  }, [logSheetVisible, setISStopFetchTrace]);
-
-  return {
-    logs: data,
-    isLogEmpty,
-    isCompleted,
-    loading,
-    isParsing: !isLogEmpty && !isCompleted && !isStopFetchTrace,
-    messageId,
-    setMessageId,
-    stopFetchTrace,
-  };
-}
-
-export type UseFetchLogReturnType = ReturnType<typeof useFetchLog>;
diff --git a/web/src/pages/data-flow/hooks/use-form-values.ts b/web/src/pages/data-flow/hooks/use-form-values.ts
deleted file mode 100644
index edb2abbbd..000000000
--- a/web/src/pages/data-flow/hooks/use-form-values.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { RAGFlowNodeType } from '@/interfaces/database/flow';
-import { isEmpty } from 'lodash';
-import { useMemo } from 'react';
-
-export function useFormValues(
-  defaultValues: Record<string, any>,
-  node?: RAGFlowNodeType,
-) {
-  const values = useMemo(() => {
-    const formData = node?.data?.form;
-
-    if (isEmpty(formData)) {
-      return defaultValues;
-    }
-
-    return formData;
-  }, [defaultValues, node?.data?.form]);
-
-  return values;
-}
diff --git a/web/src/pages/data-flow/hooks/use-move-note.ts b/web/src/pages/data-flow/hooks/use-move-note.ts
deleted file mode 100644
index 2c1d1b072..000000000
--- a/web/src/pages/data-flow/hooks/use-move-note.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { useMouse } from 'ahooks';
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-export function useMoveNote() {
-  const ref = useRef<SVGSVGElement>(null);
-  const mouse = useMouse();
-  const [imgVisible, setImgVisible] = useState(false);
-
-  const toggleVisible = useCallback((visible: boolean) => {
-    setImgVisible(visible);
-  }, []);
-
-  const showImage = useCallback(() => {
-    toggleVisible(true);
-  }, [toggleVisible]);
-
-  const hideImage = useCallback(() => {
-    toggleVisible(false);
-  }, [toggleVisible]);
-
-  useEffect(() => {
-    if (ref.current) {
-      ref.current.style.top = `${mouse.clientY - 70}px`;
-      ref.current.style.left = `${mouse.clientX + 10}px`;
-    }
-  }, [mouse.clientX, mouse.clientY]);
-
-  return {
-    ref,
-    showImage,
-    hideImage,
-    mouse,
-    imgVisible,
-  };
-}
diff --git a/web/src/pages/data-flow/hooks/use-run-dataflow.ts b/web/src/pages/data-flow/hooks/use-run-dataflow.ts
deleted file mode 100644
index e49f1ac56..000000000
--- a/web/src/pages/data-flow/hooks/use-run-dataflow.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import message from '@/components/ui/message';
-import { useSendMessageBySSE } from '@/hooks/use-send-message';
-import api from '@/utils/api';
-import { get } from 'lodash';
-import { useCallback, useContext } from 'react';
-import { useParams } from 'umi';
-import { LogContext } from '../context';
-import { useSaveGraphBeforeOpeningDebugDrawer } from './use-save-graph';
-
-export function useRunDataflow(
-  showLogSheet: () => void,
-  hideRunOrChatDrawer: () => void,
-) {
-  const { send } = useSendMessageBySSE(api.runCanvas);
-  const { id } = useParams();
-  const { setMessageId, setUploadedFileData } = useContext(LogContext);
-
-  const { handleRun: saveGraph, loading } =
-    useSaveGraphBeforeOpeningDebugDrawer(showLogSheet!);
-
-  const run = useCallback(
-    async (fileResponseData: Record<string, any>) => {
-      const success = await saveGraph();
-      if (!success) return;
-      const res = await send({
-        id,
-        query: '',
-        session_id: null,
-        files: [fileResponseData.file],
-      });
-
-      if (res && res?.response.status === 200 && get(res, 'data.code') === 0) {
-        // fetch canvas
-        hideRunOrChatDrawer();
-        setUploadedFileData(fileResponseData.file);
-        const msgId = get(res, 'data.data.message_id');
-        if (msgId) {
-          setMessageId(msgId);
-        }
-
-        return msgId;
-      } else {
-        message.error(get(res, 'data.message', ''));
-      }
-    },
-    [
-      hideRunOrChatDrawer,
-      id,
-      saveGraph,
-      send,
-      setMessageId,
-      setUploadedFileData,
-    ],
-  );
-
-  return { run, loading: loading };
-}
-
-export type RunDataflowType = ReturnType<typeof useRunDataflow>;
diff --git a/web/src/pages/data-flow/hooks/use-save-graph.ts b/web/src/pages/data-flow/hooks/use-save-graph.ts
deleted file mode 100644
index 322e8b80e..000000000
--- a/web/src/pages/data-flow/hooks/use-save-graph.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { useFetchAgent, useSetAgent } from '@/hooks/use-agent-request';
-import { RAGFlowNodeType } from '@/interfaces/database/flow';
-import { formatDate } from '@/utils/date';
-import { useDebounceEffect } from 'ahooks';
-import { useCallback, useEffect, useState } from 'react';
-import { useParams } from 'umi';
-import useGraphStore from '../store';
-import { useBuildDslData } from './use-build-dsl';
-
-export const useSaveGraph = (showMessage: boolean = true) => {
-  const { data } = useFetchAgent();
-  const { setAgent, loading } = useSetAgent(showMessage);
-  const { id } = useParams();
-  const { buildDslData } = useBuildDslData();
-
-  const saveGraph = useCallback(
-    async (currentNodes?: RAGFlowNodeType[]) => {
-      return setAgent({
-        id,
-        title: data.title,
-        canvas_category: data.canvas_category,
-        dsl: buildDslData(currentNodes),
-      });
-    },
-    [setAgent, data, id, buildDslData],
-  );
-
-  return { saveGraph, loading };
-};
-
-export const useSaveGraphBeforeOpeningDebugDrawer = (show: () => void) => {
-  const { saveGraph, loading } = useSaveGraph();
-  // const { resetAgent } = useResetAgent();
-
-  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 resetAgent();
-        // After resetting, all previous messages will be cleared.
-        // if (resetRet?.code === 0) {
-        show();
-        // }
-      }
-      return saveRet?.code === 0;
-    },
-    [saveGraph, show],
-  );
-
-  return { handleRun, loading };
-};
-
-export const useWatchAgentChange = (chatDrawerVisible: boolean) => {
-  const [time, setTime] = useState<string>();
-  const nodes = useGraphStore((state) => state.nodes);
-  const edges = useGraphStore((state) => state.edges);
-  const { saveGraph } = useSaveGraph(false);
-  const { data: flowDetail } = useFetchAgent();
-
-  const setSaveTime = useCallback((updateTime: number) => {
-    setTime(formatDate(updateTime));
-  }, []);
-
-  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/data-flow/hooks/use-set-graph.ts b/web/src/pages/data-flow/hooks/use-set-graph.ts
deleted file mode 100644
index 6dd68a330..000000000
--- a/web/src/pages/data-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/data-flow/hooks/use-show-drawer.tsx b/web/src/pages/data-flow/hooks/use-show-drawer.tsx
deleted file mode 100644
index 0fb8596f5..000000000
--- a/web/src/pages/data-flow/hooks/use-show-drawer.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import { useSetModalState } from '@/hooks/common-hooks';
-import { NodeMouseHandler } from '@xyflow/react';
-import get from 'lodash/get';
-import React, { useCallback, useEffect } from 'react';
-import { BeginId, Operator } from '../constant';
-import useGraphStore from '../store';
-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(
-    (e: React.MouseEvent<Element>, nodeId: string) => {
-      // TODO: Operator type judgment should be used
-      if (nodeId === BeginId) {
-        return;
-      }
-      setClickedNodeId(nodeId);
-      showFormDrawer();
-    },
-    [setClickedNodeId, showFormDrawer],
-  );
-
-  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.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();
-
-  useEffect(() => {
-    if (drawerVisible) {
-      showRunModal();
-    }
-  }, [hideChatModal, hideRunModal, showChatModal, showRunModal, drawerVisible]);
-
-  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(e, node.id);
-      }
-      // handle single debug icon click
-      if (
-        get(e.target, 'dataset.play') === 'true' ||
-        get(e.target, 'parentNode.dataset.play') === 'true'
-      ) {
-        showSingleDebugDrawer();
-      }
-    },
-    [hideSingleDebugDrawer, showFormDrawer, showSingleDebugDrawer],
-  );
-
-  return {
-    chatVisible,
-    runVisible,
-    onPaneClick,
-    singleDebugDrawerVisible,
-    showSingleDebugDrawer,
-    hideSingleDebugDrawer,
-    formDrawerVisible,
-    showFormDrawer,
-    clickedNode,
-    onNodeClick,
-    hideFormDrawer,
-    hideRunOrChatDrawer,
-    showChatModal,
-  };
-}
-
-export function useHideFormSheetOnNodeDeletion({
-  hideFormDrawer,
-}: Pick<ReturnType<typeof useShowFormDrawer>, 'hideFormDrawer'>) {
-  const { nodes, clickedNodeId } = useGraphStore((state) => state);
-
-  useEffect(() => {
-    if (!nodes.some((x) => x.id === clickedNodeId)) {
-      hideFormDrawer();
-    }
-  }, [clickedNodeId, hideFormDrawer, nodes]);
-}
diff --git a/web/src/pages/data-flow/hooks/use-watch-form-change.ts b/web/src/pages/data-flow/hooks/use-watch-form-change.ts
deleted file mode 100644
index 1f85b107f..000000000
--- a/web/src/pages/data-flow/hooks/use-watch-form-change.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useEffect } from 'react';
-import { UseFormReturn, useWatch } from 'react-hook-form';
-import useGraphStore from '../store';
-
-export function useWatchFormChange(id?: string, form?: UseFormReturn<any>) {
-  let values = useWatch({ control: form?.control });
-
-  const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
-
-  useEffect(() => {
-    if (id) {
-      updateNodeForm(id, values);
-    }
-  }, [id, updateNodeForm, values]);
-}
diff --git a/web/src/pages/data-flow/index.tsx b/web/src/pages/data-flow/index.tsx
deleted file mode 100644
index 367fb436c..000000000
--- a/web/src/pages/data-flow/index.tsx
+++ /dev/null
@@ -1,232 +0,0 @@
-import { PageHeader } from '@/components/page-header';
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '@/components/ui/breadcrumb';
-import { Button, ButtonLoading } from '@/components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import message from '@/components/ui/message';
-import { useSetModalState } from '@/hooks/common-hooks';
-import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
-import { ReactFlowProvider } from '@xyflow/react';
-import {
-  ChevronDown,
-  CirclePlay,
-  History,
-  LaptopMinimalCheck,
-  Settings,
-  Upload,
-} from 'lucide-react';
-import { ComponentPropsWithoutRef, useCallback, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import DataFlowCanvas from './canvas';
-import { DropdownProvider } from './canvas/context';
-import { Operator } from './constant';
-import { LogContext } from './context';
-import { useCancelCurrentDataflow } from './hooks/use-cancel-dataflow';
-import { useHandleExportOrImportJsonFile } from './hooks/use-export-json';
-import { useFetchDataOnMount } from './hooks/use-fetch-data';
-import { useFetchLog } from './hooks/use-fetch-log';
-import {
-  useSaveGraph,
-  useSaveGraphBeforeOpeningDebugDrawer,
-  useWatchAgentChange,
-} from './hooks/use-save-graph';
-import { LogSheet } from './log-sheet';
-import { SettingDialog } from './setting-dialog';
-import useGraphStore from './store';
-import { useAgentHistoryManager } from './use-agent-history-manager';
-import { VersionDialog } from './version-dialog';
-
-function AgentDropdownMenuItem({
-  children,
-  ...props
-}: ComponentPropsWithoutRef<typeof DropdownMenuItem>) {
-  return (
-    <DropdownMenuItem className="justify-start" {...props}>
-      {children}
-    </DropdownMenuItem>
-  );
-}
-
-export default function DataFlow() {
-  const { navigateToAgents } = useNavigatePage();
-  const {
-    visible: chatDrawerVisible,
-    hideModal: hideChatDrawer,
-    showModal: showChatDrawer,
-  } = useSetModalState();
-  const { t } = useTranslation();
-  useAgentHistoryManager();
-  const { handleExportJson } = useHandleExportOrImportJsonFile();
-  const { saveGraph, loading } = useSaveGraph();
-  const { flowDetail: agentDetail } = useFetchDataOnMount();
-  const { handleRun, loading: running } =
-    useSaveGraphBeforeOpeningDebugDrawer(showChatDrawer);
-
-  const {
-    visible: versionDialogVisible,
-    hideModal: hideVersionDialog,
-    showModal: showVersionDialog,
-  } = useSetModalState();
-
-  const {
-    visible: settingDialogVisible,
-    hideModal: hideSettingDialog,
-    showModal: showSettingDialog,
-  } = useSetModalState();
-
-  const {
-    visible: logSheetVisible,
-    showModal: showLogSheet,
-    hideModal: hideLogSheet,
-  } = useSetModalState();
-
-  const {
-    isParsing,
-    logs,
-    messageId,
-    setMessageId,
-    isCompleted,
-    stopFetchTrace,
-    isLogEmpty,
-  } = useFetchLog(logSheetVisible);
-
-  const [uploadedFileData, setUploadedFileData] =
-    useState<Record<string, any>>();
-  const findNodeByName = useGraphStore((state) => state.findNodeByName);
-
-  const handleRunAgent = useCallback(() => {
-    if (!findNodeByName(Operator.Tokenizer)) {
-      message.warning(t('dataflow.tokenizerRequired'));
-      return;
-    }
-
-    if (isParsing) {
-      // show log sheet
-      showLogSheet();
-    } else {
-      hideLogSheet();
-      handleRun();
-    }
-  }, [findNodeByName, handleRun, hideLogSheet, isParsing, showLogSheet, t]);
-
-  const { handleCancel } = useCancelCurrentDataflow({
-    messageId,
-    stopFetchTrace,
-  });
-
-  const time = useWatchAgentChange(chatDrawerVisible);
-
-  return (
-    <section className="h-full">
-      <PageHeader>
-        <section>
-          <Breadcrumb>
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbLink onClick={navigateToAgents}>
-                  Agent
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem>
-                <BreadcrumbPage>{agentDetail.title}</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-          <div className="text-xs text-text-secondary translate-y-3">
-            {t('flow.autosaved')} {time}
-          </div>
-        </section>
-        <div className="flex items-center gap-5">
-          <ButtonLoading
-            variant={'secondary'}
-            onClick={() => saveGraph()}
-            loading={loading}
-          >
-            <LaptopMinimalCheck /> {t('flow.save')}
-          </ButtonLoading>
-          <ButtonLoading
-            variant={'secondary'}
-            onClick={handleRunAgent}
-            loading={running}
-          >
-            <CirclePlay className={isParsing ? 'animate-spin' : ''} />
-
-            {isParsing || running ? t('dataflow.running') : t('flow.run')}
-          </ButtonLoading>
-          <Button variant={'secondary'} onClick={showVersionDialog}>
-            <History />
-            {t('flow.historyversion')}
-          </Button>
-          {/* <Button variant={'secondary'}>
-            <Send />
-            {t('flow.release')}
-          </Button> */}
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant={'secondary'}>
-                <ChevronDown /> {t('flow.management')}
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent>
-              <AgentDropdownMenuItem onClick={handleExportJson}>
-                <Upload />
-                {t('flow.export')}
-              </AgentDropdownMenuItem>
-              <DropdownMenuSeparator />
-              <AgentDropdownMenuItem onClick={showSettingDialog}>
-                <Settings />
-                {t('flow.setting')}
-              </AgentDropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      </PageHeader>
-      <LogContext.Provider
-        value={{ messageId, setMessageId, setUploadedFileData }}
-      >
-        <ReactFlowProvider>
-          <DropdownProvider>
-            <DataFlowCanvas
-              drawerVisible={chatDrawerVisible}
-              hideDrawer={hideChatDrawer}
-              showLogSheet={showLogSheet}
-            ></DataFlowCanvas>
-          </DropdownProvider>
-        </ReactFlowProvider>
-      </LogContext.Provider>
-      {versionDialogVisible && (
-        <DropdownProvider>
-          <VersionDialog hideModal={hideVersionDialog}></VersionDialog>
-        </DropdownProvider>
-      )}
-      {settingDialogVisible && (
-        <SettingDialog hideModal={hideSettingDialog}></SettingDialog>
-      )}
-      {logSheetVisible && (
-        <LogSheet
-          hideModal={hideLogSheet}
-          isParsing={isParsing}
-          isCompleted={isCompleted}
-          isLogEmpty={isLogEmpty}
-          logs={logs}
-          handleCancel={handleCancel}
-          messageId={messageId}
-          uploadedFileData={uploadedFileData}
-        ></LogSheet>
-      )}
-    </section>
-  );
-}
diff --git a/web/src/pages/data-flow/interface.ts b/web/src/pages/data-flow/interface.ts
deleted file mode 100644
index 0a6cba2f0..000000000
--- a/web/src/pages/data-flow/interface.ts
+++ /dev/null
@@ -1,43 +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 INextOperatorForm {
-  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)[];
-}
-
-export type IInputs = {
-  avatar: string;
-  title: string;
-  inputs: Record<string, BeginQuery>;
-  prologue: string;
-  mode: string;
-};
diff --git a/web/src/pages/data-flow/log-sheet/dataflow-timeline.tsx b/web/src/pages/data-flow/log-sheet/dataflow-timeline.tsx
deleted file mode 100644
index e15465baf..000000000
--- a/web/src/pages/data-flow/log-sheet/dataflow-timeline.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import {
-  Timeline,
-  TimelineContent,
-  TimelineHeader,
-  TimelineIndicator,
-  TimelineItem,
-  TimelineSeparator,
-  TimelineTitle,
-} from '@/components/originui/timeline';
-import { Progress } from '@/components/ui/progress';
-import { ITraceData } from '@/interfaces/database/agent';
-import { cn } from '@/lib/utils';
-import { isEmpty } from 'lodash';
-import { File } from 'lucide-react';
-import { useCallback } from 'react';
-import { Operator } from '../constant';
-import OperatorIcon from '../operator-icon';
-import useGraphStore from '../store';
-
-export type DataflowTimelineProps = {
-  traceList?: ITraceData[];
-};
-
-const END = 'END';
-
-interface DataflowTrace {
-  datetime: string;
-  elapsed_time: number;
-  message: string;
-  progress: number;
-  timestamp: number;
-}
-export function DataflowTimeline({ traceList }: DataflowTimelineProps) {
-  const getNode = useGraphStore((state) => state.getNode);
-
-  const getNodeData = useCallback(
-    (componentId: string) => {
-      return getNode(componentId)?.data;
-    },
-    [getNode],
-  );
-
-  const getNodeLabel = useCallback(
-    (componentId: string) => {
-      return getNodeData(componentId)?.label as Operator;
-    },
-    [getNodeData],
-  );
-
-  return (
-    <Timeline>
-      {Array.isArray(traceList) &&
-        traceList?.map((item, index) => {
-          const traces = item.trace as DataflowTrace[];
-          const nodeLabel = getNodeLabel(item.component_id);
-
-          const latest = traces[traces.length - 1];
-          const progress = latest.progress * 100;
-
-          return (
-            <TimelineItem
-              key={item.component_id}
-              step={index}
-              className="group-data-[orientation=vertical]/timeline:ms-10 group-data-[orientation=vertical]/timeline:not-last:pb-8 pb-6"
-            >
-              <TimelineHeader>
-                <TimelineSeparator className="group-data-[orientation=vertical]/timeline:-left-7 group-data-[orientation=vertical]/timeline:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=vertical]/timeline:translate-y-7 bg-accent-primary" />
-                <TimelineTitle className="">
-                  <TimelineContent
-                    className={cn(
-                      'text-foreground rounded-lg border px-4 py-3',
-                    )}
-                  >
-                    <section className="flex items-center justify-between mb-2">
-                      <span className="flex-1 truncate">
-                        {getNodeData(item.component_id)?.name || END}
-                      </span>
-                      <div className="flex-1 flex items-center gap-5">
-                        <Progress value={progress} className="h-1 flex-1" />
-                        <span className="text-accent-primary text-xs">
-                          {progress.toFixed(2)}%
-                        </span>
-                      </div>
-                    </section>
-                    <div className="divide-y space-y-1">
-                      {traces
-                        .filter((x) => !isEmpty(x.message))
-                        .map((x, idx) => (
-                          <section
-                            key={idx}
-                            className="text-text-secondary text-xs space-x-2 py-2.5 !m-0"
-                          >
-                            <span>{x.datetime}</span>
-                            {item.component_id !== 'END' && (
-                              <span
-                                className={cn({
-                                  'text-state-error':
-                                    x.message.startsWith('[ERROR]'),
-                                })}
-                              >
-                                {x.message}
-                              </span>
-                            )}
-                            <span>
-                              {x.elapsed_time.toString().slice(0, 6)}s
-                            </span>
-                          </section>
-                        ))}
-                    </div>
-                  </TimelineContent>
-                </TimelineTitle>
-                <TimelineIndicator
-                  className={cn(
-                    'border border-accent-primary group-data-completed/timeline-item:bg-primary group-data-completed/timeline-item:text-primary-foreground flex size-5 items-center justify-center group-data-[orientation=vertical]/timeline:-left-7',
-                    {
-                      'rounded bg-accent-primary': nodeLabel === Operator.Begin,
-                    },
-                  )}
-                >
-                  {item.component_id === END ? (
-                    <span className="rounded-full inline-block size-2 bg-accent-primary"></span>
-                  ) : nodeLabel === Operator.Begin ? (
-                    <File className="size-3.5 text-bg-base"></File>
-                  ) : (
-                    <OperatorIcon
-                      name={nodeLabel}
-                      className="size-3.5 rounded-full"
-                    ></OperatorIcon>
-                  )}
-                </TimelineIndicator>
-              </TimelineHeader>
-            </TimelineItem>
-          );
-        })}
-    </Timeline>
-  );
-}
diff --git a/web/src/pages/data-flow/log-sheet/index.tsx b/web/src/pages/data-flow/log-sheet/index.tsx
deleted file mode 100644
index 546d28328..000000000
--- a/web/src/pages/data-flow/log-sheet/index.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import { SkeletonCard } from '@/components/skeleton-card';
-import { Button } from '@/components/ui/button';
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
-import { useFetchAgent } from '@/hooks/use-agent-request';
-import { IModalProps } from '@/interfaces/common';
-import { cn } from '@/lib/utils';
-import { PipelineResultSearchParams } from '@/pages/dataflow-result/constant';
-import {
-  ArrowUpRight,
-  CirclePause,
-  Logs,
-  SquareArrowOutUpRight,
-} from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-import 'react18-json-view/src/style.css';
-import { useParams } from 'umi';
-import {
-  isEndOutputEmpty,
-  useDownloadOutput,
-} from '../hooks/use-download-output';
-import { UseFetchLogReturnType } from '../hooks/use-fetch-log';
-import { DataflowTimeline } from './dataflow-timeline';
-
-type LogSheetProps = IModalProps<any> & {
-  handleCancel(): void;
-  uploadedFileData?: Record<string, any>;
-} & Pick<
-    UseFetchLogReturnType,
-    'isCompleted' | 'isLogEmpty' | 'isParsing' | 'logs' | 'messageId'
-  >;
-
-export function LogSheet({
-  hideModal,
-  isParsing,
-  logs,
-  handleCancel,
-  isCompleted,
-  isLogEmpty,
-  messageId,
-  uploadedFileData,
-}: LogSheetProps) {
-  const { t } = useTranslation();
-  const { id } = useParams();
-  const { data: agent } = useFetchAgent();
-
-  const { handleDownloadJson } = useDownloadOutput(logs);
-  const { navigateToDataflowResult } = useNavigatePage();
-
-  return (
-    <Sheet open onOpenChange={hideModal} modal={false}>
-      <SheetContent
-        className={cn('top-20 h-auto flex flex-col p-0 gap-0')}
-        onInteractOutside={(e) => e.preventDefault()}
-      >
-        <SheetHeader className="p-5">
-          <SheetTitle className="flex items-center gap-2.5">
-            <Logs className="size-4" /> {t('flow.log')}
-            {isCompleted && (
-              <Button
-                variant={'ghost'}
-                onClick={navigateToDataflowResult({
-                  id: messageId, // 'log_id',
-                  [PipelineResultSearchParams.AgentId]: id, // 'agent_id',
-                  [PipelineResultSearchParams.DocumentId]: uploadedFileData?.id, //'doc_id',
-                  [PipelineResultSearchParams.AgentTitle]: agent.title, //'title',
-                  [PipelineResultSearchParams.IsReadOnly]: 'true',
-                  [PipelineResultSearchParams.Type]: 'dataflow',
-                  [PipelineResultSearchParams.CreatedBy]:
-                    uploadedFileData?.created_by,
-                  [PipelineResultSearchParams.DocumentExtension]:
-                    uploadedFileData?.extension,
-                })}
-              >
-                {t('dataflow.viewResult')} <ArrowUpRight />
-              </Button>
-            )}
-          </SheetTitle>
-        </SheetHeader>
-        <section className="flex-1 overflow-auto px-5 pt-5">
-          {isLogEmpty ? (
-            <SkeletonCard className="mt-2" />
-          ) : (
-            <DataflowTimeline traceList={logs}></DataflowTimeline>
-          )}
-        </section>
-        <div className="px-5 pb-5">
-          {isParsing ? (
-            <Button
-              className="w-full mt-8 bg-state-error/10 text-state-error hover:bg-state-error hover:text-bg-base"
-              onClick={handleCancel}
-            >
-              <CirclePause /> {t('dataflow.cancel')}
-            </Button>
-          ) : (
-            <Button
-              onClick={handleDownloadJson}
-              disabled={isEndOutputEmpty(logs)}
-              className="w-full mt-8 bg-accent-primary-5 text-text-secondary hover:bg-accent-primary-5  hover:text-accent-primary hover:border-accent-primary hover:border"
-            >
-              <SquareArrowOutUpRight />
-              {t('dataflow.exportJson')}
-            </Button>
-          )}
-        </div>
-      </SheetContent>
-    </Sheet>
-  );
-}
diff --git a/web/src/pages/data-flow/operator-icon.tsx b/web/src/pages/data-flow/operator-icon.tsx
deleted file mode 100644
index 187c84cf5..000000000
--- a/web/src/pages/data-flow/operator-icon.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { IconFont } from '@/components/icon-font';
-import { cn } from '@/lib/utils';
-import {
-  Blocks,
-  File,
-  FileChartColumnIncreasing,
-  FileStack,
-  Heading,
-  ListMinus,
-} from 'lucide-react';
-import { Operator } from './constant';
-
-interface IProps {
-  name: Operator;
-  className?: string;
-}
-
-export const OperatorIconMap = {
-  [Operator.Note]: 'notebook-pen',
-};
-
-export const SVGIconMap = {
-  [Operator.Begin]: File,
-  [Operator.Parser]: FileChartColumnIncreasing,
-  [Operator.Tokenizer]: ListMinus,
-  [Operator.Splitter]: Blocks,
-  [Operator.HierarchicalMerger]: Heading,
-  [Operator.Extractor]: FileStack,
-};
-
-const Empty = () => {
-  return <div className="hidden"></div>;
-};
-
-const OperatorIcon = ({ name, className }: IProps) => {
-  const Icon = OperatorIconMap[name as keyof typeof OperatorIconMap] || Empty;
-  const SvgIcon = SVGIconMap[name as keyof typeof SVGIconMap] || Empty;
-
-  if (name === Operator.Begin) {
-    return (
-      <div
-        className={cn(
-          'inline-block p-1 bg-accent-primary rounded-sm',
-          className,
-        )}
-      >
-        <File className="rounded size-3" />
-      </div>
-    );
-  }
-
-  return typeof Icon === 'string' ? (
-    <IconFont name={Icon} className={cn('size-5 ', className)}></IconFont>
-  ) : (
-    <SvgIcon className={cn('size-5', className)}></SvgIcon>
-  );
-};
-
-export default OperatorIcon;
diff --git a/web/src/pages/data-flow/run-sheet/index.tsx b/web/src/pages/data-flow/run-sheet/index.tsx
deleted file mode 100644
index 7ee9adc35..000000000
--- a/web/src/pages/data-flow/run-sheet/index.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { IModalProps } from '@/interfaces/common';
-import { cn } from '@/lib/utils';
-import { useTranslation } from 'react-i18next';
-import { RunDataflowType } from '../hooks/use-run-dataflow';
-import { UploaderForm } from './uploader';
-
-type RunSheetProps = IModalProps<any> &
-  Pick<RunDataflowType, 'run' | 'loading'>;
-
-const RunSheet = ({ hideModal, run, loading }: RunSheetProps) => {
-  const { t } = useTranslation();
-
-  return (
-    <Sheet onOpenChange={hideModal} open modal={false}>
-      <SheetContent className={cn('top-20 p-2')}>
-        <SheetHeader>
-          <SheetTitle>{t('flow.testRun')}</SheetTitle>
-          <UploaderForm ok={run} loading={loading}></UploaderForm>
-        </SheetHeader>
-      </SheetContent>
-    </Sheet>
-  );
-};
-
-export default RunSheet;
diff --git a/web/src/pages/data-flow/run-sheet/uploader.tsx b/web/src/pages/data-flow/run-sheet/uploader.tsx
deleted file mode 100644
index db4a977dd..000000000
--- a/web/src/pages/data-flow/run-sheet/uploader.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-'use client';
-
-import { z } from 'zod';
-
-import { RAGFlowFormItem } from '@/components/ragflow-form';
-import { ButtonLoading } from '@/components/ui/button';
-import { Form } from '@/components/ui/form';
-import { FileUploadDirectUpload } from '@/pages/agent/debug-content/uploader';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-
-const formSchema = z.object({
-  file: z.record(z.any()),
-});
-
-export type FormSchemaType = z.infer<typeof formSchema>;
-
-type UploaderFormProps = {
-  ok: (values: FormSchemaType) => void;
-  loading: boolean;
-};
-
-export function UploaderForm({ ok, loading }: UploaderFormProps) {
-  const { t } = useTranslation();
-  const form = useForm<FormSchemaType>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {},
-  });
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(ok)} className="space-y-8">
-        <RAGFlowFormItem name="file">
-          {(field) => {
-            return (
-              <FileUploadDirectUpload
-                value={field.value}
-                onChange={field.onChange}
-              ></FileUploadDirectUpload>
-            );
-          }}
-        </RAGFlowFormItem>
-
-        <div>
-          <ButtonLoading
-            type="submit"
-            loading={loading}
-            className="w-full mt-1"
-          >
-            {t('flow.run')}
-          </ButtonLoading>
-        </div>
-      </form>
-    </Form>
-  );
-}
diff --git a/web/src/pages/data-flow/setting-dialog/index.tsx b/web/src/pages/data-flow/setting-dialog/index.tsx
deleted file mode 100644
index 6d0e1e976..000000000
--- a/web/src/pages/data-flow/setting-dialog/index.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { ButtonLoading } from '@/components/ui/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { useSetAgentSetting } from '@/hooks/use-agent-request';
-import { IModalProps } from '@/interfaces/common';
-import { transformFile2Base64 } from '@/utils/file-util';
-import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  AgentSettingId,
-  SettingForm,
-  SettingFormSchemaType,
-} from './setting-form';
-
-export function SettingDialog({ hideModal }: IModalProps<any>) {
-  const { t } = useTranslation();
-  const { setAgentSetting } = useSetAgentSetting();
-
-  const submit = useCallback(
-    async (values: SettingFormSchemaType) => {
-      const avatar = values.avatar;
-      const code = await setAgentSetting({
-        ...values,
-        avatar: avatar.length > 0 ? await transformFile2Base64(avatar[0]) : '',
-      });
-      if (code === 0) {
-        hideModal?.();
-      }
-    },
-    [hideModal, setAgentSetting],
-  );
-
-  return (
-    <Dialog open onOpenChange={hideModal}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Are you absolutely sure?</DialogTitle>
-        </DialogHeader>
-        <SettingForm submit={submit}></SettingForm>
-        <DialogFooter>
-          <ButtonLoading type="submit" form={AgentSettingId} loading={false}>
-            {t('common.save')}
-          </ButtonLoading>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/web/src/pages/data-flow/setting-dialog/setting-form.tsx b/web/src/pages/data-flow/setting-dialog/setting-form.tsx
deleted file mode 100644
index e39ad2416..000000000
--- a/web/src/pages/data-flow/setting-dialog/setting-form.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import { z } from 'zod';
-
-import {
-  FileUpload,
-  FileUploadDropzone,
-  FileUploadItem,
-  FileUploadItemDelete,
-  FileUploadItemMetadata,
-  FileUploadItemPreview,
-  FileUploadList,
-  FileUploadTrigger,
-} from '@/components/file-upload';
-import { RAGFlowFormItem } from '@/components/ragflow-form';
-import { Button } from '@/components/ui/button';
-import { Form, FormControl, FormItem, FormLabel } from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
-import { Textarea } from '@/components/ui/textarea';
-import { useTranslate } from '@/hooks/common-hooks';
-import { useFetchAgent } from '@/hooks/use-agent-request';
-import { transformBase64ToFile } from '@/utils/file-util';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { CloudUpload, X } from 'lucide-react';
-import { useEffect } from 'react';
-import { useForm } from 'react-hook-form';
-
-const formSchema = z.object({
-  title: z.string().min(1, {}),
-  avatar: z.array(z.custom<File>()).optional().nullable(),
-  description: z.string().optional().nullable(),
-  permission: z.string(),
-});
-
-export type SettingFormSchemaType = z.infer<typeof formSchema>;
-
-export const AgentSettingId = 'agentSettingId';
-
-type SettingFormProps = {
-  submit: (values: SettingFormSchemaType) => void;
-};
-
-export function SettingForm({ submit }: SettingFormProps) {
-  const { t } = useTranslate('flow.settings');
-  const { data } = useFetchAgent();
-
-  const form = useForm<SettingFormSchemaType>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      title: '',
-      permission: 'me',
-    },
-  });
-
-  useEffect(() => {
-    form.reset({
-      title: data?.title,
-      description: data?.description,
-      avatar: data.avatar ? [transformBase64ToFile(data.avatar)] : [],
-      permission: data?.permission,
-    });
-  }, [data, form]);
-
-  return (
-    <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(submit)}
-        className="space-y-8"
-        id={AgentSettingId}
-      >
-        <RAGFlowFormItem name="title" label={t('title')}>
-          <Input />
-        </RAGFlowFormItem>
-        <RAGFlowFormItem name="avatar" label={t('photo')}>
-          {(field) => (
-            <FileUpload
-              value={field.value}
-              onValueChange={field.onChange}
-              accept="image/*"
-              maxFiles={1}
-              onFileReject={(_, message) => {
-                form.setError('avatar', {
-                  message,
-                });
-              }}
-              multiple
-            >
-              <FileUploadDropzone className="flex-row flex-wrap border-dotted text-center">
-                <CloudUpload className="size-4" />
-                Drag and drop or
-                <FileUploadTrigger asChild>
-                  <Button variant="link" size="sm" className="p-0">
-                    choose files
-                  </Button>
-                </FileUploadTrigger>
-                to upload
-              </FileUploadDropzone>
-              <FileUploadList>
-                {field.value?.map((file: File, index: number) => (
-                  <FileUploadItem key={index} value={file}>
-                    <FileUploadItemPreview />
-                    <FileUploadItemMetadata />
-                    <FileUploadItemDelete asChild>
-                      <Button variant="ghost" size="icon" className="size-7">
-                        <X />
-                        <span className="sr-only">Delete</span>
-                      </Button>
-                    </FileUploadItemDelete>
-                  </FileUploadItem>
-                ))}
-              </FileUploadList>
-            </FileUpload>
-          )}
-        </RAGFlowFormItem>
-        <RAGFlowFormItem name="description" label={t('description')}>
-          <Textarea rows={4} />
-        </RAGFlowFormItem>
-
-        <RAGFlowFormItem
-          name="permission"
-          label={t('permissions')}
-          tooltip={t('permissionsTip')}
-        >
-          {(field) => (
-            <RadioGroup
-              onValueChange={field.onChange}
-              value={field.value}
-              className="flex"
-            >
-              <FormItem className="flex items-center gap-3">
-                <FormControl>
-                  <RadioGroupItem value="me" id="me" />
-                </FormControl>
-                <FormLabel
-                  className="font-normal !m-0 cursor-pointer"
-                  htmlFor="me"
-                >
-                  {t('me')}
-                </FormLabel>
-              </FormItem>
-
-              <FormItem className="flex items-center gap-3">
-                <FormControl>
-                  <RadioGroupItem value="team" id="team" />
-                </FormControl>
-                <FormLabel
-                  className="font-normal !m-0 cursor-pointer"
-                  htmlFor="team"
-                >
-                  {t('team')}
-                </FormLabel>
-              </FormItem>
-            </RadioGroup>
-          )}
-        </RAGFlowFormItem>
-      </form>
-    </Form>
-  );
-}
diff --git a/web/src/pages/data-flow/store.ts b/web/src/pages/data-flow/store.ts
deleted file mode 100644
index 64fda97a4..000000000
--- a/web/src/pages/data-flow/store.ts
+++ /dev/null
@@ -1,442 +0,0 @@
-import { RAGFlowNodeType } from '@/interfaces/database/flow';
-import type {} from '@redux-devtools/extension';
-import {
-  Connection,
-  Edge,
-  EdgeChange,
-  EdgeMouseHandler,
-  OnConnect,
-  OnEdgesChange,
-  OnNodesChange,
-  OnSelectionChangeFunc,
-  OnSelectionChangeParams,
-  addEdge,
-  applyEdgeChanges,
-  applyNodeChanges,
-} from '@xyflow/react';
-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 { NodeHandleId, Operator, SwitchElseTo } from './constant';
-import {
-  duplicateNodeForm,
-  generateDuplicateNode,
-  generateNodeNamesWithIncreasingIndex,
-  getOperatorIndex,
-  isEdgeEqual,
-  mapEdgeMouseEvent,
-} from './utils';
-import { deleteAllDownstreamAgentsAndTool } from './utils/delete-node';
-
-export type RFState = {
-  nodes: RAGFlowNodeType[];
-  edges: Edge[];
-  selectedNodeIds: string[];
-  selectedEdgeIds: string[];
-  clickedNodeId: string; // currently selected node
-  clickedToolId: string; // currently selected tool id
-  onNodesChange: OnNodesChange<RAGFlowNodeType>;
-  onEdgesChange: OnEdgesChange;
-  onEdgeMouseEnter?: EdgeMouseHandler<Edge>;
-  /** This event handler is called when mouse of a user leaves an edge */
-  onEdgeMouseLeave?: EdgeMouseHandler<Edge>;
-  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;
-  updateNode: (node: RAGFlowNodeType) => void;
-  addEdge: (connection: Connection) => void;
-  getEdge: (id: string) => Edge | undefined;
-  updateSwitchFormData: (
-    source: string,
-    sourceHandle?: string | null,
-    target?: string | null,
-    isConnecting?: boolean,
-  ) => void;
-  duplicateNode: (id: string, name: string) => void;
-  deleteEdge: () => void;
-  deleteEdgeById: (id: string) => void;
-  deleteNodeById: (id: string) => void;
-  deleteAgentDownstreamNodesById: (id: string) => void;
-  deleteAgentToolNodeById: (id: string) => void;
-  deleteIterationNodeById: (id: string) => 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;
-  setClickedToolId: (id?: string) => void;
-  findUpstreamNodeById: (id?: string | null) => RAGFlowNodeType | undefined;
-  deleteEdgesBySourceAndSourceHandle: (
-    source: string,
-    sourceHandle: string,
-  ) => void; // Deleting a condition of a classification operator will delete the related edge
-  findAgentToolNodeById: (id: string | null) => string | undefined;
-  selectNodeIds: (nodeIds: string[]) => void;
-  hasChildNode: (nodeId: string) => boolean;
-};
-
-// 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: '',
-      clickedToolId: '',
-      onNodesChange: (changes) => {
-        set({
-          nodes: applyNodeChanges(changes, get().nodes),
-        });
-      },
-      onEdgesChange: (changes: EdgeChange[]) => {
-        set({
-          edges: applyEdgeChanges(changes, get().edges),
-        });
-      },
-      onEdgeMouseEnter: (event, edge) => {
-        const { edges, setEdges } = get();
-        const edgeId = edge.id;
-
-        // Updates edge
-        setEdges(mapEdgeMouseEvent(edges, edgeId, true));
-      },
-      onEdgeMouseLeave: (event, edge) => {
-        const { edges, setEdges } = get();
-        const edgeId = edge.id;
-
-        // Updates edge
-        setEdges(mapEdgeMouseEvent(edges, edgeId, false));
-      },
-      onConnect: (connection: Connection) => {
-        set({
-          edges: addEdge(connection, get().edges),
-        });
-      },
-      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) });
-      },
-      updateNode: (node) => {
-        const { nodes } = get();
-        const nextNodes = nodes.map((x) => {
-          if (x.id === node.id) {
-            return node;
-          }
-          return x;
-        });
-        set({ nodes: nextNodes });
-      },
-      getNode: (id?: string | null) => {
-        // console.log('getNode', id, get().nodes);
-        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),
-        });
-      },
-      getEdge: (id: string) => {
-        return get().edges.find((x) => x.id === id);
-      },
-      duplicateNode: (id: string, name: string) => {
-        const { getNode, addNode, generateNodeName } = get();
-        const node = getNode(id);
-
-        addNode({
-          ...(node || {}),
-          data: {
-            ...duplicateNodeForm(node?.data),
-            name: generateNodeName(name),
-          },
-          ...generateDuplicateNode(node?.position, node?.data?.label),
-        });
-      },
-      deleteEdge: () => {
-        const { edges, selectedEdgeIds } = get();
-        set({
-          edges: edges.filter((edge) =>
-            selectedEdgeIds.every((x) => x !== edge.id),
-          ),
-        });
-      },
-      deleteEdgeById: (id: string) => {
-        const { edges } = get();
-
-        set({
-          edges: edges.filter((edge) => edge.id !== id),
-        });
-      },
-      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),
-        });
-      },
-      deleteAgentDownstreamNodesById: (id) => {
-        const { edges, nodes } = get();
-
-        const { downstreamAgentAndToolNodeIds, downstreamAgentAndToolEdges } =
-          deleteAllDownstreamAgentsAndTool(id, edges);
-
-        set({
-          nodes: nodes.filter(
-            (node) =>
-              !downstreamAgentAndToolNodeIds.some((x) => x === node.id) &&
-              node.id !== id,
-          ),
-          edges: edges.filter(
-            (edge) =>
-              edge.source !== id &&
-              edge.target !== id &&
-              !downstreamAgentAndToolEdges.some((x) => x.id === edge.id),
-          ),
-        });
-      },
-      deleteAgentToolNodeById: (id) => {
-        const { edges, deleteEdgeById, deleteNodeById } = get();
-
-        const edge = edges.find(
-          (x) => x.source === id && x.sourceHandle === NodeHandleId.Tool,
-        );
-
-        if (edge) {
-          deleteEdgeById(edge.id);
-          deleteNodeById(edge.target);
-        }
-      },
-      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, isConnecting) => {
-        const { updateNodeForm, edges } = get();
-        if (sourceHandle) {
-          // A handle will connect to multiple downstream nodes
-          let currentHandleTargets = edges
-            .filter(
-              (x) =>
-                x.source === source &&
-                x.sourceHandle === sourceHandle &&
-                typeof x.target === 'string',
-            )
-            .map((x) => x.target);
-
-          let targets: string[] = currentHandleTargets;
-          if (target) {
-            if (!isConnecting) {
-              targets = currentHandleTargets.filter((x) => x !== target);
-            }
-          }
-
-          if (sourceHandle === SwitchElseTo) {
-            updateNodeForm(source, targets, [SwitchElseTo]);
-          } else {
-            const operatorIndex = getOperatorIndex(sourceHandle);
-            if (operatorIndex) {
-              updateNodeForm(source, targets, [
-                '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);
-      },
-      setClickedToolId: (id?: string) => {
-        set({ clickedToolId: id });
-      },
-      findUpstreamNodeById: (id) => {
-        const { edges, getNode } = get();
-        const edge = edges.find((x) => x.target === id);
-        return getNode(edge?.source);
-      },
-      deleteEdgesBySourceAndSourceHandle: (source, sourceHandle) => {
-        const { edges, setEdges } = get();
-        setEdges(
-          edges.filter(
-            (edge) =>
-              !(edge.source === source && edge.sourceHandle === sourceHandle),
-          ),
-        );
-      },
-      findAgentToolNodeById: (id) => {
-        const { edges } = get();
-        return edges.find(
-          (edge) =>
-            edge.source === id && edge.sourceHandle === NodeHandleId.Tool,
-        )?.target;
-      },
-      selectNodeIds: (nodeIds) => {
-        const { nodes, setNodes } = get();
-        setNodes(
-          nodes.map((node) => ({
-            ...node,
-            selected: nodeIds.includes(node.id),
-          })),
-        );
-      },
-      hasChildNode: (nodeId) => {
-        const { edges } = get();
-        return edges.some((edge) => edge.source === nodeId);
-      },
-    })),
-    { name: 'graph', trace: true },
-  ),
-);
-
-export default useGraphStore;
diff --git a/web/src/pages/data-flow/use-agent-history-manager.ts b/web/src/pages/data-flow/use-agent-history-manager.ts
deleted file mode 100644
index 50c108cf4..000000000
--- a/web/src/pages/data-flow/use-agent-history-manager.ts
+++ /dev/null
@@ -1,163 +0,0 @@
-import { useEffect, useRef } from 'react';
-import useGraphStore from './store';
-
-// History management class
-export class HistoryManager {
-  private history: { nodes: any[]; edges: any[] }[] = [];
-  private currentIndex: number = -1;
-  private readonly maxSize: number = 50; // Limit maximum number of history records
-  private setNodes: (nodes: any[]) => void;
-  private setEdges: (edges: any[]) => void;
-  private lastSavedState: string = ''; // Used to compare if state has changed
-
-  constructor(
-    setNodes: (nodes: any[]) => void,
-    setEdges: (edges: any[]) => void,
-  ) {
-    this.setNodes = setNodes;
-    this.setEdges = setEdges;
-  }
-
-  // Compare if two states are equal
-  private statesEqual(
-    state1: { nodes: any[]; edges: any[] },
-    state2: { nodes: any[]; edges: any[] },
-  ): boolean {
-    return JSON.stringify(state1) === JSON.stringify(state2);
-  }
-
-  push(nodes: any[], edges: any[]) {
-    const currentState = {
-      nodes: JSON.parse(JSON.stringify(nodes)),
-      edges: JSON.parse(JSON.stringify(edges)),
-    };
-
-    // If state hasn't changed, don't save
-    if (
-      this.history.length > 0 &&
-      this.statesEqual(currentState, this.history[this.currentIndex])
-    ) {
-      return;
-    }
-
-    // If current index is not at the end of history, remove subsequent states
-    if (this.currentIndex < this.history.length - 1) {
-      this.history.splice(this.currentIndex + 1);
-    }
-
-    // Add current state
-    this.history.push(currentState);
-
-    // Limit history record size
-    if (this.history.length > this.maxSize) {
-      this.history.shift();
-      this.currentIndex = this.history.length - 1;
-    } else {
-      this.currentIndex = this.history.length - 1;
-    }
-
-    // Update last saved state
-    this.lastSavedState = JSON.stringify(currentState);
-  }
-
-  undo() {
-    if (this.canUndo()) {
-      this.currentIndex--;
-      const prevState = this.history[this.currentIndex];
-      this.setNodes(JSON.parse(JSON.stringify(prevState.nodes)));
-      this.setEdges(JSON.parse(JSON.stringify(prevState.edges)));
-      return true;
-    }
-    return false;
-  }
-
-  redo() {
-    console.log('redo');
-    if (this.canRedo()) {
-      this.currentIndex++;
-      const nextState = this.history[this.currentIndex];
-      this.setNodes(JSON.parse(JSON.stringify(nextState.nodes)));
-      this.setEdges(JSON.parse(JSON.stringify(nextState.edges)));
-      return true;
-    }
-    return false;
-  }
-
-  canUndo() {
-    return this.currentIndex > 0;
-  }
-
-  canRedo() {
-    return this.currentIndex < this.history.length - 1;
-  }
-
-  // Reset history records
-  reset() {
-    this.history = [];
-    this.currentIndex = -1;
-    this.lastSavedState = '';
-  }
-}
-
-export const useAgentHistoryManager = () => {
-  // Get current state and history state
-  const nodes = useGraphStore((state) => state.nodes);
-  const edges = useGraphStore((state) => state.edges);
-  const setNodes = useGraphStore((state) => state.setNodes);
-  const setEdges = useGraphStore((state) => state.setEdges);
-
-  // Use useRef to keep HistoryManager instance unchanged
-  const historyManagerRef = useRef<HistoryManager | null>(null);
-
-  // Initialize HistoryManager
-  if (!historyManagerRef.current) {
-    historyManagerRef.current = new HistoryManager(setNodes, setEdges);
-  }
-
-  const historyManager = historyManagerRef.current;
-
-  // Save state history - use useEffect instead of useMemo to avoid re-rendering
-  useEffect(() => {
-    historyManager.push(nodes, edges);
-  }, [nodes, edges, historyManager]);
-
-  // Keyboard event handling
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      // Check if focused on an input element
-      const activeElement = document.activeElement;
-      const isInputFocused =
-        activeElement instanceof HTMLInputElement ||
-        activeElement instanceof HTMLTextAreaElement ||
-        activeElement?.hasAttribute('contenteditable');
-
-      // Skip keyboard shortcuts if typing in an input field
-      if (isInputFocused) {
-        return;
-      }
-      // Ctrl+Z or Cmd+Z undo
-      if (
-        (e.ctrlKey || e.metaKey) &&
-        (e.key === 'z' || e.key === 'Z') &&
-        !e.shiftKey
-      ) {
-        e.preventDefault();
-        historyManager.undo();
-      }
-      // Ctrl+Shift+Z or Cmd+Shift+Z redo
-      else if (
-        (e.ctrlKey || e.metaKey) &&
-        (e.key === 'z' || e.key === 'Z') &&
-        e.shiftKey
-      ) {
-        e.preventDefault();
-        historyManager.redo();
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [historyManager]);
-};
diff --git a/web/src/pages/data-flow/utils.ts b/web/src/pages/data-flow/utils.ts
deleted file mode 100644
index 8913f7f3e..000000000
--- a/web/src/pages/data-flow/utils.ts
+++ /dev/null
@@ -1,424 +0,0 @@
-import { IAgentForm } from '@/interfaces/database/agent';
-import { DSLComponents, RAGFlowNodeType } from '@/interfaces/database/flow';
-import { Edge, XYPosition } from '@xyflow/react';
-import { FormInstance, FormListFieldData } from 'antd';
-import { humanId } from 'human-id';
-import { curry, get, intersectionWith, isEmpty, isEqual, sample } from 'lodash';
-import pipe from 'lodash/fp/pipe';
-import isObject from 'lodash/isObject';
-import {
-  CategorizeAnchorPointPositions,
-  FileType,
-  FileTypeSuffixMap,
-  NoDebugOperatorsList,
-  NodeHandleId,
-  Operator,
-} from './constant';
-import { ExtractorFormSchemaType } from './form/extractor-form';
-import { HierarchicalMergerFormSchemaType } from './form/hierarchical-merger-form';
-import { ParserFormSchemaType } from './form/parser-form';
-import { SplitterFormSchemaType } from './form/splitter-form';
-import { IPosition } from './interface';
-
-const buildComponentDownstreamOrUpstream = (
-  edges: Edge[],
-  nodeId: string,
-  isBuildDownstream = true,
-) => {
-  return edges
-    .filter((y) => {
-      let isNotUpstreamTool = true;
-      let isNotUpstreamAgent = true;
-      let isNotExceptionGoto = true;
-
-      return (
-        y[isBuildDownstream ? 'source' : 'target'] === nodeId &&
-        isNotUpstreamTool &&
-        isNotUpstreamAgent &&
-        isNotExceptionGoto
-      );
-    })
-    .map((y) => y[isBuildDownstream ? 'target' : 'source']);
-};
-
-const removeUselessDataInTheOperator = curry(
-  (operatorName: string, params: Record<string, unknown>) => {
-    // if (operatorName === Operator.Categorize) {
-    //   return removeUselessFieldsFromValues(params, '');
-    // }
-    return params;
-  },
-);
-
-const buildOperatorParams = (operatorName: string) =>
-  pipe(
-    removeUselessDataInTheOperator(operatorName),
-    // initializeOperatorParams(operatorName), // Final processing, for guarantee
-  );
-
-const ExcludeOperators = [Operator.Note];
-
-export function isBottomSubAgent(edges: Edge[], nodeId?: string) {
-  const edge = edges.find(
-    (x) => x.target === nodeId && x.targetHandle === NodeHandleId.AgentTop,
-  );
-  return !!edge;
-}
-// Because the array of react-hook-form must be object data,
-// it needs to be converted into a simple data type array required by the backend
-function transformObjectArrayToPureArray(
-  list: Array<Record<string, any>>,
-  field: string,
-) {
-  return Array.isArray(list)
-    ? list.filter((x) => !isEmpty(x[field])).map((y) => y[field])
-    : [];
-}
-
-function transformParserParams(params: ParserFormSchemaType) {
-  const setups = params.setups.reduce<
-    Record<string, ParserFormSchemaType['setups'][0]>
-  >((pre, cur) => {
-    if (cur.fileFormat) {
-      let filteredSetup: Partial<
-        ParserFormSchemaType['setups'][0] & { suffix: string[] }
-      > = {
-        output_format: cur.output_format,
-        suffix: FileTypeSuffixMap[cur.fileFormat as FileType],
-      };
-
-      switch (cur.fileFormat) {
-        case FileType.PDF:
-          filteredSetup = {
-            ...filteredSetup,
-            parse_method: cur.parse_method,
-            lang: cur.lang,
-          };
-          break;
-        case FileType.Image:
-          filteredSetup = {
-            ...filteredSetup,
-            parse_method: cur.parse_method,
-            lang: cur.lang,
-            system_prompt: cur.system_prompt,
-          };
-          break;
-        case FileType.Email:
-          filteredSetup = {
-            ...filteredSetup,
-            fields: cur.fields,
-          };
-          break;
-        case FileType.Video:
-        case FileType.Audio:
-          filteredSetup = {
-            ...filteredSetup,
-            llm_id: cur.llm_id,
-          };
-          break;
-        default:
-          break;
-      }
-
-      pre[cur.fileFormat] = filteredSetup;
-    }
-    return pre;
-  }, {});
-
-  return { ...params, setups };
-}
-
-function transformSplitterParams(params: SplitterFormSchemaType) {
-  return {
-    ...params,
-    overlapped_percent: Number(params.overlapped_percent) / 100,
-    delimiters: transformObjectArrayToPureArray(params.delimiters, 'value'),
-  };
-}
-
-function transformHierarchicalMergerParams(
-  params: HierarchicalMergerFormSchemaType,
-) {
-  const levels = params.levels.map((x) =>
-    transformObjectArrayToPureArray(x.expressions, 'expression'),
-  );
-
-  return { ...params, hierarchy: Number(params.hierarchy), levels };
-}
-
-function transformExtractorParams(params: ExtractorFormSchemaType) {
-  return { ...params, prompts: [{ content: params.prompts, role: 'user' }] };
-}
-
-// 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) =>
-        !ExcludeOperators.some((y) => y === x.data.label) &&
-        !isBottomSubAgent(edges, x.id),
-    )
-    .forEach((x) => {
-      const id = x.id;
-      const operatorName = x.data.label;
-      let params = x?.data.form ?? {};
-
-      switch (operatorName) {
-        case Operator.Parser:
-          params = transformParserParams(params);
-          break;
-
-        case Operator.Splitter:
-          params = transformSplitterParams(params);
-          break;
-
-        case Operator.HierarchicalMerger:
-          params = transformHierarchicalMergerParams(params);
-          break;
-        case Operator.Extractor:
-          params = transformExtractorParams(params);
-          break;
-
-        default:
-          break;
-      }
-
-      components[id] = {
-        obj: {
-          ...(oldDslComponents[id]?.obj ?? {}),
-          component_name: operatorName,
-          params: buildOperatorParams(operatorName)(params) ?? {},
-        },
-        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 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 ?? {}) };
-
-  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);
-};
-
-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),
-  };
-};
-
-export function convertToStringArray(
-  list?: Array<{ value: string | number | boolean }>,
-) {
-  if (!Array.isArray(list)) {
-    return [];
-  }
-  return list.map((x) => x.value);
-}
-
-export function convertToObjectArray(list: Array<string | number | boolean>) {
-  if (!Array.isArray(list)) {
-    return [];
-  }
-  return list.map((x) => ({ value: x }));
-}
-
-export function getAgentNodeTools(agentNode?: RAGFlowNodeType) {
-  const tools: IAgentForm['tools'] = get(agentNode, 'data.form.tools', []);
-  return tools;
-}
-
-export function mapEdgeMouseEvent(
-  edges: Edge[],
-  edgeId: string,
-  isHovered: boolean,
-) {
-  const nextEdges = edges.map((element) =>
-    element.id === edgeId
-      ? {
-          ...element,
-          data: {
-            ...element.data,
-            isHovered,
-          },
-        }
-      : element,
-  );
-
-  return nextEdges;
-}
diff --git a/web/src/pages/data-flow/utils/build-output-list.ts b/web/src/pages/data-flow/utils/build-output-list.ts
deleted file mode 100644
index 5a9452965..000000000
--- a/web/src/pages/data-flow/utils/build-output-list.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { OutputType } from '../form/components/output';
-
-export function buildOutputList(outputs: Record<string, Record<string, any>>) {
-  return Object.entries(outputs).reduce<OutputType[]>((pre, [key, val]) => {
-    pre.push({ title: key, type: val.type });
-    return pre;
-  }, []);
-}
diff --git a/web/src/pages/data-flow/utils/delete-node.ts b/web/src/pages/data-flow/utils/delete-node.ts
deleted file mode 100644
index 4f1c18ebc..000000000
--- a/web/src/pages/data-flow/utils/delete-node.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Edge } from '@xyflow/react';
-import { filterAllDownstreamAgentAndToolNodeIds } from './filter-downstream-nodes';
-
-// Delete all downstream agent and tool operators of the current agent operator
-export function deleteAllDownstreamAgentsAndTool(
-  nodeId: string,
-  edges: Edge[],
-) {
-  const downstreamAgentAndToolNodeIds = filterAllDownstreamAgentAndToolNodeIds(
-    edges,
-    [nodeId],
-  );
-
-  const downstreamAgentAndToolEdges = downstreamAgentAndToolNodeIds.reduce<
-    Edge[]
-  >((pre, cur) => {
-    const relatedEdges = edges.filter(
-      (x) => x.source === cur || x.target === cur,
-    );
-
-    relatedEdges.forEach((x) => {
-      if (!pre.some((y) => y.id !== x.id)) {
-        pre.push(x);
-      }
-    });
-
-    return pre;
-  }, []);
-
-  return {
-    downstreamAgentAndToolNodeIds,
-    downstreamAgentAndToolEdges,
-  };
-}
diff --git a/web/src/pages/data-flow/utils/filter-downstream-nodes.ts b/web/src/pages/data-flow/utils/filter-downstream-nodes.ts
deleted file mode 100644
index f376caff5..000000000
--- a/web/src/pages/data-flow/utils/filter-downstream-nodes.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { Edge } from '@xyflow/react';
-import { NodeHandleId } from '../constant';
-
-// Get all downstream node ids
-export function filterAllDownstreamNodeIds(
-  edges: Edge[],
-  nodeIds: string[],
-  predicate: (edge: Edge) => boolean,
-) {
-  return nodeIds.reduce<string[]>((pre, nodeId) => {
-    const currentEdges = edges.filter(
-      (x) => x.source === nodeId && predicate(x),
-    );
-
-    const downstreamNodeIds: string[] = currentEdges.map((x) => x.target);
-
-    const ids = downstreamNodeIds.concat(
-      filterAllDownstreamNodeIds(edges, downstreamNodeIds, predicate),
-    );
-
-    ids.forEach((x) => {
-      if (pre.every((y) => y !== x)) {
-        pre.push(x);
-      }
-    });
-
-    return pre;
-  }, []);
-}
-
-// Get all downstream agent and tool operators of the current agent operator
-export function filterAllDownstreamAgentAndToolNodeIds(
-  edges: Edge[],
-  nodeIds: string[],
-) {
-  return filterAllDownstreamNodeIds(
-    edges,
-    nodeIds,
-    (edge: Edge) =>
-      edge.sourceHandle === NodeHandleId.AgentBottom ||
-      edge.sourceHandle === NodeHandleId.Tool,
-  );
-}
-
-// Get all downstream agent operators of the current agent operator
-export function filterAllDownstreamAgentNodeIds(
-  edges: Edge[],
-  nodeIds: string[],
-) {
-  return filterAllDownstreamNodeIds(
-    edges,
-    nodeIds,
-    (edge: Edge) => edge.sourceHandle === NodeHandleId.AgentBottom,
-  );
-}
-// The direct child agent node of the current node
-export function filterDownstreamAgentNodeIds(edges: Edge[], nodeId?: string) {
-  return edges
-    .filter(
-      (x) => x.source === nodeId && x.sourceHandle === NodeHandleId.AgentBottom,
-    )
-    .map((x) => x.target);
-}
diff --git a/web/src/pages/data-flow/version-dialog/index.tsx b/web/src/pages/data-flow/version-dialog/index.tsx
deleted file mode 100644
index 1e61ee291..000000000
--- a/web/src/pages/data-flow/version-dialog/index.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import { AgentBackground } from '@/components/canvas/background';
-import Spotlight from '@/components/spotlight';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
-import { Spin } from '@/components/ui/spin';
-import { useClientPagination } from '@/hooks/logic-hooks/use-pagination';
-import {
-  useFetchVersion,
-  useFetchVersionList,
-} from '@/hooks/use-agent-request';
-import { IModalProps } from '@/interfaces/common';
-import { cn } from '@/lib/utils';
-import { formatDate } from '@/utils/date';
-import { downloadJsonFile } from '@/utils/file-util';
-import { ConnectionMode, ReactFlow, ReactFlowProvider } from '@xyflow/react';
-import { ArrowDownToLine } from 'lucide-react';
-import { ReactNode, useCallback, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { nodeTypes } from '../canvas';
-
-export function VersionDialog({
-  hideModal,
-}: IModalProps<any> & { initialName?: string; title?: ReactNode }) {
-  const { t } = useTranslation();
-  const { data, loading } = useFetchVersionList();
-  const [selectedId, setSelectedId] = useState<string>('');
-  const { data: agent, loading: versionLoading } = useFetchVersion(selectedId);
-
-  const { page, pageSize, onPaginationChange, pagedList } =
-    useClientPagination(data);
-
-  const handleClick = useCallback(
-    (id: string) => () => {
-      setSelectedId(id);
-    },
-    [],
-  );
-
-  const downloadFile = useCallback(() => {
-    const graph = agent?.dsl.graph;
-    if (graph) {
-      downloadJsonFile(graph, agent?.title);
-    }
-  }, [agent?.dsl.graph, agent?.title]);
-
-  useEffect(() => {
-    if (data.length > 0) {
-      setSelectedId(data[0].id);
-    }
-  }, [data]);
-
-  return (
-    <Dialog open onOpenChange={hideModal}>
-      <DialogContent className="max-w-[60vw]">
-        <DialogHeader>
-          <DialogTitle className="text-base">
-            {t('flow.historyversion')}
-          </DialogTitle>
-        </DialogHeader>
-        <section className="flex gap-8 relative">
-          <div className="w-1/3 max-h-[60vh] overflow-auto min-h-[40vh]">
-            {loading ? (
-              <Spin className="top-1/2"></Spin>
-            ) : (
-              <ul className="space-y-4 text-sm">
-                {pagedList.map((x) => (
-                  <li
-                    key={x.id}
-                    className={cn('cursor-pointer p-2', {
-                      'bg-card rounded-md ': x.id === selectedId,
-                    })}
-                    onClick={handleClick(x.id)}
-                  >
-                    {x.title}
-                  </li>
-                ))}
-              </ul>
-            )}
-          </div>
-          <div className="relative flex-1 ">
-            {versionLoading ? (
-              <Spin className="top-1/2" />
-            ) : (
-              <Card className="h-full">
-                <CardContent className="h-full p-5 flex flex-col">
-                  <section className="flex justify-between">
-                    <div>
-                      <div className="pb-1 truncate">{agent?.title}</div>
-                      <p className="text-text-secondary text-xs">
-                        Created: {formatDate(agent?.create_date)}
-                      </p>
-                    </div>
-                    <Button variant={'ghost'} onClick={downloadFile}>
-                      <ArrowDownToLine />
-                    </Button>
-                  </section>
-                  <section className="relative flex-1">
-                    <ReactFlowProvider key={`flow-${selectedId}`}>
-                      <ReactFlow
-                        connectionMode={ConnectionMode.Loose}
-                        nodes={agent?.dsl.graph?.nodes || []}
-                        edges={
-                          agent?.dsl.graph?.edges.flatMap((x) => ({
-                            ...x,
-                            type: 'default',
-                          })) || []
-                        }
-                        fitView
-                        nodeTypes={nodeTypes}
-                        edgeTypes={{}}
-                        zoomOnScroll={true}
-                        panOnDrag={true}
-                        zoomOnDoubleClick={false}
-                        preventScrolling={true}
-                        minZoom={0.1}
-                      >
-                        <AgentBackground></AgentBackground>
-                        <Spotlight className="z-0" opcity={0.7} coverage={70} />
-                      </ReactFlow>
-                    </ReactFlowProvider>
-                  </section>
-                </CardContent>
-              </Card>
-            )}
-          </div>
-        </section>
-        <RAGFlowPagination
-          total={data.length}
-          current={page}
-          pageSize={pageSize}
-          onChange={onPaginationChange}
-        ></RAGFlowPagination>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/web/src/pages/profile-setting/mcp/index.tsx b/web/src/pages/profile-setting/mcp/index.tsx
index 70774c055..0fddfff65 100644
--- a/web/src/pages/profile-setting/mcp/index.tsx
+++ b/web/src/pages/profile-setting/mcp/index.tsx
@@ -1,13 +1,22 @@
-import { BulkOperateBar } from '@/components/bulk-operate-bar';
 import { CardContainer } from '@/components/card-container';
+import { ConfirmDeleteDialog } from '@/components/confirm-delete-dialog';
 import Spotlight from '@/components/spotlight';
 import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
 import { SearchInput } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
 import { useListMcpServer } from '@/hooks/use-mcp-request';
 import { pick } from 'lodash';
-import { Plus, SquareArrowOutDownLeft } from 'lucide-react';
-import { useCallback } from 'react';
+import {
+  Download,
+  LayoutList,
+  ListChecks,
+  Plus,
+  Trash2,
+  Upload,
+} from 'lucide-react';
+import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ProfileSettingWrapperCard } from '../components';
 import { EditMcpDialog } from './edit-mcp-dialog';
@@ -22,11 +31,19 @@ export default function McpServer() {
     useListMcpServer();
   const { editVisible, showEditModal, hideEditModal, handleOk, id, loading } =
     useEditMcp();
-  const { list, selectedList, handleSelectChange } = useBulkOperateMCP();
+  const {
+    selectedList,
+    handleSelectChange,
+    handleDelete,
+    handleExportMcp,
+    handleSelectAll,
+  } = useBulkOperateMCP(data.mcp_servers);
   const { t } = useTranslation();
   const { importVisible, showImportModal, hideImportModal, onImportOk } =
     useImportMcp();
 
+  const [isSelectionMode, setSelectionMode] = useState(false);
+
   const handlePageChange = useCallback(
     (page: number, pageSize?: number) => {
       setPagination({ page, pageSize });
@@ -34,6 +51,10 @@ export default function McpServer() {
     [setPagination],
   );
 
+  const switchSelectionMode = useCallback(() => {
+    setSelectionMode((prev) => !prev);
+  }, []);
+
   return (
     <ProfileSettingWrapperCard
       header={
@@ -51,23 +72,51 @@ export default function McpServer() {
                 value={searchString}
                 onChange={handleInputChange}
               ></SearchInput>
-              <Button onClick={showEditModal('')}>
-                <Plus /> {t('mcp.addMCP')}
+              <Button variant={'secondary'} onClick={switchSelectionMode}>
+                {isSelectionMode ? (
+                  <ListChecks className="size-3.5" />
+                ) : (
+                  <LayoutList className="size-3.5" />
+                )}
+                {t(`mcp.${isSelectionMode ? 'exitBulkManage' : 'bulkManage'}`)}
               </Button>
-              <Button variant={'secondary'} onClick={showImportModal}>
-                <SquareArrowOutDownLeft /> {t('mcp.import')}
+              <Button variant={'secondary'} onClick={showEditModal('')}>
+                <Plus className="size-3.5" /> {t('mcp.addMCP')}
+              </Button>
+              <Button onClick={showImportModal}>
+                <Download className="size-3.5" />
+                {t('mcp.import')}
               </Button>
             </div>
           </section>
         </>
       }
     >
-      {selectedList.length > 0 && (
-        <BulkOperateBar
-          list={list}
-          count={selectedList.length}
-          className="mb-2.5"
-        ></BulkOperateBar>
+      {isSelectionMode && (
+        <section className="pb-5 flex items-center">
+          <Checkbox id="all" onCheckedChange={handleSelectAll} />
+          <Label
+            className="pl-2 text-text-primary cursor-pointer"
+            htmlFor="all"
+          >
+            {t('common.selectAll')}
+          </Label>
+          <span className="text-text-secondary pr-10 pl-5">
+            {t('mcp.selected')} {selectedList.length}
+          </span>
+          <div className="flex gap-10 items-center">
+            <Button variant={'secondary'} onClick={handleExportMcp}>
+              <Upload className="size-3.5"></Upload>
+              {t('mcp.export')}
+            </Button>
+            <ConfirmDeleteDialog onOk={handleDelete}>
+              <Button variant={'danger'}>
+                <Trash2 className="size-3.5 cursor-pointer" />
+                {t('common.delete')}
+              </Button>
+            </ConfirmDeleteDialog>
+          </div>
+        </section>
       )}
       <CardContainer>
         {data.mcp_servers.map((item) => (
@@ -77,6 +126,7 @@ export default function McpServer() {
             selectedList={selectedList}
             handleSelectChange={handleSelectChange}
             showEditModal={showEditModal}
+            isSelectionMode={isSelectionMode}
           ></McpCard>
         ))}
       </CardContainer>
diff --git a/web/src/pages/profile-setting/mcp/mcp-card.tsx b/web/src/pages/profile-setting/mcp/mcp-card.tsx
index f899bc8a1..b0cfcd162 100644
--- a/web/src/pages/profile-setting/mcp/mcp-card.tsx
+++ b/web/src/pages/profile-setting/mcp/mcp-card.tsx
@@ -1,4 +1,3 @@
-import { MoreButton } from '@/components/more-button';
 import { Card, CardContent } from '@/components/ui/card';
 import { Checkbox } from '@/components/ui/checkbox';
 import { IMcpServer } from '@/interfaces/database/mcp';
@@ -6,12 +5,13 @@ import { formatDate } from '@/utils/date';
 import { isPlainObject } from 'lodash';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { McpDropdown } from './mcp-dropdown';
+import { McpOperation } from './mcp-operation';
 import { UseBulkOperateMCPReturnType } from './use-bulk-operate-mcp';
 import { UseEditMcpReturnType } from './use-edit-mcp';
 
 export type DatasetCardProps = {
   data: IMcpServer;
+  isSelectionMode: boolean;
 } & Pick<UseBulkOperateMCPReturnType, 'handleSelectChange' | 'selectedList'> &
   Pick<UseEditMcpReturnType, 'showEditModal'>;
 
@@ -20,6 +20,7 @@ export function McpCard({
   selectedList,
   handleSelectChange,
   showEditModal,
+  isSelectionMode,
 }: DatasetCardProps) {
   const { t } = useTranslation();
   const toolLength = useMemo(() => {
@@ -34,6 +35,7 @@ export function McpCard({
       handleSelectChange(data.id, checked);
     }
   };
+
   return (
     <Card key={data.id}>
       <CardContent className="p-2.5 pt-2 group">
@@ -42,16 +44,20 @@ export function McpCard({
             {data.name}
           </h3>
           <div className="space-x-4">
-            <McpDropdown mcpId={data.id} showEditModal={showEditModal}>
-              <MoreButton></MoreButton>
-            </McpDropdown>
-            <Checkbox
-              checked={selectedList.includes(data.id)}
-              onCheckedChange={onCheckedChange}
-              onClick={(e) => {
-                e.stopPropagation();
-              }}
-            />
+            {isSelectionMode ? (
+              <Checkbox
+                checked={selectedList.includes(data.id)}
+                onCheckedChange={onCheckedChange}
+                onClick={(e) => {
+                  e.stopPropagation();
+                }}
+              />
+            ) : (
+              <McpOperation
+                mcpId={data.id}
+                showEditModal={showEditModal}
+              ></McpOperation>
+            )}
           </div>
         </section>
         <div className="flex justify-between items-end text-xs text-text-secondary">
diff --git a/web/src/pages/profile-setting/mcp/mcp-dropdown.tsx b/web/src/pages/profile-setting/mcp/mcp-dropdown.tsx
deleted file mode 100644
index 28f4cb2a5..000000000
--- a/web/src/pages/profile-setting/mcp/mcp-dropdown.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { ConfirmDeleteDialog } from '@/components/confirm-delete-dialog';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { useDeleteMcpServer } from '@/hooks/use-mcp-request';
-import { PenLine, Trash2, Upload } from 'lucide-react';
-import { MouseEventHandler, PropsWithChildren, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { UseEditMcpReturnType } from './use-edit-mcp';
-import { useExportMcp } from './use-export-mcp';
-
-export function McpDropdown({
-  children,
-  mcpId,
-  showEditModal,
-}: PropsWithChildren & { mcpId: string } & Pick<
-    UseEditMcpReturnType,
-    'showEditModal'
-  >) {
-  const { t } = useTranslation();
-  const { deleteMcpServer } = useDeleteMcpServer();
-  const { handleExportMcpJson } = useExportMcp();
-
-  const handleDelete: MouseEventHandler<HTMLDivElement> = useCallback(() => {
-    deleteMcpServer([mcpId]);
-  }, [deleteMcpServer, mcpId]);
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuItem onClick={showEditModal(mcpId)}>
-          {t('common.edit')} <PenLine />
-        </DropdownMenuItem>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem onClick={handleExportMcpJson([mcpId])}>
-          {t('mcp.export')} <Upload />
-        </DropdownMenuItem>
-        <DropdownMenuSeparator />
-        <ConfirmDeleteDialog onOk={handleDelete}>
-          <DropdownMenuItem
-            className="text-state-error"
-            onSelect={(e) => {
-              e.preventDefault();
-            }}
-            onClick={(e) => {
-              e.stopPropagation();
-            }}
-          >
-            {t('common.delete')} <Trash2 />
-          </DropdownMenuItem>
-        </ConfirmDeleteDialog>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
diff --git a/web/src/pages/profile-setting/mcp/mcp-operation.tsx b/web/src/pages/profile-setting/mcp/mcp-operation.tsx
new file mode 100644
index 000000000..9bbd9e5c8
--- /dev/null
+++ b/web/src/pages/profile-setting/mcp/mcp-operation.tsx
@@ -0,0 +1,43 @@
+import { ConfirmDeleteDialog } from '@/components/confirm-delete-dialog';
+import { RAGFlowTooltip } from '@/components/ui/tooltip';
+import { useDeleteMcpServer } from '@/hooks/use-mcp-request';
+import { PenLine, Trash2, Upload } from 'lucide-react';
+import { MouseEventHandler, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { UseEditMcpReturnType } from './use-edit-mcp';
+import { useExportMcp } from './use-export-mcp';
+
+export function McpOperation({
+  mcpId,
+  showEditModal,
+}: { mcpId: string } & Pick<UseEditMcpReturnType, 'showEditModal'>) {
+  const { t } = useTranslation();
+  const { deleteMcpServer } = useDeleteMcpServer();
+  const { handleExportMcpJson } = useExportMcp();
+
+  const handleDelete: MouseEventHandler<HTMLDivElement> = useCallback(() => {
+    deleteMcpServer([mcpId]);
+  }, [deleteMcpServer, mcpId]);
+
+  return (
+    <div className="hidden gap-3  group-hover:flex text-text-secondary">
+      <RAGFlowTooltip tooltip={t('mcp.export')}>
+        <Upload
+          className="size-3 cursor-pointer"
+          onClick={handleExportMcpJson([mcpId])}
+        />
+      </RAGFlowTooltip>
+      <RAGFlowTooltip tooltip={t('common.edit')}>
+        <PenLine
+          className="size-3 cursor-pointer"
+          onClick={showEditModal(mcpId)}
+        />
+      </RAGFlowTooltip>
+      <RAGFlowTooltip tooltip={t('common.delete')}>
+        <ConfirmDeleteDialog onOk={handleDelete}>
+          <Trash2 className="size-3 cursor-pointer" />
+        </ConfirmDeleteDialog>
+      </RAGFlowTooltip>
+    </div>
+  );
+}
diff --git a/web/src/pages/profile-setting/mcp/use-bulk-operate-mcp.tsx b/web/src/pages/profile-setting/mcp/use-bulk-operate-mcp.tsx
index e91f2f697..2afef8347 100644
--- a/web/src/pages/profile-setting/mcp/use-bulk-operate-mcp.tsx
+++ b/web/src/pages/profile-setting/mcp/use-bulk-operate-mcp.tsx
@@ -1,10 +1,11 @@
 import { useDeleteMcpServer } from '@/hooks/use-mcp-request';
+import { IMcpServer } from '@/interfaces/database/mcp';
 import { Trash2, Upload } from 'lucide-react';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useExportMcp } from './use-export-mcp';
 
-export function useBulkOperateMCP() {
+export function useBulkOperateMCP(mcpList: IMcpServer[]) {
   const { t } = useTranslation();
   const [selectedList, setSelectedList] = useState<Array<string>>([]);
   const { deleteMcpServer } = useDeleteMcpServer();
@@ -20,6 +21,13 @@ export function useBulkOperateMCP() {
     });
   }, []);
 
+  const handleSelectAll = useCallback(
+    (checked: boolean) => {
+      setSelectedList(() => (checked ? mcpList.map((item) => item.id) : []));
+    },
+    [mcpList],
+  );
+
   const list = [
     {
       id: 'export',
@@ -35,7 +43,14 @@ export function useBulkOperateMCP() {
     },
   ];
 
-  return { list, selectedList, handleSelectChange };
+  return {
+    list,
+    selectedList,
+    handleSelectChange,
+    handleDelete,
+    handleExportMcp: handleExportMcpJson(selectedList),
+    handleSelectAll,
+  };
 }
 
 export type UseBulkOperateMCPReturnType = ReturnType<typeof useBulkOperateMCP>;
diff --git a/web/src/pages/user-setting/index.tsx b/web/src/pages/user-setting/index.tsx
index 4caf9fa2f..d307e3fda 100644
--- a/web/src/pages/user-setting/index.tsx
+++ b/web/src/pages/user-setting/index.tsx
@@ -41,7 +41,7 @@ const UserSetting = () => {
         className={cn(styles.settingWrapper, 'overflow-auto flex flex-1 pt-4')}
       >
         <SideBar></SideBar>
-        <div className={cn(styles.outletWrapper, 'flex flex-1 px-8')}>
+        <div className={cn(styles.outletWrapper, 'flex flex-1')}>
           <Outlet></Outlet>
         </div>
       </div>
diff --git a/web/src/routes.ts b/web/src/routes.ts
index 5a35ba99b..982a71bd4 100644
--- a/web/src/routes.ts
+++ b/web/src/routes.ts
@@ -44,8 +44,6 @@ export enum Routes {
   ChatShare = `${Chats}/share`,
   ChatWidget = `${Chats}/widget`,
   UserSetting = '/user-setting',
-  DataFlows = '/data-flows',
-  DataFlow = '/data-flow',
   DataSetOverview = '/dataset-overview',
   DataSetSetting = '/dataset-setting',
   DataflowResult = '/dataflow-result',
@@ -396,22 +394,6 @@ const routes = [
       },
     ],
   },
-  {
-    path: Routes.DataFlows,
-    layout: false,
-    component: '@/layouts/next',
-    routes: [
-      {
-        path: Routes.DataFlows,
-        component: `@/pages${Routes.DataFlows}`,
-      },
-    ],
-  },
-  {
-    path: `${Routes.DataFlow}/:id`,
-    layout: false,
-    component: `@/pages${Routes.DataFlow}`,
-  },
 ];
 
 export default routes;