From cb14dafacac637db5706de1cfe75ff11eaf96f11 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Tue, 2 Sep 2025 15:47:33 +0800
Subject: [PATCH] Feat: Initialize the data pipeline canvas. #9869 (#9870)

### What problem does this PR solve?
Feat: Initialize the data pipeline canvas. #9869

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 .../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 |  126 +
 web/src/pages/data-flow/canvas/index.less     |   11 +
 web/src/pages/data-flow/canvas/index.tsx      |  331 +++
 .../data-flow/canvas/node/agent-node.tsx      |  116 +
 .../data-flow/canvas/node/begin-node.tsx      |   62 +
 web/src/pages/data-flow/canvas/node/card.tsx  |   57 +
 .../data-flow/canvas/node/categorize-node.tsx |   62 +
 .../pages/data-flow/canvas/node/dropdown.tsx  |   58 +
 .../node/dropdown/next-step-dropdown.tsx      |  295 +++
 .../data-flow/canvas/node/email-node.tsx      |   80 +
 .../data-flow/canvas/node/generate-node.tsx   |   60 +
 .../data-flow/canvas/node/handle-icon.tsx     |   20 +
 .../pages/data-flow/canvas/node/handle.tsx    |   64 +
 .../pages/data-flow/canvas/node/index.less    |  285 +++
 web/src/pages/data-flow/canvas/node/index.tsx |   49 +
 .../data-flow/canvas/node/invoke-node.tsx     |   62 +
 .../data-flow/canvas/node/iteration-node.tsx  |   93 +
 .../data-flow/canvas/node/keyword-node.tsx    |   60 +
 .../data-flow/canvas/node/logic-node.tsx      |   41 +
 .../data-flow/canvas/node/message-node.tsx    |   65 +
 .../data-flow/canvas/node/node-header.tsx     |   34 +
 .../data-flow/canvas/node/node-wrapper.tsx    |   18 +
 .../data-flow/canvas/node/note-node/index.tsx |  104 +
 .../canvas/node/note-node/use-watch-change.ts |   30 +
 .../pages/data-flow/canvas/node/popover.tsx   |  121 +
 .../data-flow/canvas/node/relevant-node.tsx   |   73 +
 .../data-flow/canvas/node/resize-icon.tsx     |   32 +
 .../data-flow/canvas/node/retrieval-node.tsx  |   84 +
 .../data-flow/canvas/node/rewrite-node.tsx    |   60 +
 .../data-flow/canvas/node/switch-node.tsx     |  118 +
 .../data-flow/canvas/node/template-node.tsx   |   78 +
 .../pages/data-flow/canvas/node/tool-node.tsx |   83 +
 .../pages/data-flow/canvas/node/toolbar.tsx   |   88 +
 .../use-build-categorize-handle-positions.ts  |   48 +
 .../node/use-build-switch-handle-positions.ts |   59 +
 .../pages/data-flow/components/background.tsx |   13 +
 web/src/pages/data-flow/constant.tsx          |  947 +++++++
 web/src/pages/data-flow/context.ts            |   50 +
 .../pages/data-flow/debug-content/index.tsx   |  260 ++
 .../data-flow/debug-content/popover-form.tsx  |  103 +
 .../data-flow/debug-content/uploader.tsx      |  116 +
 web/src/pages/data-flow/flow-tooltip.tsx      |   19 +
 web/src/pages/data-flow/form-hooks.ts         |   43 +
 .../data-flow/form-sheet/form-config-map.tsx  |  165 ++
 web/src/pages/data-flow/form-sheet/next.tsx   |  134 +
 .../form-sheet/single-debug-sheet/index.tsx   |   89 +
 .../data-flow/form/agent-form/agent-tools.tsx |  191 ++
 .../form/agent-form/dynamic-prompt.tsx        |   93 +
 .../form/agent-form/dynamic-tool.tsx          |   63 +
 .../pages/data-flow/form/agent-form/index.tsx |  280 +++
 .../form/agent-form/tool-popover/index.tsx    |   89 +
 .../agent-form/tool-popover/tool-command.tsx  |  178 ++
 .../agent-form/tool-popover/use-update-mcp.ts |   74 +
 .../tool-popover/use-update-tools.ts          |   66 +
 .../form/agent-form/use-get-tools.ts          |   26 +
 .../data-flow/form/agent-form/use-values.ts   |   33 +
 .../form/agent-form/use-watch-change.ts       |   22 +
 .../data-flow/form/akshare-form/index.tsx     |   22 +
 .../pages/data-flow/form/arxiv-form/index.tsx |   96 +
 .../data-flow/form/baidu-fanyi-form/index.tsx |   71 +
 .../pages/data-flow/form/baidu-form/index.tsx |   22 +
 .../form/begin-form/begin-dynamic-options.tsx |   57 +
 .../pages/data-flow/form/begin-form/index.tsx |  205 ++
 .../form/begin-form/parameter-dialog.tsx      |  226 ++
 .../data-flow/form/begin-form/query-table.tsx |  199 ++
 .../form/begin-form/use-edit-query.ts         |   67 +
 .../data-flow/form/begin-form/use-values.ts   |   34 +
 .../form/begin-form/use-watch-change.ts       |   31 +
 .../pages/data-flow/form/begin-form/utils.ts  |   14 +
 .../pages/data-flow/form/bing-form/index.tsx  |  131 +
 .../categorize-form/dynamic-categorize.tsx    |  249 ++
 .../form/categorize-form/dynamic-example.tsx  |   68 +
 .../data-flow/form/categorize-form/index.tsx  |   48 +
 .../form/categorize-form/use-form-schema.ts   |   32 +
 .../form/categorize-form/use-values.ts        |   34 +
 .../form/categorize-form/use-watch-change.ts  |   17 +
 .../pages/data-flow/form/code-form/index.tsx  |  168 ++
 .../form/code-form/next-variable.tsx          |  128 +
 .../pages/data-flow/form/code-form/schema.ts  |   14 +
 .../data-flow/form/code-form/use-values.ts    |   47 +
 .../form/code-form/use-watch-change.ts        |   95 +
 .../form/components/api-key-field.tsx         |   32 +
 .../form/components/description-field.tsx     |   27 +
 .../components/dynamic-input-variable.tsx     |  127 +
 .../form/components/form-wrapper.tsx          |   16 +
 .../data-flow/form/components/index.less      |   22 +
 .../next-dynamic-input-variable.tsx           |  135 +
 .../data-flow/form/components/output.tsx      |   35 +
 .../form/components/prompt-editor/constant.ts |    1 +
 .../form/components/prompt-editor/index.css   |   76 +
 .../form/components/prompt-editor/index.tsx   |  181 ++
 .../prompt-editor/paste-handler-plugin.tsx    |   83 +
 .../form/components/prompt-editor/theme.ts    |   43 +
 .../prompt-editor/variable-node.tsx           |   91 +
 .../variable-on-change-plugin.tsx             |   35 +
 .../prompt-editor/variable-picker-plugin.tsx  |  297 +++
 .../form/components/query-variable.tsx        |   66 +
 .../data-flow/form/crawler-form/index.tsx     |  105 +
 .../pages/data-flow/form/deepl-form/index.tsx |   36 +
 .../data-flow/form/duckduckgo-form/index.tsx  |   91 +
 .../pages/data-flow/form/email-form/index.tsx |  161 ++
 .../data-flow/form/exesql-form/index.tsx      |  167 ++
 .../form/exesql-form/use-submit-form.ts       |   31 +
 .../data-flow/form/github-form/index.tsx      |   52 +
 .../data-flow/form/google-form/index.tsx      |  139 ++
 .../form/google-scholar-form/index.tsx        |  166 ++
 .../pages/data-flow/form/invoke-form/hooks.ts |   97 +
 .../data-flow/form/invoke-form/index.tsx      |  226 ++
 .../data-flow/form/invoke-form/schema.ts      |   21 +
 .../form/invoke-form/use-edit-variable.ts     |   70 +
 .../form/invoke-form/variable-dialog.tsx      |  143 ++
 .../form/invoke-form/variable-table.tsx       |  199 ++
 .../form/iteration-form/dynamic-output.tsx    |  128 +
 .../data-flow/form/iteration-form/index.tsx   |   57 +
 .../form/iteration-form/interface.ts          |    2 +
 .../form/iteration-form/use-build-options.ts  |   31 +
 .../form/iteration-form/use-values.ts         |   27 +
 .../iteration-form/use-watch-form-change.ts   |   30 +
 .../form/iteration-start-from/index.tsx       |   23 +
 .../pages/data-flow/form/jin10-form/index.tsx |  145 ++
 .../form/keyword-extract-form/index.tsx       |   48 +
 .../data-flow/form/message-form/index.tsx     |  101 +
 .../data-flow/form/message-form/use-values.ts |   22 +
 .../form/message-form/use-watch-change.ts     |   24 +
 .../data-flow/form/pubmed-form/index.tsx      |   90 +
 .../data-flow/form/qweather-form/index.tsx    |  157 ++
 .../data-flow/form/relevant-form/hooks.ts     |   41 +
 .../data-flow/form/relevant-form/index.tsx    |   49 +
 .../data-flow/form/retrieval-form/next.tsx    |  126 +
 .../form/retrieval-form/use-values.ts         |   25 +
 .../form/rewrite-question-form/index.tsx      |   68 +
 .../data-flow/form/searxng-form/index.tsx     |   73 +
 .../form/string-transform-form/index.tsx      |  166 ++
 .../form/string-transform-form/use-values.ts  |   33 +
 .../use-watch-form-change.ts                  |   26 +
 .../data-flow/form/switch-form/index.tsx      |  328 +++
 .../data-flow/form/switch-form/use-values.ts  |   17 +
 .../form/switch-form/use-watch-change.ts      |   24 +
 .../form/tavily-extract-form/index.tsx        |  121 +
 .../form/tavily-form/dynamic-domain.tsx       |   60 +
 .../data-flow/form/tavily-form/index.tsx      |  214 ++
 .../data-flow/form/tavily-form/use-values.ts  |   23 +
 .../form/tavily-form/use-watch-change.ts      |   23 +
 .../data-flow/form/tushare-form/index.tsx     |   83 +
 .../form/user-fill-up-form/index.tsx          |  168 ++
 .../form/user-fill-up-form/use-values.ts      |   21 +
 .../user-fill-up-form/use-watch-change.ts     |   35 +
 .../data-flow/form/wencai-form/index.tsx      |   97 +
 .../data-flow/form/wikipedia-form/index.tsx   |   88 +
 .../form/yahoo-finance-form/index.tsx         |  125 +
 web/src/pages/data-flow/hooks.tsx             |  405 +++
 web/src/pages/data-flow/hooks/use-add-node.ts |  462 ++++
 .../hooks/use-agent-tool-initial-values.ts    |   70 +
 .../data-flow/hooks/use-before-delete.tsx     |   82 +
 .../pages/data-flow/hooks/use-build-dsl.ts    |   29 +
 .../data-flow/hooks/use-cache-chat-log.ts     |   88 +
 .../data-flow/hooks/use-change-node-name.ts   |  120 +
 .../pages/data-flow/hooks/use-chat-logic.ts   |   60 +
 .../pages/data-flow/hooks/use-export-json.ts  |   71 +
 .../pages/data-flow/hooks/use-fetch-data.ts   |   19 +
 .../data-flow/hooks/use-find-mcp-by-id.ts     |   12 +
 .../pages/data-flow/hooks/use-form-values.ts  |   20 +
 .../data-flow/hooks/use-get-begin-query.tsx   |  317 +++
 .../pages/data-flow/hooks/use-iteration.ts    |    0
 .../pages/data-flow/hooks/use-move-note.ts    |   35 +
 .../data-flow/hooks/use-open-document.ts      |   12 +
 .../pages/data-flow/hooks/use-save-graph.ts   |   89 +
 .../hooks/use-send-shared-message.ts          |   79 +
 .../pages/data-flow/hooks/use-set-graph.ts    |   17 +
 .../pages/data-flow/hooks/use-show-dialog.ts  |   91 +
 .../pages/data-flow/hooks/use-show-drawer.tsx |  186 ++
 .../data-flow/hooks/use-watch-form-change.ts  |   18 +
 web/src/pages/data-flow/index.tsx             |  187 ++
 web/src/pages/data-flow/interface.ts          |   43 +
 web/src/pages/data-flow/operator-icon.tsx     |   87 +
 web/src/pages/data-flow/options.ts            | 2174 +++++++++++++++++
 web/src/pages/data-flow/run-sheet/index.tsx   |   69 +
 .../pages/data-flow/setting-dialog/index.tsx  |   53 +
 .../data-flow/setting-dialog/setting-form.tsx |  158 ++
 web/src/pages/data-flow/share/index.tsx       |  223 ++
 .../data-flow/share/parameter-dialog.tsx      |   30 +
 web/src/pages/data-flow/store.ts              |  534 ++++
 .../data-flow/upload-agent-dialog/index.tsx   |   36 +
 .../upload-agent-dialog/upload-agent-form.tsx |   89 +
 .../data-flow/use-agent-history-manager.ts    |  163 ++
 web/src/pages/data-flow/utils.ts              |  558 +++++
 .../data-flow/utils/build-output-list.ts      |    8 +
 web/src/pages/data-flow/utils/chat.ts         |   21 +
 web/src/pages/data-flow/utils/delete-node.ts  |   34 +
 .../utils/filter-downstream-nodes.ts          |   63 +
 .../pages/data-flow/version-dialog/index.tsx  |  141 ++
 web/src/pages/data-flows/index.tsx            |    3 +
 web/src/routes.ts                             |   18 +
 196 files changed, 21201 insertions(+)
 create mode 100644 web/src/pages/data-flow/canvas/context-menu/index.less
 create mode 100644 web/src/pages/data-flow/canvas/context-menu/index.tsx
 create mode 100644 web/src/pages/data-flow/canvas/context.tsx
 create mode 100644 web/src/pages/data-flow/canvas/edge/index.tsx
 create mode 100644 web/src/pages/data-flow/canvas/index.less
 create mode 100644 web/src/pages/data-flow/canvas/index.tsx
 create mode 100644 web/src/pages/data-flow/canvas/node/agent-node.tsx
 create mode 100644 web/src/pages/data-flow/canvas/node/begin-node.tsx
 create mode 100644 web/src/pages/data-flow/canvas/node/card.tsx
 create mode 100644 web/src/pages/data-flow/canvas/node/categorize-node.tsx
 create mode 100644 web/src/pages/data-flow/canvas/node/dropdown.tsx
 create mode 100644 web/src/pages/data-flow/canvas/node/dropdown/next-step-dropdown.tsx
 create mode 100644 web/src/pages/data-flow/canvas/node/email-node.tsx
 create mode 100644 web/src/pages/data-flow/canvas/node/generate-node.tsx
 create mode 100644 web/src/pages/data-flow/canvas/node/handle-icon.tsx
 create mode 100644 web/src/pages/data-flow/canvas/node/handle.tsx
 create mode 100644 web/src/pages/data-flow/canvas/node/index.less
 create mode 100644 web/src/pages/data-flow/canvas/node/index.tsx
 create mode 100644 web/src/pages/data-flow/canvas/node/invoke-node.tsx
 create mode 100644 web/src/pages/data-flow/canvas/node/iteration-node.tsx
 create mode 100644 web/src/pages/data-flow/canvas/node/keyword-node.tsx
 create mode 100644 web/src/pages/data-flow/canvas/node/logic-node.tsx
 create mode 100644 web/src/pages/data-flow/canvas/node/message-node.tsx
 create mode 100644 web/src/pages/data-flow/canvas/node/node-header.tsx
 create mode 100644 web/src/pages/data-flow/canvas/node/node-wrapper.tsx
 create mode 100644 web/src/pages/data-flow/canvas/node/note-node/index.tsx
 create mode 100644 web/src/pages/data-flow/canvas/node/note-node/use-watch-change.ts
 create mode 100644 web/src/pages/data-flow/canvas/node/popover.tsx
 create mode 100644 web/src/pages/data-flow/canvas/node/relevant-node.tsx
 create mode 100644 web/src/pages/data-flow/canvas/node/resize-icon.tsx
 create mode 100644 web/src/pages/data-flow/canvas/node/retrieval-node.tsx
 create mode 100644 web/src/pages/data-flow/canvas/node/rewrite-node.tsx
 create mode 100644 web/src/pages/data-flow/canvas/node/switch-node.tsx
 create mode 100644 web/src/pages/data-flow/canvas/node/template-node.tsx
 create mode 100644 web/src/pages/data-flow/canvas/node/tool-node.tsx
 create mode 100644 web/src/pages/data-flow/canvas/node/toolbar.tsx
 create mode 100644 web/src/pages/data-flow/canvas/node/use-build-categorize-handle-positions.ts
 create mode 100644 web/src/pages/data-flow/canvas/node/use-build-switch-handle-positions.ts
 create mode 100644 web/src/pages/data-flow/components/background.tsx
 create mode 100644 web/src/pages/data-flow/constant.tsx
 create mode 100644 web/src/pages/data-flow/context.ts
 create mode 100644 web/src/pages/data-flow/debug-content/index.tsx
 create mode 100644 web/src/pages/data-flow/debug-content/popover-form.tsx
 create mode 100644 web/src/pages/data-flow/debug-content/uploader.tsx
 create mode 100644 web/src/pages/data-flow/flow-tooltip.tsx
 create mode 100644 web/src/pages/data-flow/form-hooks.ts
 create mode 100644 web/src/pages/data-flow/form-sheet/form-config-map.tsx
 create mode 100644 web/src/pages/data-flow/form-sheet/next.tsx
 create mode 100644 web/src/pages/data-flow/form-sheet/single-debug-sheet/index.tsx
 create mode 100644 web/src/pages/data-flow/form/agent-form/agent-tools.tsx
 create mode 100644 web/src/pages/data-flow/form/agent-form/dynamic-prompt.tsx
 create mode 100644 web/src/pages/data-flow/form/agent-form/dynamic-tool.tsx
 create mode 100644 web/src/pages/data-flow/form/agent-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/agent-form/tool-popover/index.tsx
 create mode 100644 web/src/pages/data-flow/form/agent-form/tool-popover/tool-command.tsx
 create mode 100644 web/src/pages/data-flow/form/agent-form/tool-popover/use-update-mcp.ts
 create mode 100644 web/src/pages/data-flow/form/agent-form/tool-popover/use-update-tools.ts
 create mode 100644 web/src/pages/data-flow/form/agent-form/use-get-tools.ts
 create mode 100644 web/src/pages/data-flow/form/agent-form/use-values.ts
 create mode 100644 web/src/pages/data-flow/form/agent-form/use-watch-change.ts
 create mode 100644 web/src/pages/data-flow/form/akshare-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/arxiv-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/baidu-fanyi-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/baidu-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/begin-form/begin-dynamic-options.tsx
 create mode 100644 web/src/pages/data-flow/form/begin-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/begin-form/parameter-dialog.tsx
 create mode 100644 web/src/pages/data-flow/form/begin-form/query-table.tsx
 create mode 100644 web/src/pages/data-flow/form/begin-form/use-edit-query.ts
 create mode 100644 web/src/pages/data-flow/form/begin-form/use-values.ts
 create mode 100644 web/src/pages/data-flow/form/begin-form/use-watch-change.ts
 create mode 100644 web/src/pages/data-flow/form/begin-form/utils.ts
 create mode 100644 web/src/pages/data-flow/form/bing-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/categorize-form/dynamic-categorize.tsx
 create mode 100644 web/src/pages/data-flow/form/categorize-form/dynamic-example.tsx
 create mode 100644 web/src/pages/data-flow/form/categorize-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/categorize-form/use-form-schema.ts
 create mode 100644 web/src/pages/data-flow/form/categorize-form/use-values.ts
 create mode 100644 web/src/pages/data-flow/form/categorize-form/use-watch-change.ts
 create mode 100644 web/src/pages/data-flow/form/code-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/code-form/next-variable.tsx
 create mode 100644 web/src/pages/data-flow/form/code-form/schema.ts
 create mode 100644 web/src/pages/data-flow/form/code-form/use-values.ts
 create mode 100644 web/src/pages/data-flow/form/code-form/use-watch-change.ts
 create mode 100644 web/src/pages/data-flow/form/components/api-key-field.tsx
 create mode 100644 web/src/pages/data-flow/form/components/description-field.tsx
 create mode 100644 web/src/pages/data-flow/form/components/dynamic-input-variable.tsx
 create mode 100644 web/src/pages/data-flow/form/components/form-wrapper.tsx
 create mode 100644 web/src/pages/data-flow/form/components/index.less
 create mode 100644 web/src/pages/data-flow/form/components/next-dynamic-input-variable.tsx
 create mode 100644 web/src/pages/data-flow/form/components/output.tsx
 create mode 100644 web/src/pages/data-flow/form/components/prompt-editor/constant.ts
 create mode 100644 web/src/pages/data-flow/form/components/prompt-editor/index.css
 create mode 100644 web/src/pages/data-flow/form/components/prompt-editor/index.tsx
 create mode 100644 web/src/pages/data-flow/form/components/prompt-editor/paste-handler-plugin.tsx
 create mode 100644 web/src/pages/data-flow/form/components/prompt-editor/theme.ts
 create mode 100644 web/src/pages/data-flow/form/components/prompt-editor/variable-node.tsx
 create mode 100644 web/src/pages/data-flow/form/components/prompt-editor/variable-on-change-plugin.tsx
 create mode 100644 web/src/pages/data-flow/form/components/prompt-editor/variable-picker-plugin.tsx
 create mode 100644 web/src/pages/data-flow/form/components/query-variable.tsx
 create mode 100644 web/src/pages/data-flow/form/crawler-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/deepl-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/duckduckgo-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/email-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/exesql-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/exesql-form/use-submit-form.ts
 create mode 100644 web/src/pages/data-flow/form/github-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/google-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/google-scholar-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/invoke-form/hooks.ts
 create mode 100644 web/src/pages/data-flow/form/invoke-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/invoke-form/schema.ts
 create mode 100644 web/src/pages/data-flow/form/invoke-form/use-edit-variable.ts
 create mode 100644 web/src/pages/data-flow/form/invoke-form/variable-dialog.tsx
 create mode 100644 web/src/pages/data-flow/form/invoke-form/variable-table.tsx
 create mode 100644 web/src/pages/data-flow/form/iteration-form/dynamic-output.tsx
 create mode 100644 web/src/pages/data-flow/form/iteration-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/iteration-form/interface.ts
 create mode 100644 web/src/pages/data-flow/form/iteration-form/use-build-options.ts
 create mode 100644 web/src/pages/data-flow/form/iteration-form/use-values.ts
 create mode 100644 web/src/pages/data-flow/form/iteration-form/use-watch-form-change.ts
 create mode 100644 web/src/pages/data-flow/form/iteration-start-from/index.tsx
 create mode 100644 web/src/pages/data-flow/form/jin10-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/keyword-extract-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/message-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/message-form/use-values.ts
 create mode 100644 web/src/pages/data-flow/form/message-form/use-watch-change.ts
 create mode 100644 web/src/pages/data-flow/form/pubmed-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/qweather-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/relevant-form/hooks.ts
 create mode 100644 web/src/pages/data-flow/form/relevant-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/retrieval-form/next.tsx
 create mode 100644 web/src/pages/data-flow/form/retrieval-form/use-values.ts
 create mode 100644 web/src/pages/data-flow/form/rewrite-question-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/searxng-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/string-transform-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/string-transform-form/use-values.ts
 create mode 100644 web/src/pages/data-flow/form/string-transform-form/use-watch-form-change.ts
 create mode 100644 web/src/pages/data-flow/form/switch-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/switch-form/use-values.ts
 create mode 100644 web/src/pages/data-flow/form/switch-form/use-watch-change.ts
 create mode 100644 web/src/pages/data-flow/form/tavily-extract-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/tavily-form/dynamic-domain.tsx
 create mode 100644 web/src/pages/data-flow/form/tavily-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/tavily-form/use-values.ts
 create mode 100644 web/src/pages/data-flow/form/tavily-form/use-watch-change.ts
 create mode 100644 web/src/pages/data-flow/form/tushare-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/user-fill-up-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/user-fill-up-form/use-values.ts
 create mode 100644 web/src/pages/data-flow/form/user-fill-up-form/use-watch-change.ts
 create mode 100644 web/src/pages/data-flow/form/wencai-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/wikipedia-form/index.tsx
 create mode 100644 web/src/pages/data-flow/form/yahoo-finance-form/index.tsx
 create mode 100644 web/src/pages/data-flow/hooks.tsx
 create mode 100644 web/src/pages/data-flow/hooks/use-add-node.ts
 create mode 100644 web/src/pages/data-flow/hooks/use-agent-tool-initial-values.ts
 create mode 100644 web/src/pages/data-flow/hooks/use-before-delete.tsx
 create mode 100644 web/src/pages/data-flow/hooks/use-build-dsl.ts
 create mode 100644 web/src/pages/data-flow/hooks/use-cache-chat-log.ts
 create mode 100644 web/src/pages/data-flow/hooks/use-change-node-name.ts
 create mode 100644 web/src/pages/data-flow/hooks/use-chat-logic.ts
 create mode 100644 web/src/pages/data-flow/hooks/use-export-json.ts
 create mode 100644 web/src/pages/data-flow/hooks/use-fetch-data.ts
 create mode 100644 web/src/pages/data-flow/hooks/use-find-mcp-by-id.ts
 create mode 100644 web/src/pages/data-flow/hooks/use-form-values.ts
 create mode 100644 web/src/pages/data-flow/hooks/use-get-begin-query.tsx
 create mode 100644 web/src/pages/data-flow/hooks/use-iteration.ts
 create mode 100644 web/src/pages/data-flow/hooks/use-move-note.ts
 create mode 100644 web/src/pages/data-flow/hooks/use-open-document.ts
 create mode 100644 web/src/pages/data-flow/hooks/use-save-graph.ts
 create mode 100644 web/src/pages/data-flow/hooks/use-send-shared-message.ts
 create mode 100644 web/src/pages/data-flow/hooks/use-set-graph.ts
 create mode 100644 web/src/pages/data-flow/hooks/use-show-dialog.ts
 create mode 100644 web/src/pages/data-flow/hooks/use-show-drawer.tsx
 create mode 100644 web/src/pages/data-flow/hooks/use-watch-form-change.ts
 create mode 100644 web/src/pages/data-flow/index.tsx
 create mode 100644 web/src/pages/data-flow/interface.ts
 create mode 100644 web/src/pages/data-flow/operator-icon.tsx
 create mode 100644 web/src/pages/data-flow/options.ts
 create mode 100644 web/src/pages/data-flow/run-sheet/index.tsx
 create mode 100644 web/src/pages/data-flow/setting-dialog/index.tsx
 create mode 100644 web/src/pages/data-flow/setting-dialog/setting-form.tsx
 create mode 100644 web/src/pages/data-flow/share/index.tsx
 create mode 100644 web/src/pages/data-flow/share/parameter-dialog.tsx
 create mode 100644 web/src/pages/data-flow/store.ts
 create mode 100644 web/src/pages/data-flow/upload-agent-dialog/index.tsx
 create mode 100644 web/src/pages/data-flow/upload-agent-dialog/upload-agent-form.tsx
 create mode 100644 web/src/pages/data-flow/use-agent-history-manager.ts
 create mode 100644 web/src/pages/data-flow/utils.ts
 create mode 100644 web/src/pages/data-flow/utils/build-output-list.ts
 create mode 100644 web/src/pages/data-flow/utils/chat.ts
 create mode 100644 web/src/pages/data-flow/utils/delete-node.ts
 create mode 100644 web/src/pages/data-flow/utils/filter-downstream-nodes.ts
 create mode 100644 web/src/pages/data-flow/version-dialog/index.tsx
 create mode 100644 web/src/pages/data-flows/index.tsx

diff --git a/web/src/pages/data-flow/canvas/context-menu/index.less b/web/src/pages/data-flow/canvas/context-menu/index.less
new file mode 100644
index 000000000..5594aa912
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/context-menu/index.less
@@ -0,0 +1,18 @@
+.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
new file mode 100644
index 000000000..6cb306af9
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/context-menu/index.tsx
@@ -0,0 +1,107 @@
+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
new file mode 100644
index 000000000..203c37e99
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/context.tsx
@@ -0,0 +1,56 @@
+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
new file mode 100644
index 000000000..3e1b57e85
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/edge/index.tsx
@@ -0,0 +1,126 @@
+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 { NodeHandleId, Operator } from '../../constant';
+
+function InnerButtonEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  source,
+  target,
+  style = {},
+  markerEnd,
+  selected,
+  data,
+  sourceHandleId,
+}: 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 graphPath = useMemo(() => {
+    // TODO: this will be called multiple times
+    const path = flowDetail?.dsl?.path ?? [];
+    // The second to last
+    const previousGraphPath: string[] = path.at(-2) ?? [];
+    let graphPath: string[] = path.at(-1) ?? [];
+    // The last of the second to last article
+    const previousLatestElement = previousGraphPath.at(-1);
+    if (previousGraphPath.length > 0 && previousLatestElement) {
+      graphPath = [previousLatestElement, ...graphPath];
+    }
+    return Array.isArray(graphPath) ? graphPath : [];
+  }, [flowDetail.dsl?.path]);
+
+  const highlightStyle = useMemo(() => {
+    const idx = graphPath.findIndex((x) => x === source);
+    if (idx !== -1) {
+      // The set of elements following source
+      const slicedGraphPath = graphPath.slice(idx + 1);
+      if (slicedGraphPath.some((x) => x === target)) {
+        return { strokeWidth: 1, stroke: 'red' };
+      }
+    }
+    return {};
+  }, [source, target, graphPath]);
+
+  const visible = useMemo(() => {
+    return (
+      data?.isHovered &&
+      sourceHandleId !== NodeHandleId.Tool &&
+      sourceHandleId !== NodeHandleId.AgentBottom && // The connection between the agent node and the tool node does not need to display the delete button
+      !target.startsWith(Operator.Tool)
+    );
+  }, [data?.isHovered, sourceHandleId, target]);
+
+  return (
+    <>
+      <BaseEdge
+        path={edgePath}
+        markerEnd={markerEnd}
+        style={{ ...style, ...selectedStyle, ...highlightStyle }}
+        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
new file mode 100644
index 000000000..0183d41b5
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/index.less
@@ -0,0 +1,11 @@
+.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
new file mode 100644
index 000000000..eb91ee584
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/index.tsx
@@ -0,0 +1,331 @@
+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,
+  Position,
+  ReactFlow,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { NotebookPen } from 'lucide-react';
+import { useCallback, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AgentBackground } from '../components/background';
+import { AgentInstanceContext, HandleContext } from '../context';
+
+import FormSheet from '../form-sheet/next';
+import {
+  useHandleDrop,
+  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 {
+  useHideFormSheetOnNodeDeletion,
+  useShowDrawer,
+} from '../hooks/use-show-drawer';
+import RunSheet from '../run-sheet';
+import { ButtonEdge } from './edge';
+import styles from './index.less';
+import { RagNode } from './node';
+import { AgentNode } from './node/agent-node';
+import { BeginNode } from './node/begin-node';
+import { CategorizeNode } from './node/categorize-node';
+import { InnerNextStepDropdown } from './node/dropdown/next-step-dropdown';
+import { GenerateNode } from './node/generate-node';
+import { InvokeNode } from './node/invoke-node';
+import { IterationNode, IterationStartNode } from './node/iteration-node';
+import { KeywordNode } from './node/keyword-node';
+import { LogicNode } from './node/logic-node';
+import { MessageNode } from './node/message-node';
+import NoteNode from './node/note-node';
+import { RelevantNode } from './node/relevant-node';
+import { RetrievalNode } from './node/retrieval-node';
+import { RewriteNode } from './node/rewrite-node';
+import { SwitchNode } from './node/switch-node';
+import { TemplateNode } from './node/template-node';
+import { ToolNode } from './node/tool-node';
+
+export const nodeTypes: NodeTypes = {
+  ragNode: RagNode,
+  categorizeNode: CategorizeNode,
+  beginNode: BeginNode,
+  relevantNode: RelevantNode,
+  logicNode: LogicNode,
+  noteNode: NoteNode,
+  switchNode: SwitchNode,
+  generateNode: GenerateNode,
+  retrievalNode: RetrievalNode,
+  messageNode: MessageNode,
+  rewriteNode: RewriteNode,
+  keywordNode: KeywordNode,
+  invokeNode: InvokeNode,
+  templateNode: TemplateNode,
+  // emailNode: EmailNode,
+  group: IterationNode,
+  iterationStartNode: IterationStartNode,
+  agentNode: AgentNode,
+  toolNode: ToolNode,
+};
+
+const edgeTypes = {
+  buttonEdge: ButtonEdge,
+};
+
+interface IProps {
+  drawerVisible: boolean;
+  hideDrawer(): void;
+}
+
+function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
+  const { t } = useTranslation();
+  const {
+    nodes,
+    edges,
+    onConnect: originalOnConnect,
+    onEdgesChange,
+    onNodesChange,
+    onSelectionChange,
+    onEdgeMouseEnter,
+    onEdgeMouseLeave,
+  } = useSelectCanvasData();
+  const isValidConnection = useValidateConnection();
+
+  const { onDrop, onDragOver, setReactFlowInstance, reactFlowInstance } =
+    useHandleDrop();
+
+  const {
+    onNodeClick,
+    clickedNode,
+    formDrawerVisible,
+    hideFormDrawer,
+    singleDebugDrawerVisible,
+    hideSingleDebugDrawer,
+    showSingleDebugDrawer,
+    chatVisible,
+    runVisible,
+    hideRunOrChatDrawer,
+    showChatModal,
+    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 onPaneClick = useCallback(() => {
+    hideFormDrawer();
+    if (visible && !preventCloseRef.current) {
+      hideModal();
+      clearActiveDropdown();
+    }
+    if (imgVisible) {
+      addNoteNode(mouse);
+      hideImage();
+    }
+  }, [
+    hideFormDrawer,
+    visible,
+    hideModal,
+    imgVisible,
+    addNoteNode,
+    mouse,
+    hideImage,
+    clearActiveDropdown,
+  ]);
+
+  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 = (event: MouseEvent | TouchEvent) => {
+    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={styles.canvasWrapper}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        style={{ position: 'absolute', top: 10, left: 0 }}
+      >
+        <defs>
+          <marker
+            fill="rgb(157 149 225)"
+            id="logo"
+            viewBox="0 0 40 40"
+            refX="8"
+            refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="20"
+            markerHeight="20"
+            orient="auto-start-reverse"
+          >
+            <path d="M 0 0 L 10 5 L 0 10 z" />
+          </marker>
+        </defs>
+      </svg>
+      <AgentInstanceContext.Provider value={{ addCanvasNode, showFormDrawer }}>
+        <ReactFlow
+          connectionMode={ConnectionMode.Loose}
+          nodes={nodes}
+          onNodesChange={onNodesChange}
+          edges={edges}
+          onEdgesChange={onEdgesChange}
+          fitView
+          onConnect={onConnect}
+          nodeTypes={nodeTypes}
+          edgeTypes={edgeTypes}
+          onDrop={onDrop}
+          onConnectStart={OnConnectStart}
+          onConnectEnd={OnConnectEnd}
+          onDragOver={onDragOver}
+          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>
+          <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,
+            }}
+          >
+            <InnerNextStepDropdown
+              hideModal={() => {
+                hideModal();
+                clearActiveDropdown();
+              }}
+              position={dropdownPosition}
+            >
+              <span></span>
+            </InnerNextStepDropdown>
+          </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}
+          showModal={showChatModal}
+        ></RunSheet>
+      )}
+    </div>
+  );
+}
+
+export default AgentCanvas;
diff --git a/web/src/pages/data-flow/canvas/node/agent-node.tsx b/web/src/pages/data-flow/canvas/node/agent-node.tsx
new file mode 100644
index 000000000..42b489a41
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/agent-node.tsx
@@ -0,0 +1,116 @@
+import LLMLabel from '@/components/llm-select/llm-label';
+import { IAgentNode } from '@/interfaces/database/flow';
+import { Handle, NodeProps, Position } from '@xyflow/react';
+import { get } from 'lodash';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AgentExceptionMethod, NodeHandleId } from '../../constant';
+import useGraphStore from '../../store';
+import { isBottomSubAgent } from '../../utils';
+import { CommonHandle } from './handle';
+import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
+import styles from './index.less';
+import NodeHeader from './node-header';
+import { NodeWrapper } from './node-wrapper';
+import { ToolBar } from './toolbar';
+
+function InnerAgentNode({
+  id,
+  data,
+  isConnectable = true,
+  selected,
+}: NodeProps<IAgentNode>) {
+  const edges = useGraphStore((state) => state.edges);
+  const { t } = useTranslation();
+
+  const isHeadAgent = useMemo(() => {
+    return !isBottomSubAgent(edges, id);
+  }, [edges, id]);
+
+  const exceptionMethod = useMemo(() => {
+    return get(data, 'form.exception_method');
+  }, [data]);
+
+  const isGotoMethod = useMemo(() => {
+    return exceptionMethod === AgentExceptionMethod.Goto;
+  }, [exceptionMethod]);
+
+  return (
+    <ToolBar selected={selected} id={id} label={data.label}>
+      <NodeWrapper selected={selected}>
+        {isHeadAgent && (
+          <>
+            <CommonHandle
+              type="target"
+              position={Position.Left}
+              isConnectable={isConnectable}
+              style={LeftHandleStyle}
+              nodeId={id}
+              id={NodeHandleId.End}
+            ></CommonHandle>
+            <CommonHandle
+              type="source"
+              position={Position.Right}
+              isConnectable={isConnectable}
+              className={styles.handle}
+              style={RightHandleStyle}
+              nodeId={id}
+              id={NodeHandleId.Start}
+              isConnectableEnd={false}
+            ></CommonHandle>
+          </>
+        )}
+
+        <Handle
+          type="target"
+          position={Position.Top}
+          isConnectable={false}
+          id={NodeHandleId.AgentTop}
+        ></Handle>
+        <Handle
+          type="source"
+          position={Position.Bottom}
+          isConnectable={false}
+          id={NodeHandleId.AgentBottom}
+          style={{ left: 180 }}
+        ></Handle>
+        <Handle
+          type="source"
+          position={Position.Bottom}
+          isConnectable={false}
+          id={NodeHandleId.Tool}
+          style={{ left: 20 }}
+        ></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>
+          {(isGotoMethod ||
+            exceptionMethod === AgentExceptionMethod.Comment) && (
+            <div className="bg-bg-card rounded-sm p-1 flex justify-between gap-2">
+              <span className="text-text-secondary">{t('flow.onFailure')}</span>
+              <span className="truncate flex-1 text-right">
+                {t(`flow.${exceptionMethod}`)}
+              </span>
+            </div>
+          )}
+        </section>
+        {isGotoMethod && (
+          <CommonHandle
+            type="source"
+            position={Position.Right}
+            isConnectable={isConnectable}
+            className="!bg-state-error"
+            style={{ ...RightHandleStyle, top: 94 }}
+            nodeId={id}
+            id={NodeHandleId.AgentException}
+            isConnectableEnd={false}
+          ></CommonHandle>
+        )}
+      </NodeWrapper>
+    </ToolBar>
+  );
+}
+
+export const AgentNode = memo(InnerAgentNode);
diff --git a/web/src/pages/data-flow/canvas/node/begin-node.tsx b/web/src/pages/data-flow/canvas/node/begin-node.tsx
new file mode 100644
index 000000000..be80d56ae
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/begin-node.tsx
@@ -0,0 +1,62 @@
+import { IBeginNode } from '@/interfaces/database/flow';
+import { cn } from '@/lib/utils';
+import { NodeProps, Position } from '@xyflow/react';
+import get from 'lodash/get';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  BeginQueryType,
+  BeginQueryTypeIconMap,
+  NodeHandleId,
+  Operator,
+} from '../../constant';
+import { BeginQuery } from '../../interface';
+import OperatorIcon from '../../operator-icon';
+import { CommonHandle } from './handle';
+import { RightHandleStyle } from './handle-icon';
+import styles from './index.less';
+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();
+  const inputs: Record<string, BeginQuery> = get(data, 'form.inputs', {});
+
+  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(`flow.begin`)}
+        </div>
+      </section>
+      <section className={cn(styles.generateParameters, 'flex gap-2 flex-col')}>
+        {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>
+              <span className="flex-1">{val.optional ? 'Yes' : 'No'}</span>
+            </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
new file mode 100644
index 000000000..042ca45e0
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/card.tsx
@@ -0,0 +1,57 @@
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+
+export function CardWithForm() {
+  return (
+    <Card className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Create project</CardTitle>
+        <CardDescription>Deploy your new project in one-click.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form>
+          <div className="grid w-full items-center gap-4">
+            <div className="flex flex-col space-y-1.5">
+              <Label htmlFor="name">Name</Label>
+              <Input id="name" placeholder="Name of your project" />
+            </div>
+            <div className="flex flex-col space-y-1.5">
+              <Label htmlFor="framework">Framework</Label>
+              <Select>
+                <SelectTrigger id="framework">
+                  <SelectValue placeholder="Select" />
+                </SelectTrigger>
+                <SelectContent position="popper">
+                  <SelectItem value="next">Next.js</SelectItem>
+                  <SelectItem value="sveltekit">SvelteKit</SelectItem>
+                  <SelectItem value="astro">Astro</SelectItem>
+                  <SelectItem value="nuxt">Nuxt.js</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </form>
+      </CardContent>
+      <CardFooter className="flex justify-between">
+        <Button variant="outline">Cancel</Button>
+        <Button>Deploy</Button>
+      </CardFooter>
+    </Card>
+  );
+}
diff --git a/web/src/pages/data-flow/canvas/node/categorize-node.tsx b/web/src/pages/data-flow/canvas/node/categorize-node.tsx
new file mode 100644
index 000000000..a54136b5a
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/categorize-node.tsx
@@ -0,0 +1,62 @@
+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 { NodeHandleId } from '../../constant';
+import { CommonHandle } from './handle';
+import { RightHandleStyle } from './handle-icon';
+import NodeHeader from './node-header';
+import { NodeWrapper } from './node-wrapper';
+import { ToolBar } from './toolbar';
+import { useBuildCategorizeHandlePositions } from './use-build-categorize-handle-positions';
+
+export function InnerCategorizeNode({
+  id,
+  data,
+  selected,
+}: NodeProps<ICategorizeNode>) {
+  const { positions } = useBuildCategorizeHandlePositions({ data, id });
+  return (
+    <ToolBar selected={selected} id={id} label={data.label}>
+      <NodeWrapper selected={selected}>
+        <CommonHandle
+          type="target"
+          position={Position.Left}
+          isConnectable
+          id={NodeHandleId.End}
+          nodeId={id}
+        ></CommonHandle>
+
+        <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>
+          {positions.map((position) => {
+            return (
+              <div key={position.uuid}>
+                <div className={'bg-bg-card rounded-sm p-1 truncate'}>
+                  {position.name}
+                </div>
+                <CommonHandle
+                  // key={position.text}
+                  id={position.uuid}
+                  type="source"
+                  position={Position.Right}
+                  isConnectable
+                  style={{ ...RightHandleStyle, top: position.top }}
+                  nodeId={id}
+                  isConnectableEnd={false}
+                ></CommonHandle>
+              </div>
+            );
+          })}
+        </section>
+      </NodeWrapper>
+    </ToolBar>
+  );
+}
+
+export const CategorizeNode = memo(InnerCategorizeNode);
diff --git a/web/src/pages/data-flow/canvas/node/dropdown.tsx b/web/src/pages/data-flow/canvas/node/dropdown.tsx
new file mode 100644
index 000000000..dd5263abc
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/dropdown.tsx
@@ -0,0 +1,58 @@
+import OperateDropdown from '@/components/operate-dropdown';
+import { CopyOutlined } from '@ant-design/icons';
+import { Flex, MenuProps } from 'antd';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Operator } from '../../constant';
+import { useDuplicateNode } from '../../hooks';
+import useGraphStore from '../../store';
+
+interface IProps {
+  id: string;
+  iconFontColor?: string;
+  label: string;
+}
+
+const NodeDropdown = ({ id, iconFontColor, label }: IProps) => {
+  const { t } = useTranslation();
+  const deleteNodeById = useGraphStore((store) => store.deleteNodeById);
+  const deleteIterationNodeById = useGraphStore(
+    (store) => store.deleteIterationNodeById,
+  );
+
+  const deleteNode = useCallback(() => {
+    if (label === Operator.Iteration) {
+      deleteIterationNodeById(id);
+    } else {
+      deleteNodeById(id);
+    }
+  }, [label, deleteIterationNodeById, id, deleteNodeById]);
+
+  const duplicateNode = useDuplicateNode();
+
+  const items: MenuProps['items'] = [
+    {
+      key: '2',
+      onClick: () => duplicateNode(id, label),
+      label: (
+        <Flex justify={'space-between'}>
+          {t('common.copy')}
+          <CopyOutlined />
+        </Flex>
+      ),
+    },
+  ];
+
+  return (
+    <OperateDropdown
+      iconFontSize={22}
+      height={14}
+      deleteItem={deleteNode}
+      items={items}
+      needsDeletionValidation={false}
+      iconFontColor={iconFontColor}
+    ></OperateDropdown>
+  );
+};
+
+export default NodeDropdown;
diff --git a/web/src/pages/data-flow/canvas/node/dropdown/next-step-dropdown.tsx b/web/src/pages/data-flow/canvas/node/dropdown/next-step-dropdown.tsx
new file mode 100644
index 000000000..6d9f32453
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/dropdown/next-step-dropdown.tsx
@@ -0,0 +1,295 @@
+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 { Operator } from '@/pages/agent/constant';
+import { AgentInstanceContext, HandleContext } from '@/pages/agent/context';
+import OperatorIcon from '@/pages/agent/operator-icon';
+import { Position } from '@xyflow/react';
+import { t } from 'i18next';
+import { lowerFirst } from 'lodash';
+import {
+  PropsWithChildren,
+  createContext,
+  memo,
+  useContext,
+  useEffect,
+  useRef,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+
+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 { t } = useTranslation();
+
+  const handleClick = (operator: Operator) => {
+    const contextData = handleContext || {
+      nodeId: '',
+      id: '',
+      type: 'source' as const,
+      position: Position.Right,
+      isFromConnectionDrag: true,
+    };
+
+    const mockEvent = mousePosition
+      ? {
+          clientX: mousePosition.x,
+          clientY: mousePosition.y,
+        }
+      : undefined;
+
+    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} />
+        {t(`flow.${lowerFirst(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} />
+              {t(`flow.${lowerFirst(operator)}`)}
+            </DropdownMenuItem>
+          )}
+        </TooltipTrigger>
+        <TooltipContent side="right">
+          <p>{t(`flow.${lowerFirst(operator)}Description`)}</p>
+        </TooltipContent>
+      </Tooltip>
+    );
+  };
+
+  return <ul className="space-y-2">{operators.map(renderOperatorItem)}</ul>;
+}
+
+function AccordionOperators({
+  isCustomDropdown = false,
+  mousePosition,
+}: {
+  isCustomDropdown?: boolean;
+  mousePosition?: { x: number; y: number };
+}) {
+  return (
+    <Accordion
+      type="multiple"
+      className="px-2 text-text-title max-h-[45vh] overflow-auto"
+      defaultValue={['item-1', 'item-2', 'item-3', 'item-4', 'item-5']}
+    >
+      <AccordionItem value="item-1">
+        <AccordionTrigger className="text-xl">
+          {t('flow.foundation')}
+        </AccordionTrigger>
+        <AccordionContent className="flex flex-col gap-4 text-balance">
+          <OperatorItemList
+            operators={[Operator.Agent, Operator.Retrieval]}
+            isCustomDropdown={isCustomDropdown}
+            mousePosition={mousePosition}
+          ></OperatorItemList>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger className="text-xl">
+          {t('flow.dialog')}
+        </AccordionTrigger>
+        <AccordionContent className="flex flex-col gap-4 text-balance">
+          <OperatorItemList
+            operators={[Operator.Message, Operator.UserFillUp]}
+            isCustomDropdown={isCustomDropdown}
+            mousePosition={mousePosition}
+          ></OperatorItemList>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger className="text-xl">
+          {t('flow.flow')}
+        </AccordionTrigger>
+        <AccordionContent className="flex flex-col gap-4 text-balance">
+          <OperatorItemList
+            operators={[
+              Operator.Switch,
+              Operator.Iteration,
+              Operator.Categorize,
+            ]}
+            isCustomDropdown={isCustomDropdown}
+            mousePosition={mousePosition}
+          ></OperatorItemList>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-4">
+        <AccordionTrigger className="text-xl">
+          {t('flow.dataManipulation')}
+        </AccordionTrigger>
+        <AccordionContent className="flex flex-col gap-4 text-balance">
+          <OperatorItemList
+            operators={[Operator.Code, Operator.StringTransform]}
+            isCustomDropdown={isCustomDropdown}
+            mousePosition={mousePosition}
+          ></OperatorItemList>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-5">
+        <AccordionTrigger className="text-xl">
+          {t('flow.tools')}
+        </AccordionTrigger>
+        <AccordionContent className="flex flex-col gap-4 text-balance">
+          <OperatorItemList
+            operators={[
+              Operator.TavilySearch,
+              Operator.TavilyExtract,
+              Operator.ExeSQL,
+              Operator.Google,
+              Operator.YahooFinance,
+              Operator.Email,
+              Operator.DuckDuckGo,
+              Operator.Wikipedia,
+              Operator.GoogleScholar,
+              Operator.ArXiv,
+              Operator.PubMed,
+              Operator.GitHub,
+              Operator.Invoke,
+              Operator.WenCai,
+              Operator.SearXNG,
+            ]}
+            isCustomDropdown={isCustomDropdown}
+            mousePosition={mousePosition}
+          ></OperatorItemList>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}
+
+export function InnerNextStepDropdown({
+  children,
+  hideModal,
+  position,
+  onNodeCreated,
+}: PropsWithChildren &
+  IModalProps<any> & {
+    position?: { x: number; y: number };
+    onNodeCreated?: (newNodeId: string) => void;
+  }) {
+  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}
+              ></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></AccordionOperators>
+        </HideModalContext.Provider>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export const NextStepDropdown = memo(InnerNextStepDropdown);
diff --git a/web/src/pages/data-flow/canvas/node/email-node.tsx b/web/src/pages/data-flow/canvas/node/email-node.tsx
new file mode 100644
index 000000000..9482194f3
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/email-node.tsx
@@ -0,0 +1,80 @@
+import { IEmailNode } from '@/interfaces/database/flow';
+import { Handle, NodeProps, Position } from '@xyflow/react';
+import { Flex } from 'antd';
+import classNames from 'classnames';
+import { memo, useState } from 'react';
+import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
+import styles from './index.less';
+import NodeHeader from './node-header';
+
+export function InnerEmailNode({
+  id,
+  data,
+  isConnectable = true,
+  selected,
+}: NodeProps<IEmailNode>) {
+  const [showDetails, setShowDetails] = useState(false);
+
+  return (
+    <section
+      className={classNames(styles.ragNode, {
+        [styles.selectedNode]: selected,
+      })}
+    >
+      <Handle
+        id="c"
+        type="source"
+        position={Position.Left}
+        isConnectable={isConnectable}
+        className={styles.handle}
+        style={LeftHandleStyle}
+      ></Handle>
+      <Handle
+        type="source"
+        position={Position.Right}
+        isConnectable={isConnectable}
+        className={styles.handle}
+        style={RightHandleStyle}
+        id="b"
+      ></Handle>
+      <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
+
+      <Flex vertical gap={8} className={styles.emailNodeContainer}>
+        <div
+          className={styles.emailConfig}
+          onClick={() => setShowDetails(!showDetails)}
+        >
+          <div className={styles.configItem}>
+            <span className={styles.configLabel}>SMTP:</span>
+            <span className={styles.configValue}>{data.form?.smtp_server}</span>
+          </div>
+          <div className={styles.configItem}>
+            <span className={styles.configLabel}>Port:</span>
+            <span className={styles.configValue}>{data.form?.smtp_port}</span>
+          </div>
+          <div className={styles.configItem}>
+            <span className={styles.configLabel}>From:</span>
+            <span className={styles.configValue}>{data.form?.email}</span>
+          </div>
+          <div className={styles.expandIcon}>{showDetails ? '▼' : '▶'}</div>
+        </div>
+
+        {showDetails && (
+          <div className={styles.jsonExample}>
+            <div className={styles.jsonTitle}>Expected Input JSON:</div>
+            <pre className={styles.jsonContent}>
+              {`{
+  "to_email": "...",
+  "cc_email": "...", 
+  "subject": "...",
+  "content": "..."
+}`}
+            </pre>
+          </div>
+        )}
+      </Flex>
+    </section>
+  );
+}
+
+export const EmailNode = memo(InnerEmailNode);
diff --git a/web/src/pages/data-flow/canvas/node/generate-node.tsx b/web/src/pages/data-flow/canvas/node/generate-node.tsx
new file mode 100644
index 000000000..8ffbbd79c
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/generate-node.tsx
@@ -0,0 +1,60 @@
+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/data-flow/canvas/node/handle-icon.tsx b/web/src/pages/data-flow/canvas/node/handle-icon.tsx
new file mode 100644
index 000000000..36c7f3634
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/handle-icon.tsx
@@ -0,0 +1,20 @@
+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
new file mode 100644
index 000000000..71b473cc7
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/handle.tsx
@@ -0,0 +1,64 @@
+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 { useDropdownManager } from '../context';
+import { InnerNextStepDropdown } 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 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 (!canShowDropdown()) {
+            return;
+          }
+
+          setActiveDropdown('handle');
+          showModal();
+        }}
+      >
+        <Plus className="size-3 pointer-events-none text-text-title-invert" />
+        {visible && (
+          <InnerNextStepDropdown
+            hideModal={() => {
+              hideModal();
+              clearActiveDropdown();
+            }}
+          >
+            <span></span>
+          </InnerNextStepDropdown>
+        )}
+      </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
new file mode 100644
index 000000000..14d7e6077
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/index.less
@@ -0,0 +1,285 @@
+.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
new file mode 100644
index 000000000..a1d48955b
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/index.tsx
@@ -0,0 +1,49 @@
+import { IRagNode } from '@/interfaces/database/flow';
+import { NodeProps, Position } from '@xyflow/react';
+import { memo } from 'react';
+import { NodeHandleId } from '../../constant';
+import { needsSingleStepDebugging } from '../../utils';
+import { CommonHandle } from './handle';
+import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
+import NodeHeader from './node-header';
+import { NodeWrapper } from './node-wrapper';
+import { ToolBar } from './toolbar';
+
+function InnerRagNode({
+  id,
+  data,
+  isConnectable = true,
+  selected,
+}: NodeProps<IRagNode>) {
+  return (
+    <ToolBar
+      selected={selected}
+      id={id}
+      label={data.label}
+      showRun={needsSingleStepDebugging(data.label)}
+    >
+      <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>
+      </NodeWrapper>
+    </ToolBar>
+  );
+}
+
+export const RagNode = memo(InnerRagNode);
diff --git a/web/src/pages/data-flow/canvas/node/invoke-node.tsx b/web/src/pages/data-flow/canvas/node/invoke-node.tsx
new file mode 100644
index 000000000..cf1e28d02
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/invoke-node.tsx
@@ -0,0 +1,62 @@
+import { useTheme } from '@/components/theme-provider';
+import { IInvokeNode } from '@/interfaces/database/flow';
+import { Handle, NodeProps, Position } from '@xyflow/react';
+import { Flex } from 'antd';
+import classNames from 'classnames';
+import { get } from 'lodash';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
+import styles from './index.less';
+import NodeHeader from './node-header';
+
+function InnerInvokeNode({
+  id,
+  data,
+  isConnectable = true,
+  selected,
+}: NodeProps<IInvokeNode>) {
+  const { t } = useTranslation();
+  const { theme } = useTheme();
+  const url = get(data, 'form.url');
+  return (
+    <section
+      className={classNames(
+        styles.ragNode,
+        theme === 'dark' ? styles.dark : '',
+        {
+          [styles.selectedNode]: selected,
+        },
+      )}
+    >
+      <Handle
+        id="c"
+        type="source"
+        position={Position.Left}
+        isConnectable={isConnectable}
+        className={styles.handle}
+        style={LeftHandleStyle}
+      ></Handle>
+      <Handle
+        type="source"
+        position={Position.Right}
+        isConnectable={isConnectable}
+        className={styles.handle}
+        id="b"
+        style={RightHandleStyle}
+      ></Handle>
+      <NodeHeader
+        id={id}
+        name={data.name}
+        label={data.label}
+        className={styles.nodeHeader}
+      ></NodeHeader>
+      <Flex vertical>
+        <div>{t('flow.url')}</div>
+        <div className={styles.nodeText}>{url}</div>
+      </Flex>
+    </section>
+  );
+}
+
+export const InvokeNode = memo(InnerInvokeNode);
diff --git a/web/src/pages/data-flow/canvas/node/iteration-node.tsx b/web/src/pages/data-flow/canvas/node/iteration-node.tsx
new file mode 100644
index 000000000..3bdbae590
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/iteration-node.tsx
@@ -0,0 +1,93 @@
+import {
+  IIterationNode,
+  IIterationStartNode,
+} from '@/interfaces/database/flow';
+import { cn } from '@/lib/utils';
+import { NodeProps, NodeResizeControl, Position } from '@xyflow/react';
+import { memo } from 'react';
+import { NodeHandleId, Operator } from '../../constant';
+import OperatorIcon from '../../operator-icon';
+import { CommonHandle } from './handle';
+import { RightHandleStyle } from './handle-icon';
+import styles from './index.less';
+import NodeHeader from './node-header';
+import { NodeWrapper } from './node-wrapper';
+import { ResizeIcon, controlStyle } from './resize-icon';
+import { ToolBar } from './toolbar';
+
+export function InnerIterationNode({
+  id,
+  data,
+  isConnectable = true,
+  selected,
+}: NodeProps<IIterationNode>) {
+  return (
+    <ToolBar selected={selected} id={id} label={data.label} showRun={false}>
+      <section
+        className={cn('h-full bg-transparent rounded-b-md ', {
+          [styles.selectedHeader]: selected,
+        })}
+      >
+        <NodeResizeControl style={controlStyle} minWidth={100} minHeight={50}>
+          <ResizeIcon />
+        </NodeResizeControl>
+        <CommonHandle
+          id={NodeHandleId.End}
+          type="target"
+          position={Position.Left}
+          isConnectable={isConnectable}
+          className={styles.handle}
+          nodeId={id}
+        ></CommonHandle>
+        <CommonHandle
+          id={NodeHandleId.Start}
+          type="source"
+          position={Position.Right}
+          isConnectable={isConnectable}
+          className={styles.handle}
+          nodeId={id}
+        ></CommonHandle>
+
+        <NodeHeader
+          id={id}
+          name={data.name}
+          label={data.label}
+          wrapperClassName={cn(
+            'bg-background-header-bar p-2 rounded-t-[10px] absolute w-full top-[-44px] left-[-0.3px]',
+            {
+              [styles.selectedHeader]: selected,
+            },
+          )}
+        ></NodeHeader>
+      </section>
+    </ToolBar>
+  );
+}
+
+function InnerIterationStartNode({
+  isConnectable = true,
+  id,
+  selected,
+}: NodeProps<IIterationStartNode>) {
+  return (
+    <NodeWrapper className="w-20" selected={selected}>
+      <CommonHandle
+        type="source"
+        position={Position.Right}
+        isConnectable={isConnectable}
+        className={styles.handle}
+        style={RightHandleStyle}
+        isConnectableEnd={false}
+        id={NodeHandleId.Start}
+        nodeId={id}
+      ></CommonHandle>
+      <div>
+        <OperatorIcon name={Operator.Begin}></OperatorIcon>
+      </div>
+    </NodeWrapper>
+  );
+}
+
+export const IterationStartNode = memo(InnerIterationStartNode);
+
+export const IterationNode = memo(InnerIterationNode);
diff --git a/web/src/pages/data-flow/canvas/node/keyword-node.tsx b/web/src/pages/data-flow/canvas/node/keyword-node.tsx
new file mode 100644
index 000000000..012dcf26c
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/keyword-node.tsx
@@ -0,0 +1,60 @@
+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 { LeftHandleStyle, RightHandleStyle } from './handle-icon';
+import styles from './index.less';
+import NodeHeader from './node-header';
+
+export function InnerKeywordNode({
+  id,
+  data,
+  isConnectable = true,
+  selected,
+}: NodeProps<IKeywordNode>) {
+  const { theme } = useTheme();
+  return (
+    <section
+      className={classNames(
+        styles.logicNode,
+        theme === 'dark' ? styles.dark : '',
+        {
+          [styles.selectedNode]: selected,
+        },
+      )}
+    >
+      <Handle
+        id="c"
+        type="source"
+        position={Position.Left}
+        isConnectable={isConnectable}
+        className={styles.handle}
+        style={LeftHandleStyle}
+      ></Handle>
+      <Handle
+        type="source"
+        position={Position.Right}
+        isConnectable={isConnectable}
+        className={styles.handle}
+        style={RightHandleStyle}
+        id="b"
+      ></Handle>
+
+      <NodeHeader
+        id={id}
+        name={data.name}
+        label={data.label}
+        className={styles.nodeHeader}
+      ></NodeHeader>
+
+      <div className={styles.nodeText}>
+        <LLMLabel value={get(data, 'form.llm_id')}></LLMLabel>
+      </div>
+    </section>
+  );
+}
+
+export const KeywordNode = memo(InnerKeywordNode);
diff --git a/web/src/pages/data-flow/canvas/node/logic-node.tsx b/web/src/pages/data-flow/canvas/node/logic-node.tsx
new file mode 100644
index 000000000..481c26c25
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/logic-node.tsx
@@ -0,0 +1,41 @@
+import { ILogicNode } from '@/interfaces/database/flow';
+import { NodeProps, Position } from '@xyflow/react';
+import { memo } from 'react';
+import { CommonHandle } from './handle';
+import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
+import NodeHeader from './node-header';
+import { NodeWrapper } from './node-wrapper';
+import { ToolBar } from './toolbar';
+
+export function InnerLogicNode({
+  id,
+  data,
+  isConnectable = true,
+  selected,
+}: NodeProps<ILogicNode>) {
+  return (
+    <ToolBar selected={selected} id={id} label={data.label}>
+      <NodeWrapper selected={selected}>
+        <CommonHandle
+          id="c"
+          type="source"
+          position={Position.Left}
+          isConnectable={isConnectable}
+          style={LeftHandleStyle}
+          nodeId={id}
+        ></CommonHandle>
+        <CommonHandle
+          type="source"
+          position={Position.Right}
+          isConnectable={isConnectable}
+          style={RightHandleStyle}
+          id="b"
+          nodeId={id}
+        ></CommonHandle>
+        <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
+      </NodeWrapper>
+    </ToolBar>
+  );
+}
+
+export const LogicNode = memo(InnerLogicNode);
diff --git a/web/src/pages/data-flow/canvas/node/message-node.tsx b/web/src/pages/data-flow/canvas/node/message-node.tsx
new file mode 100644
index 000000000..057845a63
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/message-node.tsx
@@ -0,0 +1,65 @@
+import { IMessageNode } from '@/interfaces/database/flow';
+import { NodeProps, Position } from '@xyflow/react';
+import { Flex } from 'antd';
+import classNames from 'classnames';
+import { get } from 'lodash';
+import { memo } from 'react';
+import { NodeHandleId } from '../../constant';
+import { CommonHandle } from './handle';
+import { LeftHandleStyle } from './handle-icon';
+import styles from './index.less';
+import NodeHeader from './node-header';
+import { NodeWrapper } from './node-wrapper';
+import { ToolBar } from './toolbar';
+
+function InnerMessageNode({
+  id,
+  data,
+  isConnectable = true,
+  selected,
+}: NodeProps<IMessageNode>) {
+  const messages: string[] = get(data, 'form.messages', []);
+  return (
+    <ToolBar selected={selected} id={id} label={data.label}>
+      <NodeWrapper selected={selected}>
+        <CommonHandle
+          type="target"
+          position={Position.Left}
+          isConnectable={isConnectable}
+          style={LeftHandleStyle}
+          nodeId={id}
+          id={NodeHandleId.End}
+        ></CommonHandle>
+        {/* <CommonHandle
+          type="source"
+          position={Position.Right}
+          isConnectable={isConnectable}
+          style={RightHandleStyle}
+          id={NodeHandleId.Start}
+          nodeId={id}
+          isConnectableEnd={false}
+        ></CommonHandle> */}
+        <NodeHeader
+          id={id}
+          name={data.name}
+          label={data.label}
+          className={classNames({
+            [styles.nodeHeader]: messages.length > 0,
+          })}
+        ></NodeHeader>
+
+        <Flex vertical gap={8} className={styles.messageNodeContainer}>
+          {messages.map((message, idx) => {
+            return (
+              <div className={styles.nodeText} key={idx}>
+                {message}
+              </div>
+            );
+          })}
+        </Flex>
+      </NodeWrapper>
+    </ToolBar>
+  );
+}
+
+export const MessageNode = memo(InnerMessageNode);
diff --git a/web/src/pages/data-flow/canvas/node/node-header.tsx b/web/src/pages/data-flow/canvas/node/node-header.tsx
new file mode 100644
index 000000000..9647af1ed
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/node-header.tsx
@@ -0,0 +1,34 @@
+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;
+}
+
+const InnerNodeHeader = ({
+  label,
+  name,
+  className,
+  wrapperClassName,
+}: IProps) => {
+  return (
+    <section className={cn(wrapperClassName, 'pb-4')}>
+      <div className={cn(className, 'flex gap-2.5')}>
+        <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
new file mode 100644
index 000000000..ab53466ff
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/node-wrapper.tsx
@@ -0,0 +1,18 @@
+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
new file mode 100644
index 000000000..2c9d2446e
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/note-node/index.tsx
@@ -0,0 +1,104 @@
+import { NodeProps, NodeResizeControl } from '@xyflow/react';
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { INoteNode } from '@/interfaces/database/flow';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { NotebookPen } from 'lucide-react';
+import { memo } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { NodeWrapper } from '../node-wrapper';
+import { ResizeIcon, controlStyle } from '../resize-icon';
+import { useWatchFormChange, useWatchNameFormChange } from './use-watch-change';
+
+const FormSchema = z.object({
+  text: z.string(),
+});
+
+const NameFormSchema = z.object({
+  name: z.string(),
+});
+
+function NoteNode({ data, id, selected }: NodeProps<INoteNode>) {
+  const { t } = useTranslation();
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: data.form,
+  });
+
+  const nameForm = useForm<z.infer<typeof NameFormSchema>>({
+    resolver: zodResolver(NameFormSchema),
+    defaultValues: { name: data.name },
+  });
+
+  useWatchFormChange(id, form);
+
+  useWatchNameFormChange(id, nameForm);
+
+  return (
+    <NodeWrapper
+      className="p-0  w-full h-full flex flex-col"
+      selected={selected}
+    >
+      <NodeResizeControl minWidth={190} minHeight={128} style={controlStyle}>
+        <ResizeIcon />
+      </NodeResizeControl>
+      <section className="p-2 flex gap-2 bg-background-note items-center note-drag-handle rounded-t">
+        <NotebookPen className="size-4" />
+        <Form {...nameForm}>
+          <form className="flex-1">
+            <FormField
+              control={nameForm.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem className="h-full">
+                  <FormControl>
+                    <Input
+                      placeholder={t('flow.notePlaceholder')}
+                      {...field}
+                      type="text"
+                      className="bg-transparent border-none focus-visible:outline focus-visible:outline-text-sub-title"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </form>
+        </Form>
+      </section>
+      <Form {...form}>
+        <form className="flex-1 p-1">
+          <FormField
+            control={form.control}
+            name="text"
+            render={({ field }) => (
+              <FormItem className="h-full">
+                <FormControl>
+                  <Textarea
+                    placeholder={t('flow.notePlaceholder')}
+                    className="resize-none rounded-none p-1 h-full overflow-auto bg-transparent focus-visible:ring-0 border-none"
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </form>
+      </Form>
+    </NodeWrapper>
+  );
+}
+
+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
new file mode 100644
index 000000000..9531bda11
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/note-node/use-watch-change.ts
@@ -0,0 +1,30 @@
+import useGraphStore from '@/pages/agent/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/popover.tsx b/web/src/pages/data-flow/canvas/node/popover.tsx
new file mode 100644
index 000000000..d44538656
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/popover.tsx
@@ -0,0 +1,121 @@
+import get from 'lodash/get';
+import React, { MouseEventHandler, useCallback, useMemo } from 'react';
+import JsonView from 'react18-json-view';
+import 'react18-json-view/src/style.css';
+import { useReplaceIdWithText } from '../../hooks';
+
+import { useTheme } from '@/components/theme-provider';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useTranslate } from '@/hooks/common-hooks';
+import { useFetchAgent } from '@/hooks/use-agent-request';
+import { useGetComponentLabelByValue } from '../../hooks/use-get-begin-query';
+
+interface IProps extends React.PropsWithChildren {
+  nodeId: string;
+  name?: string;
+}
+
+export function NextNodePopover({ children, nodeId, name }: IProps) {
+  const { t } = useTranslate('flow');
+
+  const { data } = useFetchAgent();
+  const { theme } = useTheme();
+  const component = useMemo(() => {
+    return get(data, ['dsl', 'components', nodeId], {});
+  }, [nodeId, data]);
+
+  const inputs: Array<{ component_id: string; content: string }> = get(
+    component,
+    ['obj', 'inputs'],
+    [],
+  );
+  const output = get(component, ['obj', 'output'], {});
+  const { replacedOutput } = useReplaceIdWithText(output);
+  const stopPropagation: MouseEventHandler = useCallback((e) => {
+    e.stopPropagation();
+  }, []);
+
+  const getLabel = useGetComponentLabelByValue(nodeId);
+
+  return (
+    <Popover>
+      <PopoverTrigger onClick={stopPropagation} asChild>
+        {children}
+      </PopoverTrigger>
+      <PopoverContent
+        align={'start'}
+        side={'right'}
+        sideOffset={20}
+        onClick={stopPropagation}
+        className="w-[400px]"
+      >
+        <div className="mb-3 font-semibold text-[16px]">
+          {name} {t('operationResults')}
+        </div>
+        <div className="flex w-full gap-4 flex-col">
+          <div className="flex flex-col space-y-1.5">
+            <span className="font-semibold text-[14px]">{t('input')}</span>
+            <div
+              style={
+                theme === 'dark'
+                  ? {
+                      backgroundColor: 'rgba(150, 150, 150, 0.2)',
+                    }
+                  : {}
+              }
+              className={`bg-gray-100 p-1 rounded`}
+            >
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t('componentId')}</TableHead>
+                    <TableHead className="w-[60px]">{t('content')}</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {inputs.map((x, idx) => (
+                    <TableRow key={idx}>
+                      <TableCell>{getLabel(x.component_id)}</TableCell>
+                      <TableCell className="truncate">{x.content}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+          <div className="flex flex-col space-y-1.5">
+            <span className="font-semibold text-[14px]">{t('output')}</span>
+            <div
+              style={
+                theme === 'dark'
+                  ? {
+                      backgroundColor: 'rgba(150, 150, 150, 0.2)',
+                    }
+                  : {}
+              }
+              className="bg-gray-100 p-1 rounded"
+            >
+              <JsonView
+                src={replacedOutput}
+                displaySize={30}
+                className="w-full max-h-[300px] break-words overflow-auto"
+              />
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/web/src/pages/data-flow/canvas/node/relevant-node.tsx b/web/src/pages/data-flow/canvas/node/relevant-node.tsx
new file mode 100644
index 000000000..410a7accd
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/relevant-node.tsx
@@ -0,0 +1,73 @@
+import { Handle, NodeProps, Position } from '@xyflow/react';
+import { Flex } from 'antd';
+import classNames from 'classnames';
+import { RightHandleStyle } from './handle-icon';
+
+import { useTheme } from '@/components/theme-provider';
+import { IRelevantNode } from '@/interfaces/database/flow';
+import { get } from 'lodash';
+import { memo } from 'react';
+import { useReplaceIdWithName } from '../../hooks';
+import styles from './index.less';
+import NodeHeader from './node-header';
+
+function InnerRelevantNode({ id, data, selected }: NodeProps<IRelevantNode>) {
+  const yes = get(data, 'form.yes');
+  const no = get(data, 'form.no');
+  const replaceIdWithName = useReplaceIdWithName();
+  const { theme } = useTheme();
+  return (
+    <section
+      className={classNames(
+        styles.logicNode,
+        theme === 'dark' ? styles.dark : '',
+        {
+          [styles.selectedNode]: selected,
+        },
+      )}
+    >
+      <Handle
+        type="target"
+        position={Position.Left}
+        isConnectable
+        className={styles.handle}
+        id={'a'}
+      ></Handle>
+      <Handle
+        type="source"
+        position={Position.Right}
+        isConnectable
+        className={styles.handle}
+        id={'yes'}
+        style={{ ...RightHandleStyle, top: 57 + 20 }}
+      ></Handle>
+      <Handle
+        type="source"
+        position={Position.Right}
+        isConnectable
+        className={styles.handle}
+        id={'no'}
+        style={{ ...RightHandleStyle, top: 115 + 20 }}
+      ></Handle>
+      <NodeHeader
+        id={id}
+        name={data.name}
+        label={data.label}
+        className={styles.nodeHeader}
+      ></NodeHeader>
+
+      <Flex vertical gap={10}>
+        <Flex vertical>
+          <div className={styles.relevantLabel}>Yes</div>
+          <div className={styles.nodeText}>{replaceIdWithName(yes)}</div>
+        </Flex>
+        <Flex vertical>
+          <div className={styles.relevantLabel}>No</div>
+          <div className={styles.nodeText}>{replaceIdWithName(no)}</div>
+        </Flex>
+      </Flex>
+    </section>
+  );
+}
+
+export const RelevantNode = memo(InnerRelevantNode);
diff --git a/web/src/pages/data-flow/canvas/node/resize-icon.tsx b/web/src/pages/data-flow/canvas/node/resize-icon.tsx
new file mode 100644
index 000000000..e01188924
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/resize-icon.tsx
@@ -0,0 +1,32 @@
+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/retrieval-node.tsx b/web/src/pages/data-flow/canvas/node/retrieval-node.tsx
new file mode 100644
index 000000000..5703ec1f4
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/retrieval-node.tsx
@@ -0,0 +1,84 @@
+import { RAGFlowAvatar } from '@/components/ragflow-avatar';
+import { useFetchKnowledgeList } from '@/hooks/knowledge-hooks';
+import { IRetrievalNode } from '@/interfaces/database/flow';
+import { NodeProps, Position } from '@xyflow/react';
+import classNames from 'classnames';
+import { get } from 'lodash';
+import { memo } from 'react';
+import { NodeHandleId } from '../../constant';
+import { useGetVariableLabelByValue } from '../../hooks/use-get-begin-query';
+import { CommonHandle } from './handle';
+import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
+import styles from './index.less';
+import NodeHeader from './node-header';
+import { NodeWrapper } from './node-wrapper';
+import { ToolBar } from './toolbar';
+
+function InnerRetrievalNode({
+  id,
+  data,
+  isConnectable = true,
+  selected,
+}: NodeProps<IRetrievalNode>) {
+  const knowledgeBaseIds: string[] = get(data, 'form.kb_ids', []);
+  const { list: knowledgeList } = useFetchKnowledgeList(true);
+
+  const getLabel = useGetVariableLabelByValue(id);
+
+  return (
+    <ToolBar selected={selected} id={id} label={data.label}>
+      <NodeWrapper selected={selected}>
+        <CommonHandle
+          id={NodeHandleId.End}
+          type="target"
+          position={Position.Left}
+          isConnectable={isConnectable}
+          className={styles.handle}
+          style={LeftHandleStyle}
+          nodeId={id}
+        ></CommonHandle>
+        <CommonHandle
+          id={NodeHandleId.Start}
+          type="source"
+          position={Position.Right}
+          isConnectable={isConnectable}
+          className={styles.handle}
+          style={RightHandleStyle}
+          nodeId={id}
+          isConnectableEnd={false}
+        ></CommonHandle>
+        <NodeHeader
+          id={id}
+          name={data.name}
+          label={data.label}
+          className={classNames({
+            [styles.nodeHeader]: knowledgeBaseIds.length > 0,
+          })}
+        ></NodeHeader>
+        <section className="flex flex-col gap-2">
+          {knowledgeBaseIds.map((id) => {
+            const item = knowledgeList.find((y) => id === y.id);
+            const label = getLabel(id);
+
+            return (
+              <div className={styles.nodeText} key={id}>
+                <div className="flex items-center gap-1.5">
+                  <RAGFlowAvatar
+                    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>
+                </div>
+              </div>
+            );
+          })}
+        </section>
+      </NodeWrapper>
+    </ToolBar>
+  );
+}
+
+export const RetrievalNode = memo(InnerRetrievalNode);
diff --git a/web/src/pages/data-flow/canvas/node/rewrite-node.tsx b/web/src/pages/data-flow/canvas/node/rewrite-node.tsx
new file mode 100644
index 000000000..134899c8b
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/rewrite-node.tsx
@@ -0,0 +1,60 @@
+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 { LeftHandleStyle, RightHandleStyle } from './handle-icon';
+import styles from './index.less';
+import NodeHeader from './node-header';
+
+function InnerRewriteNode({
+  id,
+  data,
+  isConnectable = true,
+  selected,
+}: NodeProps<IRewriteNode>) {
+  const { theme } = useTheme();
+  return (
+    <section
+      className={classNames(
+        styles.logicNode,
+        theme === 'dark' ? styles.dark : '',
+        {
+          [styles.selectedNode]: selected,
+        },
+      )}
+    >
+      <Handle
+        id="c"
+        type="source"
+        position={Position.Left}
+        isConnectable={isConnectable}
+        className={styles.handle}
+        style={LeftHandleStyle}
+      ></Handle>
+      <Handle
+        type="source"
+        position={Position.Right}
+        isConnectable={isConnectable}
+        className={styles.handle}
+        style={RightHandleStyle}
+        id="b"
+      ></Handle>
+
+      <NodeHeader
+        id={id}
+        name={data.name}
+        label={data.label}
+        className={styles.nodeHeader}
+      ></NodeHeader>
+
+      <div className={styles.nodeText}>
+        <LLMLabel value={get(data, 'form.llm_id')}></LLMLabel>
+      </div>
+    </section>
+  );
+}
+
+export const RewriteNode = memo(InnerRewriteNode);
diff --git a/web/src/pages/data-flow/canvas/node/switch-node.tsx b/web/src/pages/data-flow/canvas/node/switch-node.tsx
new file mode 100644
index 000000000..b62e45adb
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/switch-node.tsx
@@ -0,0 +1,118 @@
+import { Card, CardContent } from '@/components/ui/card';
+import { ISwitchCondition, ISwitchNode } from '@/interfaces/database/flow';
+import { NodeProps, Position } from '@xyflow/react';
+import { memo, useCallback } from 'react';
+import { NodeHandleId, SwitchOperatorOptions } from '../../constant';
+import { LogicalOperatorIcon } from '../../form/switch-form';
+import { useGetVariableLabelByValue } from '../../hooks/use-get-begin-query';
+import { CommonHandle } from './handle';
+import { RightHandleStyle } from './handle-icon';
+import NodeHeader from './node-header';
+import { NodeWrapper } from './node-wrapper';
+import { ToolBar } from './toolbar';
+import { useBuildSwitchHandlePositions } from './use-build-switch-handle-positions';
+
+const getConditionKey = (idx: number, length: number) => {
+  if (idx === 0 && length !== 1) {
+    return 'If';
+  } else if (idx === length - 1) {
+    return 'Else';
+  }
+
+  return 'ElseIf';
+};
+
+const ConditionBlock = ({
+  condition,
+  nodeId,
+}: { condition: ISwitchCondition } & { nodeId: string }) => {
+  const items = condition?.items ?? [];
+  const getLabel = useGetVariableLabelByValue(nodeId);
+
+  const renderOperatorIcon = useCallback((operator?: string) => {
+    const item = SwitchOperatorOptions.find((x) => x.value === operator);
+    if (item) {
+      return (
+        <LogicalOperatorIcon
+          icon={item?.icon}
+          value={item?.value}
+        ></LogicalOperatorIcon>
+      );
+    }
+    return <></>;
+  }, []);
+
+  return (
+    <Card>
+      <CardContent className="p-0 divide-y divide-background-card">
+        {items.map((x, idx) => (
+          <div key={idx}>
+            <section className="flex justify-between gap-2 items-center text-xs p-1">
+              <div className="flex-1 truncate text-accent-primary">
+                {getLabel(x?.cpn_id)}
+              </div>
+              <span>{renderOperatorIcon(x?.operator)}</span>
+              <div className="flex-1 truncate">{x?.value}</div>
+            </section>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+};
+
+function InnerSwitchNode({ id, data, selected }: NodeProps<ISwitchNode>) {
+  const { positions } = useBuildSwitchHandlePositions({ data, id });
+  return (
+    <ToolBar selected={selected} id={id} label={data.label} showRun={false}>
+      <NodeWrapper selected={selected}>
+        <CommonHandle
+          type="target"
+          position={Position.Left}
+          isConnectable
+          nodeId={id}
+          id={NodeHandleId.End}
+        ></CommonHandle>
+        <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
+        <section className="gap-2.5 flex flex-col">
+          {positions.map((position, idx) => {
+            return (
+              <div key={idx}>
+                <section className="flex flex-col text-xs">
+                  <div className="text-right">
+                    <span>{getConditionKey(idx, positions.length)}</span>
+                    <div className="text-text-secondary">
+                      {idx < positions.length - 1 && position.text}
+                    </div>
+                  </div>
+                  <span className="text-accent-primary">
+                    {idx < positions.length - 1 &&
+                      position.condition?.logical_operator?.toUpperCase()}
+                  </span>
+                  {position.condition && (
+                    <ConditionBlock
+                      condition={position.condition}
+                      nodeId={id}
+                    ></ConditionBlock>
+                  )}
+                </section>
+                <CommonHandle
+                  key={position.text}
+                  id={position.text}
+                  type="source"
+                  position={Position.Right}
+                  isConnectable
+                  style={{ ...RightHandleStyle, top: position.top }}
+                  nodeId={id}
+                  isConnectableEnd={false}
+                ></CommonHandle>
+              </div>
+            );
+          })}
+        </section>
+      </NodeWrapper>
+    </ToolBar>
+  );
+}
+
+export const SwitchNode = memo(InnerSwitchNode);
diff --git a/web/src/pages/data-flow/canvas/node/template-node.tsx b/web/src/pages/data-flow/canvas/node/template-node.tsx
new file mode 100644
index 000000000..b204717ab
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/template-node.tsx
@@ -0,0 +1,78 @@
+import { useTheme } from '@/components/theme-provider';
+import { Handle, NodeProps, Position } from '@xyflow/react';
+import { Flex } from 'antd';
+import classNames from 'classnames';
+import { get } from 'lodash';
+import { useGetComponentLabelByValue } from '../../hooks/use-get-begin-query';
+import { IGenerateParameter } from '../../interface';
+import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
+import NodeHeader from './node-header';
+
+import { ITemplateNode } from '@/interfaces/database/flow';
+import { memo } from 'react';
+import styles from './index.less';
+
+function InnerTemplateNode({
+  id,
+  data,
+  isConnectable = true,
+  selected,
+}: NodeProps<ITemplateNode>) {
+  const parameters: IGenerateParameter[] = get(data, 'form.parameters', []);
+  const getLabel = useGetComponentLabelByValue(id);
+  const { theme } = useTheme();
+  return (
+    <section
+      className={classNames(
+        styles.logicNode,
+        theme === 'dark' ? styles.dark : '',
+
+        {
+          [styles.selectedNode]: selected,
+        },
+      )}
+    >
+      <Handle
+        id="c"
+        type="source"
+        position={Position.Left}
+        isConnectable={isConnectable}
+        className={styles.handle}
+        style={LeftHandleStyle}
+      ></Handle>
+      <Handle
+        type="source"
+        position={Position.Right}
+        isConnectable={isConnectable}
+        className={styles.handle}
+        style={RightHandleStyle}
+        id="b"
+      ></Handle>
+
+      <NodeHeader
+        id={id}
+        name={data.name}
+        label={data.label}
+        className={styles.nodeHeader}
+      ></NodeHeader>
+
+      <Flex gap={8} vertical className={styles.generateParameters}>
+        {parameters.map((x) => (
+          <Flex
+            key={x.id}
+            align="center"
+            gap={6}
+            className={styles.conditionBlock}
+          >
+            <label htmlFor="">{x.key}</label>
+            <span className={styles.parameterValue}>
+              {getLabel(x.component_id)}
+            </span>
+          </Flex>
+        ))}
+      </Flex>
+    </section>
+  );
+}
+
+export const TemplateNode = memo(InnerTemplateNode);
diff --git a/web/src/pages/data-flow/canvas/node/tool-node.tsx b/web/src/pages/data-flow/canvas/node/tool-node.tsx
new file mode 100644
index 000000000..42c7bf3b5
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/tool-node.tsx
@@ -0,0 +1,83 @@
+import { IAgentForm, IToolNode } from '@/interfaces/database/agent';
+import { Handle, NodeProps, Position } from '@xyflow/react';
+import { get } from 'lodash';
+import { MouseEventHandler, memo, useCallback } from 'react';
+import { NodeHandleId, Operator } from '../../constant';
+import { ToolCard } from '../../form/agent-form/agent-tools';
+import { useFindMcpById } from '../../hooks/use-find-mcp-by-id';
+import OperatorIcon from '../../operator-icon';
+import useGraphStore from '../../store';
+import { NodeWrapper } from './node-wrapper';
+
+function InnerToolNode({
+  id,
+  isConnectable = true,
+  selected,
+}: NodeProps<IToolNode>) {
+  const { edges, getNode } = useGraphStore((state) => state);
+  const upstreamAgentNodeId = edges.find((x) => x.target === id)?.source;
+  const upstreamAgentNode = getNode(upstreamAgentNodeId);
+  const { findMcpById } = useFindMcpById();
+
+  const handleClick = useCallback(
+    (operator: string): MouseEventHandler<HTMLLIElement> =>
+      (e) => {
+        if (operator === Operator.Code) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      },
+    [],
+  );
+
+  const tools: IAgentForm['tools'] = get(
+    upstreamAgentNode,
+    'data.form.tools',
+    [],
+  );
+
+  const mcpList: IAgentForm['mcp'] = get(
+    upstreamAgentNode,
+    'data.form.mcp',
+    [],
+  );
+
+  return (
+    <NodeWrapper selected={selected}>
+      <Handle
+        id={NodeHandleId.End}
+        type="target"
+        position={Position.Top}
+        isConnectable={isConnectable}
+      ></Handle>
+      <ul className="space-y-2">
+        {tools.map((x) => (
+          <ToolCard
+            key={x.component_name}
+            onClick={handleClick(x.component_name)}
+            className="cursor-pointer"
+            data-tool={x.component_name}
+          >
+            <div className="flex gap-1 items-center pointer-events-none">
+              <OperatorIcon name={x.component_name as Operator}></OperatorIcon>
+              {x.component_name}
+            </div>
+          </ToolCard>
+        ))}
+
+        {mcpList.map((x) => (
+          <ToolCard
+            key={x.mcp_id}
+            onClick={handleClick(x.mcp_id)}
+            className="cursor-pointer"
+            data-tool={x.mcp_id}
+          >
+            {findMcpById(x.mcp_id)?.name}
+          </ToolCard>
+        ))}
+      </ul>
+    </NodeWrapper>
+  );
+}
+
+export const ToolNode = memo(InnerToolNode);
diff --git a/web/src/pages/data-flow/canvas/node/toolbar.tsx b/web/src/pages/data-flow/canvas/node/toolbar.tsx
new file mode 100644
index 000000000..a8b5cd13c
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/toolbar.tsx
@@ -0,0 +1,88 @@
+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 { Operator } from '../../constant';
+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;
+} & PropsWithChildren;
+
+export function ToolBar({
+  selected,
+  children,
+  label,
+  id,
+  showRun = true,
+}: ToolBarProps) {
+  const deleteNodeById = useGraphStore((store) => store.deleteNodeById);
+  const deleteIterationNodeById = useGraphStore(
+    (store) => store.deleteIterationNodeById,
+  );
+
+  const deleteNode: MouseEventHandler<HTMLDivElement> = useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (label === Operator.Iteration) {
+        deleteIterationNodeById(id);
+      } else {
+        deleteNodeById(id);
+      }
+    },
+    [deleteIterationNodeById, deleteNodeById, id, label],
+  );
+
+  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>
+          )}{' '}
+          <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/canvas/node/use-build-categorize-handle-positions.ts b/web/src/pages/data-flow/canvas/node/use-build-categorize-handle-positions.ts
new file mode 100644
index 000000000..9973441e7
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/use-build-categorize-handle-positions.ts
@@ -0,0 +1,48 @@
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { useUpdateNodeInternals } from '@xyflow/react';
+import { get } from 'lodash';
+import { useEffect, useMemo } from 'react';
+import { z } from 'zod';
+import { useCreateCategorizeFormSchema } from '../../form/categorize-form/use-form-schema';
+
+export const useBuildCategorizeHandlePositions = ({
+  data,
+  id,
+}: {
+  id: string;
+  data: RAGFlowNodeType['data'];
+}) => {
+  const updateNodeInternals = useUpdateNodeInternals();
+
+  const FormSchema = useCreateCategorizeFormSchema();
+
+  type FormSchemaType = z.infer<typeof FormSchema>;
+
+  const items: Required<FormSchemaType['items']> = useMemo(() => {
+    return get(data, `form.items`, []);
+  }, [data]);
+
+  const positions = useMemo(() => {
+    const list: Array<{
+      top: number;
+      name: string;
+      uuid: string;
+    }> &
+      Required<FormSchemaType['items']> = [];
+
+    items.forEach((x, idx) => {
+      list.push({
+        ...x,
+        top: idx === 0 ? 86 : list[idx - 1].top + 8 + 24,
+      });
+    });
+
+    return list;
+  }, [items]);
+
+  useEffect(() => {
+    updateNodeInternals(id);
+  }, [id, updateNodeInternals, items]);
+
+  return { positions };
+};
diff --git a/web/src/pages/data-flow/canvas/node/use-build-switch-handle-positions.ts b/web/src/pages/data-flow/canvas/node/use-build-switch-handle-positions.ts
new file mode 100644
index 000000000..ee221bf82
--- /dev/null
+++ b/web/src/pages/data-flow/canvas/node/use-build-switch-handle-positions.ts
@@ -0,0 +1,59 @@
+import { ISwitchCondition, RAGFlowNodeType } from '@/interfaces/database/flow';
+import { useUpdateNodeInternals } from '@xyflow/react';
+import get from 'lodash/get';
+import { useEffect, useMemo } from 'react';
+import { SwitchElseTo } from '../../constant';
+import { generateSwitchHandleText } from '../../utils';
+
+export const useBuildSwitchHandlePositions = ({
+  data,
+  id,
+}: {
+  id: string;
+  data: RAGFlowNodeType['data'];
+}) => {
+  const updateNodeInternals = useUpdateNodeInternals();
+
+  const conditions: ISwitchCondition[] = useMemo(() => {
+    return get(data, 'form.conditions', []);
+  }, [data]);
+
+  const positions = useMemo(() => {
+    const list: Array<{
+      text: string;
+      top: number;
+      idx: number;
+      condition?: ISwitchCondition;
+    }> = [];
+
+    [...conditions, ''].forEach((x, idx) => {
+      let top = idx === 0 ? 53 : list[idx - 1].top + 10 + 14 + 16 + 16; // case number (Case 1) height + flex gap
+      if (idx >= 1) {
+        const previousItems = conditions[idx - 1]?.items ?? [];
+        if (previousItems.length > 0) {
+          // top += 12; // ConditionBlock padding
+          top += previousItems.length * 26; // condition variable height
+          // top += (previousItems.length - 1) * 25; // operator height
+        }
+      }
+
+      list.push({
+        text:
+          idx < conditions.length
+            ? generateSwitchHandleText(idx)
+            : SwitchElseTo,
+        idx,
+        top,
+        condition: typeof x === 'string' ? undefined : x,
+      });
+    });
+
+    return list;
+  }, [conditions]);
+
+  useEffect(() => {
+    updateNodeInternals(id);
+  }, [id, updateNodeInternals, conditions]);
+
+  return { positions };
+};
diff --git a/web/src/pages/data-flow/components/background.tsx b/web/src/pages/data-flow/components/background.tsx
new file mode 100644
index 000000000..cf7b18f45
--- /dev/null
+++ b/web/src/pages/data-flow/components/background.tsx
@@ -0,0 +1,13 @@
+import { useIsDarkTheme } from '@/components/theme-provider';
+import { Background } from '@xyflow/react';
+
+export function AgentBackground() {
+  const isDarkTheme = useIsDarkTheme();
+
+  return (
+    <Background
+      color={isDarkTheme ? 'rgba(255,255,255,0.15)' : '#A8A9B3'}
+      bgColor={isDarkTheme ? 'rgba(11, 11, 12, 1)' : 'rgba(0, 0, 0, 0.05)'}
+    />
+  );
+}
diff --git a/web/src/pages/data-flow/constant.tsx b/web/src/pages/data-flow/constant.tsx
new file mode 100644
index 000000000..7e57c4abc
--- /dev/null
+++ b/web/src/pages/data-flow/constant.tsx
@@ -0,0 +1,947 @@
+import {
+  initialKeywordsSimilarityWeightValue,
+  initialSimilarityThresholdValue,
+} from '@/components/similarity-slider';
+import {
+  AgentGlobals,
+  CodeTemplateStrMap,
+  ProgrammingLanguage,
+} from '@/constants/agent';
+
+export enum AgentDialogueMode {
+  Conversational = 'conversational',
+  Task = 'task',
+}
+
+import {
+  ChatVariableEnabledField,
+  variableEnabledFieldMap,
+} from '@/constants/chat';
+import { ModelVariableType } from '@/constants/knowledge';
+import i18n from '@/locales/config';
+import { setInitialChatVariableEnabledFieldValue } from '@/utils/chat';
+import { t } from 'i18next';
+
+// DuckDuckGo's channel options
+export enum Channel {
+  Text = 'text',
+  News = 'news',
+}
+
+export enum PromptRole {
+  User = 'user',
+  Assistant = 'assistant',
+}
+
+import {
+  Circle,
+  CircleSlash2,
+  CloudUpload,
+  ListOrdered,
+  OptionIcon,
+  TextCursorInput,
+  ToggleLeft,
+  WrapText,
+} from 'lucide-react';
+
+export const BeginId = 'begin';
+
+export enum Operator {
+  Begin = 'Begin',
+  Retrieval = 'Retrieval',
+  Categorize = 'Categorize',
+  Message = 'Message',
+  Relevant = 'Relevant',
+  RewriteQuestion = 'RewriteQuestion',
+  KeywordExtract = 'KeywordExtract',
+  Baidu = 'Baidu',
+  DuckDuckGo = 'DuckDuckGo',
+  Wikipedia = 'Wikipedia',
+  PubMed = 'PubMed',
+  ArXiv = 'ArXiv',
+  Google = 'Google',
+  Bing = 'Bing',
+  GoogleScholar = 'GoogleScholar',
+  DeepL = 'DeepL',
+  GitHub = 'GitHub',
+  BaiduFanyi = 'BaiduFanyi',
+  QWeather = 'QWeather',
+  ExeSQL = 'ExeSQL',
+  Switch = 'Switch',
+  WenCai = 'WenCai',
+  AkShare = 'AkShare',
+  YahooFinance = 'YahooFinance',
+  Jin10 = 'Jin10',
+  Concentrator = 'Concentrator',
+  TuShare = 'TuShare',
+  Note = 'Note',
+  Crawler = 'Crawler',
+  Invoke = 'Invoke',
+  Email = 'Email',
+  Iteration = 'Iteration',
+  IterationStart = 'IterationItem',
+  Code = 'CodeExec',
+  WaitingDialogue = 'WaitingDialogue',
+  Agent = 'Agent',
+  Tool = 'Tool',
+  TavilySearch = 'TavilySearch',
+  TavilyExtract = 'TavilyExtract',
+  UserFillUp = 'UserFillUp',
+  StringTransform = 'StringTransform',
+  SearXNG = 'SearXNG',
+}
+
+export const SwitchLogicOperatorOptions = ['and', 'or'];
+
+export const CommonOperatorList = Object.values(Operator).filter(
+  (x) => x !== Operator.Note,
+);
+
+export const AgentOperatorList = [
+  Operator.Retrieval,
+  Operator.Categorize,
+  Operator.Message,
+  Operator.RewriteQuestion,
+  Operator.KeywordExtract,
+  Operator.Switch,
+  Operator.Concentrator,
+  Operator.Iteration,
+  Operator.WaitingDialogue,
+  Operator.Note,
+  Operator.Agent,
+];
+
+export const componentMenuList = [
+  {
+    name: Operator.Retrieval,
+  },
+  {
+    name: Operator.Categorize,
+  },
+  {
+    name: Operator.Message,
+  },
+
+  {
+    name: Operator.RewriteQuestion,
+  },
+  {
+    name: Operator.KeywordExtract,
+  },
+  {
+    name: Operator.Switch,
+  },
+  {
+    name: Operator.Concentrator,
+  },
+  {
+    name: Operator.Iteration,
+  },
+  {
+    name: Operator.Code,
+  },
+  {
+    name: Operator.WaitingDialogue,
+  },
+  {
+    name: Operator.Agent,
+  },
+  {
+    name: Operator.Note,
+  },
+  {
+    name: Operator.DuckDuckGo,
+  },
+  {
+    name: Operator.Baidu,
+  },
+  {
+    name: Operator.Wikipedia,
+  },
+  {
+    name: Operator.PubMed,
+  },
+  {
+    name: Operator.ArXiv,
+  },
+  {
+    name: Operator.Google,
+  },
+  {
+    name: Operator.Bing,
+  },
+  {
+    name: Operator.GoogleScholar,
+  },
+  {
+    name: Operator.DeepL,
+  },
+  {
+    name: Operator.GitHub,
+  },
+  {
+    name: Operator.BaiduFanyi,
+  },
+  {
+    name: Operator.QWeather,
+  },
+  {
+    name: Operator.ExeSQL,
+  },
+  {
+    name: Operator.WenCai,
+  },
+  {
+    name: Operator.AkShare,
+  },
+  {
+    name: Operator.YahooFinance,
+  },
+  {
+    name: Operator.Jin10,
+  },
+  {
+    name: Operator.TuShare,
+  },
+  {
+    name: Operator.Crawler,
+  },
+  {
+    name: Operator.Invoke,
+  },
+  {
+    name: Operator.Email,
+  },
+  {
+    name: Operator.SearXNG,
+  },
+];
+
+export const SwitchOperatorOptions = [
+  { value: '=', label: 'equal', icon: 'equal' },
+  { value: '≠', label: 'notEqual', icon: 'not-equals' },
+  { value: '>', label: 'gt', icon: 'Less' },
+  { value: '≥', label: 'ge', icon: 'Greater-or-equal' },
+  { value: '<', label: 'lt', icon: 'Less' },
+  { value: '≤', label: 'le', icon: 'less-or-equal' },
+  { value: 'contains', label: 'contains', icon: 'Contains' },
+  { value: 'not contains', label: 'notContains', icon: 'not-contains' },
+  { value: 'start with', label: 'startWith', icon: 'list-start' },
+  { value: 'end with', label: 'endWith', icon: 'list-end' },
+  {
+    value: 'empty',
+    label: 'empty',
+    icon: <Circle className="size-4" />,
+  },
+  {
+    value: 'not empty',
+    label: 'notEmpty',
+    icon: <CircleSlash2 className="size-4" />,
+  },
+];
+
+export const SwitchElseTo = 'end_cpn_ids';
+
+const initialQueryBaseValues = {
+  query: [],
+};
+
+export const initialRetrievalValues = {
+  query: AgentGlobals.SysQuery,
+  top_n: 8,
+  top_k: 1024,
+  kb_ids: [],
+  rerank_id: '',
+  empty_response: '',
+  ...initialSimilarityThresholdValue,
+  ...initialKeywordsSimilarityWeightValue,
+  use_kg: false,
+  cross_languages: [],
+  outputs: {
+    formalized_content: {
+      type: 'string',
+      value: '',
+    },
+  },
+};
+
+export const initialBeginValues = {
+  mode: AgentDialogueMode.Conversational,
+  prologue: `Hi! I'm your assistant. What can I do for you?`,
+};
+
+export const variableCheckBoxFieldMap = Object.keys(
+  variableEnabledFieldMap,
+).reduce<Record<string, boolean>>((pre, cur) => {
+  pre[cur] = setInitialChatVariableEnabledFieldValue(
+    cur as ChatVariableEnabledField,
+  );
+  return pre;
+}, {});
+
+const initialLlmBaseValues = {
+  ...variableCheckBoxFieldMap,
+  temperature: 0.1,
+  top_p: 0.3,
+  frequency_penalty: 0.7,
+  presence_penalty: 0.4,
+  max_tokens: 256,
+};
+
+export const initialGenerateValues = {
+  ...initialLlmBaseValues,
+  prompt: i18n.t('flow.promptText'),
+  cite: true,
+  message_history_window_size: 12,
+  parameters: [],
+};
+
+export const initialRewriteQuestionValues = {
+  ...initialLlmBaseValues,
+  language: '',
+  message_history_window_size: 6,
+};
+
+export const initialRelevantValues = {
+  ...initialLlmBaseValues,
+};
+
+export const initialCategorizeValues = {
+  ...initialLlmBaseValues,
+  query: AgentGlobals.SysQuery,
+  parameter: ModelVariableType.Precise,
+  message_history_window_size: 1,
+  items: [],
+  outputs: {
+    category_name: {
+      type: 'string',
+    },
+  },
+};
+
+export const initialMessageValues = {
+  content: [''],
+};
+
+export const initialKeywordExtractValues = {
+  ...initialLlmBaseValues,
+  top_n: 3,
+  ...initialQueryBaseValues,
+};
+export const initialDuckValues = {
+  top_n: 10,
+  channel: Channel.Text,
+  query: AgentGlobals.SysQuery,
+  outputs: {
+    formalized_content: {
+      value: '',
+      type: 'string',
+    },
+    json: {
+      value: [],
+      type: 'Array<Object>',
+    },
+  },
+};
+
+export const initialSearXNGValues = {
+  top_n: '10',
+  searxng_url: '',
+  query: AgentGlobals.SysQuery,
+  outputs: {
+    formalized_content: {
+      value: '',
+      type: 'string',
+    },
+    json: {
+      value: [],
+      type: 'Array<Object>',
+    },
+  },
+};
+
+export const initialBaiduValues = {
+  top_n: 10,
+  ...initialQueryBaseValues,
+};
+
+export const initialWikipediaValues = {
+  top_n: 10,
+  language: 'en',
+  query: AgentGlobals.SysQuery,
+  outputs: {
+    formalized_content: {
+      value: '',
+      type: 'string',
+    },
+  },
+};
+
+export const initialPubMedValues = {
+  top_n: 12,
+  email: '',
+  query: AgentGlobals.SysQuery,
+  outputs: {
+    formalized_content: {
+      value: '',
+      type: 'string',
+    },
+  },
+};
+
+export const initialArXivValues = {
+  top_n: 12,
+  sort_by: 'relevance',
+  query: AgentGlobals.SysQuery,
+  outputs: {
+    formalized_content: {
+      value: '',
+      type: 'string',
+    },
+  },
+};
+
+export const initialGoogleValues = {
+  q: AgentGlobals.SysQuery,
+  start: 0,
+  num: 12,
+  api_key: '',
+  country: 'us',
+  language: 'en',
+  outputs: {
+    formalized_content: {
+      value: '',
+      type: 'string',
+    },
+    json: {
+      value: [],
+      type: 'Array<Object>',
+    },
+  },
+};
+
+export const initialBingValues = {
+  top_n: 10,
+  channel: 'Webpages',
+  api_key:
+    'YOUR_API_KEY (obtained from https://www.microsoft.com/en-us/bing/apis/bing-web-search-api)',
+  country: 'CH',
+  language: 'en',
+  query: '',
+};
+
+export const initialGoogleScholarValues = {
+  top_n: 12,
+  sort_by: 'relevance',
+  patents: true,
+  query: AgentGlobals.SysQuery,
+  year_low: undefined,
+  year_high: undefined,
+  outputs: {
+    formalized_content: {
+      value: '',
+      type: 'string',
+    },
+    json: {
+      value: [],
+      type: 'Array<Object>',
+    },
+  },
+};
+
+export const initialDeepLValues = {
+  top_n: 5,
+  auth_key: 'relevance',
+};
+
+export const initialGithubValues = {
+  top_n: 5,
+  query: AgentGlobals.SysQuery,
+  outputs: {
+    formalized_content: {
+      value: '',
+      type: 'string',
+    },
+    json: {
+      value: [],
+      type: 'Array<Object>',
+    },
+  },
+};
+
+export const initialBaiduFanyiValues = {
+  appid: 'xxx',
+  secret_key: 'xxx',
+  trans_type: 'translate',
+  ...initialQueryBaseValues,
+};
+
+export const initialQWeatherValues = {
+  web_apikey: 'xxx',
+  type: 'weather',
+  user_type: 'free',
+  time_period: 'now',
+  ...initialQueryBaseValues,
+};
+
+export const initialExeSqlValues = {
+  sql: '',
+  db_type: 'mysql',
+  database: '',
+  username: '',
+  host: '',
+  port: 3306,
+  password: '',
+  max_records: 1024,
+  outputs: {
+    formalized_content: {
+      value: '',
+      type: 'string',
+    },
+    json: {
+      value: [],
+      type: 'Array<Object>',
+    },
+  },
+};
+
+export const initialSwitchValues = {
+  conditions: [
+    {
+      logical_operator: SwitchLogicOperatorOptions[0],
+      items: [
+        {
+          operator: SwitchOperatorOptions[0].value,
+        },
+      ],
+      to: [],
+    },
+  ],
+  [SwitchElseTo]: [],
+};
+
+export const initialWenCaiValues = {
+  top_n: 20,
+  query_type: 'stock',
+  query: AgentGlobals.SysQuery,
+  outputs: {
+    report: {
+      value: '',
+      type: 'string',
+    },
+  },
+};
+
+export const initialAkShareValues = { top_n: 10, ...initialQueryBaseValues };
+
+export const initialYahooFinanceValues = {
+  stock_code: '',
+  info: true,
+  history: false,
+  financials: false,
+  balance_sheet: false,
+  cash_flow_statement: false,
+  news: true,
+  outputs: {
+    report: {
+      value: '',
+      type: 'string',
+    },
+  },
+};
+
+export const initialJin10Values = {
+  type: 'flash',
+  secret_key: 'xxx',
+  flash_type: '1',
+  contain: '',
+  filter: '',
+  ...initialQueryBaseValues,
+};
+
+export const initialConcentratorValues = {};
+
+export const initialTuShareValues = {
+  token: 'xxx',
+  src: 'eastmoney',
+  start_date: '2024-01-01 09:00:00',
+  ...initialQueryBaseValues,
+};
+
+export const initialNoteValues = {
+  text: '',
+};
+
+export const initialCrawlerValues = {
+  extract_type: 'markdown',
+  query: '',
+};
+
+export const initialInvokeValues = {
+  url: '',
+  method: 'GET',
+  timeout: 60,
+  headers: `{
+  "Accept": "*/*",
+  "Cache-Control": "no-cache",
+  "Connection": "keep-alive"
+}`,
+  proxy: '',
+  clean_html: false,
+  variables: [],
+  outputs: {
+    result: {
+      value: '',
+      type: 'string',
+    },
+  },
+};
+
+export const initialTemplateValues = {
+  content: '',
+  parameters: [],
+};
+
+export const initialEmailValues = {
+  smtp_server: '',
+  smtp_port: 465,
+  email: '',
+  password: '',
+  sender_name: '',
+  to_email: '',
+  cc_email: '',
+  subject: '',
+  content: '',
+  outputs: {
+    success: {
+      value: true,
+      type: 'boolean',
+    },
+  },
+};
+
+export const initialIterationValues = {
+  items_ref: '',
+  outputs: {},
+};
+export const initialIterationStartValues = {
+  outputs: {
+    item: {
+      type: 'unkown',
+    },
+    index: {
+      type: 'integer',
+    },
+  },
+};
+
+export const initialCodeValues = {
+  lang: ProgrammingLanguage.Python,
+  script: CodeTemplateStrMap[ProgrammingLanguage.Python],
+  arguments: {
+    arg1: '',
+    arg2: '',
+  },
+  outputs: {},
+};
+
+export const initialWaitingDialogueValues = {};
+
+export const initialAgentValues = {
+  ...initialLlmBaseValues,
+  description: '',
+  user_prompt: '',
+  sys_prompt: t('flow.sysPromptDefultValue'),
+  prompts: [{ role: PromptRole.User, content: `{${AgentGlobals.SysQuery}}` }],
+  message_history_window_size: 12,
+  max_retries: 3,
+  delay_after_error: 1,
+  visual_files_var: '',
+  max_rounds: 1,
+  exception_method: '',
+  exception_goto: [],
+  exception_default_value: '',
+  tools: [],
+  mcp: [],
+  cite: true,
+  outputs: {
+    // structured_output: {
+    //   topic: {
+    //     type: 'string',
+    //     description:
+    //       'default:general. The category of the search.news is useful for retrieving real-time updates, particularly about politics, sports, and major current events covered by mainstream media sources. general is for broader, more general-purpose searches that may include a wide range of sources.',
+    //     enum: ['general', 'news'],
+    //     default: 'general',
+    //   },
+    // },
+    content: {
+      type: 'string',
+      value: '',
+    },
+  },
+};
+
+export const initialUserFillUpValues = {
+  enable_tips: true,
+  tips: '',
+  inputs: [],
+  outputs: {},
+};
+
+export enum StringTransformMethod {
+  Merge = 'merge',
+  Split = 'split',
+}
+
+export enum StringTransformDelimiter {
+  Comma = ',',
+  Semicolon = ';',
+  Period = '.',
+  LineBreak = '\n',
+  Tab = '\t',
+  Space = ' ',
+}
+
+export const initialStringTransformValues = {
+  method: StringTransformMethod.Merge,
+  split_ref: '',
+  script: '',
+  delimiters: [StringTransformDelimiter.Comma],
+  outputs: {
+    result: {
+      type: 'string',
+    },
+  },
+};
+
+export enum TavilySearchDepth {
+  Basic = 'basic',
+  Advanced = 'advanced',
+}
+
+export enum TavilyTopic {
+  News = 'news',
+  General = 'general',
+}
+
+export const initialTavilyValues = {
+  api_key: '',
+  query: AgentGlobals.SysQuery,
+  search_depth: TavilySearchDepth.Basic,
+  topic: TavilyTopic.General,
+  max_results: 5,
+  days: 7,
+  include_answer: false,
+  include_raw_content: true,
+  include_images: false,
+  include_image_descriptions: false,
+  include_domains: [],
+  exclude_domains: [],
+  outputs: {
+    formalized_content: {
+      value: '',
+      type: 'string',
+    },
+    json: {
+      value: [],
+      type: 'Array<Object>',
+    },
+  },
+};
+
+export enum TavilyExtractDepth {
+  Basic = 'basic',
+  Advanced = 'advanced',
+}
+
+export enum TavilyExtractFormat {
+  Text = 'text',
+  Markdown = 'markdown',
+}
+
+export const initialTavilyExtractValues = {
+  urls: '',
+  extract_depth: TavilyExtractDepth.Basic,
+  format: TavilyExtractFormat.Markdown,
+  outputs: {
+    formalized_content: {
+      value: '',
+      type: 'string',
+    },
+    json: {
+      value: [],
+      type: 'Array<Object>',
+    },
+  },
+};
+
+export const CategorizeAnchorPointPositions = [
+  { top: 1, right: 34 },
+  { top: 8, right: 18 },
+  { top: 15, right: 10 },
+  { top: 24, right: 4 },
+  { top: 31, right: 1 },
+  { top: 38, right: -2 },
+  { top: 62, right: -2 }, //bottom
+  { top: 71, right: 1 },
+  { top: 79, right: 6 },
+  { top: 86, right: 12 },
+  { top: 91, right: 20 },
+  { top: 98, right: 34 },
+];
+
+// key is the source of the edge, value is the target of the edge
+// no connection lines are allowed between key and value
+export const RestrictedUpstreamMap = {
+  [Operator.Begin]: [Operator.Relevant],
+  [Operator.Categorize]: [Operator.Begin, Operator.Categorize],
+  [Operator.Retrieval]: [Operator.Begin, Operator.Retrieval],
+  [Operator.Message]: [
+    Operator.Begin,
+    Operator.Message,
+    Operator.Retrieval,
+    Operator.RewriteQuestion,
+    Operator.Categorize,
+  ],
+  [Operator.Relevant]: [Operator.Begin],
+  [Operator.RewriteQuestion]: [
+    Operator.Begin,
+    Operator.Message,
+    Operator.RewriteQuestion,
+    Operator.Relevant,
+  ],
+  [Operator.KeywordExtract]: [
+    Operator.Begin,
+    Operator.Message,
+    Operator.Relevant,
+  ],
+  [Operator.Baidu]: [Operator.Begin, Operator.Retrieval],
+  [Operator.DuckDuckGo]: [Operator.Begin, Operator.Retrieval],
+  [Operator.Wikipedia]: [Operator.Begin, Operator.Retrieval],
+  [Operator.PubMed]: [Operator.Begin, Operator.Retrieval],
+  [Operator.ArXiv]: [Operator.Begin, Operator.Retrieval],
+  [Operator.Google]: [Operator.Begin, Operator.Retrieval],
+  [Operator.Bing]: [Operator.Begin, Operator.Retrieval],
+  [Operator.GoogleScholar]: [Operator.Begin, Operator.Retrieval],
+  [Operator.DeepL]: [Operator.Begin, Operator.Retrieval],
+  [Operator.GitHub]: [Operator.Begin, Operator.Retrieval],
+  [Operator.BaiduFanyi]: [Operator.Begin, Operator.Retrieval],
+  [Operator.QWeather]: [Operator.Begin, Operator.Retrieval],
+  [Operator.SearXNG]: [Operator.Begin, Operator.Retrieval],
+  [Operator.ExeSQL]: [Operator.Begin],
+  [Operator.Switch]: [Operator.Begin],
+  [Operator.WenCai]: [Operator.Begin],
+  [Operator.AkShare]: [Operator.Begin],
+  [Operator.YahooFinance]: [Operator.Begin],
+  [Operator.Jin10]: [Operator.Begin],
+  [Operator.Concentrator]: [Operator.Begin],
+  [Operator.TuShare]: [Operator.Begin],
+  [Operator.Crawler]: [Operator.Begin],
+  [Operator.Note]: [],
+  [Operator.Invoke]: [Operator.Begin],
+  [Operator.Email]: [Operator.Begin],
+  [Operator.Iteration]: [Operator.Begin],
+  [Operator.IterationStart]: [Operator.Begin],
+  [Operator.Code]: [Operator.Begin],
+  [Operator.WaitingDialogue]: [Operator.Begin],
+  [Operator.Agent]: [Operator.Begin],
+  [Operator.TavilySearch]: [Operator.Begin],
+  [Operator.TavilyExtract]: [Operator.Begin],
+  [Operator.StringTransform]: [Operator.Begin],
+  [Operator.UserFillUp]: [Operator.Begin],
+  [Operator.Tool]: [Operator.Begin],
+};
+
+export const NodeMap = {
+  [Operator.Begin]: 'beginNode',
+  [Operator.Categorize]: 'categorizeNode',
+  [Operator.Retrieval]: 'retrievalNode',
+  [Operator.Message]: 'messageNode',
+  [Operator.Relevant]: 'relevantNode',
+  [Operator.RewriteQuestion]: 'rewriteNode',
+  [Operator.KeywordExtract]: 'keywordNode',
+  [Operator.DuckDuckGo]: 'ragNode',
+  [Operator.Baidu]: 'ragNode',
+  [Operator.Wikipedia]: 'ragNode',
+  [Operator.PubMed]: 'ragNode',
+  [Operator.ArXiv]: 'ragNode',
+  [Operator.Google]: 'ragNode',
+  [Operator.Bing]: 'ragNode',
+  [Operator.GoogleScholar]: 'ragNode',
+  [Operator.DeepL]: 'ragNode',
+  [Operator.GitHub]: 'ragNode',
+  [Operator.BaiduFanyi]: 'ragNode',
+  [Operator.QWeather]: 'ragNode',
+  [Operator.SearXNG]: 'ragNode',
+  [Operator.ExeSQL]: 'ragNode',
+  [Operator.Switch]: 'switchNode',
+  [Operator.Concentrator]: 'logicNode',
+  [Operator.WenCai]: 'ragNode',
+  [Operator.AkShare]: 'ragNode',
+  [Operator.YahooFinance]: 'ragNode',
+  [Operator.Jin10]: 'ragNode',
+  [Operator.TuShare]: 'ragNode',
+  [Operator.Note]: 'noteNode',
+  [Operator.Crawler]: 'ragNode',
+  [Operator.Invoke]: 'ragNode',
+  [Operator.Email]: 'ragNode',
+  [Operator.Iteration]: 'group',
+  [Operator.IterationStart]: 'iterationStartNode',
+  [Operator.Code]: 'ragNode',
+  [Operator.WaitingDialogue]: 'ragNode',
+  [Operator.Agent]: 'agentNode',
+  [Operator.Tool]: 'toolNode',
+  [Operator.TavilySearch]: 'ragNode',
+  [Operator.UserFillUp]: 'ragNode',
+  [Operator.StringTransform]: 'ragNode',
+  [Operator.TavilyExtract]: 'ragNode',
+};
+
+export enum BeginQueryType {
+  Line = 'line',
+  Paragraph = 'paragraph',
+  Options = 'options',
+  File = 'file',
+  Integer = 'integer',
+  Boolean = 'boolean',
+}
+
+export const BeginQueryTypeIconMap = {
+  [BeginQueryType.Line]: TextCursorInput,
+  [BeginQueryType.Paragraph]: WrapText,
+  [BeginQueryType.Options]: OptionIcon,
+  [BeginQueryType.File]: CloudUpload,
+  [BeginQueryType.Integer]: ListOrdered,
+  [BeginQueryType.Boolean]: ToggleLeft,
+};
+
+export const NoDebugOperatorsList = [
+  Operator.Begin,
+  Operator.Concentrator,
+  Operator.Message,
+  Operator.RewriteQuestion,
+  Operator.Switch,
+  Operator.Iteration,
+  Operator.UserFillUp,
+  Operator.IterationStart,
+];
+
+export enum NodeHandleId {
+  Start = 'start',
+  End = 'end',
+  Tool = 'tool',
+  AgentTop = 'agentTop',
+  AgentBottom = 'agentBottom',
+  AgentException = 'agentException',
+}
+
+export enum VariableType {
+  String = 'string',
+  Array = 'array',
+  File = 'file',
+}
+
+export enum AgentExceptionMethod {
+  Comment = 'comment',
+  Goto = 'goto',
+}
diff --git a/web/src/pages/data-flow/context.ts b/web/src/pages/data-flow/context.ts
new file mode 100644
index 000000000..6839554d3
--- /dev/null
+++ b/web/src/pages/data-flow/context.ts
@@ -0,0 +1,50 @@
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { HandleType, Position } from '@xyflow/react';
+import { createContext } from 'react';
+import { useAddNode } from './hooks/use-add-node';
+import { useCacheChatLog } from './hooks/use-cache-chat-log';
+import { useShowFormDrawer, useShowLogSheet } 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,
+);
+
+type AgentChatContextType = Pick<
+  ReturnType<typeof useShowLogSheet>,
+  'showLogSheet'
+> & { setLastSendLoadingFunc: (loading: boolean, messageId: string) => void };
+
+export const AgentChatContext = createContext<AgentChatContextType>(
+  {} as AgentChatContextType,
+);
+
+type AgentChatLogContextType = Pick<
+  ReturnType<typeof useCacheChatLog>,
+  'addEventList' | 'setCurrentMessageId'
+>;
+
+export const AgentChatLogContext = createContext<AgentChatLogContextType>(
+  {} as AgentChatLogContextType,
+);
+
+export type HandleContextType = {
+  nodeId?: string;
+  id?: string;
+  type: HandleType;
+  position: Position;
+  isFromConnectionDrag: boolean;
+};
+
+export const HandleContext = createContext<HandleContextType>(
+  {} as HandleContextType,
+);
diff --git a/web/src/pages/data-flow/debug-content/index.tsx b/web/src/pages/data-flow/debug-content/index.tsx
new file mode 100644
index 000000000..eadcefe58
--- /dev/null
+++ b/web/src/pages/data-flow/debug-content/index.tsx
@@ -0,0 +1,260 @@
+import { ButtonLoading } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { RAGFlowSelect } from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+import { IMessage } from '@/pages/chat/interface';
+import { zodResolver } from '@hookform/resolvers/zod';
+import React, { ReactNode, useCallback, useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { BeginQueryType } from '../constant';
+import { BeginQuery } from '../interface';
+import { FileUploadDirectUpload } from './uploader';
+
+const StringFields = [
+  BeginQueryType.Line,
+  BeginQueryType.Paragraph,
+  BeginQueryType.Options,
+];
+
+interface IProps {
+  parameters: BeginQuery[];
+  message?: IMessage;
+  ok(parameters: any[]): void;
+  isNext?: boolean;
+  loading?: boolean;
+  submitButtonDisabled?: boolean;
+  btnText?: ReactNode;
+}
+
+const DebugContent = ({
+  parameters,
+  message,
+  ok,
+  isNext = true,
+  loading = false,
+  submitButtonDisabled = false,
+  btnText,
+}: IProps) => {
+  const { t } = useTranslation();
+
+  const formSchemaValues = useMemo(() => {
+    const obj = parameters.reduce<{
+      schema: Record<string, z.ZodType>;
+      values: Record<string, any>;
+    }>(
+      (pre, cur, idx) => {
+        const type = cur.type;
+        let fieldSchema;
+        let value;
+        if (StringFields.some((x) => x === type)) {
+          fieldSchema = z.string().trim().min(1);
+        } else if (type === BeginQueryType.Boolean) {
+          fieldSchema = z.boolean();
+          value = false;
+        } else if (type === BeginQueryType.Integer || type === 'float') {
+          fieldSchema = z.coerce.number();
+        } else {
+          fieldSchema = z.record(z.any());
+        }
+
+        if (cur.optional) {
+          fieldSchema = fieldSchema.optional();
+        }
+
+        const index = idx.toString();
+
+        pre.schema[index] = fieldSchema;
+        pre.values[index] = value;
+
+        return pre;
+      },
+      { schema: {}, values: {} },
+    );
+
+    return { schema: z.object(obj.schema), values: obj.values };
+  }, [parameters]);
+
+  const form = useForm<z.infer<typeof formSchemaValues.schema>>({
+    defaultValues: formSchemaValues.values,
+    resolver: zodResolver(formSchemaValues.schema),
+  });
+
+  const submittable = true;
+
+  const renderWidget = useCallback(
+    (q: BeginQuery, idx: string) => {
+      const props = {
+        key: idx,
+        label: q.name ?? q.key,
+        name: idx,
+      };
+
+      const BeginQueryTypeMap = {
+        [BeginQueryType.Line]: (
+          <FormField
+            control={form.control}
+            name={props.name}
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>{props.label}</FormLabel>
+                <FormControl>
+                  <Input {...field}></Input>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        ),
+        [BeginQueryType.Paragraph]: (
+          <FormField
+            control={form.control}
+            name={props.name}
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>{props.label}</FormLabel>
+                <FormControl>
+                  <Textarea rows={1} {...field}></Textarea>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        ),
+        [BeginQueryType.Options]: (
+          <FormField
+            control={form.control}
+            name={props.name}
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>{props.label}</FormLabel>
+                <FormControl>
+                  <RAGFlowSelect
+                    allowClear
+                    options={
+                      q.options?.map((x) => ({
+                        label: x,
+                        value: x as string,
+                      })) ?? []
+                    }
+                    {...field}
+                  ></RAGFlowSelect>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        ),
+        [BeginQueryType.File]: (
+          <React.Fragment key={idx}>
+            <FormField
+              control={form.control}
+              name={props.name}
+              render={({ field }) => (
+                <div className="space-y-6">
+                  <FormItem className="w-full">
+                    <FormLabel>{t('assistantAvatar')}</FormLabel>
+                    <FormControl>
+                      <FileUploadDirectUpload
+                        value={field.value}
+                        onChange={field.onChange}
+                      ></FileUploadDirectUpload>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </div>
+              )}
+            />
+          </React.Fragment>
+        ),
+        [BeginQueryType.Integer]: (
+          <FormField
+            control={form.control}
+            name={props.name}
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>{props.label}</FormLabel>
+                <FormControl>
+                  <Input type="number" {...field}></Input>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        ),
+        [BeginQueryType.Boolean]: (
+          <FormField
+            control={form.control}
+            name={props.name}
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>{props.label}</FormLabel>
+                <FormControl>
+                  <Switch
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  ></Switch>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        ),
+      };
+
+      return (
+        BeginQueryTypeMap[q.type as BeginQueryType] ??
+        BeginQueryTypeMap[BeginQueryType.Paragraph]
+      );
+    },
+    [form, t],
+  );
+
+  const onSubmit = useCallback(
+    (values: z.infer<typeof formSchemaValues.schema>) => {
+      const nextValues = Object.entries(values).map(([key, value]) => {
+        const item = parameters[Number(key)];
+        return { ...item, value };
+      });
+
+      ok(nextValues);
+    },
+    [formSchemaValues, ok, parameters],
+  );
+  return (
+    <>
+      <section>
+        {message?.data?.tips && <div className="mb-2">{message.data.tips}</div>}
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            {parameters.map((x, idx) => {
+              return <div key={idx}>{renderWidget(x, idx.toString())}</div>;
+            })}
+            <div>
+              <ButtonLoading
+                type="submit"
+                loading={loading}
+                disabled={!submittable || submitButtonDisabled}
+                className="w-full mt-1"
+              >
+                {btnText || t(isNext ? 'common.next' : 'flow.run')}
+              </ButtonLoading>
+            </div>
+          </form>
+        </Form>
+      </section>
+    </>
+  );
+};
+
+export default DebugContent;
diff --git a/web/src/pages/data-flow/debug-content/popover-form.tsx b/web/src/pages/data-flow/debug-content/popover-form.tsx
new file mode 100644
index 000000000..9465d903b
--- /dev/null
+++ b/web/src/pages/data-flow/debug-content/popover-form.tsx
@@ -0,0 +1,103 @@
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Popover, PopoverContent } from '@/components/ui/popover';
+import { useParseDocument } from '@/hooks/document-hooks';
+import { IModalProps } from '@/interfaces/common';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { PropsWithChildren } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+
+const reg =
+  /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/;
+
+const FormSchema = z.object({
+  url: z.string(),
+  result: z.any(),
+});
+
+const values = {
+  url: '',
+  result: null,
+};
+
+export const PopoverForm = ({
+  children,
+  visible,
+  switchVisible,
+}: PropsWithChildren<IModalProps<any>>) => {
+  const form = useForm({
+    defaultValues: values,
+    resolver: zodResolver(FormSchema),
+  });
+  const { parseDocument, loading } = useParseDocument();
+  const { t } = useTranslation();
+
+  // useResetFormOnCloseModal({
+  //   form,
+  //   visible,
+  // });
+
+  async function onSubmit(values: z.infer<typeof FormSchema>) {
+    const val = values.url;
+
+    if (reg.test(val)) {
+      const ret = await parseDocument(val);
+      if (ret?.data?.code === 0) {
+        form.setValue('result', ret?.data?.data);
+      }
+    }
+  }
+
+  const content = (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <FormField
+          control={form.control}
+          name={`url`}
+          render={({ field }) => (
+            <FormItem className="flex-1">
+              <FormControl>
+                <Input
+                  {...field}
+                  // onPressEnter={(e) => e.preventDefault()}
+                  placeholder={t('flow.pasteFileLink')}
+                  // suffix={
+                  //   <Button
+                  //     type="primary"
+                  //     onClick={onOk}
+                  //     size={'small'}
+                  //     loading={loading}
+                  //   >
+                  //     {t('common.submit')}
+                  //   </Button>
+                  // }
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name={`result`}
+          render={() => <></>}
+        />
+      </form>
+    </Form>
+  );
+
+  return (
+    <Popover open={visible} onOpenChange={switchVisible}>
+      {children}
+      <PopoverContent>{content}</PopoverContent>
+    </Popover>
+  );
+};
diff --git a/web/src/pages/data-flow/debug-content/uploader.tsx b/web/src/pages/data-flow/debug-content/uploader.tsx
new file mode 100644
index 000000000..e11a6f41d
--- /dev/null
+++ b/web/src/pages/data-flow/debug-content/uploader.tsx
@@ -0,0 +1,116 @@
+'use client';
+
+import {
+  FileUpload,
+  FileUploadDropzone,
+  FileUploadItem,
+  FileUploadItemDelete,
+  FileUploadItemMetadata,
+  FileUploadItemPreview,
+  FileUploadItemProgress,
+  FileUploadList,
+  FileUploadTrigger,
+  type FileUploadProps,
+} from '@/components/file-upload';
+import { Button } from '@/components/ui/button';
+import { useUploadCanvasFile } from '@/hooks/use-agent-request';
+import { Upload, X } from 'lucide-react';
+import * as React from 'react';
+import { toast } from 'sonner';
+
+type FileUploadDirectUploadProps = {
+  value: Record<string, any>;
+  onChange(value: Record<string, any>): void;
+};
+
+export function FileUploadDirectUpload({
+  onChange,
+}: FileUploadDirectUploadProps) {
+  const [files, setFiles] = React.useState<File[]>([]);
+
+  const { uploadCanvasFile } = useUploadCanvasFile();
+
+  const onUpload: NonNullable<FileUploadProps['onUpload']> = React.useCallback(
+    async (files, { onSuccess, onError }) => {
+      try {
+        const uploadPromises = files.map(async (file) => {
+          const handleError = (error?: any) => {
+            onError(
+              file,
+              error instanceof Error ? error : new Error('Upload failed'),
+            );
+          };
+          try {
+            const ret = await uploadCanvasFile([file]);
+            if (ret.code === 0) {
+              onSuccess(file);
+              onChange(ret.data);
+            } else {
+              handleError();
+            }
+          } catch (error) {
+            handleError(error);
+          }
+        });
+
+        // Wait for all uploads to complete
+        await Promise.all(uploadPromises);
+      } catch (error) {
+        // This handles any error that might occur outside the individual upload processes
+        console.error('Unexpected error during upload:', error);
+      }
+    },
+    [onChange, uploadCanvasFile],
+  );
+
+  const onFileReject = React.useCallback((file: File, message: string) => {
+    toast(message, {
+      description: `"${file.name.length > 20 ? `${file.name.slice(0, 20)}...` : file.name}" has been rejected`,
+    });
+  }, []);
+
+  return (
+    <FileUpload
+      value={files}
+      onValueChange={setFiles}
+      onUpload={onUpload}
+      onFileReject={onFileReject}
+      maxFiles={1}
+      className="w-full"
+      multiple={false}
+    >
+      <FileUploadDropzone>
+        <div className="flex flex-col items-center gap-1 text-center">
+          <div className="flex items-center justify-center rounded-full border p-2.5">
+            <Upload className="size-6 text-muted-foreground" />
+          </div>
+          <p className="font-medium text-sm">Drag & drop files here</p>
+          <p className="text-muted-foreground text-xs">
+            Or click to browse (max 2 files)
+          </p>
+        </div>
+        <FileUploadTrigger asChild>
+          <Button variant="outline" size="sm" className="mt-2 w-fit">
+            Browse files
+          </Button>
+        </FileUploadTrigger>
+      </FileUploadDropzone>
+      <FileUploadList>
+        {files.map((file, index) => (
+          <FileUploadItem key={index} value={file} className="flex-col">
+            <div className="flex w-full items-center gap-2">
+              <FileUploadItemPreview />
+              <FileUploadItemMetadata />
+              <FileUploadItemDelete asChild>
+                <Button variant="ghost" size="icon" className="size-7">
+                  <X />
+                </Button>
+              </FileUploadItemDelete>
+            </div>
+            <FileUploadItemProgress />
+          </FileUploadItem>
+        ))}
+      </FileUploadList>
+    </FileUpload>
+  );
+}
diff --git a/web/src/pages/data-flow/flow-tooltip.tsx b/web/src/pages/data-flow/flow-tooltip.tsx
new file mode 100644
index 000000000..9386dd06b
--- /dev/null
+++ b/web/src/pages/data-flow/flow-tooltip.tsx
@@ -0,0 +1,19 @@
+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-hooks.ts b/web/src/pages/data-flow/form-hooks.ts
new file mode 100644
index 000000000..fef7d37b9
--- /dev/null
+++ b/web/src/pages/data-flow/form-hooks.ts
@@ -0,0 +1,43 @@
+import { useTranslate } from '@/hooks/common-hooks';
+import { useCallback, useMemo } from 'react';
+import { Operator, RestrictedUpstreamMap } from './constant';
+import useGraphStore from './store';
+
+export const useBuildFormSelectOptions = (
+  operatorName: Operator,
+  selfId?: string, // exclude the current node
+) => {
+  const nodes = useGraphStore((state) => state.nodes);
+
+  const buildCategorizeToOptions = useCallback(
+    (toList: string[]) => {
+      const excludedNodes: Operator[] = [
+        Operator.Note,
+        ...(RestrictedUpstreamMap[operatorName] ?? []),
+      ];
+      return nodes
+        .filter(
+          (x) =>
+            excludedNodes.every((y) => y !== x.data.label) &&
+            x.id !== selfId &&
+            !toList.some((y) => y === x.id), // filter out selected values ​​in other to fields from the current drop-down box options
+        )
+        .map((x) => ({ label: x.data.name, value: x.id }));
+    },
+    [nodes, operatorName, selfId],
+  );
+
+  return buildCategorizeToOptions;
+};
+
+export const useBuildSortOptions = () => {
+  const { t } = useTranslate('flow');
+
+  const options = useMemo(() => {
+    return ['data', 'relevance'].map((x) => ({
+      value: x,
+      label: t(x),
+    }));
+  }, [t]);
+  return options;
+};
diff --git a/web/src/pages/data-flow/form-sheet/form-config-map.tsx b/web/src/pages/data-flow/form-sheet/form-config-map.tsx
new file mode 100644
index 000000000..0fc1b9e2a
--- /dev/null
+++ b/web/src/pages/data-flow/form-sheet/form-config-map.tsx
@@ -0,0 +1,165 @@
+import { Operator } from '../constant';
+import AgentForm from '../form/agent-form';
+import AkShareForm from '../form/akshare-form';
+import ArXivForm from '../form/arxiv-form';
+import BaiduFanyiForm from '../form/baidu-fanyi-form';
+import BaiduForm from '../form/baidu-form';
+import BeginForm from '../form/begin-form';
+import BingForm from '../form/bing-form';
+import CategorizeForm from '../form/categorize-form';
+import CodeForm from '../form/code-form';
+import CrawlerForm from '../form/crawler-form';
+import DeepLForm from '../form/deepl-form';
+import DuckDuckGoForm from '../form/duckduckgo-form';
+import EmailForm from '../form/email-form';
+import ExeSQLForm from '../form/exesql-form';
+import GithubForm from '../form/github-form';
+import GoogleForm from '../form/google-form';
+import GoogleScholarForm from '../form/google-scholar-form';
+import InvokeForm from '../form/invoke-form';
+import IterationForm from '../form/iteration-form';
+import IterationStartForm from '../form/iteration-start-from';
+import Jin10Form from '../form/jin10-form';
+import KeywordExtractForm from '../form/keyword-extract-form';
+import MessageForm from '../form/message-form';
+import PubMedForm from '../form/pubmed-form';
+import QWeatherForm from '../form/qweather-form';
+import RelevantForm from '../form/relevant-form';
+import RetrievalForm from '../form/retrieval-form/next';
+import RewriteQuestionForm from '../form/rewrite-question-form';
+import SearXNGForm from '../form/searxng-form';
+import StringTransformForm from '../form/string-transform-form';
+import SwitchForm from '../form/switch-form';
+import TavilyExtractForm from '../form/tavily-extract-form';
+import TavilyForm from '../form/tavily-form';
+import TuShareForm from '../form/tushare-form';
+import UserFillUpForm from '../form/user-fill-up-form';
+import WenCaiForm from '../form/wencai-form';
+import WikipediaForm from '../form/wikipedia-form';
+import YahooFinanceForm from '../form/yahoo-finance-form';
+
+export const FormConfigMap = {
+  [Operator.Begin]: {
+    component: BeginForm,
+  },
+  [Operator.Retrieval]: {
+    component: RetrievalForm,
+  },
+  [Operator.Categorize]: {
+    component: CategorizeForm,
+  },
+  [Operator.Message]: {
+    component: MessageForm,
+  },
+  [Operator.Relevant]: {
+    component: RelevantForm,
+  },
+  [Operator.RewriteQuestion]: {
+    component: RewriteQuestionForm,
+  },
+  [Operator.Code]: {
+    component: CodeForm,
+  },
+  [Operator.WaitingDialogue]: {
+    component: CodeForm,
+  },
+  [Operator.Agent]: {
+    component: AgentForm,
+  },
+  [Operator.Baidu]: {
+    component: BaiduForm,
+  },
+  [Operator.DuckDuckGo]: {
+    component: DuckDuckGoForm,
+  },
+  [Operator.KeywordExtract]: {
+    component: KeywordExtractForm,
+  },
+  [Operator.Wikipedia]: {
+    component: WikipediaForm,
+  },
+  [Operator.PubMed]: {
+    component: PubMedForm,
+  },
+  [Operator.ArXiv]: {
+    component: ArXivForm,
+  },
+  [Operator.Google]: {
+    component: GoogleForm,
+  },
+  [Operator.Bing]: {
+    component: BingForm,
+  },
+  [Operator.GoogleScholar]: {
+    component: GoogleScholarForm,
+  },
+  [Operator.DeepL]: {
+    component: DeepLForm,
+  },
+  [Operator.GitHub]: {
+    component: GithubForm,
+  },
+  [Operator.BaiduFanyi]: {
+    component: BaiduFanyiForm,
+  },
+  [Operator.QWeather]: {
+    component: QWeatherForm,
+  },
+  [Operator.ExeSQL]: {
+    component: ExeSQLForm,
+  },
+  [Operator.Switch]: {
+    component: SwitchForm,
+  },
+  [Operator.WenCai]: {
+    component: WenCaiForm,
+  },
+  [Operator.AkShare]: {
+    component: AkShareForm,
+  },
+  [Operator.YahooFinance]: {
+    component: YahooFinanceForm,
+  },
+  [Operator.Jin10]: {
+    component: Jin10Form,
+  },
+  [Operator.TuShare]: {
+    component: TuShareForm,
+  },
+  [Operator.Crawler]: {
+    component: CrawlerForm,
+  },
+  [Operator.Invoke]: {
+    component: InvokeForm,
+  },
+  [Operator.SearXNG]: {
+    component: SearXNGForm,
+  },
+  [Operator.Concentrator]: {
+    component: () => <></>,
+  },
+  [Operator.Note]: {
+    component: () => <></>,
+  },
+  [Operator.Email]: {
+    component: EmailForm,
+  },
+  [Operator.Iteration]: {
+    component: IterationForm,
+  },
+  [Operator.IterationStart]: {
+    component: IterationStartForm,
+  },
+  [Operator.TavilySearch]: {
+    component: TavilyForm,
+  },
+  [Operator.UserFillUp]: {
+    component: UserFillUpForm,
+  },
+  [Operator.StringTransform]: {
+    component: StringTransformForm,
+  },
+  [Operator.TavilyExtract]: {
+    component: TavilyExtractForm,
+  },
+};
diff --git a/web/src/pages/data-flow/form-sheet/next.tsx b/web/src/pages/data-flow/form-sheet/next.tsx
new file mode 100644
index 000000000..2d7b5ca8b
--- /dev/null
+++ b/web/src/pages/data-flow/form-sheet/next.tsx
@@ -0,0 +1,134 @@
+import { Input } from '@/components/ui/input';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { useTranslate } from '@/hooks/common-hooks';
+import { IModalProps } from '@/interfaces/common';
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { cn } from '@/lib/utils';
+import { lowerFirst } from 'lodash';
+import { Play, X } from 'lucide-react';
+import { useMemo } from 'react';
+import { BeginId, Operator } from '../constant';
+import { AgentFormContext } from '../context';
+import { RunTooltip } from '../flow-tooltip';
+import { useHandleNodeNameChange } from '../hooks/use-change-node-name';
+import OperatorIcon from '../operator-icon';
+import useGraphStore from '../store';
+import { needsSingleStepDebugging } from '../utils';
+import { FormConfigMap } from './form-config-map';
+import SingleDebugSheet from './single-debug-sheet';
+
+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,
+  singleDebugDrawerVisible,
+  chatVisible,
+  hideSingleDebugDrawer,
+  showSingleDebugDrawer,
+}: 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 isMcp = useMemo(() => {
+    return (
+      operatorName === Operator.Tool &&
+      Object.values(Operator).every((x) => x !== clickedToolId)
+    );
+  }, [clickedToolId, operatorName]);
+
+  const { t } = useTranslate('flow');
+
+  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}></OperatorIcon>
+
+              {isMcp ? (
+                <div className="flex-1">MCP Config</div>
+              ) : (
+                <div className="flex items-center gap-1 flex-1">
+                  <label htmlFor="">{t('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>
+            {isMcp || (
+              <span>
+                {t(
+                  `${lowerFirst(operatorName === Operator.Tool ? clickedToolId : operatorName)}Description`,
+                )}
+              </span>
+            )}
+          </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>
+      {singleDebugDrawerVisible && (
+        <SingleDebugSheet
+          visible={singleDebugDrawerVisible}
+          hideModal={hideSingleDebugDrawer}
+          componentId={node?.id}
+        ></SingleDebugSheet>
+      )}
+    </Sheet>
+  );
+};
+
+export default FormSheet;
diff --git a/web/src/pages/data-flow/form-sheet/single-debug-sheet/index.tsx b/web/src/pages/data-flow/form-sheet/single-debug-sheet/index.tsx
new file mode 100644
index 000000000..c5fe6e876
--- /dev/null
+++ b/web/src/pages/data-flow/form-sheet/single-debug-sheet/index.tsx
@@ -0,0 +1,89 @@
+import CopyToClipboard from '@/components/copy-to-clipboard';
+import { Sheet, SheetContent, SheetHeader } from '@/components/ui/sheet';
+import { useDebugSingle, useFetchInputForm } from '@/hooks/use-agent-request';
+import { IModalProps } from '@/interfaces/common';
+import { cn } from '@/lib/utils';
+import { isEmpty } from 'lodash';
+import { X } from 'lucide-react';
+import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import JsonView from 'react18-json-view';
+import 'react18-json-view/src/style.css';
+import DebugContent from '../../debug-content';
+import { transferInputsArrayToObject } from '../../form/begin-form/use-watch-change';
+import { buildBeginInputListFromObject } from '../../form/begin-form/utils';
+
+interface IProps {
+  componentId?: string;
+}
+
+const SingleDebugSheet = ({
+  componentId,
+  visible,
+  hideModal,
+}: IModalProps<any> & IProps) => {
+  const { t } = useTranslation();
+  const inputForm = useFetchInputForm(componentId);
+  const { debugSingle, data, loading } = useDebugSingle();
+
+  const list = useMemo(() => {
+    return buildBeginInputListFromObject(inputForm);
+  }, [inputForm]);
+
+  const onOk = useCallback(
+    (nextValues: any[]) => {
+      if (componentId) {
+        debugSingle({
+          component_id: componentId,
+          params: transferInputsArrayToObject(nextValues),
+        });
+      }
+    },
+    [componentId, debugSingle],
+  );
+
+  const content = JSON.stringify(data, null, 2);
+
+  return (
+    <Sheet open={visible} modal={false}>
+      <SheetContent className="top-20 p-0" closeIcon={false}>
+        <SheetHeader className="py-2 px-5">
+          <div className="flex justify-between ">
+            {t('flow.testRun')}
+            <X onClick={hideModal} className="cursor-pointer" />
+          </div>
+        </SheetHeader>
+        <section className="overflow-y-auto pt-4 px-5">
+          <DebugContent
+            parameters={list}
+            ok={onOk}
+            isNext={false}
+            loading={loading}
+            submitButtonDisabled={list.length === 0}
+          ></DebugContent>
+          {!isEmpty(data) ? (
+            <div
+              className={cn('mt-4 rounded-md border', {
+                [`border-state-error`]: !isEmpty(data._ERROR),
+              })}
+            >
+              <div className="flex justify-between p-2">
+                <span>JSON</span>
+                <CopyToClipboard text={content}></CopyToClipboard>
+              </div>
+              <JsonView
+                src={data}
+                displaySize
+                collapseStringsAfterLength={100000000000}
+                className="w-full h-[800px] break-words overflow-auto p-2"
+                dark
+              />
+            </div>
+          ) : null}
+        </section>
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+export default SingleDebugSheet;
diff --git a/web/src/pages/data-flow/form/agent-form/agent-tools.tsx b/web/src/pages/data-flow/form/agent-form/agent-tools.tsx
new file mode 100644
index 000000000..9e5620823
--- /dev/null
+++ b/web/src/pages/data-flow/form/agent-form/agent-tools.tsx
@@ -0,0 +1,191 @@
+import { BlockButton } from '@/components/ui/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+import { Position } from '@xyflow/react';
+import { t } from 'i18next';
+import { PencilLine, X } from 'lucide-react';
+import {
+  MouseEventHandler,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useMemo,
+} from 'react';
+import { Operator } from '../../constant';
+import { AgentInstanceContext } from '../../context';
+import { useFindMcpById } from '../../hooks/use-find-mcp-by-id';
+import { INextOperatorForm } from '../../interface';
+import OperatorIcon from '../../operator-icon';
+import useGraphStore from '../../store';
+import { filterDownstreamAgentNodeIds } from '../../utils/filter-downstream-nodes';
+import { ToolPopover } from './tool-popover';
+import { useDeleteAgentNodeMCP } from './tool-popover/use-update-mcp';
+import { useDeleteAgentNodeTools } from './tool-popover/use-update-tools';
+import { useGetAgentMCPIds, useGetAgentToolNames } from './use-get-tools';
+
+export function ToolCard({
+  children,
+  className,
+  ...props
+}: PropsWithChildren & React.HTMLAttributes<HTMLLIElement>) {
+  const element = useMemo(() => {
+    return (
+      <li
+        {...props}
+        className={cn(
+          'flex bg-bg-card p-1 rounded-sm justify-between',
+          className,
+        )}
+      >
+        {children}
+      </li>
+    );
+  }, [children, className, props]);
+
+  if (children === Operator.Code) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{element}</TooltipTrigger>
+        <TooltipContent>
+          <p>It doesn't have any config.</p>
+        </TooltipContent>
+      </Tooltip>
+    );
+  }
+
+  return element;
+}
+
+type ActionButtonProps<T> = {
+  record: T;
+  deleteRecord(record: T): void;
+  edit: MouseEventHandler<HTMLOrSVGElement>;
+};
+
+function ActionButton<T>({ deleteRecord, record, edit }: ActionButtonProps<T>) {
+  const handleDelete = useCallback(() => {
+    deleteRecord(record);
+  }, [deleteRecord, record]);
+
+  return (
+    <div className="flex items-center gap-2 text-text-secondary">
+      <PencilLine
+        className="size-4 cursor-pointer"
+        data-tool={record}
+        onClick={edit}
+      />
+      <X className="size-4 cursor-pointer" onClick={handleDelete} />
+    </div>
+  );
+}
+
+export function AgentTools() {
+  const { toolNames } = useGetAgentToolNames();
+  const { deleteNodeTool } = useDeleteAgentNodeTools();
+  const { mcpIds } = useGetAgentMCPIds();
+  const { findMcpById } = useFindMcpById();
+  const { deleteNodeMCP } = useDeleteAgentNodeMCP();
+  const { showFormDrawer } = useContext(AgentInstanceContext);
+  const { clickedNodeId, findAgentToolNodeById, selectNodeIds } = useGraphStore(
+    (state) => state,
+  );
+
+  const handleEdit: MouseEventHandler<SVGSVGElement> = useCallback(
+    (e) => {
+      const toolNodeId = findAgentToolNodeById(clickedNodeId);
+      if (toolNodeId) {
+        selectNodeIds([toolNodeId]);
+        showFormDrawer(e, toolNodeId);
+      }
+    },
+    [clickedNodeId, findAgentToolNodeById, selectNodeIds, showFormDrawer],
+  );
+
+  return (
+    <section className="space-y-2.5">
+      <span className="text-text-secondary">{t('flow.tools')}</span>
+      <ul className="space-y-2">
+        {toolNames.map((x) => (
+          <ToolCard key={x}>
+            <div className="flex gap-2 items-center">
+              <OperatorIcon name={x as Operator}></OperatorIcon>
+              {x}
+            </div>
+            <ActionButton
+              record={x}
+              deleteRecord={deleteNodeTool(x)}
+              edit={handleEdit}
+            ></ActionButton>
+          </ToolCard>
+        ))}
+        {mcpIds.map((id) => (
+          <ToolCard key={id}>
+            {findMcpById(id)?.name}
+            <ActionButton
+              record={id}
+              deleteRecord={deleteNodeMCP(id)}
+              edit={handleEdit}
+            ></ActionButton>
+          </ToolCard>
+        ))}
+      </ul>
+      <ToolPopover>
+        <BlockButton>{t('flow.addTools')}</BlockButton>
+      </ToolPopover>
+    </section>
+  );
+}
+
+export function Agents({ node }: INextOperatorForm) {
+  const { addCanvasNode } = useContext(AgentInstanceContext);
+  const { deleteAgentDownstreamNodesById, edges, getNode, selectNodeIds } =
+    useGraphStore((state) => state);
+  const { showFormDrawer } = useContext(AgentInstanceContext);
+
+  const handleEdit = useCallback(
+    (nodeId: string): MouseEventHandler<SVGSVGElement> =>
+      (e) => {
+        selectNodeIds([nodeId]);
+        showFormDrawer(e, nodeId);
+      },
+    [selectNodeIds, showFormDrawer],
+  );
+
+  const subBottomAgentNodeIds = useMemo(() => {
+    return filterDownstreamAgentNodeIds(edges, node?.id);
+  }, [edges, node?.id]);
+
+  return (
+    <section className="space-y-2.5">
+      <span className="text-text-secondary">{t('flow.agent')}</span>
+      <ul className="space-y-2">
+        {subBottomAgentNodeIds.map((id) => {
+          const currentNode = getNode(id);
+
+          return (
+            <ToolCard key={id}>
+              {currentNode?.data.name}
+              <ActionButton
+                record={id}
+                deleteRecord={deleteAgentDownstreamNodesById}
+                edit={handleEdit(id)}
+              ></ActionButton>
+            </ToolCard>
+          );
+        })}
+      </ul>
+      <BlockButton
+        onClick={addCanvasNode(Operator.Agent, {
+          nodeId: node?.id,
+          position: Position.Bottom,
+        })}
+      >
+        {t('flow.addAgent')}
+      </BlockButton>
+    </section>
+  );
+}
diff --git a/web/src/pages/data-flow/form/agent-form/dynamic-prompt.tsx b/web/src/pages/data-flow/form/agent-form/dynamic-prompt.tsx
new file mode 100644
index 000000000..1cda9fbd5
--- /dev/null
+++ b/web/src/pages/data-flow/form/agent-form/dynamic-prompt.tsx
@@ -0,0 +1,93 @@
+import { BlockButton, Button } from '@/components/ui/button';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { RAGFlowSelect } from '@/components/ui/select';
+import { X } from 'lucide-react';
+import { memo } from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { PromptRole } from '../../constant';
+import { PromptEditor } from '../components/prompt-editor';
+
+const options = [
+  { label: 'User', value: PromptRole.User },
+  { label: 'Assistant', value: PromptRole.Assistant },
+];
+
+const DynamicPrompt = () => {
+  const { t } = useTranslation();
+  const form = useFormContext();
+  const name = 'prompts';
+
+  const { fields, append, remove } = useFieldArray({
+    name: name,
+    control: form.control,
+  });
+
+  return (
+    <FormItem>
+      <FormLabel tooltip={t('flow.msgTip')}>{t('flow.msg')}</FormLabel>
+      <div className="space-y-4">
+        {fields.map((field, index) => (
+          <div key={field.id} className="flex">
+            <div className="space-y-2 flex-1">
+              <FormField
+                control={form.control}
+                name={`${name}.${index}.role`}
+                render={({ field }) => (
+                  <FormItem className="w-1/3">
+                    <FormLabel />
+                    <FormControl>
+                      <RAGFlowSelect
+                        {...field}
+                        options={options}
+                      ></RAGFlowSelect>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name={`${name}.${index}.content`}
+                render={({ field }) => (
+                  <FormItem className="flex-1">
+                    <FormControl>
+                      <section>
+                        <PromptEditor
+                          {...field}
+                          showToolbar={false}
+                        ></PromptEditor>
+                      </section>
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+            </div>
+            <Button
+              type="button"
+              variant={'ghost'}
+              onClick={() => remove(index)}
+            >
+              <X />
+            </Button>
+          </div>
+        ))}
+      </div>
+      <FormMessage />
+      <BlockButton
+        onClick={() => append({ content: '', role: PromptRole.User })}
+      >
+        Add
+      </BlockButton>
+    </FormItem>
+  );
+};
+
+export default memo(DynamicPrompt);
diff --git a/web/src/pages/data-flow/form/agent-form/dynamic-tool.tsx b/web/src/pages/data-flow/form/agent-form/dynamic-tool.tsx
new file mode 100644
index 000000000..afda465b6
--- /dev/null
+++ b/web/src/pages/data-flow/form/agent-form/dynamic-tool.tsx
@@ -0,0 +1,63 @@
+import { BlockButton, Button } from '@/components/ui/button';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@/components/ui/form';
+import { X } from 'lucide-react';
+import { memo } from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import { PromptEditor } from '../components/prompt-editor';
+
+const DynamicTool = () => {
+  const form = useFormContext();
+  const name = 'tools';
+
+  const { fields, append, remove } = useFieldArray({
+    name: name,
+    control: form.control,
+  });
+
+  return (
+    <FormItem>
+      <div className="space-y-4">
+        {fields.map((field, index) => (
+          <div key={field.id} className="flex">
+            <div className="space-y-2 flex-1">
+              <FormField
+                control={form.control}
+                name={`${name}.${index}.component_name`}
+                render={({ field }) => (
+                  <FormItem className="flex-1">
+                    <FormControl>
+                      <section>
+                        <PromptEditor
+                          {...field}
+                          showToolbar={false}
+                        ></PromptEditor>
+                      </section>
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+            </div>
+            <Button
+              type="button"
+              variant={'ghost'}
+              onClick={() => remove(index)}
+            >
+              <X />
+            </Button>
+          </div>
+        ))}
+      </div>
+      <FormMessage />
+      <BlockButton onClick={() => append({ component_name: '' })}>
+        Add
+      </BlockButton>
+    </FormItem>
+  );
+};
+
+export default memo(DynamicTool);
diff --git a/web/src/pages/data-flow/form/agent-form/index.tsx b/web/src/pages/data-flow/form/agent-form/index.tsx
new file mode 100644
index 000000000..9ca0fb69c
--- /dev/null
+++ b/web/src/pages/data-flow/form/agent-form/index.tsx
@@ -0,0 +1,280 @@
+import { Collapse } from '@/components/collapse';
+import { FormContainer } from '@/components/form-container';
+import {
+  LargeModelFilterFormSchema,
+  LargeModelFormField,
+} from '@/components/large-model-form-field';
+import { LlmSettingSchema } from '@/components/llm-setting-items/next';
+import { MessageHistoryWindowSizeFormField } from '@/components/message-history-window-size-item';
+import { SelectWithSearch } from '@/components/originui/select-with-search';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from '@/components/ui/form';
+import { Input, NumberInput } from '@/components/ui/input';
+import { Switch } from '@/components/ui/switch';
+import { LlmModelType } from '@/constants/knowledge';
+import { useFindLlmByUuid } from '@/hooks/use-llm-request';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { memo, useEffect, useMemo } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import {
+  AgentExceptionMethod,
+  NodeHandleId,
+  VariableType,
+  initialAgentValues,
+} from '../../constant';
+import { INextOperatorForm } from '../../interface';
+import useGraphStore from '../../store';
+import { isBottomSubAgent } from '../../utils';
+import { buildOutputList } from '../../utils/build-output-list';
+import { DescriptionField } from '../components/description-field';
+import { FormWrapper } from '../components/form-wrapper';
+import { Output } from '../components/output';
+import { PromptEditor } from '../components/prompt-editor';
+import { QueryVariable } from '../components/query-variable';
+import { AgentTools, Agents } from './agent-tools';
+import { useValues } from './use-values';
+import { useWatchFormChange } from './use-watch-change';
+
+const FormSchema = z.object({
+  sys_prompt: z.string(),
+  description: z.string().optional(),
+  user_prompt: z.string().optional(),
+  prompts: z.string().optional(),
+  // prompts: z
+  //   .array(
+  //     z.object({
+  //       role: z.string(),
+  //       content: z.string(),
+  //     }),
+  //   )
+  //   .optional(),
+  message_history_window_size: z.coerce.number(),
+  tools: z
+    .array(
+      z.object({
+        component_name: z.string(),
+      }),
+    )
+    .optional(),
+  ...LlmSettingSchema,
+  max_retries: z.coerce.number(),
+  delay_after_error: z.coerce.number().optional(),
+  visual_files_var: z.string().optional(),
+  max_rounds: z.coerce.number().optional(),
+  exception_method: z.string().optional(),
+  exception_goto: z.array(z.string()).optional(),
+  exception_default_value: z.string().optional(),
+  ...LargeModelFilterFormSchema,
+  cite: z.boolean().optional(),
+});
+
+const outputList = buildOutputList(initialAgentValues.outputs);
+
+function AgentForm({ node }: INextOperatorForm) {
+  const { t } = useTranslation();
+  const { edges, deleteEdgesBySourceAndSourceHandle } = useGraphStore(
+    (state) => state,
+  );
+
+  const defaultValues = useValues(node);
+
+  const ExceptionMethodOptions = Object.values(AgentExceptionMethod).map(
+    (x) => ({
+      label: t(`flow.${x}`),
+      value: x,
+    }),
+  );
+
+  const isSubAgent = useMemo(() => {
+    return isBottomSubAgent(edges, node?.id);
+  }, [edges, node?.id]);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    defaultValues: defaultValues,
+    resolver: zodResolver(FormSchema),
+  });
+
+  const llmId = useWatch({ control: form.control, name: 'llm_id' });
+
+  const findLlmByUuid = useFindLlmByUuid();
+
+  const exceptionMethod = useWatch({
+    control: form.control,
+    name: 'exception_method',
+  });
+
+  useEffect(() => {
+    if (exceptionMethod !== AgentExceptionMethod.Goto) {
+      if (node?.id) {
+        deleteEdgesBySourceAndSourceHandle(
+          node?.id,
+          NodeHandleId.AgentException,
+        );
+      }
+    }
+  }, [deleteEdgesBySourceAndSourceHandle, exceptionMethod, node?.id]);
+
+  useWatchFormChange(node?.id, form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <FormContainer>
+          {isSubAgent && <DescriptionField></DescriptionField>}
+          <LargeModelFormField showSpeech2TextModel></LargeModelFormField>
+          {findLlmByUuid(llmId)?.model_type === LlmModelType.Image2text && (
+            <QueryVariable
+              name="visual_files_var"
+              label="Visual Input File"
+              type={VariableType.File}
+            ></QueryVariable>
+          )}
+        </FormContainer>
+
+        <FormContainer>
+          <FormField
+            control={form.control}
+            name={`sys_prompt`}
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>{t('flow.systemPrompt')}</FormLabel>
+                <FormControl>
+                  <PromptEditor
+                    {...field}
+                    placeholder={t('flow.messagePlaceholder')}
+                    showToolbar={false}
+                  ></PromptEditor>
+                </FormControl>
+              </FormItem>
+            )}
+          />
+        </FormContainer>
+        {isSubAgent || (
+          <FormContainer>
+            {/* <DynamicPrompt></DynamicPrompt> */}
+            <FormField
+              control={form.control}
+              name={`prompts`}
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel>{t('flow.userPrompt')}</FormLabel>
+                  <FormControl>
+                    <section>
+                      <PromptEditor
+                        {...field}
+                        showToolbar={false}
+                      ></PromptEditor>
+                    </section>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+          </FormContainer>
+        )}
+
+        <FormContainer>
+          <AgentTools></AgentTools>
+          <Agents node={node}></Agents>
+        </FormContainer>
+        <Collapse title={<div>{t('flow.advancedSettings')}</div>}>
+          <FormContainer>
+            <MessageHistoryWindowSizeFormField></MessageHistoryWindowSizeFormField>
+            <FormField
+              control={form.control}
+              name={`cite`}
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel tooltip={t('flow.citeTip')}>
+                    {t('flow.cite')}
+                  </FormLabel>
+                  <FormControl>
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    ></Switch>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name={`max_retries`}
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel>{t('flow.maxRetries')}</FormLabel>
+                  <FormControl>
+                    <NumberInput {...field} max={8}></NumberInput>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name={`delay_after_error`}
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel>{t('flow.delayEfterError')}</FormLabel>
+                  <FormControl>
+                    <NumberInput {...field} max={5} step={0.1}></NumberInput>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name={`max_rounds`}
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel>{t('flow.maxRounds')}</FormLabel>
+                  <FormControl>
+                    <NumberInput {...field}></NumberInput>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name={`exception_method`}
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel>{t('flow.exceptionMethod')}</FormLabel>
+                  <FormControl>
+                    <SelectWithSearch
+                      {...field}
+                      options={ExceptionMethodOptions}
+                      allowClear
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            {exceptionMethod === AgentExceptionMethod.Comment && (
+              <FormField
+                control={form.control}
+                name={`exception_default_value`}
+                render={({ field }) => (
+                  <FormItem className="flex-1">
+                    <FormLabel>{t('flow.ExceptionDefaultValue')}</FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+            )}
+          </FormContainer>
+        </Collapse>
+        <Output list={outputList}></Output>
+      </FormWrapper>
+    </Form>
+  );
+}
+
+export default memo(AgentForm);
diff --git a/web/src/pages/data-flow/form/agent-form/tool-popover/index.tsx b/web/src/pages/data-flow/form/agent-form/tool-popover/index.tsx
new file mode 100644
index 000000000..84f1ed46a
--- /dev/null
+++ b/web/src/pages/data-flow/form/agent-form/tool-popover/index.tsx
@@ -0,0 +1,89 @@
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Operator } from '@/pages/agent/constant';
+import { AgentFormContext, AgentInstanceContext } from '@/pages/agent/context';
+import useGraphStore from '@/pages/agent/store';
+import { Position } from '@xyflow/react';
+import { t } from 'i18next';
+import { PropsWithChildren, useCallback, useContext, useEffect } from 'react';
+import { useGetAgentMCPIds, useGetAgentToolNames } from '../use-get-tools';
+import { MCPCommand, ToolCommand } from './tool-command';
+import { useUpdateAgentNodeMCP } from './use-update-mcp';
+import { useUpdateAgentNodeTools } from './use-update-tools';
+
+enum ToolType {
+  Common = 'common',
+  MCP = 'mcp',
+}
+
+export function ToolPopover({ children }: PropsWithChildren) {
+  const { addCanvasNode } = useContext(AgentInstanceContext);
+  const node = useContext(AgentFormContext);
+  const { updateNodeTools } = useUpdateAgentNodeTools();
+  const { toolNames } = useGetAgentToolNames();
+  const deleteAgentToolNodeById = useGraphStore(
+    (state) => state.deleteAgentToolNodeById,
+  );
+  const { mcpIds } = useGetAgentMCPIds();
+  const { updateNodeMCP } = useUpdateAgentNodeMCP();
+
+  const handleChange = useCallback(
+    (value: string[]) => {
+      if (Array.isArray(value) && node?.id) {
+        updateNodeTools(value);
+      }
+    },
+    [node?.id, updateNodeTools],
+  );
+
+  useEffect(() => {
+    const total = toolNames.length + mcpIds.length;
+    if (node?.id) {
+      if (total > 0) {
+        addCanvasNode(Operator.Tool, {
+          position: Position.Bottom,
+          nodeId: node?.id,
+        })();
+      } else {
+        deleteAgentToolNodeById(node.id);
+      }
+    }
+  }, [
+    addCanvasNode,
+    deleteAgentToolNodeById,
+    mcpIds.length,
+    node?.id,
+    toolNames.length,
+  ]);
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>{children}</PopoverTrigger>
+      <PopoverContent className="w-80 p-4">
+        <Tabs defaultValue={ToolType.Common}>
+          <TabsList>
+            <TabsTrigger value={ToolType.Common} className="bg-bg-card">
+              {t('flow.builtIn')}
+            </TabsTrigger>
+            <TabsTrigger value={ToolType.MCP} className="bg-bg-card">
+              MCP
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value={ToolType.Common}>
+            <ToolCommand
+              onChange={handleChange}
+              value={toolNames}
+            ></ToolCommand>
+          </TabsContent>
+          <TabsContent value={ToolType.MCP}>
+            <MCPCommand value={mcpIds} onChange={updateNodeMCP}></MCPCommand>
+          </TabsContent>
+        </Tabs>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/web/src/pages/data-flow/form/agent-form/tool-popover/tool-command.tsx b/web/src/pages/data-flow/form/agent-form/tool-popover/tool-command.tsx
new file mode 100644
index 000000000..6118c43ab
--- /dev/null
+++ b/web/src/pages/data-flow/form/agent-form/tool-popover/tool-command.tsx
@@ -0,0 +1,178 @@
+import { CheckIcon } from 'lucide-react';
+
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import { useListMcpServer } from '@/hooks/use-mcp-request';
+import { cn } from '@/lib/utils';
+import { Operator } from '@/pages/agent/constant';
+import OperatorIcon from '@/pages/agent/operator-icon';
+import { t } from 'i18next';
+import { lowerFirst } from 'lodash';
+import { PropsWithChildren, useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const Menus = [
+  {
+    label: t('flow.search'),
+    list: [
+      Operator.TavilySearch,
+      Operator.TavilyExtract,
+      Operator.Google,
+      // Operator.Bing,
+      Operator.DuckDuckGo,
+      Operator.Wikipedia,
+      Operator.SearXNG,
+      Operator.YahooFinance,
+      Operator.PubMed,
+      Operator.GoogleScholar,
+      Operator.ArXiv,
+      Operator.WenCai,
+    ],
+  },
+  {
+    label: t('flow.communication'),
+    list: [Operator.Email],
+  },
+  // {
+  //   label: 'Productivity',
+  //   list: [],
+  // },
+  {
+    label: t('flow.developer'),
+    list: [Operator.GitHub, Operator.ExeSQL, Operator.Code, Operator.Retrieval],
+  },
+];
+
+type ToolCommandProps = {
+  value?: string[];
+  onChange?(values: string[]): void;
+};
+
+type ToolCommandItemProps = {
+  toggleOption(id: string): void;
+  id: string;
+  isSelected: boolean;
+} & ToolCommandProps;
+
+function ToolCommandItem({
+  toggleOption,
+  id,
+  isSelected,
+  children,
+}: ToolCommandItemProps & PropsWithChildren) {
+  return (
+    <CommandItem className="cursor-pointer" onSelect={() => toggleOption(id)}>
+      <div
+        className={cn(
+          'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+          isSelected
+            ? 'bg-primary text-primary-foreground'
+            : 'opacity-50 [&_svg]:invisible',
+        )}
+      >
+        <CheckIcon className="h-4 w-4" />
+      </div>
+      {children}
+    </CommandItem>
+  );
+}
+
+function useHandleSelectChange({ onChange, value }: ToolCommandProps) {
+  const [currentValue, setCurrentValue] = useState<string[]>([]);
+
+  const toggleOption = useCallback(
+    (option: string) => {
+      const newSelectedValues = currentValue.includes(option)
+        ? currentValue.filter((value) => value !== option)
+        : [...currentValue, option];
+      setCurrentValue(newSelectedValues);
+      onChange?.(newSelectedValues);
+    },
+    [currentValue, onChange],
+  );
+
+  useEffect(() => {
+    if (Array.isArray(value)) {
+      setCurrentValue(value);
+    }
+  }, [value]);
+
+  return {
+    toggleOption,
+    currentValue,
+  };
+}
+
+export function ToolCommand({ value, onChange }: ToolCommandProps) {
+  const { t } = useTranslation();
+  const { toggleOption, currentValue } = useHandleSelectChange({
+    onChange,
+    value,
+  });
+
+  return (
+    <Command>
+      <CommandInput placeholder={t('flow.typeCommandOrsearch')} />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        {Menus.map((x) => (
+          <CommandGroup heading={x.label} key={x.label}>
+            {x.list.map((y) => {
+              const isSelected = currentValue.includes(y);
+              return (
+                <ToolCommandItem
+                  key={y}
+                  id={y}
+                  toggleOption={toggleOption}
+                  isSelected={isSelected}
+                >
+                  <>
+                    <OperatorIcon name={y as Operator}></OperatorIcon>
+                    <span>{t(`flow.${lowerFirst(y)}`)}</span>
+                  </>
+                </ToolCommandItem>
+              );
+            })}
+          </CommandGroup>
+        ))}
+      </CommandList>
+    </Command>
+  );
+}
+
+export function MCPCommand({ onChange, value }: ToolCommandProps) {
+  const { data } = useListMcpServer();
+  const { toggleOption, currentValue } = useHandleSelectChange({
+    onChange,
+    value,
+  });
+
+  return (
+    <Command>
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        {data.mcp_servers.map((item) => {
+          const isSelected = currentValue.includes(item.id);
+
+          return (
+            <ToolCommandItem
+              key={item.id}
+              id={item.id}
+              isSelected={isSelected}
+              toggleOption={toggleOption}
+            >
+              {item.name}
+            </ToolCommandItem>
+          );
+        })}
+      </CommandList>
+    </Command>
+  );
+}
diff --git a/web/src/pages/data-flow/form/agent-form/tool-popover/use-update-mcp.ts b/web/src/pages/data-flow/form/agent-form/tool-popover/use-update-mcp.ts
new file mode 100644
index 000000000..827b9f9e1
--- /dev/null
+++ b/web/src/pages/data-flow/form/agent-form/tool-popover/use-update-mcp.ts
@@ -0,0 +1,74 @@
+import { useListMcpServer } from '@/hooks/use-mcp-request';
+import { IAgentForm } from '@/interfaces/database/agent';
+import { AgentFormContext } from '@/pages/agent/context';
+import useGraphStore from '@/pages/agent/store';
+import { get } from 'lodash';
+import { useCallback, useContext, useMemo } from 'react';
+
+export function useGetNodeMCP() {
+  const node = useContext(AgentFormContext);
+
+  return useMemo(() => {
+    const mcp: IAgentForm['mcp'] = get(node, 'data.form.mcp');
+    return mcp;
+  }, [node]);
+}
+
+export function useUpdateAgentNodeMCP() {
+  const { updateNodeForm } = useGraphStore((state) => state);
+  const node = useContext(AgentFormContext);
+  const mcpList = useGetNodeMCP();
+  const { data } = useListMcpServer();
+  const mcpServers = data.mcp_servers;
+
+  const findMcpTools = useCallback(
+    (mcpId: string) => {
+      const mcp = mcpServers.find((x) => x.id === mcpId);
+      return mcp?.variables.tools;
+    },
+    [mcpServers],
+  );
+
+  const updateNodeMCP = useCallback(
+    (value: string[]) => {
+      if (node?.id) {
+        const nextValue = value.reduce<IAgentForm['mcp']>((pre, cur) => {
+          const mcp = mcpList.find((x) => x.mcp_id === cur);
+          const tools = findMcpTools(cur);
+          if (mcp) {
+            pre.push(mcp);
+          } else if (tools) {
+            pre.push({
+              mcp_id: cur,
+              tools: {},
+            });
+          }
+          return pre;
+        }, []);
+
+        updateNodeForm(node?.id, nextValue, ['mcp']);
+      }
+    },
+    [node?.id, updateNodeForm, mcpList, findMcpTools],
+  );
+
+  return { updateNodeMCP };
+}
+
+export function useDeleteAgentNodeMCP() {
+  const { updateNodeForm } = useGraphStore((state) => state);
+  const mcpList = useGetNodeMCP();
+  const node = useContext(AgentFormContext);
+
+  const deleteNodeMCP = useCallback(
+    (value: string) => () => {
+      const nextMCP = mcpList.filter((x) => x.mcp_id !== value);
+      if (node?.id) {
+        updateNodeForm(node?.id, nextMCP, ['mcp']);
+      }
+    },
+    [node?.id, mcpList, updateNodeForm],
+  );
+
+  return { deleteNodeMCP };
+}
diff --git a/web/src/pages/data-flow/form/agent-form/tool-popover/use-update-tools.ts b/web/src/pages/data-flow/form/agent-form/tool-popover/use-update-tools.ts
new file mode 100644
index 000000000..db579561a
--- /dev/null
+++ b/web/src/pages/data-flow/form/agent-form/tool-popover/use-update-tools.ts
@@ -0,0 +1,66 @@
+import { IAgentForm } from '@/interfaces/database/agent';
+import { Operator } from '@/pages/agent/constant';
+import { AgentFormContext } from '@/pages/agent/context';
+import { useAgentToolInitialValues } from '@/pages/agent/hooks/use-agent-tool-initial-values';
+import useGraphStore from '@/pages/agent/store';
+import { get } from 'lodash';
+import { useCallback, useContext, useMemo } from 'react';
+
+export function useGetNodeTools() {
+  const node = useContext(AgentFormContext);
+
+  return useMemo(() => {
+    const tools: IAgentForm['tools'] = get(node, 'data.form.tools');
+    return tools;
+  }, [node]);
+}
+
+export function useUpdateAgentNodeTools() {
+  const { updateNodeForm } = useGraphStore((state) => state);
+  const node = useContext(AgentFormContext);
+  const tools = useGetNodeTools();
+  const { initializeAgentToolValues } = useAgentToolInitialValues();
+
+  const updateNodeTools = useCallback(
+    (value: string[]) => {
+      if (node?.id) {
+        const nextValue = value.reduce<IAgentForm['tools']>((pre, cur) => {
+          const tool = tools.find((x) => x.component_name === cur);
+          pre.push(
+            tool
+              ? tool
+              : {
+                  component_name: cur,
+                  name: cur,
+                  params: initializeAgentToolValues(cur as Operator),
+                },
+          );
+          return pre;
+        }, []);
+
+        updateNodeForm(node?.id, nextValue, ['tools']);
+      }
+    },
+    [initializeAgentToolValues, node?.id, tools, updateNodeForm],
+  );
+
+  return { updateNodeTools };
+}
+
+export function useDeleteAgentNodeTools() {
+  const { updateNodeForm } = useGraphStore((state) => state);
+  const tools = useGetNodeTools();
+  const node = useContext(AgentFormContext);
+
+  const deleteNodeTool = useCallback(
+    (value: string) => () => {
+      const nextTools = tools.filter((x) => x.component_name !== value);
+      if (node?.id) {
+        updateNodeForm(node?.id, nextTools, ['tools']);
+      }
+    },
+    [node?.id, tools, updateNodeForm],
+  );
+
+  return { deleteNodeTool };
+}
diff --git a/web/src/pages/data-flow/form/agent-form/use-get-tools.ts b/web/src/pages/data-flow/form/agent-form/use-get-tools.ts
new file mode 100644
index 000000000..32bf3f0ef
--- /dev/null
+++ b/web/src/pages/data-flow/form/agent-form/use-get-tools.ts
@@ -0,0 +1,26 @@
+import { IAgentForm } from '@/interfaces/database/agent';
+import { get } from 'lodash';
+import { useContext, useMemo } from 'react';
+import { AgentFormContext } from '../../context';
+
+export function useGetAgentToolNames() {
+  const node = useContext(AgentFormContext);
+
+  const toolNames = useMemo(() => {
+    const tools: IAgentForm['tools'] = get(node, 'data.form.tools', []);
+    return tools.map((x) => x.component_name);
+  }, [node]);
+
+  return { toolNames };
+}
+
+export function useGetAgentMCPIds() {
+  const node = useContext(AgentFormContext);
+
+  const mcpIds = useMemo(() => {
+    const ids: IAgentForm['mcp'] = get(node, 'data.form.mcp', []);
+    return ids.map((x) => x.mcp_id);
+  }, [node]);
+
+  return { mcpIds };
+}
diff --git a/web/src/pages/data-flow/form/agent-form/use-values.ts b/web/src/pages/data-flow/form/agent-form/use-values.ts
new file mode 100644
index 000000000..b2d61dc9f
--- /dev/null
+++ b/web/src/pages/data-flow/form/agent-form/use-values.ts
@@ -0,0 +1,33 @@
+import { useFetchModelId } from '@/hooks/logic-hooks';
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { get, isEmpty } from 'lodash';
+import { useMemo } from 'react';
+import { initialAgentValues } from '../../constant';
+
+export function useValues(node?: RAGFlowNodeType) {
+  const llmId = useFetchModelId();
+
+  const defaultValues = useMemo(
+    () => ({
+      ...initialAgentValues,
+      llm_id: llmId,
+      prompts: '',
+    }),
+    [llmId],
+  );
+
+  const values = useMemo(() => {
+    const formData = node?.data?.form;
+
+    if (isEmpty(formData)) {
+      return defaultValues;
+    }
+
+    return {
+      ...formData,
+      prompts: get(formData, 'prompts.0.content', ''),
+    };
+  }, [defaultValues, node?.data?.form]);
+
+  return values;
+}
diff --git a/web/src/pages/data-flow/form/agent-form/use-watch-change.ts b/web/src/pages/data-flow/form/agent-form/use-watch-change.ts
new file mode 100644
index 000000000..98b0ecf31
--- /dev/null
+++ b/web/src/pages/data-flow/form/agent-form/use-watch-change.ts
@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import { UseFormReturn, useWatch } from 'react-hook-form';
+import { PromptRole } from '../../constant';
+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(() => {
+    // Manually triggered form updates are synchronized to the canvas
+    if (id && form?.formState.isDirty) {
+      values = form?.getValues();
+      let nextValues: any = {
+        ...values,
+        prompts: [{ role: PromptRole.User, content: values.prompts }],
+      };
+
+      updateNodeForm(id, nextValues);
+    }
+  }, [form?.formState.isDirty, id, updateNodeForm, values]);
+}
diff --git a/web/src/pages/data-flow/form/akshare-form/index.tsx b/web/src/pages/data-flow/form/akshare-form/index.tsx
new file mode 100644
index 000000000..1cfd554b1
--- /dev/null
+++ b/web/src/pages/data-flow/form/akshare-form/index.tsx
@@ -0,0 +1,22 @@
+import { TopNFormField } from '@/components/top-n-item';
+import { Form } from '@/components/ui/form';
+import { INextOperatorForm } from '../../interface';
+import { DynamicInputVariable } from '../components/next-dynamic-input-variable';
+
+const AkShareForm = ({ form, node }: INextOperatorForm) => {
+  return (
+    <Form {...form}>
+      <form
+        className="space-y-6"
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <DynamicInputVariable node={node}></DynamicInputVariable>
+        <TopNFormField max={99}></TopNFormField>
+      </form>
+    </Form>
+  );
+};
+
+export default AkShareForm;
diff --git a/web/src/pages/data-flow/form/arxiv-form/index.tsx b/web/src/pages/data-flow/form/arxiv-form/index.tsx
new file mode 100644
index 000000000..a6e1b7c45
--- /dev/null
+++ b/web/src/pages/data-flow/form/arxiv-form/index.tsx
@@ -0,0 +1,96 @@
+import { FormContainer } from '@/components/form-container';
+import { SelectWithSearch } from '@/components/originui/select-with-search';
+import { TopNFormField } from '@/components/top-n-item';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { useTranslate } from '@/hooks/common-hooks';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { memo, useMemo } from 'react';
+import { useForm, useFormContext } from 'react-hook-form';
+import { z } from 'zod';
+import { initialArXivValues } 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';
+import { QueryVariable } from '../components/query-variable';
+
+export const ArXivFormPartialSchema = {
+  top_n: z.number(),
+  sort_by: z.string(),
+};
+
+export const FormSchema = z.object({
+  ...ArXivFormPartialSchema,
+  query: z.string(),
+});
+
+export function ArXivFormWidgets() {
+  const form = useFormContext();
+  const { t } = useTranslate('flow');
+
+  const options = useMemo(() => {
+    return ['submittedDate', 'lastUpdatedDate', 'relevance'].map((x) => ({
+      value: x,
+      label: t(x),
+    }));
+  }, [t]);
+
+  return (
+    <>
+      <TopNFormField></TopNFormField>
+      <FormField
+        control={form.control}
+        name={`sort_by`}
+        render={({ field }) => (
+          <FormItem className="flex-1">
+            <FormLabel>{t('sortBy')}</FormLabel>
+            <FormControl>
+              <SelectWithSearch {...field} options={options}></SelectWithSearch>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </>
+  );
+}
+
+const outputList = buildOutputList(initialArXivValues.outputs);
+
+function ArXivForm({ node }: INextOperatorForm) {
+  const defaultValues = useFormValues(initialArXivValues, node);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    defaultValues,
+    resolver: zodResolver(FormSchema),
+  });
+
+  useWatchFormChange(node?.id, form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <FormContainer>
+          <QueryVariable></QueryVariable>
+        </FormContainer>
+        <FormContainer>
+          <ArXivFormWidgets></ArXivFormWidgets>
+        </FormContainer>
+      </FormWrapper>
+      <div className="p-5">
+        <Output list={outputList}></Output>
+      </div>
+    </Form>
+  );
+}
+
+export default memo(ArXivForm);
diff --git a/web/src/pages/data-flow/form/baidu-fanyi-form/index.tsx b/web/src/pages/data-flow/form/baidu-fanyi-form/index.tsx
new file mode 100644
index 000000000..c02b3dd85
--- /dev/null
+++ b/web/src/pages/data-flow/form/baidu-fanyi-form/index.tsx
@@ -0,0 +1,71 @@
+import { useTranslate } from '@/hooks/common-hooks';
+import { Form, Input, Select } from 'antd';
+import { useMemo } from 'react';
+import { IOperatorForm } from '../../interface';
+import {
+  BaiduFanyiDomainOptions,
+  BaiduFanyiSourceLangOptions,
+} from '../../options';
+import DynamicInputVariable from '../components/dynamic-input-variable';
+
+const BaiduFanyiForm = ({ onValuesChange, form, node }: IOperatorForm) => {
+  const { t } = useTranslate('flow');
+  const options = useMemo(() => {
+    return ['translate', 'fieldtranslate'].map((x) => ({
+      value: x,
+      label: t(`baiduSecretKeyOptions.${x}`),
+    }));
+  }, [t]);
+
+  const baiduFanyiOptions = useMemo(() => {
+    return BaiduFanyiDomainOptions.map((x) => ({
+      value: x,
+      label: t(`baiduDomainOptions.${x}`),
+    }));
+  }, [t]);
+
+  const baiduFanyiSourceLangOptions = useMemo(() => {
+    return BaiduFanyiSourceLangOptions.map((x) => ({
+      value: x,
+      label: t(`baiduSourceLangOptions.${x}`),
+    }));
+  }, [t]);
+
+  return (
+    <Form
+      name="basic"
+      autoComplete="off"
+      form={form}
+      onValuesChange={onValuesChange}
+      layout={'vertical'}
+    >
+      <DynamicInputVariable node={node}></DynamicInputVariable>
+      <Form.Item label={t('appid')} name={'appid'}>
+        <Input></Input>
+      </Form.Item>
+      <Form.Item label={t('secretKey')} name={'secret_key'}>
+        <Input></Input>
+      </Form.Item>
+      <Form.Item label={t('transType')} name={'trans_type'}>
+        <Select options={options}></Select>
+      </Form.Item>
+      <Form.Item noStyle dependencies={['model_type']}>
+        {({ getFieldValue }) =>
+          getFieldValue('trans_type') === 'fieldtranslate' && (
+            <Form.Item label={t('domain')} name={'domain'}>
+              <Select options={baiduFanyiOptions}></Select>
+            </Form.Item>
+          )
+        }
+      </Form.Item>
+      <Form.Item label={t('sourceLang')} name={'source_lang'}>
+        <Select options={baiduFanyiSourceLangOptions}></Select>
+      </Form.Item>
+      <Form.Item label={t('targetLang')} name={'target_lang'}>
+        <Select options={baiduFanyiSourceLangOptions}></Select>
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default BaiduFanyiForm;
diff --git a/web/src/pages/data-flow/form/baidu-form/index.tsx b/web/src/pages/data-flow/form/baidu-form/index.tsx
new file mode 100644
index 000000000..0861ef829
--- /dev/null
+++ b/web/src/pages/data-flow/form/baidu-form/index.tsx
@@ -0,0 +1,22 @@
+import { TopNFormField } from '@/components/top-n-item';
+import { Form } from '@/components/ui/form';
+import { INextOperatorForm } from '../../interface';
+import { DynamicInputVariable } from '../components/next-dynamic-input-variable';
+
+const BaiduForm = ({ form, node }: INextOperatorForm) => {
+  return (
+    <Form {...form}>
+      <form
+        className="space-y-6"
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <DynamicInputVariable node={node}></DynamicInputVariable>
+        <TopNFormField></TopNFormField>
+      </form>
+    </Form>
+  );
+};
+
+export default BaiduForm;
diff --git a/web/src/pages/data-flow/form/begin-form/begin-dynamic-options.tsx b/web/src/pages/data-flow/form/begin-form/begin-dynamic-options.tsx
new file mode 100644
index 000000000..12b2bfb4b
--- /dev/null
+++ b/web/src/pages/data-flow/form/begin-form/begin-dynamic-options.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import { BlockButton, Button } from '@/components/ui/button';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { X } from 'lucide-react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+export function BeginDynamicOptions() {
+  const { t } = useTranslation();
+  const form = useFormContext();
+  const name = 'options';
+
+  const { fields, remove, append } = useFieldArray({
+    name: name,
+    control: form.control,
+  });
+
+  return (
+    <div className="space-y-5">
+      {fields.map((field, index) => {
+        const typeField = `${name}.${index}.value`;
+        return (
+          <div key={field.id} className="flex items-center gap-2">
+            <FormField
+              control={form.control}
+              name={typeField}
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormControl>
+                    <Input
+                      {...field}
+                      placeholder={t('common.pleaseInput')}
+                    ></Input>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button variant={'ghost'} onClick={() => remove(index)}>
+              <X className="text-text-sub-title-invert " />
+            </Button>
+          </div>
+        );
+      })}
+      <BlockButton onClick={() => append({ value: '' })} type="button">
+        {t('flow.addField')}
+      </BlockButton>
+    </div>
+  );
+}
diff --git a/web/src/pages/data-flow/form/begin-form/index.tsx b/web/src/pages/data-flow/form/begin-form/index.tsx
new file mode 100644
index 000000000..ad4eb9d3e
--- /dev/null
+++ b/web/src/pages/data-flow/form/begin-form/index.tsx
@@ -0,0 +1,205 @@
+import { Collapse } from '@/components/collapse';
+import { Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { RAGFlowSelect } from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+import { FormTooltip } from '@/components/ui/tooltip';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { t } from 'i18next';
+import { Plus } from 'lucide-react';
+import { memo, useEffect, useRef } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { AgentDialogueMode } from '../../constant';
+import { INextOperatorForm } from '../../interface';
+import { ParameterDialog } from './parameter-dialog';
+import { QueryTable } from './query-table';
+import { useEditQueryRecord } from './use-edit-query';
+import { useValues } from './use-values';
+import { useWatchFormChange } from './use-watch-change';
+
+const ModeOptions = [
+  { value: AgentDialogueMode.Conversational, label: t('flow.conversational') },
+  { value: AgentDialogueMode.Task, label: t('flow.task') },
+];
+
+function BeginForm({ node }: INextOperatorForm) {
+  const { t } = useTranslation();
+
+  const values = useValues(node);
+
+  const FormSchema = z.object({
+    enablePrologue: z.boolean().optional(),
+    prologue: z.string().trim().optional(),
+    mode: z.string(),
+    inputs: z
+      .array(
+        z.object({
+          key: z.string(),
+          type: z.string(),
+          value: z.string(),
+          optional: z.boolean(),
+          name: z.string(),
+          options: z.array(z.union([z.number(), z.string(), z.boolean()])),
+        }),
+      )
+      .optional(),
+  });
+
+  const form = useForm({
+    defaultValues: values,
+    resolver: zodResolver(FormSchema),
+  });
+
+  useWatchFormChange(node?.id, form);
+
+  const inputs = useWatch({ control: form.control, name: 'inputs' });
+  const mode = useWatch({ control: form.control, name: 'mode' });
+
+  const enablePrologue = useWatch({
+    control: form.control,
+    name: 'enablePrologue',
+  });
+
+  const previousModeRef = useRef(mode);
+
+  useEffect(() => {
+    if (
+      previousModeRef.current === AgentDialogueMode.Task &&
+      mode === AgentDialogueMode.Conversational
+    ) {
+      form.setValue('enablePrologue', true);
+    }
+    previousModeRef.current = mode;
+  }, [mode, form]);
+
+  const {
+    ok,
+    currentRecord,
+    visible,
+    hideModal,
+    showModal,
+    otherThanCurrentQuery,
+    handleDeleteRecord,
+  } = useEditQueryRecord({
+    form,
+    node,
+  });
+
+  return (
+    <section className="px-5 space-y-5">
+      <Form {...form}>
+        <FormField
+          control={form.control}
+          name={'mode'}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel tooltip={t('flow.modeTip')}>
+                {t('flow.mode')}
+              </FormLabel>
+              <FormControl>
+                <RAGFlowSelect
+                  placeholder={t('common.pleaseSelect')}
+                  options={ModeOptions}
+                  {...field}
+                ></RAGFlowSelect>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        {mode === AgentDialogueMode.Conversational && (
+          <FormField
+            control={form.control}
+            name={'enablePrologue'}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel tooltip={t('flow.openingSwitchTip')}>
+                  {t('flow.openingSwitch')}
+                </FormLabel>
+                <FormControl>
+                  <Switch
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        )}
+        {mode === AgentDialogueMode.Conversational && enablePrologue && (
+          <FormField
+            control={form.control}
+            name={'prologue'}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel tooltip={t('chat.setAnOpenerTip')}>
+                  {t('flow.openingCopy')}
+                </FormLabel>
+                <FormControl>
+                  <Textarea
+                    rows={5}
+                    {...field}
+                    placeholder={t('common.pleaseInput')}
+                  ></Textarea>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        )}
+        {/* Create a hidden field to make Form instance record this */}
+        <FormField
+          control={form.control}
+          name={'inputs'}
+          render={() => <div></div>}
+        />
+        <Collapse
+          title={
+            <div>
+              {t('flow.input')}
+              <FormTooltip tooltip={t('flow.beginInputTip')}></FormTooltip>
+            </div>
+          }
+          rightContent={
+            <Button
+              variant={'ghost'}
+              onClick={(e) => {
+                e.preventDefault();
+                showModal();
+              }}
+            >
+              <Plus />
+            </Button>
+          }
+        >
+          <QueryTable
+            data={inputs}
+            showModal={showModal}
+            deleteRecord={handleDeleteRecord}
+          ></QueryTable>
+        </Collapse>
+        {visible && (
+          <ParameterDialog
+            hideModal={hideModal}
+            initialValue={currentRecord}
+            otherThanCurrentQuery={otherThanCurrentQuery}
+            submit={ok}
+          ></ParameterDialog>
+        )}
+      </Form>
+    </section>
+  );
+}
+
+export default memo(BeginForm);
diff --git a/web/src/pages/data-flow/form/begin-form/parameter-dialog.tsx b/web/src/pages/data-flow/form/begin-form/parameter-dialog.tsx
new file mode 100644
index 000000000..3b9070437
--- /dev/null
+++ b/web/src/pages/data-flow/form/begin-form/parameter-dialog.tsx
@@ -0,0 +1,226 @@
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { RAGFlowSelect, RAGFlowSelectOptionType } from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { useTranslate } from '@/hooks/common-hooks';
+import { IModalProps } from '@/interfaces/common';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { isEmpty } from 'lodash';
+import { ChangeEvent, useEffect, useMemo } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { BeginQueryType, BeginQueryTypeIconMap } from '../../constant';
+import { BeginQuery } from '../../interface';
+import { BeginDynamicOptions } from './begin-dynamic-options';
+
+type ModalFormProps = {
+  initialValue: BeginQuery;
+  otherThanCurrentQuery: BeginQuery[];
+  submit(values: any): void;
+};
+
+const FormId = 'BeginParameterForm';
+
+function ParameterForm({
+  initialValue,
+  otherThanCurrentQuery,
+  submit,
+}: ModalFormProps) {
+  const { t } = useTranslate('flow');
+  const FormSchema = z.object({
+    type: z.string(),
+    key: z
+      .string()
+      .trim()
+      .min(1)
+      .refine(
+        (value) =>
+          !value || !otherThanCurrentQuery.some((x) => x.key === value),
+        { message: 'The key cannot be repeated!' },
+      ),
+    optional: z.boolean(),
+    name: z.string().trim().min(1),
+    options: z
+      .array(z.object({ value: z.string().or(z.boolean()).or(z.number()) }))
+      .optional(),
+  });
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    mode: 'onChange',
+    defaultValues: {
+      type: BeginQueryType.Line,
+      optional: false,
+      key: '',
+      name: '',
+      options: [],
+    },
+  });
+
+  const options = useMemo(() => {
+    return Object.values(BeginQueryType).reduce<RAGFlowSelectOptionType[]>(
+      (pre, cur) => {
+        const Icon = BeginQueryTypeIconMap[cur];
+
+        return [
+          ...pre,
+          {
+            label: (
+              <div className="flex items-center gap-2">
+                <Icon
+                  className={`size-${cur === BeginQueryType.Options ? 4 : 5}`}
+                ></Icon>
+                {t(cur.toLowerCase())}
+              </div>
+            ),
+            value: cur,
+          },
+        ];
+      },
+      [],
+    );
+  }, []);
+
+  const type = useWatch({
+    control: form.control,
+    name: 'type',
+  });
+
+  useEffect(() => {
+    if (!isEmpty(initialValue)) {
+      form.reset({
+        ...initialValue,
+        options: initialValue.options?.map((x) => ({ value: x })),
+      });
+    }
+  }, [form, initialValue]);
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    const values = { ...data, options: data.options?.map((x) => x.value) };
+    console.log('🚀 ~ onSubmit ~ values:', values);
+
+    submit(values);
+  }
+
+  const handleKeyChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const name = form.getValues().name || '';
+    form.setValue('key', e.target.value.trim());
+    if (!name) {
+      form.setValue('name', e.target.value.trim());
+    }
+  };
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        id={FormId}
+        className="space-y-5"
+        autoComplete="off"
+      >
+        <FormField
+          name="type"
+          control={form.control}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('type')}</FormLabel>
+              <FormControl>
+                <RAGFlowSelect {...field} options={options} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          name="key"
+          control={form.control}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('key')}</FormLabel>
+              <FormControl>
+                <Input {...field} autoComplete="off" onBlur={handleKeyChange} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          name="name"
+          control={form.control}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('name')}</FormLabel>
+              <FormControl>
+                <Input {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          name="optional"
+          control={form.control}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('optional')}</FormLabel>
+              <FormControl>
+                <Switch
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        {type === BeginQueryType.Options && (
+          <BeginDynamicOptions></BeginDynamicOptions>
+        )}
+      </form>
+    </Form>
+  );
+}
+
+export function ParameterDialog({
+  initialValue,
+  hideModal,
+  otherThanCurrentQuery,
+  submit,
+}: ModalFormProps & IModalProps<BeginQuery>) {
+  const { t } = useTranslation();
+
+  return (
+    <Dialog open onOpenChange={hideModal}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('flow.variableSettings')}</DialogTitle>
+        </DialogHeader>
+        <ParameterForm
+          initialValue={initialValue}
+          otherThanCurrentQuery={otherThanCurrentQuery}
+          submit={submit}
+        ></ParameterForm>
+        <DialogFooter>
+          <Button type="submit" form={FormId}>
+            {t('modal.okText')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/web/src/pages/data-flow/form/begin-form/query-table.tsx b/web/src/pages/data-flow/form/begin-form/query-table.tsx
new file mode 100644
index 000000000..5701c49b1
--- /dev/null
+++ b/web/src/pages/data-flow/form/begin-form/query-table.tsx
@@ -0,0 +1,199 @@
+'use client';
+
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import { Pencil, Trash2 } from 'lucide-react';
+import * as React from 'react';
+
+import { TableEmpty } from '@/components/table-skeleton';
+import { Button } from '@/components/ui/button';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+import { useTranslation } from 'react-i18next';
+import { BeginQuery } from '../../interface';
+
+interface IProps {
+  data: BeginQuery[];
+  deleteRecord(index: number): void;
+  showModal(index: number, record: BeginQuery): void;
+}
+
+export function QueryTable({ data = [], deleteRecord, showModal }: IProps) {
+  const { t } = useTranslation();
+
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    [],
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+
+  const columns: ColumnDef<BeginQuery>[] = [
+    {
+      accessorKey: 'key',
+      header: t('flow.key'),
+      meta: { cellClassName: 'max-w-30' },
+      cell: ({ row }) => {
+        const key: string = row.getValue('key');
+        return (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="truncate ">{key}</div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{key}</p>
+            </TooltipContent>
+          </Tooltip>
+        );
+      },
+    },
+    {
+      accessorKey: 'name',
+      header: t('flow.name'),
+      meta: { cellClassName: 'max-w-30' },
+      cell: ({ row }) => {
+        const name: string = row.getValue('name');
+        return (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="truncate">{name}</div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{name}</p>
+            </TooltipContent>
+          </Tooltip>
+        );
+      },
+    },
+    {
+      accessorKey: 'type',
+      header: t('flow.type'),
+      cell: ({ row }) => (
+        <div>
+          {t(`flow.${(row.getValue('type')?.toString() || '').toLowerCase()}`)}
+        </div>
+      ),
+    },
+    {
+      accessorKey: 'optional',
+      header: t('flow.optional'),
+      cell: ({ row }) => <div>{row.getValue('optional') ? 'Yes' : 'No'}</div>,
+    },
+    {
+      id: 'actions',
+      enableHiding: false,
+      header: t('common.action'),
+      cell: ({ row }) => {
+        const record = row.original;
+        const idx = row.index;
+
+        return (
+          <div>
+            <Button
+              className="bg-transparent text-foreground  hover:bg-muted-foreground hover:text-foreground"
+              onClick={() => showModal(idx, record)}
+            >
+              <Pencil />
+            </Button>
+            <Button
+              className="bg-transparent text-foreground  hover:bg-muted-foreground hover:text-foreground"
+              onClick={() => deleteRecord(idx)}
+            >
+              <Trash2 />
+            </Button>
+          </div>
+        );
+      },
+    },
+  ];
+
+  const table = useReactTable({
+    data,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+    },
+  });
+
+  return (
+    <div className="w-full">
+      <div className="rounded-md border">
+        <Table rootClassName="rounded-md">
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext(),
+                          )}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && 'selected'}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell
+                      key={cell.id}
+                      className={cn(cell.column.columnDef.meta?.cellClassName)}
+                    >
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableEmpty columnsLength={columns.length}></TableEmpty>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/pages/data-flow/form/begin-form/use-edit-query.ts b/web/src/pages/data-flow/form/begin-form/use-edit-query.ts
new file mode 100644
index 000000000..6942ba88b
--- /dev/null
+++ b/web/src/pages/data-flow/form/begin-form/use-edit-query.ts
@@ -0,0 +1,67 @@
+import { useSetModalState } from '@/hooks/common-hooks';
+import { useSetSelectedRecord } from '@/hooks/logic-hooks';
+import { useCallback, useMemo, useState } from 'react';
+import { UseFormReturn, useWatch } from 'react-hook-form';
+import { BeginQuery, INextOperatorForm } from '../../interface';
+
+export const useEditQueryRecord = ({
+  form,
+}: INextOperatorForm & { form: UseFormReturn }) => {
+  const { setRecord, currentRecord } = useSetSelectedRecord<BeginQuery>();
+  const { visible, hideModal, showModal } = useSetModalState();
+  const [index, setIndex] = useState(-1);
+  const inputs: BeginQuery[] = useWatch({
+    control: form.control,
+    name: 'inputs',
+  });
+
+  const otherThanCurrentQuery = useMemo(() => {
+    return inputs.filter((item, idx) => idx !== index);
+  }, [index, inputs]);
+
+  const handleEditRecord = useCallback(
+    (record: BeginQuery) => {
+      const inputs: BeginQuery[] = form?.getValues('inputs') || [];
+
+      const nextQuery: BeginQuery[] =
+        index > -1 ? inputs.toSpliced(index, 1, record) : [...inputs, record];
+
+      form.setValue('inputs', nextQuery);
+
+      hideModal();
+    },
+    [form, hideModal, index],
+  );
+
+  const handleShowModal = useCallback(
+    (idx?: number, record?: BeginQuery) => {
+      setIndex(idx ?? -1);
+      setRecord(record ?? ({} as BeginQuery));
+      showModal();
+    },
+    [setRecord, showModal],
+  );
+
+  const handleDeleteRecord = useCallback(
+    (idx: number) => {
+      const inputs = form?.getValues('inputs') || [];
+      const nextInputs = inputs.filter(
+        (item: BeginQuery, index: number) => index !== idx,
+      );
+
+      form.setValue('inputs', nextInputs);
+    },
+    [form],
+  );
+
+  return {
+    ok: handleEditRecord,
+    currentRecord,
+    setRecord,
+    visible,
+    hideModal,
+    showModal: handleShowModal,
+    otherThanCurrentQuery,
+    handleDeleteRecord,
+  };
+};
diff --git a/web/src/pages/data-flow/form/begin-form/use-values.ts b/web/src/pages/data-flow/form/begin-form/use-values.ts
new file mode 100644
index 000000000..10326bae8
--- /dev/null
+++ b/web/src/pages/data-flow/form/begin-form/use-values.ts
@@ -0,0 +1,34 @@
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { isEmpty } from 'lodash';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AgentDialogueMode } from '../../constant';
+import { buildBeginInputListFromObject } from './utils';
+
+export function useValues(node?: RAGFlowNodeType) {
+  const { t } = useTranslation();
+
+  const defaultValues = useMemo(
+    () => ({
+      enablePrologue: true,
+      prologue: t('chat.setAnOpenerInitial'),
+      mode: AgentDialogueMode.Conversational,
+      inputs: [],
+    }),
+    [t],
+  );
+
+  const values = useMemo(() => {
+    const formData = node?.data?.form;
+
+    if (isEmpty(formData)) {
+      return defaultValues;
+    }
+
+    const inputs = buildBeginInputListFromObject(formData?.inputs);
+
+    return { ...(formData || {}), inputs };
+  }, [defaultValues, node?.data?.form]);
+
+  return values;
+}
diff --git a/web/src/pages/data-flow/form/begin-form/use-watch-change.ts b/web/src/pages/data-flow/form/begin-form/use-watch-change.ts
new file mode 100644
index 000000000..f0da58068
--- /dev/null
+++ b/web/src/pages/data-flow/form/begin-form/use-watch-change.ts
@@ -0,0 +1,31 @@
+import { omit } from 'lodash';
+import { useEffect } from 'react';
+import { UseFormReturn, useWatch } from 'react-hook-form';
+import { BeginQuery } from '../../interface';
+import useGraphStore from '../../store';
+
+export function transferInputsArrayToObject(inputs: BeginQuery[] = []) {
+  return inputs.reduce<Record<string, Omit<BeginQuery, 'key'>>>((pre, cur) => {
+    pre[cur.key] = omit(cur, 'key');
+
+    return pre;
+  }, {});
+}
+
+export function useWatchFormChange(id?: string, form?: UseFormReturn) {
+  let values = useWatch({ control: form?.control });
+  const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
+
+  useEffect(() => {
+    if (id) {
+      values = form?.getValues() || {};
+
+      const nextValues = {
+        ...values,
+        inputs: transferInputsArrayToObject(values.inputs),
+      };
+
+      updateNodeForm(id, nextValues);
+    }
+  }, [form?.formState.isDirty, id, updateNodeForm, values]);
+}
diff --git a/web/src/pages/data-flow/form/begin-form/utils.ts b/web/src/pages/data-flow/form/begin-form/utils.ts
new file mode 100644
index 000000000..36038c4f6
--- /dev/null
+++ b/web/src/pages/data-flow/form/begin-form/utils.ts
@@ -0,0 +1,14 @@
+import { BeginQuery } from '../../interface';
+
+export function buildBeginInputListFromObject(
+  inputs: Record<string, Omit<BeginQuery, 'key'>>,
+) {
+  return Object.entries(inputs || {}).reduce<BeginQuery[]>(
+    (pre, [key, value]) => {
+      pre.push({ ...(value || {}), key });
+
+      return pre;
+    },
+    [],
+  );
+}
diff --git a/web/src/pages/data-flow/form/bing-form/index.tsx b/web/src/pages/data-flow/form/bing-form/index.tsx
new file mode 100644
index 000000000..fae75aa12
--- /dev/null
+++ b/web/src/pages/data-flow/form/bing-form/index.tsx
@@ -0,0 +1,131 @@
+import { SelectWithSearch } from '@/components/originui/select-with-search';
+import { TopNFormField } from '@/components/top-n-item';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { useTranslate } from '@/hooks/common-hooks';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { memo, useMemo } from 'react';
+import { useForm, useFormContext } from 'react-hook-form';
+import { z } from 'zod';
+import { initialBingValues } from '../../constant';
+import { useFormValues } from '../../hooks/use-form-values';
+import { useWatchFormChange } from '../../hooks/use-watch-form-change';
+import { INextOperatorForm } from '../../interface';
+import { BingCountryOptions, BingLanguageOptions } from '../../options';
+import { FormWrapper } from '../components/form-wrapper';
+import { QueryVariable } from '../components/query-variable';
+
+export const BingFormSchema = {
+  channel: z.string(),
+  api_key: z.string(),
+  country: z.string(),
+  language: z.string(),
+  top_n: z.number(),
+};
+
+export const FormSchema = z.object({
+  query: z.string().optional(),
+  ...BingFormSchema,
+});
+
+export function BingFormWidgets() {
+  const form = useFormContext();
+  const { t } = useTranslate('flow');
+
+  const options = useMemo(() => {
+    return ['Webpages', 'News'].map((x) => ({ label: x, value: x }));
+  }, []);
+
+  return (
+    <>
+      <TopNFormField></TopNFormField>
+      <FormField
+        control={form.control}
+        name="channel"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('channel')}</FormLabel>
+            <FormControl>
+              <SelectWithSearch {...field} options={options}></SelectWithSearch>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      <FormField
+        control={form.control}
+        name="api_key"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('apiKey')}</FormLabel>
+            <FormControl>
+              <Input {...field}></Input>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      <FormField
+        control={form.control}
+        name="country"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('country')}</FormLabel>
+            <FormControl>
+              <SelectWithSearch
+                {...field}
+                options={BingCountryOptions}
+              ></SelectWithSearch>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      <FormField
+        control={form.control}
+        name="language"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('language')}</FormLabel>
+            <FormControl>
+              <SelectWithSearch
+                {...field}
+                options={BingLanguageOptions}
+              ></SelectWithSearch>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </>
+  );
+}
+
+function BingForm({ node }: INextOperatorForm) {
+  const defaultValues = useFormValues(initialBingValues, node);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues,
+  });
+
+  useWatchFormChange(node?.id, form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <QueryVariable></QueryVariable>
+        <BingFormWidgets></BingFormWidgets>
+      </FormWrapper>
+    </Form>
+  );
+}
+
+export default memo(BingForm);
diff --git a/web/src/pages/data-flow/form/categorize-form/dynamic-categorize.tsx b/web/src/pages/data-flow/form/categorize-form/dynamic-categorize.tsx
new file mode 100644
index 000000000..0807f7bfa
--- /dev/null
+++ b/web/src/pages/data-flow/form/categorize-form/dynamic-categorize.tsx
@@ -0,0 +1,249 @@
+import { Button } from '@/components/ui/button';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { BlurTextarea } from '@/components/ui/textarea';
+import { useTranslate } from '@/hooks/common-hooks';
+import { PlusOutlined } from '@ant-design/icons';
+import { useUpdateNodeInternals } from '@xyflow/react';
+import humanId from 'human-id';
+import trim from 'lodash/trim';
+import { ChevronsUpDown, X } from 'lucide-react';
+import {
+  ChangeEventHandler,
+  FocusEventHandler,
+  memo,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
+import { UseFormReturn, useFieldArray, useFormContext } from 'react-hook-form';
+import { v4 as uuid } from 'uuid';
+import { z } from 'zod';
+import useGraphStore from '../../store';
+import DynamicExample from './dynamic-example';
+import { useCreateCategorizeFormSchema } from './use-form-schema';
+
+interface IProps {
+  nodeId?: string;
+}
+
+interface INameInputProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  otherNames?: string[];
+  validate(error?: string): void;
+}
+
+const getOtherFieldValues = (
+  form: UseFormReturn,
+  formListName: string = 'items',
+  index: number,
+  latestField: string,
+) =>
+  (form.getValues(formListName) ?? [])
+    .map((x: any) => x[latestField])
+    .filter(
+      (x: string) =>
+        x !== form.getValues(`${formListName}.${index}.${latestField}`),
+    );
+
+const InnerNameInput = ({
+  value,
+  onChange,
+  otherNames,
+  validate,
+}: INameInputProps) => {
+  const [name, setName] = useState<string | undefined>();
+  const { t } = useTranslate('flow');
+
+  const handleNameChange: ChangeEventHandler<HTMLInputElement> = useCallback(
+    (e) => {
+      const val = e.target.value;
+      setName(val);
+      const trimmedVal = trim(val);
+      // trigger validation
+      if (otherNames?.some((x) => x === trimmedVal)) {
+        validate(t('nameRepeatedMsg'));
+      } else if (trimmedVal === '') {
+        validate(t('nameRequiredMsg'));
+      } else {
+        validate('');
+      }
+    },
+    [otherNames, validate, t],
+  );
+
+  const handleNameBlur: FocusEventHandler<HTMLInputElement> = useCallback(
+    (e) => {
+      const val = e.target.value;
+      if (otherNames?.every((x) => x !== val) && trim(val) !== '') {
+        onChange?.(val);
+      }
+    },
+    [onChange, otherNames],
+  );
+
+  useEffect(() => {
+    setName(value);
+  }, [value]);
+
+  return (
+    <Input
+      value={name}
+      onChange={handleNameChange}
+      onBlur={handleNameBlur}
+    ></Input>
+  );
+};
+
+const NameInput = memo(InnerNameInput);
+
+const InnerFormSet = ({ index }: IProps & { index: number }) => {
+  const form = useFormContext();
+  const { t } = useTranslate('flow');
+
+  const buildFieldName = useCallback(
+    (name: string) => {
+      return `items.${index}.${name}`;
+    },
+    [index],
+  );
+
+  return (
+    <section className="space-y-4">
+      <FormField
+        control={form.control}
+        name={buildFieldName('name')}
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('categoryName')}</FormLabel>
+            <FormControl>
+              <NameInput
+                {...field}
+                otherNames={getOtherFieldValues(form, 'items', index, 'name')}
+                validate={(error?: string) => {
+                  const fieldName = buildFieldName('name');
+                  if (error) {
+                    form.setError(fieldName, { message: error });
+                  } else {
+                    form.clearErrors(fieldName);
+                  }
+                }}
+              ></NameInput>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      <FormField
+        control={form.control}
+        name={buildFieldName('description')}
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('description')}</FormLabel>
+            <FormControl>
+              <BlurTextarea {...field} rows={3} />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      {/* Create a hidden field to make Form instance record this */}
+      <FormField
+        control={form.control}
+        name={'uuid'}
+        render={() => <div></div>}
+      />
+      <DynamicExample name={buildFieldName('examples')}></DynamicExample>
+    </section>
+  );
+};
+
+const FormSet = memo(InnerFormSet);
+
+const DynamicCategorize = ({ nodeId }: IProps) => {
+  const updateNodeInternals = useUpdateNodeInternals();
+  const FormSchema = useCreateCategorizeFormSchema();
+
+  const deleteCategorizeCaseEdges = useGraphStore(
+    (state) => state.deleteEdgesBySourceAndSourceHandle,
+  );
+  const form = useFormContext<z.infer<typeof FormSchema>>();
+  const { t } = useTranslate('flow');
+  const { fields, remove, append } = useFieldArray({
+    name: 'items',
+    control: form.control,
+  });
+
+  const handleAdd = useCallback(() => {
+    append({
+      name: humanId(),
+      description: '',
+      uuid: uuid(),
+      examples: [{ value: '' }],
+    });
+    if (nodeId) updateNodeInternals(nodeId);
+  }, [append, nodeId, updateNodeInternals]);
+
+  const handleRemove = useCallback(
+    (index: number) => () => {
+      remove(index);
+      if (nodeId) {
+        const uuid = fields[index].uuid;
+        deleteCategorizeCaseEdges(nodeId, uuid);
+      }
+    },
+    [deleteCategorizeCaseEdges, fields, nodeId, remove],
+  );
+
+  return (
+    <div className="flex flex-col gap-4 ">
+      {fields.map((field, index) => (
+        <Collapsible key={field.id} defaultOpen>
+          <div className="flex items-center justify-between space-x-4">
+            <h4 className="font-bold">
+              {form.getValues(`items.${index}.name`)}
+            </h4>
+            <CollapsibleTrigger asChild>
+              <div className="flex gap-4">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="w-9 p-0"
+                  onClick={handleRemove(index)}
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+                <Button variant="ghost" size="sm" className="w-9 p-0">
+                  <ChevronsUpDown className="h-4 w-4" />
+                  <span className="sr-only">Toggle</span>
+                </Button>
+              </div>
+            </CollapsibleTrigger>
+          </div>
+          <CollapsibleContent>
+            <FormSet nodeId={nodeId} index={index}></FormSet>
+          </CollapsibleContent>
+        </Collapsible>
+      ))}
+
+      <Button type={'button'} onClick={handleAdd}>
+        <PlusOutlined />
+        {t('addCategory')}
+      </Button>
+    </div>
+  );
+};
+
+export default memo(DynamicCategorize);
diff --git a/web/src/pages/data-flow/form/categorize-form/dynamic-example.tsx b/web/src/pages/data-flow/form/categorize-form/dynamic-example.tsx
new file mode 100644
index 000000000..35d95cbc6
--- /dev/null
+++ b/web/src/pages/data-flow/form/categorize-form/dynamic-example.tsx
@@ -0,0 +1,68 @@
+import { Button } from '@/components/ui/button';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Textarea } from '@/components/ui/textarea';
+import { Plus, X } from 'lucide-react';
+import { memo } from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+type DynamicExampleProps = { name: string };
+
+const DynamicExample = ({ name }: DynamicExampleProps) => {
+  const { t } = useTranslation();
+  const form = useFormContext();
+
+  const { fields, append, remove } = useFieldArray({
+    name: name,
+    control: form.control,
+  });
+
+  return (
+    <FormItem>
+      <FormLabel tooltip={t('flow.msgTip')}>{t('flow.examples')}</FormLabel>
+      <div className="space-y-4">
+        {fields.map((field, index) => (
+          <div key={field.id} className="flex items-start gap-2">
+            <FormField
+              control={form.control}
+              name={`${name}.${index}.value`}
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormControl>
+                    <Textarea {...field}> </Textarea>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            {index === 0 ? (
+              <Button
+                type="button"
+                variant={'ghost'}
+                onClick={() => append({ value: '' })}
+              >
+                <Plus />
+              </Button>
+            ) : (
+              <Button
+                type="button"
+                variant={'ghost'}
+                onClick={() => remove(index)}
+              >
+                <X />
+              </Button>
+            )}
+          </div>
+        ))}
+      </div>
+      <FormMessage />
+    </FormItem>
+  );
+};
+
+export default memo(DynamicExample);
diff --git a/web/src/pages/data-flow/form/categorize-form/index.tsx b/web/src/pages/data-flow/form/categorize-form/index.tsx
new file mode 100644
index 000000000..c36ff4529
--- /dev/null
+++ b/web/src/pages/data-flow/form/categorize-form/index.tsx
@@ -0,0 +1,48 @@
+import { FormContainer } from '@/components/form-container';
+import { LargeModelFormField } from '@/components/large-model-form-field';
+import { MessageHistoryWindowSizeFormField } from '@/components/message-history-window-size-item';
+import { Form } from '@/components/ui/form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { memo } from 'react';
+import { useForm } from 'react-hook-form';
+import { initialCategorizeValues } from '../../constant';
+import { INextOperatorForm } from '../../interface';
+import { buildOutputList } from '../../utils/build-output-list';
+import { FormWrapper } from '../components/form-wrapper';
+import { Output } from '../components/output';
+import { QueryVariable } from '../components/query-variable';
+import DynamicCategorize from './dynamic-categorize';
+import { useCreateCategorizeFormSchema } from './use-form-schema';
+import { useValues } from './use-values';
+import { useWatchFormChange } from './use-watch-change';
+
+const outputList = buildOutputList(initialCategorizeValues.outputs);
+
+function CategorizeForm({ node }: INextOperatorForm) {
+  const values = useValues(node);
+
+  const FormSchema = useCreateCategorizeFormSchema();
+
+  const form = useForm({
+    defaultValues: values,
+    resolver: zodResolver(FormSchema),
+  });
+
+  useWatchFormChange(node?.id, form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <FormContainer>
+          <QueryVariable></QueryVariable>
+          <LargeModelFormField></LargeModelFormField>
+        </FormContainer>
+        <MessageHistoryWindowSizeFormField></MessageHistoryWindowSizeFormField>
+        <DynamicCategorize nodeId={node?.id}></DynamicCategorize>
+        <Output list={outputList}></Output>
+      </FormWrapper>
+    </Form>
+  );
+}
+
+export default memo(CategorizeForm);
diff --git a/web/src/pages/data-flow/form/categorize-form/use-form-schema.ts b/web/src/pages/data-flow/form/categorize-form/use-form-schema.ts
new file mode 100644
index 000000000..9e56bb18b
--- /dev/null
+++ b/web/src/pages/data-flow/form/categorize-form/use-form-schema.ts
@@ -0,0 +1,32 @@
+import { LlmSettingSchema } from '@/components/llm-setting-items/next';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+
+export function useCreateCategorizeFormSchema() {
+  const { t } = useTranslation();
+
+  const FormSchema = z.object({
+    query: z.string().optional(),
+    parameter: z.string().optional(),
+    ...LlmSettingSchema,
+    message_history_window_size: z.coerce.number(),
+    items: z.array(
+      z
+        .object({
+          name: z.string().min(1, t('flow.nameMessage')).trim(),
+          description: z.string().optional(),
+          uuid: z.string(),
+          examples: z
+            .array(
+              z.object({
+                value: z.string(),
+              }),
+            )
+            .optional(),
+        })
+        .optional(),
+    ),
+  });
+
+  return FormSchema;
+}
diff --git a/web/src/pages/data-flow/form/categorize-form/use-values.ts b/web/src/pages/data-flow/form/categorize-form/use-values.ts
new file mode 100644
index 000000000..a920ec4cc
--- /dev/null
+++ b/web/src/pages/data-flow/form/categorize-form/use-values.ts
@@ -0,0 +1,34 @@
+import { ModelVariableType } from '@/constants/knowledge';
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { isEmpty, isPlainObject } from 'lodash';
+import { useMemo } from 'react';
+
+const defaultValues = {
+  parameter: ModelVariableType.Precise,
+  message_history_window_size: 1,
+  temperatureEnabled: true,
+  topPEnabled: true,
+  presencePenaltyEnabled: true,
+  frequencyPenaltyEnabled: true,
+  maxTokensEnabled: true,
+  items: [],
+};
+
+export function useValues(node?: RAGFlowNodeType) {
+  const values = useMemo(() => {
+    const formData = node?.data?.form;
+    if (isEmpty(formData)) {
+      return defaultValues;
+    }
+    if (isPlainObject(formData)) {
+      // const nextValues = {
+      //   ...omit(formData, 'category_description'),
+      //   items,
+      // };
+
+      return formData;
+    }
+  }, [node]);
+
+  return values;
+}
diff --git a/web/src/pages/data-flow/form/categorize-form/use-watch-change.ts b/web/src/pages/data-flow/form/categorize-form/use-watch-change.ts
new file mode 100644
index 000000000..a97b80a77
--- /dev/null
+++ b/web/src/pages/data-flow/form/categorize-form/use-watch-change.ts
@@ -0,0 +1,17 @@
+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(() => {
+    // Manually triggered form updates are synchronized to the canvas
+    if (id) {
+      values = form?.getValues();
+
+      updateNodeForm(id, { ...values, items: values.items?.slice() || [] });
+    }
+  }, [id, updateNodeForm, values]);
+}
diff --git a/web/src/pages/data-flow/form/code-form/index.tsx b/web/src/pages/data-flow/form/code-form/index.tsx
new file mode 100644
index 000000000..2883fdf46
--- /dev/null
+++ b/web/src/pages/data-flow/form/code-form/index.tsx
@@ -0,0 +1,168 @@
+import Editor, { loader } from '@monaco-editor/react';
+import { INextOperatorForm } from '../../interface';
+
+import { FormContainer } from '@/components/form-container';
+import { useIsDarkTheme } from '@/components/theme-provider';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { RAGFlowSelect } from '@/components/ui/select';
+import { ProgrammingLanguage } from '@/constants/agent';
+import { ICodeForm } from '@/interfaces/database/agent';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { memo } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { buildOutputList } from '../../utils/build-output-list';
+import { FormWrapper } from '../components/form-wrapper';
+import { Output } from '../components/output';
+import {
+  DynamicInputVariable,
+  TypeOptions,
+  VariableTitle,
+} from './next-variable';
+import { FormSchema, FormSchemaType } from './schema';
+import { useValues } from './use-values';
+import {
+  useHandleLanguageChange,
+  useWatchFormChange,
+} from './use-watch-change';
+
+loader.config({ paths: { vs: '/vs' } });
+
+const options = [
+  ProgrammingLanguage.Python,
+  ProgrammingLanguage.Javascript,
+].map((x) => ({ value: x, label: x }));
+
+const DynamicFieldName = 'outputs';
+
+function CodeForm({ node }: INextOperatorForm) {
+  const formData = node?.data.form as ICodeForm;
+  const { t } = useTranslation();
+  const values = useValues(node);
+  const isDarkTheme = useIsDarkTheme();
+
+  const form = useForm<FormSchemaType>({
+    defaultValues: values,
+    resolver: zodResolver(FormSchema),
+  });
+
+  useWatchFormChange(node?.id, form);
+
+  const handleLanguageChange = useHandleLanguageChange(node?.id, form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <DynamicInputVariable
+          node={node}
+          title={t('flow.input')}
+          isOutputs={false}
+        ></DynamicInputVariable>
+        <FormField
+          control={form.control}
+          name="script"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel className="flex items-center justify-between">
+                Code
+                <FormField
+                  control={form.control}
+                  name="lang"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <RAGFlowSelect
+                          {...field}
+                          onChange={(val) => {
+                            field.onChange(val);
+                            handleLanguageChange(val);
+                          }}
+                          options={options}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </FormLabel>
+              <FormControl>
+                <Editor
+                  height={300}
+                  theme={isDarkTheme ? 'vs-dark' : 'vs'}
+                  language={formData.lang}
+                  options={{
+                    minimap: { enabled: false },
+                    automaticLayout: true,
+                  }}
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {formData.lang === ProgrammingLanguage.Python ? (
+          <DynamicInputVariable
+            node={node}
+            title={'Return Values'}
+            name={DynamicFieldName}
+            isOutputs
+          ></DynamicInputVariable>
+        ) : (
+          <div>
+            <VariableTitle title={'Return Values'}></VariableTitle>
+            <FormContainer className="space-y-5">
+              <FormField
+                control={form.control}
+                name={`${DynamicFieldName}.name`}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Name</FormLabel>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        placeholder={t('common.pleaseInput')}
+                      ></Input>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name={`${DynamicFieldName}.type`}
+                render={({ field }) => (
+                  <FormItem className="flex-1">
+                    <FormLabel>Type</FormLabel>
+                    <FormControl>
+                      <RAGFlowSelect
+                        placeholder={t('common.pleaseSelect')}
+                        options={TypeOptions}
+                        {...field}
+                      ></RAGFlowSelect>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </FormContainer>
+          </div>
+        )}
+      </FormWrapper>
+      <div className="p-5">
+        <Output list={buildOutputList(formData.outputs)}></Output>
+      </div>
+    </Form>
+  );
+}
+
+export default memo(CodeForm);
diff --git a/web/src/pages/data-flow/form/code-form/next-variable.tsx b/web/src/pages/data-flow/form/code-form/next-variable.tsx
new file mode 100644
index 000000000..39a2dd4a4
--- /dev/null
+++ b/web/src/pages/data-flow/form/code-form/next-variable.tsx
@@ -0,0 +1,128 @@
+'use client';
+
+import { FormContainer } from '@/components/form-container';
+import { SelectWithSearch } from '@/components/originui/select-with-search';
+import { BlockButton, Button } from '@/components/ui/button';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@/components/ui/form';
+import { BlurInput } from '@/components/ui/input';
+import { RAGFlowSelect } from '@/components/ui/select';
+import { Separator } from '@/components/ui/separator';
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { X } from 'lucide-react';
+import { ReactNode } from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useBuildQueryVariableOptions } from '../../hooks/use-get-begin-query';
+
+interface IProps {
+  node?: RAGFlowNodeType;
+  name?: string;
+  isOutputs: boolean;
+}
+
+export const TypeOptions = [
+  'String',
+  'Number',
+  'Boolean',
+  'Array<String>',
+  'Array<Number>',
+  'Object',
+].map((x) => ({ label: x, value: x }));
+
+export function DynamicVariableForm({ name = 'arguments', isOutputs }: IProps) {
+  const { t } = useTranslation();
+  const form = useFormContext();
+
+  const { fields, remove, append } = useFieldArray({
+    name: name,
+    control: form.control,
+  });
+
+  const nextOptions = useBuildQueryVariableOptions();
+
+  return (
+    <div className="space-y-5">
+      {fields.map((field, index) => {
+        const typeField = `${name}.${index}.name`;
+        return (
+          <div key={field.id} className="flex w-full items-center gap-2">
+            <FormField
+              control={form.control}
+              name={typeField}
+              render={({ field }) => (
+                <FormItem className="flex-1 overflow-hidden">
+                  <FormControl>
+                    <BlurInput
+                      {...field}
+                      placeholder={t('common.pleaseInput')}
+                    ></BlurInput>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Separator className="w-3 text-text-secondary" />
+            <FormField
+              control={form.control}
+              name={`${name}.${index}.type`}
+              render={({ field }) => (
+                <FormItem className="flex-1 overflow-hidden">
+                  <FormControl>
+                    {isOutputs ? (
+                      <RAGFlowSelect
+                        placeholder={t('common.pleaseSelect')}
+                        options={TypeOptions}
+                        {...field}
+                      ></RAGFlowSelect>
+                    ) : (
+                      <SelectWithSearch
+                        options={nextOptions}
+                        {...field}
+                      ></SelectWithSearch>
+                    )}
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button variant={'ghost'} onClick={() => remove(index)}>
+              <X className="text-text-sub-title-invert " />
+            </Button>
+          </div>
+        );
+      })}
+      <BlockButton onClick={() => append({ name: '', type: undefined })}>
+        {t('flow.addVariable')}
+      </BlockButton>
+    </div>
+  );
+}
+
+export function VariableTitle({ title }: { title: ReactNode }) {
+  return <div className="font-medium text-text-primary pb-2">{title}</div>;
+}
+
+export function DynamicInputVariable({
+  node,
+  name,
+  title,
+  isOutputs = false,
+}: IProps & { title: ReactNode }) {
+  return (
+    <section>
+      <VariableTitle title={title}></VariableTitle>
+      <FormContainer>
+        <DynamicVariableForm
+          node={node}
+          name={name}
+          isOutputs={isOutputs}
+        ></DynamicVariableForm>
+      </FormContainer>
+    </section>
+  );
+}
diff --git a/web/src/pages/data-flow/form/code-form/schema.ts b/web/src/pages/data-flow/form/code-form/schema.ts
new file mode 100644
index 000000000..fe694444e
--- /dev/null
+++ b/web/src/pages/data-flow/form/code-form/schema.ts
@@ -0,0 +1,14 @@
+import { ProgrammingLanguage } from '@/constants/agent';
+import { z } from 'zod';
+
+export const FormSchema = z.object({
+  lang: z.enum([ProgrammingLanguage.Python, ProgrammingLanguage.Javascript]),
+  script: z.string(),
+  arguments: z.array(z.object({ name: z.string(), type: z.string() })),
+  outputs: z.union([
+    z.array(z.object({ name: z.string(), type: z.string() })).optional(),
+    z.object({ name: z.string(), type: z.string() }),
+  ]),
+});
+
+export type FormSchemaType = z.infer<typeof FormSchema>;
diff --git a/web/src/pages/data-flow/form/code-form/use-values.ts b/web/src/pages/data-flow/form/code-form/use-values.ts
new file mode 100644
index 000000000..ea6f2d67c
--- /dev/null
+++ b/web/src/pages/data-flow/form/code-form/use-values.ts
@@ -0,0 +1,47 @@
+import { ProgrammingLanguage } from '@/constants/agent';
+import { ICodeForm } from '@/interfaces/database/agent';
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { isEmpty } from 'lodash';
+import { useMemo } from 'react';
+import { initialCodeValues } from '../../constant';
+
+function convertToArray(args: Record<string, string>) {
+  return Object.entries(args).map(([key, value]) => ({
+    name: key,
+    type: value,
+  }));
+}
+
+type OutputsFormType = { name: string; type: string };
+
+function convertOutputsToArray({ lang, outputs = {} }: ICodeForm) {
+  if (lang === ProgrammingLanguage.Python) {
+    return Object.entries(outputs).map(([key, val]) => ({
+      name: key,
+      type: val.type,
+    }));
+  }
+  return Object.entries(outputs).reduce<OutputsFormType>((pre, [key, val]) => {
+    pre.name = key;
+    pre.type = val.type;
+    return pre;
+  }, {} as OutputsFormType);
+}
+
+export function useValues(node?: RAGFlowNodeType) {
+  const values = useMemo(() => {
+    const formData = node?.data?.form;
+
+    if (isEmpty(formData)) {
+      return initialCodeValues;
+    }
+
+    return {
+      ...formData,
+      arguments: convertToArray(formData.arguments),
+      outputs: convertOutputsToArray(formData),
+    };
+  }, [node?.data?.form]);
+
+  return values;
+}
diff --git a/web/src/pages/data-flow/form/code-form/use-watch-change.ts b/web/src/pages/data-flow/form/code-form/use-watch-change.ts
new file mode 100644
index 000000000..80e0c8b15
--- /dev/null
+++ b/web/src/pages/data-flow/form/code-form/use-watch-change.ts
@@ -0,0 +1,95 @@
+import { CodeTemplateStrMap, ProgrammingLanguage } from '@/constants/agent';
+import { ICodeForm } from '@/interfaces/database/agent';
+import { isEmpty } from 'lodash';
+import { useCallback, useEffect } from 'react';
+import { UseFormReturn, useWatch } from 'react-hook-form';
+import useGraphStore from '../../store';
+import { FormSchemaType } from './schema';
+
+function convertToObject(list: FormSchemaType['arguments'] = []) {
+  return list.reduce<Record<string, string>>((pre, cur) => {
+    pre[cur.name] = cur.type;
+
+    return pre;
+  }, {});
+}
+
+type ArrayOutputs = Extract<FormSchemaType['outputs'], Array<any>>;
+
+type ObjectOutputs = Exclude<FormSchemaType['outputs'], Array<any>>;
+
+function convertOutputsToObject({ lang, outputs }: FormSchemaType) {
+  if (lang === ProgrammingLanguage.Python) {
+    return (outputs as ArrayOutputs).reduce<ICodeForm['outputs']>(
+      (pre, cur) => {
+        pre[cur.name] = {
+          value: '',
+          type: cur.type,
+        };
+
+        return pre;
+      },
+      {},
+    );
+  }
+  const outputsObject = outputs as ObjectOutputs;
+  if (isEmpty(outputsObject)) {
+    return {};
+  }
+  return {
+    [outputsObject.name]: {
+      value: '',
+      type: outputsObject.type,
+    },
+  };
+}
+
+export function useWatchFormChange(
+  id?: string,
+  form?: UseFormReturn<FormSchemaType>,
+) {
+  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,
+        arguments: convertToObject(
+          values?.arguments as FormSchemaType['arguments'],
+        ),
+        outputs: convertOutputsToObject(values as FormSchemaType),
+      };
+
+      updateNodeForm(id, nextValues);
+    }
+  }, [form?.formState.isDirty, id, updateNodeForm, values]);
+}
+
+export function useHandleLanguageChange(
+  id?: string,
+  form?: UseFormReturn<FormSchemaType>,
+) {
+  const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
+
+  const handleLanguageChange = useCallback(
+    (lang: string) => {
+      if (id) {
+        const script = CodeTemplateStrMap[lang as ProgrammingLanguage];
+        form?.setValue('script', script);
+        form?.setValue(
+          'outputs',
+          (lang === ProgrammingLanguage.Python
+            ? []
+            : {}) as FormSchemaType['outputs'],
+        );
+        updateNodeForm(id, script, ['script']);
+      }
+    },
+    [form, id, updateNodeForm],
+  );
+
+  return handleLanguageChange;
+}
diff --git a/web/src/pages/data-flow/form/components/api-key-field.tsx b/web/src/pages/data-flow/form/components/api-key-field.tsx
new file mode 100644
index 000000000..f9debfc4f
--- /dev/null
+++ b/web/src/pages/data-flow/form/components/api-key-field.tsx
@@ -0,0 +1,32 @@
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { t } from 'i18next';
+import { useFormContext } from 'react-hook-form';
+
+interface IApiKeyFieldProps {
+  placeholder?: string;
+}
+export function ApiKeyField({ placeholder }: IApiKeyFieldProps) {
+  const form = useFormContext();
+  return (
+    <FormField
+      control={form.control}
+      name="api_key"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{t('flow.apiKey')}</FormLabel>
+          <FormControl>
+            <Input type="password" {...field} placeholder={placeholder}></Input>
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
diff --git a/web/src/pages/data-flow/form/components/description-field.tsx b/web/src/pages/data-flow/form/components/description-field.tsx
new file mode 100644
index 000000000..8fa2eef64
--- /dev/null
+++ b/web/src/pages/data-flow/form/components/description-field.tsx
@@ -0,0 +1,27 @@
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from '@/components/ui/form';
+import { Textarea } from '@/components/ui/textarea';
+import { t } from 'i18next';
+import { useFormContext } from 'react-hook-form';
+
+export function DescriptionField() {
+  const form = useFormContext();
+  return (
+    <FormField
+      control={form.control}
+      name={`description`}
+      render={({ field }) => (
+        <FormItem className="flex-1">
+          <FormLabel>{t('flow.description')}</FormLabel>
+          <FormControl>
+            <Textarea {...field}></Textarea>
+          </FormControl>
+        </FormItem>
+      )}
+    />
+  );
+}
diff --git a/web/src/pages/data-flow/form/components/dynamic-input-variable.tsx b/web/src/pages/data-flow/form/components/dynamic-input-variable.tsx
new file mode 100644
index 000000000..a5781fd16
--- /dev/null
+++ b/web/src/pages/data-flow/form/components/dynamic-input-variable.tsx
@@ -0,0 +1,127 @@
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import { Button, Collapse, Flex, Form, Input, Select } from 'antd';
+import { PropsWithChildren, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useBuildVariableOptions } from '../../hooks/use-get-begin-query';
+
+import styles from './index.less';
+
+interface IProps {
+  node?: RAGFlowNodeType;
+}
+
+enum VariableType {
+  Reference = 'reference',
+  Input = 'input',
+}
+
+const getVariableName = (type: string) =>
+  type === VariableType.Reference ? 'component_id' : 'value';
+
+const DynamicVariableForm = ({ node }: IProps) => {
+  const { t } = useTranslation();
+  const valueOptions = useBuildVariableOptions(node?.id, node?.parentId);
+  const form = Form.useFormInstance();
+
+  const options = [
+    { value: VariableType.Reference, label: t('flow.reference') },
+    { value: VariableType.Input, label: t('flow.text') },
+  ];
+
+  const handleTypeChange = useCallback(
+    (name: number) => () => {
+      setTimeout(() => {
+        form.setFieldValue(['query', name, 'component_id'], undefined);
+        form.setFieldValue(['query', name, 'value'], undefined);
+      }, 0);
+    },
+    [form],
+  );
+
+  return (
+    <Form.List name="query">
+      {(fields, { add, remove }) => (
+        <>
+          {fields.map(({ key, name, ...restField }) => (
+            <Flex key={key} gap={10} align={'baseline'}>
+              <Form.Item
+                {...restField}
+                name={[name, 'type']}
+                className={styles.variableType}
+              >
+                <Select
+                  options={options}
+                  onChange={handleTypeChange(name)}
+                ></Select>
+              </Form.Item>
+              <Form.Item noStyle dependencies={[name, 'type']}>
+                {({ getFieldValue }) => {
+                  const type = getFieldValue(['query', name, 'type']);
+                  return (
+                    <Form.Item
+                      {...restField}
+                      name={[name, getVariableName(type)]}
+                      className={styles.variableValue}
+                    >
+                      {type === VariableType.Reference ? (
+                        <Select
+                          placeholder={t('common.pleaseSelect')}
+                          options={valueOptions}
+                        ></Select>
+                      ) : (
+                        <Input placeholder={t('common.pleaseInput')} />
+                      )}
+                    </Form.Item>
+                  );
+                }}
+              </Form.Item>
+              <MinusCircleOutlined onClick={() => remove(name)} />
+            </Flex>
+          ))}
+          <Form.Item>
+            <Button
+              type="dashed"
+              onClick={() => add({ type: VariableType.Reference })}
+              block
+              icon={<PlusOutlined />}
+              className={styles.addButton}
+            >
+              {t('flow.addVariable')}
+            </Button>
+          </Form.Item>
+        </>
+      )}
+    </Form.List>
+  );
+};
+
+export function FormCollapse({
+  children,
+  title,
+}: PropsWithChildren<{ title: string }>) {
+  return (
+    <Collapse
+      className={styles.dynamicInputVariable}
+      defaultActiveKey={['1']}
+      items={[
+        {
+          key: '1',
+          label: <span className={styles.title}>{title}</span>,
+          children,
+        },
+      ]}
+    />
+  );
+}
+
+const DynamicInputVariable = ({ node }: IProps) => {
+  const { t } = useTranslation();
+  return (
+    <FormCollapse title={t('flow.input')}>
+      <DynamicVariableForm node={node}></DynamicVariableForm>
+    </FormCollapse>
+  );
+};
+
+export default DynamicInputVariable;
diff --git a/web/src/pages/data-flow/form/components/form-wrapper.tsx b/web/src/pages/data-flow/form/components/form-wrapper.tsx
new file mode 100644
index 000000000..d1985b18e
--- /dev/null
+++ b/web/src/pages/data-flow/form/components/form-wrapper.tsx
@@ -0,0 +1,16 @@
+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
new file mode 100644
index 000000000..344514d9e
--- /dev/null
+++ b/web/src/pages/data-flow/form/components/index.less
@@ -0,0 +1,22 @@
+.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/next-dynamic-input-variable.tsx b/web/src/pages/data-flow/form/components/next-dynamic-input-variable.tsx
new file mode 100644
index 000000000..8b4cbd8a9
--- /dev/null
+++ b/web/src/pages/data-flow/form/components/next-dynamic-input-variable.tsx
@@ -0,0 +1,135 @@
+'use client';
+
+import { SideDown } from '@/assets/icon/next-icon';
+import { Button } from '@/components/ui/button';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible';
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { RAGFlowSelect } from '@/components/ui/select';
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { Plus, Trash2 } from 'lucide-react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useBuildVariableOptions } from '../../hooks/use-get-begin-query';
+
+interface IProps {
+  node?: RAGFlowNodeType;
+}
+
+enum VariableType {
+  Reference = 'reference',
+  Input = 'input',
+}
+
+const getVariableName = (type: string) =>
+  type === VariableType.Reference ? 'component_id' : 'value';
+
+export function DynamicVariableForm({ node }: IProps) {
+  const { t } = useTranslation();
+  const form = useFormContext();
+  const { fields, remove, append } = useFieldArray({
+    name: 'query',
+    control: form.control,
+  });
+
+  const valueOptions = useBuildVariableOptions(node?.id, node?.parentId);
+
+  const options = [
+    { value: VariableType.Reference, label: t('flow.reference') },
+    { value: VariableType.Input, label: t('flow.text') },
+  ];
+
+  return (
+    <div>
+      {fields.map((field, index) => {
+        const typeField = `query.${index}.type`;
+        const typeValue = form.watch(typeField);
+        return (
+          <div key={field.id} className="flex items-center gap-1">
+            <FormField
+              control={form.control}
+              name={typeField}
+              render={({ field }) => (
+                <FormItem className="w-2/5">
+                  <FormDescription />
+                  <FormControl>
+                    <RAGFlowSelect
+                      {...field}
+                      placeholder={t('common.pleaseSelect')}
+                      options={options}
+                      onChange={(val) => {
+                        field.onChange(val);
+                        form.resetField(`query.${index}.value`);
+                        form.resetField(`query.${index}.component_id`);
+                      }}
+                    ></RAGFlowSelect>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name={`query.${index}.${getVariableName(typeValue)}`}
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormDescription />
+                  <FormControl>
+                    {typeValue === VariableType.Reference ? (
+                      <RAGFlowSelect
+                        placeholder={t('common.pleaseSelect')}
+                        {...field}
+                        options={valueOptions}
+                      ></RAGFlowSelect>
+                    ) : (
+                      <Input placeholder={t('common.pleaseInput')} {...field} />
+                    )}
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Trash2
+              className="cursor-pointer mx-3 size-4 text-colors-text-functional-danger"
+              onClick={() => remove(index)}
+            />
+          </div>
+        );
+      })}
+      <Button onClick={append} className="mt-4" variant={'outline'} size={'sm'}>
+        <Plus />
+        {t('flow.addVariable')}
+      </Button>
+    </div>
+  );
+}
+
+export function DynamicInputVariable({ node }: IProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Collapsible defaultOpen className="group/collapsible">
+      <CollapsibleTrigger className="flex justify-between w-full pb-2">
+        <span className="font-bold text-2xl text-colors-text-neutral-strong">
+          {t('flow.input')}
+        </span>
+        <Button variant={'icon'} size={'icon'}>
+          <SideDown />
+        </Button>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <DynamicVariableForm node={node}></DynamicVariableForm>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
diff --git a/web/src/pages/data-flow/form/components/output.tsx b/web/src/pages/data-flow/form/components/output.tsx
new file mode 100644
index 000000000..c481c7a38
--- /dev/null
+++ b/web/src/pages/data-flow/form/components/output.tsx
@@ -0,0 +1,35 @@
+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/components/prompt-editor/constant.ts b/web/src/pages/data-flow/form/components/prompt-editor/constant.ts
new file mode 100644
index 000000000..b6cf30ed9
--- /dev/null
+++ b/web/src/pages/data-flow/form/components/prompt-editor/constant.ts
@@ -0,0 +1 @@
+export const ProgrammaticTag = 'programmatic';
diff --git a/web/src/pages/data-flow/form/components/prompt-editor/index.css b/web/src/pages/data-flow/form/components/prompt-editor/index.css
new file mode 100644
index 000000000..8f3050647
--- /dev/null
+++ b/web/src/pages/data-flow/form/components/prompt-editor/index.css
@@ -0,0 +1,76 @@
+.typeahead-popover {
+  background: #fff;
+  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
+  border-radius: 8px;
+  position: fixed;
+  z-index: 1000;
+}
+
+.typeahead-popover ul {
+  list-style: none;
+  margin: 0;
+  max-height: 200px;
+  overflow-y: scroll;
+}
+
+.typeahead-popover ul::-webkit-scrollbar {
+  display: none;
+}
+
+.typeahead-popover ul {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.typeahead-popover ul li {
+  margin: 0;
+  min-width: 180px;
+  font-size: 14px;
+  outline: none;
+  cursor: pointer;
+  border-radius: 8px;
+}
+
+.typeahead-popover ul li.selected {
+  background: #eee;
+}
+
+.typeahead-popover li {
+  margin: 0 8px 0 8px;
+  color: #050505;
+  cursor: pointer;
+  line-height: 16px;
+  font-size: 15px;
+  display: flex;
+  align-content: center;
+  flex-direction: row;
+  flex-shrink: 0;
+  background-color: #fff;
+  border: 0;
+}
+
+.typeahead-popover li.active {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  background-size: contain;
+}
+
+.typeahead-popover li .text {
+  display: flex;
+  line-height: 20px;
+  flex-grow: 1;
+  min-width: 150px;
+}
+
+.typeahead-popover li .icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  user-select: none;
+  margin-right: 8px;
+  line-height: 16px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
diff --git a/web/src/pages/data-flow/form/components/prompt-editor/index.tsx b/web/src/pages/data-flow/form/components/prompt-editor/index.tsx
new file mode 100644
index 000000000..caf6914b4
--- /dev/null
+++ b/web/src/pages/data-flow/form/components/prompt-editor/index.tsx
@@ -0,0 +1,181 @@
+import { CodeHighlightNode, CodeNode } from '@lexical/code';
+import {
+  InitialConfigType,
+  LexicalComposer,
+} from '@lexical/react/LexicalComposer';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { HeadingNode, QuoteNode } from '@lexical/rich-text';
+import {
+  $getRoot,
+  $getSelection,
+  EditorState,
+  Klass,
+  LexicalNode,
+} from 'lexical';
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { Variable } from 'lucide-react';
+import { ReactNode, useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PasteHandlerPlugin } from './paste-handler-plugin';
+import theme from './theme';
+import { VariableNode } from './variable-node';
+import { VariableOnChangePlugin } from './variable-on-change-plugin';
+import VariablePickerMenuPlugin from './variable-picker-plugin';
+
+// Catch any errors that occur during Lexical updates and log them
+// or throw them as needed. If you don't throw them, Lexical will
+// try to recover gracefully without losing user data.
+function onError(error: Error) {
+  console.error(error);
+}
+
+const Nodes: Array<Klass<LexicalNode>> = [
+  HeadingNode,
+  QuoteNode,
+  CodeHighlightNode,
+  CodeNode,
+  VariableNode,
+];
+
+type PromptContentProps = { showToolbar?: boolean; multiLine?: boolean };
+
+type IProps = {
+  value?: string;
+  onChange?: (value?: string) => void;
+  placeholder?: ReactNode;
+} & PromptContentProps;
+
+function PromptContent({
+  showToolbar = true,
+  multiLine = true,
+}: PromptContentProps) {
+  const [editor] = useLexicalComposerContext();
+  const [isBlur, setIsBlur] = useState(false);
+  const { t } = useTranslation();
+
+  const insertTextAtCursor = useCallback(() => {
+    editor.update(() => {
+      const selection = $getSelection();
+
+      if (selection !== null) {
+        selection.insertText(' /');
+      }
+    });
+  }, [editor]);
+
+  const handleVariableIconClick = useCallback(() => {
+    insertTextAtCursor();
+  }, [insertTextAtCursor]);
+
+  const handleBlur = useCallback(() => {
+    setIsBlur(true);
+  }, []);
+
+  const handleFocus = useCallback(() => {
+    setIsBlur(false);
+  }, []);
+
+  return (
+    <section
+      className={cn('border rounded-sm ', { 'border-blue-400': !isBlur })}
+    >
+      {showToolbar && (
+        <div className="border-b px-2 py-2 justify-end flex">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="inline-block cursor-pointer cursor p-0.5 hover:bg-gray-100 dark:hover:bg-slate-800 rounded-sm">
+                <Variable size={16} onClick={handleVariableIconClick} />
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{t('flow.insertVariableTip')}</p>
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      )}
+      <ContentEditable
+        className={cn(
+          'relative px-2 py-1 focus-visible:outline-none max-h-[50vh] overflow-auto',
+          {
+            'min-h-40': multiLine,
+          },
+        )}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+      />
+    </section>
+  );
+}
+
+export function PromptEditor({
+  value,
+  onChange,
+  placeholder,
+  showToolbar,
+  multiLine = true,
+}: IProps) {
+  const { t } = useTranslation();
+  const initialConfig: InitialConfigType = {
+    namespace: 'PromptEditor',
+    theme,
+    onError,
+    nodes: Nodes,
+  };
+
+  const onValueChange = useCallback(
+    (editorState: EditorState) => {
+      editorState?.read(() => {
+        // const listNodes = $nodesOfType(VariableNode); // to be removed
+        // const allNodes = $dfs();
+
+        const text = $getRoot().getTextContent();
+
+        onChange?.(text);
+      });
+    },
+    [onChange],
+  );
+
+  return (
+    <div className="relative">
+      <LexicalComposer initialConfig={initialConfig}>
+        <RichTextPlugin
+          contentEditable={
+            <PromptContent
+              showToolbar={showToolbar}
+              multiLine={multiLine}
+            ></PromptContent>
+          }
+          placeholder={
+            <div
+              className={cn(
+                'absolute top-1 left-2 text-text-secondary pointer-events-none',
+                {
+                  'truncate w-[90%]': !multiLine,
+                  'translate-y-10': multiLine,
+                },
+              )}
+            >
+              {placeholder || t('common.promptPlaceholder')}
+            </div>
+          }
+          ErrorBoundary={LexicalErrorBoundary}
+        />
+        <VariablePickerMenuPlugin value={value}></VariablePickerMenuPlugin>
+        <PasteHandlerPlugin />
+        <VariableOnChangePlugin
+          onChange={onValueChange}
+        ></VariableOnChangePlugin>
+      </LexicalComposer>
+    </div>
+  );
+}
diff --git a/web/src/pages/data-flow/form/components/prompt-editor/paste-handler-plugin.tsx b/web/src/pages/data-flow/form/components/prompt-editor/paste-handler-plugin.tsx
new file mode 100644
index 000000000..a45a5e5fb
--- /dev/null
+++ b/web/src/pages/data-flow/form/components/prompt-editor/paste-handler-plugin.tsx
@@ -0,0 +1,83 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import {
+  $createParagraphNode,
+  $createTextNode,
+  $getSelection,
+  $isRangeSelection,
+  PASTE_COMMAND,
+} from 'lexical';
+import { useEffect } from 'react';
+
+function PasteHandlerPlugin() {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    const removeListener = editor.registerCommand(
+      PASTE_COMMAND,
+      (clipboardEvent: ClipboardEvent) => {
+        const clipboardData = clipboardEvent.clipboardData;
+        if (!clipboardData) {
+          return false;
+        }
+
+        const text = clipboardData.getData('text/plain');
+        if (!text) {
+          return false;
+        }
+
+        // Check if text contains line breaks
+        if (text.includes('\n')) {
+          editor.update(() => {
+            const selection = $getSelection();
+            if (selection && $isRangeSelection(selection)) {
+              // Normalize line breaks, merge multiple consecutive line breaks into a single line break
+              const normalizedText = text.replace(/\n{2,}/g, '\n');
+
+              // Clear current selection
+              selection.removeText();
+
+              // Create a paragraph node to contain all content
+              const paragraph = $createParagraphNode();
+
+              // Split text by line breaks
+              const lines = normalizedText.split('\n');
+
+              // Process each line
+              lines.forEach((lineText, index) => {
+                // Add line text (if any)
+                if (lineText) {
+                  const textNode = $createTextNode(lineText);
+                  paragraph.append(textNode);
+                }
+
+                // If not the last line, add a line break
+                if (index < lines.length - 1) {
+                  const lineBreak = $createTextNode('\n');
+                  paragraph.append(lineBreak);
+                }
+              });
+
+              // Insert paragraph
+              selection.insertNodes([paragraph]);
+            }
+          });
+
+          // Prevent default paste behavior
+          clipboardEvent.preventDefault();
+          return true;
+        }
+
+        // If no line breaks, use default behavior
+        return false;
+      },
+      4,
+    );
+
+    return () => {
+      removeListener();
+    };
+  }, [editor]);
+
+  return null;
+}
+
+export { PasteHandlerPlugin };
diff --git a/web/src/pages/data-flow/form/components/prompt-editor/theme.ts b/web/src/pages/data-flow/form/components/prompt-editor/theme.ts
new file mode 100644
index 000000000..1cc2bc155
--- /dev/null
+++ b/web/src/pages/data-flow/form/components/prompt-editor/theme.ts
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export default {
+  code: 'editor-code',
+  heading: {
+    h1: 'editor-heading-h1',
+    h2: 'editor-heading-h2',
+    h3: 'editor-heading-h3',
+    h4: 'editor-heading-h4',
+    h5: 'editor-heading-h5',
+  },
+  image: 'editor-image',
+  link: 'editor-link',
+  list: {
+    listitem: 'editor-listitem',
+    nested: {
+      listitem: 'editor-nested-listitem',
+    },
+    ol: 'editor-list-ol',
+    ul: 'editor-list-ul',
+  },
+  ltr: 'ltr',
+  paragraph: 'editor-paragraph',
+  placeholder: 'editor-placeholder',
+  quote: 'editor-quote',
+  rtl: 'rtl',
+  text: {
+    bold: 'editor-text-bold',
+    code: 'editor-text-code',
+    hashtag: 'editor-text-hashtag',
+    italic: 'editor-text-italic',
+    overflowed: 'editor-text-overflowed',
+    strikethrough: 'editor-text-strikethrough',
+    underline: 'editor-text-underline',
+    underlineStrikethrough: 'editor-text-underlineStrikethrough',
+  },
+};
diff --git a/web/src/pages/data-flow/form/components/prompt-editor/variable-node.tsx b/web/src/pages/data-flow/form/components/prompt-editor/variable-node.tsx
new file mode 100644
index 000000000..177c370c9
--- /dev/null
+++ b/web/src/pages/data-flow/form/components/prompt-editor/variable-node.tsx
@@ -0,0 +1,91 @@
+import { BeginId } from '@/pages/flow/constant';
+import { DecoratorNode, LexicalNode, NodeKey } from 'lexical';
+import { ReactNode } from 'react';
+const prefix = BeginId + '@';
+
+export class VariableNode extends DecoratorNode<ReactNode> {
+  __value: string;
+  __label: string;
+  key?: NodeKey;
+  __parentLabel?: string | ReactNode;
+  __icon?: ReactNode;
+
+  static getType(): string {
+    return 'variable';
+  }
+
+  static clone(node: VariableNode): VariableNode {
+    return new VariableNode(
+      node.__value,
+      node.__label,
+      node.__key,
+      node.__parentLabel,
+      node.__icon,
+    );
+  }
+
+  constructor(
+    value: string,
+    label: string,
+    key?: NodeKey,
+    parent?: string | ReactNode,
+    icon?: ReactNode,
+  ) {
+    super(key);
+    this.__value = value;
+    this.__label = label;
+    this.__parentLabel = parent;
+    this.__icon = icon;
+  }
+
+  createDOM(): HTMLElement {
+    const dom = document.createElement('span');
+    dom.className = 'mr-1';
+
+    return dom;
+  }
+
+  updateDOM(): false {
+    return false;
+  }
+
+  decorate(): ReactNode {
+    let content: ReactNode = (
+      <div className="text-blue-600">{this.__label}</div>
+    );
+    if (this.__parentLabel) {
+      content = (
+        <div className="flex items-center gap-1 text-text-primary ">
+          <div>{this.__icon}</div>
+          <div>{this.__parentLabel}</div>
+          <div className="text-text-disabled mr-1">/</div>
+          {content}
+        </div>
+      );
+    }
+    return (
+      <div className="bg-gray-200 dark:bg-gray-400 text-sm inline-flex items-center rounded-md px-2 py-1">
+        {content}
+      </div>
+    );
+  }
+
+  getTextContent(): string {
+    return `{${this.__value}}`;
+  }
+}
+
+export function $createVariableNode(
+  value: string,
+  label: string,
+  parentLabel: string | ReactNode,
+  icon?: ReactNode,
+): VariableNode {
+  return new VariableNode(value, label, undefined, parentLabel, icon);
+}
+
+export function $isVariableNode(
+  node: LexicalNode | null | undefined,
+): node is VariableNode {
+  return node instanceof VariableNode;
+}
diff --git a/web/src/pages/data-flow/form/components/prompt-editor/variable-on-change-plugin.tsx b/web/src/pages/data-flow/form/components/prompt-editor/variable-on-change-plugin.tsx
new file mode 100644
index 000000000..86fa66db4
--- /dev/null
+++ b/web/src/pages/data-flow/form/components/prompt-editor/variable-on-change-plugin.tsx
@@ -0,0 +1,35 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { EditorState, LexicalEditor } from 'lexical';
+import { useEffect } from 'react';
+import { ProgrammaticTag } from './constant';
+
+interface IProps {
+  onChange: (
+    editorState: EditorState,
+    editor?: LexicalEditor,
+    tags?: Set<string>,
+  ) => void;
+}
+
+export function VariableOnChangePlugin({ onChange }: IProps) {
+  // Access the editor through the LexicalComposerContext
+  const [editor] = useLexicalComposerContext();
+  // Wrap our listener in useEffect to handle the teardown and avoid stale references.
+  useEffect(() => {
+    // most listeners return a teardown function that can be called to clean them up.
+    return editor.registerUpdateListener(
+      ({ editorState, tags, dirtyElements }) => {
+        // Check if there is a "programmatic" tag
+        const isProgrammaticUpdate = tags.has(ProgrammaticTag);
+
+        // The onchange event is only triggered when the data is manually updated
+        // Otherwise, the content will be displayed incorrectly.
+        if (dirtyElements.size > 0 && !isProgrammaticUpdate) {
+          onChange(editorState);
+        }
+      },
+    );
+  }, [editor, onChange]);
+
+  return null;
+}
diff --git a/web/src/pages/data-flow/form/components/prompt-editor/variable-picker-plugin.tsx b/web/src/pages/data-flow/form/components/prompt-editor/variable-picker-plugin.tsx
new file mode 100644
index 000000000..f429981c7
--- /dev/null
+++ b/web/src/pages/data-flow/form/components/prompt-editor/variable-picker-plugin.tsx
@@ -0,0 +1,297 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import {
+  LexicalTypeaheadMenuPlugin,
+  MenuOption,
+  useBasicTypeaheadTriggerMatch,
+} from '@lexical/react/LexicalTypeaheadMenuPlugin';
+import {
+  $createParagraphNode,
+  $createTextNode,
+  $getRoot,
+  $getSelection,
+  $isRangeSelection,
+  TextNode,
+} from 'lexical';
+import React, {
+  ReactElement,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+} from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { $createVariableNode } from './variable-node';
+
+import { useBuildQueryVariableOptions } from '@/pages/agent/hooks/use-get-begin-query';
+import { ProgrammaticTag } from './constant';
+import './index.css';
+class VariableInnerOption extends MenuOption {
+  label: string;
+  value: string;
+  parentLabel: string | JSX.Element;
+  icon?: ReactNode;
+
+  constructor(
+    label: string,
+    value: string,
+    parentLabel: string | JSX.Element,
+    icon?: ReactNode,
+  ) {
+    super(value);
+    this.label = label;
+    this.value = value;
+    this.parentLabel = parentLabel;
+    this.icon = icon;
+  }
+}
+
+class VariableOption extends MenuOption {
+  label: ReactElement | string;
+  title: string;
+  options: VariableInnerOption[];
+
+  constructor(
+    label: ReactElement | string,
+    title: string,
+    options: VariableInnerOption[],
+  ) {
+    super(title);
+    this.label = label;
+    this.title = title;
+    this.options = options;
+  }
+}
+
+function VariablePickerMenuItem({
+  index,
+  option,
+  selectOptionAndCleanUp,
+}: {
+  index: number;
+  option: VariableOption;
+  selectOptionAndCleanUp: (
+    option: VariableOption | VariableInnerOption,
+  ) => void;
+}) {
+  return (
+    <li
+      key={option.key}
+      tabIndex={-1}
+      ref={option.setRefElement}
+      role="option"
+      id={'typeahead-item-' + index}
+    >
+      <div>
+        <span className="text text-slate-500">{option.title}</span>
+        <ul className="pl-2 py-1">
+          {option.options.map((x) => (
+            <li
+              key={x.value}
+              onClick={() => selectOptionAndCleanUp(x)}
+              className="hover:bg-slate-300 p-1"
+            >
+              {x.label}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </li>
+  );
+}
+
+export default function VariablePickerMenuPlugin({
+  value,
+}: {
+  value?: string;
+}): JSX.Element {
+  const [editor] = useLexicalComposerContext();
+  const isFirstRender = useRef(true);
+
+  const checkForTriggerMatch = useBasicTypeaheadTriggerMatch('/', {
+    minLength: 0,
+  });
+
+  const [queryString, setQueryString] = React.useState<string | null>('');
+
+  const options = useBuildQueryVariableOptions();
+
+  const buildNextOptions = useCallback(() => {
+    let filteredOptions = options;
+    if (queryString) {
+      const lowerQuery = queryString.toLowerCase();
+      filteredOptions = options
+        .map((x) => ({
+          ...x,
+          options: x.options.filter(
+            (y) =>
+              y.label.toLowerCase().includes(lowerQuery) ||
+              y.value.toLowerCase().includes(lowerQuery),
+          ),
+        }))
+        .filter((x) => x.options.length > 0);
+    }
+
+    const nextOptions: VariableOption[] = filteredOptions.map(
+      (x) =>
+        new VariableOption(
+          x.label,
+          x.title,
+          x.options.map((y) => {
+            return new VariableInnerOption(y.label, y.value, x.label, y.icon);
+          }),
+        ),
+    );
+    return nextOptions;
+  }, [options, queryString]);
+
+  const findItemByValue = useCallback(
+    (value: string) => {
+      const children = options.reduce<
+        Array<{
+          label: string;
+          value: string;
+          parentLabel?: string | ReactNode;
+          icon?: ReactNode;
+        }>
+      >((pre, cur) => {
+        return pre.concat(cur.options);
+      }, []);
+
+      return children.find((x) => x.value === value);
+    },
+    [options],
+  );
+
+  const onSelectOption = useCallback(
+    (
+      selectedOption: VariableOption | VariableInnerOption,
+      nodeToRemove: TextNode | null,
+      closeMenu: () => void,
+    ) => {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if (!$isRangeSelection(selection) || selectedOption === null) {
+          return;
+        }
+
+        if (nodeToRemove) {
+          nodeToRemove.remove();
+        }
+        const variableNode = $createVariableNode(
+          (selectedOption as VariableInnerOption).value,
+          selectedOption.label as string,
+          selectedOption.parentLabel as string | ReactNode,
+          selectedOption.icon as ReactNode,
+        );
+        selection.insertNodes([variableNode]);
+
+        closeMenu();
+      });
+    },
+    [editor],
+  );
+
+  const parseTextToVariableNodes = useCallback(
+    (text: string) => {
+      const paragraph = $createParagraphNode();
+
+      // Regular expression to match content within {}
+      const regex = /{([^}]*)}/g;
+      let match;
+      let lastIndex = 0;
+      while ((match = regex.exec(text)) !== null) {
+        const { 1: content, index, 0: template } = match;
+
+        // Add the previous text part (if any)
+        if (index > lastIndex) {
+          const textNode = $createTextNode(text.slice(lastIndex, index));
+
+          paragraph.append(textNode);
+        }
+
+        // Add variable node or text node
+        const nodeItem = findItemByValue(content);
+
+        if (nodeItem) {
+          paragraph.append(
+            $createVariableNode(
+              content,
+              nodeItem.label,
+              nodeItem.parentLabel,
+              nodeItem.icon,
+            ),
+          );
+        } else {
+          paragraph.append($createTextNode(template));
+        }
+
+        // Update index
+        lastIndex = regex.lastIndex;
+      }
+
+      // Add the last part of text (if any)
+      if (lastIndex < text.length) {
+        const textNode = $createTextNode(text.slice(lastIndex));
+        paragraph.append(textNode);
+      }
+
+      $getRoot().clear().append(paragraph);
+
+      if ($isRangeSelection($getSelection())) {
+        $getRoot().selectEnd();
+      }
+    },
+    [findItemByValue],
+  );
+
+  useEffect(() => {
+    if (editor && value && isFirstRender.current) {
+      isFirstRender.current = false;
+      editor.update(
+        () => {
+          parseTextToVariableNodes(value);
+        },
+        { tag: ProgrammaticTag },
+      );
+    }
+  }, [parseTextToVariableNodes, editor, value]);
+
+  return (
+    <LexicalTypeaheadMenuPlugin<VariableOption | VariableInnerOption>
+      onQueryChange={setQueryString}
+      onSelectOption={onSelectOption}
+      triggerFn={checkForTriggerMatch}
+      options={buildNextOptions()}
+      menuRenderFn={(anchorElementRef, { selectOptionAndCleanUp }) => {
+        const nextOptions = buildNextOptions();
+        return anchorElementRef.current && nextOptions.length
+          ? ReactDOM.createPortal(
+              <div className="typeahead-popover w-[200px] p-2">
+                <ul className="overflow-y-auto !scrollbar-thin overflow-x-hidden">
+                  {nextOptions.map((option, i: number) => (
+                    <VariablePickerMenuItem
+                      index={i}
+                      key={option.key}
+                      option={option}
+                      selectOptionAndCleanUp={selectOptionAndCleanUp}
+                    />
+                  ))}
+                </ul>
+              </div>,
+              anchorElementRef.current,
+            )
+          : null;
+      }}
+    />
+  );
+}
diff --git a/web/src/pages/data-flow/form/components/query-variable.tsx b/web/src/pages/data-flow/form/components/query-variable.tsx
new file mode 100644
index 000000000..dafcb4cde
--- /dev/null
+++ b/web/src/pages/data-flow/form/components/query-variable.tsx
@@ -0,0 +1,66 @@
+import { SelectWithSearch } from '@/components/originui/select-with-search';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { toLower } from 'lodash';
+import { ReactNode, useMemo } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { VariableType } from '../../constant';
+import { useBuildQueryVariableOptions } from '../../hooks/use-get-begin-query';
+
+type QueryVariableProps = {
+  name?: string;
+  type?: VariableType;
+  label?: ReactNode;
+};
+
+export function QueryVariable({
+  name = 'query',
+  type,
+  label,
+}: QueryVariableProps) {
+  const { t } = useTranslation();
+  const form = useFormContext();
+
+  const nextOptions = useBuildQueryVariableOptions();
+
+  const finalOptions = useMemo(() => {
+    return type
+      ? nextOptions.map((x) => {
+          return {
+            ...x,
+            options: x.options.filter((y) => toLower(y.type).includes(type)),
+          };
+        })
+      : nextOptions;
+  }, [nextOptions, type]);
+
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          {label || (
+            <FormLabel tooltip={t('flow.queryTip')}>
+              {t('flow.query')}
+            </FormLabel>
+          )}
+          <FormControl>
+            <SelectWithSearch
+              options={finalOptions}
+              {...field}
+              allowClear
+            ></SelectWithSearch>
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
diff --git a/web/src/pages/data-flow/form/crawler-form/index.tsx b/web/src/pages/data-flow/form/crawler-form/index.tsx
new file mode 100644
index 000000000..8c8da6b08
--- /dev/null
+++ b/web/src/pages/data-flow/form/crawler-form/index.tsx
@@ -0,0 +1,105 @@
+import { SelectWithSearch } from '@/components/originui/select-with-search';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { useTranslate } from '@/hooks/common-hooks';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { memo, useMemo } from 'react';
+import { useForm, useFormContext } from 'react-hook-form';
+import { z } from 'zod';
+import { initialCrawlerValues } from '../../constant';
+import { useWatchFormChange } from '../../hooks/use-watch-form-change';
+import { INextOperatorForm } from '../../interface';
+import { CrawlerResultOptions } from '../../options';
+import { QueryVariable } from '../components/query-variable';
+
+export function CrawlerProxyFormField() {
+  const { t } = useTranslate('flow');
+  const form = useFormContext();
+
+  return (
+    <FormField
+      control={form.control}
+      name="proxy"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{t('proxy')}</FormLabel>
+          <FormControl>
+            <Input placeholder="like: http://127.0.0.1:8888" {...field} />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+export function CrawlerExtractTypeFormField() {
+  const { t } = useTranslate('flow');
+  const form = useFormContext();
+  const crawlerResultOptions = useMemo(() => {
+    return CrawlerResultOptions.map((x) => ({
+      value: x,
+      label: t(`crawlerResultOptions.${x}`),
+    }));
+  }, [t]);
+
+  return (
+    <FormField
+      control={form.control}
+      name="extract_type"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{t('extractType')}</FormLabel>
+          <FormControl>
+            <SelectWithSearch {...field} options={crawlerResultOptions} />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+export const CrawlerFormSchema = {
+  proxy: z.string().url(),
+  extract_type: z.string(),
+};
+
+const FormSchema = z.object({
+  query: z.string().optional(),
+  ...CrawlerFormSchema,
+});
+
+function CrawlerForm({ node }: INextOperatorForm) {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: initialCrawlerValues,
+    mode: 'onChange',
+  });
+
+  useWatchFormChange(node?.id, form);
+
+  return (
+    <Form {...form}>
+      <form
+        className="space-y-6 p-4"
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <QueryVariable></QueryVariable>
+        <CrawlerProxyFormField></CrawlerProxyFormField>
+        <CrawlerExtractTypeFormField></CrawlerExtractTypeFormField>
+      </form>
+    </Form>
+  );
+}
+
+export default memo(CrawlerForm);
diff --git a/web/src/pages/data-flow/form/deepl-form/index.tsx b/web/src/pages/data-flow/form/deepl-form/index.tsx
new file mode 100644
index 000000000..55240b3c1
--- /dev/null
+++ b/web/src/pages/data-flow/form/deepl-form/index.tsx
@@ -0,0 +1,36 @@
+import TopNItem from '@/components/top-n-item';
+import { useTranslate } from '@/hooks/common-hooks';
+import { Form, Select } from 'antd';
+import { useBuildSortOptions } from '../../form-hooks';
+import { IOperatorForm } from '../../interface';
+import { DeepLSourceLangOptions, DeepLTargetLangOptions } from '../../options';
+import DynamicInputVariable from '../components/dynamic-input-variable';
+
+const DeepLForm = ({ onValuesChange, form, node }: IOperatorForm) => {
+  const { t } = useTranslate('flow');
+  const options = useBuildSortOptions();
+
+  return (
+    <Form
+      name="basic"
+      autoComplete="off"
+      form={form}
+      onValuesChange={onValuesChange}
+      layout={'vertical'}
+    >
+      <DynamicInputVariable node={node}></DynamicInputVariable>
+      <TopNItem initialValue={5}></TopNItem>
+      <Form.Item label={t('authKey')} name={'auth_key'}>
+        <Select options={options}></Select>
+      </Form.Item>
+      <Form.Item label={t('sourceLang')} name={'source_lang'}>
+        <Select options={DeepLSourceLangOptions}></Select>
+      </Form.Item>
+      <Form.Item label={t('targetLang')} name={'target_lang'}>
+        <Select options={DeepLTargetLangOptions}></Select>
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default DeepLForm;
diff --git a/web/src/pages/data-flow/form/duckduckgo-form/index.tsx b/web/src/pages/data-flow/form/duckduckgo-form/index.tsx
new file mode 100644
index 000000000..776635d3c
--- /dev/null
+++ b/web/src/pages/data-flow/form/duckduckgo-form/index.tsx
@@ -0,0 +1,91 @@
+import { FormContainer } from '@/components/form-container';
+import { TopNFormField } from '@/components/top-n-item';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { RAGFlowSelect } from '@/components/ui/select';
+import { useTranslate } from '@/hooks/common-hooks';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { memo, useMemo } from 'react';
+import { useForm, useFormContext } from 'react-hook-form';
+import { z } from 'zod';
+import { Channel, initialDuckValues } 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';
+import { QueryVariable } from '../components/query-variable';
+
+export const DuckDuckGoFormPartialSchema = {
+  top_n: z.string(),
+  channel: z.string(),
+};
+
+const FormSchema = z.object({
+  query: z.string(),
+  ...DuckDuckGoFormPartialSchema,
+});
+
+export function DuckDuckGoWidgets() {
+  const { t } = useTranslate('flow');
+  const form = useFormContext();
+
+  const options = useMemo(() => {
+    return Object.values(Channel).map((x) => ({ value: x, label: t(x) }));
+  }, [t]);
+
+  return (
+    <>
+      <TopNFormField></TopNFormField>
+      <FormField
+        control={form.control}
+        name={'channel'}
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel tooltip={t('channelTip')}>{t('channel')}</FormLabel>
+            <FormControl>
+              <RAGFlowSelect {...field} options={options} />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </>
+  );
+}
+
+const outputList = buildOutputList(initialDuckValues.outputs);
+
+function DuckDuckGoForm({ node }: INextOperatorForm) {
+  const defaultValues = useFormValues(initialDuckValues, node);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    defaultValues,
+    resolver: zodResolver(FormSchema),
+  });
+
+  useWatchFormChange(node?.id, form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <FormContainer>
+          <QueryVariable></QueryVariable>
+          <DuckDuckGoWidgets></DuckDuckGoWidgets>
+        </FormContainer>
+      </FormWrapper>
+      <div className="p-5">
+        <Output list={outputList}></Output>
+      </div>
+    </Form>
+  );
+}
+
+export default memo(DuckDuckGoForm);
diff --git a/web/src/pages/data-flow/form/email-form/index.tsx b/web/src/pages/data-flow/form/email-form/index.tsx
new file mode 100644
index 000000000..b142dae76
--- /dev/null
+++ b/web/src/pages/data-flow/form/email-form/index.tsx
@@ -0,0 +1,161 @@
+import { FormContainer } from '@/components/form-container';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { useTranslate } from '@/hooks/common-hooks';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { ReactNode } from 'react';
+import { useForm, useFormContext } from 'react-hook-form';
+import { z } from 'zod';
+import { initialEmailValues } 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';
+import { PromptEditor } from '../components/prompt-editor';
+
+interface InputFormFieldProps {
+  name: string;
+  label: ReactNode;
+  type?: string;
+}
+
+function InputFormField({ name, label, type }: InputFormFieldProps) {
+  const form = useFormContext();
+
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{label}</FormLabel>
+          <FormControl>
+            <Input {...field} type={type}></Input>
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+function PromptFormField({ name, label }: InputFormFieldProps) {
+  const form = useFormContext();
+
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{label}</FormLabel>
+          <FormControl>
+            <PromptEditor
+              {...field}
+              showToolbar={false}
+              multiLine={false}
+            ></PromptEditor>
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
+export function EmailFormWidgets() {
+  const { t } = useTranslate('flow');
+
+  return (
+    <>
+      <InputFormField
+        name="smtp_server"
+        label={t('smtpServer')}
+      ></InputFormField>
+      <InputFormField
+        name="smtp_port"
+        label={t('smtpPort')}
+        type="number"
+      ></InputFormField>
+      <InputFormField name="email" label={t('senderEmail')}></InputFormField>
+      <InputFormField
+        name="password"
+        label={t('authCode')}
+        type="password"
+      ></InputFormField>
+      <InputFormField
+        name="sender_name"
+        label={t('senderName')}
+      ></InputFormField>
+    </>
+  );
+}
+
+export const EmailFormPartialSchema = {
+  smtp_server: z.string(),
+  smtp_port: z.number(),
+  email: z.string(),
+  password: z.string(),
+  sender_name: z.string(),
+};
+
+const FormSchema = z.object({
+  to_email: z.string(),
+  cc_email: z.string(),
+  content: z.string(),
+  subject: z.string(),
+  ...EmailFormPartialSchema,
+});
+
+const outputList = buildOutputList(initialEmailValues.outputs);
+
+const EmailForm = ({ node }: INextOperatorForm) => {
+  const { t } = useTranslate('flow');
+  const defaultValues = useFormValues(initialEmailValues, node);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    defaultValues,
+    resolver: zodResolver(FormSchema),
+  });
+
+  useWatchFormChange(node?.id, form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <FormContainer>
+          <PromptFormField
+            name="to_email"
+            label={t('toEmail')}
+          ></PromptFormField>
+          <PromptFormField
+            name="cc_email"
+            label={t('ccEmail')}
+          ></PromptFormField>
+          <PromptFormField
+            name="content"
+            label={t('content')}
+          ></PromptFormField>
+          <PromptFormField
+            name="subject"
+            label={t('subject')}
+          ></PromptFormField>
+          <EmailFormWidgets></EmailFormWidgets>
+        </FormContainer>
+      </FormWrapper>
+      <div className="p-5">
+        <Output list={outputList}></Output>
+      </div>
+    </Form>
+  );
+};
+
+export default EmailForm;
diff --git a/web/src/pages/data-flow/form/exesql-form/index.tsx b/web/src/pages/data-flow/form/exesql-form/index.tsx
new file mode 100644
index 000000000..5a6cb5ba6
--- /dev/null
+++ b/web/src/pages/data-flow/form/exesql-form/index.tsx
@@ -0,0 +1,167 @@
+import NumberInput from '@/components/originui/number-input';
+import { SelectWithSearch } from '@/components/originui/select-with-search';
+import { ButtonLoading } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { useTranslate } from '@/hooks/common-hooks';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { memo } from 'react';
+import { useForm, useFormContext } from 'react-hook-form';
+import { z } from 'zod';
+import { initialExeSqlValues } from '../../constant';
+import { useFormValues } from '../../hooks/use-form-values';
+import { useWatchFormChange } from '../../hooks/use-watch-form-change';
+import { INextOperatorForm } from '../../interface';
+import { ExeSQLOptions } from '../../options';
+import { buildOutputList } from '../../utils/build-output-list';
+import { FormWrapper } from '../components/form-wrapper';
+import { Output } from '../components/output';
+import { QueryVariable } from '../components/query-variable';
+import { FormSchema, useSubmitForm } from './use-submit-form';
+
+const outputList = buildOutputList(initialExeSqlValues.outputs);
+
+export function ExeSQLFormWidgets({ loading }: { loading: boolean }) {
+  const form = useFormContext();
+  const { t } = useTranslate('flow');
+
+  return (
+    <>
+      <FormField
+        control={form.control}
+        name="db_type"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('dbType')}</FormLabel>
+            <FormControl>
+              <SelectWithSearch
+                {...field}
+                options={ExeSQLOptions}
+              ></SelectWithSearch>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      <FormField
+        control={form.control}
+        name="database"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('database')}</FormLabel>
+            <FormControl>
+              <Input {...field}></Input>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      <FormField
+        control={form.control}
+        name="username"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('username')}</FormLabel>
+            <FormControl>
+              <Input {...field}></Input>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      <FormField
+        control={form.control}
+        name="host"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('host')}</FormLabel>
+            <FormControl>
+              <Input {...field}></Input>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      <FormField
+        control={form.control}
+        name="port"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('port')}</FormLabel>
+            <FormControl>
+              <NumberInput {...field} className="w-full"></NumberInput>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      <FormField
+        control={form.control}
+        name="password"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('password')}</FormLabel>
+            <FormControl>
+              <Input {...field} type="password"></Input>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      <FormField
+        control={form.control}
+        name="max_records"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('maxRecords')}</FormLabel>
+            <FormControl>
+              <NumberInput {...field} className="w-full"></NumberInput>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      <div className="flex justify-end">
+        <ButtonLoading loading={loading} type="submit">
+          {t('test')}
+        </ButtonLoading>
+      </div>
+    </>
+  );
+}
+
+function ExeSQLForm({ node }: INextOperatorForm) {
+  const defaultValues = useFormValues(initialExeSqlValues, node);
+
+  const { onSubmit, loading } = useSubmitForm();
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues,
+  });
+
+  useWatchFormChange(node?.id, form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper onSubmit={form.handleSubmit(onSubmit)}>
+        <QueryVariable name="sql"></QueryVariable>
+        <ExeSQLFormWidgets loading={loading}></ExeSQLFormWidgets>
+      </FormWrapper>
+      <div className="p-5">
+        <Output list={outputList}></Output>
+      </div>
+    </Form>
+  );
+}
+
+export default memo(ExeSQLForm);
diff --git a/web/src/pages/data-flow/form/exesql-form/use-submit-form.ts b/web/src/pages/data-flow/form/exesql-form/use-submit-form.ts
new file mode 100644
index 000000000..8be69c7b0
--- /dev/null
+++ b/web/src/pages/data-flow/form/exesql-form/use-submit-form.ts
@@ -0,0 +1,31 @@
+import { useTestDbConnect } from '@/hooks/use-agent-request';
+import { useCallback } from 'react';
+import { z } from 'zod';
+
+export const ExeSQLFormSchema = {
+  db_type: z.string().min(1),
+  database: z.string().min(1),
+  username: z.string().min(1),
+  host: z.string().min(1),
+  port: z.number(),
+  password: z.string().min(1),
+  max_records: z.number(),
+};
+
+export const FormSchema = z.object({
+  sql: z.string().optional(),
+  ...ExeSQLFormSchema,
+});
+
+export function useSubmitForm() {
+  const { testDbConnect, loading } = useTestDbConnect();
+
+  const onSubmit = useCallback(
+    async (data: z.infer<typeof FormSchema>) => {
+      testDbConnect(data);
+    },
+    [testDbConnect],
+  );
+
+  return { loading, onSubmit };
+}
diff --git a/web/src/pages/data-flow/form/github-form/index.tsx b/web/src/pages/data-flow/form/github-form/index.tsx
new file mode 100644
index 000000000..2e514a3e7
--- /dev/null
+++ b/web/src/pages/data-flow/form/github-form/index.tsx
@@ -0,0 +1,52 @@
+import { FormContainer } from '@/components/form-container';
+import { TopNFormField } from '@/components/top-n-item';
+import { Form } from '@/components/ui/form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { memo } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { initialGithubValues } 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';
+import { QueryVariable } from '../components/query-variable';
+
+export const FormSchema = z.object({
+  query: z.string(),
+  top_n: z.number(),
+});
+
+const outputList = buildOutputList(initialGithubValues.outputs);
+
+function GithubForm({ node }: INextOperatorForm) {
+  const defaultValues = useFormValues(initialGithubValues, node);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    defaultValues,
+    resolver: zodResolver(FormSchema),
+    mode: 'onChange',
+  });
+
+  useWatchFormChange(node?.id, form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <FormContainer>
+          <QueryVariable></QueryVariable>
+        </FormContainer>
+        <FormContainer>
+          <TopNFormField></TopNFormField>
+        </FormContainer>
+      </FormWrapper>
+      <div className="p-5">
+        <Output list={outputList}></Output>
+      </div>
+    </Form>
+  );
+}
+
+export default memo(GithubForm);
diff --git a/web/src/pages/data-flow/form/google-form/index.tsx b/web/src/pages/data-flow/form/google-form/index.tsx
new file mode 100644
index 000000000..cec5ae4c7
--- /dev/null
+++ b/web/src/pages/data-flow/form/google-form/index.tsx
@@ -0,0 +1,139 @@
+import { FormContainer } from '@/components/form-container';
+import NumberInput from '@/components/originui/number-input';
+import { SelectWithSearch } from '@/components/originui/select-with-search';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { useTranslate } from '@/hooks/common-hooks';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm, useFormContext } from 'react-hook-form';
+import { z } from 'zod';
+import { initialGoogleValues } from '../../constant';
+import { useFormValues } from '../../hooks/use-form-values';
+import { useWatchFormChange } from '../../hooks/use-watch-form-change';
+import { INextOperatorForm } from '../../interface';
+import { GoogleCountryOptions, GoogleLanguageOptions } from '../../options';
+import { buildOutputList } from '../../utils/build-output-list';
+import { ApiKeyField } from '../components/api-key-field';
+import { FormWrapper } from '../components/form-wrapper';
+import { Output } from '../components/output';
+import { QueryVariable } from '../components/query-variable';
+
+const outputList = buildOutputList(initialGoogleValues.outputs);
+
+export const GoogleFormPartialSchema = {
+  api_key: z.string(),
+  country: z.string(),
+  language: z.string(),
+};
+
+export const FormSchema = z.object({
+  ...GoogleFormPartialSchema,
+  q: z.string(),
+  start: z.number(),
+  num: z.number(),
+});
+
+export function GoogleFormWidgets() {
+  const form = useFormContext();
+  const { t } = useTranslate('flow');
+
+  return (
+    <>
+      <FormField
+        control={form.control}
+        name={`country`}
+        render={({ field }) => (
+          <FormItem className="flex-1">
+            <FormLabel>{t('country')}</FormLabel>
+            <FormControl>
+              <SelectWithSearch
+                {...field}
+                options={GoogleCountryOptions}
+              ></SelectWithSearch>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      <FormField
+        control={form.control}
+        name={`language`}
+        render={({ field }) => (
+          <FormItem className="flex-1">
+            <FormLabel>{t('language')}</FormLabel>
+            <FormControl>
+              <SelectWithSearch
+                {...field}
+                options={GoogleLanguageOptions}
+              ></SelectWithSearch>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </>
+  );
+}
+
+const GoogleForm = ({ node }: INextOperatorForm) => {
+  const { t } = useTranslate('flow');
+  const defaultValues = useFormValues(initialGoogleValues, node);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    defaultValues,
+    resolver: zodResolver(FormSchema),
+  });
+
+  useWatchFormChange(node?.id, form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <FormContainer>
+          <QueryVariable name="q"></QueryVariable>
+        </FormContainer>
+        <FormContainer>
+          <ApiKeyField placeholder={t('apiKeyPlaceholder')}></ApiKeyField>
+          <FormField
+            control={form.control}
+            name={`start`}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t('flowStart')}</FormLabel>
+                <FormControl>
+                  <NumberInput {...field} className="w-full"></NumberInput>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name={`num`}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t('flowNum')}</FormLabel>
+                <FormControl>
+                  <NumberInput {...field} className="w-full"></NumberInput>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <GoogleFormWidgets></GoogleFormWidgets>
+        </FormContainer>
+      </FormWrapper>
+      <div className="p-5">
+        <Output list={outputList}></Output>
+      </div>
+    </Form>
+  );
+};
+
+export default GoogleForm;
diff --git a/web/src/pages/data-flow/form/google-scholar-form/index.tsx b/web/src/pages/data-flow/form/google-scholar-form/index.tsx
new file mode 100644
index 000000000..00f54056a
--- /dev/null
+++ b/web/src/pages/data-flow/form/google-scholar-form/index.tsx
@@ -0,0 +1,166 @@
+import { FormContainer } from '@/components/form-container';
+import { SelectWithSearch } from '@/components/originui/select-with-search';
+import { TopNFormField } from '@/components/top-n-item';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Switch } from '@/components/ui/switch';
+import { useTranslate } from '@/hooks/common-hooks';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { DatePicker, DatePickerProps } from 'antd';
+import dayjs from 'dayjs';
+import { memo, useCallback, useMemo } from 'react';
+import { useForm, useFormContext } from 'react-hook-form';
+import { z } from 'zod';
+import { initialGoogleScholarValues } from '../../constant';
+import { useBuildSortOptions } from '../../form-hooks';
+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 { QueryVariable } from '../components/query-variable';
+
+// TODO: To be replaced
+const YearPicker = ({
+  onChange,
+  value,
+}: {
+  onChange?: (val: number | undefined) => void;
+  value?: number | undefined;
+}) => {
+  const handleChange: DatePickerProps['onChange'] = useCallback(
+    (val: any) => {
+      const nextVal = val?.format('YYYY');
+      onChange?.(nextVal ? Number(nextVal) : undefined);
+    },
+    [onChange],
+  );
+  // The year needs to be converted into a number and saved to the backend
+  const nextValue = useMemo(() => {
+    if (value) {
+      return dayjs(value.toString());
+    }
+    return undefined;
+  }, [value]);
+
+  return <DatePicker picker="year" onChange={handleChange} value={nextValue} />;
+};
+
+export function GoogleScholarFormWidgets() {
+  const form = useFormContext();
+  const { t } = useTranslate('flow');
+
+  const options = useBuildSortOptions();
+
+  return (
+    <>
+      <TopNFormField></TopNFormField>
+      <FormField
+        control={form.control}
+        name={`sort_by`}
+        render={({ field }) => (
+          <FormItem className="flex-1">
+            <FormLabel>{t('sortBy')}</FormLabel>
+            <FormControl>
+              <SelectWithSearch {...field} options={options}></SelectWithSearch>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      <FormField
+        control={form.control}
+        name={`year_low`}
+        render={({ field }) => (
+          <FormItem className="flex-1">
+            <FormLabel>{t('yearLow')}</FormLabel>
+            <FormControl>
+              <YearPicker {...field}></YearPicker>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      <FormField
+        control={form.control}
+        name={`year_high`}
+        render={({ field }) => (
+          <FormItem className="flex-1">
+            <FormLabel>{t('yearHigh')}</FormLabel>
+            <FormControl>
+              <YearPicker {...field}></YearPicker>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      <FormField
+        control={form.control}
+        name={`patents`}
+        render={({ field }) => (
+          <FormItem className="flex-1">
+            <FormLabel>{t('patents')}</FormLabel>
+            <FormControl>
+              <Switch
+                checked={field.value}
+                onCheckedChange={field.onChange}
+              ></Switch>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </>
+  );
+}
+
+export const GoogleScholarFormPartialSchema = {
+  top_n: z.number(),
+  sort_by: z.string(),
+  year_low: z.number(),
+  year_high: z.number(),
+  patents: z.boolean(),
+};
+
+export const FormSchema = z.object({
+  ...GoogleScholarFormPartialSchema,
+  query: z.string(),
+});
+
+const outputList = buildOutputList(initialGoogleScholarValues.outputs);
+
+function GoogleScholarForm({ node }: INextOperatorForm) {
+  const defaultValues = useFormValues(initialGoogleScholarValues, node);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    defaultValues,
+    resolver: zodResolver(FormSchema),
+  });
+
+  useWatchFormChange(node?.id, form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <FormContainer>
+          <QueryVariable></QueryVariable>
+        </FormContainer>
+        <FormContainer>
+          <GoogleScholarFormWidgets></GoogleScholarFormWidgets>
+        </FormContainer>
+      </FormWrapper>
+      <div className="p-5">
+        <Output list={outputList}></Output>
+      </div>
+    </Form>
+  );
+}
+
+export default memo(GoogleScholarForm);
diff --git a/web/src/pages/data-flow/form/invoke-form/hooks.ts b/web/src/pages/data-flow/form/invoke-form/hooks.ts
new file mode 100644
index 000000000..951cd42ae
--- /dev/null
+++ b/web/src/pages/data-flow/form/invoke-form/hooks.ts
@@ -0,0 +1,97 @@
+import get from 'lodash/get';
+import {
+  ChangeEventHandler,
+  MouseEventHandler,
+  useCallback,
+  useMemo,
+} from 'react';
+import { v4 as uuid } from 'uuid';
+import { IGenerateParameter, IInvokeVariable } from '../../interface';
+import useGraphStore from '../../store';
+
+export const useHandleOperateParameters = (nodeId: string) => {
+  const { getNode, updateNodeForm } = useGraphStore((state) => state);
+  const node = getNode(nodeId);
+  const dataSource: IGenerateParameter[] = useMemo(
+    () => get(node, 'data.form.variables', []) as IGenerateParameter[],
+    [node],
+  );
+
+  const changeValue = useCallback(
+    (row: IInvokeVariable, field: string, value: string) => {
+      const newData = [...dataSource];
+      const index = newData.findIndex((item) => row.id === item.id);
+      const item = newData[index];
+      newData.splice(index, 1, {
+        ...item,
+        [field]: value,
+      });
+
+      updateNodeForm(nodeId, { variables: newData });
+    },
+    [dataSource, nodeId, updateNodeForm],
+  );
+
+  const handleComponentIdChange = useCallback(
+    (row: IInvokeVariable) => (value: string) => {
+      changeValue(row, 'component_id', value);
+    },
+    [changeValue],
+  );
+
+  const handleValueChange = useCallback(
+    (row: IInvokeVariable): ChangeEventHandler<HTMLInputElement> =>
+      (e) => {
+        changeValue(row, 'value', e.target.value);
+      },
+    [changeValue],
+  );
+
+  const handleRemove = useCallback(
+    (id?: string) => () => {
+      const newData = dataSource.filter((item) => item.id !== id);
+      updateNodeForm(nodeId, { variables: newData });
+    },
+    [updateNodeForm, nodeId, dataSource],
+  );
+
+  const handleAdd: MouseEventHandler = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      updateNodeForm(nodeId, {
+        variables: [
+          ...dataSource,
+          {
+            id: uuid(),
+            key: '',
+            component_id: undefined,
+            value: '',
+          },
+        ],
+      });
+    },
+    [dataSource, nodeId, updateNodeForm],
+  );
+
+  const handleSave = (row: IGenerateParameter) => {
+    const newData = [...dataSource];
+    const index = newData.findIndex((item) => row.id === item.id);
+    const item = newData[index];
+    newData.splice(index, 1, {
+      ...item,
+      ...row,
+    });
+
+    updateNodeForm(nodeId, { variables: newData });
+  };
+
+  return {
+    handleAdd,
+    handleRemove,
+    handleComponentIdChange,
+    handleValueChange,
+    handleSave,
+    dataSource,
+  };
+};
diff --git a/web/src/pages/data-flow/form/invoke-form/index.tsx b/web/src/pages/data-flow/form/invoke-form/index.tsx
new file mode 100644
index 000000000..3d67ec030
--- /dev/null
+++ b/web/src/pages/data-flow/form/invoke-form/index.tsx
@@ -0,0 +1,226 @@
+import { Collapse } from '@/components/collapse';
+import { FormContainer } from '@/components/form-container';
+import NumberInput from '@/components/originui/number-input';
+import { SelectWithSearch } from '@/components/originui/select-with-search';
+import { Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Switch } from '@/components/ui/switch';
+import { zodResolver } from '@hookform/resolvers/zod';
+import Editor, { loader } from '@monaco-editor/react';
+import { Plus } from 'lucide-react';
+import { memo } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { initialInvokeValues } 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';
+import { FormSchema, FormSchemaType } from './schema';
+import { useEditVariableRecord } from './use-edit-variable';
+import { VariableDialog } from './variable-dialog';
+import { VariableTable } from './variable-table';
+
+loader.config({ paths: { vs: '/vs' } });
+
+enum Method {
+  GET = 'GET',
+  POST = 'POST',
+  PUT = 'PUT',
+}
+
+const MethodOptions = [Method.GET, Method.POST, Method.PUT].map((x) => ({
+  label: x,
+  value: x,
+}));
+
+interface TimeoutInputProps {
+  value?: number;
+  onChange?: (value: number | null) => void;
+}
+
+const TimeoutInput = ({ value, onChange }: TimeoutInputProps) => {
+  const { t } = useTranslation();
+  return (
+    <div className="flex gap-2 items-center">
+      <NumberInput value={value} onChange={onChange} /> {t('flow.seconds')}
+    </div>
+  );
+};
+
+const outputList = buildOutputList(initialInvokeValues.outputs);
+
+function InvokeForm({ node }: INextOperatorForm) {
+  const { t } = useTranslation();
+  const defaultValues = useFormValues(initialInvokeValues, node);
+
+  const form = useForm<FormSchemaType>({
+    defaultValues,
+    resolver: zodResolver(FormSchema),
+    mode: 'onChange',
+  });
+
+  const {
+    visible,
+    hideModal,
+    showModal,
+    ok,
+    currentRecord,
+    otherThanCurrentQuery,
+    handleDeleteRecord,
+  } = useEditVariableRecord({
+    form,
+    node,
+  });
+
+  const variables = useWatch({ control: form.control, name: 'variables' });
+
+  useWatchFormChange(node?.id, form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <FormContainer>
+          <FormField
+            control={form.control}
+            name="url"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t('flow.url')}</FormLabel>
+                <FormControl>
+                  <Input {...field} placeholder="http://" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="method"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t('flow.method')}</FormLabel>
+                <FormControl>
+                  <SelectWithSearch {...field} options={MethodOptions} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="timeout"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t('flow.timeout')}</FormLabel>
+                <FormControl>
+                  <TimeoutInput {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="headers"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t('flow.headers')}</FormLabel>
+                <FormControl>
+                  <Editor
+                    height={200}
+                    defaultLanguage="json"
+                    theme="vs-dark"
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="proxy"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t('flow.proxy')}</FormLabel>
+                <FormControl>
+                  <Input {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="clean_html"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel tooltip={t('flow.cleanHtmlTip')}>
+                  {t('flow.cleanHtml')}
+                </FormLabel>
+                <FormControl>
+                  <Switch
+                    onCheckedChange={field.onChange}
+                    checked={field.value}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          {/* Create a hidden field to make Form instance record this */}
+          <FormField
+            control={form.control}
+            name={'variables'}
+            render={() => <div></div>}
+          />
+        </FormContainer>
+        <Collapse
+          title={<div>{t('flow.parameter')}</div>}
+          rightContent={
+            <Button
+              variant={'ghost'}
+              onClick={(e) => {
+                e.preventDefault();
+                showModal();
+              }}
+            >
+              <Plus />
+            </Button>
+          }
+        >
+          <VariableTable
+            data={variables}
+            showModal={showModal}
+            deleteRecord={handleDeleteRecord}
+            nodeId={node?.id}
+          ></VariableTable>
+        </Collapse>
+        {visible && (
+          <VariableDialog
+            hideModal={hideModal}
+            initialValue={currentRecord}
+            otherThanCurrentQuery={otherThanCurrentQuery}
+            submit={ok}
+          ></VariableDialog>
+        )}
+      </FormWrapper>
+      <div className="p-5">
+        <Output list={outputList}></Output>
+      </div>
+    </Form>
+  );
+}
+
+export default memo(InvokeForm);
diff --git a/web/src/pages/data-flow/form/invoke-form/schema.ts b/web/src/pages/data-flow/form/invoke-form/schema.ts
new file mode 100644
index 000000000..a3b11aff2
--- /dev/null
+++ b/web/src/pages/data-flow/form/invoke-form/schema.ts
@@ -0,0 +1,21 @@
+import { z } from 'zod';
+
+export const VariableFormSchema = z.object({
+  key: z.string(),
+  ref: z.string(),
+  value: z.string(),
+});
+
+export const FormSchema = z.object({
+  url: z.string().url(),
+  method: z.string(),
+  timeout: z.number(),
+  headers: z.string(),
+  proxy: z.string().url(),
+  clean_html: z.boolean(),
+  variables: z.array(VariableFormSchema),
+});
+
+export type FormSchemaType = z.infer<typeof FormSchema>;
+
+export type VariableFormSchemaType = z.infer<typeof VariableFormSchema>;
diff --git a/web/src/pages/data-flow/form/invoke-form/use-edit-variable.ts b/web/src/pages/data-flow/form/invoke-form/use-edit-variable.ts
new file mode 100644
index 000000000..40b371894
--- /dev/null
+++ b/web/src/pages/data-flow/form/invoke-form/use-edit-variable.ts
@@ -0,0 +1,70 @@
+import { useSetModalState } from '@/hooks/common-hooks';
+import { useSetSelectedRecord } from '@/hooks/logic-hooks';
+import { useCallback, useMemo, useState } from 'react';
+import { UseFormReturn, useWatch } from 'react-hook-form';
+import { INextOperatorForm } from '../../interface';
+import { FormSchemaType, VariableFormSchemaType } from './schema';
+
+export const useEditVariableRecord = ({
+  form,
+}: INextOperatorForm & { form: UseFormReturn<FormSchemaType> }) => {
+  const { setRecord, currentRecord } =
+    useSetSelectedRecord<VariableFormSchemaType>();
+
+  const { visible, hideModal, showModal } = useSetModalState();
+  const [index, setIndex] = useState(-1);
+  const variables = useWatch({
+    control: form.control,
+    name: 'variables',
+  });
+
+  const otherThanCurrentQuery = useMemo(() => {
+    return variables.filter((item, idx) => idx !== index);
+  }, [index, variables]);
+
+  const handleEditRecord = useCallback(
+    (record: VariableFormSchemaType) => {
+      const variables = form?.getValues('variables') || [];
+
+      const nextVaribales =
+        index > -1
+          ? variables.toSpliced(index, 1, record)
+          : [...variables, record];
+
+      form.setValue('variables', nextVaribales);
+
+      hideModal();
+    },
+    [form, hideModal, index],
+  );
+
+  const handleShowModal = useCallback(
+    (idx?: number, record?: VariableFormSchemaType) => {
+      setIndex(idx ?? -1);
+      setRecord(record ?? ({} as VariableFormSchemaType));
+      showModal();
+    },
+    [setRecord, showModal],
+  );
+
+  const handleDeleteRecord = useCallback(
+    (idx: number) => {
+      const variables = form?.getValues('variables') || [];
+      const nextVariables = variables.filter((item, index) => index !== idx);
+
+      form.setValue('variables', nextVariables);
+    },
+    [form],
+  );
+
+  return {
+    ok: handleEditRecord,
+    currentRecord,
+    setRecord,
+    visible,
+    hideModal,
+    showModal: handleShowModal,
+    otherThanCurrentQuery,
+    handleDeleteRecord,
+  };
+};
diff --git a/web/src/pages/data-flow/form/invoke-form/variable-dialog.tsx b/web/src/pages/data-flow/form/invoke-form/variable-dialog.tsx
new file mode 100644
index 000000000..03c4d83b0
--- /dev/null
+++ b/web/src/pages/data-flow/form/invoke-form/variable-dialog.tsx
@@ -0,0 +1,143 @@
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { IModalProps } from '@/interfaces/common';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { isEmpty } from 'lodash';
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { QueryVariable } from '../components/query-variable';
+import { VariableFormSchemaType } from './schema';
+
+type ModalFormProps = {
+  initialValue: VariableFormSchemaType;
+  otherThanCurrentQuery: VariableFormSchemaType[];
+  submit(values: any): void;
+};
+
+const FormId = 'BeginParameterForm';
+
+function VariableForm({
+  initialValue,
+  otherThanCurrentQuery,
+  submit,
+}: ModalFormProps) {
+  const { t } = useTranslation();
+  const FormSchema = z.object({
+    key: z
+      .string()
+      .trim()
+      .min(1)
+      .refine(
+        (value) =>
+          !value || !otherThanCurrentQuery.some((x) => x.key === value),
+        { message: 'The key cannot be repeated!' },
+      ),
+    ref: z.string(),
+    value: z.string(),
+  });
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    mode: 'onChange',
+    defaultValues: {
+      key: '',
+      value: '',
+      ref: '',
+    },
+  });
+
+  useEffect(() => {
+    if (!isEmpty(initialValue)) {
+      form.reset(initialValue);
+    }
+  }, [form, initialValue]);
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    submit(data);
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        id={FormId}
+        className="space-y-5"
+        autoComplete="off"
+      >
+        <FormField
+          name="key"
+          control={form.control}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('flow.key')}</FormLabel>
+              <FormControl>
+                <Input {...field} autoComplete="off" />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <QueryVariable name="ref" label={t('flow.ref')}></QueryVariable>
+        <FormField
+          name="value"
+          control={form.control}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('flow.value')}</FormLabel>
+              <FormControl>
+                <Input {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </form>
+    </Form>
+  );
+}
+
+export function VariableDialog({
+  initialValue,
+  hideModal,
+  otherThanCurrentQuery,
+  submit,
+}: ModalFormProps & IModalProps<VariableFormSchemaType>) {
+  const { t } = useTranslation();
+
+  return (
+    <Dialog open onOpenChange={hideModal}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('flow.variableSettings')}</DialogTitle>
+        </DialogHeader>
+        <VariableForm
+          initialValue={initialValue}
+          otherThanCurrentQuery={otherThanCurrentQuery}
+          submit={submit}
+        ></VariableForm>
+        <DialogFooter>
+          <Button type="submit" form={FormId}>
+            {t('modal.okText')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/web/src/pages/data-flow/form/invoke-form/variable-table.tsx b/web/src/pages/data-flow/form/invoke-form/variable-table.tsx
new file mode 100644
index 000000000..33a747670
--- /dev/null
+++ b/web/src/pages/data-flow/form/invoke-form/variable-table.tsx
@@ -0,0 +1,199 @@
+'use client';
+
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import { Pencil, Trash2 } from 'lucide-react';
+import * as React from 'react';
+
+import { TableEmpty } from '@/components/table-skeleton';
+import { Button } from '@/components/ui/button';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+import { useTranslation } from 'react-i18next';
+import { useGetVariableLabelByValue } from '../../hooks/use-get-begin-query';
+import { VariableFormSchemaType } from './schema';
+
+interface IProps {
+  data: VariableFormSchemaType[];
+  deleteRecord(index: number): void;
+  showModal(index: number, record: VariableFormSchemaType): void;
+  nodeId?: string;
+}
+
+export function VariableTable({
+  data = [],
+  deleteRecord,
+  showModal,
+  nodeId,
+}: IProps) {
+  const { t } = useTranslation();
+  const getLabel = useGetVariableLabelByValue(nodeId!);
+
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    [],
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+
+  const columns: ColumnDef<VariableFormSchemaType>[] = [
+    {
+      accessorKey: 'key',
+      header: t('flow.key'),
+      meta: { cellClassName: 'max-w-30' },
+      cell: ({ row }) => {
+        const key: string = row.getValue('key');
+        return (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="truncate">{key}</div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{key}</p>
+            </TooltipContent>
+          </Tooltip>
+        );
+      },
+    },
+    {
+      accessorKey: 'ref',
+      header: t('flow.ref'),
+      meta: { cellClassName: 'max-w-30' },
+      cell: ({ row }) => {
+        const ref: string = row.getValue('ref');
+        const label = getLabel(ref);
+        return (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="truncate">{label}</div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{label}</p>
+            </TooltipContent>
+          </Tooltip>
+        );
+      },
+    },
+    {
+      accessorKey: 'value',
+      header: t('flow.value'),
+      cell: ({ row }) => <div>{row.getValue('value')}</div>,
+    },
+    {
+      id: 'actions',
+      enableHiding: false,
+      header: t('common.action'),
+      cell: ({ row }) => {
+        const record = row.original;
+        const idx = row.index;
+
+        return (
+          <div>
+            <Button
+              className="bg-transparent text-foreground  hover:bg-muted-foreground hover:text-foreground"
+              onClick={() => showModal(idx, record)}
+            >
+              <Pencil />
+            </Button>
+            <Button
+              className="bg-transparent text-foreground  hover:bg-muted-foreground hover:text-foreground"
+              onClick={() => deleteRecord(idx)}
+            >
+              <Trash2 />
+            </Button>
+          </div>
+        );
+      },
+    },
+  ];
+
+  const table = useReactTable({
+    data,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+    },
+  });
+
+  return (
+    <div className="w-full">
+      <div className="rounded-md border">
+        <Table rootClassName="rounded-md">
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext(),
+                          )}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && 'selected'}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell
+                      key={cell.id}
+                      className={cn(cell.column.columnDef.meta?.cellClassName)}
+                    >
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableEmpty columnsLength={columns.length}></TableEmpty>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/pages/data-flow/form/iteration-form/dynamic-output.tsx b/web/src/pages/data-flow/form/iteration-form/dynamic-output.tsx
new file mode 100644
index 000000000..c31be8fd0
--- /dev/null
+++ b/web/src/pages/data-flow/form/iteration-form/dynamic-output.tsx
@@ -0,0 +1,128 @@
+'use client';
+
+import { FormContainer } from '@/components/form-container';
+import { SelectWithSearch } from '@/components/originui/select-with-search';
+import { BlockButton, Button } from '@/components/ui/button';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Separator } from '@/components/ui/separator';
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { t } from 'i18next';
+import { X } from 'lucide-react';
+import { ReactNode, useCallback, useMemo } from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useBuildSubNodeOutputOptions } from './use-build-options';
+
+interface IProps {
+  node?: RAGFlowNodeType;
+}
+
+export function DynamicOutputForm({ node }: IProps) {
+  const { t } = useTranslation();
+  const form = useFormContext();
+  const options = useBuildSubNodeOutputOptions(node?.id);
+  const name = 'outputs';
+
+  const flatOptions = useMemo(() => {
+    return options.reduce<{ label: string; value: string; type: string }[]>(
+      (pre, cur) => {
+        pre.push(...cur.options);
+        return pre;
+      },
+      [],
+    );
+  }, [options]);
+
+  const findType = useCallback(
+    (val: string) => {
+      const type = flatOptions.find((x) => x.value === val)?.type;
+      if (type) {
+        return `Array<${type}>`;
+      }
+    },
+    [flatOptions],
+  );
+
+  const { fields, remove, append } = useFieldArray({
+    name: name,
+    control: form.control,
+  });
+
+  return (
+    <div className="space-y-5">
+      {fields.map((field, index) => {
+        const nameField = `${name}.${index}.name`;
+        const typeField = `${name}.${index}.type`;
+        return (
+          <div key={field.id} className="flex items-center gap-2">
+            <FormField
+              control={form.control}
+              name={nameField}
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormControl>
+                    <Input
+                      {...field}
+                      placeholder={t('common.pleaseInput')}
+                    ></Input>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Separator className="w-3 text-text-secondary" />
+            <FormField
+              control={form.control}
+              name={`${name}.${index}.ref`}
+              render={({ field }) => (
+                <FormItem className="w-2/5">
+                  <FormControl>
+                    <SelectWithSearch
+                      options={options}
+                      {...field}
+                      onChange={(val) => {
+                        form.setValue(typeField, findType(val));
+                        field.onChange(val);
+                      }}
+                    ></SelectWithSearch>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name={typeField}
+              render={() => <div></div>}
+            />
+            <Button variant={'ghost'} onClick={() => remove(index)}>
+              <X className="text-text-sub-title-invert " />
+            </Button>
+          </div>
+        );
+      })}
+      <BlockButton onClick={() => append({ name: '', ref: undefined })}>
+        {t('common.add')}
+      </BlockButton>
+    </div>
+  );
+}
+
+export function VariableTitle({ title }: { title: ReactNode }) {
+  return <div className="font-medium text-text-primary pb-2">{title}</div>;
+}
+
+export function DynamicOutput({ node }: IProps) {
+  return (
+    <FormContainer>
+      <VariableTitle title={t('flow.output')}></VariableTitle>
+      <DynamicOutputForm node={node}></DynamicOutputForm>
+    </FormContainer>
+  );
+}
diff --git a/web/src/pages/data-flow/form/iteration-form/index.tsx b/web/src/pages/data-flow/form/iteration-form/index.tsx
new file mode 100644
index 000000000..c70b764fb
--- /dev/null
+++ b/web/src/pages/data-flow/form/iteration-form/index.tsx
@@ -0,0 +1,57 @@
+import { FormContainer } from '@/components/form-container';
+import { Form } from '@/components/ui/form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { memo, useMemo } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import { z } from 'zod';
+import { VariableType } from '../../constant';
+import { INextOperatorForm } from '../../interface';
+import { FormWrapper } from '../components/form-wrapper';
+import { Output } from '../components/output';
+import { QueryVariable } from '../components/query-variable';
+import { DynamicOutput } from './dynamic-output';
+import { OutputArray } from './interface';
+import { useValues } from './use-values';
+import { useWatchFormChange } from './use-watch-form-change';
+
+const FormSchema = z.object({
+  query: z.string().optional(),
+  outputs: z.array(z.object({ name: z.string(), value: z.any() })).optional(),
+});
+
+function IterationForm({ node }: INextOperatorForm) {
+  const defaultValues = useValues(node);
+
+  const form = useForm({
+    defaultValues: defaultValues,
+    resolver: zodResolver(FormSchema),
+  });
+
+  const outputs: OutputArray = useWatch({
+    control: form?.control,
+    name: 'outputs',
+  });
+
+  const outputList = useMemo(() => {
+    return outputs.map((x) => ({ title: x.name, type: x?.type }));
+  }, [outputs]);
+
+  useWatchFormChange(node?.id, form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <FormContainer>
+          <QueryVariable
+            name="items_ref"
+            type={VariableType.Array}
+          ></QueryVariable>
+        </FormContainer>
+        <DynamicOutput node={node}></DynamicOutput>
+        <Output list={outputList}></Output>
+      </FormWrapper>
+    </Form>
+  );
+}
+
+export default memo(IterationForm);
diff --git a/web/src/pages/data-flow/form/iteration-form/interface.ts b/web/src/pages/data-flow/form/iteration-form/interface.ts
new file mode 100644
index 000000000..25f22aab0
--- /dev/null
+++ b/web/src/pages/data-flow/form/iteration-form/interface.ts
@@ -0,0 +1,2 @@
+export type OutputArray = Array<{ name: string; ref: string; type?: string }>;
+export type OutputObject = Record<string, { ref: string; type?: string }>;
diff --git a/web/src/pages/data-flow/form/iteration-form/use-build-options.ts b/web/src/pages/data-flow/form/iteration-form/use-build-options.ts
new file mode 100644
index 000000000..3439000d4
--- /dev/null
+++ b/web/src/pages/data-flow/form/iteration-form/use-build-options.ts
@@ -0,0 +1,31 @@
+import { isEmpty } from 'lodash';
+import { useMemo } from 'react';
+import { Operator } from '../../constant';
+import { buildOutputOptions } from '../../hooks/use-get-begin-query';
+import useGraphStore from '../../store';
+
+export function useBuildSubNodeOutputOptions(nodeId?: string) {
+  const { nodes } = useGraphStore((state) => state);
+
+  const nodeOutputOptions = useMemo(() => {
+    if (!nodeId) {
+      return [];
+    }
+
+    const subNodeWithOutputList = nodes.filter(
+      (x) =>
+        x.parentId === nodeId &&
+        x.data.label !== Operator.IterationStart &&
+        !isEmpty(x.data?.form?.outputs),
+    );
+
+    return subNodeWithOutputList.map((x) => ({
+      label: x.data.name,
+      value: x.id,
+      title: x.data.name,
+      options: buildOutputOptions(x.data.form.outputs, x.id),
+    }));
+  }, [nodeId, nodes]);
+
+  return nodeOutputOptions;
+}
diff --git a/web/src/pages/data-flow/form/iteration-form/use-values.ts b/web/src/pages/data-flow/form/iteration-form/use-values.ts
new file mode 100644
index 000000000..29cd06324
--- /dev/null
+++ b/web/src/pages/data-flow/form/iteration-form/use-values.ts
@@ -0,0 +1,27 @@
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { isEmpty } from 'lodash';
+import { useMemo } from 'react';
+import { initialIterationValues } from '../../constant';
+import { OutputObject } from './interface';
+
+function convertToArray(outputObject: OutputObject) {
+  return Object.entries(outputObject).map(([key, value]) => ({
+    name: key,
+    ref: value.ref,
+    type: value.type,
+  }));
+}
+
+export function useValues(node?: RAGFlowNodeType) {
+  const values = useMemo(() => {
+    const formData = node?.data?.form;
+
+    if (isEmpty(formData)) {
+      return { ...initialIterationValues, outputs: [] };
+    }
+
+    return { ...formData, outputs: convertToArray(formData.outputs) };
+  }, [node?.data?.form]);
+
+  return values;
+}
diff --git a/web/src/pages/data-flow/form/iteration-form/use-watch-form-change.ts b/web/src/pages/data-flow/form/iteration-form/use-watch-form-change.ts
new file mode 100644
index 000000000..4a780667e
--- /dev/null
+++ b/web/src/pages/data-flow/form/iteration-form/use-watch-form-change.ts
@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+import { UseFormReturn, useWatch } from 'react-hook-form';
+import useGraphStore from '../../store';
+import { OutputArray, OutputObject } from './interface';
+
+export function transferToObject(list: OutputArray) {
+  return list.reduce<OutputObject>((pre, cur) => {
+    pre[cur.name] = { ref: cur.ref, type: cur.type };
+    return pre;
+  }, {});
+}
+
+export function useWatchFormChange(id?: string, form?: UseFormReturn) {
+  let values = useWatch({ control: form?.control });
+  const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
+
+  useEffect(() => {
+    // Manually triggered form updates are synchronized to the canvas
+    if (id && form?.formState.isDirty) {
+      values = form?.getValues();
+      console.log('🚀 ~ useEffect ~ values:', values);
+      let nextValues: any = {
+        ...values,
+        outputs: transferToObject(values.outputs),
+      };
+
+      updateNodeForm(id, nextValues);
+    }
+  }, [form?.formState.isDirty, id, updateNodeForm, values]);
+}
diff --git a/web/src/pages/data-flow/form/iteration-start-from/index.tsx b/web/src/pages/data-flow/form/iteration-start-from/index.tsx
new file mode 100644
index 000000000..ba58b92d1
--- /dev/null
+++ b/web/src/pages/data-flow/form/iteration-start-from/index.tsx
@@ -0,0 +1,23 @@
+import { Output, OutputType } from '@/pages/agent/form/components/output';
+import { memo } from 'react';
+import { initialIterationStartValues } from '../../constant';
+
+const outputs = initialIterationStartValues.outputs;
+
+const outputList = Object.entries(outputs).reduce<OutputType[]>(
+  (pre, [key, value]) => {
+    pre.push({ title: key, type: value.type });
+
+    return pre;
+  },
+  [],
+);
+function IterationStartForm() {
+  return (
+    <section className="space-y-6 p-4">
+      <Output list={outputList}></Output>
+    </section>
+  );
+}
+
+export default memo(IterationStartForm);
diff --git a/web/src/pages/data-flow/form/jin10-form/index.tsx b/web/src/pages/data-flow/form/jin10-form/index.tsx
new file mode 100644
index 000000000..2bc6d774a
--- /dev/null
+++ b/web/src/pages/data-flow/form/jin10-form/index.tsx
@@ -0,0 +1,145 @@
+import { useTranslate } from '@/hooks/common-hooks';
+import { Form, Input, Select } from 'antd';
+import { useMemo } from 'react';
+import { IOperatorForm } from '../../interface';
+import {
+  Jin10CalendarDatashapeOptions,
+  Jin10CalendarTypeOptions,
+  Jin10FlashTypeOptions,
+  Jin10SymbolsDatatypeOptions,
+  Jin10SymbolsTypeOptions,
+  Jin10TypeOptions,
+} from '../../options';
+import DynamicInputVariable from '../components/dynamic-input-variable';
+
+const Jin10Form = ({ onValuesChange, form, node }: IOperatorForm) => {
+  const { t } = useTranslate('flow');
+
+  const jin10TypeOptions = useMemo(() => {
+    return Jin10TypeOptions.map((x) => ({
+      value: x,
+      label: t(`jin10TypeOptions.${x}`),
+    }));
+  }, [t]);
+
+  const jin10FlashTypeOptions = useMemo(() => {
+    return Jin10FlashTypeOptions.map((x) => ({
+      value: x,
+      label: t(`jin10FlashTypeOptions.${x}`),
+    }));
+  }, [t]);
+
+  const jin10CalendarTypeOptions = useMemo(() => {
+    return Jin10CalendarTypeOptions.map((x) => ({
+      value: x,
+      label: t(`jin10CalendarTypeOptions.${x}`),
+    }));
+  }, [t]);
+
+  const jin10CalendarDatashapeOptions = useMemo(() => {
+    return Jin10CalendarDatashapeOptions.map((x) => ({
+      value: x,
+      label: t(`jin10CalendarDatashapeOptions.${x}`),
+    }));
+  }, [t]);
+
+  const jin10SymbolsTypeOptions = useMemo(() => {
+    return Jin10SymbolsTypeOptions.map((x) => ({
+      value: x,
+      label: t(`jin10SymbolsTypeOptions.${x}`),
+    }));
+  }, [t]);
+
+  const jin10SymbolsDatatypeOptions = useMemo(() => {
+    return Jin10SymbolsDatatypeOptions.map((x) => ({
+      value: x,
+      label: t(`jin10SymbolsDatatypeOptions.${x}`),
+    }));
+  }, [t]);
+
+  return (
+    <Form
+      name="basic"
+      autoComplete="off"
+      form={form}
+      onValuesChange={onValuesChange}
+      layout={'vertical'}
+    >
+      <DynamicInputVariable node={node}></DynamicInputVariable>
+      <Form.Item label={t('type')} name={'type'} initialValue={'flash'}>
+        <Select options={jin10TypeOptions}></Select>
+      </Form.Item>
+      <Form.Item label={t('secretKey')} name={'secret_key'}>
+        <Input></Input>
+      </Form.Item>
+      <Form.Item noStyle dependencies={['type']}>
+        {({ getFieldValue }) => {
+          const type = getFieldValue('type');
+          switch (type) {
+            case 'flash':
+              return (
+                <>
+                  <Form.Item label={t('flashType')} name={'flash_type'}>
+                    <Select options={jin10FlashTypeOptions}></Select>
+                  </Form.Item>
+                  <Form.Item label={t('contain')} name={'contain'}>
+                    <Input></Input>
+                  </Form.Item>
+                  <Form.Item label={t('filter')} name={'filter'}>
+                    <Input></Input>
+                  </Form.Item>
+                </>
+              );
+
+            case 'calendar':
+              return (
+                <>
+                  <Form.Item label={t('calendarType')} name={'calendar_type'}>
+                    <Select options={jin10CalendarTypeOptions}></Select>
+                  </Form.Item>
+                  <Form.Item
+                    label={t('calendarDatashape')}
+                    name={'calendar_datashape'}
+                  >
+                    <Select options={jin10CalendarDatashapeOptions}></Select>
+                  </Form.Item>
+                </>
+              );
+
+            case 'symbols':
+              return (
+                <>
+                  <Form.Item label={t('symbolsType')} name={'symbols_type'}>
+                    <Select options={jin10SymbolsTypeOptions}></Select>
+                  </Form.Item>
+                  <Form.Item
+                    label={t('symbolsDatatype')}
+                    name={'symbols_datatype'}
+                  >
+                    <Select options={jin10SymbolsDatatypeOptions}></Select>
+                  </Form.Item>
+                </>
+              );
+
+            case 'news':
+              return (
+                <>
+                  <Form.Item label={t('contain')} name={'contain'}>
+                    <Input></Input>
+                  </Form.Item>
+                  <Form.Item label={t('filter')} name={'filter'}>
+                    <Input></Input>
+                  </Form.Item>
+                </>
+              );
+
+            default:
+              return <></>;
+          }
+        }}
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default Jin10Form;
diff --git a/web/src/pages/data-flow/form/keyword-extract-form/index.tsx b/web/src/pages/data-flow/form/keyword-extract-form/index.tsx
new file mode 100644
index 000000000..bda5d44f5
--- /dev/null
+++ b/web/src/pages/data-flow/form/keyword-extract-form/index.tsx
@@ -0,0 +1,48 @@
+import { NextLLMSelect } from '@/components/llm-select/next';
+import { TopNFormField } from '@/components/top-n-item';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { useTranslation } from 'react-i18next';
+import { INextOperatorForm } from '../../interface';
+import { DynamicInputVariable } from '../components/next-dynamic-input-variable';
+
+const KeywordExtractForm = ({ form, node }: INextOperatorForm) => {
+  const { t } = useTranslation();
+
+  return (
+    <Form {...form}>
+      <form
+        className="space-y-6"
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <DynamicInputVariable node={node}></DynamicInputVariable>
+        <FormField
+          control={form.control}
+          name="llm_id"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel tooltip={t('chat.modelTip')}>
+                {t('chat.model')}
+              </FormLabel>
+              <FormControl>
+                <NextLLMSelect {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <TopNFormField></TopNFormField>
+      </form>
+    </Form>
+  );
+};
+
+export default KeywordExtractForm;
diff --git a/web/src/pages/data-flow/form/message-form/index.tsx b/web/src/pages/data-flow/form/message-form/index.tsx
new file mode 100644
index 000000000..05c831a84
--- /dev/null
+++ b/web/src/pages/data-flow/form/message-form/index.tsx
@@ -0,0 +1,101 @@
+import { FormContainer } from '@/components/form-container';
+import { BlockButton, Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { X } from 'lucide-react';
+import { memo } from 'react';
+import { useFieldArray, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { INextOperatorForm } from '../../interface';
+import { FormWrapper } from '../components/form-wrapper';
+import { PromptEditor } from '../components/prompt-editor';
+import { useValues } from './use-values';
+import { useWatchFormChange } from './use-watch-change';
+
+function MessageForm({ node }: INextOperatorForm) {
+  const { t } = useTranslation();
+
+  const values = useValues(node);
+
+  const FormSchema = z.object({
+    content: z
+      .array(
+        z.object({
+          value: z.string(),
+        }),
+      )
+      .optional(),
+  });
+
+  const form = useForm({
+    defaultValues: values,
+    resolver: zodResolver(FormSchema),
+  });
+
+  useWatchFormChange(node?.id, form);
+
+  const { fields, append, remove } = useFieldArray({
+    name: 'content',
+    control: form.control,
+  });
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <FormContainer>
+          <FormItem>
+            <FormLabel tooltip={t('flow.msgTip')}>{t('flow.msg')}</FormLabel>
+            <div className="space-y-4">
+              {fields.map((field, index) => (
+                <div key={field.id} className="flex items-start gap-2">
+                  <FormField
+                    control={form.control}
+                    name={`content.${index}.value`}
+                    render={({ field }) => (
+                      <FormItem className="flex-1">
+                        <FormControl>
+                          {/* <Textarea {...field}> </Textarea> */}
+                          <PromptEditor
+                            {...field}
+                            placeholder={t('flow.messagePlaceholder')}
+                          ></PromptEditor>
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                  {fields.length > 1 && (
+                    <Button
+                      type="button"
+                      variant={'ghost'}
+                      onClick={() => remove(index)}
+                    >
+                      <X />
+                    </Button>
+                  )}
+                </div>
+              ))}
+
+              <BlockButton
+                type="button"
+                onClick={() => append({ value: '' })} // "" will cause the inability to add, refer to: https://github.com/orgs/react-hook-form/discussions/8485#discussioncomment-2961861
+              >
+                {t('flow.addMessage')}
+              </BlockButton>
+            </div>
+            <FormMessage />
+          </FormItem>
+        </FormContainer>
+      </FormWrapper>
+    </Form>
+  );
+}
+
+export default memo(MessageForm);
diff --git a/web/src/pages/data-flow/form/message-form/use-values.ts b/web/src/pages/data-flow/form/message-form/use-values.ts
new file mode 100644
index 000000000..6a90881be
--- /dev/null
+++ b/web/src/pages/data-flow/form/message-form/use-values.ts
@@ -0,0 +1,22 @@
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { isEmpty } from 'lodash';
+import { useMemo } from 'react';
+import { initialMessageValues } from '../../constant';
+import { convertToObjectArray } from '../../utils';
+
+export function useValues(node?: RAGFlowNodeType) {
+  const values = useMemo(() => {
+    const formData = node?.data?.form;
+
+    if (isEmpty(formData)) {
+      return initialMessageValues;
+    }
+
+    return {
+      ...formData,
+      content: convertToObjectArray(formData.content),
+    };
+  }, [node]);
+
+  return values;
+}
diff --git a/web/src/pages/data-flow/form/message-form/use-watch-change.ts b/web/src/pages/data-flow/form/message-form/use-watch-change.ts
new file mode 100644
index 000000000..10c35c653
--- /dev/null
+++ b/web/src/pages/data-flow/form/message-form/use-watch-change.ts
@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { UseFormReturn, useWatch } from 'react-hook-form';
+import useGraphStore from '../../store';
+import { convertToStringArray } from '../../utils';
+
+export function useWatchFormChange(id?: string, form?: UseFormReturn) {
+  let values = useWatch({ control: form?.control });
+  const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
+
+  useEffect(() => {
+    // Manually triggered form updates are synchronized to the canvas
+    if (id && form?.formState.isDirty) {
+      values = form?.getValues();
+      let nextValues: any = values;
+
+      nextValues = {
+        ...values,
+        content: convertToStringArray(values.content),
+      };
+
+      updateNodeForm(id, nextValues);
+    }
+  }, [form?.formState.isDirty, id, updateNodeForm, values]);
+}
diff --git a/web/src/pages/data-flow/form/pubmed-form/index.tsx b/web/src/pages/data-flow/form/pubmed-form/index.tsx
new file mode 100644
index 000000000..a2c35d55c
--- /dev/null
+++ b/web/src/pages/data-flow/form/pubmed-form/index.tsx
@@ -0,0 +1,90 @@
+import { FormContainer } from '@/components/form-container';
+import { TopNFormField } from '@/components/top-n-item';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { useTranslate } from '@/hooks/common-hooks';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { memo } from 'react';
+import { useForm, useFormContext } from 'react-hook-form';
+import { z } from 'zod';
+import { initialPubMedValues } 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';
+import { QueryVariable } from '../components/query-variable';
+
+export const PubMedFormPartialSchema = {
+  top_n: z.number(),
+  email: z.string().email(),
+};
+
+export const FormSchema = z.object({
+  ...PubMedFormPartialSchema,
+  query: z.string(),
+});
+
+export function PubMedFormWidgets() {
+  const form = useFormContext();
+  const { t } = useTranslate('flow');
+
+  return (
+    <>
+      <TopNFormField></TopNFormField>
+      <FormField
+        control={form.control}
+        name="email"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel tooltip={t('emailTip')}>{t('email')}</FormLabel>
+            <FormControl>
+              <Input {...field} />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </>
+  );
+}
+
+const outputList = buildOutputList(initialPubMedValues.outputs);
+
+function PubMedForm({ node }: INextOperatorForm) {
+  const defaultValues = useFormValues(initialPubMedValues, node);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    defaultValues,
+    resolver: zodResolver(FormSchema),
+    mode: 'onChange',
+  });
+
+  useWatchFormChange(node?.id, form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <FormContainer>
+          <QueryVariable></QueryVariable>
+        </FormContainer>
+        <FormContainer>
+          <PubMedFormWidgets></PubMedFormWidgets>
+        </FormContainer>
+      </FormWrapper>
+      <div className="p-5">
+        <Output list={outputList}></Output>
+      </div>
+    </Form>
+  );
+}
+
+export default memo(PubMedForm);
diff --git a/web/src/pages/data-flow/form/qweather-form/index.tsx b/web/src/pages/data-flow/form/qweather-form/index.tsx
new file mode 100644
index 000000000..eee088762
--- /dev/null
+++ b/web/src/pages/data-flow/form/qweather-form/index.tsx
@@ -0,0 +1,157 @@
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { RAGFlowSelect } from '@/components/ui/select';
+import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { INextOperatorForm } from '../../interface';
+import {
+  QWeatherLangOptions,
+  QWeatherTimePeriodOptions,
+  QWeatherTypeOptions,
+  QWeatherUserTypeOptions,
+} from '../../options';
+import { DynamicInputVariable } from '../components/next-dynamic-input-variable';
+
+enum FormFieldName {
+  Type = 'type',
+  UserType = 'user_type',
+}
+
+const QWeatherForm = ({ form, node }: INextOperatorForm) => {
+  const { t } = useTranslation();
+  const typeValue = form.watch(FormFieldName.Type);
+
+  const qWeatherLangOptions = useMemo(() => {
+    return QWeatherLangOptions.map((x) => ({
+      value: x,
+      label: t(`flow.qWeatherLangOptions.${x}`),
+    }));
+  }, [t]);
+
+  const qWeatherTypeOptions = useMemo(() => {
+    return QWeatherTypeOptions.map((x) => ({
+      value: x,
+      label: t(`flow.qWeatherTypeOptions.${x}`),
+    }));
+  }, [t]);
+
+  const qWeatherUserTypeOptions = useMemo(() => {
+    return QWeatherUserTypeOptions.map((x) => ({
+      value: x,
+      label: t(`flow.qWeatherUserTypeOptions.${x}`),
+    }));
+  }, [t]);
+
+  const getQWeatherTimePeriodOptions = useCallback(() => {
+    let options = QWeatherTimePeriodOptions;
+    const userType = form.getValues(FormFieldName.UserType);
+    if (userType === 'free') {
+      options = options.slice(0, 3);
+    }
+    return options.map((x) => ({
+      value: x,
+      label: t(`flow.qWeatherTimePeriodOptions.${x}`),
+    }));
+  }, [form, t]);
+
+  return (
+    <Form {...form}>
+      <form
+        className="space-y-6"
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <DynamicInputVariable node={node}></DynamicInputVariable>
+        <FormField
+          control={form.control}
+          name="web_apikey"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('flow.webApiKey')}</FormLabel>
+              <FormControl>
+                <Input {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="lang"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('flow.lang')}</FormLabel>
+              <FormControl>
+                <RAGFlowSelect
+                  {...field}
+                  options={qWeatherLangOptions}
+                ></RAGFlowSelect>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name={FormFieldName.Type}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('flow.type')}</FormLabel>
+              <FormControl>
+                <RAGFlowSelect
+                  {...field}
+                  options={qWeatherTypeOptions}
+                ></RAGFlowSelect>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name={FormFieldName.UserType}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('flow.userType')}</FormLabel>
+              <FormControl>
+                <RAGFlowSelect
+                  {...field}
+                  options={qWeatherUserTypeOptions}
+                ></RAGFlowSelect>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        {typeValue === 'weather' && (
+          <FormField
+            control={form.control}
+            name={'time_period'}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t('flow.timePeriod')}</FormLabel>
+                <FormControl>
+                  <RAGFlowSelect
+                    {...field}
+                    options={getQWeatherTimePeriodOptions()}
+                  ></RAGFlowSelect>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        )}
+      </form>
+    </Form>
+  );
+};
+
+export default QWeatherForm;
diff --git a/web/src/pages/data-flow/form/relevant-form/hooks.ts b/web/src/pages/data-flow/form/relevant-form/hooks.ts
new file mode 100644
index 000000000..413a0ac38
--- /dev/null
+++ b/web/src/pages/data-flow/form/relevant-form/hooks.ts
@@ -0,0 +1,41 @@
+import pick from 'lodash/pick';
+import { useCallback, useEffect } from 'react';
+import { IOperatorForm } from '../../interface';
+import useGraphStore from '../../store';
+
+export const useBuildRelevantOptions = () => {
+  const nodes = useGraphStore((state) => state.nodes);
+
+  const buildRelevantOptions = useCallback(
+    (toList: string[]) => {
+      return nodes
+        .filter(
+          (x) => !toList.some((y) => y === x.id), // filter out selected values ​​in other to fields from the current drop-down box options
+        )
+        .map((x) => ({ label: x.data.name, value: x.id }));
+    },
+    [nodes],
+  );
+
+  return buildRelevantOptions;
+};
+
+/**
+ *  monitor changes in the connection and synchronize the target to the yes and no fields of the form
+ *  similar to the categorize-form's useHandleFormValuesChange method
+ * @param param0
+ */
+export const useWatchConnectionChanges = ({ nodeId, form }: IOperatorForm) => {
+  const getNode = useGraphStore((state) => state.getNode);
+  const node = getNode(nodeId);
+
+  const watchFormChanges = useCallback(() => {
+    if (node) {
+      form?.setFieldsValue(pick(node, ['yes', 'no']));
+    }
+  }, [node, form]);
+
+  useEffect(() => {
+    watchFormChanges();
+  }, [watchFormChanges]);
+};
diff --git a/web/src/pages/data-flow/form/relevant-form/index.tsx b/web/src/pages/data-flow/form/relevant-form/index.tsx
new file mode 100644
index 000000000..e2366f6f0
--- /dev/null
+++ b/web/src/pages/data-flow/form/relevant-form/index.tsx
@@ -0,0 +1,49 @@
+import LLMSelect from '@/components/llm-select';
+import { useTranslate } from '@/hooks/common-hooks';
+import { Form, Select } from 'antd';
+import { Operator } from '../../constant';
+import { useBuildFormSelectOptions } from '../../form-hooks';
+import { IOperatorForm } from '../../interface';
+import { useWatchConnectionChanges } from './hooks';
+
+const RelevantForm = ({ onValuesChange, form, node }: IOperatorForm) => {
+  const { t } = useTranslate('flow');
+  const buildRelevantOptions = useBuildFormSelectOptions(
+    Operator.Relevant,
+    node?.id,
+  );
+  useWatchConnectionChanges({ nodeId: node?.id, form });
+
+  return (
+    <Form
+      name="basic"
+      labelCol={{ span: 4 }}
+      wrapperCol={{ span: 20 }}
+      onValuesChange={onValuesChange}
+      autoComplete="off"
+      form={form}
+    >
+      <Form.Item
+        name={'llm_id'}
+        label={t('model', { keyPrefix: 'chat' })}
+        tooltip={t('modelTip', { keyPrefix: 'chat' })}
+      >
+        <LLMSelect></LLMSelect>
+      </Form.Item>
+      <Form.Item label={t('yes')} name={'yes'}>
+        <Select
+          allowClear
+          options={buildRelevantOptions([form?.getFieldValue('no')])}
+        />
+      </Form.Item>
+      <Form.Item label={t('no')} name={'no'}>
+        <Select
+          allowClear
+          options={buildRelevantOptions([form?.getFieldValue('yes')])}
+        />
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default RelevantForm;
diff --git a/web/src/pages/data-flow/form/retrieval-form/next.tsx b/web/src/pages/data-flow/form/retrieval-form/next.tsx
new file mode 100644
index 000000000..425d08e4b
--- /dev/null
+++ b/web/src/pages/data-flow/form/retrieval-form/next.tsx
@@ -0,0 +1,126 @@
+import { Collapse } from '@/components/collapse';
+import { CrossLanguageFormField } from '@/components/cross-language-form-field';
+import { FormContainer } from '@/components/form-container';
+import { KnowledgeBaseFormField } from '@/components/knowledge-base-item';
+import { RAGFlowFormItem } from '@/components/ragflow-form';
+import { RerankFormFields } from '@/components/rerank';
+import { SimilaritySliderFormField } from '@/components/similarity-slider';
+import { TopNFormField } from '@/components/top-n-item';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Textarea } from '@/components/ui/textarea';
+import { UseKnowledgeGraphFormField } from '@/components/use-knowledge-graph-item';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { memo, useMemo } from 'react';
+import { useForm, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { initialRetrievalValues } from '../../constant';
+import { useWatchFormChange } from '../../hooks/use-watch-form-change';
+import { INextOperatorForm } from '../../interface';
+import { FormWrapper } from '../components/form-wrapper';
+import { Output } from '../components/output';
+import { PromptEditor } from '../components/prompt-editor';
+import { useValues } from './use-values';
+
+export const RetrievalPartialSchema = {
+  similarity_threshold: z.coerce.number(),
+  keywords_similarity_weight: z.coerce.number(),
+  top_n: z.coerce.number(),
+  top_k: z.coerce.number(),
+  kb_ids: z.array(z.string()),
+  rerank_id: z.string(),
+  empty_response: z.string(),
+  cross_languages: z.array(z.string()),
+  use_kg: z.boolean(),
+};
+
+export const FormSchema = z.object({
+  query: z.string().optional(),
+  ...RetrievalPartialSchema,
+});
+
+export function EmptyResponseField() {
+  const { t } = useTranslation();
+  const form = useFormContext();
+
+  return (
+    <FormField
+      control={form.control}
+      name="empty_response"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel tooltip={t('chat.emptyResponseTip')}>
+            {t('chat.emptyResponse')}
+          </FormLabel>
+          <FormControl>
+            <Textarea
+              placeholder={t('common.namePlaceholder')}
+              {...field}
+              autoComplete="off"
+              rows={4}
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+function RetrievalForm({ node }: INextOperatorForm) {
+  const { t } = useTranslation();
+
+  const outputList = useMemo(() => {
+    return [
+      {
+        title: 'formalized_content',
+        type: initialRetrievalValues.outputs.formalized_content.type,
+      },
+    ];
+  }, []);
+
+  const defaultValues = useValues(node);
+
+  const form = useForm({
+    defaultValues: defaultValues,
+    resolver: zodResolver(FormSchema),
+  });
+
+  useWatchFormChange(node?.id, form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <FormContainer>
+          <RAGFlowFormItem name="query" label={t('flow.query')}>
+            <PromptEditor></PromptEditor>
+          </RAGFlowFormItem>
+          <KnowledgeBaseFormField showVariable></KnowledgeBaseFormField>
+        </FormContainer>
+        <Collapse title={<div>{t('flow.advancedSettings')}</div>}>
+          <FormContainer>
+            <SimilaritySliderFormField
+              vectorSimilarityWeightName="keywords_similarity_weight"
+              isTooltipShown
+            ></SimilaritySliderFormField>
+            <TopNFormField></TopNFormField>
+            <RerankFormFields></RerankFormFields>
+            <EmptyResponseField></EmptyResponseField>
+            <CrossLanguageFormField name="cross_languages"></CrossLanguageFormField>
+            <UseKnowledgeGraphFormField name="use_kg"></UseKnowledgeGraphFormField>
+          </FormContainer>
+        </Collapse>
+        <Output list={outputList}></Output>
+      </FormWrapper>
+    </Form>
+  );
+}
+
+export default memo(RetrievalForm);
diff --git a/web/src/pages/data-flow/form/retrieval-form/use-values.ts b/web/src/pages/data-flow/form/retrieval-form/use-values.ts
new file mode 100644
index 000000000..1718645f0
--- /dev/null
+++ b/web/src/pages/data-flow/form/retrieval-form/use-values.ts
@@ -0,0 +1,25 @@
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { isEmpty } from 'lodash';
+import { useMemo } from 'react';
+import { initialRetrievalValues } from '../../constant';
+
+export function useValues(node?: RAGFlowNodeType) {
+  const defaultValues = useMemo(
+    () => ({
+      ...initialRetrievalValues,
+    }),
+    [],
+  );
+
+  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/form/rewrite-question-form/index.tsx b/web/src/pages/data-flow/form/rewrite-question-form/index.tsx
new file mode 100644
index 000000000..4c9466176
--- /dev/null
+++ b/web/src/pages/data-flow/form/rewrite-question-form/index.tsx
@@ -0,0 +1,68 @@
+import { NextLLMSelect } from '@/components/llm-select/next';
+import { MessageHistoryWindowSizeFormField } from '@/components/message-history-window-size-item';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { RAGFlowSelect } from '@/components/ui/select';
+import { useTranslation } from 'react-i18next';
+import { INextOperatorForm } from '../../interface';
+import { GoogleLanguageOptions } from '../../options';
+
+const RewriteQuestionForm = ({ form }: INextOperatorForm) => {
+  const { t } = useTranslation();
+
+  return (
+    <Form {...form}>
+      <form
+        className="space-y-6"
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <FormField
+          control={form.control}
+          name="llm_id"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel tooltip={t('chat.modelTip')}>
+                {t('chat.model')}
+              </FormLabel>
+              <FormControl>
+                <NextLLMSelect {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="language"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel tooltip={t('chat.languageTip')}>
+                {t('chat.language')}
+              </FormLabel>
+              <FormControl>
+                <RAGFlowSelect
+                  options={GoogleLanguageOptions}
+                  allowClear={true}
+                  {...field}
+                ></RAGFlowSelect>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <MessageHistoryWindowSizeFormField></MessageHistoryWindowSizeFormField>
+      </form>
+    </Form>
+  );
+};
+
+export default RewriteQuestionForm;
diff --git a/web/src/pages/data-flow/form/searxng-form/index.tsx b/web/src/pages/data-flow/form/searxng-form/index.tsx
new file mode 100644
index 000000000..193e5d84e
--- /dev/null
+++ b/web/src/pages/data-flow/form/searxng-form/index.tsx
@@ -0,0 +1,73 @@
+import { FormContainer } from '@/components/form-container';
+import { TopNFormField } from '@/components/top-n-item';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { useTranslate } from '@/hooks/common-hooks';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { memo } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { initialSearXNGValues } 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';
+import { QueryVariable } from '../components/query-variable';
+
+const FormSchema = z.object({
+  query: z.string(),
+  searxng_url: z.string().min(1),
+  top_n: z.string(),
+});
+
+const outputList = buildOutputList(initialSearXNGValues.outputs);
+
+function SearXNGForm({ node }: INextOperatorForm) {
+  const { t } = useTranslate('flow');
+  const defaultValues = useFormValues(initialSearXNGValues, node);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    defaultValues,
+    resolver: zodResolver(FormSchema),
+  });
+
+  useWatchFormChange(node?.id, form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <FormContainer>
+          <QueryVariable></QueryVariable>
+          <TopNFormField></TopNFormField>
+          <FormField
+            control={form.control}
+            name="searxng_url"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>SearXNG URL</FormLabel>
+                <FormControl>
+                  <Input {...field} placeholder="http://localhost:4000" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </FormContainer>
+      </FormWrapper>
+      <div className="p-5">
+        <Output list={outputList}></Output>
+      </div>
+    </Form>
+  );
+}
+
+export default memo(SearXNGForm);
diff --git a/web/src/pages/data-flow/form/string-transform-form/index.tsx b/web/src/pages/data-flow/form/string-transform-form/index.tsx
new file mode 100644
index 000000000..dc9258a18
--- /dev/null
+++ b/web/src/pages/data-flow/form/string-transform-form/index.tsx
@@ -0,0 +1,166 @@
+import { FormContainer } from '@/components/form-container';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { MultiSelect } from '@/components/ui/multi-select';
+import { RAGFlowSelect } from '@/components/ui/select';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { t } from 'i18next';
+import { toLower } from 'lodash';
+import { memo, useCallback, useMemo } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import { z } from 'zod';
+import {
+  StringTransformDelimiter,
+  StringTransformMethod,
+  initialStringTransformValues,
+} from '../../constant';
+import { INextOperatorForm } from '../../interface';
+import { FormWrapper } from '../components/form-wrapper';
+import { Output, transferOutputs } from '../components/output';
+import { PromptEditor } from '../components/prompt-editor';
+import { QueryVariable } from '../components/query-variable';
+import { useValues } from './use-values';
+import { useWatchFormChange } from './use-watch-form-change';
+
+const DelimiterOptions = Object.entries(StringTransformDelimiter).map(
+  ([key, val]) => ({ label: t('flow.' + toLower(key)), value: val }),
+);
+
+function StringTransformForm({ node }: INextOperatorForm) {
+  const values = useValues(node);
+
+  const FormSchema = z.object({
+    method: z.string(),
+    split_ref: z.string().optional(),
+    script: z.string().optional(),
+    delimiters: z.array(z.string()).or(z.string()),
+    outputs: z.object({ result: z.object({ type: z.string() }) }).optional(),
+  });
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    defaultValues: values,
+    resolver: zodResolver(FormSchema),
+  });
+
+  const method = useWatch({ control: form.control, name: 'method' });
+
+  const isSplit = method === StringTransformMethod.Split;
+
+  const outputList = useMemo(() => {
+    return transferOutputs(values.outputs);
+  }, [values.outputs]);
+
+  const handleMethodChange = useCallback(
+    (value: StringTransformMethod) => {
+      const isMerge = value === StringTransformMethod.Merge;
+      const outputs = {
+        ...initialStringTransformValues.outputs,
+        result: {
+          type: isMerge ? 'string' : 'Array<string>',
+        },
+      };
+      form.setValue('outputs', outputs);
+      form.setValue(
+        'delimiters',
+        isMerge ? StringTransformDelimiter.Comma : [],
+      );
+    },
+    [form],
+  );
+
+  useWatchFormChange(node?.id, form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <FormContainer>
+          <FormField
+            control={form.control}
+            name="method"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t('flow.method')}</FormLabel>
+                <FormControl>
+                  <RAGFlowSelect
+                    {...field}
+                    options={Object.values(StringTransformMethod).map(
+                      (val) => ({ label: t('flow.' + val), value: val }),
+                    )}
+                    onChange={(value) => {
+                      handleMethodChange(value);
+                      field.onChange(value);
+                    }}
+                  ></RAGFlowSelect>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          {isSplit && (
+            <QueryVariable
+              label={<FormLabel>split_ref</FormLabel>}
+              name="split_ref"
+            ></QueryVariable>
+          )}
+          {isSplit || (
+            <FormField
+              control={form.control}
+              name="script"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('flow.script')}</FormLabel>
+                  <FormControl>
+                    <PromptEditor {...field} showToolbar={false}></PromptEditor>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+          <FormField
+            control={form.control}
+            name="delimiters"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t('flow.delimiters')}</FormLabel>
+                <FormControl>
+                  {isSplit ? (
+                    <MultiSelect
+                      options={DelimiterOptions}
+                      onValueChange={field.onChange}
+                      defaultValue={field.value as string[]}
+                      variant="inverted"
+                      // {...field}
+                    />
+                  ) : (
+                    <RAGFlowSelect
+                      {...field}
+                      options={DelimiterOptions}
+                    ></RAGFlowSelect>
+                  )}
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="outputs"
+            render={() => <div></div>}
+          />
+        </FormContainer>
+      </FormWrapper>
+      <div className="p-5">
+        <Output list={outputList}></Output>
+      </div>
+    </Form>
+  );
+}
+
+export default memo(StringTransformForm);
diff --git a/web/src/pages/data-flow/form/string-transform-form/use-values.ts b/web/src/pages/data-flow/form/string-transform-form/use-values.ts
new file mode 100644
index 000000000..d4596e339
--- /dev/null
+++ b/web/src/pages/data-flow/form/string-transform-form/use-values.ts
@@ -0,0 +1,33 @@
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { isEmpty } from 'lodash';
+import { useMemo } from 'react';
+import {
+  initialStringTransformValues,
+  StringTransformMethod,
+} from '../../constant';
+
+function transferDelimiters(formData: typeof initialStringTransformValues) {
+  return formData.method === StringTransformMethod.Merge
+    ? formData.delimiters[0]
+    : formData.delimiters;
+}
+
+export function useValues(node?: RAGFlowNodeType) {
+  const values = useMemo(() => {
+    const formData = node?.data?.form;
+
+    if (isEmpty(formData)) {
+      return {
+        ...initialStringTransformValues,
+        delimiters: transferDelimiters(formData),
+      };
+    }
+
+    return {
+      ...formData,
+      delimiters: transferDelimiters(formData),
+    };
+  }, [node?.data?.form]);
+
+  return values;
+}
diff --git a/web/src/pages/data-flow/form/string-transform-form/use-watch-form-change.ts b/web/src/pages/data-flow/form/string-transform-form/use-watch-form-change.ts
new file mode 100644
index 000000000..c5b7841f2
--- /dev/null
+++ b/web/src/pages/data-flow/form/string-transform-form/use-watch-form-change.ts
@@ -0,0 +1,26 @@
+import { useEffect } from 'react';
+import { UseFormReturn, useWatch } from 'react-hook-form';
+import { StringTransformMethod } from '../../constant';
+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(() => {
+    // Manually triggered form updates are synchronized to the canvas
+    if (id && form?.formState.isDirty) {
+      values = form?.getValues();
+      let nextValues: any = values;
+
+      if (
+        values.delimiters !== undefined &&
+        values.method === StringTransformMethod.Merge
+      ) {
+        nextValues.delimiters = [values.delimiters];
+      }
+
+      updateNodeForm(id, nextValues);
+    }
+  }, [form?.formState.isDirty, id, updateNodeForm, values]);
+}
diff --git a/web/src/pages/data-flow/form/switch-form/index.tsx b/web/src/pages/data-flow/form/switch-form/index.tsx
new file mode 100644
index 000000000..b6dcf45bd
--- /dev/null
+++ b/web/src/pages/data-flow/form/switch-form/index.tsx
@@ -0,0 +1,328 @@
+import { FormContainer } from '@/components/form-container';
+import { IconFont } from '@/components/icon-font';
+import { SelectWithSearch } from '@/components/originui/select-with-search';
+import { BlockButton, Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@/components/ui/form';
+import { RAGFlowSelect } from '@/components/ui/select';
+import { Separator } from '@/components/ui/separator';
+import { Textarea } from '@/components/ui/textarea';
+import { cn } from '@/lib/utils';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { t } from 'i18next';
+import { toLower } from 'lodash';
+import { X } from 'lucide-react';
+import { memo, useCallback, useMemo } from 'react';
+import { useFieldArray, useForm, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import {
+  SwitchLogicOperatorOptions,
+  SwitchOperatorOptions,
+  VariableType,
+} from '../../constant';
+import { useBuildQueryVariableOptions } from '../../hooks/use-get-begin-query';
+import { IOperatorForm } from '../../interface';
+import { FormWrapper } from '../components/form-wrapper';
+import { useValues } from './use-values';
+import { useWatchFormChange } from './use-watch-change';
+
+const ConditionKey = 'conditions';
+const ItemKey = 'items';
+
+type ConditionCardsProps = {
+  name: string;
+  removeParent(index: number): void;
+  parentIndex: number;
+  parentLength: number;
+} & IOperatorForm;
+
+export const LogicalOperatorIcon = function OperatorIcon({
+  icon,
+  value,
+}: Omit<(typeof SwitchOperatorOptions)[0], 'label'>) {
+  if (typeof icon === 'string') {
+    return (
+      <IconFont
+        name={icon}
+        className={cn('size-4', {
+          'rotate-180': value === '>',
+        })}
+      ></IconFont>
+    );
+  }
+  return icon;
+};
+
+export function useBuildSwitchOperatorOptions() {
+  const { t } = useTranslation();
+
+  const switchOperatorOptions = useMemo(() => {
+    return SwitchOperatorOptions.map((x) => ({
+      value: x.value,
+      icon: (
+        <LogicalOperatorIcon
+          icon={x.icon}
+          value={x.value}
+        ></LogicalOperatorIcon>
+      ),
+      label: t(`flow.switchOperatorOptions.${x.label}`),
+    }));
+  }, [t]);
+
+  return switchOperatorOptions;
+}
+
+function ConditionCards({
+  name: parentName,
+  parentIndex,
+  removeParent,
+  parentLength,
+}: ConditionCardsProps) {
+  const form = useFormContext();
+
+  const nextOptions = useBuildQueryVariableOptions();
+
+  const finalOptions = useMemo(() => {
+    return nextOptions.map((x) => {
+      return {
+        ...x,
+        options: x.options.filter(
+          (y) => !toLower(y.type).includes(VariableType.Array),
+        ),
+      };
+    });
+  }, [nextOptions]);
+
+  const switchOperatorOptions = useBuildSwitchOperatorOptions();
+
+  const name = `${parentName}.${ItemKey}`;
+
+  const { fields, remove, append } = useFieldArray({
+    name: name,
+    control: form.control,
+  });
+
+  const handleRemove = useCallback(
+    (index: number) => () => {
+      remove(index);
+      if (parentIndex !== 0 && index === 0 && parentLength === 1) {
+        removeParent(parentIndex);
+      }
+    },
+    [parentIndex, parentLength, remove, removeParent],
+  );
+
+  return (
+    <section className="flex-1 space-y-2.5 min-w-0">
+      {fields.map((field, index) => {
+        return (
+          <div key={field.id} className="flex">
+            <Card
+              className={cn(
+                'relative bg-transparent border-input-border border flex-1 min-w-0',
+                {
+                  'before:w-10 before:absolute before:h-[1px] before:bg-input-border before:top-1/2 before:-left-10':
+                    fields.length > 1 &&
+                    (index === 0 || index === fields.length - 1),
+                },
+              )}
+            >
+              <section className="p-2 bg-bg-card flex justify-between items-center">
+                <FormField
+                  control={form.control}
+                  name={`${name}.${index}.cpn_id`}
+                  render={({ field }) => (
+                    <FormItem className="flex-1 min-w-0">
+                      <FormControl>
+                        <SelectWithSearch
+                          {...field}
+                          options={finalOptions}
+                          triggerClassName="text-accent-primary bg-transparent border-none truncate"
+                        ></SelectWithSearch>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <div className="flex items-center">
+                  <Separator orientation="vertical" className="h-2.5" />
+                  <FormField
+                    control={form.control}
+                    name={`${name}.${index}.operator`}
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormControl>
+                          <RAGFlowSelect
+                            {...field}
+                            options={switchOperatorOptions}
+                            onlyShowSelectedIcon
+                            triggerClassName="w-30 bg-transparent border-none"
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+              </section>
+              <CardContent className="p-4 ">
+                <FormField
+                  control={form.control}
+                  name={`${name}.${index}.value`}
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Textarea {...field} className="bg-transparent" />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </CardContent>
+            </Card>
+            <Button variant={'ghost'} onClick={handleRemove(index)}>
+              <X />
+            </Button>
+          </div>
+        );
+      })}
+      <div className="pr-9">
+        <BlockButton
+          className="mt-6"
+          onClick={() => append({ operator: switchOperatorOptions[0].value })}
+        >
+          {t('common.add')}
+        </BlockButton>
+      </div>
+    </section>
+  );
+}
+
+function SwitchForm({ node }: IOperatorForm) {
+  const { t } = useTranslation();
+  const values = useValues(node);
+  const switchOperatorOptions = useBuildSwitchOperatorOptions();
+
+  const FormSchema = z.object({
+    conditions: z.array(
+      z
+        .object({
+          logical_operator: z.string(),
+          items: z
+            .array(
+              z.object({
+                cpn_id: z.string(),
+                operator: z.string(),
+                value: z.string().optional(),
+              }),
+            )
+            .optional(),
+          to: z.array(z.string()).optional(),
+        })
+        .optional(),
+    ),
+  });
+
+  const form = useForm({
+    defaultValues: values,
+    resolver: zodResolver(FormSchema),
+  });
+
+  const { fields, remove, append } = useFieldArray({
+    name: ConditionKey,
+    control: form.control,
+  });
+
+  const switchLogicOperatorOptions = useMemo(() => {
+    return SwitchLogicOperatorOptions.map((x) => ({
+      value: x,
+      label: t(`flow.switchLogicOperatorOptions.${x}`),
+    }));
+  }, [t]);
+
+  useWatchFormChange(node?.id, form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        {fields.map((field, index) => {
+          const name = `${ConditionKey}.${index}`;
+          const conditions: Array<any> = form.getValues(`${name}.${ItemKey}`);
+          const conditionLength = conditions.length;
+          return (
+            <FormContainer key={field.id} className="">
+              <div className="flex justify-between items-center">
+                <section>
+                  <span>{index === 0 ? 'IF' : 'ELSEIF'}</span>
+                  <div className="text-text-secondary">Case {index + 1}</div>
+                </section>
+                {index !== 0 && (
+                  <Button
+                    variant={'secondary'}
+                    className="-translate-y-1"
+                    onClick={() => remove(index)}
+                  >
+                    {t('common.remove')} <X />
+                  </Button>
+                )}
+              </div>
+              <section className="flex gap-2 !mt-2 relative">
+                {conditionLength > 1 && (
+                  <section className="flex flex-col w-[72px]">
+                    <div className="relative  w-1 flex-1 before:absolute before:w-[1px]  before:bg-input-border before:top-20 before:bottom-0 before:left-10"></div>
+                    <FormField
+                      control={form.control}
+                      name={`${ConditionKey}.${index}.logical_operator`}
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <RAGFlowSelect
+                              {...field}
+                              options={switchLogicOperatorOptions}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                    <div className="relative  w-1 flex-1 before:absolute before:w-[1px]  before:bg-input-border before:top-0 before:bottom-36 before:left-10"></div>
+                  </section>
+                )}
+                <ConditionCards
+                  name={name}
+                  removeParent={remove}
+                  parentIndex={index}
+                  parentLength={fields.length}
+                ></ConditionCards>
+              </section>
+            </FormContainer>
+          );
+        })}
+        <BlockButton
+          onClick={() =>
+            append({
+              logical_operator: SwitchLogicOperatorOptions[0],
+              [ItemKey]: [
+                {
+                  operator: switchOperatorOptions[0].value,
+                },
+              ],
+              to: [],
+            })
+          }
+        >
+          {t('common.add')}
+        </BlockButton>
+      </FormWrapper>
+    </Form>
+  );
+}
+
+export default memo(SwitchForm);
diff --git a/web/src/pages/data-flow/form/switch-form/use-values.ts b/web/src/pages/data-flow/form/switch-form/use-values.ts
new file mode 100644
index 000000000..990bd0124
--- /dev/null
+++ b/web/src/pages/data-flow/form/switch-form/use-values.ts
@@ -0,0 +1,17 @@
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { isEmpty } from 'lodash';
+import { useMemo } from 'react';
+import { initialSwitchValues } from '../../constant';
+
+export function useValues(node?: RAGFlowNodeType) {
+  const values = useMemo(() => {
+    const formData = node?.data?.form;
+    if (isEmpty(formData)) {
+      return initialSwitchValues;
+    }
+
+    return formData;
+  }, [node]);
+
+  return values;
+}
diff --git a/web/src/pages/data-flow/form/switch-form/use-watch-change.ts b/web/src/pages/data-flow/form/switch-form/use-watch-change.ts
new file mode 100644
index 000000000..0c8b8259e
--- /dev/null
+++ b/web/src/pages/data-flow/form/switch-form/use-watch-change.ts
@@ -0,0 +1,24 @@
+import { ISwitchCondition } from '@/interfaces/database/agent';
+import { useEffect } from 'react';
+import { UseFormReturn, useWatch } from 'react-hook-form';
+import useGraphStore from '../../store';
+
+export function useWatchFormChange(id?: string, form?: UseFormReturn) {
+  let values = useWatch({ control: form?.control });
+  const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
+
+  useEffect(() => {
+    // Manually triggered form updates are synchronized to the canvas
+    console.log('🚀 ~ useWatchFormChange ~ values:', form?.formState.isDirty);
+    if (id) {
+      values = form?.getValues() || {};
+      let nextValues: any = {
+        ...values,
+        conditions:
+          values?.conditions?.map((x: ISwitchCondition) => ({ ...x })) ?? [], // Changing the form value with useFieldArray does not change the array reference
+      };
+
+      updateNodeForm(id, nextValues);
+    }
+  }, [form?.formState.isDirty, id, updateNodeForm, values]);
+}
diff --git a/web/src/pages/data-flow/form/tavily-extract-form/index.tsx b/web/src/pages/data-flow/form/tavily-extract-form/index.tsx
new file mode 100644
index 000000000..45a9e0fe7
--- /dev/null
+++ b/web/src/pages/data-flow/form/tavily-extract-form/index.tsx
@@ -0,0 +1,121 @@
+import { FormContainer } from '@/components/form-container';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { RAGFlowSelect } from '@/components/ui/select';
+import { buildOptions } from '@/utils/form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { t } from 'i18next';
+import { memo } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import {
+  TavilyExtractDepth,
+  TavilyExtractFormat,
+  initialTavilyExtractValues,
+} 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 { ApiKeyField } from '../components/api-key-field';
+import { FormWrapper } from '../components/form-wrapper';
+import { Output } from '../components/output';
+import { PromptEditor } from '../components/prompt-editor';
+import { TavilyFormSchema } from '../tavily-form';
+
+const outputList = buildOutputList(initialTavilyExtractValues.outputs);
+
+function TavilyExtractForm({ node }: INextOperatorForm) {
+  const values = useFormValues(initialTavilyExtractValues, node);
+
+  const FormSchema = z.object({
+    ...TavilyFormSchema,
+    urls: z.string(),
+    extract_depth: z.enum([
+      TavilyExtractDepth.Advanced,
+      TavilyExtractDepth.Basic,
+    ]),
+    format: z.enum([TavilyExtractFormat.Text, TavilyExtractFormat.Markdown]),
+  });
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    defaultValues: values,
+    resolver: zodResolver(FormSchema),
+  });
+
+  useWatchFormChange(node?.id, form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <FormContainer>
+          <ApiKeyField></ApiKeyField>
+        </FormContainer>
+        <FormContainer>
+          <FormField
+            control={form.control}
+            name="urls"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>URL</FormLabel>
+                <FormControl>
+                  <PromptEditor
+                    {...field}
+                    multiLine={false}
+                    showToolbar={false}
+                  ></PromptEditor>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="extract_depth"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t('flow.extractDepth')}</FormLabel>
+                <FormControl>
+                  <RAGFlowSelect
+                    placeholder="shadcn"
+                    {...field}
+                    options={buildOptions(TavilyExtractDepth, t, 'flow')}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="format"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t('flow.format')}</FormLabel>
+                <FormControl>
+                  <RAGFlowSelect
+                    placeholder="shadcn"
+                    {...field}
+                    options={buildOptions(TavilyExtractFormat)}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </FormContainer>
+      </FormWrapper>
+      <div className="p-5">
+        <Output list={outputList}></Output>
+      </div>
+    </Form>
+  );
+}
+
+export default memo(TavilyExtractForm);
diff --git a/web/src/pages/data-flow/form/tavily-form/dynamic-domain.tsx b/web/src/pages/data-flow/form/tavily-form/dynamic-domain.tsx
new file mode 100644
index 000000000..4c34dc946
--- /dev/null
+++ b/web/src/pages/data-flow/form/tavily-form/dynamic-domain.tsx
@@ -0,0 +1,60 @@
+import { BlockButton, Button } from '@/components/ui/button';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { t } from 'i18next';
+import { X } from 'lucide-react';
+import { ReactNode } from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+
+type DynamicDomainProps = { name: string; label: ReactNode };
+
+export const DynamicDomain = ({ name, label }: DynamicDomainProps) => {
+  const form = useFormContext();
+
+  const { fields, append, remove } = useFieldArray({
+    name: name,
+    control: form.control,
+  });
+
+  return (
+    <FormItem>
+      <FormLabel>{label}</FormLabel>
+      <div className="space-y-4">
+        {fields.map((field, index) => (
+          <div key={field.id} className="flex">
+            <div className="space-y-2 flex-1">
+              <FormField
+                control={form.control}
+                name={`${name}.${index}.value`}
+                render={({ field }) => (
+                  <FormItem className="flex-1">
+                    <FormControl>
+                      <Input {...field}></Input>
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+            </div>
+            <Button
+              type="button"
+              variant={'ghost'}
+              onClick={() => remove(index)}
+            >
+              <X />
+            </Button>
+          </div>
+        ))}
+      </div>
+      <FormMessage />
+      <BlockButton onClick={() => append({ value: '' })}>
+        {t('common.add')}
+      </BlockButton>
+    </FormItem>
+  );
+};
diff --git a/web/src/pages/data-flow/form/tavily-form/index.tsx b/web/src/pages/data-flow/form/tavily-form/index.tsx
new file mode 100644
index 000000000..afa8d859b
--- /dev/null
+++ b/web/src/pages/data-flow/form/tavily-form/index.tsx
@@ -0,0 +1,214 @@
+import { FormContainer } from '@/components/form-container';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { RAGFlowSelect } from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { buildOptions } from '@/utils/form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { t } from 'i18next';
+import { memo } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import {
+  TavilySearchDepth,
+  TavilyTopic,
+  initialTavilyValues,
+} from '../../constant';
+import { INextOperatorForm } from '../../interface';
+import { buildOutputList } from '../../utils/build-output-list';
+import { ApiKeyField } from '../components/api-key-field';
+import { FormWrapper } from '../components/form-wrapper';
+import { Output } from '../components/output';
+import { QueryVariable } from '../components/query-variable';
+import { DynamicDomain } from './dynamic-domain';
+import { useValues } from './use-values';
+import { useWatchFormChange } from './use-watch-change';
+
+export const TavilyFormSchema = {
+  api_key: z.string(),
+};
+
+const outputList = buildOutputList(initialTavilyValues.outputs);
+
+function TavilyForm({ node }: INextOperatorForm) {
+  const values = useValues(node);
+
+  const FormSchema = z.object({
+    ...TavilyFormSchema,
+    query: z.string(),
+    search_depth: z.enum([TavilySearchDepth.Advanced, TavilySearchDepth.Basic]),
+    topic: z.enum([TavilyTopic.News, TavilyTopic.General]),
+    max_results: z.coerce.number(),
+    days: z.coerce.number(),
+    include_answer: z.boolean(),
+    include_raw_content: z.boolean(),
+    include_images: z.boolean(),
+    include_image_descriptions: z.boolean(),
+    include_domains: z.array(z.object({ value: z.any() })), // TODO: z.string should be used, but an error will be reported
+    exclude_domains: z.array(z.object({ value: z.any() })),
+  });
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    defaultValues: values,
+    resolver: zodResolver(FormSchema),
+  });
+
+  useWatchFormChange(node?.id, form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <FormContainer>
+          <ApiKeyField></ApiKeyField>
+        </FormContainer>
+        <FormContainer>
+          <QueryVariable></QueryVariable>
+          <FormField
+            control={form.control}
+            name="search_depth"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t('flow.searchDepth')}</FormLabel>
+                <FormControl>
+                  <RAGFlowSelect
+                    placeholder="shadcn"
+                    {...field}
+                    options={buildOptions(TavilySearchDepth, t, 'flow')}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="topic"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t('flow.tavilyTopic')}</FormLabel>
+                <FormControl>
+                  <RAGFlowSelect
+                    placeholder="shadcn"
+                    {...field}
+                    options={buildOptions(TavilyTopic, t, 'flow')}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="max_results"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t('flow.maxResults')}</FormLabel>
+                <FormControl>
+                  <Input type={'number'} {...field}></Input>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="days"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t('flow.days')}</FormLabel>
+                <FormControl>
+                  <Input type={'number'} {...field}></Input>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="include_answer"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t('flow.includeAnswer')}</FormLabel>
+                <FormControl>
+                  <Switch
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  ></Switch>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="include_raw_content"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t('flow.includeRawContent')}</FormLabel>
+                <FormControl>
+                  <Switch
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  ></Switch>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="include_images"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t('flow.includeImages')}</FormLabel>
+                <FormControl>
+                  <Switch
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  ></Switch>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="include_image_descriptions"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t('flow.includeImageDescriptions')}</FormLabel>
+                <FormControl>
+                  <Switch
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  ></Switch>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <DynamicDomain
+            name="include_domains"
+            label={t('flow.includeDomains')}
+          ></DynamicDomain>
+          <DynamicDomain
+            name="exclude_domains"
+            label={t('flow.ExcludeDomains')}
+          ></DynamicDomain>
+        </FormContainer>
+      </FormWrapper>
+      <div className="p-5">
+        <Output list={outputList}></Output>
+      </div>
+    </Form>
+  );
+}
+
+export default memo(TavilyForm);
diff --git a/web/src/pages/data-flow/form/tavily-form/use-values.ts b/web/src/pages/data-flow/form/tavily-form/use-values.ts
new file mode 100644
index 000000000..011e04005
--- /dev/null
+++ b/web/src/pages/data-flow/form/tavily-form/use-values.ts
@@ -0,0 +1,23 @@
+import { RAGFlowNodeType } from '@/interfaces/database/agent';
+import { isEmpty } from 'lodash';
+import { useMemo } from 'react';
+import { initialTavilyValues } from '../../constant';
+import { convertToObjectArray } from '../../utils';
+
+export function useValues(node?: RAGFlowNodeType) {
+  const values = useMemo(() => {
+    const formData = node?.data?.form;
+
+    if (isEmpty(formData)) {
+      return initialTavilyValues;
+    }
+
+    return {
+      ...formData,
+      include_domains: convertToObjectArray(formData.include_domains),
+      exclude_domains: convertToObjectArray(formData.exclude_domains),
+    };
+  }, [node?.data?.form]);
+
+  return values;
+}
diff --git a/web/src/pages/data-flow/form/tavily-form/use-watch-change.ts b/web/src/pages/data-flow/form/tavily-form/use-watch-change.ts
new file mode 100644
index 000000000..cb24dce68
--- /dev/null
+++ b/web/src/pages/data-flow/form/tavily-form/use-watch-change.ts
@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import { UseFormReturn, useWatch } from 'react-hook-form';
+import useGraphStore from '../../store';
+import { convertToStringArray } from '../../utils';
+
+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,
+        include_domains: convertToStringArray(values.include_domains),
+        exclude_domains: convertToStringArray(values.exclude_domains),
+      };
+
+      updateNodeForm(id, nextValues);
+    }
+  }, [form?.formState.isDirty, id, updateNodeForm, values]);
+}
diff --git a/web/src/pages/data-flow/form/tushare-form/index.tsx b/web/src/pages/data-flow/form/tushare-form/index.tsx
new file mode 100644
index 000000000..a64bf25bf
--- /dev/null
+++ b/web/src/pages/data-flow/form/tushare-form/index.tsx
@@ -0,0 +1,83 @@
+import { useTranslate } from '@/hooks/common-hooks';
+import { DatePicker, DatePickerProps, Form, Input, Select } from 'antd';
+import dayjs from 'dayjs';
+import { useCallback, useMemo } from 'react';
+import { IOperatorForm } from '../../interface';
+import { TuShareSrcOptions } from '../../options';
+import DynamicInputVariable from '../components/dynamic-input-variable';
+
+const DateTimePicker = ({
+  onChange,
+  value,
+}: {
+  onChange?: (val: number | undefined) => void;
+  value?: number | undefined;
+}) => {
+  const handleChange: DatePickerProps['onChange'] = useCallback(
+    (val: any) => {
+      const nextVal = val?.format('YYYY-MM-DD HH:mm:ss');
+      onChange?.(nextVal ? nextVal : undefined);
+    },
+    [onChange],
+  );
+  // The value needs to be converted into a string and saved to the backend
+  const nextValue = useMemo(() => {
+    if (value) {
+      return dayjs(value);
+    }
+    return undefined;
+  }, [value]);
+
+  return (
+    <DatePicker
+      showTime
+      format="YYYY-MM-DD HH:mm:ss"
+      onChange={handleChange}
+      value={nextValue}
+    />
+  );
+};
+
+const TuShareForm = ({ onValuesChange, form, node }: IOperatorForm) => {
+  const { t } = useTranslate('flow');
+
+  const tuShareSrcOptions = useMemo(() => {
+    return TuShareSrcOptions.map((x) => ({
+      value: x,
+      label: t(`tuShareSrcOptions.${x}`),
+    }));
+  }, [t]);
+
+  return (
+    <Form
+      name="basic"
+      autoComplete="off"
+      form={form}
+      onValuesChange={onValuesChange}
+      layout={'vertical'}
+    >
+      <DynamicInputVariable node={node}></DynamicInputVariable>
+      <Form.Item
+        label={t('token')}
+        name={'token'}
+        tooltip={'Get from https://tushare.pro/'}
+      >
+        <Input></Input>
+      </Form.Item>
+      <Form.Item label={t('src')} name={'src'}>
+        <Select options={tuShareSrcOptions}></Select>
+      </Form.Item>
+      <Form.Item label={t('startDate')} name={'start_date'}>
+        <DateTimePicker />
+      </Form.Item>
+      <Form.Item label={t('endDate')} name={'end_date'}>
+        <DateTimePicker />
+      </Form.Item>
+      <Form.Item label={t('keyword')} name={'keyword'}>
+        <Input></Input>
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default TuShareForm;
diff --git a/web/src/pages/data-flow/form/user-fill-up-form/index.tsx b/web/src/pages/data-flow/form/user-fill-up-form/index.tsx
new file mode 100644
index 000000000..68def5601
--- /dev/null
+++ b/web/src/pages/data-flow/form/user-fill-up-form/index.tsx
@@ -0,0 +1,168 @@
+import { Collapse } from '@/components/collapse';
+import { Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+import { FormTooltip } from '@/components/ui/tooltip';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Plus } from 'lucide-react';
+import { memo } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { BeginQuery, INextOperatorForm } from '../../interface';
+import { ParameterDialog } from '../begin-form/parameter-dialog';
+import { QueryTable } from '../begin-form/query-table';
+import { useEditQueryRecord } from '../begin-form/use-edit-query';
+import { Output } from '../components/output';
+import { useValues } from './use-values';
+import { useWatchFormChange } from './use-watch-change';
+
+function UserFillUpForm({ node }: INextOperatorForm) {
+  const { t } = useTranslation();
+
+  const values = useValues(node);
+
+  const FormSchema = z.object({
+    enable_tips: z.boolean().optional(),
+    tips: z.string().trim().optional(),
+    inputs: z
+      .array(
+        z.object({
+          key: z.string(),
+          type: z.string(),
+          value: z.string(),
+          optional: z.boolean(),
+          name: z.string(),
+          options: z.array(z.union([z.number(), z.string(), z.boolean()])),
+        }),
+      )
+      .optional(),
+  });
+
+  const form = useForm({
+    defaultValues: values,
+    resolver: zodResolver(FormSchema),
+  });
+
+  useWatchFormChange(node?.id, form);
+
+  const inputs: BeginQuery[] = useWatch({
+    control: form.control,
+    name: 'inputs',
+  });
+
+  const outputList = inputs?.map((item) => ({
+    title: item.name,
+    type: item.type,
+  }));
+
+  const {
+    ok,
+    currentRecord,
+    visible,
+    hideModal,
+    showModal,
+    otherThanCurrentQuery,
+    handleDeleteRecord,
+  } = useEditQueryRecord({
+    form,
+    node,
+  });
+
+  return (
+    <section className="px-5 space-y-5">
+      <Form {...form}>
+        <FormField
+          control={form.control}
+          name={'enable_tips'}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel tooltip={t('flow.openingSwitchTip')}>
+                {t('flow.guidingQuestion')}
+              </FormLabel>
+              <FormControl>
+                <Switch
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name={'tips'}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel tooltip={t('chat.setAnOpenerTip')}>
+                {t('flow.msg')}
+              </FormLabel>
+              <FormControl>
+                <Textarea
+                  rows={5}
+                  {...field}
+                  placeholder={t('common.pleaseInput')}
+                ></Textarea>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {/* Create a hidden field to make Form instance record this */}
+        <FormField
+          control={form.control}
+          name={'inputs'}
+          render={() => <div></div>}
+        />
+        <Collapse
+          title={
+            <div>
+              {t('flow.input')}
+              <FormTooltip tooltip={t('flow.beginInputTip')}></FormTooltip>
+            </div>
+          }
+          rightContent={
+            <Button
+              variant={'ghost'}
+              onClick={(e) => {
+                e.preventDefault();
+                showModal();
+              }}
+            >
+              <Plus />
+            </Button>
+          }
+        >
+          <QueryTable
+            data={inputs}
+            showModal={showModal}
+            deleteRecord={handleDeleteRecord}
+          ></QueryTable>
+        </Collapse>
+
+        {visible && (
+          <ParameterDialog
+            hideModal={hideModal}
+            initialValue={currentRecord}
+            otherThanCurrentQuery={otherThanCurrentQuery}
+            submit={ok}
+          ></ParameterDialog>
+        )}
+      </Form>
+      <Output list={outputList}></Output>
+    </section>
+  );
+}
+
+export default memo(UserFillUpForm);
diff --git a/web/src/pages/data-flow/form/user-fill-up-form/use-values.ts b/web/src/pages/data-flow/form/user-fill-up-form/use-values.ts
new file mode 100644
index 000000000..0af1c78c3
--- /dev/null
+++ b/web/src/pages/data-flow/form/user-fill-up-form/use-values.ts
@@ -0,0 +1,21 @@
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { isEmpty } from 'lodash';
+import { useMemo } from 'react';
+import { initialUserFillUpValues } from '../../constant';
+import { buildBeginInputListFromObject } from '../begin-form/utils';
+
+export function useValues(node?: RAGFlowNodeType) {
+  const values = useMemo(() => {
+    const formData = node?.data?.form;
+
+    if (isEmpty(formData)) {
+      return initialUserFillUpValues;
+    }
+
+    const inputs = buildBeginInputListFromObject(formData?.inputs);
+
+    return { ...(formData || {}), inputs };
+  }, [node?.data?.form]);
+
+  return values;
+}
diff --git a/web/src/pages/data-flow/form/user-fill-up-form/use-watch-change.ts b/web/src/pages/data-flow/form/user-fill-up-form/use-watch-change.ts
new file mode 100644
index 000000000..bdf4b9a91
--- /dev/null
+++ b/web/src/pages/data-flow/form/user-fill-up-form/use-watch-change.ts
@@ -0,0 +1,35 @@
+import { omit } from 'lodash';
+import { useEffect } from 'react';
+import { UseFormReturn, useWatch } from 'react-hook-form';
+import { BeginQuery } from '../../interface';
+import useGraphStore from '../../store';
+
+function transferInputsArrayToObject(inputs: BeginQuery[] = []) {
+  return inputs.reduce<Record<string, Omit<BeginQuery, 'key'>>>((pre, cur) => {
+    pre[cur.key] = omit(cur, 'key');
+
+    return pre;
+  }, {});
+}
+
+export function useWatchFormChange(id?: string, form?: UseFormReturn) {
+  let values = useWatch({ control: form?.control });
+  const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
+
+  useEffect(() => {
+    // TODO: This should only be executed when the form changes
+    if (id) {
+      values = form?.getValues() || {};
+
+      const inputs = transferInputsArrayToObject(values.inputs);
+
+      const nextValues = {
+        ...values,
+        inputs,
+        outputs: inputs,
+      };
+
+      updateNodeForm(id, nextValues);
+    }
+  }, [form?.formState.isDirty, id, updateNodeForm, values]);
+}
diff --git a/web/src/pages/data-flow/form/wencai-form/index.tsx b/web/src/pages/data-flow/form/wencai-form/index.tsx
new file mode 100644
index 000000000..a4e668ed9
--- /dev/null
+++ b/web/src/pages/data-flow/form/wencai-form/index.tsx
@@ -0,0 +1,97 @@
+import { FormContainer } from '@/components/form-container';
+import { TopNFormField } from '@/components/top-n-item';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { RAGFlowSelect } from '@/components/ui/select';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { memo, useMemo } from 'react';
+import { useForm, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { initialWenCaiValues } from '../../constant';
+import { useFormValues } from '../../hooks/use-form-values';
+import { useWatchFormChange } from '../../hooks/use-watch-form-change';
+import { INextOperatorForm } from '../../interface';
+import { WenCaiQueryTypeOptions } from '../../options';
+import { buildOutputList } from '../../utils/build-output-list';
+import { FormWrapper } from '../components/form-wrapper';
+import { Output } from '../components/output';
+import { QueryVariable } from '../components/query-variable';
+
+export const WenCaiPartialSchema = {
+  top_n: z.number(),
+  query_type: z.string(),
+};
+
+export const FormSchema = z.object({
+  ...WenCaiPartialSchema,
+  query: z.string(),
+});
+
+export function WenCaiFormWidgets() {
+  const { t } = useTranslation();
+  const form = useFormContext();
+
+  const wenCaiQueryTypeOptions = useMemo(() => {
+    return WenCaiQueryTypeOptions.map((x) => ({
+      value: x,
+      label: t(`flow.wenCaiQueryTypeOptions.${x}`),
+    }));
+  }, [t]);
+
+  return (
+    <>
+      <TopNFormField max={99}></TopNFormField>
+      <FormField
+        control={form.control}
+        name="query_type"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('flow.queryType')}</FormLabel>
+            <FormControl>
+              <RAGFlowSelect {...field} options={wenCaiQueryTypeOptions} />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </>
+  );
+}
+
+const outputList = buildOutputList(initialWenCaiValues.outputs);
+
+function WenCaiForm({ node }: INextOperatorForm) {
+  const defaultValues = useFormValues(initialWenCaiValues, node);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    defaultValues,
+    resolver: zodResolver(FormSchema),
+  });
+
+  useWatchFormChange(node?.id, form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <FormContainer>
+          <QueryVariable></QueryVariable>
+        </FormContainer>
+        <FormContainer>
+          <WenCaiFormWidgets></WenCaiFormWidgets>
+        </FormContainer>
+      </FormWrapper>
+      <div className="p-5">
+        <Output list={outputList}></Output>
+      </div>
+    </Form>
+  );
+}
+
+export default memo(WenCaiForm);
diff --git a/web/src/pages/data-flow/form/wikipedia-form/index.tsx b/web/src/pages/data-flow/form/wikipedia-form/index.tsx
new file mode 100644
index 000000000..1603d802e
--- /dev/null
+++ b/web/src/pages/data-flow/form/wikipedia-form/index.tsx
@@ -0,0 +1,88 @@
+import { FormContainer } from '@/components/form-container';
+import { SelectWithSearch } from '@/components/originui/select-with-search';
+import { TopNFormField } from '@/components/top-n-item';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { useTranslate } from '@/hooks/common-hooks';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { memo } from 'react';
+import { useForm, useFormContext } from 'react-hook-form';
+import { z } from 'zod';
+import { initialWikipediaValues } from '../../constant';
+import { useFormValues } from '../../hooks/use-form-values';
+import { useWatchFormChange } from '../../hooks/use-watch-form-change';
+import { INextOperatorForm } from '../../interface';
+import { LanguageOptions } from '../../options';
+import { buildOutputList } from '../../utils/build-output-list';
+import { FormWrapper } from '../components/form-wrapper';
+import { Output } from '../components/output';
+import { QueryVariable } from '../components/query-variable';
+
+export const WikipediaFormPartialSchema = {
+  top_n: z.string(),
+  language: z.string(),
+};
+
+const FormSchema = z.object({
+  query: z.string(),
+  ...WikipediaFormPartialSchema,
+});
+
+export function WikipediaFormWidgets() {
+  const { t } = useTranslate('common');
+  const form = useFormContext();
+
+  return (
+    <>
+      <TopNFormField></TopNFormField>
+      <FormField
+        control={form.control}
+        name="language"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('language')}</FormLabel>
+            <FormControl>
+              <SelectWithSearch {...field} options={LanguageOptions} />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </>
+  );
+}
+
+const outputList = buildOutputList(initialWikipediaValues.outputs);
+
+function WikipediaForm({ node }: INextOperatorForm) {
+  const defaultValues = useFormValues(initialWikipediaValues, node);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    defaultValues,
+    resolver: zodResolver(FormSchema),
+  });
+
+  useWatchFormChange(node?.id, form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <FormContainer>
+          <QueryVariable></QueryVariable>
+          <WikipediaFormWidgets></WikipediaFormWidgets>
+        </FormContainer>
+      </FormWrapper>
+      <div className="p-5">
+        <Output list={outputList}></Output>
+      </div>
+    </Form>
+  );
+}
+
+export default memo(WikipediaForm);
diff --git a/web/src/pages/data-flow/form/yahoo-finance-form/index.tsx b/web/src/pages/data-flow/form/yahoo-finance-form/index.tsx
new file mode 100644
index 000000000..68a34836b
--- /dev/null
+++ b/web/src/pages/data-flow/form/yahoo-finance-form/index.tsx
@@ -0,0 +1,125 @@
+import { FormContainer } from '@/components/form-container';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Switch } from '@/components/ui/switch';
+import { useTranslate } from '@/hooks/common-hooks';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { ReactNode } from 'react';
+import { useForm, useFormContext } from 'react-hook-form';
+import { z } from 'zod';
+import { initialYahooFinanceValues } 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';
+import { QueryVariable } from '../components/query-variable';
+
+export const YahooFinanceFormPartialSchema = {
+  info: z.boolean(),
+  history: z.boolean(),
+  financials: z.boolean(),
+  balance_sheet: z.boolean(),
+  cash_flow_statement: z.boolean(),
+  news: z.boolean(),
+};
+
+const FormSchema = z.object({
+  stock_code: z.string(),
+  ...YahooFinanceFormPartialSchema,
+});
+
+interface SwitchFormFieldProps {
+  name: string;
+  label: ReactNode;
+}
+function SwitchFormField({ name, label }: SwitchFormFieldProps) {
+  const form = useFormContext();
+
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{label}</FormLabel>
+          <FormControl>
+            <Switch
+              checked={field.value}
+              onCheckedChange={field.onChange}
+            ></Switch>
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+export function YahooFinanceFormWidgets() {
+  const { t } = useTranslate('flow');
+  return (
+    <>
+      <SwitchFormField name="info" label={t('info')}></SwitchFormField>
+      <SwitchFormField name="history" label={t('history')}></SwitchFormField>
+      <SwitchFormField
+        name="financials"
+        label={t('financials')}
+      ></SwitchFormField>
+      <SwitchFormField
+        name="balance_sheet"
+        label={t('balanceSheet')}
+      ></SwitchFormField>
+
+      <SwitchFormField
+        name="cash_flow_statement"
+        label={t('cashFlowStatement')}
+      ></SwitchFormField>
+
+      <SwitchFormField name="news" label={t('news')}></SwitchFormField>
+    </>
+  );
+}
+
+const outputList = buildOutputList(initialYahooFinanceValues.outputs);
+
+const YahooFinanceForm = ({ node }: INextOperatorForm) => {
+  const { t } = useTranslate('flow');
+
+  const defaultValues = useFormValues(initialYahooFinanceValues, node);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    defaultValues,
+    resolver: zodResolver(FormSchema),
+  });
+
+  useWatchFormChange(node?.id, form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <FormContainer>
+          <QueryVariable
+            name="stock_code"
+            label={t('stockCode')}
+          ></QueryVariable>
+        </FormContainer>
+        <FormContainer>
+          <YahooFinanceFormWidgets></YahooFinanceFormWidgets>
+        </FormContainer>
+      </FormWrapper>
+      <div className="p-5">
+        <Output list={outputList}></Output>
+      </div>
+    </Form>
+  );
+};
+
+export default YahooFinanceForm;
diff --git a/web/src/pages/data-flow/hooks.tsx b/web/src/pages/data-flow/hooks.tsx
new file mode 100644
index 000000000..5d1537623
--- /dev/null
+++ b/web/src/pages/data-flow/hooks.tsx
@@ -0,0 +1,405 @@
+import {
+  Connection,
+  Edge,
+  getOutgoers,
+  Node,
+  Position,
+  ReactFlowInstance,
+} from '@xyflow/react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+// import { shallow } from 'zustand/shallow';
+import { useFetchModelId } from '@/hooks/logic-hooks';
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { humanId } from 'human-id';
+import { get, lowerFirst } from 'lodash';
+import { useTranslation } from 'react-i18next';
+import {
+  initialAgentValues,
+  initialAkShareValues,
+  initialArXivValues,
+  initialBaiduFanyiValues,
+  initialBaiduValues,
+  initialBeginValues,
+  initialBingValues,
+  initialCategorizeValues,
+  initialCodeValues,
+  initialConcentratorValues,
+  initialCrawlerValues,
+  initialDeepLValues,
+  initialDuckValues,
+  initialEmailValues,
+  initialExeSqlValues,
+  initialGithubValues,
+  initialGoogleScholarValues,
+  initialGoogleValues,
+  initialInvokeValues,
+  initialIterationValues,
+  initialJin10Values,
+  initialKeywordExtractValues,
+  initialMessageValues,
+  initialNoteValues,
+  initialPubMedValues,
+  initialQWeatherValues,
+  initialRelevantValues,
+  initialRetrievalValues,
+  initialRewriteQuestionValues,
+  initialSearXNGValues,
+  initialStringTransformValues,
+  initialSwitchValues,
+  initialTavilyExtractValues,
+  initialTavilyValues,
+  initialTuShareValues,
+  initialUserFillUpValues,
+  initialWaitingDialogueValues,
+  initialWenCaiValues,
+  initialWikipediaValues,
+  initialYahooFinanceValues,
+  NodeMap,
+  Operator,
+  RestrictedUpstreamMap,
+} from './constant';
+import useGraphStore, { RFState } from './store';
+import {
+  generateNodeNamesWithIncreasingIndex,
+  getNodeDragHandle,
+  getRelativePositionToIterationNode,
+  replaceIdWithText,
+} from './utils';
+
+const selector = (state: RFState) => ({
+  nodes: state.nodes,
+  edges: state.edges,
+  onNodesChange: state.onNodesChange,
+  onEdgesChange: state.onEdgesChange,
+  onConnect: state.onConnect,
+  setNodes: state.setNodes,
+  onSelectionChange: state.onSelectionChange,
+  onEdgeMouseEnter: state.onEdgeMouseEnter,
+  onEdgeMouseLeave: state.onEdgeMouseLeave,
+});
+
+export const useSelectCanvasData = () => {
+  // return useStore(useShallow(selector)); // throw error
+  // return useStore(selector, shallow);
+  return useGraphStore(selector);
+};
+
+export const useInitializeOperatorParams = () => {
+  const llmId = useFetchModelId();
+
+  const initialFormValuesMap = useMemo(() => {
+    return {
+      [Operator.Begin]: initialBeginValues,
+      [Operator.Retrieval]: initialRetrievalValues,
+      [Operator.Categorize]: { ...initialCategorizeValues, llm_id: llmId },
+      [Operator.Relevant]: { ...initialRelevantValues, llm_id: llmId },
+      [Operator.RewriteQuestion]: {
+        ...initialRewriteQuestionValues,
+        llm_id: llmId,
+      },
+      [Operator.Message]: initialMessageValues,
+      [Operator.KeywordExtract]: {
+        ...initialKeywordExtractValues,
+        llm_id: llmId,
+      },
+      [Operator.DuckDuckGo]: initialDuckValues,
+      [Operator.Baidu]: initialBaiduValues,
+      [Operator.Wikipedia]: initialWikipediaValues,
+      [Operator.PubMed]: initialPubMedValues,
+      [Operator.ArXiv]: initialArXivValues,
+      [Operator.Google]: initialGoogleValues,
+      [Operator.Bing]: initialBingValues,
+      [Operator.GoogleScholar]: initialGoogleScholarValues,
+      [Operator.DeepL]: initialDeepLValues,
+      [Operator.SearXNG]: initialSearXNGValues,
+      [Operator.GitHub]: initialGithubValues,
+      [Operator.BaiduFanyi]: initialBaiduFanyiValues,
+      [Operator.QWeather]: initialQWeatherValues,
+      [Operator.ExeSQL]: { ...initialExeSqlValues, llm_id: llmId },
+      [Operator.Switch]: initialSwitchValues,
+      [Operator.WenCai]: initialWenCaiValues,
+      [Operator.AkShare]: initialAkShareValues,
+      [Operator.YahooFinance]: initialYahooFinanceValues,
+      [Operator.Jin10]: initialJin10Values,
+      [Operator.Concentrator]: initialConcentratorValues,
+      [Operator.TuShare]: initialTuShareValues,
+      [Operator.Note]: initialNoteValues,
+      [Operator.Crawler]: initialCrawlerValues,
+      [Operator.Invoke]: initialInvokeValues,
+      [Operator.Email]: initialEmailValues,
+      [Operator.Iteration]: initialIterationValues,
+      [Operator.IterationStart]: initialIterationValues,
+      [Operator.Code]: initialCodeValues,
+      [Operator.WaitingDialogue]: initialWaitingDialogueValues,
+      [Operator.Agent]: { ...initialAgentValues, llm_id: llmId },
+      [Operator.TavilySearch]: initialTavilyValues,
+      [Operator.TavilyExtract]: initialTavilyExtractValues,
+      [Operator.Tool]: {},
+      [Operator.UserFillUp]: initialUserFillUpValues,
+      [Operator.StringTransform]: initialStringTransformValues,
+    };
+  }, [llmId]);
+
+  const initializeOperatorParams = useCallback(
+    (operatorName: Operator) => {
+      return initialFormValuesMap[operatorName];
+    },
+    [initialFormValuesMap],
+  );
+
+  return initializeOperatorParams;
+};
+
+export const useHandleDrag = () => {
+  const handleDragStart = useCallback(
+    (operatorId: string) => (ev: React.DragEvent<HTMLDivElement>) => {
+      ev.dataTransfer.setData('application/@xyflow/react', operatorId);
+      ev.dataTransfer.effectAllowed = 'move';
+    },
+    [],
+  );
+
+  return { handleDragStart };
+};
+
+export const useGetNodeName = () => {
+  const { t } = useTranslation();
+
+  return (type: string) => {
+    const name = t(`flow.${lowerFirst(type)}`);
+    return name;
+  };
+};
+
+export const useHandleDrop = () => {
+  const addNode = useGraphStore((state) => state.addNode);
+  const nodes = useGraphStore((state) => state.nodes);
+  const [reactFlowInstance, setReactFlowInstance] =
+    useState<ReactFlowInstance<any, any>>();
+  const initializeOperatorParams = useInitializeOperatorParams();
+  const getNodeName = useGetNodeName();
+
+  const onDragOver = useCallback((event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+  }, []);
+
+  const onDrop = useCallback(
+    (event: React.DragEvent<HTMLDivElement>) => {
+      event.preventDefault();
+
+      const type = event.dataTransfer.getData('application/@xyflow/react');
+
+      // check if the dropped element is valid
+      if (typeof type === 'undefined' || !type) {
+        return;
+      }
+
+      // reactFlowInstance.project was renamed to reactFlowInstance.screenToFlowPosition
+      // and you don't need to subtract the reactFlowBounds.left/top anymore
+      // details: https://@xyflow/react.dev/whats-new/2023-11-10
+      const position = reactFlowInstance?.screenToFlowPosition({
+        x: event.clientX,
+        y: event.clientY,
+      });
+      const newNode: Node<any> = {
+        id: `${type}:${humanId()}`,
+        type: NodeMap[type as Operator] || 'ragNode',
+        position: position || {
+          x: 0,
+          y: 0,
+        },
+        data: {
+          label: `${type}`,
+          name: generateNodeNamesWithIncreasingIndex(getNodeName(type), nodes),
+          form: initializeOperatorParams(type as Operator),
+        },
+        sourcePosition: Position.Right,
+        targetPosition: Position.Left,
+        dragHandle: getNodeDragHandle(type),
+      };
+
+      if (type === Operator.Iteration) {
+        newNode.width = 500;
+        newNode.height = 250;
+        const iterationStartNode: Node<any> = {
+          id: `${Operator.IterationStart}:${humanId()}`,
+          type: 'iterationStartNode',
+          position: { x: 50, y: 100 },
+          // draggable: false,
+          data: {
+            label: Operator.IterationStart,
+            name: Operator.IterationStart,
+            form: {},
+          },
+          parentId: newNode.id,
+          extent: 'parent',
+        };
+        addNode(newNode);
+        addNode(iterationStartNode);
+      } else {
+        const subNodeOfIteration = getRelativePositionToIterationNode(
+          nodes,
+          position,
+        );
+        if (subNodeOfIteration) {
+          newNode.parentId = subNodeOfIteration.parentId;
+          newNode.position = subNodeOfIteration.position;
+          newNode.extent = 'parent';
+        }
+        addNode(newNode);
+      }
+    },
+    [reactFlowInstance, getNodeName, nodes, initializeOperatorParams, addNode],
+  );
+
+  return { onDrop, onDragOver, setReactFlowInstance, reactFlowInstance };
+};
+
+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;
+};
+
+export const useCopyPaste = () => {
+  const nodes = useGraphStore((state) => state.nodes);
+  const duplicateNode = useDuplicateNode();
+
+  const onCopyCapture = useCallback(
+    (event: ClipboardEvent) => {
+      if (get(event, 'srcElement.tagName') !== 'BODY') return;
+
+      event.preventDefault();
+      const nodesStr = JSON.stringify(
+        nodes.filter((n) => n.selected && n.data.label !== Operator.Begin),
+      );
+
+      event.clipboardData?.setData('agent:nodes', nodesStr);
+    },
+    [nodes],
+  );
+
+  const onPasteCapture = useCallback(
+    (event: ClipboardEvent) => {
+      const nodes = JSON.parse(
+        event.clipboardData?.getData('agent:nodes') || '[]',
+      ) as RAGFlowNodeType[] | undefined;
+
+      if (Array.isArray(nodes) && nodes.length) {
+        event.preventDefault();
+        nodes.forEach((n) => {
+          duplicateNode(n.id, n.data.label);
+        });
+      }
+    },
+    [duplicateNode],
+  );
+
+  useEffect(() => {
+    window.addEventListener('copy', onCopyCapture);
+    return () => {
+      window.removeEventListener('copy', onCopyCapture);
+    };
+  }, [onCopyCapture]);
+
+  useEffect(() => {
+    window.addEventListener('paste', onPasteCapture);
+    return () => {
+      window.removeEventListener('paste', onPasteCapture);
+    };
+  }, [onPasteCapture]);
+};
diff --git a/web/src/pages/data-flow/hooks/use-add-node.ts b/web/src/pages/data-flow/hooks/use-add-node.ts
new file mode 100644
index 000000000..625eeb5cd
--- /dev/null
+++ b/web/src/pages/data-flow/hooks/use-add-node.ts
@@ -0,0 +1,462 @@
+import { useFetchModelId } from '@/hooks/logic-hooks';
+import { Connection, Node, Position, ReactFlowInstance } from '@xyflow/react';
+import humanId from 'human-id';
+import { t } from 'i18next';
+import { lowerFirst } from 'lodash';
+import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  NodeHandleId,
+  NodeMap,
+  Operator,
+  initialAgentValues,
+  initialAkShareValues,
+  initialArXivValues,
+  initialBaiduFanyiValues,
+  initialBaiduValues,
+  initialBeginValues,
+  initialBingValues,
+  initialCategorizeValues,
+  initialCodeValues,
+  initialConcentratorValues,
+  initialCrawlerValues,
+  initialDeepLValues,
+  initialDuckValues,
+  initialEmailValues,
+  initialExeSqlValues,
+  initialGithubValues,
+  initialGoogleScholarValues,
+  initialGoogleValues,
+  initialInvokeValues,
+  initialIterationStartValues,
+  initialIterationValues,
+  initialJin10Values,
+  initialKeywordExtractValues,
+  initialMessageValues,
+  initialNoteValues,
+  initialPubMedValues,
+  initialQWeatherValues,
+  initialRelevantValues,
+  initialRetrievalValues,
+  initialRewriteQuestionValues,
+  initialSearXNGValues,
+  initialStringTransformValues,
+  initialSwitchValues,
+  initialTavilyExtractValues,
+  initialTavilyValues,
+  initialTuShareValues,
+  initialUserFillUpValues,
+  initialWaitingDialogueValues,
+  initialWenCaiValues,
+  initialWikipediaValues,
+  initialYahooFinanceValues,
+} from '../constant';
+import useGraphStore from '../store';
+import {
+  generateNodeNamesWithIncreasingIndex,
+  getNodeDragHandle,
+} from '../utils';
+
+function isBottomSubAgent(type: string, position: Position) {
+  return (
+    (type === Operator.Agent && position === Position.Bottom) ||
+    type === Operator.Tool
+  );
+}
+export const useInitializeOperatorParams = () => {
+  const llmId = useFetchModelId();
+
+  const initialFormValuesMap = useMemo(() => {
+    return {
+      [Operator.Begin]: initialBeginValues,
+      [Operator.Retrieval]: initialRetrievalValues,
+      [Operator.Categorize]: { ...initialCategorizeValues, llm_id: llmId },
+      [Operator.Relevant]: { ...initialRelevantValues, llm_id: llmId },
+      [Operator.RewriteQuestion]: {
+        ...initialRewriteQuestionValues,
+        llm_id: llmId,
+      },
+      [Operator.Message]: initialMessageValues,
+      [Operator.KeywordExtract]: {
+        ...initialKeywordExtractValues,
+        llm_id: llmId,
+      },
+      [Operator.DuckDuckGo]: initialDuckValues,
+      [Operator.Baidu]: initialBaiduValues,
+      [Operator.Wikipedia]: initialWikipediaValues,
+      [Operator.PubMed]: initialPubMedValues,
+      [Operator.ArXiv]: initialArXivValues,
+      [Operator.Google]: initialGoogleValues,
+      [Operator.Bing]: initialBingValues,
+      [Operator.GoogleScholar]: initialGoogleScholarValues,
+      [Operator.DeepL]: initialDeepLValues,
+      [Operator.SearXNG]: initialSearXNGValues,
+      [Operator.GitHub]: initialGithubValues,
+      [Operator.BaiduFanyi]: initialBaiduFanyiValues,
+      [Operator.QWeather]: initialQWeatherValues,
+      [Operator.ExeSQL]: initialExeSqlValues,
+      [Operator.Switch]: initialSwitchValues,
+      [Operator.WenCai]: initialWenCaiValues,
+      [Operator.AkShare]: initialAkShareValues,
+      [Operator.YahooFinance]: initialYahooFinanceValues,
+      [Operator.Jin10]: initialJin10Values,
+      [Operator.Concentrator]: initialConcentratorValues,
+      [Operator.TuShare]: initialTuShareValues,
+      [Operator.Note]: initialNoteValues,
+      [Operator.Crawler]: initialCrawlerValues,
+      [Operator.Invoke]: initialInvokeValues,
+      [Operator.Email]: initialEmailValues,
+      [Operator.Iteration]: initialIterationValues,
+      [Operator.IterationStart]: initialIterationStartValues,
+      [Operator.Code]: initialCodeValues,
+      [Operator.WaitingDialogue]: initialWaitingDialogueValues,
+      [Operator.Agent]: { ...initialAgentValues, llm_id: llmId },
+      [Operator.Tool]: {},
+      [Operator.TavilySearch]: initialTavilyValues,
+      [Operator.UserFillUp]: initialUserFillUpValues,
+      [Operator.StringTransform]: initialStringTransformValues,
+      [Operator.TavilyExtract]: initialTavilyExtractValues,
+    };
+  }, [llmId]);
+
+  const initializeOperatorParams = useCallback(
+    (operatorName: Operator, position: Position) => {
+      const initialValues = initialFormValuesMap[operatorName];
+      if (isBottomSubAgent(operatorName, position)) {
+        return {
+          ...initialValues,
+          description: t('flow.descriptionMessage'),
+          user_prompt: t('flow.userPromptDefaultValue'),
+        };
+      }
+
+      return initialValues;
+    },
+    [initialFormValuesMap],
+  );
+
+  return { initializeOperatorParams, initialFormValuesMap };
+};
+
+export const useGetNodeName = () => {
+  const { t } = useTranslation();
+
+  return (type: string) => {
+    const name = t(`flow.${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 };
+}
+
+function useAddToolNode() {
+  const { nodes, edges, addEdge, getNode, addNode } = useGraphStore(
+    (state) => state,
+  );
+
+  const addToolNode = useCallback(
+    (newNode: Node<any>, nodeId?: string): boolean => {
+      const agentNode = getNode(nodeId);
+
+      if (agentNode) {
+        const childToolNodeIds = edges
+          .filter(
+            (x) => x.source === nodeId && x.sourceHandle === NodeHandleId.Tool,
+          )
+          .map((x) => x.target);
+
+        if (
+          childToolNodeIds.length > 0 &&
+          nodes.some((x) => x.id === childToolNodeIds[0])
+        ) {
+          return false;
+        }
+
+        newNode.position = {
+          x: agentNode.position.x - 82,
+          y: agentNode.position.y + 140,
+        };
+
+        addNode(newNode);
+        if (nodeId) {
+          addEdge({
+            source: nodeId,
+            target: newNode.id,
+            sourceHandle: NodeHandleId.Tool,
+            targetHandle: NodeHandleId.End,
+          });
+        }
+        return true;
+      }
+      return false;
+    },
+    [addEdge, addNode, edges, getNode, nodes],
+  );
+
+  return { addToolNode };
+}
+
+function useResizeIterationNode() {
+  const { getNode, nodes, updateNode } = useGraphStore((state) => state);
+
+  const resizeIterationNode = useCallback(
+    (type: string, position: Position, parentId?: string) => {
+      const parentNode = getNode(parentId);
+      if (parentNode && !isBottomSubAgent(type, position)) {
+        const MoveRightDistance = 310;
+        const childNodeList = nodes.filter((x) => x.parentId === parentId);
+        const maxX = Math.max(...childNodeList.map((x) => x.position.x));
+        if (maxX + MoveRightDistance > parentNode.position.x) {
+          updateNode({
+            ...parentNode,
+            width: (parentNode.width || 0) + MoveRightDistance,
+            position: {
+              x: parentNode.position.x + MoveRightDistance / 2,
+              y: parentNode.position.y,
+            },
+          });
+        }
+      }
+    },
+    [getNode, nodes, updateNode],
+  );
+
+  return { resizeIterationNode };
+}
+type CanvasMouseEvent = Pick<
+  React.MouseEvent<HTMLElement>,
+  'clientX' | 'clientY'
+>;
+
+export function useAddNode(reactFlowInstance?: ReactFlowInstance<any, any>) {
+  const { edges, nodes, addEdge, addNode, getNode } = useGraphStore(
+    (state) => state,
+  );
+  const getNodeName = useGetNodeName();
+  const { initializeOperatorParams } = useInitializeOperatorParams();
+  const { calculateNewlyBackChildPosition } = useCalculateNewlyChildPosition();
+  const { addChildEdge } = useAddChildEdge();
+  const { addToolNode } = useAddToolNode();
+  const { resizeIterationNode } = useResizeIterationNode();
+  //   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;
+        const node = getNode(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, params.position),
+          },
+          sourcePosition: Position.Right,
+          targetPosition: Position.Left,
+          dragHandle: getNodeDragHandle(type),
+        };
+
+        if (node && node.parentId) {
+          newNode.parentId = node.parentId;
+          newNode.extent = 'parent';
+          const parentNode = getNode(node.parentId);
+          if (parentNode && !isBottomSubAgent(type, params.position)) {
+            resizeIterationNode(type, params.position, node.parentId);
+          }
+        }
+
+        if (type === Operator.Iteration) {
+          newNode.width = 500;
+          newNode.height = 250;
+          const iterationStartNode: Node<any> = {
+            id: `${Operator.IterationStart}:${humanId()}`,
+            type: 'iterationStartNode',
+            position: { x: 50, y: 100 },
+            // draggable: false,
+            data: {
+              label: Operator.IterationStart,
+              name: Operator.IterationStart,
+              form: initialIterationStartValues,
+            },
+            parentId: newNode.id,
+            extent: 'parent',
+          };
+          addNode(newNode);
+          addNode(iterationStartNode);
+          if (nodeId) {
+            addEdge({
+              source: nodeId,
+              target: newNode.id,
+              sourceHandle: NodeHandleId.Start,
+              targetHandle: NodeHandleId.End,
+            });
+          }
+          return newNode.id;
+        } else if (
+          type === Operator.Agent &&
+          params.position === Position.Bottom
+        ) {
+          const agentNode = getNode(nodeId);
+          if (agentNode) {
+            // Calculate the coordinates of child nodes to prevent newly added child nodes from covering other child nodes
+            const allChildAgentNodeIds = edges
+              .filter(
+                (x) =>
+                  x.source === nodeId &&
+                  x.sourceHandle === NodeHandleId.AgentBottom,
+              )
+              .map((x) => x.target);
+
+            const xAxises = nodes
+              .filter((x) => allChildAgentNodeIds.some((y) => y === x.id))
+              .map((x) => x.position.x);
+
+            const maxX = Math.max(...xAxises);
+
+            newNode.position = {
+              x: xAxises.length > 0 ? maxX + 262 : agentNode.position.x + 82,
+              y: agentNode.position.y + 140,
+            };
+          }
+          addNode(newNode);
+          if (nodeId) {
+            addEdge({
+              source: nodeId,
+              target: newNode.id,
+              sourceHandle: NodeHandleId.AgentBottom,
+              targetHandle: NodeHandleId.AgentTop,
+            });
+          }
+          return newNode.id;
+        } else if (type === Operator.Tool) {
+          const toolNodeAdded = addToolNode(newNode, params.nodeId);
+          return toolNodeAdded ? newNode.id : undefined;
+        } else {
+          addNode(newNode);
+          addChildEdge(params.position, {
+            source: params.nodeId,
+            target: newNode.id,
+            sourceHandle: params.id,
+          });
+        }
+
+        return newNode.id;
+      },
+    [
+      addChildEdge,
+      addEdge,
+      addNode,
+      addToolNode,
+      calculateNewlyBackChildPosition,
+      edges,
+      getNode,
+      getNodeName,
+      initializeOperatorParams,
+      nodes,
+      reactFlowInstance,
+      resizeIterationNode,
+    ],
+  );
+
+  const addNoteNode = useCallback(
+    (e: CanvasMouseEvent) => {
+      addCanvasNode(Operator.Note)(e);
+    },
+    [addCanvasNode],
+  );
+
+  return { addCanvasNode, addNoteNode };
+}
diff --git a/web/src/pages/data-flow/hooks/use-agent-tool-initial-values.ts b/web/src/pages/data-flow/hooks/use-agent-tool-initial-values.ts
new file mode 100644
index 000000000..05864184d
--- /dev/null
+++ b/web/src/pages/data-flow/hooks/use-agent-tool-initial-values.ts
@@ -0,0 +1,70 @@
+import { omit, pick } from 'lodash';
+import { useCallback } from 'react';
+import { Operator } from '../constant';
+import { useInitializeOperatorParams } from './use-add-node';
+
+export function useAgentToolInitialValues() {
+  const { initialFormValuesMap } = useInitializeOperatorParams();
+
+  const initializeAgentToolValues = useCallback(
+    (operatorName: Operator) => {
+      const initialValues = initialFormValuesMap[operatorName];
+
+      switch (operatorName) {
+        case Operator.Retrieval:
+          return {
+            ...omit(initialValues, 'query'),
+            description: '',
+          };
+        case (Operator.TavilySearch, Operator.TavilyExtract):
+          return {
+            api_key: '',
+          };
+        case Operator.ExeSQL:
+          return omit(initialValues, 'sql');
+        case Operator.Bing:
+          return omit(initialValues, 'query');
+        case Operator.YahooFinance:
+          return omit(initialValues, 'stock_code');
+
+        case Operator.Email:
+          return pick(
+            initialValues,
+            'smtp_server',
+            'smtp_port',
+            'email',
+            'password',
+            'sender_name',
+          );
+
+        case Operator.DuckDuckGo:
+          return pick(initialValues, 'top_n', 'channel');
+
+        case Operator.Wikipedia:
+          return pick(initialValues, 'top_n', 'language');
+        case Operator.Google:
+          return pick(initialValues, 'api_key', 'country', 'language');
+        case Operator.GoogleScholar:
+          return omit(initialValues, 'query', 'outputs');
+        case Operator.ArXiv:
+          return pick(initialValues, 'top_n', 'sort_by');
+        case Operator.PubMed:
+          return pick(initialValues, 'top_n', 'email');
+        case Operator.GitHub:
+          return pick(initialValues, 'top_n');
+        case Operator.WenCai:
+          return pick(initialValues, 'top_n', 'query_type');
+        case Operator.Code:
+          return {};
+        case Operator.SearXNG:
+          return pick(initialValues, 'searxng_url', 'top_n');
+
+        default:
+          return initialValues;
+      }
+    },
+    [initialFormValuesMap],
+  );
+
+  return { initializeAgentToolValues };
+}
diff --git a/web/src/pages/data-flow/hooks/use-before-delete.tsx b/web/src/pages/data-flow/hooks/use-before-delete.tsx
new file mode 100644
index 000000000..d08333c86
--- /dev/null
+++ b/web/src/pages/data-flow/hooks/use-before-delete.tsx
@@ -0,0 +1,82 @@
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { Node, OnBeforeDelete } from '@xyflow/react';
+import { Operator } from '../constant';
+import useGraphStore from '../store';
+import { deleteAllDownstreamAgentsAndTool } from '../utils/delete-node';
+
+const UndeletableNodes = [Operator.Begin, Operator.IterationStart];
+
+export function useBeforeDelete() {
+  const { getOperatorTypeFromId, getNode } = useGraphStore((state) => state);
+
+  const agentPredicate = (node: Node) => {
+    return getOperatorTypeFromId(node.id) === Operator.Agent;
+  };
+
+  const handleBeforeDelete: OnBeforeDelete<RAGFlowNodeType> = async ({
+    nodes, // Nodes to be deleted
+    edges, // Edges to be deleted
+  }) => {
+    const toBeDeletedNodes = nodes.filter((node) => {
+      const operatorType = node.data?.label as Operator;
+      if (operatorType === Operator.Begin) {
+        return false;
+      }
+
+      if (
+        operatorType === Operator.IterationStart &&
+        !nodes.some((x) => x.id === node.parentId)
+      ) {
+        return false;
+      }
+
+      return true;
+    });
+
+    const toBeDeletedEdges = edges.filter((edge) => {
+      const sourceType = getOperatorTypeFromId(edge.source) as Operator;
+      const downStreamNodes = nodes.filter((x) => x.id === edge.target);
+
+      // This edge does not need to be deleted, the range of edges that do not need to be deleted is smaller, so consider the case where it does not need to be deleted
+      if (
+        UndeletableNodes.includes(sourceType) && // Upstream node is Begin or IterationStart
+        downStreamNodes.length === 0 // Downstream node does not exist in the nodes to be deleted
+      ) {
+        if (!nodes.some((x) => x.id === edge.source)) {
+          return true; // Can be deleted
+        }
+        return false; // Cannot be deleted
+      }
+
+      return true;
+    });
+
+    // Delete the agent and tool nodes downstream of the agent node
+    if (nodes.some(agentPredicate)) {
+      nodes.filter(agentPredicate).forEach((node) => {
+        const { downstreamAgentAndToolEdges, downstreamAgentAndToolNodeIds } =
+          deleteAllDownstreamAgentsAndTool(node.id, edges);
+
+        downstreamAgentAndToolNodeIds.forEach((nodeId) => {
+          const currentNode = getNode(nodeId);
+          if (toBeDeletedNodes.every((x) => x.id !== nodeId) && currentNode) {
+            toBeDeletedNodes.push(currentNode);
+          }
+        });
+
+        downstreamAgentAndToolEdges.forEach((edge) => {
+          if (toBeDeletedEdges.every((x) => x.id !== edge.id)) {
+            toBeDeletedEdges.push(edge);
+          }
+        });
+      }, []);
+    }
+
+    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
new file mode 100644
index 000000000..eb32b2317
--- /dev/null
+++ b/web/src/pages/data-flow/hooks/use-build-dsl.ts
@@ -0,0 +1,29 @@
+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-cache-chat-log.ts b/web/src/pages/data-flow/hooks/use-cache-chat-log.ts
new file mode 100644
index 000000000..c61079003
--- /dev/null
+++ b/web/src/pages/data-flow/hooks/use-cache-chat-log.ts
@@ -0,0 +1,88 @@
+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-change-node-name.ts b/web/src/pages/data-flow/hooks/use-change-node-name.ts
new file mode 100644
index 000000000..61a5653d7
--- /dev/null
+++ b/web/src/pages/data-flow/hooks/use-change-node-name.ts
@@ -0,0 +1,120 @@
+import message from '@/components/ui/message';
+import { trim } from 'lodash';
+import {
+  ChangeEvent,
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { Operator } from '../constant';
+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, getOperatorTypeFromId } = useGraphStore(
+    (state) => state,
+  );
+  const previousName = data?.name;
+  const isToolNode = getOperatorTypeFromId(id) === Operator.Tool;
+
+  const { handleToolNameBlur, 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(isToolNode ? previousToolName : previousName);
+  }, [isToolNode, previousName, previousToolName]);
+
+  return {
+    name,
+    handleNameBlur: isToolNode ? handleToolNameBlur : handleNameBlur,
+    handleNameChange,
+  };
+};
diff --git a/web/src/pages/data-flow/hooks/use-chat-logic.ts b/web/src/pages/data-flow/hooks/use-chat-logic.ts
new file mode 100644
index 000000000..42b0533cb
--- /dev/null
+++ b/web/src/pages/data-flow/hooks/use-chat-logic.ts
@@ -0,0 +1,60 @@
+import { MessageType } from '@/constants/chat';
+import { Message } from '@/interfaces/database/chat';
+import { IMessage } from '@/pages/chat/interface';
+import { get } from 'lodash';
+import { useCallback, useMemo } from 'react';
+import { BeginQuery } from '../interface';
+import { buildBeginQueryWithObject } from '../utils';
+type IAwaitCompentData = {
+  derivedMessages: IMessage[];
+  sendFormMessage: (params: {
+    inputs: Record<string, BeginQuery>;
+    id: string;
+  }) => void;
+  canvasId: string;
+};
+const useAwaitCompentData = (props: IAwaitCompentData) => {
+  const { derivedMessages, sendFormMessage, canvasId } = props;
+
+  const getInputs = useCallback((message: Message) => {
+    return get(message, 'data.inputs', {}) as Record<string, BeginQuery>;
+  }, []);
+
+  const buildInputList = useCallback(
+    (message: Message) => {
+      return Object.entries(getInputs(message)).map(([key, val]) => {
+        return {
+          ...val,
+          key,
+        };
+      });
+    },
+    [getInputs],
+  );
+
+  const handleOk = useCallback(
+    (message: Message) => (values: BeginQuery[]) => {
+      const inputs = getInputs(message);
+      const nextInputs = buildBeginQueryWithObject(inputs, values);
+      sendFormMessage({
+        inputs: nextInputs,
+        id: canvasId,
+      });
+    },
+    [getInputs, sendFormMessage, canvasId],
+  );
+
+  const isWaitting = useMemo(() => {
+    const temp = derivedMessages?.some((message, i) => {
+      const flag =
+        message.role === MessageType.Assistant &&
+        derivedMessages.length - 1 === i &&
+        message.data;
+      return flag;
+    });
+    return temp;
+  }, [derivedMessages]);
+  return { getInputs, buildInputList, handleOk, isWaitting };
+};
+
+export { useAwaitCompentData };
diff --git a/web/src/pages/data-flow/hooks/use-export-json.ts b/web/src/pages/data-flow/hooks/use-export-json.ts
new file mode 100644
index 000000000..1efe6bb50
--- /dev/null
+++ b/web/src/pages/data-flow/hooks/use-export-json.ts
@@ -0,0 +1,71 @@
+import { useToast } from '@/components/hooks/use-toast';
+import { FileMimeType, Platform } from '@/constants/common';
+import { useSetModalState } from '@/hooks/common-hooks';
+import { useFetchAgent } from '@/hooks/use-agent-request';
+import { IGraph } from '@/interfaces/database/flow';
+import { downloadJsonFile } from '@/utils/file-util';
+import { message } from 'antd';
+import isEmpty from 'lodash/isEmpty';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useBuildDslData } from './use-build-dsl';
+import { useSetGraphInfo } from './use-set-graph';
+
+export const useHandleExportOrImportJsonFile = () => {
+  const { buildDslData } = useBuildDslData();
+  const {
+    visible: fileUploadVisible,
+    hideModal: hideFileUploadModal,
+    showModal: showFileUploadModal,
+  } = useSetModalState();
+  const setGraphInfo = useSetGraphInfo();
+  const { data } = useFetchAgent();
+  const { t } = useTranslation();
+  const { toast } = useToast();
+
+  const onFileUploadOk = useCallback(
+    async ({
+      fileList,
+      platform,
+    }: {
+      fileList: File[];
+      platform: Platform;
+    }) => {
+      console.log('🚀 ~ useHandleExportOrImportJsonFile ~ platform:', platform);
+      if (fileList.length > 0) {
+        const file = fileList[0];
+        if (file.type !== FileMimeType.Json) {
+          toast({ title: t('flow.jsonUploadTypeErrorMessage') });
+          return;
+        }
+
+        const graphStr = await file.text();
+        const errorMessage = t('flow.jsonUploadContentErrorMessage');
+        try {
+          const graph = JSON.parse(graphStr);
+          if (graphStr && !isEmpty(graph) && Array.isArray(graph?.nodes)) {
+            setGraphInfo(graph ?? ({} as IGraph));
+            hideFileUploadModal();
+          } else {
+            message.error(errorMessage);
+          }
+        } catch (error) {
+          message.error(errorMessage);
+        }
+      }
+    },
+    [hideFileUploadModal, setGraphInfo, t, toast],
+  );
+
+  const handleExportJson = useCallback(() => {
+    downloadJsonFile(buildDslData().graph, `${data.title}.json`);
+  }, [buildDslData, data.title]);
+
+  return {
+    fileUploadVisible,
+    handleExportJson,
+    handleImportJson: showFileUploadModal,
+    hideFileUploadModal,
+    onFileUploadOk,
+  };
+};
diff --git a/web/src/pages/data-flow/hooks/use-fetch-data.ts b/web/src/pages/data-flow/hooks/use-fetch-data.ts
new file mode 100644
index 000000000..5a1ca40cb
--- /dev/null
+++ b/web/src/pages/data-flow/hooks/use-fetch-data.ts
@@ -0,0 +1,19 @@
+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-find-mcp-by-id.ts b/web/src/pages/data-flow/hooks/use-find-mcp-by-id.ts
new file mode 100644
index 000000000..e4c5aed5a
--- /dev/null
+++ b/web/src/pages/data-flow/hooks/use-find-mcp-by-id.ts
@@ -0,0 +1,12 @@
+import { useListMcpServer } from '@/hooks/use-mcp-request';
+
+export function useFindMcpById() {
+  const { data } = useListMcpServer();
+
+  const findMcpById = (id: string) =>
+    data.mcp_servers.find((item) => item.id === id);
+
+  return {
+    findMcpById,
+  };
+}
diff --git a/web/src/pages/data-flow/hooks/use-form-values.ts b/web/src/pages/data-flow/hooks/use-form-values.ts
new file mode 100644
index 000000000..edb2abbbd
--- /dev/null
+++ b/web/src/pages/data-flow/hooks/use-form-values.ts
@@ -0,0 +1,20 @@
+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-get-begin-query.tsx b/web/src/pages/data-flow/hooks/use-get-begin-query.tsx
new file mode 100644
index 000000000..83cda2078
--- /dev/null
+++ b/web/src/pages/data-flow/hooks/use-get-begin-query.tsx
@@ -0,0 +1,317 @@
+import { AgentGlobals } from '@/constants/agent';
+import { useFetchAgent } from '@/hooks/use-agent-request';
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { Edge } from '@xyflow/react';
+import { DefaultOptionType } from 'antd/es/select';
+import { t } from 'i18next';
+import { isEmpty } from 'lodash';
+import get from 'lodash/get';
+import {
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import {
+  AgentDialogueMode,
+  BeginId,
+  BeginQueryType,
+  Operator,
+  VariableType,
+} from '../constant';
+import { AgentFormContext } from '../context';
+import { buildBeginInputListFromObject } from '../form/begin-form/utils';
+import { BeginQuery } from '../interface';
+import OperatorIcon from '../operator-icon';
+import useGraphStore from '../store';
+
+export function useSelectBeginNodeDataInputs() {
+  const getNode = useGraphStore((state) => state.getNode);
+
+  return buildBeginInputListFromObject(
+    getNode(BeginId)?.data?.form?.inputs ?? {},
+  );
+}
+
+export function useIsTaskMode() {
+  const getNode = useGraphStore((state) => state.getNode);
+
+  return useMemo(() => {
+    const node = getNode(BeginId);
+    return node?.data?.form?.mode === AgentDialogueMode.Task;
+  }, [getNode]);
+}
+
+export const useGetBeginNodeDataQuery = () => {
+  const getNode = useGraphStore((state) => state.getNode);
+
+  const getBeginNodeDataQuery = useCallback(() => {
+    return buildBeginInputListFromObject(
+      get(getNode(BeginId), 'data.form.inputs', {}),
+    );
+  }, [getNode]);
+
+  return getBeginNodeDataQuery;
+};
+
+export const useGetBeginNodeDataInputs = () => {
+  const getNode = useGraphStore((state) => state.getNode);
+
+  const inputs = get(getNode(BeginId), 'data.form.inputs', {});
+
+  const beginNodeDataInputs = useMemo(() => {
+    return buildBeginInputListFromObject(inputs);
+  }, [inputs]);
+
+  return beginNodeDataInputs;
+};
+
+export const useGetBeginNodeDataQueryIsSafe = () => {
+  const [isBeginNodeDataQuerySafe, setIsBeginNodeDataQuerySafe] =
+    useState(false);
+  const inputs = useSelectBeginNodeDataInputs();
+  const nodes = useGraphStore((state) => state.nodes);
+
+  useEffect(() => {
+    const query: BeginQuery[] = inputs;
+    const isSafe = !query.some((q) => !q.optional && q.type === 'file');
+    setIsBeginNodeDataQuerySafe(isSafe);
+  }, [inputs, nodes]);
+
+  return isBeginNodeDataQuerySafe;
+};
+
+function filterAllUpstreamNodeIds(edges: Edge[], nodeIds: string[]) {
+  return nodeIds.reduce<string[]>((pre, nodeId) => {
+    const currentEdges = edges.filter((x) => x.target === nodeId);
+
+    const upstreamNodeIds: string[] = currentEdges.map((x) => x.source);
+
+    const ids = upstreamNodeIds.concat(
+      filterAllUpstreamNodeIds(edges, upstreamNodeIds),
+    );
+
+    ids.forEach((x) => {
+      if (pre.every((y) => y !== x)) {
+        pre.push(x);
+      }
+    });
+
+    return pre;
+  }, []);
+}
+
+export function buildOutputOptions(
+  outputs: Record<string, any> = {},
+  nodeId?: string,
+  parentLabel?: string | ReactNode,
+  icon?: ReactNode,
+) {
+  return Object.keys(outputs).map((x) => ({
+    label: x,
+    value: `${nodeId}@${x}`,
+    parentLabel,
+    icon,
+    type: outputs[x]?.type,
+  }));
+}
+
+export function useBuildNodeOutputOptions(nodeId?: string) {
+  const nodes = useGraphStore((state) => state.nodes);
+  const edges = useGraphStore((state) => state.edges);
+
+  const nodeOutputOptions = useMemo(() => {
+    if (!nodeId) {
+      return [];
+    }
+    const upstreamIds = filterAllUpstreamNodeIds(edges, [nodeId]);
+
+    const nodeWithOutputList = nodes.filter(
+      (x) =>
+        upstreamIds.some((y) => y === x.id) && !isEmpty(x.data?.form?.outputs),
+    );
+
+    return nodeWithOutputList
+      .filter((x) => x.id !== nodeId)
+      .map((x) => ({
+        label: x.data.name,
+        value: x.id,
+        title: x.data.name,
+        options: buildOutputOptions(
+          x.data.form.outputs,
+          x.id,
+          x.data.name,
+          <OperatorIcon name={x.data.label as Operator} />,
+        ),
+      }));
+  }, [edges, nodeId, nodes]);
+
+  return nodeOutputOptions;
+}
+
+// exclude nodes with branches
+const ExcludedNodes = [
+  Operator.Categorize,
+  Operator.Relevant,
+  Operator.Begin,
+  Operator.Note,
+];
+
+const StringList = [
+  BeginQueryType.Line,
+  BeginQueryType.Paragraph,
+  BeginQueryType.Options,
+];
+
+function transferToVariableType(type: string) {
+  if (StringList.some((x) => x === type)) {
+    return VariableType.String;
+  }
+  return type;
+}
+
+export function useBuildBeginVariableOptions() {
+  const inputs = useSelectBeginNodeDataInputs();
+
+  const options = useMemo(() => {
+    return [
+      {
+        label: <span>{t('flow.beginInput')}</span>,
+        title: t('flow.beginInput'),
+        options: inputs.map((x) => ({
+          label: x.name,
+          parentLabel: <span>{t('flow.beginInput')}</span>,
+          icon: <OperatorIcon name={Operator.Begin} className="block" />,
+          value: `begin@${x.key}`,
+          type: transferToVariableType(x.type),
+        })),
+      },
+    ];
+  }, [inputs]);
+
+  return options;
+}
+
+export const useBuildVariableOptions = (nodeId?: string, parentId?: string) => {
+  const nodeOutputOptions = useBuildNodeOutputOptions(nodeId);
+  const parentNodeOutputOptions = useBuildNodeOutputOptions(parentId);
+  const beginOptions = useBuildBeginVariableOptions();
+
+  const options = useMemo(() => {
+    return [...beginOptions, ...nodeOutputOptions, ...parentNodeOutputOptions];
+  }, [beginOptions, nodeOutputOptions, parentNodeOutputOptions]);
+
+  return options;
+};
+
+export function useBuildQueryVariableOptions(n?: RAGFlowNodeType) {
+  const { data } = useFetchAgent();
+  const node = useContext(AgentFormContext) || n;
+  const options = useBuildVariableOptions(node?.id, node?.parentId);
+  const nextOptions = useMemo(() => {
+    const globals = data?.dsl?.globals ?? {};
+    const globalOptions = Object.entries(globals).map(([key, value]) => ({
+      label: key,
+      value: key,
+      icon: <OperatorIcon name={Operator.Begin} className="block" />,
+      parentLabel: <span>{t('flow.beginInput')}</span>,
+      type: Array.isArray(value)
+        ? `${VariableType.Array}${key === AgentGlobals.SysFiles ? '<file>' : ''}`
+        : typeof value,
+    }));
+    return [
+      { ...options[0], options: [...options[0]?.options, ...globalOptions] },
+      ...options.slice(1),
+    ];
+  }, [data.dsl?.globals, options]);
+
+  return nextOptions;
+}
+
+export function useBuildComponentIdOptions(nodeId?: string, parentId?: string) {
+  const nodes = useGraphStore((state) => state.nodes);
+
+  // Limit the nodes inside iteration to only reference peer nodes with the same parentId and other external nodes other than their parent nodes
+  const filterChildNodesToSameParentOrExternal = useCallback(
+    (node: RAGFlowNodeType) => {
+      // Node inside iteration
+      if (parentId) {
+        return (
+          (node.parentId === parentId || node.parentId === undefined) &&
+          node.id !== parentId
+        );
+      }
+
+      return node.parentId === undefined; // The outermost node
+    },
+    [parentId],
+  );
+
+  const componentIdOptions = useMemo(() => {
+    return nodes
+      .filter(
+        (x) =>
+          x.id !== nodeId &&
+          !ExcludedNodes.some((y) => y === x.data.label) &&
+          filterChildNodesToSameParentOrExternal(x),
+      )
+      .map((x) => ({ label: x.data.name, value: x.id }));
+  }, [nodes, nodeId, filterChildNodesToSameParentOrExternal]);
+
+  return [
+    {
+      label: <span>Component Output</span>,
+      title: 'Component Output',
+      options: componentIdOptions,
+    },
+  ];
+}
+
+export function useBuildComponentIdAndBeginOptions(
+  nodeId?: string,
+  parentId?: string,
+) {
+  const componentIdOptions = useBuildComponentIdOptions(nodeId, parentId);
+  const beginOptions = useBuildBeginVariableOptions();
+
+  return [...beginOptions, ...componentIdOptions];
+}
+
+export const useGetComponentLabelByValue = (nodeId: string) => {
+  const options = useBuildComponentIdAndBeginOptions(nodeId);
+
+  const flattenOptions = useMemo(() => {
+    return options.reduce<DefaultOptionType[]>((pre, cur) => {
+      return [...pre, ...cur.options];
+    }, []);
+  }, [options]);
+
+  const getLabel = useCallback(
+    (val?: string) => {
+      return flattenOptions.find((x) => x.value === val)?.label;
+    },
+    [flattenOptions],
+  );
+  return getLabel;
+};
+
+export function useGetVariableLabelByValue(nodeId: string) {
+  const { getNode } = useGraphStore((state) => state);
+  const nextOptions = useBuildQueryVariableOptions(getNode(nodeId));
+
+  const flattenOptions = useMemo(() => {
+    return nextOptions.reduce<DefaultOptionType[]>((pre, cur) => {
+      return [...pre, ...cur.options];
+    }, []);
+  }, [nextOptions]);
+
+  const getLabel = useCallback(
+    (val?: string) => {
+      return flattenOptions.find((x) => x.value === val)?.label;
+    },
+    [flattenOptions],
+  );
+  return getLabel;
+}
diff --git a/web/src/pages/data-flow/hooks/use-iteration.ts b/web/src/pages/data-flow/hooks/use-iteration.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/web/src/pages/data-flow/hooks/use-move-note.ts b/web/src/pages/data-flow/hooks/use-move-note.ts
new file mode 100644
index 000000000..2c1d1b072
--- /dev/null
+++ b/web/src/pages/data-flow/hooks/use-move-note.ts
@@ -0,0 +1,35 @@
+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-open-document.ts b/web/src/pages/data-flow/hooks/use-open-document.ts
new file mode 100644
index 000000000..384529c15
--- /dev/null
+++ b/web/src/pages/data-flow/hooks/use-open-document.ts
@@ -0,0 +1,12 @@
+import { useCallback } from 'react';
+
+export function useOpenDocument() {
+  const openDocument = useCallback(() => {
+    window.open(
+      'https://ragflow.io/docs/dev/category/agent-components',
+      '_blank',
+    );
+  }, []);
+
+  return openDocument;
+}
diff --git a/web/src/pages/data-flow/hooks/use-save-graph.ts b/web/src/pages/data-flow/hooks/use-save-graph.ts
new file mode 100644
index 000000000..8ce4dc15e
--- /dev/null
+++ b/web/src/pages/data-flow/hooks/use-save-graph.ts
@@ -0,0 +1,89 @@
+import {
+  useFetchAgent,
+  useResetAgent,
+  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,
+        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();
+        }
+      }
+    },
+    [saveGraph, resetAgent, 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-send-shared-message.ts b/web/src/pages/data-flow/hooks/use-send-shared-message.ts
new file mode 100644
index 000000000..d8e2d61de
--- /dev/null
+++ b/web/src/pages/data-flow/hooks/use-send-shared-message.ts
@@ -0,0 +1,79 @@
+import { SharedFrom } from '@/constants/chat';
+import { useSetModalState } from '@/hooks/common-hooks';
+import { IEventList } from '@/hooks/use-send-message';
+import {
+  buildRequestBody,
+  useSendAgentMessage,
+} from '@/pages/agent/chat/use-send-agent-message';
+import trim from 'lodash/trim';
+import { useCallback, useState } from 'react';
+import { useSearchParams } from 'umi';
+
+export const useSendButtonDisabled = (value: string) => {
+  return trim(value) === '';
+};
+
+export const useGetSharedChatSearchParams = () => {
+  const [searchParams] = useSearchParams();
+  const data_prefix = 'data_';
+  const data = Object.fromEntries(
+    searchParams
+      .entries()
+      .filter(([key]) => key.startsWith(data_prefix))
+      .map(([key, value]) => [key.replace(data_prefix, ''), value]),
+  );
+  return {
+    from: searchParams.get('from') as SharedFrom,
+    sharedId: searchParams.get('shared_id'),
+    locale: searchParams.get('locale'),
+    data: data,
+    visibleAvatar: searchParams.get('visible_avatar')
+      ? searchParams.get('visible_avatar') !== '1'
+      : true,
+  };
+};
+
+export const useSendNextSharedMessage = (
+  addEventList: (data: IEventList, messageId: string) => void,
+  isTaskMode: boolean,
+) => {
+  const { from, sharedId: conversationId } = useGetSharedChatSearchParams();
+  const url = `/api/v1/${from === SharedFrom.Agent ? 'agentbots' : 'chatbots'}/${conversationId}/completions`;
+
+  const [params, setParams] = useState<any[]>([]);
+
+  const {
+    visible: parameterDialogVisible,
+    hideModal: hideParameterDialog,
+    showModal: showParameterDialog,
+  } = useSetModalState();
+
+  const ret = useSendAgentMessage(url, addEventList, params, true);
+
+  const ok = useCallback(
+    (params: any[]) => {
+      if (isTaskMode) {
+        const msgBody = buildRequestBody('');
+
+        ret.sendMessage({
+          message: msgBody,
+          beginInputs: params,
+        });
+      } else {
+        setParams(params);
+      }
+
+      hideParameterDialog();
+    },
+    [hideParameterDialog, isTaskMode, ret],
+  );
+
+  return {
+    ...ret,
+    hasError: false,
+    parameterDialogVisible,
+    hideParameterDialog,
+    showParameterDialog,
+    ok,
+  };
+};
diff --git a/web/src/pages/data-flow/hooks/use-set-graph.ts b/web/src/pages/data-flow/hooks/use-set-graph.ts
new file mode 100644
index 000000000..6dd68a330
--- /dev/null
+++ b/web/src/pages/data-flow/hooks/use-set-graph.ts
@@ -0,0 +1,17 @@
+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-dialog.ts b/web/src/pages/data-flow/hooks/use-show-dialog.ts
new file mode 100644
index 000000000..6178e3fbc
--- /dev/null
+++ b/web/src/pages/data-flow/hooks/use-show-dialog.ts
@@ -0,0 +1,91 @@
+import { useFetchTokenListBeforeOtherStep } from '@/components/embed-dialog/use-show-embed-dialog';
+import { SharedFrom } from '@/constants/chat';
+import { useShowDeleteConfirm } from '@/hooks/common-hooks';
+import {
+  useCreateSystemToken,
+  useFetchSystemTokenList,
+  useRemoveSystemToken,
+} from '@/hooks/user-setting-hooks';
+import { IStats } from '@/interfaces/database/chat';
+import { useQueryClient } from '@tanstack/react-query';
+import { useCallback } from 'react';
+
+export const useOperateApiKey = (idKey: string, dialogId?: string) => {
+  const { removeToken } = useRemoveSystemToken();
+  const { createToken, loading: creatingLoading } = useCreateSystemToken();
+  const { data: tokenList, loading: listLoading } = useFetchSystemTokenList();
+
+  const showDeleteConfirm = useShowDeleteConfirm();
+
+  const onRemoveToken = (token: string) => {
+    showDeleteConfirm({
+      onOk: () => removeToken(token),
+    });
+  };
+
+  const onCreateToken = useCallback(() => {
+    createToken({ [idKey]: dialogId });
+  }, [createToken, idKey, dialogId]);
+
+  return {
+    removeToken: onRemoveToken,
+    createToken: onCreateToken,
+    tokenList,
+    creatingLoading,
+    listLoading,
+  };
+};
+
+type ChartStatsType = {
+  [k in keyof IStats]: Array<{ xAxis: string; yAxis: number }>;
+};
+
+export const useSelectChartStatsList = (): ChartStatsType => {
+  const queryClient = useQueryClient();
+  const data = queryClient.getQueriesData({ queryKey: ['fetchStats'] });
+  const stats: IStats = (data.length > 0 ? data[0][1] : {}) as IStats;
+
+  return Object.keys(stats).reduce((pre, cur) => {
+    const item = stats[cur as keyof IStats];
+    if (item.length > 0) {
+      pre[cur as keyof IStats] = item.map((x) => ({
+        xAxis: x[0] as string,
+        yAxis: x[1] as number,
+      }));
+    }
+    return pre;
+  }, {} as ChartStatsType);
+};
+
+const getUrlWithToken = (token: string, from: string = 'chat') => {
+  const { protocol, host } = window.location;
+  return `${protocol}//${host}/chat/share?shared_id=${token}&from=${from}`;
+};
+
+export const usePreviewChat = (idKey: string) => {
+  const { handleOperate } = useFetchTokenListBeforeOtherStep();
+
+  const open = useCallback(
+    (t: string) => {
+      window.open(
+        getUrlWithToken(
+          t,
+          idKey === 'canvasId' ? SharedFrom.Agent : SharedFrom.Chat,
+        ),
+        '_blank',
+      );
+    },
+    [idKey],
+  );
+
+  const handlePreview = useCallback(async () => {
+    const token = await handleOperate();
+    if (token) {
+      open(token);
+    }
+  }, [handleOperate, open]);
+
+  return {
+    handlePreview,
+  };
+};
diff --git a/web/src/pages/data-flow/hooks/use-show-drawer.tsx b/web/src/pages/data-flow/hooks/use-show-drawer.tsx
new file mode 100644
index 000000000..6789e86ba
--- /dev/null
+++ b/web/src/pages/data-flow/hooks/use-show-drawer.tsx
@@ -0,0 +1,186 @@
+import { useSetModalState } from '@/hooks/common-hooks';
+import { NodeMouseHandler } from '@xyflow/react';
+import get from 'lodash/get';
+import React, { useCallback, useEffect } from 'react';
+import { Operator } from '../constant';
+import useGraphStore from '../store';
+import { useCacheChatLog } from './use-cache-chat-log';
+import { useGetBeginNodeDataInputs } from './use-get-begin-query';
+import { useSaveGraph } from './use-save-graph';
+
+export const useShowFormDrawer = () => {
+  const {
+    clickedNodeId: clickNodeId,
+    setClickedNodeId,
+    getNode,
+    setClickedToolId,
+  } = useGraphStore((state) => state);
+  const {
+    visible: formDrawerVisible,
+    hideModal: hideFormDrawer,
+    showModal: showFormDrawer,
+  } = useSetModalState();
+
+  const handleShow = useCallback(
+    (e: React.MouseEvent<Element>, nodeId: string) => {
+      const tool = get(e.target, 'dataset.tool');
+      // TODO: Operator type judgment should be used
+      if (nodeId.startsWith(Operator.Tool) && !tool) {
+        return;
+      }
+      setClickedNodeId(nodeId);
+      setClickedToolId(tool);
+      showFormDrawer();
+    },
+    [setClickedNodeId, setClickedToolId, 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();
+  const inputs = useGetBeginNodeDataInputs();
+
+  useEffect(() => {
+    if (drawerVisible) {
+      if (inputs.length > 0) {
+        showRunModal();
+        hideChatModal();
+      } else {
+        showChatModal();
+        hideRunModal();
+      }
+    }
+  }, [
+    hideChatModal,
+    hideRunModal,
+    showChatModal,
+    showRunModal,
+    drawerVisible,
+    inputs,
+  ]);
+
+  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 useShowLogSheet({
+  setCurrentMessageId,
+}: Pick<ReturnType<typeof useCacheChatLog>, 'setCurrentMessageId'>) {
+  const { visible, showModal, hideModal } = useSetModalState();
+
+  const handleShow = useCallback(
+    (messageId: string) => {
+      setCurrentMessageId(messageId);
+      showModal();
+    },
+    [setCurrentMessageId, showModal],
+  );
+
+  return {
+    logSheetVisible: visible,
+    hideLogSheet: hideModal,
+    showLogSheet: handleShow,
+  };
+}
+
+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
new file mode 100644
index 000000000..534c2e2a9
--- /dev/null
+++ b/web/src/pages/data-flow/hooks/use-watch-form-change.ts
@@ -0,0 +1,18 @@
+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(() => {
+    // Manually triggered form updates are synchronized to the canvas
+    if (id) {
+      values = form?.getValues() || {};
+      let nextValues: any = values;
+
+      updateNodeForm(id, nextValues);
+    }
+  }, [form?.formState.isDirty, id, updateNodeForm, values]);
+}
diff --git a/web/src/pages/data-flow/index.tsx b/web/src/pages/data-flow/index.tsx
new file mode 100644
index 000000000..4a1fc81ae
--- /dev/null
+++ b/web/src/pages/data-flow/index.tsx
@@ -0,0 +1,187 @@
+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 { useSetModalState } from '@/hooks/common-hooks';
+import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
+import { ReactFlowProvider } from '@xyflow/react';
+import {
+  ChevronDown,
+  CirclePlay,
+  Download,
+  History,
+  LaptopMinimalCheck,
+  Settings,
+  Upload,
+} from 'lucide-react';
+import { ComponentPropsWithoutRef, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import AgentCanvas from './canvas';
+import { DropdownProvider } from './canvas/context';
+import { useHandleExportOrImportJsonFile } from './hooks/use-export-json';
+import { useFetchDataOnMount } from './hooks/use-fetch-data';
+import { useGetBeginNodeDataInputs } from './hooks/use-get-begin-query';
+import {
+  useSaveGraph,
+  useSaveGraphBeforeOpeningDebugDrawer,
+  useWatchAgentChange,
+} from './hooks/use-save-graph';
+import { SettingDialog } from './setting-dialog';
+import { UploadAgentDialog } from './upload-agent-dialog';
+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,
+    handleImportJson,
+    fileUploadVisible,
+    onFileUploadOk,
+    hideFileUploadModal,
+  } = useHandleExportOrImportJsonFile();
+  const { saveGraph, loading } = useSaveGraph();
+  const { flowDetail: agentDetail } = useFetchDataOnMount();
+  const inputs = useGetBeginNodeDataInputs();
+  const { handleRun } = useSaveGraphBeforeOpeningDebugDrawer(showChatDrawer);
+  const handleRunAgent = useCallback(() => {
+    if (inputs.length > 0) {
+      showChatDrawer();
+    } else {
+      handleRun();
+    }
+  }, [handleRun, inputs, showChatDrawer]);
+  const {
+    visible: versionDialogVisible,
+    hideModal: hideVersionDialog,
+    showModal: showVersionDialog,
+  } = useSetModalState();
+
+  const {
+    visible: settingDialogVisible,
+    hideModal: hideSettingDialog,
+    showModal: showSettingDialog,
+  } = useSetModalState();
+
+  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>
+          <Button variant={'secondary'} onClick={handleRunAgent}>
+            <CirclePlay />
+            {t('flow.run')}
+          </Button>
+          <Button variant={'secondary'} onClick={showVersionDialog}>
+            <History />
+            {t('flow.historyversion')}
+          </Button>
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant={'secondary'}>
+                <ChevronDown /> {t('flow.management')}
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <AgentDropdownMenuItem onClick={handleImportJson}>
+                <Download />
+                {t('flow.import')}
+              </AgentDropdownMenuItem>
+              <DropdownMenuSeparator />
+              <AgentDropdownMenuItem onClick={handleExportJson}>
+                <Upload />
+                {t('flow.export')}
+              </AgentDropdownMenuItem>
+              <DropdownMenuSeparator />
+              <AgentDropdownMenuItem onClick={showSettingDialog}>
+                <Settings />
+                {t('flow.setting')}
+              </AgentDropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </PageHeader>
+      <ReactFlowProvider>
+        <DropdownProvider>
+          <AgentCanvas
+            drawerVisible={chatDrawerVisible}
+            hideDrawer={hideChatDrawer}
+          ></AgentCanvas>
+        </DropdownProvider>
+      </ReactFlowProvider>
+      {fileUploadVisible && (
+        <UploadAgentDialog
+          hideModal={hideFileUploadModal}
+          onOk={onFileUploadOk}
+        ></UploadAgentDialog>
+      )}
+
+      {versionDialogVisible && (
+        <DropdownProvider>
+          <VersionDialog hideModal={hideVersionDialog}></VersionDialog>
+        </DropdownProvider>
+      )}
+      {settingDialogVisible && (
+        <SettingDialog hideModal={hideSettingDialog}></SettingDialog>
+      )}
+    </section>
+  );
+}
diff --git a/web/src/pages/data-flow/interface.ts b/web/src/pages/data-flow/interface.ts
new file mode 100644
index 000000000..0a6cba2f0
--- /dev/null
+++ b/web/src/pages/data-flow/interface.ts
@@ -0,0 +1,43 @@
+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/operator-icon.tsx b/web/src/pages/data-flow/operator-icon.tsx
new file mode 100644
index 000000000..b8ebc34ba
--- /dev/null
+++ b/web/src/pages/data-flow/operator-icon.tsx
@@ -0,0 +1,87 @@
+import { ReactComponent as ArxivIcon } from '@/assets/svg/arxiv.svg';
+import { ReactComponent as BingIcon } from '@/assets/svg/bing.svg';
+import { ReactComponent as CrawlerIcon } from '@/assets/svg/crawler.svg';
+import { ReactComponent as DuckIcon } from '@/assets/svg/duck.svg';
+import { ReactComponent as GithubIcon } from '@/assets/svg/github.svg';
+import { ReactComponent as GoogleScholarIcon } from '@/assets/svg/google-scholar.svg';
+import { ReactComponent as GoogleIcon } from '@/assets/svg/google.svg';
+import { ReactComponent as PubMedIcon } from '@/assets/svg/pubmed.svg';
+import { ReactComponent as SearXNGIcon } from '@/assets/svg/searxng.svg';
+import { ReactComponent as TavilyIcon } from '@/assets/svg/tavily.svg';
+import { ReactComponent as WenCaiIcon } from '@/assets/svg/wencai.svg';
+import { ReactComponent as WikipediaIcon } from '@/assets/svg/wikipedia.svg';
+import { ReactComponent as YahooFinanceIcon } from '@/assets/svg/yahoo-finance.svg';
+
+import { IconFont } from '@/components/icon-font';
+import { cn } from '@/lib/utils';
+import { HousePlus } from 'lucide-react';
+import { Operator } from './constant';
+
+interface IProps {
+  name: Operator;
+  className?: string;
+}
+
+export const OperatorIconMap = {
+  [Operator.Retrieval]: 'KR',
+  [Operator.Begin]: 'house-plus',
+  [Operator.Categorize]: 'a-QuestionClassification',
+  [Operator.Message]: 'reply',
+  [Operator.Iteration]: 'loop',
+  [Operator.Switch]: 'condition',
+  [Operator.Code]: 'code-set',
+  [Operator.Agent]: 'agent-ai',
+  [Operator.UserFillUp]: 'await',
+  [Operator.StringTransform]: 'a-textprocessing',
+  [Operator.Note]: 'notebook-pen',
+  [Operator.ExeSQL]: 'executesql-0',
+  [Operator.Invoke]: 'httprequest-0',
+  [Operator.Email]: 'sendemail-0',
+};
+
+export const SVGIconMap = {
+  [Operator.ArXiv]: ArxivIcon,
+  [Operator.GitHub]: GithubIcon,
+  [Operator.Bing]: BingIcon,
+  [Operator.DuckDuckGo]: DuckIcon,
+  [Operator.Google]: GoogleIcon,
+  [Operator.GoogleScholar]: GoogleScholarIcon,
+  [Operator.PubMed]: PubMedIcon,
+  [Operator.SearXNG]: SearXNGIcon,
+  [Operator.TavilyExtract]: TavilyIcon,
+  [Operator.TavilySearch]: TavilyIcon,
+  [Operator.Wikipedia]: WikipediaIcon,
+  [Operator.YahooFinance]: YahooFinanceIcon,
+  [Operator.WenCai]: WenCaiIcon,
+  [Operator.Crawler]: CrawlerIcon,
+};
+
+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,
+        )}
+      >
+        <HousePlus className="rounded size-3" />
+      </div>
+    );
+  }
+
+  return typeof Icon === 'string' ? (
+    <IconFont name={Icon} className={cn('size-5 ', className)}></IconFont>
+  ) : (
+    <SvgIcon className={cn('size-5 fill-current', className)}></SvgIcon>
+  );
+};
+
+export default OperatorIcon;
diff --git a/web/src/pages/data-flow/options.ts b/web/src/pages/data-flow/options.ts
new file mode 100644
index 000000000..4ad5a6457
--- /dev/null
+++ b/web/src/pages/data-flow/options.ts
@@ -0,0 +1,2174 @@
+import { upperFirst } from 'lodash';
+
+export const LanguageOptions = [
+  {
+    value: 'af',
+    label: 'Afrikaans',
+  },
+  {
+    value: 'pl',
+    label: 'Polski',
+  },
+  {
+    value: 'ar',
+    label: 'العربية',
+  },
+  {
+    value: 'ast',
+    label: 'Asturianu',
+  },
+  {
+    value: 'az',
+    label: 'Azərbaycanca',
+  },
+  {
+    value: 'bg',
+    label: 'Български',
+  },
+  {
+    value: 'nan',
+    label: '閩南語 / Bân-lâm-gú',
+  },
+  {
+    value: 'bn',
+    label: 'বাংলা',
+  },
+  {
+    value: 'be',
+    label: 'Беларуская',
+  },
+  {
+    value: 'ca',
+    label: 'Català',
+  },
+  {
+    value: 'cs',
+    label: 'Čeština',
+  },
+  {
+    value: 'cy',
+    label: 'Cymraeg',
+  },
+  {
+    value: 'da',
+    label: 'Dansk',
+  },
+  {
+    value: 'de',
+    label: 'Deutsch',
+  },
+  {
+    value: 'fr',
+    label: 'Français',
+  },
+  {
+    value: 'et',
+    label: 'Eesti',
+  },
+  {
+    value: 'el',
+    label: 'Ελληνικά',
+  },
+  {
+    value: 'en',
+    label: 'English',
+  },
+  {
+    value: 'es',
+    label: 'Español',
+  },
+  {
+    value: 'eo',
+    label: 'Esperanto',
+  },
+  {
+    value: 'eu',
+    label: 'Euskara',
+  },
+  {
+    value: 'fa',
+    label: 'فارسی',
+  },
+  {
+    value: 'fr',
+    label: 'Français',
+  },
+  {
+    value: 'gl',
+    label: 'Galego',
+  },
+  {
+    value: 'ko',
+    label: '한국어',
+  },
+  {
+    value: 'hy',
+    label: 'Հայերեն',
+  },
+  {
+    value: 'hi',
+    label: 'हिन्दी',
+  },
+  {
+    value: 'hr',
+    label: 'Hrvatski',
+  },
+  {
+    value: 'id',
+    label: 'Bahasa Indonesia',
+  },
+  {
+    value: 'it',
+    label: 'Italiano',
+  },
+  {
+    value: 'he',
+    label: 'עברית',
+  },
+  {
+    value: 'ka',
+    label: 'ქართული',
+  },
+  {
+    value: 'lld',
+    label: 'Ladin',
+  },
+  {
+    value: 'la',
+    label: 'Latina',
+  },
+  {
+    value: 'lv',
+    label: 'Latviešu',
+  },
+  {
+    value: 'lt',
+    label: 'Lietuvių',
+  },
+  {
+    value: 'hu',
+    label: 'Magyar',
+  },
+  {
+    value: 'mk',
+    label: 'Македонски',
+  },
+  {
+    value: 'arz',
+    label: 'مصرى',
+  },
+  {
+    value: 'ms',
+    label: 'Bahasa Melayu',
+  },
+  {
+    value: 'min',
+    label: 'Bahaso Minangkabau',
+  },
+  {
+    value: 'my',
+    label: 'မြန်မာဘာသာ',
+  },
+  {
+    value: 'nl',
+    label: 'Nederlands',
+  },
+  {
+    value: 'ja',
+    label: '日本語',
+  },
+  {
+    value: 'no',
+    label: 'Norsk (bokmål)',
+  },
+  {
+    value: 'nn',
+    label: 'Norsk (nynorsk)',
+  },
+  {
+    value: 'ce',
+    label: 'Нохчийн',
+  },
+  {
+    value: 'uz',
+    label: 'Oʻzbekcha / Ўзбекча',
+  },
+  {
+    value: 'pt',
+    label: 'Português',
+  },
+  {
+    value: 'kk',
+    label: 'Қазақша / Qazaqşa / قازاقشا',
+  },
+  {
+    value: 'ro',
+    label: 'Română',
+  },
+  {
+    value: 'ru',
+    label: 'Русский',
+  },
+  {
+    value: 'ceb',
+    label: 'Sinugboanong Binisaya',
+  },
+  {
+    value: 'sk',
+    label: 'Slovenčina',
+  },
+  {
+    value: 'sl',
+    label: 'Slovenščina',
+  },
+  {
+    value: 'sr',
+    label: 'Српски / Srpski',
+  },
+  {
+    value: 'sh',
+    label: 'Srpskohrvatski / Српскохрватски',
+  },
+  {
+    value: 'fi',
+    label: 'Suomi',
+  },
+  {
+    value: 'sv',
+    label: 'Svenska',
+  },
+  {
+    value: 'ta',
+    label: 'தமிழ்',
+  },
+  {
+    value: 'tt',
+    label: 'Татарча / Tatarça',
+  },
+  {
+    value: 'th',
+    label: 'ภาษาไทย',
+  },
+  {
+    value: 'tg',
+    label: 'Тоҷикӣ',
+  },
+  {
+    value: 'azb',
+    label: 'تۆرکجه',
+  },
+  {
+    value: 'tr',
+    label: 'Türkçe',
+  },
+  {
+    value: 'uk',
+    label: 'Українська',
+  },
+  {
+    value: 'ur',
+    label: 'اردو',
+  },
+  {
+    value: 'vi',
+    label: 'Tiếng Việt',
+  },
+  {
+    value: 'war',
+    label: 'Winaray',
+  },
+  {
+    value: 'zh',
+    label: '中文',
+  },
+  {
+    value: 'yue',
+    label: '粵語',
+  },
+];
+
+export const GoogleLanguageOptions = [
+  {
+    language_code: 'af',
+    language_name: 'Afrikaans',
+  },
+  {
+    language_code: 'ak',
+    language_name: 'Akan',
+  },
+  {
+    language_code: 'sq',
+    language_name: 'Albanian',
+  },
+  {
+    language_code: 'ws',
+    language_name: 'Samoa',
+  },
+  {
+    language_code: 'am',
+    language_name: 'Amharic',
+  },
+  {
+    language_code: 'ar',
+    language_name: 'Arabic',
+  },
+  {
+    language_code: 'hy',
+    language_name: 'Armenian',
+  },
+  {
+    language_code: 'az',
+    language_name: 'Azerbaijani',
+  },
+  {
+    language_code: 'eu',
+    language_name: 'Basque',
+  },
+  {
+    language_code: 'be',
+    language_name: 'Belarusian',
+  },
+  {
+    language_code: 'bem',
+    language_name: 'Bemba',
+  },
+  {
+    language_code: 'bn',
+    language_name: 'Bengali',
+  },
+  {
+    language_code: 'bh',
+    language_name: 'Bihari',
+  },
+  {
+    language_code: 'xx-bork',
+    language_name: 'Bork, bork, bork!',
+  },
+  {
+    language_code: 'bs',
+    language_name: 'Bosnian',
+  },
+  {
+    language_code: 'br',
+    language_name: 'Breton',
+  },
+  {
+    language_code: 'bg',
+    language_name: 'Bulgarian',
+  },
+  {
+    language_code: 'bt',
+    language_name: 'Bhutanese',
+  },
+  {
+    language_code: 'km',
+    language_name: 'Cambodian',
+  },
+  {
+    language_code: 'ca',
+    language_name: 'Catalan',
+  },
+  {
+    language_code: 'chr',
+    language_name: 'Cherokee',
+  },
+  {
+    language_code: 'ny',
+    language_name: 'Chichewa',
+  },
+  {
+    language_code: 'zh-cn',
+    language_name: 'Chinese (Simplified)',
+  },
+  {
+    language_code: 'zh-tw',
+    language_name: 'Chinese (Traditional)',
+  },
+  {
+    language_code: 'co',
+    language_name: 'Corsican',
+  },
+  {
+    language_code: 'hr',
+    language_name: 'Croatian',
+  },
+  {
+    language_code: 'cs',
+    language_name: 'Czech',
+  },
+  {
+    language_code: 'da',
+    language_name: 'Danish',
+  },
+  {
+    language_code: 'nl',
+    language_name: 'Dutch',
+  },
+  {
+    language_code: 'xx-elmer',
+    language_name: 'Elmer Fudd',
+  },
+  {
+    language_code: 'en',
+    language_name: 'English',
+  },
+  {
+    language_code: 'eo',
+    language_name: 'Esperanto',
+  },
+  {
+    language_code: 'et',
+    language_name: 'Estonian',
+  },
+  {
+    language_code: 'ee',
+    language_name: 'Ewe',
+  },
+  {
+    language_code: 'fo',
+    language_name: 'Faroese',
+  },
+  {
+    language_code: 'tl',
+    language_name: 'Filipino',
+  },
+  {
+    language_code: 'fi',
+    language_name: 'Finnish',
+  },
+  {
+    language_code: 'fr',
+    language_name: 'French',
+  },
+  {
+    language_code: 'fy',
+    language_name: 'Frisian',
+  },
+  {
+    language_code: 'gaa',
+    language_name: 'Ga',
+  },
+  {
+    language_code: 'gl',
+    language_name: 'Galician',
+  },
+  {
+    language_code: 'ka',
+    language_name: 'Georgian',
+  },
+  {
+    language_code: 'de',
+    language_name: 'German',
+  },
+  {
+    language_code: 'el',
+    language_name: 'Greek',
+  },
+  {
+    language_code: 'kl',
+    language_name: 'Greenlandic',
+  },
+  {
+    language_code: 'gn',
+    language_name: 'Guarani',
+  },
+  {
+    language_code: 'gu',
+    language_name: 'Gujarati',
+  },
+  {
+    language_code: 'xx-hacker',
+    language_name: 'Hacker',
+  },
+  {
+    language_code: 'ht',
+    language_name: 'Haitian Creole',
+  },
+  {
+    language_code: 'ha',
+    language_name: 'Hausa',
+  },
+  {
+    language_code: 'haw',
+    language_name: 'Hawaiian',
+  },
+  {
+    language_code: 'iw',
+    language_name: 'Hebrew',
+  },
+  {
+    language_code: 'hi',
+    language_name: 'Hindi',
+  },
+  {
+    language_code: 'hu',
+    language_name: 'Hungarian',
+  },
+  {
+    language_code: 'is',
+    language_name: 'Icelandic',
+  },
+  {
+    language_code: 'ig',
+    language_name: 'Igbo',
+  },
+  {
+    language_code: 'id',
+    language_name: 'Indonesian',
+  },
+  {
+    language_code: 'ia',
+    language_name: 'Interlingua',
+  },
+  {
+    language_code: 'ga',
+    language_name: 'Irish',
+  },
+  {
+    language_code: 'it',
+    language_name: 'Italian',
+  },
+  {
+    language_code: 'ja',
+    language_name: 'Japanese',
+  },
+  {
+    language_code: 'jw',
+    language_name: 'Javanese',
+  },
+  {
+    language_code: 'kn',
+    language_name: 'Kannada',
+  },
+  {
+    language_code: 'kk',
+    language_name: 'Kazakh',
+  },
+  {
+    language_code: 'rw',
+    language_name: 'Kinyarwanda',
+  },
+  {
+    language_code: 'rn',
+    language_name: 'Kirundi',
+  },
+  {
+    language_code: 'xx-klingon',
+    language_name: 'Klingon',
+  },
+  {
+    language_code: 'kg',
+    language_name: 'Kongo',
+  },
+  {
+    language_code: 'ko',
+    language_name: 'Korean',
+  },
+  {
+    language_code: 'kri',
+    language_name: 'Krio (Sierra Leone)',
+  },
+  {
+    language_code: 'ku',
+    language_name: 'Kurdish',
+  },
+  {
+    language_code: 'ckb',
+    language_name: 'Kurdish (Soranî)',
+  },
+  {
+    language_code: 'ky',
+    language_name: 'Kyrgyz',
+  },
+  {
+    language_code: 'lo',
+    language_name: 'Laothian',
+  },
+  {
+    language_code: 'la',
+    language_name: 'Latin',
+  },
+  {
+    language_code: 'lv',
+    language_name: 'Latvian',
+  },
+  {
+    language_code: 'ln',
+    language_name: 'Lingala',
+  },
+  {
+    language_code: 'lt',
+    language_name: 'Lithuanian',
+  },
+  {
+    language_code: 'loz',
+    language_name: 'Lozi',
+  },
+  {
+    language_code: 'lg',
+    language_name: 'Luganda',
+  },
+  {
+    language_code: 'ach',
+    language_name: 'Luo',
+  },
+  {
+    language_code: 'mk',
+    language_name: 'Macedonian',
+  },
+  {
+    language_code: 'mg',
+    language_name: 'Malagasy',
+  },
+  {
+    language_code: 'ms',
+    language_name: 'Malay',
+  },
+  {
+    language_code: 'ml',
+    language_name: 'Malayalam',
+  },
+  {
+    language_code: 'mt',
+    language_name: 'Maltese',
+  },
+  {
+    language_code: 'mv',
+    language_name: 'Maldives',
+  },
+  {
+    language_code: 'mi',
+    language_name: 'Maori',
+  },
+  {
+    language_code: 'mr',
+    language_name: 'Marathi',
+  },
+  {
+    language_code: 'mfe',
+    language_name: 'Mauritian Creole',
+  },
+  {
+    language_code: 'mo',
+    language_name: 'Moldavian',
+  },
+  {
+    language_code: 'mn',
+    language_name: 'Mongolian',
+  },
+  {
+    language_code: 'sr-me',
+    language_name: 'Montenegrin',
+  },
+  {
+    language_code: 'my',
+    language_name: 'Myanmar',
+  },
+  {
+    language_code: 'ne',
+    language_name: 'Nepali',
+  },
+  {
+    language_code: 'pcm',
+    language_name: 'Nigerian Pidgin',
+  },
+  {
+    language_code: 'nso',
+    language_name: 'Northern Sotho',
+  },
+  {
+    language_code: 'no',
+    language_name: 'Norwegian',
+  },
+  {
+    language_code: 'nn',
+    language_name: 'Norwegian (Nynorsk)',
+  },
+  {
+    language_code: 'oc',
+    language_name: 'Occitan',
+  },
+  {
+    language_code: 'or',
+    language_name: 'Oriya',
+  },
+  {
+    language_code: 'om',
+    language_name: 'Oromo',
+  },
+  {
+    language_code: 'ps',
+    language_name: 'Pashto',
+  },
+  {
+    language_code: 'fa',
+    language_name: 'Persian',
+  },
+  {
+    language_code: 'xx-pirate',
+    language_name: 'Pirate',
+  },
+  {
+    language_code: 'pl',
+    language_name: 'Polish',
+  },
+  {
+    language_code: 'pt',
+    language_name: 'Portuguese',
+  },
+  {
+    language_code: 'pt-br',
+    language_name: 'Portuguese (Brazil)',
+  },
+  {
+    language_code: 'pt-pt',
+    language_name: 'Portuguese (Portugal)',
+  },
+  {
+    language_code: 'pa',
+    language_name: 'Punjabi',
+  },
+  {
+    language_code: 'qu',
+    language_name: 'Quechua',
+  },
+  {
+    language_code: 'ro',
+    language_name: 'Romanian',
+  },
+  {
+    language_code: 'rm',
+    language_name: 'Romansh',
+  },
+  {
+    language_code: 'nyn',
+    language_name: 'Runyakitara',
+  },
+  {
+    language_code: 'ru',
+    language_name: 'Russian',
+  },
+  {
+    language_code: 'gd',
+    language_name: 'Scots Gaelic',
+  },
+  {
+    language_code: 'sr',
+    language_name: 'Serbian',
+  },
+  {
+    language_code: 'sh',
+    language_name: 'Serbo-Croatian',
+  },
+  {
+    language_code: 'st',
+    language_name: 'Sesotho',
+  },
+  {
+    language_code: 'tn',
+    language_name: 'Setswana',
+  },
+  {
+    language_code: 'crs',
+    language_name: 'Seychellois Creole',
+  },
+  {
+    language_code: 'sn',
+    language_name: 'Shona',
+  },
+  {
+    language_code: 'sd',
+    language_name: 'Sindhi',
+  },
+  {
+    language_code: 'si',
+    language_name: 'Sinhalese',
+  },
+  {
+    language_code: 'sk',
+    language_name: 'Slovak',
+  },
+  {
+    language_code: 'sl',
+    language_name: 'Slovenian',
+  },
+  {
+    language_code: 'so',
+    language_name: 'Somali',
+  },
+  {
+    language_code: 'es',
+    language_name: 'Spanish',
+  },
+  {
+    language_code: 'es-419',
+    language_name: 'Spanish (Latin American)',
+  },
+  {
+    language_code: 'su',
+    language_name: 'Sundanese',
+  },
+  {
+    language_code: 'sw',
+    language_name: 'Swahili',
+  },
+  {
+    language_code: 'sv',
+    language_name: 'Swedish',
+  },
+  {
+    language_code: 'tg',
+    language_name: 'Tajik',
+  },
+  {
+    language_code: 'ta',
+    language_name: 'Tamil',
+  },
+  {
+    language_code: 'tt',
+    language_name: 'Tatar',
+  },
+  {
+    language_code: 'te',
+    language_name: 'Telugu',
+  },
+  {
+    language_code: 'th',
+    language_name: 'Thai',
+  },
+  {
+    language_code: 'ti',
+    language_name: 'Tigrinya',
+  },
+  {
+    language_code: 'to',
+    language_name: 'Tonga',
+  },
+  {
+    language_code: 'lua',
+    language_name: 'Tshiluba',
+  },
+  {
+    language_code: 'tum',
+    language_name: 'Tumbuka',
+  },
+  {
+    language_code: 'tr',
+    language_name: 'Turkish',
+  },
+  {
+    language_code: 'tk',
+    language_name: 'Turkmen',
+  },
+  {
+    language_code: 'tw',
+    language_name: 'Twi',
+  },
+  {
+    language_code: 'ug',
+    language_name: 'Uighur',
+  },
+  {
+    language_code: 'uk',
+    language_name: 'Ukrainian',
+  },
+  {
+    language_code: 'ur',
+    language_name: 'Urdu',
+  },
+  {
+    language_code: 'uz',
+    language_name: 'Uzbek',
+  },
+  {
+    language_code: 'vu',
+    language_name: 'Vanuatu',
+  },
+  {
+    language_code: 'vi',
+    language_name: 'Vietnamese',
+  },
+  {
+    language_code: 'cy',
+    language_name: 'Welsh',
+  },
+  {
+    language_code: 'wo',
+    language_name: 'Wolof',
+  },
+  {
+    language_code: 'xh',
+    language_name: 'Xhosa',
+  },
+  {
+    language_code: 'yi',
+    language_name: 'Yiddish',
+  },
+  {
+    language_code: 'yo',
+    language_name: 'Yoruba',
+  },
+  {
+    language_code: 'zu',
+    language_name: 'Zulu',
+  },
+].map((x) => ({ label: x.language_name, value: x.language_code }));
+
+export const GoogleCountryOptions = [
+  {
+    country_code: 'af',
+    country_name: 'Afghanistan',
+  },
+  {
+    country_code: 'al',
+    country_name: 'Albania',
+  },
+  {
+    country_code: 'dz',
+    country_name: 'Algeria',
+  },
+  {
+    country_code: 'as',
+    country_name: 'American Samoa',
+  },
+  {
+    country_code: 'ad',
+    country_name: 'Andorra',
+  },
+  {
+    country_code: 'ao',
+    country_name: 'Angola',
+  },
+  {
+    country_code: 'ai',
+    country_name: 'Anguilla',
+  },
+  {
+    country_code: 'aq',
+    country_name: 'Antarctica',
+  },
+  {
+    country_code: 'ag',
+    country_name: 'Antigua and Barbuda',
+  },
+  {
+    country_code: 'ar',
+    country_name: 'Argentina',
+  },
+  {
+    country_code: 'am',
+    country_name: 'Armenia',
+  },
+  {
+    country_code: 'aw',
+    country_name: 'Aruba',
+  },
+  {
+    country_code: 'au',
+    country_name: 'Australia',
+  },
+  {
+    country_code: 'at',
+    country_name: 'Austria',
+  },
+  {
+    country_code: 'az',
+    country_name: 'Azerbaijan',
+  },
+  {
+    country_code: 'bs',
+    country_name: 'Bahamas',
+  },
+  {
+    country_code: 'bh',
+    country_name: 'Bahrain',
+  },
+  {
+    country_code: 'bd',
+    country_name: 'Bangladesh',
+  },
+  {
+    country_code: 'bb',
+    country_name: 'Barbados',
+  },
+  {
+    country_code: 'by',
+    country_name: 'Belarus',
+  },
+  {
+    country_code: 'be',
+    country_name: 'Belgium',
+  },
+  {
+    country_code: 'bz',
+    country_name: 'Belize',
+  },
+  {
+    country_code: 'bj',
+    country_name: 'Benin',
+  },
+  {
+    country_code: 'bm',
+    country_name: 'Bermuda',
+  },
+  {
+    country_code: 'bt',
+    country_name: 'Bhutan',
+  },
+  {
+    country_code: 'bo',
+    country_name: 'Bolivia',
+  },
+  {
+    country_code: 'ba',
+    country_name: 'Bosnia and Herzegovina',
+  },
+  {
+    country_code: 'bw',
+    country_name: 'Botswana',
+  },
+  {
+    country_code: 'bv',
+    country_name: 'Bouvet Island',
+  },
+  {
+    country_code: 'br',
+    country_name: 'Brazil',
+  },
+  {
+    country_code: 'io',
+    country_name: 'British Indian Ocean Territory',
+  },
+  {
+    country_code: 'bn',
+    country_name: 'Brunei Darussalam',
+  },
+  {
+    country_code: 'bg',
+    country_name: 'Bulgaria',
+  },
+  {
+    country_code: 'bf',
+    country_name: 'Burkina Faso',
+  },
+  {
+    country_code: 'bi',
+    country_name: 'Burundi',
+  },
+  {
+    country_code: 'kh',
+    country_name: 'Cambodia',
+  },
+  {
+    country_code: 'cm',
+    country_name: 'Cameroon',
+  },
+  {
+    country_code: 'ca',
+    country_name: 'Canada',
+  },
+  {
+    country_code: 'cv',
+    country_name: 'Cape Verde',
+  },
+  {
+    country_code: 'ky',
+    country_name: 'Cayman Islands',
+  },
+  {
+    country_code: 'cf',
+    country_name: 'Central African Republic',
+  },
+  {
+    country_code: 'td',
+    country_name: 'Chad',
+  },
+  {
+    country_code: 'cl',
+    country_name: 'Chile',
+  },
+  {
+    country_code: 'cn',
+    country_name: 'China',
+  },
+  {
+    country_code: 'cx',
+    country_name: 'Christmas Island',
+  },
+  {
+    country_code: 'cc',
+    country_name: 'Cocos (Keeling) Islands',
+  },
+  {
+    country_code: 'co',
+    country_name: 'Colombia',
+  },
+  {
+    country_code: 'km',
+    country_name: 'Comoros',
+  },
+  {
+    country_code: 'cg',
+    country_name: 'Congo',
+  },
+  {
+    country_code: 'cd',
+    country_name: 'Congo, the Democratic Republic of the',
+  },
+  {
+    country_code: 'ck',
+    country_name: 'Cook Islands',
+  },
+  {
+    country_code: 'cr',
+    country_name: 'Costa Rica',
+  },
+  {
+    country_code: 'ci',
+    country_name: "Cote D'ivoire",
+  },
+  {
+    country_code: 'hr',
+    country_name: 'Croatia',
+  },
+  {
+    country_code: 'cu',
+    country_name: 'Cuba',
+  },
+  {
+    country_code: 'cy',
+    country_name: 'Cyprus',
+  },
+  {
+    country_code: 'cz',
+    country_name: 'Czech Republic',
+  },
+  {
+    country_code: 'dk',
+    country_name: 'Denmark',
+  },
+  {
+    country_code: 'dj',
+    country_name: 'Djibouti',
+  },
+  {
+    country_code: 'dm',
+    country_name: 'Dominica',
+  },
+  {
+    country_code: 'do',
+    country_name: 'Dominican Republic',
+  },
+  {
+    country_code: 'ec',
+    country_name: 'Ecuador',
+  },
+  {
+    country_code: 'eg',
+    country_name: 'Egypt',
+  },
+  {
+    country_code: 'sv',
+    country_name: 'El Salvador',
+  },
+  {
+    country_code: 'gq',
+    country_name: 'Equatorial Guinea',
+  },
+  {
+    country_code: 'er',
+    country_name: 'Eritrea',
+  },
+  {
+    country_code: 'ee',
+    country_name: 'Estonia',
+  },
+  {
+    country_code: 'et',
+    country_name: 'Ethiopia',
+  },
+  {
+    country_code: 'fk',
+    country_name: 'Falkland Islands (Malvinas)',
+  },
+  {
+    country_code: 'fo',
+    country_name: 'Faroe Islands',
+  },
+  {
+    country_code: 'fj',
+    country_name: 'Fiji',
+  },
+  {
+    country_code: 'fi',
+    country_name: 'Finland',
+  },
+  {
+    country_code: 'fr',
+    country_name: 'France',
+  },
+  {
+    country_code: 'gf',
+    country_name: 'French Guiana',
+  },
+  {
+    country_code: 'pf',
+    country_name: 'French Polynesia',
+  },
+  {
+    country_code: 'tf',
+    country_name: 'French Southern Territories',
+  },
+  {
+    country_code: 'ga',
+    country_name: 'Gabon',
+  },
+  {
+    country_code: 'gm',
+    country_name: 'Gambia',
+  },
+  {
+    country_code: 'ge',
+    country_name: 'Georgia',
+  },
+  {
+    country_code: 'de',
+    country_name: 'Germany',
+  },
+  {
+    country_code: 'gh',
+    country_name: 'Ghana',
+  },
+  {
+    country_code: 'gi',
+    country_name: 'Gibraltar',
+  },
+  {
+    country_code: 'gr',
+    country_name: 'Greece',
+  },
+  {
+    country_code: 'gl',
+    country_name: 'Greenland',
+  },
+  {
+    country_code: 'gd',
+    country_name: 'Grenada',
+  },
+  {
+    country_code: 'gp',
+    country_name: 'Guadeloupe',
+  },
+  {
+    country_code: 'gu',
+    country_name: 'Guam',
+  },
+  {
+    country_code: 'gt',
+    country_name: 'Guatemala',
+  },
+  {
+    country_code: 'gn',
+    country_name: 'Guinea',
+  },
+  {
+    country_code: 'gw',
+    country_name: 'Guinea-Bissau',
+  },
+  {
+    country_code: 'gy',
+    country_name: 'Guyana',
+  },
+  {
+    country_code: 'ht',
+    country_name: 'Haiti',
+  },
+  {
+    country_code: 'hm',
+    country_name: 'Heard Island and Mcdonald Islands',
+  },
+  {
+    country_code: 'va',
+    country_name: 'Holy See (Vatican City State)',
+  },
+  {
+    country_code: 'hn',
+    country_name: 'Honduras',
+  },
+  {
+    country_code: 'hk',
+    country_name: 'Hong Kong',
+  },
+  {
+    country_code: 'hu',
+    country_name: 'Hungary',
+  },
+  {
+    country_code: 'is',
+    country_name: 'Iceland',
+  },
+  {
+    country_code: 'in',
+    country_name: 'India',
+  },
+  {
+    country_code: 'id',
+    country_name: 'Indonesia',
+  },
+  {
+    country_code: 'ir',
+    country_name: 'Iran, Islamic Republic of',
+  },
+  {
+    country_code: 'iq',
+    country_name: 'Iraq',
+  },
+  {
+    country_code: 'ie',
+    country_name: 'Ireland',
+  },
+  {
+    country_code: 'il',
+    country_name: 'Israel',
+  },
+  {
+    country_code: 'it',
+    country_name: 'Italy',
+  },
+  {
+    country_code: 'jm',
+    country_name: 'Jamaica',
+  },
+  {
+    country_code: 'jp',
+    country_name: 'Japan',
+  },
+  {
+    country_code: 'jo',
+    country_name: 'Jordan',
+  },
+  {
+    country_code: 'kz',
+    country_name: 'Kazakhstan',
+  },
+  {
+    country_code: 'ke',
+    country_name: 'Kenya',
+  },
+  {
+    country_code: 'ki',
+    country_name: 'Kiribati',
+  },
+  {
+    country_code: 'kp',
+    country_name: "Korea, Democratic People's Republic of",
+  },
+  {
+    country_code: 'kr',
+    country_name: 'Korea, Republic of',
+  },
+  {
+    country_code: 'kw',
+    country_name: 'Kuwait',
+  },
+  {
+    country_code: 'kg',
+    country_name: 'Kyrgyzstan',
+  },
+  {
+    country_code: 'la',
+    country_name: "Lao People's Democratic Republic",
+  },
+  {
+    country_code: 'lv',
+    country_name: 'Latvia',
+  },
+  {
+    country_code: 'lb',
+    country_name: 'Lebanon',
+  },
+  {
+    country_code: 'ls',
+    country_name: 'Lesotho',
+  },
+  {
+    country_code: 'lr',
+    country_name: 'Liberia',
+  },
+  {
+    country_code: 'ly',
+    country_name: 'Libyan Arab Jamahiriya',
+  },
+  {
+    country_code: 'li',
+    country_name: 'Liechtenstein',
+  },
+  {
+    country_code: 'lt',
+    country_name: 'Lithuania',
+  },
+  {
+    country_code: 'lu',
+    country_name: 'Luxembourg',
+  },
+  {
+    country_code: 'mo',
+    country_name: 'Macao',
+  },
+  {
+    country_code: 'mk',
+    country_name: 'Macedonia, the Former Yugosalv Republic of',
+  },
+  {
+    country_code: 'mg',
+    country_name: 'Madagascar',
+  },
+  {
+    country_code: 'mw',
+    country_name: 'Malawi',
+  },
+  {
+    country_code: 'my',
+    country_name: 'Malaysia',
+  },
+  {
+    country_code: 'mv',
+    country_name: 'Maldives',
+  },
+  {
+    country_code: 'ml',
+    country_name: 'Mali',
+  },
+  {
+    country_code: 'mt',
+    country_name: 'Malta',
+  },
+  {
+    country_code: 'mh',
+    country_name: 'Marshall Islands',
+  },
+  {
+    country_code: 'mq',
+    country_name: 'Martinique',
+  },
+  {
+    country_code: 'mr',
+    country_name: 'Mauritania',
+  },
+  {
+    country_code: 'mu',
+    country_name: 'Mauritius',
+  },
+  {
+    country_code: 'yt',
+    country_name: 'Mayotte',
+  },
+  {
+    country_code: 'mx',
+    country_name: 'Mexico',
+  },
+  {
+    country_code: 'fm',
+    country_name: 'Micronesia, Federated States of',
+  },
+  {
+    country_code: 'md',
+    country_name: 'Moldova, Republic of',
+  },
+  {
+    country_code: 'mc',
+    country_name: 'Monaco',
+  },
+  {
+    country_code: 'mn',
+    country_name: 'Mongolia',
+  },
+  {
+    country_code: 'ms',
+    country_name: 'Montserrat',
+  },
+  {
+    country_code: 'ma',
+    country_name: 'Morocco',
+  },
+  {
+    country_code: 'mz',
+    country_name: 'Mozambique',
+  },
+  {
+    country_code: 'mm',
+    country_name: 'Myanmar',
+  },
+  {
+    country_code: 'na',
+    country_name: 'Namibia',
+  },
+  {
+    country_code: 'nr',
+    country_name: 'Nauru',
+  },
+  {
+    country_code: 'np',
+    country_name: 'Nepal',
+  },
+  {
+    country_code: 'nl',
+    country_name: 'Netherlands',
+  },
+  {
+    country_code: 'an',
+    country_name: 'Netherlands Antilles',
+  },
+  {
+    country_code: 'nc',
+    country_name: 'New Caledonia',
+  },
+  {
+    country_code: 'nz',
+    country_name: 'New Zealand',
+  },
+  {
+    country_code: 'ni',
+    country_name: 'Nicaragua',
+  },
+  {
+    country_code: 'ne',
+    country_name: 'Niger',
+  },
+  {
+    country_code: 'ng',
+    country_name: 'Nigeria',
+  },
+  {
+    country_code: 'nu',
+    country_name: 'Niue',
+  },
+  {
+    country_code: 'nf',
+    country_name: 'Norfolk Island',
+  },
+  {
+    country_code: 'mp',
+    country_name: 'Northern Mariana Islands',
+  },
+  {
+    country_code: 'no',
+    country_name: 'Norway',
+  },
+  {
+    country_code: 'om',
+    country_name: 'Oman',
+  },
+  {
+    country_code: 'pk',
+    country_name: 'Pakistan',
+  },
+  {
+    country_code: 'pw',
+    country_name: 'Palau',
+  },
+  {
+    country_code: 'ps',
+    country_name: 'Palestinian Territory, Occupied',
+  },
+  {
+    country_code: 'pa',
+    country_name: 'Panama',
+  },
+  {
+    country_code: 'pg',
+    country_name: 'Papua New Guinea',
+  },
+  {
+    country_code: 'py',
+    country_name: 'Paraguay',
+  },
+  {
+    country_code: 'pe',
+    country_name: 'Peru',
+  },
+  {
+    country_code: 'ph',
+    country_name: 'Philippines',
+  },
+  {
+    country_code: 'pn',
+    country_name: 'Pitcairn',
+  },
+  {
+    country_code: 'pl',
+    country_name: 'Poland',
+  },
+  {
+    country_code: 'pt',
+    country_name: 'Portugal',
+  },
+  {
+    country_code: 'pr',
+    country_name: 'Puerto Rico',
+  },
+  {
+    country_code: 'qa',
+    country_name: 'Qatar',
+  },
+  {
+    country_code: 're',
+    country_name: 'Reunion',
+  },
+  {
+    country_code: 'ro',
+    country_name: 'Romania',
+  },
+  {
+    country_code: 'ru',
+    country_name: 'Russian Federation',
+  },
+  {
+    country_code: 'rw',
+    country_name: 'Rwanda',
+  },
+  {
+    country_code: 'sh',
+    country_name: 'Saint Helena',
+  },
+  {
+    country_code: 'kn',
+    country_name: 'Saint Kitts and Nevis',
+  },
+  {
+    country_code: 'lc',
+    country_name: 'Saint Lucia',
+  },
+  {
+    country_code: 'pm',
+    country_name: 'Saint Pierre and Miquelon',
+  },
+  {
+    country_code: 'vc',
+    country_name: 'Saint Vincent and the Grenadines',
+  },
+  {
+    country_code: 'ws',
+    country_name: 'Samoa',
+  },
+  {
+    country_code: 'sm',
+    country_name: 'San Marino',
+  },
+  {
+    country_code: 'st',
+    country_name: 'Sao Tome and Principe',
+  },
+  {
+    country_code: 'sa',
+    country_name: 'Saudi Arabia',
+  },
+  {
+    country_code: 'sn',
+    country_name: 'Senegal',
+  },
+  {
+    country_code: 'rs',
+    country_name: 'Serbia and Montenegro',
+  },
+  {
+    country_code: 'sc',
+    country_name: 'Seychelles',
+  },
+  {
+    country_code: 'sl',
+    country_name: 'Sierra Leone',
+  },
+  {
+    country_code: 'sg',
+    country_name: 'Singapore',
+  },
+  {
+    country_code: 'sk',
+    country_name: 'Slovakia',
+  },
+  {
+    country_code: 'si',
+    country_name: 'Slovenia',
+  },
+  {
+    country_code: 'sb',
+    country_name: 'Solomon Islands',
+  },
+  {
+    country_code: 'so',
+    country_name: 'Somalia',
+  },
+  {
+    country_code: 'za',
+    country_name: 'South Africa',
+  },
+  {
+    country_code: 'gs',
+    country_name: 'South Georgia and the South Sandwich Islands',
+  },
+  {
+    country_code: 'es',
+    country_name: 'Spain',
+  },
+  {
+    country_code: 'lk',
+    country_name: 'Sri Lanka',
+  },
+  {
+    country_code: 'sd',
+    country_name: 'Sudan',
+  },
+  {
+    country_code: 'sr',
+    country_name: 'Suriname',
+  },
+  {
+    country_code: 'sj',
+    country_name: 'Svalbard and Jan Mayen',
+  },
+  {
+    country_code: 'sz',
+    country_name: 'Swaziland',
+  },
+  {
+    country_code: 'se',
+    country_name: 'Sweden',
+  },
+  {
+    country_code: 'ch',
+    country_name: 'Switzerland',
+  },
+  {
+    country_code: 'sy',
+    country_name: 'Syrian Arab Republic',
+  },
+  {
+    country_code: 'tw',
+    country_name: 'Taiwan, Province of China',
+  },
+  {
+    country_code: 'tj',
+    country_name: 'Tajikistan',
+  },
+  {
+    country_code: 'tz',
+    country_name: 'Tanzania, United Republic of',
+  },
+  {
+    country_code: 'th',
+    country_name: 'Thailand',
+  },
+  {
+    country_code: 'tl',
+    country_name: 'Timor-Leste',
+  },
+  {
+    country_code: 'tg',
+    country_name: 'Togo',
+  },
+  {
+    country_code: 'tk',
+    country_name: 'Tokelau',
+  },
+  {
+    country_code: 'to',
+    country_name: 'Tonga',
+  },
+  {
+    country_code: 'tt',
+    country_name: 'Trinidad and Tobago',
+  },
+  {
+    country_code: 'tn',
+    country_name: 'Tunisia',
+  },
+  {
+    country_code: 'tr',
+    country_name: 'Turkiye',
+  },
+  {
+    country_code: 'tm',
+    country_name: 'Turkmenistan',
+  },
+  {
+    country_code: 'tc',
+    country_name: 'Turks and Caicos Islands',
+  },
+  {
+    country_code: 'tv',
+    country_name: 'Tuvalu',
+  },
+  {
+    country_code: 'ug',
+    country_name: 'Uganda',
+  },
+  {
+    country_code: 'ua',
+    country_name: 'Ukraine',
+  },
+  {
+    country_code: 'ae',
+    country_name: 'United Arab Emirates',
+  },
+  {
+    country_code: 'uk',
+    country_name: 'United Kingdom',
+  },
+  {
+    country_code: 'gb',
+    country_name: 'United Kingdom',
+  },
+  {
+    country_code: 'us',
+    country_name: 'United States',
+  },
+  {
+    country_code: 'um',
+    country_name: 'United States Minor Outlying Islands',
+  },
+  {
+    country_code: 'uy',
+    country_name: 'Uruguay',
+  },
+  {
+    country_code: 'uz',
+    country_name: 'Uzbekistan',
+  },
+  {
+    country_code: 'vu',
+    country_name: 'Vanuatu',
+  },
+  {
+    country_code: 've',
+    country_name: 'Venezuela',
+  },
+  {
+    country_code: 'vn',
+    country_name: 'Viet Nam',
+  },
+  {
+    country_code: 'vg',
+    country_name: 'Virgin Islands, British',
+  },
+  {
+    country_code: 'vi',
+    country_name: 'Virgin Islands, U.S.',
+  },
+  {
+    country_code: 'wf',
+    country_name: 'Wallis and Futuna',
+  },
+  {
+    country_code: 'eh',
+    country_name: 'Western Sahara',
+  },
+  {
+    country_code: 'ye',
+    country_name: 'Yemen',
+  },
+  {
+    country_code: 'zm',
+    country_name: 'Zambia',
+  },
+  {
+    country_code: 'zw',
+    country_name: 'Zimbabwe',
+  },
+].map((x) => ({ label: x.country_name, value: x.country_code }));
+
+export const BingCountryOptions = [
+  { label: 'Argentina AR', value: 'AR' },
+  { label: 'Australia AU', value: 'AU' },
+  { label: 'Austria AT', value: 'AT' },
+  { label: 'Belgium BE', value: 'BE' },
+  { label: 'Brazil BR', value: 'BR' },
+  { label: 'Canada CA', value: 'CA' },
+  { label: 'Chile CL', value: 'CL' },
+  { label: 'Denmark DK', value: 'DK' },
+  { label: 'Finland FI', value: 'FI' },
+  { label: 'France FR', value: 'FR' },
+  { label: 'Germany DE', value: 'DE' },
+  { label: 'Hong Kong SAR HK', value: 'HK' },
+  { label: 'India IN', value: 'IN' },
+  { label: 'Indonesia ID', value: 'ID' },
+  { label: 'Italy IT', value: 'IT' },
+  { label: 'Japan JP', value: 'JP' },
+  { label: 'Korea KR', value: 'KR' },
+  { label: 'Malaysia MY', value: 'MY' },
+  { label: 'Mexico MX', value: 'MX' },
+  { label: 'Netherlands NL', value: 'NL' },
+  { label: 'New Zealand NZ', value: 'NZ' },
+  { label: 'Norway NO', value: 'NO' },
+  { label: "People's Republic of China CN", value: 'CN' },
+  { label: 'Poland PL', value: 'PL' },
+  { label: 'Portugal PT', value: 'PT' },
+  { label: 'Republic of the Philippines PH', value: 'PH' },
+  { label: 'Russia RU', value: 'RU' },
+  { label: 'Saudi Arabia SA', value: 'SA' },
+  { label: 'South Africa ZA', value: 'ZA' },
+  { label: 'Spain ES', value: 'ES' },
+  { label: 'Sweden SE', value: 'SE' },
+  { label: 'Switzerland CH', value: 'CH' },
+  { label: 'Taiwan TW', value: 'TW' },
+  { label: 'Türkiye TR', value: 'TR' },
+  { label: 'United Kingdom GB', value: 'GB' },
+  { label: 'United States US', value: 'US' },
+];
+
+export const BingLanguageOptions = [
+  { label: 'Arabic ar', value: 'ar' },
+  { label: 'Basque eu', value: 'eu' },
+  { label: 'Bengali bn', value: 'bn' },
+  { label: 'Bulgarian bg', value: 'bg' },
+  { label: 'Catalan ca', value: 'ca' },
+  { label: 'Chinese (Simplified) zh-hans', value: 'ns' },
+  { label: 'Chinese (Traditional) zh-hant', value: 'nt' },
+  { label: 'Croatian hr', value: 'hr' },
+  { label: 'Czech cs', value: 'cs' },
+  { label: 'Danish da', value: 'da' },
+  { label: 'Dutch nl', value: 'nl' },
+  { label: 'English en', value: 'en' },
+  { label: 'English-United Kingdom en-gb', value: 'gb' },
+  { label: 'Estonian et', value: 'et' },
+  { label: 'Finnish fi', value: 'fi' },
+  { label: 'French fr', value: 'fr' },
+  { label: 'Galician gl', value: 'gl' },
+  { label: 'German de', value: 'de' },
+  { label: 'Gujarati gu', value: 'gu' },
+  { label: 'Hebrew he', value: 'he' },
+  { label: 'Hindi hi', value: 'hi' },
+  { label: 'Hungarian hu', value: 'hu' },
+  { label: 'Icelandic is', value: 'is' },
+  { label: 'Italian it', value: 'it' },
+  { label: 'Japanese jp', value: 'jp' },
+  { label: 'Kannada kn', value: 'kn' },
+  { label: 'Korean ko', value: 'ko' },
+  { label: 'Latvian lv', value: 'lv' },
+  { label: 'Lithuanian lt', value: 'lt' },
+  { label: 'Malay ms', value: 'ms' },
+  { label: 'Malayalam ml', value: 'ml' },
+  { label: 'Marathi mr', value: 'mr' },
+  { label: 'Norwegian (Bokmål) nb', value: 'nb' },
+  { label: 'Polish pl', value: 'pl' },
+  { label: 'Portuguese (Brazil) pt-br', value: 'br' },
+  { label: 'Portuguese (Portugal) pt-pt', value: 'pt' },
+  { label: 'Punjabi pa', value: 'pa' },
+  { label: 'Romanian ro', value: 'ro' },
+  { label: 'Russian ru', value: 'ru' },
+  { label: 'Serbian (Cyrylic) sr', value: 'sr' },
+  { label: 'Slovak sk', value: 'sk' },
+  { label: 'Slovenian sl', value: 'sl' },
+  { label: 'Spanish es', value: 'es' },
+  { label: 'Swedish sv', value: 'sv' },
+  { label: 'Tamil ta', value: 'ta' },
+  { label: 'Telugu te', value: 'te' },
+  { label: 'Thai th', value: 'th' },
+  { label: 'Turkish tr', value: 'tr' },
+  { label: 'Ukrainian uk', value: 'uk' },
+  { label: 'Vietnamese vi', value: 'vi' },
+];
+
+export const DeepLSourceLangOptions = [
+  { label: 'Arabic [1]', value: 'AR' },
+  { label: 'Bulgarian', value: 'BG' },
+  { label: 'Czech', value: 'CS' },
+  { label: 'Danish', value: 'DA' },
+  { label: 'German', value: 'DE' },
+  { label: 'Greek', value: 'EL' },
+  { label: 'English', value: 'EN' },
+  { label: 'Spanish', value: 'ES' },
+  { label: 'Estonian', value: 'ET' },
+  { label: 'Finnish', value: 'FI' },
+  { label: 'French', value: 'FR' },
+  { label: 'Hungarian', value: 'HU' },
+  { label: 'Indonesian', value: 'ID' },
+  { label: 'Italian', value: 'IT' },
+  { label: 'Japanese', value: 'JA' },
+  { label: 'Korean', value: 'KO' },
+  { label: 'Lithuanian', value: 'LT' },
+  { label: 'Latvian', value: 'LV' },
+  { label: 'Norwegian Bokmål', value: 'NB' },
+  { label: 'Dutch', value: 'NL' },
+  { label: 'Polish', value: 'PL' },
+  { label: 'Portuguese (all Portuguese varieties mixed)', value: 'PT' },
+  { label: 'Romanian', value: 'RO' },
+  { label: 'Russian', value: 'RU' },
+  { label: 'Slovak', value: 'SK' },
+  { label: 'Slovenian', value: 'SL' },
+  { label: 'Swedish', value: 'SV' },
+  { label: 'Turkish', value: 'TR' },
+  { label: 'Ukrainian', value: 'UK' },
+  { label: 'Chinese', value: 'ZH' },
+];
+export const DeepLTargetLangOptions = [
+  { label: 'Arabic [1]', value: 'AR' },
+  { label: 'Bulgarian', value: 'BG' },
+  { label: 'Czech', value: 'CS' },
+  { label: 'Danish', value: 'DA' },
+  { label: 'German', value: 'DE' },
+  { label: 'Greek', value: 'EL' },
+  { label: 'English (British)', value: 'EN-GB' },
+  { label: 'English (American)', value: 'EN-US' },
+  { label: 'Spanish', value: 'ES' },
+  { label: 'Estonian', value: 'ET' },
+  { label: 'Finnish', value: 'FI' },
+  { label: 'French', value: 'FR' },
+  { label: 'Hungarian', value: 'HU' },
+  { label: 'Indonesian', value: 'ID' },
+  { label: 'Italian', value: 'IT' },
+  { label: 'Japanese', value: 'JA' },
+  { label: 'Korean', value: 'KO' },
+  { label: 'Lithuanian', value: 'LT' },
+  { label: 'Latvian', value: 'LV' },
+  { label: 'Norwegian Bokmål', value: 'NB' },
+  { label: 'Dutch', value: 'NL' },
+  { label: 'Polish', value: 'PL' },
+  { label: 'Portuguese (Brazilian)', value: 'PT-BR' },
+  {
+    label:
+      'Portuguese (all Portuguese varieties excluding Brazilian Portuguese)',
+    value: 'PT-PT',
+  },
+  { label: 'Romanian', value: 'RO' },
+  { label: 'Russian', value: 'RU' },
+  { label: 'Slovak', value: 'SK' },
+  { label: 'Slovenian', value: 'SL' },
+  { label: 'Swedish', value: 'SV' },
+  { label: 'Turkish', value: 'TR' },
+  { label: 'Ukrainian', value: 'UK' },
+  { label: 'Chinese (simplified)', value: 'ZH' },
+];
+
+export const BaiduFanyiDomainOptions = [
+  'it',
+  'finance',
+  'machinery',
+  'senimed',
+  'novel',
+  'academic',
+  'aerospace',
+  'wiki',
+  'news',
+  'law',
+  'contract',
+];
+
+export const BaiduFanyiSourceLangOptions = [
+  'auto',
+  'zh',
+  'en',
+  'yue',
+  'wyw',
+  'jp',
+  'kor',
+  'fra',
+  'spa',
+  'th',
+  'ara',
+  'ru',
+  'pt',
+  'de',
+  'it',
+  'el',
+  'nl',
+  'pl',
+  'bul',
+  'est',
+  'dan',
+  'fin',
+  'cs',
+  'rom',
+  'slo',
+  'swe',
+  'hu',
+  'cht',
+  'vie',
+];
+
+export const QWeatherLangOptions = [
+  'zh',
+  'zh-hant',
+  'en',
+  'de',
+  'es',
+  'fr',
+  'it',
+  'ja',
+  'ko',
+  'ru',
+  'hi',
+  'th',
+  'ar',
+  'pt',
+  'bn',
+  'ms',
+  'nl',
+  'el',
+  'la',
+  'sv',
+  'id',
+  'pl',
+  'tr',
+  'cs',
+  'et',
+  'vi',
+  'fil',
+  'fi',
+  'he',
+  'is',
+  'nb',
+];
+
+export const QWeatherTypeOptions = ['weather', 'indices', 'airquality'];
+
+export const QWeatherUserTypeOptions = ['free', 'paid'];
+
+export const QWeatherTimePeriodOptions = [
+  'now',
+  '3d',
+  '7d',
+  '10d',
+  '15d',
+  '30d',
+];
+
+export const ExeSQLOptions = ['mysql', 'postgresql', 'mariadb', 'mssql'].map(
+  (x) => ({
+    label: upperFirst(x),
+    value: x,
+  }),
+);
+
+export const WenCaiQueryTypeOptions = [
+  'stock',
+  'zhishu',
+  'fund',
+  'hkstock',
+  'usstock',
+  'threeboard',
+  'conbond',
+  'insurance',
+  'futures',
+  'lccp',
+  'foreign_exchange',
+];
+
+export const Jin10TypeOptions = ['flash', 'calendar', 'symbols', 'news'];
+export const Jin10FlashTypeOptions = new Array(5)
+  .fill(1)
+  .map((x, idx) => (idx + 1).toString());
+export const Jin10CalendarTypeOptions = ['cj', 'qh', 'hk', 'us'];
+export const Jin10CalendarDatashapeOptions = ['data', 'event', 'holiday'];
+export const Jin10SymbolsTypeOptions = ['GOODS', 'FOREX', 'FUTURE', 'CRYPTO'];
+export const Jin10SymbolsDatatypeOptions = ['symbols', 'quotes'];
+export const TuShareSrcOptions = [
+  'sina',
+  'wallstreetcn',
+  '10jqka',
+  'eastmoney',
+  'yuncaijing',
+  'fenghuang',
+  'jinrongjie',
+];
+export const CrawlerResultOptions = ['markdown', 'html', 'content'];
diff --git a/web/src/pages/data-flow/run-sheet/index.tsx b/web/src/pages/data-flow/run-sheet/index.tsx
new file mode 100644
index 000000000..cac62d008
--- /dev/null
+++ b/web/src/pages/data-flow/run-sheet/index.tsx
@@ -0,0 +1,69 @@
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { IModalProps } from '@/interfaces/common';
+import { cn } from '@/lib/utils';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { BeginId } from '../constant';
+import DebugContent from '../debug-content';
+import { useGetBeginNodeDataInputs } from '../hooks/use-get-begin-query';
+import { useSaveGraphBeforeOpeningDebugDrawer } from '../hooks/use-save-graph';
+import { BeginQuery } from '../interface';
+import useGraphStore from '../store';
+import { buildBeginQueryWithObject } from '../utils';
+
+const RunSheet = ({
+  hideModal,
+  showModal: showChatModal,
+}: IModalProps<any>) => {
+  const { t } = useTranslation();
+  const { updateNodeForm, getNode } = useGraphStore((state) => state);
+
+  const inputs = useGetBeginNodeDataInputs();
+
+  const { handleRun, loading } = useSaveGraphBeforeOpeningDebugDrawer(
+    showChatModal!,
+  );
+
+  const handleRunAgent = useCallback(
+    (nextValues: BeginQuery[]) => {
+      const beginNode = getNode(BeginId);
+      const inputs: Record<string, BeginQuery> = beginNode?.data.form.inputs;
+
+      const nextInputs = buildBeginQueryWithObject(inputs, nextValues);
+
+      const currentNodes = updateNodeForm(BeginId, nextInputs, ['inputs']);
+      handleRun(currentNodes);
+      hideModal?.();
+    },
+    [getNode, handleRun, hideModal, updateNodeForm],
+  );
+
+  const onOk = useCallback(
+    async (nextValues: any[]) => {
+      handleRunAgent(nextValues);
+    },
+    [handleRunAgent],
+  );
+
+  return (
+    <Sheet onOpenChange={hideModal} open>
+      <SheetContent className={cn('top-20 p-2')}>
+        <SheetHeader>
+          <SheetTitle>{t('flow.testRun')}</SheetTitle>
+          <DebugContent
+            ok={onOk}
+            parameters={inputs}
+            loading={loading}
+          ></DebugContent>
+        </SheetHeader>
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+export default RunSheet;
diff --git a/web/src/pages/data-flow/setting-dialog/index.tsx b/web/src/pages/data-flow/setting-dialog/index.tsx
new file mode 100644
index 000000000..6d0e1e976
--- /dev/null
+++ b/web/src/pages/data-flow/setting-dialog/index.tsx
@@ -0,0 +1,53 @@
+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
new file mode 100644
index 000000000..e39ad2416
--- /dev/null
+++ b/web/src/pages/data-flow/setting-dialog/setting-form.tsx
@@ -0,0 +1,158 @@
+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/share/index.tsx b/web/src/pages/data-flow/share/index.tsx
new file mode 100644
index 000000000..26cdb0248
--- /dev/null
+++ b/web/src/pages/data-flow/share/index.tsx
@@ -0,0 +1,223 @@
+import { EmbedContainer } from '@/components/embed-container';
+import { FileUploadProps } from '@/components/file-upload';
+import { NextMessageInput } from '@/components/message-input/next';
+import MessageItem from '@/components/next-message-item';
+import PdfDrawer from '@/components/pdf-drawer';
+import { useClickDrawer } from '@/components/pdf-drawer/hooks';
+import { MessageType } from '@/constants/chat';
+import {
+  useFetchExternalAgentInputs,
+  useUploadCanvasFileWithProgress,
+} from '@/hooks/use-agent-request';
+import { cn } from '@/lib/utils';
+import i18n from '@/locales/config';
+import DebugContent from '@/pages/agent/debug-content';
+import { useCacheChatLog } from '@/pages/agent/hooks/use-cache-chat-log';
+import { useAwaitCompentData } from '@/pages/agent/hooks/use-chat-logic';
+import { useSendButtonDisabled } from '@/pages/chat/hooks';
+import { buildMessageUuidWithRole } from '@/utils/chat';
+import { isEmpty } from 'lodash';
+import React, { forwardRef, useCallback } from 'react';
+import { AgentDialogueMode } from '../constant';
+import {
+  useGetSharedChatSearchParams,
+  useSendNextSharedMessage,
+} from '../hooks/use-send-shared-message';
+import { ParameterDialog } from './parameter-dialog';
+
+const ChatContainer = () => {
+  const {
+    sharedId: conversationId,
+    locale,
+    visibleAvatar,
+  } = useGetSharedChatSearchParams();
+  const { visible, hideModal, documentId, selectedChunk, clickDocumentButton } =
+    useClickDrawer();
+
+  const { uploadCanvasFile, loading } =
+    useUploadCanvasFileWithProgress(conversationId);
+  const {
+    addEventList,
+    setCurrentMessageId,
+    currentEventListWithoutMessageById,
+    clearEventList,
+  } = useCacheChatLog();
+
+  const { data: inputsData } = useFetchExternalAgentInputs();
+  const isTaskMode = inputsData.mode === AgentDialogueMode.Task;
+
+  const {
+    handlePressEnter,
+    handleInputChange,
+    value,
+    sendLoading,
+    scrollRef,
+    messageContainerRef,
+    derivedMessages,
+    hasError,
+    stopOutputMessage,
+    findReferenceByMessageId,
+    appendUploadResponseList,
+    parameterDialogVisible,
+    showParameterDialog,
+    sendFormMessage,
+    addNewestOneAnswer,
+    ok,
+    resetSession,
+  } = useSendNextSharedMessage(addEventList, isTaskMode);
+  const { buildInputList, handleOk, isWaitting } = useAwaitCompentData({
+    derivedMessages,
+    sendFormMessage,
+    canvasId: conversationId as string,
+  });
+  const sendDisabled = useSendButtonDisabled(value);
+
+  const handleUploadFile: NonNullable<FileUploadProps['onUpload']> =
+    useCallback(
+      async (files, options) => {
+        const ret = await uploadCanvasFile({ files, options });
+        appendUploadResponseList(ret.data, files);
+      },
+      [appendUploadResponseList, uploadCanvasFile],
+    );
+
+  React.useEffect(() => {
+    if (locale && i18n.language !== locale) {
+      i18n.changeLanguage(locale);
+    }
+  }, [locale, visibleAvatar]);
+
+  React.useEffect(() => {
+    if (!isTaskMode && inputsData.prologue) {
+      addNewestOneAnswer({
+        answer: inputsData.prologue,
+      });
+    }
+  }, [inputsData.prologue, addNewestOneAnswer, isTaskMode]);
+
+  React.useEffect(() => {
+    if (inputsData && inputsData.inputs && !isEmpty(inputsData.inputs)) {
+      showParameterDialog();
+    }
+  }, [inputsData, showParameterDialog]);
+
+  const handleInputsModalOk = (params: any[]) => {
+    ok(params);
+  };
+  const handleReset = () => {
+    resetSession();
+    clearEventList();
+  };
+  if (!conversationId) {
+    return <div>empty</div>;
+  }
+  return (
+    <>
+      <EmbedContainer
+        title={inputsData.title}
+        avatar={inputsData.avatar}
+        handleReset={handleReset}
+      >
+        <div className="flex flex-1 flex-col p-2.5  h-[90vh] m-3">
+          <div
+            className={cn(
+              'flex flex-1 flex-col overflow-auto scrollbar-auto m-auto w-5/6',
+            )}
+            ref={messageContainerRef}
+          >
+            <div>
+              {derivedMessages?.map((message, i) => {
+                return (
+                  <MessageItem
+                    visibleAvatar={visibleAvatar}
+                    conversationId={conversationId}
+                    currentEventListWithoutMessageById={
+                      currentEventListWithoutMessageById
+                    }
+                    setCurrentMessageId={setCurrentMessageId}
+                    key={buildMessageUuidWithRole(message)}
+                    item={message}
+                    nickname="You"
+                    reference={findReferenceByMessageId(message.id)}
+                    loading={
+                      message.role === MessageType.Assistant &&
+                      sendLoading &&
+                      derivedMessages?.length - 1 === i
+                    }
+                    isShare={true}
+                    avatarDialog={inputsData.avatar}
+                    agentName={inputsData.title}
+                    index={i}
+                    clickDocumentButton={clickDocumentButton}
+                    showLikeButton={false}
+                    showLoudspeaker={false}
+                    showLog={false}
+                    sendLoading={sendLoading}
+                  >
+                    {message.role === MessageType.Assistant &&
+                      derivedMessages.length - 1 === i && (
+                        <DebugContent
+                          parameters={buildInputList(message)}
+                          message={message}
+                          ok={handleOk(message)}
+                          isNext={false}
+                          btnText={'Submit'}
+                        ></DebugContent>
+                      )}
+                    {message.role === MessageType.Assistant &&
+                      derivedMessages.length - 1 !== i && (
+                        <div>
+                          <div>{message?.data?.tips}</div>
+
+                          <div>
+                            {buildInputList(message)?.map((item) => item.value)}
+                          </div>
+                        </div>
+                      )}
+                  </MessageItem>
+                );
+              })}
+            </div>
+            <div ref={scrollRef} />
+          </div>
+          {isTaskMode || (
+            <div className="flex w-full justify-center mb-8">
+              <div className="w-5/6">
+                <NextMessageInput
+                  isShared
+                  value={value}
+                  disabled={hasError || isWaitting}
+                  sendDisabled={sendDisabled || isWaitting}
+                  conversationId={conversationId}
+                  onInputChange={handleInputChange}
+                  onPressEnter={handlePressEnter}
+                  sendLoading={sendLoading}
+                  stopOutputMessage={stopOutputMessage}
+                  onUpload={handleUploadFile}
+                  isUploading={loading || isWaitting}
+                ></NextMessageInput>
+              </div>
+            </div>
+          )}
+        </div>
+      </EmbedContainer>
+      {visible && (
+        <PdfDrawer
+          visible={visible}
+          hideModal={hideModal}
+          documentId={documentId}
+          chunk={selectedChunk}
+        ></PdfDrawer>
+      )}
+      {parameterDialogVisible && (
+        <ParameterDialog
+          // hideModal={hideParameterDialog}
+          ok={handleInputsModalOk}
+          data={inputsData.inputs}
+        ></ParameterDialog>
+      )}
+    </>
+  );
+};
+
+export default forwardRef(ChatContainer);
diff --git a/web/src/pages/data-flow/share/parameter-dialog.tsx b/web/src/pages/data-flow/share/parameter-dialog.tsx
new file mode 100644
index 000000000..7b363836e
--- /dev/null
+++ b/web/src/pages/data-flow/share/parameter-dialog.tsx
@@ -0,0 +1,30 @@
+import { Modal } from '@/components/ui/modal/modal';
+import { IModalProps } from '@/interfaces/common';
+import DebugContent from '@/pages/agent/debug-content';
+import { buildBeginInputListFromObject } from '@/pages/agent/form/begin-form/utils';
+import { BeginQuery } from '@/pages/agent/interface';
+
+interface IProps extends IModalProps<any> {
+  ok(parameters: any[]): void;
+  data: Record<string, Omit<BeginQuery, 'key'>>;
+}
+export function ParameterDialog({ ok, data }: IProps) {
+  return (
+    <Modal
+      open
+      title={'Parameter'}
+      closable={false}
+      showfooter={false}
+      maskClosable={false}
+    >
+      <div className="mb-8">
+        <DebugContent
+          parameters={buildBeginInputListFromObject(data)}
+          ok={ok}
+          isNext={false}
+          btnText={'Submit'}
+        ></DebugContent>
+      </div>
+    </Modal>
+  );
+}
diff --git a/web/src/pages/data-flow/store.ts b/web/src/pages/data-flow/store.ts
new file mode 100644
index 000000000..e163ff8cb
--- /dev/null
+++ b/web/src/pages/data-flow/store.ts
@@ -0,0 +1,534 @@
+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 { omit } from 'lodash';
+import differenceWith from 'lodash/differenceWith';
+import intersectionWith from 'lodash/intersectionWith';
+import lodashSet from 'lodash/set';
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
+import { 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;
+  updateFormDataOnConnect: (connection: Connection) => void;
+  updateSwitchFormData: (
+    source: string,
+    sourceHandle?: string | null,
+    target?: string | null,
+    isConnecting?: boolean,
+  ) => void;
+  duplicateNode: (id: string, name: string) => void;
+  duplicateIterationNode: (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;
+};
+
+// 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) => {
+        const { updateFormDataOnConnect } = get();
+        set({
+          edges: addEdge(connection, get().edges),
+        });
+        updateFormDataOnConnect(connection);
+      },
+      onSelectionChange: ({ nodes, edges }: OnSelectionChangeParams) => {
+        set({
+          selectedEdgeIds: edges.map((x) => x.id),
+          selectedNodeIds: nodes.map((x) => x.id),
+        });
+      },
+      setNodes: (nodes: RAGFlowNodeType[]) => {
+        set({ nodes });
+      },
+      setEdges: (edges: Edge[]) => {
+        set({ edges });
+      },
+      setEdgesByNodeId: (nodeId: string, currentDownstreamEdges: Edge[]) => {
+        const { edges, setEdges } = get();
+        // the previous downstream edge of this node
+        const previousDownstreamEdges = edges.filter(
+          (x) => x.source === nodeId,
+        );
+        const isDifferent =
+          previousDownstreamEdges.length !== currentDownstreamEdges.length ||
+          !previousDownstreamEdges.every((x) =>
+            currentDownstreamEdges.some(
+              (y) =>
+                y.source === x.source &&
+                y.target === x.target &&
+                y.sourceHandle === x.sourceHandle,
+            ),
+          ) ||
+          !currentDownstreamEdges.every((x) =>
+            previousDownstreamEdges.some(
+              (y) =>
+                y.source === x.source &&
+                y.target === x.target &&
+                y.sourceHandle === x.sourceHandle,
+            ),
+          );
+
+        const intersectionDownstreamEdges = intersectionWith(
+          previousDownstreamEdges,
+          currentDownstreamEdges,
+          isEdgeEqual,
+        );
+        if (isDifferent) {
+          // other operator's edges
+          const irrelevantEdges = edges.filter((x) => x.source !== nodeId);
+          // the added downstream edges
+          const selfAddedDownstreamEdges = differenceWith(
+            currentDownstreamEdges,
+            intersectionDownstreamEdges,
+            isEdgeEqual,
+          );
+          setEdges([
+            ...irrelevantEdges,
+            ...intersectionDownstreamEdges,
+            ...selfAddedDownstreamEdges,
+          ]);
+        }
+      },
+      addNode: (node: RAGFlowNodeType) => {
+        set({ nodes: get().nodes.concat(node) });
+      },
+      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),
+        });
+        //  TODO: This may not be reasonable. You need to choose between listening to changes in the form.
+        get().updateFormDataOnConnect(connection);
+      },
+      getEdge: (id: string) => {
+        return get().edges.find((x) => x.id === id);
+      },
+      updateFormDataOnConnect: (connection: Connection) => {
+        const { getOperatorTypeFromId, updateSwitchFormData } = get();
+        const { source, target, sourceHandle } = connection;
+        const operatorType = getOperatorTypeFromId(source);
+        if (source) {
+          switch (operatorType) {
+            case Operator.Switch: {
+              updateSwitchFormData(source, sourceHandle, target, true);
+              break;
+            }
+            default:
+              break;
+          }
+        }
+      },
+      duplicateNode: (id: string, name: string) => {
+        const { getNode, addNode, generateNodeName, duplicateIterationNode } =
+          get();
+        const node = getNode(id);
+
+        if (node?.data.label === Operator.Iteration) {
+          duplicateIterationNode(id, name);
+          return;
+        }
+
+        addNode({
+          ...(node || {}),
+          data: {
+            ...duplicateNodeForm(node?.data),
+            name: generateNodeName(name),
+          },
+          ...generateDuplicateNode(node?.position, node?.data?.label),
+        });
+      },
+      duplicateIterationNode: (id: string, name: string) => {
+        const { getNode, generateNodeName, nodes } = get();
+        const node = getNode(id);
+
+        const iterationNode: RAGFlowNodeType = {
+          ...(node || {}),
+          data: {
+            ...(node?.data || { label: Operator.Iteration, form: {} }),
+            name: generateNodeName(name),
+          },
+          ...generateDuplicateNode(node?.position, node?.data?.label),
+        };
+
+        const children = nodes
+          .filter((x) => x.parentId === node?.id)
+          .map((x) => ({
+            ...(x || {}),
+            data: {
+              ...duplicateNodeForm(x?.data),
+              name: generateNodeName(x.data.name),
+            },
+            ...omit(generateDuplicateNode(x?.position, x?.data?.label), [
+              'position',
+            ]),
+            parentId: iterationNode.id,
+          }));
+
+        set({ nodes: nodes.concat(iterationNode, ...children) });
+      },
+      deleteEdge: () => {
+        const { edges, selectedEdgeIds } = get();
+        set({
+          edges: edges.filter((edge) =>
+            selectedEdgeIds.every((x) => x !== edge.id),
+          ),
+        });
+      },
+      deleteEdgeById: (id: string) => {
+        const {
+          edges,
+          updateNodeForm,
+          getOperatorTypeFromId,
+          updateSwitchFormData,
+        } = get();
+        const currentEdge = edges.find((x) => x.id === id);
+
+        if (currentEdge) {
+          const { source, sourceHandle, target } = currentEdge;
+          const operatorType = getOperatorTypeFromId(source);
+          // After deleting the edge, set the corresponding field in the node's form field to undefined
+          switch (operatorType) {
+            case Operator.Relevant:
+              updateNodeForm(source, {
+                [sourceHandle as string]: undefined,
+              });
+              break;
+            // case Operator.Categorize:
+            //   if (sourceHandle)
+            //     updateNodeForm(source, undefined, [
+            //       'category_description',
+            //       sourceHandle,
+            //       'to',
+            //     ]);
+            //   break;
+            case Operator.Switch: {
+              updateSwitchFormData(source, sourceHandle, target, false);
+              break;
+            }
+            default:
+              break;
+          }
+        }
+        set({
+          edges: edges.filter((edge) => edge.id !== id),
+        });
+      },
+      deleteNodeById: (id: string) => {
+        const {
+          nodes,
+          edges,
+          getOperatorTypeFromId,
+          deleteAgentDownstreamNodesById,
+        } = get();
+        if (getOperatorTypeFromId(id) === Operator.Agent) {
+          deleteAgentDownstreamNodesById(id);
+          return;
+        }
+        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),
+          })),
+        );
+      },
+    })),
+    { name: 'graph', trace: true },
+  ),
+);
+
+export default useGraphStore;
diff --git a/web/src/pages/data-flow/upload-agent-dialog/index.tsx b/web/src/pages/data-flow/upload-agent-dialog/index.tsx
new file mode 100644
index 000000000..45f9ec882
--- /dev/null
+++ b/web/src/pages/data-flow/upload-agent-dialog/index.tsx
@@ -0,0 +1,36 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { LoadingButton } from '@/components/ui/loading-button';
+import { IModalProps } from '@/interfaces/common';
+import { TagRenameId } from '@/pages/add-knowledge/constant';
+import { useTranslation } from 'react-i18next';
+import { UploadAgentForm } from './upload-agent-form';
+
+export function UploadAgentDialog({
+  hideModal,
+  onOk,
+  loading,
+}: IModalProps<any>) {
+  const { t } = useTranslation();
+
+  return (
+    <Dialog open onOpenChange={hideModal}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>{t('fileManager.uploadFile')}</DialogTitle>
+        </DialogHeader>
+        <UploadAgentForm hideModal={hideModal} onOk={onOk}></UploadAgentForm>
+        <DialogFooter>
+          <LoadingButton type="submit" form={TagRenameId} loading={loading}>
+            {t('common.save')}
+          </LoadingButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/web/src/pages/data-flow/upload-agent-dialog/upload-agent-form.tsx b/web/src/pages/data-flow/upload-agent-dialog/upload-agent-form.tsx
new file mode 100644
index 000000000..39a4ac012
--- /dev/null
+++ b/web/src/pages/data-flow/upload-agent-dialog/upload-agent-form.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { FileUploader } from '@/components/file-uploader';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { FileMimeType, Platform } from '@/constants/common';
+import { IModalProps } from '@/interfaces/common';
+import { TagRenameId } from '@/pages/add-knowledge/constant';
+import { useTranslation } from 'react-i18next';
+
+// const options = Object.values(Platform).map((x) => ({ label: x, value: x }));
+
+export function UploadAgentForm({ hideModal, onOk }: IModalProps<any>) {
+  const { t } = useTranslation();
+  const FormSchema = z.object({
+    platform: z
+      .string()
+      .min(1, {
+        message: t('common.namePlaceholder'),
+      })
+      .trim(),
+    fileList: z.array(z.instanceof(File)),
+  });
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: { platform: Platform.RAGFlow },
+  });
+
+  async function onSubmit(data: z.infer<typeof FormSchema>) {
+    console.log('🚀 ~ onSubmit ~ data:', data);
+    const ret = await onOk?.(data);
+    if (ret) {
+      hideModal?.();
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="space-y-6"
+        id={TagRenameId}
+      >
+        <FormField
+          control={form.control}
+          name="fileList"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('common.name')}</FormLabel>
+              <FormControl>
+                <FileUploader
+                  value={field.value}
+                  onValueChange={field.onChange}
+                  maxFileCount={1}
+                  accept={{ '*.json': [FileMimeType.Json] }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        {/* <FormField
+          control={form.control}
+          name="platform"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('common.name')}</FormLabel>
+              <FormControl>
+                <RAGFlowSelect {...field} options={options} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        /> */}
+      </form>
+    </Form>
+  );
+}
diff --git a/web/src/pages/data-flow/use-agent-history-manager.ts b/web/src/pages/data-flow/use-agent-history-manager.ts
new file mode 100644
index 000000000..50c108cf4
--- /dev/null
+++ b/web/src/pages/data-flow/use-agent-history-manager.ts
@@ -0,0 +1,163 @@
+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
new file mode 100644
index 000000000..c7d60dfd2
--- /dev/null
+++ b/web/src/pages/data-flow/utils.ts
@@ -0,0 +1,558 @@
+import {
+  IAgentForm,
+  ICategorizeForm,
+  ICategorizeItem,
+  ICategorizeItemResult,
+} from '@/interfaces/database/agent';
+import { DSLComponents, RAGFlowNodeType } from '@/interfaces/database/flow';
+import { removeUselessFieldsFromValues } from '@/utils/form';
+import { Edge, Node, XYPosition } from '@xyflow/react';
+import { FormInstance, FormListFieldData } from 'antd';
+import { humanId } from 'human-id';
+import { curry, get, intersectionWith, isEqual, omit, sample } from 'lodash';
+import pipe from 'lodash/fp/pipe';
+import isObject from 'lodash/isObject';
+import {
+  CategorizeAnchorPointPositions,
+  NoDebugOperatorsList,
+  NodeHandleId,
+  Operator,
+} from './constant';
+import { BeginQuery, IPosition } from './interface';
+
+function buildAgentExceptionGoto(edges: Edge[], nodeId: string) {
+  const exceptionEdges = edges.filter(
+    (x) =>
+      x.source === nodeId && x.sourceHandle === NodeHandleId.AgentException,
+  );
+
+  return exceptionEdges.map((x) => x.target);
+}
+
+const buildComponentDownstreamOrUpstream = (
+  edges: Edge[],
+  nodeId: string,
+  isBuildDownstream = true,
+  nodes: Node[],
+) => {
+  return edges
+    .filter((y) => {
+      const node = nodes.find((x) => x.id === nodeId);
+      let isNotUpstreamTool = true;
+      let isNotUpstreamAgent = true;
+      let isNotExceptionGoto = true;
+      if (isBuildDownstream && node?.data.label === Operator.Agent) {
+        isNotExceptionGoto = y.sourceHandle !== NodeHandleId.AgentException;
+        // Exclude the tool operator downstream of the agent operator
+        isNotUpstreamTool = !y.target.startsWith(Operator.Tool);
+        // Exclude the agent operator downstream of the agent operator
+        isNotUpstreamAgent = !(
+          y.target.startsWith(Operator.Agent) &&
+          y.targetHandle === NodeHandleId.AgentTop
+        );
+      }
+      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.Generate ||
+      operatorName === Operator.Categorize
+    ) {
+      return removeUselessFieldsFromValues(params, '');
+    }
+    return params;
+  },
+);
+// initialize data for operators without parameters
+// const initializeOperatorParams = curry((operatorName: string, values: any) => {
+//   if (isEmpty(values)) {
+//     return initialFormValuesMap[operatorName as Operator];
+//   }
+//   return values;
+// });
+
+function buildAgentTools(edges: Edge[], nodes: Node[], nodeId: string) {
+  const node = nodes.find((x) => x.id === nodeId);
+  const params = { ...(node?.data.form ?? {}) };
+  if (node && node.data.label === Operator.Agent) {
+    const bottomSubAgentEdges = edges.filter(
+      (x) => x.source === nodeId && x.sourceHandle === NodeHandleId.AgentBottom,
+    );
+
+    (params as IAgentForm).tools = (params as IAgentForm).tools.concat(
+      bottomSubAgentEdges.map((x) => {
+        const {
+          params: formData,
+          id,
+          name,
+        } = buildAgentTools(edges, nodes, x.target);
+
+        return {
+          component_name: Operator.Agent,
+          id,
+          name: name as string, // Cast name to string and provide fallback
+          params: { ...formData },
+        };
+      }),
+    );
+  }
+  return { params, name: node?.data.name, id: node?.id };
+}
+
+function filterTargetsBySourceHandleId(edges: Edge[], handleId: string) {
+  return edges.filter((x) => x.sourceHandle === handleId).map((x) => x.target);
+}
+
+function buildCategorize(edges: Edge[], nodes: Node[], nodeId: string) {
+  const node = nodes.find((x) => x.id === nodeId);
+  const params = { ...(node?.data.form ?? {}) } as ICategorizeForm;
+  if (node && node.data.label === Operator.Categorize) {
+    const subEdges = edges.filter((x) => x.source === nodeId);
+
+    const items = params.items || [];
+
+    const nextCategoryDescription = items.reduce<
+      ICategorizeForm['category_description']
+    >((pre, val) => {
+      const key = val.name;
+      pre[key] = {
+        ...omit(val, 'name', 'uuid'),
+        examples: val.examples?.map((x) => x.value) || [],
+        to: filterTargetsBySourceHandleId(subEdges, val.uuid),
+      };
+      return pre;
+    }, {});
+
+    params.category_description = nextCategoryDescription;
+  }
+  return omit(params, 'items');
+}
+
+const buildOperatorParams = (operatorName: string) =>
+  pipe(
+    removeUselessDataInTheOperator(operatorName),
+    // initializeOperatorParams(operatorName), // Final processing, for guarantee
+  );
+
+const ExcludeOperators = [Operator.Note, Operator.Tool];
+
+export function isBottomSubAgent(edges: Edge[], nodeId?: string) {
+  const edge = edges.find(
+    (x) => x.target === nodeId && x.targetHandle === NodeHandleId.AgentTop,
+  );
+  return !!edge;
+}
+
+// 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.Agent: {
+          const { params: formData } = buildAgentTools(edges, nodes, id);
+          params = {
+            ...formData,
+            exception_goto: buildAgentExceptionGoto(edges, id),
+          };
+          break;
+        }
+        case Operator.Categorize:
+          params = buildCategorize(edges, nodes, id);
+          break;
+
+        default:
+          break;
+      }
+
+      components[id] = {
+        obj: {
+          ...(oldDslComponents[id]?.obj ?? {}),
+          component_name: operatorName,
+          params: buildOperatorParams(operatorName)(params) ?? {},
+        },
+        downstream: buildComponentDownstreamOrUpstream(edges, id, true, nodes),
+        upstream: buildComponentDownstreamOrUpstream(edges, id, false, nodes),
+        parent_id: x?.parentId,
+      };
+    });
+
+  return components;
+};
+
+export const receiveMessageError = (res: any) =>
+  res && (res?.response.status !== 200 || res?.data?.code !== 0);
+
+// Replace the id in the object with text
+export const replaceIdWithText = (
+  obj: Record<string, unknown> | unknown[] | unknown,
+  getNameById: (id?: string) => string | undefined,
+) => {
+  if (isObject(obj)) {
+    const ret: Record<string, unknown> | unknown[] = Array.isArray(obj)
+      ? []
+      : {};
+    Object.keys(obj).forEach((key) => {
+      const val = (obj as Record<string, unknown>)[key];
+      const text = typeof val === 'string' ? getNameById(val) : undefined;
+      (ret as Record<string, unknown>)[key] = text
+        ? text
+        : replaceIdWithText(val, getNameById);
+    });
+
+    return ret;
+  }
+
+  return obj;
+};
+
+export const isEdgeEqual = (previous: Edge, current: Edge) =>
+  previous.source === current.source &&
+  previous.target === current.target &&
+  previous.sourceHandle === current.sourceHandle;
+
+export const buildNewPositionMap = (
+  currentKeys: string[],
+  previousPositionMap: Record<string, IPosition>,
+) => {
+  // index in use
+  const indexesInUse = Object.values(previousPositionMap).map((x) => x.idx);
+  const previousKeys = Object.keys(previousPositionMap);
+  const intersectionKeys = intersectionWith(
+    previousKeys,
+    currentKeys,
+    (categoryDataKey: string, positionMapKey: string) =>
+      categoryDataKey === positionMapKey,
+  );
+  // difference set
+  const currentDifferenceKeys = currentKeys.filter(
+    (x) => !intersectionKeys.some((y: string) => y === x),
+  );
+  const newPositionMap = currentDifferenceKeys.reduce<
+    Record<string, IPosition>
+  >((pre, cur) => {
+    // take a coordinate
+    const effectiveIdxes = CategorizeAnchorPointPositions.map(
+      (x, idx) => idx,
+    ).filter((x) => !indexesInUse.some((y) => y === x));
+    const idx = sample(effectiveIdxes);
+    if (idx !== undefined) {
+      indexesInUse.push(idx);
+      pre[cur] = { ...CategorizeAnchorPointPositions[idx], idx };
+    }
+
+    return pre;
+  }, {});
+
+  return { intersectionKeys, newPositionMap };
+};
+
+export const isKeysEqual = (currentKeys: string[], previousKeys: string[]) => {
+  return isEqual(currentKeys.sort(), previousKeys.sort());
+};
+
+export const getOperatorIndex = (handleTitle: string) => {
+  return handleTitle.split(' ').at(-1);
+};
+
+// Get the value of other forms except itself
+export const getOtherFieldValues = (
+  form: FormInstance,
+  formListName: string = 'items',
+  field: FormListFieldData,
+  latestField: string,
+) =>
+  (form.getFieldValue([formListName]) ?? [])
+    .map((x: any) => {
+      return get(x, latestField);
+    })
+    .filter(
+      (x: string) =>
+        x !== form.getFieldValue([formListName, field.name, latestField]),
+    );
+
+export const generateSwitchHandleText = (idx: number) => {
+  return `Case ${idx + 1}`;
+};
+
+export const getNodeDragHandle = (nodeType?: string) => {
+  return nodeType === Operator.Note ? '.note-drag-handle' : undefined;
+};
+
+const splitName = (name: string) => {
+  const names = name.split('_');
+  const type = names.at(0);
+  const index = Number(names.at(-1));
+
+  return { type, index };
+};
+
+export const generateNodeNamesWithIncreasingIndex = (
+  name: string,
+  nodes: RAGFlowNodeType[],
+) => {
+  const templateNameList = nodes
+    .filter((x) => {
+      const temporaryName = x.data.name;
+
+      const { type, index } = splitName(temporaryName);
+
+      return (
+        temporaryName.match(/_/g)?.length === 1 &&
+        type === name &&
+        !isNaN(index)
+      );
+    })
+    .map((x) => {
+      const temporaryName = x.data.name;
+      const { index } = splitName(temporaryName);
+
+      return {
+        idx: index,
+        name: temporaryName,
+      };
+    })
+    .sort((a, b) => a.idx - b.idx);
+
+  let index: number = 0;
+  for (let i = 0; i < templateNameList.length; i++) {
+    const idx = templateNameList[i]?.idx;
+    const nextIdx = templateNameList[i + 1]?.idx;
+    if (idx + 1 !== nextIdx) {
+      index = idx + 1;
+      break;
+    }
+  }
+
+  return `${name}_${index}`;
+};
+
+export const duplicateNodeForm = (nodeData?: RAGFlowNodeType['data']) => {
+  const form: Record<string, any> = { ...(nodeData?.form ?? {}) };
+
+  // Delete the downstream node corresponding to the to field of the Categorize operator
+  if (nodeData?.label === Operator.Categorize) {
+    form.category_description = Object.keys(form.category_description).reduce<
+      Record<string, Record<string, any>>
+    >((pre, cur) => {
+      pre[cur] = {
+        ...form.category_description[cur],
+        to: undefined,
+      };
+      return pre;
+    }, {});
+  }
+
+  // Delete the downstream nodes corresponding to the yes and no fields of the Relevant operator
+  if (nodeData?.label === Operator.Relevant) {
+    form.yes = undefined;
+    form.no = undefined;
+  }
+
+  return {
+    ...(nodeData ?? { label: '' }),
+    form,
+  };
+};
+
+export const getDrawerWidth = () => {
+  return window.innerWidth > 1278 ? '40%' : 470;
+};
+
+export const needsSingleStepDebugging = (label: string) => {
+  return !NoDebugOperatorsList.some((x) => (label as Operator) === x);
+};
+
+// Get the coordinates of the node relative to the Iteration node
+export function getRelativePositionToIterationNode(
+  nodes: RAGFlowNodeType[],
+  position?: XYPosition, // relative position
+) {
+  if (!position) {
+    return;
+  }
+
+  const iterationNodes = nodes.filter(
+    (node) => node.data.label === Operator.Iteration,
+  );
+
+  for (const iterationNode of iterationNodes) {
+    const {
+      position: { x, y },
+      width,
+      height,
+    } = iterationNode;
+    const halfWidth = (width || 0) / 2;
+    if (
+      position.x >= x - halfWidth &&
+      position.x <= x + halfWidth &&
+      position.y >= y &&
+      position.y <= y + (height || 0)
+    ) {
+      return {
+        parentId: iterationNode.id,
+        position: { x: position.x - x + halfWidth, y: position.y - y },
+      };
+    }
+  }
+}
+
+export const generateDuplicateNode = (
+  position?: XYPosition,
+  label?: string,
+) => {
+  const nextPosition = {
+    x: (position?.x || 0) + 50,
+    y: (position?.y || 0) + 50,
+  };
+
+  return {
+    selected: false,
+    dragging: false,
+    id: `${label}:${humanId()}`,
+    position: nextPosition,
+    dragHandle: getNodeDragHandle(label),
+  };
+};
+
+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 }));
+}
+
+/**
+   * convert the following object into a list
+   * 
+   * {
+      "product_related": {
+      "description": "The question is about product usage, appearance and how it works.",
+      "examples": "Why it always beaming?\nHow to install it onto the wall?\nIt leaks, what to do?",
+      "to": "generate:0"
+      }
+      }
+*/
+export const buildCategorizeListFromObject = (
+  categorizeItem: ICategorizeItemResult,
+) => {
+  // Categorize's to field has two data sources, with edges as the data source.
+  // Changes in the edge or to field need to be synchronized to the form field.
+  return Object.keys(categorizeItem)
+    .reduce<Array<ICategorizeItem>>((pre, cur) => {
+      // synchronize edge data to the to field
+
+      pre.push({
+        name: cur,
+        ...categorizeItem[cur],
+        examples: convertToObjectArray(categorizeItem[cur].examples),
+      });
+      return pre;
+    }, [])
+    .sort((a, b) => a.index - b.index);
+};
+
+/**
+   * Convert the list in the following form into an object
+   * {
+    "items": [
+      {
+        "name": "Categorize 1",
+        "description": "111",
+        "examples": ["ddd"],
+        "to": "Retrieval:LazyEelsStick"
+      }
+     ]
+    }
+*/
+export const buildCategorizeObjectFromList = (list: Array<ICategorizeItem>) => {
+  return list.reduce<ICategorizeItemResult>((pre, cur) => {
+    if (cur?.name) {
+      pre[cur.name] = {
+        ...omit(cur, 'name', 'examples'),
+        examples: convertToStringArray(cur.examples) as string[],
+      };
+    }
+    return pre;
+  }, {});
+};
+
+export function getAgentNodeTools(agentNode?: RAGFlowNodeType) {
+  const tools: IAgentForm['tools'] = get(agentNode, 'data.form.tools', []);
+  return tools;
+}
+
+export function getAgentNodeMCP(agentNode?: RAGFlowNodeType) {
+  const tools: IAgentForm['mcp'] = get(agentNode, 'data.form.mcp', []);
+  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;
+}
+
+export function buildBeginQueryWithObject(
+  inputs: Record<string, BeginQuery>,
+  values: BeginQuery[],
+) {
+  const nextInputs = Object.keys(inputs).reduce<Record<string, BeginQuery>>(
+    (pre, key) => {
+      const item = values.find((x) => x.key === key);
+      if (item) {
+        pre[key] = { ...item };
+      }
+      return pre;
+    },
+    {},
+  );
+
+  return nextInputs;
+}
diff --git a/web/src/pages/data-flow/utils/build-output-list.ts b/web/src/pages/data-flow/utils/build-output-list.ts
new file mode 100644
index 000000000..5a9452965
--- /dev/null
+++ b/web/src/pages/data-flow/utils/build-output-list.ts
@@ -0,0 +1,8 @@
+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/chat.ts b/web/src/pages/data-flow/utils/chat.ts
new file mode 100644
index 000000000..15c8ff850
--- /dev/null
+++ b/web/src/pages/data-flow/utils/chat.ts
@@ -0,0 +1,21 @@
+import { MessageType } from '@/constants/chat';
+import { IReference } from '@/interfaces/database/chat';
+import { IMessage } from '@/pages/chat/interface';
+import { isEmpty } from 'lodash';
+
+export const buildAgentMessageItemReference = (
+  conversation: { message: IMessage[]; reference: IReference[] },
+  message: IMessage,
+) => {
+  const assistantMessages = conversation.message?.filter(
+    (x) => x.role === MessageType.Assistant,
+  );
+  const referenceIndex = assistantMessages.findIndex(
+    (x) => x.id === message.id,
+  );
+  const reference = !isEmpty(message?.reference)
+    ? message?.reference
+    : (conversation?.reference ?? [])[referenceIndex];
+
+  return reference ?? { doc_aggs: [], chunks: [], total: 0 };
+};
diff --git a/web/src/pages/data-flow/utils/delete-node.ts b/web/src/pages/data-flow/utils/delete-node.ts
new file mode 100644
index 000000000..4f1c18ebc
--- /dev/null
+++ b/web/src/pages/data-flow/utils/delete-node.ts
@@ -0,0 +1,34 @@
+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
new file mode 100644
index 000000000..f376caff5
--- /dev/null
+++ b/web/src/pages/data-flow/utils/filter-downstream-nodes.ts
@@ -0,0 +1,63 @@
+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
new file mode 100644
index 000000000..9a0b9741c
--- /dev/null
+++ b/web/src/pages/data-flow/version-dialog/index.tsx
@@ -0,0 +1,141 @@
+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';
+import { AgentBackground } from '../components/background';
+
+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>
+                      </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/data-flows/index.tsx b/web/src/pages/data-flows/index.tsx
new file mode 100644
index 000000000..13ee9742c
--- /dev/null
+++ b/web/src/pages/data-flows/index.tsx
@@ -0,0 +1,3 @@
+export default function DataFlows() {
+  return <section>xx</section>;
+}
diff --git a/web/src/routes.ts b/web/src/routes.ts
index 2447e493a..7a975a7a2 100644
--- a/web/src/routes.ts
+++ b/web/src/routes.ts
@@ -42,6 +42,8 @@ export enum Routes {
   AgentShare = '/agent/share',
   ChatShare = `${Chats}/share`,
   UserSetting = '/user-setting',
+  DataFlows = '/data-flows',
+  DataFlow = '/data-flow',
 }
 
 const routes = [
@@ -383,6 +385,22 @@ 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;