From 7bbe12b2bd23c05c7f5df13d177c82198d227f34 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 23 Jan 2024 19:31:56 +0800
Subject: [PATCH] feat: support assistant frontend (#2139)

Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
---
 web/.gitignore                                |   4 +-
 .../app/(appDetailLayout)/[appId]/layout.tsx  |  13 +-
 web/app/(commonLayout)/apps/AppCard.tsx       |   9 +-
 web/app/(commonLayout)/apps/AppModeLabel.tsx  |  40 +-
 web/app/(commonLayout)/apps/Apps.tsx          | 110 +-
 web/app/(commonLayout)/apps/NewAppDialog.tsx  | 111 +-
 web/app/(commonLayout)/apps/page.tsx          |   2 +-
 web/app/(commonLayout)/list.module.css        |  47 +-
 web/app/(commonLayout)/tools/custom/page.tsx  |  10 +
 web/app/(commonLayout)/tools/page.tsx         |  23 +
 .../(commonLayout)/tools/third-part/page.tsx  |  10 +
 web/app/components/app/chat/answer/index.tsx  | 101 +-
 web/app/components/app/chat/index.tsx         |  48 +-
 web/app/components/app/chat/thought/index.tsx | 114 +--
 web/app/components/app/chat/thought/panel.tsx |  28 +
 web/app/components/app/chat/thought/tool.tsx  | 103 ++
 web/app/components/app/chat/type.ts           |  18 +-
 .../base/operation-btn/index.tsx              |   9 +-
 .../config-prompt/advanced-prompt-input.tsx   |  31 +-
 .../config-prompt/simple-prompt-input.tsx     |  55 +-
 .../config-var/config-select/style.module.css |   2 -
 .../app/configuration/config-var/index.tsx    | 137 ++-
 .../config-var/input-type-icon.tsx            |   4 +
 .../config-var/select-var-type.tsx            |  76 ++
 .../config/agent/agent-setting/index.tsx      | 156 +++
 .../config/agent/agent-setting/item-panel.tsx |  44 +
 .../agent/agent-tools/choose-tool/index.tsx   |  77 ++
 .../config/agent/agent-tools/index.tsx        | 216 ++++
 .../agent-tools/setting-built-in-tool.tsx     | 192 ++++
 .../config/agent/prompt-editor.tsx            | 141 +++
 .../config/assistant-type-picker/index.tsx    | 165 +++
 .../config/automatic/automatic-btn.tsx        |  10 +-
 .../preview-imgs/opening-statement.png        | Bin 0 -> 19955 bytes
 .../preview-imgs/opening-statement.svg        | 144 ---
 .../feature-item/style.module.css             |   3 +-
 .../app/configuration/config/index.tsx        |  22 +-
 .../configuration/dataset-config/index.tsx    |   3 +-
 .../dataset-config/settings-modal/index.tsx   |  10 +-
 .../app/configuration/debug/index.tsx         | 161 ++-
 .../chat-group/opening-statement/index.tsx    | 140 ++-
 .../components/app/configuration/index.tsx    | 342 ++++---
 .../prompt-mode/advanced-mode-waring.tsx      |  27 +-
 .../app/configuration/style.module.css        |   9 +-
 .../tools/external-data-tool-modal.tsx        |   6 +-
 .../app/configuration/tools/index.tsx         |   1 +
 web/app/components/app/log/filter.tsx         |   2 +-
 web/app/components/app/log/list.tsx           |   5 +-
 web/app/components/base/app-icon/index.tsx    |   2 +-
 .../components/base/app-icon/style.module.css |  10 +-
 web/app/components/base/drawer-plus/index.tsx |  44 +-
 .../components/base/emoji-picker/index.tsx    |   4 +-
 .../public/common/diagonal-dividing-line.svg  |   3 +
 .../header-nav/explore/explore-active.svg     |  13 +
 .../public/header-nav/explore/explore.svg     |  13 +
 .../header-nav/knowledge/knowledge-active.svg |   3 +
 .../public/header-nav/knowledge/knowledge.svg |   3 +
 .../public/header-nav/studio/Robot-Active.svg |   4 +
 .../assets/public/header-nav/studio/Robot.svg |   3 +
 .../public/header-nav/tools/tools-active.svg  |   5 +
 .../assets/public/header-nav/tools/tools.svg  |  14 +
 .../assets/public/other/default-tool-icon.svg |   9 +
 .../vender/line/arrows/arrow-narrow-right.svg |   3 +
 .../vender/solid/arrows/chevron-down.svg      |   5 +
 .../vender/solid/communication/ai-text.svg    |   6 +
 .../solid/communication/cute-robote.svg       |   5 +
 .../solid/development/api-connection.svg      |   8 +
 .../vender/solid/education/bubble-text.svg    |   5 +
 .../vender/solid/education/heart-02.svg       |   3 +
 .../assets/vender/solid/education/unblur.svg  |  19 +
 .../assets/vender/solid/general/search-md.svg |   5 +
 .../public/common/DiagonalDividingLine.json   |  28 +
 .../public/common/DiagonalDividingLine.tsx    |  16 +
 .../base/icons/src/public/common/index.ts     |   1 +
 .../public/header-nav/explore/Explore.json    |  96 ++
 .../src/public/header-nav/explore/Explore.tsx |  16 +
 .../header-nav/explore/ExploreActive.json     |  88 ++
 .../header-nav/explore/ExploreActive.tsx      |  16 +
 .../src/public/header-nav/explore/index.ts    |   2 +
 .../header-nav/knowledge/Knowledge.json       |  29 +
 .../public/header-nav/knowledge/Knowledge.tsx |  16 +
 .../header-nav/knowledge/KnowledgeActive.json |  28 +
 .../header-nav/knowledge/KnowledgeActive.tsx  |  16 +
 .../src/public/header-nav/knowledge/index.ts  |   2 +
 .../src/public/header-nav/studio/Robot.json   |  29 +
 .../src/public/header-nav/studio/Robot.tsx    |  16 +
 .../public/header-nav/studio/RobotActive.json |  39 +
 .../public/header-nav/studio/RobotActive.tsx  |  16 +
 .../src/public/header-nav/studio/index.ts     |   2 +
 .../src/public/header-nav/tools/Tools.json    | 112 ++
 .../src/public/header-nav/tools/Tools.tsx     |  16 +
 .../public/header-nav/tools/ToolsActive.json  |  46 +
 .../public/header-nav/tools/ToolsActive.tsx   |  16 +
 .../src/public/header-nav/tools/index.ts      |   2 +
 .../src/public/other/DefaultToolIcon.json     |  81 ++
 .../src/public/other/DefaultToolIcon.tsx      |  16 +
 .../base/icons/src/public/other/index.ts      |   1 +
 .../vender/line/arrows/ArrowNarrowRight.json  |  29 +
 .../vender/line/arrows/ArrowNarrowRight.tsx   |  16 +
 .../icons/src/vender/line/arrows/index.ts     |   1 +
 .../src/vender/solid/arrows/ChevronDown.json  |  39 +
 .../src/vender/solid/arrows/ChevronDown.tsx   |  16 +
 .../icons/src/vender/solid/arrows/index.ts    |   1 +
 .../vender/solid/communication/AiText.json    |  53 +
 .../src/vender/solid/communication/AiText.tsx |  16 +
 .../solid/communication/CuteRobote.json       |  38 +
 .../vender/solid/communication/CuteRobote.tsx |  16 +
 .../src/vender/solid/communication/index.ts   |   2 +
 .../solid/development/ApiConnection.json      |  53 +
 .../solid/development/ApiConnection.tsx       |  16 +
 .../src/vender/solid/development/index.ts     |   1 +
 .../vender/solid/education/BubbleText.json    |  38 +
 .../src/vender/solid/education/BubbleText.tsx |  16 +
 .../src/vender/solid/education/Heart02.json   |  26 +
 .../src/vender/solid/education/Heart02.tsx    |  16 +
 .../src/vender/solid/education/Unblur.json    | 152 +++
 .../src/vender/solid/education/Unblur.tsx     |  16 +
 .../icons/src/vender/solid/education/index.ts |   3 +
 .../src/vender/solid/general/SearchMd.json    |  38 +
 .../src/vender/solid/general/SearchMd.tsx     |  16 +
 .../icons/src/vender/solid/general/index.ts   |   1 +
 .../plugins/component-picker.tsx              |   3 +-
 .../prompt-editor/plugins/variable-picker.tsx |   8 +
 web/app/components/base/radio/ui.tsx          |  18 +
 web/app/components/base/select/index.tsx      |  75 +-
 web/app/components/base/tab-slider/index.tsx  |  19 +-
 web/app/components/base/voice-input/utils.ts  |   7 +
 .../develop/template/template.en.mdx          | 476 ++++++---
 .../develop/template/template.zh.mdx          | 383 ++++---
 .../develop/template/template_chat.en.mdx     | 911 ++++++++++++-----
 .../develop/template/template_chat.zh.mdx     | 965 +++++++++++++-----
 web/app/components/explore/app-card/index.tsx |   6 +-
 web/app/components/explore/app-list/index.tsx |   4 +-
 .../explore/create-app-modal/index.tsx        |   8 +-
 web/app/components/explore/sidebar/index.tsx  |  12 +-
 .../api-based-extension-page/modal.tsx        |   2 +-
 .../api-based-extension-page/selector.tsx     |   2 +-
 .../header/account-setting/index.tsx          |  15 +-
 .../model-provider-page/declarations.ts       |   3 +
 .../model-provider-page/model-modal/Form.tsx  |  42 +-
 .../model-provider-page/model-modal/Input.tsx |  19 +
 web/app/components/header/app-nav/index.tsx   |  12 +-
 .../components/header/app-selector/index.tsx  |   2 +-
 .../components/header/dataset-nav/index.tsx   |   7 +-
 .../components/header/explore-nav/index.tsx   |   8 +-
 web/app/components/header/index.tsx           |   5 +-
 web/app/components/header/tools-nav/index.tsx |  35 +
 web/app/components/share/chat/index.tsx       | 152 ++-
 web/app/components/share/utils.ts             |   1 -
 web/app/components/tools/contribute.tsx       |  31 +
 .../config-credentials.tsx                    | 108 ++
 .../edit-custom-collection-modal/examples.ts  | 181 ++++
 .../get-schema.tsx                            | 117 +++
 .../edit-custom-collection-modal/index.tsx    | 290 ++++++
 .../edit-custom-collection-modal/test-api.tsx | 120 +++
 web/app/components/tools/index.tsx            | 232 +++++
 .../components/tools/info/no-custom-tool.tsx  |  38 +
 .../components/tools/info/no-search-res.tsx   |  38 +
 web/app/components/tools/search.tsx           |  41 +
 .../setting/build-in/config-credentials.tsx   |  88 ++
 web/app/components/tools/tool-list/header.tsx |  74 ++
 web/app/components/tools/tool-list/index.tsx  | 190 ++++
 web/app/components/tools/tool-list/item.tsx   |  78 ++
 .../components/tools/tool-nav-list/index.tsx  |  28 +
 .../components/tools/tool-nav-list/item.tsx   |  49 +
 web/app/components/tools/types.ts             | 111 ++
 web/app/components/tools/utils/index.ts       |  26 +
 .../components/tools/utils/to-form-schema.ts  |  64 ++
 web/config/index.ts                           |  98 +-
 web/context/debug-configuration.ts            |  19 +-
 web/context/modal-context.tsx                 |  11 +-
 web/global.d.ts                               |   4 +-
 web/i18n/i18next-config.ts                    |   6 +
 web/i18n/lang/app-debug.en.ts                 |  47 +-
 web/i18n/lang/app-debug.zh.ts                 |  43 +-
 web/i18n/lang/app.en.ts                       |  13 +-
 web/i18n/lang/app.zh.ts                       |  11 +-
 web/i18n/lang/common.en.ts                    |   6 +-
 web/i18n/lang/common.zh.ts                    |   6 +-
 web/i18n/lang/dataset.en.ts                   |   1 +
 web/i18n/lang/dataset.zh.ts                   |   1 +
 web/i18n/lang/tools.en.ts                     | 103 ++
 web/i18n/lang/tools.zh.ts                     |  95 ++
 web/models/debug.ts                           |  22 +-
 web/models/explore.ts                         |   2 +
 web/models/share.ts                           |   4 +
 web/package.json                              |   2 +-
 web/service/base.ts                           |  15 +-
 web/service/debug.ts                          |   9 +-
 web/service/share.ts                          |  12 +-
 web/service/tools.ts                          |  83 ++
 web/tailwind.config.js                        |   1 +
 web/types/app.ts                              |  26 +-
 web/utils/model-config.ts                     |  30 +
 web/utils/var.ts                              |   3 +-
 194 files changed, 8726 insertions(+), 1586 deletions(-)
 create mode 100644 web/app/(commonLayout)/tools/custom/page.tsx
 create mode 100644 web/app/(commonLayout)/tools/page.tsx
 create mode 100644 web/app/(commonLayout)/tools/third-part/page.tsx
 create mode 100644 web/app/components/app/chat/thought/panel.tsx
 create mode 100644 web/app/components/app/chat/thought/tool.tsx
 create mode 100644 web/app/components/app/configuration/config-var/select-var-type.tsx
 create mode 100644 web/app/components/app/configuration/config/agent/agent-setting/index.tsx
 create mode 100644 web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx
 create mode 100644 web/app/components/app/configuration/config/agent/agent-tools/choose-tool/index.tsx
 create mode 100644 web/app/components/app/configuration/config/agent/agent-tools/index.tsx
 create mode 100644 web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
 create mode 100644 web/app/components/app/configuration/config/agent/prompt-editor.tsx
 create mode 100644 web/app/components/app/configuration/config/assistant-type-picker/index.tsx
 create mode 100644 web/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/opening-statement.png
 delete mode 100644 web/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/opening-statement.svg
 create mode 100644 web/app/components/base/icons/assets/public/common/diagonal-dividing-line.svg
 create mode 100644 web/app/components/base/icons/assets/public/header-nav/explore/explore-active.svg
 create mode 100644 web/app/components/base/icons/assets/public/header-nav/explore/explore.svg
 create mode 100644 web/app/components/base/icons/assets/public/header-nav/knowledge/knowledge-active.svg
 create mode 100644 web/app/components/base/icons/assets/public/header-nav/knowledge/knowledge.svg
 create mode 100644 web/app/components/base/icons/assets/public/header-nav/studio/Robot-Active.svg
 create mode 100644 web/app/components/base/icons/assets/public/header-nav/studio/Robot.svg
 create mode 100644 web/app/components/base/icons/assets/public/header-nav/tools/tools-active.svg
 create mode 100644 web/app/components/base/icons/assets/public/header-nav/tools/tools.svg
 create mode 100644 web/app/components/base/icons/assets/public/other/default-tool-icon.svg
 create mode 100644 web/app/components/base/icons/assets/vender/line/arrows/arrow-narrow-right.svg
 create mode 100644 web/app/components/base/icons/assets/vender/solid/arrows/chevron-down.svg
 create mode 100644 web/app/components/base/icons/assets/vender/solid/communication/ai-text.svg
 create mode 100644 web/app/components/base/icons/assets/vender/solid/communication/cute-robote.svg
 create mode 100644 web/app/components/base/icons/assets/vender/solid/development/api-connection.svg
 create mode 100644 web/app/components/base/icons/assets/vender/solid/education/bubble-text.svg
 create mode 100644 web/app/components/base/icons/assets/vender/solid/education/heart-02.svg
 create mode 100644 web/app/components/base/icons/assets/vender/solid/education/unblur.svg
 create mode 100644 web/app/components/base/icons/assets/vender/solid/general/search-md.svg
 create mode 100644 web/app/components/base/icons/src/public/common/DiagonalDividingLine.json
 create mode 100644 web/app/components/base/icons/src/public/common/DiagonalDividingLine.tsx
 create mode 100644 web/app/components/base/icons/src/public/header-nav/explore/Explore.json
 create mode 100644 web/app/components/base/icons/src/public/header-nav/explore/Explore.tsx
 create mode 100644 web/app/components/base/icons/src/public/header-nav/explore/ExploreActive.json
 create mode 100644 web/app/components/base/icons/src/public/header-nav/explore/ExploreActive.tsx
 create mode 100644 web/app/components/base/icons/src/public/header-nav/explore/index.ts
 create mode 100644 web/app/components/base/icons/src/public/header-nav/knowledge/Knowledge.json
 create mode 100644 web/app/components/base/icons/src/public/header-nav/knowledge/Knowledge.tsx
 create mode 100644 web/app/components/base/icons/src/public/header-nav/knowledge/KnowledgeActive.json
 create mode 100644 web/app/components/base/icons/src/public/header-nav/knowledge/KnowledgeActive.tsx
 create mode 100644 web/app/components/base/icons/src/public/header-nav/knowledge/index.ts
 create mode 100644 web/app/components/base/icons/src/public/header-nav/studio/Robot.json
 create mode 100644 web/app/components/base/icons/src/public/header-nav/studio/Robot.tsx
 create mode 100644 web/app/components/base/icons/src/public/header-nav/studio/RobotActive.json
 create mode 100644 web/app/components/base/icons/src/public/header-nav/studio/RobotActive.tsx
 create mode 100644 web/app/components/base/icons/src/public/header-nav/studio/index.ts
 create mode 100644 web/app/components/base/icons/src/public/header-nav/tools/Tools.json
 create mode 100644 web/app/components/base/icons/src/public/header-nav/tools/Tools.tsx
 create mode 100644 web/app/components/base/icons/src/public/header-nav/tools/ToolsActive.json
 create mode 100644 web/app/components/base/icons/src/public/header-nav/tools/ToolsActive.tsx
 create mode 100644 web/app/components/base/icons/src/public/header-nav/tools/index.ts
 create mode 100644 web/app/components/base/icons/src/public/other/DefaultToolIcon.json
 create mode 100644 web/app/components/base/icons/src/public/other/DefaultToolIcon.tsx
 create mode 100644 web/app/components/base/icons/src/public/other/index.ts
 create mode 100644 web/app/components/base/icons/src/vender/line/arrows/ArrowNarrowRight.json
 create mode 100644 web/app/components/base/icons/src/vender/line/arrows/ArrowNarrowRight.tsx
 create mode 100644 web/app/components/base/icons/src/vender/solid/arrows/ChevronDown.json
 create mode 100644 web/app/components/base/icons/src/vender/solid/arrows/ChevronDown.tsx
 create mode 100644 web/app/components/base/icons/src/vender/solid/communication/AiText.json
 create mode 100644 web/app/components/base/icons/src/vender/solid/communication/AiText.tsx
 create mode 100644 web/app/components/base/icons/src/vender/solid/communication/CuteRobote.json
 create mode 100644 web/app/components/base/icons/src/vender/solid/communication/CuteRobote.tsx
 create mode 100644 web/app/components/base/icons/src/vender/solid/development/ApiConnection.json
 create mode 100644 web/app/components/base/icons/src/vender/solid/development/ApiConnection.tsx
 create mode 100644 web/app/components/base/icons/src/vender/solid/education/BubbleText.json
 create mode 100644 web/app/components/base/icons/src/vender/solid/education/BubbleText.tsx
 create mode 100644 web/app/components/base/icons/src/vender/solid/education/Heart02.json
 create mode 100644 web/app/components/base/icons/src/vender/solid/education/Heart02.tsx
 create mode 100644 web/app/components/base/icons/src/vender/solid/education/Unblur.json
 create mode 100644 web/app/components/base/icons/src/vender/solid/education/Unblur.tsx
 create mode 100644 web/app/components/base/icons/src/vender/solid/general/SearchMd.json
 create mode 100644 web/app/components/base/icons/src/vender/solid/general/SearchMd.tsx
 create mode 100644 web/app/components/base/radio/ui.tsx
 create mode 100644 web/app/components/header/tools-nav/index.tsx
 create mode 100644 web/app/components/tools/contribute.tsx
 create mode 100644 web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
 create mode 100644 web/app/components/tools/edit-custom-collection-modal/examples.ts
 create mode 100644 web/app/components/tools/edit-custom-collection-modal/get-schema.tsx
 create mode 100644 web/app/components/tools/edit-custom-collection-modal/index.tsx
 create mode 100644 web/app/components/tools/edit-custom-collection-modal/test-api.tsx
 create mode 100644 web/app/components/tools/index.tsx
 create mode 100644 web/app/components/tools/info/no-custom-tool.tsx
 create mode 100644 web/app/components/tools/info/no-search-res.tsx
 create mode 100644 web/app/components/tools/search.tsx
 create mode 100644 web/app/components/tools/setting/build-in/config-credentials.tsx
 create mode 100644 web/app/components/tools/tool-list/header.tsx
 create mode 100644 web/app/components/tools/tool-list/index.tsx
 create mode 100644 web/app/components/tools/tool-list/item.tsx
 create mode 100644 web/app/components/tools/tool-nav-list/index.tsx
 create mode 100644 web/app/components/tools/tool-nav-list/item.tsx
 create mode 100644 web/app/components/tools/types.ts
 create mode 100644 web/app/components/tools/utils/index.ts
 create mode 100644 web/app/components/tools/utils/to-form-schema.ts
 create mode 100644 web/i18n/lang/tools.en.ts
 create mode 100644 web/i18n/lang/tools.zh.ts
 create mode 100644 web/service/tools.ts

diff --git a/web/.gitignore b/web/.gitignore
index 6942941877..9dd00b1b08 100644
--- a/web/.gitignore
+++ b/web/.gitignore
@@ -47,4 +47,6 @@ package-lock.json
 .yarnrc.yml
 
 # pmpm
-pnpm-lock.yaml
\ No newline at end of file
+pnpm-lock.yaml
+
+.favorites.json
\ No newline at end of file
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx
index 8568c7d7b6..14b27f8a64 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx
@@ -38,15 +38,24 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
 
   const navigation = useMemo(() => {
     const navs = [
-      { name: t('common.appMenus.overview'), href: `/app/${appId}/overview`, icon: ChartBarSquareIcon, selectedIcon: ChartBarSquareSolidIcon },
       ...(isCurrentWorkspaceManager ? [{ name: t('common.appMenus.promptEng'), href: `/app/${appId}/configuration`, icon: Cog8ToothIcon, selectedIcon: Cog8ToothSolidIcon }] : []),
+      { name: t('common.appMenus.overview'), href: `/app/${appId}/overview`, icon: ChartBarSquareIcon, selectedIcon: ChartBarSquareSolidIcon },
       { name: t('common.appMenus.apiAccess'), href: `/app/${appId}/develop`, icon: CommandLineIcon, selectedIcon: CommandLineSolidIcon },
       { name: t('common.appMenus.logAndAnn'), href: `/app/${appId}/logs`, icon: DocumentTextIcon, selectedIcon: DocumentTextSolidIcon },
     ]
     return navs
   }, [appId, isCurrentWorkspaceManager, t])
 
-  const appModeName = response?.mode?.toUpperCase() === 'COMPLETION' ? t('common.appModes.completionApp') : t('common.appModes.chatApp')
+  const appModeName = (() => {
+    if (response?.mode?.toUpperCase() === 'COMPLETION')
+      return t('app.newApp.completeApp')
+
+    const isAgent = !!response?.is_agent
+    if (isAgent)
+      return t('appDebug.assistantType.agentAssistant.name')
+
+    return t('appDebug.assistantType.chatAssistant.name')
+  })()
   useEffect(() => {
     if (response?.name)
       document.title = `${(response.name || 'App')} - Dify`
diff --git a/web/app/(commonLayout)/apps/AppCard.tsx b/web/app/(commonLayout)/apps/AppCard.tsx
index 97b8f7b64c..17f85d9b61 100644
--- a/web/app/(commonLayout)/apps/AppCard.tsx
+++ b/web/app/(commonLayout)/apps/AppCard.tsx
@@ -55,9 +55,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
     catch (e: any) {
       notify({
         type: 'error',
-        message: `${t('app.appDeleteFailed')}${
-          'message' in e ? `: ${e.message}` : ''
-        }`,
+        message: `${t('app.appDeleteFailed')}${'message' in e ? `: ${e.message}` : ''}`,
       })
     }
     setShowConfirmDelete(false)
@@ -141,7 +139,8 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
           if (showSettingsModal)
             return
           e.preventDefault()
-          push(`/app/${app.id}/overview`)
+
+          push(`/app/${app.id}/${isCurrentWorkspaceManager ? 'configuration' : 'overview'}`)
         }}
         className={style.listItem}
       >
@@ -173,7 +172,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
           {app.model_config?.pre_prompt}
         </div>
         <div className={style.listItemFooter}>
-          <AppModeLabel mode={app.mode} />
+          <AppModeLabel mode={app.mode} isAgent={app.is_agent} />
         </div>
 
         {showConfirmDelete && (
diff --git a/web/app/(commonLayout)/apps/AppModeLabel.tsx b/web/app/(commonLayout)/apps/AppModeLabel.tsx
index d40d29a11e..bbe6154bec 100644
--- a/web/app/(commonLayout)/apps/AppModeLabel.tsx
+++ b/web/app/(commonLayout)/apps/AppModeLabel.tsx
@@ -1,25 +1,53 @@
 'use client'
 
-import classNames from 'classnames'
 import { useTranslation } from 'react-i18next'
-import style from '../list.module.css'
 import { type AppMode } from '@/types/app'
+import {
+  AiText,
+  CuteRobote,
+} from '@/app/components/base/icons/src/vender/solid/communication'
+import { BubbleText } from '@/app/components/base/icons/src/vender/solid/education'
 
 export type AppModeLabelProps = {
   mode: AppMode
+  isAgent?: boolean
   className?: string
 }
 
 const AppModeLabel = ({
   mode,
+  isAgent,
   className,
 }: AppModeLabelProps) => {
   const { t } = useTranslation()
+
   return (
-    <span className={classNames('flex items-center w-fit h-6 gap-1 px-2 text-gray-500 text-xs border border-gray-100 rounded', className)}>
-      <span className={classNames(style.listItemFooterIcon, mode === 'chat' && style.solidChatIcon, mode === 'completion' && style.solidCompletionIcon)} />
-      {t(`app.modes.${mode}`)}
-    </span>
+    <div className={`inline-flex items-center px-2 h-6 rounded-md border border-gray-100 text-xs text-gray-500 ${className}`}>
+      {
+        mode === 'completion' && (
+          <>
+            <AiText className='mr-1 w-3 h-3 text-gray-400' />
+            {t('app.newApp.completeApp')}
+          </>
+        )
+      }
+      {
+        mode === 'chat' && !isAgent && (
+          <>
+            <BubbleText className='mr-1 w-3 h-3 text-gray-400' />
+            {t('appDebug.assistantType.chatAssistant.name')}
+          </>
+        )
+      }
+      {
+        mode === 'chat' && isAgent && (
+          <>
+            <CuteRobote className='mr-1 w-3 h-3 text-gray-400' />
+            {t('appDebug.assistantType.agentAssistant.name')}
+          </>
+        )
+      }
+    </div>
   )
 }
 
diff --git a/web/app/(commonLayout)/apps/Apps.tsx b/web/app/(commonLayout)/apps/Apps.tsx
index d4ea2fef72..c5331d744a 100644
--- a/web/app/(commonLayout)/apps/Apps.tsx
+++ b/web/app/(commonLayout)/apps/Apps.tsx
@@ -1,8 +1,9 @@
 'use client'
 
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import useSWRInfinite from 'swr/infinite'
 import { useTranslation } from 'react-i18next'
+import { useDebounceFn } from 'ahooks'
 import AppCard from './AppCard'
 import NewAppCard from './NewAppCard'
 import type { AppListResponse } from '@/models/app'
@@ -10,17 +11,46 @@ import { fetchAppList } from '@/service/apps'
 import { useAppContext } from '@/context/app-context'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { CheckModal } from '@/hooks/use-pay'
-const getKey = (pageIndex: number, previousPageData: AppListResponse) => {
-  if (!pageIndex || previousPageData.has_more)
-    return { url: 'apps', params: { page: pageIndex + 1, limit: 30 } }
+import TabSlider from '@/app/components/base/tab-slider'
+import { SearchLg } from '@/app/components/base/icons/src/vender/line/general'
+import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
+
+const getKey = (
+  pageIndex: number,
+  previousPageData: AppListResponse,
+  activeTab: string,
+  keywords: string,
+) => {
+  if (!pageIndex || previousPageData.has_more) {
+    const params: any = { url: 'apps', params: { page: pageIndex + 1, limit: 30, name: keywords } }
+
+    if (activeTab !== 'all')
+      params.params.mode = activeTab
+
+    return params
+  }
   return null
 }
 
 const Apps = () => {
   const { t } = useTranslation()
   const { isCurrentWorkspaceManager } = useAppContext()
-  const { data, isLoading, setSize, mutate } = useSWRInfinite(getKey, fetchAppList, { revalidateFirstPage: false })
+  const [activeTab, setActiveTab] = useState('all')
+  const [keywords, setKeywords] = useState('')
+  const [searchKeywords, setSearchKeywords] = useState('')
+
+  const { data, isLoading, setSize, mutate } = useSWRInfinite(
+    (pageIndex: number, previousPageData: AppListResponse) => getKey(pageIndex, previousPageData, activeTab, searchKeywords),
+    fetchAppList,
+    { revalidateFirstPage: false },
+  )
+
   const anchorRef = useRef<HTMLDivElement>(null)
+  const options = [
+    { value: 'all', text: t('app.types.all') },
+    { value: 'chat', text: t('app.types.assistant') },
+    { value: 'completion', text: t('app.types.completion') },
+  ]
 
   useEffect(() => {
     document.title = `${t('app.title')} -  Dify`
@@ -34,24 +64,72 @@ const Apps = () => {
     let observer: IntersectionObserver | undefined
     if (anchorRef.current) {
       observer = new IntersectionObserver((entries) => {
-        if (entries[0].isIntersecting)
-          setSize(size => size + 1)
+        if (entries[0].isIntersecting && !isLoading)
+          setSize((size: number) => size + 1)
       }, { rootMargin: '100px' })
       observer.observe(anchorRef.current)
     }
     return () => observer?.disconnect()
   }, [isLoading, setSize, anchorRef, mutate])
 
+  const { run: handleSearch } = useDebounceFn(() => {
+    setSearchKeywords(keywords)
+  }, { wait: 500 })
+
+  const handleKeywordsChange = (value: string) => {
+    setKeywords(value)
+    handleSearch()
+  }
+
+  const handleClear = () => {
+    handleKeywordsChange('')
+  }
+
   return (
-    <><nav className='grid content-start grid-cols-1 gap-4 px-12 pt-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grow shrink-0'>
-      { isCurrentWorkspaceManager
-      && <NewAppCard onSuccess={mutate} />}
-      {data?.map(({ data: apps }) => apps.map(app => (
-        <AppCard key={app.id} app={app} onRefresh={mutate} />
-      )))}
-      <CheckModal />
-    </nav>
-    <div ref={anchorRef} className='h-0'> </div>
+    <>
+      <div className='sticky top-0 flex justify-between items-center pt-4 px-12 pb-2 leading-[56px] bg-gray-100 z-10 flex-wrap gap-y-2'>
+        <div className="flex items-center px-2 w-[200px] h-8 rounded-lg bg-gray-200">
+          <div className="pointer-events-none shrink-0 flex items-center mr-1.5 justify-center w-4 h-4">
+            <SearchLg className="h-3.5 w-3.5 text-gray-500" aria-hidden="true" />
+          </div>
+          <input
+            type="text"
+            name="query"
+            className="grow block h-[18px] bg-gray-200 rounded-md border-0 text-gray-600 text-[13px] placeholder:text-gray-500 appearance-none outline-none"
+            placeholder={t('common.operation.search')!}
+            value={keywords}
+            onChange={(e) => {
+              handleKeywordsChange(e.target.value)
+            }}
+            autoComplete="off"
+          />
+          {
+            keywords && (
+              <div
+                className='shrink-0 flex items-center justify-center w-4 h-4 cursor-pointer'
+                onClick={handleClear}
+              >
+                <XCircle className='w-3.5 h-3.5 text-gray-400' />
+              </div>
+            )
+          }
+        </div>
+        <TabSlider
+          value={activeTab}
+          onChange={setActiveTab}
+          options={options}
+        />
+
+      </div>
+      <nav className='grid content-start grid-cols-1 gap-4 px-12 pt-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grow shrink-0'>
+        {isCurrentWorkspaceManager
+          && <NewAppCard onSuccess={mutate} />}
+        {data?.map(({ data: apps }: any) => apps.map((app: any) => (
+          <AppCard key={app.id} app={app} onRefresh={mutate} />
+        )))}
+        <CheckModal />
+      </nav>
+      <div ref={anchorRef} className='h-0'> </div>
     </>
   )
 }
diff --git a/web/app/(commonLayout)/apps/NewAppDialog.tsx b/web/app/(commonLayout)/apps/NewAppDialog.tsx
index 912bcd98dd..f157631de4 100644
--- a/web/app/(commonLayout)/apps/NewAppDialog.tsx
+++ b/web/app/(commonLayout)/apps/NewAppDialog.tsx
@@ -15,10 +15,11 @@ import type { AppMode } from '@/types/app'
 import { ToastContext } from '@/app/components/base/toast'
 import { createApp, fetchAppTemplates } from '@/service/apps'
 import AppIcon from '@/app/components/base/app-icon'
-import AppsContext from '@/context/app-context'
+import AppsContext, { useAppContext } from '@/context/app-context'
 import EmojiPicker from '@/app/components/base/emoji-picker'
 import { useProviderContext } from '@/context/provider-context'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
+import { AiText } from '@/app/components/base/icons/src/vender/solid/communication'
 
 type NewAppDialogProps = {
   show: boolean
@@ -29,6 +30,8 @@ type NewAppDialogProps = {
 const NewAppDialog = ({ show, onSuccess, onClose }: NewAppDialogProps) => {
   const router = useRouter()
   const { notify } = useContext(ToastContext)
+  const { isCurrentWorkspaceManager } = useAppContext()
+
   const { t } = useTranslation()
 
   const nameInputRef = useRef<HTMLInputElement>(null)
@@ -90,7 +93,7 @@ const NewAppDialog = ({ show, onSuccess, onClose }: NewAppDialogProps) => {
         onClose()
       notify({ type: 'success', message: t('app.newApp.appCreated') })
       mutateApps()
-      router.push(`/app/${app.id}/overview`)
+      router.push(`/app/${app.id}/${isCurrentWorkspaceManager ? 'configuration' : 'overview'}`)
     }
     catch (e) {
       notify({ type: 'error', message: t('app.newApp.appCreateFailed') })
@@ -119,13 +122,6 @@ const NewAppDialog = ({ show, onSuccess, onClose }: NewAppDialogProps) => {
         </>
       }
     >
-      <h3 className={style.newItemCaption}>{t('app.newApp.captionName')}</h3>
-
-      <div className='flex items-center justify-between gap-3 mb-8'>
-        <AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} className='cursor-pointer' icon={emoji.icon} background={emoji.icon_background} />
-        <input ref={nameInputRef} className='h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow' placeholder={t('app.appNamePlaceholder') || ''}/>
-      </div>
-
       <div className='overflow-y-auto'>
         <div className={style.newItemCaption}>
           <h3 className='inline'>{t('app.newApp.captionAppType')}</h3>
@@ -141,29 +137,9 @@ const NewAppDialog = ({ show, onSuccess, onClose }: NewAppDialogProps) => {
             </>
           )}
         </div>
-        {isWithTemplate
-          ? (
-            <ul className='grid grid-cols-1 md:grid-cols-2 gap-4'>
-              {templates?.data?.map((template, index) => (
-                <li
-                  key={index}
-                  className={classNames(style.listItem, style.selectable, selectedTemplateIndex === index && style.selected)}
-                  onClick={() => setSelectedTemplateIndex(index)}
-                >
-                  <div className={style.listItemTitle}>
-                    <AppIcon size='small' />
-                    <div className={style.listItemHeading}>
-                      <div className={style.listItemHeadingContent}>{template.name}</div>
-                    </div>
-                  </div>
-                  <div className={style.listItemDescription}>{template.model_config?.pre_prompt}</div>
-                  <AppModeLabel mode={template.mode} className='mt-2' />
-                  {/* <AppModeLabel mode='chat' className='mt-2' /> */}
-                </li>
-              ))}
-            </ul>
-          )
-          : (
+
+        {!isWithTemplate && (
+          (
             <>
               <ul className='grid grid-cols-1 md:grid-cols-2 gap-4'>
                 <li
@@ -178,10 +154,10 @@ const NewAppDialog = ({ show, onSuccess, onClose }: NewAppDialogProps) => {
                       <div className={style.listItemHeadingContent}>{t('app.newApp.chatApp')}</div>
                     </div>
                   </div>
-                  <div className={style.listItemDescription}>{t('app.newApp.chatAppIntro')}</div>
-                  <div className={classNames(style.listItemFooter, 'justify-end')}>
+                  <div className={`${style.listItemDescription} ${style.noClip}`}>{t('app.newApp.chatAppIntro')}</div>
+                  {/* <div className={classNames(style.listItemFooter, 'justify-end')}>
                     <a className={style.listItemLink} href='https://udify.app/chat/7CQBa5yyvYLSkZtx' target='_blank'>{t('app.newApp.previewDemo')}<span className={classNames(style.linkIcon, style.grayLinkIcon)} /></a>
-                  </div>
+                  </div> */}
                 </li>
                 <li
                   className={classNames(style.listItem, style.selectable, newAppMode === 'completion' && style.selected)}
@@ -189,28 +165,65 @@ const NewAppDialog = ({ show, onSuccess, onClose }: NewAppDialogProps) => {
                 >
                   <div className={style.listItemTitle}>
                     <span className={style.newItemIcon}>
-                      <span className={classNames(style.newItemIconImage, style.newItemIconComplete)} />
+                      {/* <span className={classNames(style.newItemIconImage, style.newItemIconComplete)} /> */}
+                      <AiText className={classNames('w-5 h-5', newAppMode === 'completion' ? 'text-[#155EEF]' : 'text-gray-700')} />
                     </span>
                     <div className={style.listItemHeading}>
                       <div className={style.listItemHeadingContent}>{t('app.newApp.completeApp')}</div>
                     </div>
                   </div>
-                  <div className={style.listItemDescription}>{t('app.newApp.completeAppIntro')}</div>
-                  <div className={classNames(style.listItemFooter, 'justify-end')}>
-                    <a className={style.listItemLink} href='https://udify.app/completion/aeFTj0VCb3Ok3TUE' target='_blank'>{t('app.newApp.previewDemo')}<span className={classNames(style.linkIcon, style.grayLinkIcon)} /></a>
-                  </div>
+                  <div className={`${style.listItemDescription} ${style.noClip}`}>{t('app.newApp.completeAppIntro')}</div>
                 </li>
               </ul>
-              <div className='flex items-center h-[34px] mt-2'>
-                <span
-                  className='inline-flex items-center gap-1 text-xs font-medium cursor-pointer text-primary-600'
-                  onClick={() => setIsWithTemplate(true)}
-                >
-                  {t('app.newApp.showTemplates')}<span className={style.rightIcon} />
-                </span>
-              </div>
+
             </>
-          )}
+          )
+        )}
+
+        {isWithTemplate && (
+          <ul className='grid grid-cols-1 md:grid-cols-2 gap-4'>
+            {templates?.data?.map((template, index) => (
+              <li
+                key={index}
+                className={classNames(style.listItem, style.selectable, selectedTemplateIndex === index && style.selected)}
+                onClick={() => setSelectedTemplateIndex(index)}
+              >
+                <div className={style.listItemTitle}>
+                  <AppIcon size='small' />
+                  <div className={style.listItemHeading}>
+                    <div className={style.listItemHeadingContent}>{template.name}</div>
+                  </div>
+                </div>
+                <div className={style.listItemDescription}>{template.model_config?.pre_prompt}</div>
+                <div className='inline-block pl-3.5'>
+                  <AppModeLabel mode={template.mode} isAgent={template.model_config.agent_mode.enabled} className='mt-2' />
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+
+        <div className='mt-8'>
+          <h3 className={style.newItemCaption}>{t('app.newApp.captionName')}</h3>
+          <div className='flex items-center justify-between gap-3'>
+            <AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} className='cursor-pointer' icon={emoji.icon} background={emoji.icon_background} />
+            <input ref={nameInputRef} className='h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow' placeholder={t('app.appNamePlaceholder') || ''} />
+          </div>
+        </div>
+
+        {
+          !isWithTemplate && (
+            <div className='flex items-center h-[34px] mt-2'>
+              <span
+                className='inline-flex items-center gap-1 text-xs font-medium cursor-pointer text-primary-600'
+                onClick={() => setIsWithTemplate(true)}
+              >
+                {t('app.newApp.showTemplates')}<span className={style.rightIcon} />
+              </span>
+            </div>
+          )
+        }
+
       </div>
       {isAppsFull && <AppsFull loc='app-create' />}
     </Dialog>
diff --git a/web/app/(commonLayout)/apps/page.tsx b/web/app/(commonLayout)/apps/page.tsx
index e2e774bec7..30c2ef9e57 100644
--- a/web/app/(commonLayout)/apps/page.tsx
+++ b/web/app/(commonLayout)/apps/page.tsx
@@ -9,7 +9,7 @@ const AppList = async () => {
   const { t } = await translate(locale, 'app')
 
   return (
-    <div className='flex flex-col overflow-auto bg-gray-100 shrink-0 grow'>
+    <div className='relative flex flex-col overflow-y-auto bg-gray-100 shrink-0 h-0 grow'>
       <Apps />
       <footer className='px-12 py-6 grow-0 shrink-0'>
         <h3 className='text-xl font-semibold leading-tight text-gradient'>{t('join')}</h3>
diff --git a/web/app/(commonLayout)/list.module.css b/web/app/(commonLayout)/list.module.css
index 84108a378e..5ca0714b9e 100644
--- a/web/app/(commonLayout)/list.module.css
+++ b/web/app/(commonLayout)/list.module.css
@@ -10,19 +10,20 @@
 .listItem.selectable {
   @apply relative bg-gray-50 outline outline-1 outline-gray-200 -outline-offset-1 shadow-none hover:bg-none hover:shadow-none hover:outline-primary-200 transition-colors;
 }
+
 .listItem.selectable * {
   @apply relative;
 }
+
 .listItem.selectable::before {
   content: "";
   @apply absolute top-0 left-0 block w-full h-full rounded-lg pointer-events-none opacity-0 transition-opacity duration-200 ease-in-out hover:opacity-100;
-  background: linear-gradient(
-      0deg,
+  background: linear-gradient(0deg,
       rgba(235, 245, 255, 0.5),
-      rgba(235, 245, 255, 0.5)
-    ),
+      rgba(235, 245, 255, 0.5)),
     #ffffff;
 }
+
 .listItem.selectable:hover::before {
   @apply opacity-100;
 }
@@ -30,6 +31,7 @@
 .listItem.selected {
   @apply border-primary-600 hover:border-primary-600 border-2;
 }
+
 .listItem.selected::before {
   @apply opacity-100;
 }
@@ -37,9 +39,11 @@
 .appIcon {
   @apply flex items-center justify-center w-8 h-8 bg-pink-100 rounded-lg grow-0 shrink-0;
 }
+
 .appIcon.medium {
   @apply w-9 h-9;
 }
+
 .appIcon.large {
   @apply w-10 h-10;
 }
@@ -47,34 +51,48 @@
 .newItemIcon {
   @apply flex items-center justify-center w-8 h-8 transition-colors duration-200 ease-in-out border border-gray-200 rounded-lg hover:bg-white grow-0 shrink-0;
 }
+
 .listItem:hover .newItemIcon {
   @apply bg-gray-50 border-primary-100;
 }
+
 .newItemCard .newItemIcon {
   @apply bg-gray-100;
 }
+
 .newItemCard:hover .newItemIcon {
   @apply bg-white;
 }
+
 .selectable .newItemIcon {
   @apply bg-gray-50;
 }
+
 .selectable:hover .newItemIcon {
   @apply bg-primary-50;
 }
+
 .newItemIconImage {
   @apply grow-0 shrink-0 block w-4 h-4 bg-center bg-contain transition-colors duration-200 ease-in-out;
   color: #1f2a37;
 }
+
 .listItem:hover .newIconImage {
   @apply text-primary-600;
 }
+
 .newItemIconAdd {
   background-image: url("./apps/assets/add.svg");
 }
+
 .newItemIconChat {
-  background-image: url("./apps/assets/chat.svg");
+  background-image: url("~@/app/components/base/icons/assets/public/header-nav/studio/Robot.svg");
 }
+
+.selected .newItemIconChat {
+  background-image: url("~@/app/components/base/icons/assets/public/header-nav/studio/Robot-Active.svg");
+}
+
 .newItemIconComplete {
   background-image: url("./apps/assets/completion.svg");
 }
@@ -94,14 +112,17 @@
 .actionIconWrapper {
   @apply hidden h-8 w-8 p-2 rounded-md border-none hover:bg-gray-100 !important;
 }
+
 .listItem:hover .actionIconWrapper {
   @apply !inline-flex;
 }
+
 .deleteDatasetIcon {
   @apply hidden grow-0 shrink-0 basis-8 w-8 h-8 rounded-lg transition-colors duration-200 ease-in-out bg-white border border-gray-200 hover:bg-gray-100 bg-center bg-no-repeat;
   background-size: 16px;
   background-image: url('~@/assets/delete.svg');
 }
+
 .listItem:hover .deleteDatasetIcon {
   @apply block;
 }
@@ -110,9 +131,14 @@
   @apply mb-3 px-[14px] h-9 text-xs leading-normal text-gray-500 line-clamp-2;
 }
 
+.listItemDescription.noClip {
+  @apply line-clamp-none;
+}
+
 .listItemFooter {
   @apply flex items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px];
 }
+
 .listItemFooter.datasetCardFooter {
   @apply flex items-center gap-4 text-xs text-gray-500;
 }
@@ -124,18 +150,23 @@
 .listItemFooterIcon {
   @apply block w-3 h-3 bg-center bg-contain;
 }
+
 .solidChatIcon {
   background-image: url("./apps/assets/chat-solid.svg");
 }
+
 .solidCompletionIcon {
   background-image: url("./apps/assets/completion-solid.svg");
 }
+
 .docIcon {
   background-image: url("./datasets/assets/doc.svg");
 }
+
 .textIcon {
   background-image: url("./datasets/assets/text.svg");
 }
+
 .applicationIcon {
   background-image: url("./datasets/assets/application.svg");
 }
@@ -143,6 +174,7 @@
 .newItemCardHeading {
   @apply transition-colors duration-200 ease-in-out;
 }
+
 .listItem:hover .newItemCardHeading {
   @apply text-primary-600;
 }
@@ -150,6 +182,7 @@
 .listItemLink {
   @apply inline-flex items-center gap-1 text-xs text-gray-400 transition-colors duration-200 ease-in-out;
 }
+
 .listItem:hover .listItemLink {
   @apply text-primary-600;
 }
@@ -162,6 +195,7 @@
 .linkIcon.grayLinkIcon {
   background-image: url("./apps/assets/link-gray.svg");
 }
+
 .listItem:hover .grayLinkIcon {
   background-image: url("./apps/assets/link.svg");
 }
@@ -191,6 +225,7 @@
 .newItemCaption {
   @apply inline-flex items-center mb-2 text-sm font-medium;
 }
+
 /* #endregion new app dialog */
 
 .unavailable {
@@ -199,4 +234,4 @@
 
 .listItem:hover .unavailable {
   @apply opacity-100;
-}
+}
\ No newline at end of file
diff --git a/web/app/(commonLayout)/tools/custom/page.tsx b/web/app/(commonLayout)/tools/custom/page.tsx
new file mode 100644
index 0000000000..c666bf347c
--- /dev/null
+++ b/web/app/(commonLayout)/tools/custom/page.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+
+const Custom = () => {
+  return (
+    <div>
+      Custom
+    </div>
+  )
+}
+export default Custom
diff --git a/web/app/(commonLayout)/tools/page.tsx b/web/app/(commonLayout)/tools/page.tsx
new file mode 100644
index 0000000000..36a76d60d0
--- /dev/null
+++ b/web/app/(commonLayout)/tools/page.tsx
@@ -0,0 +1,23 @@
+'use client'
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import React, { useEffect } from 'react'
+import Tools from '@/app/components/tools'
+import { LOC } from '@/app/components/tools/types'
+
+const Layout: FC = () => {
+  const { t } = useTranslation()
+
+  useEffect(() => {
+    document.title = `${t('tools.title')} - Dify`
+  }, [])
+
+  return (
+    <div className='overflow-hidden' style={{
+      height: 'calc(100vh - 56px)',
+    }}>
+      <Tools loc={LOC.tools} />
+    </div>
+  )
+}
+export default React.memo(Layout)
diff --git a/web/app/(commonLayout)/tools/third-part/page.tsx b/web/app/(commonLayout)/tools/third-part/page.tsx
new file mode 100644
index 0000000000..d2ae810609
--- /dev/null
+++ b/web/app/(commonLayout)/tools/third-part/page.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+
+const ThirdPart = () => {
+  return (
+    <div>
+      Third part
+    </div>
+  )
+}
+export default ThirdPart
diff --git a/web/app/components/app/chat/answer/index.tsx b/web/app/components/app/chat/answer/index.tsx
index 09ed125020..da2bf65e15 100644
--- a/web/app/components/app/chat/answer/index.tsx
+++ b/web/app/components/app/chat/answer/index.tsx
@@ -4,10 +4,10 @@ import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { UserCircleIcon } from '@heroicons/react/24/solid'
 import cn from 'classnames'
-import type { CitationItem, DisplayScene, FeedbackFunc, Feedbacktype, IChatItem, ThoughtItem } from '../type'
+import type { CitationItem, DisplayScene, FeedbackFunc, Feedbacktype, IChatItem } from '../type'
 import OperationBtn from '../operation'
 import LoadingAnim from '../loading-anim'
-import { EditIconSolid, OpeningStatementIcon, RatingIcon } from '../icon-component'
+import { EditIconSolid, RatingIcon } from '../icon-component'
 import s from '../style.module.css'
 import MoreInfo from '../more-info'
 import CopyBtn from '../copy-btn'
@@ -22,6 +22,9 @@ import AnnotationCtrlBtn from '@/app/components/app/configuration/toolbox/annota
 import EditReplyModal from '@/app/components/app/annotation/edit-annotation-modal'
 import { EditTitle } from '@/app/components/app/annotation/edit-annotation-modal/edit-item'
 import { MessageFast } from '@/app/components/base/icons/src/vender/solid/communication'
+import type { Emoji } from '@/app/components/tools/types'
+import type { VisionFile } from '@/types/app'
+import ImageGallery from '@/app/components/base/image-gallery'
 
 const Divider: FC<{ name: string }> = ({ name }) => {
   const { t } = useTranslation()
@@ -41,13 +44,12 @@ export type IAnswerProps = {
   item: IChatItem
   feedbackDisabled: boolean
   isHideFeedbackEdit: boolean
+  onQueryChange: (query: string) => void
   onFeedback?: FeedbackFunc
   displayScene: DisplayScene
   isResponsing?: boolean
   answerIcon?: ReactNode
-  thoughts?: ThoughtItem[]
   citation?: CitationItem[]
-  isThinking?: boolean
   dataSets?: DataSet[]
   isShowCitation?: boolean
   isShowCitationHitInfo?: boolean
@@ -58,20 +60,19 @@ export type IAnswerProps = {
   onAnnotationEdited?: (question: string, answer: string) => void
   onAnnotationAdded?: (annotationId: string, authorName: string, question: string, answer: string) => void
   onAnnotationRemoved?: () => void
+  allToolIcons?: Record<string, string | Emoji>
 }
 // The component needs to maintain its own state to control whether to display input component
 const Answer: FC<IAnswerProps> = ({
   item,
+  onQueryChange,
   feedbackDisabled = false,
   isHideFeedbackEdit = false,
   onFeedback,
   displayScene = 'web',
   isResponsing,
   answerIcon,
-  thoughts,
   citation,
-  isThinking,
-  dataSets,
   isShowCitation,
   isShowCitationHitInfo = false,
   supportAnnotation,
@@ -80,8 +81,10 @@ const Answer: FC<IAnswerProps> = ({
   onAnnotationEdited,
   onAnnotationAdded,
   onAnnotationRemoved,
+  allToolIcons,
 }) => {
-  const { id, content, more, feedback, adminFeedback, annotation } = item
+  const { id, content, more, feedback, adminFeedback, annotation, agent_thoughts } = item
+  const isAgentMode = !!agent_thoughts && agent_thoughts.length > 0
   const hasAnnotation = !!annotation?.id
   const [showEdit, setShowEdit] = useState(false)
   const [loading, setLoading] = useState(false)
@@ -202,8 +205,40 @@ const Answer: FC<IAnswerProps> = ({
     )
   }
 
+  const getImgs = (list?: VisionFile[]) => {
+    if (!list)
+      return []
+    return list.filter(file => file.type === 'image' && file.belongs_to === 'assistant')
+  }
+
+  const agentModeAnswer = (
+    <div>
+      {agent_thoughts?.map((item, index) => (
+        <div key={index}>
+          {item.thought && (
+            <Markdown content={item.thought} />
+          )}
+          {/* {item.tool} */}
+          {/* perhaps not use tool */}
+          {!!item.tool && (
+            <Thought
+              thought={item}
+              allToolIcons={allToolIcons || {}}
+              isFinished={!!item.observation}
+            />
+          )}
+
+          {getImgs(item.message_files).length > 0 && (
+            <ImageGallery srcs={getImgs(item.message_files).map(item => item.url)} />
+          )}
+        </div>
+      ))}
+    </div>
+  )
+
   return (
-    <div key={id}>
+    // data-id for debug the item message is right
+    <div key={id} data-id={id}>
       <div className='flex items-start'>
         {
           answerIcon || (
@@ -220,20 +255,7 @@ const Answer: FC<IAnswerProps> = ({
           <div className={`${s.answerWrap} ${showEdit ? 'w-full' : ''}`}>
             <div className={`${s.answer} relative text-sm text-gray-900`}>
               <div className={'ml-2 py-3 px-4 bg-gray-100 rounded-tr-2xl rounded-b-2xl'}>
-                {item.isOpeningStatement && (
-                  <div className='flex items-center mb-1 gap-1'>
-                    <OpeningStatementIcon />
-                    <div className='text-xs text-gray-500'>{t('appDebug.openingStatement.title')}</div>
-                  </div>
-                )}
-                {(thoughts && thoughts.length > 0) && (
-                  <Thought
-                    list={thoughts || []}
-                    isThinking={isThinking}
-                    dataSets={dataSets}
-                  />
-                )}
-                {(isResponsing && !content)
+                {(isResponsing && (isAgentMode ? (!content && (agent_thoughts || []).length === 0) : !content))
                   ? (
                     <div className='flex items-center justify-center w-6 h-5'>
                       <LoadingAnim type='text' />
@@ -241,29 +263,54 @@ const Answer: FC<IAnswerProps> = ({
                   )
                   : (
                     <div>
+
                       {annotation?.logAnnotation && (
                         <div className='mb-1'>
                           <div className='mb-3'>
-                            <Markdown className='line-through !text-gray-400' content={content} />
+                            {isAgentMode
+                              ? (<div className='line-through !text-gray-400'>{agentModeAnswer}</div>)
+                              : (
+                                <Markdown className='line-through !text-gray-400' content={content} />
+                              )}
                           </div>
                           <EditTitle title={t('appAnnotation.editBy', {
                             author: annotation?.logAnnotation.account?.name,
                           })} />
                         </div>
                       )}
-
                       <div>
-                        <Markdown content={annotation?.logAnnotation ? annotation?.logAnnotation.content : content} />
+                        {annotation?.logAnnotation
+                          ? (
+                            <Markdown content={annotation?.logAnnotation.content || ''} />
+                          )
+                          : (isAgentMode
+                            ? agentModeAnswer
+                            : (
+                              <Markdown content={content} />
+                            ))}
                       </div>
                       {(hasAnnotation && !annotation?.logAnnotation) && (
                         <EditTitle className='mt-1' title={t('appAnnotation.editBy', {
                           author: annotation.authorName,
                         })} />
                       )}
+                      {item.isOpeningStatement && item.suggestedQuestions && item.suggestedQuestions.length > 0 && (
+                        <div className='flex flex-wrap'>
+                          {item.suggestedQuestions.map((question, index) => (
+                            <div
+                              key={index}
+                              className='mt-1 mr-1 max-w-full last:mr-0 shrink-0 py-[5px] leading-[18px] items-center px-4 rounded-lg border border-gray-200 shadow-xs bg-white text-xs font-medium text-primary-600 cursor-pointer'
+                              onClick={() => onQueryChange(question)}
+                            >
+                              {question}
+                            </div>),
+                          )}
+                        </div>
+                      )}
                     </div>
                   )}
                 {
-                  !!citation?.length && !isThinking && isShowCitation && !isResponsing && (
+                  !!citation?.length && isShowCitation && !isResponsing && (
                     <Citation data={citation} showHitInfo={isShowCitationHitInfo} />
                   )
                 }
diff --git a/web/app/components/app/chat/index.tsx b/web/app/components/app/chat/index.tsx
index 9f0b89c8de..bbeebf9c4e 100644
--- a/web/app/components/app/chat/index.tsx
+++ b/web/app/components/app/chat/index.tsx
@@ -25,6 +25,7 @@ import ImageList from '@/app/components/base/image-uploader/image-list'
 import { TransferMethod, type VisionFile, type VisionSettings } from '@/types/app'
 import { useClipboardUploader, useDraggableUploader, useImageFiles } from '@/app/components/base/image-uploader/hooks'
 import type { Annotation } from '@/models/log'
+import type { Emoji } from '@/app/components/tools/types'
 
 export type IChatProps = {
   appId?: string
@@ -43,6 +44,8 @@ export type IChatProps = {
   isHideSendInput?: boolean
   onFeedback?: FeedbackFunc
   checkCanSend?: () => boolean
+  query?: string
+  onQueryChange?: (query: string) => void
   onSend?: (message: string, files: VisionFile[]) => void
   displayScene?: DisplayScene
   useCurrentUserAvatar?: boolean
@@ -62,12 +65,14 @@ export type IChatProps = {
   isShowPromptLog?: boolean
   visionConfig?: VisionSettings
   supportAnnotation?: boolean
+  allToolIcons?: Record<string, string | Emoji>
 }
 
 const Chat: FC<IChatProps> = ({
   configElem,
   chatList,
-
+  query = '',
+  onQueryChange = () => { },
   feedbackDisabled = false,
   isHideFeedbackEdit = false,
   isHideSendInput = false,
@@ -94,6 +99,7 @@ const Chat: FC<IChatProps> = ({
   appId,
   supportAnnotation,
   onChatListChange,
+  allToolIcons,
 }) => {
   const { t } = useTranslation()
   const { notify } = useContext(ToastContext)
@@ -110,18 +116,18 @@ const Chat: FC<IChatProps> = ({
   const { onDragEnter, onDragLeave, onDragOver, onDrop, isDragActive } = useDraggableUploader<HTMLTextAreaElement>({ onUpload, files, visionConfig })
   const isUseInputMethod = useRef(false)
 
-  const [query, setQuery] = React.useState('')
   const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const value = e.target.value
-    setQuery(value)
+    onQueryChange(value)
   }
 
   const logError = (message: string) => {
     notify({ type: 'error', message, duration: 3000 })
   }
 
-  const valid = () => {
-    if (!query || query.trim() === '') {
+  const valid = (q?: string) => {
+    const sendQuery = q || query
+    if (!sendQuery || sendQuery.trim() === '') {
       logError('Message cannot be empty')
       return false
     }
@@ -130,13 +136,13 @@ const Chat: FC<IChatProps> = ({
 
   useEffect(() => {
     if (controlClearQuery)
-      setQuery('')
+      onQueryChange('')
   }, [controlClearQuery])
 
-  const handleSend = () => {
-    if (!valid() || (checkCanSend && !checkCanSend()))
+  const handleSend = (q?: string) => {
+    if (!valid(q) || (checkCanSend && !checkCanSend()))
       return
-    onSend(query, files.filter(file => file.progress !== -1).map(fileItem => ({
+    onSend(q || query, files.filter(file => file.progress !== -1).map(fileItem => ({
       type: 'image',
       transfer_method: fileItem.type,
       url: fileItem.url,
@@ -146,7 +152,7 @@ const Chat: FC<IChatProps> = ({
       if (files.length)
         onClear()
       if (!isResponsing)
-        setQuery('')
+        onQueryChange('')
     }
   }
 
@@ -162,14 +168,14 @@ const Chat: FC<IChatProps> = ({
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     isUseInputMethod.current = e.nativeEvent.isComposing
     if (e.code === 'Enter' && !e.shiftKey) {
-      setQuery(query.replace(/\n$/, ''))
+      onQueryChange(query.replace(/\n$/, ''))
       e.preventDefault()
     }
   }
 
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
-  const sendBtn = <div className={cn(!(!query || query.trim() === '') && s.sendBtnActive, `${s.sendBtn} w-8 h-8 cursor-pointer rounded-md`)} onClick={handleSend}></div>
+  const sendBtn = <div className={cn(!(!query || query.trim() === '') && s.sendBtnActive, `${s.sendBtn} w-8 h-8 cursor-pointer rounded-md`)} onClick={() => handleSend()}></div>
 
   const suggestionListRef = useRef<HTMLDivElement>(null)
   const [hasScrollbar, setHasScrollbar] = useState(false)
@@ -198,21 +204,21 @@ const Chat: FC<IChatProps> = ({
         {chatList.map((item, index) => {
           if (item.isAnswer) {
             const isLast = item.id === chatList[chatList.length - 1].id
-            const thoughts = item.agent_thoughts?.filter(item => item.thought !== '[DONE]')
             const citation = item.citation
-            const isThinking = !item.content && item.agent_thoughts && item.agent_thoughts?.length > 0 && !item.agent_thoughts.some(item => item.thought === '[DONE]')
             return <Answer
               key={item.id}
               item={item}
+              onQueryChange={(val) => {
+                onQueryChange(val)
+                handleSend(val)
+              }}
               feedbackDisabled={feedbackDisabled}
               isHideFeedbackEdit={isHideFeedbackEdit}
               onFeedback={onFeedback}
               displayScene={displayScene ?? 'web'}
               isResponsing={isResponsing && isLast}
               answerIcon={answerIcon}
-              thoughts={thoughts}
               citation={citation}
-              isThinking={isThinking}
               dataSets={dataSets}
               isShowCitation={isShowCitation}
               isShowCitationHitInfo={isShowCitationHitInfo}
@@ -285,7 +291,7 @@ const Chat: FC<IChatProps> = ({
                   return item
                 }))
               }}
-
+              allToolIcons={allToolIcons}
             />
           }
           return (
@@ -308,7 +314,7 @@ const Chat: FC<IChatProps> = ({
         !isHideSendInput && (
           <div className={cn(!feedbackDisabled && '!left-3.5 !right-3.5', 'absolute z-10 bottom-0 left-0 right-0')}>
             {/* Thinking is sync and can not be stopped */}
-            {(isResponsing && canStopResponsing && !!chatList[chatList.length - 1]?.content) && (
+            {(isResponsing && canStopResponsing && ((!!chatList[chatList.length - 1]?.content) || (chatList[chatList.length - 1]?.agent_thoughts && chatList[chatList.length - 1].agent_thoughts!.length > 0))) && (
               <div className='flex justify-center mb-4'>
                 <Button className='flex items-center space-x-1 bg-white' onClick={() => abortResponsing?.()}>
                   {stopIcon}
@@ -339,7 +345,7 @@ const Chat: FC<IChatProps> = ({
                       <div key={item} className='shrink-0 flex justify-center mr-2'>
                         <Button
                           key={index}
-                          onClick={() => setQuery(item)}
+                          onClick={() => onQueryChange(item)}
                         >
                           <span className='text-primary-600 text-xs font-medium'>{item}</span>
                         </Button>
@@ -393,7 +399,7 @@ const Chat: FC<IChatProps> = ({
                 {
                   query
                     ? (
-                      <div className='flex justify-center items-center w-8 h-8 cursor-pointer hover:bg-gray-100 rounded-lg' onClick={() => setQuery('')}>
+                      <div className='flex justify-center items-center w-8 h-8 cursor-pointer hover:bg-gray-100 rounded-lg' onClick={() => onQueryChange('')}>
                         <XCircle className='w-4 h-4 text-[#98A2B3]' />
                       </div>
                     )
@@ -429,7 +435,7 @@ const Chat: FC<IChatProps> = ({
                 voiceInputShow && (
                   <VoiceInput
                     onCancel={() => setVoiceInputShow(false)}
-                    onConverted={text => setQuery(text)}
+                    onConverted={text => onQueryChange(text)}
                   />
                 )
               }
diff --git a/web/app/components/app/chat/thought/index.tsx b/web/app/components/app/chat/thought/index.tsx
index df0d284813..78551424da 100644
--- a/web/app/components/app/chat/thought/index.tsx
+++ b/web/app/components/app/chat/thought/index.tsx
@@ -1,92 +1,60 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
-import { useTranslation } from 'react-i18next'
-import type { ThoughtItem } from '../type'
-import s from './style.module.css'
-import { DataSet as DataSetIcon, Loading as LodingIcon, Search, ThoughtList, WebReader } from '@/app/components/base/icons/src/public/thought'
-import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
-import type { DataSet } from '@/models/datasets'
+import type { ThoughtItem, ToolInfoInThought } from '../type'
+import Tool from '@/app/components/app/chat/thought/tool'
+import type { Emoji } from '@/app/components/tools/types'
 
 export type IThoughtProps = {
-  list: ThoughtItem[]
-  isThinking?: boolean
-  dataSets?: DataSet[]
+  thought: ThoughtItem
+  allToolIcons: Record<string, string | Emoji>
+  isFinished: boolean
 }
 
-const getIcon = (toolId: string) => {
-  switch (toolId) {
-    case 'dataset':
-      return <DataSetIcon />
-    case 'web_reader':
-      return <WebReader />
-    default:
-      return <Search />
+function getValue(value: string, isValueArray: boolean, index: number) {
+  if (isValueArray) {
+    try {
+      return JSON.parse(value)[index]
+    }
+    catch (e) {
+    }
   }
+  return value
 }
 
 const Thought: FC<IThoughtProps> = ({
-  list,
-  isThinking,
-  dataSets,
+  thought,
+  allToolIcons,
+  isFinished,
 }) => {
-  const { t } = useTranslation()
-  const [isShowDetail, setIsShowDetail] = React.useState(false)
-
-  const getThoughtText = (item: ThoughtItem) => {
+  const [toolNames, isValueArray]: [string[], boolean] = (() => {
     try {
-      const input = JSON.parse(item.tool_input)
-      // dataset
-      if (item.tool.startsWith('dataset-')) {
-        const dataSetId = item.tool.replace('dataset-', '')
-        const datasetName = dataSets?.find(item => item.id === dataSetId)?.name || 'unknown dataset'
-        return t('explore.universalChat.thought.res.dataset').replace('{datasetName}', `<span class="text-gray-700">${datasetName}</span>`)
-      }
-      switch (item.tool) {
-        case 'web_reader':
-          return t(`explore.universalChat.thought.res.webReader.${!input.cursor ? 'normal' : 'hasPageInfo'}`).replace('{url}', `<a href="${input.url}" class="text-[#155EEF]">${input.url}</a>`)
-        case 'google_search':
-          return t('explore.universalChat.thought.res.google', { query: input.query })
-        case 'wikipedia':
-          return t('explore.universalChat.thought.res.wikipedia', { query: input.query })
-        case 'current_datetime':
-          return t('explore.universalChat.thought.res.date')
-        default:
-          return `Unknown tool: ${item.tool}`
-      }
+      if (Array.isArray(JSON.parse(thought.tool)))
+        return [JSON.parse(thought.tool), true]
     }
-    catch (error) {
-      console.error(error)
-      return item
+    catch (e) {
     }
-  }
-  const renderItem = (item: ThoughtItem) => (
-    <div className='flex space-x-1 py-[3px] leading-[18px]' key={item.id}>
-      <div className='flex items-center h-[18px] shrink-0'>{getIcon(item.tool)}</div>
-      <div dangerouslySetInnerHTML={{
-        __html: getThoughtText(item),
-        // item.thought.replace(urlRegex, (url) => {
-        //   return `<a href="${url}" class="text-[#155EEF]">${url}</a>`
-        // }),
-      }}></div>
-    </div>
-  )
+    return [[thought.tool], false]
+  })()
+
+  const toolThoughtList = toolNames.map((toolName, index) => {
+    return {
+      name: toolName,
+      input: getValue(thought.tool_input, isValueArray, index),
+      output: getValue(thought.observation, isValueArray, index),
+      isFinished,
+    }
+  })
+
   return (
-    <div className={cn(s.wrap, !isShowDetail && s.wrapHoverEffect, 'inline-block mb-2 px-2 py-0.5 rounded-md text-xs text-gray-500 font-medium')} >
-      <div className='flex items-center h-6 space-x-1 cursor-pointer' onClick={() => setIsShowDetail(!isShowDetail)} >
-        {!isThinking ? <ThoughtList /> : <div className='animate-spin'><LodingIcon /></div>}
-        <div dangerouslySetInnerHTML= {{
-          __html: isThinking ? getThoughtText(list[list.length - 1]) : (t(`explore.universalChat.thought.${isShowDetail ? 'hide' : 'show'}`) + t('explore.universalChat.thought.processOfThought')),
-        }}
-        ></div>
-        <ChevronDown className={isShowDetail ? 'rotate-180' : '' } />
-      </div>
-      {isShowDetail && (
-        <div>
-          {list.map(item => renderItem(item))}
-        </div>
-      )}
+    <div className='my-2 space-y-2'>
+      {toolThoughtList.map((item: ToolInfoInThought, index) => (
+        <Tool
+          key={index}
+          payload={item}
+          allToolIcons={allToolIcons}
+        />
+      ))}
     </div>
   )
 }
diff --git a/web/app/components/app/chat/thought/panel.tsx b/web/app/components/app/chat/thought/panel.tsx
new file mode 100644
index 0000000000..2b0f1f9970
--- /dev/null
+++ b/web/app/components/app/chat/thought/panel.tsx
@@ -0,0 +1,28 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+type Props = {
+  isRequest: boolean
+  toolName: string
+  content: string
+}
+
+const Panel: FC<Props> = ({
+  isRequest,
+  toolName,
+  content,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='rounded-md bg-gray-100 overflow-hidden border border-black/5'>
+      <div className='flex items-center px-2 py-1 leading-[18px] bg-gray-50 uppercase text-xs font-medium text-gray-500'>
+        {t(`tools.thought.${isRequest ? 'requestTitle' : 'responseTitle'}`)} {toolName}
+      </div>
+      <div className='p-2 border-t border-black/5 leading-4 text-xs text-gray-700'>{content}</div>
+    </div>
+  )
+}
+export default React.memo(Panel)
diff --git a/web/app/components/app/chat/thought/tool.tsx b/web/app/components/app/chat/thought/tool.tsx
new file mode 100644
index 0000000000..322df438b4
--- /dev/null
+++ b/web/app/components/app/chat/thought/tool.tsx
@@ -0,0 +1,103 @@
+'use client'
+import type { FC } from 'react'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import cn from 'classnames'
+import type { ToolInfoInThought } from '../type'
+import Panel from './panel'
+import { Loading02 } from '@/app/components/base/icons/src/vender/line/general'
+import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
+import { CheckCircle } from '@/app/components/base/icons/src/vender/solid/general'
+import { DataSet as DataSetIcon } from '@/app/components/base/icons/src/public/thought'
+import type { Emoji } from '@/app/components/tools/types'
+import AppIcon from '@/app/components/base/app-icon'
+
+type Props = {
+  payload: ToolInfoInThought
+  allToolIcons?: Record<string, string | Emoji>
+}
+
+const getIcon = (toolName: string, allToolIcons: Record<string, string | Emoji>) => {
+  if (toolName.startsWith('dataset-'))
+    return <DataSetIcon className='shrink-0'></DataSetIcon>
+  const icon = allToolIcons[toolName]
+  if (!icon)
+    return null
+  return (
+    typeof icon === 'string'
+      ? (
+        <div
+          className='w-3 h-3 bg-cover bg-center rounded-[3px] shrink-0'
+          style={{
+            backgroundImage: `url(${icon})`,
+          }}
+        ></div>
+      )
+      : (
+        <AppIcon
+          className='rounded-[3px] shrink-0'
+          size='xs'
+          icon={icon?.content}
+          background={icon?.background}
+        />
+      ))
+}
+
+const Tool: FC<Props> = ({
+  payload,
+  allToolIcons = {},
+}) => {
+  const { t } = useTranslation()
+  const { name, input, isFinished, output } = payload
+  const toolName = name.startsWith('dataset-') ? t('dataset.knowledge') : name
+  const [isShowDetail, setIsShowDetail] = useState(false)
+  const icon = getIcon(toolName, allToolIcons) as any
+  return (
+    <div>
+      <div className={cn(!isShowDetail && 'shadow-sm', !isShowDetail && 'inline-block', 'max-w-full overflow-x-auto bg-white rounded-md')}>
+        <div
+          className={cn('flex items-center h-7 px-2 cursor-pointer')}
+          onClick={() => setIsShowDetail(!isShowDetail)}
+        >
+          {!isFinished && (
+            <Loading02 className='w-3 h-3 text-gray-500 animate-spin shrink-0' />
+          )}
+          {isFinished && !isShowDetail && (
+            <CheckCircle className='w-3 h-3 text-[#12B76A] shrink-0' />
+          )}
+          {isFinished && isShowDetail && (
+            icon
+          )}
+          <span className='mx-1 text-xs font-medium text-gray-500 shrink-0'>
+            {t(`tools.thought.${isFinished ? 'used' : 'using'}`)}
+          </span>
+          <span
+            className='text-xs font-medium text-gray-700 truncate'
+            title={toolName}
+          >
+            {toolName}
+          </span>
+          <ChevronDown
+            className={cn(isShowDetail && 'rotate-180', 'ml-1 w-3 h-3 text-gray-500 select-none cursor-pointer shrink-0')}
+          />
+        </div>
+        {isShowDetail && (
+          <div className='border-t border-black/5 p-2 space-y-2 '>
+            <Panel
+              isRequest={true}
+              toolName={toolName}
+              content={input} />
+            {output && (
+              <Panel
+                isRequest={false}
+                toolName={toolName}
+                content={output as string} />
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+export default React.memo(Tool)
diff --git a/web/app/components/app/chat/type.ts b/web/app/components/app/chat/type.ts
index fe34aced3f..3f2e60d376 100644
--- a/web/app/components/app/chat/type.ts
+++ b/web/app/components/app/chat/type.ts
@@ -1,5 +1,6 @@
 import type { Annotation, MessageRating } from '@/models/log'
 import type { VisionFile } from '@/types/app'
+
 export type MessageMore = {
   time: string
   tokens: number
@@ -16,13 +17,25 @@ export type SubmitAnnotationFunc = (messageId: string, content: string) => Promi
 
 export type DisplayScene = 'web' | 'console'
 
+export type ToolInfoInThought = {
+  name: string
+  input: string
+  output: string
+  isFinished: boolean
+}
+
 export type ThoughtItem = {
   id: string
-  tool: string // plugin or dataset
+  tool: string // plugin or dataset. May has multi.
   thought: string
   tool_input: string
   message_id: string
+  observation: string
+  position: number
+  files?: string[]
+  message_files?: VisionFile[]
 }
+
 export type CitationItem = {
   content: string
   data_source_type: string
@@ -41,7 +54,6 @@ export type CitationItem = {
 export type IChatItem = {
   id: string
   content: string
-  agent_thoughts?: ThoughtItem[]
   citation?: CitationItem[]
   /**
    * Specific message type
@@ -66,7 +78,9 @@ export type IChatItem = {
   annotation?: Annotation
   useCurrentUserAvatar?: boolean
   isOpeningStatement?: boolean
+  suggestedQuestions?: string[]
   log?: { role: string; text: string }[]
+  agent_thoughts?: ThoughtItem[]
   message_files?: VisionFile[]
 }
 
diff --git a/web/app/components/app/configuration/base/operation-btn/index.tsx b/web/app/components/app/configuration/base/operation-btn/index.tsx
index 889aafb54d..47b68c3d49 100644
--- a/web/app/components/app/configuration/base/operation-btn/index.tsx
+++ b/web/app/components/app/configuration/base/operation-btn/index.tsx
@@ -3,11 +3,13 @@ import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { PlusIcon } from '@heroicons/react/20/solid'
+import cn from 'classnames'
 
 export type IOperationBtnProps = {
+  className?: string
   type: 'add' | 'edit'
   actionName?: string
-  onClick: () => void
+  onClick?: () => void
 }
 
 const iconMap = {
@@ -19,14 +21,15 @@ const iconMap = {
 }
 
 const OperationBtn: FC<IOperationBtnProps> = ({
+  className,
   type,
   actionName,
-  onClick,
+  onClick = () => { },
 }) => {
   const { t } = useTranslation()
   return (
     <div
-      className='flex items-center rounded-md h-7 px-3 space-x-1 text-gray-700 cursor-pointer hover:bg-gray-200'
+      className={cn(className, 'flex items-center rounded-md h-7 px-3 space-x-1 text-gray-700 cursor-pointer hover:bg-gray-200 select-none')}
       onClick={onClick}>
       <div>
         {iconMap[type]}
diff --git a/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx b/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
index df6255adae..18830f98ff 100644
--- a/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
+++ b/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
@@ -22,6 +22,9 @@ import { AlertCircle } from '@/app/components/base/icons/src/vender/solid/alerts
 import { useModalContext } from '@/context/modal-context'
 import type { ExternalDataTool } from '@/models/common'
 import { useToastContext } from '@/app/components/base/toast'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+import { ADD_EXTERNAL_DATA_TOOL } from '@/app/components/app/configuration/config-var'
+import { INSERT_VARIABLE_VALUE_BLOCK_COMMAND } from '@/app/components/base/prompt-editor/plugins/variable-block'
 
 type Props = {
   type: PromptRole
@@ -49,6 +52,7 @@ const AdvancedPromptInput: FC<Props> = ({
   onHideContextMissingTip,
 }) => {
   const { t } = useTranslation()
+  const { eventEmitter } = useEventEmitterContextContext()
 
   const {
     mode,
@@ -60,7 +64,6 @@ const AdvancedPromptInput: FC<Props> = ({
     dataSets,
     showSelectDataSet,
     externalDataToolsConfig,
-    setExternalDataToolsConfig,
   } = useContext(ConfigContext)
   const { notify } = useToastContext()
   const { setShowExternalDataToolModal } = useModalContext()
@@ -68,7 +71,14 @@ const AdvancedPromptInput: FC<Props> = ({
     setShowExternalDataToolModal({
       payload: {},
       onSaveCallback: (newExternalDataTool: ExternalDataTool) => {
-        setExternalDataToolsConfig([...externalDataToolsConfig, newExternalDataTool])
+        eventEmitter?.emit({
+          type: ADD_EXTERNAL_DATA_TOOL,
+          payload: newExternalDataTool,
+        } as any)
+        eventEmitter?.emit({
+          type: INSERT_VARIABLE_VALUE_BLOCK_COMMAND,
+          payload: newExternalDataTool.variable,
+        } as any)
       },
       onValidateBeforeSaveCallback: (newExternalDataTool: ExternalDataTool) => {
         for (let i = 0; i < promptVariables.length; i++) {
@@ -78,13 +88,6 @@ const AdvancedPromptInput: FC<Props> = ({
           }
         }
 
-        for (let i = 0; i < externalDataToolsConfig.length; i++) {
-          if (externalDataToolsConfig[i].variable === newExternalDataTool.variable) {
-            notify({ type: 'error', message: t('appDebug.varKeyError.keyAlreadyExists', { key: externalDataToolsConfig[i].variable }) })
-            return false
-          }
-        }
-
         return true
       },
     })
@@ -108,7 +111,7 @@ const AdvancedPromptInput: FC<Props> = ({
   }
   const handleBlur = () => {
     const keys = getVars(value)
-    const newPromptVariables = keys.filter(key => !(key in promptVariablesObj) && !externalDataToolsConfig.find(item => item.variable === key)).map(key => getNewVar(key))
+    const newPromptVariables = keys.filter(key => !(key in promptVariablesObj) && !externalDataToolsConfig.find(item => item.variable === key)).map(key => getNewVar(key, ''))
     if (newPromptVariables.length > 0) {
       setNewPromptVariables(newPromptVariables)
       showConfirmAddVar()
@@ -202,13 +205,13 @@ const AdvancedPromptInput: FC<Props> = ({
               onAddContext: showSelectDataSet,
             }}
             variableBlock={{
-              variables: modelConfig.configs.prompt_variables.map(item => ({
+              variables: modelConfig.configs.prompt_variables.filter(item => item.type !== 'api').map(item => ({
                 name: item.name,
                 value: item.key,
               })),
-              externalTools: externalDataToolsConfig.map(item => ({
-                name: item.label!,
-                variableName: item.variable!,
+              externalTools: modelConfig.configs.prompt_variables.filter(item => item.type === 'api').map(item => ({
+                name: item.name,
+                variableName: item.key,
                 icon: item.icon,
                 icon_background: item.icon_background,
               })),
diff --git a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
index 9b0d77d4e7..a5e453c15d 100644
--- a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
+++ b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
@@ -8,7 +8,7 @@ import produce from 'immer'
 import { useContext } from 'use-context-selector'
 import ConfirmAddVar from './confirm-add-var'
 import s from './style.module.css'
-import type { PromptVariable } from '@/models/debug'
+import { PromptMode, type PromptVariable } from '@/models/debug'
 import Tooltip from '@/app/components/base/tooltip'
 import { AppType } from '@/types/app'
 import { getNewVar, getVars } from '@/utils/var'
@@ -21,6 +21,10 @@ import ConfigContext from '@/context/debug-configuration'
 import { useModalContext } from '@/context/modal-context'
 import type { ExternalDataTool } from '@/models/common'
 import { useToastContext } from '@/app/components/base/toast'
+import { ArrowNarrowRight } from '@/app/components/base/icons/src/vender/line/arrows'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+import { ADD_EXTERNAL_DATA_TOOL } from '@/app/components/app/configuration/config-var'
+import { INSERT_VARIABLE_VALUE_BLOCK_COMMAND } from '@/app/components/base/prompt-editor/plugins/variable-block'
 
 export type ISimplePromptInput = {
   mode: AppType
@@ -38,6 +42,7 @@ const Prompt: FC<ISimplePromptInput> = ({
   onChange,
 }) => {
   const { t } = useTranslation()
+  const { eventEmitter } = useEventEmitterContextContext()
   const {
     modelConfig,
     dataSets,
@@ -47,7 +52,9 @@ const Prompt: FC<ISimplePromptInput> = ({
     hasSetBlockStatus,
     showSelectDataSet,
     externalDataToolsConfig,
-    setExternalDataToolsConfig,
+    isAdvancedMode,
+    isAgent,
+    setPromptMode,
   } = useContext(ConfigContext)
   const { notify } = useToastContext()
   const { setShowExternalDataToolModal } = useModalContext()
@@ -55,7 +62,14 @@ const Prompt: FC<ISimplePromptInput> = ({
     setShowExternalDataToolModal({
       payload: {},
       onSaveCallback: (newExternalDataTool: ExternalDataTool) => {
-        setExternalDataToolsConfig([...externalDataToolsConfig, newExternalDataTool])
+        eventEmitter?.emit({
+          type: ADD_EXTERNAL_DATA_TOOL,
+          payload: newExternalDataTool,
+        } as any)
+        eventEmitter?.emit({
+          type: INSERT_VARIABLE_VALUE_BLOCK_COMMAND,
+          payload: newExternalDataTool.variable,
+        } as any)
       },
       onValidateBeforeSaveCallback: (newExternalDataTool: ExternalDataTool) => {
         for (let i = 0; i < promptVariables.length; i++) {
@@ -65,13 +79,6 @@ const Prompt: FC<ISimplePromptInput> = ({
           }
         }
 
-        for (let i = 0; i < externalDataToolsConfig.length; i++) {
-          if (externalDataToolsConfig[i].variable === newExternalDataTool.variable) {
-            notify({ type: 'error', message: t('appDebug.varKeyError.keyAlreadyExists', { key: externalDataToolsConfig[i].variable }) })
-            return false
-          }
-        }
-
         return true
       },
     })
@@ -89,7 +96,7 @@ const Prompt: FC<ISimplePromptInput> = ({
   const [isShowConfirmAddVar, { setTrue: showConfirmAddVar, setFalse: hideConfirmAddVar }] = useBoolean(false)
 
   const handleChange = (newTemplates: string, keys: string[]) => {
-    const newPromptVariables = keys.filter(key => !(key in promptVariablesObj) && !externalDataToolsConfig.find(item => item.variable === key)).map(key => getNewVar(key))
+    const newPromptVariables = keys.filter(key => !(key in promptVariablesObj) && !externalDataToolsConfig.find(item => item.variable === key)).map(key => getNewVar(key, ''))
     if (newPromptVariables.length > 0) {
       setNewPromptVariables(newPromptVariables)
       setNewTemplates(newTemplates)
@@ -138,7 +145,21 @@ const Prompt: FC<ISimplePromptInput> = ({
               </Tooltip>
             )}
           </div>
-          <AutomaticBtn onClick={showAutomaticTrue}/>
+          <div className='flex items-center'>
+            <AutomaticBtn onClick={showAutomaticTrue} />
+            {!isAgent && !isAdvancedMode && (
+              <>
+                <div className='mx-1 w-px h-3.5 bg-black/5'></div>
+                <div
+                  className='flex items-center px-2 space-x-1 leading-[18px] text-xs font-semibold text-[#444CE7] cursor-pointer'
+                  onClick={() => setPromptMode(PromptMode.advanced)}
+                >
+                  <div>{t('appDebug.promptMode.advanced')}</div>
+                  <ArrowNarrowRight className='w-3 h-3'></ArrowNarrowRight>
+                </div>
+              </>
+            )}
+          </div>
         </div>
         <div className='px-4 py-2 min-h-[228px] max-h-[156px] overflow-y-auto bg-white rounded-xl text-sm text-gray-700'>
           <PromptEditor
@@ -155,13 +176,13 @@ const Prompt: FC<ISimplePromptInput> = ({
               onAddContext: showSelectDataSet,
             }}
             variableBlock={{
-              variables: modelConfig.configs.prompt_variables.map(item => ({
+              variables: modelConfig.configs.prompt_variables.filter(item => item.type !== 'api').map(item => ({
                 name: item.name,
                 value: item.key,
               })),
-              externalTools: externalDataToolsConfig.map(item => ({
-                name: item.label!,
-                variableName: item.variable!,
+              externalTools: modelConfig.configs.prompt_variables.filter(item => item.type === 'api').map(item => ({
+                name: item.name,
+                variableName: item.key,
                 icon: item.icon,
                 icon_background: item.icon_background,
               })),
@@ -174,7 +195,7 @@ const Prompt: FC<ISimplePromptInput> = ({
                 user: '',
                 assistant: '',
               },
-              onEditRole: () => {},
+              onEditRole: () => { },
             }}
             queryBlock={{
               show: false,
diff --git a/web/app/components/app/configuration/config-var/config-select/style.module.css b/web/app/components/app/configuration/config-var/config-select/style.module.css
index fb6bca969e..a09d19537d 100644
--- a/web/app/components/app/configuration/config-var/config-select/style.module.css
+++ b/web/app/components/app/configuration/config-var/config-select/style.module.css
@@ -13,8 +13,6 @@
 }
 
 .inputWrap:hover {
-  border-color: #FEE4E2;
-  background-color: #FFFBFA;
   box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
 }
 
diff --git a/web/app/components/app/configuration/config-var/index.tsx b/web/app/components/app/configuration/config-var/index.tsx
index bbeca55f9f..671ff9746e 100644
--- a/web/app/components/app/configuration/config-var/index.tsx
+++ b/web/app/components/app/configuration/config-var/index.tsx
@@ -2,16 +2,15 @@
 import type { FC } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Cog8ToothIcon, TrashIcon } from '@heroicons/react/24/outline'
 import { useBoolean } from 'ahooks'
 import type { Timeout } from 'ahooks/lib/useRequest/src/types'
 import { useContext } from 'use-context-selector'
 import Panel from '../base/feature-panel'
-import OperationBtn from '../base/operation-btn'
 import EditModal from './config-modal'
 import IconTypeIcon from './input-type-icon'
 import type { IInputTypeIconProps } from './input-type-icon'
 import s from './style.module.css'
+import SelectVarType from './select-var-type'
 import { BracketsX as VarIcon } from '@/app/components/base/icons/src/vender/line/development'
 import Tooltip from '@/app/components/base/tooltip'
 import type { PromptVariable } from '@/models/debug'
@@ -19,10 +18,25 @@ import { DEFAULT_VALUE_MAX_LEN, getMaxVarNameLength } from '@/config'
 import { checkKeys, getNewVar } from '@/utils/var'
 import Switch from '@/app/components/base/switch'
 import Toast from '@/app/components/base/toast'
-import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
+import { HelpCircle, Settings01, Trash03 } from '@/app/components/base/icons/src/vender/line/general'
 import ConfirmModal from '@/app/components/base/confirm/common'
 import ConfigContext from '@/context/debug-configuration'
 import { AppType } from '@/types/app'
+import type { ExternalDataTool } from '@/models/common'
+import { useModalContext } from '@/context/modal-context'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+
+export const ADD_EXTERNAL_DATA_TOOL = 'ADD_EXTERNAL_DATA_TOOL'
+
+type ExternalDataToolParams = {
+  key: string
+  type: string
+  index: number
+  name: string
+  config?: Record<string, any>
+  icon?: string
+  icon_background?: string
+}
 
 export type IConfigVarProps = {
   promptVariables: PromptVariable[]
@@ -37,17 +51,11 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
   const {
     mode,
     dataSets,
+    externalDataToolsConfig,
   } = useContext(ConfigContext)
+  const { eventEmitter } = useEventEmitterContextContext()
 
   const hasVar = promptVariables.length > 0
-  const promptVariableObj = (() => {
-    const obj: Record<string, boolean> = {}
-    promptVariables.forEach((item) => {
-      obj[item.key] = true
-    })
-    return obj
-  })()
-
   const updatePromptVariable = (key: string, updateKey: string, newValue: string | boolean) => {
     const newPromptVariables = promptVariables.map((item) => {
       if (item.key === key) {
@@ -131,11 +139,89 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
     onPromptVariablesChange?.(newPromptVariables)
   }
 
-  const handleAddVar = () => {
-    const newVar = getNewVar('')
-    onPromptVariablesChange?.([...promptVariables, newVar])
+  const { setShowExternalDataToolModal } = useModalContext()
+
+  const handleOpenExternalDataToolModal = (
+    { key, type, index, name, config, icon, icon_background }: ExternalDataToolParams,
+    oldPromptVariables: PromptVariable[],
+  ) => {
+    setShowExternalDataToolModal({
+      payload: {
+        variable: key,
+        label: name,
+        config,
+        icon,
+        icon_background,
+      },
+      onSaveCallback: (newExternalDataTool: ExternalDataTool) => {
+        const newPromptVariables = oldPromptVariables.map((item, i) => {
+          if (i === index) {
+            return {
+              key: newExternalDataTool.variable as string,
+              name: newExternalDataTool.label as string,
+              enabled: newExternalDataTool.enabled,
+              type: newExternalDataTool.type as string,
+              config: newExternalDataTool.config,
+              required: item.required,
+              icon: newExternalDataTool.icon,
+              icon_background: newExternalDataTool.icon_background,
+            }
+          }
+          return item
+        })
+        onPromptVariablesChange?.(newPromptVariables)
+      },
+      onCancelCallback: () => {
+        if (!key)
+          onPromptVariablesChange?.(promptVariables.filter((_, i) => i !== index))
+      },
+      onValidateBeforeSaveCallback: (newExternalDataTool: ExternalDataTool) => {
+        for (let i = 0; i < promptVariables.length; i++) {
+          if (promptVariables[i].key === newExternalDataTool.variable && i !== index) {
+            Toast.notify({ type: 'error', message: t('appDebug.varKeyError.keyAlreadyExists', { key: promptVariables[i].key }) })
+            return false
+          }
+        }
+
+        return true
+      },
+    })
   }
 
+  const handleAddVar = (type: string) => {
+    const newVar = getNewVar('', type)
+    const newPromptVariables = [...promptVariables, newVar]
+    onPromptVariablesChange?.(newPromptVariables)
+
+    if (type === 'api') {
+      handleOpenExternalDataToolModal({
+        type,
+        key: newVar.key,
+        name: newVar.name,
+        index: promptVariables.length,
+      }, newPromptVariables)
+    }
+  }
+
+  eventEmitter?.useSubscription((v: any) => {
+    if (v.type === ADD_EXTERNAL_DATA_TOOL) {
+      const payload = v.payload
+      onPromptVariablesChange?.([
+        ...promptVariables,
+        {
+          key: payload.variable as string,
+          name: payload.label as string,
+          enabled: payload.enabled,
+          type: payload.type as string,
+          config: payload.config,
+          required: true,
+          icon: payload.icon,
+          icon_background: payload.icon_background,
+        },
+      ])
+    }
+  })
+
   const [isShowDeleteContextVarModal, { setTrue: showDeleteContextVarModal, setFalse: hideDeleteContextVarModal }] = useBoolean(false)
   const [removeIndex, setRemoveIndex] = useState<number | null>(null)
   const didRemoveVar = (index: number) => {
@@ -156,16 +242,21 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
   const [currKey, setCurrKey] = useState<string | null>(null)
   const currItem = currKey ? promptVariables.find(item => item.key === currKey) : null
   const [isShowEditModal, { setTrue: showEditModal, setFalse: hideEditModal }] = useBoolean(false)
-  const handleConfig = (key: string) => {
+
+  const handleConfig = ({ key, type, index, name, config, icon, icon_background }: ExternalDataToolParams) => {
     setCurrKey(key)
+    if (type === 'api') {
+      handleOpenExternalDataToolModal({ key, type, index, name, config, icon, icon_background }, promptVariables)
+      return
+    }
+
     showEditModal()
   }
-
   return (
     <Panel
       className="mt-4"
       headerIcon={
-        <VarIcon className='w-4 h-4 text-primary-500'/>
+        <VarIcon className='w-4 h-4 text-primary-500' />
       }
       title={
         <div className='flex items-center'>
@@ -179,7 +270,7 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
           )}
         </div>
       }
-      headerRight={!readonly ? <OperationBtn type="add" onClick={handleAddVar} /> : null}
+      headerRight={!readonly ? <SelectVarType onChange={handleAddVar} /> : null}
     >
       {!hasVar && (
         <div className='pt-2 pb-1 text-xs text-gray-500'>{t('appDebug.notSetVar')}</div>
@@ -201,7 +292,7 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
               </tr>
             </thead>
             <tbody className="text-gray-700">
-              {promptVariables.map(({ key, name, type, required }, index) => (
+              {promptVariables.map(({ key, name, type, required, config, icon, icon_background }, index) => (
                 <tr key={index} className="h-9 leading-9">
                   <td className="w-[160px] border-b border-gray-100 pl-3">
                     <div className='flex items-center space-x-1'>
@@ -247,11 +338,11 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
                       </td>
                       <td className='w-20  border-b border-gray-100'>
                         <div className='flex h-full items-center space-x-1'>
-                          <div className='flex items-center justify-items-center w-6 h-6 text-gray-500 cursor-pointer' onClick={() => handleConfig(key)}>
-                            <Cog8ToothIcon width={16} height={16} />
+                          <div className=' p-1 rounded-md hover:bg-black/5 w-6 h-6 cursor-pointer' onClick={() => handleConfig({ type, key, index, name, config, icon, icon_background })}>
+                            <Settings01 className='w-4 h-4 text-gray-500' />
                           </div>
-                          <div className='flex items-center justify-items-center w-6 h-6 text-gray-500 cursor-pointer' onClick={() => handleRemoveVar(index)} >
-                            <TrashIcon width={16} height={16} />
+                          <div className=' p-1 rounded-md hover:bg-black/5 w-6 h-6 cursor-pointer' onClick={() => handleRemoveVar(index)} >
+                            <Trash03 className='w-4 h-4 text-gray-500' />
                           </div>
                         </div>
                       </td>
diff --git a/web/app/components/app/configuration/config-var/input-type-icon.tsx b/web/app/components/app/configuration/config-var/input-type-icon.tsx
index c5c8ae02b9..ab5f7f805e 100644
--- a/web/app/components/app/configuration/config-var/input-type-icon.tsx
+++ b/web/app/components/app/configuration/config-var/input-type-icon.tsx
@@ -3,6 +3,7 @@ import React from 'react'
 import type { FC } from 'react'
 import { Paragraph, TypeSquare } from '@/app/components/base/icons/src/vender/solid/editor'
 import { CheckDone01 } from '@/app/components/base/icons/src/vender/solid/general'
+import { ApiConnection } from '@/app/components/base/icons/src/vender/solid/development'
 
 export type IInputTypeIconProps = {
   type: 'string' | 'select'
@@ -21,6 +22,9 @@ const IconMap = (type: IInputTypeIconProps['type'], className: string) => {
     select: (
       <CheckDone01 className={classNames} />
     ),
+    api: (
+      <ApiConnection className={classNames} />
+    ),
   }
 
   return icons[type]
diff --git a/web/app/components/app/configuration/config-var/select-var-type.tsx b/web/app/components/app/configuration/config-var/select-var-type.tsx
new file mode 100644
index 0000000000..94e034b3c4
--- /dev/null
+++ b/web/app/components/app/configuration/config-var/select-var-type.tsx
@@ -0,0 +1,76 @@
+'use client'
+import type { FC } from 'react'
+import React, { useState } from 'react'
+import cn from 'classnames'
+import { useTranslation } from 'react-i18next'
+import OperationBtn from '@/app/components/app/configuration/base/operation-btn'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import { Paragraph, TypeSquare } from '@/app/components/base/icons/src/vender/solid/editor'
+import { CheckDone01 } from '@/app/components/base/icons/src/vender/solid/general'
+import { ApiConnection } from '@/app/components/base/icons/src/vender/solid/development'
+type Props = {
+  onChange: (value: string) => void
+}
+
+type ItemProps = {
+  text: string
+  value: string
+  Icon: any
+  onClick: (value: string) => void
+}
+
+const SelectItem: FC<ItemProps> = ({ text, value, Icon, onClick }) => {
+  return (
+    <div
+      className='flex items-center px-3 h-8 rounded-lg hover:bg-gray-50 cursor-pointer'
+      onClick={() => onClick(value)}
+    >
+      <Icon className='w-4 h-4 text-gray-500' />
+      <div className='ml-2 text-xs text-gray-600 truncate'>{text}</div>
+    </div>
+  )
+}
+
+const SelectVarType: FC<Props> = ({
+  onChange,
+}) => {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const handleChange = (value: string) => {
+    onChange(value)
+    setOpen(false)
+  }
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-end'
+      offset={{
+        mainAxis: 8,
+        crossAxis: -2,
+      }}
+    >
+      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
+        <OperationBtn type='add' className={cn(open && 'bg-gray-200')} />
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent style={{ zIndex: 1000 }}>
+        <div className='bg-white border border-gray-200 shadow-lg rounded-lg min-w-[192px]'>
+          <div className='p-1'>
+            <SelectItem Icon={TypeSquare} value='string' text={t('appDebug.variableConig.string')} onClick={handleChange}></SelectItem>
+            <SelectItem Icon={Paragraph} value='paragraph' text={t('appDebug.variableConig.paragraph')} onClick={handleChange}></SelectItem>
+            <SelectItem Icon={CheckDone01} value='select' text={t('appDebug.variableConig.select')} onClick={handleChange}></SelectItem>
+          </div>
+          <div className='h-[1px] bg-gray-100'></div>
+          <div className='p-1'>
+            <SelectItem Icon={ApiConnection} value='api' text={t('appDebug.variableConig.apiBasedVar')} onClick={handleChange}></SelectItem>
+          </div>
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+export default React.memo(SelectVarType)
diff --git a/web/app/components/app/configuration/config/agent/agent-setting/index.tsx b/web/app/components/app/configuration/config/agent/agent-setting/index.tsx
new file mode 100644
index 0000000000..8e7ecbacdb
--- /dev/null
+++ b/web/app/components/app/configuration/config/agent/agent-setting/index.tsx
@@ -0,0 +1,156 @@
+'use client'
+import type { FC } from 'react'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import ItemPanel from './item-panel'
+import Button from '@/app/components/base/button'
+import { XClose } from '@/app/components/base/icons/src/vender/line/general'
+import { CuteRobote } from '@/app/components/base/icons/src/vender/solid/communication'
+import { Unblur } from '@/app/components/base/icons/src/vender/solid/education'
+import Slider from '@/app/components/base/slider'
+import type { AgentConfig } from '@/models/debug'
+import { DEFAULT_AGENT_PROMPT } from '@/config'
+
+type Props = {
+  isChatModel: boolean
+  payload: AgentConfig
+  isFunctionCall: boolean
+  onCancel: () => void
+  onSave: (payload: any) => void
+}
+
+const maxIterationsMin = 1
+const maxIterationsMax = 5
+
+const AgentSetting: FC<Props> = ({
+  isChatModel,
+  payload,
+  isFunctionCall,
+  onCancel,
+  onSave,
+}) => {
+  const { t } = useTranslation()
+  const [tempPayload, setTempPayload] = useState(payload)
+  const handleSave = () => {
+    onSave(tempPayload)
+  }
+
+  return (
+    <div className='fixed z-[100] inset-0 overflow-hidden flex justify-end p-2'
+      style={{
+        backgroundColor: 'rgba(16, 24, 40, 0.20)',
+      }}
+    >
+      <div
+        className='w-[640px] flex flex-col h-full overflow-hidden bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl'
+      >
+        <div className='shrink-0 flex justify-between items-center pl-6 pr-5 h-14 border-b border-b-gray-100'>
+          <div className='flex flex-col text-base font-semibold text-gray-900'>
+            <div className='leading-6'>{t('appDebug.agent.setting.name')}</div>
+          </div>
+          <div className='flex items-center'>
+            <div
+              onClick={onCancel}
+              className='flex justify-center items-center w-6 h-6 cursor-pointer'
+            >
+              <XClose className='w-4 h-4 text-gray-500' />
+            </div>
+          </div>
+        </div>
+        {/* Body */}
+        <div className='grow p-6 pt-5 border-b overflow-y-auto pb-[68px]' style={{
+          borderBottom: 'rgba(0, 0, 0, 0.05)',
+        }}>
+          {/* Agent Mode */}
+          <ItemPanel
+            className='mb-4'
+            icon={
+              <CuteRobote className='w-4 h-4 text-indigo-600' />
+            }
+            name={t('appDebug.agent.agentMode')}
+            description={t('appDebug.agent.agentModeDes')}
+          >
+            <div className='leading-[18px] text-[13px] font-medium text-gray-900'>{isFunctionCall ? t('appDebug.agent.agentModeType.functionCall') : t('appDebug.agent.agentModeType.ReACT')}</div>
+          </ItemPanel>
+
+          <ItemPanel
+            className='mb-4'
+            icon={
+              <Unblur className='w-4 h-4 text-[#FB6514]' />
+            }
+            name={t('appDebug.agent.setting.maximumIterations.name')}
+            description={t('appDebug.agent.setting.maximumIterations.description')}
+          >
+            <div className='flex items-center'>
+              <Slider
+                className='mr-3 w-[156px]'
+                min={maxIterationsMin}
+                max={maxIterationsMax}
+                value={tempPayload.max_iteration}
+                onChange={(value) => {
+                  setTempPayload({
+                    ...tempPayload,
+                    max_iteration: value,
+                  })
+                }}
+              />
+
+              <input
+                type="number"
+                min={maxIterationsMin}
+                max={maxIterationsMax} step={1}
+                className="block w-11 h-7 leading-7 rounded-lg border-0 pl-1 px-1.5 bg-gray-100 text-gray-900  placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-primary-600"
+                value={tempPayload.max_iteration}
+                onChange={(e) => {
+                  let value = parseInt(e.target.value, 10)
+                  if (value < maxIterationsMin)
+                    value = maxIterationsMin
+
+                  if (value > maxIterationsMax)
+                    value = maxIterationsMax
+                  setTempPayload({
+                    ...tempPayload,
+                    max_iteration: value,
+                  })
+                }} />
+            </div>
+          </ItemPanel>
+
+          {!isFunctionCall && (
+            <div className='py-2 bg-gray-50 rounded-xl shadow-xs'>
+              <div className='flex items-center h-8 px-4 leading-6 text-sm font-semibold text-gray-700'>{t('tools.builtInPromptTitle')}</div>
+              <div className='h-[396px] px-4 overflow-y-auto leading-5 text-sm font-normal text-gray-700 whitespace-pre-line'>
+                {isChatModel ? DEFAULT_AGENT_PROMPT.chat : DEFAULT_AGENT_PROMPT.completion}
+              </div>
+              <div className='px-4'>
+                <div className='inline-flex items-center h-5 px-1 rounded-md bg-gray-100 leading-[18px] text-xs font-medium text-gray-500'>{(isChatModel ? DEFAULT_AGENT_PROMPT.chat : DEFAULT_AGENT_PROMPT.completion).length}</div>
+              </div>
+            </div>
+          )}
+
+        </div>
+        <div
+          className='sticky z-[5] bottom-0 w-full flex justify-end py-4 px-6 border-t bg-white '
+          style={{
+            borderColor: 'rgba(0, 0, 0, 0.05)',
+          }}
+        >
+          <Button
+            onClick={onCancel}
+            className='mr-2 text-sm font-medium'
+          >
+            {t('common.operation.cancel')}
+          </Button>
+          <Button
+            type='primary'
+            className='text-sm font-medium'
+            onClick={handleSave}
+          >
+            {t('common.operation.save')}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+export default React.memo(AgentSetting)
diff --git a/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx b/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx
new file mode 100644
index 0000000000..3e404ebccd
--- /dev/null
+++ b/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx
@@ -0,0 +1,44 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import cn from 'classnames'
+import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
+import Tooltip from '@/app/components/base/tooltip'
+type Props = {
+  className?: string
+  icon: JSX.Element
+  name: string
+  description: string
+  children: JSX.Element
+}
+
+const ItemPanel: FC<Props> = ({
+  className,
+  icon,
+  name,
+  description,
+  children,
+}) => {
+  return (
+    <div className={cn(className, 'flex justify-between items-center h-12 px-3 rounded-lg bg-gray-50')}>
+      <div className='flex items-center'>
+        {icon}
+        <div className='ml-3 mr-1 leading-6 text-sm font-semibold text-gray-800'>{name}</div>
+        <Tooltip
+          htmlContent={
+            <div className='w-[180px]'>
+              {description}
+            </div>
+          }
+          selector={`agent-setting-tooltip-${name}`}
+        >
+          <HelpCircle className='w-[14px] h-[14px] text-gray-400' />
+        </Tooltip>
+      </div>
+      <div>
+        {children}
+      </div>
+    </div>
+  )
+}
+export default React.memo(ItemPanel)
diff --git a/web/app/components/app/configuration/config/agent/agent-tools/choose-tool/index.tsx b/web/app/components/app/configuration/config/agent/agent-tools/choose-tool/index.tsx
new file mode 100644
index 0000000000..443c08057b
--- /dev/null
+++ b/web/app/components/app/configuration/config/agent/agent-tools/choose-tool/index.tsx
@@ -0,0 +1,77 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useContext } from 'use-context-selector'
+import { useTranslation } from 'react-i18next'
+import produce from 'immer'
+import Tools from '@/app/components/tools'
+import { LOC } from '@/app/components/tools/types'
+import Drawer from '@/app/components/base/drawer-plus'
+import ConfigContext from '@/context/debug-configuration'
+import type { ModelConfig } from '@/models/debug'
+import I18n from '@/context/i18n'
+type Props = {
+  show: boolean
+  onHide: () => void
+  selectedProviderId?: string
+}
+
+const ChooseTool: FC<Props> = ({
+  show,
+  onHide,
+  selectedProviderId,
+}) => {
+  const { t } = useTranslation()
+  const { locale } = useContext(I18n)
+
+  const {
+    modelConfig,
+    setModelConfig,
+  } = useContext(ConfigContext)
+  if (!show)
+    return null
+
+  return (
+    <Drawer
+      isShow
+      onHide={onHide}
+      title={t('tools.addTool') as string}
+      panelClassName='mt-2 !w-[760px]'
+      maxWidthClassName='!max-w-[760px]'
+      height='calc(100vh - 16px)'
+      contentClassName='!bg-gray-100'
+      headerClassName='!border-b-black/5'
+      body={
+        <Tools
+          loc={LOC.app}
+          selectedProviderId={selectedProviderId}
+          onAddTool={(collection, tool) => {
+            const parameters: Record<string, string> = {}
+            if (tool.parameters) {
+              tool.parameters.forEach((item) => {
+                parameters[item.name] = ''
+              })
+            }
+
+            const nexModelConfig = produce(modelConfig, (draft: ModelConfig) => {
+              draft.agentConfig.tools.push({
+                provider_id: collection.id || collection.name,
+                provider_type: collection.type,
+                provider_name: collection.name,
+                tool_name: tool.name,
+                tool_label: tool.label[locale === 'en' ? 'en_US' : 'zh_Hans'],
+                tool_parameters: parameters,
+                enabled: true,
+              })
+            })
+            setModelConfig(nexModelConfig)
+          }}
+          addedTools={(modelConfig?.agentConfig?.tools as any) || []}
+        />
+      }
+      isShowMask={true}
+      clickOutsideNotOpen={false}
+    />
+  )
+}
+export default React.memo(ChooseTool)
diff --git a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
new file mode 100644
index 0000000000..b476588fa1
--- /dev/null
+++ b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
@@ -0,0 +1,216 @@
+'use client'
+import type { FC } from 'react'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+import { useContext } from 'use-context-selector'
+import produce from 'immer'
+import ChooseTool from './choose-tool'
+import SettingBuiltInTool from './setting-built-in-tool'
+import Panel from '@/app/components/app/configuration/base/feature-panel'
+import Tooltip from '@/app/components/base/tooltip'
+import { HelpCircle, InfoCircle, Trash03 } from '@/app/components/base/icons/src/vender/line/general'
+import OperationBtn from '@/app/components/app/configuration/base/operation-btn'
+import { ToolsActive } from '@/app/components/base/icons/src/public/header-nav/tools'
+import AppIcon from '@/app/components/base/app-icon'
+import Switch from '@/app/components/base/switch'
+import ConfigContext from '@/context/debug-configuration'
+import type { AgentTool } from '@/types/app'
+import { type Collection, CollectionType } from '@/app/components/tools/types'
+import { MAX_TOOLS_NUM } from '@/config'
+import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
+import TooltipPlus from '@/app/components/base/tooltip-plus'
+import { DefaultToolIcon } from '@/app/components/base/icons/src/public/other'
+
+type AgentToolWithMoreInfo = AgentTool & { icon: any; collection?: Collection } | null
+const AgentTools: FC = () => {
+  const { t } = useTranslation()
+  const [isShowChooseTool, setIsShowChooseTool] = useState(false)
+  const { modelConfig, setModelConfig, collectionList } = useContext(ConfigContext)
+
+  const [currentTool, setCurrentTool] = useState<AgentToolWithMoreInfo>(null)
+  const [selectedProviderId, setSelectedProviderId] = useState<string | undefined>(undefined)
+  const [isShowSettingTool, setIsShowSettingTool] = useState(false)
+  const tools = (modelConfig?.agentConfig?.tools as AgentTool[] || []).map((item) => {
+    const collection = collectionList.find(collection => collection.id === item.provider_id)
+    const icon = collection?.icon
+    return {
+      ...item,
+      icon,
+      collection,
+    }
+  })
+
+  const handleToolSettingChange = (value: Record<string, any>) => {
+    const newModelConfig = produce(modelConfig, (draft) => {
+      const tool = (draft.agentConfig.tools).find((item: any) => item.provider_id === currentTool?.collection?.id && item.tool_name === currentTool?.tool_name)
+      if (tool)
+        (tool as AgentTool).tool_parameters = value
+    })
+    setModelConfig(newModelConfig)
+    setIsShowSettingTool(false)
+  }
+
+  return (
+    <>
+      <Panel
+        className="mt-4"
+        noBodySpacing={tools.length === 0}
+        headerIcon={
+          <ToolsActive className='w-4 h-4 text-primary-500' />
+        }
+        title={
+          <div className='flex items-center'>
+            <div className='mr-1'>{t('appDebug.agent.tools.name')}</div>
+            <Tooltip htmlContent={<div className='w-[180px]'>
+              {t('appDebug.agent.tools.description')}
+            </div>} selector='config-tools-tooltip'>
+              <HelpCircle className='w-[14px] h-[14px] text-gray-400' />
+            </Tooltip>
+          </div>
+        }
+        headerRight={
+          <div className='flex items-center'>
+            <div className='leading-[18px] text-xs font-normal text-gray-500'>{tools.filter((item: any) => !!item.enabled).length}/{tools.length}&nbsp;{t('appDebug.agent.tools.enabled')}</div>
+            {tools.length < MAX_TOOLS_NUM && (
+              <>
+                <div className='ml-3 mr-1 h-3.5 w-px bg-gray-200'></div>
+                <OperationBtn type="add" onClick={() => {
+                  setSelectedProviderId(undefined)
+                  setIsShowChooseTool(true)
+                }} />
+              </>
+            )}
+          </div>
+        }
+      >
+        <div className='flex items-center flex-wrap justify-between'>
+          {tools.map((item: AgentTool & { icon: any; collection?: Collection }, index) => (
+            <div key={index}
+              className={cn((item.isDeleted || item.notAuthor) ? 'bg-white/50' : 'bg-white', (item.enabled && !item.isDeleted && !item.notAuthor) && 'shadow-xs', index > 1 && 'mt-1', 'group relative flex justify-between items-center last-of-type:mb-0  pl-2.5 py-2 pr-3 w-full  rounded-lg border-[0.5px] border-gray-200 ')}
+              style={{
+                width: 'calc(50% - 2px)',
+              }}
+            >
+              <div className='flex items-center'>
+                {(item.isDeleted || item.notAuthor)
+                  ? (
+                    <DefaultToolIcon className='w-6 h-6' />
+                  )
+                  : (
+                    typeof item.icon === 'string'
+                      ? (
+                        <div
+                          className='w-6 h-6 bg-cover bg-center rounded-md'
+                          style={{
+                            backgroundImage: `url(${item.icon})`,
+                          }}
+                        ></div>
+                      )
+                      : (
+                        <AppIcon
+                          className='rounded-md'
+                          size='tiny'
+                          icon={item.icon?.content}
+                          background={item.icon?.background}
+                        />
+                      ))}
+                <div
+                  title={item.tool_name}
+                  className={cn((item.isDeleted || item.notAuthor) ? 'line-through opacity-50' : 'group-hover:max-w-[70px]', 'ml-2 max-w-[200px]  leading-[18px] text-[13px] font-medium text-gray-800  truncate')}
+                >
+                  {item.tool_label || item.tool_name}
+                </div>
+              </div>
+              <div className='flex items-center'>
+                {(item.isDeleted || item.notAuthor)
+                  ? (
+                    <div className='flex items-center'>
+                      <TooltipPlus
+                        popupContent={t(`tools.${item.isDeleted ? 'toolRemoved' : 'notAuthorized'}`)}
+                      >
+                        <div className='mr-1 p-1 rounded-md hover:bg-black/5  cursor-pointer' onClick={() => {
+                          if (item.notAuthor) {
+                            setSelectedProviderId(item.provider_id)
+                            setIsShowChooseTool(true)
+                          }
+                        }}>
+                          <AlertTriangle className='w-4 h-4 text-[#F79009]' />
+                        </div>
+                      </TooltipPlus>
+
+                      <div className='p-1 rounded-md hover:bg-black/5 cursor-pointer' onClick={() => {
+                        const newModelConfig = produce(modelConfig, (draft) => {
+                          draft.agentConfig.tools.splice(index, 1)
+                        })
+                        setModelConfig(newModelConfig)
+                      }}>
+                        <Trash03 className='w-4 h-4 text-gray-500' />
+                      </div>
+                      <div className='ml-2 mr-3 w-px h-3.5 bg-gray-200'></div>
+                    </div>
+                  )
+                  : (
+                    <div className='hidden group-hover:flex items-center'>
+                      {item.provider_type === CollectionType.builtIn && (
+                        <TooltipPlus
+                          popupContent={t('tools.setBuiltInTools.infoAndSetting')}
+                        >
+                          <div className='mr-1 p-1 rounded-md hover:bg-black/5  cursor-pointer' onClick={() => {
+                            setCurrentTool(item)
+                            setIsShowSettingTool(true)
+                          }}>
+                            <InfoCircle className='w-4 h-4 text-gray-500' />
+                          </div>
+                        </TooltipPlus>
+                      )}
+
+                      <div className='p-1 rounded-md hover:bg-black/5 cursor-pointer' onClick={() => {
+                        const newModelConfig = produce(modelConfig, (draft) => {
+                          draft.agentConfig.tools.splice(index, 1)
+                        })
+                        setModelConfig(newModelConfig)
+                      }}>
+                        <Trash03 className='w-4 h-4 text-gray-500' />
+                      </div>
+                      <div className='ml-2 mr-3 w-px h-3.5 bg-gray-200'></div>
+                    </div>
+                  )}
+                <div className={cn((item.isDeleted || item.notAuthor) && 'opacity-50')}>
+                  <Switch
+                    defaultValue={(item.isDeleted || item.notAuthor) ? false : item.enabled}
+                    disabled={(item.isDeleted || item.notAuthor)}
+                    size='md'
+                    onChange={(enabled) => {
+                      const newModelConfig = produce(modelConfig, (draft) => {
+                        (draft.agentConfig.tools[index] as any).enabled = enabled
+                      })
+                      setModelConfig(newModelConfig)
+                    }} />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div >
+      </Panel >
+      {isShowChooseTool && (
+        <ChooseTool
+          show
+          onHide={() => setIsShowChooseTool(false)}
+          selectedProviderId={selectedProviderId}
+        />
+      )}
+      {
+        isShowSettingTool && (
+          <SettingBuiltInTool
+            toolName={currentTool?.tool_name as string}
+            setting={currentTool?.tool_parameters as any}
+            collection={currentTool?.collection as Collection}
+            onSave={handleToolSettingChange}
+            onHide={() => setIsShowSettingTool(false)}
+          />)
+      }
+    </>
+  )
+}
+export default React.memo(AgentTools)
diff --git a/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx b/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
new file mode 100644
index 0000000000..bb1d60b891
--- /dev/null
+++ b/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
@@ -0,0 +1,192 @@
+'use client'
+import type { FC } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import cn from 'classnames'
+import Drawer from '@/app/components/base/drawer-plus'
+import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
+import { addDefaultValue, toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
+import type { Collection, Tool } from '@/app/components/tools/types'
+import { fetchBuiltInToolList } from '@/service/tools'
+import I18n from '@/context/i18n'
+import Button from '@/app/components/base/button'
+import Loading from '@/app/components/base/loading'
+import { DiagonalDividingLine } from '@/app/components/base/icons/src/public/common'
+
+type Props = {
+  collection: Collection
+  toolName: string
+  setting?: Record<string, any>
+  readonly?: boolean
+  onHide: () => void
+  onSave?: (value: Record<string, any>) => void
+}
+
+const SettingBuiltInTool: FC<Props> = ({
+  collection,
+  toolName,
+  setting = {},
+  readonly,
+  onHide,
+  onSave,
+}) => {
+  const { locale } = useContext(I18n)
+  const { t } = useTranslation()
+
+  const [isLoading, setIsLoading] = useState(true)
+  const [tools, setTools] = useState<Tool[]>([])
+  const currTool = tools.find(tool => tool.name === toolName)
+  const formSchemas = currTool ? toolParametersToFormSchemas(currTool.parameters) : []
+  const infoSchemas = formSchemas.filter((item: any) => item.form === 'llm')
+  const settingSchemas = formSchemas.filter((item: any) => item.form !== 'llm')
+  const hasSetting = settingSchemas.length > 0
+  const [tempSetting, setTempSetting] = useState(setting)
+  const [currType, setCurrType] = useState('info')
+  const isInfoActive = currType === 'info'
+  useEffect(() => {
+    if (!collection)
+      return
+
+    (async () => {
+      setIsLoading(true)
+      try {
+        const list = await fetchBuiltInToolList(collection.name) as Tool[]
+        setTools(list)
+        const currTool = list.find(tool => tool.name === toolName)
+        if (currTool) {
+          const formSchemas = toolParametersToFormSchemas(currTool.parameters)
+          setTempSetting(addDefaultValue(setting, formSchemas))
+        }
+      }
+      catch (e) { }
+      setIsLoading(false)
+    })()
+  }, [collection?.name])
+
+  useEffect(() => {
+    setCurrType((!readonly && hasSetting) ? 'setting' : 'info')
+  }, [hasSetting])
+
+  const isValid = (() => {
+    let valid = true
+    settingSchemas.forEach((item: any) => {
+      if (item.required && !tempSetting[item.name])
+        valid = false
+    })
+    return valid
+  })()
+
+  const infoUI = (
+    <div className='pt-2'>
+      <div className='leading-5 text-sm font-medium text-gray-900'>
+        {t('tools.setBuiltInTools.toolDescription')}
+      </div>
+      <div className='mt-1 leading-[18px] text-xs font-normal text-gray-600'>
+        {currTool?.description[locale === 'en' ? 'en_US' : 'zh_Hans']}
+      </div>
+
+      {infoSchemas.length > 0 && (
+        <div className='mt-6'>
+          <div className='flex items-center mb-4 leading-[18px] text-xs font-semibold text-gray-500 uppercase'>
+            <div className='mr-3'>{t('tools.setBuiltInTools.parameters')}</div>
+            <div className='grow w-0 h-px bg-[#f3f4f6]'></div>
+          </div>
+          <div className='space-y-4'>
+            {infoSchemas.map((item: any, index) => (
+              <div key={index}>
+                <div className='flex items-center space-x-2 leading-[18px]'>
+                  <div className='text-[13px] font-semibold text-gray-900'>{item.label[locale === 'en' ? 'en_US' : 'zh_Hans']}</div>
+                  <div className='text-xs font-medium text-gray-500'>{item.type === 'number-input' ? t('tools.setBuiltInTools.number') : t('tools.setBuiltInTools.string')}</div>
+                  {item.required && (
+                    <div className='text-xs font-medium text-[#EC4A0A]'>{t('tools.setBuiltInTools.required')}</div>
+                  )}
+                </div>
+                {item.human_description && (
+                  <div className='mt-1 leading-[18px] text-xs font-normal text-gray-600'>
+                    {item.human_description?.[locale === 'en' ? 'en_US' : 'zh_Hans']}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+
+  const setttingUI = (
+    <Form
+      value={tempSetting}
+      onChange={setTempSetting}
+      formSchemas={settingSchemas as any}
+      isEditMode={false}
+      showOnVariableMap={{}}
+      validating={false}
+      inputClassName='!bg-gray-50'
+      readonly={readonly}
+    />
+  )
+
+  return (
+    <Drawer
+      isShow
+      onHide={onHide}
+      title={(
+        <div className='flex'>
+          <div
+            className='w-6 h-6 bg-cover bg-center rounded-md'
+            style={{
+              backgroundImage: `url(${collection.icon})`,
+            }}
+          ></div>
+          <div className='ml-2 leading-6 text-base font-semibold text-gray-900'>{currTool?.label[locale === 'en' ? 'en_US' : 'zh_Hans']}</div>
+          {(hasSetting && !readonly) && (<>
+            <DiagonalDividingLine className='mx-4' />
+            <div className='flex space-x-6'>
+              <div
+                className={cn(isInfoActive ? 'text-gray-900 font-semibold' : 'font-normal text-gray-600 cursor-pointer', 'relative text-base')}
+                onClick={() => setCurrType('info')}
+              >
+                {t('tools.setBuiltInTools.info')}
+                {isInfoActive && <div className='absolute left-0 bottom-[-16px] w-full h-0.5 bg-primary-600'></div>}
+              </div>
+              <div className={cn(!isInfoActive ? 'text-gray-900 font-semibold' : 'font-normal text-gray-600 cursor-pointer', 'relative text-base ')}
+                onClick={() => setCurrType('setting')}
+              >
+                {t('tools.setBuiltInTools.setting')}
+                {!isInfoActive && <div className='absolute left-0 bottom-[-16px] w-full h-0.5 bg-primary-600'></div>}
+              </div>
+            </div>
+          </>)}
+        </div>
+      )}
+      panelClassName='mt-[65px] !w-[480px]'
+      maxWidthClassName='!max-w-[480px]'
+      height='calc(100vh - 65px)'
+      headerClassName='!border-b-black/5'
+      body={
+        <div className='h-full pt-3'>
+          {isLoading
+            ? <div className='flex h-full items-center'>
+              <Loading type='app' />
+            </div>
+            : (<div className='flex flex-col h-full'>
+              <div className='grow h-0 overflow-y-auto  px-6'>
+                {isInfoActive ? infoUI : setttingUI}
+              </div>
+              {!readonly && !isInfoActive && (
+                <div className='mt-2 shrink-0 flex justify-end py-4 px-6  space-x-2 rounded-b-[10px] bg-gray-50 border-t border-black/5'>
+                  <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium !text-gray-700' onClick={onHide}>{t('common.operation.cancel')}</Button>
+                  <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium' type='primary' disabled={!isValid} onClick={() => onSave?.(addDefaultValue(tempSetting, formSchemas))}>{t('common.operation.save')}</Button>
+                </div>
+              )}
+            </div>)}
+        </div>
+      }
+      isShowMask={true}
+      clickOutsideNotOpen={false}
+    />
+  )
+}
+export default React.memo(SettingBuiltInTool)
diff --git a/web/app/components/app/configuration/config/agent/prompt-editor.tsx b/web/app/components/app/configuration/config/agent/prompt-editor.tsx
new file mode 100644
index 0000000000..6c2610921f
--- /dev/null
+++ b/web/app/components/app/configuration/config/agent/prompt-editor.tsx
@@ -0,0 +1,141 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import copy from 'copy-to-clipboard'
+import cn from 'classnames'
+import { useContext } from 'use-context-selector'
+import { useTranslation } from 'react-i18next'
+import { Clipboard, ClipboardCheck } from '@/app/components/base/icons/src/vender/line/files'
+import PromptEditor from '@/app/components/base/prompt-editor'
+import type { ExternalDataTool } from '@/models/common'
+import ConfigContext from '@/context/debug-configuration'
+import { useModalContext } from '@/context/modal-context'
+import { useToastContext } from '@/app/components/base/toast'
+
+import s from '@/app/components/app/configuration/config-prompt/style.module.css'
+type Props = {
+  className?: string
+  type: 'first-prompt' | 'next-iteration'
+  value: string
+  onChange: (value: string) => void
+}
+
+const Editor: FC<Props> = ({
+  className,
+  type,
+  value,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+
+  const { notify } = useToastContext()
+
+  const [isCopied, setIsCopied] = React.useState(false)
+  const {
+    modelConfig,
+    hasSetBlockStatus,
+    dataSets,
+    showSelectDataSet,
+    externalDataToolsConfig,
+    setExternalDataToolsConfig,
+  } = useContext(ConfigContext)
+  const promptVariables = modelConfig.configs.prompt_variables
+  const { setShowExternalDataToolModal } = useModalContext()
+  const isFirstPrompt = type === 'first-prompt'
+  const editorHeight = isFirstPrompt ? 'h-[336px]' : 'h-[52px]'
+
+  const handleOpenExternalDataToolModal = () => {
+    setShowExternalDataToolModal({
+      payload: {},
+      onSaveCallback: (newExternalDataTool: ExternalDataTool) => {
+        setExternalDataToolsConfig([...externalDataToolsConfig, newExternalDataTool])
+      },
+      onValidateBeforeSaveCallback: (newExternalDataTool: ExternalDataTool) => {
+        for (let i = 0; i < promptVariables.length; i++) {
+          if (promptVariables[i].key === newExternalDataTool.variable) {
+            notify({ type: 'error', message: t('appDebug.varKeyError.keyAlreadyExists', { key: promptVariables[i].key }) })
+            return false
+          }
+        }
+
+        for (let i = 0; i < externalDataToolsConfig.length; i++) {
+          if (externalDataToolsConfig[i].variable === newExternalDataTool.variable) {
+            notify({ type: 'error', message: t('appDebug.varKeyError.keyAlreadyExists', { key: externalDataToolsConfig[i].variable }) })
+            return false
+          }
+        }
+
+        return true
+      },
+    })
+  }
+  return (
+    <div className={cn(className, s.gradientBorder, 'relative')}>
+      <div className='rounded-xl bg-white'>
+        <div className={cn(s.boxHeader, 'flex justify-between items-center h-11 pt-2 pr-3 pb-1 pl-4 rounded-tl-xl rounded-tr-xl bg-white hover:shadow-xs')}>
+          <div className='text-sm font-semibold uppercase text-indigo-800'>{t(`appDebug.agent.${isFirstPrompt ? 'firstPrompt' : 'nextIteration'}`)}</div>
+          <div className={cn(s.optionWrap, 'items-center space-x-1')}>
+            {!isCopied
+              ? (
+                <Clipboard className='h-6 w-6 p-1 text-gray-500 cursor-pointer' onClick={() => {
+                  copy(value)
+                  setIsCopied(true)
+                }} />
+              )
+              : (
+                <ClipboardCheck className='h-6 w-6 p-1 text-gray-500' />
+              )}
+          </div>
+        </div>
+        <div className={cn(editorHeight, ' px-4 min-h-[102px] overflow-y-auto text-sm text-gray-700')}>
+          <PromptEditor
+            className={editorHeight}
+            value={value}
+            contextBlock={{
+              show: true,
+              selectable: !hasSetBlockStatus.context,
+              datasets: dataSets.map(item => ({
+                id: item.id,
+                name: item.name,
+                type: item.data_source_type,
+              })),
+              onAddContext: showSelectDataSet,
+            }}
+            variableBlock={{
+              variables: modelConfig.configs.prompt_variables.map(item => ({
+                name: item.name,
+                value: item.key,
+              })),
+              externalTools: externalDataToolsConfig.map(item => ({
+                name: item.label!,
+                variableName: item.variable!,
+                icon: item.icon,
+                icon_background: item.icon_background,
+              })),
+              onAddExternalTool: handleOpenExternalDataToolModal,
+            }}
+            historyBlock={{
+              show: false,
+              selectable: false,
+              history: {
+                user: '',
+                assistant: '',
+              },
+              onEditRole: () => { },
+            }}
+            queryBlock={{
+              show: false,
+              selectable: false,
+            }}
+            onChange={onChange}
+            onBlur={() => { }}
+          />
+        </div>
+        <div className='pl-4 pb-2 flex'>
+          <div className="h-[18px] leading-[18px] px-1 rounded-md bg-gray-100 text-xs text-gray-500">{value.length}</div>
+        </div>
+      </div>
+    </div>
+  )
+}
+export default React.memo(Editor)
diff --git a/web/app/components/app/configuration/config/assistant-type-picker/index.tsx b/web/app/components/app/configuration/config/assistant-type-picker/index.tsx
new file mode 100644
index 0000000000..e19e7fffa3
--- /dev/null
+++ b/web/app/components/app/configuration/config/assistant-type-picker/index.tsx
@@ -0,0 +1,165 @@
+'use client'
+import type { FC } from 'react'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+import AgentSetting from '../agent/agent-setting'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import { BubbleText } from '@/app/components/base/icons/src/vender/solid/education'
+import Radio from '@/app/components/base/radio/ui'
+import { ChevronDown } from '@/app/components/base/icons/src/vender/solid/arrows'
+import { CuteRobote } from '@/app/components/base/icons/src/vender/solid/communication'
+import { Settings04 } from '@/app/components/base/icons/src/vender/line/general'
+import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows'
+import type { AgentConfig } from '@/models/debug'
+
+type Props = {
+  value: string
+  disabled: boolean
+  onChange: (value: string) => void
+  isFunctionCall: boolean
+  isChatModel: boolean
+  agentConfig?: AgentConfig
+  onAgentSettingChange: (payload: AgentConfig) => void
+}
+
+type ItemProps = {
+  text: string
+  disabled: boolean
+  value: string
+  isChecked: boolean
+  description: string
+  Icon: any
+  onClick: (value: string) => void
+}
+
+const SelectItem: FC<ItemProps> = ({ text, value, Icon, isChecked, description, onClick, disabled }) => {
+  return (
+    <div
+      className={cn(disabled ? 'opacity-50' : 'cursor-pointer', isChecked ? 'border-[2px] border-indigo-600 shadow-sm' : 'border border-gray-100', 'mb-2 p-3 pr-4 rounded-xl bg-gray-25 hover:bg-gray-50')}
+      onClick={() => !disabled && onClick(value)}
+    >
+      <div className='flex items-center justify-between'>
+        <div className='flex items-center '>
+          <div className='mr-3 p-1 bg-indigo-50 rounded-lg'>
+            <Icon className='w-4 h-4 text-indigo-600' />
+          </div>
+          <div className='leading-5 text-sm font-medium text-gray-900'>{text}</div>
+        </div>
+        <Radio isChecked={isChecked} />
+      </div>
+      <div className='ml-9 leading-[18px] text-xs font-normal text-gray-500'>{description}</div>
+    </div>
+  )
+}
+
+const AssistantTypePicker: FC<Props> = ({
+  value,
+  disabled,
+  onChange,
+  onAgentSettingChange,
+  isFunctionCall,
+  isChatModel,
+  agentConfig,
+}) => {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const handleChange = (chosenValue: string) => {
+    if (value === chosenValue)
+      return
+
+    onChange(chosenValue)
+    if (chosenValue !== 'agent')
+      setOpen(false)
+  }
+  const isAgent = value === 'agent'
+  const [isShowAgentSetting, setIsShowAgentSetting] = useState(false)
+
+  const agentConfigUI = (
+    <>
+      <div className='my-4 h-[1px] bg-gray-100'></div>
+      <div
+        className={cn(isAgent ? 'group cursor-pointer hover:bg-primary-50' : 'opacity-30', 'p-3 pr-4 rounded-xl bg-gray-50 ')}
+        onClick={() => {
+          if (isAgent) {
+            setOpen(false)
+            setIsShowAgentSetting(true)
+          }
+        }}
+      >
+        <div className='flex items-center justify-between'>
+          <div className='flex items-center '>
+            <div className='mr-3 p-1 bg-gray-200 group-hover:bg-white rounded-lg'>
+              <Settings04 className='w-4 h-4 text-gray-600 group-hover:text-[#155EEF]' />
+            </div>
+            <div className='leading-5 text-sm font-medium text-gray-900 group-hover:text-[#155EEF]'>{t('appDebug.agent.setting.name')}</div>
+          </div>
+          <ArrowUpRight className='w-4 h-4 text-gray-500 group-hover:text-[#155EEF]' />
+        </div>
+        <div className='ml-9 leading-[18px] text-xs font-normal text-gray-500'>{t('appDebug.agent.setting.description')}</div>
+      </div>
+    </>
+  )
+  return (
+    <>
+      <PortalToFollowElem
+        open={open}
+        onOpenChange={setOpen}
+        placement='bottom-end'
+        offset={{
+          mainAxis: 8,
+          crossAxis: -2,
+        }}
+      >
+        <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
+          <div className={cn(open && 'bg-gray-50', 'flex items-center h-8 px-3 border border-black/5 rounded-lg cursor-pointer select-none space-x-1 text-indigo-600')}>
+            {isAgent ? <BubbleText className='w-3 h-3' /> : <CuteRobote className='w-3 h-3' />}
+            <div className='text-xs font-medium'>{t(`appDebug.assistantType.${isAgent ? 'agentAssistant' : 'chatAssistant'}.name`)}</div>
+            <ChevronDown className='w-3 h-3' />
+          </div>
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent style={{ zIndex: 1000 }}>
+          <div className='relative left-0.5 p-6 bg-white border border-black/[0.08] shadow-lg rounded-xl w-[480px]'>
+            <div className='mb-2 leading-5 text-sm font-semibold text-gray-900'>{t('appDebug.assistantType.name')}</div>
+            <SelectItem
+              Icon={BubbleText}
+              value='chat'
+              disabled={disabled}
+              text={t('appDebug.assistantType.chatAssistant.name')}
+              description={t('appDebug.assistantType.chatAssistant.description')}
+              isChecked={!isAgent}
+              onClick={handleChange}
+            />
+            <SelectItem
+              Icon={CuteRobote}
+              value='agent'
+              disabled={disabled}
+              text={t('appDebug.assistantType.agentAssistant.name')}
+              description={t('appDebug.assistantType.agentAssistant.description')}
+              isChecked={isAgent}
+              onClick={handleChange}
+            />
+            {!disabled && agentConfigUI}
+          </div>
+        </PortalToFollowElemContent>
+      </PortalToFollowElem>
+      {isShowAgentSetting && (
+        <AgentSetting
+          isFunctionCall={isFunctionCall}
+          payload={agentConfig as AgentConfig}
+          isChatModel={isChatModel}
+          onSave={(payloadNew) => {
+            onAgentSettingChange(payloadNew)
+            setIsShowAgentSetting(false)
+          }}
+          onCancel={() => setIsShowAgentSetting(false)}
+        />
+      )}
+    </>
+  )
+}
+export default React.memo(AssistantTypePicker)
diff --git a/web/app/components/app/configuration/config/automatic/automatic-btn.tsx b/web/app/components/app/configuration/config/automatic/automatic-btn.tsx
index d492ad6839..40a9b9d799 100644
--- a/web/app/components/app/configuration/config/automatic/automatic-btn.tsx
+++ b/web/app/components/app/configuration/config/automatic/automatic-btn.tsx
@@ -9,10 +9,10 @@ export type IAutomaticBtnProps = {
 
 const leftIcon = (
   <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M4.31346 0.905711C4.21464 0.708087 4.01266 0.583252 3.79171 0.583252C3.57076 0.583252 3.36877 0.708087 3.26996 0.905711L2.81236 1.82091C2.64757 2.15048 2.59736 2.24532 2.53635 2.32447C2.47515 2.40386 2.40398 2.47503 2.32459 2.53623C2.24544 2.59724 2.1506 2.64745 1.82103 2.81224L0.905833 3.26984C0.708209 3.36865 0.583374 3.57064 0.583374 3.79159C0.583374 4.01254 0.708209 4.21452 0.905833 4.31333L1.82103 4.77094C2.1506 4.93572 2.24544 4.98593 2.32459 5.04694C2.40398 5.10814 2.47515 5.17931 2.53635 5.2587C2.59736 5.33785 2.64758 5.43269 2.81236 5.76226L3.26996 6.67746C3.36877 6.87508 3.57076 6.99992 3.79171 6.99992C4.01266 6.99992 4.21465 6.87508 4.31346 6.67746L4.77106 5.76226C4.93584 5.43269 4.98605 5.33786 5.04707 5.2587C5.10826 5.17931 5.17943 5.10814 5.25883 5.04694C5.33798 4.98593 5.43282 4.93572 5.76238 4.77094L6.67758 4.31333C6.87521 4.21452 7.00004 4.01254 7.00004 3.79159C7.00004 3.57064 6.87521 3.36865 6.67758 3.26984L5.76238 2.81224C5.43282 2.64745 5.33798 2.59724 5.25883 2.53623C5.17943 2.47503 5.10826 2.40386 5.04707 2.32447C4.98605 2.24532 4.93584 2.15048 4.77106 1.82091L4.31346 0.905711Z" fill="#444CE7"/>
-    <path d="M11.375 1.74992C11.375 1.42775 11.1139 1.16659 10.7917 1.16659C10.4695 1.16659 10.2084 1.42775 10.2084 1.74992V2.62492H9.33337C9.01121 2.62492 8.75004 2.88609 8.75004 3.20825C8.75004 3.53042 9.01121 3.79159 9.33337 3.79159H10.2084V4.66659C10.2084 4.98875 10.4695 5.24992 10.7917 5.24992C11.1139 5.24992 11.375 4.98875 11.375 4.66659V3.79159H12.25C12.5722 3.79159 12.8334 3.53042 12.8334 3.20825C12.8334 2.88609 12.5722 2.62492 12.25 2.62492H11.375V1.74992Z" fill="#444CE7"/>
-    <path d="M3.79171 9.33325C3.79171 9.01109 3.53054 8.74992 3.20837 8.74992C2.88621 8.74992 2.62504 9.01109 2.62504 9.33325V10.2083H1.75004C1.42787 10.2083 1.16671 10.4694 1.16671 10.7916C1.16671 11.1138 1.42787 11.3749 1.75004 11.3749H2.62504V12.2499C2.62504 12.5721 2.88621 12.8333 3.20837 12.8333C3.53054 12.8333 3.79171 12.5721 3.79171 12.2499V11.3749H4.66671C4.98887 11.3749 5.25004 11.1138 5.25004 10.7916C5.25004 10.4694 4.98887 10.2083 4.66671 10.2083H3.79171V9.33325Z" fill="#444CE7"/>
-    <path d="M10.4385 6.73904C10.3396 6.54142 10.1377 6.41659 9.91671 6.41659C9.69576 6.41659 9.49377 6.54142 9.39496 6.73904L8.84014 7.84869C8.67535 8.17826 8.62514 8.27309 8.56413 8.35225C8.50293 8.43164 8.43176 8.50281 8.35237 8.56401C8.27322 8.62502 8.17838 8.67523 7.84881 8.84001L6.73917 9.39484C6.54154 9.49365 6.41671 9.69564 6.41671 9.91659C6.41671 10.1375 6.54154 10.3395 6.73917 10.4383L7.84881 10.9932C8.17838 11.1579 8.27322 11.2082 8.35237 11.2692C8.43176 11.3304 8.50293 11.4015 8.56413 11.4809C8.62514 11.5601 8.67535 11.6549 8.84014 11.9845L9.39496 13.0941C9.49377 13.2918 9.69576 13.4166 9.91671 13.4166C10.1377 13.4166 10.3396 13.2918 10.4385 13.0941L10.9933 11.9845C11.1581 11.6549 11.2083 11.5601 11.2693 11.4809C11.3305 11.4015 11.4017 11.3304 11.481 11.2692C11.5602 11.2082 11.655 11.1579 11.9846 10.9932L13.0942 10.4383C13.2919 10.3395 13.4167 10.1375 13.4167 9.91659C13.4167 9.69564 13.2919 9.49365 13.0942 9.39484L11.9846 8.84001C11.655 8.67523 11.5602 8.62502 11.481 8.56401C11.4017 8.50281 11.3305 8.43164 11.2693 8.35225C11.2083 8.27309 11.1581 8.17826 10.9933 7.84869L10.4385 6.73904Z" fill="#444CE7"/>
+    <path d="M4.31346 0.905711C4.21464 0.708087 4.01266 0.583252 3.79171 0.583252C3.57076 0.583252 3.36877 0.708087 3.26996 0.905711L2.81236 1.82091C2.64757 2.15048 2.59736 2.24532 2.53635 2.32447C2.47515 2.40386 2.40398 2.47503 2.32459 2.53623C2.24544 2.59724 2.1506 2.64745 1.82103 2.81224L0.905833 3.26984C0.708209 3.36865 0.583374 3.57064 0.583374 3.79159C0.583374 4.01254 0.708209 4.21452 0.905833 4.31333L1.82103 4.77094C2.1506 4.93572 2.24544 4.98593 2.32459 5.04694C2.40398 5.10814 2.47515 5.17931 2.53635 5.2587C2.59736 5.33785 2.64758 5.43269 2.81236 5.76226L3.26996 6.67746C3.36877 6.87508 3.57076 6.99992 3.79171 6.99992C4.01266 6.99992 4.21465 6.87508 4.31346 6.67746L4.77106 5.76226C4.93584 5.43269 4.98605 5.33786 5.04707 5.2587C5.10826 5.17931 5.17943 5.10814 5.25883 5.04694C5.33798 4.98593 5.43282 4.93572 5.76238 4.77094L6.67758 4.31333C6.87521 4.21452 7.00004 4.01254 7.00004 3.79159C7.00004 3.57064 6.87521 3.36865 6.67758 3.26984L5.76238 2.81224C5.43282 2.64745 5.33798 2.59724 5.25883 2.53623C5.17943 2.47503 5.10826 2.40386 5.04707 2.32447C4.98605 2.24532 4.93584 2.15048 4.77106 1.82091L4.31346 0.905711Z" fill="#444CE7" />
+    <path d="M11.375 1.74992C11.375 1.42775 11.1139 1.16659 10.7917 1.16659C10.4695 1.16659 10.2084 1.42775 10.2084 1.74992V2.62492H9.33337C9.01121 2.62492 8.75004 2.88609 8.75004 3.20825C8.75004 3.53042 9.01121 3.79159 9.33337 3.79159H10.2084V4.66659C10.2084 4.98875 10.4695 5.24992 10.7917 5.24992C11.1139 5.24992 11.375 4.98875 11.375 4.66659V3.79159H12.25C12.5722 3.79159 12.8334 3.53042 12.8334 3.20825C12.8334 2.88609 12.5722 2.62492 12.25 2.62492H11.375V1.74992Z" fill="#444CE7" />
+    <path d="M3.79171 9.33325C3.79171 9.01109 3.53054 8.74992 3.20837 8.74992C2.88621 8.74992 2.62504 9.01109 2.62504 9.33325V10.2083H1.75004C1.42787 10.2083 1.16671 10.4694 1.16671 10.7916C1.16671 11.1138 1.42787 11.3749 1.75004 11.3749H2.62504V12.2499C2.62504 12.5721 2.88621 12.8333 3.20837 12.8333C3.53054 12.8333 3.79171 12.5721 3.79171 12.2499V11.3749H4.66671C4.98887 11.3749 5.25004 11.1138 5.25004 10.7916C5.25004 10.4694 4.98887 10.2083 4.66671 10.2083H3.79171V9.33325Z" fill="#444CE7" />
+    <path d="M10.4385 6.73904C10.3396 6.54142 10.1377 6.41659 9.91671 6.41659C9.69576 6.41659 9.49377 6.54142 9.39496 6.73904L8.84014 7.84869C8.67535 8.17826 8.62514 8.27309 8.56413 8.35225C8.50293 8.43164 8.43176 8.50281 8.35237 8.56401C8.27322 8.62502 8.17838 8.67523 7.84881 8.84001L6.73917 9.39484C6.54154 9.49365 6.41671 9.69564 6.41671 9.91659C6.41671 10.1375 6.54154 10.3395 6.73917 10.4383L7.84881 10.9932C8.17838 11.1579 8.27322 11.2082 8.35237 11.2692C8.43176 11.3304 8.50293 11.4015 8.56413 11.4809C8.62514 11.5601 8.67535 11.6549 8.84014 11.9845L9.39496 13.0941C9.49377 13.2918 9.69576 13.4166 9.91671 13.4166C10.1377 13.4166 10.3396 13.2918 10.4385 13.0941L10.9933 11.9845C11.1581 11.6549 11.2083 11.5601 11.2693 11.4809C11.3305 11.4015 11.4017 11.3304 11.481 11.2692C11.5602 11.2082 11.655 11.1579 11.9846 10.9932L13.0942 10.4383C13.2919 10.3395 13.4167 10.1375 13.4167 9.91659C13.4167 9.69564 13.2919 9.49365 13.0942 9.39484L11.9846 8.84001C11.655 8.67523 11.5602 8.62502 11.481 8.56401C11.4017 8.50281 11.3305 8.43164 11.2693 8.35225C11.2083 8.27309 11.1581 8.17826 10.9933 7.84869L10.4385 6.73904Z" fill="#444CE7" />
   </svg>
 )
 const AutomaticBtn: FC<IAutomaticBtnProps> = ({
@@ -25,7 +25,7 @@ const AutomaticBtn: FC<IAutomaticBtnProps> = ({
       onClick={onClick}
     >
       {leftIcon}
-      <span className='text-xs font-semibold text-indigo-600 uppercase'>{t('appDebug.operation.automatic')}</span>
+      <span className='text-xs font-semibold text-indigo-600'>{t('appDebug.operation.automatic')}</span>
     </div>
   )
 }
diff --git a/web/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/opening-statement.png b/web/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/opening-statement.png
new file mode 100644
index 0000000000000000000000000000000000000000..51e1bf395e128defda020c47fbb56eeb13047440
GIT binary patch
literal 19955
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
CSZwJ4

literal 0
HcmV?d00001

diff --git a/web/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/opening-statement.svg b/web/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/opening-statement.svg
deleted file mode 100644
index 153382c8ff..0000000000
--- a/web/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/opening-statement.svg
+++ /dev/null
@@ -1,144 +0,0 @@
-<svg width="304" height="384" viewBox="0 0 304 384" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<g filter="url(#filter0_dd_3256_32105)">
-<g clip-path="url(#clip0_3256_32105)">
-<rect x="12" width="280" height="360" rx="12" fill="white"/>
-<mask id="path-2-inside-1_3256_32105" fill="white">
-<path d="M12 0H292V32H12V0Z"/>
-</mask>
-<path d="M12 0H292V32H12V0Z" fill="#F9FAFB"/>
-<rect x="118" y="8" width="16" height="16" rx="4" fill="#D5F5F6"/>
-<path d="M120.833 21.7467H131.5V11.08H120.833V21.7467Z" fill="url(#pattern0)"/>
-<rect x="118.167" y="8.16667" width="15.6667" height="15.6667" rx="3.83333" stroke="black" stroke-opacity="0.05" stroke-width="0.333333"/>
-<g opacity="0.12">
-<rect x="142" y="14" width="44" height="4" rx="2" fill="#101828"/>
-</g>
-<path d="M292 31H12V33H292V31Z" fill="#F2F4F7" mask="url(#path-2-inside-1_3256_32105)"/>
-<rect x="30" y="50" width="30" height="30" rx="15" fill="#D5F5F6"/>
-<path d="M39 70.84H51V58.84H39V70.84Z" fill="url(#pattern1)"/>
-<path d="M72 50H224.8C231.521 50 234.881 50 237.448 51.3079C239.706 52.4584 241.542 54.2942 242.692 56.5521C244 59.1191 244 62.4794 244 69.2V90.8C244 97.5206 244 100.881 242.692 103.448C241.542 105.706 239.706 107.542 237.448 108.692C234.881 110 231.521 110 224.8 110H91.2C84.4794 110 81.1191 110 78.5521 108.692C76.2942 107.542 74.4584 105.706 73.3079 103.448C72 100.881 72 97.5206 72 90.8V50Z" fill="#F2F4F7"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M88.6877 62.25C86.7202 62.25 85.1252 63.845 85.1252 65.8125C85.1252 66.21 85.1904 66.593 85.3111 66.951C85.3323 67.014 85.3448 67.0512 85.3529 67.0787L85.3556 67.088L85.3542 67.0909C85.3446 67.1108 85.3302 67.1375 85.3034 67.1871L84.684 68.3336C84.6456 68.4047 84.6055 68.4788 84.578 68.5432C84.5506 68.6073 84.5062 68.7248 84.5281 68.8641C84.5536 69.0274 84.6498 69.1712 84.7909 69.2572C84.9112 69.3307 85.0368 69.3346 85.1064 69.3338C85.1765 69.333 85.2603 69.3243 85.3406 69.316L87.2737 69.1161C87.3047 69.1129 87.3209 69.1113 87.3327 69.1104L87.3342 69.1103L87.3389 69.1119C87.3535 69.1172 87.3732 69.1247 87.4073 69.1379C87.8052 69.2912 88.2371 69.375 88.6877 69.375C90.6552 69.375 92.2502 67.78 92.2502 65.8125C92.2502 63.845 90.6552 62.25 88.6877 62.25ZM87.3638 64.7183C87.7865 64.3616 88.3491 64.4664 88.6865 64.856C89.0239 64.4664 89.5793 64.3654 90.0093 64.7183C90.4393 65.0713 90.4915 65.6715 90.1595 66.0934C89.9539 66.3548 89.4377 66.8322 89.0746 67.1576C88.9413 67.2771 88.8746 67.3369 88.7946 67.361C88.726 67.3817 88.6471 67.3817 88.5785 67.361C88.4984 67.3369 88.4318 67.2771 88.2984 67.1576C87.9354 66.8322 87.4192 66.3548 87.2135 66.0934C86.8815 65.6715 86.9411 65.0751 87.3638 64.7183Z" fill="#667085"/>
-<path d="M102.405 65.7273C102.405 66.4261 102.277 67.027 102.021 67.5298C101.766 68.0305 101.415 68.4162 100.97 68.6868C100.527 68.9553 100.023 69.0895 99.4581 69.0895C98.8913 69.0895 98.3853 68.9553 97.94 68.6868C97.4968 68.4162 97.1474 68.0295 96.8917 67.5266C96.636 67.0238 96.5082 66.424 96.5082 65.7273C96.5082 65.0284 96.636 64.4286 96.8917 63.9279C97.1474 63.4251 97.4968 63.0394 97.94 62.771C98.3853 62.5004 98.8913 62.3651 99.4581 62.3651C100.023 62.3651 100.527 62.5004 100.97 62.771C101.415 63.0394 101.766 63.4251 102.021 63.9279C102.277 64.4286 102.405 65.0284 102.405 65.7273ZM101.427 65.7273C101.427 65.1946 101.341 64.7461 101.168 64.3817C100.998 64.0153 100.763 63.7383 100.465 63.5508C100.169 63.3612 99.8331 63.2663 99.4581 63.2663C99.081 63.2663 98.7443 63.3612 98.4482 63.5508C98.152 63.7383 97.9176 64.0153 97.745 64.3817C97.5746 64.7461 97.4893 65.1946 97.4893 65.7273C97.4893 66.2599 97.5746 66.7095 97.745 67.076C97.9176 67.4403 98.152 67.7173 98.4482 67.907C98.7443 68.0945 99.081 68.1882 99.4581 68.1882C99.8331 68.1882 100.169 68.0945 100.465 67.907C100.763 67.7173 100.998 67.4403 101.168 67.076C101.341 66.7095 101.427 66.2599 101.427 65.7273ZM103.559 70.8409V64.0909H104.493V64.8867H104.573C104.628 64.7844 104.708 64.6662 104.812 64.532C104.917 64.3977 105.062 64.2805 105.247 64.1804C105.432 64.0781 105.677 64.027 105.982 64.027C106.378 64.027 106.732 64.1271 107.043 64.3274C107.354 64.5277 107.598 64.8164 107.775 65.1935C107.954 65.5707 108.043 66.0245 108.043 66.555C108.043 67.0856 107.955 67.5405 107.778 67.9197C107.601 68.2969 107.358 68.5877 107.049 68.7923C106.741 68.9947 106.388 69.0959 105.992 69.0959C105.693 69.0959 105.449 69.0458 105.26 68.9457C105.072 68.8455 104.925 68.7283 104.819 68.5941C104.712 68.4599 104.63 68.3406 104.573 68.2362H104.515V70.8409H103.559ZM104.496 66.5455C104.496 66.8906 104.546 67.1932 104.646 67.4531C104.746 67.7131 104.891 67.9165 105.081 68.0636C105.27 68.2085 105.503 68.2809 105.777 68.2809C106.063 68.2809 106.302 68.2053 106.493 68.054C106.685 67.9006 106.83 67.6928 106.928 67.4308C107.028 67.1687 107.078 66.8736 107.078 66.5455C107.078 66.2216 107.029 65.9308 106.931 65.6729C106.835 65.4151 106.69 65.2116 106.497 65.0625C106.305 64.9134 106.065 64.8388 105.777 64.8388C105.5 64.8388 105.266 64.9102 105.074 65.0529C104.885 65.1957 104.741 65.3949 104.643 65.6506C104.545 65.9062 104.496 66.2045 104.496 66.5455ZM111.23 69.0991C110.746 69.0991 110.33 68.9957 109.98 68.7891C109.633 68.5803 109.364 68.2873 109.175 67.9102C108.987 67.5309 108.894 67.0866 108.894 66.5774C108.894 66.0746 108.987 65.6314 109.175 65.2479C109.364 64.8643 109.629 64.565 109.967 64.3498C110.308 64.1346 110.707 64.027 111.163 64.027C111.44 64.027 111.708 64.0728 111.968 64.1644C112.228 64.256 112.461 64.3999 112.668 64.5959C112.875 64.7919 113.038 65.0465 113.157 65.3597C113.276 65.6708 113.336 66.049 113.336 66.4943V66.8331H109.434V66.1172H112.4C112.4 65.8658 112.348 65.6431 112.246 65.4492C112.144 65.2532 112 65.0987 111.815 64.9858C111.631 64.8729 111.416 64.8164 111.169 64.8164C110.901 64.8164 110.666 64.8825 110.466 65.0146C110.268 65.1445 110.114 65.315 110.006 65.5259C109.899 65.7347 109.846 65.9616 109.846 66.2067V66.766C109.846 67.0941 109.903 67.3732 110.019 67.6033C110.136 67.8335 110.299 68.0092 110.508 68.1307C110.716 68.25 110.96 68.3097 111.239 68.3097C111.421 68.3097 111.586 68.2841 111.735 68.233C111.884 68.1797 112.013 68.1009 112.122 67.9964C112.23 67.892 112.313 67.7631 112.371 67.6097L113.275 67.7727C113.203 68.0391 113.073 68.2724 112.885 68.4727C112.7 68.6708 112.467 68.8253 112.185 68.9361C111.906 69.0447 111.588 69.0991 111.23 69.0991ZM115.352 66.0852V69H114.396V64.0909H115.314V64.8899H115.374C115.487 64.63 115.664 64.4212 115.905 64.2635C116.148 64.1058 116.453 64.027 116.822 64.027C117.157 64.027 117.45 64.0973 117.701 64.2379C117.952 64.3764 118.147 64.5831 118.286 64.858C118.424 65.1328 118.494 65.4727 118.494 65.8775V69H117.538V65.9925C117.538 65.6367 117.445 65.3587 117.26 65.1584C117.075 64.956 116.82 64.8548 116.496 64.8548C116.275 64.8548 116.077 64.9027 115.905 64.9986C115.734 65.0945 115.599 65.2351 115.499 65.4205C115.401 65.6037 115.352 65.8253 115.352 66.0852ZM119.775 69V64.0909H120.731V69H119.775ZM120.258 63.3335C120.092 63.3335 119.949 63.2781 119.83 63.1673C119.712 63.0543 119.654 62.9201 119.654 62.7646C119.654 62.6069 119.712 62.4727 119.83 62.3619C119.949 62.2489 120.092 62.1925 120.258 62.1925C120.424 62.1925 120.566 62.2489 120.683 62.3619C120.802 62.4727 120.862 62.6069 120.862 62.7646C120.862 62.9201 120.802 63.0543 120.683 63.1673C120.566 63.2781 120.424 63.3335 120.258 63.3335ZM122.972 66.0852V69H122.016V64.0909H122.934V64.8899H122.994C123.107 64.63 123.284 64.4212 123.525 64.2635C123.768 64.1058 124.074 64.027 124.442 64.027C124.777 64.027 125.07 64.0973 125.321 64.2379C125.573 64.3764 125.767 64.5831 125.906 64.858C126.044 65.1328 126.114 65.4727 126.114 65.8775V69H125.158V65.9925C125.158 65.6367 125.065 65.3587 124.88 65.1584C124.695 64.956 124.44 64.8548 124.116 64.8548C123.895 64.8548 123.698 64.9027 123.525 64.9986C123.354 65.0945 123.219 65.2351 123.119 65.4205C123.021 65.6037 122.972 65.8253 122.972 66.0852ZM129.454 70.9432C129.064 70.9432 128.728 70.892 128.447 70.7898C128.168 70.6875 127.94 70.5522 127.763 70.3839C127.586 70.2156 127.454 70.0313 127.367 69.831L128.188 69.4922C128.245 69.5859 128.322 69.685 128.418 69.7894C128.516 69.896 128.648 69.9865 128.814 70.0611C128.983 70.1357 129.199 70.1729 129.463 70.1729C129.825 70.1729 130.125 70.0845 130.361 69.9077C130.598 69.733 130.716 69.4538 130.716 69.0703V68.1051H130.655C130.598 68.2095 130.515 68.3256 130.406 68.4535C130.299 68.5813 130.152 68.6921 129.965 68.7859C129.777 68.8796 129.533 68.9265 129.233 68.9265C128.845 68.9265 128.496 68.8359 128.185 68.6548C127.876 68.4716 127.631 68.2021 127.45 67.8462C127.271 67.4883 127.181 67.0483 127.181 66.5263C127.181 66.0043 127.27 65.5568 127.446 65.1839C127.625 64.8111 127.87 64.5256 128.182 64.3274C128.493 64.1271 128.845 64.027 129.239 64.027C129.544 64.027 129.79 64.0781 129.978 64.1804C130.165 64.2805 130.311 64.3977 130.416 64.532C130.522 64.6662 130.604 64.7844 130.662 64.8867H130.732V64.0909H131.668V69.1087C131.668 69.5305 131.57 69.8768 131.374 70.1474C131.178 70.418 130.913 70.6183 130.579 70.7482C130.246 70.8782 129.871 70.9432 129.454 70.9432ZM129.444 68.1339C129.719 68.1339 129.951 68.07 130.141 67.9421C130.332 67.8121 130.477 67.6268 130.575 67.386C130.676 67.1431 130.726 66.8523 130.726 66.5135C130.726 66.1832 130.677 65.8924 130.579 65.641C130.481 65.3896 130.337 65.1935 130.147 65.0529C129.957 64.9102 129.723 64.8388 129.444 64.8388C129.156 64.8388 128.917 64.9134 128.725 65.0625C128.533 65.2095 128.388 65.4098 128.29 65.6634C128.194 65.9169 128.146 66.2003 128.146 66.5135C128.146 66.8352 128.195 67.1175 128.293 67.3604C128.391 67.6033 128.536 67.793 128.728 67.9293C128.922 68.0657 129.161 68.1339 129.444 68.1339ZM139.01 65.2894L138.144 65.4428C138.108 65.332 138.051 65.2266 137.972 65.1264C137.895 65.0263 137.791 64.9442 137.659 64.8803C137.526 64.8164 137.361 64.7844 137.163 64.7844C136.893 64.7844 136.667 64.8452 136.486 64.9666C136.305 65.0859 136.214 65.2404 136.214 65.43C136.214 65.5941 136.275 65.7262 136.396 65.8263C136.518 65.9265 136.714 66.0085 136.984 66.0724L137.764 66.2514C138.216 66.3558 138.552 66.5167 138.774 66.734C138.996 66.9513 139.106 67.2337 139.106 67.581C139.106 67.875 139.021 68.1371 138.851 68.3672C138.682 68.5952 138.447 68.7741 138.144 68.9041C137.844 69.0341 137.496 69.0991 137.099 69.0991C136.55 69.0991 136.101 68.9819 135.754 68.7475C135.406 68.511 135.193 68.1754 135.115 67.7408L136.038 67.6001C136.096 67.8409 136.214 68.0231 136.393 68.1467C136.572 68.2681 136.805 68.3288 137.093 68.3288C137.406 68.3288 137.656 68.2638 137.844 68.1339C138.031 68.0018 138.125 67.8409 138.125 67.6513C138.125 67.4979 138.068 67.369 137.953 67.2646C137.84 67.1602 137.666 67.0813 137.432 67.0281L136.601 66.8459C136.143 66.7415 135.804 66.5753 135.584 66.3473C135.367 66.1193 135.258 65.8306 135.258 65.4812C135.258 65.1914 135.339 64.9379 135.501 64.7205C135.663 64.5032 135.887 64.3338 136.172 64.2124C136.458 64.0888 136.785 64.027 137.154 64.027C137.684 64.027 138.102 64.142 138.406 64.3722C138.711 64.6001 138.912 64.9059 139.01 65.2894ZM142.449 64.0909V64.858H139.767V64.0909H142.449ZM140.486 62.9148H141.442V67.5586C141.442 67.744 141.47 67.8835 141.525 67.9773C141.58 68.0689 141.652 68.1317 141.739 68.1658C141.829 68.1978 141.926 68.2138 142.03 68.2138C142.107 68.2138 142.174 68.2085 142.231 68.1978C142.289 68.1871 142.334 68.1786 142.366 68.1722L142.538 68.9616C142.483 68.983 142.404 69.0043 142.302 69.0256C142.199 69.049 142.071 69.0618 141.918 69.0639C141.667 69.0682 141.432 69.0234 141.215 68.9297C140.998 68.8359 140.822 68.6911 140.688 68.495C140.553 68.299 140.486 68.0529 140.486 67.7567V62.9148ZM144.934 69.1087C144.623 69.1087 144.342 69.0511 144.091 68.9361C143.839 68.8189 143.64 68.6495 143.493 68.4279C143.348 68.2063 143.276 67.9347 143.276 67.6129C143.276 67.3359 143.329 67.108 143.435 66.929C143.542 66.75 143.686 66.6083 143.867 66.5039C144.048 66.3995 144.25 66.3207 144.474 66.2674C144.698 66.2141 144.926 66.1737 145.158 66.146C145.452 66.1119 145.691 66.0842 145.874 66.0629C146.057 66.0394 146.19 66.0021 146.273 65.951C146.357 65.8999 146.398 65.8168 146.398 65.7017V65.6793C146.398 65.4002 146.319 65.1839 146.162 65.0305C146.006 64.8771 145.774 64.8004 145.465 64.8004C145.143 64.8004 144.89 64.8718 144.704 65.0146C144.521 65.1552 144.394 65.3118 144.324 65.4844L143.426 65.2798C143.532 64.9815 143.688 64.7408 143.892 64.5575C144.099 64.3722 144.337 64.2379 144.605 64.1548C144.874 64.0696 145.156 64.027 145.452 64.027C145.648 64.027 145.856 64.0504 146.075 64.0973C146.297 64.142 146.504 64.2251 146.695 64.3466C146.889 64.468 147.048 64.6417 147.172 64.8675C147.295 65.0913 147.357 65.3821 147.357 65.7401V69H146.424V68.3288H146.385C146.324 68.4524 146.231 68.5739 146.107 68.6932C145.984 68.8125 145.825 68.9116 145.631 68.9904C145.437 69.0692 145.205 69.1087 144.934 69.1087ZM145.142 68.3416C145.406 68.3416 145.632 68.2894 145.82 68.185C146.009 68.0806 146.153 67.9442 146.251 67.7759C146.351 67.6055 146.401 67.4233 146.401 67.2294V66.5966C146.367 66.6307 146.301 66.6626 146.203 66.6925C146.107 66.7202 145.998 66.7447 145.874 66.766C145.75 66.7852 145.63 66.8033 145.513 66.8203C145.396 66.8352 145.298 66.848 145.219 66.8587C145.033 66.8821 144.864 66.9215 144.711 66.9769C144.559 67.0323 144.438 67.1122 144.346 67.2166C144.257 67.3189 144.212 67.4553 144.212 67.6257C144.212 67.8622 144.299 68.0412 144.474 68.1626C144.649 68.282 144.871 68.3416 145.142 68.3416ZM150.921 64.0909V64.858H148.24V64.0909H150.921ZM148.959 62.9148H149.915V67.5586C149.915 67.744 149.942 67.8835 149.998 67.9773C150.053 68.0689 150.124 68.1317 150.212 68.1658C150.301 68.1978 150.398 68.2138 150.503 68.2138C150.579 68.2138 150.646 68.2085 150.704 68.1978C150.761 68.1871 150.806 68.1786 150.838 68.1722L151.011 68.9616C150.955 68.983 150.877 69.0043 150.774 69.0256C150.672 69.049 150.544 69.0618 150.391 69.0639C150.139 69.0682 149.905 69.0234 149.688 68.9297C149.47 68.8359 149.294 68.6911 149.16 68.495C149.026 68.299 148.959 68.0529 148.959 67.7567V62.9148ZM154.041 69.0991C153.558 69.0991 153.141 68.9957 152.792 68.7891C152.444 68.5803 152.176 68.2873 151.986 67.9102C151.799 67.5309 151.705 67.0866 151.705 66.5774C151.705 66.0746 151.799 65.6314 151.986 65.2479C152.176 64.8643 152.44 64.565 152.779 64.3498C153.12 64.1346 153.518 64.027 153.974 64.027C154.251 64.027 154.52 64.0728 154.78 64.1644C155.04 64.256 155.273 64.3999 155.48 64.5959C155.686 64.7919 155.849 65.0465 155.969 65.3597C156.088 65.6708 156.148 66.049 156.148 66.4943V66.8331H152.245V66.1172H155.211C155.211 65.8658 155.16 65.6431 155.058 65.4492C154.955 65.2532 154.812 65.0987 154.626 64.9858C154.443 64.8729 154.228 64.8164 153.981 64.8164C153.712 64.8164 153.478 64.8825 153.278 65.0146C153.079 65.1445 152.926 65.315 152.817 65.5259C152.711 65.7347 152.657 65.9616 152.657 66.2067V66.766C152.657 67.0941 152.715 67.3732 152.83 67.6033C152.947 67.8335 153.11 68.0092 153.319 68.1307C153.528 68.25 153.772 68.3097 154.051 68.3097C154.232 68.3097 154.397 68.2841 154.546 68.233C154.695 68.1797 154.824 68.1009 154.933 67.9964C155.042 67.892 155.125 67.7631 155.182 67.6097L156.087 67.7727C156.014 68.0391 155.884 68.2724 155.697 68.4727C155.512 68.6708 155.278 68.8253 154.997 68.9361C154.718 69.0447 154.399 69.0991 154.041 69.0991ZM157.208 69V64.0909H158.125V64.8899H158.186C158.288 64.6193 158.455 64.4084 158.688 64.2571C158.92 64.1037 159.198 64.027 159.522 64.027C159.85 64.027 160.125 64.1037 160.346 64.2571C160.57 64.4105 160.735 64.6214 160.842 64.8899H160.893C161.01 64.6278 161.196 64.419 161.452 64.2635C161.708 64.1058 162.013 64.027 162.366 64.027C162.812 64.027 163.175 64.1665 163.456 64.4457C163.739 64.7248 163.881 65.1456 163.881 65.7081V69H162.926V65.7976C162.926 65.4652 162.835 65.2244 162.654 65.0753C162.473 64.9261 162.256 64.8516 162.005 64.8516C161.694 64.8516 161.452 64.9474 161.28 65.1392C161.107 65.3288 161.021 65.5728 161.021 65.8711V69H160.068V65.7369C160.068 65.4705 159.985 65.2564 159.819 65.0945C159.653 64.9325 159.437 64.8516 159.17 64.8516C158.989 64.8516 158.822 64.8995 158.668 64.9954C158.517 65.0891 158.395 65.2202 158.301 65.3885C158.209 65.5568 158.163 65.7518 158.163 65.9734V69H157.208ZM167.278 69.0991C166.794 69.0991 166.377 68.9957 166.028 68.7891C165.681 68.5803 165.412 68.2873 165.223 67.9102C165.035 67.5309 164.941 67.0866 164.941 66.5774C164.941 66.0746 165.035 65.6314 165.223 65.2479C165.412 64.8643 165.676 64.565 166.015 64.3498C166.356 64.1346 166.755 64.027 167.211 64.027C167.488 64.027 167.756 64.0728 168.016 64.1644C168.276 64.256 168.509 64.3999 168.716 64.5959C168.923 64.7919 169.086 65.0465 169.205 65.3597C169.324 65.6708 169.384 66.049 169.384 66.4943V66.8331H165.482V66.1172H168.447C168.447 65.8658 168.396 65.6431 168.294 65.4492C168.192 65.2532 168.048 65.0987 167.863 64.9858C167.679 64.8729 167.464 64.8164 167.217 64.8164C166.949 64.8164 166.714 64.8825 166.514 65.0146C166.316 65.1445 166.162 65.315 166.054 65.5259C165.947 65.7347 165.894 65.9616 165.894 66.2067V66.766C165.894 67.0941 165.951 67.3732 166.066 67.6033C166.184 67.8335 166.347 68.0092 166.555 68.1307C166.764 68.25 167.008 68.3097 167.287 68.3097C167.468 68.3097 167.634 68.2841 167.783 68.233C167.932 68.1797 168.061 68.1009 168.169 67.9964C168.278 67.892 168.361 67.7631 168.419 67.6097L169.323 67.7727C169.251 68.0391 169.121 68.2724 168.933 68.4727C168.748 68.6708 168.515 68.8253 168.233 68.9361C167.954 69.0447 167.636 69.0991 167.278 69.0991ZM171.4 66.0852V69H170.444V64.0909H171.361V64.8899H171.422C171.535 64.63 171.712 64.4212 171.953 64.2635C172.196 64.1058 172.501 64.027 172.87 64.027C173.204 64.027 173.497 64.0973 173.749 64.2379C174 64.3764 174.195 64.5831 174.334 64.858C174.472 65.1328 174.541 65.4727 174.541 65.8775V69H173.586V65.9925C173.586 65.6367 173.493 65.3587 173.308 65.1584C173.122 64.956 172.868 64.8548 172.544 64.8548C172.322 64.8548 172.125 64.9027 171.953 64.9986C171.782 65.0945 171.647 65.2351 171.547 65.4205C171.449 65.6037 171.4 65.8253 171.4 66.0852ZM178.115 64.0909V64.858H175.433V64.0909H178.115ZM176.152 62.9148H177.108V67.5586C177.108 67.744 177.136 67.8835 177.191 67.9773C177.246 68.0689 177.318 68.1317 177.405 68.1658C177.495 68.1978 177.592 68.2138 177.696 68.2138C177.773 68.2138 177.84 68.2085 177.897 68.1978C177.955 68.1871 178 68.1786 178.032 68.1722L178.204 68.9616C178.149 68.983 178.07 69.0043 177.968 69.0256C177.865 69.049 177.737 69.0618 177.584 69.0639C177.333 69.0682 177.098 69.0234 176.881 68.9297C176.664 68.8359 176.488 68.6911 176.354 68.495C176.219 68.299 176.152 68.0529 176.152 67.7567V62.9148Z" fill="#667085"/>
-<g opacity="0.1">
-<rect x="84" y="77" width="148" height="4" rx="2" fill="#101828"/>
-</g>
-<g opacity="0.1">
-<rect x="84" y="87" width="148" height="4" rx="2" fill="#101828"/>
-</g>
-<g opacity="0.1">
-<rect x="84" y="97" width="92" height="4" rx="2" fill="#101828"/>
-</g>
-<path d="M66.7774 51.166C66.4451 50.6676 66.8024 50 67.4014 50H72V59L66.7774 51.166Z" fill="#F2F4F7"/>
-<rect width="280" height="203.4" transform="translate(12 157)" fill="url(#paint0_linear_3256_32105)"/>
-<path d="M36.6001 201.1H112.825" stroke="url(#paint1_linear_3256_32105)" stroke-width="0.825"/>
-<path d="M127.171 197.539C127.12 197.406 126.992 197.319 126.85 197.319C126.708 197.319 126.58 197.406 126.529 197.539L125.837 199.337C125.734 199.606 125.702 199.683 125.657 199.746C125.613 199.808 125.558 199.863 125.495 199.908C125.433 199.952 125.356 199.984 125.087 200.088L123.289 200.779C123.156 200.83 123.069 200.958 123.069 201.1C123.069 201.242 123.156 201.37 123.289 201.421L125.087 202.113C125.356 202.216 125.433 202.248 125.495 202.293C125.558 202.337 125.613 202.392 125.657 202.455C125.702 202.517 125.734 202.594 125.837 202.863L126.529 204.661C126.58 204.794 126.708 204.881 126.85 204.881C126.992 204.881 127.12 204.794 127.171 204.661L127.862 202.863C127.966 202.594 127.998 202.517 128.042 202.455C128.087 202.392 128.142 202.337 128.204 202.293C128.267 202.248 128.344 202.216 128.613 202.113L130.411 201.421C130.544 201.37 130.631 201.242 130.631 201.1C130.631 200.958 130.544 200.83 130.411 200.779L128.613 200.088C128.344 199.984 128.267 199.952 128.204 199.908C128.142 199.863 128.087 199.808 128.042 199.746C127.998 199.683 127.966 199.606 127.862 199.337L127.171 197.539Z" fill="#667085"/>
-<path d="M134.711 198.335V197.4H140.283V198.335H138.037V204.6H136.954V198.335H134.711ZM140.87 204.6V199.2H141.886V200.058H141.942C142.04 199.767 142.214 199.539 142.462 199.372C142.713 199.204 142.997 199.119 143.313 199.119C143.379 199.119 143.456 199.122 143.545 199.126C143.636 199.131 143.708 199.137 143.759 199.144V200.149C143.717 200.138 143.642 200.125 143.534 200.111C143.427 200.094 143.319 200.086 143.211 200.086C142.963 200.086 142.741 200.139 142.547 200.244C142.354 200.347 142.202 200.492 142.09 200.677C141.977 200.859 141.921 201.068 141.921 201.302V204.6H140.87ZM145.498 206.625C145.341 206.625 145.198 206.612 145.069 206.586C144.94 206.563 144.844 206.537 144.781 206.509L145.034 205.648C145.226 205.699 145.397 205.722 145.547 205.715C145.697 205.708 145.83 205.651 145.944 205.546C146.062 205.44 146.165 205.268 146.254 205.029L146.384 204.67L144.408 199.2H145.533L146.901 203.391H146.957L148.324 199.2H149.453L147.228 205.321C147.124 205.602 146.993 205.84 146.834 206.034C146.674 206.231 146.485 206.379 146.264 206.477C146.044 206.576 145.789 206.625 145.498 206.625ZM155.582 199.2V200.044H152.632V199.2H155.582ZM153.423 197.906H154.474V203.015C154.474 203.218 154.505 203.372 154.566 203.475C154.627 203.576 154.705 203.645 154.801 203.683C154.9 203.718 155.006 203.735 155.121 203.735C155.205 203.735 155.279 203.729 155.343 203.718C155.406 203.706 155.455 203.697 155.49 203.69L155.68 204.558C155.619 204.581 155.532 204.605 155.42 204.628C155.307 204.654 155.167 204.668 154.998 204.67C154.721 204.675 154.464 204.626 154.225 204.523C153.986 204.42 153.792 204.26 153.644 204.045C153.497 203.829 153.423 203.558 153.423 203.233V197.906ZM158.961 204.709C158.455 204.709 158.013 204.593 157.636 204.361C157.258 204.129 156.965 203.804 156.757 203.387C156.548 202.97 156.444 202.483 156.444 201.925C156.444 201.365 156.548 200.875 156.757 200.455C156.965 200.036 157.258 199.71 157.636 199.478C158.013 199.246 158.455 199.13 158.961 199.13C159.467 199.13 159.909 199.246 160.286 199.478C160.664 199.71 160.957 200.036 161.165 200.455C161.374 200.875 161.478 201.365 161.478 201.925C161.478 202.483 161.374 202.97 161.165 203.387C160.957 203.804 160.664 204.129 160.286 204.361C159.909 204.593 159.467 204.709 158.961 204.709ZM158.965 203.827C159.293 203.827 159.565 203.74 159.78 203.567C159.996 203.393 160.155 203.162 160.258 202.874C160.364 202.586 160.416 202.268 160.416 201.921C160.416 201.577 160.364 201.26 160.258 200.972C160.155 200.681 159.996 200.448 159.78 200.272C159.565 200.097 159.293 200.009 158.965 200.009C158.634 200.009 158.36 200.097 158.142 200.272C157.926 200.448 157.766 200.681 157.66 200.972C157.557 201.26 157.506 201.577 157.506 201.921C157.506 202.268 157.557 202.586 157.66 202.874C157.766 203.162 157.926 203.393 158.142 203.567C158.36 203.74 158.634 203.827 158.965 203.827ZM166.843 204.72C166.501 204.72 166.191 204.656 165.915 204.53C165.638 204.401 165.419 204.215 165.257 203.971C165.098 203.727 165.018 203.428 165.018 203.074C165.018 202.77 165.077 202.519 165.194 202.322C165.311 202.125 165.47 201.969 165.669 201.854C165.868 201.74 166.091 201.653 166.337 201.594C166.583 201.536 166.834 201.491 167.089 201.461C167.413 201.423 167.675 201.393 167.877 201.369C168.078 201.343 168.225 201.302 168.316 201.246C168.407 201.19 168.453 201.099 168.453 200.972V200.947C168.453 200.64 168.366 200.402 168.193 200.234C168.022 200.065 167.766 199.981 167.427 199.981C167.073 199.981 166.794 200.059 166.59 200.216C166.388 200.371 166.249 200.543 166.172 200.733L165.184 200.508C165.301 200.18 165.472 199.915 165.697 199.713C165.924 199.509 166.186 199.362 166.481 199.27C166.776 199.177 167.087 199.13 167.413 199.13C167.628 199.13 167.857 199.156 168.098 199.207C168.342 199.256 168.569 199.348 168.78 199.481C168.993 199.615 169.168 199.806 169.304 200.054C169.44 200.3 169.508 200.62 169.508 201.014V204.6H168.481V203.862H168.439C168.371 203.998 168.269 204.131 168.133 204.263C167.997 204.394 167.823 204.503 167.609 204.59C167.396 204.676 167.141 204.72 166.843 204.72ZM167.072 203.876C167.362 203.876 167.611 203.818 167.817 203.704C168.025 203.589 168.184 203.439 168.291 203.254C168.402 203.066 168.457 202.866 168.457 202.652V201.956C168.419 201.994 168.347 202.029 168.239 202.062C168.133 202.092 168.013 202.119 167.877 202.143C167.741 202.164 167.608 202.184 167.479 202.202C167.35 202.219 167.243 202.233 167.156 202.245C166.952 202.27 166.766 202.314 166.597 202.375C166.431 202.436 166.297 202.524 166.196 202.638C166.098 202.751 166.048 202.901 166.048 203.088C166.048 203.349 166.145 203.545 166.337 203.679C166.529 203.81 166.774 203.876 167.072 203.876ZM174.954 200.518L174.002 200.687C173.962 200.565 173.899 200.449 173.812 200.339C173.727 200.229 173.613 200.139 173.467 200.068C173.322 199.998 173.14 199.963 172.922 199.963C172.625 199.963 172.376 200.03 172.177 200.163C171.978 200.295 171.878 200.465 171.878 200.673C171.878 200.854 171.945 200.999 172.079 201.109C172.212 201.219 172.428 201.309 172.726 201.38L173.583 201.577C174.08 201.692 174.451 201.868 174.694 202.108C174.938 202.347 175.06 202.657 175.06 203.039C175.06 203.363 174.966 203.651 174.779 203.904C174.594 204.155 174.335 204.352 174.002 204.495C173.671 204.638 173.288 204.709 172.852 204.709C172.247 204.709 171.754 204.58 171.372 204.322C170.99 204.062 170.756 203.693 170.669 203.215L171.685 203.06C171.748 203.325 171.878 203.525 172.075 203.661C172.272 203.795 172.529 203.862 172.845 203.862C173.19 203.862 173.465 203.79 173.671 203.647C173.877 203.502 173.981 203.325 173.981 203.117C173.981 202.948 173.917 202.806 173.791 202.691C173.667 202.576 173.476 202.49 173.218 202.431L172.304 202.231C171.8 202.116 171.427 201.933 171.186 201.682C170.947 201.431 170.827 201.114 170.827 200.729C170.827 200.411 170.916 200.132 171.094 199.893C171.272 199.654 171.519 199.467 171.833 199.334C172.147 199.198 172.506 199.13 172.912 199.13C173.495 199.13 173.955 199.256 174.29 199.509C174.625 199.76 174.847 200.097 174.954 200.518ZM177.182 202.768L177.175 201.485H177.358L179.51 199.2H180.768L178.315 201.802H178.149L177.182 202.768ZM176.216 204.6V197.4H177.267V204.6H176.216ZM179.626 204.6L177.692 202.034L178.416 201.299L180.916 204.6H179.626Z" fill="#667085"/>
-<path d="M191.175 201.1H267.4" stroke="url(#paint2_linear_3256_32105)" stroke-width="0.825"/>
-<g filter="url(#filter1_d_3256_32105)">
-<rect x="85.6001" y="216.85" width="132.8" height="23.25" rx="6.6" fill="white"/>
-<path d="M97.7008 231.975L95.7039 224.775H96.8465L98.2492 230.351H98.316L99.775 224.775H100.907L102.366 230.354H102.433L103.832 224.775H104.978L102.978 231.975H101.884L100.369 226.582H100.313L98.7977 231.975H97.7008ZM106.935 228.769V231.975H105.884V224.775H106.921V227.454H106.988C107.115 227.163 107.308 226.933 107.568 226.761C107.828 226.59 108.168 226.505 108.588 226.505C108.958 226.505 109.282 226.581 109.558 226.733C109.837 226.886 110.053 227.113 110.205 227.415C110.36 227.715 110.437 228.09 110.437 228.54V231.975H109.386V228.667C109.386 228.271 109.284 227.964 109.08 227.746C108.876 227.525 108.592 227.415 108.229 227.415C107.981 227.415 107.758 227.468 107.561 227.574C107.367 227.679 107.213 227.834 107.101 228.038C106.991 228.239 106.935 228.483 106.935 228.769ZM113.411 232.095C113.069 232.095 112.76 232.031 112.483 231.905C112.207 231.776 111.987 231.59 111.826 231.346C111.666 231.102 111.587 230.803 111.587 230.449C111.587 230.145 111.645 229.894 111.762 229.697C111.88 229.5 112.038 229.344 112.237 229.229C112.436 229.115 112.659 229.028 112.905 228.969C113.151 228.911 113.402 228.866 113.657 228.836C113.981 228.798 114.243 228.768 114.445 228.744C114.646 228.718 114.793 228.677 114.884 228.621C114.976 228.565 115.021 228.474 115.021 228.347V228.322C115.021 228.015 114.935 227.777 114.761 227.609C114.59 227.44 114.335 227.356 113.995 227.356C113.641 227.356 113.362 227.434 113.158 227.591C112.957 227.746 112.817 227.918 112.74 228.108L111.752 227.883C111.869 227.555 112.04 227.29 112.265 227.088C112.492 226.884 112.754 226.737 113.049 226.645C113.344 226.552 113.655 226.505 113.981 226.505C114.196 226.505 114.425 226.531 114.666 226.582C114.91 226.631 115.137 226.723 115.348 226.856C115.562 226.99 115.736 227.181 115.872 227.429C116.008 227.675 116.076 227.995 116.076 228.389V231.975H115.05V231.237H115.007C114.939 231.373 114.837 231.506 114.701 231.638C114.566 231.769 114.391 231.878 114.178 231.965C113.964 232.051 113.709 232.095 113.411 232.095ZM113.64 231.251C113.93 231.251 114.179 231.193 114.385 231.079C114.594 230.964 114.752 230.814 114.86 230.629C114.97 230.441 115.025 230.241 115.025 230.027V229.331C114.987 229.369 114.915 229.404 114.807 229.437C114.701 229.467 114.581 229.494 114.445 229.518C114.309 229.539 114.176 229.559 114.048 229.577C113.919 229.594 113.811 229.608 113.724 229.62C113.52 229.645 113.334 229.689 113.165 229.75C112.999 229.811 112.865 229.899 112.764 230.013C112.666 230.126 112.617 230.276 112.617 230.463C112.617 230.724 112.713 230.92 112.905 231.054C113.097 231.185 113.342 231.251 113.64 231.251ZM119.997 226.575V227.419H117.047V226.575H119.997ZM117.838 225.281H118.889V230.39C118.889 230.593 118.92 230.747 118.981 230.85C119.042 230.951 119.12 231.02 119.216 231.058C119.315 231.093 119.421 231.11 119.536 231.11C119.621 231.11 119.695 231.104 119.758 231.093C119.821 231.081 119.87 231.072 119.905 231.065L120.095 231.933C120.034 231.956 119.948 231.98 119.835 232.003C119.723 232.029 119.582 232.043 119.413 232.045C119.137 232.05 118.879 232.001 118.64 231.898C118.401 231.795 118.207 231.635 118.06 231.42C117.912 231.204 117.838 230.933 117.838 230.608V225.281ZM121.958 224.775V227.338H121.086V224.775H121.958ZM127.362 227.893L126.409 228.062C126.37 227.94 126.306 227.824 126.22 227.714C126.135 227.604 126.02 227.514 125.875 227.443C125.73 227.373 125.548 227.338 125.33 227.338C125.032 227.338 124.784 227.405 124.585 227.538C124.386 227.67 124.286 227.84 124.286 228.048C124.286 228.229 124.353 228.374 124.486 228.484C124.62 228.594 124.836 228.684 125.133 228.755L125.991 228.952C126.488 229.067 126.858 229.243 127.102 229.483C127.346 229.722 127.468 230.032 127.468 230.414C127.468 230.738 127.374 231.026 127.186 231.279C127.001 231.53 126.742 231.727 126.409 231.87C126.079 232.013 125.696 232.084 125.26 232.084C124.655 232.084 124.162 231.955 123.78 231.697C123.398 231.437 123.163 231.068 123.077 230.59L124.093 230.435C124.156 230.7 124.286 230.9 124.483 231.036C124.68 231.17 124.936 231.237 125.253 231.237C125.597 231.237 125.873 231.165 126.079 231.022C126.285 230.877 126.388 230.7 126.388 230.492C126.388 230.323 126.325 230.181 126.198 230.066C126.074 229.951 125.883 229.865 125.625 229.806L124.711 229.606C124.207 229.491 123.835 229.308 123.593 229.057C123.354 228.806 123.235 228.489 123.235 228.104C123.235 227.786 123.324 227.507 123.502 227.268C123.68 227.029 123.926 226.842 124.24 226.709C124.554 226.573 124.914 226.505 125.32 226.505C125.903 226.505 126.363 226.631 126.698 226.884C127.033 227.135 127.254 227.472 127.362 227.893ZM133.764 226.575V227.419H130.814V226.575H133.764ZM131.605 225.281H132.657V230.39C132.657 230.593 132.687 230.747 132.748 230.85C132.809 230.951 132.888 231.02 132.984 231.058C133.082 231.093 133.189 231.11 133.304 231.11C133.388 231.11 133.462 231.104 133.525 231.093C133.588 231.081 133.638 231.072 133.673 231.065L133.863 231.933C133.802 231.956 133.715 231.98 133.602 232.003C133.49 232.029 133.349 232.043 133.18 232.045C132.904 232.05 132.646 232.001 132.407 231.898C132.168 231.795 131.975 231.635 131.827 231.42C131.679 231.204 131.605 230.933 131.605 230.608V225.281ZM136.094 228.769V231.975H135.043V224.775H136.08V227.454H136.147C136.273 227.163 136.467 226.933 136.727 226.761C136.987 226.59 137.327 226.505 137.746 226.505C138.117 226.505 138.44 226.581 138.717 226.733C138.996 226.886 139.211 227.113 139.364 227.415C139.518 227.715 139.596 228.09 139.596 228.54V231.975H138.544V228.667C138.544 228.271 138.442 227.964 138.239 227.746C138.035 227.525 137.751 227.415 137.388 227.415C137.139 227.415 136.917 227.468 136.72 227.574C136.525 227.679 136.372 227.834 136.259 228.038C136.149 228.239 136.094 228.483 136.094 228.769ZM143.326 232.084C142.794 232.084 142.335 231.97 141.951 231.743C141.569 231.513 141.274 231.191 141.065 230.776C140.859 230.359 140.756 229.87 140.756 229.31C140.756 228.757 140.859 228.27 141.065 227.848C141.274 227.426 141.564 227.097 141.937 226.86C142.312 226.623 142.75 226.505 143.252 226.505C143.557 226.505 143.852 226.555 144.138 226.656C144.424 226.757 144.68 226.915 144.908 227.131C145.135 227.346 145.314 227.626 145.446 227.971C145.577 228.313 145.642 228.729 145.642 229.219V229.592H141.35V228.804H144.612C144.612 228.527 144.556 228.283 144.444 228.069C144.331 227.854 144.173 227.684 143.969 227.559C143.767 227.435 143.531 227.373 143.259 227.373C142.964 227.373 142.706 227.446 142.485 227.591C142.267 227.734 142.099 227.922 141.979 228.154C141.862 228.383 141.803 228.633 141.803 228.902V229.518C141.803 229.879 141.867 230.186 141.993 230.439C142.122 230.692 142.301 230.885 142.531 231.019C142.761 231.15 143.029 231.216 143.336 231.216C143.535 231.216 143.717 231.188 143.881 231.131C144.045 231.073 144.187 230.986 144.307 230.871C144.426 230.756 144.517 230.615 144.581 230.446L145.576 230.625C145.496 230.918 145.353 231.175 145.147 231.395C144.943 231.613 144.686 231.783 144.377 231.905C144.07 232.024 143.719 232.084 143.326 232.084ZM150.48 224.775V231.975H149.429V224.775H150.48ZM153.466 232.095C153.123 232.095 152.814 232.031 152.538 231.905C152.261 231.776 152.042 231.59 151.88 231.346C151.721 231.102 151.641 230.803 151.641 230.449C151.641 230.145 151.7 229.894 151.817 229.697C151.934 229.5 152.092 229.344 152.291 229.229C152.491 229.115 152.713 229.028 152.959 228.969C153.205 228.911 153.456 228.866 153.712 228.836C154.035 228.798 154.298 228.768 154.499 228.744C154.701 228.718 154.847 228.677 154.939 228.621C155.03 228.565 155.076 228.474 155.076 228.347V228.322C155.076 228.015 154.989 227.777 154.816 227.609C154.645 227.44 154.389 227.356 154.049 227.356C153.695 227.356 153.416 227.434 153.213 227.591C153.011 227.746 152.871 227.918 152.794 228.108L151.806 227.883C151.923 227.555 152.095 227.29 152.32 227.088C152.547 226.884 152.808 226.737 153.104 226.645C153.399 226.552 153.709 226.505 154.035 226.505C154.251 226.505 154.479 226.531 154.721 226.582C154.964 226.631 155.192 226.723 155.403 226.856C155.616 226.99 155.791 227.181 155.927 227.429C156.063 227.675 156.13 227.995 156.13 228.389V231.975H155.104V231.237H155.062C154.994 231.373 154.892 231.506 154.756 231.638C154.62 231.769 154.445 231.878 154.232 231.965C154.019 232.051 153.763 232.095 153.466 232.095ZM153.694 231.251C153.985 231.251 154.233 231.193 154.439 231.079C154.648 230.964 154.806 230.814 154.914 230.629C155.024 230.441 155.079 230.241 155.079 230.027V229.331C155.042 229.369 154.969 229.404 154.861 229.437C154.756 229.467 154.635 229.494 154.499 229.518C154.363 229.539 154.231 229.559 154.102 229.577C153.973 229.594 153.865 229.608 153.779 229.62C153.575 229.645 153.388 229.689 153.22 229.75C153.053 229.811 152.92 229.899 152.819 230.013C152.72 230.126 152.671 230.276 152.671 230.463C152.671 230.724 152.767 230.92 152.959 231.054C153.152 231.185 153.396 231.251 153.694 231.251ZM160.051 226.575V227.419H157.102V226.575H160.051ZM157.893 225.281H158.944V230.39C158.944 230.593 158.974 230.747 159.035 230.85C159.096 230.951 159.175 231.02 159.271 231.058C159.369 231.093 159.476 231.11 159.591 231.11C159.675 231.11 159.749 231.104 159.812 231.093C159.875 231.081 159.925 231.072 159.96 231.065L160.15 231.933C160.089 231.956 160.002 231.98 159.89 232.003C159.777 232.029 159.636 232.043 159.468 232.045C159.191 232.05 158.933 232.001 158.694 231.898C158.455 231.795 158.262 231.635 158.114 231.42C157.967 231.204 157.893 230.933 157.893 230.608V225.281ZM163.483 232.084C162.951 232.084 162.493 231.97 162.109 231.743C161.727 231.513 161.431 231.191 161.223 230.776C161.017 230.359 160.913 229.87 160.913 229.31C160.913 228.757 161.017 228.27 161.223 227.848C161.431 227.426 161.722 227.097 162.095 226.86C162.47 226.623 162.908 226.505 163.41 226.505C163.714 226.505 164.01 226.555 164.296 226.656C164.581 226.757 164.838 226.915 165.065 227.131C165.293 227.346 165.472 227.626 165.603 227.971C165.735 228.313 165.8 228.729 165.8 229.219V229.592H161.508V228.804H164.77C164.77 228.527 164.714 228.283 164.601 228.069C164.489 227.854 164.331 227.684 164.127 227.559C163.925 227.435 163.688 227.373 163.417 227.373C163.121 227.373 162.863 227.446 162.643 227.591C162.425 227.734 162.256 227.922 162.137 228.154C162.02 228.383 161.961 228.633 161.961 228.902V229.518C161.961 229.879 162.024 230.186 162.151 230.439C162.28 230.692 162.459 230.885 162.689 231.019C162.919 231.15 163.187 231.216 163.494 231.216C163.693 231.216 163.875 231.188 164.039 231.131C164.203 231.073 164.345 230.986 164.464 230.871C164.584 230.756 164.675 230.615 164.738 230.446L165.733 230.625C165.654 230.918 165.511 231.175 165.304 231.395C165.101 231.613 164.844 231.783 164.535 231.905C164.228 232.024 163.877 232.084 163.483 232.084ZM171.013 227.893L170.06 228.062C170.02 227.94 169.957 227.824 169.87 227.714C169.786 227.604 169.671 227.514 169.526 227.443C169.381 227.373 169.199 227.338 168.981 227.338C168.683 227.338 168.435 227.405 168.236 227.538C168.036 227.67 167.937 227.84 167.937 228.048C167.937 228.229 168.004 228.374 168.137 228.484C168.271 228.594 168.486 228.684 168.784 228.755L169.642 228.952C170.139 229.067 170.509 229.243 170.753 229.483C170.997 229.722 171.118 230.032 171.118 230.414C171.118 230.738 171.025 231.026 170.837 231.279C170.652 231.53 170.393 231.727 170.06 231.87C169.73 232.013 169.347 232.084 168.911 232.084C168.306 232.084 167.813 231.955 167.431 231.697C167.049 231.437 166.814 231.068 166.727 230.59L167.743 230.435C167.807 230.7 167.937 230.9 168.134 231.036C168.331 231.17 168.587 231.237 168.904 231.237C169.248 231.237 169.524 231.165 169.73 231.022C169.936 230.877 170.039 230.7 170.039 230.492C170.039 230.323 169.976 230.181 169.849 230.066C169.725 229.951 169.534 229.865 169.276 229.806L168.362 229.606C167.858 229.491 167.486 229.308 167.244 229.057C167.005 228.806 166.886 228.489 166.886 228.104C166.886 227.786 166.975 227.507 167.153 227.268C167.331 227.029 167.577 226.842 167.891 226.709C168.205 226.573 168.565 226.505 168.97 226.505C169.554 226.505 170.013 226.631 170.349 226.884C170.684 227.135 170.905 227.472 171.013 227.893ZM174.795 226.575V227.419H171.845V226.575H174.795ZM172.636 225.281H173.688V230.39C173.688 230.593 173.718 230.747 173.779 230.85C173.84 230.951 173.918 231.02 174.014 231.058C174.113 231.093 174.22 231.11 174.334 231.11C174.419 231.11 174.493 231.104 174.556 231.093C174.619 231.081 174.668 231.072 174.704 231.065L174.893 231.933C174.832 231.956 174.746 231.98 174.633 232.003C174.521 232.029 174.38 232.043 174.211 232.045C173.935 232.05 173.677 232.001 173.438 231.898C173.199 231.795 173.005 231.635 172.858 231.42C172.71 231.204 172.636 230.933 172.636 230.608V225.281ZM179.629 228.769V231.975H178.578V226.575H179.587V227.454H179.654C179.778 227.168 179.972 226.938 180.237 226.765C180.504 226.592 180.841 226.505 181.246 226.505C181.614 226.505 181.936 226.582 182.213 226.737C182.489 226.889 182.704 227.117 182.856 227.419C183.009 227.721 183.085 228.095 183.085 228.54V231.975H182.034V228.667C182.034 228.275 181.932 227.97 181.728 227.749C181.524 227.527 181.244 227.415 180.888 227.415C180.644 227.415 180.427 227.468 180.237 227.574C180.05 227.679 179.901 227.834 179.791 228.038C179.683 228.239 179.629 228.483 179.629 228.769ZM186.822 232.084C186.29 232.084 185.832 231.97 185.447 231.743C185.065 231.513 184.77 231.191 184.561 230.776C184.355 230.359 184.252 229.87 184.252 229.31C184.252 228.757 184.355 228.27 184.561 227.848C184.77 227.426 185.061 227.097 185.433 226.86C185.808 226.623 186.246 226.505 186.748 226.505C187.053 226.505 187.348 226.555 187.634 226.656C187.92 226.757 188.177 226.915 188.404 227.131C188.631 227.346 188.811 227.626 188.942 227.971C189.073 228.313 189.139 228.729 189.139 229.219V229.592H184.846V228.804H188.109C188.109 228.527 188.052 228.283 187.94 228.069C187.827 227.854 187.669 227.684 187.465 227.559C187.264 227.435 187.027 227.373 186.755 227.373C186.46 227.373 186.202 227.446 185.982 227.591C185.764 227.734 185.595 227.922 185.475 228.154C185.358 228.383 185.3 228.633 185.3 228.902V229.518C185.3 229.879 185.363 230.186 185.489 230.439C185.618 230.692 185.798 230.885 186.027 231.019C186.257 231.15 186.525 231.216 186.832 231.216C187.032 231.216 187.213 231.188 187.377 231.131C187.541 231.073 187.683 230.986 187.803 230.871C187.922 230.756 188.014 230.615 188.077 230.446L189.072 230.625C188.992 230.918 188.849 231.175 188.643 231.395C188.439 231.613 188.182 231.783 187.873 231.905C187.566 232.024 187.216 232.084 186.822 232.084ZM191.466 231.975L189.877 226.575H190.963L192.021 230.541H192.074L193.136 226.575H194.222L195.277 230.523H195.33L196.381 226.575H197.467L195.882 231.975H194.809L193.713 228.076H193.632L192.535 231.975H191.466ZM202.511 227.893L201.559 228.062C201.519 227.94 201.455 227.824 201.369 227.714C201.284 227.604 201.169 227.514 201.024 227.443C200.879 227.373 200.697 227.338 200.479 227.338C200.182 227.338 199.933 227.405 199.734 227.538C199.535 227.67 199.435 227.84 199.435 228.048C199.435 228.229 199.502 228.374 199.635 228.484C199.769 228.594 199.985 228.684 200.282 228.755L201.14 228.952C201.637 229.067 202.007 229.243 202.251 229.483C202.495 229.722 202.617 230.032 202.617 230.414C202.617 230.738 202.523 231.026 202.335 231.279C202.15 231.53 201.891 231.727 201.559 231.87C201.228 232.013 200.845 232.084 200.409 232.084C199.804 232.084 199.311 231.955 198.929 231.697C198.547 231.437 198.312 231.068 198.226 230.59L199.242 230.435C199.305 230.7 199.435 230.9 199.632 231.036C199.829 231.17 200.085 231.237 200.402 231.237C200.746 231.237 201.022 231.165 201.228 231.022C201.434 230.877 201.537 230.7 201.537 230.492C201.537 230.323 201.474 230.181 201.348 230.066C201.223 229.951 201.032 229.865 200.775 229.806L199.86 229.606C199.357 229.491 198.984 229.308 198.742 229.057C198.503 228.806 198.384 228.489 198.384 228.104C198.384 227.786 198.473 227.507 198.651 227.268C198.829 227.029 199.075 226.842 199.389 226.709C199.703 226.573 200.063 226.505 200.469 226.505C201.052 226.505 201.512 226.631 201.847 226.884C202.182 227.135 202.403 227.472 202.511 227.893ZM204.922 229.904V229.838C204.927 229.402 204.97 229.055 205.052 228.797C205.137 228.539 205.256 228.331 205.411 228.171C205.565 228.012 205.752 227.867 205.97 227.735C206.11 227.646 206.237 227.547 206.349 227.436C206.462 227.326 206.551 227.2 206.617 227.057C206.682 226.914 206.715 226.756 206.715 226.582C206.715 226.374 206.666 226.193 206.567 226.041C206.469 225.888 206.338 225.771 206.174 225.689C206.012 225.605 205.831 225.563 205.632 225.563C205.452 225.563 205.279 225.6 205.115 225.675C204.951 225.75 204.815 225.867 204.708 226.027C204.6 226.184 204.538 226.386 204.521 226.635H203.453C203.469 226.213 203.576 225.857 203.772 225.566C203.969 225.273 204.229 225.052 204.553 224.902C204.879 224.752 205.238 224.677 205.632 224.677C206.063 224.677 206.441 224.758 206.764 224.919C207.088 225.079 207.338 225.302 207.517 225.591C207.697 225.877 207.787 226.211 207.787 226.593C207.787 226.855 207.746 227.092 207.664 227.303C207.582 227.511 207.465 227.698 207.313 227.862C207.163 228.026 206.982 228.171 206.771 228.298C206.572 228.422 206.41 228.551 206.286 228.684C206.164 228.818 206.075 228.976 206.019 229.159C205.963 229.342 205.932 229.568 205.928 229.838V229.904H204.922ZM205.453 232.042C205.261 232.042 205.096 231.974 204.957 231.838C204.819 231.7 204.75 231.533 204.75 231.339C204.75 231.147 204.819 230.983 204.957 230.847C205.096 230.708 205.261 230.639 205.453 230.639C205.643 230.639 205.807 230.708 205.945 230.847C206.086 230.983 206.156 231.147 206.156 231.339C206.156 231.468 206.123 231.586 206.058 231.694C205.994 231.799 205.91 231.884 205.804 231.947C205.699 232.01 205.582 232.042 205.453 232.042Z" fill="#155EEF"/>
-<rect x="85.8063" y="217.056" width="132.387" height="22.8375" rx="6.39375" stroke="#EAECF0" stroke-width="0.4125"/>
-</g>
-<g filter="url(#filter2_d_3256_32105)">
-<rect x="69.1001" y="246.7" width="165.8" height="23.25" rx="6.6" fill="white"/>
-<path d="M81.2008 261.825L79.2039 254.625H80.3465L81.7492 260.201H81.816L83.275 254.625H84.407L85.866 260.204H85.9328L87.332 254.625H88.4781L86.4777 261.825H85.3844L83.8691 256.432H83.8129L82.2977 261.825H81.2008ZM90.4354 258.619V261.825H89.3843V254.625H90.4214V257.304H90.4882C90.6147 257.013 90.8081 256.783 91.0683 256.612C91.3284 256.44 91.6683 256.355 92.0878 256.355C92.4581 256.355 92.7815 256.431 93.0581 256.583C93.337 256.736 93.5526 256.963 93.705 257.265C93.8597 257.565 93.937 257.94 93.937 258.39V261.825H92.8858V258.517C92.8858 258.121 92.7839 257.814 92.58 257.596C92.3761 257.376 92.0925 257.265 91.7292 257.265C91.4808 257.265 91.2581 257.318 91.0612 257.424C90.8667 257.529 90.7132 257.684 90.6007 257.888C90.4905 258.089 90.4354 258.333 90.4354 258.619ZM96.9112 261.945C96.569 261.945 96.2597 261.881 95.9831 261.755C95.7065 261.626 95.4874 261.44 95.3257 261.196C95.1663 260.952 95.0866 260.653 95.0866 260.299C95.0866 259.995 95.1452 259.744 95.2624 259.547C95.3796 259.35 95.5378 259.194 95.737 259.079C95.9362 258.965 96.1589 258.878 96.405 258.819C96.6511 258.761 96.9019 258.716 97.1573 258.686C97.4808 258.648 97.7433 258.618 97.9448 258.594C98.1464 258.569 98.2929 258.528 98.3843 258.471C98.4757 258.415 98.5214 258.324 98.5214 258.197V258.172C98.5214 257.865 98.4347 257.628 98.2612 257.459C98.0901 257.29 97.8347 257.206 97.4948 257.206C97.1409 257.206 96.862 257.284 96.6581 257.441C96.4565 257.596 96.3171 257.768 96.2397 257.958L95.2519 257.733C95.369 257.405 95.5401 257.14 95.7651 256.938C95.9925 256.735 96.2538 256.587 96.5491 256.496C96.8444 256.402 97.155 256.355 97.4808 256.355C97.6964 256.355 97.9249 256.381 98.1663 256.432C98.4101 256.481 98.6374 256.573 98.8483 256.706C99.0616 256.84 99.2362 257.031 99.3722 257.279C99.5081 257.526 99.5761 257.846 99.5761 258.239V261.825H98.5495V261.087H98.5073C98.4394 261.223 98.3374 261.356 98.2015 261.488C98.0655 261.619 97.8909 261.728 97.6776 261.815C97.4644 261.901 97.2089 261.945 96.9112 261.945ZM97.1397 261.101C97.4304 261.101 97.6788 261.044 97.8851 260.929C98.0937 260.814 98.2519 260.664 98.3597 260.479C98.4698 260.291 98.5249 260.091 98.5249 259.878V259.181C98.4874 259.219 98.4147 259.254 98.3069 259.287C98.2015 259.317 98.0808 259.344 97.9448 259.368C97.8089 259.389 97.6765 259.409 97.5476 259.428C97.4187 259.444 97.3108 259.458 97.2241 259.47C97.0202 259.496 96.8339 259.539 96.6651 259.6C96.4987 259.661 96.3651 259.749 96.2644 259.863C96.1659 259.976 96.1167 260.126 96.1167 260.313C96.1167 260.574 96.2128 260.771 96.405 260.904C96.5972 261.035 96.8421 261.101 97.1397 261.101ZM103.497 256.425V257.269H100.547V256.425H103.497ZM101.338 255.131H102.389V260.24C102.389 260.444 102.42 260.597 102.481 260.7C102.542 260.801 102.62 260.87 102.716 260.908C102.815 260.943 102.921 260.96 103.036 260.96C103.121 260.96 103.195 260.954 103.258 260.943C103.321 260.931 103.37 260.922 103.405 260.915L103.595 261.783C103.534 261.806 103.448 261.83 103.335 261.853C103.223 261.879 103.082 261.893 102.913 261.896C102.637 261.9 102.379 261.851 102.14 261.748C101.901 261.645 101.707 261.485 101.56 261.27C101.412 261.054 101.338 260.783 101.338 260.458V255.131ZM105.458 254.625V257.188H104.586V254.625H105.458ZM110.862 257.744L109.909 257.912C109.87 257.79 109.806 257.674 109.72 257.564C109.635 257.454 109.52 257.364 109.375 257.294C109.23 257.223 109.048 257.188 108.83 257.188C108.532 257.188 108.284 257.255 108.085 257.388C107.886 257.52 107.786 257.69 107.786 257.898C107.786 258.079 107.853 258.224 107.986 258.334C108.12 258.444 108.336 258.535 108.633 258.605L109.491 258.802C109.988 258.917 110.358 259.094 110.602 259.333C110.846 259.572 110.968 259.882 110.968 260.264C110.968 260.588 110.874 260.876 110.686 261.129C110.501 261.38 110.242 261.577 109.909 261.72C109.579 261.863 109.196 261.934 108.76 261.934C108.155 261.934 107.662 261.805 107.28 261.547C106.898 261.287 106.663 260.918 106.577 260.44L107.593 260.285C107.656 260.55 107.786 260.751 107.983 260.887C108.18 261.02 108.436 261.087 108.753 261.087C109.097 261.087 109.373 261.015 109.579 260.872C109.785 260.727 109.888 260.55 109.888 260.342C109.888 260.173 109.825 260.031 109.698 259.916C109.574 259.801 109.383 259.715 109.125 259.656L108.211 259.456C107.707 259.341 107.335 259.158 107.093 258.907C106.854 258.656 106.735 258.339 106.735 257.954C106.735 257.636 106.824 257.357 107.002 257.118C107.18 256.879 107.426 256.692 107.74 256.559C108.054 256.423 108.414 256.355 108.82 256.355C109.403 256.355 109.863 256.481 110.198 256.735C110.533 256.985 110.754 257.322 110.862 257.744ZM117.264 256.425V257.269H114.314V256.425H117.264ZM115.105 255.131H116.157V260.24C116.157 260.444 116.187 260.597 116.248 260.7C116.309 260.801 116.388 260.87 116.484 260.908C116.582 260.943 116.689 260.96 116.804 260.96C116.888 260.96 116.962 260.954 117.025 260.943C117.088 260.931 117.138 260.922 117.173 260.915L117.363 261.783C117.302 261.806 117.215 261.83 117.102 261.853C116.99 261.879 116.849 261.893 116.68 261.896C116.404 261.9 116.146 261.851 115.907 261.748C115.668 261.645 115.475 261.485 115.327 261.27C115.179 261.054 115.105 260.783 115.105 260.458V255.131ZM119.594 258.619V261.825H118.543V254.625H119.58V257.304H119.647C119.773 257.013 119.967 256.783 120.227 256.612C120.487 256.44 120.827 256.355 121.246 256.355C121.617 256.355 121.94 256.431 122.217 256.583C122.496 256.736 122.711 256.963 122.864 257.265C123.018 257.565 123.096 257.94 123.096 258.39V261.825H122.044V258.517C122.044 258.121 121.942 257.814 121.739 257.596C121.535 257.376 121.251 257.265 120.888 257.265C120.639 257.265 120.417 257.318 120.22 257.424C120.025 257.529 119.872 257.684 119.759 257.888C119.649 258.089 119.594 258.333 119.594 258.619ZM126.826 261.934C126.294 261.934 125.835 261.821 125.451 261.593C125.069 261.363 124.774 261.041 124.565 260.626C124.359 260.209 124.256 259.721 124.256 259.16C124.256 258.607 124.359 258.12 124.565 257.698C124.774 257.276 125.064 256.947 125.437 256.71C125.812 256.473 126.25 256.355 126.752 256.355C127.057 256.355 127.352 256.405 127.638 256.506C127.924 256.607 128.18 256.765 128.408 256.981C128.635 257.196 128.814 257.476 128.946 257.821C129.077 258.163 129.142 258.579 129.142 259.069V259.442H124.85V258.654H128.112C128.112 258.378 128.056 258.133 127.944 257.919C127.831 257.704 127.673 257.534 127.469 257.41C127.267 257.285 127.031 257.223 126.759 257.223C126.464 257.223 126.206 257.296 125.985 257.441C125.767 257.584 125.599 257.772 125.479 258.004C125.362 258.233 125.303 258.483 125.303 258.753V259.368C125.303 259.729 125.367 260.036 125.493 260.289C125.622 260.542 125.801 260.735 126.031 260.869C126.261 261 126.529 261.066 126.836 261.066C127.035 261.066 127.217 261.038 127.381 260.981C127.545 260.923 127.687 260.836 127.807 260.721C127.926 260.606 128.017 260.465 128.081 260.296L129.076 260.475C128.996 260.768 128.853 261.025 128.647 261.245C128.443 261.463 128.186 261.633 127.877 261.755C127.57 261.874 127.219 261.934 126.826 261.934ZM134.1 261.825L132.51 256.425H133.597L134.655 260.391H134.708L135.769 256.425H136.856L137.91 260.373H137.963L139.014 256.425H140.101L138.515 261.825H137.443L136.346 257.926H136.265L135.168 261.825H134.1ZM143.261 261.934C142.729 261.934 142.271 261.821 141.887 261.593C141.505 261.363 141.209 261.041 141.001 260.626C140.794 260.209 140.691 259.721 140.691 259.16C140.691 258.607 140.794 258.12 141.001 257.698C141.209 257.276 141.5 256.947 141.873 256.71C142.248 256.473 142.686 256.355 143.187 256.355C143.492 256.355 143.787 256.405 144.073 256.506C144.359 256.607 144.616 256.765 144.843 256.981C145.071 257.196 145.25 257.476 145.381 257.821C145.512 258.163 145.578 258.579 145.578 259.069V259.442H141.285V258.654H144.548C144.548 258.378 144.492 258.133 144.379 257.919C144.267 257.704 144.108 257.534 143.905 257.41C143.703 257.285 143.466 257.223 143.194 257.223C142.899 257.223 142.641 257.296 142.421 257.441C142.203 257.584 142.034 257.772 141.915 258.004C141.798 258.233 141.739 258.483 141.739 258.753V259.368C141.739 259.729 141.802 260.036 141.929 260.289C142.058 260.542 142.237 260.735 142.467 260.869C142.696 261 142.965 261.066 143.272 261.066C143.471 261.066 143.653 261.038 143.817 260.981C143.981 260.923 144.123 260.836 144.242 260.721C144.362 260.606 144.453 260.465 144.516 260.296L145.511 260.475C145.432 260.768 145.289 261.025 145.082 261.245C144.878 261.463 144.622 261.633 144.312 261.755C144.005 261.874 143.655 261.934 143.261 261.934ZM148.316 261.945C147.974 261.945 147.664 261.881 147.388 261.755C147.111 261.626 146.892 261.44 146.73 261.196C146.571 260.952 146.491 260.653 146.491 260.299C146.491 259.995 146.55 259.744 146.667 259.547C146.784 259.35 146.942 259.194 147.142 259.079C147.341 258.965 147.563 258.878 147.81 258.819C148.056 258.761 148.306 258.716 148.562 258.686C148.885 258.648 149.148 258.618 149.349 258.594C149.551 258.569 149.697 258.528 149.789 258.471C149.88 258.415 149.926 258.324 149.926 258.197V258.172C149.926 257.865 149.839 257.628 149.666 257.459C149.495 257.29 149.239 257.206 148.899 257.206C148.546 257.206 148.267 257.284 148.063 257.441C147.861 257.596 147.722 257.768 147.644 257.958L146.656 257.733C146.774 257.405 146.945 257.14 147.17 256.938C147.397 256.735 147.658 256.587 147.954 256.496C148.249 256.402 148.56 256.355 148.885 256.355C149.101 256.355 149.329 256.381 149.571 256.432C149.815 256.481 150.042 256.573 150.253 256.706C150.466 256.84 150.641 257.031 150.777 257.279C150.913 257.526 150.981 257.846 150.981 258.239V261.825H149.954V261.087H149.912C149.844 261.223 149.742 261.356 149.606 261.488C149.47 261.619 149.296 261.728 149.082 261.815C148.869 261.901 148.613 261.945 148.316 261.945ZM148.544 261.101C148.835 261.101 149.083 261.044 149.29 260.929C149.498 260.814 149.656 260.664 149.764 260.479C149.874 260.291 149.929 260.091 149.929 259.878V259.181C149.892 259.219 149.819 259.254 149.712 259.287C149.606 259.317 149.485 259.344 149.349 259.368C149.213 259.389 149.081 259.409 148.952 259.428C148.823 259.444 148.715 259.458 148.629 259.47C148.425 259.496 148.238 259.539 148.07 259.6C147.903 259.661 147.77 259.749 147.669 259.863C147.571 259.976 147.521 260.126 147.521 260.313C147.521 260.574 147.617 260.771 147.81 260.904C148.002 261.035 148.247 261.101 148.544 261.101ZM154.901 256.425V257.269H151.952V256.425H154.901ZM152.743 255.131H153.794V260.24C153.794 260.444 153.825 260.597 153.885 260.7C153.946 260.801 154.025 260.87 154.121 260.908C154.219 260.943 154.326 260.96 154.441 260.96C154.525 260.96 154.599 260.954 154.662 260.943C154.726 260.931 154.775 260.922 154.81 260.915L155 261.783C154.939 261.806 154.852 261.83 154.74 261.853C154.627 261.879 154.487 261.893 154.318 261.896C154.041 261.9 153.784 261.851 153.544 261.748C153.305 261.645 153.112 261.485 152.964 261.27C152.817 261.054 152.743 260.783 152.743 260.458V255.131ZM157.231 258.619V261.825H156.18V254.625H157.217V257.304H157.284C157.411 257.013 157.604 256.783 157.864 256.612C158.124 256.44 158.464 256.355 158.884 256.355C159.254 256.355 159.578 256.431 159.854 256.583C160.133 256.736 160.349 256.963 160.501 257.265C160.656 257.565 160.733 257.94 160.733 258.39V261.825H159.682V258.517C159.682 258.121 159.58 257.814 159.376 257.596C159.172 257.376 158.888 257.265 158.525 257.265C158.277 257.265 158.054 257.318 157.857 257.424C157.663 257.529 157.509 257.684 157.397 257.888C157.287 258.089 157.231 258.333 157.231 258.619ZM164.463 261.934C163.931 261.934 163.473 261.821 163.088 261.593C162.706 261.363 162.411 261.041 162.203 260.626C161.996 260.209 161.893 259.721 161.893 259.16C161.893 258.607 161.996 258.12 162.203 257.698C162.411 257.276 162.702 256.947 163.074 256.71C163.449 256.473 163.888 256.355 164.389 256.355C164.694 256.355 164.989 256.405 165.275 256.506C165.561 256.607 165.818 256.765 166.045 256.981C166.272 257.196 166.452 257.476 166.583 257.821C166.714 258.163 166.78 258.579 166.78 259.069V259.442H162.487V258.654H165.75C165.75 258.378 165.694 258.133 165.581 257.919C165.469 257.704 165.31 257.534 165.106 257.41C164.905 257.285 164.668 257.223 164.396 257.223C164.101 257.223 163.843 257.296 163.623 257.441C163.405 257.584 163.236 257.772 163.117 258.004C162.999 258.233 162.941 258.483 162.941 258.753V259.368C162.941 259.729 163.004 260.036 163.131 260.289C163.26 260.542 163.439 260.735 163.669 260.869C163.898 261 164.167 261.066 164.474 261.066C164.673 261.066 164.854 261.038 165.019 260.981C165.183 260.923 165.324 260.836 165.444 260.721C165.563 260.606 165.655 260.465 165.718 260.296L166.713 260.475C166.633 260.768 166.49 261.025 166.284 261.245C166.08 261.463 165.824 261.633 165.514 261.755C165.207 261.874 164.857 261.934 164.463 261.934ZM167.946 261.825V256.425H168.962V257.283H169.018C169.117 256.992 169.29 256.764 169.539 256.597C169.79 256.429 170.073 256.344 170.39 256.344C170.455 256.344 170.533 256.347 170.622 256.351C170.713 256.356 170.784 256.362 170.836 256.369V257.374C170.794 257.363 170.719 257.35 170.611 257.336C170.503 257.319 170.395 257.311 170.288 257.311C170.039 257.311 169.818 257.364 169.623 257.469C169.431 257.572 169.279 257.717 169.166 257.902C169.054 258.085 168.997 258.293 168.997 258.528V261.825H167.946ZM175.417 254.625V261.825H174.366V254.625H175.417ZM176.831 261.825V256.425H177.882V261.825H176.831ZM177.362 255.592C177.179 255.592 177.022 255.531 176.891 255.409C176.762 255.285 176.697 255.137 176.697 254.966C176.697 254.793 176.762 254.645 176.891 254.523C177.022 254.399 177.179 254.337 177.362 254.337C177.545 254.337 177.701 254.399 177.829 254.523C177.961 254.645 178.026 254.793 178.026 254.966C178.026 255.137 177.961 255.285 177.829 255.409C177.701 255.531 177.545 255.592 177.362 255.592ZM180.263 259.994L180.256 258.71H180.439L182.591 256.425H183.849L181.395 259.027H181.23L180.263 259.994ZM179.296 261.825V254.625H180.348V261.825H179.296ZM182.707 261.825L180.773 259.259L181.497 258.524L183.997 261.825H182.707ZM186.912 261.934C186.38 261.934 185.922 261.821 185.538 261.593C185.155 261.363 184.86 261.041 184.652 260.626C184.445 260.209 184.342 259.721 184.342 259.16C184.342 258.607 184.445 258.12 184.652 257.698C184.86 257.276 185.151 256.947 185.523 256.71C185.898 256.473 186.337 256.355 186.838 256.355C187.143 256.355 187.438 256.405 187.724 256.506C188.01 256.607 188.267 256.765 188.494 256.981C188.721 257.196 188.901 257.476 189.032 257.821C189.163 258.163 189.229 258.579 189.229 259.069V259.442H184.936V258.654H188.199C188.199 258.378 188.143 258.133 188.03 257.919C187.918 257.704 187.759 257.534 187.555 257.41C187.354 257.285 187.117 257.223 186.845 257.223C186.55 257.223 186.292 257.296 186.072 257.441C185.854 257.584 185.685 257.772 185.566 258.004C185.448 258.233 185.39 258.483 185.39 258.753V259.368C185.39 259.729 185.453 260.036 185.58 260.289C185.709 260.542 185.888 260.735 186.118 260.869C186.347 261 186.616 261.066 186.923 261.066C187.122 261.066 187.304 261.038 187.468 260.981C187.632 260.923 187.773 260.836 187.893 260.721C188.013 260.606 188.104 260.465 188.167 260.296L189.162 260.475C189.082 260.768 188.939 261.025 188.733 261.245C188.529 261.463 188.273 261.633 187.963 261.755C187.656 261.874 187.306 261.934 186.912 261.934ZM195.536 256.425V257.269H192.586V256.425H195.536ZM193.377 255.131H194.429V260.24C194.429 260.444 194.459 260.597 194.52 260.7C194.581 260.801 194.659 260.87 194.755 260.908C194.854 260.943 194.961 260.96 195.075 260.96C195.16 260.96 195.234 260.954 195.297 260.943C195.36 260.931 195.409 260.922 195.445 260.915L195.634 261.783C195.573 261.806 195.487 261.83 195.374 261.853C195.262 261.879 195.121 261.893 194.952 261.896C194.676 261.9 194.418 261.851 194.179 261.748C193.94 261.645 193.746 261.485 193.599 261.27C193.451 261.054 193.377 260.783 193.377 260.458V255.131ZM198.915 261.934C198.409 261.934 197.967 261.818 197.59 261.586C197.213 261.354 196.92 261.029 196.711 260.612C196.502 260.195 196.398 259.708 196.398 259.15C196.398 258.59 196.502 258.1 196.711 257.68C196.92 257.261 197.213 256.935 197.59 256.703C197.967 256.471 198.409 256.355 198.915 256.355C199.422 256.355 199.863 256.471 200.241 256.703C200.618 256.935 200.911 257.261 201.12 257.68C201.328 258.1 201.433 258.59 201.433 259.15C201.433 259.708 201.328 260.195 201.12 260.612C200.911 261.029 200.618 261.354 200.241 261.586C199.863 261.818 199.422 261.934 198.915 261.934ZM198.919 261.052C199.247 261.052 199.519 260.965 199.734 260.792C199.95 260.618 200.109 260.387 200.213 260.099C200.318 259.811 200.371 259.493 200.371 259.146C200.371 258.802 200.318 258.485 200.213 258.197C200.109 257.906 199.95 257.673 199.734 257.497C199.519 257.322 199.247 257.234 198.919 257.234C198.588 257.234 198.314 257.322 198.096 257.497C197.881 257.673 197.72 257.906 197.615 258.197C197.511 258.485 197.46 258.802 197.46 259.146C197.46 259.493 197.511 259.811 197.615 260.099C197.72 260.387 197.881 260.618 198.096 260.792C198.314 260.965 198.588 261.052 198.919 261.052ZM204.627 261.931C204.191 261.931 203.802 261.819 203.46 261.597C203.12 261.372 202.853 261.052 202.659 260.637C202.466 260.22 202.37 259.719 202.37 259.136C202.37 258.552 202.468 258.053 202.662 257.638C202.859 257.223 203.129 256.906 203.471 256.685C203.813 256.465 204.201 256.355 204.634 256.355C204.97 256.355 205.239 256.411 205.443 256.524C205.649 256.634 205.809 256.763 205.921 256.91C206.036 257.058 206.125 257.188 206.188 257.301H206.252V254.625H207.303V261.825H206.276V260.985H206.188C206.125 261.1 206.034 261.231 205.914 261.379C205.797 261.526 205.635 261.655 205.429 261.765C205.223 261.876 204.955 261.931 204.627 261.931ZM204.859 261.034C205.162 261.034 205.417 260.954 205.626 260.795C205.837 260.633 205.996 260.41 206.104 260.124C206.214 259.838 206.269 259.505 206.269 259.125C206.269 258.75 206.215 258.422 206.107 258.141C206 257.86 205.841 257.64 205.633 257.483C205.424 257.326 205.166 257.248 204.859 257.248C204.543 257.248 204.279 257.33 204.068 257.494C203.857 257.658 203.698 257.882 203.59 258.165C203.485 258.449 203.432 258.769 203.432 259.125C203.432 259.486 203.486 259.811 203.594 260.099C203.702 260.387 203.861 260.616 204.072 260.785C204.285 260.951 204.548 261.034 204.859 261.034ZM210.375 261.945C210.032 261.945 209.723 261.881 209.446 261.755C209.17 261.626 208.951 261.44 208.789 261.196C208.63 260.952 208.55 260.653 208.55 260.299C208.55 259.995 208.608 259.744 208.726 259.547C208.843 259.35 209.001 259.194 209.2 259.079C209.4 258.965 209.622 258.878 209.868 258.819C210.114 258.761 210.365 258.716 210.621 258.686C210.944 258.648 211.207 258.618 211.408 258.594C211.61 258.569 211.756 258.528 211.848 258.471C211.939 258.415 211.985 258.324 211.985 258.197V258.172C211.985 257.865 211.898 257.628 211.725 257.459C211.553 257.29 211.298 257.206 210.958 257.206C210.604 257.206 210.325 257.284 210.121 257.441C209.92 257.596 209.78 257.768 209.703 257.958L208.715 257.733C208.832 257.405 209.003 257.14 209.228 256.938C209.456 256.735 209.717 256.587 210.012 256.496C210.308 256.402 210.618 256.355 210.944 256.355C211.16 256.355 211.388 256.381 211.63 256.432C211.873 256.481 212.101 256.573 212.312 256.706C212.525 256.84 212.7 257.031 212.835 257.279C212.971 257.526 213.039 257.846 213.039 258.239V261.825H212.013V261.087H211.971C211.903 261.223 211.801 261.356 211.665 261.488C211.529 261.619 211.354 261.728 211.141 261.815C210.928 261.901 210.672 261.945 210.375 261.945ZM210.603 261.101C210.894 261.101 211.142 261.044 211.348 260.929C211.557 260.814 211.715 260.664 211.823 260.479C211.933 260.291 211.988 260.091 211.988 259.878V259.181C211.951 259.219 211.878 259.254 211.77 259.287C211.665 259.317 211.544 259.344 211.408 259.368C211.272 259.389 211.14 259.409 211.011 259.428C210.882 259.444 210.774 259.458 210.687 259.47C210.483 259.496 210.297 259.539 210.128 259.6C209.962 259.661 209.828 259.749 209.728 259.863C209.629 259.976 209.58 260.126 209.58 260.313C209.58 260.574 209.676 260.771 209.868 260.904C210.06 261.035 210.305 261.101 210.603 261.101ZM214.911 263.85C214.754 263.85 214.611 263.837 214.482 263.812C214.353 263.788 214.257 263.762 214.193 263.734L214.446 262.873C214.639 262.924 214.81 262.947 214.96 262.94C215.11 262.933 215.242 262.876 215.357 262.771C215.474 262.665 215.577 262.493 215.666 262.254L215.796 261.896L213.821 256.425H214.946L216.313 260.616H216.37L217.737 256.425H218.866L216.64 262.546C216.537 262.827 216.406 263.065 216.246 263.26C216.087 263.456 215.897 263.604 215.677 263.703C215.457 263.801 215.201 263.85 214.911 263.85ZM221.003 259.754V259.688C221.008 259.252 221.051 258.905 221.133 258.647C221.218 258.389 221.337 258.181 221.492 258.021C221.646 257.862 221.833 257.717 222.051 257.585C222.191 257.496 222.318 257.397 222.43 257.287C222.543 257.176 222.632 257.05 222.698 256.907C222.763 256.764 222.796 256.606 222.796 256.432C222.796 256.224 222.747 256.043 222.648 255.891C222.55 255.738 222.419 255.621 222.255 255.539C222.093 255.455 221.913 255.413 221.713 255.413C221.533 255.413 221.361 255.45 221.196 255.525C221.032 255.6 220.896 255.717 220.789 255.877C220.681 256.034 220.619 256.237 220.602 256.485H219.534C219.55 256.063 219.657 255.707 219.854 255.416C220.05 255.123 220.311 254.902 220.634 254.752C220.96 254.602 221.32 254.527 221.713 254.527C222.145 254.527 222.522 254.608 222.845 254.769C223.169 254.929 223.42 255.153 223.598 255.441C223.778 255.727 223.868 256.061 223.868 256.443C223.868 256.705 223.827 256.942 223.745 257.153C223.663 257.362 223.546 257.548 223.394 257.712C223.244 257.876 223.063 258.021 222.852 258.148C222.653 258.272 222.491 258.401 222.367 258.535C222.245 258.668 222.156 258.826 222.1 259.009C222.044 259.192 222.013 259.418 222.009 259.688V259.754H221.003ZM221.534 261.892C221.342 261.892 221.177 261.824 221.038 261.688C220.9 261.55 220.831 261.383 220.831 261.189C220.831 260.997 220.9 260.833 221.038 260.697C221.177 260.558 221.342 260.489 221.534 260.489C221.724 260.489 221.888 260.558 222.026 260.697C222.167 260.833 222.237 260.997 222.237 261.189C222.237 261.318 222.204 261.436 222.139 261.544C222.075 261.649 221.991 261.734 221.886 261.797C221.78 261.86 221.663 261.892 221.534 261.892Z" fill="#155EEF"/>
-<rect x="69.3063" y="246.906" width="165.387" height="22.8375" rx="6.39375" stroke="#EAECF0" stroke-width="0.4125"/>
-</g>
-<g filter="url(#filter3_d_3256_32105)">
-<rect x="91.1001" y="276.55" width="121.8" height="23.25" rx="6.6" fill="white"/>
-<path d="M103.201 291.675L101.204 284.475H102.346L103.749 290.051H103.816L105.275 284.475H106.407L107.866 290.054H107.933L109.332 284.475H110.478L108.478 291.675H107.384L105.869 286.282H105.813L104.298 291.675H103.201ZM112.435 288.469V291.675H111.384V284.475H112.421V287.154H112.488C112.615 286.863 112.808 286.632 113.068 286.461C113.328 286.29 113.668 286.205 114.088 286.205C114.458 286.205 114.782 286.281 115.058 286.433C115.337 286.586 115.553 286.813 115.705 287.115C115.86 287.415 115.937 287.79 115.937 288.24V291.675H114.886V288.367C114.886 287.971 114.784 287.664 114.58 287.446C114.376 287.225 114.092 287.115 113.729 287.115C113.481 287.115 113.258 287.168 113.061 287.273C112.867 287.379 112.713 287.534 112.601 287.738C112.491 287.939 112.435 288.183 112.435 288.469ZM118.911 291.795C118.569 291.795 118.26 291.731 117.983 291.605C117.707 291.476 117.487 291.29 117.326 291.046C117.166 290.802 117.087 290.503 117.087 290.149C117.087 289.845 117.145 289.594 117.262 289.397C117.38 289.2 117.538 289.044 117.737 288.929C117.936 288.815 118.159 288.728 118.405 288.669C118.651 288.611 118.902 288.566 119.157 288.536C119.481 288.498 119.743 288.468 119.945 288.444C120.146 288.418 120.293 288.377 120.384 288.321C120.476 288.265 120.521 288.173 120.521 288.047V288.022C120.521 287.715 120.435 287.477 120.261 287.309C120.09 287.14 119.835 287.056 119.495 287.056C119.141 287.056 118.862 287.134 118.658 287.291C118.457 287.446 118.317 287.618 118.24 287.808L117.252 287.583C117.369 287.255 117.54 286.99 117.765 286.788C117.992 286.584 118.254 286.437 118.549 286.345C118.844 286.252 119.155 286.205 119.481 286.205C119.696 286.205 119.925 286.231 120.166 286.282C120.41 286.331 120.637 286.423 120.848 286.556C121.062 286.69 121.236 286.881 121.372 287.129C121.508 287.375 121.576 287.695 121.576 288.089V291.675H120.55V290.937H120.507C120.439 291.073 120.337 291.206 120.201 291.338C120.066 291.469 119.891 291.578 119.678 291.665C119.464 291.751 119.209 291.795 118.911 291.795ZM119.14 290.951C119.43 290.951 119.679 290.893 119.885 290.779C120.094 290.664 120.252 290.514 120.36 290.329C120.47 290.141 120.525 289.941 120.525 289.727V289.031C120.487 289.069 120.415 289.104 120.307 289.137C120.201 289.167 120.081 289.194 119.945 289.218C119.809 289.239 119.676 289.259 119.548 289.277C119.419 289.294 119.311 289.308 119.224 289.32C119.02 289.345 118.834 289.389 118.665 289.45C118.499 289.511 118.365 289.598 118.264 289.713C118.166 289.826 118.117 289.976 118.117 290.163C118.117 290.423 118.213 290.62 118.405 290.754C118.597 290.885 118.842 290.951 119.14 290.951ZM125.497 286.275V287.119H122.547V286.275H125.497ZM123.338 284.981H124.389V290.09C124.389 290.293 124.42 290.447 124.481 290.55C124.542 290.651 124.62 290.72 124.716 290.757C124.815 290.793 124.921 290.81 125.036 290.81C125.121 290.81 125.195 290.804 125.258 290.793C125.321 290.781 125.37 290.772 125.405 290.765L125.595 291.633C125.534 291.656 125.448 291.68 125.335 291.703C125.223 291.729 125.082 291.743 124.913 291.745C124.637 291.75 124.379 291.701 124.14 291.598C123.901 291.495 123.707 291.335 123.56 291.12C123.412 290.904 123.338 290.633 123.338 290.307V284.981ZM127.458 284.475V287.038H126.586V284.475H127.458ZM132.862 287.593L131.909 287.762C131.87 287.64 131.806 287.524 131.72 287.414C131.635 287.304 131.52 287.214 131.375 287.143C131.23 287.073 131.048 287.038 130.83 287.038C130.532 287.038 130.284 287.105 130.085 287.238C129.886 287.37 129.786 287.54 129.786 287.748C129.786 287.929 129.853 288.074 129.986 288.184C130.12 288.294 130.336 288.384 130.633 288.455L131.491 288.652C131.988 288.766 132.358 288.943 132.602 289.182C132.846 289.422 132.968 289.732 132.968 290.114C132.968 290.438 132.874 290.726 132.686 290.979C132.501 291.23 132.242 291.427 131.909 291.57C131.579 291.713 131.196 291.784 130.76 291.784C130.155 291.784 129.662 291.655 129.28 291.397C128.898 291.137 128.663 290.768 128.577 290.29L129.593 290.135C129.656 290.4 129.786 290.6 129.983 290.736C130.18 290.87 130.436 290.937 130.753 290.937C131.097 290.937 131.373 290.865 131.579 290.722C131.785 290.577 131.888 290.4 131.888 290.191C131.888 290.023 131.825 289.881 131.698 289.766C131.574 289.651 131.383 289.565 131.125 289.506L130.211 289.306C129.707 289.191 129.335 289.008 129.093 288.757C128.854 288.506 128.735 288.189 128.735 287.804C128.735 287.486 128.824 287.207 129.002 286.968C129.18 286.729 129.426 286.542 129.74 286.409C130.054 286.273 130.414 286.205 130.82 286.205C131.403 286.205 131.863 286.331 132.198 286.584C132.533 286.835 132.754 287.172 132.862 287.593ZM139.264 286.275V287.119H136.314V286.275H139.264ZM137.105 284.981H138.157V290.09C138.157 290.293 138.187 290.447 138.248 290.55C138.309 290.651 138.388 290.72 138.484 290.757C138.582 290.793 138.689 290.81 138.804 290.81C138.888 290.81 138.962 290.804 139.025 290.793C139.088 290.781 139.138 290.772 139.173 290.765L139.363 291.633C139.302 291.656 139.215 291.68 139.102 291.703C138.99 291.729 138.849 291.743 138.68 291.745C138.404 291.75 138.146 291.701 137.907 291.598C137.668 291.495 137.475 291.335 137.327 291.12C137.179 290.904 137.105 290.633 137.105 290.307V284.981ZM141.594 288.469V291.675H140.543V284.475H141.58V287.154H141.647C141.773 286.863 141.967 286.632 142.227 286.461C142.487 286.29 142.827 286.205 143.246 286.205C143.617 286.205 143.94 286.281 144.217 286.433C144.496 286.586 144.711 286.813 144.864 287.115C145.018 287.415 145.096 287.79 145.096 288.24V291.675H144.044V288.367C144.044 287.971 143.942 287.664 143.739 287.446C143.535 287.225 143.251 287.115 142.888 287.115C142.639 287.115 142.417 287.168 142.22 287.273C142.025 287.379 141.872 287.534 141.759 287.738C141.649 287.939 141.594 288.183 141.594 288.469ZM148.826 291.784C148.294 291.784 147.835 291.67 147.451 291.443C147.069 291.213 146.774 290.891 146.565 290.476C146.359 290.059 146.256 289.57 146.256 289.01C146.256 288.457 146.359 287.97 146.565 287.548C146.774 287.126 147.064 286.797 147.437 286.56C147.812 286.323 148.25 286.205 148.752 286.205C149.057 286.205 149.352 286.255 149.638 286.356C149.924 286.457 150.18 286.615 150.408 286.831C150.635 287.046 150.814 287.326 150.946 287.671C151.077 288.013 151.142 288.429 151.142 288.919V289.291H146.85V288.504H150.112C150.112 288.227 150.056 287.982 149.944 287.769C149.831 287.554 149.673 287.384 149.469 287.259C149.267 287.135 149.031 287.073 148.759 287.073C148.464 287.073 148.206 287.146 147.985 287.291C147.767 287.434 147.599 287.622 147.479 287.854C147.362 288.083 147.303 288.333 147.303 288.602V289.218C147.303 289.579 147.367 289.886 147.493 290.139C147.622 290.392 147.801 290.585 148.031 290.719C148.261 290.85 148.529 290.916 148.836 290.916C149.035 290.916 149.217 290.888 149.381 290.831C149.545 290.773 149.687 290.686 149.807 290.571C149.926 290.456 150.017 290.315 150.081 290.146L151.076 290.325C150.996 290.618 150.853 290.875 150.647 291.095C150.443 291.313 150.186 291.483 149.877 291.605C149.57 291.724 149.219 291.784 148.826 291.784ZM157.45 286.275V287.119H154.5V286.275H157.45ZM155.291 284.981H156.342V290.09C156.342 290.293 156.373 290.447 156.434 290.55C156.494 290.651 156.573 290.72 156.669 290.757C156.767 290.793 156.874 290.81 156.989 290.81C157.073 290.81 157.147 290.804 157.21 290.793C157.274 290.781 157.323 290.772 157.358 290.765L157.548 291.633C157.487 291.656 157.4 291.68 157.288 291.703C157.175 291.729 157.035 291.743 156.866 291.745C156.589 291.75 156.332 291.701 156.092 291.598C155.853 291.495 155.66 291.335 155.512 291.12C155.365 290.904 155.291 290.633 155.291 290.307V284.981ZM158.612 291.675V286.275H159.663V291.675H158.612ZM159.143 285.442C158.96 285.442 158.803 285.381 158.672 285.259C158.543 285.135 158.479 284.987 158.479 284.816C158.479 284.643 158.543 284.495 158.672 284.373C158.803 284.249 158.96 284.187 159.143 284.187C159.326 284.187 159.482 284.249 159.611 284.373C159.742 284.495 159.808 284.643 159.808 284.816C159.808 284.987 159.742 285.135 159.611 285.259C159.482 285.381 159.326 285.442 159.143 285.442ZM161.078 291.675V286.275H162.087V287.154H162.153C162.266 286.856 162.45 286.624 162.705 286.458C162.961 286.289 163.267 286.205 163.623 286.205C163.984 286.205 164.286 286.289 164.53 286.458C164.776 286.627 164.958 286.859 165.075 287.154H165.131C165.26 286.866 165.465 286.636 165.746 286.465C166.028 286.291 166.363 286.205 166.752 286.205C167.242 286.205 167.641 286.358 167.951 286.665C168.262 286.972 168.418 287.435 168.418 288.054V291.675H167.367V288.152C167.367 287.787 167.267 287.522 167.068 287.358C166.869 287.194 166.631 287.112 166.355 287.112C166.012 287.112 165.746 287.217 165.557 287.428C165.367 287.637 165.272 287.905 165.272 288.233V291.675H164.224V288.086C164.224 287.793 164.133 287.557 163.95 287.379C163.767 287.201 163.529 287.112 163.236 287.112C163.037 287.112 162.853 287.165 162.684 287.27C162.518 287.373 162.383 287.517 162.28 287.702C162.179 287.888 162.129 288.102 162.129 288.346V291.675H161.078ZM172.154 291.784C171.622 291.784 171.164 291.67 170.78 291.443C170.398 291.213 170.103 290.891 169.894 290.476C169.688 290.059 169.585 289.57 169.585 289.01C169.585 288.457 169.688 287.97 169.894 287.548C170.103 287.126 170.393 286.797 170.766 286.56C171.141 286.323 171.579 286.205 172.081 286.205C172.385 286.205 172.681 286.255 172.967 286.356C173.253 286.457 173.509 286.615 173.737 286.831C173.964 287.046 174.143 287.326 174.274 287.671C174.406 288.013 174.471 288.429 174.471 288.919V289.291H170.179V288.504H173.441C173.441 288.227 173.385 287.982 173.272 287.769C173.16 287.554 173.002 287.384 172.798 287.259C172.596 287.135 172.36 287.073 172.088 287.073C171.792 287.073 171.535 287.146 171.314 287.291C171.096 287.434 170.928 287.622 170.808 287.854C170.691 288.083 170.632 288.333 170.632 288.602V289.218C170.632 289.579 170.696 289.886 170.822 290.139C170.951 290.392 171.13 290.585 171.36 290.719C171.59 290.85 171.858 290.916 172.165 290.916C172.364 290.916 172.546 290.888 172.71 290.831C172.874 290.773 173.016 290.686 173.135 290.571C173.255 290.456 173.346 290.315 173.41 290.146L174.404 290.325C174.325 290.618 174.182 290.875 173.976 291.095C173.772 291.313 173.515 291.483 173.206 291.605C172.899 291.724 172.548 291.784 172.154 291.784ZM179.309 288.469V291.675H178.258V286.275H179.267V287.154H179.333C179.458 286.868 179.652 286.638 179.917 286.465C180.184 286.291 180.521 286.205 180.926 286.205C181.294 286.205 181.616 286.282 181.893 286.437C182.169 286.589 182.384 286.816 182.536 287.119C182.688 287.421 182.765 287.795 182.765 288.24V291.675H181.713V288.367C181.713 287.975 181.612 287.67 181.408 287.449C181.204 287.227 180.924 287.115 180.567 287.115C180.324 287.115 180.107 287.168 179.917 287.273C179.729 287.379 179.581 287.534 179.471 287.738C179.363 287.939 179.309 288.183 179.309 288.469ZM186.449 291.784C185.943 291.784 185.501 291.668 185.124 291.436C184.746 291.204 184.453 290.879 184.245 290.462C184.036 290.045 183.932 289.557 183.932 289C183.932 288.44 184.036 287.95 184.245 287.53C184.453 287.111 184.746 286.785 185.124 286.553C185.501 286.321 185.943 286.205 186.449 286.205C186.955 286.205 187.397 286.321 187.774 286.553C188.152 286.785 188.445 287.111 188.653 287.53C188.862 287.95 188.966 288.44 188.966 289C188.966 289.557 188.862 290.045 188.653 290.462C188.445 290.879 188.152 291.204 187.774 291.436C187.397 291.668 186.955 291.784 186.449 291.784ZM186.453 290.902C186.781 290.902 187.053 290.815 187.268 290.641C187.484 290.468 187.643 290.237 187.746 289.949C187.852 289.661 187.905 289.343 187.905 288.996C187.905 288.652 187.852 288.335 187.746 288.047C187.643 287.756 187.484 287.523 187.268 287.347C187.053 287.172 186.781 287.084 186.453 287.084C186.122 287.084 185.848 287.172 185.63 287.347C185.414 287.523 185.254 287.756 185.148 288.047C185.045 288.335 184.994 288.652 184.994 288.996C184.994 289.343 185.045 289.661 185.148 289.949C185.254 290.237 185.414 290.468 185.63 290.641C185.848 290.815 186.122 290.902 186.453 290.902ZM191.146 291.675L189.557 286.275H190.643L191.701 290.241H191.754L192.816 286.275H193.902L194.957 290.223H195.01L196.061 286.275H197.147L195.562 291.675H194.489L193.392 287.776H193.312L192.215 291.675H191.146ZM199.294 289.604V289.538C199.299 289.102 199.342 288.755 199.424 288.497C199.509 288.239 199.628 288.031 199.783 287.871C199.938 287.712 200.124 287.566 200.342 287.435C200.483 287.346 200.609 287.247 200.722 287.136C200.834 287.026 200.923 286.9 200.989 286.757C201.054 286.614 201.087 286.456 201.087 286.282C201.087 286.073 201.038 285.893 200.94 285.741C200.841 285.588 200.71 285.471 200.546 285.389C200.384 285.305 200.204 285.263 200.004 285.263C199.824 285.263 199.652 285.3 199.488 285.375C199.324 285.45 199.188 285.567 199.08 285.727C198.972 285.884 198.91 286.086 198.893 286.335H197.825C197.841 285.913 197.948 285.557 198.145 285.266C198.342 284.973 198.602 284.752 198.925 284.602C199.251 284.452 199.611 284.377 200.004 284.377C200.436 284.377 200.813 284.457 201.136 284.619C201.46 284.779 201.711 285.002 201.889 285.291C202.069 285.577 202.159 285.911 202.159 286.293C202.159 286.555 202.118 286.792 202.036 287.003C201.954 287.211 201.837 287.398 201.685 287.562C201.535 287.726 201.354 287.871 201.143 287.998C200.944 288.122 200.783 288.251 200.658 288.384C200.536 288.518 200.447 288.676 200.391 288.859C200.335 289.042 200.304 289.268 200.3 289.538V289.604H199.294ZM199.825 291.742C199.633 291.742 199.468 291.674 199.329 291.538C199.191 291.4 199.122 291.233 199.122 291.039C199.122 290.847 199.191 290.682 199.329 290.547C199.468 290.408 199.633 290.339 199.825 290.339C200.015 290.339 200.179 290.408 200.317 290.547C200.458 290.682 200.528 290.847 200.528 291.039C200.528 291.168 200.495 291.286 200.43 291.394C200.367 291.499 200.282 291.584 200.177 291.647C200.071 291.71 199.954 291.742 199.825 291.742Z" fill="#155EEF"/>
-<rect x="91.3063" y="276.756" width="121.388" height="22.8375" rx="6.39375" stroke="#EAECF0" stroke-width="0.4125"/>
-</g>
-<g filter="url(#filter4_dd_3256_32105)">
-<rect x="30" y="312.4" width="244" height="36" rx="9" fill="white"/>
-<path d="M42.2685 326.264H43.3274L45.4453 329.828H45.5348L47.6527 326.264H48.7116L45.9524 330.753V333.9H45.0277V330.753L42.2685 326.264ZM51.305 334.019C50.7879 334.019 50.3343 333.896 49.944 333.65C49.5562 333.404 49.2529 333.06 49.0342 332.617C48.8179 332.175 48.7098 331.658 48.7098 331.066C48.7098 330.47 48.8179 329.949 49.0342 329.504C49.2529 329.059 49.5562 328.713 49.944 328.467C50.3343 328.221 50.7879 328.098 51.305 328.098C51.822 328.098 52.2744 328.221 52.6622 328.467C53.0525 328.713 53.3557 329.059 53.572 329.504C53.7907 329.949 53.9001 330.47 53.9001 331.066C53.9001 331.658 53.7907 332.175 53.572 332.617C53.3557 333.06 53.0525 333.404 52.6622 333.65C52.2744 333.896 51.822 334.019 51.305 334.019ZM51.305 333.229C51.6977 333.229 52.0209 333.128 52.2744 332.927C52.528 332.725 52.7156 332.461 52.8374 332.133C52.9593 331.804 53.0202 331.449 53.0202 331.066C53.0202 330.683 52.9593 330.327 52.8374 329.996C52.7156 329.665 52.528 329.398 52.2744 329.194C52.0209 328.991 51.6977 328.889 51.305 328.889C50.9122 328.889 50.589 328.991 50.3355 329.194C50.0819 329.398 49.8943 329.665 49.7725 329.996C49.6507 330.327 49.5898 330.683 49.5898 331.066C49.5898 331.449 49.6507 331.804 49.7725 332.133C49.8943 332.461 50.0819 332.725 50.3355 332.927C50.589 333.128 50.9122 333.229 51.305 333.229ZM58.8528 331.558V328.173H59.7327V333.9H58.8528V332.931H58.7931C58.6589 333.221 58.4501 333.469 58.1667 333.673C57.8833 333.874 57.5253 333.975 57.0928 333.975C56.7349 333.975 56.4167 333.896 56.1383 333.74C55.8599 333.581 55.6411 333.342 55.482 333.024C55.3229 332.703 55.2434 332.299 55.2434 331.812V328.173H56.1234V331.752C56.1234 332.17 56.2402 332.503 56.4739 332.752C56.71 333 57.0108 333.124 57.3762 333.124C57.5949 333.124 57.8174 333.069 58.0436 332.957C58.2723 332.845 58.4637 332.673 58.6179 332.442C58.7745 332.211 58.8528 331.916 58.8528 331.558ZM61.3445 333.9V328.173H62.1946V329.038H62.2543C62.3587 328.754 62.5476 328.524 62.821 328.348C63.0945 328.172 63.4027 328.083 63.7457 328.083C63.8104 328.083 63.8912 328.085 63.9881 328.087C64.085 328.089 64.1584 328.093 64.2081 328.098V328.993C64.1783 328.986 64.1099 328.974 64.003 328.96C63.8986 328.942 63.788 328.933 63.6712 328.933C63.3928 328.933 63.1442 328.992 62.9254 329.109C62.7092 329.223 62.5376 329.382 62.4109 329.586C62.2866 329.787 62.2244 330.017 62.2244 330.276V333.9H61.3445ZM68.2043 333.9V328.173H69.0545V329.068H69.129C69.2484 328.762 69.441 328.524 69.707 328.355C69.973 328.184 70.2924 328.098 70.6653 328.098C71.0431 328.098 71.3576 328.184 71.6086 328.355C71.8622 328.524 72.0598 328.762 72.2015 329.068H72.2611C72.4078 328.772 72.6278 328.537 72.9211 328.363C73.2144 328.186 73.5662 328.098 73.9763 328.098C74.4884 328.098 74.9073 328.259 75.2329 328.579C75.5585 328.897 75.7214 329.393 75.7214 330.067V333.9H74.8414V330.067C74.8414 329.644 74.7258 329.342 74.4946 329.161C74.2634 328.979 73.9913 328.889 73.678 328.889C73.2753 328.889 72.9634 329.01 72.7421 329.254C72.5209 329.495 72.4103 329.801 72.4103 330.171V333.9H71.5154V329.977C71.5154 329.652 71.4098 329.39 71.1985 329.191C70.9872 328.989 70.715 328.889 70.3819 328.889C70.1532 328.889 69.9394 328.95 69.7405 329.071C69.5442 329.193 69.3851 329.362 69.2633 329.578C69.144 329.792 69.0843 330.04 69.0843 330.32V333.9H68.2043ZM79.7316 334.019C79.1797 334.019 78.7037 333.898 78.3035 333.654C77.9058 333.408 77.5988 333.065 77.3825 332.625C77.1687 332.182 77.0618 331.668 77.0618 331.081C77.0618 330.494 77.1687 329.977 77.3825 329.53C77.5988 329.08 77.8995 328.73 78.2848 328.479C78.6726 328.225 79.125 328.098 79.6421 328.098C79.9404 328.098 80.235 328.148 80.5258 328.247C80.8166 328.347 81.0814 328.508 81.32 328.732C81.5586 328.953 81.7488 329.247 81.8905 329.612C82.0322 329.977 82.103 330.427 82.103 330.962V331.335H77.6883V330.574H81.2081C81.2081 330.251 81.1435 329.963 81.0142 329.709C80.8875 329.455 80.706 329.255 80.4699 329.109C80.2362 328.962 79.9603 328.889 79.6421 328.889C79.2916 328.889 78.9883 328.976 78.7323 329.15C78.4787 329.321 78.2836 329.545 78.1469 329.821C78.0102 330.097 77.9418 330.393 77.9418 330.708V331.215C77.9418 331.648 78.0164 332.015 78.1655 332.315C78.3172 332.614 78.5272 332.841 78.7957 332.998C79.0641 333.152 79.3761 333.229 79.7316 333.229C79.9628 333.229 80.1716 333.197 80.358 333.132C80.5469 333.065 80.7097 332.965 80.8465 332.834C80.9832 332.699 81.0888 332.533 81.1634 332.334L82.0135 332.573C81.9241 332.861 81.7737 333.115 81.5624 333.333C81.3511 333.55 81.0901 333.719 80.7793 333.84C80.4686 333.96 80.1194 334.019 79.7316 334.019ZM87.4984 329.455L86.708 329.679C86.6582 329.547 86.5849 329.419 86.488 329.295C86.3935 329.168 86.2642 329.064 86.1002 328.982C85.9361 328.9 85.7261 328.859 85.47 328.859C85.1195 328.859 84.8275 328.94 84.5938 329.101C84.3626 329.26 84.247 329.463 84.247 329.709C84.247 329.928 84.3266 330.1 84.4857 330.227C84.6448 330.354 84.8933 330.46 85.2314 330.544L86.0815 330.753C86.5936 330.877 86.9752 331.067 87.2263 331.323C87.4773 331.577 87.6028 331.904 87.6028 332.304C87.6028 332.632 87.5084 332.926 87.3195 333.184C87.133 333.443 86.872 333.646 86.5364 333.796C86.2009 333.945 85.8106 334.019 85.3656 334.019C84.7815 334.019 84.298 333.893 83.9152 333.639C83.5324 333.385 83.29 333.015 83.1881 332.528L84.0233 332.319C84.1028 332.627 84.2532 332.858 84.4745 333.013C84.6982 333.167 84.9903 333.244 85.3507 333.244C85.7609 333.244 86.0865 333.157 86.3276 332.983C86.5712 332.806 86.693 332.595 86.693 332.349C86.693 332.15 86.6234 331.983 86.4842 331.849C86.345 331.713 86.1313 331.611 85.8429 331.543L84.8884 331.32C84.3639 331.195 83.9786 331.003 83.7325 330.742C83.4889 330.478 83.3671 330.149 83.3671 329.754C83.3671 329.431 83.4578 329.145 83.6392 328.896C83.8232 328.648 84.073 328.452 84.3887 328.311C84.7069 328.169 85.0673 328.098 85.47 328.098C86.0368 328.098 86.4818 328.222 86.8049 328.471C87.1305 328.72 87.3617 329.048 87.4984 329.455ZM92.9843 329.455L92.1938 329.679C92.1441 329.547 92.0708 329.419 91.9738 329.295C91.8794 329.168 91.7501 329.064 91.586 328.982C91.422 328.9 91.2119 328.859 90.9559 328.859C90.6054 328.859 90.3133 328.94 90.0796 329.101C89.8485 329.26 89.7329 329.463 89.7329 329.709C89.7329 329.928 89.8124 330.1 89.9715 330.227C90.1306 330.354 90.3792 330.46 90.7172 330.544L91.5674 330.753C92.0795 330.877 92.461 331.067 92.7121 331.323C92.9632 331.577 93.0887 331.904 93.0887 332.304C93.0887 332.632 92.9942 332.926 92.8053 333.184C92.6189 333.443 92.3579 333.646 92.0223 333.796C91.6867 333.945 91.2964 334.019 90.8515 334.019C90.2673 334.019 89.7838 333.893 89.401 333.639C89.0182 333.385 88.7758 333.015 88.6739 332.528L89.5091 332.319C89.5887 332.627 89.7391 332.858 89.9603 333.013C90.184 333.167 90.4761 333.244 90.8366 333.244C91.2467 333.244 91.5724 333.157 91.8135 332.983C92.0571 332.806 92.1789 332.595 92.1789 332.349C92.1789 332.15 92.1093 331.983 91.9701 331.849C91.8309 331.713 91.6171 331.611 91.3287 331.543L90.3742 331.32C89.8497 331.195 89.4644 331.003 89.2183 330.742C88.9747 330.478 88.8529 330.149 88.8529 329.754C88.8529 329.431 88.9436 329.145 89.1251 328.896C89.309 328.648 89.5589 328.452 89.8746 328.311C90.1927 328.169 90.5532 328.098 90.9559 328.098C91.5226 328.098 91.9676 328.222 92.2907 328.471C92.6164 328.72 92.8476 329.048 92.9843 329.455ZM96.0987 334.034C95.7358 334.034 95.4064 333.966 95.1106 333.829C94.8148 333.69 94.5799 333.49 94.4059 333.229C94.2318 332.965 94.1448 332.647 94.1448 332.274C94.1448 331.946 94.2095 331.68 94.3387 331.476C94.468 331.27 94.6408 331.108 94.857 330.992C95.0733 330.875 95.3119 330.788 95.5729 330.731C95.8364 330.671 96.1012 330.624 96.3671 330.589C96.7152 330.544 96.9973 330.511 97.2136 330.488C97.4323 330.463 97.5914 330.422 97.6908 330.365C97.7927 330.308 97.8437 330.209 97.8437 330.067V330.037C97.8437 329.669 97.743 329.383 97.5417 329.179C97.3428 328.976 97.0408 328.874 96.6356 328.874C96.2155 328.874 95.8861 328.966 95.6475 329.15C95.4089 329.334 95.2411 329.53 95.1441 329.739L94.3089 329.441C94.4581 329.092 94.6569 328.822 94.9055 328.628C95.1566 328.431 95.43 328.295 95.7258 328.217C96.0241 328.138 96.3174 328.098 96.6058 328.098C96.7897 328.098 97.001 328.121 97.2397 328.165C97.4808 328.208 97.7132 328.296 97.9369 328.43C98.1631 328.564 98.3508 328.767 98.5 329.038C98.6491 329.309 98.7237 329.672 98.7237 330.127V333.9H97.8437V333.124H97.799C97.7393 333.249 97.6399 333.382 97.5007 333.523C97.3615 333.665 97.1763 333.786 96.9451 333.885C96.7139 333.985 96.4318 334.034 96.0987 334.034ZM96.2329 333.244C96.5809 333.244 96.8742 333.175 97.1129 333.039C97.354 332.902 97.5355 332.725 97.6573 332.509C97.7816 332.293 97.8437 332.066 97.8437 331.827V331.021C97.8064 331.066 97.7244 331.107 97.5976 331.145C97.4733 331.179 97.3291 331.21 97.1651 331.238C97.0035 331.263 96.8457 331.285 96.6915 331.305C96.5399 331.322 96.4169 331.337 96.3224 331.35C96.0937 331.379 95.8799 331.428 95.6811 331.495C95.4847 331.56 95.3256 331.658 95.2038 331.79C95.0845 331.919 95.0248 332.095 95.0248 332.319C95.0248 332.625 95.1379 332.856 95.3641 333.013C95.5928 333.167 95.8824 333.244 96.2329 333.244ZM102.642 336.167C102.217 336.167 101.851 336.112 101.545 336.003C101.24 335.896 100.985 335.754 100.781 335.578C100.58 335.404 100.419 335.217 100.3 335.019L101.001 334.526C101.081 334.631 101.181 334.75 101.303 334.884C101.425 335.021 101.591 335.139 101.803 335.239C102.016 335.341 102.296 335.392 102.642 335.392C103.104 335.392 103.486 335.28 103.786 335.056C104.087 334.832 104.237 334.482 104.237 334.004V332.841H104.163C104.098 332.945 104.006 333.075 103.887 333.229C103.77 333.38 103.601 333.516 103.38 333.635C103.161 333.752 102.865 333.811 102.492 333.811C102.03 333.811 101.615 333.701 101.247 333.482C100.882 333.264 100.592 332.945 100.378 332.528C100.167 332.11 100.061 331.603 100.061 331.007C100.061 330.42 100.165 329.909 100.371 329.474C100.577 329.037 100.864 328.698 101.232 328.46C101.6 328.219 102.025 328.098 102.507 328.098C102.88 328.098 103.176 328.16 103.395 328.285C103.616 328.406 103.785 328.546 103.902 328.702C104.021 328.856 104.113 328.983 104.178 329.083H104.267V328.173H105.117V334.064C105.117 334.556 105.006 334.956 104.782 335.265C104.561 335.575 104.262 335.803 103.887 335.947C103.514 336.094 103.099 336.167 102.642 336.167ZM102.612 333.02C102.965 333.02 103.263 332.939 103.507 332.778C103.75 332.616 103.935 332.384 104.062 332.08C104.189 331.777 104.252 331.414 104.252 330.992C104.252 330.579 104.19 330.215 104.066 329.899C103.942 329.583 103.758 329.336 103.514 329.157C103.271 328.978 102.97 328.889 102.612 328.889C102.239 328.889 101.928 328.983 101.68 329.172C101.434 329.361 101.248 329.615 101.124 329.933C101.002 330.251 100.941 330.604 100.941 330.992C100.941 331.389 101.003 331.741 101.128 332.047C101.255 332.35 101.441 332.589 101.687 332.763C101.936 332.934 102.244 333.02 102.612 333.02ZM109.13 334.019C108.578 334.019 108.102 333.898 107.701 333.654C107.304 333.408 106.997 333.065 106.78 332.625C106.567 332.182 106.46 331.668 106.46 331.081C106.46 330.494 106.567 329.977 106.78 329.53C106.997 329.08 107.297 328.73 107.683 328.479C108.071 328.225 108.523 328.098 109.04 328.098C109.338 328.098 109.633 328.148 109.924 328.247C110.215 328.347 110.479 328.508 110.718 328.732C110.957 328.953 111.147 329.247 111.288 329.612C111.43 329.977 111.501 330.427 111.501 330.962V331.335H107.086V330.574H110.606C110.606 330.251 110.541 329.963 110.412 329.709C110.285 329.455 110.104 329.255 109.868 329.109C109.634 328.962 109.358 328.889 109.04 328.889C108.69 328.889 108.386 328.976 108.13 329.15C107.877 329.321 107.682 329.545 107.545 329.821C107.408 330.097 107.34 330.393 107.34 330.708V331.215C107.34 331.648 107.414 332.015 107.563 332.315C107.715 332.614 107.925 332.841 108.194 332.998C108.462 333.152 108.774 333.229 109.13 333.229C109.361 333.229 109.57 333.197 109.756 333.132C109.945 333.065 110.108 332.965 110.244 332.834C110.381 332.699 110.487 332.533 110.561 332.334L111.411 332.573C111.322 332.861 111.172 333.115 110.96 333.333C110.749 333.55 110.488 333.719 110.177 333.84C109.867 333.96 109.517 334.019 109.13 334.019Z" fill="#D0D5DD"/>
-<rect x="226" y="322.9" width="12" height="15" rx="4.5" fill="#F9FAFB"/>
-<path d="M231.908 333.509C231.403 333.507 230.972 333.373 230.614 333.109C230.256 332.845 229.982 332.46 229.793 331.955C229.603 331.45 229.508 330.842 229.508 330.13C229.508 329.421 229.603 328.815 229.793 328.312C229.984 327.809 230.259 327.426 230.617 327.161C230.977 326.897 231.408 326.765 231.908 326.765C232.409 326.765 232.838 326.898 233.196 327.165C233.554 327.429 233.828 327.812 234.018 328.315C234.21 328.816 234.305 329.421 234.305 330.13C234.305 330.844 234.211 331.454 234.021 331.959C233.831 332.461 233.558 332.846 233.2 333.112C232.842 333.377 232.411 333.509 231.908 333.509ZM231.908 332.655C232.352 332.655 232.698 332.439 232.947 332.007C233.199 331.574 233.324 330.949 233.324 330.13C233.324 329.587 233.267 329.128 233.152 328.753C233.039 328.376 232.876 328.09 232.663 327.896C232.452 327.7 232.2 327.602 231.908 327.602C231.467 327.602 231.121 327.82 230.87 328.254C230.618 328.689 230.491 329.314 230.489 330.13C230.489 330.676 230.546 331.137 230.659 331.514C230.774 331.889 230.937 332.174 231.148 332.368C231.359 332.559 231.612 332.655 231.908 332.655Z" fill="#D0D5DD"/>
-<path d="M262.329 330.816C262.458 330.554 262.458 330.247 262.329 329.985C262.215 329.754 262.015 329.633 261.911 329.575C261.8 329.512 261.657 329.448 261.514 329.384L251.024 324.663C250.878 324.597 250.733 324.532 250.61 324.489C250.497 324.45 250.271 324.379 250.02 324.449C249.736 324.528 249.506 324.736 249.398 325.01C249.303 325.253 249.351 325.485 249.378 325.601C249.408 325.728 249.458 325.879 249.508 326.031L250.524 329.09C250.605 329.336 250.646 329.46 250.722 329.551C250.789 329.631 250.876 329.693 250.973 329.732C251.084 329.775 251.213 329.775 251.473 329.775H256C256.345 329.775 256.625 330.055 256.625 330.4C256.625 330.745 256.345 331.025 256 331.025H251.485C251.226 331.025 251.096 331.025 250.986 331.068C250.889 331.107 250.803 331.169 250.736 331.249C250.66 331.339 250.619 331.462 250.536 331.708L249.513 334.765C249.462 334.917 249.411 335.069 249.381 335.195C249.353 335.311 249.305 335.545 249.4 335.788C249.507 336.063 249.737 336.271 250.021 336.35C250.273 336.42 250.5 336.349 250.613 336.31C250.736 336.267 250.881 336.201 251.028 336.136L261.514 331.417C261.657 331.353 261.8 331.288 261.911 331.225C262.015 331.167 262.215 331.046 262.329 330.816Z" fill="#D0D5DD"/>
-<rect x="30.375" y="312.775" width="243.25" height="35.25" rx="8.625" stroke="#EAECF0" stroke-width="0.75"/>
-</g>
-</g>
-</g>
-<defs>
-<filter id="filter0_dd_3256_32105" x="0" y="0" width="304" height="384" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feMorphology radius="2" operator="erode" in="SourceAlpha" result="effect1_dropShadow_3256_32105"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="3"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3256_32105"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_3256_32105"/>
-<feOffset dy="12"/>
-<feGaussianBlur stdDeviation="8"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0"/>
-<feBlend mode="normal" in2="effect1_dropShadow_3256_32105" result="effect2_dropShadow_3256_32105"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_3256_32105" result="shape"/>
-</filter>
-<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
-<use xlink:href="#image0_3256_32105" transform="scale(0.015625)"/>
-</pattern>
-<pattern id="pattern1" patternContentUnits="objectBoundingBox" width="1" height="1">
-<use xlink:href="#image0_3256_32105" transform="scale(0.015625)"/>
-</pattern>
-<filter id="filter1_d_3256_32105" x="83.9501" y="216.025" width="136.1" height="26.55" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="0.825"/>
-<feGaussianBlur stdDeviation="0.825"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3256_32105"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3256_32105" result="shape"/>
-</filter>
-<filter id="filter2_d_3256_32105" x="67.4501" y="245.875" width="169.1" height="26.55" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="0.825"/>
-<feGaussianBlur stdDeviation="0.825"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3256_32105"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3256_32105" result="shape"/>
-</filter>
-<filter id="filter3_d_3256_32105" x="89.4501" y="275.725" width="125.1" height="26.55" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="0.825"/>
-<feGaussianBlur stdDeviation="0.825"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3256_32105"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3256_32105" result="shape"/>
-</filter>
-<filter id="filter4_dd_3256_32105" x="21" y="312.4" width="262" height="54" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feMorphology radius="1.5" operator="erode" in="SourceAlpha" result="effect1_dropShadow_3256_32105"/>
-<feOffset dy="3"/>
-<feGaussianBlur stdDeviation="2.25"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3256_32105"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feMorphology radius="3" operator="erode" in="SourceAlpha" result="effect2_dropShadow_3256_32105"/>
-<feOffset dy="9"/>
-<feGaussianBlur stdDeviation="6"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0"/>
-<feBlend mode="normal" in2="effect1_dropShadow_3256_32105" result="effect2_dropShadow_3256_32105"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_3256_32105" result="shape"/>
-</filter>
-<linearGradient id="paint0_linear_3256_32105" x1="199.59" y1="203.4" x2="199.59" y2="6.01644e-06" gradientUnits="userSpaceOnUse">
-<stop offset="0.552683" stop-color="white"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint1_linear_3256_32105" x1="112.825" y1="210.096" x2="36.6001" y2="210.084" gradientUnits="userSpaceOnUse">
-<stop stop-color="#F3F4F6"/>
-<stop offset="1" stop-color="#F3F4F6" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint2_linear_3256_32105" x1="267.4" y1="210.096" x2="191.175" y2="210.084" gradientUnits="userSpaceOnUse">
-<stop stop-color="#F3F4F6" stop-opacity="0"/>
-<stop offset="1" stop-color="#F3F4F6"/>
-</linearGradient>
-<clipPath id="clip0_3256_32105">
-<rect x="12" width="280" height="360" rx="12" fill="white"/>
-</clipPath>
-<image id="image0_3256_32105" width="64" height="64" xlink:href="data:image/png;base64,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"/>
-</defs>
-</svg>
diff --git a/web/app/components/app/configuration/config/feature/choose-feature/feature-item/style.module.css b/web/app/components/app/configuration/config/feature/choose-feature/feature-item/style.module.css
index c83053cbc1..63139bda56 100644
--- a/web/app/components/app/configuration/config/feature/choose-feature/feature-item/style.module.css
+++ b/web/app/components/app/configuration/config/feature/choose-feature/feature-item/style.module.css
@@ -6,6 +6,7 @@
   height: 360px;
   background: center center no-repeat;
   background-size: contain;
+  border-radius: 8px;
 }
 
 .wrap:hover .preview {
@@ -13,7 +14,7 @@
 }
 
 .openingStatementPreview {
-  background-image: url(./preview-imgs/opening-statement.svg);
+  background-image: url(./preview-imgs/opening-statement.png);
 }
 
 .suggestedQuestionsAfterAnswerPreview {
diff --git a/web/app/components/app/configuration/config/index.tsx b/web/app/components/app/configuration/config/index.tsx
index b0d1e236a4..f1eb9fd703 100644
--- a/web/app/components/app/configuration/config/index.tsx
+++ b/web/app/components/app/configuration/config/index.tsx
@@ -5,7 +5,6 @@ import { useContext } from 'use-context-selector'
 import produce from 'immer'
 import { useBoolean, useScroll } from 'ahooks'
 import DatasetConfig from '../dataset-config'
-import Tools from '../tools'
 import ChatGroup from '../features/chat-group'
 import ExperienceEnchanceGroup from '../features/experience-enchance-group'
 import Toolbox from '../toolbox'
@@ -15,11 +14,12 @@ import useAnnotationConfig from '../toolbox/annotation/use-annotation-config'
 import AddFeatureBtn from './feature/add-feature-btn'
 import ChooseFeature from './feature/choose-feature'
 import useFeature from './feature/use-feature'
+import AgentTools from './agent/agent-tools'
 import AdvancedModeWaring from '@/app/components/app/configuration/prompt-mode/advanced-mode-waring'
 import ConfigContext from '@/context/debug-configuration'
 import ConfigPrompt from '@/app/components/app/configuration/config-prompt'
 import ConfigVar from '@/app/components/app/configuration/config-var'
-import type { CitationConfig, ModelConfig, ModerationConfig, MoreLikeThisConfig, PromptVariable, SpeechToTextConfig, SuggestedQuestionsAfterAnswerConfig } from '@/models/debug'
+import { type CitationConfig, type ModelConfig, type ModerationConfig, type MoreLikeThisConfig, PromptMode, type PromptVariable, type SpeechToTextConfig, type SuggestedQuestionsAfterAnswerConfig } from '@/models/debug'
 import { AppType, ModelModeType } from '@/types/app'
 import { useModalContext } from '@/context/modal-context'
 import ConfigParamModal from '@/app/components/app/configuration/toolbox/annotation/config-param-modal'
@@ -32,11 +32,15 @@ const Config: FC = () => {
     mode,
     isAdvancedMode,
     modelModeType,
+    isAgent,
     canReturnToSimpleMode,
+    setPromptMode,
     hasSetBlockStatus,
     showHistoryModal,
     introduction,
     setIntroduction,
+    suggestedQuestions,
+    setSuggestedQuestions,
     modelConfig,
     setModelConfig,
     setPrevPromptConfig,
@@ -187,12 +191,12 @@ const Config: FC = () => {
     <>
       <div
         ref={wrapRef}
-        className="relative px-6 pb-[50px] overflow-y-auto h-full"
+        className="grow h-0 relative px-6 pb-[50px] overflow-y-auto"
       >
         <AddFeatureBtn toBottomHeight={toBottomHeight} onClick={showChooseFeatureTrue} />
         {
-          (isAdvancedMode && canReturnToSimpleMode) && (
-            <AdvancedModeWaring />
+          (isAdvancedMode && canReturnToSimpleMode && !isAgent) && (
+            <AdvancedModeWaring onReturnToSimpleMode={() => setPromptMode(PromptMode.simple)} />
           )
         }
         {showChooseFeature && (
@@ -223,8 +227,10 @@ const Config: FC = () => {
         {/* Dataset */}
         <DatasetConfig />
 
-        <Tools />
-
+        {/* Tools */}
+        {(isAgent && isChatApp) && (
+          <AgentTools />
+        )}
         <ConfigVision />
 
         {/* Chat History */}
@@ -244,6 +250,8 @@ const Config: FC = () => {
                 {
                   value: introduction,
                   onChange: setIntroduction,
+                  suggestedQuestions,
+                  onSuggestedQuestionsChange: setSuggestedQuestions,
                 }
               }
               isShowSuggestedQuestionsAfterAnswer={featureConfig.suggestedQuestionsAfterAnswer}
diff --git a/web/app/components/app/configuration/dataset-config/index.tsx b/web/app/components/app/configuration/dataset-config/index.tsx
index 9b4dbf2b78..c2039c98a4 100644
--- a/web/app/components/app/configuration/dataset-config/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/index.tsx
@@ -30,6 +30,7 @@ const DatasetConfig: FC = () => {
     modelConfig,
     setModelConfig,
     showSelectDataSet,
+    isAgent,
   } = useContext(ConfigContext)
 
   const hasData = dataSet.length > 0
@@ -72,7 +73,7 @@ const DatasetConfig: FC = () => {
       title={t('appDebug.feature.dataSet.title')}
       headerRight={
         <div className='flex items-center gap-1'>
-          <ParamsConfig />
+          {!isAgent && <ParamsConfig />}
           <OperationBtn type="add" onClick={showSelectDataSet} />
         </div>
       }
diff --git a/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx b/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
index d94cc632c3..e87a69767e 100644
--- a/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
@@ -156,7 +156,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
           <div className={labelClass}>
             {t('datasetSettings.form.desc')}
           </div>
-          <div className='grow'>
+          <div className='w-full'>
             <textarea
               value={localeCurrentDataset.description || ''}
               onChange={e => handleValueChange('description', e.target.value)}
@@ -173,12 +173,12 @@ const SettingsModal: FC<SettingsModalProps> = ({
           <div className={labelClass}>
             <div>{t('datasetSettings.form.permissions')}</div>
           </div>
-          <div className='w-full sm:w-[480px]'>
+          <div className='w-full'>
             <PermissionsRadio
               disable={!localeCurrentDataset?.embedding_available}
               value={localeCurrentDataset.permission}
               onChange={v => handleValueChange('permission', v!)}
-              itemClassName='sm:!w-[227px]'
+              itemClassName='sm:!w-[280px]'
             />
           </div>
         </div>
@@ -192,7 +192,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
               disable={!localeCurrentDataset?.embedding_available}
               value={indexMethod}
               onChange={v => setIndexMethod(v!)}
-              itemClassName='sm:!w-[227px]'
+              itemClassName='sm:!w-[280px]'
             />
           </div>
         </div>
@@ -201,7 +201,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
             <div className={labelClass}>
               {t('datasetSettings.form.embeddingModel')}
             </div>
-            <div className='grow'>
+            <div className='w-full'>
               <div className='w-full h-9 rounded-lg bg-gray-100 opacity-60'>
                 <ModelSelector
                   readonly
diff --git a/web/app/components/app/configuration/debug/index.tsx b/web/app/components/app/configuration/debug/index.tsx
index 54e3d8a8de..733f596333 100644
--- a/web/app/components/app/configuration/debug/index.tsx
+++ b/web/app/components/app/configuration/debug/index.tsx
@@ -4,7 +4,7 @@ import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
 import React, { useEffect, useRef, useState } from 'react'
 import cn from 'classnames'
-import produce from 'immer'
+import produce, { setAutoFreeze } from 'immer'
 import { useBoolean, useGetState } from 'ahooks'
 import { useContext } from 'use-context-selector'
 import dayjs from 'dayjs'
@@ -12,7 +12,7 @@ import HasNotSetAPIKEY from '../base/warning-mask/has-not-set-api'
 import FormattingChanged from '../base/warning-mask/formatting-changed'
 import GroupName from '../base/group-name'
 import CannotQueryDataset from '../base/warning-mask/cannot-query-dataset'
-import { AppType, ModelModeType, TransferMethod } from '@/types/app'
+import { AgentStrategy, AppType, ModelModeType, TransferMethod } from '@/types/app'
 import PromptValuePanel, { replaceStringWithValues } from '@/app/components/app/configuration/prompt-value-panel'
 import type { IChatItem } from '@/app/components/app/chat/type'
 import Chat from '@/app/components/app/chat'
@@ -44,6 +44,8 @@ const Debug: FC<IDebug> = ({
   const {
     appId,
     mode,
+    isFunctionCall,
+    collectionList,
     modelModeType,
     hasSetBlockStatus,
     isAdvancedMode,
@@ -51,6 +53,7 @@ const Debug: FC<IDebug> = ({
     chatPromptConfig,
     completionPromptConfig,
     introduction,
+    suggestedQuestions,
     suggestedQuestionsAfterAnswerConfig,
     speechToTextConfig,
     citationConfig,
@@ -66,7 +69,6 @@ const Debug: FC<IDebug> = ({
     completionParams,
     hasSetContextVar,
     datasetConfigs,
-    externalDataToolsConfig,
     visionConfig,
     annotationConfig,
   } = useContext(ConfigContext)
@@ -74,6 +76,13 @@ const Debug: FC<IDebug> = ({
   const [chatList, setChatList, getChatList] = useGetState<IChatItem[]>([])
   const chatListDomRef = useRef<HTMLDivElement>(null)
   const { data: fileUploadConfigResponse } = useSWR({ url: '/files/upload' }, fetchFileUploadConfig)
+  // onData change thought (the produce obj). https://github.com/immerjs/immer/issues/576
+  useEffect(() => {
+    setAutoFreeze(false)
+    return () => {
+      setAutoFreeze(true)
+    }
+  }, [])
   useEffect(() => {
     // scroll to bottom
     if (chatListDomRef.current)
@@ -88,9 +97,10 @@ const Debug: FC<IDebug> = ({
         content: getIntroduction(),
         isAnswer: true,
         isOpeningStatement: true,
+        suggestedQuestions,
       }])
     }
-  }, [introduction, modelConfig.configs.prompt_variables, inputs])
+  }, [introduction, suggestedQuestions, modelConfig.configs.prompt_variables, inputs])
 
   const [isResponsing, { setTrue: setResponsingTrue, setFalse: setResponsingFalse }] = useBoolean(false)
   const [abortController, setAbortController] = useState<AbortController | null>(null)
@@ -117,6 +127,7 @@ const Debug: FC<IDebug> = ({
         content: getIntroduction(),
         isAnswer: true,
         isOpeningStatement: true,
+        suggestedQuestions,
       }]
       : [])
     setIsShowSuggestion(false)
@@ -150,7 +161,9 @@ const Debug: FC<IDebug> = ({
       }
     }
     let hasEmptyInput = ''
-    const requiredVars = modelConfig.configs.prompt_variables.filter(({ key, name, required }) => {
+    const requiredVars = modelConfig.configs.prompt_variables.filter(({ key, name, required, type }) => {
+      if (type === 'api')
+        return false
       const res = (!key || !key.trim()) || (!name || !name.trim()) || (required || required === undefined || required === null)
       return res
     }) // compatible with old version
@@ -178,6 +191,7 @@ const Debug: FC<IDebug> = ({
 
   const doShowSuggestion = isShowSuggestion && !isResponsing
   const [suggestQuestions, setSuggestQuestions] = useState<string[]>([])
+  const [userQuery, setUserQuery] = useState('')
   const onSend = async (message: string, files?: VisionFile[]) => {
     if (isResponsing) {
       notify({ type: 'info', message: t('appDebug.errorMessage.waitForResponse') })
@@ -196,7 +210,28 @@ const Debug: FC<IDebug> = ({
       },
     }))
     const contextVar = modelConfig.configs.prompt_variables.find(item => item.is_context_var)?.key
+    const updateCurrentQA = ({
+      responseItem,
+      questionId,
+      placeholderAnswerId,
+      questionItem,
+    }: {
+      responseItem: IChatItem
+      questionId: string
+      placeholderAnswerId: string
+      questionItem: IChatItem
+    }) => {
+      // closesure new list is outdated.
+      const newListWithAnswer = produce(
+        getChatList().filter(item => item.id !== responseItem.id && item.id !== placeholderAnswerId),
+        (draft) => {
+          if (!draft.find(item => item.id === questionId))
+            draft.push({ ...questionItem })
 
+          draft.push({ ...responseItem })
+        })
+      setChatList(newListWithAnswer)
+    }
     const postModelConfig: BackendModelConfig = {
       pre_prompt: !isAdvancedMode ? modelConfig.configs.prompt_template : '',
       prompt_type: promptMode,
@@ -212,10 +247,9 @@ const Debug: FC<IDebug> = ({
       speech_to_text: speechToTextConfig,
       retriever_resource: citationConfig,
       sensitive_word_avoidance: moderationConfig,
-      external_data_tools: externalDataToolsConfig,
       agent_mode: {
-        enabled: true,
-        tools: [...postDatasets],
+        ...modelConfig.agentConfig,
+        strategy: isFunctionCall ? AgentStrategy.functionCall : AgentStrategy.react,
       },
       model: {
         provider: modelConfig.provider,
@@ -223,7 +257,12 @@ const Debug: FC<IDebug> = ({
         mode: modelConfig.mode,
         completion_params: completionParams as any,
       },
-      dataset_configs: datasetConfigs,
+      dataset_configs: {
+        ...datasetConfigs,
+        datasets: {
+          datasets: [...postDatasets],
+        } as any,
+      },
       file_upload: {
         image: visionConfig,
       },
@@ -273,12 +312,17 @@ const Debug: FC<IDebug> = ({
     const newList = [...getChatList(), questionItem, placeholderAnswerItem]
     setChatList(newList)
 
+    let isAgentMode = false
+
     // answer
     const responseItem: IChatItem = {
       id: `${Date.now()}`,
       content: '',
+      agent_thoughts: [],
+      message_files: [],
       isAnswer: true,
     }
+    let hasSetResponseId = false
 
     let _newConversationId: null | string = null
 
@@ -290,25 +334,32 @@ const Debug: FC<IDebug> = ({
         setAbortController(abortController)
       },
       onData: (message: string, isFirstMessage: boolean, { conversationId: newConversationId, messageId, taskId }: any) => {
-        responseItem.content = responseItem.content + message
+        // console.log('onData', message)
+        if (!isAgentMode) {
+          responseItem.content = responseItem.content + message
+        }
+        else {
+          const lastThought = responseItem.agent_thoughts?.[responseItem.agent_thoughts?.length - 1]
+          if (lastThought)
+            lastThought.thought = lastThought.thought + message // need immer setAutoFreeze
+        }
+        if (messageId && !hasSetResponseId) {
+          responseItem.id = messageId
+          hasSetResponseId = true
+        }
+
         if (isFirstMessage && newConversationId) {
           setConversationId(newConversationId)
           _newConversationId = newConversationId
         }
         setMessageTaskId(taskId)
-        if (messageId)
-          responseItem.id = messageId
 
-        // closesure new list is outdated.
-        const newListWithAnswer = produce(
-          getChatList().filter(item => item.id !== responseItem.id && item.id !== placeholderAnswerId),
-          (draft) => {
-            if (!draft.find(item => item.id === questionId))
-              draft.push({ ...questionItem })
-
-            draft.push({ ...responseItem })
-          })
-        setChatList(newListWithAnswer)
+        updateCurrentQA({
+          responseItem,
+          questionId,
+          placeholderAnswerId,
+          questionItem,
+        })
       },
       async onCompleted(hasError?: boolean) {
         setResponsingFalse()
@@ -346,6 +397,45 @@ const Debug: FC<IDebug> = ({
           setIsShowSuggestion(true)
         }
       },
+      onFile(file) {
+        const lastThought = responseItem.agent_thoughts?.[responseItem.agent_thoughts?.length - 1]
+        if (lastThought)
+          responseItem.agent_thoughts![responseItem.agent_thoughts!.length - 1].message_files = [...(lastThought as any).message_files, file]
+
+        updateCurrentQA({
+          responseItem,
+          questionId,
+          placeholderAnswerId,
+          questionItem,
+        })
+      },
+      onThought(thought) {
+        isAgentMode = true
+        const response = responseItem as any
+        if (thought.message_id && !hasSetResponseId)
+          response.id = thought.message_id
+        if (response.agent_thoughts.length === 0) {
+          response.agent_thoughts.push(thought)
+        }
+        else {
+          const lastThought = response.agent_thoughts[response.agent_thoughts.length - 1]
+          // thought changed but still the same thought, so update.
+          if (lastThought.id === thought.id) {
+            thought.thought = lastThought.thought
+            thought.message_files = lastThought.message_files
+            responseItem.agent_thoughts![response.agent_thoughts.length - 1] = thought
+          }
+          else {
+            responseItem.agent_thoughts!.push(thought)
+          }
+        }
+        updateCurrentQA({
+          responseItem,
+          questionId,
+          placeholderAnswerId,
+          questionItem,
+        })
+      },
       onMessageEnd: (messageEnd) => {
         if (messageEnd.metadata?.annotation_reply) {
           responseItem.id = messageEnd.id
@@ -435,19 +525,23 @@ const Debug: FC<IDebug> = ({
       speech_to_text: speechToTextConfig,
       retriever_resource: citationConfig,
       sensitive_word_avoidance: moderationConfig,
-      external_data_tools: externalDataToolsConfig,
       more_like_this: moreLikeThisConfig,
-      agent_mode: {
-        enabled: true,
-        tools: [...postDatasets],
-      },
       model: {
         provider: modelConfig.provider,
         name: modelConfig.model_id,
         mode: modelConfig.mode,
         completion_params: completionParams as any,
       },
-      dataset_configs: datasetConfigs,
+      agent_mode: {
+        enabled: false,
+        tools: [],
+      },
+      dataset_configs: {
+        ...datasetConfigs,
+        datasets: {
+          datasets: [...postDatasets],
+        } as any,
+      },
       file_upload: {
         image: visionConfig,
       },
@@ -506,6 +600,14 @@ const Debug: FC<IDebug> = ({
     }
   })
 
+  const allToolIcons = (() => {
+    const icons: Record<string, any> = {}
+    modelConfig.agentConfig.tools?.forEach((item: any) => {
+      icons[item.tool_name] = collectionList.find((collection: any) => collection.id === item.provider_id)?.icon
+    })
+    return icons
+  })()
+
   return (
     <>
       <div className="shrink-0">
@@ -539,6 +641,8 @@ const Debug: FC<IDebug> = ({
               <div className="h-full overflow-y-auto overflow-x-hidden" ref={chatListDomRef}>
                 <Chat
                   chatList={chatList}
+                  query={userQuery}
+                  onQueryChange={setUserQuery}
                   onSend={onSend}
                   checkCanSend={checkCanSend}
                   feedbackDisabled
@@ -563,6 +667,7 @@ const Debug: FC<IDebug> = ({
                   supportAnnotation
                   appId={appId}
                   onChatListChange={setChatList}
+                  allToolIcons={allToolIcons}
                 />
               </div>
             </div>
diff --git a/web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx b/web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx
index 4a8138e667..212c140046 100644
--- a/web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx
+++ b/web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx
@@ -7,6 +7,7 @@ import { useContext } from 'use-context-selector'
 import produce from 'immer'
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
+import { ReactSortable } from 'react-sortablejs'
 import ConfigContext from '@/context/debug-configuration'
 import Panel from '@/app/components/app/configuration/base/feature-panel'
 import Button from '@/app/components/base/button'
@@ -15,11 +16,16 @@ import { getInputKeys } from '@/app/components/base/block-input'
 import ConfirmAddVar from '@/app/components/app/configuration/config-prompt/confirm-add-var'
 import { getNewVar } from '@/utils/var'
 import { varHighlightHTML } from '@/app/components/app/configuration/base/var-highlight'
+import { Plus, Trash03 } from '@/app/components/base/icons/src/vender/line/general'
+
+const MAX_QUESTION_NUM = 3
 
 export type IOpeningStatementProps = {
   value: string
   readonly?: boolean
   onChange?: (value: string) => void
+  suggestedQuestions?: string[]
+  onSuggestedQuestionsChange?: (value: string[]) => void
 }
 
 // regex to match the {{}} and replace it with a span
@@ -29,6 +35,8 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
   value = '',
   readonly,
   onChange,
+  suggestedQuestions = [],
+  onSuggestedQuestionsChange = () => { },
 }) => {
   const { t } = useTranslation()
   const {
@@ -42,6 +50,7 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
   const inputRef = useRef<HTMLTextAreaElement>(null)
 
   const [isFocus, { setTrue: didSetFocus, setFalse: setBlur }] = useBoolean(false)
+
   const setFocus = () => {
     didSetFocus()
     setTimeout(() => {
@@ -58,6 +67,8 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
     setTempValue(value || '')
   }, [value])
 
+  const [tempSuggestedQuestions, setTempSuggestedQuestions] = useState(suggestedQuestions || [])
+
   const coloredContent = (tempValue || '')
     .replace(/</g, '&lt;')
     .replace(/>/g, '&gt;')
@@ -75,6 +86,7 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
   const handleCancel = () => {
     setBlur()
     setTempValue(value)
+    setTempSuggestedQuestions(suggestedQuestions)
   }
 
   const handleConfirm = () => {
@@ -97,6 +109,7 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
     }
     setBlur()
     onChange?.(tempValue)
+    onSuggestedQuestionsChange(tempSuggestedQuestions)
   }
 
   const cancelAutoAddVar = () => {
@@ -107,7 +120,7 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
 
   const autoAddVar = () => {
     const newModelConfig = produce(modelConfig, (draft) => {
-      draft.configs.prompt_variables = [...draft.configs.prompt_variables, ...notIncludeKeys.map(key => getNewVar(key))]
+      draft.configs.prompt_variables = [...draft.configs.prompt_variables, ...notIncludeKeys.map(key => getNewVar(key, 'string'))]
     })
     onChange?.(tempValue)
     setModelConfig(newModelConfig)
@@ -116,12 +129,99 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
   }
 
   const headerRight = !readonly ? (
-    <OperationBtn type='edit' actionName={hasValue ? '' : t('appDebug.openingStatement.writeOpner') as string} onClick={handleEdit} />
+    isFocus ? (
+      <div className='flex items-center space-x-1'>
+        <div className='px-3 leading-[18px] text-xs font-medium text-gray-700 cursor-pointer' onClick={handleCancel}>{t('common.operation.cancel')}</div>
+        <Button className='!h-8 !px-3 text-xs' onClick={handleConfirm} type="primary">{t('common.operation.save')}</Button>
+      </div>
+    ) : (
+      <OperationBtn type='edit' actionName={hasValue ? '' : t('appDebug.openingStatement.writeOpner') as string} onClick={handleEdit} />
+    )
   ) : null
 
+  const renderQuestions = () => {
+    return isFocus ? (
+      <div>
+        <div className='flex items-center py-2'>
+          <div className='shrink-0 flex space-x-0.5 leading-[18px] text-xs font-medium text-gray-500'>
+            <div className='uppercase'>{t('appDebug.openingStatement.openingQuestion')}</div>
+            <div>·</div>
+            <div>{tempSuggestedQuestions.length}/{MAX_QUESTION_NUM}</div>
+          </div>
+          <div className='ml-3 grow w-0 h-px bg-[#243, 244, 246]'></div>
+        </div>
+        <ReactSortable
+          className="space-y-1"
+          list={tempSuggestedQuestions.map((name, index) => {
+            return {
+              id: index,
+              name,
+            }
+          })}
+          setList={list => setTempSuggestedQuestions(list.map(item => item.name))}
+          handle='.handle'
+          ghostClass="opacity-50"
+          animation={150}
+        >
+          {tempSuggestedQuestions.map((question, index) => {
+            return (
+              <div className='group relative rounded-lg border border-gray-200 flex items-center pl-2.5 hover:border-gray-300 hover:bg-white' key={index}>
+                <div className='handle flex items-center justify-center w-4 h-4 cursor-grab'>
+                  <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path fillRule="evenodd" clipRule="evenodd" d="M1 2C1.55228 2 2 1.55228 2 1C2 0.447715 1.55228 0 1 0C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2ZM1 6C1.55228 6 2 5.55228 2 5C2 4.44772 1.55228 4 1 4C0.447715 4 0 4.44772 0 5C0 5.55228 0.447715 6 1 6ZM6 1C6 1.55228 5.55228 2 5 2C4.44772 2 4 1.55228 4 1C4 0.447715 4.44772 0 5 0C5.55228 0 6 0.447715 6 1ZM5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6ZM2 9C2 9.55229 1.55228 10 1 10C0.447715 10 0 9.55229 0 9C0 8.44771 0.447715 8 1 8C1.55228 8 2 8.44771 2 9ZM5 10C5.55228 10 6 9.55229 6 9C6 8.44771 5.55228 8 5 8C4.44772 8 4 8.44771 4 9C4 9.55229 4.44772 10 5 10Z" fill="#98A2B3" />
+                  </svg>
+                </div>
+                <input
+                  type="input"
+                  value={question || ''}
+                  onChange={(e) => {
+                    const value = e.target.value
+                    setTempSuggestedQuestions(tempSuggestedQuestions.map((item, i) => {
+                      if (index === i)
+                        return value
+
+                      return item
+                    }))
+                  }}
+                  className={'w-full overflow-x-auto pl-1.5 pr-8 text-sm leading-9 text-gray-900 border-0 grow h-9 bg-transparent focus:outline-none cursor-pointer rounded-lg'}
+                />
+
+                <div
+                  className='block absolute top-1/2 translate-y-[-50%] right-1.5 p-1 rounded-md cursor-pointer hover:bg-[#FEE4E2] hover:text-[#D92D20]'
+                  onClick={() => {
+                    setTempSuggestedQuestions(tempSuggestedQuestions.filter((_, i) => index !== i))
+                  }}
+                >
+                  <Trash03 className='w-3.5 h-3.5' />
+                </div>
+              </div>
+            )
+          })}</ReactSortable>
+        {tempSuggestedQuestions.length < MAX_QUESTION_NUM && (
+          <div
+            onClick={() => { setTempSuggestedQuestions([...tempSuggestedQuestions, '']) }}
+            className='mt-1 flex items-center h-9 px-3 gap-2 rounded-lg cursor-pointer text-gray-400  bg-gray-100 hover:bg-gray-200'>
+            <Plus className='w-4 h-4'></Plus>
+            <div className='text-gray-500 text-[13px]'>{t('appDebug.variableConig.addOption')}</div>
+          </div>
+        )}
+      </div>
+    ) : (
+      <div className='mt-1.5 flex flex-wrap'>
+        {tempSuggestedQuestions.map((question, index) => {
+          return (
+            <div key={index} className='mt-1 mr-1 max-w-full truncate last:mr-0 shrink-0 leading-8 items-center px-2.5 rounded-lg border border-gray-200 shadow-xs bg-white text-[13px] font-normal text-gray-900 cursor-pointer'>
+              {question}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+
   return (
     <Panel
-      className={cn(isShowConfirmAddVar && 'h-[220px]', 'relative mt-4')}
+      className={cn(isShowConfirmAddVar && 'h-[220px]', 'relative mt-4 !bg-gray-25')}
       title={t('appDebug.openingStatement.title')}
       headerIcon={
         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -137,34 +237,24 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
           <>
             {isFocus
               ? (
-                <textarea
-                  ref={inputRef}
-                  value={tempValue}
-                  rows={3}
-                  onChange={e => setTempValue(e.target.value)}
-                  className="w-full px-0 text-sm  border-0 bg-transparent  focus:outline-none "
-                  placeholder={t('appDebug.openingStatement.placeholder') as string}
-                >
-                </textarea>
+                <div>
+                  <textarea
+                    ref={inputRef}
+                    value={tempValue}
+                    rows={3}
+                    onChange={e => setTempValue(e.target.value)}
+                    className="w-full px-0 text-sm  border-0 bg-transparent focus:outline-none "
+                    placeholder={t('appDebug.openingStatement.placeholder') as string}
+                  >
+                  </textarea>
+                </div>
               )
               : (
                 <div dangerouslySetInnerHTML={{
                   __html: coloredContent,
                 }}></div>
               )}
-
-            {/* Operation Bar */}
-            {isFocus && (
-              <div className='mt-2 flex items-center justify-between'>
-                <div className='text-xs text-gray-500'>{t('appDebug.openingStatement.varTip')}</div>
-
-                <div className='flex gap-2'>
-                  <Button className='!h-8 text-sm' onClick={handleCancel}>{t('common.operation.cancel')}</Button>
-                  <Button className='!h-8 text-sm' onClick={handleConfirm} type="primary">{t('common.operation.save')}</Button>
-                </div>
-              </div>
-            )}
-
+            {renderQuestions()}
           </>) : (
           <div className='pt-2 pb-1 text-xs text-gray-500'>{t('appDebug.openingStatement.noDataPlaceHolder')}</div>
         )}
diff --git a/web/app/components/app/configuration/index.tsx b/web/app/components/app/configuration/index.tsx
index b96ea1ae74..fb1e31e083 100644
--- a/web/app/components/app/configuration/index.tsx
+++ b/web/app/components/app/configuration/index.tsx
@@ -11,9 +11,9 @@ import { clone, isEqual } from 'lodash-es'
 import { CodeBracketIcon } from '@heroicons/react/20/solid'
 import Button from '../../base/button'
 import Loading from '../../base/loading'
-import s from './style.module.css'
 import useAdvancedPromptConfig from './hooks/use-advanced-prompt-config'
 import EditHistoryModal from './config-prompt/conversation-histroy/edit-modal'
+import AssistantTypePicker from './config/assistant-type-picker'
 import type {
   AnnotationReplyConfig,
   DatasetConfigs,
@@ -37,10 +37,9 @@ import { fetchAppDetail, updateAppModelConfig } from '@/service/apps'
 import { promptVariablesToUserInputsForm, userInputsFormToPromptVariables } from '@/utils/model-config'
 import { fetchDatasets } from '@/service/datasets'
 import { useProviderContext } from '@/context/provider-context'
-import { AppType, ModelModeType, RETRIEVE_TYPE, Resolution, TransferMethod } from '@/types/app'
-import { FlipBackward } from '@/app/components/base/icons/src/vender/line/arrows'
+import { AgentStrategy, AppType, ModelModeType, RETRIEVE_TYPE, Resolution, TransferMethod } from '@/types/app'
 import { PromptMode } from '@/models/debug'
-import { ANNOTATION_DEFAULT, DEFAULT_CHAT_PROMPT_CONFIG, DEFAULT_COMPLETION_PROMPT_CONFIG } from '@/config'
+import { ANNOTATION_DEFAULT, DEFAULT_AGENT_SETTING, DEFAULT_CHAT_PROMPT_CONFIG, DEFAULT_COMPLETION_PROMPT_CONFIG } from '@/config'
 import SelectDataSet from '@/app/components/app/configuration/dataset-config/select-dataset'
 import I18n from '@/context/i18n'
 import { useModalContext } from '@/context/modal-context'
@@ -49,6 +48,8 @@ import Drawer from '@/app/components/base/drawer'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
 import type { FormValue } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useTextGenerationCurrentProviderAndModelAndModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import { fetchCollectionList } from '@/service/tools'
+import { type Collection } from '@/app/components/tools/types'
 
 type PublichConfig = {
   modelConfig: ModelConfig
@@ -75,6 +76,7 @@ const Configuration: FC = () => {
   const [isShowDebugPanel, { setTrue: showDebugPanel, setFalse: hideDebugPanel }] = useBoolean(false)
 
   const [introduction, setIntroduction] = useState<string>('')
+  const [suggestedQuestions, setSuggestedQuestions] = useState<string[]>([])
   const [controlClearChatMessage, setControlClearChatMessage] = useState(0)
   const [prevPromptConfig, setPrevPromptConfig] = useState<PromptConfig>({
     prompt_template: '',
@@ -141,8 +143,23 @@ const Configuration: FC = () => {
     retriever_resource: null,
     sensitive_word_avoidance: null,
     dataSets: [],
+    agentConfig: DEFAULT_AGENT_SETTING,
   })
+  const isChatApp = mode === AppType.chat
+  const isAgent = modelConfig.agentConfig?.enabled
+  const setIsAgent = (value: boolean) => {
+    const newModelConfig = produce(modelConfig, (draft: ModelConfig) => {
+      draft.agentConfig.enabled = value
+    })
+    doSetModelConfig(newModelConfig)
+  }
+  const isOpenAI = modelConfig.provider === 'openai'
+  const isFunctionCall = isOpenAI && modelConfig.mode === ModelModeType.chat
 
+  const [collectionList, setCollectionList] = useState<Collection[]>([])
+  useEffect(() => {
+
+  }, [])
   const [datasetConfigs, setDatasetConfigs] = useState<DatasetConfigs>({
     retrieval_model: RETRIEVE_TYPE.oneWay,
     reranking_model: {
@@ -152,6 +169,9 @@ const Configuration: FC = () => {
     top_k: 2,
     score_threshold_enabled: false,
     score_threshold: 0.7,
+    datasets: {
+      datasets: [],
+    },
   })
 
   const setModelConfig = (newModelConfig: ModelConfig) => {
@@ -165,7 +185,7 @@ const Configuration: FC = () => {
   }, [modelModeType])
 
   const [dataSets, setDataSets] = useState<DataSet[]>([])
-  const contextVar = modelConfig.configs.prompt_variables.find(item => item.is_context_var)?.key
+  const contextVar = modelConfig.configs.prompt_variables.find((item: any) => item.is_context_var)?.key
   const hasSetContextVar = !!contextVar
   const [isShowSelectDataSet, { setTrue: showSelectDataSet, setFalse: hideSelectDataSet }] = useBoolean(false)
   const selectedIds = dataSets.map(item => item.id)
@@ -335,83 +355,131 @@ const Configuration: FC = () => {
   }
 
   useEffect(() => {
-    fetchAppDetail({ url: '/apps', id: appId }).then(async (res: any) => {
-      setMode(res.mode)
-      const modelConfig = res.model_config
-      const promptMode = modelConfig.prompt_type === PromptMode.advanced ? PromptMode.advanced : PromptMode.simple
-      doSetPromptMode(promptMode)
-      if (promptMode === PromptMode.advanced) {
-        setChatPromptConfig(modelConfig.chat_prompt_config || clone(DEFAULT_CHAT_PROMPT_CONFIG) as any)
-        setCompletionPromptConfig(modelConfig.completion_prompt_config || clone(DEFAULT_COMPLETION_PROMPT_CONFIG) as any)
-        setCanReturnToSimpleMode(false)
-      }
+    (async () => {
+      const collectionList = await fetchCollectionList() as Collection[]
+      setCollectionList(collectionList)
+      fetchAppDetail({ url: '/apps', id: appId }).then(async (res: any) => {
+        setMode(res.mode)
+        const modelConfig = res.model_config
+        const promptMode = modelConfig.prompt_type === PromptMode.advanced ? PromptMode.advanced : PromptMode.simple
+        doSetPromptMode(promptMode)
+        if (promptMode === PromptMode.advanced) {
+          setChatPromptConfig(modelConfig.chat_prompt_config || clone(DEFAULT_CHAT_PROMPT_CONFIG) as any)
+          setCompletionPromptConfig(modelConfig.completion_prompt_config || clone(DEFAULT_COMPLETION_PROMPT_CONFIG) as any)
+          setCanReturnToSimpleMode(false)
+        }
 
-      const model = res.model_config.model
+        const model = res.model_config.model
 
-      let datasets: any = null
-      if (modelConfig.agent_mode?.enabled)
-        datasets = modelConfig.agent_mode?.tools.filter(({ dataset }: any) => dataset?.enabled)
+        let datasets: any = null
+        // old dataset struct
+        if (modelConfig.agent_mode?.tools?.find(({ dataset }: any) => dataset?.enabled))
+          datasets = modelConfig.agent_mode?.tools.filter(({ dataset }: any) => dataset?.enabled)
+        // new dataset struct
+        else if (modelConfig.dataset_configs.datasets?.datasets?.length > 0)
+          datasets = modelConfig.dataset_configs?.datasets?.datasets
 
-      if (dataSets && datasets?.length && datasets?.length > 0) {
-        const { data: dataSetsWithDetail } = await fetchDatasets({ url: '/datasets', params: { page: 1, ids: datasets.map(({ dataset }: any) => dataset.id) } })
-        datasets = dataSetsWithDetail
-        setDataSets(datasets)
-      }
+        if (dataSets && datasets?.length && datasets?.length > 0) {
+          const { data: dataSetsWithDetail } = await fetchDatasets({ url: '/datasets', params: { page: 1, ids: datasets.map(({ dataset }: any) => dataset.id) } })
+          datasets = dataSetsWithDetail
+          setDataSets(datasets)
+        }
 
-      setIntroduction(modelConfig.opening_statement)
-      if (modelConfig.more_like_this)
-        setMoreLikeThisConfig(modelConfig.more_like_this)
+        setIntroduction(modelConfig.opening_statement)
+        setSuggestedQuestions(modelConfig.suggested_questions || [])
+        if (modelConfig.more_like_this)
+          setMoreLikeThisConfig(modelConfig.more_like_this)
 
-      if (modelConfig.suggested_questions_after_answer)
-        setSuggestedQuestionsAfterAnswerConfig(modelConfig.suggested_questions_after_answer)
+        if (modelConfig.suggested_questions_after_answer)
+          setSuggestedQuestionsAfterAnswerConfig(modelConfig.suggested_questions_after_answer)
 
-      if (modelConfig.speech_to_text)
-        setSpeechToTextConfig(modelConfig.speech_to_text)
+        if (modelConfig.speech_to_text)
+          setSpeechToTextConfig(modelConfig.speech_to_text)
 
-      if (modelConfig.retriever_resource)
-        setCitationConfig(modelConfig.retriever_resource)
+        if (modelConfig.retriever_resource)
+          setCitationConfig(modelConfig.retriever_resource)
 
-      if (modelConfig.annotation_reply)
-        setAnnotationConfig(modelConfig.annotation_reply, true)
+        if (modelConfig.annotation_reply)
+          setAnnotationConfig(modelConfig.annotation_reply, true)
 
-      if (modelConfig.sensitive_word_avoidance)
-        setModerationConfig(modelConfig.sensitive_word_avoidance)
+        if (modelConfig.sensitive_word_avoidance)
+          setModerationConfig(modelConfig.sensitive_word_avoidance)
 
-      if (modelConfig.external_data_tools)
-        setExternalDataToolsConfig(modelConfig.external_data_tools)
+        if (modelConfig.external_data_tools)
+          setExternalDataToolsConfig(modelConfig.external_data_tools)
 
-      const config = {
-        modelConfig: {
-          provider: model.provider,
-          model_id: model.name,
-          mode: model.mode,
-          configs: {
-            prompt_template: modelConfig.pre_prompt,
-            prompt_variables: userInputsFormToPromptVariables(modelConfig.user_input_form, modelConfig.dataset_query_variable),
+        const config = {
+          modelConfig: {
+            provider: model.provider,
+            model_id: model.name,
+            mode: model.mode,
+            configs: {
+              prompt_template: modelConfig.pre_prompt,
+              prompt_variables: userInputsFormToPromptVariables(
+                [
+                  ...modelConfig.user_input_form,
+                  ...(
+                    modelConfig.external_data_tools?.length
+                      ? modelConfig.external_data_tools.map((item: any) => {
+                        return {
+                          external_data_tool: {
+                            variable: item.variable as string,
+                            label: item.label as string,
+                            enabled: item.enabled,
+                            type: item.type as string,
+                            config: item.config,
+                            required: true,
+                            icon: item.icon,
+                            icon_background: item.icon_background,
+                          },
+                        }
+                      })
+                      : []
+                  ),
+                ],
+                modelConfig.dataset_query_variable,
+              ),
+            },
+            opening_statement: modelConfig.opening_statement,
+            more_like_this: modelConfig.more_like_this,
+            suggested_questions_after_answer: modelConfig.suggested_questions_after_answer,
+            speech_to_text: modelConfig.speech_to_text,
+            retriever_resource: modelConfig.retriever_resource,
+            sensitive_word_avoidance: modelConfig.sensitive_word_avoidance,
+            external_data_tools: modelConfig.external_data_tools,
+            dataSets: datasets || [],
+            // eslint-disable-next-line multiline-ternary
+            agentConfig: res.is_agent ? {
+              max_iteration: DEFAULT_AGENT_SETTING.max_iteration,
+              ...modelConfig.agent_mode,
+              // remove dataset
+              enabled: true, // modelConfig.agent_mode?.enabled is not correct. old app: the value of app with dataset's is always true
+              tools: modelConfig.agent_mode?.tools.filter((tool: any) => {
+                return !tool.dataset
+              }).map((tool: any) => {
+                return {
+                  ...tool,
+                  isDeleted: res.deleted_tools?.includes(tool.tool_name),
+                  notAuthor: collectionList.find(c => tool.provider_id === c.id)?.is_team_authorization === false,
+                }
+              }),
+            } : DEFAULT_AGENT_SETTING,
           },
-          opening_statement: modelConfig.opening_statement,
-          more_like_this: modelConfig.more_like_this,
-          suggested_questions_after_answer: modelConfig.suggested_questions_after_answer,
-          speech_to_text: modelConfig.speech_to_text,
-          retriever_resource: modelConfig.retriever_resource,
-          sensitive_word_avoidance: modelConfig.sensitive_word_avoidance,
-          external_data_tools: modelConfig.external_data_tools,
-          dataSets: datasets || [],
-        },
-        completionParams: model.completion_params,
-      }
+          completionParams: model.completion_params,
+        }
 
-      if (modelConfig.file_upload)
-        setVisionConfig(modelConfig.file_upload.image, true)
+        if (modelConfig.file_upload)
+          setVisionConfig(modelConfig.file_upload.image, true)
 
-      syncToPublishedConfig(config)
-      setPublishedConfig(config)
-      setDatasetConfigs({
-        retrieval_model: RETRIEVE_TYPE.oneWay,
-        ...modelConfig.dataset_configs,
+        syncToPublishedConfig(config)
+        setPublishedConfig(config)
+        setDatasetConfigs({
+          retrieval_model: RETRIEVE_TYPE.oneWay,
+          ...modelConfig.dataset_configs,
+        })
+        setHasFetchedDetail(true)
       })
-      setHasFetchedDetail(true)
-    })
+    })()
   }, [appId])
 
   const promptEmpty = (() => {
@@ -420,7 +488,7 @@ const Configuration: FC = () => {
 
     if (isAdvancedMode) {
       if (modelModeType === ModelModeType.chat)
-        return chatPromptConfig.prompt.every(({ text }) => !text)
+        return chatPromptConfig.prompt.every(({ text }: any) => !text)
 
       else
         return !completionPromptConfig.prompt.text
@@ -487,15 +555,15 @@ const Configuration: FC = () => {
       user_input_form: promptVariablesToUserInputsForm(promptVariables),
       dataset_query_variable: contextVar || '',
       opening_statement: introduction || '',
+      suggested_questions: suggestedQuestions || [],
       more_like_this: moreLikeThisConfig,
       suggested_questions_after_answer: suggestedQuestionsAfterAnswerConfig,
       speech_to_text: speechToTextConfig,
       retriever_resource: citationConfig,
       sensitive_word_avoidance: moderationConfig,
-      external_data_tools: externalDataToolsConfig,
       agent_mode: {
-        enabled: true,
-        tools: [...postDatasets],
+        ...modelConfig.agentConfig,
+        strategy: isFunctionCall ? AgentStrategy.functionCall : AgentStrategy.react,
       },
       model: {
         provider: modelConfig.provider,
@@ -503,7 +571,12 @@ const Configuration: FC = () => {
         mode: modelConfig.mode,
         completion_params: completionParams as any,
       },
-      dataset_configs: datasetConfigs,
+      dataset_configs: {
+        ...datasetConfigs,
+        datasets: {
+          datasets: [...postDatasets],
+        } as any,
+      },
       file_upload: {
         image: visionConfig,
       },
@@ -558,6 +631,10 @@ const Configuration: FC = () => {
       modelModeType,
       promptMode,
       isAdvancedMode,
+      isAgent,
+      isOpenAI,
+      isFunctionCall,
+      collectionList,
       setPromptMode,
       canReturnToSimpleMode,
       setCanReturnToSimpleMode,
@@ -572,6 +649,8 @@ const Configuration: FC = () => {
       conversationId,
       introduction,
       setIntroduction,
+      suggestedQuestions,
+      setSuggestedQuestions,
       setConversationId,
       controlClearChatMessage,
       setControlClearChatMessage,
@@ -614,70 +693,73 @@ const Configuration: FC = () => {
     >
       <>
         <div className="flex flex-col h-full">
-          <div className='flex items-center justify-between px-6 shrink-0 py-3 flex-wrap gap-y-2'>
-            <div className='flex items-end'>
-              <div className={s.promptTitle}></div>
-              <div className='flex items-center h-[14px] space-x-1 text-xs'>
-                {/* modelModeType missing can not load template */}
-                {(!isAdvancedMode && modelModeType) && (
-                  <div
-                    onClick={() => setPromptMode(PromptMode.advanced)}
-                    className={'cursor-pointer text-indigo-600'}
-                  >
-                    {t('appDebug.promptMode.simple')}
-                  </div>
-                )}
-                {isAdvancedMode && (
-                  <div className='flex items-center space-x-2'>
-                    <div className={cn(locale === 'en' && 'italic', `${s.advancedPromptMode}  text-indigo-600`)}>{t('appDebug.promptMode.advanced')}</div>
-                    {canReturnToSimpleMode && (
-                      <div
-                        onClick={() => setPromptMode(PromptMode.simple)}
-                        className='flex items-center h-6 px-2 bg-indigo-600 shadow-xs border border-gray-200 rounded-lg text-white text-xs font-semibold cursor-pointer space-x-1'
-                      >
-                        <FlipBackward className='w-3 h-3 text-white' />
-                        <div className='text-xs font-semibold uppercase'>{t('appDebug.promptMode.switchBack')}</div>
-                      </div>
+          <div className='flex grow h-[200px]'>
+            <div className="w-full sm:w-1/2 shrink-0 flex flex-col h-full">
+              {/* Header Left */}
+              <div className='flex justify-between items-center px-6 h-14'>
+                <div className='flex items-center'>
+                  <div className='leading-6 text-base font-semibold text-gray-900'>{t('appDebug.orchestrate')}</div>
+                  <div className='flex items-center h-[14px] space-x-1 text-xs'>
+                    {isAdvancedMode && (
+                      <div className='ml-1 flex items-center h-5 px-1.5 border border-gray-100 rounded-md text-[11px] font-medium text-gray-500 uppercase'>{t('appDebug.promptMode.advanced')}</div>
                     )}
                   </div>
+                </div>
+                {isChatApp && (
+                  <AssistantTypePicker
+                    value={isAgent ? 'agent' : 'assistant'}
+                    disabled={isAdvancedMode && !canReturnToSimpleMode}
+                    onChange={(value: string) => {
+                      setIsAgent(value === 'agent')
+                      if (value === 'agent')
+                        setPromptMode(PromptMode.simple)
+                    }}
+                    isFunctionCall={isFunctionCall}
+                    isChatModel={modelConfig.mode === ModelModeType.chat}
+                    agentConfig={modelConfig.agentConfig}
+                    onAgentSettingChange={(config) => {
+                      const nextConfig = produce(modelConfig, (draft: ModelConfig) => {
+                        draft.agentConfig = config
+                      })
+                      setModelConfig(nextConfig)
+                    }}
+                  />
                 )}
               </div>
-            </div>
-
-            <div className='flex items-center flex-wrap gap-y-2 gap-x-2'>
-              {/* Model and Parameters */}
-              <ModelParameterModal
-                isAdvancedMode={isAdvancedMode}
-                mode={mode}
-                provider={modelConfig.provider}
-                completionParams={completionParams}
-                modelId={modelConfig.model_id}
-                setModel={setModel as any}
-                onCompletionParamsChange={(newParams: FormValue) => {
-                  setCompletionParams(newParams)
-                }}
-              />
-              <div className='w-[1px] h-[14px] bg-gray-200'></div>
-              <Button onClick={() => setShowConfirm(true)} className='shrink-0 mr-2 w-[70px] !h-8 !text-[13px] font-medium'>{t('appDebug.operation.resetConfig')}</Button>
-              {isMobile && (
-                <Button className='!h-8 !text-[13px] font-medium' onClick={showDebugPanel}>
-                  <span className='mr-1'>{t('appDebug.operation.debugConfig')}</span>
-                  <CodeBracketIcon className="h-4 w-4 text-gray-500" />
-                </Button>
-              )}
-              <Button type='primary' onClick={() => handlePublish(false)} className={cn(cannotPublish && '!bg-primary-200 !cursor-not-allowed', 'shrink-0 w-[70px] !h-8 !text-[13px] font-medium')}>{t('appDebug.operation.applyConfig')}</Button>
-            </div>
-          </div>
-          <div className='flex grow h-[200px]'>
-            <div className="w-full sm:w-1/2 shrink-0">
               <Config />
             </div>
-            {!isMobile && <div className="relative w-1/2 grow h-full overflow-y-auto py-4 px-6 bg-gray-50 flex flex-col rounded-tl-2xl border-t border-l" style={{ borderColor: 'rgba(0, 0, 0, 0.02)' }}>
-              <Debug
-                hasSetAPIKEY={hasSettedApiKey}
-                onSetting={() => setShowAccountSettingModal({ payload: 'provider' })}
-                inputs={inputs}
-              />
+            {!isMobile && <div className="relative w-1/2  h-full overflow-y-auto  flex flex-col " style={{ borderColor: 'rgba(0, 0, 0, 0.02)' }}>
+              {/* Header Right */}
+              <div className='flex justify-end items-center flex-wrap px-6 h-14 space-x-2'>
+                {/* Model and Parameters */}
+                <ModelParameterModal
+                  isAdvancedMode={isAdvancedMode}
+                  mode={mode}
+                  provider={modelConfig.provider}
+                  completionParams={completionParams}
+                  modelId={modelConfig.model_id}
+                  setModel={setModel as any}
+                  onCompletionParamsChange={(newParams: FormValue) => {
+                    setCompletionParams(newParams)
+                  }}
+                />
+                <div className='w-[1px] h-[14px] bg-gray-200'></div>
+                <Button onClick={() => setShowConfirm(true)} className='shrink-0 mr-2 w-[70px] !h-8 !text-[13px] font-medium'>{t('appDebug.operation.resetConfig')}</Button>
+                {isMobile && (
+                  <Button className='!h-8 !text-[13px] font-medium' onClick={showDebugPanel}>
+                    <span className='mr-1'>{t('appDebug.operation.debugConfig')}</span>
+                    <CodeBracketIcon className="h-4 w-4 text-gray-500" />
+                  </Button>
+                )}
+                <Button type='primary' onClick={() => handlePublish(false)} className={cn(cannotPublish && '!bg-primary-200 !cursor-not-allowed', 'shrink-0 w-[70px] !h-8 !text-[13px] font-medium')}>{t('appDebug.operation.applyConfig')}</Button>
+              </div>
+              <div className='flex flex-col grow h-0 px-6 py-4 rounded-tl-2xl border-t border-l bg-gray-50 '>
+                <Debug
+                  hasSetAPIKEY={hasSettedApiKey}
+                  onSetting={() => setShowAccountSettingModal({ payload: 'provider' })}
+                  inputs={inputs}
+                />
+              </div>
             </div>}
           </div>
         </div>
diff --git a/web/app/components/app/configuration/prompt-mode/advanced-mode-waring.tsx b/web/app/components/app/configuration/prompt-mode/advanced-mode-waring.tsx
index 0a794dcd85..2eaa1f83f9 100644
--- a/web/app/components/app/configuration/prompt-mode/advanced-mode-waring.tsx
+++ b/web/app/components/app/configuration/prompt-mode/advanced-mode-waring.tsx
@@ -4,8 +4,15 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import I18n from '@/context/i18n'
+import { FlipBackward } from '@/app/components/base/icons/src/vender/line/arrows'
 
-const AdvancedModeWarning: FC = () => {
+type Props = {
+  onReturnToSimpleMode: () => void
+}
+
+const AdvancedModeWarning: FC<Props> = ({
+  onReturnToSimpleMode,
+}) => {
   const { t } = useTranslation()
   const { locale } = useContext(I18n)
   const [show, setShow] = React.useState(true)
@@ -26,10 +33,20 @@ const AdvancedModeWarning: FC = () => {
           </a>
         </div>
 
-        <div
-          className='flex items-center h-6 px-2 rounded-md bg-[#fff] border border-gray-200 shadow-xs text-xs font-medium text-primary-600 cursor-pointer'
-          onClick={() => setShow(false)}
-        >{t('appDebug.promptMode.advancedWarning.ok')}</div>
+        <div className='flex items-center space-x-1'>
+          <div
+            onClick={onReturnToSimpleMode}
+            className='shrink-0 flex items-center h-6 px-2 bg-indigo-600 shadow-xs border border-gray-200 rounded-lg text-white text-xs font-semibold cursor-pointer space-x-1'
+          >
+            <FlipBackward className='w-3 h-3 text-white' />
+            <div className='text-xs font-semibold uppercase'>{t('appDebug.promptMode.switchBack')}</div>
+          </div>
+          <div
+            className='flex items-center h-6 px-2 rounded-md bg-[#fff] border border-gray-200 shadow-xs text-xs font-medium text-primary-600 cursor-pointer'
+            onClick={() => setShow(false)}
+          >{t('appDebug.promptMode.advancedWarning.ok')}</div>
+        </div>
+
       </div>
     </div>
   )
diff --git a/web/app/components/app/configuration/style.module.css b/web/app/components/app/configuration/style.module.css
index d9605ea393..f0e57cefbf 100644
--- a/web/app/components/app/configuration/style.module.css
+++ b/web/app/components/app/configuration/style.module.css
@@ -1,10 +1,3 @@
-.promptTitle {
-  width: 72px;
-  height: 31px;
-  background: url(./images/prompt.svg) no-repeat 0 0;
-  background-size: contain;
-}
-
 .advancedPromptMode {
   position: relative;
 }
@@ -18,4 +11,4 @@
   height: 3px;
   background-color: rgba(68, 76, 231, 0.18);
   transform: skewX(-30deg);
-}
+}
\ No newline at end of file
diff --git a/web/app/components/app/configuration/tools/external-data-tool-modal.tsx b/web/app/components/app/configuration/tools/external-data-tool-modal.tsx
index ce46956616..d9f3ca8634 100644
--- a/web/app/components/app/configuration/tools/external-data-tool-modal.tsx
+++ b/web/app/components/app/configuration/tools/external-data-tool-modal.tsx
@@ -6,7 +6,6 @@ import { useTranslation } from 'react-i18next'
 import FormGeneration from '../toolbox/moderation/form-generation'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
-import AppIcon from '@/app/components/base/app-icon'
 import EmojiPicker from '@/app/components/base/emoji-picker'
 import ApiBasedExtensionSelector from '@/app/components/header/account-setting/api-based-extension-page/selector'
 import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
@@ -18,6 +17,7 @@ import type {
   ExternalDataTool,
 } from '@/models/common'
 import { useToastContext } from '@/app/components/base/toast'
+import AppIcon from '@/app/components/base/app-icon'
 
 const systemTypes = ['api']
 type ExternalDataToolModalProps = {
@@ -184,7 +184,8 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
   return (
     <Modal
       isShow
-      onClose={() => {}}
+      onClose={() => { }}
+      wrapperClassName='z-[101]'
       className='!p-8 !pb-6 !max-w-none !w-[640px]'
     >
       <div className='mb-2 text-xl font-semibold text-gray-900'>
@@ -285,6 +286,7 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
       {
         showEmojiPicker && (
           <EmojiPicker
+            className='!z-[200]'
             onSelect={(icon, icon_background) => {
               handleValueChange({ icon, icon_background })
               setShowEmojiPicker(false)
diff --git a/web/app/components/app/configuration/tools/index.tsx b/web/app/components/app/configuration/tools/index.tsx
index 21db5575b6..ed4de8026e 100644
--- a/web/app/components/app/configuration/tools/index.tsx
+++ b/web/app/components/app/configuration/tools/index.tsx
@@ -1,3 +1,4 @@
+// abandoned
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import copy from 'copy-to-clipboard'
diff --git a/web/app/components/app/log/filter.tsx b/web/app/components/app/log/filter.tsx
index 10439d0681..80a58bb5a2 100644
--- a/web/app/components/app/log/filter.tsx
+++ b/web/app/components/app/log/filter.tsx
@@ -69,7 +69,7 @@ const Filter: FC<IFilterProps> = ({ appId, queryParams, setQueryParams }: IFilte
           type="text"
           name="query"
           className="block w-[240px] bg-gray-100 shadow-sm rounded-md border-0 py-1.5 pl-10 text-gray-900 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-gray-200 focus-visible:outline-none sm:text-sm sm:leading-6"
-          placeholder={t('common.operation.search')}
+          placeholder={t('common.operation.search')!}
           value={queryParams.keyword}
           onChange={(e) => {
             setQueryParams({ ...queryParams, keyword: e.target.value })
diff --git a/web/app/components/app/log/list.tsx b/web/app/components/app/log/list.tsx
index a17c431c23..6e3ba82982 100644
--- a/web/app/components/app/log/list.tsx
+++ b/web/app/components/app/log/list.tsx
@@ -34,6 +34,7 @@ import { useTextGenerationCurrentProviderAndModelAndModelList } from '@/app/comp
 import ModelName from '@/app/components/header/account-setting/model-provider-page/model-name'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import TextGeneration from '@/app/components/app/text-generate/item'
+import { addFileInfos, sortAgentSorts } from '@/app/components/tools/utils'
 
 type IConversationList = {
   logs?: ChatConversationsResponse | CompletionConversationsResponse
@@ -80,15 +81,17 @@ const getFormattedChatList = (messages: ChatMessage[]) => {
       content: item.inputs.query || item.inputs.default_input || item.query, // text generation: item.inputs.query; chat: item.query
       isAnswer: false,
       log: item.message as any,
-      message_files: item.message_files,
+      message_files: item.message_files?.filter((file: any) => file.belongs_to === 'user') || [],
     })
     newChatList.push({
       id: item.id,
       content: item.answer,
+      agent_thoughts: addFileInfos(item.agent_thoughts ? sortAgentSorts(item.agent_thoughts) : item.agent_thoughts, item.message_files),
       feedback: item.feedbacks.find(item => item.from_source === 'user'), // user feedback
       adminFeedback: item.feedbacks.find(item => item.from_source === 'admin'), // admin feedback
       feedbackDisabled: false,
       isAnswer: true,
+      message_files: item.message_files?.filter((file: any) => file.belongs_to === 'assistant') || [],
       more: {
         time: dayjs.unix(item.created_at).format('hh:mm A'),
         tokens: item.answer_tokens + item.message_tokens,
diff --git a/web/app/components/base/app-icon/index.tsx b/web/app/components/base/app-icon/index.tsx
index 71c726606d..9e2789c990 100644
--- a/web/app/components/base/app-icon/index.tsx
+++ b/web/app/components/base/app-icon/index.tsx
@@ -8,7 +8,7 @@ import style from './style.module.css'
 init({ data })
 
 export type AppIconProps = {
-  size?: 'tiny' | 'small' | 'medium' | 'large'
+  size?: 'xs' | 'tiny' | 'small' | 'medium' | 'large'
   rounded?: boolean
   icon?: string
   background?: string
diff --git a/web/app/components/base/app-icon/style.module.css b/web/app/components/base/app-icon/style.module.css
index 43098fd955..20f76d4099 100644
--- a/web/app/components/base/app-icon/style.module.css
+++ b/web/app/components/base/app-icon/style.module.css
@@ -1,15 +1,23 @@
 .appIcon {
   @apply flex items-center justify-center relative w-9 h-9 text-lg bg-teal-100 rounded-lg grow-0 shrink-0;
 }
+
 .appIcon.large {
   @apply w-10 h-10;
 }
+
 .appIcon.small {
   @apply w-8 h-8;
 }
+
 .appIcon.tiny {
   @apply w-6 h-6 text-base;
 }
+
+.appIcon.xs {
+  @apply w-3 h-3 text-base;
+}
+
 .appIcon.rounded {
   @apply rounded-full;
-}
+}
\ No newline at end of file
diff --git a/web/app/components/base/drawer-plus/index.tsx b/web/app/components/base/drawer-plus/index.tsx
index 61504860e8..3415b067aa 100644
--- a/web/app/components/base/drawer-plus/index.tsx
+++ b/web/app/components/base/drawer-plus/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React, { useRef } from 'react'
+import cn from 'classnames'
 import Drawer from '@/app/components/base/drawer'
 import { XClose } from '@/app/components/base/icons/src/vender/line/general'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
@@ -8,21 +9,33 @@ import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 type Props = {
   isShow: boolean
   onHide: () => void
+  panelClassName?: string
   maxWidthClassName?: string
+  contentClassName?: string
+  headerClassName?: string
   height?: number | string
   title: string | JSX.Element
+  titleDescription?: string | JSX.Element
   body: JSX.Element
   foot?: JSX.Element
+  isShowMask?: boolean
+  clickOutsideNotOpen?: boolean
 }
 
 const DrawerPlus: FC<Props> = ({
   isShow,
   onHide,
+  panelClassName = '',
   maxWidthClassName = '!max-w-[640px]',
   height = 'calc(100vh - 72px)',
+  contentClassName,
+  headerClassName,
   title,
+  titleDescription,
   body,
   foot,
+  isShowMask,
+  clickOutsideNotOpen = true,
 }) => {
   const ref = useRef(null)
   const media = useBreakpoints()
@@ -33,26 +46,33 @@ const DrawerPlus: FC<Props> = ({
 
   return (
     // clickOutsideNotOpen to fix confirm modal click cause drawer close
-    <Drawer isOpen={isShow} clickOutsideNotOpen onClose={onHide} footer={null} mask={isMobile} panelClassname={`mt-16 mx-2 sm:mr-2 mb-3 !p-0 ${maxWidthClassName} rounded-xl`}>
+    <Drawer isOpen={isShow} clickOutsideNotOpen={clickOutsideNotOpen} onClose={onHide} footer={null} mask={isMobile || isShowMask} panelClassname={`mt-16 mx-2 sm:mr-2 mb-3 !p-0 ${panelClassName} ${maxWidthClassName} rounded-xl`}>
       <div
-        className='w-full flex flex-col bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl'
+        className={cn(contentClassName, 'w-full flex flex-col bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl')}
         style={{
           height,
         }}
         ref={ref}
       >
-        <div className='shrink-0 flex justify-between items-center pl-6 pr-5 h-14 border-b border-b-gray-100'>
-          <div className='text-base font-semibold text-gray-900'>
-            {title}
-          </div>
-          <div className='flex items-center'>
-            <div
-              onClick={onHide}
-              className='flex justify-center items-center w-6 h-6 cursor-pointer'
-            >
-              <XClose className='w-4 h-4 text-gray-500' />
+        <div className={cn(headerClassName, 'shrink-0 border-b border-b-gray-100 py-4')}>
+          <div className='flex justify-between items-center pl-6 pr-5 h-6'>
+            <div className='text-base font-semibold text-gray-900'>
+              {title}
+            </div>
+            <div className='flex items-center'>
+              <div
+                onClick={onHide}
+                className='flex justify-center items-center w-6 h-6 cursor-pointer'
+              >
+                <XClose className='w-4 h-4 text-gray-500' />
+              </div>
             </div>
           </div>
+          {titleDescription && (
+            <div className='pl-6 pr-10 leading-[18px] text-xs font-normal text-gray-500'>
+              {titleDescription}
+            </div>
+          )}
         </div>
         <div className='grow overflow-y-auto'>
           {body}
diff --git a/web/app/components/base/emoji-picker/index.tsx b/web/app/components/base/emoji-picker/index.tsx
index 7cfbbfa75a..98f74d46f8 100644
--- a/web/app/components/base/emoji-picker/index.tsx
+++ b/web/app/components/base/emoji-picker/index.tsx
@@ -65,12 +65,14 @@ type IEmojiPickerProps = {
   isModal?: boolean
   onSelect?: (emoji: string, background: string) => void
   onClose?: () => void
+  className?: string
 }
 
 const EmojiPicker: FC<IEmojiPickerProps> = ({
   isModal = true,
   onSelect,
   onClose,
+  className,
 }) => {
   const { t } = useTranslation()
   const { categories } = data as EmojiMartData
@@ -84,7 +86,7 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({
     onClose={() => { }}
     isShow
     closable={false}
-    wrapperClassName='!z-40'
+    wrapperClassName={`!z-40 ${className}`}
     className={cn(s.container, '!w-[362px] !p-0')}
   >
     <div className='flex flex-col items-center w-full p-3'>
diff --git a/web/app/components/base/icons/assets/public/common/diagonal-dividing-line.svg b/web/app/components/base/icons/assets/public/common/diagonal-dividing-line.svg
new file mode 100644
index 0000000000..608e53e111
--- /dev/null
+++ b/web/app/components/base/icons/assets/public/common/diagonal-dividing-line.svg
@@ -0,0 +1,3 @@
+<svg width="7" height="20" viewBox="0 0 7 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Line 3" d="M1 19.3544L5.94174 0.645657" stroke="#EAECF0" stroke-linecap="round"/>
+</svg>
diff --git a/web/app/components/base/icons/assets/public/header-nav/explore/explore-active.svg b/web/app/components/base/icons/assets/public/header-nav/explore/explore-active.svg
new file mode 100644
index 0000000000..f5dd482df8
--- /dev/null
+++ b/web/app/components/base/icons/assets/public/header-nav/explore/explore-active.svg
@@ -0,0 +1,13 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6139_55194)">
+<path d="M8 0.5C6.4467 0.5 5.1875 1.7592 5.1875 3.3125C5.1875 4.8658 6.4467 6.125 8 6.125C9.5533 6.125 10.8125 4.8658 10.8125 3.3125C10.8125 1.7592 9.5533 0.5 8 0.5Z" fill="#155EEF"/>
+<path d="M15.5 8C15.5 6.4467 14.2408 5.1875 12.6875 5.1875C11.1342 5.1875 9.875 6.4467 9.875 8C9.875 9.5533 11.1342 10.8125 12.6875 10.8125C14.2408 10.8125 15.5 9.5533 15.5 8Z" fill="#155EEF"/>
+<path d="M8 9.875C6.4467 9.875 5.1875 11.1342 5.1875 12.6875C5.1875 14.2408 6.4467 15.5 8 15.5C9.5533 15.5 10.8125 14.2408 10.8125 12.6875C10.8125 11.1342 9.5533 9.875 8 9.875Z" fill="#155EEF"/>
+<path d="M6.125 8C6.125 6.4467 4.8658 5.1875 3.3125 5.1875C1.7592 5.1875 0.5 6.4467 0.5 8C0.5 9.5533 1.7592 10.8125 3.3125 10.8125C4.8658 10.8125 6.125 9.5533 6.125 8Z" fill="#155EEF"/>
+</g>
+<defs>
+<clipPath id="clip0_6139_55194">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/web/app/components/base/icons/assets/public/header-nav/explore/explore.svg b/web/app/components/base/icons/assets/public/header-nav/explore/explore.svg
new file mode 100644
index 0000000000..9273455f25
--- /dev/null
+++ b/web/app/components/base/icons/assets/public/header-nav/explore/explore.svg
@@ -0,0 +1,13 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6139_55192)">
+<path d="M10.25 3.3125C10.25 4.55514 9.24264 5.5625 8 5.5625C6.75736 5.5625 5.75 4.55514 5.75 3.3125C5.75 2.06986 6.75736 1.0625 8 1.0625C9.24264 1.0625 10.25 2.06986 10.25 3.3125Z" stroke="#667085" stroke-width="1.5" stroke-linecap="square"/>
+<path d="M12.6875 10.25C11.4449 10.25 10.4375 9.24264 10.4375 8C10.4375 6.75736 11.4449 5.75 12.6875 5.75C13.9301 5.75 14.9375 6.75736 14.9375 8C14.9375 9.24264 13.9301 10.25 12.6875 10.25Z" stroke="#667085" stroke-width="1.5" stroke-linecap="square"/>
+<path d="M10.25 12.6875C10.25 13.9301 9.24264 14.9375 8 14.9375C6.75736 14.9375 5.75 13.9301 5.75 12.6875C5.75 11.4449 6.75736 10.4375 8 10.4375C9.24264 10.4375 10.25 11.4449 10.25 12.6875Z" stroke="#667085" stroke-width="1.5" stroke-linecap="square"/>
+<path d="M3.3125 10.25C2.06986 10.25 1.0625 9.24264 1.0625 8C1.0625 6.75736 2.06986 5.75 3.3125 5.75C4.55514 5.75 5.5625 6.75736 5.5625 8C5.5625 9.24264 4.55514 10.25 3.3125 10.25Z" stroke="#667085" stroke-width="1.5" stroke-linecap="square"/>
+</g>
+<defs>
+<clipPath id="clip0_6139_55192">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/web/app/components/base/icons/assets/public/header-nav/knowledge/knowledge-active.svg b/web/app/components/base/icons/assets/public/header-nav/knowledge/knowledge-active.svg
new file mode 100644
index 0000000000..6be2476f12
--- /dev/null
+++ b/web/app/components/base/icons/assets/public/header-nav/knowledge/knowledge-active.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.0625 0.5C2.92341 0.5 2 1.42341 2 2.5625V13.4375C2 14.5766 2.92341 15.5 4.0625 15.5H12.6875C13.4124 15.5 14 14.9124 14 14.1875V1.8125C14 1.08763 13.4124 0.5 12.6875 0.5H4.0625ZM3.125 13.25V13.4375C3.125 13.9553 3.54473 14.375 4.0625 14.375H12.6875C12.7911 14.375 12.875 14.2911 12.875 14.1875V12.1117C12.8138 12.1205 12.7512 12.125 12.6875 12.125H4.25C3.62868 12.125 3.125 12.6287 3.125 13.25ZM5.5625 3.6875C5.25184 3.6875 5 3.93934 5 4.25C5 4.56066 5.25184 4.8125 5.5625 4.8125H10.4375C10.7482 4.8125 11 4.56066 11 4.25C11 3.93934 10.7482 3.6875 10.4375 3.6875H5.5625ZM5 7.25C5 6.93934 5.25184 6.6875 5.5625 6.6875H8.1875C8.49816 6.6875 8.75 6.93934 8.75 7.25C8.75 7.56066 8.49816 7.8125 8.1875 7.8125H5.5625C5.25184 7.8125 5 7.56066 5 7.25Z" fill="#155EEF"/>
+</svg>
diff --git a/web/app/components/base/icons/assets/public/header-nav/knowledge/knowledge.svg b/web/app/components/base/icons/assets/public/header-nav/knowledge/knowledge.svg
new file mode 100644
index 0000000000..97bc868a29
--- /dev/null
+++ b/web/app/components/base/icons/assets/public/header-nav/knowledge/knowledge.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.4375 8V10.8125C13.4375 11.2267 13.1017 11.5625 12.6875 11.5625H4.25C3.31802 11.5625 2.5625 12.318 2.5625 13.25C2.5625 14.182 3.31802 14.9375 4.25 14.9375H6.5M5.5625 4.25H10.4375M5.5625 7.25H8.1875M4.0625 1.0625H12.6875C13.1017 1.0625 13.4375 1.39829 13.4375 1.8125V14.1875C13.4375 14.6017 13.1017 14.9375 12.6875 14.9375H4.0625C3.23407 14.9375 2.5625 14.2659 2.5625 13.4375V2.5625C2.5625 1.73407 3.23407 1.0625 4.0625 1.0625Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/web/app/components/base/icons/assets/public/header-nav/studio/Robot-Active.svg b/web/app/components/base/icons/assets/public/header-nav/studio/Robot-Active.svg
new file mode 100644
index 0000000000..5d79215e95
--- /dev/null
+++ b/web/app/components/base/icons/assets/public/header-nav/studio/Robot-Active.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C8.41421 0 8.75 0.335786 8.75 0.75V1.5H12.5C13.3284 1.5 14 2.17157 14 3V8.25C14 8.80521 13.6984 9.28997 13.25 9.54933V10.1893L14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303C14.2374 12.8232 13.7626 12.8232 13.4697 12.5303L13.0108 12.0714C12.3429 14.2033 10.3521 15.75 8 15.75C5.64793 15.75 3.65711 14.2033 2.98923 12.0714L2.53033 12.5303C2.23744 12.8232 1.76256 12.8232 1.46967 12.5303C1.17678 12.2374 1.17678 11.7626 1.46967 11.4697L2.75 10.1893L2.75 9.54933C2.30165 9.28997 2 8.80521 2 8.25V3C2 2.17157 2.67157 1.5 3.5 1.5H7.25V0.75C7.25 0.335786 7.58579 0 8 0ZM3.5 3V8.25H12.5V3H3.5Z" fill="#155EEF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.75 4.5C6.16421 4.5 6.5 4.83579 6.5 5.25V6C6.5 6.41421 6.16421 6.75 5.75 6.75C5.33579 6.75 5 6.41421 5 6V5.25C5 4.83579 5.33579 4.5 5.75 4.5ZM10.25 4.5C10.6642 4.5 11 4.83579 11 5.25V6C11 6.41421 10.6642 6.75 10.25 6.75C9.83579 6.75 9.5 6.41421 9.5 6V5.25C9.5 4.83579 9.83579 4.5 10.25 4.5Z" fill="#155EEF"/>
+</svg>
diff --git a/web/app/components/base/icons/assets/public/header-nav/studio/Robot.svg b/web/app/components/base/icons/assets/public/header-nav/studio/Robot.svg
new file mode 100644
index 0000000000..9b8177aeac
--- /dev/null
+++ b/web/app/components/base/icons/assets/public/header-nav/studio/Robot.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 1.99997H3.33594C2.92172 1.99997 2.58594 2.33576 2.58594 2.74997V8.37497C2.58594 8.78919 2.92172 9.12497 3.33594 9.12497H12.6641C13.0783 9.12497 13.4141 8.78919 13.4141 8.37497V2.74997C13.4141 2.33576 13.0783 1.99997 12.6641 1.99997H8ZM8 1.99997V0.820923M5.5625 4.99997V6.12497M10.4375 4.99997V6.12497M3.3125 9.12497V9.87497M3.3125 9.87497V10.4375C3.3125 13.0263 5.41117 15.125 8 15.125C10.5888 15.125 12.6875 13.0263 12.6875 10.4375V9.87497M3.3125 9.87497L1.8125 11.375M12.6875 9.87497V9.12497M12.6875 9.87497L14.1875 11.375" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/web/app/components/base/icons/assets/public/header-nav/tools/tools-active.svg b/web/app/components/base/icons/assets/public/header-nav/tools/tools-active.svg
new file mode 100644
index 0000000000..cb697de6d8
--- /dev/null
+++ b/web/app/components/base/icons/assets/public/header-nav/tools/tools-active.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.88756 1.30591C7.96013 1.26962 8.01898 1.21078 8.05527 1.1382L8.41395 0.420826C8.55215 0.144433 8.94658 0.144433 9.08478 0.420826L9.44346 1.1382C9.47975 1.21078 9.5386 1.26962 9.61117 1.30591L10.3285 1.6646C10.6049 1.80279 10.6049 2.19722 10.3285 2.33542L9.61117 2.6941C9.5386 2.73039 9.47975 2.78924 9.44346 2.86181L9.08478 3.57919C8.94658 3.85558 8.55215 3.85558 8.41395 3.57919L8.05527 2.86181C8.01898 2.78924 7.96013 2.73039 7.88756 2.6941L7.17019 2.33542C6.89379 2.19722 6.89379 1.80279 7.17019 1.6646L7.88756 1.30591Z" fill="#155EEF"/>
+<path d="M3.88756 2.55591C3.96013 2.51962 4.01898 2.46078 4.05527 2.3882L4.28895 1.92083C4.42715 1.64443 4.82158 1.64443 4.95977 1.92083L5.19346 2.3882C5.22975 2.46078 5.2886 2.51962 5.36117 2.55591L5.82854 2.7896C6.10494 2.92779 6.10494 3.32222 5.82854 3.46042L5.36117 3.6941C5.2886 3.73039 5.22975 3.78924 5.19346 3.86181L4.95978 4.32919C4.82158 4.60558 4.42715 4.60558 4.28895 4.32919L4.05527 3.86181C4.01898 3.78924 3.96013 3.73039 3.88756 3.6941L3.42019 3.46042C3.14379 3.32222 3.14379 2.92779 3.42019 2.7896L3.88756 2.55591Z" fill="#155EEF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.9417 1.91015C14.1985 2.08507 14.2648 2.43499 14.0899 2.69173L12.0062 5.75001H13.4375C13.7482 5.75001 14 6.00185 14 6.31251V14.1875C14 14.9124 13.4124 15.5 12.6875 15.5H3.3125C2.58763 15.5 2 14.9124 2 14.1875V6.31251C2 6.00185 2.25184 5.75001 2.5625 5.75001H10.6449L13.1601 2.05829C13.3351 1.80155 13.685 1.73523 13.9417 1.91015ZM6.3125 8.75C6.00184 8.75 5.75 9.00184 5.75 9.3125C5.75 9.62316 6.00184 9.875 6.3125 9.875H9.6875C9.99816 9.875 10.25 9.62316 10.25 9.3125C10.25 9.00184 9.99816 8.75 9.6875 8.75H6.3125Z" fill="#155EEF"/>
+</svg>
diff --git a/web/app/components/base/icons/assets/public/header-nav/tools/tools.svg b/web/app/components/base/icons/assets/public/header-nav/tools/tools.svg
new file mode 100644
index 0000000000..7dcdc1a0e8
--- /dev/null
+++ b/web/app/components/base/icons/assets/public/header-nav/tools/tools.svg
@@ -0,0 +1,14 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7278_16509)">
+<path d="M13.4375 13.9375V6.3125H2.5625V13.9375C2.5625 14.4898 3.01022 14.9375 3.5625 14.9375H12.4375C12.9898 14.9375 13.4375 14.4898 13.4375 13.9375Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.6249 2.375L11.1733 5.97327" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.3125 9.3125H9.6875" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.74536 1.43634L8.75 1.42705L8.75464 1.43634C8.8756 1.67825 9.07175 1.8744 9.31366 1.99536L9.32295 2L9.31366 2.00464C9.07175 2.1256 8.8756 2.32175 8.75464 2.56366L8.75 2.57295L8.74536 2.56366C8.6244 2.32175 8.42825 2.1256 8.18634 2.00464L8.17705 2L8.18634 1.99536C8.42825 1.8744 8.6244 1.67825 8.74536 1.43634L8.07454 1.10093L8.74536 1.43634Z" stroke="#667085" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="round"/>
+<path d="M4.51955 2.71615L4.625 2.66343L4.51955 2.71615L4.44925 2.57555L4.31195 2.30095C4.44093 2.55892 4.80907 2.55892 4.93805 2.30095L4.80075 2.57555L4.51955 2.71615ZM4.625 2.88765C4.69208 2.97794 4.77206 3.05792 4.86235 3.125C4.77206 3.19208 4.69208 3.27206 4.625 3.36235C4.55792 3.27206 4.47794 3.19208 4.38765 3.125C4.47794 3.05792 4.55792 2.97794 4.625 2.88765ZM4.16343 3.125L4.21615 3.01955L4.21615 3.01955L4.16343 3.125Z" stroke="#667085" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_7278_16509">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/web/app/components/base/icons/assets/public/other/default-tool-icon.svg b/web/app/components/base/icons/assets/public/other/default-tool-icon.svg
new file mode 100644
index 0000000000..2c501c1966
--- /dev/null
+++ b/web/app/components/base/icons/assets/public/other/default-tool-icon.svg
@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.5">
+<rect width="24" height="24" rx="6" fill="#E5E7EB"/>
+<rect x="0.25" y="0.25" width="23.5" height="23.5" rx="5.75" stroke="black" stroke-opacity="0.05" stroke-width="0.5"/>
+<path d="M11.8876 5.30588C11.9601 5.26959 12.019 5.21074 12.0553 5.13817L12.414 4.4208C12.5522 4.1444 12.9466 4.1444 13.0848 4.4208L13.4435 5.13817C13.4797 5.21074 13.5386 5.26959 13.6112 5.30588L14.3285 5.66457C14.6049 5.80276 14.6049 6.19719 14.3285 6.33539L13.6112 6.69407C13.5386 6.73036 13.4797 6.78921 13.4435 6.86178L13.0848 7.57916C12.9466 7.85555 12.5522 7.85555 12.414 7.57916L12.0553 6.86178C12.019 6.78921 11.9601 6.73036 11.8876 6.69407L11.1702 6.33539C10.8938 6.19719 10.8938 5.80276 11.1702 5.66457L11.8876 5.30588Z" fill="#667085"/>
+<path d="M7.88756 6.55588C7.96013 6.51959 8.01898 6.46074 8.05527 6.38817L8.28895 5.9208C8.42715 5.6444 8.82158 5.6444 8.95978 5.9208L9.19346 6.38817C9.22975 6.46074 9.2886 6.51959 9.36117 6.55588L9.82854 6.78956C10.1049 6.92776 10.1049 7.32219 9.82854 7.46039L9.36117 7.69407C9.2886 7.73036 9.22975 7.78921 9.19346 7.86178L8.95978 8.32915C8.82158 8.60555 8.42715 8.60555 8.28895 8.32915L8.05527 7.86178C8.01898 7.78921 7.96013 7.73036 7.88756 7.69407L7.42019 7.46039C7.14379 7.32219 7.14379 6.92776 7.42019 6.78957L7.88756 6.55588Z" fill="#667085"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.9417 5.91012C18.1985 6.08504 18.2648 6.43496 18.0899 6.6917L16.0062 9.74998H17.4375C17.7482 9.74998 18 10.0018 18 10.3125V18.1875C18 18.9124 17.4124 19.5 16.6875 19.5H7.3125C6.58763 19.5 6 18.9123 6 18.1875V10.3125C6 10.0018 6.25184 9.74998 6.5625 9.74998H14.6449L17.1601 6.05826C17.3351 5.80152 17.685 5.7352 17.9417 5.91012ZM10.3125 12.75C10.0018 12.75 9.75 13.0018 9.75 13.3125C9.75 13.6231 10.0018 13.875 10.3125 13.875H13.6875C13.9982 13.875 14.25 13.6231 14.25 13.3125C14.25 13.0018 13.9982 12.75 13.6875 12.75H10.3125Z" fill="#667085"/>
+</g>
+</svg>
diff --git a/web/app/components/base/icons/assets/vender/line/arrows/arrow-narrow-right.svg b/web/app/components/base/icons/assets/vender/line/arrows/arrow-narrow-right.svg
new file mode 100644
index 0000000000..b5625b5c9b
--- /dev/null
+++ b/web/app/components/base/icons/assets/vender/line/arrows/arrow-narrow-right.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 12H20M20 12L14 6M20 12L14 18" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/web/app/components/base/icons/assets/vender/solid/arrows/chevron-down.svg b/web/app/components/base/icons/assets/vender/solid/arrows/chevron-down.svg
new file mode 100644
index 0000000000..c76644787d
--- /dev/null
+++ b/web/app/components/base/icons/assets/vender/solid/arrows/chevron-down.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="chevron-down">
+<path id="Icon" d="M6 9L12 15L18 9" stroke="#101828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/web/app/components/base/icons/assets/vender/solid/communication/ai-text.svg b/web/app/components/base/icons/assets/vender/solid/communication/ai-text.svg
new file mode 100644
index 0000000000..dcda2ef346
--- /dev/null
+++ b/web/app/components/base/icons/assets/vender/solid/communication/ai-text.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 5C3.44772 5 3 5.44772 3 6C3 6.55228 3.44772 7 4 7H20C20.5523 7 21 6.55228 21 6C21 5.44772 20.5523 5 20 5H4Z" fill="black"/>
+<path d="M17.9191 9.60608C17.7616 9.2384 17.4 9 17 9C16.6 9 16.2384 9.2384 16.0809 9.60608L14.7384 12.7384L11.6061 14.0809C11.2384 14.2384 11 14.6 11 15C11 15.4 11.2384 15.7616 11.6061 15.9191L14.7384 17.2616L16.0809 20.3939C16.2384 20.7616 16.6 21 17 21C17.4 21 17.7616 20.7616 17.9191 20.3939L19.2616 17.2616L22.3939 15.9191C22.7616 15.7616 23 15.4 23 15C23 14.6 22.7616 14.2384 22.3939 14.0809L19.2616 12.7384L17.9191 9.60608Z" fill="black"/>
+<path d="M4 11C3.44772 11 3 11.4477 3 12C3 12.5523 3.44772 13 4 13H9C9.55228 13 10 12.5523 10 12C10 11.4477 9.55228 11 9 11H4Z" fill="black"/>
+<path d="M4 17C3.44772 17 3 17.4477 3 18C3 18.5523 3.44772 19 4 19H7C7.55228 19 8 18.5523 8 18C8 17.4477 7.55228 17 7 17H4Z" fill="black"/>
+</svg>
diff --git a/web/app/components/base/icons/assets/vender/solid/communication/cute-robote.svg b/web/app/components/base/icons/assets/vender/solid/communication/cute-robote.svg
new file mode 100644
index 0000000000..5eb7476085
--- /dev/null
+++ b/web/app/components/base/icons/assets/vender/solid/communication/cute-robote.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="cute-robote">
+<path id="Icon" fill-rule="evenodd" clip-rule="evenodd" d="M12 1C12.5523 1 13 1.44772 13 2V3H17C18.6569 3 20 4.34315 20 6V11C20 11.8885 19.6138 12.6868 19 13.2361V14.5858L20.7071 16.2929C21.0976 16.6834 21.0976 17.3166 20.7071 17.7071C20.3166 18.0976 19.6834 18.0976 19.2929 17.7071L18.681 17.0952C17.7905 19.9377 15.1361 22 12 22C8.8639 22 6.20948 19.9377 5.31897 17.0952L4.70711 17.7071C4.31658 18.0976 3.68342 18.0976 3.29289 17.7071C2.90237 17.3166 2.90237 16.6834 3.29289 16.2929L5 14.5858V13.2361C4.38625 12.6868 4 11.8885 4 11V6C4 4.34315 5.34315 3 7 3H11V2C11 1.44772 11.4477 1 12 1ZM7 5C6.44772 5 6 5.44772 6 6V11C6 11.5523 6.44772 12 7 12H17C17.5523 12 18 11.5523 18 11V6C18 5.44772 17.5523 5 17 5H7ZM9 7C9.55228 7 10 7.44772 10 8V9C10 9.55228 9.55228 10 9 10C8.44772 10 8 9.55228 8 9V8C8 7.44772 8.44772 7 9 7ZM15 7C15.5523 7 16 7.44772 16 8V9C16 9.55228 15.5523 10 15 10C14.4477 10 14 9.55228 14 9V8C14 7.44772 14.4477 7 15 7Z" fill="black"/>
+</g>
+</svg>
diff --git a/web/app/components/base/icons/assets/vender/solid/development/api-connection.svg b/web/app/components/base/icons/assets/vender/solid/development/api-connection.svg
new file mode 100644
index 0000000000..5eddeeb9fa
--- /dev/null
+++ b/web/app/components/base/icons/assets/vender/solid/development/api-connection.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="api-connection">
+<g id="vector">
+<path d="M4.36364 11.8182C4.36364 7.60073 7.78255 4.18182 12 4.18182C14.8252 4.18182 17.2934 5.71543 18.6154 8.00079C18.9171 8.52231 19.5844 8.70053 20.106 8.39884C20.6275 8.09716 20.8057 7.42982 20.504 6.9083C18.8081 3.97648 15.6355 2 12 2C6.9463 2 2.78441 5.81824 2.24174 10.7273H1.09091C0.488417 10.7273 0 11.2157 0 11.8182C0 12.4207 0.488417 12.9091 1.09091 12.9091H2.24174C2.78441 17.8181 6.9463 21.6364 12 21.6364C15.6355 21.6364 18.8081 19.6599 20.504 16.7281C20.8057 16.2065 20.6275 15.5392 20.106 15.2375C19.5844 14.9358 18.9171 15.1141 18.6154 15.6356C17.2934 17.9209 14.8252 19.4545 12 19.4545C7.78255 19.4545 4.36364 16.0356 4.36364 11.8182Z" fill="black"/>
+<path d="M12 6.36364C8.98754 6.36364 6.54545 8.80572 6.54545 11.8182C6.54545 14.8306 8.98754 17.2727 12 17.2727C14.6389 17.2727 16.84 15.3988 17.3454 12.9091H22.9091C23.5116 12.9091 24 12.4207 24 11.8182C24 11.2157 23.5116 10.7273 22.9091 10.7273H17.3454C16.84 8.23756 14.6389 6.36364 12 6.36364Z" fill="black"/>
+</g>
+</g>
+</svg>
diff --git a/web/app/components/base/icons/assets/vender/solid/education/bubble-text.svg b/web/app/components/base/icons/assets/vender/solid/education/bubble-text.svg
new file mode 100644
index 0000000000..c97b784c8d
--- /dev/null
+++ b/web/app/components/base/icons/assets/vender/solid/education/bubble-text.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bubble-text">
+<path id="vector" fill-rule="evenodd" clip-rule="evenodd" d="M2 9C2 5.68629 4.68629 3 8 3H16C19.3137 3 22 5.68629 22 9V15C22 18.3137 19.3137 21 16 21H3C2.44772 21 2 20.5523 2 20V9ZM9 9C8.44772 9 8 9.44772 8 10C8 10.5523 8.44772 11 9 11H15C15.5523 11 16 10.5523 16 10C16 9.44772 15.5523 9 15 9H9ZM9 13C8.44772 13 8 13.4477 8 14C8 14.5523 8.44772 15 9 15H12C12.5523 15 13 14.5523 13 14C13 13.4477 12.5523 13 12 13H9Z" fill="black"/>
+</g>
+</svg>
diff --git a/web/app/components/base/icons/assets/vender/solid/education/heart-02.svg b/web/app/components/base/icons/assets/vender/solid/education/heart-02.svg
new file mode 100644
index 0000000000..d1d4ad185d
--- /dev/null
+++ b/web/app/components/base/icons/assets/vender/solid/education/heart-02.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5836 3.8721C12.3615 3.99329 12.1665 4.11496 12 4.22818C11.8335 4.11496 11.6385 3.99329 11.4164 3.8721C10.6185 3.4369 9.45449 3 8 3C6.48169 3 4.96498 3.60857 3.83296 4.81606C2.69616 6.02865 2 7.78592 2 10C2 13.3448 4.37277 16.1023 6.58187 17.9272C7.71336 18.8619 8.86688 19.6065 9.7917 20.1203C10.2539 20.377 10.6687 20.5816 11.004 20.7253C11.1707 20.7967 11.3289 20.858 11.4705 20.9033C11.5784 20.9378 11.7841 21 12 21C12.2159 21 12.4216 20.9378 12.5295 20.9033C12.6711 20.858 12.8293 20.7967 12.996 20.7253C13.3313 20.5816 13.7461 20.377 14.2083 20.1203C15.1331 19.6065 16.2866 18.8619 17.4181 17.9272C19.6272 16.1023 22 13.3448 22 10C22 7.78592 21.3038 6.02865 20.167 4.81606C19.035 3.60857 17.5183 3 16 3C14.5455 3 13.3815 3.4369 12.5836 3.8721Z" fill="black"/>
+</svg>
diff --git a/web/app/components/base/icons/assets/vender/solid/education/unblur.svg b/web/app/components/base/icons/assets/vender/solid/education/unblur.svg
new file mode 100644
index 0000000000..498c2a0e6f
--- /dev/null
+++ b/web/app/components/base/icons/assets/vender/solid/education/unblur.svg
@@ -0,0 +1,19 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="unblur">
+<g id="vector">
+<path d="M9.5 6.25C9.5 6.80228 9.05228 7.25 8.5 7.25C7.94772 7.25 7.5 6.80228 7.5 6.25C7.5 5.69772 7.94772 5.25 8.5 5.25C9.05228 5.25 9.5 5.69772 9.5 6.25Z" fill="black"/>
+<path d="M6 6.25C6 6.80228 5.55228 7.25 5 7.25C4.44772 7.25 4 6.80228 4 6.25C4 5.69772 4.44772 5.25 5 5.25C5.55228 5.25 6 5.69772 6 6.25Z" fill="black"/>
+<path d="M9.5 17.75C9.5 18.3023 9.05228 18.75 8.5 18.75C7.94772 18.75 7.5 18.3023 7.5 17.75C7.5 17.1977 7.94772 16.75 8.5 16.75C9.05228 16.75 9.5 17.1977 9.5 17.75Z" fill="black"/>
+<path d="M9.25 3.25C9.25 3.66421 8.91421 4 8.5 4C8.08579 4 7.75 3.66421 7.75 3.25C7.75 2.83579 8.08579 2.5 8.5 2.5C8.91421 2.5 9.25 2.83579 9.25 3.25Z" fill="black"/>
+<path d="M3 10C3 10.4142 2.66421 10.75 2.25 10.75C1.83579 10.75 1.5 10.4142 1.5 10C1.5 9.58579 1.83579 9.25 2.25 9.25C2.66421 9.25 3 9.58579 3 10Z" fill="black"/>
+<path d="M3 14C3 14.4142 2.66421 14.75 2.25 14.75C1.83579 14.75 1.5 14.4142 1.5 14C1.5 13.5858 1.83579 13.25 2.25 13.25C2.66421 13.25 3 13.5858 3 14Z" fill="black"/>
+<path d="M9.25 20.75C9.25 21.1642 8.91421 21.5 8.5 21.5C8.08579 21.5 7.75 21.1642 7.75 20.75C7.75 20.3358 8.08579 20 8.5 20C8.91421 20 9.25 20.3358 9.25 20.75Z" fill="black"/>
+<path d="M10 10C10 10.8284 9.32843 11.5 8.5 11.5C7.67157 11.5 7 10.8284 7 10C7 9.17157 7.67157 8.5 8.5 8.5C9.32843 8.5 10 9.17157 10 10Z" fill="black"/>
+<path d="M10 14C10 14.8284 9.32843 15.5 8.5 15.5C7.67157 15.5 7 14.8284 7 14C7 13.1716 7.67157 12.5 8.5 12.5C9.32843 12.5 10 13.1716 10 14Z" fill="black"/>
+<path d="M6 10C6 10.5523 5.55228 11 5 11C4.44772 11 4 10.5523 4 10C4 9.44772 4.44772 9 5 9C5.55228 9 6 9.44772 6 10Z" fill="black"/>
+<path d="M6 14C6 14.5523 5.55228 15 5 15C4.44772 15 4 14.5523 4 14C4 13.4477 4.44772 13 5 13C5.55228 13 6 13.4477 6 14Z" fill="black"/>
+<path d="M6 17.75C6 18.3023 5.55228 18.75 5 18.75C4.44772 18.75 4 18.3023 4 17.75C4 17.1977 4.44772 16.75 5 16.75C5.55228 16.75 6 17.1977 6 17.75Z" fill="black"/>
+<path d="M12 2C11.4477 2 11 2.44772 11 3V21C11 21.5523 11.4477 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z" fill="black"/>
+</g>
+</g>
+</svg>
diff --git a/web/app/components/base/icons/assets/vender/solid/general/search-md.svg b/web/app/components/base/icons/assets/vender/solid/general/search-md.svg
new file mode 100644
index 0000000000..31ce7be9c6
--- /dev/null
+++ b/web/app/components/base/icons/assets/vender/solid/general/search-md.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="search-md">
+<path id="Solid" fill-rule="evenodd" clip-rule="evenodd" d="M11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C13.125 20 15.078 19.2635 16.6177 18.0319L20.2929 21.7071C20.6834 22.0976 21.3166 22.0976 21.7071 21.7071C22.0976 21.3166 22.0976 20.6834 21.7071 20.2929L18.0319 16.6177C19.2635 15.078 20 13.125 20 11C20 6.02944 15.9706 2 11 2ZM4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11Z" fill="black"/>
+</g>
+</svg>
diff --git a/web/app/components/base/icons/src/public/common/DiagonalDividingLine.json b/web/app/components/base/icons/src/public/common/DiagonalDividingLine.json
new file mode 100644
index 0000000000..04475c2288
--- /dev/null
+++ b/web/app/components/base/icons/src/public/common/DiagonalDividingLine.json
@@ -0,0 +1,28 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "7",
+			"height": "20",
+			"viewBox": "0 0 7 20",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"id": "Line 3",
+					"d": "M1 19.3544L5.94174 0.645657",
+					"stroke": "#EAECF0",
+					"stroke-linecap": "round"
+				},
+				"children": []
+			}
+		]
+	},
+	"name": "DiagonalDividingLine"
+}
\ No newline at end of file
diff --git a/web/app/components/base/icons/src/public/common/DiagonalDividingLine.tsx b/web/app/components/base/icons/src/public/common/DiagonalDividingLine.tsx
new file mode 100644
index 0000000000..9a33e1959f
--- /dev/null
+++ b/web/app/components/base/icons/src/public/common/DiagonalDividingLine.tsx
@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './DiagonalDividingLine.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'DiagonalDividingLine'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/public/common/index.ts b/web/app/components/base/icons/src/public/common/index.ts
index 2f38fae3d0..bd62f00322 100644
--- a/web/app/components/base/icons/src/public/common/index.ts
+++ b/web/app/components/base/icons/src/public/common/index.ts
@@ -1,3 +1,4 @@
+export { default as DiagonalDividingLine } from './DiagonalDividingLine'
 export { default as Dify } from './Dify'
 export { default as Github } from './Github'
 export { default as MessageChatSquare } from './MessageChatSquare'
diff --git a/web/app/components/base/icons/src/public/header-nav/explore/Explore.json b/web/app/components/base/icons/src/public/header-nav/explore/Explore.json
new file mode 100644
index 0000000000..523f817a26
--- /dev/null
+++ b/web/app/components/base/icons/src/public/header-nav/explore/Explore.json
@@ -0,0 +1,96 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "16",
+			"height": "16",
+			"viewBox": "0 0 16 16",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"clip-path": "url(#clip0_6139_55192)"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"d": "M10.25 3.3125C10.25 4.55514 9.24264 5.5625 8 5.5625C6.75736 5.5625 5.75 4.55514 5.75 3.3125C5.75 2.06986 6.75736 1.0625 8 1.0625C9.24264 1.0625 10.25 2.06986 10.25 3.3125Z",
+							"stroke": "#667085",
+							"stroke-width": "1.5",
+							"stroke-linecap": "square"
+						},
+						"children": []
+					},
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"d": "M12.6875 10.25C11.4449 10.25 10.4375 9.24264 10.4375 8C10.4375 6.75736 11.4449 5.75 12.6875 5.75C13.9301 5.75 14.9375 6.75736 14.9375 8C14.9375 9.24264 13.9301 10.25 12.6875 10.25Z",
+							"stroke": "#667085",
+							"stroke-width": "1.5",
+							"stroke-linecap": "square"
+						},
+						"children": []
+					},
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"d": "M10.25 12.6875C10.25 13.9301 9.24264 14.9375 8 14.9375C6.75736 14.9375 5.75 13.9301 5.75 12.6875C5.75 11.4449 6.75736 10.4375 8 10.4375C9.24264 10.4375 10.25 11.4449 10.25 12.6875Z",
+							"stroke": "#667085",
+							"stroke-width": "1.5",
+							"stroke-linecap": "square"
+						},
+						"children": []
+					},
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"d": "M3.3125 10.25C2.06986 10.25 1.0625 9.24264 1.0625 8C1.0625 6.75736 2.06986 5.75 3.3125 5.75C4.55514 5.75 5.5625 6.75736 5.5625 8C5.5625 9.24264 4.55514 10.25 3.3125 10.25Z",
+							"stroke": "#667085",
+							"stroke-width": "1.5",
+							"stroke-linecap": "square"
+						},
+						"children": []
+					}
+				]
+			},
+			{
+				"type": "element",
+				"name": "defs",
+				"attributes": {},
+				"children": [
+					{
+						"type": "element",
+						"name": "clipPath",
+						"attributes": {
+							"id": "clip0_6139_55192"
+						},
+						"children": [
+							{
+								"type": "element",
+								"name": "rect",
+								"attributes": {
+									"width": "16",
+									"height": "16",
+									"fill": "white"
+								},
+								"children": []
+							}
+						]
+					}
+				]
+			}
+		]
+	},
+	"name": "Explore"
+}
\ No newline at end of file
diff --git a/web/app/components/base/icons/src/public/header-nav/explore/Explore.tsx b/web/app/components/base/icons/src/public/header-nav/explore/Explore.tsx
new file mode 100644
index 0000000000..947ab95df1
--- /dev/null
+++ b/web/app/components/base/icons/src/public/header-nav/explore/Explore.tsx
@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './Explore.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'Explore'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/public/header-nav/explore/ExploreActive.json b/web/app/components/base/icons/src/public/header-nav/explore/ExploreActive.json
new file mode 100644
index 0000000000..18f77d6647
--- /dev/null
+++ b/web/app/components/base/icons/src/public/header-nav/explore/ExploreActive.json
@@ -0,0 +1,88 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "16",
+			"height": "16",
+			"viewBox": "0 0 16 16",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"clip-path": "url(#clip0_6139_55194)"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"d": "M8 0.5C6.4467 0.5 5.1875 1.7592 5.1875 3.3125C5.1875 4.8658 6.4467 6.125 8 6.125C9.5533 6.125 10.8125 4.8658 10.8125 3.3125C10.8125 1.7592 9.5533 0.5 8 0.5Z",
+							"fill": "#155EEF"
+						},
+						"children": []
+					},
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"d": "M15.5 8C15.5 6.4467 14.2408 5.1875 12.6875 5.1875C11.1342 5.1875 9.875 6.4467 9.875 8C9.875 9.5533 11.1342 10.8125 12.6875 10.8125C14.2408 10.8125 15.5 9.5533 15.5 8Z",
+							"fill": "#155EEF"
+						},
+						"children": []
+					},
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"d": "M8 9.875C6.4467 9.875 5.1875 11.1342 5.1875 12.6875C5.1875 14.2408 6.4467 15.5 8 15.5C9.5533 15.5 10.8125 14.2408 10.8125 12.6875C10.8125 11.1342 9.5533 9.875 8 9.875Z",
+							"fill": "#155EEF"
+						},
+						"children": []
+					},
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"d": "M6.125 8C6.125 6.4467 4.8658 5.1875 3.3125 5.1875C1.7592 5.1875 0.5 6.4467 0.5 8C0.5 9.5533 1.7592 10.8125 3.3125 10.8125C4.8658 10.8125 6.125 9.5533 6.125 8Z",
+							"fill": "#155EEF"
+						},
+						"children": []
+					}
+				]
+			},
+			{
+				"type": "element",
+				"name": "defs",
+				"attributes": {},
+				"children": [
+					{
+						"type": "element",
+						"name": "clipPath",
+						"attributes": {
+							"id": "clip0_6139_55194"
+						},
+						"children": [
+							{
+								"type": "element",
+								"name": "rect",
+								"attributes": {
+									"width": "16",
+									"height": "16",
+									"fill": "white"
+								},
+								"children": []
+							}
+						]
+					}
+				]
+			}
+		]
+	},
+	"name": "ExploreActive"
+}
\ No newline at end of file
diff --git a/web/app/components/base/icons/src/public/header-nav/explore/ExploreActive.tsx b/web/app/components/base/icons/src/public/header-nav/explore/ExploreActive.tsx
new file mode 100644
index 0000000000..38a7614e5c
--- /dev/null
+++ b/web/app/components/base/icons/src/public/header-nav/explore/ExploreActive.tsx
@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './ExploreActive.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'ExploreActive'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/public/header-nav/explore/index.ts b/web/app/components/base/icons/src/public/header-nav/explore/index.ts
new file mode 100644
index 0000000000..e902cc9bd0
--- /dev/null
+++ b/web/app/components/base/icons/src/public/header-nav/explore/index.ts
@@ -0,0 +1,2 @@
+export { default as ExploreActive } from './ExploreActive'
+export { default as Explore } from './Explore'
diff --git a/web/app/components/base/icons/src/public/header-nav/knowledge/Knowledge.json b/web/app/components/base/icons/src/public/header-nav/knowledge/Knowledge.json
new file mode 100644
index 0000000000..dd3bd08a19
--- /dev/null
+++ b/web/app/components/base/icons/src/public/header-nav/knowledge/Knowledge.json
@@ -0,0 +1,29 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "16",
+			"height": "16",
+			"viewBox": "0 0 16 16",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M13.4375 8V10.8125C13.4375 11.2267 13.1017 11.5625 12.6875 11.5625H4.25C3.31802 11.5625 2.5625 12.318 2.5625 13.25C2.5625 14.182 3.31802 14.9375 4.25 14.9375H6.5M5.5625 4.25H10.4375M5.5625 7.25H8.1875M4.0625 1.0625H12.6875C13.1017 1.0625 13.4375 1.39829 13.4375 1.8125V14.1875C13.4375 14.6017 13.1017 14.9375 12.6875 14.9375H4.0625C3.23407 14.9375 2.5625 14.2659 2.5625 13.4375V2.5625C2.5625 1.73407 3.23407 1.0625 4.0625 1.0625Z",
+					"stroke": "#667085",
+					"stroke-width": "1.5",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round"
+				},
+				"children": []
+			}
+		]
+	},
+	"name": "Knowledge"
+}
\ No newline at end of file
diff --git a/web/app/components/base/icons/src/public/header-nav/knowledge/Knowledge.tsx b/web/app/components/base/icons/src/public/header-nav/knowledge/Knowledge.tsx
new file mode 100644
index 0000000000..4c84514d42
--- /dev/null
+++ b/web/app/components/base/icons/src/public/header-nav/knowledge/Knowledge.tsx
@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './Knowledge.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'Knowledge'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/public/header-nav/knowledge/KnowledgeActive.json b/web/app/components/base/icons/src/public/header-nav/knowledge/KnowledgeActive.json
new file mode 100644
index 0000000000..2826a09245
--- /dev/null
+++ b/web/app/components/base/icons/src/public/header-nav/knowledge/KnowledgeActive.json
@@ -0,0 +1,28 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "16",
+			"height": "16",
+			"viewBox": "0 0 16 16",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"fill-rule": "evenodd",
+					"clip-rule": "evenodd",
+					"d": "M4.0625 0.5C2.92341 0.5 2 1.42341 2 2.5625V13.4375C2 14.5766 2.92341 15.5 4.0625 15.5H12.6875C13.4124 15.5 14 14.9124 14 14.1875V1.8125C14 1.08763 13.4124 0.5 12.6875 0.5H4.0625ZM3.125 13.25V13.4375C3.125 13.9553 3.54473 14.375 4.0625 14.375H12.6875C12.7911 14.375 12.875 14.2911 12.875 14.1875V12.1117C12.8138 12.1205 12.7512 12.125 12.6875 12.125H4.25C3.62868 12.125 3.125 12.6287 3.125 13.25ZM5.5625 3.6875C5.25184 3.6875 5 3.93934 5 4.25C5 4.56066 5.25184 4.8125 5.5625 4.8125H10.4375C10.7482 4.8125 11 4.56066 11 4.25C11 3.93934 10.7482 3.6875 10.4375 3.6875H5.5625ZM5 7.25C5 6.93934 5.25184 6.6875 5.5625 6.6875H8.1875C8.49816 6.6875 8.75 6.93934 8.75 7.25C8.75 7.56066 8.49816 7.8125 8.1875 7.8125H5.5625C5.25184 7.8125 5 7.56066 5 7.25Z",
+					"fill": "#155EEF"
+				},
+				"children": []
+			}
+		]
+	},
+	"name": "KnowledgeActive"
+}
\ No newline at end of file
diff --git a/web/app/components/base/icons/src/public/header-nav/knowledge/KnowledgeActive.tsx b/web/app/components/base/icons/src/public/header-nav/knowledge/KnowledgeActive.tsx
new file mode 100644
index 0000000000..07f1565e54
--- /dev/null
+++ b/web/app/components/base/icons/src/public/header-nav/knowledge/KnowledgeActive.tsx
@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './KnowledgeActive.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'KnowledgeActive'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/public/header-nav/knowledge/index.ts b/web/app/components/base/icons/src/public/header-nav/knowledge/index.ts
new file mode 100644
index 0000000000..2e179be015
--- /dev/null
+++ b/web/app/components/base/icons/src/public/header-nav/knowledge/index.ts
@@ -0,0 +1,2 @@
+export { default as KnowledgeActive } from './KnowledgeActive'
+export { default as Knowledge } from './Knowledge'
diff --git a/web/app/components/base/icons/src/public/header-nav/studio/Robot.json b/web/app/components/base/icons/src/public/header-nav/studio/Robot.json
new file mode 100644
index 0000000000..9854729e60
--- /dev/null
+++ b/web/app/components/base/icons/src/public/header-nav/studio/Robot.json
@@ -0,0 +1,29 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "16",
+			"height": "16",
+			"viewBox": "0 0 16 16",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M8 1.99997H3.33594C2.92172 1.99997 2.58594 2.33576 2.58594 2.74997V8.37497C2.58594 8.78919 2.92172 9.12497 3.33594 9.12497H12.6641C13.0783 9.12497 13.4141 8.78919 13.4141 8.37497V2.74997C13.4141 2.33576 13.0783 1.99997 12.6641 1.99997H8ZM8 1.99997V0.820923M5.5625 4.99997V6.12497M10.4375 4.99997V6.12497M3.3125 9.12497V9.87497M3.3125 9.87497V10.4375C3.3125 13.0263 5.41117 15.125 8 15.125C10.5888 15.125 12.6875 13.0263 12.6875 10.4375V9.87497M3.3125 9.87497L1.8125 11.375M12.6875 9.87497V9.12497M12.6875 9.87497L14.1875 11.375",
+					"stroke": "#667085",
+					"stroke-width": "1.5",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round"
+				},
+				"children": []
+			}
+		]
+	},
+	"name": "Robot"
+}
\ No newline at end of file
diff --git a/web/app/components/base/icons/src/public/header-nav/studio/Robot.tsx b/web/app/components/base/icons/src/public/header-nav/studio/Robot.tsx
new file mode 100644
index 0000000000..07251c5b09
--- /dev/null
+++ b/web/app/components/base/icons/src/public/header-nav/studio/Robot.tsx
@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './Robot.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'Robot'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/public/header-nav/studio/RobotActive.json b/web/app/components/base/icons/src/public/header-nav/studio/RobotActive.json
new file mode 100644
index 0000000000..e35f7e7e66
--- /dev/null
+++ b/web/app/components/base/icons/src/public/header-nav/studio/RobotActive.json
@@ -0,0 +1,39 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "16",
+			"height": "16",
+			"viewBox": "0 0 16 16",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"fill-rule": "evenodd",
+					"clip-rule": "evenodd",
+					"d": "M8 0C8.41421 0 8.75 0.335786 8.75 0.75V1.5H12.5C13.3284 1.5 14 2.17157 14 3V8.25C14 8.80521 13.6984 9.28997 13.25 9.54933V10.1893L14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303C14.2374 12.8232 13.7626 12.8232 13.4697 12.5303L13.0108 12.0714C12.3429 14.2033 10.3521 15.75 8 15.75C5.64793 15.75 3.65711 14.2033 2.98923 12.0714L2.53033 12.5303C2.23744 12.8232 1.76256 12.8232 1.46967 12.5303C1.17678 12.2374 1.17678 11.7626 1.46967 11.4697L2.75 10.1893L2.75 9.54933C2.30165 9.28997 2 8.80521 2 8.25V3C2 2.17157 2.67157 1.5 3.5 1.5H7.25V0.75C7.25 0.335786 7.58579 0 8 0ZM3.5 3V8.25H12.5V3H3.5Z",
+					"fill": "#155EEF"
+				},
+				"children": []
+			},
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"fill-rule": "evenodd",
+					"clip-rule": "evenodd",
+					"d": "M5.75 4.5C6.16421 4.5 6.5 4.83579 6.5 5.25V6C6.5 6.41421 6.16421 6.75 5.75 6.75C5.33579 6.75 5 6.41421 5 6V5.25C5 4.83579 5.33579 4.5 5.75 4.5ZM10.25 4.5C10.6642 4.5 11 4.83579 11 5.25V6C11 6.41421 10.6642 6.75 10.25 6.75C9.83579 6.75 9.5 6.41421 9.5 6V5.25C9.5 4.83579 9.83579 4.5 10.25 4.5Z",
+					"fill": "#155EEF"
+				},
+				"children": []
+			}
+		]
+	},
+	"name": "RobotActive"
+}
\ No newline at end of file
diff --git a/web/app/components/base/icons/src/public/header-nav/studio/RobotActive.tsx b/web/app/components/base/icons/src/public/header-nav/studio/RobotActive.tsx
new file mode 100644
index 0000000000..5c4b2ca7e2
--- /dev/null
+++ b/web/app/components/base/icons/src/public/header-nav/studio/RobotActive.tsx
@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './RobotActive.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'RobotActive'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/public/header-nav/studio/index.ts b/web/app/components/base/icons/src/public/header-nav/studio/index.ts
new file mode 100644
index 0000000000..46994250f9
--- /dev/null
+++ b/web/app/components/base/icons/src/public/header-nav/studio/index.ts
@@ -0,0 +1,2 @@
+export { default as RobotActive } from './RobotActive'
+export { default as Robot } from './Robot'
diff --git a/web/app/components/base/icons/src/public/header-nav/tools/Tools.json b/web/app/components/base/icons/src/public/header-nav/tools/Tools.json
new file mode 100644
index 0000000000..dd8838923f
--- /dev/null
+++ b/web/app/components/base/icons/src/public/header-nav/tools/Tools.json
@@ -0,0 +1,112 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "16",
+			"height": "16",
+			"viewBox": "0 0 16 16",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"clip-path": "url(#clip0_7278_16509)"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"d": "M13.4375 13.9375V6.3125H2.5625V13.9375C2.5625 14.4898 3.01022 14.9375 3.5625 14.9375H12.4375C12.9898 14.9375 13.4375 14.4898 13.4375 13.9375Z",
+							"stroke": "#667085",
+							"stroke-width": "1.5",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round"
+						},
+						"children": []
+					},
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"d": "M13.6249 2.375L11.1733 5.97327",
+							"stroke": "#667085",
+							"stroke-width": "1.5",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round"
+						},
+						"children": []
+					},
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"d": "M6.3125 9.3125H9.6875",
+							"stroke": "#667085",
+							"stroke-width": "1.5",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round"
+						},
+						"children": []
+					},
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"d": "M8.74536 1.43634L8.75 1.42705L8.75464 1.43634C8.8756 1.67825 9.07175 1.8744 9.31366 1.99536L9.32295 2L9.31366 2.00464C9.07175 2.1256 8.8756 2.32175 8.75464 2.56366L8.75 2.57295L8.74536 2.56366C8.6244 2.32175 8.42825 2.1256 8.18634 2.00464L8.17705 2L8.18634 1.99536C8.42825 1.8744 8.6244 1.67825 8.74536 1.43634L8.07454 1.10093L8.74536 1.43634Z",
+							"stroke": "#667085",
+							"stroke-width": "1.5",
+							"stroke-linecap": "square",
+							"stroke-linejoin": "round"
+						},
+						"children": []
+					},
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"d": "M4.51955 2.71615L4.625 2.66343L4.51955 2.71615L4.44925 2.57555L4.31195 2.30095C4.44093 2.55892 4.80907 2.55892 4.93805 2.30095L4.80075 2.57555L4.51955 2.71615ZM4.625 2.88765C4.69208 2.97794 4.77206 3.05792 4.86235 3.125C4.77206 3.19208 4.69208 3.27206 4.625 3.36235C4.55792 3.27206 4.47794 3.19208 4.38765 3.125C4.47794 3.05792 4.55792 2.97794 4.625 2.88765ZM4.16343 3.125L4.21615 3.01955L4.21615 3.01955L4.16343 3.125Z",
+							"stroke": "#667085",
+							"stroke-width": "1.5",
+							"stroke-linecap": "square",
+							"stroke-linejoin": "round"
+						},
+						"children": []
+					}
+				]
+			},
+			{
+				"type": "element",
+				"name": "defs",
+				"attributes": {},
+				"children": [
+					{
+						"type": "element",
+						"name": "clipPath",
+						"attributes": {
+							"id": "clip0_7278_16509"
+						},
+						"children": [
+							{
+								"type": "element",
+								"name": "rect",
+								"attributes": {
+									"width": "16",
+									"height": "16",
+									"fill": "white"
+								},
+								"children": []
+							}
+						]
+					}
+				]
+			}
+		]
+	},
+	"name": "Tools"
+}
\ No newline at end of file
diff --git a/web/app/components/base/icons/src/public/header-nav/tools/Tools.tsx b/web/app/components/base/icons/src/public/header-nav/tools/Tools.tsx
new file mode 100644
index 0000000000..c46b8bc2b0
--- /dev/null
+++ b/web/app/components/base/icons/src/public/header-nav/tools/Tools.tsx
@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './Tools.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'Tools'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/public/header-nav/tools/ToolsActive.json b/web/app/components/base/icons/src/public/header-nav/tools/ToolsActive.json
new file mode 100644
index 0000000000..7a2b973437
--- /dev/null
+++ b/web/app/components/base/icons/src/public/header-nav/tools/ToolsActive.json
@@ -0,0 +1,46 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "16",
+			"height": "16",
+			"viewBox": "0 0 16 16",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M7.88756 1.30591C7.96013 1.26962 8.01898 1.21078 8.05527 1.1382L8.41395 0.420826C8.55215 0.144433 8.94658 0.144433 9.08478 0.420826L9.44346 1.1382C9.47975 1.21078 9.5386 1.26962 9.61117 1.30591L10.3285 1.6646C10.6049 1.80279 10.6049 2.19722 10.3285 2.33542L9.61117 2.6941C9.5386 2.73039 9.47975 2.78924 9.44346 2.86181L9.08478 3.57919C8.94658 3.85558 8.55215 3.85558 8.41395 3.57919L8.05527 2.86181C8.01898 2.78924 7.96013 2.73039 7.88756 2.6941L7.17019 2.33542C6.89379 2.19722 6.89379 1.80279 7.17019 1.6646L7.88756 1.30591Z",
+					"fill": "#155EEF"
+				},
+				"children": []
+			},
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M3.88756 2.55591C3.96013 2.51962 4.01898 2.46078 4.05527 2.3882L4.28895 1.92083C4.42715 1.64443 4.82158 1.64443 4.95977 1.92083L5.19346 2.3882C5.22975 2.46078 5.2886 2.51962 5.36117 2.55591L5.82854 2.7896C6.10494 2.92779 6.10494 3.32222 5.82854 3.46042L5.36117 3.6941C5.2886 3.73039 5.22975 3.78924 5.19346 3.86181L4.95978 4.32919C4.82158 4.60558 4.42715 4.60558 4.28895 4.32919L4.05527 3.86181C4.01898 3.78924 3.96013 3.73039 3.88756 3.6941L3.42019 3.46042C3.14379 3.32222 3.14379 2.92779 3.42019 2.7896L3.88756 2.55591Z",
+					"fill": "#155EEF"
+				},
+				"children": []
+			},
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"fill-rule": "evenodd",
+					"clip-rule": "evenodd",
+					"d": "M13.9417 1.91015C14.1985 2.08507 14.2648 2.43499 14.0899 2.69173L12.0062 5.75001H13.4375C13.7482 5.75001 14 6.00185 14 6.31251V14.1875C14 14.9124 13.4124 15.5 12.6875 15.5H3.3125C2.58763 15.5 2 14.9124 2 14.1875V6.31251C2 6.00185 2.25184 5.75001 2.5625 5.75001H10.6449L13.1601 2.05829C13.3351 1.80155 13.685 1.73523 13.9417 1.91015ZM6.3125 8.75C6.00184 8.75 5.75 9.00184 5.75 9.3125C5.75 9.62316 6.00184 9.875 6.3125 9.875H9.6875C9.99816 9.875 10.25 9.62316 10.25 9.3125C10.25 9.00184 9.99816 8.75 9.6875 8.75H6.3125Z",
+					"fill": "#155EEF"
+				},
+				"children": []
+			}
+		]
+	},
+	"name": "ToolsActive"
+}
\ No newline at end of file
diff --git a/web/app/components/base/icons/src/public/header-nav/tools/ToolsActive.tsx b/web/app/components/base/icons/src/public/header-nav/tools/ToolsActive.tsx
new file mode 100644
index 0000000000..326bf45a05
--- /dev/null
+++ b/web/app/components/base/icons/src/public/header-nav/tools/ToolsActive.tsx
@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './ToolsActive.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'ToolsActive'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/public/header-nav/tools/index.ts b/web/app/components/base/icons/src/public/header-nav/tools/index.ts
new file mode 100644
index 0000000000..3b16737e30
--- /dev/null
+++ b/web/app/components/base/icons/src/public/header-nav/tools/index.ts
@@ -0,0 +1,2 @@
+export { default as ToolsActive } from './ToolsActive'
+export { default as Tools } from './Tools'
diff --git a/web/app/components/base/icons/src/public/other/DefaultToolIcon.json b/web/app/components/base/icons/src/public/other/DefaultToolIcon.json
new file mode 100644
index 0000000000..32412e8d01
--- /dev/null
+++ b/web/app/components/base/icons/src/public/other/DefaultToolIcon.json
@@ -0,0 +1,81 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "24",
+			"height": "24",
+			"viewBox": "0 0 24 24",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"opacity": "0.5"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "rect",
+						"attributes": {
+							"width": "24",
+							"height": "24",
+							"rx": "6",
+							"fill": "#E5E7EB"
+						},
+						"children": []
+					},
+					{
+						"type": "element",
+						"name": "rect",
+						"attributes": {
+							"x": "0.25",
+							"y": "0.25",
+							"width": "23.5",
+							"height": "23.5",
+							"rx": "5.75",
+							"stroke": "black",
+							"stroke-opacity": "0.05",
+							"stroke-width": "0.5"
+						},
+						"children": []
+					},
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"d": "M11.8876 5.30588C11.9601 5.26959 12.019 5.21074 12.0553 5.13817L12.414 4.4208C12.5522 4.1444 12.9466 4.1444 13.0848 4.4208L13.4435 5.13817C13.4797 5.21074 13.5386 5.26959 13.6112 5.30588L14.3285 5.66457C14.6049 5.80276 14.6049 6.19719 14.3285 6.33539L13.6112 6.69407C13.5386 6.73036 13.4797 6.78921 13.4435 6.86178L13.0848 7.57916C12.9466 7.85555 12.5522 7.85555 12.414 7.57916L12.0553 6.86178C12.019 6.78921 11.9601 6.73036 11.8876 6.69407L11.1702 6.33539C10.8938 6.19719 10.8938 5.80276 11.1702 5.66457L11.8876 5.30588Z",
+							"fill": "#667085"
+						},
+						"children": []
+					},
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"d": "M7.88756 6.55588C7.96013 6.51959 8.01898 6.46074 8.05527 6.38817L8.28895 5.9208C8.42715 5.6444 8.82158 5.6444 8.95978 5.9208L9.19346 6.38817C9.22975 6.46074 9.2886 6.51959 9.36117 6.55588L9.82854 6.78956C10.1049 6.92776 10.1049 7.32219 9.82854 7.46039L9.36117 7.69407C9.2886 7.73036 9.22975 7.78921 9.19346 7.86178L8.95978 8.32915C8.82158 8.60555 8.42715 8.60555 8.28895 8.32915L8.05527 7.86178C8.01898 7.78921 7.96013 7.73036 7.88756 7.69407L7.42019 7.46039C7.14379 7.32219 7.14379 6.92776 7.42019 6.78957L7.88756 6.55588Z",
+							"fill": "#667085"
+						},
+						"children": []
+					},
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"fill-rule": "evenodd",
+							"clip-rule": "evenodd",
+							"d": "M17.9417 5.91012C18.1985 6.08504 18.2648 6.43496 18.0899 6.6917L16.0062 9.74998H17.4375C17.7482 9.74998 18 10.0018 18 10.3125V18.1875C18 18.9124 17.4124 19.5 16.6875 19.5H7.3125C6.58763 19.5 6 18.9123 6 18.1875V10.3125C6 10.0018 6.25184 9.74998 6.5625 9.74998H14.6449L17.1601 6.05826C17.3351 5.80152 17.685 5.7352 17.9417 5.91012ZM10.3125 12.75C10.0018 12.75 9.75 13.0018 9.75 13.3125C9.75 13.6231 10.0018 13.875 10.3125 13.875H13.6875C13.9982 13.875 14.25 13.6231 14.25 13.3125C14.25 13.0018 13.9982 12.75 13.6875 12.75H10.3125Z",
+							"fill": "#667085"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "DefaultToolIcon"
+}
\ No newline at end of file
diff --git a/web/app/components/base/icons/src/public/other/DefaultToolIcon.tsx b/web/app/components/base/icons/src/public/other/DefaultToolIcon.tsx
new file mode 100644
index 0000000000..730ba3a090
--- /dev/null
+++ b/web/app/components/base/icons/src/public/other/DefaultToolIcon.tsx
@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './DefaultToolIcon.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'DefaultToolIcon'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/public/other/index.ts b/web/app/components/base/icons/src/public/other/index.ts
new file mode 100644
index 0000000000..51878085f2
--- /dev/null
+++ b/web/app/components/base/icons/src/public/other/index.ts
@@ -0,0 +1 @@
+export { default as DefaultToolIcon } from './DefaultToolIcon'
diff --git a/web/app/components/base/icons/src/vender/line/arrows/ArrowNarrowRight.json b/web/app/components/base/icons/src/vender/line/arrows/ArrowNarrowRight.json
new file mode 100644
index 0000000000..51868774ad
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/line/arrows/ArrowNarrowRight.json
@@ -0,0 +1,29 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "24",
+			"height": "24",
+			"viewBox": "0 0 24 24",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M4 12H20M20 12L14 6M20 12L14 18",
+					"stroke": "currentColor",
+					"stroke-width": "2",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round"
+				},
+				"children": []
+			}
+		]
+	},
+	"name": "ArrowNarrowRight"
+}
\ No newline at end of file
diff --git a/web/app/components/base/icons/src/vender/line/arrows/ArrowNarrowRight.tsx b/web/app/components/base/icons/src/vender/line/arrows/ArrowNarrowRight.tsx
new file mode 100644
index 0000000000..c378eddf15
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/line/arrows/ArrowNarrowRight.tsx
@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './ArrowNarrowRight.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'ArrowNarrowRight'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/arrows/index.ts b/web/app/components/base/icons/src/vender/line/arrows/index.ts
index 807e920c97..e0b3aead10 100644
--- a/web/app/components/base/icons/src/vender/line/arrows/index.ts
+++ b/web/app/components/base/icons/src/vender/line/arrows/index.ts
@@ -1,4 +1,5 @@
 export { default as ArrowNarrowLeft } from './ArrowNarrowLeft'
+export { default as ArrowNarrowRight } from './ArrowNarrowRight'
 export { default as ArrowUpRight } from './ArrowUpRight'
 export { default as ChevronDownDouble } from './ChevronDownDouble'
 export { default as ChevronDown } from './ChevronDown'
diff --git a/web/app/components/base/icons/src/vender/solid/arrows/ChevronDown.json b/web/app/components/base/icons/src/vender/solid/arrows/ChevronDown.json
new file mode 100644
index 0000000000..ef9a33dc03
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/solid/arrows/ChevronDown.json
@@ -0,0 +1,39 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "24",
+			"height": "24",
+			"viewBox": "0 0 24 24",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "chevron-down"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Icon",
+							"d": "M6 9L12 15L18 9",
+							"stroke": "currentColor",
+							"stroke-width": "2",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "ChevronDown"
+}
\ No newline at end of file
diff --git a/web/app/components/base/icons/src/vender/solid/arrows/ChevronDown.tsx b/web/app/components/base/icons/src/vender/solid/arrows/ChevronDown.tsx
new file mode 100644
index 0000000000..9419fe1ab0
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/solid/arrows/ChevronDown.tsx
@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './ChevronDown.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'ChevronDown'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/arrows/index.ts b/web/app/components/base/icons/src/vender/solid/arrows/index.ts
index 3a0650f7f5..468f0e52d9 100644
--- a/web/app/components/base/icons/src/vender/solid/arrows/index.ts
+++ b/web/app/components/base/icons/src/vender/solid/arrows/index.ts
@@ -1 +1,2 @@
+export { default as ChevronDown } from './ChevronDown'
 export { default as HighPriority } from './HighPriority'
diff --git a/web/app/components/base/icons/src/vender/solid/communication/AiText.json b/web/app/components/base/icons/src/vender/solid/communication/AiText.json
new file mode 100644
index 0000000000..c6e30fbf01
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/solid/communication/AiText.json
@@ -0,0 +1,53 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "24",
+			"height": "24",
+			"viewBox": "0 0 24 24",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M4 5C3.44772 5 3 5.44772 3 6C3 6.55228 3.44772 7 4 7H20C20.5523 7 21 6.55228 21 6C21 5.44772 20.5523 5 20 5H4Z",
+					"fill": "currentColor"
+				},
+				"children": []
+			},
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M17.9191 9.60608C17.7616 9.2384 17.4 9 17 9C16.6 9 16.2384 9.2384 16.0809 9.60608L14.7384 12.7384L11.6061 14.0809C11.2384 14.2384 11 14.6 11 15C11 15.4 11.2384 15.7616 11.6061 15.9191L14.7384 17.2616L16.0809 20.3939C16.2384 20.7616 16.6 21 17 21C17.4 21 17.7616 20.7616 17.9191 20.3939L19.2616 17.2616L22.3939 15.9191C22.7616 15.7616 23 15.4 23 15C23 14.6 22.7616 14.2384 22.3939 14.0809L19.2616 12.7384L17.9191 9.60608Z",
+					"fill": "currentColor"
+				},
+				"children": []
+			},
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M4 11C3.44772 11 3 11.4477 3 12C3 12.5523 3.44772 13 4 13H9C9.55228 13 10 12.5523 10 12C10 11.4477 9.55228 11 9 11H4Z",
+					"fill": "currentColor"
+				},
+				"children": []
+			},
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M4 17C3.44772 17 3 17.4477 3 18C3 18.5523 3.44772 19 4 19H7C7.55228 19 8 18.5523 8 18C8 17.4477 7.55228 17 7 17H4Z",
+					"fill": "currentColor"
+				},
+				"children": []
+			}
+		]
+	},
+	"name": "AiText"
+}
\ No newline at end of file
diff --git a/web/app/components/base/icons/src/vender/solid/communication/AiText.tsx b/web/app/components/base/icons/src/vender/solid/communication/AiText.tsx
new file mode 100644
index 0000000000..5e156bf3f2
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/solid/communication/AiText.tsx
@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './AiText.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'AiText'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/communication/CuteRobote.json b/web/app/components/base/icons/src/vender/solid/communication/CuteRobote.json
new file mode 100644
index 0000000000..f8c92c3174
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/solid/communication/CuteRobote.json
@@ -0,0 +1,38 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "24",
+			"height": "24",
+			"viewBox": "0 0 24 24",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "cute-robote"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Icon",
+							"fill-rule": "evenodd",
+							"clip-rule": "evenodd",
+							"d": "M12 1C12.5523 1 13 1.44772 13 2V3H17C18.6569 3 20 4.34315 20 6V11C20 11.8885 19.6138 12.6868 19 13.2361V14.5858L20.7071 16.2929C21.0976 16.6834 21.0976 17.3166 20.7071 17.7071C20.3166 18.0976 19.6834 18.0976 19.2929 17.7071L18.681 17.0952C17.7905 19.9377 15.1361 22 12 22C8.8639 22 6.20948 19.9377 5.31897 17.0952L4.70711 17.7071C4.31658 18.0976 3.68342 18.0976 3.29289 17.7071C2.90237 17.3166 2.90237 16.6834 3.29289 16.2929L5 14.5858V13.2361C4.38625 12.6868 4 11.8885 4 11V6C4 4.34315 5.34315 3 7 3H11V2C11 1.44772 11.4477 1 12 1ZM7 5C6.44772 5 6 5.44772 6 6V11C6 11.5523 6.44772 12 7 12H17C17.5523 12 18 11.5523 18 11V6C18 5.44772 17.5523 5 17 5H7ZM9 7C9.55228 7 10 7.44772 10 8V9C10 9.55228 9.55228 10 9 10C8.44772 10 8 9.55228 8 9V8C8 7.44772 8.44772 7 9 7ZM15 7C15.5523 7 16 7.44772 16 8V9C16 9.55228 15.5523 10 15 10C14.4477 10 14 9.55228 14 9V8C14 7.44772 14.4477 7 15 7Z",
+							"fill": "currentColor"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "CuteRobote"
+}
\ No newline at end of file
diff --git a/web/app/components/base/icons/src/vender/solid/communication/CuteRobote.tsx b/web/app/components/base/icons/src/vender/solid/communication/CuteRobote.tsx
new file mode 100644
index 0000000000..d416fb5b66
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/solid/communication/CuteRobote.tsx
@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './CuteRobote.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'CuteRobote'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/communication/index.ts b/web/app/components/base/icons/src/vender/solid/communication/index.ts
index 58c4eaf186..07e29c688c 100644
--- a/web/app/components/base/icons/src/vender/solid/communication/index.ts
+++ b/web/app/components/base/icons/src/vender/solid/communication/index.ts
@@ -1,2 +1,4 @@
+export { default as AiText } from './AiText'
+export { default as CuteRobote } from './CuteRobote'
 export { default as MessageDotsCircle } from './MessageDotsCircle'
 export { default as MessageFast } from './MessageFast'
diff --git a/web/app/components/base/icons/src/vender/solid/development/ApiConnection.json b/web/app/components/base/icons/src/vender/solid/development/ApiConnection.json
new file mode 100644
index 0000000000..6aafba9630
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/solid/development/ApiConnection.json
@@ -0,0 +1,53 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "24",
+			"height": "24",
+			"viewBox": "0 0 24 24",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "api-connection"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "g",
+						"attributes": {
+							"id": "vector"
+						},
+						"children": [
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M4.36364 11.8182C4.36364 7.60073 7.78255 4.18182 12 4.18182C14.8252 4.18182 17.2934 5.71543 18.6154 8.00079C18.9171 8.52231 19.5844 8.70053 20.106 8.39884C20.6275 8.09716 20.8057 7.42982 20.504 6.9083C18.8081 3.97648 15.6355 2 12 2C6.9463 2 2.78441 5.81824 2.24174 10.7273H1.09091C0.488417 10.7273 0 11.2157 0 11.8182C0 12.4207 0.488417 12.9091 1.09091 12.9091H2.24174C2.78441 17.8181 6.9463 21.6364 12 21.6364C15.6355 21.6364 18.8081 19.6599 20.504 16.7281C20.8057 16.2065 20.6275 15.5392 20.106 15.2375C19.5844 14.9358 18.9171 15.1141 18.6154 15.6356C17.2934 17.9209 14.8252 19.4545 12 19.4545C7.78255 19.4545 4.36364 16.0356 4.36364 11.8182Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M12 6.36364C8.98754 6.36364 6.54545 8.80572 6.54545 11.8182C6.54545 14.8306 8.98754 17.2727 12 17.2727C14.6389 17.2727 16.84 15.3988 17.3454 12.9091H22.9091C23.5116 12.9091 24 12.4207 24 11.8182C24 11.2157 23.5116 10.7273 22.9091 10.7273H17.3454C16.84 8.23756 14.6389 6.36364 12 6.36364Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							}
+						]
+					}
+				]
+			}
+		]
+	},
+	"name": "ApiConnection"
+}
\ No newline at end of file
diff --git a/web/app/components/base/icons/src/vender/solid/development/ApiConnection.tsx b/web/app/components/base/icons/src/vender/solid/development/ApiConnection.tsx
new file mode 100644
index 0000000000..97506ed6ca
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/solid/development/ApiConnection.tsx
@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './ApiConnection.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'ApiConnection'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/development/index.ts b/web/app/components/base/icons/src/vender/solid/development/index.ts
index ed2a62b848..6a86439adf 100644
--- a/web/app/components/base/icons/src/vender/solid/development/index.ts
+++ b/web/app/components/base/icons/src/vender/solid/development/index.ts
@@ -1,3 +1,4 @@
+export { default as ApiConnection } from './ApiConnection'
 export { default as Container } from './Container'
 export { default as Database02 } from './Database02'
 export { default as Database03 } from './Database03'
diff --git a/web/app/components/base/icons/src/vender/solid/education/BubbleText.json b/web/app/components/base/icons/src/vender/solid/education/BubbleText.json
new file mode 100644
index 0000000000..999f0db97e
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/solid/education/BubbleText.json
@@ -0,0 +1,38 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "24",
+			"height": "24",
+			"viewBox": "0 0 24 24",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "bubble-text"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "vector",
+							"fill-rule": "evenodd",
+							"clip-rule": "evenodd",
+							"d": "M2 9C2 5.68629 4.68629 3 8 3H16C19.3137 3 22 5.68629 22 9V15C22 18.3137 19.3137 21 16 21H3C2.44772 21 2 20.5523 2 20V9ZM9 9C8.44772 9 8 9.44772 8 10C8 10.5523 8.44772 11 9 11H15C15.5523 11 16 10.5523 16 10C16 9.44772 15.5523 9 15 9H9ZM9 13C8.44772 13 8 13.4477 8 14C8 14.5523 8.44772 15 9 15H12C12.5523 15 13 14.5523 13 14C13 13.4477 12.5523 13 12 13H9Z",
+							"fill": "currentColor"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "BubbleText"
+}
\ No newline at end of file
diff --git a/web/app/components/base/icons/src/vender/solid/education/BubbleText.tsx b/web/app/components/base/icons/src/vender/solid/education/BubbleText.tsx
new file mode 100644
index 0000000000..69118efe66
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/solid/education/BubbleText.tsx
@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './BubbleText.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'BubbleText'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/education/Heart02.json b/web/app/components/base/icons/src/vender/solid/education/Heart02.json
new file mode 100644
index 0000000000..8cecaaee84
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/solid/education/Heart02.json
@@ -0,0 +1,26 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "24",
+			"height": "24",
+			"viewBox": "0 0 24 24",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M12.5836 3.8721C12.3615 3.99329 12.1665 4.11496 12 4.22818C11.8335 4.11496 11.6385 3.99329 11.4164 3.8721C10.6185 3.4369 9.45449 3 8 3C6.48169 3 4.96498 3.60857 3.83296 4.81606C2.69616 6.02865 2 7.78592 2 10C2 13.3448 4.37277 16.1023 6.58187 17.9272C7.71336 18.8619 8.86688 19.6065 9.7917 20.1203C10.2539 20.377 10.6687 20.5816 11.004 20.7253C11.1707 20.7967 11.3289 20.858 11.4705 20.9033C11.5784 20.9378 11.7841 21 12 21C12.2159 21 12.4216 20.9378 12.5295 20.9033C12.6711 20.858 12.8293 20.7967 12.996 20.7253C13.3313 20.5816 13.7461 20.377 14.2083 20.1203C15.1331 19.6065 16.2866 18.8619 17.4181 17.9272C19.6272 16.1023 22 13.3448 22 10C22 7.78592 21.3038 6.02865 20.167 4.81606C19.035 3.60857 17.5183 3 16 3C14.5455 3 13.3815 3.4369 12.5836 3.8721Z",
+					"fill": "currentColor"
+				},
+				"children": []
+			}
+		]
+	},
+	"name": "Heart02"
+}
\ No newline at end of file
diff --git a/web/app/components/base/icons/src/vender/solid/education/Heart02.tsx b/web/app/components/base/icons/src/vender/solid/education/Heart02.tsx
new file mode 100644
index 0000000000..8193c32cd1
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/solid/education/Heart02.tsx
@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './Heart02.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'Heart02'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/education/Unblur.json b/web/app/components/base/icons/src/vender/solid/education/Unblur.json
new file mode 100644
index 0000000000..13b8bb36f5
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/solid/education/Unblur.json
@@ -0,0 +1,152 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "24",
+			"height": "24",
+			"viewBox": "0 0 24 24",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "unblur"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "g",
+						"attributes": {
+							"id": "vector"
+						},
+						"children": [
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M9.5 6.25C9.5 6.80228 9.05228 7.25 8.5 7.25C7.94772 7.25 7.5 6.80228 7.5 6.25C7.5 5.69772 7.94772 5.25 8.5 5.25C9.05228 5.25 9.5 5.69772 9.5 6.25Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M6 6.25C6 6.80228 5.55228 7.25 5 7.25C4.44772 7.25 4 6.80228 4 6.25C4 5.69772 4.44772 5.25 5 5.25C5.55228 5.25 6 5.69772 6 6.25Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M9.5 17.75C9.5 18.3023 9.05228 18.75 8.5 18.75C7.94772 18.75 7.5 18.3023 7.5 17.75C7.5 17.1977 7.94772 16.75 8.5 16.75C9.05228 16.75 9.5 17.1977 9.5 17.75Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M9.25 3.25C9.25 3.66421 8.91421 4 8.5 4C8.08579 4 7.75 3.66421 7.75 3.25C7.75 2.83579 8.08579 2.5 8.5 2.5C8.91421 2.5 9.25 2.83579 9.25 3.25Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M3 10C3 10.4142 2.66421 10.75 2.25 10.75C1.83579 10.75 1.5 10.4142 1.5 10C1.5 9.58579 1.83579 9.25 2.25 9.25C2.66421 9.25 3 9.58579 3 10Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M3 14C3 14.4142 2.66421 14.75 2.25 14.75C1.83579 14.75 1.5 14.4142 1.5 14C1.5 13.5858 1.83579 13.25 2.25 13.25C2.66421 13.25 3 13.5858 3 14Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M9.25 20.75C9.25 21.1642 8.91421 21.5 8.5 21.5C8.08579 21.5 7.75 21.1642 7.75 20.75C7.75 20.3358 8.08579 20 8.5 20C8.91421 20 9.25 20.3358 9.25 20.75Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M10 10C10 10.8284 9.32843 11.5 8.5 11.5C7.67157 11.5 7 10.8284 7 10C7 9.17157 7.67157 8.5 8.5 8.5C9.32843 8.5 10 9.17157 10 10Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M10 14C10 14.8284 9.32843 15.5 8.5 15.5C7.67157 15.5 7 14.8284 7 14C7 13.1716 7.67157 12.5 8.5 12.5C9.32843 12.5 10 13.1716 10 14Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M6 10C6 10.5523 5.55228 11 5 11C4.44772 11 4 10.5523 4 10C4 9.44772 4.44772 9 5 9C5.55228 9 6 9.44772 6 10Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M6 14C6 14.5523 5.55228 15 5 15C4.44772 15 4 14.5523 4 14C4 13.4477 4.44772 13 5 13C5.55228 13 6 13.4477 6 14Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M6 17.75C6 18.3023 5.55228 18.75 5 18.75C4.44772 18.75 4 18.3023 4 17.75C4 17.1977 4.44772 16.75 5 16.75C5.55228 16.75 6 17.1977 6 17.75Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M12 2C11.4477 2 11 2.44772 11 3V21C11 21.5523 11.4477 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							}
+						]
+					}
+				]
+			}
+		]
+	},
+	"name": "Unblur"
+}
\ No newline at end of file
diff --git a/web/app/components/base/icons/src/vender/solid/education/Unblur.tsx b/web/app/components/base/icons/src/vender/solid/education/Unblur.tsx
new file mode 100644
index 0000000000..14ee8f04c8
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/solid/education/Unblur.tsx
@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './Unblur.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'Unblur'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/education/index.ts b/web/app/components/base/icons/src/vender/solid/education/index.ts
index 549b77a6fd..2c8a3b6046 100644
--- a/web/app/components/base/icons/src/vender/solid/education/index.ts
+++ b/web/app/components/base/icons/src/vender/solid/education/index.ts
@@ -1 +1,4 @@
 export { default as Beaker02 } from './Beaker02'
+export { default as BubbleText } from './BubbleText'
+export { default as Heart02 } from './Heart02'
+export { default as Unblur } from './Unblur'
diff --git a/web/app/components/base/icons/src/vender/solid/general/SearchMd.json b/web/app/components/base/icons/src/vender/solid/general/SearchMd.json
new file mode 100644
index 0000000000..808195f1fa
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/solid/general/SearchMd.json
@@ -0,0 +1,38 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "24",
+			"height": "24",
+			"viewBox": "0 0 24 24",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "search-md"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Solid",
+							"fill-rule": "evenodd",
+							"clip-rule": "evenodd",
+							"d": "M11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C13.125 20 15.078 19.2635 16.6177 18.0319L20.2929 21.7071C20.6834 22.0976 21.3166 22.0976 21.7071 21.7071C22.0976 21.3166 22.0976 20.6834 21.7071 20.2929L18.0319 16.6177C19.2635 15.078 20 13.125 20 11C20 6.02944 15.9706 2 11 2ZM4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11Z",
+							"fill": "currentColor"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "SearchMd"
+}
\ No newline at end of file
diff --git a/web/app/components/base/icons/src/vender/solid/general/SearchMd.tsx b/web/app/components/base/icons/src/vender/solid/general/SearchMd.tsx
new file mode 100644
index 0000000000..2e2cf151ba
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/solid/general/SearchMd.tsx
@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './SearchMd.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'SearchMd'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/general/index.ts b/web/app/components/base/icons/src/vender/solid/general/index.ts
index 42e53ab5fb..1247d9dc08 100644
--- a/web/app/components/base/icons/src/vender/solid/general/index.ts
+++ b/web/app/components/base/icons/src/vender/solid/general/index.ts
@@ -5,6 +5,7 @@ export { default as Edit04 } from './Edit04'
 export { default as Eye } from './Eye'
 export { default as MessageClockCircle } from './MessageClockCircle'
 export { default as PlusCircle } from './PlusCircle'
+export { default as SearchMd } from './SearchMd'
 export { default as Target04 } from './Target04'
 export { default as Tool03 } from './Tool03'
 export { default as XCircle } from './XCircle'
diff --git a/web/app/components/base/prompt-editor/plugins/component-picker.tsx b/web/app/components/base/prompt-editor/plugins/component-picker.tsx
index 29da4d9f0a..b43b568213 100644
--- a/web/app/components/base/prompt-editor/plugins/component-picker.tsx
+++ b/web/app/components/base/prompt-editor/plugins/component-picker.tsx
@@ -185,8 +185,9 @@ const ComponentPicker: FC<ComponentPickerProps> = ({
   return (
     <LexicalTypeaheadMenuPlugin
       options={options}
-      onQueryChange={() => {}}
+      onQueryChange={() => { }}
       onSelectOption={onSelectOption}
+      anchorClassName='z-[999999]'
       menuRenderFn={(
         anchorElementRef,
         { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex },
diff --git a/web/app/components/base/prompt-editor/plugins/variable-picker.tsx b/web/app/components/base/prompt-editor/plugins/variable-picker.tsx
index a62f66ee21..1a532c5c37 100644
--- a/web/app/components/base/prompt-editor/plugins/variable-picker.tsx
+++ b/web/app/components/base/prompt-editor/plugins/variable-picker.tsx
@@ -15,6 +15,7 @@ import { BracketsX } from '@/app/components/base/icons/src/vender/line/developme
 import { Tool03 } from '@/app/components/base/icons/src/vender/solid/general'
 import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows'
 import AppIcon from '@/app/components/base/app-icon'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
 
 class VariablePickerOption extends MenuOption {
   title: string
@@ -121,6 +122,7 @@ const VariablePicker: FC<VariablePickerProps> = ({
   onAddExternalTool,
 }) => {
   const { t } = useTranslation()
+  const { eventEmitter } = useEventEmitterContextContext()
   const [editor] = useLexicalComposerContext()
   const checkForTriggerMatch = useBasicTypeaheadTriggerMatch('{', {
     minLength: 0,
@@ -128,6 +130,11 @@ const VariablePicker: FC<VariablePickerProps> = ({
   })
   const [queryString, setQueryString] = useState<string | null>(null)
 
+  eventEmitter?.useSubscription((v: any) => {
+    if (v.type === INSERT_VARIABLE_VALUE_BLOCK_COMMAND)
+      editor.dispatchCommand(INSERT_VARIABLE_VALUE_BLOCK_COMMAND, `{{${v.payload}}}`)
+  })
+
   const options = useMemo(() => {
     const baseOptions = items.map((item) => {
       return new VariablePickerOption(item.value, {
@@ -215,6 +222,7 @@ const VariablePicker: FC<VariablePickerProps> = ({
       options={mergedOptions}
       onQueryChange={setQueryString}
       onSelectOption={onSelectOption}
+      anchorClassName='z-[999999]'
       menuRenderFn={(
         anchorElementRef,
         { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex },
diff --git a/web/app/components/base/radio/ui.tsx b/web/app/components/base/radio/ui.tsx
new file mode 100644
index 0000000000..517a709b3f
--- /dev/null
+++ b/web/app/components/base/radio/ui.tsx
@@ -0,0 +1,18 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import cn from 'classnames'
+
+type Props = {
+  isChecked: boolean
+}
+
+const RadioUI: FC<Props> = ({
+  isChecked,
+}) => {
+  return (
+    <div className={cn(isChecked ? 'border-[5px] border-[#155eef]' : 'border-[2px] border-gray-200', 'w-4 h-4  rounded-full')}>
+    </div>
+  )
+}
+export default React.memo(RadioUI)
diff --git a/web/app/components/base/select/index.tsx b/web/app/components/base/select/index.tsx
index 471692b9bc..484f5a7fba 100644
--- a/web/app/components/base/select/index.tsx
+++ b/web/app/components/base/select/index.tsx
@@ -179,7 +179,7 @@ const SimpleSelect: FC<ISelectProps> = ({
       }}
     >
       <div className={`relative h-9 ${wrapperClassName}`}>
-        <Listbox.Button className={`w-full h-full rounded-lg border-0 bg-gray-100 py-1.5 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200 cursor-pointer ${className}`}>
+        <Listbox.Button className={`w-full h-full rounded-lg border-0 bg-gray-100 py-1.5 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'} ${className}`}>
           <span className={classNames('block truncate text-left', !selectedItem?.name && 'text-gray-400')}>{selectedItem?.name ?? localPlaceholder}</span>
           <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
             <ChevronDownIcon
@@ -188,41 +188,44 @@ const SimpleSelect: FC<ISelectProps> = ({
             />
           </span>
         </Listbox.Button>
-        <Transition
-          as={Fragment}
-          leave="transition ease-in duration-100"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <Listbox.Options className="absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg border-gray-200 border-[0.5px] focus:outline-none sm:text-sm">
-            {items.map((item: Item) => (
-              <Listbox.Option
-                key={item.value}
-                className={({ active }) =>
-                  `relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${active ? 'bg-gray-100' : ''
-                  }`
-                }
-                value={item}
-                disabled={disabled}
-              >
-                {({ /* active, */ selected }) => (
-                  <>
-                    <span className={classNames('block truncate', selected && 'font-normal')}>{item.name}</span>
-                    {selected && (
-                      <span
-                        className={classNames(
-                          'absolute inset-y-0 right-0 flex items-center pr-4 text-gray-700',
-                        )}
-                      >
-                        <CheckIcon className="h-5 w-5" aria-hidden="true" />
-                      </span>
-                    )}
-                  </>
-                )}
-              </Listbox.Option>
-            ))}
-          </Listbox.Options>
-        </Transition>
+        {!disabled && (
+          <Transition
+            as={Fragment}
+            leave="transition ease-in duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+
+            <Listbox.Options className="absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg border-gray-200 border-[0.5px] focus:outline-none sm:text-sm">
+              {items.map((item: Item) => (
+                <Listbox.Option
+                  key={item.value}
+                  className={({ active }) =>
+                    `relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${active ? 'bg-gray-100' : ''
+                    }`
+                  }
+                  value={item}
+                  disabled={disabled}
+                >
+                  {({ /* active, */ selected }) => (
+                    <>
+                      <span className={classNames('block truncate', selected && 'font-normal')}>{item.name}</span>
+                      {selected && (
+                        <span
+                          className={classNames(
+                            'absolute inset-y-0 right-0 flex items-center pr-4 text-gray-700',
+                          )}
+                        >
+                          <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                        </span>
+                      )}
+                    </>
+                  )}
+                </Listbox.Option>
+              ))}
+            </Listbox.Options>
+          </Transition>
+        )}
       </div>
     </Listbox>
   )
diff --git a/web/app/components/base/tab-slider/index.tsx b/web/app/components/base/tab-slider/index.tsx
index 7da3905ead..011ad3096c 100644
--- a/web/app/components/base/tab-slider/index.tsx
+++ b/web/app/components/base/tab-slider/index.tsx
@@ -1,15 +1,20 @@
 import type { FC } from 'react'
+import cn from 'classnames'
 
 type Option = {
   value: string
   text: string
 }
 type TabSliderProps = {
+  className?: string
+  itemWidth?: number
   value: string
   onChange: (v: string) => void
   options: Option[]
 }
 const TabSlider: FC<TabSliderProps> = ({
+  className,
+  itemWidth = 118,
   value,
   onChange,
   options,
@@ -18,17 +23,20 @@ const TabSlider: FC<TabSliderProps> = ({
   const current = options[currentIndex]
 
   return (
-    <div className='relative flex p-0.5 rounded-lg bg-gray-200'>
+    <div className={cn(className, 'relative flex p-0.5 rounded-lg bg-gray-200')}>
       {
         options.map((option, index) => (
           <div
             key={option.value}
             className={`
-              flex justify-center items-center w-[118px] h-7 text-[13px] 
+              flex justify-center items-center h-7 text-[13px] 
               font-semibold text-gray-600 rounded-[7px] cursor-pointer
               hover:bg-gray-50
               ${index !== options.length - 1 && 'mr-[1px]'}
             `}
+            style={{
+              width: itemWidth,
+            }}
             onClick={() => onChange(option.value)}
           >
             {option.text}
@@ -39,10 +47,13 @@ const TabSlider: FC<TabSliderProps> = ({
         current && (
           <div
             className={`
-              absolute flex justify-center items-center w-[118px] h-7 bg-white text-[13px] font-semibold text-primary-600 
+              absolute flex justify-center items-center h-7 bg-white text-[13px] font-semibold text-primary-600 
               border-[0.5px] border-gray-200 rounded-[7px] shadow-xs transition-transform
             `}
-            style={{ transform: `translateX(${currentIndex * 118 + 1}px)` }}
+            style={{
+              width: itemWidth,
+              transform: `translateX(${currentIndex * itemWidth + 1}px)`,
+            }}
           >
             {current.text}
           </div>
diff --git a/web/app/components/base/voice-input/utils.ts b/web/app/components/base/voice-input/utils.ts
index 5f4c8d1140..cc0b25fa84 100644
--- a/web/app/components/base/voice-input/utils.ts
+++ b/web/app/components/base/voice-input/utils.ts
@@ -1,4 +1,11 @@
 import lamejs from 'lamejs'
+import MPEGMode from 'lamejs/src/js/MPEGMode'
+import Lame from 'lamejs/src/js/Lame'
+import BitStream from 'lamejs/src/js/BitStream'
+
+(window as any).MPEGMode = MPEGMode
+;(window as any).Lame = Lame
+;(window as any).BitStream = BitStream
 
 export const convertToMp3 = (recorder: any) => {
   const wav = lamejs.WavHeader.readHeader(recorder.getWAV())
diff --git a/web/app/components/develop/template/template.en.mdx b/web/app/components/develop/template/template.en.mdx
index bd2cd2f780..28d92e98f8 100644
--- a/web/app/components/develop/template/template.en.mdx
+++ b/web/app/components/develop/template/template.en.mdx
@@ -3,16 +3,21 @@ import { Row, Col, Properties, Property, Heading, SubProperty, Paragraph } from
 
 # Completion App API
 
-For high-quality text generation, such as articles, summaries, and translations, use the completion-messages API with user input. Text generation relies on the model parameters and prompt templates set in Dify Prompt Engineering.
+The text generation application offers non-session support and is ideal for translation, article writing, summarization AI, and more.
 
 <div>
+  ### Base URL 
+  <CodeGroup title="Code" targetCode={props.appDetail.api_base_url}>
+    ```javascript
+    ```
+  </CodeGroup>
+
   ### Authentication
 
-  Service API of Dify authenticates using an `API-Key`.
+  The Service API uses `API-Key` authentication.  
+  <i>**Strongly recommend storing your API Key on the server-side, not shared or stored on the client-side, to avoid possible API-Key leakage that can lead to serious consequences.**</i>
 
-  It is suggested that developers store the `API-Key` in the backend instead of sharing or storing it in the client side to avoid the leakage of the `API-Key`, which may lead to property loss.
-
-  All API requests should include your `API-Key` in the **`Authorization`** HTTP Header, as shown below:
+  For all API requests, include your API Key in the `Authorization` HTTP Header, as shown below: 
 
   <CodeGroup title="Code">
     ```javascript
@@ -32,48 +37,112 @@ For high-quality text generation, such as articles, summaries, and translations,
 />
 <Row>
   <Col>
-    Create a Completion Message to support the question-and-answer mode.
+    Send a request to the text generation application.
 
     ### Request Body
 
     <Properties>
+      <Property name='query' type='string' key='query'>
+        User Input/Question content
+      </Property>
       <Property name='inputs' type='object' key='inputs'>
-        (Optional) Provide user input fields as key-value pairs, corresponding to variables in Prompt Eng. Key is the variable name, Value is the parameter value. If the field type is Select, the submitted Value must be one of the preset choices.
-        <ul>
-         {!!props.variables.length && props.variables.map(
-            val => (
-                <SubProperty name={val.key} type={val.type} key={val.key}>
-                  {val.name ? `${val.name}` : ''}
-                </SubProperty>
-            )
-        )}
-        </ul>
+          Allows the entry of various variable values defined by the App.  
+          The `inputs` parameter contains multiple key/value pairs, with each key corresponding to a specific variable and each value being the specific value for that variable.
+          The text generation application requires at least one key/value pair to be inputted.
       </Property>
       <Property name='response_mode' type='string' key='response_mode'>
-        - Blocking type, waiting for execution to complete and returning results. (Requests may be interrupted if the process is long)
-        - streaming returns. Implementation of streaming return based on SSE (**[Server-Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)**).
+        The mode of response return, supporting:
+        - `streaming` Streaming mode (recommended), implements a typewriter-like output through SSE ([Server-Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)).
+        - `blocking` Blocking mode, returns result after execution is complete. (Requests may be interrupted if the process is long)  
+        <i>Due to Cloudflare restrictions, the request will be interrupted without a return after 100 seconds.</i>
       </Property>
       <Property name='user' type='string' key='user'>
-        The user identifier, defined by the developer, must ensure uniqueness within the app.
+          User identifier, used to define the identity of the end-user for retrieval and statistics.  
+          Should be uniquely defined by the developer within the application.
+      </Property>
+      <Property name='conversation_id' type='string' key='conversation_id'>
+      Converation ID, to continue the conversation based on previous chat records, it is necessary to pass the previous message's conversation_id.
       </Property>
       <Property name='files' type='array[object]' key='files'>
-          Uploaded files.
-          - `type` file type: currently only `image` is supported.
-          - `transfer_method` transfer method:
-            - `remote_url`: Image address.
-            - `local_file`: upload file.
-          - `upload_file_id` Upload file ID. Required when `transfer_method` is `local_file`.
-          - `url` image address. Required when `transfer_method` is `remote_url`.
+          File list, suitable for inputting files (images) combined with text understanding and answering questions, available only when the model supports Vision capability.
+          - `type` (string) Supported type: `image` (currently only supports image type)
+          - `transfer_method` (string) Transfer method, `remote_url` for image URL / `local_file` for file upload
+          - `url` (string) Image URL (when the transfer method is `remote_url`)
+          - `upload_file_id` (string) Uploaded file ID, which must be obtained by uploading through the File Upload API in advance (when the transfer method is `local_file`)
       </Property>
     </Properties>
+  
+    ### Response
+    When `response_mode` is `blocking`, return a CompletionResponse object.    
+    When `response_mode` is `streaming`, return a ChunkCompletionResponse stream.
+
+    ### ChatCompletionResponse
+    Returns the complete App result, `Content-Type` is `application/json`.
+    - `message_id` (string) Unique message ID
+    - `conversation_id` (string) Conversation ID
+    - `mode` (string) App mode, fixed as `chat`
+    - `answer` (string) Complete response content
+    - `metadata` (object) Metadata
+      - `usage` (Usage) Model usage information
+      - `retriever_resources` (array[RetrieverResource]) Citation and Attribution List
+    - `created_at` (int) Message creation timestamp, e.g., 1705395332
+
+    ### ChunkChatCompletionResponse
+    Returns the stream chunks outputted by the App, `Content-Type` is `text/event-stream`.
+    Each streaming chunk starts with `data:`, separated by two newline characters `\n\n`, as shown below:
+    <CodeGroup>
+    ```streaming {{ title: 'Response' }}
+    data: {"event": "message", "task_id": "900bbd43-dc0b-4383-a372-aa6e6c414227", "id": "663c5084-a254-4040-8ad3-51f2a3c1a77c", "answer": "Hi", "created_at": 1705398420}\n\n
+    ```
+    </CodeGroup>
+    The structure of the streaming chunks varies depending on the `event`:
+    - `event: message` LLM returns text chunk event, i.e., the complete text is output in a chunked fashion.
+      - `task_id` (string) Task ID, used for request tracking and the below Stop Generate API
+      - `message_id` (string) Unique message ID
+      - `conversation_id` (string) Conversation ID
+      - `answer` (string) LLM returned text chunk content
+      - `created_at` (int) Creation timestamp, e.g., 1705395332
+    - `event: message_end` Message end event, receiving this event means streaming has ended.
+      - `task_id` (string) Task ID, used for request tracking and the below Stop Generate API
+      - `message_id` (string) Unique message ID
+      - `conversation_id` (string) Conversation ID
+      - `metadata` (object) Metadata
+        - `usage` (Usage) Model usage information
+        - `retriever_resources` (array[RetrieverResource]) Citation and Attribution List
+    - `event: message_replace` Message content replacement event.
+      When output content moderation is enabled, if the content is flagged, then the message content will be replaced with a preset reply through this event.
+      - `task_id` (string) Task ID, used for request tracking and the below Stop Generate API
+      - `message_id` (string) Unique message ID
+      - `conversation_id` (string) Conversation ID
+      - `answer` (string) Replacement content (directly replaces all LLM reply text)
+      - `created_at` (int) Creation timestamp, e.g., 1705395332
+    - `event: error`
+      Exceptions that occur during the streaming process will be output in the form of stream events, and reception of an error event will end the stream.
+      - `task_id` (string) Task ID, used for request tracking and the below Stop Generate API
+      - `message_id` (string) Unique message ID
+      - `status` (int) HTTP status code
+      - `code` (string) Error code
+      - `message` (string) Error message
+    - `event: ping` Ping event every 10 seconds to keep the connection alive.
+
+    ### Errors
+    - 404, Conversation does not exists
+    - 400, `invalid_param`, abnormal parameter input
+    - 400, `app_unavailable`, App configuration unavailable
+    - 400, `provider_not_initialize`, no available model credential configuration
+    - 400, `provider_quota_exceeded`, model invocation quota insufficient
+    - 400, `model_currently_not_support`, current model unavailable
+    - 400, `completion_request_error`, text generation failed
+    - 500, internal server error
+
   </Col>
   <Col sticky>
 
-    <CodeGroup title="Request" tag="POST" label="/completion-messages" targetCode={`curl --location --request POST '${props.appDetail.api_base_url}/completion-messages' \\\n--header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{\n    "inputs": ${JSON.stringify(props.inputs)},\n    "response_mode": "streaming"\n    "user": "abc-123"\n}'\n`}>
+    <CodeGroup title="Request" tag="POST" label="/completion-messages" targetCode={`curl -X POST '${props.appDetail.api_base_url}/completion-messages' \\\n--header 'Authorization: Bearer {api_key}' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{\n    "inputs": ${JSON.stringify(props.inputs)},\n    "response_mode": "streaming"\n    "user": "abc-123"\n}'\n`}>
 
     ```bash {{ title: 'cURL' }}
-    curl --location --request POST '${props.appDetail.api_base_url}/completion-messages' \
-    --header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \
+    curl -X POST '${props.appDetail.api_base_url}/completion-messages' \
+    --header 'Authorization: Bearer {api_key}' \
     --header 'Content-Type: application/json' \
     --data-raw '{
         "inputs": {},
@@ -83,21 +152,160 @@ For high-quality text generation, such as articles, summaries, and translations,
     ```
 
     </CodeGroup>
-    ### blocking
+    ### Blocking Mode
     <CodeGroup title="Response">
     ```json {{ title: 'Response' }}
     {
-      "id": "0b089b9a-24d9-48cc-94f8-762677276261",
-      "answer": "how are you?",
-      "created_at": 1679586667
-    }
+      "event": "message",
+      "message_id": "9da23599-e713-473b-982c-4328d4f5c78a",
+      "mode": "completion",
+      "answer": "Hello World!...",
+      "metadata": {
+          "usage": {
+              "prompt_tokens": 1033,
+              "prompt_unit_price": "0.001",
+              "prompt_price_unit": "0.001",
+              "prompt_price": "0.0010330",
+              "completion_tokens": 128,
+              "completion_unit_price": "0.002",
+              "completion_price_unit": "0.001",
+              "completion_price": "0.0002560",
+              "total_tokens": 1161,
+              "total_price": "0.0012890",
+              "currency": "USD",
+              "latency": 0.7682376249867957
+          }
+      },
+      "created_at": 1705407629
+  }
     ```
     </CodeGroup>
-    ### streaming
+    ### Streaming Mode
     <CodeGroup title="Response">
     ```streaming {{ title: 'Response' }}
-      data: {"id": "5ad4cb98-f0c7-4085-b384-88c403be6290", "answer": " I", "created_at": 1679586595}
-      data: {"id": "5ad4cb98-f0c7-4085-b384-88c403be6290", "answer": " I", "created_at": 1679586595}
+      data: {"event": "message", "message_id": "5ad4cb98-f0c7-4085-b384-88c403be6290", "answer": " I", "created_at": 1679586595}
+      data: {"event": "message", "message_id": "5ad4cb98-f0c7-4085-b384-88c403be6290", "answer": "'m", "created_at": 1679586595}
+      data: {"event": "message", "message_id": "5ad4cb98-f0c7-4085-b384-88c403be6290", "answer": " glad", "created_at": 1679586595}
+      data: {"event": "message", "message_id": "5ad4cb98-f0c7-4085-b384-88c403be6290", "answer": " to", "created_at": 1679586595}
+      data: {"event": "message", "message_id": : "5ad4cb98-f0c7-4085-b384-88c403be6290", "answer": " meet", "created_at": 1679586595}
+      data: {"event": "message", "message_id": : "5ad4cb98-f0c7-4085-b384-88c403be6290", "answer": " you", "created_at": 1679586595}
+      data: {"event": "message_end", "id": "5e52ce04-874b-4d27-9045-b3bc80def685", "metadata": {"usage": {"prompt_tokens": 1033, "prompt_unit_price": "0.001", "prompt_price_unit": "0.001", "prompt_price": "0.0010330", "completion_tokens": 135, "completion_unit_price": "0.002", "completion_price_unit": "0.001", "completion_price": "0.0002700", "total_tokens": 1168, "total_price": "0.0013030", "currency": "USD", "latency": 1.381760165997548}}}
+    ```
+    </CodeGroup>
+  </Col>
+</Row>
+
+---
+<Heading
+  url='/files/upload'
+  method='POST'
+  title='File Upload'
+  name='#file-upload'
+/>
+<Row>
+  <Col>
+  Upload a file (currently only images are supported) for use when sending messages, enabling multimodal understanding of images and text.
+  Supports png, jpg, jpeg, webp, gif formats.  
+  <i>Uploaded files are for use by the current end-user only.</i>
+
+  ### Request Body
+  This interface requires a `multipart/form-data` request.
+  - `file` (File) Required
+    The file to be uploaded.
+  - `user` (string) Required
+    User identifier, defined by the developer's rules, must be unique within the application.
+  
+  ### Response
+  After a successful upload, the server will return the file's ID and related information.
+  - `id` (uuid) ID
+  - `name` (string) File name
+  - `size` (int) File size (bytes)
+  - `extension` (string) File extension
+  - `mime_type` (string) File mime-type
+  - `created_by` (uuid) End-user ID
+  - `created_at` (timestamp) Creation timestamp, e.g., 1705395332
+
+  ### Errors
+  - 400, `no_file_uploaded`, a file must be provided
+  - 400, `too_many_files`, currently only one file is accepted
+  - 400, `unsupported_preview`, the file does not support preview
+  - 400, `unsupported_estimate`, the file does not support estimation
+  - 413, `file_too_large`, the file is too large
+  - 415, `unsupported_file_type`, unsupported extension, currently only document files are accepted
+  - 503, `s3_connection_failed`, unable to connect to S3 service
+  - 503, `s3_permission_denied`, no permission to upload files to S3
+  - 503, `s3_file_too_large`, file exceeds S3 size limit
+  - 500, internal server error
+  
+
+  </Col>
+  <Col sticky>
+  ### Request Example
+  <CodeGroup title="Request" tag="POST" label="/files/upload" targetCode={`curl -X POST '${props.appDetail.api_base_url}/files/upload' \\\n--header 'Authorization: Bearer {api_key}' \\\n--form 'file=@localfile;type=image/[png|jpeg|jpg|webp|gif] \\\n--form 'user=abc-123'`}>
+
+    ```bash {{ title: 'cURL' }}
+    curl -X POST '${props.appDetail.api_base_url}/files/upload' \
+    --header 'Authorization: Bearer {api_key}' \
+    --form 'file=@"/path/to/file"'
+    ```
+
+    </CodeGroup>
+
+
+  ### Response Example
+  <CodeGroup title="Response">
+    ```json {{ title: 'Response' }}
+    {
+      "id": "72fa9618-8f89-4a37-9b33-7e1178a24a67",  
+      "name": "example.png",
+      "size": 1024,
+      "extension": "png",
+      "mime_type": "image/png",
+      "created_by": "6ad1ab0a-73ff-4ac1-b9e4-cdb312f71f13",  
+      "created_at": 1577836800,
+    }
+  ```
+  </CodeGroup>
+  </Col>
+</Row>
+---
+
+<Heading
+  url='/chat-messages/:task_id/stop'
+  method='POST'
+  title='Stop Generate'
+  name='#stop-generatebacks'
+/>
+<Row>
+  <Col>
+  Only supported in streaming mode.
+  ### Path
+  - `task_id` (string) Task ID, can be obtained from the streaming chunk return
+  Request Body
+  - `user` (string) Required
+    User identifier, used to define the identity of the end-user, must be consistent with the user passed in the send message interface.
+  ### Response
+  - `result` (string) Always returns "success"
+  </Col>
+  <Col sticky>
+  ### Request Example
+  <CodeGroup title="Request" tag="POST" label="/chat-messages/:task_id/stop" targetCode={`curl -X POST 'https://cloud.dify.ai/v1/chat-messages/:task_id/stop' \\\n-H 'Authorization: Bearer {api_key}' \\\n-H 'Content-Type: application/json' \\\n--data-raw '{ "user": "abc-123"}`}>
+    ```bash {{ title: 'cURL' }}
+    curl -X POST 'https://cloud.dify.ai/v1/chat-messages/:task_id/stop' \
+    -H 'Authorization: Bearer {api_key}' \  
+    -H 'Content-Type: application/json' \  
+    --data-raw '{
+        "user": "abc-123"
+    }'
+    ```
+    </CodeGroup>
+
+    ### Response Example
+    <CodeGroup title="Response">
+    ```json {{ title: 'Response' }}
+    {
+      "result": "success"
+    }
     ```
     </CodeGroup>
   </Col>
@@ -108,18 +316,17 @@ For high-quality text generation, such as articles, summaries, and translations,
 <Heading
   url='/messages/{message_id}/feedbacks'
   method='POST'
-  title='Message feedback (like)'
+  title='Message Feedback'
   name='#feedbacks'
 />
 <Row>
   <Col>
-    Rate received messages on behalf of end-users with likes or dislikes. This data is visible in the Logs & Annotations page and used for future model fine-tuning.
-
-    ### Path Params
+    End-users can provide feedback messages, facilitating application developers to optimize expected outputs.
 
+    ### Path
     <Properties>
       <Property name='message_id' type='string' key='message_id'>
-        Message ID
+       Message ID
       </Property>
     </Properties>
 
@@ -127,20 +334,23 @@ For high-quality text generation, such as articles, summaries, and translations,
 
     <Properties>
       <Property name='rating' type='string' key='rating'>
-        like or dislike, null is undo
+        Upvote as `like`, downvote as `dislike`, revoke upvote as `null`
       </Property>
       <Property name='user' type='string' key='user'>
-        The user identifier, defined by the developer, must ensure uniqueness within the app.
+        User identifier, defined by the developer's rules, must be unique within the application.
       </Property>
     </Properties>
+
+    ### Response
+    - `result` (string) Always returns "success"
   </Col>
   <Col sticky>
 
-    <CodeGroup title="Request" tag="POST" label="/messages/{message_id}/feedbacks" targetCode={`curl --location --request POST '${props.appDetail.api_base_url}/messages/{message_id}/feedbacks \\\n--header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \\\n--header 'Content-Type: application/json' \\\n --data-raw '{ \n "rating": "like",\n    "user": "abc-123"\n}'`}>
+    <CodeGroup title="Request" tag="POST" label="/messages/{message_id}/feedbacks" targetCode={`curl -X POST '${props.appDetail.api_base_url}/messages/{message_id}/feedbacks \\\n --header 'Authorization: Bearer {api_key}' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{\n    "rating": "like",\n    "user": "abc-123"\n}'`}>
 
     ```bash {{ title: 'cURL' }}
-    curl --location --request POST '${props.appDetail.api_base_url}/messages/{message_id}/feedbacks' \
-    --header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \
+    curl -X POST '${props.appDetail.api_base_url}/messages/{message_id}/feedbacks' \
+    --header 'Authorization: Bearer {api_key}' \
     --header 'Content-Type: application/json' \
     --data-raw '{
         "rating": "like",
@@ -153,73 +363,7 @@ For high-quality text generation, such as articles, summaries, and translations,
     <CodeGroup title="Response">
     ```json {{ title: 'Response' }}
     {
-      "has_more": false,
-      "data": [
-        {
-          "id": "WAz8eIbvDR60rouK",
-          "username": "FrankMcCallister",
-          "phone_number": "1-800-759-3000",
-          "avatar_url": "https://assets.protocol.chat/avatars/frank.jpg",
-          "display_name": null,
-          "conversation_id": "xgQQXg3hrtjh7AvZ",
-          "created_at": 692233200
-        },
-        {
-          "id": "hSIhXBhNe8X1d8Et"
-          // ...
-        }
-      ]
-    }
-    ```
-    </CodeGroup>
-  </Col>
-</Row>
-
----
-
-<Heading
-  url='/files/upload'
-  method='POST'
-  title='Upload files'
-  name='#files-upload'
-/>
-<Row>
-  <Col>
-    Upload files to the server for text generation and dialogue. Uploaded files are only available to the current end user.
-
-    ### Request Body
-    The request method is `multipart/form-data`
-    <Properties>
-      <Property name='file' type='file' key='file'>
-        The file to upload. Currently supports png, jpg, jpeg, webp, gif format files.
-      </Property>
-      <Property name='user' type='string' key='user'>
-        User ID, rules are defined by the developer, and it is necessary to ensure that the user ID is unique within the application.
-      </Property>
-    </Properties>
-  </Col>
-  <Col sticky>
-
-    <CodeGroup title="Request" tag="POST" label="/files/upload" targetCode={`curl --location --request POST '${props.appDetail.api_base_url}/files/upload' \\\n--header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \\\n--form 'file=@localfile;type=image/[png|jpeg|jpg|webp|gif] \\\n--form 'user=abc-123'`}>
-
-    ```bash {{ title: 'cURL' }}
-    curl --location --request POST '${props.appDetail.api_base_url}/files/upload' \
-    --header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \
-    --form 'file=@"/path/to/file"'
-    ```
-
-    </CodeGroup>
-
-    <CodeGroup title="Response">
-    ```json {{ title: 'Response' }}
-    {
-      "id": "72fa9618-8f89-4a37-9b33-7e1178a24a67",  
-      "name": "example.png",
-      "size": 1024,
-      "extension": "png",
-      "mime_type": "image/png",
-      "created_by": 123,  
-      "created_at": 1577836800,
+      "result": "success"
     }
     ```
     </CodeGroup>
@@ -231,30 +375,66 @@ For high-quality text generation, such as articles, summaries, and translations,
 <Heading
   url='/parameters'
   method='GET'
-  title='Obtain application parameter information'
+  title='Get Application Information'
   name='#parameters'
 />
 <Row>
   <Col>
-    Content include:
-    1. Retrieve configured Input parameters, including variable names, field names, types, and default values. Typically used for displaying these fields in a form or filling in default values after the client loads.
-    2. Configuration of uploading images, including whether to enable image uploading, the number of uploaded images and the uploading method. Note: This configuration is only available when using a model that supports multimodality.
+    Used at the start of entering the page to obtain information such as features, input parameter names, types, and default values.
 
     ### Query
 
     <Properties>
       <Property name='user' type='string' key='user'>
-        The user identifier, defined by the developer, must ensure uniqueness within the app.
+          User identifier, defined by the developer's rules, must be unique within the application.
       </Property>
     </Properties>
+
+    ### Response
+    - `opening_statement` (string) Opening statement
+    - `suggested_questions` (array[string]) List of suggested questions for the opening
+    - `suggested_questions_after_answer` (object) Suggest questions after enabling the answer.
+      - `enabled` (bool) Whether it is enabled
+    - `speech_to_text` (object) Speech to text
+      - `enabled` (bool) Whether it is enabled
+    - `retriever_resource` (object) Citation and Attribution
+      - `enabled` (bool) Whether it is enabled
+    - `annotation_reply` (object) Annotation reply
+      - `enabled` (bool) Whether it is enabled
+    - `user_input_form` (array[object]) User input form configuration
+      - `text-input` (object) Text input control
+        - `label` (string) Variable display label name
+        - `variable` (string) Variable ID
+        - `required` (bool) Whether it is required
+        - `default` (string) Default value
+      - `paragraph` (object) Paragraph text input control
+        - `label` (string) Variable display label name
+        - `variable` (string) Variable ID
+        - `required` (bool) Whether it is required
+        - `default` (string) Default value
+      - `select` (object) Dropdown control
+        - `label` (string) Variable display label name
+        - `variable` (string) Variable ID
+        - `required` (bool) Whether it is required
+        - `default` (string) Default value
+        - `options` (array[string]) Option values
+    - `file_upload` (object) File upload configuration
+      - `image` (object) Image settings
+        Currently only supports image types: `png`, `jpg`, `jpeg`, `webp`, `gif`
+        - `enabled` (bool) Whether it is enabled
+        - `number_limits` (int) Image number limit, default is 3
+        - `transfer_methods` (array[string]) List of transfer methods, remote_url, local_file, must choose one
+    - `system_parameters` (object) System parameters
+      - `image_file_size_limit` (string) Image file upload size limit (MB)
+
   </Col>
   <Col sticky>
 
-    <CodeGroup title="Request" tag="GET" label="/parameters" targetCode={`curl --location --request GET '${props.appDetail.api_base_url}/parameters?user=abc-123' \\\n--header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY'`}>
+    <CodeGroup title="Request" tag="GET" label="/parameters" targetCode={` curl -X GET '${props.appDetail.api_base_url}/parameters?user=abc-123'`}>
 
     ```bash {{ title: 'cURL' }}
-    curl --location --request GET '${props.appDetail.api_base_url}/parameters?user=abc-123' \
-    --header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY'
+    curl -X GET '${props.appDetail.api_base_url}/parameters?user=abc-123' \
+    --header 'Authorization: Bearer {api_key}'
     ```
 
     </CodeGroup>
@@ -262,30 +442,42 @@ For high-quality text generation, such as articles, summaries, and translations,
     <CodeGroup title="Response">
     ```json {{ title: 'Response' }}
     {
-      "introduction": "nice to meet you",
+      "opening_statement": "Hello!",
+      "suggested_questions_after_answer": {
+          "enabled": true
+      },
+      "speech_to_text": {
+          "enabled": true
+      },
+      "retriever_resource": {
+          "enabled": true
+      },
+      "annotation_reply": {
+          "enabled": true
+      },
       "user_input_form": [
-        {
-          "text-input": {
-            "label": "a",
-            "variable": "a",
-            "required": true,
-            "max_length": 48,
-            "default": ""
+          {
+              "paragraph": {
+                  "label": "Query",
+                  "variable": "query",
+                  "required": true,
+                  "default": ""
+              }
           }
-        }
-        {
-          // ...
-        }
       ],
       "file_upload": {
-        "image": {
-          "enabled": true,
-          "number_limits": 3,
-          "transfer_methods": [
-            "remote_url",
-            "local_file"
-          ]
-        }
+          "image": {
+              "enabled": false,
+              "number_limits": 3,
+              "detail": "high",
+              "transfer_methods": [
+                  "remote_url",
+                  "local_file"
+              ]
+          }
+      },
+      "system_parameters": {
+          "image_file_size_limit": "10"
       }
     }
     ```
diff --git a/web/app/components/develop/template/template.zh.mdx b/web/app/components/develop/template/template.zh.mdx
index 0291e9629c..4748ec41dd 100644
--- a/web/app/components/develop/template/template.zh.mdx
+++ b/web/app/components/develop/template/template.zh.mdx
@@ -3,21 +3,25 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
 
 # 文本生成型应用 API
 
-可用于生成高质量文本的应用，例如生成文章、摘要、翻译等，通过调用 completion-messages 接口，发送用户输入得到生成文本结果。用于生成文本的模型参数和提示词模版取决于开发者在 Dify 提示词编排页的设置。
+文本生成应用无会话支持，适合用于翻译/文章写作/总结 AI 等等。
 
 <div>
+  ### 基础 URL
+  <CodeGroup title="Code" targetCode={props.appDetail.api_base_url}>
+    ```javascript
+    ```
+  </CodeGroup>
+
   ### 鉴权
 
-  Dify Service API 使用 `API-Key` 进行鉴权。
-
-  建议开发者把 `API-Key` 放在后端存储，而非分享或者放在客户端存储，以免 `API-Key` 泄露，导致财产损失。
-
+  
+  Dify Service API 使用 `API-Key` 进行鉴权。  
+  <i>**强烈建议开发者把 `API-Key` 放在后端存储，而非分享或者放在客户端存储，以免 `API-Key` 泄露，导致财产损失。**</i>  
   所有 API 请求都应在 **`Authorization`** HTTP Header 中包含您的 `API-Key`，如下所示：
 
   <CodeGroup title="Code">
     ```javascript
       Authorization: Bearer {API_KEY}
-
     ```
   </CodeGroup>
 </div>
@@ -27,53 +31,120 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
 <Heading
   url='/completion-messages'
   method='POST'
-  title='创建文本补全消息'
+  title='发送消息'
   name='#Create-Completion-Message'
 />
 <Row>
   <Col>
-    创建文本补全消息，支持一问一答模式。
+    发送请求给文本生成型应用。
 
     ### Request Body
 
     <Properties>
+      <Property name='query' type='string' key='query'>
+        用户输入/提问内容。
+      </Property>
       <Property name='inputs' type='object' key='inputs'>
-        （选填）以键值对方式提供用户输入字段，与提示词编排中的变量对应。Key 为变量名称，Value 是参数值。如果字段类型为 Select，传入的 Value 需为预设选项之一。
-        <ul>
-         {!!props.variables.length && props.variables.map(
-            val => (
-                <SubProperty name={val.key} type={val.type} key={val.key}>
-                  {val.name ? `${val.name}` : ''}
-                </SubProperty>
-            )
-        )}
-        </ul>
+        (选填)允许传入 App 定义的各变量值。
+  inputs 参数包含了多组键值对（Key/Value pairs），每组的键对应一个特定变量，每组的值则是该变量的具体值。  
+  文本生成型应用要求至少传入一组键值对。
       </Property>
       <Property name='response_mode' type='string' key='response_mode'>
-        - blocking 阻塞型，等待执行完毕后返回结果。（请求若流程较长可能会被中断）
-        - streaming 流式返回。基于 SSE（**[Server-Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)**）实现流式返回。
+        - `streaming` 流式模式（推荐）。基于 SSE（**[Server-Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)**）实现类似打字机输出方式的流式返回。
+        - `blocking` 阻塞模式，等待执行完毕后返回结果。（请求若流程较长可能会被中断）。  
+        <i>由于 Cloudflare 限制，请求会在 100 秒超时无返回后中断。</i>
       </Property>
       <Property name='user' type='string' key='user'>
-        用户标识，由开发者定义规则，需保证用户标识在应用内唯一。
+        用户标识，用于定义终端用户的身份，方便检索、统计。  
+        由开发者定义规则，需保证用户标识在应用内唯一。
+      </Property>
+      <Property name='conversation_id' type='string' key='conversation_id'>
+      （选填）会话 ID，需要基于之前的聊天记录继续对话，必须传之前消息的 conversation_id。
       </Property>
       <Property name='files' type='array[object]' key='files'>
           上传的文件。
-          - `type` 文件类型:目前仅支持 `image`。
-          - `transfer_method` 传递方式:
+          - `type` (string) 支持类型：图片 `image`（目前仅支持图片格式） 。
+          - `transfer_method` (string)  传递方式:
             - `remote_url`: 图片地址。
             - `local_file`: 上传文件。
-          - `upload_file_id` 上传文件 ID。`transfer_method` 为 `local_file` 时必填。
-          - `url` 图片地址。`transfer_method` 为 `remote_url` 时必填。
+          - `url` 图片地址。（仅当传递方式为 `remote_url` 时）。
+          - `upload_file_id` 上传文件 ID。（仅当传递方式为 `local_file `时）。
       </Property>
     </Properties>
+
+    ### Response
+    <Properties>
+    当 `response_mode` 为 `blocking` 时，返回 ChatCompletionResponse object。  
+    当 `response_mode` 为 `streaming`时，返回 ChunkChatCompletionResponse object 流式序列。
+    
+    ### ChatCompletionResponse
+    返回完整的 App 结果，`Content-Type` 为 `application/json`。
+    - `message_id` (string) 消息唯一 ID
+    - `conversation_id` (string) 会话 ID
+    - `mode` (string) App 模式，固定为 chat
+    - `answer` (string) 完整回复内容
+    - `metadata` (object) 元数据
+      - `usage` (Usage) 模型用量信息
+      - `retriever_resources` (array[RetrieverResource]) 引用和归属分段列表
+    - `created_at` (int) 消息创建时间戳，如：1705395332
+
+    ### ChunkChatCompletionResponse
+    返回 App 输出的流式块，`Content-Type` 为 `text/event-stream`。
+    每个流式块均为 data: 开头，块之间以 `\n\n` 即两个换行符分隔，如下所示：
+    <CodeGroup>
+    ```streaming {{ title: 'Response' }}
+    data: {"event": "message", "task_id": "900bbd43-dc0b-4383-a372-aa6e6c414227", "id": "663c5084-a254-4040-8ad3-51f2a3c1a77c", "answer": "Hi", "created_at": 1705398420}\n\n
+    ```
+    </CodeGroup>
+    流式块中根据 `event` 不同，结构也不同：
+    - `event: message` LLM 返回文本块事件，即：完整的文本以分块的方式输出。
+      - `task_id` (string) 任务 ID，用于请求跟踪和下方的停止响应接口
+      - `message_id` (string) 消息唯一 ID
+      - `conversation_id` (string) 会话 ID
+      - `answer` (string) LLM 返回文本块内容
+      - `created_at` (int) 创建时间戳，如：1705395332
+    - `event: message_end` 消息结束事件，收到此事件则代表流式返回结束。
+      - `task_id` (string) 任务 ID，用于请求跟踪和下方的停止响应接口
+      - `message_id` (string) 消息唯一 ID
+      - `conversation_id` (string) 会话 ID
+      - `metadata` (object) 元数据
+        - `usage` (Usage) 模型用量信息
+        - `retriever_resources` (array[RetrieverResource]) 引用和归属分段列表
+    - `event: message_replace` 消息内容替换事件。
+      开启内容审查和审查输出内容时，若命中了审查条件，则会通过此事件替换消息内容为预设回复。
+      - `task_id` (string) 任务 ID，用于请求跟踪和下方的停止响应接口
+      - `message_id` (string) 消息唯一 ID
+      - `conversation_id` (string) 会话 ID
+      - `answer` (string) 替换内容（直接替换 LLM 所有回复文本）
+      - `created_at` (int) 创建时间戳，如：1705395332
+    - `event: error`
+      流式输出过程中出现的异常会以 stream event 形式输出，收到异常事件后即结束。
+      - `task_id` (string) 任务 ID，用于请求跟踪和下方的停止响应接口
+      - `message_id` (string) 消息唯一 ID
+      - `status` (int) HTTP 状态码
+      - `code` (string) 错误码
+      - `message` (string) 错误消息
+    - `event: ping` 每 10s 一次的 ping 事件，保持连接存活。
+
+    ### Errors
+    - 404，对话不存在
+    - 400，`invalid_param`，传入参数异常
+    - 400，`app_unavailable`，App 配置不可用
+    - 400，`provider_not_initialize`，无可用模型凭据配置
+    - 400，`provider_quota_exceeded`，模型调用额度不足
+    - 400，`model_currently_not_support`，当前模型不可用
+    - 400，`completion_request_error`，文本生成失败
+    - 500，服务内部异常
+
+    </Properties>
   </Col>
   <Col sticky>
 
-    <CodeGroup title="Request" tag="POST" label="/completion-messages" targetCode={`curl --location --request POST '${props.appDetail.api_base_url}/completion-messages' \\\n--header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{\n    "inputs": ${JSON.stringify(props.inputs)},\n    "response_mode": "streaming",\n    "user": "abc-123"\n}'\n`}>
+    <CodeGroup title="Request" tag="POST" label="/completion-messages" targetCode={`curl -X POST '${props.appDetail.api_base_url}/completion-messages' \\\n--header 'Authorization: Bearer {api_key}' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{\n    "inputs": ${JSON.stringify(props.inputs)},\n    "response_mode": "streaming",\n    "user": "abc-123"\n}'\n`}>
 
     ```bash {{ title: 'cURL' }}
-    curl --location --request POST '${props.appDetail.api_base_url}/completion-messages' \
-    --header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \
+    curl -X POST '${props.appDetail.api_base_url}/completion-messages' \
+    --header 'Authorization: Bearer {api_key}' \
     --header 'Content-Type: application/json' \
     --data-raw '{
         "inputs": {},
@@ -104,79 +175,6 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
 </Row>
 
 ---
-
-<Heading
-  url='/messages/{message_id}/feedbacks'
-  method='POST'
-  title='消息反馈（点赞）'
-  name='#feedbacks'
-/>
-<Row>
-  <Col>
-    代表最终用户对返回消息进行评价，可以点赞与点踩，该数据将在“日志与标注”页中可见，并用于后续的模型微调。
-
-    ### Path Params
-
-    <Properties>
-      <Property name='message_id' type='string' key='message_id'>
-        消息 ID
-      </Property>
-    </Properties>
-
-    ### Request Body
-
-    <Properties>
-      <Property name='rating' type='string' key='rating'>
-       like 或 dislike， 空值为撤销
-      </Property>
-      <Property name='user' type='string' key='user'>
-        用户标识，由开发者定义规则，需保证用户标识在应用内唯一。
-      </Property>
-    </Properties>
-  </Col>
-  <Col sticky>
-
-    <CodeGroup title="Request" tag="POST" label="/messages/{message_id}/feedbacks" targetCode={`curl --location --request POST '${props.appDetail.api_base_url}/messages/{message_id}/feedbacks \\\n--header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \\\n--header 'Content-Type: application/json' \\\n --data-raw '{ \n "rating": "like",\n    "user": "abc-123"\n}'`}>
-
-    ```bash {{ title: 'cURL' }}
-    curl --location --request POST '${props.appDetail.api_base_url}/messages/{message_id}/feedbacks' \
-    --header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \
-    --header 'Content-Type: application/json' \
-    --data-raw '{
-        "rating": "like",
-        "user": "abc-123"
-    }'
-    ```
-
-    </CodeGroup>
-
-    <CodeGroup title="Response">
-    ```json {{ title: 'Response' }}
-    {
-      "has_more": false,
-      "data": [
-        {
-          "id": "WAz8eIbvDR60rouK",
-          "username": "FrankMcCallister",
-          "phone_number": "1-800-759-3000",
-          "avatar_url": "https://assets.protocol.chat/avatars/frank.jpg",
-          "display_name": null,
-          "conversation_id": "xgQQXg3hrtjh7AvZ",
-          "created_at": 692233200
-        },
-        {
-          "id": "hSIhXBhNe8X1d8Et"
-          // ...
-        }
-      ]
-    }
-    ```
-    </CodeGroup>
-  </Col>
-</Row>
-
----
-
 <Heading
   url='/files/upload'
   method='POST'
@@ -185,26 +183,49 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
 />
 <Row>
   <Col>
-    上传文件到服务器，供文本生成、对话使用。上传的文件仅供当前终端用户使用。
+    上传文件（目前仅支持图片）并在发送消息时使用，可实现图文多模态理解。
+    支持 png, jpg, jpeg, webp, gif 格式。  
+    <i>上传的文件仅供当前终端用户使用。</i>
 
     ### Request Body
-    请求方式为 `multipart/form-data`。
+    该接口需使用  `multipart/form-data` 进行请求。
     <Properties>
       <Property name='file' type='file' key='file'>
-        要上传的文件。目前支持 png, jpg, jpeg, webp, gif 格式文件。
+        要上传的文件。
       </Property>
       <Property name='user' type='string' key='user'>
-        用户标识，由开发者定义规则，需保证用户标识在应用内唯一。
+          用户标识，用于定义终端用户的身份，必须和发送消息接口传入 user 保持一致。
       </Property>
     </Properties>
+
+    ### Response
+    成功上传后，服务器会返回文件的 ID 和相关信息。
+    - `id` (uuid) ID
+    - `name` (string) 文件名
+    - `size` (int) 文件大小（byte）
+    - `extension` (string) 文件后缀
+    - `mime_type` (string) 文件 mime-type
+    - `created_by` (uuid) 上传人 ID
+    - `created_at` (timestamp) 上传时间
+
+    ### Errors
+    - 400，`no_file_uploaded`，必须提供文件
+    - 400，`too_many_files`，目前只接受一个文件
+    - 400，`unsupported_preview`，该文件不支持预览
+    - 400，`unsupported_estimate`，该文件不支持估算
+    - 413，`file_too_large`，文件太大
+    - 415，`unsupported_file_type`，不支持的扩展名，当前只接受文档类文件
+    - 503，`s3_connection_failed`，无法连接到 S3 服务
+    - 503，`s3_permission_denied`，无权限上传文件到 S3
+    - 503，`s3_file_too_large`，文件超出 S3 大小限制
   </Col>
   <Col sticky>
 
-    <CodeGroup title="Request" tag="POST" label="/files/upload" targetCode={`curl --location --request POST '${props.appDetail.api_base_url}/files/upload' \\\n--header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \\\n--form 'file=@localfile;type=image/[png|jpeg|jpg|webp|gif] \\\n--form 'user=abc-123'`}>
+    <CodeGroup title="Request" tag="POST" label="/files/upload" targetCode={`curl -X POST '${props.appDetail.api_base_url}/files/upload' \\\n--header 'Authorization: Bearer {api_key}' \\\n--form 'file=@localfile;type=image/[png|jpeg|jpg|webp|gif] \\\n--form 'user=abc-123'`}>
 
     ```bash {{ title: 'cURL' }}
-    curl --location --request POST '${props.appDetail.api_base_url}/files/upload' \
-    --header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \
+    curl -X POST '${props.appDetail.api_base_url}/files/upload' \
+    --header 'Authorization: Bearer {api_key}' \
     --form 'file=@"/path/to/file"'
     ```
 
@@ -225,6 +246,105 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
     </CodeGroup>
   </Col>
 </Row>
+---
+<Heading
+  url='/chat-messages/{task_id}/stop'
+  method='POST'
+  title='停止响应'
+  name='#Stop'
+/>
+<Row>
+  <Col>
+  仅支持流式模式。
+  ### Path
+  - `task_id` (string) 任务 ID，可在流式返回 Chunk 中获取
+  
+  ### Request Body
+  - `user` (string) Required
+    用户标识，用于定义终端用户的身份，必须和发送消息接口传入 user 保持一致。
+  ### Response
+  - `result` (string) 固定返回 success
+  </Col>
+  <Col sticky>
+  <CodeGroup title="Request" tag="POST" label="/chat-messages/:task_id/stop" targetCode={`curl -X POST 'https://cloud.dify.ai/v1/chat-messages/:task_id/stop' \\\n-H 'Authorization: Bearer {api_key}' \\\n-H 'Content-Type: application/json' \\\n--data-raw '{ "user": "abc-123"}`}>
+    ```bash {{ title: 'cURL' }}
+    curl -X POST 'https://cloud.dify.ai/v1/chat-messages/:task_id/stop' \
+    -H 'Authorization: Bearer {api_key}' \
+    -H 'Content-Type: application/json' \
+    --data-raw '{
+        "user": "abc-123"
+    }'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+    ```json {{ title: 'Response' }}
+    {
+      "result": "success"
+    }
+    ```
+    </CodeGroup>
+  </Col>
+</Row>
+---
+
+<Heading
+  url='/messages/{message_id}/feedbacks'
+  method='POST'
+  title='消息反馈（点赞）'
+  name='#feedbacks'
+/>
+<Row>
+  <Col>
+    消息终端用户反馈、点赞，方便应用开发者优化输出预期。
+
+    ### Path Params
+    <Properties>
+      <Property name='message_id' type='string' key='message_id'>
+       消息 ID
+      </Property>
+    </Properties>
+
+    ### Request Body
+
+    <Properties>
+      <Property name='rating' type='string' key='rating'>
+         点赞 like, 点踩 dislike,  撤销点赞 null
+      </Property>
+      <Property name='user' type='string' key='user'>
+          用户标识，由开发者定义规则，需保证用户标识在应用内唯一。
+      </Property>
+    </Properties>
+
+    ### Response
+    - `result` (string) 固定返回 success
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="POST" label="/messages/{message_id}/feedbacks" targetCode={`curl -X POST '${props.appDetail.api_base_url}/messages/{message_id}/feedbacks \\\n--header 'Authorization: Bearer {api_key}' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{\n    "rating": "like",\n    "user": "abc-123"\n}'`}>
+
+    ```bash {{ title: 'cURL' }}
+    curl -X POST '${props.appDetail.api_base_url}/messages/{message_id}/feedbacks' \
+    --header 'Authorization: Bearer {api_key}' \
+    --header 'Content-Type: application/json' \
+    --data-raw '{
+        "rating": "like",
+        "user": "abc-123"
+    }'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+    ```json {{ title: 'Response' }}
+    {
+      "result": "success"
+    }
+    ```
+    </CodeGroup>
+  </Col>
+</Row>
 
 ---
 
@@ -236,9 +356,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
 />
 <Row>
   <Col>
-    内容包括：
-    1. 已配置的 Input 参数，包括变量名、字段名称、类型与默认值。通常用于客户端加载后显示这些字段的表单或填入默认值。
-    2. 上传图片的配置，包括是否开启上传图片，上传图片的数量和上传方式。注意：这个配置只有使用支持多模态的模型时才会生效。
+    用于进入页面一开始，获取功能开关、输入参数名称、类型及默认值等使用。
 
     ### Query
 
@@ -247,14 +365,51 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
         用户标识，由开发者定义规则，需保证用户标识在应用内唯一。
       </Property>
     </Properties>
+
+    ### Response
+    - `opening_statement` (string) 开场白
+    - `suggested_questions` (array[string]) 开场推荐问题列表
+    - `suggested_questions_after_answer` (object) 启用回答后给出推荐问题。
+      - `enabled` (bool) 是否开启
+    - `speech_to_text` (object) 语音转文本
+      - `enabled` (bool) 是否开启
+    - `retriever_resource` (object) 引用和归属
+      - `enabled` (bool) 是否开启
+    - `annotation_reply` (object) 标记回复
+      - `enabled` (bool) 是否开启
+    - `user_input_form` (array[object]) 用户输入表单配置
+      - `text-input` (object) 文本输入控件 
+        - `label` (string) 控件展示标签名
+        - `variable` (string) 控件 ID
+        - `required` (bool) 是否必填
+        - `default` (string) 默认值
+      - `paragraph` (object) 段落文本输入控件
+        - `label` (string) 控件展示标签名
+        - `variable` (string) 控件 ID
+        - `required` (bool) 是否必填
+        - `default` (string) 默认值
+      - `select` (object) 下拉控件 
+        - `label` (string) 控件展示标签名
+        - `variable` (string) 控件 ID
+        - `required` (bool) 是否必填
+        - `default` (string) 默认值
+        - `options` (array[string]) 选项值
+    - `file_upload` (object) 文件上传配置
+      - `image` (object) 图片设置
+        当前仅支持图片类型：`png`, `jpg`, `jpeg`, `webp`, `gif`
+        - `enabled` (bool) 是否开启
+        - `number_limits` (int) 图片数量限制，默认 3
+        - `transfer_methods` (array[string]) 传递方式列表，remote_url , local_file，必选一个
+    - `system_parameters` (object) 系统参数
+      - `image_file_size_limit` (string) 图片文件上传大小限制（MB）
   </Col>
   <Col sticky>
 
-    <CodeGroup title="Request" tag="GET" label="/parameters" targetCode={`curl --location --request GET '${props.appDetail.api_base_url}/parameters?user=abc-123' \\\n--header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY'`}>
+    <CodeGroup title="Request" tag="GET" label="/parameters" targetCode={` curl -X GET '${props.appDetail.api_base_url}/parameters'\\\n--header 'Authorization: Bearer {api_key}'`}>
 
     ```bash {{ title: 'cURL' }}
-    curl --location --request GET '${props.appDetail.api_base_url}/parameters?user=abc-123' \
-    --header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY'
+    curl -X GET '${props.appDetail.api_base_url}/parameters?user=abc-123' \
+    --header 'Authorization: Bearer {api_key}'
     ```
 
     </CodeGroup>
diff --git a/web/app/components/develop/template/template_chat.en.mdx b/web/app/components/develop/template/template_chat.en.mdx
index b131f6a581..3a0171fb51 100644
--- a/web/app/components/develop/template/template_chat.en.mdx
+++ b/web/app/components/develop/template/template_chat.en.mdx
@@ -3,16 +3,21 @@ import { Row, Col, Properties, Property, Heading, SubProperty, Paragraph } from
 
 # Chat App API
 
-For versatile conversational apps using a Q&A format, call the chat-messages API to initiate dialogue. Maintain ongoing conversations by passing the returned conversation_id. Response parameters and templates depend on LangGenius Prompt Eng. settings. **[Before you start, READ This !! What is a Bearer Token](https://swagger.io/docs/specification/authentication/bearer-authentication/)**
+Chat applications support session persistence, allowing previous chat history to be used as context for responses. This can be applicable for chatbots, customer service AI, etc.
 
 <div>
+  ### Base URL 
+  <CodeGroup title="Code" targetCode={props.appDetail.api_base_url}>
+    ```javascript
+    ```
+  </CodeGroup>
+
   ### Authentication
 
-  Service API of Dify authenticates using an `API-Key`.
+  The Service API uses `API-Key` authentication.  
+  <i>**Strongly recommend storing your API Key on the server-side, not shared or stored on the client-side, to avoid possible API-Key leakage that can lead to serious consequences.**</i>
 
-  It is suggested that developers store the `API-Key` in the backend instead of sharing or storing it in the client side to avoid the leakage of the `API-Key`, which may lead to property loss.
-
-  All API requests should include your `API-Key` in the **`Authorization`** HTTP Header, as shown below:
+  For all API requests, include your API Key in the `Authorization`HTTP Header, as shown below: 
 
   <CodeGroup title="Code">
     ```javascript
@@ -27,59 +32,146 @@ For versatile conversational apps using a Q&A format, call the chat-messages API
 <Heading
   url='/chat-messages'
   method='POST'
-  title='Create chat message'
-  name='#Create-Chat-Message'
+  title='Send Chat Message'
+  name='#Send-Chat-Message'
 />
 <Row>
   <Col>
-    Create a new conversation message or continue an existing dialogue.
+    Send a request to the chat application.
 
     ### Request Body
 
     <Properties>
-      <Property name='inputs' type='object' key='inputs'>
-        (Optional) Provide user input fields as key-value pairs, corresponding to variables in Prompt Eng. Key is the variable name, Value is the parameter value. If the field type is Select, the submitted Value must be one of the preset choices.
-        <ul>
-         {!!props.variables.length && props.variables.map(
-            val => (
-                <SubProperty name={val.key} type={val.type} key={val.key}>
-                  {val.name ? `${val.name}` : ''}
-                </SubProperty>
-            )
-        )}
-        </ul>
-      </Property>
       <Property name='query' type='string' key='query'>
-        User input/question content
+        User Input/Question content
+      </Property>
+      <Property name='inputs' type='object' key='inputs'>
+          Allows the entry of various variable values defined by the App.  
+          The `inputs` parameter contains multiple key/value pairs, with each key corresponding to a specific variable and each value being the specific value for that variable.
       </Property>
       <Property name='response_mode' type='string' key='response_mode'>
-        - Blocking type, waiting for execution to complete and returning results. (Requests may be interrupted if the process is long)
-        - streaming returns. Implementation of streaming return based on SSE （**[Server-Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)**）.
-      </Property>
-      <Property name='conversation_id' type='string' key='conversation_id'>
-       (Required) Conversation ID: <strong>‼️ leave it empty for first-time (eg. conversation_id: "") conversation ‼️</strong>; pass conversation_id from context to continue dialogue.
+        The mode of response return, supporting:
+        - `streaming` Streaming mode (recommended), implements a typewriter-like output through SSE ([Server-Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)).
+        - `blocking` Blocking mode, returns result after execution is complete. (Requests may be interrupted if the process is long)  
+        Due to Cloudflare restrictions, the request will be interrupted without a return after 100 seconds.  
+        <i>Note: blocking mode is not supported in Agent Assistant mode</i>
       </Property>
       <Property name='user' type='string' key='user'>
-        The user identifier, defined by the developer, must ensure uniqueness within the app.
+          User identifier, used to define the identity of the end-user for retrieval and statistics.  
+          Should be uniquely defined by the developer within the application.
+      </Property>
+      <Property name='conversation_id' type='string' key='conversation_id'>
+      Converation ID, to continue the conversation based on previous chat records, it is necessary to pass the previous message's conversation_id.
       </Property>
       <Property name='files' type='array[object]' key='files'>
-          Uploaded files.
-          - `type` file type: currently only `image` is supported.
-          - `transfer_method` transfer method:
-            - `remote_url`: Image address.
-            - `local_file`: upload file.
-          - `upload_file_id` Upload file ID. Required when `transfer_method` is `local_file`.
-           - `url` image address. Required when `transfer_method` is `remote_url`.
+          File list, suitable for inputting files (images) combined with text understanding and answering questions, available only when the model supports Vision capability.
+          - `type` (string) Supported type: `image` (currently only supports image type)
+          - `transfer_method` (string) Transfer method, `remote_url` for image URL / `local_file` for file upload
+          - `url` (string) Image URL (when the transfer method is `remote_url`)
+          - `upload_file_id` (string) Uploaded file ID, which must be obtained by uploading through the File Upload API in advance (when the transfer method is `local_file`)
+      </Property>
+      <Property name='auto_generate_name' type='bool' key='auto_generate_name'>
+      Auto-generate title, default is `false`.
+      Can achieve async title generation by calling the conversation rename API and setting `auto_generate` to true.
       </Property>
     </Properties>
+  
+    ### Response
+    When response_mode is blocking, return a CompletionResponse object.  
+    When response_mode is streaming, return a ChunkCompletionResponse stream.
+
+    ### ChatCompletionResponse
+    Returns the complete App result, `Content-Type` is `application/json`.
+    - `message_id` (string) Unique message ID
+    - `conversation_id` (string) Conversation ID
+    - `mode` (string) App mode, fixed as `chat`
+    - `answer` (string) Complete response content
+    - `metadata` (object) Metadata
+      - `usage` (Usage) Model usage information
+      - `retriever_resources` (array[RetrieverResource]) Citation and Attribution List
+    - `created_at` (int) Message creation timestamp, e.g., 1705395332
+
+    ### ChunkChatCompletionResponse
+    Returns the stream chunks outputted by the App, `Content-Type` is `text/event-stream`.
+    Each streaming chunk starts with `data:`, separated by two newline characters `\n\n`, as shown below:
+    <CodeGroup>
+    ```streaming {{ title: 'Response' }}
+    data: {"event": "message", "task_id": "900bbd43-dc0b-4383-a372-aa6e6c414227", "id": "663c5084-a254-4040-8ad3-51f2a3c1a77c", "answer": "Hi", "created_at": 1705398420}\n\n
+    ```
+    </CodeGroup>
+    The structure of the streaming chunks varies depending on the `event`:
+    - `event: message` LLM returns text chunk event, i.e., the complete text is output in a chunked fashion.
+      - `task_id` (string) Task ID, used for request tracking and the below Stop Generate API
+      - `message_id` (string) Unique message ID
+      - `conversation_id` (string) Conversation ID
+      - `answer` (string) LLM returned text chunk content
+      - `created_at` (int) Creation timestamp, e.g., 1705395332
+    - `event: agent_message` LLM returns text chunk event, i.e., with Agent Assistant enabled, the complete text is output in a chunked fashion (Only supported in Agent mode)
+      - `task_id` (string) Task ID, used for request tracking and the below Stop Generate API
+      - `message_id` (string) Unique message ID
+      - `conversation_id` (string) Conversation ID
+      - `answer` (string) LLM returned text chunk content
+      - `created_at` (int) Creation timestamp, e.g., 1705395332
+    - `event: agent_thought` thought of Agent, contains the thought of LLM, input and output of tool calls (Only supported in Agent mode)
+      - `id` (string) Agent thought ID, every iteration has a unique agent thought ID
+      - `task_id` (string) (string) Task ID, used for request tracking and the below Stop Generate API
+      - `message_id` (string) Unique message ID
+      - `position` (int) Position of current agent thought, each message may have multiple thoughts in order.
+      - `thought` (string) What LLM is thinking about
+      - `observation` (string) Response from tool calls
+      - `tool` (string) A list of tools represents which tools are called，split by ;
+      - `tool_input` (string) Input of tools in JSON format. Like: `{"dalle3": {"prompt": "a cute cat"}}`.
+      - `created_at` (int) Creation timestamp, e.g., 1705395332
+      - `message_files` (array[string])  Refer to message_file event 
+        - `file_id` (string) File ID
+      - `conversation_id` (string) Conversation ID
+    - `event: message_file` Message file event, a new file has created by tool
+      - `id` (string) File unique ID
+      - `type` (string) File type，only allow "image" currently
+      - `belongs_to` (string) Belongs to, it will only be an 'assistant' here
+      - `url` (string) Remote url of file
+      - `conversation_id`  (string) Conversation ID
+    - `event: message_end` Message end event, receiving this event means streaming has ended.
+      - `task_id` (string) Task ID, used for request tracking and the below Stop Generate API
+      - `message_id` (string) Unique message ID
+      - `conversation_id` (string) Conversation ID
+      - `metadata` (object) Metadata
+        - `usage` (Usage) Model usage information
+        - `retriever_resources` (array[RetrieverResource]) Citation and Attribution List
+    - `event: message_replace` Message content replacement event.
+      When output content moderation is enabled, if the content is flagged, then the message content will be replaced with a preset reply through this event.
+      - `task_id` (string) Task ID, used for request tracking and the below Stop Generate API
+      - `message_id` (string) Unique message ID
+      - `conversation_id` (string) Conversation ID
+      - `answer` (string) Replacement content (directly replaces all LLM reply text)
+      - `created_at` (int) Creation timestamp, e.g., 1705395332
+    - `event: error`
+      Exceptions that occur during the streaming process will be output in the form of stream events, and reception of an error event will end the stream.
+      - `task_id` (string) Task ID, used for request tracking and the below Stop Generate API
+      - `message_id` (string) Unique message ID
+      - `status` (int) HTTP status code
+      - `code` (string) Error code
+      - `message` (string) Error message
+    - `event: ping` Ping event every 10 seconds to keep the connection alive.
+
+    ### Errors
+    - 404, Conversation does not exists
+    - 400, `invalid_param`, abnormal parameter input
+    - 400, `app_unavailable`, App configuration unavailable
+    - 400, `provider_not_initialize`, no available model credential configuration
+    - 400, `provider_quota_exceeded`, model invocation quota insufficient
+    - 400, `model_currently_not_support`, current model unavailable
+    - 400, `completion_request_error`, text generation failed
+    - 500, internal server error
+
   </Col>
   <Col sticky>
 
-    <CodeGroup title="Request" tag="POST" label="/chat-messages" targetCode={`curl --location --request POST '${props.appDetail.api_base_url}/chat-messages' \\\n--header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{\n    "inputs": ${JSON.stringify(props.inputs)},\n    "query": "eh",\n    "response_mode": "streaming",\n    "conversation_id": "",\n    "user": "abc-123"\n}'\n`}>
+    <CodeGroup title="Request" tag="POST" abel="/chat-messages" targetCode={`curl -X POST '${props.appDetail.api_base_url}/chat-messages' \\\n--header 'Authorization: Bearer {api_key}' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{\n    "inputs": ${JSON.stringify(props.inputs)},\n    "query": "What are the specs of the iPhone 13 Pro Max?",\n    "response_mode": "streaming",\n    "conversation_id": "",\n    "user": "abc-123"\n    "files": [\n      {\n        "type": "images",\n        "transfer_method": "remote_url"\n        "url": "https://cloud.dify.ai/logo/logo-site.png"\n      }\n    ]\n},'`}>
 
     ```bash {{ title: 'cURL' }}
-    curl --location --request POST '${props.appDetail.api_base_url}/chat-messages' \
-    --header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \
+    curl -X POST '${props.appDetail.api_base_url}/chat-messages' \
+    --header 'Authorization: Bearer {api_key}' \
     --header 'Content-Type: application/json' \
     --data-raw '{
         "inputs": {},
@@ -89,24 +181,186 @@ For versatile conversational apps using a Q&A format, call the chat-messages API
         "user": "abc-123"
     }'
     ```
-
     </CodeGroup>
-    ### blocking
+    ### Blocking Mode
     <CodeGroup title="Response">
     ```json {{ title: 'Response' }}
     {
-      "answer": "Hi, is there anything I can help you?",
-      "conversation_id": "45701982-8118-4bc5-8e9b-64562b4555f2",
-      "created_at": 1679587005,
-      "id": "059f87d9-15c0-473a-870c-fde95cdcc1e4"
+        "event": "message",
+        "message_id": "9da23599-e713-473b-982c-4328d4f5c78a",
+        "conversation_id": "45701982-8118-4bc5-8e9b-64562b4555f2",
+        "mode": "chat",
+        "answer": "iPhone 13 Pro Max specs are listed heere:...",
+        "metadata": {
+            "usage": {
+                "prompt_tokens": 1033,
+                "prompt_unit_price": "0.001",
+                "prompt_price_unit": "0.001",
+                "prompt_price": "0.0010330",
+                "completion_tokens": 128,
+                "completion_unit_price": "0.002",
+                "completion_price_unit": "0.001",
+                "completion_price": "0.0002560",
+                "total_tokens": 1161,
+                "total_price": "0.0012890",
+                "currency": "USD",
+                "latency": 0.7682376249867957
+            },
+            "retriever_resources": [
+                {
+                    "position": 1,
+                    "dataset_id": "101b4c97-fc2e-463c-90b1-5261a4cdcafb",
+                    "dataset_name": "iPhone",
+                    "document_id": "8dd1ad74-0b5f-4175-b735-7d98bbbb4e00",
+                    "document_name": "iPhone List",
+                    "segment_id": "ed599c7f-2766-4294-9d1d-e5235a61270a",
+                    "score": 0.98457545,
+                    "content": "\"Model\",\"Release Date\",\"Display Size\",\"Resolution\",\"Processor\",\"RAM\",\"Storage\",\"Camera\",\"Battery\",\"Operating System\"\n\"iPhone 13 Pro Max\",\"September 24, 2021\",\"6.7 inch\",\"1284 x 2778\",\"Hexa-core (2x3.23 GHz Avalanche + 4x1.82 GHz Blizzard)\",\"6 GB\",\"128, 256, 512 GB, 1TB\",\"12 MP\",\"4352 mAh\",\"iOS 15\""
+                }
+            ]
+        },
+        "created_at": 1705407629
     }
     ```
     </CodeGroup>
-    ### streaming
+    ### Streaming Mode ( Basic Assistant )
     <CodeGroup title="Response">
     ```streaming {{ title: 'Response' }}
-      data: {"id": "5ad4cb98-f0c7-4085-b384-88c403be6290", "answer": " I", "created_at": 1679586595}
-      data: {"id": "5ad4cb98-f0c7-4085-b384-88c403be6290", "answer": " I", "created_at": 1679586595}
+      data: {"event": "message", "message_id": "5ad4cb98-f0c7-4085-b384-88c403be6290", "conversation_id": "45701982-8118-4bc5-8e9b-64562b4555f2", "answer": " I", "created_at": 1679586595}
+      data: {"event": "message", "message_id": "5ad4cb98-f0c7-4085-b384-88c403be6290", "conversation_id": "45701982-8118-4bc5-8e9b-64562b4555f2", "answer": "'m", "created_at": 1679586595}
+      data: {"event": "message", "message_id": "5ad4cb98-f0c7-4085-b384-88c403be6290", "conversation_id": "45701982-8118-4bc5-8e9b-64562b4555f2", "answer": " glad", "created_at": 1679586595}
+      data: {"event": "message", "message_id": "5ad4cb98-f0c7-4085-b384-88c403be6290", "conversation_id": "45701982-8118-4bc5-8e9b-64562b4555f2", "answer": " to", "created_at": 1679586595}
+      data: {"event": "message", "message_id": : "5ad4cb98-f0c7-4085-b384-88c403be6290", "conversation_id": "45701982-8118-4bc5-8e9b-64562b4555f2", "answer": " meet", "created_at": 1679586595}
+      data: {"event": "message", "message_id": : "5ad4cb98-f0c7-4085-b384-88c403be6290", "conversation_id": "45701982-8118-4bc5-8e9b-64562b4555f2", "answer": " you", "created_at": 1679586595}
+      data: {"event": "message_end", "id": "5e52ce04-874b-4d27-9045-b3bc80def685", "conversation_id": "45701982-8118-4bc5-8e9b-64562b4555f2", "metadata": {"usage": {"prompt_tokens": 1033, "prompt_unit_price": "0.001", "prompt_price_unit": "0.001", "prompt_price": "0.0010330", "completion_tokens": 135, "completion_unit_price": "0.002", "completion_price_unit": "0.001", "completion_price": "0.0002700", "total_tokens": 1168, "total_price": "0.0013030", "currency": "USD", "latency": 1.381760165997548, "retriever_resources": [{"position": 1, "dataset_id": "101b4c97-fc2e-463c-90b1-5261a4cdcafb", "dataset_name": "iPhone", "document_id": "8dd1ad74-0b5f-4175-b735-7d98bbbb4e00", "document_name": "iPhone List", "segment_id": "ed599c7f-2766-4294-9d1d-e5235a61270a", "score": 0.98457545, "content": "\"Model\",\"Release Date\",\"Display Size\",\"Resolution\",\"Processor\",\"RAM\",\"Storage\",\"Camera\",\"Battery\",\"Operating System\"\n\"iPhone 13 Pro Max\",\"September 24, 2021\",\"6.7 inch\",\"1284 x 2778\",\"Hexa-core (2x3.23 GHz Avalanche + 4x1.82 GHz Blizzard)\",\"6 GB\",\"128, 256, 512 GB, 1TB\",\"12 MP\",\"4352 mAh\",\"iOS 15\""}]}}}
+    ```
+    </CodeGroup>
+    ### Response Example(Agent Assistant)
+    <CodeGroup title="Response">
+    ```streaming {{ title: 'Response' }}
+    data: {"event": "message", "message_id": "5ad4cb98-f0c7-4085-b384-88c403be6290", "conversation_id": "45701982-8118-4bc5-8e9b-64562b4555f2", "answer": " I", "created_at": 1679586595}
+    data: {"event": "message", "message_id": "5ad4cb98-f0c7-4085-b384-88c403be6290", "conversation_id": "45701982-8118-4bc5-8e9b-64562b4555f2", "answer": "'m", "created_at": 1679586595}
+    data: {"event": "message", "message_id": "5ad4cb98-f0c7-4085-b384-88c403be6290", "conversation_id": "45701982-8118-4bc5-8e9b-64562b4555f2", "answer": " glad", "created_at": 1679586595}
+    data: {"event": "message", "message_id": "5ad4cb98-f0c7-4085-b384-88c403be6290", "conversation_id": "45701982-8118-4bc5-8e9b-64562b4555f2", "answer": " to", "created_at": 1679586595}
+    data: {"event": "message", "message_id": : "5ad4cb98-f0c7-4085-b384-88c403be6290", "conversation_id": "45701982-8118-4bc5-8e9b-64562b4555f2", "answer": " meet", "created_at": 1679586595}
+    data: {"event": "message", "message_id": : "5ad4cb98-f0c7-4085-b384-88c403be6290", "conversation_id": "45701982-8118-4bc5-8e9b-64562b4555f2", "answer": " you", "created_at": 1679586595}
+    data: {"event": "message_end", "id": "5e52ce04-874b-4d27-9045-b3bc80def685", "conversation_id": "45701982-8118-4bc5-8e9b-64562b4555f2", "metadata": {"usage": {"prompt_tokens": 1033, "prompt_unit_price": "0.001", "prompt_price_unit": "0.001", "prompt_price": "0.0010330", "completion_tokens": 135, "completion_unit_price": "0.002", "completion_price_unit": "0.001", "completion_price": "0.0002700", "total_tokens": 1168, "total_price": "0.0013030", "currency": "USD", "latency": 1.381760165997548, "retriever_resources": [{"position": 1, "dataset_id": "101b4c97-fc2e-463c-90b1-5261a4cdcafb", "dataset_name": "iPhone", "document_id": "8dd1ad74-0b5f-4175-b735-7d98bbbb4e00", "document_name": "iPhone List", "segment_id": "ed599c7f-2766-4294-9d1d-e5235a61270a", "score": 0.98457545, "content": "\"Model\",\"Release Date\",\"Display Size\",\"Resolution\",\"Processor\",\"RAM\",\"Storage\",\"Camera\",\"Battery\",\"Operating System\"\n\"iPhone 13 Pro Max\",\"September 24, 2021\",\"6.7 inch\",\"1284 x 2778\",\"Hexa-core (2x3.23 GHz Avalanche + 4x1.82 GHz Blizzard)\",\"6 GB\",\"128, 256, 512 GB, 1TB\",\"12 MP\",\"4352 mAh\",\"iOS 15\""}]}}}
+    ```
+    </CodeGroup>
+  </Col>
+</Row>
+
+---
+<Heading
+  url='/files/upload'
+  method='POST'
+  title='File Upload'
+  name='#file-upload'
+/>
+<Row>
+  <Col>
+  Upload a file (currently only images are supported) for use when sending messages, enabling multimodal understanding of images and text.
+  Supports png, jpg, jpeg, webp, gif formats.  
+  Uploaded files are for use by the current end-user only.
+
+  ### Request Body
+  This interface requires a `multipart/form-data` request.
+  - `file` (File) Required
+    The file to be uploaded.
+  - `user` (string) Required
+    User identifier, defined by the developer's rules, must be unique within the application.
+  
+  ### Response
+  After a successful upload, the server will return the file's ID and related information.
+  - `id` (uuid) ID
+  - `name` (string) File name
+  - `size` (int) File size (bytes)
+  - `extension` (string) File extension
+  - `mime_type` (string) File mime-type
+  - `created_by` (uuid) End-user ID
+  - `created_at` (timestamp) Creation timestamp, e.g., 1705395332
+
+  ### Errors
+  - 400, `no_file_uploaded`, a file must be provided
+  - 400, `too_many_files`, currently only one file is accepted
+  - 400, `unsupported_preview`, the file does not support preview
+  - 400, `unsupported_estimate`, the file does not support estimation
+  - 413, `file_too_large`, the file is too large
+  - 415, `unsupported_file_type`, unsupported extension, currently only document files are accepted
+  - 503, `s3_connection_failed`, unable to connect to S3 service
+  - 503, `s3_permission_denied`, no permission to upload files to S3
+  - 503, `s3_file_too_large`, file exceeds S3 size limit
+  - 500, internal server error
+  
+
+  </Col>
+  <Col sticky>
+  ### Request Example
+  <CodeGroup title="Request" tag="POST" label="/files/upload" targetCode={`curl -X POST '${props.appDetail.api_base_url}/files/upload' \\\n--header 'Authorization: Bearer {api_key}' \\\n--form 'file=@localfile;type=image/[png|jpeg|jpg|webp|gif] \\\n--form 'user=abc-123'`}>
+
+    ```bash {{ title: 'cURL' }}
+    curl -X POST '${props.appDetail.api_base_url}/files/upload' \
+    --header 'Authorization: Bearer {api_key}' \
+    --form 'file=@"/path/to/file"'
+    ```
+
+    </CodeGroup>
+
+
+  ### Response Example
+  <CodeGroup title="Response">
+    ```json {{ title: 'Response' }}
+    {
+      "id": "72fa9618-8f89-4a37-9b33-7e1178a24a67",  
+      "name": "example.png",
+      "size": 1024,
+      "extension": "png",
+      "mime_type": "image/png",
+      "created_by": "6ad1ab0a-73ff-4ac1-b9e4-cdb312f71f13",  
+      "created_at": 1577836800,
+    }
+  ```
+  </CodeGroup>
+  </Col>
+</Row>
+---
+
+<Heading
+  url='/chat-messages/:task_id/stop'
+  method='POST'
+  title='Stop Generate'
+  name='#stop-generatebacks'
+/>
+<Row>
+  <Col>
+  Only supported in streaming mode.
+  ### Path
+  - `task_id` (string) Task ID, can be obtained from the streaming chunk return
+  ### Request Body
+  - `user` (string) Required
+    User identifier, used to define the identity of the end-user, must be consistent with the user passed in the send message interface.
+  Response
+  - `result` (string) Always returns "success"
+  </Col>
+  <Col sticky>
+  ### Request Example
+  <CodeGroup title="Request" tag="POST" label="/chat-messages/:task_id/stop" targetCode={`curl -X POST 'https://cloud.dify.ai/v1/chat-messages/:task_id/stop' \\\n-H 'Authorization: Bearer {api_key}' \\\n-H 'Content-Type: application/json' \\\n--data-raw '{ "user": "abc-123"}`}>
+    ```bash {{ title: 'cURL' }}
+    curl -X POST 'https://cloud.dify.ai/v1/chat-messages/:task_id/stop' \
+    -H 'Authorization: Bearer {api_key}' \  
+    -H 'Content-Type: application/json' \  
+    --data-raw '{
+        "user": "abc-123"
+    }'
+    ```
+    </CodeGroup>
+
+    ### Response Example
+    <CodeGroup title="Response">
+    ```json {{ title: 'Response' }}
+    {
+      "result": "success"
+    }
     ```
     </CodeGroup>
   </Col>
@@ -117,14 +371,14 @@ For versatile conversational apps using a Q&A format, call the chat-messages API
 <Heading
   url='/messages/{message_id}/feedbacks'
   method='POST'
-  title='Message terminal user feedback, like'
+  title='Message Feedback'
   name='#feedbacks'
 />
 <Row>
   <Col>
-    Rate received messages on behalf of end-users with likes or dislikes. This data is visible in the Logs & Annotations page and used for future model fine-tuning.
+    End-users can provide feedback messages, facilitating application developers to optimize expected outputs.
 
-    ### Path Params
+    ### Path
     <Properties>
       <Property name='message_id' type='string' key='message_id'>
        Message ID
@@ -135,20 +389,23 @@ For versatile conversational apps using a Q&A format, call the chat-messages API
 
     <Properties>
       <Property name='rating' type='string' key='rating'>
-       like or dislike, null is undo
+        Upvote as `like`, downvote as `dislike`, revoke upvote as `null`
       </Property>
       <Property name='user' type='string' key='user'>
-        The user identifier, defined by the developer, must ensure uniqueness within the app.
+        User identifier, defined by the developer's rules, must be unique within the application.
       </Property>
     </Properties>
+
+    ### Response
+    - `result` (string) Always returns "success"
   </Col>
   <Col sticky>
 
-    <CodeGroup title="Request" tag="POST" label="/messages/{message_id}/feedbacks" targetCode={`curl --location --request POST '${props.appDetail.api_base_url}/messages/{message_id}/feedbacks \\\n --header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{\n    "rating": "like",\n    "user": "abc-123"\n}'`}>
+    <CodeGroup title="Request" tag="POST" label="/messages/{message_id}/feedbacks" targetCode={`curl -X POST '${props.appDetail.api_base_url}/messages/{message_id}/feedbacks \\\n --header 'Authorization: Bearer {api_key}' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{\n    "rating": "like",\n    "user": "abc-123"\n}'`}>
 
     ```bash {{ title: 'cURL' }}
-    curl --location --request POST '${props.appDetail.api_base_url}/messages/{message_id}/feedbacks' \
-    --header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \
+    curl -X POST '${props.appDetail.api_base_url}/messages/{message_id}/feedbacks' \
+    --header 'Authorization: Bearer {api_key}' \
     --header 'Content-Type: application/json' \
     --data-raw '{
         "rating": "like",
@@ -161,70 +418,7 @@ For versatile conversational apps using a Q&A format, call the chat-messages API
     <CodeGroup title="Response">
     ```json {{ title: 'Response' }}
     {
-      "has_more": false,
-      "data": [
-        {
-          "id": "WAz8eIbvDR60rouK",
-          "conversation_id": "xgQQXg3hrtjh7AvZ",
-          "inputs": {},
-          "query": "...",
-          "answer": "...",
-          "feedback": "like",
-          "created_at": 692233200
-        },
-        {
-          "id": "hSIhXBhNe8X1d8Et"
-          // ...
-        }
-      ]
-    }
-    ```
-    </CodeGroup>
-  </Col>
-</Row>
-
----
-
-<Heading
-  url='/messages/{message_id}/suggested'
-  method='GET'
-  title='next suggested questions'
-  name='#suggested'
-/>
-<Row>
-  <Col>
-    Get next questions suggestions for the current message
-
-    ### Path Params
-
-    <Properties>
-      <Property name='message_id' type='string' key='message_id'>
-        Message ID
-      </Property>
-    </Properties>
-  </Col>
-  <Col sticky>
-
-    <CodeGroup title="Request" tag="GET" label="/messages/{message_id}/suggested" targetCode={`curl --location --request GET '${props.appDetail.api_base_url}/messages/{message_id}/suggested \\\n--header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \\\n--header 'Content-Type: application/json'`}>
-
-    ```bash {{ title: 'cURL' }}
-    curl --location --request GET '${props.appDetail.api_base_url}/messages/{message_id}/suggested' \
-    --header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \
-    --header 'Content-Type: application/json' \
-    ```
-
-    </CodeGroup>
-
-    <CodeGroup title="Response">
-    ```json {{ title: 'Response' }}
-    {
-      "result": "success",
-      "data": [
-            "a",
-            "b",
-            "c"
-        ]
-      ]
+      "result": "success"
     }
     ```
     </CodeGroup>
@@ -236,12 +430,12 @@ For versatile conversational apps using a Q&A format, call the chat-messages API
 <Heading
   url='/messages'
   method='GET'
-  title='Get the chat history message'
+  title='Get Conversation History Messages'
   name='#messages'
 />
 <Row>
   <Col>
-    The first page returns the latest `limit` bar, which is in reverse order. Load previous pages by passing the `first_id` of the last message on the current page to the `first_id` parameter of the next request.
+    Returns historical chat records in a scrolling load format, with the first page returning the latest `{limit}` messages, i.e., in reverse order.
 
     ### Query
 
@@ -249,50 +443,153 @@ For versatile conversational apps using a Q&A format, call the chat-messages API
       <Property name='conversation_id' type='string' key='conversation_id'>
         Conversation ID
       </Property>
+      <Property name='user' type='string' key='user'>
+        User identifier, used to define the identity of the end-user for retrieval and statistics.  
+        Should be uniquely defined by the developer within the application.
+      </Property>
       <Property name='first_id' type='string' key='first_id'>
-        ID of the first chat record on the current page. The default is none.
+          The ID of the first chat record on the current page, default is null.
       </Property>
       <Property name='limit' type='int' key='limit'>
-        How many chats are returned in one request
-      </Property>
-      <Property name='user' type='string' key='user'>
-        The user identifier, defined by the developer, must ensure uniqueness within the app.
+          How many chat history messages to return in one request, default is 20.
       </Property>
     </Properties>
+
+    ### Response
+    - `data` (array[object]) Message list
+    - `id` (string) Message ID
+    - `conversation_id` (string) Conversation ID
+    - `inputs` (array[object]) User input parameters.
+    - `query` (string) User input / question content.
+    - `message_files` (array[object]) Message files
+      - `id` (string) ID
+      - `type` (string) File type, image for images
+      - `url` (string) Preview image URL
+      - `belongs_to` (string) belongs to，user orassistant
+    - `agent_thoughts` (array[object]) Agent thought（Empty if it's a Basic Assistant）
+      - `id` (string) Agent thought ID, every iteration has a unique agent thought ID
+      - `message_id` (string) Unique message ID
+      - `position` (int) Position of current agent thought, each message may have multiple thoughts in order.
+      - `thought` (string) What LLM is thinking about
+      - `observation` (string) Response from tool calls
+      - `tool` (string) A list of tools represents which tools are called，split by ;
+      - `tool_input` (string) Input of tools in JSON format. Like: `{"dalle3": {"prompt": "a cute cat"}}`.
+      - `created_at` (int) Creation timestamp, e.g., 1705395332
+      - `message_files` (array[string])  Refer to message_file event 
+        - `file_id` (string) File ID
+    - `answer` (string) Response message content
+    - `created_at` (timestamp) Creation timestamp, e.g., 1705395332
+    - `feedback` (object) Feedback information
+      - `rating` (string) Upvote as `like` / Downvote as `dislike`
+    - `retriever_resources` (array[RetrieverResource]) Citation and Attribution List
+  - `has_more` (bool) Whether there is a next page
+  - `limit` (int) Number of returned items, if input exceeds system limit, returns system limit amount
+
   </Col>
   <Col sticky>
 
-    <CodeGroup title="Request" tag="GET" label="/messages" targetCode={`curl --location --request GET '${props.appDetail.api_base_url}/messages?user=abc-123&conversation_id='\\\n --header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY'`}>
+    <CodeGroup title="Request" tag="GET" label="/messages" targetCode={`curl -X GET '${props.appDetail.api_base_url}/messages?user=abc-123&conversation_id='\\\n --header 'Authorization: Bearer {api_key}'`}>
 
     ```bash {{ title: 'cURL' }}
-    curl --location --request GET '${props.appDetail.api_base_url}/messages?user=abc-123&conversation_id='
-    --header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY'
+    curl -X GET '${props.appDetail.api_base_url}/messages?user=abc-123&conversation_id='
+    --header 'Authorization: Bearer {api_key}'
     ```
 
     </CodeGroup>
-
+    ### Response Example (Basic Assistant)
     <CodeGroup title="Response">
     ```json {{ title: 'Response' }}
     {
+      "limit": 20,
       "has_more": false,
       "data": [
         {
-          "id": "WAz8eIbvDR60rouK",
-          "username": "FrankMcCallister",
-          "phone_number": "1-800-759-3000",
-          "avatar_url": "https://assets.protocol.chat/avatars/frank.jpg",
-          "display_name": null,
-          "conversation_id": "xgQQXg3hrtjh7AvZ",
-          "created_at": 692233200
-        },
-        {
-          "id": "hSIhXBhNe8X1d8Et"
-          // ...
+            "id": "a076a87f-31e5-48dc-b452-0061adbbc922",
+            "conversation_id": "cd78daf6-f9e4-4463-9ff2-54257230a0ce",
+            "inputs": {
+                "name": "dify"
+            },
+            "query": "iphone 13 pro",
+            "answer": "The iPhone 13 Pro, released on September 24, 2021, features a 6.1-inch display with a resolution of 1170 x 2532. It is equipped with a Hexa-core (2x3.23 GHz Avalanche + 4x1.82 GHz Blizzard) processor, 6 GB of RAM, and offers storage options of 128 GB, 256 GB, 512 GB, and 1 TB. The camera is 12 MP, the battery capacity is 3095 mAh, and it runs on iOS 15.",
+            "message_files": [],
+            "feedback": null,
+            "retriever_resources": [
+                {
+                    "position": 1,
+                    "dataset_id": "101b4c97-fc2e-463c-90b1-5261a4cdcafb",
+                    "dataset_name": "iPhone",
+                    "document_id": "8dd1ad74-0b5f-4175-b735-7d98bbbb4e00",
+                    "document_name": "iPhone List",
+                    "segment_id": "ed599c7f-2766-4294-9d1d-e5235a61270a",
+                    "score": 0.98457545,
+                    "content": "\"Model\",\"Release Date\",\"Display Size\",\"Resolution\",\"Processor\",\"RAM\",\"Storage\",\"Camera\",\"Battery\",\"Operating System\"\n\"iPhone 13 Pro Max\",\"September 24, 2021\",\"6.7 inch\",\"1284 x 2778\",\"Hexa-core (2x3.23 GHz Avalanche + 4x1.82 GHz Blizzard)\",\"6 GB\",\"128, 256, 512 GB, 1TB\",\"12 MP\",\"4352 mAh\",\"iOS 15\""
+                }
+            ],
+            "agent_thoughts": [],
+            "created_at": 1705569239,
         }
       ]
     }
     ```
     </CodeGroup>
+
+    ### Response Example (Agent Assistant)
+    <CodeGroup title="Response">
+    ```json {{ title: 'Response' }}
+    {
+        "limit": 20,
+        "has_more": false,
+        "data": [
+            {
+                "id": "d35e006c-7c4d-458f-9142-be4930abdf94",
+                "conversation_id": "957c068b-f258-4f89-ba10-6e8a0361c457",
+                "inputs": {},
+                "query": "draw a cat",
+                "answer": "I have generated an image of a cat for you. Please check your messages to view the image.",
+                "message_files": [
+                    {
+                        "id": "976990d2-5294-47e6-8f14-7356ba9d2d76",
+                        "type": "image",
+                        "url": "http://127.0.0.1:5001/files/tools/976990d2-5294-47e6-8f14-7356ba9d2d76.png?timestamp=1705988524&nonce=55df3f9f7311a9acd91bf074cd524092&sign=z43nMSO1L2HBvoqADLkRxr7Biz0fkjeDstnJiCK1zh8=",
+                        "belongs_to": "assistant"
+                    }
+                ],
+                "feedback": null,
+                "retriever_resources": [],
+                "created_at": 1705988187,
+                "agent_thoughts": [
+                    {
+                        "id": "592c84cf-07ee-441c-9dcc-ffc66c033469",
+                        "chain_id": null,
+                        "message_id": "d35e006c-7c4d-458f-9142-be4930abdf94",
+                        "position": 1,
+                        "thought": "",
+                        "tool": "dalle2",
+                        "tool_input": "{\"dalle2\": {\"prompt\": \"cat\"}}",
+                        "created_at": 1705988186,
+                        "observation": "image has been created and sent to user already, you should tell user to check it now.",
+                        "message_files": [
+                            "976990d2-5294-47e6-8f14-7356ba9d2d76"
+                        ]
+                    },
+                    {
+                        "id": "73ead60d-2370-4780-b5ed-532d2762b0e5",
+                        "chain_id": null,
+                        "message_id": "d35e006c-7c4d-458f-9142-be4930abdf94",
+                        "position": 2,
+                        "thought": "I have generated an image of a cat for you. Please check your messages to view the image.",
+                        "tool": "",
+                        "tool_input": "",
+                        "created_at": 1705988199,
+                        "observation": "",
+                        "message_files": []
+                    }
+                ]
+            }
+        ]
+    }
+    ```
+    </CodeGroup>
   </Col>
 </Row>
 
@@ -301,34 +598,49 @@ For versatile conversational apps using a Q&A format, call the chat-messages API
 <Heading
   url='/conversations'
   method='GET'
-  title='Get conversation list'
+  title='Get Conversations'
   name='#conversations'
 />
 <Row>
   <Col>
-    Gets the session list of the current user. By default, the last 20 sessions are returned.
+    Retrieve the conversation list for the current user, defaulting to the most recent 20 entries.
 
     ### Query
 
     <Properties>
+      <Property name='user' type='string' key='user'>
+          User identifier, used to define the identity of the end-user for retrieval and statistics.  
+          Should be uniquely defined by the developer within the application.
+      </Property>
       <Property name='last_id' type='string' key='last_id'>
-        The ID of the last record on the current page, default none.
+          The ID of the last record on the current page, default is null.
       </Property>
       <Property name='limit' type='int' key='limit'>
-        "How many chats are returned in one request
+          How many records to return in one request, default is the most recent 20 entries.
       </Property>
-      <Property name='user' type='string' key='user'>
-        The user identifier, defined by the developer, must ensure uniqueness within the app.
+      <Property name='pinned' type='bool' key='pinned'>
+        Return only pinned conversations as `true`, only non-pinned as `false`
       </Property>
     </Properties>
+
+    ### Response
+    - `data` (array[object]) List of conversations
+      - `id` (string) Conversation ID
+      - `name` (string) Conversation name, by default, is a snippet of the first question asked by the user in the conversation.
+      - `inputs` (array[object]) User input parameters.
+      - `introduction` (string) Introduction
+      - `created_at` (timestamp) Creation timestamp, e.g., 1705395332
+    - `has_more` (bool)
+    - `limit` (int) Number of entries returned, if input exceeds system limit, system limit number is returned
+
   </Col>
   <Col sticky>
 
-    <CodeGroup title="Request" tag="GET" label="/conversations" targetCode={`curl --location --request GET '${props.appDetail.api_base_url}/conversations?user=abc-123&last_id=&limit=20'`}>
+    <CodeGroup title="Request" tag="GET" label="/conversations" targetCode={`curl -X GET '${props.appDetail.api_base_url}/conversations?user=abc-123&last_id=&limit=20'`}>
 
     ```bash {{ title: 'cURL' }}
-    curl --location --request GET '${props.appDetail.api_base_url}/conversations?user=abc-123&last_id=&limit=20' \
-    --header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY'
+    curl -X GET '${props.appDetail.api_base_url}/conversations?user=abc-123&last_id=&limit=20' \
+    --header 'Authorization: Bearer {api_key}'
     ```
 
     </CodeGroup>
@@ -360,85 +672,41 @@ For versatile conversational apps using a Q&A format, call the chat-messages API
   </Col>
 </Row>
 
----
-
-<Heading
-  url='/conversations/{conversation_id}/name'
-  method='POST'
-  title='Conversation renaming'
-  name='#rename'
-/>
-<Row>
-  <Col>
-    Rename conversations; the name is displayed in multi-session client interfaces.
-
-    ### Request Body
-
-    <Properties>
-      <Property name='name' type='string' key='name'>
-        New name
-      </Property>
-      <Property name='user' type='string' key='user'>
-        The user identifier, defined by the developer, must ensure uniqueness within the app.
-      </Property>
-    </Properties>
-  </Col>
-  <Col sticky>
-
-    <CodeGroup title="Request" tag="POST" label="/conversations/{conversation_id}/name" targetCode={`curl --location --request POST '${props.appDetail.api_base_url}/conversations/name' \\\n--header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{ \n "name": "", \n "user": "abc-123"\n}'`}>
-
-    ```bash {{ title: 'cURL' }}
-    curl --location --request POST '${props.appDetail.api_base_url}/conversations/{conversation_id}/name' \
-    --header 'Content-Type: application/json' \
-    --header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \
-    --data-raw '{
-        "name": "",
-        "user": "abc-123"
-    }'
-    ```
-
-    </CodeGroup>
-
-    <CodeGroup title="Response">
-    ```json {{ title: 'Response' }}
-    {
-      "result": "success"
-    }
-    ```
-    </CodeGroup>
-  </Col>
-</Row>
-
-
 ---
 
 <Heading
   url='/conversations/{conversation_id}'
   method='DELETE'
-  title='Conversation deletion'
+  title='Delete Conversation'
   name='#delete'
 />
 <Row>
   <Col>
-    Delete conversation.
+    Delete a conversation.
+
+    ### Path
+    - `conversation_id` (string) Conversation ID
 
     ### Request Body
 
     <Properties>
       <Property name='user' type='string' key='user'>
-        The user identifier, defined by the developer, must ensure uniqueness within the app.
+        The user identifier, defined by the developer, must ensure uniqueness within the application.
       </Property>
     </Properties>
+
+    ### Response
+    - `result` (string) Always returns "success"
   </Col>
   <Col sticky>
 
-    <CodeGroup title="Request" tag="DELETE" label="/conversations/{conversation_id}" targetCode={`curl --location --request DELETE '${props.appDetail.api_base_url}/conversations/{conversation_id}' \\\n--header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{ \n "user": "abc-123"\n}'`}>
+    <CodeGroup title="Request" tag="DELETE" label="/conversations/{conversation_id}" targetCode={`curl -X DELETE '${props.appDetail.api_base_url}/conversations/{conversation_id}' \\\n--header 'Authorization: Bearer {api_key}' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{ \n "user": "abc-123"\n}'`}>
 
     ```bash {{ title: 'cURL' }}
-        curl --location --request DELETE '${props.appDetail.api_base_url}/conversations/{convsation_id}' \
+        curl -X DELETE '${props.appDetail.api_base_url}/conversations/{convsation_id}' \
         --header 'Content-Type: application/json' \
         --header 'Accept: application/json' \
-        --header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \
+        --header 'Authorization: Bearer {api_key}' \
         --data '{
             "user": "abc-123"
         }'
@@ -457,36 +725,47 @@ For versatile conversational apps using a Q&A format, call the chat-messages API
 </Row>
 
 ---
-
 <Heading
-  url='/files/upload'
+  url='/conversations/{conversation_id}/name'
   method='POST'
-  title='Upload files'
-  name='#files-upload'
+  title='Conversation Rename'
+  name='#rename'
 />
 <Row>
   <Col>
-    Upload files to the server for text generation and dialogue. Uploaded files are only available to the current end user.
-
     ### Request Body
-    The request method is `multipart/form-data`
+
     <Properties>
-      <Property name='file' type='file' key='file'>
-        The file to upload. Currently supports png, jpg, jpeg, webp, gif format files.
+      <Property name='name' type='string' key='name'>
+          The name of the conversation. This parameter can be omitted if `auto_generate` is set to `true`.
+      </Property>
+      <Property name='auto_generate' type='bool' key='auto_generate'>
+        Automatically generate the title, default is `false`
       </Property>
       <Property name='user' type='string' key='user'>
-        User ID, rules are defined by the developer, and it is necessary to ensure that the user ID is unique within the application.
+        The user identifier, defined by the developer, must ensure uniqueness within the application.
       </Property>
     </Properties>
+
+    ### Response
+    - `id` (string) Conversation ID
+    - `name` (string) Conversation name
+    - `inputs` array[object] User input parameters.
+    - `introduction` (string) Introduction
+    - `created_at` (timestamp) Creation timestamp, e.g., 1705395332
   </Col>
   <Col sticky>
 
-    <CodeGroup title="Request" tag="POST" label="/files/upload" targetCode={`curl --location --request POST '${props.appDetail.api_base_url}/files/upload' \\\n--header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \\\n--form 'file=@localfile;type=image/[png|jpeg|jpg|webp|gif] \\\n--form 'user=abc-123'`}>
+    <CodeGroup title="Request" tag="POST" label="/conversations/{conversation_id}/name" targetCode={`curl -X POST '${props.appDetail.api_base_url}/conversations/name' \\\n--header 'Authorization: Bearer {api_key}' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{ \n "name": "", \n "user": "abc-123"\n}'`}>
 
     ```bash {{ title: 'cURL' }}
-    curl --location --request POST '${props.appDetail.api_base_url}/files/upload' \
-    --header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \
-    --form 'file=@"/path/to/file"'
+    curl -X POST '${props.appDetail.api_base_url}/conversations/{conversation_id}/name' \
+    --header 'Content-Type: application/json' \
+    --header 'Authorization: Bearer {api_key}' \
+    --data-raw '{
+        "name": "",
+        "user": "abc-123"
+    }'
     ```
 
     </CodeGroup>
@@ -494,13 +773,11 @@ For versatile conversational apps using a Q&A format, call the chat-messages API
     <CodeGroup title="Response">
     ```json {{ title: 'Response' }}
     {
-      "id": "72fa9618-8f89-4a37-9b33-7e1178a24a67",  
-      "name": "example.png",
-      "size": 1024,
-      "extension": "png",
-      "mime_type": "image/png",
-      "created_by": 123,  
-      "created_at": 1577836800,
+        "id": "cd78daf6-f9e4-4463-9ff2-54257230a0ce",
+        "name": "Chat vs AI",
+        "inputs": {},
+        "introduction": "",
+        "created_at": 1705569238
     }
     ```
     </CodeGroup>
@@ -512,36 +789,44 @@ For versatile conversational apps using a Q&A format, call the chat-messages API
 <Heading
   url='/audio-to-text'
   method='POST'
-  title='speech to text'
+  title='Speech to Text'
   name='#audio'
 />
 <Row>
   <Col>
-    Speech to text, only supports openai model.
+    This endpoint requires a multipart/form-data request.
 
     ### Request Body
 
     <Properties>
       <Property name='file' type='file' key='file'>
-        Audio file.
-        File uploads are currently limited to 15 MB and the following input file types are supported: mp3, mp4, mpeg, mpga, m4a, wav, and webm.
+        Audio file.  
+        Supported formats: `['mp3', 'mp4', 'mpeg', 'mpga', 'm4a', 'wav', 'webm']`  
+        File size limit: 15MB
+      </Property>
+      <Property name='user' type='string' key='user'>
+      User identifier, defined by the developer's rules, must be unique within the application.
       </Property>
     </Properties>
+
+    ### Response
+    - `text` (string) Output text
+
   </Col>
   <Col sticky>
 
-    <CodeGroup title="Request" tag="POST" label="/audio-to-text" targetCode={`curl --location --request POST '${props.appDetail.api_base_url}/audio-to-text' \\\n--header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \\\n--form 'file=@localfile;type=audio/[mp3|mp4|mpeg|mpga|m4a|wav|webm]'`}>
+    <CodeGroup title="Request" tag="POST" label="/audio-to-text" targetCode={`curl -X POST '${props.appDetail.api_base_url}/audio-to-text' \\\n--header 'Authorization: Bearer {api_key}' \\\n--form 'file=@localfile;type=audio/[mp3|mp4|mpeg|mpga|m4a|wav|webm]'`}>
 
     ```bash {{ title: 'cURL' }}
-    curl --location --request POST '${props.appDetail.api_base_url}/conversations/name' \
-    --header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \
+    curl -X POST '${props.appDetail.api_base_url}/conversations/name' \
+    --header 'Authorization: Bearer {api_key}' \
     --form 'file=@localfile;type=audio/mp3'
     ```
 
     </CodeGroup>
 
     <CodeGroup title="Response">
-    ```json {{ title: 'Response' }}
+    ```json {{ text: 'hello' }}
     {
       "text": ""
     }
@@ -555,30 +840,66 @@ For versatile conversational apps using a Q&A format, call the chat-messages API
 <Heading
   url='/parameters'
   method='GET'
-  title='Obtain application parameter information'
-  name='#rename'
+  title='Get Application Information'
+  name='#parameters'
 />
 <Row>
   <Col>
-    Content include:
-    1. Retrieve configured Input parameters, including variable names, field names, types, and default values. Typically used for displaying these fields in a form or filling in default values after the client loads.
-    2. Configuration of uploading images, including whether to enable image uploading, the number of uploaded images and the uploading method. Note: This configuration is only available when using a model that supports multimodality.
+    Used at the start of entering the page to obtain information such as features, input parameter names, types, and default values.
 
     ### Query
 
     <Properties>
       <Property name='user' type='string' key='user'>
-        The user identifier, defined by the developer, must ensure uniqueness within the app.
+          User identifier, defined by the developer's rules, must be unique within the application.
       </Property>
     </Properties>
+
+    ### Response
+    - `opening_statement` (string) Opening statement
+    - `suggested_questions` (array[string]) List of suggested questions for the opening
+    - `suggested_questions_after_answer` (object) Suggest questions after enabling the answer.
+      - `enabled` (bool) Whether it is enabled
+    - `speech_to_text` (object) Speech to text
+      - `enabled` (bool) Whether it is enabled
+    - `retriever_resource` (object) Citation and Attribution
+      - `enabled` (bool) Whether it is enabled
+    - `annotation_reply` (object) Annotation reply
+      - `enabled` (bool) Whether it is enabled
+    - `user_input_form` (array[object]) User input form configuration
+      - `text-input` (object) Text input control
+        - `label` (string) Variable display label name
+        - `variable` (string) Variable ID
+        - `required` (bool) Whether it is required
+        - `default` (string) Default value
+      - `paragraph` (object) Paragraph text input control
+        - `label` (string) Variable display label name
+        - `variable` (string) Variable ID
+        - `required` (bool) Whether it is required
+        - `default` (string) Default value
+      - `select` (object) Dropdown control
+        - `label` (string) Variable display label name
+        - `variable` (string) Variable ID
+        - `required` (bool) Whether it is required
+        - `default` (string) Default value
+        - `options` (array[string]) Option values
+    - `file_upload` (object) File upload configuration
+      - `image` (object) Image settings
+        Currently only supports image types: `png`, `jpg`, `jpeg`, `webp`, `gif`
+        - `enabled` (bool) Whether it is enabled
+        - `number_limits` (int) Image number limit, default is 3
+        - `transfer_methods` (array[string]) List of transfer methods, remote_url, local_file, must choose one
+    - `system_parameters` (object) System parameters
+      - `image_file_size_limit` (string) Image file upload size limit (MB)
+
   </Col>
   <Col sticky>
 
-    <CodeGroup title="Request" tag="GET" label="/parameters" targetCode={` curl --location --request GET '${props.appDetail.api_base_url}/parameters?user=abc-123'`}>
+    <CodeGroup title="Request" tag="GET" label="/parameters" targetCode={` curl -X GET '${props.appDetail.api_base_url}/parameters?user=abc-123'`}>
 
     ```bash {{ title: 'cURL' }}
-    curl --location --request GET '${props.appDetail.api_base_url}/parameters?user=abc-123' \
-    --header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY'
+    curl -X GET '${props.appDetail.api_base_url}/parameters?user=abc-123' \
+    --header 'Authorization: Bearer {api_key}'
     ```
 
     </CodeGroup>
@@ -586,33 +907,97 @@ For versatile conversational apps using a Q&A format, call the chat-messages API
     <CodeGroup title="Response">
     ```json {{ title: 'Response' }}
     {
-      "introduction": "nice to meet you",
+      "opening_statement": "Hello!",
+      "suggested_questions_after_answer": {
+          "enabled": true
+      },
+      "speech_to_text": {
+          "enabled": true
+      },
+      "retriever_resource": {
+          "enabled": true
+      },
+      "annotation_reply": {
+          "enabled": true
+      },
       "user_input_form": [
-        {
-          "text-input": {
-            "label": "a",
-            "variable": "a",
-            "required": true,
-            "max_length": 48,
-            "default": ""
+          {
+              "paragraph": {
+                  "label": "Query",
+                  "variable": "query",
+                  "required": true,
+                  "default": ""
+              }
           }
-        }
-        {
-          // ...
-        }
       ],
       "file_upload": {
-        "image": {
-          "enabled": true,
-          "number_limits": 3,
-          "transfer_methods": [
-            "remote_url",
-            "local_file"
-          ]
-        }
+          "image": {
+              "enabled": false,
+              "number_limits": 3,
+              "detail": "high",
+              "transfer_methods": [
+                  "remote_url",
+                  "local_file"
+              ]
+          }
+      },
+      "system_parameters": {
+          "image_file_size_limit": "10"
       }
     }
     ```
     </CodeGroup>
   </Col>
 </Row>
+---
+
+<Heading
+  url='/meta'
+  method='GET'
+  title='Get Application Meta Information'
+  name='#meta'
+/>
+<Row>
+  <Col>
+  Used to get icons of tools in this application
+  ### Query
+    <Properties>
+
+   <Property name='user' type='string' key='user'>
+        User identifier, defined by the developer's rules, must be unique within the application.
+    </Property>
+      </Properties>
+  ### Response
+  - `tool_icons`(object[string]) tool icons
+    - `tool_name` (string) 
+      - `icon` (object|string)
+        - (object) icon object
+          - `background` (string) background color in hex format
+          - `content`(string) emoji
+        - (string) url of icon
+  </Col>
+  <Col>
+  <CodeGroup title="Request" tag="POST" label="/meta" targetCode={`curl -X GET 'https://cloud.dify.ai/v1/meta?user=abc-123' \\\n-H 'Authorization: Bearer {api_key}'`}>
+    ```bash {{ title: 'cURL' }}
+    curl -X GET 'https://cloud.dify.ai/v1/meta?user=abc-123' \
+    -H 'Authorization: Bearer {api_key}'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+    ```json {{ title: 'Response' }}
+    {
+    "tool_icons": {
+        "dalle2": "https://cloud.dify.ai/console/api/workspaces/current/tool-provider/builtin/dalle/icon",
+        "api_tool": {
+            "background": "#252525",
+            "content": "\ud83d\ude01"
+        }
+    }
+  }
+    ```
+    </CodeGroup>
+  </Col>
+</Row>
+
diff --git a/web/app/components/develop/template/template_chat.zh.mdx b/web/app/components/develop/template/template_chat.zh.mdx
index 538ff64553..9c4e3c7c3c 100644
--- a/web/app/components/develop/template/template_chat.zh.mdx
+++ b/web/app/components/develop/template/template_chat.zh.mdx
@@ -3,21 +3,24 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
 
 # 对话型应用 API
 
-可用于大部分场景的对话型应用，采用一问一答模式与用户持续对话。要开始一个对话请调用 chat-messages 接口，通过继续传入返回的 conversation_id 可持续保持该会话。**[开始前请阅读 !! 什么是 Bearer Token ？](https://swagger.io/docs/specification/authentication/bearer-authentication/)**
+对话应用支持会话持久化，可将之前的聊天记录作为上下进行回答，可适用于聊天/客服 AI 等。
 
 <div>
+  ### 基础 URL
+  <CodeGroup title="Code" targetCode={props.appDetail.api_base_url}>
+    ```javascript
+    ```
+  </CodeGroup>
+
   ### 鉴权
 
-  Dify Service API 使用 `API-Key` 进行鉴权。
-
-  建议开发者把 `API-Key` 放在后端存储，而非分享或者放在客户端存储，以免 `API-Key` 泄露，导致财产损失。
-
+  Service API 使用 `API-Key` 进行鉴权。  
+  <i>**强烈建议开发者把 `API-Key` 放在后端存储，而非分享或者放在客户端存储，以免 `API-Key` 泄露，导致财产损失。**</i>    
   所有 API 请求都应在 **`Authorization`** HTTP Header 中包含您的 `API-Key`，如下所示：
 
   <CodeGroup title="Code">
     ```javascript
       Authorization: Bearer {API_KEY}
-
     ```
   </CodeGroup>
 </div>
@@ -32,86 +35,352 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
 />
 <Row>
   <Col>
-    创建会话消息，或基于此前的对话继续发送消息。
+    创建会话消息。
 
     ### Request Body
 
     <Properties>
-      <Property name='inputs' type='object' key='inputs'>
-        （选填）以键值对方式提供用户输入字段，与提示词编排中的变量对应。Key 为变量名称，Value 是参数值。如果字段类型为 Select，传入的 Value 需为预设选项之一。
-        <ul>
-         {!!props.variables.length && props.variables.map(
-            val => (
-                <SubProperty name={val.key} type={val.type} key={val.key}>
-                  {val.name ? `${val.name}` : ''}
-                </SubProperty>
-            )
-        )}
-        </ul>
-      </Property>
       <Property name='query' type='string' key='query'>
-        用户输入/提问内容
+        用户输入/提问内容。
+      </Property>
+      <Property name='inputs' type='object' key='inputs'>
+        (选填)允许传入 App 定义的各变量值。  
+        inputs 参数包含了多组键值对（Key/Value pairs），每组的键对应一个特定变量，每组的值则是该变量的具体值。
+
       </Property>
       <Property name='response_mode' type='string' key='response_mode'>
-        - blocking 阻塞型，等待执行完毕后返回结果。（请求若流程较长可能会被中断）
-        - streaming 流式返回。基于 SSE（**[Server-Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)**）实现流式返回。
-      </Property>
-      <Property name='conversation_id' type='string' key='conversation_id'>
-      （必填）<strong>‼️ 会话标识符，首次对话为 conversation_id: "" ‼️</strong>，如果要继续对话请传入上下文返回的 conversation_id
+        - `streaming` 流式模式（推荐）。基于 SSE（**[Server-Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)**）实现类似打字机输出方式的流式返回。
+        - `blocking` 阻塞模式，等待执行完毕后返回结果。（请求若流程较长可能会被中断）。  
+        <i>由于 Cloudflare 限制，请求会在 100 秒超时无返回后中断。</i>  
+        注：Agent模式下不允许blocking。
       </Property>
       <Property name='user' type='string' key='user'>
-        用户标识，由开发者定义规则，需保证用户标识在应用内唯一。
+        用户标识，用于定义终端用户的身份，方便检索、统计。
+        由开发者定义规则，需保证用户标识在应用内唯一。
+      </Property>
+      <Property name='conversation_id' type='string' key='conversation_id'>
+      （选填）会话 ID，需要基于之前的聊天记录继续对话，必须传之前消息的 conversation_id。
       </Property>
       <Property name='files' type='array[object]' key='files'>
           上传的文件。
-          - `type` 文件类型:目前仅支持 `image`。
-          - `transfer_method` 传递方式:
+          - `type` (string) 支持类型：图片 `image`（目前仅支持图片格式） 。
+          - `transfer_method` (string)  传递方式:
             - `remote_url`: 图片地址。
             - `local_file`: 上传文件。
-          - `upload_file_id` 上传文件 ID。`transfer_method` 为 `local_file` 时必填。
-          - `url` 图片地址。`transfer_method` 为 `remote_url` 时必填。
+          - `url` 图片地址。（仅当传递方式为 `remote_url` 时）。
+          - `upload_file_id` 上传文件 ID。（仅当传递方式为 `local_file `时）。
       </Property>
+      <Property name='auto_generate_name' type='bool' key='auto_generate_name'>
+      （选填）自动生成标题，默认 `false`。 可通过调用会话重命名接口并设置 `auto_generate` 为 `true` 实现异步生成标题。
+      </Property>
+    </Properties>
+
+    ### Response
+    <Properties>
+    当 `response_mode` 为 `blocking` 时，返回 ChatCompletionResponse object。  
+    当 `response_mode` 为 `streaming`时，返回 ChunkChatCompletionResponse object 流式序列。
+    
+    ### ChatCompletionResponse
+
+    返回完整的 App 结果，`Content-Type` 为 `application/json`。
+    - `message_id` (string) 消息唯一 ID
+    - `conversation_id` (string) 会话 ID
+    - `mode` (string) App 模式，固定为 chat
+    - `answer` (string) 完整回复内容
+    - `metadata` (object) 元数据
+      - `usage` (Usage) 模型用量信息
+      - `retriever_resources` (array[RetrieverResource]) 引用和归属分段列表
+    - `created_at` (int) 消息创建时间戳，如：1705395332
+
+    ### ChunkChatCompletionResponse
+    返回 App 输出的流式块，`Content-Type` 为 `text/event-stream`。
+    每个流式块均为 data: 开头，块之间以 \n\n 即两个换行符分隔，如下所示：
+    <CodeGroup>
+    ```streaming {{ title: 'Response' }}
+    data: {"event": "message", "task_id": "900bbd43-dc0b-4383-a372-aa6e6c414227", "id": "663c5084-a254-4040-8ad3-51f2a3c1a77c", "answer": "Hi", "created_at": 1705398420}\n\n
+    ```
+    </CodeGroup>
+
+    流式块中根据 event 不同，结构也不同：
+    - `event: message` LLM 返回文本块事件，即：完整的文本以分块的方式输出。
+      - `task_id` (string) 任务 ID，用于请求跟踪和下方的停止响应接口
+      - `message_id` (string) 消息唯一 ID
+      - `conversation_id` (string) 会话 ID
+      - `answer` (string) LLM 返回文本块内容
+      - `created_at` (int) 创建时间戳，如：1705395332
+    - `event: agent_message` Agent模式下返回文本块事件，即：在Agent模式下，文章的文本以分块的方式输出（仅Agent模式下使用）
+      - `task_id` (string) 任务 ID，用于请求跟踪和下方的停止响应接口
+      - `message_id` (string) 消息唯一 ID
+      - `conversation_id` (string) 会话 ID
+      - `answer` (string) LLM 返回文本块内容
+      - `created_at` (int) 创建时间戳，如：1705395332
+    - `event: agent_thought` Agent模式下有关Agent思考步骤的相关内容，涉及到工具调用（仅Agent模式下使用）
+      - `id` (string) agent_thought ID，每一轮Agent迭代都会有一个唯一的id
+      - `task_id` (string) 任务ID，用于请求跟踪下方的停止响应接口
+      - `message_id` (string) 消息唯一ID
+      - `position` (int) agent_thought在消息中的位置，如第一轮迭代position为1
+      - `thought` (string) agent的思考内容
+      - `observation` (string) 工具调用的返回结果
+      - `tool` (string) 使用的工具列表，以 ; 分割多个工具
+      - `tool_input` (string) 工具的输入，JSON格式的字符串(object)。如：`{"dalle3": {"prompt": "a cute cat"}}`
+      - `created_at` (int) 创建时间戳，如：1705395332
+      - `message_files` (array[string])  当前 `agent_thought` 关联的文件ID
+        - `file_id` (string) 文件ID
+      - `conversation_id` (string) 会话ID
+    - `event: message_file` 文件事件，表示有新文件需要展示
+      - `id` (string) 文件唯一ID
+      - `type` (string) 文件类型，目前仅为image
+      - `belongs_to` (string) 文件归属，user或assistant，该接口返回仅为 `assistant`
+      - `url` (string) 文件访问地址
+      - `conversation_id`  (string) 会话ID
+    - `event: message_end` 消息结束事件，收到此事件则代表流式返回结束。
+      - `task_id` (string) 任务 ID，用于请求跟踪和下方的停止响应接口
+      - `message_id` (string) 消息唯一 ID
+      - `conversation_id` (string) 会话 ID
+      - `metadata` (object) 元数据
+        - `usage` (Usage) 模型用量信息
+        - `retriever_resources` (array[RetrieverResource]) 引用和归属分段列表
+    - `event: message_replace` 消息内容替换事件。
+      开启内容审查和审查输出内容时，若命中了审查条件，则会通过此事件替换消息内容为预设回复。
+      - `task_id` (string) 任务 ID，用于请求跟踪和下方的停止响应接口
+      - `message_id` (string) 消息唯一 ID
+      - `conversation_id` (string) 会话 ID
+      - `answer` (string) 替换内容（直接替换 LLM 所有回复文本）
+      - `created_at` (int) 创建时间戳，如：1705395332
+    - `event: error` 
+      流式输出过程中出现的异常会以 stream event 形式输出，收到异常事件后即结束。
+      - `task_id` (string) 任务 ID，用于请求跟踪和下方的停止响应接口
+      - `message_id` (string) 消息唯一 ID
+      - `status` (int) HTTP 状态码
+      - `code` (string) 错误码
+      - `message` (string) 错误消息
+    - `event: ping` 每 10s 一次的 ping 事件，保持连接存活。
+
+    ### Errors
+    - 404，对话不存在
+    - 400，`invalid_param`，传入参数异常
+    - 400，`app_unavailable`，App 配置不可用
+    - 400，`provider_not_initialize`，无可用模型凭据配置
+    - 400，`provider_quota_exceeded`，模型调用额度不足
+    - 400，`model_currently_not_support`，当前模型不可用
+    - 400，`completion_request_error`，文本生成失败
+    - 500，服务内部异常
+
     </Properties>
   </Col>
   <Col sticky>
 
-    <CodeGroup title="Request" tag="POST" label="/chat-messages" targetCode={`curl --location --request POST '${props.appDetail.api_base_url}/chat-messages' \\\n--header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{\n    "inputs": ${JSON.stringify(props.inputs)},\n    "query": "eh",\n    "response_mode": "streaming",\n    "conversation_id": "",\n    "user": "abc-123"\n}'\n`}>
+    <CodeGroup title="Request" tag="POST" label="/chat-messages" targetCode={`curl -X POST '${props.appDetail.api_base_url}/chat-messages' \\\n--header 'Authorization: Bearer {api_key}' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{\n    "inputs": ${JSON.stringify(props.inputs)},\n    "query": "What are the specs of the iPhone 13 Pro Max?",\n    "response_mode": "streaming",\n    "conversation_id": "",\n    "user": "abc-123"\n    "files": [\n      {\n        "type": "images",\n        "transfer_method": "remote_url"\n        "url": "https://cloud.dify.ai/logo/logo-site.png"\n      }\n    ]\n},'`}>
 
     ```bash {{ title: 'cURL' }}
-    curl --location --request POST '${props.appDetail.api_base_url}/chat-messages' \
-    --header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \
-    --header 'Content-Type: application/json' \
+    curl -X POST '${props.appDetail.api_base_url}/chat-messages' \
+    -H 'Authorization: Bearer {api_key}' \
+    -H 'Content-Type: application/json' \
     --data-raw '{
-        "inputs": {},
-        "query": "eh",
+        "inputs": {
+            "name": "dify"
+        },
+        "query": "What are the specs of the iPhone 13 Pro Max?",
+        "conversation_id": "101b4c97-fc2e-463c-90b1-5261a4cdcafb",
         "response_mode": "streaming",
-        "conversation_id": "",
-        "user": "abc-123"
+        "user": "abc-123",
+        "files": [
+          {
+            "type": "image",
+            "transfer_method": "remote_url",
+            "url": "https://cloud.dify.ai/logo/logo-site.png"
+          }
+        ]
     }'
     ```
 
     </CodeGroup>
-    ### blocking
+    ### 阻塞模式
     <CodeGroup title="Response">
     ```json {{ title: 'Response' }}
     {
-      "answer": "Hi, is there anything I can help you?",
-      "conversation_id": "45701982-8118-4bc5-8e9b-64562b4555f2",
-      "created_at": 1679587005,
-      "id": "059f87d9-15c0-473a-870c-fde95cdcc1e4"
+        "event": "message",
+        "message_id": "9da23599-e713-473b-982c-4328d4f5c78a",
+        "conversation_id": "45701982-8118-4bc5-8e9b-64562b4555f2",
+        "mode": "chat",
+        "answer": "iPhone 13 Pro Max specs are listed heere:...",
+        "metadata": {
+            "usage": {
+                "prompt_tokens": 1033,
+                "prompt_unit_price": "0.001",
+                "prompt_price_unit": "0.001",
+                "prompt_price": "0.0010330",
+                "completion_tokens": 128,
+                "completion_unit_price": "0.002",
+                "completion_price_unit": "0.001",
+                "completion_price": "0.0002560",
+                "total_tokens": 1161,
+                "total_price": "0.0012890",
+                "currency": "USD",
+                "latency": 0.7682376249867957
+            },
+            "retriever_resources": [
+                {
+                    "position": 1,
+                    "dataset_id": "101b4c97-fc2e-463c-90b1-5261a4cdcafb",
+                    "dataset_name": "iPhone",
+                    "document_id": "8dd1ad74-0b5f-4175-b735-7d98bbbb4e00",
+                    "document_name": "iPhone List",
+                    "segment_id": "ed599c7f-2766-4294-9d1d-e5235a61270a",
+                    "score": 0.98457545,
+                    "content": "\"Model\",\"Release Date\",\"Display Size\",\"Resolution\",\"Processor\",\"RAM\",\"Storage\",\"Camera\",\"Battery\",\"Operating System\"\n\"iPhone 13 Pro Max\",\"September 24, 2021\",\"6.7 inch\",\"1284 x 2778\",\"Hexa-core (2x3.23 GHz Avalanche + 4x1.82 GHz Blizzard)\",\"6 GB\",\"128, 256, 512 GB, 1TB\",\"12 MP\",\"4352 mAh\",\"iOS 15\""
+                }
+            ]
+        },
+        "created_at": 1705407629
     }
     ```
     </CodeGroup>
-    ### streaming
+    ### 流式模式（基础助手）
     <CodeGroup title="Response">
     ```streaming {{ title: 'Response' }}
-      data: {"id": "5ad4cb98-f0c7-4085-b384-88c403be6290", "answer": " I", "created_at": 1679586595}
-      data: {"id": "5ad4cb98-f0c7-4085-b384-88c403be6290", "answer": " I", "created_at": 1679586595}
+      data: {"event": "message", "message_id": "5ad4cb98-f0c7-4085-b384-88c403be6290", "conversation_id": "45701982-8118-4bc5-8e9b-64562b4555f2", "answer": " I", "created_at": 1679586595}
+      data: {"event": "message", "message_id": "5ad4cb98-f0c7-4085-b384-88c403be6290", "conversation_id": "45701982-8118-4bc5-8e9b-64562b4555f2", "answer": "'m", "created_at": 1679586595}
+      data: {"event": "message", "message_id": "5ad4cb98-f0c7-4085-b384-88c403be6290", "conversation_id": "45701982-8118-4bc5-8e9b-64562b4555f2", "answer": " glad", "created_at": 1679586595}
+      data: {"event": "message", "message_id": "5ad4cb98-f0c7-4085-b384-88c403be6290", "conversation_id": "45701982-8118-4bc5-8e9b-64562b4555f2", "answer": " to", "created_at": 1679586595}
+      data: {"event": "message", "message_id": : "5ad4cb98-f0c7-4085-b384-88c403be6290", "conversation_id": "45701982-8118-4bc5-8e9b-64562b4555f2", "answer": " meet", "created_at": 1679586595}
+      data: {"event": "message", "message_id": : "5ad4cb98-f0c7-4085-b384-88c403be6290", "conversation_id": "45701982-8118-4bc5-8e9b-64562b4555f2", "answer": " you", "created_at": 1679586595}
+      data: {"event": "message_end", "id": "5e52ce04-874b-4d27-9045-b3bc80def685", "conversation_id": "45701982-8118-4bc5-8e9b-64562b4555f2", "metadata": {"usage": {"prompt_tokens": 1033, "prompt_unit_price": "0.001", "prompt_price_unit": "0.001", "prompt_price": "0.0010330", "completion_tokens": 135, "completion_unit_price": "0.002", "completion_price_unit": "0.001", "completion_price": "0.0002700", "total_tokens": 1168, "total_price": "0.0013030", "currency": "USD", "latency": 1.381760165997548, "retriever_resources": [{"position": 1, "dataset_id": "101b4c97-fc2e-463c-90b1-5261a4cdcafb", "dataset_name": "iPhone", "document_id": "8dd1ad74-0b5f-4175-b735-7d98bbbb4e00", "document_name": "iPhone List", "segment_id": "ed599c7f-2766-4294-9d1d-e5235a61270a", "score": 0.98457545, "content": "\"Model\",\"Release Date\",\"Display Size\",\"Resolution\",\"Processor\",\"RAM\",\"Storage\",\"Camera\",\"Battery\",\"Operating System\"\n\"iPhone 13 Pro Max\",\"September 24, 2021\",\"6.7 inch\",\"1284 x 2778\",\"Hexa-core (2x3.23 GHz Avalanche + 4x1.82 GHz Blizzard)\",\"6 GB\",\"128, 256, 512 GB, 1TB\",\"12 MP\",\"4352 mAh\",\"iOS 15\""}]}}}
+    ```
+    </CodeGroup>
+
+    ### 流式模式（智能助手）
+    <CodeGroup title="Response">
+    ```streaming {{ title: 'Response' }}
+      data: {"event": "agent_thought", "id": "8dcf3648-fbad-407a-85dd-73a6f43aeb9f", "task_id": "9cf1ddd7-f94b-459b-b942-b77b26c59e9b", "message_id": "1fb10045-55fd-4040-99e6-d048d07cbad3", "position": 1, "thought": "", "observation": "", "tool": "", "tool_input": "", "created_at": 1705639511, "message_files": [], "conversation_id": "c216c595-2d89-438c-b33c-aae5ddddd142"}
+      data: {"event": "agent_thought", "id": "8dcf3648-fbad-407a-85dd-73a6f43aeb9f", "task_id": "9cf1ddd7-f94b-459b-b942-b77b26c59e9b", "message_id": "1fb10045-55fd-4040-99e6-d048d07cbad3", "position": 1, "thought": "", "observation": "", "tool": "dalle3", "tool_input": "{\"dalle3\": {\"prompt\": \"cute Japanese anime girl with white hair, blue eyes, bunny girl suit\"}}", "created_at": 1705639511, "message_files": [], "conversation_id": "c216c595-2d89-438c-b33c-aae5ddddd142"}
+      data: {"event": "message_file", "id": "d75b7a5c-ce5e-442e-ab1b-d6a5e5b557b0", "type": "image", "belongs_to": "assistant", "url": "http://127.0.0.1:5001/files/tools/d75b7a5c-ce5e-442e-ab1b-d6a5e5b557b0.png?timestamp=1705639526&nonce=70423256c60da73a9c96d1385ff78487&sign=7B5fKV9890YJuqchQvrABvW4AIupDvDvxGdu1EOJT94=", "conversation_id": "c216c595-2d89-438c-b33c-aae5ddddd142"}
+      data: {"event": "agent_thought", "id": "8dcf3648-fbad-407a-85dd-73a6f43aeb9f", "task_id": "9cf1ddd7-f94b-459b-b942-b77b26c59e9b", "message_id": "1fb10045-55fd-4040-99e6-d048d07cbad3", "position": 1, "thought": "", "observation": "image has been created and sent to user already, you should tell user to check it now.", "tool": "dalle3", "tool_input": "{\"dalle3\": {\"prompt\": \"cute Japanese anime girl with white hair, blue eyes, bunny girl suit\"}}", "created_at": 1705639511, "message_files": ["d75b7a5c-ce5e-442e-ab1b-d6a5e5b557b0"], "conversation_id": "c216c595-2d89-438c-b33c-aae5ddddd142"}
+      data: {"event": "agent_thought", "id": "67a99dc1-4f82-42d3-b354-18d4594840c8", "task_id": "9cf1ddd7-f94b-459b-b942-b77b26c59e9b", "message_id": "1fb10045-55fd-4040-99e6-d048d07cbad3", "position": 2, "thought": "", "observation": "", "tool": "", "tool_input": "", "created_at": 1705639511, "message_files": [], "conversation_id": "c216c595-2d89-438c-b33c-aae5ddddd142"}
+      data: {"event": "agent_message", "id": "1fb10045-55fd-4040-99e6-d048d07cbad3", "task_id": "9cf1ddd7-f94b-459b-b942-b77b26c59e9b", "message_id": "1fb10045-55fd-4040-99e6-d048d07cbad3", "answer": "I have created an image of a cute Japanese", "created_at": 1705639511, "conversation_id": "c216c595-2d89-438c-b33c-aae5ddddd142"}
+      data: {"event": "agent_message", "id": "1fb10045-55fd-4040-99e6-d048d07cbad3", "task_id": "9cf1ddd7-f94b-459b-b942-b77b26c59e9b", "message_id": "1fb10045-55fd-4040-99e6-d048d07cbad3", "answer": " anime girl with white hair and blue", "created_at": 1705639511, "conversation_id": "c216c595-2d89-438c-b33c-aae5ddddd142"}
+      data: {"event": "agent_message", "id": "1fb10045-55fd-4040-99e6-d048d07cbad3", "task_id": "9cf1ddd7-f94b-459b-b942-b77b26c59e9b", "message_id": "1fb10045-55fd-4040-99e6-d048d07cbad3", "answer": " eyes wearing a bunny girl" ,"created_at": 1705639511, "conversation_id": "c216c595-2d89-438c-b33c-aae5ddddd142"}
+      data: {"event": "agent_message", "id": "1fb10045-55fd-4040-99e6-d048d07cbad3", "task_id": "9cf1ddd7-f94b-459b-b942-b77b26c59e9b", "message_id": "1fb10045-55fd-4040-99e6-d048d07cbad3", "answer": " suit .", "created_at": 1705639511, "conversation_id": "c216c595-2d89-438c-b33c-aae5ddddd142"}
+      data: {"event": "agent_thought", "id": "67a99dc1-4f82-42d3-b354-18d4594840c8", "task_id": "9cf1ddd7-f94b-459b-b942-b77b26c59e9b", "message_id": "1fb10045-55fd-4040-99e6-d048d07cbad3", "position": 2, "thought": "I have created an image of a cute Japanese anime girl with white hair and blue eyes wearing a bunny girl suit.", "observation": "", "tool": "", "tool_input": "", "created_at": 1705639511, "message_files": [], "conversation_id": "c216c595-2d89-438c-b33c-aae5ddddd142"}
+      data: {"event": "message_end", "task_id": "9cf1ddd7-f94b-459b-b942-b77b26c59e9b", "id": "1fb10045-55fd-4040-99e6-d048d07cbad3", "message_id": "1fb10045-55fd-4040-99e6-d048d07cbad3", "conversation_id": "c216c595-2d89-438c-b33c-aae5ddddd142", "metadata": {"usage": {"prompt_tokens": 305, "prompt_unit_price": "0.001", "prompt_price_unit": "0.001", "prompt_price": "0.0003050", "completion_tokens": 97, "completion_unit_price": "0.002", "completion_price_unit": "0.001", "completion_price": "0.0001940", "total_tokens": 184, "total_price": "0.0002290", "currency": "USD", "latency": 1.771092874929309}}}
     ```
     </CodeGroup>
   </Col>
 </Row>
 
+---
+<Heading
+  url='/files/upload'
+  method='POST'
+  title='上传文件'
+  name='#files-upload'
+/>
+<Row>
+  <Col>
+    上传文件（目前仅支持图片）并在发送消息时使用，可实现图文多模态理解。
+    支持 png, jpg, jpeg, webp, gif 格式。  
+    <i>上传的文件仅供当前终端用户使用。</i>
+
+    ### Request Body
+    该接口需使用  `multipart/form-data` 进行请求。
+    <Properties>
+      <Property name='file' type='file' key='file'>
+        要上传的文件。
+      </Property>
+      <Property name='user' type='string' key='user'>
+          用户标识，用于定义终端用户的身份，必须和发送消息接口传入 user 保持一致。
+      </Property>
+    </Properties>
+
+    ### Response
+    成功上传后，服务器会返回文件的 ID 和相关信息。
+    - `id` (uuid) ID
+    - `name` (string) 文件名
+    - `size` (int) 文件大小（byte）
+    - `extension` (string) 文件后缀
+    - `mime_type` (string) 文件 mime-type
+    - `created_by` (uuid) 上传人 ID
+    - `created_at` (timestamp) 上传时间
+
+    ### Errors
+    - 400，`no_file_uploaded`，必须提供文件
+    - 400，`too_many_files`，目前只接受一个文件
+    - 400，`unsupported_preview`，该文件不支持预览
+    - 400，`unsupported_estimate`，该文件不支持估算
+    - 413，`file_too_large`，文件太大
+    - 415，`unsupported_file_type`，不支持的扩展名，当前只接受文档类文件
+    - 503，`s3_connection_failed`，无法连接到 S3 服务
+    - 503，`s3_permission_denied`，无权限上传文件到 S3
+    - 503，`s3_file_too_large`，文件超出 S3 大小限制
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="POST" label="/files/upload" targetCode={`curl -X POST '${props.appDetail.api_base_url}/files/upload' \\\n--header 'Authorization: Bearer {api_key}' \\\n--form 'file=@localfile;type=image/[png|jpeg|jpg|webp|gif] \\\n--form 'user=abc-123'`}>
+
+    ```bash {{ title: 'cURL' }}
+    curl -X POST '${props.appDetail.api_base_url}/files/upload' \
+    --header 'Authorization: Bearer {api_key}' \
+    --form 'file=@"/path/to/file"'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+    ```json {{ title: 'Response' }}
+    {
+      "id": "72fa9618-8f89-4a37-9b33-7e1178a24a67",  
+      "name": "example.png",
+      "size": 1024,
+      "extension": "png",
+      "mime_type": "image/png",
+      "created_by": 123,  
+      "created_at": 1577836800,
+    }
+    ```
+    </CodeGroup>
+  </Col>
+</Row>
+---
+<Heading
+  url='/chat-messages/{task_id}/stop'
+  method='POST'
+  title='停止响应'
+  name='#Stop'
+/>
+<Row>
+  <Col>
+  仅支持流式模式。
+  ### Path
+  - `task_id` (string) 任务 ID，可在流式返回 Chunk 中获取
+  
+  ### Request Body
+  - `user` (string) Required
+    用户标识，用于定义终端用户的身份，必须和发送消息接口传入 user 保持一致。
+  ### Response
+  - `result` (string) 固定返回 success
+  </Col>
+  <Col sticky>
+  <CodeGroup title="Request" tag="POST" label="/chat-messages/:task_id/stop" targetCode={`curl -X POST 'https://cloud.dify.ai/v1/chat-messages/:task_id/stop' \\\n-H 'Authorization: Bearer {api_key}' \\\n-H 'Content-Type: application/json' \\\n--data-raw '{ "user": "abc-123"}`}>
+    ```bash {{ title: 'cURL' }}
+    curl -X POST 'https://cloud.dify.ai/v1/chat-messages/:task_id/stop' \
+    -H 'Authorization: Bearer {api_key}' \
+    -H 'Content-Type: application/json' \
+    --data-raw '{
+        "user": "abc-123"
+    }'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+    ```json {{ title: 'Response' }}
+    {
+      "result": "success"
+    }
+    ```
+    </CodeGroup>
+  </Col>
+</Row>
 ---
 
 <Heading
@@ -122,7 +391,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
 />
 <Row>
   <Col>
-    代表最终用户对返回消息进行评价，可以点赞与点踩，该数据将在“日志与标注”页中可见，并用于后续的模型微调。
+    消息终端用户反馈、点赞，方便应用开发者优化输出预期。
 
     ### Path Params
     <Properties>
@@ -135,20 +404,23 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
 
     <Properties>
       <Property name='rating' type='string' key='rating'>
-       like 或 dislike， 空值为撤销
+         点赞 like, 点踩 dislike,  撤销点赞 null
       </Property>
       <Property name='user' type='string' key='user'>
-        用户标识，由开发者定义规则，需保证用户标识在应用内唯一。
+          用户标识，由开发者定义规则，需保证用户标识在应用内唯一。
       </Property>
     </Properties>
+
+    ### Response
+    - `result` (string) 固定返回 success
   </Col>
   <Col sticky>
 
-    <CodeGroup title="Request" tag="POST" label="/messages/{message_id}/feedbacks" targetCode={`curl --location --request POST '${props.appDetail.api_base_url}/messages/{message_id}/feedbacks \\\n--header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{\n    "rating": "like",\n    "user": "abc-123"\n}'`}>
+    <CodeGroup title="Request" tag="POST" label="/messages/{message_id}/feedbacks" targetCode={`curl -X POST '${props.appDetail.api_base_url}/messages/{message_id}/feedbacks \\\n--header 'Authorization: Bearer {api_key}' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{\n    "rating": "like",\n    "user": "abc-123"\n}'`}>
 
     ```bash {{ title: 'cURL' }}
-    curl --location --request POST '${props.appDetail.api_base_url}/messages/{message_id}/feedbacks' \
-    --header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \
+    curl -X POST '${props.appDetail.api_base_url}/messages/{message_id}/feedbacks' \
+    --header 'Authorization: Bearer {api_key}' \
     --header 'Content-Type: application/json' \
     --data-raw '{
         "rating": "like",
@@ -161,70 +433,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
     <CodeGroup title="Response">
     ```json {{ title: 'Response' }}
     {
-      "has_more": false,
-      "data": [
-        {
-          "id": "WAz8eIbvDR60rouK",
-          "username": "FrankMcCallister",
-          "phone_number": "1-800-759-3000",
-          "avatar_url": "https://assets.protocol.chat/avatars/frank.jpg",
-          "display_name": null,
-          "conversation_id": "xgQQXg3hrtjh7AvZ",
-          "created_at": 692233200
-        },
-        {
-          "id": "hSIhXBhNe8X1d8Et"
-          // ...
-        }
-      ]
-    }
-    ```
-    </CodeGroup>
-  </Col>
-</Row>
-
----
-
-<Heading
-  url='/messages/{message_id}/suggested'
-  method='GET'
-  title='消息下一步问题建议'
-  name='#suggested'
-/>
-<Row>
-  <Col>
-    获取针对当前问题的下一步问题建议
-
-    ### Path Params
-
-    <Properties>
-      <Property name='message_id' type='string' key='message_id'>
-        消息 ID
-      </Property>
-    </Properties>
-  </Col>
-  <Col sticky>
-
-    <CodeGroup title="Request" tag="GET" label="/messages/{message_id}/suggested" targetCode={`curl --location --request GET '${props.appDetail.api_base_url}/messages/{message_id}/suggested' \\\n--header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \\\n--header 'Content-Type: application/json'`}>
-
-    ```bash {{ title: 'cURL' }}
-    curl --location --request GET '${props.appDetail.api_base_url}/messages/{message_id}/suggested' \
-    --header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \
-    --header 'Content-Type: application/json' \
-    ```
-
-    </CodeGroup>
-
-    <CodeGroup title="Response">
-    ```json {{ title: 'Response' }}
-    {
-      "result": "success",
-      "data": [
-            "a",
-            "b",
-            "c"
-        ]
-      ]
+      "result": "success"
     }
     ```
     </CodeGroup>
@@ -241,7 +450,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
 />
 <Row>
   <Col>
-    滚动加载形式返回历史聊天记录，第一页返回最新 `limit` 条，加载更多时，返回 `first_id` 之前的 `limit` 条。
+    滚动加载形式返回历史聊天记录，第一页返回最新  `limit` 条，即：倒序返回。
 
     ### Query
 
@@ -249,55 +458,157 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
       <Property name='conversation_id' type='string' key='conversation_id'>
         会话 ID
       </Property>
-      <Property name='first_id' type='string' key='first_id'>
-        当前页第一条聊天记录的 ID，默认 none
-      </Property>
-      <Property name='limit' type='int' key='limit'>
-        一次请求返回多少条聊天记录
-      </Property>
       <Property name='user' type='string' key='user'>
         用户标识，由开发者定义规则，需保证用户标识在应用内唯一。
       </Property>
+      <Property name='first_id' type='string' key='first_id'>
+        当前页第一条聊天记录的 ID，默认 null
+      </Property>
+      <Property name='limit' type='int' key='limit'>
+        一次请求返回多少条聊天记录，默认 20 条。
+      </Property>
     </Properties>
+
+    ### Response
+    - `data` (array[object])  消息列表
+    - `id`  (string) 消息 ID
+    - `conversation_id` (string)  会话 ID
+    - `inputs` (array[object]) 用户输入参数。
+    - `query`  (string) 用户输入 / 提问内容。
+    - `message_files` (array[object]) 消息文件
+      - `id` (string) ID
+      - `type` (string) 文件类型，image 图片
+      - `url` (string) 预览图片地址
+      - `belongs_to` (string) 文件归属方，user 或 assistant
+      - `agent_thoughts` (array[object]) Agent思考内容（仅Agent模式下不为空）
+        - `id` (string) agent_thought ID，每一轮Agent迭代都会有一个唯一的id
+        - `message_id` (string) 消息唯一ID
+        - `position` (int) agent_thought在消息中的位置，如第一轮迭代position为1
+        - `thought` (string) agent的思考内容
+        - `observation` (string) 工具调用的返回结果
+        - `tool` (string) 使用的工具列表，以 ; 分割多个工具
+        - `tool_input` (string) 工具的输入，JSON格式的字符串(object)。如：`{"dalle3": {"prompt": "a cute cat"}}`
+        - `created_at` (int) 创建时间戳，如：1705395332
+        - `message_files` (array[string])  当前agent_thought 关联的文件ID
+          - `file_id` (string) 文件ID
+        - `conversation_id` (string) 会话ID
+    - `answer` (string)  回答消息内容
+    - `created_at`  (timestamp) 创建时间
+    - `feedback` (object) 反馈信息
+      - `rating` (string) 点赞 like / 点踩 dislike
+    - `retriever_resources` (array[RetrieverResource]) 引用和归属分段列表
+  - `has_more` (bool) 是否存在下一页
+  - `limit` (int) 返回条数，若传入超过系统限制，返回系统限制数量
   </Col>
   <Col sticky>
-
-    <CodeGroup title="Request" tag="GET" label="/messages" targetCode={`curl --location --request GET '${props.appDetail.api_base_url}/messages?user=abc-123&conversation_id=' \\\n--header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY'`}>
+    ### Request Example
+    <CodeGroup title="Request" tag="GET" label="/messages" targetCode={`curl -X GET '${props.appDetail.api_base_url}/messages?user=abc-123&conversation_id=' \\\n--header 'Authorization: Bearer {api_key}'`}>
 
     ```bash {{ title: 'cURL' }}
-    curl --location --request GET '${props.appDetail.api_base_url}/messages?user=abc-123&conversation_id='
-    --header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY'
+    curl -X GET '${props.appDetail.api_base_url}/messages?user=abc-123&conversation_id='
+    --header 'Authorization: Bearer {api_key}'
     ```
 
     </CodeGroup>
 
+    ### Response Example(基础助手)
     <CodeGroup title="Response">
     ```json {{ title: 'Response' }}
     {
-      "has_more": false,
-      "data": [
+    "limit": 20,
+    "has_more": false,
+    "data": [
         {
-          "id": "WAz8eIbvDR60rouK",
-          "conversation_id": "xgQQXg3hrtjh7AvZ",
-          "inputs": {},
-          "query": "...",
-          "answer": "...",
-          "feedback": "like",
-          "created_at": 692233200
-        },
-        {
-          "id": "hSIhXBhNe8X1d8Et"
-          // ...
+            "id": "a076a87f-31e5-48dc-b452-0061adbbc922",
+            "conversation_id": "cd78daf6-f9e4-4463-9ff2-54257230a0ce",
+            "inputs": {
+                "name": "dify"
+            },
+            "query": "iphone 13 pro",
+            "answer": "The iPhone 13 Pro, released on September 24, 2021, features a 6.1-inch display with a resolution of 1170 x 2532. It is equipped with a Hexa-core (2x3.23 GHz Avalanche + 4x1.82 GHz Blizzard) processor, 6 GB of RAM, and offers storage options of 128 GB, 256 GB, 512 GB, and 1 TB. The camera is 12 MP, the battery capacity is 3095 mAh, and it runs on iOS 15.",
+            "message_files": [],
+            "feedback": null,
+            "retriever_resources": [
+                {
+                    "position": 1,
+                    "dataset_id": "101b4c97-fc2e-463c-90b1-5261a4cdcafb",
+                    "dataset_name": "iPhone",
+                    "document_id": "8dd1ad74-0b5f-4175-b735-7d98bbbb4e00",
+                    "document_name": "iPhone List",
+                    "segment_id": "ed599c7f-2766-4294-9d1d-e5235a61270a",
+                    "score": 0.98457545,
+                    "content": "\"Model\",\"Release Date\",\"Display Size\",\"Resolution\",\"Processor\",\"RAM\",\"Storage\",\"Camera\",\"Battery\",\"Operating System\"\n\"iPhone 13 Pro Max\",\"September 24, 2021\",\"6.7 inch\",\"1284 x 2778\",\"Hexa-core (2x3.23 GHz Avalanche + 4x1.82 GHz Blizzard)\",\"6 GB\",\"128, 256, 512 GB, 1TB\",\"12 MP\",\"4352 mAh\",\"iOS 15\""
+                }
+            ],
+            "agent_thoughts": [],
+            "created_at": 1705569239
         }
       ]
     }
     ```
     </CodeGroup>
+
+    ### Response Example(智能助手)
+    <CodeGroup title="Response">
+    ```json {{ title: 'Response' }}
+    {
+    "limit": 20,
+    "has_more": false,
+    "data": [
+        {
+            "id": "d35e006c-7c4d-458f-9142-be4930abdf94",
+            "conversation_id": "957c068b-f258-4f89-ba10-6e8a0361c457",
+            "inputs": {},
+            "query": "draw a cat",
+            "answer": "I have generated an image of a cat for you. Please check your messages to view the image.",
+            "message_files": [
+                {
+                    "id": "976990d2-5294-47e6-8f14-7356ba9d2d76",
+                    "type": "image",
+                    "url": "http://127.0.0.1:5001/files/tools/976990d2-5294-47e6-8f14-7356ba9d2d76.png?timestamp=1705988524&nonce=55df3f9f7311a9acd91bf074cd524092&sign=z43nMSO1L2HBvoqADLkRxr7Biz0fkjeDstnJiCK1zh8=",
+                    "belongs_to": "assistant"
+                }
+            ],
+            "feedback": null,
+            "retriever_resources": [],
+            "created_at": 1705988187,
+            "agent_thoughts": [
+                {
+                    "id": "592c84cf-07ee-441c-9dcc-ffc66c033469",
+                    "chain_id": null,
+                    "message_id": "d35e006c-7c4d-458f-9142-be4930abdf94",
+                    "position": 1,
+                    "thought": "",
+                    "tool": "dalle2",
+                    "tool_input": "{\"dalle2\": {\"prompt\": \"cat\"}}",
+                    "created_at": 1705988186,
+                    "observation": "image has been created and sent to user already, you should tell user to check it now.",
+                    "message_files": [
+                        "976990d2-5294-47e6-8f14-7356ba9d2d76"
+                    ]
+                },
+                {
+                    "id": "73ead60d-2370-4780-b5ed-532d2762b0e5",
+                    "chain_id": null,
+                    "message_id": "d35e006c-7c4d-458f-9142-be4930abdf94",
+                    "position": 2,
+                    "thought": "I have generated an image of a cat for you. Please check your messages to view the image.",
+                    "tool": "",
+                    "tool_input": "",
+                    "created_at": 1705988199,
+                    "observation": "",
+                    "message_files": []
+                }
+            ]
+        }
+        ]
+    }
+    ```
+    </CodeGroup>
   </Col>
 </Row>
 
 ---
-
 <Heading
   url='/conversations'
   method='GET'
@@ -324,11 +635,11 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
   </Col>
   <Col sticky>
 
-    <CodeGroup title="Request" tag="GET" label="/conversations" targetCode={`curl --location --request GET '${props.appDetail.api_base_url}/conversations?user=abc-123&last_id=&limit=20'\\\n--header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY'`}>
+    <CodeGroup title="Request" tag="GET" label="/conversations" targetCode={`curl -X GET '${props.appDetail.api_base_url}/conversations?user=abc-123&last_id=&limit=20'\\\n--header 'Authorization: Bearer {api_key}'`}>
 
     ```bash {{ title: 'cURL' }}
-    curl --location --request GET '${props.appDetail.api_base_url}/conversations?user=abc-123&last_id=&limit=20' \
-    --header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY'
+    curl -X GET '${props.appDetail.api_base_url}/conversations?user=abc-123&last_id=&limit=20' \
+    --header 'Authorization: Bearer {api_key}'
     ```
 
     </CodeGroup>
@@ -362,6 +673,135 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
 
 ---
 
+<Heading
+  url='/conversations'
+  method='GET'
+  title='获取会话列表'
+  name='#conversations'
+/>
+<Row>
+  <Col>
+    获取当前用户的会话列表，默认返回最近的 20 条。
+
+    ### Query
+
+    <Properties>
+      <Property name='user' type='string' key='user'>
+        用户标识，由开发者定义规则，需保证用户标识在应用内唯一。
+      </Property>
+      <Property name='last_id' type='string' key='last_id'>
+        当前页最后面一条记录的 ID，默认 null
+      </Property>
+      <Property name='limit' type='int' key='limit'>
+        一次请求返回多少条记录
+      </Property>
+      <Property name='pinned' type='bool' key='pinned'>
+        只返回置顶 true，只返回非置顶 false
+      </Property>
+    </Properties>
+
+    ### Response
+    - `data` (array[object]) 会话列表
+      - `id`  (string) 会话 ID
+      - `name`  (string) 会话名称，默认为会话中用户最开始问题的截取。
+      - `inputs` (array[object]) 用户输入参数。
+      - `introduction` (string) 开场白
+      - `created_at` (timestamp) 创建时间
+    - `has_more` (bool)
+    - `limit` (int) 返回条数，若传入超过系统限制，返回系统限制数量
+
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="GET" label="/conversations" targetCode={`curl -X GET '${props.appDetail.api_base_url}/conversations?user=abc-123&last_id=&limit=20'\\\n--header 'Authorization: Bearer {api_key}'`}>
+
+    ```bash {{ title: 'cURL' }}
+    curl -X GET '${props.appDetail.api_base_url}/conversations?user=abc-123&last_id=&limit=20' \
+    --header 'Authorization: Bearer {api_key}'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+    ```json {{ title: 'Response' }}
+    {
+      "limit": 20,
+      "has_more": false,
+      "data": [
+        {
+          "id": "10799fb8-64f7-4296-bbf7-b42bfbe0ae54",
+          "name": "New chat",
+          "inputs": {
+              "book": "book",
+              "myName": "Lucy"
+          },
+          "status": "normal",
+          "created_at": 1679667915
+        },
+        {
+          "id": "hSIhXBhNe8X1d8Et"
+          // ...
+        }
+      ]
+    }
+    ```
+    </CodeGroup>
+  </Col>
+</Row>
+
+---
+<Heading
+  url='/conversations/{conversation_id}'
+  method='DELETE'
+  title='删除会话'
+  name='#delete'
+/>
+<Row>
+  <Col>
+    删除会话。
+
+    ### Path
+    - `conversation_id` (string) 会话 ID
+
+    ### Request Body
+
+    <Properties>
+      <Property name='user' type='string' key='user'>
+        用户标识，由开发者定义规则，需保证用户标识在应用内唯一。
+      </Property>
+    </Properties>
+
+    ### Response
+    - `result` (string) 固定返回 success 
+  </Col>
+  <Col sticky>
+
+    <CodeGroup title="Request" tag="DELETE" label="/conversations/{conversation_id}" targetCode={`curl -X DELETE '${props.appDetail.api_base_url}/conversations/{conversation_id}' \\\n--header 'Authorization: Bearer {api_key}' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{ \n "user": "abc-123"\n}'`}>
+
+    ```bash {{ title: 'cURL' }}
+        curl -X DELETE '${props.appDetail.api_base_url}/conversations/{convsation_id}' \
+        --header 'Content-Type: application/json' \
+        --header 'Accept: application/json' \
+        --header 'Authorization: Bearer {api_key}' \
+        --data '{
+            "user": "abc-123"
+        }'
+      ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+    ```json {{ title: 'Response' }}
+    {
+      "result": "success"
+    }
+    ```
+    </CodeGroup>
+  </Col>
+</Row>
+
+---
+
 <Heading
   url='/conversations/{conversation_id}/name'
   method='POST'
@@ -376,20 +816,30 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
 
     <Properties>
       <Property name='name' type='string' key='name'>
-        新的名称
+        名称，若 `auto_generate` 为 `true` 时，该参数可不传。
+      </Property>
+      <Property name='auto_generate' type='string' key='auto_generate'>
+        自动生成标题，默认 false。
       </Property>
       <Property name='user' type='string' key='user'>
         用户标识，由开发者定义规则，需保证用户标识在应用内唯一。
       </Property>
     </Properties>
+
+    ### Response
+    - `id`  (string) 会话 ID
+    - `name`  (string) 会话名称
+    - `inputs` array[object] 用户输入参数。
+    - `introduction` (string) 开场白
+    - `created_at` (timestamp) 创建时间
   </Col>
   <Col sticky>
 
-    <CodeGroup title="Request" tag="POST" label="/conversations/{conversation_id}/name" targetCode={`curl --location --request POST '${props.appDetail.api_base_url}/conversations/name' \\\n--header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{ \n "name": "", \n "user": "abc-123"\n}'`}>
+    <CodeGroup title="Request" tag="POST" label="/conversations/{conversation_id}/name" targetCode={`curl -X POST '${props.appDetail.api_base_url}/conversations/name' \\\n--header 'Authorization: Bearer {api_key}' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{ \n "name": "", \n "user": "abc-123"\n}'`}>
 
     ```bash {{ title: 'cURL' }}
-    curl --location --request POST '${props.appDetail.api_base_url}/conversations/{conversation_id}/name' \
-    --header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \
+    curl -X POST '${props.appDetail.api_base_url}/conversations/{conversation_id}/name' \
+    --header 'Authorization: Bearer {api_key}' \
     --header 'Content-Type: application/json' \
     --data-raw '{
         "name": "",
@@ -411,103 +861,6 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
 
 ---
 
-<Heading
-  url='/conversations/{conversation_id}'
-  method='DELETE'
-  title='删除会话'
-  name='#delete'
-/>
-<Row>
-  <Col>
-    删除会话。
-
-    ### Request Body
-
-    <Properties>
-      <Property name='user' type='string' key='user'>
-        用户标识，由开发者定义规则，需保证用户标识在应用内唯一。
-      </Property>
-    </Properties>
-  </Col>
-  <Col sticky>
-
-    <CodeGroup title="Request" tag="DELETE" label="/conversations/{conversation_id}" targetCode={`curl --location --request DELETE '${props.appDetail.api_base_url}/conversations/{conversation_id}' \\\n--header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{ \n "user": "abc-123"\n}'`}>
-
-    ```bash {{ title: 'cURL' }}
-        curl --location --request DELETE '${props.appDetail.api_base_url}/conversations/{convsation_id}' \
-        --header 'Content-Type: application/json' \
-        --header 'Accept: application/json' \
-        --header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \
-        --data '{
-            "user": "abc-123"
-        }'
-      ```
-
-    </CodeGroup>
-
-    <CodeGroup title="Response">
-    ```json {{ title: 'Response' }}
-    {
-      "result": "success"
-    }
-    ```
-    </CodeGroup>
-  </Col>
-</Row>
-
----
-
-<Heading
-  url='/files/upload'
-  method='POST'
-  title='上传文件'
-  name='#files-upload'
-/>
-<Row>
-  <Col>
-    上传文件到服务器，供文本生成、对话使用。上传的文件仅供当前终端用户使用。
-
-    ### Request Body
-    请求方式为 `multipart/form-data`。
-    <Properties>
-      <Property name='file' type='file' key='file'>
-        要上传的文件。目前支持 png, jpg, jpeg, webp, gif 格式文件。
-      </Property>
-      <Property name='user' type='string' key='user'>
-        用户标识，由开发者定义规则，需保证用户标识在应用内唯一。
-      </Property>
-    </Properties>
-  </Col>
-  <Col sticky>
-
-    <CodeGroup title="Request" tag="POST" label="/files/upload" targetCode={`curl --location --request POST '${props.appDetail.api_base_url}/files/upload' \\\n--header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \\\n--form 'file=@localfile;type=image/[png|jpeg|jpg|webp|gif] \\\n--form 'user=abc-123'`}>
-
-    ```bash {{ title: 'cURL' }}
-    curl --location --request POST '${props.appDetail.api_base_url}/files/upload' \
-    --header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \
-    --form 'file=@"/path/to/file"'
-    ```
-
-    </CodeGroup>
-
-    <CodeGroup title="Response">
-    ```json {{ title: 'Response' }}
-    {
-      "id": "72fa9618-8f89-4a37-9b33-7e1178a24a67",  
-      "name": "example.png",
-      "size": 1024,
-      "extension": "png",
-      "mime_type": "image/png",
-      "created_by": 123,  
-      "created_at": 1577836800,
-    }
-    ```
-    </CodeGroup>
-  </Col>
-</Row>
-
----
-
 <Heading
   url='/audio-to-text'
   method='POST'
@@ -516,24 +869,29 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
 />
 <Row>
   <Col>
-    语音转文字，仅支持 openai 模型。
-
     ### Request Body
-
+    该接口需使用 `multipart/form-data` 进行请求。
     <Properties>
       <Property name='file' type='file' key='file'>
         语音文件。
-        文件上传当前限制为 15 MB，并且支持以下输入文件类型：mp3、mp4、mpeg、mpga、m4a、wav 和 webm。
+        支持格式：`['mp3', 'mp4', 'mpeg', 'mpga', 'm4a', 'wav', 'webm']`  
+        文件大小限制：15MB
+      </Property>
+      <Property name='user' type='string' key='user'>
+        用户标识，由开发者定义规则，需保证用户标识在应用内唯一。
       </Property>
     </Properties>
+
+    ### Response
+    - `text` (string) 输出文字
   </Col>
   <Col sticky>
 
-    <CodeGroup title="Request" tag="POST" label="/audio-to-text" targetCode={`curl --location --request POST '${props.appDetail.api_base_url}/audio-to-text' \\\n--header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \\\n--form 'file=@localfile;type=audio/[mp3|mp4|mpeg|mpga|m4a|wav|webm]`}>
+    <CodeGroup title="Request" tag="POST" label="/audio-to-text" targetCode={`curl -X POST '${props.appDetail.api_base_url}/audio-to-text' \\\n--header 'Authorization: Bearer {api_key}' \\\n--form 'file=@localfile;type=audio/[mp3|mp4|mpeg|mpga|m4a|wav|webm]`}>
 
     ```bash {{ title: 'cURL' }}
-    curl --location --request POST '${props.appDetail.api_base_url}/conversations/name' \
-    --header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY' \
+    curl -X POST '${props.appDetail.api_base_url}/conversations/name' \
+    --header 'Authorization: Bearer {api_key}' \
     --form 'file=@localfile;type=audio/mp3'
     ```
 
@@ -542,7 +900,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
     <CodeGroup title="Response">
     ```json {{ title: 'Response' }}
     {
-      "text": ""
+      "text": "hello"
     }
     ```
     </CodeGroup>
@@ -555,13 +913,11 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
   url='/parameters'
   method='GET'
   title='获取应用配置信息'
-  name='#rename'
+  name='#parameters'
 />
 <Row>
   <Col>
-    内容包括：
-    1. 已配置的 Input 参数，包括变量名、字段名称、类型与默认值。通常用于客户端加载后显示这些字段的表单或填入默认值。
-    2. 上传图片的配置，包括是否开启上传图片，上传图片的数量和上传方式。注意：这个配置只有使用支持多模态的模型时才会生效。
+    用于进入页面一开始，获取功能开关、输入参数名称、类型及默认值等使用。
 
     ### Query
 
@@ -570,14 +926,51 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
         用户标识，由开发者定义规则，需保证用户标识在应用内唯一。
       </Property>
     </Properties>
+
+    ### Response
+    - `opening_statement` (string) 开场白
+    - `suggested_questions` (array[string]) 开场推荐问题列表
+    - `suggested_questions_after_answer` (object) 启用回答后给出推荐问题。
+      - `enabled` (bool) 是否开启
+    - `speech_to_text` (object) 语音转文本
+      - `enabled` (bool) 是否开启
+    - `retriever_resource` (object) 引用和归属
+      - `enabled` (bool) 是否开启
+    - `annotation_reply` (object) 标记回复
+      - `enabled` (bool) 是否开启
+    - `user_input_form` (array[object]) 用户输入表单配置
+      - `text-input` (object) 文本输入控件 
+        - `label` (string) 控件展示标签名
+        - `variable` (string) 控件 ID
+        - `required` (bool) 是否必填
+        - `default` (string) 默认值
+      - `paragraph` (object) 段落文本输入控件
+        - `label` (string) 控件展示标签名
+        - `variable` (string) 控件 ID
+        - `required` (bool) 是否必填
+        - `default` (string) 默认值
+      - `select` (object) 下拉控件 
+        - `label` (string) 控件展示标签名
+        - `variable` (string) 控件 ID
+        - `required` (bool) 是否必填
+        - `default` (string) 默认值
+        - `options` (array[string]) 选项值
+    - `file_upload` (object) 文件上传配置
+      - `image` (object) 图片设置
+        当前仅支持图片类型：`png`, `jpg`, `jpeg`, `webp`, `gif`
+        - `enabled` (bool) 是否开启
+        - `number_limits` (int) 图片数量限制，默认 3
+        - `transfer_methods` (array[string]) 传递方式列表，remote_url , local_file，必选一个
+    - `system_parameters` (object) 系统参数
+      - `image_file_size_limit` (string) 图片文件上传大小限制（MB）
   </Col>
   <Col sticky>
 
-    <CodeGroup title="Request" tag="GET" label="/parameters" targetCode={` curl --location --request GET '${props.appDetail.api_base_url}/parameters'\\\n--header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY'`}>
+    <CodeGroup title="Request" tag="GET" label="/parameters" targetCode={` curl -X GET '${props.appDetail.api_base_url}/parameters'\\\n--header 'Authorization: Bearer {api_key}'`}>
 
     ```bash {{ title: 'cURL' }}
-    curl --location --request GET '${props.appDetail.api_base_url}/parameters?user=abc-123' \
-    --header 'Authorization: Bearer ENTER-YOUR-SECRET-KEY'
+    curl -X GET '${props.appDetail.api_base_url}/parameters?user=abc-123' \
+    --header 'Authorization: Bearer {api_key}'
     ```
 
     </CodeGroup>
@@ -615,3 +1008,55 @@ import { Row, Col, Properties, Property, Heading, SubProperty } from '../md.tsx'
     </CodeGroup>
   </Col>
 </Row>
+
+---
+
+<Heading
+  url='/meta'
+  method='GET'
+  title='获取应用Meta信息'
+  name='#meta'
+/>
+<Row>
+  <Col>
+  用于获取工具icon
+  ### Query
+    <Properties>
+
+   <Property name='user' type='string' key='user'>
+      用户标识，由开发者定义规则，需保证用户标识在应用内唯一。
+    </Property>
+      </Properties>
+  ### Response
+  - `tool_icons`(object[string]) 工具图标
+    - `工具名称` (string) 
+      - `icon` (object|string)
+        - (object) 图标
+          - `background` (string) hex格式的背景色
+          - `content`(string) emoji
+        - (string) 图标URL
+  </Col>
+  <Col>
+  <CodeGroup title="Request" tag="POST" label="/meta" targetCode={`curl -X GET 'https://cloud.dify.ai/v1/meta?user=abc-123' \\\n-H 'Authorization: Bearer {api_key}'`}>
+    ```bash {{ title: 'cURL' }}
+    curl -X GET 'https://cloud.dify.ai/v1/meta?user=abc-123' \
+    -H 'Authorization: Bearer {api_key}'
+    ```
+
+    </CodeGroup>
+
+    <CodeGroup title="Response">
+    ```json {{ title: 'Response' }}
+    {
+      "tool_icons": {
+          "dalle2": "https://cloud.dify.ai/console/api/workspaces/current/tool-provider/builtin/dalle/icon",
+          "api_tool": {
+              "background": "#252525",
+              "content": "\ud83d\ude01"
+          }
+      }
+    }
+    ```
+    </CodeGroup>
+  </Col>
+</Row>
diff --git a/web/app/components/explore/app-card/index.tsx b/web/app/components/explore/app-card/index.tsx
index b96a68e0c0..6286f739b4 100644
--- a/web/app/components/explore/app-card/index.tsx
+++ b/web/app/components/explore/app-card/index.tsx
@@ -10,7 +10,7 @@ import AppIcon from '@/app/components/base/app-icon'
 
 const CustomizeBtn = (
   <svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7.5 2.33366C6.69458 2.33366 6.04167 2.98658 6.04167 3.79199C6.04167 4.59741 6.69458 5.25033 7.5 5.25033C8.30542 5.25033 8.95833 4.59741 8.95833 3.79199C8.95833 2.98658 8.30542 2.33366 7.5 2.33366ZM7.5 2.33366V1.16699M12.75 8.71385C11.4673 10.1671 9.59071 11.0837 7.5 11.0837C5.40929 11.0837 3.53265 10.1671 2.25 8.71385M6.76782 5.05298L2.25 12.8337M8.23218 5.05298L12.75 12.8337" stroke="#344054" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round"/>
+    <path d="M7.5 2.33366C6.69458 2.33366 6.04167 2.98658 6.04167 3.79199C6.04167 4.59741 6.69458 5.25033 7.5 5.25033C8.30542 5.25033 8.95833 4.59741 8.95833 3.79199C8.95833 2.98658 8.30542 2.33366 7.5 2.33366ZM7.5 2.33366V1.16699M12.75 8.71385C11.4673 10.1671 9.59071 11.0837 7.5 11.0837C5.40929 11.0837 3.53265 10.1671 2.25 8.71385M6.76782 5.05298L2.25 12.8337M8.23218 5.05298L12.75 12.8337" stroke="#344054" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
   </svg>
 )
 
@@ -28,7 +28,7 @@ const AppCard = ({
   onAddToWorkspace,
 }: AppCardProps) => {
   const { t } = useTranslation()
-  const { app: appBasicInfo } = app
+  const { app: appBasicInfo, is_agent } = app
   return (
     <div className={cn(s.wrap, 'col-span-1 bg-white border-2 border-solid border-transparent rounded-lg shadow-sm min-h-[160px] flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg')}>
       <div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
@@ -40,7 +40,7 @@ const AppCard = ({
       <div className='mb-3 px-[14px] h-9 text-xs leading-normal text-gray-500 line-clamp-2'>{app.description}</div>
       <div className='flex items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px]'>
         <div className={s.mode}>
-          <AppModeLabel mode={appBasicInfo.mode} />
+          <AppModeLabel mode={appBasicInfo.mode} isAgent={is_agent} />
         </div>
         <div className={cn(s.opWrap, 'flex items-center w-full space-x-2')}>
           <Button type='primary' className='grow flex items-center !h-7' onClick={() => onAddToWorkspace(appBasicInfo.id)}>
diff --git a/web/app/components/explore/app-list/index.tsx b/web/app/components/explore/app-list/index.tsx
index ae58f38123..cb8a5c57b3 100644
--- a/web/app/components/explore/app-list/index.tsx
+++ b/web/app/components/explore/app-list/index.tsx
@@ -17,9 +17,11 @@ import type { CreateAppModalProps } from '@/app/components/explore/create-app-mo
 import Loading from '@/app/components/base/loading'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { type AppMode } from '@/types/app'
+import { useAppContext } from '@/context/app-context'
 
 const Apps: FC = () => {
   const { t } = useTranslation()
+  const { isCurrentWorkspaceManager } = useAppContext()
   const router = useRouter()
   const { setControlUpdateInstalledApps, hasEditPermission } = useContext(ExploreContext)
   const [currCategory, setCurrCategory] = React.useState<AppCategory | ''>('')
@@ -70,7 +72,7 @@ const Apps: FC = () => {
         message: t('app.newApp.appCreated'),
       })
       localStorage.setItem(NEED_REFRESH_APP_LIST_KEY, '1')
-      router.push(`/app/${app.id}/overview`)
+      router.push(`/app/${app.id}/${isCurrentWorkspaceManager ? 'configuration' : 'overview'}`)
     }
     catch (e) {
       Toast.notify({ type: 'error', message: t('app.newApp.appCreateFailed') })
diff --git a/web/app/components/explore/create-app-modal/index.tsx b/web/app/components/explore/create-app-modal/index.tsx
index 4bf55e0aa3..e6b049f31d 100644
--- a/web/app/components/explore/create-app-modal/index.tsx
+++ b/web/app/components/explore/create-app-modal/index.tsx
@@ -29,7 +29,7 @@ const CreateAppModal = ({
 }: CreateAppModalProps) => {
   const { t } = useTranslation()
 
-  const [name, setName] = React.useState('')
+  const [name, setName] = React.useState(appName)
 
   const [showEmojiPicker, setShowEmojiPicker] = useState(false)
   const [emoji, setEmoji] = useState({ icon: '🤖', icon_background: '#FFEAD5' })
@@ -53,10 +53,10 @@ const CreateAppModal = ({
     <>
       <Modal
         isShow={show}
-        onClose={() => {}}
+        onClose={() => { }}
         className={cn(s.modal, '!max-w-[480px]', 'px-8')}
       >
-        <span className={s.close} onClick={onHide}/>
+        <span className={s.close} onClick={onHide} />
         <div className={s.title}>{t('explore.appCustomize.title', { name: appName })}</div>
         <div className={s.content}>
           <div className={s.subTitle}>{t('explore.appCustomize.subTitle')}</div>
@@ -68,7 +68,7 @@ const CreateAppModal = ({
               className='h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow'
             />
           </div>
-          {isAppsFull && <AppsFull loc='app-explore-create'/>}
+          {isAppsFull && <AppsFull loc='app-explore-create' />}
         </div>
         <div className='flex flex-row-reverse'>
           <Button disabled={isAppsFull} className='w-24 ml-2' type='primary' onClick={submit}>{t('common.operation.create')}</Button>
diff --git a/web/app/components/explore/sidebar/index.tsx b/web/app/components/explore/sidebar/index.tsx
index 21817984c8..8ed24fd9de 100644
--- a/web/app/components/explore/sidebar/index.tsx
+++ b/web/app/components/explore/sidebar/index.tsx
@@ -27,13 +27,13 @@ const DiscoveryIcon = () => (
 
 const SelectedChatIcon = () => (
   <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fillRule="evenodd" clipRule="evenodd" d="M8.00016 1.3335C4.31826 1.3335 1.3335 4.31826 1.3335 8.00016C1.3335 8.88571 1.50651 9.7325 1.8212 10.5074C1.84962 10.5773 1.86597 10.6178 1.87718 10.6476L1.88058 10.6568L1.88016 10.66C1.87683 10.6846 1.87131 10.7181 1.86064 10.7821L1.46212 13.1732C1.44424 13.2803 1.42423 13.4001 1.41638 13.5041C1.40782 13.6176 1.40484 13.7981 1.48665 13.9888C1.58779 14.2246 1.77569 14.4125 2.0115 14.5137C2.20224 14.5955 2.38274 14.5925 2.49619 14.5839C2.60025 14.5761 2.72006 14.5561 2.82715 14.5382L5.2182 14.1397C5.28222 14.129 5.31576 14.1235 5.34036 14.1202L5.34353 14.1197L5.35274 14.1231C5.38258 14.1344 5.42298 14.1507 5.49297 14.1791C6.26783 14.4938 7.11462 14.6668 8.00016 14.6668C11.6821 14.6668 14.6668 11.6821 14.6668 8.00016C14.6668 4.31826 11.6821 1.3335 8.00016 1.3335ZM4.00016 8.00016C4.00016 7.44788 4.44788 7.00016 5.00016 7.00016C5.55245 7.00016 6.00016 7.44788 6.00016 8.00016C6.00016 8.55245 5.55245 9.00016 5.00016 9.00016C4.44788 9.00016 4.00016 8.55245 4.00016 8.00016ZM7.00016 8.00016C7.00016 7.44788 7.44788 7.00016 8.00016 7.00016C8.55245 7.00016 9.00016 7.44788 9.00016 8.00016C9.00016 8.55245 8.55245 9.00016 8.00016 9.00016C7.44788 9.00016 7.00016 8.55245 7.00016 8.00016ZM11.0002 7.00016C10.4479 7.00016 10.0002 7.44788 10.0002 8.00016C10.0002 8.55245 10.4479 9.00016 11.0002 9.00016C11.5524 9.00016 12.0002 8.55245 12.0002 8.00016C12.0002 7.44788 11.5524 7.00016 11.0002 7.00016Z" fill="#155EEF"/>
+    <path fillRule="evenodd" clipRule="evenodd" d="M8.00016 1.3335C4.31826 1.3335 1.3335 4.31826 1.3335 8.00016C1.3335 8.88571 1.50651 9.7325 1.8212 10.5074C1.84962 10.5773 1.86597 10.6178 1.87718 10.6476L1.88058 10.6568L1.88016 10.66C1.87683 10.6846 1.87131 10.7181 1.86064 10.7821L1.46212 13.1732C1.44424 13.2803 1.42423 13.4001 1.41638 13.5041C1.40782 13.6176 1.40484 13.7981 1.48665 13.9888C1.58779 14.2246 1.77569 14.4125 2.0115 14.5137C2.20224 14.5955 2.38274 14.5925 2.49619 14.5839C2.60025 14.5761 2.72006 14.5561 2.82715 14.5382L5.2182 14.1397C5.28222 14.129 5.31576 14.1235 5.34036 14.1202L5.34353 14.1197L5.35274 14.1231C5.38258 14.1344 5.42298 14.1507 5.49297 14.1791C6.26783 14.4938 7.11462 14.6668 8.00016 14.6668C11.6821 14.6668 14.6668 11.6821 14.6668 8.00016C14.6668 4.31826 11.6821 1.3335 8.00016 1.3335ZM4.00016 8.00016C4.00016 7.44788 4.44788 7.00016 5.00016 7.00016C5.55245 7.00016 6.00016 7.44788 6.00016 8.00016C6.00016 8.55245 5.55245 9.00016 5.00016 9.00016C4.44788 9.00016 4.00016 8.55245 4.00016 8.00016ZM7.00016 8.00016C7.00016 7.44788 7.44788 7.00016 8.00016 7.00016C8.55245 7.00016 9.00016 7.44788 9.00016 8.00016C9.00016 8.55245 8.55245 9.00016 8.00016 9.00016C7.44788 9.00016 7.00016 8.55245 7.00016 8.00016ZM11.0002 7.00016C10.4479 7.00016 10.0002 7.44788 10.0002 8.00016C10.0002 8.55245 10.4479 9.00016 11.0002 9.00016C11.5524 9.00016 12.0002 8.55245 12.0002 8.00016C12.0002 7.44788 11.5524 7.00016 11.0002 7.00016Z" fill="#155EEF" />
   </svg>
 )
 
 const ChatIcon = () => (
   <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M5 8H5.00667M8 8H8.00667M11 8H11.0067M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 8.7981 2.15582 9.5598 2.43871 10.2563C2.49285 10.3897 2.51992 10.4563 2.532 10.5102C2.54381 10.5629 2.54813 10.6019 2.54814 10.6559C2.54814 10.7111 2.53812 10.7713 2.51807 10.8916L2.12275 13.2635C2.08135 13.5119 2.06065 13.6361 2.09917 13.7259C2.13289 13.8045 2.19552 13.8671 2.27412 13.9008C2.36393 13.9393 2.48812 13.9186 2.73651 13.8772L5.10843 13.4819C5.22872 13.4619 5.28887 13.4519 5.34409 13.4519C5.3981 13.4519 5.43711 13.4562 5.48981 13.468C5.54369 13.4801 5.61035 13.5072 5.74366 13.5613C6.4402 13.8442 7.2019 14 8 14ZM5.33333 8C5.33333 8.1841 5.1841 8.33333 5 8.33333C4.81591 8.33333 4.66667 8.1841 4.66667 8C4.66667 7.81591 4.81591 7.66667 5 7.66667C5.1841 7.66667 5.33333 7.81591 5.33333 8ZM8.33333 8C8.33333 8.1841 8.1841 8.33333 8 8.33333C7.81591 8.33333 7.66667 8.1841 7.66667 8C7.66667 7.81591 7.81591 7.66667 8 7.66667C8.1841 7.66667 8.33333 7.81591 8.33333 8ZM11.3333 8C11.3333 8.1841 11.1841 8.33333 11 8.33333C10.8159 8.33333 10.6667 8.1841 10.6667 8C10.6667 7.81591 10.8159 7.66667 11 7.66667C11.1841 7.66667 11.3333 7.81591 11.3333 8Z" stroke="#344054" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M5 8H5.00667M8 8H8.00667M11 8H11.0067M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 8.7981 2.15582 9.5598 2.43871 10.2563C2.49285 10.3897 2.51992 10.4563 2.532 10.5102C2.54381 10.5629 2.54813 10.6019 2.54814 10.6559C2.54814 10.7111 2.53812 10.7713 2.51807 10.8916L2.12275 13.2635C2.08135 13.5119 2.06065 13.6361 2.09917 13.7259C2.13289 13.8045 2.19552 13.8671 2.27412 13.9008C2.36393 13.9393 2.48812 13.9186 2.73651 13.8772L5.10843 13.4819C5.22872 13.4619 5.28887 13.4519 5.34409 13.4519C5.3981 13.4519 5.43711 13.4562 5.48981 13.468C5.54369 13.4801 5.61035 13.5072 5.74366 13.5613C6.4402 13.8442 7.2019 14 8 14ZM5.33333 8C5.33333 8.1841 5.1841 8.33333 5 8.33333C4.81591 8.33333 4.66667 8.1841 4.66667 8C4.66667 7.81591 4.81591 7.66667 5 7.66667C5.1841 7.66667 5.33333 7.81591 5.33333 8ZM8.33333 8C8.33333 8.1841 8.1841 8.33333 8 8.33333C7.81591 8.33333 7.66667 8.1841 7.66667 8C7.66667 7.81591 7.81591 7.66667 8 7.66667C8.1841 7.66667 8.33333 7.81591 8.33333 8ZM11.3333 8C11.3333 8.1841 11.1841 8.33333 11 8.33333C10.8159 8.33333 10.6667 8.1841 10.6667 8C10.6667 7.81591 10.8159 7.66667 11 7.66667C11.1841 7.66667 11.3333 7.81591 11.3333 8Z" stroke="#344054" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
   </svg>
 )
 
@@ -100,14 +100,6 @@ const SideBar: FC<IExploreSideBarProps> = ({
           {isDiscoverySelected ? <SelectedDiscoveryIcon /> : <DiscoveryIcon />}
           {!isMobile && <div className='text-sm'>{t('explore.sidebar.discovery')}</div>}
         </Link>
-        <Link
-          href='/explore/chat'
-          className={cn(isChatSelected ? 'text-primary-600  bg-white font-semibold' : 'text-gray-700 font-medium hover:bg-gray-200', 'flex items-center pc:justify-start pc:w-full mobile:justify-center mobile:w-fit h-9 px-3 mobile:px-2 gap-2 rounded-lg')}
-          style={isChatSelected ? { boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)' } : {}}
-        >
-          {isChatSelected ? <SelectedChatIcon /> : <ChatIcon />}
-          {!isMobile && <div className='text-sm'>{t('explore.sidebar.chat')}</div>}
-        </Link>
       </div>
       {installedApps.length > 0 && (
         <div className='mt-10'>
diff --git a/web/app/components/header/account-setting/api-based-extension-page/modal.tsx b/web/app/components/header/account-setting/api-based-extension-page/modal.tsx
index 1970d1ca87..a3cdb5a273 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/modal.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/modal.tsx
@@ -75,7 +75,7 @@ const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({
     <Modal
       isShow
       onClose={() => {}}
-      wrapperClassName='!z-30'
+      wrapperClassName='!z-[103]'
       className='!p-8 !pb-6 !max-w-none !w-[640px]'
     >
       <div className='mb-2 text-xl font-semibold text-gray-900'>
diff --git a/web/app/components/header/account-setting/api-based-extension-page/selector.tsx b/web/app/components/header/account-setting/api-based-extension-page/selector.tsx
index 0d6ce94323..14ca2379f6 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/selector.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/selector.tsx
@@ -70,7 +70,7 @@ const ApiBasedExtensionSelector: FC<ApiBasedExtensionSelectorProps> = ({
             )
         }
       </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className='w-[calc(100%-32px)] max-w-[576px] z-[11]'>
+      <PortalToFollowElemContent className='w-[calc(100%-32px)] max-w-[576px] z-[102]'>
         <div className='w-full rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg z-10'>
           <div className='p-1'>
             <div className='flex items-center justify-between px-3 pt-2 pb-1'>
diff --git a/web/app/components/header/account-setting/index.tsx b/web/app/components/header/account-setting/index.tsx
index c1fa85235c..a83542ef05 100644
--- a/web/app/components/header/account-setting/index.tsx
+++ b/web/app/components/header/account-setting/index.tsx
@@ -8,7 +8,6 @@ import AccountPage from './account-page'
 import MembersPage from './members-page'
 import IntegrationsPage from './Integrations-page'
 import LanguagePage from './language-page'
-import PluginPage from './plugin-page'
 import ApiBasedExtensionPage from './api-based-extension-page'
 import DataSourcePage from './data-source-page'
 import ModelProviderPage from './model-provider-page'
@@ -18,10 +17,9 @@ import CustomPage from '@/app/components/custom/custom-page'
 import Modal from '@/app/components/base/modal'
 import {
   Database03,
-  PuzzlePiece01,
   Webhooks,
 } from '@/app/components/base/icons/src/vender/line/development'
-import { Database03 as Database03Solid, PuzzlePiece01 as PuzzlePiece01Solid } from '@/app/components/base/icons/src/vender/solid/development'
+import { Database03 as Database03Solid } from '@/app/components/base/icons/src/vender/solid/development'
 import { User01, Users01 } from '@/app/components/base/icons/src/vender/line/users'
 import { User01 as User01Solid, Users01 as Users01Solid } from '@/app/components/base/icons/src/vender/solid/users'
 import { Globe01 } from '@/app/components/base/icons/src/vender/line/mapsAndTravel'
@@ -89,12 +87,6 @@ export default function AccountSetting({
         icon: <Database03 className={iconClassName} />,
         activeIcon: <Database03Solid className={iconClassName} />,
       },
-      {
-        key: 'plugin',
-        name: t('common.settings.plugin'),
-        icon: <PuzzlePiece01 className={iconClassName} />,
-        activeIcon: <PuzzlePiece01Solid className={iconClassName} />,
-      },
       {
         key: 'api-based-extension',
         name: t('common.settings.apiBasedExtension'),
@@ -224,9 +216,8 @@ export default function AccountSetting({
             {activeMenu === 'language' && <LanguagePage />}
             {activeMenu === 'provider' && <ModelProviderPage />}
             {activeMenu === 'data-source' && <DataSourcePage />}
-            {activeMenu === 'plugin' && <PluginPage />}
-            {activeMenu === 'api-based-extension' && <ApiBasedExtensionPage /> }
-            {activeMenu === 'custom' && <CustomPage /> }
+            {activeMenu === 'api-based-extension' && <ApiBasedExtensionPage />}
+            {activeMenu === 'custom' && <CustomPage />}
           </div>
         </div>
       </div>
diff --git a/web/app/components/header/account-setting/model-provider-page/declarations.ts b/web/app/components/header/account-setting/model-provider-page/declarations.ts
index 6bdded4d50..a8744cdef9 100644
--- a/web/app/components/header/account-setting/model-provider-page/declarations.ts
+++ b/web/app/components/header/account-setting/model-provider-page/declarations.ts
@@ -7,6 +7,7 @@ export type TypeWithI18N<T = string> = {
 
 export enum FormTypeEnum {
   textInput = 'text-input',
+  textNumber = 'number-input',
   secretInput = 'secret-input',
   select = 'select',
   radio = 'radio',
@@ -92,10 +93,12 @@ export type CredentialFormSchemaBase = {
   type: FormTypeEnum
   required: boolean
   default?: string
+  tooltip?: TypeWithI18N
   show_on: FormShowOnObject[]
 }
 
 export type CredentialFormSchemaTextInput = CredentialFormSchemaBase & { max_length?: number; placeholder?: TypeWithI18N }
+export type CredentialFormSchemaNumberInput = CredentialFormSchemaBase & { min?: number; max?: number; placeholder?: TypeWithI18N }
 export type CredentialFormSchemaSelect = CredentialFormSchemaBase & { options: FormOption[]; placeholder?: TypeWithI18N }
 export type CredentialFormSchemaRadio = CredentialFormSchemaBase & { options: FormOption[] }
 export type CredentialFormSchemaSecretInput = CredentialFormSchemaBase & { placeholder?: TypeWithI18N }
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
index fe13874384..ec1f41a64e 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
@@ -1,8 +1,10 @@
 import { useState } from 'react'
 import type { FC } from 'react'
+import cn from 'classnames'
 import { ValidatingTip } from '../../key-validator/ValidateStatus'
 import type {
   CredentialFormSchema,
+  CredentialFormSchemaNumberInput,
   CredentialFormSchemaRadio,
   CredentialFormSchemaSecretInput,
   CredentialFormSchemaSelect,
@@ -13,7 +15,8 @@ import { FormTypeEnum } from '../declarations'
 import { useLanguage } from '../hooks'
 import Input from './Input'
 import { SimpleSelect } from '@/app/components/base/select'
-
+import Tooltip from '@/app/components/base/tooltip-plus'
+import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
 type FormProps = {
   value: FormValue
   onChange: (val: FormValue) => void
@@ -22,6 +25,9 @@ type FormProps = {
   validatedSuccess?: boolean
   showOnVariableMap: Record<string, string[]>
   isEditMode: boolean
+  readonly?: boolean
+  inputClassName?: string
+  isShowDefaultValue?: boolean
 }
 
 const Form: FC<FormProps> = ({
@@ -32,6 +38,9 @@ const Form: FC<FormProps> = ({
   validatedSuccess,
   showOnVariableMap,
   isEditMode,
+  readonly,
+  inputClassName,
+  isShowDefaultValue = false,
 }) => {
   const language = useLanguage()
   const [changeKey, setChangeKey] = useState('')
@@ -51,7 +60,19 @@ const Form: FC<FormProps> = ({
   }
 
   const renderField = (formSchema: CredentialFormSchema) => {
-    if (formSchema.type === FormTypeEnum.textInput || formSchema.type === FormTypeEnum.secretInput) {
+    const tooltip = formSchema.tooltip
+    const tooltipContent = (tooltip && (
+      <span className='ml-1 pt-1.5'>
+        <Tooltip popupContent={
+          // w-[100px] caused problem
+          <div className=''>
+            {tooltip[language]}
+          </div>
+        } >
+          <HelpCircle className='w-3 h-3  text-gray-500' />
+        </Tooltip>
+      </span>))
+    if (formSchema.type === FormTypeEnum.textInput || formSchema.type === FormTypeEnum.secretInput || formSchema.type === FormTypeEnum.textNumber) {
       const {
         variable,
         label,
@@ -63,8 +84,7 @@ const Form: FC<FormProps> = ({
       if (show_on.length && !show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value))
         return null
 
-      const disabed = isEditMode && (variable === '__model_type' || variable === '__model_name')
-
+      const disabed = readonly || (isEditMode && (variable === '__model_type' || variable === '__model_name'))
       return (
         <div key={variable} className='py-3'>
           <div className='py-2 text-sm text-gray-900'>
@@ -74,14 +94,17 @@ const Form: FC<FormProps> = ({
                 <span className='ml-1 text-red-500'>*</span>
               )
             }
+            {tooltipContent}
           </div>
           <Input
-            className={`${disabed && 'cursor-not-allowed opacity-60'}`}
-            value={value[variable] as string}
+            className={cn(inputClassName, `${disabed && 'cursor-not-allowed opacity-60'}`)}
+            value={(isShowDefaultValue && ((value[variable] as string) === '' || value[variable] === undefined || value[variable] === null)) ? formSchema.default : value[variable]}
             onChange={val => handleFormChange(variable, val)}
             validated={validatedSuccess}
             placeholder={placeholder?.[language]}
             disabled={disabed}
+            type={formSchema.type === FormTypeEnum.textNumber ? 'number' : 'text'}
+            {...(formSchema.type === FormTypeEnum.textNumber ? { min: (formSchema as CredentialFormSchemaNumberInput).min, max: (formSchema as CredentialFormSchemaNumberInput).max } : {})}
           />
           {validating && changeKey === variable && <ValidatingTip />}
         </div>
@@ -111,6 +134,7 @@ const Form: FC<FormProps> = ({
                 <span className='ml-1 text-red-500'>*</span>
               )
             }
+            {tooltipContent}
           </div>
           <div className={`grid grid-cols-${options?.length} gap-3`}>
             {
@@ -160,14 +184,18 @@ const Form: FC<FormProps> = ({
         <div key={variable} className='py-3'>
           <div className='py-2 text-sm text-gray-900'>
             {label[language]}
+
             {
               required && (
                 <span className='ml-1 text-red-500'>*</span>
               )
             }
+            {tooltipContent}
           </div>
           <SimpleSelect
-            defaultValue={value[variable] as string}
+            className={cn(inputClassName)}
+            disabled={readonly}
+            defaultValue={(isShowDefaultValue && ((value[variable] as string) === '' || value[variable] === undefined || value[variable] === null)) ? formSchema.default : value[variable]}
             items={options.filter((option) => {
               if (option.show_on.length)
                 return option.show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value)
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx
index a9d475471e..c4ee3829cd 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx
@@ -9,6 +9,9 @@ type InputProps = {
   validated?: boolean
   className?: string
   disabled?: boolean
+  type?: string
+  min?: number
+  max?: number
 }
 const Input: FC<InputProps> = ({
   value,
@@ -18,7 +21,19 @@ const Input: FC<InputProps> = ({
   validated,
   className,
   disabled,
+  type = 'text',
+  min,
+  max,
 }) => {
+  const toLimit = (v: string) => {
+    if (min !== undefined && parseFloat(v) < min) {
+      onChange(`${min}`)
+      return
+    }
+
+    if (max !== undefined && parseFloat(v) > max)
+      onChange(`${max}`)
+  }
   return (
     <div className='relative'>
       <input
@@ -34,9 +49,13 @@ const Input: FC<InputProps> = ({
         `}
         placeholder={placeholder || ''}
         onChange={e => onChange(e.target.value)}
+        onBlur={e => toLimit(e.target.value)}
         onFocus={onFocus}
         value={value || ''}
         disabled={disabled}
+        type={type}
+        min={min}
+        max={max}
       />
       {
         validated && (
diff --git a/web/app/components/header/app-nav/index.tsx b/web/app/components/header/app-nav/index.tsx
index 50b5472d43..3a90850a42 100644
--- a/web/app/components/header/app-nav/index.tsx
+++ b/web/app/components/header/app-nav/index.tsx
@@ -7,11 +7,11 @@ import useSWR from 'swr'
 import useSWRInfinite from 'swr/infinite'
 import { flatten } from 'lodash-es'
 import Nav from '../nav'
+import { Robot, RobotActive } from '../../base/icons/src/public/header-nav/studio'
 import { fetchAppDetail, fetchAppList } from '@/service/apps'
 import NewAppDialog from '@/app/(commonLayout)/apps/NewAppDialog'
-import { Container } from '@/app/components/base/icons/src/vender/line/development'
-import { Container as ContainerSolid } from '@/app/components/base/icons/src/vender/solid/development'
 import type { AppListResponse } from '@/models/app'
+import { useAppContext } from '@/context/app-context'
 
 const getKey = (pageIndex: number, previousPageData: AppListResponse) => {
   if (!pageIndex || previousPageData.has_more)
@@ -21,6 +21,8 @@ const getKey = (pageIndex: number, previousPageData: AppListResponse) => {
 
 const AppNav = () => {
   const { t } = useTranslation()
+  const { isCurrentWorkspaceManager } = useAppContext()
+
   const [showNewAppDialog, setShowNewAppDialog] = useState(false)
   const { appId } = useParams()
   const isAppDetailPage = usePathname().split('/').includes('app')
@@ -35,8 +37,8 @@ const AppNav = () => {
   return (
     <>
       <Nav
-        icon={<Container className='w-4 h-4' />}
-        activeIcon={<ContainerSolid className='w-4 h-4' />}
+        icon={<Robot className='w-4 h-4' />}
+        activeIcon={<RobotActive className='w-4 h-4' />}
         text={t('common.menus.apps')}
         activeSegment={['apps', 'app']}
         link='/apps'
@@ -44,7 +46,7 @@ const AppNav = () => {
         navs={appItems.map(item => ({
           id: item.id,
           name: item.name,
-          link: `/app/${item.id}/overview`,
+          link: `/app/${item.id}/${isCurrentWorkspaceManager ? 'configuration' : 'overview'}`,
           icon: item.icon,
           icon_background: item.icon_background,
         }))}
diff --git a/web/app/components/header/app-selector/index.tsx b/web/app/components/header/app-selector/index.tsx
index 947884de8f..49836a3e05 100644
--- a/web/app/components/header/app-selector/index.tsx
+++ b/web/app/components/header/app-selector/index.tsx
@@ -65,7 +65,7 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
                 appItems.map((app: AppDetailResponse) => (
                   <Menu.Item key={app.id}>
                     <div className={itemClassName} onClick={() =>
-                      router.push(`/app/${app.id}/overview`)
+                      router.push(`/app/${app.id}/${isCurrentWorkspaceManager ? 'configuration' : 'overview'}`)
                     }>
                       <div className='relative w-6 h-6 mr-2 bg-[#D5F5F6] rounded-[6px]'>
                         <AppIcon size='tiny' />
diff --git a/web/app/components/header/dataset-nav/index.tsx b/web/app/components/header/dataset-nav/index.tsx
index f51af8f8ad..eaca54a857 100644
--- a/web/app/components/header/dataset-nav/index.tsx
+++ b/web/app/components/header/dataset-nav/index.tsx
@@ -7,9 +7,8 @@ import useSWR from 'swr'
 import useSWRInfinite from 'swr/infinite'
 import { flatten } from 'lodash-es'
 import Nav from '../nav'
+import { Knowledge, KnowledgeActive } from '../../base/icons/src/public/header-nav/knowledge'
 import { fetchDatasetDetail, fetchDatasets } from '@/service/datasets'
-import { Database01 } from '@/app/components/base/icons/src/vender/line/development'
-import { Database02 } from '@/app/components/base/icons/src/vender/solid/development'
 import type { DataSetListResponse } from '@/models/datasets'
 
 const getKey = (pageIndex: number, previousPageData: DataSetListResponse) => {
@@ -39,8 +38,8 @@ const DatasetNav = () => {
 
   return (
     <Nav
-      icon={<Database01 className='w-4 h-4' />}
-      activeIcon={<Database02 className='w-4 h-4' />}
+      icon={<Knowledge className='w-4 h-4' />}
+      activeIcon={<KnowledgeActive className='w-4 h-4' />}
       text={t('common.menus.datasets')}
       activeSegment='datasets'
       link='/datasets'
diff --git a/web/app/components/header/explore-nav/index.tsx b/web/app/components/header/explore-nav/index.tsx
index b67f918d38..2aefbc56f6 100644
--- a/web/app/components/header/explore-nav/index.tsx
+++ b/web/app/components/header/explore-nav/index.tsx
@@ -4,9 +4,7 @@ import { useTranslation } from 'react-i18next'
 import Link from 'next/link'
 import { useSelectedLayoutSegment } from 'next/navigation'
 import classNames from 'classnames'
-import { Grid01 } from '@/app/components/base/icons/src/vender/line/layout'
-import { Grid01 as Grid01Solid } from '@/app/components/base/icons/src/vender/solid/layout'
-
+import { Explore, ExploreActive } from '../../base/icons/src/public/header-nav/explore'
 type ExploreNavProps = {
   className?: string
 }
@@ -26,8 +24,8 @@ const ExploreNav = ({
     )}>
       {
         actived
-          ? <Grid01Solid className='mr-2 w-4 h-4' />
-          : <Grid01 className='mr-2 w-4 h-4' />
+          ? <ExploreActive className='mr-2 w-4 h-4' />
+          : <Explore className='mr-2 w-4 h-4' />
       }
       {t('common.menus.explore')}
     </Link>
diff --git a/web/app/components/header/index.tsx b/web/app/components/header/index.tsx
index 4c6eb79acb..3a818903e4 100644
--- a/web/app/components/header/index.tsx
+++ b/web/app/components/header/index.tsx
@@ -10,6 +10,7 @@ import AppNav from './app-nav'
 import DatasetNav from './dataset-nav'
 import EnvNav from './env-nav'
 import ExploreNav from './explore-nav'
+import ToolsNav from './tools-nav'
 import GithubStar from './github-star'
 import { WorkspaceProvider } from '@/context/workspace-context'
 import { useAppContext } from '@/context/app-context'
@@ -71,6 +72,7 @@ const Header = () => {
           <ExploreNav className={navClassName} />
           <AppNav />
           {isCurrentWorkspaceManager && <DatasetNav />}
+          <ToolsNav className={navClassName} />
         </div>
       )}
       <div className='flex items-center flex-shrink-0'>
@@ -89,7 +91,7 @@ const Header = () => {
           </div>
         )}
         <WorkspaceProvider>
-          <AccountDropdown isMobile={isMobile}/>
+          <AccountDropdown isMobile={isMobile} />
         </WorkspaceProvider>
       </div>
       {(isMobile && isShowNavMenu) && (
@@ -97,6 +99,7 @@ const Header = () => {
           <ExploreNav className={navClassName} />
           <AppNav />
           {isCurrentWorkspaceManager && <DatasetNav />}
+          <ToolsNav className={navClassName} />
         </div>
       )}
     </div>
diff --git a/web/app/components/header/tools-nav/index.tsx b/web/app/components/header/tools-nav/index.tsx
new file mode 100644
index 0000000000..84544a28c8
--- /dev/null
+++ b/web/app/components/header/tools-nav/index.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import { useTranslation } from 'react-i18next'
+import Link from 'next/link'
+import { useSelectedLayoutSegment } from 'next/navigation'
+import classNames from 'classnames'
+import { Tools, ToolsActive } from '../../base/icons/src/public/header-nav/tools'
+type ToolsNavProps = {
+  className?: string
+}
+
+const ToolsNav = ({
+  className,
+}: ToolsNavProps) => {
+  const { t } = useTranslation()
+  const selectedSegment = useSelectedLayoutSegment()
+  const actived = selectedSegment === 'tools'
+
+  return (
+    <Link href="/tools" className={classNames(
+      className, 'group',
+      actived && 'bg-white shadow-md',
+      actived ? 'text-primary-600' : 'text-gray-500 hover:bg-gray-200',
+    )}>
+      {
+        actived
+          ? <ToolsActive className='mr-2 w-4 h-4' />
+          : <Tools className='mr-2 w-4 h-4' />
+      }
+      {t('common.menus.tools')}
+    </Link>
+  )
+}
+
+export default ToolsNav
diff --git a/web/app/components/share/chat/index.tsx b/web/app/components/share/chat/index.tsx
index 852b68ee49..65ee919000 100644
--- a/web/app/components/share/chat/index.tsx
+++ b/web/app/components/share/chat/index.tsx
@@ -6,10 +6,11 @@ import cn from 'classnames'
 import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
-import produce from 'immer'
+import produce, { setAutoFreeze } from 'immer'
 import { useBoolean, useGetState } from 'ahooks'
 import AppUnavailable from '../../base/app-unavailable'
 import { checkOrSetAccessToken } from '../utils'
+import { addFileInfos, sortAgentSorts } from '../../tools/utils'
 import useConversation from './hooks/use-conversation'
 import { ToastContext } from '@/app/components/base/toast'
 import Sidebar from '@/app/components/share/chat/sidebar'
@@ -18,6 +19,7 @@ import Header from '@/app/components/share/header'
 import {
   delConversation,
   fetchAppInfo,
+  fetchAppMeta,
   fetchAppParams,
   fetchChatList,
   fetchConversations,
@@ -29,7 +31,7 @@ import {
   unpinConversation,
   updateFeedback,
 } from '@/service/share'
-import type { ConversationItem, SiteInfo } from '@/models/share'
+import type { AppMeta, ConversationItem, SiteInfo } from '@/models/share'
 import type { PromptConfig, SuggestedQuestionsAfterAnswerConfig } from '@/models/debug'
 import type { Feedbacktype, IChatItem } from '@/app/components/app/chat/type'
 import Chat from '@/app/components/app/chat'
@@ -73,6 +75,7 @@ const Main: FC<IMainProps> = ({
   const [plan, setPlan] = useState<string>('basic') // basic/plus/pro
   const [canReplaceLogo, setCanReplaceLogo] = useState<boolean>(false)
   const [customConfig, setCustomConfig] = useState<any>(null)
+  const [appMeta, setAppMeta] = useState<AppMeta | null>(null)
   // in mobile, show sidebar by click button
   const [isShowSidebar, { setTrue: showSidebar, setFalse: hideSidebar }] = useBoolean(false)
   // Can Use metadata(https://beta.nextjs.org/docs/api-reference/metadata) to set title. But it only works in server side client.
@@ -111,6 +114,7 @@ const Main: FC<IMainProps> = ({
     existConversationInfo,
     setExistConversationInfo,
   } = useConversation()
+  const [suggestedQuestions, setSuggestQuestions] = useState<string[]>([])
   const [hasMore, setHasMore] = useState<boolean>(true)
   const [hasPinnedMore, setHasPinnedMore] = useState<boolean>(true)
   const onMoreLoaded = ({ data: conversations, has_more }: any) => {
@@ -197,6 +201,14 @@ const Main: FC<IMainProps> = ({
   const conversationIntroduction = currConversationInfo?.introduction || ''
   const [controlChatUpdateAllConversation, setControlChatUpdateAllConversation] = useState(0)
 
+  // onData change thought (the produce obj). https://github.com/immerjs/immer/issues/576
+  useEffect(() => {
+    setAutoFreeze(false)
+    return () => {
+      setAutoFreeze(true)
+    }
+  }, [])
+
   useEffect(() => {
     (async () => {
       if (controlChatUpdateAllConversation && !isNewConversation) {
@@ -251,14 +263,16 @@ const Main: FC<IMainProps> = ({
             id: `question-${item.id}`,
             content: item.query,
             isAnswer: false,
-            message_files: item.message_files,
+            message_files: item.message_files?.filter((file: any) => file.belongs_to === 'user') || [],
           })
           newChatList.push({
             id: item.id,
             content: item.answer,
+            agent_thoughts: addFileInfos(item.agent_thoughts ? sortAgentSorts(item.agent_thoughts) : item.agent_thoughts, item.message_files),
             feedback: item.feedback,
             isAnswer: true,
             citation: item.retriever_resources,
+            message_files: item.message_files?.filter((file: any) => file.belongs_to === 'assistant') || [],
           })
         })
         setChatList(newChatList)
@@ -321,14 +335,13 @@ const Main: FC<IMainProps> = ({
     const caculatedPromptVariables = inputs || currInputs || null
     if (caculatedIntroduction && caculatedPromptVariables)
       caculatedIntroduction = replaceStringWithValues(caculatedIntroduction, promptConfig?.prompt_variables || [], caculatedPromptVariables)
-
-    // console.log(isPublicVersion)
     const openstatement = {
       id: `${Date.now()}`,
       content: caculatedIntroduction,
       isAnswer: true,
       feedbackDisabled: true,
       isOpeningStatement: true,
+      suggestedQuestions: openingSuggestedQuestions,
     }
     if (caculatedIntroduction)
       return [openstatement]
@@ -356,7 +369,7 @@ const Main: FC<IMainProps> = ({
         },
         plan: 'basic',
       }
-      : fetchAppInfo(), fetchAllConversations(), fetchAppParams(isInstalledApp, installedAppInfo?.id)])
+      : fetchAppInfo(), fetchAllConversations(), fetchAppParams(isInstalledApp, installedAppInfo?.id), fetchAppMeta(isInstalledApp, installedAppInfo?.id)])
   }
 
   const { data: fileUploadConfigResponse } = useSWR(isInstalledApp ? { url: '/files/upload' } : null, fetchFileUploadConfig)
@@ -365,7 +378,8 @@ const Main: FC<IMainProps> = ({
   useEffect(() => {
     (async () => {
       try {
-        const [appData, conversationData, appParams]: any = await fetchInitData()
+        const [appData, conversationData, appParams, appMeta]: any = await fetchInitData()
+        setAppMeta(appMeta)
         const { app_id: appId, site: siteInfo, plan, can_replace_logo, custom_config }: any = appData
         setAppId(appId)
         setPlan(plan)
@@ -380,7 +394,7 @@ const Main: FC<IMainProps> = ({
         const isNotNewConversation = allConversations.some(item => item.id === _conversationId)
         setAllConversationList(allConversations)
         // fetch new conversation info
-        const { user_input_form, opening_statement: introduction, suggested_questions_after_answer, speech_to_text, retriever_resource, file_upload, sensitive_word_avoidance }: any = appParams
+        const { user_input_form, opening_statement: introduction, suggested_questions, suggested_questions_after_answer, speech_to_text, retriever_resource, file_upload, sensitive_word_avoidance }: any = appParams
         setVisionConfig({
           ...file_upload.image,
           image_file_size_limit: appParams?.system_parameters?.image_file_size_limit,
@@ -393,6 +407,8 @@ const Main: FC<IMainProps> = ({
           name: t('share.chat.newChatDefaultName'),
           introduction,
         })
+        setOpeningSuggestedQuestions(suggested_questions || [])
+
         setSiteInfo(siteInfo as SiteInfo)
         setPromptConfig({
           prompt_template,
@@ -460,16 +476,41 @@ const Main: FC<IMainProps> = ({
   const [controlFocus, setControlFocus] = useState(0)
   const [isShowSuggestion, setIsShowSuggestion] = useState(false)
   const doShowSuggestion = isShowSuggestion && !isResponsing
-  const [suggestQuestions, setSuggestQuestions] = useState<string[]>([])
+  const [openingSuggestedQuestions, setOpeningSuggestedQuestions] = useState<string[]>([])
   const [messageTaskId, setMessageTaskId] = useState('')
   const [hasStopResponded, setHasStopResponded, getHasStopResponded] = useGetState(false)
   const [isResponsingConIsCurrCon, setIsResponsingConCurrCon, getIsResponsingConIsCurrCon] = useGetState(true)
+  const [userQuery, setUserQuery] = useState('')
   const [visionConfig, setVisionConfig] = useState<VisionSettings>({
     enabled: false,
     number_limits: 2,
     detail: Resolution.low,
     transfer_methods: [TransferMethod.local_file],
   })
+
+  const updateCurrentQA = ({
+    responseItem,
+    questionId,
+    placeholderAnswerId,
+    questionItem,
+  }: {
+    responseItem: IChatItem
+    questionId: string
+    placeholderAnswerId: string
+    questionItem: IChatItem
+  }) => {
+    // closesure new list is outdated.
+    const newListWithAnswer = produce(
+      getChatList().filter(item => item.id !== responseItem.id && item.id !== placeholderAnswerId),
+      (draft) => {
+        if (!draft.find(item => item.id === questionId))
+          draft.push({ ...questionItem })
+
+        draft.push({ ...responseItem })
+      })
+    setChatList(newListWithAnswer)
+  }
+
   const handleSend = async (message: string, files?: VisionFile[]) => {
     if (isResponsing) {
       notify({ type: 'info', message: t('appDebug.errorMessage.waitForResponse') })
@@ -506,6 +547,7 @@ const Main: FC<IMainProps> = ({
       content: message,
       isAnswer: false,
       message_files: files,
+
     }
 
     const placeholderAnswerId = `answer-placeholder-${Date.now()}`
@@ -518,12 +560,18 @@ const Main: FC<IMainProps> = ({
     const newList = [...getChatList(), questionItem, placeholderAnswerItem]
     setChatList(newList)
 
+    let isAgentMode = false
+
     // answer
     const responseItem: IChatItem = {
       id: `${Date.now()}`,
       content: '',
+      agent_thoughts: [],
+      message_files: [],
       isAnswer: true,
     }
+    let hasSetResponseId = false
+
     const prevTempNewConversationId = getCurrConversationId() || '-1'
     let tempNewConversationId = prevTempNewConversationId
 
@@ -536,8 +584,19 @@ const Main: FC<IMainProps> = ({
         setAbortController(abortController)
       },
       onData: (message: string, isFirstMessage: boolean, { conversationId: newConversationId, messageId, taskId }: any) => {
-        responseItem.content = responseItem.content + message
-        responseItem.id = messageId
+        if (!isAgentMode) {
+          responseItem.content = responseItem.content + message
+        }
+        else {
+          const lastThought = responseItem.agent_thoughts?.[responseItem.agent_thoughts?.length - 1]
+          if (lastThought)
+            lastThought.thought = lastThought.thought + message // need immer setAutoFreeze
+        }
+        if (messageId && !hasSetResponseId) {
+          responseItem.id = messageId
+          hasSetResponseId = true
+        }
+
         if (isFirstMessage && newConversationId)
           tempNewConversationId = newConversationId
 
@@ -547,16 +606,12 @@ const Main: FC<IMainProps> = ({
           setIsResponsingConCurrCon(false)
           return
         }
-        // closesure new list is outdated.
-        const newListWithAnswer = produce(
-          getChatList().filter(item => item.id !== responseItem.id && item.id !== placeholderAnswerId),
-          (draft) => {
-            if (!draft.find(item => item.id === questionId))
-              draft.push({ ...questionItem })
-
-            draft.push({ ...responseItem })
-          })
-        setChatList(newListWithAnswer)
+        updateCurrentQA({
+          responseItem,
+          questionId,
+          placeholderAnswerId,
+          questionItem,
+        })
       },
       async onCompleted(hasError?: boolean) {
         if (hasError)
@@ -583,6 +638,56 @@ const Main: FC<IMainProps> = ({
         }
         setResponsingFalse()
       },
+      onFile(file) {
+        const lastThought = responseItem.agent_thoughts?.[responseItem.agent_thoughts?.length - 1]
+        if (lastThought)
+          lastThought.message_files = [...(lastThought as any).message_files, { ...file }]
+
+        updateCurrentQA({
+          responseItem,
+          questionId,
+          placeholderAnswerId,
+          questionItem,
+        })
+      },
+      onThought(thought) {
+        // console.log(`${thought.id};${thought.thought};${thought.tool};${thought.tool_input}`)
+
+        isAgentMode = true
+        const response = responseItem as any
+        if (thought.message_id && !hasSetResponseId) {
+          response.id = thought.message_id
+          hasSetResponseId = true
+        }
+        // responseItem.id = thought.message_id;
+        if (response.agent_thoughts.length === 0) {
+          response.agent_thoughts.push(thought)
+        }
+        else {
+          const lastThought = response.agent_thoughts[response.agent_thoughts.length - 1]
+          // thought changed but still the same thought, so update.
+          if (lastThought.id === thought.id) {
+            thought.thought = lastThought.thought
+            thought.message_files = lastThought.message_files
+            responseItem.agent_thoughts![response.agent_thoughts.length - 1] = thought
+          }
+          else {
+            responseItem.agent_thoughts!.push(thought)
+          }
+        }
+        // has switched to other conversation
+        if (prevTempNewConversationId !== getCurrConversationId()) {
+          setIsResponsingConCurrCon(false)
+          return false
+        }
+
+        updateCurrentQA({
+          responseItem,
+          questionId,
+          placeholderAnswerId,
+          questionItem,
+        })
+      },
       onMessageEnd: (messageEnd) => {
         if (messageEnd.metadata?.annotation_reply) {
           responseItem.id = messageEnd.id
@@ -765,6 +870,8 @@ const Main: FC<IMainProps> = ({
                 <div className='h-full overflow-y-auto' ref={chatListDomRef}>
                   <Chat
                     chatList={chatList}
+                    query={userQuery}
+                    onQueryChange={setUserQuery}
                     onSend={handleSend}
                     isHideFeedbackEdit
                     onFeedback={handleFeedback}
@@ -778,13 +885,14 @@ const Main: FC<IMainProps> = ({
                     checkCanSend={checkCanSend}
                     controlFocus={controlFocus}
                     isShowSuggestion={doShowSuggestion}
-                    suggestionList={suggestQuestions}
+                    suggestionList={suggestedQuestions}
                     isShowSpeechToText={speechToTextConfig?.enabled}
                     isShowCitation={citationConfig?.enabled && isInstalledApp}
                     visionConfig={{
                       ...visionConfig,
                       image_file_size_limit: fileUploadConfigResponse ? fileUploadConfigResponse.image_file_size_limit : visionConfig.image_file_size_limit,
                     }}
+                    allToolIcons={appMeta?.tool_icons || {}}
                   />
                 </div>
               </div>)
diff --git a/web/app/components/share/utils.ts b/web/app/components/share/utils.ts
index 7c10644e2a..6362fd8330 100644
--- a/web/app/components/share/utils.ts
+++ b/web/app/components/share/utils.ts
@@ -1,5 +1,4 @@
 import { fetchAccessToken } from '@/service/share'
-
 export const checkOrSetAccessToken = async () => {
   const sharedToken = globalThis.location.pathname.split('/').slice(-1)[0]
   const accessToken = localStorage.getItem('token') || JSON.stringify({ [sharedToken]: '' })
diff --git a/web/app/components/tools/contribute.tsx b/web/app/components/tools/contribute.tsx
new file mode 100644
index 0000000000..c261791e40
--- /dev/null
+++ b/web/app/components/tools/contribute.tsx
@@ -0,0 +1,31 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Heart02 } from '../base/icons/src/vender/solid/education'
+import { BookOpen01 } from '../base/icons/src/vender/line/education'
+
+const Contribute: FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='shrink-0 p-2'>
+      <div className='inline-block p-2 bg-white shadow-lg rounded-lg'>
+        <Heart02 className='w-3 h-3 text-[#EE46BC]' />
+      </div>
+      <div className='mt-2'>
+        <div className='text-gradient'>
+          {t('tools.contribute.line1')}
+        </div>
+        <div className='text-gradient'>
+          {t('tools.contribute.line2')}
+        </div>
+      </div>
+      <a href='https://github.com/langgenius/dify/blob/main/CONTRIBUTING.md' target='_blank' className='mt-1 flex items-center space-x-1 text-[#155EEF]'>
+        <BookOpen01 className='w-3 h-3' />
+        <div className='leading-[18px] text-xs font-normal'>{t('tools.contribute.viewGuide')}</div>
+      </a>
+    </div>
+  )
+}
+export default React.memo(Contribute)
diff --git a/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx b/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
new file mode 100644
index 0000000000..150768096d
--- /dev/null
+++ b/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
@@ -0,0 +1,108 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+import type { Credential } from '@/app/components/tools/types'
+import Drawer from '@/app/components/base/drawer-plus'
+import Button from '@/app/components/base/button'
+import Radio from '@/app/components/base/radio/ui'
+import { AuthType } from '@/app/components/tools/types'
+
+type Props = {
+  credential: Credential
+  onChange: (credential: Credential) => void
+  onHide: () => void
+}
+const keyClassNames = 'py-2 leading-5 text-sm font-medium text-gray-900'
+
+type ItemProps = {
+  text: string
+  value: AuthType
+  isChecked: boolean
+  onClick: (value: AuthType) => void
+}
+
+const SelectItem: FC<ItemProps> = ({ text, value, isChecked, onClick }) => {
+  return (
+    <div
+      className={cn(isChecked ? 'border-[2px] border-indigo-600 shadow-sm bg-white' : 'border border-gray-100', 'mb-2 flex items-center h-9 pl-3 w-[150px] rounded-xl bg-gray-25 hover:bg-gray-50 cursor-pointer space-x-2')}
+      onClick={() => onClick(value)}
+    >
+      <Radio isChecked={isChecked} />
+      <div className='text-sm font-normal text-gray-900'>{text}</div>
+
+    </div>
+  )
+}
+
+const ConfigCredential: FC<Props> = ({
+  credential,
+  onChange,
+  onHide,
+}) => {
+  const { t } = useTranslation()
+  const [tempCredential, setTempCredential] = React.useState<Credential>(credential)
+  return (
+    <Drawer
+      isShow
+      onHide={onHide}
+      title={t('tools.createTool.authMethod.title')!}
+      panelClassName='mt-2 !w-[520px]'
+      maxWidthClassName='!max-w-[520px]'
+      height='calc(100vh - 16px)'
+      headerClassName='!border-b-black/5'
+      body={
+        <div className='pt-2 px-6'>
+          <div className='space-y-4'>
+            <div>
+              <div className={keyClassNames}>{t('tools.createTool.authMethod.type')}</div>
+              <div className='flex space-x-3'>
+                <SelectItem
+                  text={t('tools.createTool.authMethod.types.none')}
+                  value={AuthType.none}
+                  isChecked={tempCredential.auth_type === AuthType.none}
+                  onClick={value => setTempCredential({ ...tempCredential, auth_type: value })}
+                />
+                <SelectItem
+                  text={t('tools.createTool.authMethod.types.api_key')}
+                  value={AuthType.apiKey}
+                  isChecked={tempCredential.auth_type === AuthType.apiKey}
+                  onClick={value => setTempCredential({ ...tempCredential, auth_type: value })}
+                />
+              </div>
+            </div>
+            {tempCredential.auth_type === AuthType.apiKey && (
+              <>
+                <div>
+                  <div className={keyClassNames}>{t('tools.createTool.authMethod.key')}</div>
+                  <input
+                    value={tempCredential.api_key_header}
+                    onChange={e => setTempCredential({ ...tempCredential, api_key_header: e.target.value })}
+                    className='w-full h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow' />
+                </div>
+
+                <div>
+                  <div className={keyClassNames}>{t('tools.createTool.authMethod.value')}</div>
+                  <input
+                    value={tempCredential.api_key_value}
+                    onChange={e => setTempCredential({ ...tempCredential, api_key_value: e.target.value })}
+                    className='w-full h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow' />
+                </div>
+              </>)}
+
+          </div>
+
+          <div className='mt-4 shrink-0 flex justify-end space-x-2 py-4'>
+            <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium !text-gray-700' onClick={onHide}>{t('common.operation.cancel')}</Button>
+            <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium' type='primary' onClick={() => {
+              onChange(tempCredential)
+              onHide()
+            }}>{t('common.operation.save')}</Button>
+          </div>
+        </div>
+      }
+    />
+  )
+}
+export default React.memo(ConfigCredential)
diff --git a/web/app/components/tools/edit-custom-collection-modal/examples.ts b/web/app/components/tools/edit-custom-collection-modal/examples.ts
new file mode 100644
index 0000000000..0a3d023ca7
--- /dev/null
+++ b/web/app/components/tools/edit-custom-collection-modal/examples.ts
@@ -0,0 +1,181 @@
+const examples = [
+  {
+    key: 'json',
+    content: `{
+      "openapi": "3.1.0",
+      "info": {
+        "title": "Get weather data",
+        "description": "Retrieves current weather data for a location.",
+        "version": "v1.0.0"
+      },
+      "servers": [
+        {
+          "url": "https://weather.example.com"
+        }
+      ],
+      "paths": {
+        "/location": {
+          "get": {
+            "description": "Get temperature for a specific location",
+            "operationId": "GetCurrentWeather",
+            "parameters": [
+              {
+                "name": "location",
+                "in": "query",
+                "description": "The city and state to retrieve the weather for",
+                "required": true,
+                "schema": {
+                  "type": "string"
+                }
+              }
+            ],
+            "deprecated": false
+          }
+        }
+      },
+      "components": {
+        "schemas": {}
+      }
+    }`,
+  },
+  {
+    key: 'yaml',
+    content: `# Taken from https://github.com/OAI/OpenAPI-Specification/blob/main/examples/v3.0/petstore.yaml
+
+    openapi: "3.0.0"
+    info:
+      version: 1.0.0
+      title: Swagger Petstore
+      license:
+        name: MIT
+    servers:
+      - url: https://petstore.swagger.io/v1
+    paths:
+      /pets:
+        get:
+          summary: List all pets
+          operationId: listPets
+          tags:
+            - pets
+          parameters:
+            - name: limit
+              in: query
+              description: How many items to return at one time (max 100)
+              required: false
+              schema:
+                type: integer
+                maximum: 100
+                format: int32
+          responses:
+            '200':
+              description: A paged array of pets
+              headers:
+                x-next:
+                  description: A link to the next page of responses
+                  schema:
+                    type: string
+              content:
+                application/json:    
+                  schema:
+                    $ref: "#/components/schemas/Pets"
+            default:
+              description: unexpected error
+              content:
+                application/json:
+                  schema:
+                    $ref: "#/components/schemas/Error"
+        post:
+          summary: Create a pet
+          operationId: createPets
+          tags:
+            - pets
+          responses:
+            '201':
+              description: Null response
+            default:
+              description: unexpected error
+              content:
+                application/json:
+                  schema:
+                    $ref: "#/components/schemas/Error"
+      /pets/{petId}:
+        get:
+          summary: Info for a specific pet
+          operationId: showPetById
+          tags:
+            - pets
+          parameters:
+            - name: petId
+              in: path
+              required: true
+              description: The id of the pet to retrieve
+              schema:
+                type: string
+          responses:
+            '200':
+              description: Expected response to a valid request
+              content:
+                application/json:
+                  schema:
+                    $ref: "#/components/schemas/Pet"
+            default:
+              description: unexpected error
+              content:
+                application/json:
+                  schema:
+                    $ref: "#/components/schemas/Error"
+    components:
+      schemas:
+        Pet:
+          type: object
+          required:
+            - id
+            - name
+          properties:
+            id:
+              type: integer
+              format: int64
+            name:
+              type: string
+            tag:
+              type: string
+        Pets:
+          type: array
+          maxItems: 100
+          items:
+            $ref: "#/components/schemas/Pet"
+        Error:
+          type: object
+          required:
+            - code
+            - message
+          properties:
+            code:
+              type: integer
+              format: int32
+            message:
+              type: string`,
+  },
+  {
+    key: 'blankTemplate',
+    content: `{
+      "openapi": "3.1.0",
+      "info": {
+        "title": "Untitled",
+        "description": "Your OpenAPI specification",
+        "version": "v1.0.0"
+      },
+      "servers": [
+        {
+          "url": ""
+        }
+      ],
+      "paths": {},
+      "components": {
+        "schemas": {}
+      }
+    }`,
+  },
+]
+
+export default examples
diff --git a/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx b/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx
new file mode 100644
index 0000000000..ac1ae55f77
--- /dev/null
+++ b/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx
@@ -0,0 +1,117 @@
+'use client'
+import type { FC } from 'react'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useClickAway } from 'ahooks'
+import Toast from '../../base/toast'
+import { Plus } from '../../base/icons/src/vender/line/general'
+import { ChevronDown } from '../../base/icons/src/vender/line/arrows'
+import examples from './examples'
+import Button from '@/app/components/base/button'
+import { importSchemaFromURL } from '@/service/tools'
+
+type Props = {
+  onChange: (value: string) => void
+}
+
+const GetSchema: FC<Props> = ({
+  onChange,
+}) => {
+  const { t } = useTranslation()
+  const [showImportFromUrl, setShowImportFromUrl] = useState(false)
+  const [importUrl, setImportUrl] = useState('')
+  const [isParsing, setIsParsing] = useState(false)
+  const handleImportFromUrl = async () => {
+    if (!importUrl.startsWith('http://') && !importUrl.startsWith('https://')) {
+      Toast.notify({
+        type: 'error',
+        message: t('tools.createTool.urlError'),
+      })
+      return
+    }
+    setIsParsing(true)
+    try {
+      const { schema } = await importSchemaFromURL(importUrl) as any
+      setImportUrl('')
+      onChange(schema)
+    }
+    finally {
+      setIsParsing(false)
+      setShowImportFromUrl(false)
+    }
+  }
+
+  const importURLRef = React.useRef(null)
+  useClickAway(() => {
+    setShowImportFromUrl(false)
+  }, importURLRef)
+
+  const [showExamples, setShowExamples] = useState(false)
+  const showExamplesRef = React.useRef(null)
+  useClickAway(() => {
+    setShowExamples(false)
+  }, showExamplesRef)
+
+  return (
+    <div className='flex space-x-1 justify-end relative w-[224px]'>
+      <div ref={importURLRef}>
+        <Button
+          className='flex items-center !h-6 !px-2 space-x-1 '
+          onClick={() => { setShowImportFromUrl(!showImportFromUrl) }}
+        >
+          <Plus className='w-3 h-3' />
+          <div className='text-xs font-medium text-gray-700'>{t('tools.createTool.importFromUrl')}</div>
+        </Button>
+        {showImportFromUrl && (
+          <div className=' absolute left-[-35px] top-[26px] p-2 rounded-lg border border-gray-200 bg-white shadow-lg'>
+            <div className='relative'>
+              <input
+                type='text'
+                className='w-[244px] h-8 pl-1.5 pr-[44px] overflow-x-auto border border-gray-200 rounded-lg text-[13px]'
+                placeholder={t('tools.createTool.importFromUrlPlaceHolder')!}
+                value={importUrl}
+                onChange={e => setImportUrl(e.target.value)}
+              />
+              <Button
+                className='absolute top-1 right-1 !h-6 !px-2 text-xs font-medium'
+                type='primary'
+                disabled={!importUrl}
+                onClick={handleImportFromUrl}
+                loading={isParsing}
+              >
+                {isParsing ? '' : t('common.operation.ok')}
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+      <div className='relative' ref={showExamplesRef}>
+        <Button
+          className='flex items-center !h-6 !px-2 space-x-1'
+          onClick={() => { setShowExamples(!showExamples) }}
+        >
+          <div className='text-xs font-medium text-gray-700'>{t('tools.createTool.examples')}</div>
+          <ChevronDown className='w-3 h-3' />
+        </Button>
+        {showExamples && (
+          <div className='absolute top-7 right-0 p-1 rounded-lg bg-white shadow-sm'>
+            {examples.map(item => (
+              <div
+                key={item.key}
+                onClick={() => {
+                  onChange(item.content)
+                  setShowExamples(false)
+                }}
+                className='px-3 py-1.5 rounded-lg hover:bg-gray-50 leading-5 text-sm font-normal text-gray-700 cursor-pointer whitespace-nowrap'
+              >
+                {t(`tools.createTool.exampleOptions.${item.key}`)}
+              </div>
+            ))}
+          </div>
+        )}
+
+      </div>
+    </div>
+  )
+}
+export default React.memo(GetSchema)
diff --git a/web/app/components/tools/edit-custom-collection-modal/index.tsx b/web/app/components/tools/edit-custom-collection-modal/index.tsx
new file mode 100644
index 0000000000..2b4a317a47
--- /dev/null
+++ b/web/app/components/tools/edit-custom-collection-modal/index.tsx
@@ -0,0 +1,290 @@
+'use client'
+import type { FC } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import produce from 'immer'
+import { useDebounce, useGetState } from 'ahooks'
+import { clone } from 'lodash-es'
+import cn from 'classnames'
+import { LinkExternal02, Settings01 } from '../../base/icons/src/vender/line/general'
+import type { Credential, CustomCollectionBackend, CustomParamSchema, Emoji } from '../types'
+import { AuthType } from '../types'
+import GetSchema from './get-schema'
+import ConfigCredentials from './config-credentials'
+import TestApi from './test-api'
+import Drawer from '@/app/components/base/drawer-plus'
+import Button from '@/app/components/base/button'
+import EmojiPicker from '@/app/components/base/emoji-picker'
+import AppIcon from '@/app/components/base/app-icon'
+import { parseParamsSchema } from '@/service/tools'
+
+const fieldNameClassNames = 'py-2 leading-5 text-sm font-medium text-gray-900'
+type Props = {
+  payload: any
+  onHide: () => void
+  onAdd?: (payload: CustomCollectionBackend) => void
+  onRemove?: () => void
+  onEdit?: (payload: CustomCollectionBackend) => void
+}
+// Add and Edit
+const EditCustomCollectionModal: FC<Props> = ({
+  payload,
+  onHide,
+  onAdd,
+  onEdit,
+  onRemove,
+}) => {
+  const { t } = useTranslation()
+  const isAdd = !payload
+  const isEdit = !!payload
+  const [editFirst, setEditFirst] = useState(!isAdd)
+  const [paramsSchemas, setParamsSchemas] = useState<CustomParamSchema[]>(payload?.tools || [])
+  const [customCollection, setCustomCollection, getCustomCollection] = useGetState<CustomCollectionBackend>(isAdd
+    ? {
+      provider: '',
+      credentials: {
+        auth_type: AuthType.none,
+      },
+      icon: {
+        content: '🕵️',
+        background: '#FEF7C3',
+      },
+      schema_type: '',
+      schema: '',
+    }
+    : payload)
+
+  const originalProvider = isEdit ? payload.provider : ''
+
+  const [showEmojiPicker, setShowEmojiPicker] = useState(false)
+  const emoji = customCollection.icon
+  const setEmoji = (emoji: Emoji) => {
+    const newCollection = produce(customCollection, (draft) => {
+      draft.icon = emoji
+    })
+    setCustomCollection(newCollection)
+  }
+  const schema = customCollection.schema
+  const debouncedSchema = useDebounce(schema, { wait: 500 })
+  const setSchema = (schema: string) => {
+    const newCollection = produce(customCollection, (draft) => {
+      draft.schema = schema
+    })
+    setCustomCollection(newCollection)
+  }
+
+  useEffect(() => {
+    if (!debouncedSchema)
+      return
+    if (isEdit && editFirst) {
+      setEditFirst(false)
+      return
+    }
+    (async () => {
+      const customCollection = getCustomCollection()
+      try {
+        const { parameters_schema, schema_type } = await parseParamsSchema(debouncedSchema) as any
+        const newCollection = produce(customCollection, (draft) => {
+          draft.schema_type = schema_type
+        })
+        setCustomCollection(newCollection)
+        setParamsSchemas(parameters_schema)
+      }
+      catch (e) {
+        const newCollection = produce(customCollection, (draft) => {
+          draft.schema_type = ''
+        })
+        setCustomCollection(newCollection)
+        setParamsSchemas([])
+      }
+    })()
+  }, [debouncedSchema])
+
+  const [credentialsModalShow, setCredentialsModalShow] = useState(false)
+  const credential = customCollection.credentials
+  const setCredential = (credential: Credential) => {
+    const newCollection = produce(customCollection, (draft) => {
+      draft.credentials = credential
+    })
+    setCustomCollection(newCollection)
+  }
+
+  const [currTool, setCurrTool] = useState<CustomParamSchema | null>(null)
+  const [isShowTestApi, setIsShowTestApi] = useState(false)
+
+  const handleSave = () => {
+    const postData = clone(customCollection)
+    delete postData.tools
+    if (isAdd) {
+      onAdd?.(postData)
+      return
+    }
+
+    onEdit?.({
+      ...postData,
+      original_provider: originalProvider,
+    })
+  }
+
+  return (
+    <>
+      <Drawer
+        isShow
+        onHide={onHide}
+        title={t(`tools.createTool.${isAdd ? 'title' : 'editTitle'}`)!}
+        panelClassName='mt-2 !w-[640px]'
+        maxWidthClassName='!max-w-[640px]'
+        height='calc(100vh - 16px)'
+        headerClassName='!border-b-black/5'
+        body={
+          <div className='flex flex-col h-full'>
+            <div className='grow h-0 overflow-y-auto px-6 py-3 space-y-4'>
+              <div>
+                <div className={fieldNameClassNames}>{t('tools.createTool.name')}</div>
+                <div className='flex items-center justify-between gap-3'>
+                  <AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} className='cursor-pointer' icon={emoji.content} background={emoji.background} />
+                  <input
+                    className='h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow' placeholder={t('tools.createTool.toolNamePlaceHolder')!}
+                    value={customCollection.provider}
+                    onChange={(e) => {
+                      const newCollection = produce(customCollection, (draft) => {
+                        draft.provider = e.target.value
+                      })
+                      setCustomCollection(newCollection)
+                    }}
+                  />
+                </div>
+              </div>
+
+              {/* Schema */}
+              <div className='select-none'>
+                <div className='flex justify-between items-center'>
+                  <div className='flex items-center'>
+                    <div className={fieldNameClassNames}>{t('tools.createTool.schema')}</div>
+                    <div className='mx-2 w-px h-3 bg-black/5'></div>
+                    <a
+                      href="https://swagger.io/specification/"
+                      target='_blank'
+                      className='flex items-center h-[18px] space-x-1  text-[#155EEF]'
+                    >
+                      <div className='text-xs font-normal'>{t('tools.createTool.viewSchemaSpec')}</div>
+                      <LinkExternal02 className='w-3 h-3' />
+                    </a>
+                  </div>
+                  <GetSchema onChange={setSchema} />
+
+                </div>
+                <textarea
+                  value={schema}
+                  onChange={e => setSchema(e.target.value)}
+                  className='w-full h-[240px] px-3 py-2 leading-4 text-xs font-normal text-gray-900 bg-gray-100 rounded-lg overflow-y-auto'
+                  placeholder={t('tools.createTool.schemaPlaceHolder')!}
+                ></textarea>
+              </div>
+
+              {/* Available Tools  */}
+              <div>
+                <div className={fieldNameClassNames}>{t('tools.createTool.availableTools.title')}</div>
+                <div className='rounded-lg border border-gray-200 w-full overflow-x-auto'>
+                  <table className='w-full leading-[18px] text-xs text-gray-700 font-normal'>
+                    <thead className='text-gray-500 uppercase'>
+                      <tr className={cn(paramsSchemas.length > 0 && 'border-b', 'border-gray-200')}>
+                        <th className="p-2 pl-3 font-medium">{t('tools.createTool.availableTools.name')}</th>
+                        <th className="p-2 pl-3 font-medium w-[236px]">{t('tools.createTool.availableTools.description')}</th>
+                        <th className="p-2 pl-3 font-medium">{t('tools.createTool.availableTools.method')}</th>
+                        <th className="p-2 pl-3 font-medium">{t('tools.createTool.availableTools.path')}</th>
+                        <th className="p-2 pl-3 font-medium w-[54px]">{t('tools.createTool.availableTools.action')}</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {paramsSchemas.map((item, index) => (
+                        <tr key={index} className='border-b last:border-0 border-gray-200'>
+                          <td className="p-2 pl-3">{item.operation_id}</td>
+                          <td className="p-2 pl-3 text-gray-500 w-[236px]">{item.summary}</td>
+                          <td className="p-2 pl-3">{item.method}</td>
+                          <td className="p-2 pl-3">{item.server_url ? new URL(item.server_url).pathname : ''}</td>
+                          <td className="p-2 pl-3 w-[62px]">
+                            <Button
+                              className='!h-6 !px-2 text-xs font-medium text-gray-700'
+                              onClick={() => {
+                                setCurrTool(item)
+                                setIsShowTestApi(true)
+                              }}
+                            >
+                              {t('tools.createTool.availableTools.test')}
+                            </Button>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+
+              {/* Authorization method */}
+              <div>
+                <div className={fieldNameClassNames}>{t('tools.createTool.authMethod.title')}</div>
+                <div className='flex items-center h-9 justify-between px-2.5 bg-gray-100 rounded-lg cursor-pointer' onClick={() => setCredentialsModalShow(true)}>
+                  <div className='text-sm font-normal text-gray-900'>{t(`tools.createTool.authMethod.types.${credential.auth_type}`)}</div>
+                  <Settings01 className='w-4 h-4 text-gray-700 opacity-60' />
+                </div>
+              </div>
+
+              <div>
+                <div className={fieldNameClassNames}>{t('tools.createTool.privacyPolicy')}</div>
+                <input
+                  value={customCollection.privacy_policy}
+                  onChange={(e) => {
+                    const newCollection = produce(customCollection, (draft) => {
+                      draft.privacy_policy = e.target.value
+                    })
+                    setCustomCollection(newCollection)
+                  }}
+                  className='w-full h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow' placeholder={t('tools.createTool.privacyPolicyPlaceholder') || ''} />
+              </div>
+
+            </div>
+            <div className={cn(isEdit ? 'justify-between' : 'justify-end', 'mt-2 shrink-0 flex py-4 px-6 rounded-b-[10px] bg-gray-50 border-t border-black/5')} >
+              {
+                isEdit && (
+                  <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium !text-gray-700' onClick={onRemove}>{t('common.operation.remove')}</Button>
+                )
+              }
+              <div className='flex space-x-2 '>
+                <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium !text-gray-700' onClick={onHide}>{t('common.operation.cancel')}</Button>
+                <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium' type='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
+              </div>
+            </div>
+          </div>
+        }
+        isShowMask={true}
+        clickOutsideNotOpen={true}
+      />
+      {showEmojiPicker && <EmojiPicker
+        onSelect={(icon, icon_background) => {
+          setEmoji({ content: icon, background: icon_background })
+          setShowEmojiPicker(false)
+        }}
+        onClose={() => {
+          setShowEmojiPicker(false)
+        }}
+      />}
+      {credentialsModalShow && (
+        <ConfigCredentials
+          credential={credential}
+          onChange={setCredential}
+          onHide={() => setCredentialsModalShow(false)}
+        />)
+      }
+      {isShowTestApi && (
+        <TestApi
+          tool={currTool as CustomParamSchema}
+          customCollection={customCollection}
+          onHide={() => setIsShowTestApi(false)}
+        />
+      )}
+    </>
+
+  )
+}
+export default React.memo(EditCustomCollectionModal)
diff --git a/web/app/components/tools/edit-custom-collection-modal/test-api.tsx b/web/app/components/tools/edit-custom-collection-modal/test-api.tsx
new file mode 100644
index 0000000000..d4b54c1b9e
--- /dev/null
+++ b/web/app/components/tools/edit-custom-collection-modal/test-api.tsx
@@ -0,0 +1,120 @@
+'use client'
+import type { FC } from 'react'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import { Settings01 } from '../../base/icons/src/vender/line/general'
+import ConfigCredentials from './config-credentials'
+import type { Credential, CustomCollectionBackend, CustomParamSchema } from '@/app/components/tools/types'
+import Button from '@/app/components/base/button'
+import Drawer from '@/app/components/base/drawer-plus'
+import I18n from '@/context/i18n'
+import { testAPIAvailable } from '@/service/tools'
+
+type Props = {
+  customCollection: CustomCollectionBackend
+  tool: CustomParamSchema
+  onHide: () => void
+}
+
+const keyClassNames = 'py-2 leading-5 text-sm font-medium text-gray-900'
+
+const TestApi: FC<Props> = ({
+  customCollection,
+  tool,
+  onHide,
+}) => {
+  const { t } = useTranslation()
+  const { locale } = useContext(I18n)
+  const [credentialsModalShow, setCredentialsModalShow] = useState(false)
+  const [tempCredential, setTempCredential] = React.useState<Credential>(customCollection.credentials)
+  const [result, setResult] = useState<string>('')
+  const { operation_id: toolName, parameters } = tool
+  const [parametersValue, setParametersValue] = useState<Record<string, string>>({})
+  const handleTest = async () => {
+    const data = {
+      tool_name: toolName,
+      credentials: tempCredential,
+      schema_type: customCollection.schema_type,
+      schema: customCollection.schema,
+      parameters: parametersValue,
+    }
+    const res = await testAPIAvailable(data) as any
+    setResult(res.error || res.result)
+  }
+
+  return (
+    <>
+      <Drawer
+        isShow
+        onHide={onHide}
+        title={`${t('tools.test.title')}  ${toolName}`}
+        panelClassName='mt-2 !w-[600px]'
+        maxWidthClassName='!max-w-[600px]'
+        height='calc(100vh - 16px)'
+        headerClassName='!border-b-black/5'
+        body={
+          <div className='pt-2 px-6 overflow-y-auto'>
+            <div className='space-y-4'>
+              <div>
+                <div className={keyClassNames}>{t('tools.createTool.authMethod.title')}</div>
+                <div className='flex items-center h-9 justify-between px-2.5 bg-gray-100 rounded-lg cursor-pointer' onClick={() => setCredentialsModalShow(true)}>
+                  <div className='text-sm font-normal text-gray-900'>{t(`tools.createTool.authMethod.types.${tempCredential.auth_type}`)}</div>
+                  <Settings01 className='w-4 h-4 text-gray-700 opacity-60' />
+                </div>
+              </div>
+
+              <div>
+                <div className={keyClassNames}>{t('tools.test.parametersValue')}</div>
+                <div className='rounded-lg border border-gray-200'>
+                  <table className='w-full leading-[18px] text-xs text-gray-700 font-normal'>
+                    <thead className='text-gray-500 uppercase'>
+                      <tr className='border-b border-gray-200'>
+                        <th className="p-2 pl-3 font-medium">{t('tools.test.parameters')}</th>
+                        <th className="p-2 pl-3 font-medium">{t('tools.test.value')}</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {parameters.map((item, index) => (
+                        <tr key={index} className='border-b last:border-0 border-gray-200'>
+                          <td className="py-2 pl-3 pr-2.5">
+                            {item.label[locale === 'en' ? 'en_US' : 'zh_Hans']}
+                          </td>
+                          <td className="">
+                            <input
+                              value={parametersValue[item.name] || ''}
+                              onChange={e => setParametersValue({ ...parametersValue, [item.name]: e.target.value })}
+                              type='text' className='px-3 h-[34px] w-full outline-none focus:bg-gray-100' ></input>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+
+            </div>
+            <Button type='primary' className=' mt-4 w-full h-10 !text-[13px] leading-[18px] font-medium' onClick={handleTest}>{t('tools.test.title')}</Button>
+            <div className='mt-6'>
+              <div className='flex items-center space-x-3'>
+                <div className='leading-[18px] text-xs font-semibold text-gray-500'>{t('tools.test.testResult')}</div>
+                <div className='grow w-0 h-px bg-[rgb(243, 244, 246)]'></div>
+              </div>
+              <div className='mt-2 px-3 py-2 h-[200px] overflow-y-auto overflow-x-hidden rounded-lg bg-gray-100 leading-4 text-xs font-normal text-gray-700'>
+                {result || <span className='text-gray-400'>{t('tools.test.testResultPlaceholder')}</span>}
+              </div>
+            </div>
+          </div>
+        }
+      />
+      {credentialsModalShow && (
+        <ConfigCredentials
+          credential={tempCredential}
+          onChange={setTempCredential}
+          onHide={() => setCredentialsModalShow(false)}
+        />)
+      }
+    </>
+  )
+}
+export default React.memo(TestApi)
diff --git a/web/app/components/tools/index.tsx b/web/app/components/tools/index.tsx
new file mode 100644
index 0000000000..6407b17f2d
--- /dev/null
+++ b/web/app/components/tools/index.tsx
@@ -0,0 +1,232 @@
+'use client'
+import type { FC } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+import Button from '../base/button'
+import { Plus } from '../base/icons/src/vender/line/general'
+import Toast from '../base/toast'
+import type { Collection, CustomCollectionBackend, Tool } from './types'
+import { CollectionType, LOC } from './types'
+import ToolNavList from './tool-nav-list'
+import Search from './search'
+import Contribute from './contribute'
+import ToolList from './tool-list'
+import EditCustomToolModal from './edit-custom-collection-modal'
+import NoCustomTool from './info/no-custom-tool'
+import NoSearchRes from './info/no-search-res'
+import TabSlider from '@/app/components/base/tab-slider'
+import { createCustomCollection, fetchCollectionList as doFetchCollectionList, fetchBuiltInToolList, fetchCustomToolList } from '@/service/tools'
+import type { AgentTool } from '@/types/app'
+
+type Props = {
+  loc: LOC
+  addedTools?: AgentTool[]
+  onAddTool?: (collection: Collection, payload: Tool) => void
+  selectedProviderId?: string
+}
+
+const Tools: FC<Props> = ({
+  loc,
+  addedTools,
+  onAddTool,
+  selectedProviderId,
+}) => {
+  const { t } = useTranslation()
+  const isInToolsPage = loc === LOC.tools
+  const isInDebugPage = !isInToolsPage
+
+  const [collectionList, setCollectionList] = useState<Collection[]>([])
+  const [currCollectionIndex, setCurrCollectionIndex] = useState<number | null>(null)
+
+  const [isDetailLoading, setIsDetailLoading] = useState(false)
+
+  const fetchCollectionList = async () => {
+    const list = await doFetchCollectionList() as Collection[]
+    setCollectionList(list)
+    if (list.length > 0 && currCollectionIndex === null) {
+      let index = 0
+      if (selectedProviderId)
+        index = list.findIndex(item => item.id === selectedProviderId)
+
+      setCurrCollectionIndex(index || 0)
+    }
+  }
+  useEffect(() => {
+    fetchCollectionList()
+  }, [])
+
+  const collectionTypeOptions = (() => {
+    const res = [
+      { value: CollectionType.builtIn, text: t('tools.type.builtIn') },
+      { value: CollectionType.custom, text: t('tools.type.custom') },
+    ]
+    if (!isInToolsPage)
+      res.unshift({ value: CollectionType.all, text: t('tools.type.all') })
+    return res
+  })()
+
+  const [query, setQuery] = useState('')
+  const [collectionType, setCollectionType] = useState<CollectionType>(collectionTypeOptions[0].value)
+
+  const showCollectionList = (() => {
+    let typeFilteredList: Collection[] = []
+    if (collectionType === CollectionType.all)
+      typeFilteredList = collectionList
+    else
+      typeFilteredList = collectionList.filter(item => item.type === collectionType)
+    if (query)
+      return typeFilteredList.filter(item => item.name.includes(query))
+
+    return typeFilteredList
+  })()
+
+  const hasNoCustomCollection = !collectionList.find(item => item.type === CollectionType.custom)
+
+  useEffect(() => {
+    setCurrCollectionIndex(0)
+  }, [collectionType])
+
+  const currCollection = (() => {
+    if (currCollectionIndex === null)
+      return null
+    return showCollectionList[currCollectionIndex]
+  })()
+
+  const [currTools, setCurrentTools] = useState<Tool[]>([])
+  useEffect(() => {
+    if (!currCollection)
+      return
+
+    (async () => {
+      setIsDetailLoading(true)
+      try {
+        if (currCollection.type === CollectionType.builtIn) {
+          const list = await fetchBuiltInToolList(currCollection.name) as Tool[]
+          setCurrentTools(list)
+        }
+        else {
+          const list = await fetchCustomToolList(currCollection.name) as Tool[]
+          setCurrentTools(list)
+        }
+      }
+      catch (e) { }
+      setIsDetailLoading(false)
+    })()
+  }, [currCollection?.name])
+
+  const [isShowEditCollectionToolModal, setIsShowEditCollectionToolModal] = useState(false)
+  const handleCreateToolCollection = () => {
+    setIsShowEditCollectionToolModal(true)
+  }
+
+  const doCreateCustomToolCollection = async (data: CustomCollectionBackend) => {
+    await createCustomCollection(data)
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.actionSuccess'),
+    })
+    await fetchCollectionList()
+    setIsShowEditCollectionToolModal(false)
+  }
+
+  return (
+    <>
+      <div className='flex h-full'>
+        {/* sidebar */}
+        <div className={cn(isInToolsPage ? 'sm:w-[216px] px-4' : 'sm:w-[256px] px-3', 'flex flex-col  w-16 shrink-0 pb-2')}>
+          {isInToolsPage && (
+            <Button className='mt-6 flex items-center !h-8 pl-4' type='primary' onClick={handleCreateToolCollection}>
+              <Plus className='w-4 h-4 mr-1' />
+              <div className='leading-[18px] text-[13px] font-medium'>{t('tools.createCustomTool')}</div>
+            </Button>
+          )}
+
+          {isInDebugPage && (
+            <div className='mt-6 flex space-x-1 items-center'>
+              <Search
+                className='grow'
+                value={query}
+                onChange={setQuery}
+              />
+              <Button className='flex items-center justify-center !w-8 !h-8 !p-0' type='primary'>
+                <Plus className='w-4 h-4' onClick={handleCreateToolCollection} />
+              </Button>
+            </div>
+          )}
+
+          <TabSlider
+            className='mt-3'
+            itemWidth={isInToolsPage ? 89 : 75}
+            value={collectionType}
+            onChange={v => setCollectionType(v as CollectionType)}
+            options={collectionTypeOptions}
+          />
+          {isInToolsPage && (
+            <Search
+              className='mt-5'
+              value={query}
+              onChange={setQuery}
+            />
+          )}
+
+          {(collectionType === CollectionType.custom && hasNoCustomCollection)
+            ? (
+              <div className='grow h-0 p-2 pt-8'>
+                <NoCustomTool onCreateTool={handleCreateToolCollection} />
+              </div>
+            )
+            : (
+              (showCollectionList.length > 0 || !query)
+                ? <ToolNavList
+                  className='mt-2 grow height-0 overflow-y-auto'
+                  currentName={currCollection?.name || ''}
+                  list={showCollectionList}
+                  onChosen={setCurrCollectionIndex}
+                />
+                : (
+                  <div className='grow h-0 p-2 pt-8'>
+                    <NoSearchRes
+                      onReset={() => { setQuery('') }}
+                    />
+                  </div>
+                )
+            )}
+
+          {loc === LOC.tools && (
+            <Contribute />
+          )}
+        </div>
+
+        {/* tools */}
+        <div className={cn('grow h-full overflow-hidden p-2')}>
+          <div className='h-full bg-white rounded-2xl'>
+            {!(collectionType === CollectionType.custom && hasNoCustomCollection) && showCollectionList.length > 0 && (
+              <ToolList
+                collection={currCollection}
+                list={currTools}
+                loc={loc}
+                addedTools={addedTools}
+                onAddTool={onAddTool}
+                onRefreshData={fetchCollectionList}
+                onCollectionRemoved={() => {
+                  setCurrCollectionIndex(0)
+                  fetchCollectionList()
+                }}
+                isLoading={isDetailLoading}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+      {isShowEditCollectionToolModal && (
+        <EditCustomToolModal
+          payload={null}
+          onHide={() => setIsShowEditCollectionToolModal(false)}
+          onAdd={doCreateCustomToolCollection}
+        />
+      )}
+    </>
+  )
+}
+export default React.memo(Tools)
diff --git a/web/app/components/tools/info/no-custom-tool.tsx b/web/app/components/tools/info/no-custom-tool.tsx
new file mode 100644
index 0000000000..dd49ee2e71
--- /dev/null
+++ b/web/app/components/tools/info/no-custom-tool.tsx
@@ -0,0 +1,38 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Tools } from '@/app/components/base/icons/src/public/header-nav/tools'
+
+type Props = {
+  onCreateTool: () => void
+}
+
+const NoCustomTool: FC<Props> = ({
+  onCreateTool,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div>
+      <div className='inline-flex p-3 rounded-lg  bg-gray-50 border border-[#EAECF5]'>
+        <Tools className='w-5 h-5 text-gray-500' />
+      </div>
+      <div className='mt-2'>
+        <div className='leading-5 text-sm font-medium text-gray-500'>
+          {t('tools.noCustomTool.title')}
+        </div>
+        <div className='mt-1 leading-[18px] text-xs font-normal text-gray-500'>
+          {t('tools.noCustomTool.content')}
+        </div>
+        <div
+          className='mt-2 leading-[18px] text-xs font-medium text-[#155EEF] uppercase cursor-pointer'
+          onClick={onCreateTool}
+        >
+          {t('tools.noCustomTool.createTool')}
+        </div>
+      </div>
+    </div>
+  )
+}
+export default React.memo(NoCustomTool)
diff --git a/web/app/components/tools/info/no-search-res.tsx b/web/app/components/tools/info/no-search-res.tsx
new file mode 100644
index 0000000000..f4752ab184
--- /dev/null
+++ b/web/app/components/tools/info/no-search-res.tsx
@@ -0,0 +1,38 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { SearchMd } from '../../base/icons/src/vender/solid/general'
+
+type Props = {
+  onReset: () => void
+}
+
+const NoSearchRes: FC<Props> = ({
+  onReset,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div>
+      <div className='inline-flex p-3 rounded-lg  bg-gray-50 border border-[#EAECF5]'>
+        <SearchMd className='w-5 h-5 text-gray-500' />
+      </div>
+      <div className='mt-2'>
+        <div className='leading-5 text-sm font-medium text-gray-500'>
+          {t('tools.noSearchRes.title')}
+        </div>
+        <div className='mt-1 leading-[18px] text-xs font-normal text-gray-500'>
+          {t('tools.noSearchRes.content')}
+        </div>
+        <div
+          className='mt-2 leading-[18px] text-xs font-medium text-[#155EEF] uppercase cursor-pointer'
+          onClick={onReset}
+        >
+          {t('tools.noSearchRes.reset')}
+        </div>
+      </div>
+    </div>
+  )
+}
+export default React.memo(NoSearchRes)
diff --git a/web/app/components/tools/search.tsx b/web/app/components/tools/search.tsx
new file mode 100644
index 0000000000..344d84069e
--- /dev/null
+++ b/web/app/components/tools/search.tsx
@@ -0,0 +1,41 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import cn from 'classnames'
+import {
+  MagnifyingGlassIcon,
+} from '@heroicons/react/24/solid'
+import { useTranslation } from 'react-i18next'
+
+type Props = {
+  className?: string
+  value: string
+  onChange: (v: string) => void
+}
+
+const Search: FC<Props> = ({
+  className,
+  value,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className={cn(className, 'flex relative')}>
+      <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+        <MagnifyingGlassIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+      </div>
+      <input
+        type="text"
+        name="query"
+        className="block w-0 grow bg-gray-200 shadow-sm rounded-md border-0 pl-10 text-gray-900 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-gray-200 focus-visible:outline-none sm:text-sm sm:leading-8"
+        placeholder={t('common.operation.search')!}
+        value={value}
+        onChange={(e) => {
+          onChange(e.target.value)
+        }}
+      />
+    </div>
+  )
+}
+export default React.memo(Search)
diff --git a/web/app/components/tools/setting/build-in/config-credentials.tsx b/web/app/components/tools/setting/build-in/config-credentials.tsx
new file mode 100644
index 0000000000..9922200afe
--- /dev/null
+++ b/web/app/components/tools/setting/build-in/config-credentials.tsx
@@ -0,0 +1,88 @@
+'use client'
+import type { FC } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+import { toolCredentialToFormSchemas } from '../../utils/to-form-schema'
+import type { Collection } from '../../types'
+import Drawer from '@/app/components/base/drawer-plus'
+import Button from '@/app/components/base/button'
+import { fetchBuiltInToolCredentialSchema } from '@/service/tools'
+import Loading from '@/app/components/base/loading'
+import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
+
+type Props = {
+  collection: Collection
+  onCancel: () => void
+  onSaved: (value: Record<string, any>) => void
+  onRemove: () => void
+}
+
+const ConfigCredential: FC<Props> = ({
+  collection,
+  onCancel,
+  onSaved,
+  onRemove,
+}) => {
+  const { t } = useTranslation()
+  const [credentialSchema, setCredentialSchema] = useState<any>(null)
+  const { team_credentials: credentialValue, name: collectionName } = collection
+  useEffect(() => {
+    fetchBuiltInToolCredentialSchema(collectionName).then((res) => {
+      setCredentialSchema(toolCredentialToFormSchemas(res as any))
+    })
+  }, [])
+  const [tempCredential, setTempCredential] = React.useState<any>(credentialValue)
+
+  return (
+    <Drawer
+      isShow
+      onHide={onCancel}
+      title={t('tools.auth.setupModalTitle') as string}
+      titleDescription={t('tools.auth.setupModalTitleDescription') as string}
+      panelClassName='mt-2 !w-[480px]'
+      maxWidthClassName='!max-w-[480px]'
+      height='calc(100vh - 16px)'
+      contentClassName='!bg-gray-100'
+      headerClassName='!border-b-black/5'
+      body={
+
+        <div className='px-6 py-3 h-full'>
+          {!credentialSchema
+            ? <Loading type='app' />
+            : (
+              <>
+                <Form
+                  value={tempCredential}
+                  onChange={(v) => {
+                    setTempCredential(v)
+                  }}
+                  formSchemas={credentialSchema}
+                  isEditMode={true}
+                  showOnVariableMap={{}}
+                  validating={false}
+                  inputClassName='!bg-gray-50'
+                />
+                <div className={cn(collection.is_team_authorization ? 'justify-between' : 'justify-end', 'mt-2 flex ')} >
+                  {
+                    collection.is_team_authorization && (
+                      <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium !text-gray-700' onClick={onRemove}>{t('common.operation.remove')}</Button>
+                    )
+                  }
+                  < div className='flex space-x-2'>
+                    <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium !text-gray-700' onClick={onCancel}>{t('common.operation.cancel')}</Button>
+                    <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium' type='primary' onClick={() => onSaved(tempCredential)}>{t('common.operation.save')}</Button>
+                  </div>
+                </div>
+              </>
+            )
+          }
+
+        </div >
+      }
+      isShowMask={true}
+      clickOutsideNotOpen={false}
+    />
+  )
+}
+export default React.memo(ConfigCredential)
diff --git a/web/app/components/tools/tool-list/header.tsx b/web/app/components/tools/tool-list/header.tsx
new file mode 100644
index 0000000000..f796a27a83
--- /dev/null
+++ b/web/app/components/tools/tool-list/header.tsx
@@ -0,0 +1,74 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useContext } from 'use-context-selector'
+import cn from 'classnames'
+import { useTranslation } from 'react-i18next'
+import type { Collection } from '../types'
+import { CollectionType, LOC } from '../types'
+import { Settings01 } from '../../base/icons/src/vender/line/general'
+import I18n from '@/context/i18n'
+
+type Props = {
+  icon: JSX.Element
+  collection: Collection
+  loc: LOC
+  onShowAuth: () => void
+  onShowEditCustomCollection: () => void
+}
+
+const Header: FC<Props> = ({
+  icon,
+  collection,
+  loc,
+  onShowAuth,
+  onShowEditCustomCollection,
+}) => {
+  const { locale } = useContext(I18n)
+  const { t } = useTranslation()
+  const isInToolsPage = loc === LOC.tools
+  const isInDebugPage = !isInToolsPage
+  const needAuth = collection?.allow_delete
+
+  // const isBuiltIn = collection.type === CollectionType.builtIn
+  const isAuthed = collection.is_team_authorization
+  return (
+    <div className={cn(isInToolsPage ? 'py-4 px-6' : 'py-[11px] pl-4 pr-3', 'flex justify-between items-start border-b border-gray-200')}>
+      <div className='flex items-start w-full'>
+        {icon}
+        <div className='ml-3 grow w-0'>
+          <div className='flex items-center h-6 space-x-1'>
+            <div className={cn(isInDebugPage && 'truncate', 'text-base font-semibold text-gray-900')}>{collection.label[locale === 'en' ? 'en_US' : 'zh_Hans']}</div>
+            <div className='text-xs font-normal text-gray-500'>·</div>
+            <div className='text-xs font-normal text-gray-500'>{t('tools.author')}&nbsp;{collection.author}</div>
+          </div>
+          {collection.description && (
+            <div className={cn('leading-[18px] text-[13px] font-normal text-gray-500')}>
+              {collection.description[locale === 'en' ? 'en_US' : 'zh_Hans']}
+            </div>
+          )}
+        </div>
+      </div>
+      {collection.type === CollectionType.builtIn && needAuth && (
+        <div
+          className={cn('cursor-pointer', 'ml-1 shrink-0 flex items-center h-8 border border-gray-200 rounded-lg px-3 space-x-2 shadow-xs')}
+          onClick={() => onShowAuth()}
+        >
+          <div className={cn(isAuthed ? 'border-[#12B76A] bg-[#32D583]' : 'border-gray-400 bg-gray-300', 'rounded h-2 w-2 border')}></div>
+          <div className='leading-5 text-sm font-medium text-gray-700'>{t(`tools.auth.${isAuthed ? 'authorized' : 'unauthorized'}`)}</div>
+        </div>
+      )}
+
+      {collection.type === CollectionType.custom && (
+        <div
+          className={cn('cursor-pointer', 'ml-1 shrink-0 flex items-center h-8 border border-gray-200 rounded-lg px-3 space-x-2 shadow-xs')}
+          onClick={() => onShowEditCustomCollection()}
+        >
+          <Settings01 className='w-4 h-4 text-gray-700' />
+          <div className='leading-5 text-sm font-medium text-gray-700'>{t('tools.createTool.editAction')}</div>
+        </div>
+      )}
+    </div >
+  )
+}
+export default React.memo(Header)
diff --git a/web/app/components/tools/tool-list/index.tsx b/web/app/components/tools/tool-list/index.tsx
new file mode 100644
index 0000000000..c5a49b7634
--- /dev/null
+++ b/web/app/components/tools/tool-list/index.tsx
@@ -0,0 +1,190 @@
+'use client'
+import type { FC } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+import { CollectionType, LOC } from '../types'
+import type { Collection, CustomCollectionBackend, Tool } from '../types'
+import Loading from '../../base/loading'
+import { ArrowNarrowRight } from '../../base/icons/src/vender/line/arrows'
+import Toast from '../../base/toast'
+import Header from './header'
+import Item from './item'
+import AppIcon from '@/app/components/base/app-icon'
+import ConfigCredential from '@/app/components/tools/setting/build-in/config-credentials'
+import { fetchCustomCollection, removeBuiltInToolCredential, removeCustomCollection, updateBuiltInToolCredential, updateCustomCollection } from '@/service/tools'
+import EditCustomToolModal from '@/app/components/tools/edit-custom-collection-modal'
+import type { AgentTool } from '@/types/app'
+import { MAX_TOOLS_NUM } from '@/config'
+
+type Props = {
+  collection: Collection | null
+  list: Tool[]
+  // onToolListChange: () => void // custom tools change
+  loc: LOC
+  addedTools?: AgentTool[]
+  onAddTool?: (collection: Collection, payload: Tool) => void
+  onRefreshData: () => void
+  onCollectionRemoved: () => void
+  isLoading: boolean
+}
+
+const ToolList: FC<Props> = ({
+  collection,
+  list,
+  loc,
+  addedTools,
+  onAddTool,
+  onRefreshData,
+  onCollectionRemoved,
+  isLoading,
+}) => {
+  const { t } = useTranslation()
+  const isInToolsPage = loc === LOC.tools
+  const isBuiltIn = collection?.type === CollectionType.builtIn
+  const needAuth = collection?.allow_delete
+
+  const [showSettingAuth, setShowSettingAuth] = useState(false)
+
+  const [customCollection, setCustomCollection] = useState<CustomCollectionBackend | null>(null)
+  useEffect(() => {
+    if (!collection)
+      return
+    (async () => {
+      if (collection.type === CollectionType.custom) {
+        const res = await fetchCustomCollection(collection.name) as any
+        setCustomCollection({
+          ...res,
+          provider: collection.name,
+        } as CustomCollectionBackend)
+      }
+    })()
+  }, [collection])
+  const [isShowEditCollectionToolModal, setIsShowEditCustomCollectionModal] = useState(false)
+
+  const doUpdateCustomToolCollection = async (data: CustomCollectionBackend) => {
+    await updateCustomCollection(data)
+    onRefreshData()
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.actionSuccess'),
+    })
+    setIsShowEditCustomCollectionModal(false)
+  }
+
+  const doRemoveCustomToolCollection = async () => {
+    await removeCustomCollection(collection?.name as string)
+    onCollectionRemoved()
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.actionSuccess'),
+    })
+    setIsShowEditCustomCollectionModal(false)
+  }
+
+  if (!collection || isLoading)
+    return <Loading type='app' />
+
+  const icon = <>{typeof collection.icon === 'string'
+    ? (
+      <div
+        className='p-2 bg-cover bg-center border border-gray-100 rounded-lg'
+      >
+        <div className='w-6 h-6 bg-center bg-contain rounded-md'
+          style={{
+            backgroundImage: `url(${collection.icon})`,
+          }}
+        ></div>
+      </div>
+    )
+    : (
+      <AppIcon
+        size='large'
+        icon={collection.icon.content}
+        background={collection.icon.background}
+      />
+    )}
+  </>
+
+  return (
+    <div className='flex flex-col h-full pb-4'>
+      <Header
+        icon={icon}
+        collection={collection}
+        loc={loc}
+        onShowAuth={() => setShowSettingAuth(true)}
+        onShowEditCustomCollection={() => setIsShowEditCustomCollectionModal(true)}
+      />
+      <div className={cn(isInToolsPage ? 'px-6 pt-4' : 'px-4 pt-3')}>
+        <div className='flex items-center h-[4.5] space-x-2  text-xs font-medium text-gray-500'>
+          <div className=''>{t('tools.includeToolNum', {
+            num: list.length,
+          })}</div>
+          {needAuth && isBuiltIn && !collection.is_team_authorization && (
+            <>
+              <div>·</div>
+              <div
+                className='flex items-center text-[#155EEF] cursor-pointer'
+                onClick={() => setShowSettingAuth(true)}
+              >
+                <div>{t('tools.auth.setup')}</div>
+                <ArrowNarrowRight className='ml-0.5 w-3 h-3' />
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+      <div className={cn(isInToolsPage ? 'px-6' : 'px-4', 'grow h-0 pt-2 overflow-y-auto')}>
+        {/* list */}
+        <div className={cn(isInToolsPage ? 'grid-cols-3 gap-4' : 'grid-cols-1 gap-2', 'grid')}>
+          {list.map(item => (
+            <Item
+              key={item.name}
+              icon={icon}
+              payload={item}
+              collection={collection}
+              isInToolsPage={isInToolsPage}
+              isToolNumMax={(addedTools?.length || 0) >= MAX_TOOLS_NUM}
+              added={!!addedTools?.find(v => v.provider_id === collection.id && v.tool_name === item.name)}
+              onAdd={!isInToolsPage ? tool => onAddTool?.(collection as Collection, tool) : undefined}
+            />
+          ))}
+        </div>
+      </div>
+      {showSettingAuth && (
+        <ConfigCredential
+          collection={collection}
+          onCancel={() => setShowSettingAuth(false)}
+          onSaved={async (value) => {
+            await updateBuiltInToolCredential(collection.name, value)
+            Toast.notify({
+              type: 'success',
+              message: t('common.api.actionSuccess'),
+            })
+            await onRefreshData()
+            setShowSettingAuth(false)
+          }}
+          onRemove={async () => {
+            await removeBuiltInToolCredential(collection.name)
+            Toast.notify({
+              type: 'success',
+              message: t('common.api.actionSuccess'),
+            })
+            await onRefreshData()
+            setShowSettingAuth(false)
+          }}
+        />
+      )}
+
+      {isShowEditCollectionToolModal && (
+        <EditCustomToolModal
+          payload={customCollection}
+          onHide={() => setIsShowEditCustomCollectionModal(false)}
+          onEdit={doUpdateCustomToolCollection}
+          onRemove={doRemoveCustomToolCollection}
+        />
+      )}
+    </div>
+  )
+}
+export default React.memo(ToolList)
diff --git a/web/app/components/tools/tool-list/item.tsx b/web/app/components/tools/tool-list/item.tsx
new file mode 100644
index 0000000000..c802bc899f
--- /dev/null
+++ b/web/app/components/tools/tool-list/item.tsx
@@ -0,0 +1,78 @@
+'use client'
+import type { FC } from 'react'
+import React, { useState } from 'react'
+import { useContext } from 'use-context-selector'
+import cn from 'classnames'
+import { useTranslation } from 'react-i18next'
+import type { Collection, Tool } from '../types'
+import Button from '../../base/button'
+import { CollectionType } from '../types'
+import TooltipPlus from '../../base/tooltip-plus'
+import I18n from '@/context/i18n'
+import SettingBuiltInTool from '@/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool'
+
+type Props = {
+  collection: Collection
+  icon: JSX.Element
+  payload: Tool
+  isInToolsPage: boolean
+  isToolNumMax: boolean
+  added?: boolean
+  onAdd?: (payload: Tool) => void
+}
+
+const Item: FC<Props> = ({
+  collection,
+  icon,
+  payload,
+  isInToolsPage,
+  isToolNumMax,
+  added,
+  onAdd,
+}) => {
+  const { t } = useTranslation()
+  const { locale } = useContext(I18n)
+  const isBuiltIn = collection.type === CollectionType.builtIn
+  const canShowDetail = !isBuiltIn || (isBuiltIn && isInToolsPage)
+  const [showDetail, setShowDetail] = useState(false)
+  const addBtn = <Button className='shrink-0 flex items-center h-7 !px-3 !text-xs !font-medium !text-gray-700' disabled={added || !collection.is_team_authorization} onClick={() => onAdd?.(payload)}>{t(`common.operation.${added ? 'added' : 'add'}`)}</Button>
+  return (
+    <>
+      <div
+        className={cn(canShowDetail && 'cursor-pointer', 'flex justify-between items-start p-4 rounded-xl border border-gray-200 bg-gray-50 shadow-xs')}
+        onClick={() => canShowDetail && setShowDetail(true)}
+      >
+        <div className='flex items-start w-full'>
+          {icon}
+          <div className='ml-3 w-0 grow'>
+            <div className={cn('text-base font-semibold text-gray-900 truncate')}>{payload.label[locale === 'en' ? 'en_US' : 'zh_Hans']}</div>
+            <div className={cn('leading-[18px] text-[13px] font-normal text-gray-500')}>
+              {payload.description[locale === 'en' ? 'en_US' : 'zh_Hans']}
+            </div>
+          </div>
+        </div>
+        <div className='shrink-0'>
+          {!isToolNumMax && onAdd && (
+            !collection.is_team_authorization
+              ? <TooltipPlus popupContent={t('tools.auth.unauthorized')}>
+                {addBtn}
+              </TooltipPlus>
+              : addBtn
+          )}
+        </div>
+      </div>
+      {showDetail && isBuiltIn && (
+        <SettingBuiltInTool
+          collection={collection}
+          toolName={payload.name}
+          readonly
+          onHide={() => {
+            setShowDetail(false)
+          }}
+        />
+      )}
+    </>
+
+  )
+}
+export default React.memo(Item)
diff --git a/web/app/components/tools/tool-nav-list/index.tsx b/web/app/components/tools/tool-nav-list/index.tsx
new file mode 100644
index 0000000000..1fab9de7a3
--- /dev/null
+++ b/web/app/components/tools/tool-nav-list/index.tsx
@@ -0,0 +1,28 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import cn from 'classnames'
+import Item from './item'
+import type { Collection } from '@/app/components/tools/types'
+type Props = {
+  className?: string
+  currentName: string
+  list: Collection[]
+  onChosen: (index: number) => void
+}
+
+const ToolNavList: FC<Props> = ({
+  className,
+  currentName,
+  list,
+  onChosen,
+}) => {
+  return (
+    <div className={cn(className)}>
+      {list.map((item, index) => (
+        <Item isCurrent={item.name === currentName} key={item.name} payload={item} onClick={() => onChosen(index)}></Item>
+      ))}
+    </div>
+  )
+}
+export default React.memo(ToolNavList)
diff --git a/web/app/components/tools/tool-nav-list/item.tsx b/web/app/components/tools/tool-nav-list/item.tsx
new file mode 100644
index 0000000000..b426d29df3
--- /dev/null
+++ b/web/app/components/tools/tool-nav-list/item.tsx
@@ -0,0 +1,49 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useContext } from 'use-context-selector'
+import cn from 'classnames'
+import AppIcon from '../../base/app-icon'
+import type { Collection } from '@/app/components/tools/types'
+import I18n from '@/context/i18n'
+
+type Props = {
+  isCurrent: boolean
+  payload: Collection
+  onClick: () => void
+}
+
+const Item: FC<Props> = ({
+  isCurrent,
+  payload,
+  onClick,
+}) => {
+  const { locale } = useContext(I18n)
+
+  return (
+    <div
+      className={cn(isCurrent && 'bg-white shadow-xs rounded-lg', 'mt-1 flex h-9 items-center px-2 space-x-2 cursor-pointer')}
+      onClick={() => !isCurrent && onClick()}
+    >
+      {typeof payload.icon === 'string'
+        ? (
+          <div
+            className='w-6 h-6 bg-cover bg-center rounded-md'
+            style={{
+              backgroundImage: `url(${payload.icon})`,
+            }}
+          ></div>
+        )
+        : (
+          <AppIcon
+            size='tiny'
+            icon={payload.icon.content}
+            background={payload.icon.background}
+          />
+        )}
+      <div className={cn(isCurrent && 'text-primary-600 font-semibold', 'leading-5 text-sm font-normal truncate')}>{payload.label[locale === 'en' ? 'en_US' : 'zh_Hans']}</div>
+
+    </div>
+  )
+}
+export default React.memo(Item)
diff --git a/web/app/components/tools/types.ts b/web/app/components/tools/types.ts
new file mode 100644
index 0000000000..1fdb3172c4
--- /dev/null
+++ b/web/app/components/tools/types.ts
@@ -0,0 +1,111 @@
+import type { TypeWithI18N } from '../header/account-setting/model-provider-page/declarations'
+export enum LOC {
+  tools = 'tools',
+  app = 'app',
+}
+
+export enum AuthType {
+  none = 'none',
+  apiKey = 'api_key',
+}
+
+export type Credential = {
+  'auth_type': AuthType
+  'api_key_header'?: string
+  'api_key_value'?: string
+}
+
+export enum CollectionType {
+  all = 'all',
+  builtIn = 'builtin',
+  custom = 'api',
+}
+
+export type Emoji = {
+  background: string
+  content: string
+}
+
+export type Collection = {
+  id: string
+  name: string
+  author: string
+  description: TypeWithI18N
+  icon: string | Emoji
+  label: TypeWithI18N
+  type: CollectionType
+  team_credentials: Record<string, any>
+  is_team_authorization: boolean
+  allow_delete: boolean
+}
+
+export type ToolParameter = {
+  name: string
+  label: TypeWithI18N
+  human_description: TypeWithI18N
+  type: string
+  required: boolean
+  default: string
+  options?: {
+    label: TypeWithI18N
+    value: string
+  }[]
+}
+
+export type Tool = {
+  name: string
+  label: TypeWithI18N
+  description: {
+    zh_Hans: string
+    en_US: string
+  }
+  parameters: ToolParameter[]
+}
+
+export type ToolCredential = {
+  name: string
+  label: TypeWithI18N
+  help: TypeWithI18N
+  placeholder: TypeWithI18N
+  type: string
+  required: boolean
+  default: string
+  options?: {
+    label: TypeWithI18N
+    value: string
+  }[]
+}
+
+export type CustomCollectionBackend = {
+  provider: string
+  original_provider?: string
+  credentials: Credential
+  icon: Emoji
+  schema_type: string
+  schema: string
+  privacy_policy: string
+  tools?: ParamItem[]
+}
+
+export type ParamItem = {
+  name: string
+  label: TypeWithI18N
+  human_description: TypeWithI18N
+  type: string
+  required: boolean
+  default: string
+  min?: number
+  max?: number
+  options?: {
+    label: TypeWithI18N
+    value: string
+  }[]
+}
+
+export type CustomParamSchema = {
+  operation_id: string // name
+  summary: string
+  server_url: string
+  method: string
+  parameters: ParamItem[]
+}
diff --git a/web/app/components/tools/utils/index.ts b/web/app/components/tools/utils/index.ts
new file mode 100644
index 0000000000..c4e1a3858e
--- /dev/null
+++ b/web/app/components/tools/utils/index.ts
@@ -0,0 +1,26 @@
+import type { ThoughtItem } from '../../app/chat/type'
+import type { VisionFile } from '@/types/app'
+
+export const sortAgentSorts = (list: ThoughtItem[]) => {
+  if (!list)
+    return list
+  if (list.some(item => item.position === undefined))
+    return list
+  const temp = [...list]
+  temp.sort((a, b) => a.position - b.position)
+  return temp
+}
+
+export const addFileInfos = (list: ThoughtItem[], messageFiles: VisionFile[]) => {
+  if (!list || !messageFiles)
+    return list
+  return list.map((item) => {
+    if (item.files && item.files?.length > 0) {
+      return {
+        ...item,
+        message_files: item.files.map(fileId => messageFiles.find(file => file.id === fileId)) as VisionFile[],
+      }
+    }
+    return item
+  })
+}
diff --git a/web/app/components/tools/utils/to-form-schema.ts b/web/app/components/tools/utils/to-form-schema.ts
new file mode 100644
index 0000000000..50b4fc63e8
--- /dev/null
+++ b/web/app/components/tools/utils/to-form-schema.ts
@@ -0,0 +1,64 @@
+import type { ToolCredential, ToolParameter } from '../types'
+const toType = (type: string) => {
+  switch (type) {
+    case 'string':
+      return 'text-input'
+    case 'number':
+      return 'number-input'
+    default:
+      return type
+  }
+}
+export const toolParametersToFormSchemas = (parameters: ToolParameter[]) => {
+  if (!parameters)
+    return []
+
+  const formSchemas = parameters.map((parameter) => {
+    return {
+      ...parameter,
+      variable: parameter.name,
+      type: toType(parameter.type),
+      show_on: [],
+      options: parameter.options?.map((option) => {
+        return {
+          ...option,
+          show_on: [],
+        }
+      }),
+      tooltip: parameter.human_description,
+    }
+  })
+  return formSchemas
+}
+
+export const toolCredentialToFormSchemas = (parameters: ToolCredential[]) => {
+  if (!parameters)
+    return []
+
+  const formSchemas = parameters.map((parameter) => {
+    return {
+      ...parameter,
+      variable: parameter.name,
+      label: parameter.label,
+      tooltip: parameter.help,
+      show_on: [],
+      options: parameter.options?.map((option) => {
+        return {
+          ...option,
+          show_on: [],
+        }
+      }),
+    }
+  })
+  return formSchemas
+}
+
+export const addDefaultValue = (value: Record<string, any>, formSchemas: { variable: string; default?: any }[]) => {
+  const newValues = { ...value }
+  formSchemas.forEach((formSchema) => {
+    const itemValue = value[formSchema.variable]
+    if (formSchema.default && (value === undefined || itemValue === null || itemValue === ''))
+      newValues[formSchema.variable] = formSchema.default
+  })
+  return newValues
+}
diff --git a/web/config/index.ts b/web/config/index.ts
index 9a530a0849..f3dab8f91d 100644
--- a/web/config/index.ts
+++ b/web/config/index.ts
@@ -1,5 +1,5 @@
 /* eslint-disable import/no-mutable-exports */
-import { AppType, ProviderType } from '@/types/app'
+import { AgentStrategy, AppType, ProviderType } from '@/types/app'
 
 const isDevelopment = process.env.NODE_ENV === 'development'
 
@@ -152,3 +152,99 @@ export const APP_PAGE_LIMIT = 10
 export const ANNOTATION_DEFAULT = {
   score_threshold: 0.9,
 }
+
+export const MAX_TOOLS_NUM = 5
+
+export const DEFAULT_AGENT_SETTING = {
+  enabled: false,
+  max_iteration: 5,
+  strategy: AgentStrategy.functionCall,
+  tools: [],
+}
+
+export const DEFAULT_AGENT_PROMPT = {
+  chat: `Respond to the human as helpfully and accurately as possible. 
+
+  {{instruction}}
+  
+  You have access to the following tools:
+  
+  {{tools}}
+  
+  Use a json blob to specify a tool by providing an {{TOOL_NAME_KEY}} key (tool name) and an {{ACTION_INPUT_KEY}} key (tool input).
+  Valid "{{TOOL_NAME_KEY}}" values: "Final Answer" or {{tool_names}}
+  
+  Provide only ONE action per $JSON_BLOB, as shown:
+  
+  \`\`\`
+  {
+    "{{TOOL_NAME_KEY}}": $TOOL_NAME,
+    "{{ACTION_INPUT_KEY}}": $ACTION_INPUT
+  }
+  \`\`\`
+  
+  Follow this format:
+  
+  Question: input question to answer
+  Thought: consider previous and subsequent steps
+  Action:
+  \`\`\`
+  $JSON_BLOB
+  \`\`\`
+  Observation: action result
+  ... (repeat Thought/Action/Observation N times)
+  Thought: I know what to respond
+  Action:
+  \`\`\`
+  {
+    "{{TOOL_NAME_KEY}}": "Final Answer",
+    "{{ACTION_INPUT_KEY}}": "Final response to human"
+  }
+  \`\`\`
+  
+  Begin! Reminder to ALWAYS respond with a valid json blob of a single action. Use tools if necessary. Respond directly if appropriate. Format is Action:\`\`\`$JSON_BLOB\`\`\`then Observation:.`,
+  completion: `
+  Respond to the human as helpfully and accurately as possible. 
+
+{{instruction}}
+
+You have access to the following tools:
+
+{{tools}}
+
+Use a json blob to specify a tool by providing an {{TOOL_NAME_KEY}} key (tool name) and an {{ACTION_INPUT_KEY}} key (tool input).
+Valid "{{TOOL_NAME_KEY}}" values: "Final Answer" or {{tool_names}}
+
+Provide only ONE action per $JSON_BLOB, as shown:
+
+\`\`\`
+{{{{
+  "{{TOOL_NAME_KEY}}": $TOOL_NAME,
+  "{{ACTION_INPUT_KEY}}": $ACTION_INPUT
+}}}}
+\`\`\`
+
+Follow this format:
+
+Question: input question to answer
+Thought: consider previous and subsequent steps
+Action:
+\`\`\`
+$JSON_BLOB
+\`\`\`
+Observation: action result
+... (repeat Thought/Action/Observation N times)
+Thought: I know what to respond
+Action:
+\`\`\`
+{{{{
+  "{{TOOL_NAME_KEY}}": "Final Answer",
+  "{{ACTION_INPUT_KEY}}": "Final response to human"
+}}}}
+\`\`\`
+
+Begin! Reminder to ALWAYS respond with a valid json blob of a single action. Use tools if necessary. Respond directly if appropriate. Format is Action:\`\`\`$JSON_BLOB\`\`\`then Observation:.
+Question: {{query}}
+Thought: {{agent_scratchpad}}
+  `,
+}
diff --git a/web/context/debug-configuration.ts b/web/context/debug-configuration.ts
index f666491286..37a9ba472b 100644
--- a/web/context/debug-configuration.ts
+++ b/web/context/debug-configuration.ts
@@ -21,8 +21,9 @@ import type { ExternalDataTool } from '@/models/common'
 import type { DataSet } from '@/models/datasets'
 import type { VisionSettings } from '@/types/app'
 import { ModelModeType, RETRIEVE_TYPE, Resolution, TransferMethod } from '@/types/app'
-import { ANNOTATION_DEFAULT, DEFAULT_CHAT_PROMPT_CONFIG, DEFAULT_COMPLETION_PROMPT_CONFIG } from '@/config'
+import { ANNOTATION_DEFAULT, DEFAULT_AGENT_SETTING, DEFAULT_CHAT_PROMPT_CONFIG, DEFAULT_COMPLETION_PROMPT_CONFIG } from '@/config'
 import type { FormValue } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import type { Collection } from '@/app/components/tools/types'
 
 type IDebugConfiguration = {
   appId: string
@@ -33,6 +34,10 @@ type IDebugConfiguration = {
   promptMode: PromptMode
   setPromptMode: (promptMode: PromptMode) => void
   isAdvancedMode: boolean
+  isAgent: boolean
+  isFunctionCall: boolean
+  isOpenAI: boolean
+  collectionList: Collection[]
   canReturnToSimpleMode: boolean
   setCanReturnToSimpleMode: (canReturnToSimpleMode: boolean) => void
   chatPromptConfig: ChatPromptConfig
@@ -47,6 +52,8 @@ type IDebugConfiguration = {
   setConversationId: (conversationId: string | null) => void
   introduction: string
   setIntroduction: (introduction: string) => void
+  suggestedQuestions: string[]
+  setSuggestedQuestions: (questions: string[]) => void
   controlClearChatMessage: number
   setControlClearChatMessage: (controlClearChatMessage: number) => void
   prevPromptConfig: PromptConfig
@@ -98,6 +105,10 @@ const DebugConfigurationContext = createContext<IDebugConfiguration>({
   promptMode: PromptMode.simple,
   setPromptMode: () => { },
   isAdvancedMode: false,
+  isAgent: false,
+  isFunctionCall: false,
+  isOpenAI: false,
+  collectionList: [],
   canReturnToSimpleMode: false,
   setCanReturnToSimpleMode: () => { },
   chatPromptConfig: DEFAULT_CHAT_PROMPT_CONFIG,
@@ -119,6 +130,8 @@ const DebugConfigurationContext = createContext<IDebugConfiguration>({
   setConversationId: () => { },
   introduction: '',
   setIntroduction: () => { },
+  suggestedQuestions: [],
+  setSuggestedQuestions: () => {},
   controlClearChatMessage: 0,
   setControlClearChatMessage: () => { },
   prevPromptConfig: {
@@ -187,6 +200,7 @@ const DebugConfigurationContext = createContext<IDebugConfiguration>({
     retriever_resource: null,
     sensitive_word_avoidance: null,
     dataSets: [],
+    agentConfig: DEFAULT_AGENT_SETTING,
   },
   setModelConfig: () => { },
   dataSets: [],
@@ -201,6 +215,9 @@ const DebugConfigurationContext = createContext<IDebugConfiguration>({
     top_k: 2,
     score_threshold_enabled: false,
     score_threshold: 0.7,
+    datasets: {
+      datasets: [],
+    },
   },
   setDatasetConfigs: () => { },
   hasSetContextVar: false,
diff --git a/web/context/modal-context.tsx b/web/context/modal-context.tsx
index df73dcd3ab..a6c5cb6117 100644
--- a/web/context/modal-context.tsx
+++ b/web/context/modal-context.tsx
@@ -84,6 +84,13 @@ export const ModalContextProvider = ({
       showModerationSettingModal.onCancelCallback()
   }
 
+  const handleCancelExternalDataToolModal = () => {
+    setShowExternalDataToolModal(null)
+
+    if (showExternalDataToolModal?.onCancelCallback)
+      showExternalDataToolModal.onCancelCallback()
+  }
+
   const handleCancelModelModal = useCallback(() => {
     setShowModelModal(null)
 
@@ -169,7 +176,7 @@ export const ModalContextProvider = ({
           !!showExternalDataToolModal && (
             <ExternalDataToolModal
               data={showExternalDataToolModal.payload}
-              onCancel={() => setShowExternalDataToolModal(null)}
+              onCancel={handleCancelExternalDataToolModal}
               onSave={handleSaveExternalDataTool}
               onValidateBeforeSave={handleValidateBeforeSaveExternalDataTool}
             />
@@ -180,7 +187,7 @@ export const ModalContextProvider = ({
           !!showPricingModal && (
             <Pricing onCancel={() => {
               if (searchParams.get('show-pricing') === '1')
-                router.push(location.pathname, { forceOptimisticNavigation: true })
+                router.push(location.pathname, { forceOptimisticNavigation: true } as any)
 
               setShowPricingModal(false)
             }} />
diff --git a/web/global.d.ts b/web/global.d.ts
index b81cdddc77..c2d1c96d45 100644
--- a/web/global.d.ts
+++ b/web/global.d.ts
@@ -1,3 +1,5 @@
 declare module 'lamejs';
+declare module 'lamejs/src/js/MPEGMode';
+declare module 'lamejs/src/js/Lame';
+declare module 'lamejs/src/js/BitStream';
 declare module 'react-18-input-autosize';
-
diff --git a/web/i18n/i18next-config.ts b/web/i18n/i18next-config.ts
index cbc79016c2..c94a7075c2 100644
--- a/web/i18n/i18next-config.ts
+++ b/web/i18n/i18next-config.ts
@@ -39,6 +39,8 @@ import billingEn from './lang/billing.en'
 import billingZh from './lang/billing.zh'
 import customEn from './lang/custom.en'
 import customZh from './lang/custom.zh'
+import toolsEn from './lang/tools.en'
+import toolsZh from './lang/tools.zh'
 
 const resources = {
   'en': {
@@ -65,6 +67,8 @@ const resources = {
       // billing
       billing: billingEn,
       custom: customEn,
+      // tools
+      tools: toolsEn,
     },
   },
   'zh-Hans': {
@@ -90,6 +94,8 @@ const resources = {
       explore: exploreZh,
       billing: billingZh,
       custom: customZh,
+      // tools
+      tools: toolsZh,
     },
   },
 }
diff --git a/web/i18n/lang/app-debug.en.ts b/web/i18n/lang/app-debug.en.ts
index ed69b37c06..a862a7b19f 100644
--- a/web/i18n/lang/app-debug.en.ts
+++ b/web/i18n/lang/app-debug.en.ts
@@ -3,6 +3,7 @@ const translation = {
     line1: 'PROMPT',
     line2: 'Engineering',
   },
+  orchestrate: 'Orchestrate',
   promptMode: {
     simple: 'Switch to Expert Mode to edit the whole PROMPT',
     advanced: 'Expert Mode',
@@ -226,7 +227,7 @@ const translation = {
     notSelectModel: 'Please choose a model',
     waitForImgUpload: 'Please wait for the image to upload',
   },
-  chatSubTitle: 'Pre Prompt',
+  chatSubTitle: 'Instructions',
   completionSubTitle: 'Prefix Prompt',
   promptTip:
     'Prompts guide AI responses with instructions and constraints. Insert variables like {{input}}. This prompt won\'t be visible to users.',
@@ -271,6 +272,7 @@ const translation = {
     maxLength: 'Max length',
     options: 'Options',
     addOption: 'Add option',
+    apiBasedVar: 'API-based Variable',
   },
   vision: {
     name: 'Vision',
@@ -292,10 +294,11 @@ const translation = {
     },
   },
   openingStatement: {
-    title: 'Opening remarks',
+    title: 'Conversation Opener',
     add: 'Add',
-    writeOpner: 'Write remarks',
-    placeholder: 'Write your remarks message here',
+    writeOpner: 'Write opener',
+    placeholder: 'Write your opener message here, you can use variables, try type {{variable}}.',
+    openingQuestion: 'Opening Questions',
     noDataPlaceHolder:
       'Starting the conversation with the user can help AI establish a closer connection with them in conversational applications.',
     varTip: 'You can use variables, try type {{variable}}',
@@ -344,6 +347,42 @@ const translation = {
     score_thresholdTip: 'Used to set the similarity threshold for chunks filtering.',
     retrieveChangeTip: 'Modifying the index mode and retrieval mode may affect applications associated with this Knowledge.',
   },
+  assistantType: {
+    name: 'Assistant Type',
+    chatAssistant: {
+      name: 'Basic Assistant',
+      description: 'Build a chat-based assistant using a Large Language Model',
+    },
+    agentAssistant: {
+      name: 'Agent Assistant',
+      description: 'Build an intelligent Agent which can autonomously choose tools to complete the tasks',
+    },
+  },
+  agent: {
+    agentMode: 'Agent Mode',
+    agentModeDes: 'Set the type of inference mode for the agent',
+    agentModeType: {
+      ReACT: 'ReAct',
+      functionCall: 'Function Calling',
+    },
+    setting: {
+      name: 'Agent Settings',
+      description: 'Agent Assistant settings allow setting agent mode and advanced features like built-in prompts, only available in Agent type.',
+      maximumIterations: {
+        name: 'Maximum Iterations',
+        description: 'Limit the number of iterations an agent assistant can execute',
+      },
+    },
+    buildInPrompt: 'Build-In Prompt',
+    firstPrompt: 'First Prompt',
+    nextIteration: 'Next Iteration',
+    promptPlaceholder: 'Write your prompt here',
+    tools: {
+      name: 'Tools',
+      description: 'Using tools can extend the capabilities of LLM, such as searching the internet or performing scientific calculations',
+      enabled: 'Enabled',
+    },
+  },
 }
 
 export default translation
diff --git a/web/i18n/lang/app-debug.zh.ts b/web/i18n/lang/app-debug.zh.ts
index a8a3ed70fe..85ec38173c 100644
--- a/web/i18n/lang/app-debug.zh.ts
+++ b/web/i18n/lang/app-debug.zh.ts
@@ -3,6 +3,7 @@ const translation = {
     line1: '提示词',
     line2: '编排',
   },
+  orchestrate: '编排',
   promptMode: {
     simple: '切换到专家模式以编辑完整的提示词',
     advanced: '专家模式',
@@ -223,7 +224,7 @@ const translation = {
     notSelectModel: '请选择模型',
     waitForImgUpload: '请等待图片上传完成',
   },
-  chatSubTitle: '对话前提示词',
+  chatSubTitle: '提示词',
   completionSubTitle: '前缀提示词',
   promptTip:
     '提示词用于对 AI 的回复做出一系列指令和约束。可插入表单变量，例如 {{input}}。这段提示词不会被最终用户所看到。',
@@ -267,6 +268,7 @@ const translation = {
     maxLength: '最大长度',
     options: '选项',
     addOption: '添加选项',
+    apiBasedVar: '基于API的变量',
   },
   vision: {
     name: '视觉',
@@ -291,7 +293,8 @@ const translation = {
     title: '对话开场白',
     add: '添加开场白',
     writeOpner: '编写开场白',
-    placeholder: '请在这里输入开场白',
+    placeholder: '在这里写下你的开场白，你可以使用变量，尝试输入 {{variable}}。',
+    openingQuestion: '开场问题',
     noDataPlaceHolder:
       '在对话型应用中，让 AI 主动说第一段话可以拉近与用户间的距离。',
     varTip: '你可以使用变量， 试试输入 {{variable}}',
@@ -338,6 +341,42 @@ const translation = {
     score_thresholdTip: '用于设置文本片段筛选的相似度阈值。',
     retrieveChangeTip: '修改索引模式和检索模式可能会影响与该知识库关联的应用程序。',
   },
+  assistantType: {
+    name: '助手类型',
+    chatAssistant: {
+      name: '基础助手',
+      description: '基于 LLM 构建一个聊天型助手',
+    },
+    agentAssistant: {
+      name: '智能助手',
+      description: '构建一个智能助手，他可以自主选择工具完成你设置的任务',
+    },
+  },
+  agent: {
+    agentMode: 'Agent Mode',
+    agentModeDes: '设置代理的推理模式类型',
+    agentModeType: {
+      ReACT: 'ReAct',
+      functionCall: 'Function Calling',
+    },
+    setting: {
+      name: 'Agent 设置',
+      description: '智能助手设置允许设置代理模式和内置提示等高级功能，仅在代理类型中可用。',
+      maximumIterations: {
+        name: '最大迭代次数',
+        description: '限制代理型助手执行迭代的次数',
+      },
+    },
+    buildInPrompt: '内置提示词',
+    firstPrompt: '第一次提示词',
+    nextIteration: '下一次迭代',
+    promptPlaceholder: '在这里写下您的提示词',
+    tools: {
+      name: '工具',
+      description: '使用工具可以扩展代理的能力，比如搜索互联网或科学计算',
+      enabled: '启用',
+    },
+  },
 }
 
 export default translation
diff --git a/web/i18n/lang/app.en.ts b/web/i18n/lang/app.en.ts
index f789de6df8..d48495dc2c 100644
--- a/web/i18n/lang/app.en.ts
+++ b/web/i18n/lang/app.en.ts
@@ -1,9 +1,14 @@
 const translation = {
   title: 'Apps',
   createApp: 'Create new App',
+  types: {
+    all: 'All',
+    assistant: 'Assistant',
+    completion: 'Completion',
+  },
   modes: {
     completion: 'Text Generator',
-    chat: 'Chat App',
+    chat: 'Basic Assistant',
   },
   createFromConfigFile: 'Create app from config file',
   deleteAppConfirmTitle: 'Delete this app?',
@@ -18,10 +23,10 @@ const translation = {
   appNamePlaceholder: 'Please enter the name of the app',
   newApp: {
     startToCreate: 'Let\'s start with your new app',
-    captionName: 'Give your app a name',
-    captionAppType: 'What kind of app do you want?',
+    captionName: 'App icon & name',
+    captionAppType: 'What type of app do you want to create?',
     previewDemo: 'Preview demo',
-    chatApp: 'Chat App',
+    chatApp: 'Assistant',
     chatAppIntro:
       'I want to build a chat-based application. This app uses a question-and-answer format, allowing for multiple rounds of continuous conversation.',
     completeApp: 'Text Generator',
diff --git a/web/i18n/lang/app.zh.ts b/web/i18n/lang/app.zh.ts
index 0446c38e19..f1c45bddd6 100644
--- a/web/i18n/lang/app.zh.ts
+++ b/web/i18n/lang/app.zh.ts
@@ -1,9 +1,14 @@
 const translation = {
   title: '应用',
   createApp: '创建应用',
+  types: {
+    all: '全部',
+    assistant: '助手',
+    completion: '文本生成',
+  },
   modes: {
     completion: '文本生成型',
-    chat: '对话型',
+    chat: '基础助手',
   },
   createFromConfigFile: '通过导入应用配置文件创建',
   deleteAppConfirmTitle: '确认删除应用?',
@@ -17,10 +22,10 @@ const translation = {
   appNamePlaceholder: '请输入应用名称',
   newApp: {
     startToCreate: '开始创建一个新应用',
-    captionName: '给应用起个名字',
+    captionName: '图标 & 名称',
     captionAppType: '想要哪种应用类型？',
     previewDemo: '预览 Demo',
-    chatApp: '对话型应用',
+    chatApp: '助手',
     chatAppIntro:
       '我要构建一个聊天场景的应用。该应用采用一问一答模式与用户持续对话。',
     completeApp: '文本生成应用',
diff --git a/web/i18n/lang/common.en.ts b/web/i18n/lang/common.en.ts
index fb109d5251..a64c09f4e5 100644
--- a/web/i18n/lang/common.en.ts
+++ b/web/i18n/lang/common.en.ts
@@ -14,6 +14,7 @@ const translation = {
     save: 'Save',
     edit: 'Edit',
     add: 'Add',
+    added: 'Added',
     refresh: 'Restart',
     reset: 'Reset',
     search: 'Search',
@@ -85,13 +86,14 @@ const translation = {
   menus: {
     status: 'beta',
     explore: 'Explore',
-    apps: 'Build Apps',
+    apps: 'Studio',
     plugins: 'Plugins',
     pluginsTips: 'Integrate third-party plugins or create ChatGPT-compatible AI-Plugins.',
     datasets: 'Knowledge',
     datasetsTips: 'COMING SOON: Import your own text data or write data in real-time via Webhook for LLM context enhancement.',
     newApp: 'New App',
     newDataset: 'Create Knowledge',
+    tools: 'Tools',
   },
   userProfile: {
     settings: 'Settings',
@@ -370,7 +372,7 @@ const translation = {
   },
   appMenus: {
     overview: 'Overview',
-    promptEng: 'Prompt Eng.',
+    promptEng: 'Orchestrate',
     apiAccess: 'API Access',
     logAndAnn: 'Logs & Ann.',
   },
diff --git a/web/i18n/lang/common.zh.ts b/web/i18n/lang/common.zh.ts
index b3209d10f5..631ce102c8 100644
--- a/web/i18n/lang/common.zh.ts
+++ b/web/i18n/lang/common.zh.ts
@@ -14,6 +14,7 @@ const translation = {
     save: '保存',
     edit: '编辑',
     add: '添加',
+    added: '已添加',
     refresh: '重新开始',
     reset: '重置',
     search: '搜索',
@@ -85,13 +86,14 @@ const translation = {
   menus: {
     status: 'beta',
     explore: '探索',
-    apps: '构建应用',
+    apps: '工作室',
     plugins: '插件',
     pluginsTips: '集成第三方插件或创建与 ChatGPT 兼容的 AI 插件。',
     datasets: '知识库',
     datasetsTips: '即将到来: 上传自己的长文本数据，或通过 Webhook 集成自己的数据源',
     newApp: '创建应用',
     newDataset: '创建知识库',
+    tools: '工具',
   },
   userProfile: {
     settings: '设置',
@@ -370,7 +372,7 @@ const translation = {
   },
   appMenus: {
     overview: '概览',
-    promptEng: '提示词编排',
+    promptEng: '编排',
     apiAccess: '访问 API',
     logAndAnn: '日志与标注',
   },
diff --git a/web/i18n/lang/dataset.en.ts b/web/i18n/lang/dataset.en.ts
index 3106be3d44..6b1953c626 100644
--- a/web/i18n/lang/dataset.en.ts
+++ b/web/i18n/lang/dataset.en.ts
@@ -1,4 +1,5 @@
 const translation = {
+  knowledge: 'Knowledge',
   documentCount: ' docs',
   wordCount: 'k words',
   appCount: ' linked apps',
diff --git a/web/i18n/lang/dataset.zh.ts b/web/i18n/lang/dataset.zh.ts
index 2f19af9a3b..09528b741c 100644
--- a/web/i18n/lang/dataset.zh.ts
+++ b/web/i18n/lang/dataset.zh.ts
@@ -1,4 +1,5 @@
 const translation = {
+  knowledge: '知识库',
   documentCount: ' 文档',
   wordCount: '千字符',
   appCount: ' 关联应用',
diff --git a/web/i18n/lang/tools.en.ts b/web/i18n/lang/tools.en.ts
new file mode 100644
index 0000000000..ce9c17f04d
--- /dev/null
+++ b/web/i18n/lang/tools.en.ts
@@ -0,0 +1,103 @@
+const translation = {
+  title: 'Tools',
+  createCustomTool: 'Create Custom Tool',
+  type: {
+    all: 'All',
+    builtIn: 'Built-in',
+    custom: 'Custom',
+  },
+  contribute: {
+    line1: 'I\'m interested in ',
+    line2: 'contributing tools to Dify.',
+    viewGuide: 'View the guide',
+  },
+  author: 'By',
+  auth: {
+    unauthorized: 'To Authorize',
+    authorized: 'Authorized',
+    setup: 'Set up authorization to use',
+    setupModalTitle: 'Set Up Authorization',
+    setupModalTitleDescription: 'After configuring credentials, all members within the workspace can use this tool when orchestrating applications.',
+  },
+  includeToolNum: '{{num}} tools included',
+  addTool: 'Add Tool',
+  createTool: {
+    title: 'Create Custom Tool',
+    editAction: 'Configure',
+    editTitle: 'Edit Custom Tool',
+    name: 'Name',
+    toolNamePlaceHolder: 'Enter the tool name',
+    schema: 'Schema',
+    schemaPlaceHolder: 'Enter your OpenAPI schema here',
+    viewSchemaSpec: 'View the OpenAPI-Swagger Specification',
+    importFromUrl: 'Import from URL',
+    importFromUrlPlaceHolder: 'https://...',
+    urlError: 'Please enter a valid URL',
+    examples: 'Examples',
+    exampleOptions: {
+      json: 'Weather(JSON)',
+      yaml: 'Pet Store(YAML)',
+      blankTemplate: 'Blank Template',
+    },
+    availableTools: {
+      title: 'Available Tools',
+      name: 'Name',
+      description: 'Description',
+      method: 'Method',
+      path: 'Path',
+      action: 'Actions',
+      test: 'Test',
+    },
+    authMethod: {
+      title: 'Authorization method',
+      type: 'Authorization type',
+      types: {
+        none: 'None',
+        api_key: 'API Key',
+      },
+      key: 'Key',
+      value: 'Value',
+    },
+    privacyPolicy: 'Privacy policy',
+    privacyPolicyPlaceholder: 'Please enter privacy policy',
+  },
+  test: {
+    title: 'Test',
+    parametersValue: 'Parameters & Value',
+    parameters: 'Parameters',
+    value: 'Value',
+    testResult: 'Test Results',
+    testResultPlaceholder: 'Test result will show here',
+  },
+  thought: {
+    using: 'Using',
+    used: 'Used',
+    requestTitle: 'Request to',
+    responseTitle: 'Response from',
+  },
+  setBuiltInTools: {
+    info: 'Info',
+    setting: 'Setting',
+    toolDescription: 'Tool description',
+    parameters: 'parameters',
+    string: 'string',
+    number: 'number',
+    required: 'Required',
+    infoAndSetting: 'Info & Settings',
+  },
+  noCustomTool: {
+    title: 'No custom tools',
+    content: 'Add and manage your custom tools here for building AI apps.',
+    createTool: 'Create Tool',
+  },
+  noSearchRes: {
+    title: 'Sorry, no results!',
+    content: 'We couldn\'t find any tools that match your search.',
+    reset: 'Reset Search',
+  },
+  builtInPromptTitle: 'Prompt',
+  toolRemoved: 'Tool removed',
+  notAuthorized: 'Tool not authorized',
+}
+
+export default translation
diff --git a/web/i18n/lang/tools.zh.ts b/web/i18n/lang/tools.zh.ts
new file mode 100644
index 0000000000..2fa5183171
--- /dev/null
+++ b/web/i18n/lang/tools.zh.ts
@@ -0,0 +1,95 @@
+const translation = {
+  title: '工具',
+  createCustomTool: '创建自定义工具',
+  type: {
+    all: '全部',
+    builtIn: '内置',
+    custom: '自定义',
+  },
+  contribute: {
+    line1: '我有兴趣为 ',
+    line2: 'Dify 贡献工具。',
+    viewGuide: '查看指南',
+  },
+  author: '作者',
+  auth: {
+    unauthorized: '去授权',
+    authorized: '已授权',
+    setup: '要使用请先授权',
+    setupModalTitle: '设置授权',
+    setupModalTitleDescription: '配置凭据后，工作区中的所有成员都可以在编排应用程序时使用此工具。',
+  },
+  includeToolNum: '包含 {{num}} 个工具',
+  addTool: '添加工具',
+  createTool: {
+    title: '创建自定义工具',
+    editAction: '编辑',
+    editTitle: '编辑自定义工具',
+    name: '名称',
+    toolNamePlaceHolder: '输入工具名称',
+    schema: 'Schema',
+    schemaPlaceHolder: '在此处输入您的 OpenAPI schema',
+    viewSchemaSpec: '查看 OpenAPI-Swagger 规范',
+    importFromUrl: '从 URL 中导入',
+    importFromUrlPlaceHolder: 'https://...',
+    urlError: '请输入有效的 URL',
+    examples: '例子',
+    exampleOptions: {
+      json: '天气(JSON)',
+      yaml: '宠物商店(YAML)',
+      blankTemplate: '空白模版',
+    },
+    availableTools: {
+      title: '可用工具',
+      name: '名称',
+      description: '描述',
+      method: '方法',
+      path: '路径',
+      action: '操作',
+      test: '测试',
+    },
+    authMethod: {
+      title: '鉴权方法',
+      type: '鉴权类型',
+      types: {
+        none: '无',
+        api_key: 'API Key',
+      },
+      key: '键',
+      value: '值',
+    },
+    privacyPolicy: '隐私协议',
+    privacyPolicyPlaceholder: '请输入隐私协议',
+  },
+  thought: {
+    using: '正在使用',
+    used: '已使用',
+    requestTitle: '请求来自',
+    responseTitle: '响应来自',
+  },
+  setBuiltInTools: {
+    info: '信息',
+    setting: '设置',
+    toolDescription: '工具描述',
+    parameters: '参数',
+    string: '字符串',
+    number: '数字',
+    required: '必填',
+    infoAndSetting: '信息和设置',
+  },
+  noCustomTool: {
+    title: '没有自定义工具',
+    content: '在此统一添加和管理你的自定义工具，方便构建应用时使用。',
+    createTool: '创建工具',
+  },
+  noSearchRes: {
+    title: '抱歉，没有结果！',
+    content: '我们找不到任何与您的搜索相匹配的工具。',
+    reset: '重置搜索',
+  },
+  builtInPromptTitle: '提示词',
+  toolRemoved: '工具已被移除',
+  notAuthorized: '工具未授权',
+}
+
+export default translation
diff --git a/web/models/debug.ts b/web/models/debug.ts
index eaac7cd57e..ffe6dd4b9a 100644
--- a/web/models/debug.ts
+++ b/web/models/debug.ts
@@ -1,4 +1,4 @@
-import type { ModelModeType, RETRIEVE_TYPE } from '@/types/app'
+import type { AgentStrategy, ModelModeType, RETRIEVE_TYPE, ToolItem } from '@/types/app'
 export type Inputs = Record<string, string | number | object>
 
 export enum PromptMode {
@@ -41,10 +41,14 @@ export type PromptVariable = {
   name: string
   type: string // "string" | "number" | "select",
   default?: string | number
-  required: boolean
+  required?: boolean
   options?: string[]
   max_length?: number
   is_context_var?: boolean
+  enabled?: boolean
+  config?: Record<string, any>
+  icon?: string
+  icon_background?: string
 }
 
 export type CompletionParams = {
@@ -98,7 +102,12 @@ export type ModerationConfig = MoreLikeThisConfig & {
 }
 
 export type RetrieverResourceConfig = MoreLikeThisConfig
-
+export type AgentConfig = {
+  enabled: boolean
+  strategy: AgentStrategy
+  max_iteration: number
+  tools: ToolItem[]
+}
 // frontend use. Not the same as backend
 export type ModelConfig = {
   provider: string // LLM Provider: for example "OPENAI"
@@ -112,6 +121,7 @@ export type ModelConfig = {
   retriever_resource: RetrieverResourceConfig | null
   sensitive_word_avoidance: ModerationConfig | null
   dataSets: any[]
+  agentConfig: AgentConfig
 }
 export type DatasetConfigItem = {
   enable: boolean
@@ -127,6 +137,12 @@ export type DatasetConfigs = {
   top_k: number
   score_threshold_enabled: boolean
   score_threshold: number
+  datasets: {
+    datasets: {
+      enabled: boolean
+      id: string
+    }[]
+  }
 }
 
 export type DebugRequestBody = {
diff --git a/web/models/explore.ts b/web/models/explore.ts
index fbb14cca4e..1cb98b2a28 100644
--- a/web/models/explore.ts
+++ b/web/models/explore.ts
@@ -6,6 +6,7 @@ export type AppBasicInfo = {
   mode: AppMode
   icon: string
   icon_background: string
+  is_agent: boolean
 }
 
 export type AppCategory = 'Writing' | 'Translate' | 'HR' | 'Programming' | 'Assistant'
@@ -22,6 +23,7 @@ export type App = {
   install_count: number
   installed: boolean
   editable: boolean
+  is_agent: boolean
 }
 
 export type InstalledApp = {
diff --git a/web/models/share.ts b/web/models/share.ts
index 96ece70799..3cd92d089e 100644
--- a/web/models/share.ts
+++ b/web/models/share.ts
@@ -19,3 +19,7 @@ export type SiteInfo = {
   copyright?: string
   privacy_policy?: string
 }
+
+export type AppMeta = {
+  tool_icons: Record<string, string>
+}
diff --git a/web/package.json b/web/package.json
index 8379b8b0da..c82a123eab 100644
--- a/web/package.json
+++ b/web/package.json
@@ -121,4 +121,4 @@
   "engines": {
     "node": ">=18.17.0"
   }
-}
+}
\ No newline at end of file
diff --git a/web/service/base.ts b/web/service/base.ts
index 6ad0fa4e1c..80da0c41d7 100644
--- a/web/service/base.ts
+++ b/web/service/base.ts
@@ -1,7 +1,7 @@
 import { API_PREFIX, IS_CE_EDITION, PUBLIC_API_PREFIX } from '@/config'
 import Toast from '@/app/components/base/toast'
 import type { AnnotationReply, MessageEnd, MessageReplace, ThoughtItem } from '@/app/components/app/chat/type'
-
+import type { VisionFile } from '@/types/app'
 const TIME_OUT = 100000
 
 const ContentType = {
@@ -32,6 +32,7 @@ export type IOnDataMoreInfo = {
 
 export type IOnData = (message: string, isFirstMessage: boolean, moreInfo: IOnDataMoreInfo) => void
 export type IOnThought = (though: ThoughtItem) => void
+export type IOnFile = (file: VisionFile) => void
 export type IOnMessageEnd = (messageEnd: MessageEnd) => void
 export type IOnMessageReplace = (messageReplace: MessageReplace) => void
 export type IOnAnnotationReply = (messageReplace: AnnotationReply) => void
@@ -45,6 +46,7 @@ type IOtherOptions = {
   deleteContentType?: boolean
   onData?: IOnData // for stream
   onThought?: IOnThought
+  onFile?: IOnFile
   onMessageEnd?: IOnMessageEnd
   onMessageReplace?: IOnMessageReplace
   onError?: IOnError
@@ -80,7 +82,7 @@ export function format(text: string) {
   return res.replaceAll('\n', '<br/>').replaceAll('```', '')
 }
 
-const handleStream = (response: Response, onData: IOnData, onCompleted?: IOnCompleted, onThought?: IOnThought, onMessageEnd?: IOnMessageEnd, onMessageReplace?: IOnMessageReplace) => {
+const handleStream = (response: Response, onData: IOnData, onCompleted?: IOnCompleted, onThought?: IOnThought, onMessageEnd?: IOnMessageEnd, onMessageReplace?: IOnMessageReplace, onFile?: IOnFile) => {
   if (!response.ok)
     throw new Error('Network response was not ok')
 
@@ -123,7 +125,7 @@ const handleStream = (response: Response, onData: IOnData, onCompleted?: IOnComp
               onCompleted?.(true)
               return
             }
-            if (bufferObj.event === 'message') {
+            if (bufferObj.event === 'message' || bufferObj.event === 'agent_message') {
               // can not use format here. Because message is splited.
               onData(unicodeToChar(bufferObj.answer), isFirstMessage, {
                 conversationId: bufferObj.conversation_id,
@@ -135,6 +137,9 @@ const handleStream = (response: Response, onData: IOnData, onCompleted?: IOnComp
             else if (bufferObj.event === 'agent_thought') {
               onThought?.(bufferObj as ThoughtItem)
             }
+            else if (bufferObj.event === 'message_file') {
+              onFile?.(bufferObj as VisionFile)
+            }
             else if (bufferObj.event === 'message_end') {
               onMessageEnd?.(bufferObj as MessageEnd)
             }
@@ -346,7 +351,7 @@ export const upload = (options: any, isPublicAPI?: boolean, url?: string): Promi
   })
 }
 
-export const ssePost = (url: string, fetchOptions: FetchOptionType, { isPublicAPI = false, onData, onCompleted, onThought, onMessageEnd, onMessageReplace, onError, getAbortController }: IOtherOptions) => {
+export const ssePost = (url: string, fetchOptions: FetchOptionType, { isPublicAPI = false, onData, onCompleted, onThought, onFile, onMessageEnd, onMessageReplace, onError, getAbortController }: IOtherOptions) => {
   const abortController = new AbortController()
 
   const options = Object.assign({}, baseOptions, {
@@ -384,7 +389,7 @@ export const ssePost = (url: string, fetchOptions: FetchOptionType, { isPublicAP
           return
         }
         onData?.(str, isFirstMessage, moreInfo)
-      }, onCompleted, onThought, onMessageEnd, onMessageReplace)
+      }, onCompleted, onThought, onMessageEnd, onMessageReplace, onFile)
     }).catch((e) => {
       if (e.toString() !== 'AbortError: The user aborted a request.')
         Toast.notify({ type: 'error', message: e })
diff --git a/web/service/debug.ts b/web/service/debug.ts
index dbd0e0f10a..f8660ea1c1 100644
--- a/web/service/debug.ts
+++ b/web/service/debug.ts
@@ -1,18 +1,19 @@
-import type { IOnCompleted, IOnData, IOnError, IOnMessageEnd, IOnMessageReplace } from './base'
 import { get, post, ssePost } from './base'
+import type { IOnCompleted, IOnData, IOnError, IOnFile, IOnMessageEnd, IOnMessageReplace, IOnThought } from './base'
 import type { ChatPromptConfig, CompletionPromptConfig } from '@/models/debug'
 import type { ModelModeType } from '@/types/app'
 import type { ModelParameterRule } from '@/app/components/header/account-setting/model-provider-page/declarations'
-
 export type AutomaticRes = {
   prompt: string
   variables: string[]
   opening_statement: string
 }
 
-export const sendChatMessage = async (appId: string, body: Record<string, any>, { onData, onCompleted, onError, getAbortController, onMessageEnd, onMessageReplace }: {
+export const sendChatMessage = async (appId: string, body: Record<string, any>, { onData, onCompleted, onThought, onFile, onError, getAbortController, onMessageEnd, onMessageReplace }: {
   onData: IOnData
   onCompleted: IOnCompleted
+  onFile: IOnFile
+  onThought: IOnThought
   onMessageEnd: IOnMessageEnd
   onMessageReplace: IOnMessageReplace
   onError: IOnError
@@ -23,7 +24,7 @@ export const sendChatMessage = async (appId: string, body: Record<string, any>,
       ...body,
       response_mode: 'streaming',
     },
-  }, { onData, onCompleted, onError, getAbortController, onMessageEnd, onMessageReplace })
+  }, { onData, onCompleted, onThought, onFile, onError, getAbortController, onMessageEnd, onMessageReplace })
 }
 
 export const stopChatMessageResponding = async (appId: string, taskId: string) => {
diff --git a/web/service/share.ts b/web/service/share.ts
index 2f98314d98..be52a5e7b8 100644
--- a/web/service/share.ts
+++ b/web/service/share.ts
@@ -1,4 +1,4 @@
-import type { IOnCompleted, IOnData, IOnError, IOnMessageEnd, IOnMessageReplace } from './base'
+import type { IOnCompleted, IOnData, IOnError, IOnFile, IOnMessageEnd, IOnMessageReplace, IOnThought } from './base'
 import {
   del as consoleDel, get as consoleGet, patch as consolePatch, post as consolePost,
   delPublic as del, getPublic as get, patchPublic as patch, postPublic as post, ssePost,
@@ -22,9 +22,11 @@ function getUrl(url: string, isInstalledApp: boolean, installedAppId: string) {
   return isInstalledApp ? `installed-apps/${installedAppId}/${url.startsWith('/') ? url.slice(1) : url}` : url
 }
 
-export const sendChatMessage = async (body: Record<string, any>, { onData, onCompleted, onError, getAbortController, onMessageEnd, onMessageReplace }: {
+export const sendChatMessage = async (body: Record<string, any>, { onData, onCompleted, onThought, onFile, onError, getAbortController, onMessageEnd, onMessageReplace }: {
   onData: IOnData
   onCompleted: IOnCompleted
+  onFile: IOnFile
+  onThought: IOnThought
   onError: IOnError
   onMessageEnd?: IOnMessageEnd
   onMessageReplace?: IOnMessageReplace
@@ -35,7 +37,7 @@ export const sendChatMessage = async (body: Record<string, any>, { onData, onCom
       ...body,
       response_mode: 'streaming',
     },
-  }, { onData, onCompleted, isPublicAPI: !isInstalledApp, onError, getAbortController, onMessageEnd, onMessageReplace })
+  }, { onData, onCompleted, onThought, onFile, isPublicAPI: !isInstalledApp, onError, getAbortController, onMessageEnd, onMessageReplace })
 }
 
 export const stopChatMessageResponding = async (appId: string, taskId: string, isInstalledApp: boolean, installedAppId = '') => {
@@ -98,6 +100,10 @@ export const fetchAppParams = async (isInstalledApp: boolean, installedAppId = '
   return (getAction('get', isInstalledApp))(getUrl('parameters', isInstalledApp, installedAppId))
 }
 
+export const fetchAppMeta = async (isInstalledApp: boolean, installedAppId = '') => {
+  return (getAction('get', isInstalledApp))(getUrl('meta', isInstalledApp, installedAppId))
+}
+
 export const updateFeedback = async ({ url, body }: { url: string; body: Feedbacktype }, isInstalledApp: boolean, installedAppId = '') => {
   return (getAction('post', isInstalledApp))(getUrl(url, isInstalledApp, installedAppId), { body })
 }
diff --git a/web/service/tools.ts b/web/service/tools.ts
new file mode 100644
index 0000000000..b87a64ab7c
--- /dev/null
+++ b/web/service/tools.ts
@@ -0,0 +1,83 @@
+import { get, post } from './base'
+import type { CustomCollectionBackend } from '@/app/components/tools/types'
+
+export const fetchCollectionList = () => {
+  return get('/workspaces/current/tool-providers')
+}
+
+export const fetchBuiltInToolList = (collectionName: string) => {
+  return get(`/workspaces/current/tool-provider/builtin/${collectionName}/tools`)
+}
+
+export const fetchCustomToolList = (collectionName: string) => {
+  return get(`/workspaces/current/tool-provider/api/tools?provider=${collectionName}`)
+}
+export const fetchBuiltInToolCredentialSchema = (collectionName: string) => {
+  return get(`/workspaces/current/tool-provider/builtin/${collectionName}/credentials_schema`)
+}
+
+export const updateBuiltInToolCredential = (collectionName: string, credential: Record<string, any>) => {
+  return post(`/workspaces/current/tool-provider/builtin/${collectionName}/update`, {
+    body: {
+      credentials: credential,
+    },
+  })
+}
+
+export const removeBuiltInToolCredential = (collectionName: string) => {
+  return post(`/workspaces/current/tool-provider/builtin/${collectionName}/delete`, {
+    body: {},
+  })
+}
+
+export const parseParamsSchema = (schema: string) => {
+  return post('/workspaces/current/tool-provider/api/schema', {
+    body: {
+      schema,
+    },
+  })
+}
+
+export const fetchCustomCollection = (collectionName: string) => {
+  return get(`/workspaces/current/tool-provider/api/get?provider=${collectionName}`)
+}
+
+export const createCustomCollection = (collection: CustomCollectionBackend) => {
+  return post('/workspaces/current/tool-provider/api/add', {
+    body: {
+      ...collection,
+    },
+  })
+}
+
+export const updateCustomCollection = (collection: CustomCollectionBackend) => {
+  return post('/workspaces/current/tool-provider/api/update', {
+    body: {
+      ...collection,
+    },
+  })
+}
+
+export const removeCustomCollection = (collectionName: string) => {
+  return post('/workspaces/current/tool-provider/api/delete', {
+    body: {
+      provider: collectionName,
+    },
+  })
+}
+
+export const importSchemaFromURL = (url: string) => {
+  return get('/workspaces/current/tool-provider/api/remote', {
+    params: {
+      url,
+    },
+  })
+}
+
+export const testAPIAvailable = (payload: any) => {
+  return post('/workspaces/current/tool-provider/api/test/pre', {
+    body: {
+      ...payload,
+    },
+  })
+}
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 70473e683f..50239b392c 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -50,6 +50,7 @@ module.exports = {
         },
         indigo: {
           25: '#F5F8FF',
+          50: '#EEF4FF',
           100: '#E0EAFF',
           400: '#8098F9',
           600: '#444CE7',
diff --git a/web/types/app.ts b/web/types/app.ts
index 9712173912..1ee4eee475 100644
--- a/web/types/app.ts
+++ b/web/types/app.ts
@@ -1,5 +1,5 @@
-import type { AnnotationReplyConfig, ChatPromptConfig, CompletionPromptConfig, DatasetConfigs, PromptMode } from '@/models/debug.ts'
-import type { ExternalDataTool } from '@/models/common'
+import type { AnnotationReplyConfig, ChatPromptConfig, CompletionPromptConfig, DatasetConfigs, PromptMode } from '@/models/debug'
+import type { CollectionType } from '@/app/components/tools/types'
 export enum ProviderType {
   openai = 'openai',
   anthropic = 'anthropic',
@@ -90,6 +90,18 @@ export type UserInputFormItem = {
   'select': SelectTypeFormItem
 }
 
+export type AgentTool = {
+  provider_id: string
+  provider_type: CollectionType
+  provider_name: string
+  tool_name: string
+  tool_label: string
+  tool_parameters: Record<string, any>
+  enabled: boolean
+  isDeleted?: boolean
+  notAuthor?: boolean
+}
+
 export type ToolItem = {
   dataset: {
     enabled: boolean
@@ -101,6 +113,11 @@ export type ToolItem = {
     words: string[]
     canned_response: string
   }
+} | AgentTool
+
+export enum AgentStrategy {
+  functionCall = 'function_call',
+  react = 'react',
 }
 
 /**
@@ -108,6 +125,7 @@ export type ToolItem = {
  */
 export type ModelConfig = {
   opening_statement: string
+  suggested_questions?: string[]
   pre_prompt: string
   prompt_type: PromptMode
   chat_prompt_config: ChatPromptConfig | {}
@@ -129,10 +147,10 @@ export type ModelConfig = {
   sensitive_word_avoidance: {
     enabled: boolean
   }
-  external_data_tools: ExternalDataTool[]
   annotation_reply?: AnnotationReplyConfig
   agent_mode: {
     enabled: boolean
+    strategy?: AgentStrategy
     tools: ToolItem[]
   }
   model: {
@@ -252,6 +270,7 @@ export type App = {
 
   /** Mode */
   mode: AppMode
+  is_agent: boolean
   /** Enable web app */
   enable_site: boolean
   /** Enable web API */
@@ -325,6 +344,7 @@ export type VisionFile = {
   transfer_method: TransferMethod
   url: string
   upload_file_id: string
+  belongs_to?: string
 }
 
 export type RetrievalConfig = {
diff --git a/web/utils/model-config.ts b/web/utils/model-config.ts
index 1a70dbd128..c465b57dfc 100644
--- a/web/utils/model-config.ts
+++ b/web/utils/model-config.ts
@@ -15,6 +15,9 @@ export const userInputsFormToPromptVariables = (useInputs: UserInputFormItem[] |
       if (item['text-input'])
         return ['string', item['text-input']]
 
+      if (item.external_data_tool)
+        return ['api', item.external_data_tool]
+
       return ['select', item.select]
     })()
     const is_context_var = dataset_query_variable === content.variable
@@ -30,6 +33,19 @@ export const userInputsFormToPromptVariables = (useInputs: UserInputFormItem[] |
         is_context_var,
       })
     }
+    else if (type === 'api') {
+      promptVariables.push({
+        key: content.variable,
+        name: content.label,
+        required: content.required,
+        type: content.type,
+        enabled: content.enabled,
+        config: content.config,
+        icon: content.icon,
+        icon_background: content.icon_background,
+        is_context_var,
+      })
+    }
     else {
       promptVariables.push({
         key: content.variable,
@@ -63,6 +79,20 @@ export const promptVariablesToUserInputsForm = (promptVariables: PromptVariable[
         },
       } as any)
     }
+    else if (item.type === 'api') {
+      userInputs.push({
+        external_data_tool: {
+          label: item.name,
+          variable: item.key,
+          enabled: item.enabled,
+          type: item.type,
+          config: item.config,
+          required: item.required,
+          icon: item.icon,
+          icon_background: item.icon_background,
+        },
+      } as any)
+    }
     else {
       userInputs.push({
         select: {
diff --git a/web/utils/var.ts b/web/utils/var.ts
index 08855323c3..fa98e0377d 100644
--- a/web/utils/var.ts
+++ b/web/utils/var.ts
@@ -1,9 +1,10 @@
 import { MAX_VAR_KEY_LENGHT, VAR_ITEM_TEMPLATE, getMaxVarNameLength } from '@/config'
 import { CONTEXT_PLACEHOLDER_TEXT, HISTORY_PLACEHOLDER_TEXT, PRE_PROMPT_PLACEHOLDER_TEXT, QUERY_PLACEHOLDER_TEXT } from '@/app/components/base/prompt-editor/constants'
 const otherAllowedRegex = /^[a-zA-Z0-9_]+$/
-export const getNewVar = (key: string) => {
+export const getNewVar = (key: string, type: string) => {
   return {
     ...VAR_ITEM_TEMPLATE,
+    type: type || 'string',
     key,
     name: key.slice(0, getMaxVarNameLength(key)),
   }