From f487b680f57e59da1a9aa5dafb285568ca62302f Mon Sep 17 00:00:00 2001
From: Stephen Zhou <hi@hyoban.cc>
Date: Thu, 5 Mar 2026 15:54:56 +0800
Subject: [PATCH] refactor: spilt context for better hmr (#33033)

---
 .../dsl-export-import-flow.test.ts            |  2 +-
 .../[appId]/overview/card-view.tsx            |  2 +-
 web/app/(commonLayout)/layout.tsx             |  6 +-
 .../account-page/AvatarWithEdit.tsx           |  2 +-
 .../account-page/email-change-modal.tsx       |  2 +-
 .../(commonLayout)/account-page/index.tsx     |  2 +-
 web/app/account/(commonLayout)/layout.tsx     |  6 +-
 .../__tests__/use-app-info-actions.spec.ts    |  2 +-
 .../app-info/use-app-info-actions.ts          |  2 +-
 .../csv-uploader.spec.tsx                     |  2 +-
 .../csv-uploader.tsx                          |  2 +-
 .../config-prompt/advanced-prompt-input.tsx   |  2 +-
 .../config-prompt/simple-prompt-input.tsx     |  2 +-
 .../config/agent/prompt-editor.tsx            |  2 +-
 .../settings-modal/index.spec.tsx             |  2 +-
 .../dataset-config/settings-modal/index.tsx   |  2 +-
 .../context-provider.tsx                      | 28 ++++++
 .../context.spec.tsx                          |  6 +-
 .../{context.tsx => context.ts}               | 26 +----
 .../debug/debug-with-multiple-model/index.tsx |  6 +-
 .../debug-with-single-model/index.spec.tsx    |  2 +-
 .../app/configuration/debug/index.tsx         |  2 +-
 .../components/app/configuration/index.tsx    |  5 +-
 .../tools/external-data-tool-modal.tsx        |  2 +-
 .../app/configuration/tools/index.tsx         |  2 +-
 .../app/create-app-modal/index.spec.tsx       |  2 +-
 .../components/app/create-app-modal/index.tsx |  2 +-
 .../app/create-from-dsl-modal/index.tsx       |  2 +-
 .../app/create-from-dsl-modal/uploader.tsx    |  2 +-
 web/app/components/app/log/list.tsx           |  2 +-
 .../app/overview/settings/index.spec.tsx      | 16 ++--
 .../app/overview/settings/index.tsx           |  2 +-
 .../app/switch-app-modal/index.spec.tsx       |  2 +-
 .../components/app/switch-app-modal/index.tsx |  2 +-
 web/app/components/apps/app-card.tsx          |  3 +-
 .../agent-log-modal/__tests__/detail.spec.tsx |  2 +-
 .../agent-log-modal/__tests__/index.spec.tsx  |  2 +-
 .../base/agent-log-modal/detail.tsx           |  2 +-
 .../{context.tsx => context.ts}               |  0
 .../base/chat/chat-with-history/hooks.tsx     |  2 +-
 .../base/chat/chat/__tests__/context.spec.tsx |  3 +-
 .../chat/chat/__tests__/question.spec.tsx     |  2 +-
 .../chat-input-area/__tests__/index.spec.tsx  | 12 +--
 .../base/chat/chat/chat-input-area/index.tsx  |  2 +-
 .../base/chat/chat/check-input-forms-hooks.ts |  2 +-
 .../{context.tsx => context-provider.tsx}     | 30 +-----
 web/app/components/base/chat/chat/context.ts  | 30 ++++++
 web/app/components/base/chat/chat/hooks.ts    |  2 +-
 web/app/components/base/chat/chat/index.tsx   |  2 +-
 .../{context.tsx => context.ts}               |  0
 .../base/chat/embedded-chatbot/hooks.tsx      |  2 +-
 .../inputs-form/__tests__/content.spec.tsx    |  2 +-
 .../moderation-setting-modal.spec.tsx         |  2 +-
 .../moderation/moderation-setting-modal.tsx   |  2 +-
 .../file-uploader/__tests__/hooks.spec.ts     |  2 +-
 .../components/base/file-uploader/hooks.ts    |  2 +-
 .../__tests__/use-check-validated.spec.ts     |  2 +-
 .../base/form/hooks/use-check-validated.ts    |  2 +-
 .../image-uploader/__tests__/hooks.spec.ts    |  2 +-
 .../components/base/image-uploader/hooks.ts   |  2 +-
 .../markdown-blocks/__tests__/button.spec.tsx |  2 +-
 .../__tests__/think-block.spec.tsx            |  2 +-
 .../markdown-blocks/think-block.stories.tsx   |  2 +-
 .../__tests__/index.spec.tsx                  |  3 +-
 .../radio/context/{index.tsx => index.ts}     |  0
 .../base/tag-input/__tests__/index.spec.tsx   |  2 +-
 web/app/components/base/tag-input/index.tsx   |  2 +-
 .../tag-management/__tests__/panel.spec.tsx   |  2 +-
 .../__tests__/selector.spec.tsx               |  2 +-
 .../components/base/tag-management/index.tsx  |  2 +-
 .../components/base/tag-management/panel.tsx  |  2 +-
 .../base/tag-management/tag-item-editor.tsx   |  2 +-
 .../text-generation/__tests__/hooks.spec.ts   |  2 +-
 .../components/base/text-generation/hooks.ts  |  2 +-
 .../base/toast/__tests__/index.spec.tsx       |  3 +-
 web/app/components/base/toast/context.ts      | 23 +++++
 .../components/base/toast/index.stories.tsx   |  3 +-
 web/app/components/base/toast/index.tsx       | 27 ++----
 .../__tests__/index.spec.tsx                  |  4 +-
 .../custom/custom-web-app-brand/index.tsx     |  2 +-
 .../__tests__/uploader.spec.tsx               |  2 +-
 .../hooks/use-dsl-import.ts                   |  2 +-
 .../create-from-dsl-modal/uploader.tsx        |  2 +-
 .../empty-dataset-creation-modal/index.tsx    |  2 +-
 .../hooks/__tests__/use-file-upload.spec.tsx  |  2 +-
 .../file-uploader/hooks/use-file-upload.ts    |  2 +-
 .../components/__tests__/operations.spec.tsx  |  2 +-
 .../documents/components/operations.tsx       |  2 +-
 .../__tests__/use-local-file-upload.spec.tsx  |  4 +-
 .../__tests__/csv-uploader.spec.tsx           |  2 +-
 .../detail/batch-modal/csv-uploader.tsx       |  2 +-
 .../detail/completed/__tests__/index.spec.tsx |  2 +-
 .../__tests__/regeneration-modal.spec.tsx     |  3 +-
 .../__tests__/use-child-segment-data.spec.ts  |  2 +-
 .../__tests__/use-segment-list-data.spec.ts   |  2 +-
 .../completed/hooks/use-child-segment-data.ts |  2 +-
 .../completed/hooks/use-segment-list-data.ts  |  2 +-
 .../detail/completed/new-child-segment.tsx    |  2 +-
 .../documents/detail/embedding/index.tsx      |  2 +-
 .../__tests__/use-metadata-state.spec.ts      |  2 +-
 .../metadata/hooks/use-metadata-state.ts      |  2 +-
 .../datasets/documents/detail/new-segment.tsx |  2 +-
 .../datasets/documents/status-item/index.tsx  |  2 +-
 .../__tests__/index.spec.tsx                  |  2 +-
 .../external-api/external-api-modal/index.tsx |  2 +-
 .../connector/__tests__/index.spec.tsx        |  2 +-
 .../connector/index.tsx                       |  2 +-
 .../workplace-selector/index.spec.tsx         |  2 +-
 .../workplace-selector/index.tsx              |  2 +-
 .../api-based-extension-page/modal.spec.tsx   |  4 +-
 .../api-based-extension-page/modal.tsx        |  2 +-
 .../account-setting/language-page/index.tsx   |  2 +-
 .../edit-workspace-modal/index.spec.tsx       |  2 +-
 .../edit-workspace-modal/index.tsx            |  2 +-
 .../members-page/invite-modal/index.spec.tsx  |  2 +-
 .../members-page/invite-modal/index.tsx       |  2 +-
 .../members-page/operation/index.spec.tsx     |  2 +-
 .../members-page/operation/index.tsx          |  2 +-
 .../transfer-ownership-modal/index.spec.tsx   |  2 +-
 .../transfer-ownership-modal/index.tsx        |  2 +-
 .../model-auth/hooks/use-auth.spec.tsx        |  2 +-
 .../model-auth/hooks/use-auth.ts              |  2 +-
 .../credential-panel.spec.tsx                 |  2 +-
 .../provider-added-card/credential-panel.tsx  |  2 +-
 .../model-load-balancing-modal.spec.tsx       |  2 +-
 .../model-load-balancing-modal.tsx            |  2 +-
 .../system-model-selector/index.spec.tsx      |  2 +-
 .../system-model-selector/index.tsx           |  2 +-
 .../plugin-page/SerpapiPlugin.spec.tsx        |  4 +-
 .../plugin-page/SerpapiPlugin.tsx             |  2 +-
 .../plugin-page/index.spec.tsx                |  2 +-
 web/app/components/header/index.spec.tsx      |  2 +-
 web/app/components/header/index.tsx           |  2 +-
 .../__tests__/authorized-in-node.spec.tsx     |  2 +-
 .../__tests__/plugin-auth-in-agent.spec.tsx   |  2 +-
 .../__tests__/api-key-modal.spec.tsx          |  2 +-
 .../__tests__/authorize-components.spec.tsx   |  2 +-
 .../__tests__/oauth-client-settings.spec.tsx  |  2 +-
 .../plugin-auth/authorize/api-key-modal.tsx   |  2 +-
 .../authorize/oauth-client-settings.tsx       |  2 +-
 .../authorized/__tests__/index.spec.tsx       |  2 +-
 .../plugins/plugin-auth/authorized/index.tsx  |  2 +-
 .../__tests__/use-plugin-auth-action.spec.ts  |  2 +-
 .../hooks/use-plugin-auth-action.ts           |  2 +-
 .../edit/__tests__/apikey-edit-modal.spec.tsx | 11 ++-
 .../edit/__tests__/manual-edit-modal.spec.tsx | 11 ++-
 .../edit/__tests__/oauth-edit-modal.spec.tsx  | 11 ++-
 .../__tests__/tool-credentials-form.spec.tsx  |  3 +
 .../plugin-page/__tests__/context.spec.tsx    |  3 +-
 .../{context.tsx => context-provider.tsx}     | 46 +--------
 .../components/plugins/plugin-page/context.ts | 46 +++++++++
 .../components/plugins/plugin-page/index.tsx  |  6 +-
 .../__tests__/update-dsl-modal.spec.tsx       |  2 +-
 .../__tests__/index.spec.tsx                  |  2 +-
 .../publisher/__tests__/index.spec.tsx        |  2 +-
 .../publisher/__tests__/popup.spec.tsx        |  2 +-
 .../rag-pipeline-header/publisher/popup.tsx   |  2 +-
 .../hooks/__tests__/index.spec.ts             |  2 +-
 .../hooks/__tests__/use-DSL.spec.ts           |  2 +-
 .../__tests__/use-update-dsl-modal.spec.ts    |  2 +-
 .../components/rag-pipeline/hooks/use-DSL.ts  |  2 +-
 .../hooks/use-update-dsl-modal.ts             |  2 +-
 .../__tests__/features-trigger.spec.tsx       |  2 +-
 .../workflow-header/features-trigger.tsx      |  2 +-
 .../components/workflow-app/hooks/use-DSL.ts  |  2 +-
 .../components/workflow/header/run-mode.tsx   |  2 +-
 .../hooks/__tests__/use-checklist.spec.ts     |  2 +-
 .../workflow/hooks/use-checklist.ts           |  2 +-
 .../plugins/link-editor-plugin/hooks.ts       |  2 +-
 .../components/object-value-item.tsx          |  2 +-
 .../components/variable-modal.tsx             |  2 +-
 .../workflow/panel/debug-and-preview/hooks.ts |  2 +-
 .../panel/env-panel/variable-modal.tsx        |  2 +-
 web/app/components/workflow/run/index.tsx     |  2 +-
 .../components/workflow/update-dsl-modal.tsx  |  2 +-
 .../education-apply/education-apply-page.tsx  |  2 +-
 ...tasets-context.tsx => datasets-context.ts} |  0
 web/context/event-emitter-provider.tsx        | 22 +++++
 .../{event-emitter.tsx => event-emitter.ts}   | 18 +---
 web/context/mitt-context-provider.tsx         | 19 ++++
 .../{mitt-context.tsx => mitt-context.ts}     | 14 +--
 ...context.tsx => modal-context-provider.tsx} | 93 ++----------------
 web/context/modal-context.test.tsx            |  2 +-
 web/context/modal-context.ts                  | 92 ++++++++++++++++++
 ...text.tsx => provider-context-provider.tsx} | 96 +------------------
 web/context/provider-context.ts               | 90 +++++++++++++++++
 web/context/workspace-context-provider.tsx    | 24 +++++
 web/context/workspace-context.ts              | 16 ++++
 web/context/workspace-context.tsx             | 36 -------
 web/eslint-suppressions.json                  | 60 ++----------
 web/hooks/use-import-dsl.ts                   |  2 +-
 191 files changed, 645 insertions(+), 615 deletions(-)
 create mode 100644 web/app/components/app/configuration/debug/debug-with-multiple-model/context-provider.tsx
 rename web/app/components/app/configuration/debug/debug-with-multiple-model/{context.tsx => context.ts} (50%)
 rename web/app/components/base/chat/chat-with-history/{context.tsx => context.ts} (100%)
 rename web/app/components/base/chat/chat/{context.tsx => context-provider.tsx} (58%)
 create mode 100644 web/app/components/base/chat/chat/context.ts
 rename web/app/components/base/chat/embedded-chatbot/{context.tsx => context.ts} (100%)
 rename web/app/components/base/radio/context/{index.tsx => index.ts} (100%)
 create mode 100644 web/app/components/base/toast/context.ts
 rename web/app/components/plugins/plugin-page/{context.tsx => context-provider.tsx} (58%)
 create mode 100644 web/app/components/plugins/plugin-page/context.ts
 rename web/context/{datasets-context.tsx => datasets-context.ts} (100%)
 create mode 100644 web/context/event-emitter-provider.tsx
 rename web/context/{event-emitter.tsx => event-emitter.ts} (53%)
 create mode 100644 web/context/mitt-context-provider.tsx
 rename web/context/{mitt-context.tsx => mitt-context.ts} (66%)
 rename web/context/{modal-context.tsx => modal-context-provider.tsx} (81%)
 create mode 100644 web/context/modal-context.ts
 rename web/context/{provider-context.tsx => provider-context-provider.tsx} (70%)
 create mode 100644 web/context/provider-context.ts
 create mode 100644 web/context/workspace-context-provider.tsx
 create mode 100644 web/context/workspace-context.ts
 delete mode 100644 web/context/workspace-context.tsx

diff --git a/web/__tests__/rag-pipeline/dsl-export-import-flow.test.ts b/web/__tests__/rag-pipeline/dsl-export-import-flow.test.ts
index 578552840d..dc5ab3fc86 100644
--- a/web/__tests__/rag-pipeline/dsl-export-import-flow.test.ts
+++ b/web/__tests__/rag-pipeline/dsl-export-import-flow.test.ts
@@ -19,7 +19,7 @@ vi.mock('react-i18next', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({ notify: mockNotify }),
 }))
 
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view.tsx
index f07b2932c9..8c1df8d63d 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view.tsx
@@ -12,7 +12,7 @@ import AppCard from '@/app/components/app/overview/app-card'
 import TriggerCard from '@/app/components/app/overview/trigger-card'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import Loading from '@/app/components/base/loading'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import MCPServiceCard from '@/app/components/tools/mcp/mcp-service-card'
 import { isTriggerNode } from '@/app/components/workflow/types'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
diff --git a/web/app/(commonLayout)/layout.tsx b/web/app/(commonLayout)/layout.tsx
index bd067fde6a..db2786f6cf 100644
--- a/web/app/(commonLayout)/layout.tsx
+++ b/web/app/(commonLayout)/layout.tsx
@@ -9,9 +9,9 @@ import Header from '@/app/components/header'
 import HeaderWrapper from '@/app/components/header/header-wrapper'
 import ReadmePanel from '@/app/components/plugins/readme-panel'
 import { AppContextProvider } from '@/context/app-context-provider'
-import { EventEmitterContextProvider } from '@/context/event-emitter'
-import { ModalContextProvider } from '@/context/modal-context'
-import { ProviderContextProvider } from '@/context/provider-context'
+import { EventEmitterContextProvider } from '@/context/event-emitter-provider'
+import { ModalContextProvider } from '@/context/modal-context-provider'
+import { ProviderContextProvider } from '@/context/provider-context-provider'
 import PartnerStack from '../components/billing/partner-stack'
 import Splash from '../components/splash'
 import RoleRouteGuard from './role-route-guard'
diff --git a/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx b/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx
index 49b59704b1..0a17822187 100644
--- a/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx
+++ b/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx
@@ -16,7 +16,7 @@ import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import { useLocalFileUploader } from '@/app/components/base/image-uploader/hooks'
 import Modal from '@/app/components/base/modal'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { DISABLE_UPLOAD_IMAGE_AS_ICON } from '@/config'
 import { updateUserProfile } from '@/service/common'
 
diff --git a/web/app/account/(commonLayout)/account-page/email-change-modal.tsx b/web/app/account/(commonLayout)/account-page/email-change-modal.tsx
index 87ca6a689c..463c27294a 100644
--- a/web/app/account/(commonLayout)/account-page/email-change-modal.tsx
+++ b/web/app/account/(commonLayout)/account-page/email-change-modal.tsx
@@ -9,7 +9,7 @@ import { useContext } from 'use-context-selector'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import {
   checkEmailExisted,
   resetEmail,
diff --git a/web/app/account/(commonLayout)/account-page/index.tsx b/web/app/account/(commonLayout)/account-page/index.tsx
index f01efc002c..908ef9c2e8 100644
--- a/web/app/account/(commonLayout)/account-page/index.tsx
+++ b/web/app/account/(commonLayout)/account-page/index.tsx
@@ -12,7 +12,7 @@ import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import PremiumBadge from '@/app/components/base/premium-badge'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import Collapse from '@/app/components/header/account-setting/collapse'
 import { IS_CE_EDITION, validPassword } from '@/config'
 import { useAppContext } from '@/context/app-context'
diff --git a/web/app/account/(commonLayout)/layout.tsx b/web/app/account/(commonLayout)/layout.tsx
index 47fb47b02b..8fdbd8a238 100644
--- a/web/app/account/(commonLayout)/layout.tsx
+++ b/web/app/account/(commonLayout)/layout.tsx
@@ -5,9 +5,9 @@ import AmplitudeProvider from '@/app/components/base/amplitude'
 import GA, { GaType } from '@/app/components/base/ga'
 import HeaderWrapper from '@/app/components/header/header-wrapper'
 import { AppContextProvider } from '@/context/app-context-provider'
-import { EventEmitterContextProvider } from '@/context/event-emitter'
-import { ModalContextProvider } from '@/context/modal-context'
-import { ProviderContextProvider } from '@/context/provider-context'
+import { EventEmitterContextProvider } from '@/context/event-emitter-provider'
+import { ModalContextProvider } from '@/context/modal-context-provider'
+import { ProviderContextProvider } from '@/context/provider-context-provider'
 import Header from './header'
 
 const Layout = ({ children }: { children: ReactNode }) => {
diff --git a/web/app/components/app-sidebar/app-info/__tests__/use-app-info-actions.spec.ts b/web/app/components/app-sidebar/app-info/__tests__/use-app-info-actions.spec.ts
index e5966ed972..6104e2b641 100644
--- a/web/app/components/app-sidebar/app-info/__tests__/use-app-info-actions.spec.ts
+++ b/web/app/components/app-sidebar/app-info/__tests__/use-app-info-actions.spec.ts
@@ -42,7 +42,7 @@ vi.mock('@/app/components/app/store', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   ToastContext: {},
 }))
 
diff --git a/web/app/components/app-sidebar/app-info/use-app-info-actions.ts b/web/app/components/app-sidebar/app-info/use-app-info-actions.ts
index 13880acbed..800f21de44 100644
--- a/web/app/components/app-sidebar/app-info/use-app-info-actions.ts
+++ b/web/app/components/app-sidebar/app-info/use-app-info-actions.ts
@@ -6,7 +6,7 @@ import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useProviderContext } from '@/context/provider-context'
 import { copyApp, deleteApp, exportAppConfig, updateAppInfo } from '@/service/apps'
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.spec.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.spec.tsx
index 6a67ba3207..55f5ee0564 100644
--- a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.spec.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.spec.tsx
@@ -1,7 +1,7 @@
 import type { Props } from './csv-uploader'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import CSVUploader from './csv-uploader'
 
 describe('CSVUploader', () => {
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
index 6d5eb1ef95..118eaea58e 100644
--- a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import Button from '@/app/components/base/button'
 import { Csv as CSVIcon } from '@/app/components/base/icons/src/public/files'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { cn } from '@/utils/classnames'
 
 export type Props = {
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 d0e9eb586c..9625204d81 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
@@ -20,7 +20,7 @@ import {
 } from '@/app/components/base/icons/src/vender/line/files'
 import PromptEditor from '@/app/components/base/prompt-editor'
 import { INSERT_VARIABLE_VALUE_BLOCK_COMMAND } from '@/app/components/base/prompt-editor/plugins/variable-block'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import Tooltip from '@/app/components/base/tooltip'
 import ConfigContext from '@/context/debug-configuration'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
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 bc94f87838..c33d55873d 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
@@ -17,7 +17,7 @@ import { useFeaturesStore } from '@/app/components/base/features/hooks'
 import PromptEditor from '@/app/components/base/prompt-editor'
 import { PROMPT_EDITOR_UPDATE_VALUE_BY_EVENT_EMITTER } from '@/app/components/base/prompt-editor/plugins/update-block'
 import { INSERT_VARIABLE_VALUE_BLOCK_COMMAND } from '@/app/components/base/prompt-editor/plugins/variable-block'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import Tooltip from '@/app/components/base/tooltip'
 import ConfigContext from '@/context/debug-configuration'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
diff --git a/web/app/components/app/configuration/config/agent/prompt-editor.tsx b/web/app/components/app/configuration/config/agent/prompt-editor.tsx
index e9e3b60859..9f1f04ba3c 100644
--- a/web/app/components/app/configuration/config/agent/prompt-editor.tsx
+++ b/web/app/components/app/configuration/config/agent/prompt-editor.tsx
@@ -12,7 +12,7 @@ import {
   CopyCheck,
 } from '@/app/components/base/icons/src/vender/line/files'
 import PromptEditor from '@/app/components/base/prompt-editor'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import ConfigContext from '@/context/debug-configuration'
 import { useModalContext } from '@/context/modal-context'
 import { cn } from '@/utils/classnames'
diff --git a/web/app/components/app/configuration/dataset-config/settings-modal/index.spec.tsx b/web/app/components/app/configuration/dataset-config/settings-modal/index.spec.tsx
index c4fdfb7553..ea70725ea8 100644
--- a/web/app/components/app/configuration/dataset-config/settings-modal/index.spec.tsx
+++ b/web/app/components/app/configuration/dataset-config/settings-modal/index.spec.tsx
@@ -3,7 +3,7 @@ import type { DataSet } from '@/models/datasets'
 import type { RetrievalConfig } from '@/types/app'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { IndexingType } from '@/app/components/datasets/create/step-two'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
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 e910702b66..c9c8d080f2 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
@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { isReRankModelSelected } from '@/app/components/datasets/common/check-rerank-model'
 import { IndexingType } from '@/app/components/datasets/create/step-two'
 import IndexMethod from '@/app/components/datasets/settings/index-method'
diff --git a/web/app/components/app/configuration/debug/debug-with-multiple-model/context-provider.tsx b/web/app/components/app/configuration/debug/debug-with-multiple-model/context-provider.tsx
new file mode 100644
index 0000000000..74aed2d1e2
--- /dev/null
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/context-provider.tsx
@@ -0,0 +1,28 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import type { DebugWithMultipleModelContextType } from './context'
+import { DebugWithMultipleModelContext } from './context'
+
+type DebugWithMultipleModelContextProviderProps = {
+  children: ReactNode
+} & DebugWithMultipleModelContextType
+export const DebugWithMultipleModelContextProvider = ({
+  children,
+  onMultipleModelConfigsChange,
+  multipleModelConfigs,
+  onDebugWithMultipleModelChange,
+  checkCanSend,
+}: DebugWithMultipleModelContextProviderProps) => {
+  return (
+    <DebugWithMultipleModelContext.Provider value={{
+      onMultipleModelConfigsChange,
+      multipleModelConfigs,
+      onDebugWithMultipleModelChange,
+      checkCanSend,
+    }}
+    >
+      {children}
+    </DebugWithMultipleModelContext.Provider>
+  )
+}
diff --git a/web/app/components/app/configuration/debug/debug-with-multiple-model/context.spec.tsx b/web/app/components/app/configuration/debug/debug-with-multiple-model/context.spec.tsx
index e26fcec607..989285f812 100644
--- a/web/app/components/app/configuration/debug/debug-with-multiple-model/context.spec.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/context.spec.tsx
@@ -1,10 +1,8 @@
 import type { ModelAndParameter } from '../types'
 import type { DebugWithMultipleModelContextType } from './context'
 import { render, screen } from '@testing-library/react'
-import {
-  DebugWithMultipleModelContextProvider,
-  useDebugWithMultipleModelContext,
-} from './context'
+import { useDebugWithMultipleModelContext } from './context'
+import { DebugWithMultipleModelContextProvider } from './context-provider'
 
 const createModelAndParameter = (overrides: Partial<ModelAndParameter> = {}): ModelAndParameter => ({
   id: 'model-1',
diff --git a/web/app/components/app/configuration/debug/debug-with-multiple-model/context.tsx b/web/app/components/app/configuration/debug/debug-with-multiple-model/context.ts
similarity index 50%
rename from web/app/components/app/configuration/debug/debug-with-multiple-model/context.tsx
rename to web/app/components/app/configuration/debug/debug-with-multiple-model/context.ts
index 38f803f8ab..e3ad06f1b9 100644
--- a/web/app/components/app/configuration/debug/debug-with-multiple-model/context.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/context.ts
@@ -10,7 +10,8 @@ export type DebugWithMultipleModelContextType = {
   onDebugWithMultipleModelChange: (singleModelConfig: ModelAndParameter) => void
   checkCanSend?: () => boolean
 }
-const DebugWithMultipleModelContext = createContext<DebugWithMultipleModelContextType>({
+
+export const DebugWithMultipleModelContext = createContext<DebugWithMultipleModelContextType>({
   multipleModelConfigs: [],
   onMultipleModelConfigsChange: noop,
   onDebugWithMultipleModelChange: noop,
@@ -18,27 +19,4 @@ const DebugWithMultipleModelContext = createContext<DebugWithMultipleModelContex
 
 export const useDebugWithMultipleModelContext = () => useContext(DebugWithMultipleModelContext)
 
-type DebugWithMultipleModelContextProviderProps = {
-  children: React.ReactNode
-} & DebugWithMultipleModelContextType
-export const DebugWithMultipleModelContextProvider = ({
-  children,
-  onMultipleModelConfigsChange,
-  multipleModelConfigs,
-  onDebugWithMultipleModelChange,
-  checkCanSend,
-}: DebugWithMultipleModelContextProviderProps) => {
-  return (
-    <DebugWithMultipleModelContext.Provider value={{
-      onMultipleModelConfigsChange,
-      multipleModelConfigs,
-      onDebugWithMultipleModelChange,
-      checkCanSend,
-    }}
-    >
-      {children}
-    </DebugWithMultipleModelContext.Provider>
-  )
-}
-
 export default DebugWithMultipleModelContext
diff --git a/web/app/components/app/configuration/debug/debug-with-multiple-model/index.tsx b/web/app/components/app/configuration/debug/debug-with-multiple-model/index.tsx
index c73eb54329..f98e8c1f06 100644
--- a/web/app/components/app/configuration/debug/debug-with-multiple-model/index.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/index.tsx
@@ -14,10 +14,8 @@ import { useDebugConfigurationContext } from '@/context/debug-configuration'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { AppModeEnum } from '@/types/app'
 import { APP_CHAT_WITH_MULTIPLE_MODEL } from '../types'
-import {
-  DebugWithMultipleModelContextProvider,
-  useDebugWithMultipleModelContext,
-} from './context'
+import { useDebugWithMultipleModelContext } from './context'
+import { DebugWithMultipleModelContextProvider } from './context-provider'
 import DebugItem from './debug-item'
 
 const DebugWithMultipleModel = () => {
diff --git a/web/app/components/app/configuration/debug/debug-with-single-model/index.spec.tsx b/web/app/components/app/configuration/debug/debug-with-single-model/index.spec.tsx
index 08bdd2bfcb..48141d0045 100644
--- a/web/app/components/app/configuration/debug/debug-with-single-model/index.spec.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-single-model/index.spec.tsx
@@ -387,7 +387,7 @@ vi.mock('@/context/event-emitter', () => ({
 }))
 
 // Mock toast context
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: vi.fn(() => ({
     notify: vi.fn(),
   })),
diff --git a/web/app/components/app/configuration/debug/index.tsx b/web/app/components/app/configuration/debug/index.tsx
index 14a00e85c7..1a6f9e264f 100644
--- a/web/app/components/app/configuration/debug/index.tsx
+++ b/web/app/components/app/configuration/debug/index.tsx
@@ -29,7 +29,7 @@ import Button from '@/app/components/base/button'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import { RefreshCcw01 } from '@/app/components/base/icons/src/vender/line/arrows'
 import PromptLogModal from '@/app/components/base/prompt-log-modal'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import TooltipPlus from '@/app/components/base/tooltip'
 import { ModelFeatureEnum, ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useDefaultModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
diff --git a/web/app/components/app/configuration/index.tsx b/web/app/components/app/configuration/index.tsx
index 16cf9454ca..a39eb3c63e 100644
--- a/web/app/components/app/configuration/index.tsx
+++ b/web/app/components/app/configuration/index.tsx
@@ -49,7 +49,8 @@ import { FeaturesProvider } from '@/app/components/base/features'
 import NewFeaturePanel from '@/app/components/base/features/new-feature-panel'
 import Loading from '@/app/components/base/loading'
 import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
-import Toast, { ToastContext } from '@/app/components/base/toast'
+import Toast from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { ModelFeatureEnum, ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import {
@@ -66,7 +67,7 @@ import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import { ANNOTATION_DEFAULT, DATASET_DEFAULT, DEFAULT_AGENT_SETTING, DEFAULT_CHAT_PROMPT_CONFIG, DEFAULT_COMPLETION_PROMPT_CONFIG } from '@/config'
 import { useAppContext } from '@/context/app-context'
 import ConfigContext from '@/context/debug-configuration'
-import { MittProvider } from '@/context/mitt-context'
+import { MittProvider } from '@/context/mitt-context-provider'
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
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 fece5598e1..35ba59a5fb 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
@@ -13,7 +13,7 @@ import FormGeneration from '@/app/components/base/features/new-feature-panel/mod
 import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
 import Modal from '@/app/components/base/modal'
 import { SimpleSelect } from '@/app/components/base/select'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import ApiBasedExtensionSelector from '@/app/components/header/account-setting/api-based-extension-page/selector'
 import { useDocLink, useLocale } from '@/context/i18n'
 import { LanguagesSupported } from '@/i18n-config/language'
diff --git a/web/app/components/app/configuration/tools/index.tsx b/web/app/components/app/configuration/tools/index.tsx
index d2873b0be3..f348a7718d 100644
--- a/web/app/components/app/configuration/tools/index.tsx
+++ b/web/app/components/app/configuration/tools/index.tsx
@@ -15,7 +15,7 @@ import {
 } from '@/app/components/base/icons/src/vender/line/general'
 import { Tool03 } from '@/app/components/base/icons/src/vender/solid/general'
 import Switch from '@/app/components/base/switch'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import Tooltip from '@/app/components/base/tooltip'
 import ConfigContext from '@/context/debug-configuration'
 import { useModalContext } from '@/context/modal-context'
diff --git a/web/app/components/app/create-app-modal/index.spec.tsx b/web/app/components/app/create-app-modal/index.spec.tsx
index 8c368df62c..a9adb17582 100644
--- a/web/app/components/app/create-app-modal/index.spec.tsx
+++ b/web/app/components/app/create-app-modal/index.spec.tsx
@@ -4,7 +4,7 @@ import { useRouter } from 'next/navigation'
 import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
 import { trackEvent } from '@/app/components/base/amplitude'
 
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
diff --git a/web/app/components/app/create-app-modal/index.tsx b/web/app/components/app/create-app-modal/index.tsx
index 66c7bce80c..16ca4bdaff 100644
--- a/web/app/components/app/create-app-modal/index.tsx
+++ b/web/app/components/app/create-app-modal/index.tsx
@@ -17,7 +17,7 @@ import FullScreenModal from '@/app/components/base/fullscreen-modal'
 import { BubbleTextMod, ChatBot, ListSparkle, Logic } from '@/app/components/base/icons/src/vender/solid/communication'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
diff --git a/web/app/components/app/create-from-dsl-modal/index.tsx b/web/app/components/app/create-from-dsl-modal/index.tsx
index 04d8b1e754..a542ef059f 100644
--- a/web/app/components/app/create-from-dsl-modal/index.tsx
+++ b/web/app/components/app/create-from-dsl-modal/index.tsx
@@ -12,7 +12,7 @@ import { trackEvent } from '@/app/components/base/amplitude'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
diff --git a/web/app/components/app/create-from-dsl-modal/uploader.tsx b/web/app/components/app/create-from-dsl-modal/uploader.tsx
index 778a2c1420..6b7ca4db61 100644
--- a/web/app/components/app/create-from-dsl-modal/uploader.tsx
+++ b/web/app/components/app/create-from-dsl-modal/uploader.tsx
@@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import ActionButton from '@/app/components/base/action-button'
 import { Yaml as YamlIcon } from '@/app/components/base/icons/src/public/files'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { cn } from '@/utils/classnames'
 import { formatFileSize } from '@/utils/format'
 
diff --git a/web/app/components/app/log/list.tsx b/web/app/components/app/log/list.tsx
index 40519dcb36..4eb733a02c 100644
--- a/web/app/components/app/log/list.tsx
+++ b/web/app/components/app/log/list.tsx
@@ -31,7 +31,7 @@ import Drawer from '@/app/components/base/drawer'
 import { getProcessedFilesFromResponse } from '@/app/components/base/file-uploader/utils'
 import Loading from '@/app/components/base/loading'
 import MessageLogModal from '@/app/components/base/message-log-modal'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import Tooltip from '@/app/components/base/tooltip'
 import { addFileInfos, sortAgentSorts } from '@/app/components/tools/utils'
 import { WorkflowContextProvider } from '@/app/components/workflow/context'
diff --git a/web/app/components/app/overview/settings/index.spec.tsx b/web/app/components/app/overview/settings/index.spec.tsx
index c9cbe0b724..d98e02ad57 100644
--- a/web/app/components/app/overview/settings/index.spec.tsx
+++ b/web/app/components/app/overview/settings/index.spec.tsx
@@ -59,16 +59,12 @@ vi.mock('@/context/modal-context', () => ({
   useModalContext: () => buildModalContext(),
 }))
 
-vi.mock('@/app/components/base/toast', async () => {
-  const actual = await vi.importActual<typeof import('@/app/components/base/toast')>('@/app/components/base/toast')
-  return {
-    ...actual,
-    useToastContext: () => ({
-      notify: mockNotify,
-      close: vi.fn(),
-    }),
-  }
-})
+vi.mock('@/app/components/base/toast/context', () => ({
+  useToastContext: () => ({
+    notify: mockNotify,
+    close: vi.fn(),
+  }),
+}))
 
 vi.mock('@/context/i18n', async () => {
   const actual = await vi.importActual<typeof import('@/context/i18n')>('@/context/i18n')
diff --git a/web/app/components/app/overview/settings/index.tsx b/web/app/components/app/overview/settings/index.tsx
index 040703f41c..92bfdc5d31 100644
--- a/web/app/components/app/overview/settings/index.tsx
+++ b/web/app/components/app/overview/settings/index.tsx
@@ -20,7 +20,7 @@ import PremiumBadge from '@/app/components/base/premium-badge'
 import { SimpleSelect } from '@/app/components/base/select'
 import Switch from '@/app/components/base/switch'
 import Textarea from '@/app/components/base/textarea'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import Tooltip from '@/app/components/base/tooltip'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { useModalContext } from '@/context/modal-context'
diff --git a/web/app/components/app/switch-app-modal/index.spec.tsx b/web/app/components/app/switch-app-modal/index.spec.tsx
index f0400f8b75..c905d79b31 100644
--- a/web/app/components/app/switch-app-modal/index.spec.tsx
+++ b/web/app/components/app/switch-app-modal/index.spec.tsx
@@ -3,7 +3,7 @@ import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { Plan } from '@/app/components/billing/type'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { AppModeEnum } from '@/types/app'
diff --git a/web/app/components/app/switch-app-modal/index.tsx b/web/app/components/app/switch-app-modal/index.tsx
index 30d7877ed0..8caa07c187 100644
--- a/web/app/components/app/switch-app-modal/index.tsx
+++ b/web/app/components/app/switch-app-modal/index.tsx
@@ -15,7 +15,7 @@ import Confirm from '@/app/components/base/confirm'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
diff --git a/web/app/components/apps/app-card.tsx b/web/app/components/apps/app-card.tsx
index 8dc5c82e13..471b3420d1 100644
--- a/web/app/components/apps/app-card.tsx
+++ b/web/app/components/apps/app-card.tsx
@@ -18,7 +18,8 @@ import AppIcon from '@/app/components/base/app-icon'
 import Divider from '@/app/components/base/divider'
 import CustomPopover from '@/app/components/base/popover'
 import TagSelector from '@/app/components/base/tag-management/selector'
-import Toast, { ToastContext } from '@/app/components/base/toast'
+import Toast from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import Tooltip from '@/app/components/base/tooltip'
 import {
   AlertDialog,
diff --git a/web/app/components/base/agent-log-modal/__tests__/detail.spec.tsx b/web/app/components/base/agent-log-modal/__tests__/detail.spec.tsx
index c77f144da2..47d854e028 100644
--- a/web/app/components/base/agent-log-modal/__tests__/detail.spec.tsx
+++ b/web/app/components/base/agent-log-modal/__tests__/detail.spec.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react'
 import type { IChatItem } from '@/app/components/base/chat/chat/type'
 import type { AgentLogDetailResponse } from '@/models/log'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { fetchAgentLogDetail } from '@/service/log'
 import AgentLogDetail from '../detail'
 
diff --git a/web/app/components/base/agent-log-modal/__tests__/index.spec.tsx b/web/app/components/base/agent-log-modal/__tests__/index.spec.tsx
index 6b59e90c77..6437ae5b43 100644
--- a/web/app/components/base/agent-log-modal/__tests__/index.spec.tsx
+++ b/web/app/components/base/agent-log-modal/__tests__/index.spec.tsx
@@ -1,7 +1,7 @@
 import type { IChatItem } from '@/app/components/base/chat/chat/type'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { useClickAway } from 'ahooks'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { fetchAgentLogDetail } from '@/service/log'
 import AgentLogModal from '../index'
 
diff --git a/web/app/components/base/agent-log-modal/detail.tsx b/web/app/components/base/agent-log-modal/detail.tsx
index 36b502e9a5..21ed0be7e8 100644
--- a/web/app/components/base/agent-log-modal/detail.tsx
+++ b/web/app/components/base/agent-log-modal/detail.tsx
@@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import Loading from '@/app/components/base/loading'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { fetchAgentLogDetail } from '@/service/log'
 import { cn } from '@/utils/classnames'
 import ResultPanel from './result'
diff --git a/web/app/components/base/chat/chat-with-history/context.tsx b/web/app/components/base/chat/chat-with-history/context.ts
similarity index 100%
rename from web/app/components/base/chat/chat-with-history/context.tsx
rename to web/app/components/base/chat/chat-with-history/context.ts
diff --git a/web/app/components/base/chat/chat-with-history/hooks.tsx b/web/app/components/base/chat/chat-with-history/hooks.tsx
index da344a9789..23936111ce 100644
--- a/web/app/components/base/chat/chat-with-history/hooks.tsx
+++ b/web/app/components/base/chat/chat-with-history/hooks.tsx
@@ -23,7 +23,7 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { getProcessedFilesFromResponse } from '@/app/components/base/file-uploader/utils'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { InputVarType } from '@/app/components/workflow/types'
 import { useWebAppStore } from '@/context/web-app-context'
 import { useAppFavicon } from '@/hooks/use-app-favicon'
diff --git a/web/app/components/base/chat/chat/__tests__/context.spec.tsx b/web/app/components/base/chat/chat/__tests__/context.spec.tsx
index fd00156e59..aeba073a7b 100644
--- a/web/app/components/base/chat/chat/__tests__/context.spec.tsx
+++ b/web/app/components/base/chat/chat/__tests__/context.spec.tsx
@@ -3,7 +3,8 @@ import type { ChatContextValue } from '../context'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { vi } from 'vitest'
-import { ChatContextProvider, useChatContext } from '../context'
+import { useChatContext } from '../context'
+import { ChatContextProvider } from '../context-provider'
 
 const TestConsumer = () => {
   const context = useChatContext()
diff --git a/web/app/components/base/chat/chat/__tests__/question.spec.tsx b/web/app/components/base/chat/chat/__tests__/question.spec.tsx
index 1d0584805b..7c717b6e31 100644
--- a/web/app/components/base/chat/chat/__tests__/question.spec.tsx
+++ b/web/app/components/base/chat/chat/__tests__/question.spec.tsx
@@ -9,7 +9,7 @@ import { vi } from 'vitest'
 
 import Toast from '../../../toast'
 import { ThemeBuilder } from '../../embedded-chatbot/theme/theme-context'
-import { ChatContextProvider } from '../context'
+import { ChatContextProvider } from '../context-provider'
 import Question from '../question'
 
 // Global Mocks
diff --git a/web/app/components/base/chat/chat/chat-input-area/__tests__/index.spec.tsx b/web/app/components/base/chat/chat/chat-input-area/__tests__/index.spec.tsx
index a6d4570fcb..03f3c673ce 100644
--- a/web/app/components/base/chat/chat/chat-input-area/__tests__/index.spec.tsx
+++ b/web/app/components/base/chat/chat/chat-input-area/__tests__/index.spec.tsx
@@ -91,15 +91,9 @@ vi.mock('@/app/components/base/features/hooks', () => ({
 // ---------------------------------------------------------------------------
 // Toast context
 // ---------------------------------------------------------------------------
-vi.mock('@/app/components/base/toast', async () => {
-  const actual = await vi.importActual<typeof import('@/app/components/base/toast')>(
-    '@/app/components/base/toast',
-  )
-  return {
-    ...actual,
-    useToastContext: () => ({ notify: mockNotify }),
-  }
-})
+vi.mock('@/app/components/base/toast/context', () => ({
+  useToastContext: () => ({ notify: mockNotify, close: vi.fn() }),
+}))
 
 // ---------------------------------------------------------------------------
 // Internal layout hook – controls single/multi-line textarea mode
diff --git a/web/app/components/base/chat/chat/chat-input-area/index.tsx b/web/app/components/base/chat/chat/chat-input-area/index.tsx
index 9de52cb18c..170cccaaca 100644
--- a/web/app/components/base/chat/chat/chat-input-area/index.tsx
+++ b/web/app/components/base/chat/chat/chat-input-area/index.tsx
@@ -22,7 +22,7 @@ import {
   FileContextProvider,
   useFileStore,
 } from '@/app/components/base/file-uploader/store'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import VoiceInput from '@/app/components/base/voice-input'
 import { TransferMethod } from '@/types/app'
 import { cn } from '@/utils/classnames'
diff --git a/web/app/components/base/chat/chat/check-input-forms-hooks.ts b/web/app/components/base/chat/chat/check-input-forms-hooks.ts
index 2da57b289e..842e89070b 100644
--- a/web/app/components/base/chat/chat/check-input-forms-hooks.ts
+++ b/web/app/components/base/chat/chat/check-input-forms-hooks.ts
@@ -1,7 +1,7 @@
 import type { InputForm } from './type'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { InputVarType } from '@/app/components/workflow/types'
 import { TransferMethod } from '@/types/app'
 
diff --git a/web/app/components/base/chat/chat/context.tsx b/web/app/components/base/chat/chat/context-provider.tsx
similarity index 58%
rename from web/app/components/base/chat/chat/context.tsx
rename to web/app/components/base/chat/chat/context-provider.tsx
index 7843665ad7..02503521e5 100644
--- a/web/app/components/base/chat/chat/context.tsx
+++ b/web/app/components/base/chat/chat/context-provider.tsx
@@ -1,30 +1,8 @@
 'use client'
 
 import type { ReactNode } from 'react'
-import type { ChatProps } from './index'
-import { createContext, useContext } from 'use-context-selector'
-
-export type ChatContextValue = Pick<ChatProps, 'config'
-  | 'isResponding'
-  | 'chatList'
-  | 'showPromptLog'
-  | 'questionIcon'
-  | 'answerIcon'
-  | 'onSend'
-  | 'onRegenerate'
-  | 'onAnnotationEdited'
-  | 'onAnnotationAdded'
-  | 'onAnnotationRemoved'
-  | 'disableFeedback'
-  | 'onFeedback'
-  | 'getHumanInputNodeData'> & {
-    readonly?: boolean
-  }
-
-const ChatContext = createContext<ChatContextValue>({
-  chatList: [],
-  readonly: false,
-})
+import type { ChatContextValue } from './context'
+import { ChatContext } from './context'
 
 type ChatContextProviderProps = {
   children: ReactNode
@@ -71,7 +49,3 @@ export const ChatContextProvider = ({
     </ChatContext.Provider>
   )
 }
-
-export const useChatContext = () => useContext(ChatContext)
-
-export default ChatContext
diff --git a/web/app/components/base/chat/chat/context.ts b/web/app/components/base/chat/chat/context.ts
new file mode 100644
index 0000000000..ff0bd26336
--- /dev/null
+++ b/web/app/components/base/chat/chat/context.ts
@@ -0,0 +1,30 @@
+'use client'
+
+import type { ChatProps } from './index'
+import { createContext, useContext } from 'use-context-selector'
+
+export type ChatContextValue = Pick<ChatProps, 'config'
+  | 'isResponding'
+  | 'chatList'
+  | 'showPromptLog'
+  | 'questionIcon'
+  | 'answerIcon'
+  | 'onSend'
+  | 'onRegenerate'
+  | 'onAnnotationEdited'
+  | 'onAnnotationAdded'
+  | 'onAnnotationRemoved'
+  | 'disableFeedback'
+  | 'onFeedback'
+  | 'getHumanInputNodeData'> & {
+    readonly?: boolean
+  }
+
+export const ChatContext = createContext<ChatContextValue>({
+  chatList: [],
+  readonly: false,
+})
+
+export const useChatContext = () => useContext(ChatContext)
+
+export default ChatContext
diff --git a/web/app/components/base/chat/chat/hooks.ts b/web/app/components/base/chat/chat/hooks.ts
index 3e01fa5ade..4828ef2a47 100644
--- a/web/app/components/base/chat/chat/hooks.ts
+++ b/web/app/components/base/chat/chat/hooks.ts
@@ -30,7 +30,7 @@ import {
   getProcessedFiles,
   getProcessedFilesFromResponse,
 } from '@/app/components/base/file-uploader/utils'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { NodeRunningStatus, WorkflowRunningStatus } from '@/app/components/workflow/types'
 import useTimestamp from '@/hooks/use-timestamp'
 import {
diff --git a/web/app/components/base/chat/chat/index.tsx b/web/app/components/base/chat/chat/index.tsx
index a77911d895..69c064e3e2 100644
--- a/web/app/components/base/chat/chat/index.tsx
+++ b/web/app/components/base/chat/chat/index.tsx
@@ -30,7 +30,7 @@ import PromptLogModal from '@/app/components/base/prompt-log-modal'
 import { cn } from '@/utils/classnames'
 import Answer from './answer'
 import ChatInputArea from './chat-input-area'
-import { ChatContextProvider } from './context'
+import { ChatContextProvider } from './context-provider'
 import Question from './question'
 import TryToAsk from './try-to-ask'
 
diff --git a/web/app/components/base/chat/embedded-chatbot/context.tsx b/web/app/components/base/chat/embedded-chatbot/context.ts
similarity index 100%
rename from web/app/components/base/chat/embedded-chatbot/context.tsx
rename to web/app/components/base/chat/embedded-chatbot/context.ts
diff --git a/web/app/components/base/chat/embedded-chatbot/hooks.tsx b/web/app/components/base/chat/embedded-chatbot/hooks.tsx
index bffee78792..da142a69ec 100644
--- a/web/app/components/base/chat/embedded-chatbot/hooks.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/hooks.tsx
@@ -21,7 +21,7 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { addFileInfos, sortAgentSorts } from '@/app/components/tools/utils'
 import { InputVarType } from '@/app/components/workflow/types'
 import { useWebAppStore } from '@/context/web-app-context'
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/content.spec.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/content.spec.tsx
index 08c9a035e7..aad2d3d09b 100644
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/content.spec.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/content.spec.tsx
@@ -16,7 +16,7 @@ vi.mock('next/navigation', () => ({
   useSearchParams: () => new URLSearchParams(),
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({ notify: vi.fn() }),
 }))
 
diff --git a/web/app/components/base/features/new-feature-panel/moderation/__tests__/moderation-setting-modal.spec.tsx b/web/app/components/base/features/new-feature-panel/moderation/__tests__/moderation-setting-modal.spec.tsx
index 3c690635da..88f74d2686 100644
--- a/web/app/components/base/features/new-feature-panel/moderation/__tests__/moderation-setting-modal.spec.tsx
+++ b/web/app/components/base/features/new-feature-panel/moderation/__tests__/moderation-setting-modal.spec.tsx
@@ -3,7 +3,7 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import ModerationSettingModal from '../moderation-setting-modal'
 
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({ notify: mockNotify }),
 }))
 
diff --git a/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx b/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
index c68abfd7b1..4c0682d182 100644
--- a/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import Modal from '@/app/components/base/modal'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import ApiBasedExtensionSelector from '@/app/components/header/account-setting/api-based-extension-page/selector'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { CustomConfigurationStatusEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
diff --git a/web/app/components/base/file-uploader/__tests__/hooks.spec.ts b/web/app/components/base/file-uploader/__tests__/hooks.spec.ts
index 00c64224aa..8343974967 100644
--- a/web/app/components/base/file-uploader/__tests__/hooks.spec.ts
+++ b/web/app/components/base/file-uploader/__tests__/hooks.spec.ts
@@ -11,7 +11,7 @@ vi.mock('next/navigation', () => ({
 }))
 
 // Exception: hook requires toast context that isn't available without a provider wrapper
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({
     notify: mockNotify,
   }),
diff --git a/web/app/components/base/file-uploader/hooks.ts b/web/app/components/base/file-uploader/hooks.ts
index 14e46548d8..4aab60175c 100644
--- a/web/app/components/base/file-uploader/hooks.ts
+++ b/web/app/components/base/file-uploader/hooks.ts
@@ -18,7 +18,7 @@ import {
   MAX_FILE_UPLOAD_LIMIT,
   VIDEO_SIZE_LIMIT,
 } from '@/app/components/base/file-uploader/constants'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import { uploadRemoteFileInfo } from '@/service/common'
 import { TransferMethod } from '@/types/app'
diff --git a/web/app/components/base/form/hooks/__tests__/use-check-validated.spec.ts b/web/app/components/base/form/hooks/__tests__/use-check-validated.spec.ts
index b9d60594f7..28eb5bd5ed 100644
--- a/web/app/components/base/form/hooks/__tests__/use-check-validated.spec.ts
+++ b/web/app/components/base/form/hooks/__tests__/use-check-validated.spec.ts
@@ -5,7 +5,7 @@ import { useCheckValidated } from '../use-check-validated'
 
 const mockNotify = vi.fn()
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({
     notify: mockNotify,
   }),
diff --git a/web/app/components/base/form/hooks/use-check-validated.ts b/web/app/components/base/form/hooks/use-check-validated.ts
index 7ed6164bb2..d186996035 100644
--- a/web/app/components/base/form/hooks/use-check-validated.ts
+++ b/web/app/components/base/form/hooks/use-check-validated.ts
@@ -1,7 +1,7 @@
 import type { AnyFormApi } from '@tanstack/react-form'
 import type { FormSchema } from '@/app/components/base/form/types'
 import { useCallback } from 'react'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 
 export const useCheckValidated = (form: AnyFormApi, FormSchemas: FormSchema[]) => {
   const { notify } = useToastContext()
diff --git a/web/app/components/base/image-uploader/__tests__/hooks.spec.ts b/web/app/components/base/image-uploader/__tests__/hooks.spec.ts
index 4d150830d0..f79ea98081 100644
--- a/web/app/components/base/image-uploader/__tests__/hooks.spec.ts
+++ b/web/app/components/base/image-uploader/__tests__/hooks.spec.ts
@@ -5,7 +5,7 @@ import { Resolution, TransferMethod } from '@/types/app'
 import { useClipboardUploader, useDraggableUploader, useImageFiles, useLocalFileUploader } from '../hooks'
 
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({ notify: mockNotify }),
 }))
 
diff --git a/web/app/components/base/image-uploader/hooks.ts b/web/app/components/base/image-uploader/hooks.ts
index cd309a1f7b..03cf0feeca 100644
--- a/web/app/components/base/image-uploader/hooks.ts
+++ b/web/app/components/base/image-uploader/hooks.ts
@@ -3,7 +3,7 @@ import type { ImageFile, VisionSettings } from '@/types/app'
 import { useParams } from 'next/navigation'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { ALLOW_FILE_EXTENSIONS, TransferMethod } from '@/types/app'
 import { getImageUploadErrorMessage, imageUpload } from './utils'
 
diff --git a/web/app/components/base/markdown-blocks/__tests__/button.spec.tsx b/web/app/components/base/markdown-blocks/__tests__/button.spec.tsx
index 305896f4f1..95ed788db3 100644
--- a/web/app/components/base/markdown-blocks/__tests__/button.spec.tsx
+++ b/web/app/components/base/markdown-blocks/__tests__/button.spec.tsx
@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event'
 // markdown-button.spec.tsx
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { ChatContextProvider } from '@/app/components/base/chat/chat/context'
+import { ChatContextProvider } from '@/app/components/base/chat/chat/context-provider'
 
 import MarkdownButton from '../button'
 
diff --git a/web/app/components/base/markdown-blocks/__tests__/think-block.spec.tsx b/web/app/components/base/markdown-blocks/__tests__/think-block.spec.tsx
index 2cd31f9a49..e8b956cbbf 100644
--- a/web/app/components/base/markdown-blocks/__tests__/think-block.spec.tsx
+++ b/web/app/components/base/markdown-blocks/__tests__/think-block.spec.tsx
@@ -1,6 +1,6 @@
 import { act, render, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { ChatContextProvider } from '@/app/components/base/chat/chat/context'
+import { ChatContextProvider } from '@/app/components/base/chat/chat/context-provider'
 import ThinkBlock from '../think-block'
 
 // Mock react-i18next
diff --git a/web/app/components/base/markdown-blocks/think-block.stories.tsx b/web/app/components/base/markdown-blocks/think-block.stories.tsx
index 23713fb263..7c3f809ee7 100644
--- a/web/app/components/base/markdown-blocks/think-block.stories.tsx
+++ b/web/app/components/base/markdown-blocks/think-block.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { useState } from 'react'
-import { ChatContextProvider } from '@/app/components/base/chat/chat/context'
+import { ChatContextProvider } from '@/app/components/base/chat/chat/context-provider'
 import ThinkBlock from './think-block'
 
 const THOUGHT_TEXT = `
diff --git a/web/app/components/base/prompt-editor/plugins/component-picker-block/__tests__/index.spec.tsx b/web/app/components/base/prompt-editor/plugins/component-picker-block/__tests__/index.spec.tsx
index 2deec561e9..6cc6c3a67f 100644
--- a/web/app/components/base/prompt-editor/plugins/component-picker-block/__tests__/index.spec.tsx
+++ b/web/app/components/base/prompt-editor/plugins/component-picker-block/__tests__/index.spec.tsx
@@ -28,7 +28,8 @@ import {
 import * as React from 'react'
 import { GeneratorType } from '@/app/components/app/configuration/config/automatic/types'
 import { VarType } from '@/app/components/workflow/types'
-import { EventEmitterContextProvider, useEventEmitterContextContext } from '@/context/event-emitter'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+import { EventEmitterContextProvider } from '@/context/event-emitter-provider'
 import { INSERT_CONTEXT_BLOCK_COMMAND } from '../../context-block'
 import { INSERT_CURRENT_BLOCK_COMMAND } from '../../current-block'
 import { INSERT_ERROR_MESSAGE_BLOCK_COMMAND } from '../../error-message-block'
diff --git a/web/app/components/base/radio/context/index.tsx b/web/app/components/base/radio/context/index.ts
similarity index 100%
rename from web/app/components/base/radio/context/index.tsx
rename to web/app/components/base/radio/context/index.ts
diff --git a/web/app/components/base/tag-input/__tests__/index.spec.tsx b/web/app/components/base/tag-input/__tests__/index.spec.tsx
index b091d9cd03..f07399f8af 100644
--- a/web/app/components/base/tag-input/__tests__/index.spec.tsx
+++ b/web/app/components/base/tag-input/__tests__/index.spec.tsx
@@ -5,7 +5,7 @@ import TagInput from '../index'
 
 const mockNotify = vi.fn()
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({
     notify: mockNotify,
   }),
diff --git a/web/app/components/base/tag-input/index.tsx b/web/app/components/base/tag-input/index.tsx
index 1c49b026fb..377e68abe4 100644
--- a/web/app/components/base/tag-input/index.tsx
+++ b/web/app/components/base/tag-input/index.tsx
@@ -2,7 +2,7 @@ import type { ChangeEvent, FC, KeyboardEvent } from 'react'
 import { useCallback, useState } from 'react'
 import AutosizeInput from 'react-18-input-autosize'
 import { useTranslation } from 'react-i18next'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { cn } from '@/utils/classnames'
 
 type TagInputProps = {
diff --git a/web/app/components/base/tag-management/__tests__/panel.spec.tsx b/web/app/components/base/tag-management/__tests__/panel.spec.tsx
index c91c72e583..cd9e37e286 100644
--- a/web/app/components/base/tag-management/__tests__/panel.spec.tsx
+++ b/web/app/components/base/tag-management/__tests__/panel.spec.tsx
@@ -3,7 +3,7 @@ import { render, screen, waitFor, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import { act } from 'react'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import Panel from '../panel'
 import { useStore as useTagStore } from '../store'
 
diff --git a/web/app/components/base/tag-management/__tests__/selector.spec.tsx b/web/app/components/base/tag-management/__tests__/selector.spec.tsx
index dc58ca37e6..43f17a1e8c 100644
--- a/web/app/components/base/tag-management/__tests__/selector.spec.tsx
+++ b/web/app/components/base/tag-management/__tests__/selector.spec.tsx
@@ -3,7 +3,7 @@ import { render, screen, waitFor, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import { act } from 'react'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import TagSelector from '../selector'
 import { useStore as useTagStore } from '../store'
 
diff --git a/web/app/components/base/tag-management/index.tsx b/web/app/components/base/tag-management/index.tsx
index e9ce85ecc0..b7682bcdad 100644
--- a/web/app/components/base/tag-management/index.tsx
+++ b/web/app/components/base/tag-management/index.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import Modal from '@/app/components/base/modal'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import {
   createTag,
   fetchTagList,
diff --git a/web/app/components/base/tag-management/panel.tsx b/web/app/components/base/tag-management/panel.tsx
index 4174ba0476..cebed74f3b 100644
--- a/web/app/components/base/tag-management/panel.tsx
+++ b/web/app/components/base/tag-management/panel.tsx
@@ -10,7 +10,7 @@ import { useContext } from 'use-context-selector'
 import Checkbox from '@/app/components/base/checkbox'
 import Divider from '@/app/components/base/divider'
 import Input from '@/app/components/base/input'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { bindTag, createTag, unBindTag } from '@/service/tag'
 import { useStore as useTagStore } from './store'
 
diff --git a/web/app/components/base/tag-management/tag-item-editor.tsx b/web/app/components/base/tag-management/tag-item-editor.tsx
index a37e42dcce..3cff335f58 100644
--- a/web/app/components/base/tag-management/tag-item-editor.tsx
+++ b/web/app/components/base/tag-management/tag-item-editor.tsx
@@ -6,7 +6,7 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import Confirm from '@/app/components/base/confirm'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import Tooltip from '@/app/components/base/tooltip'
 import {
   deleteTag,
diff --git a/web/app/components/base/text-generation/__tests__/hooks.spec.ts b/web/app/components/base/text-generation/__tests__/hooks.spec.ts
index cab06f1c8a..a5b5578158 100644
--- a/web/app/components/base/text-generation/__tests__/hooks.spec.ts
+++ b/web/app/components/base/text-generation/__tests__/hooks.spec.ts
@@ -5,7 +5,7 @@ import { useTextGeneration } from '../hooks'
 const mockNotify = vi.fn()
 const mockSsePost = vi.fn<(url: string, fetchOptions: { body: Record<string, unknown> }, otherOptions: IOtherOptions) => void>()
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({
     notify: mockNotify,
   }),
diff --git a/web/app/components/base/text-generation/hooks.ts b/web/app/components/base/text-generation/hooks.ts
index c5d008956b..4314a81925 100644
--- a/web/app/components/base/text-generation/hooks.ts
+++ b/web/app/components/base/text-generation/hooks.ts
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { ssePost } from '@/service/base'
 
 export const useTextGeneration = () => {
diff --git a/web/app/components/base/toast/__tests__/index.spec.tsx b/web/app/components/base/toast/__tests__/index.spec.tsx
index f526290fa1..2f5fa49823 100644
--- a/web/app/components/base/toast/__tests__/index.spec.tsx
+++ b/web/app/components/base/toast/__tests__/index.spec.tsx
@@ -2,7 +2,8 @@ import type { ReactNode } from 'react'
 import { act, render, screen, waitFor } from '@testing-library/react'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
-import Toast, { ToastProvider, useToastContext } from '..'
+import Toast, { ToastProvider } from '..'
+import { useToastContext } from '../context'
 
 const TestComponent = () => {
   const { notify, close } = useToastContext()
diff --git a/web/app/components/base/toast/context.ts b/web/app/components/base/toast/context.ts
new file mode 100644
index 0000000000..ddd8f91336
--- /dev/null
+++ b/web/app/components/base/toast/context.ts
@@ -0,0 +1,23 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { createContext, useContext } from 'use-context-selector'
+
+export type IToastProps = {
+  type?: 'success' | 'error' | 'warning' | 'info'
+  size?: 'md' | 'sm'
+  duration?: number
+  message: string
+  children?: ReactNode
+  onClose?: () => void
+  className?: string
+  customComponent?: ReactNode
+}
+
+type IToastContext = {
+  notify: (props: IToastProps) => void
+  close: () => void
+}
+
+export const ToastContext = createContext<IToastContext>({} as IToastContext)
+export const useToastContext = () => useContext(ToastContext)
diff --git a/web/app/components/base/toast/index.stories.tsx b/web/app/components/base/toast/index.stories.tsx
index 4ab9138070..40d6fecfc2 100644
--- a/web/app/components/base/toast/index.stories.tsx
+++ b/web/app/components/base/toast/index.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { useCallback } from 'react'
-import Toast, { ToastProvider, useToastContext } from '.'
+import Toast, { ToastProvider } from '.'
+import { useToastContext } from './context'
 
 const ToastControls = () => {
   const { notify } = useToastContext()
diff --git a/web/app/components/base/toast/index.tsx b/web/app/components/base/toast/index.tsx
index 1b9ae4eedb..a70a0db06c 100644
--- a/web/app/components/base/toast/index.tsx
+++ b/web/app/components/base/toast/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { ReactNode } from 'react'
+import type { IToastProps } from './context'
 import {
   RiAlertFill,
   RiCheckboxCircleFill,
@@ -11,31 +12,13 @@ import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { createRoot } from 'react-dom/client'
-import { createContext, useContext } from 'use-context-selector'
 import ActionButton from '@/app/components/base/action-button'
 import { cn } from '@/utils/classnames'
-
-export type IToastProps = {
-  type?: 'success' | 'error' | 'warning' | 'info'
-  size?: 'md' | 'sm'
-  duration?: number
-  message: string
-  children?: ReactNode
-  onClose?: () => void
-  className?: string
-  customComponent?: ReactNode
-}
-type IToastContext = {
-  notify: (props: IToastProps) => void
-  close: () => void
-}
+import { ToastContext, useToastContext } from './context'
 
 export type ToastHandle = {
   clear?: VoidFunction
 }
-
-export const ToastContext = createContext<IToastContext>({} as IToastContext)
-export const useToastContext = () => useContext(ToastContext)
 const Toast = ({
   type = 'info',
   size = 'md',
@@ -77,11 +60,11 @@ const Toast = ({
         </div>
         <div className={cn('flex grow flex-col items-start gap-1 py-1', size === 'md' ? 'px-1' : 'px-0.5')}>
           <div className="flex items-center gap-1">
-            <div className="system-sm-semibold text-text-primary [word-break:break-word]">{message}</div>
+            <div className="text-text-primary system-sm-semibold [word-break:break-word]">{message}</div>
             {customComponent}
           </div>
           {!!children && (
-            <div className="system-xs-regular text-text-secondary">
+            <div className="text-text-secondary system-xs-regular">
               {children}
             </div>
           )}
@@ -183,3 +166,5 @@ Toast.notify = ({
 }
 
 export default Toast
+
+export type { IToastProps } from './context'
diff --git a/web/app/components/custom/custom-web-app-brand/__tests__/index.spec.tsx b/web/app/components/custom/custom-web-app-brand/__tests__/index.spec.tsx
index 2ceb45235c..1d17a2ae0f 100644
--- a/web/app/components/custom/custom-web-app-brand/__tests__/index.spec.tsx
+++ b/web/app/components/custom/custom-web-app-brand/__tests__/index.spec.tsx
@@ -1,7 +1,7 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { getImageUploadErrorMessage, imageUpload } from '@/app/components/base/image-uploader/utils'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { Plan } from '@/app/components/billing/type'
 import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
@@ -9,7 +9,7 @@ import { useProviderContext } from '@/context/provider-context'
 import { updateCurrentWorkspace } from '@/service/common'
 import CustomWebAppBrand from '../index'
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: vi.fn(),
 }))
 vi.mock('@/service/common', () => ({
diff --git a/web/app/components/custom/custom-web-app-brand/index.tsx b/web/app/components/custom/custom-web-app-brand/index.tsx
index 438e69894d..e6f9a3837b 100644
--- a/web/app/components/custom/custom-web-app-brand/index.tsx
+++ b/web/app/components/custom/custom-web-app-brand/index.tsx
@@ -16,7 +16,7 @@ import { BubbleTextMod } from '@/app/components/base/icons/src/vender/solid/comm
 import { getImageUploadErrorMessage, imageUpload } from '@/app/components/base/image-uploader/utils'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
 import Switch from '@/app/components/base/switch'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { Plan } from '@/app/components/billing/type'
 import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/__tests__/uploader.spec.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/__tests__/uploader.spec.tsx
index db67c91bc0..e47a876fe8 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/__tests__/uploader.spec.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/__tests__/uploader.spec.tsx
@@ -4,7 +4,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import Uploader from '../uploader'
 
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   ToastContext: {
     Provider: ({ children }: { children: React.ReactNode }) => children,
     Consumer: ({ children }: { children: (value: { notify: typeof mockNotify }) => React.ReactNode }) => children({ notify: mockNotify }),
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/hooks/use-dsl-import.ts b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/hooks/use-dsl-import.ts
index 87e55ea740..c839fad3a2 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/hooks/use-dsl-import.ts
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/hooks/use-dsl-import.ts
@@ -4,7 +4,7 @@ import { useRouter } from 'next/navigation'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
 import {
   DSLImportMode,
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx
index 3fa940c60d..faf168c73a 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx
@@ -10,7 +10,7 @@ import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import ActionButton from '@/app/components/base/action-button'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { cn } from '@/utils/classnames'
 import { formatFileSize } from '@/utils/format'
 
diff --git a/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx b/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
index a9f55c8b84..0a4064de2a 100644
--- a/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
+++ b/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
@@ -8,7 +8,7 @@ import { trackEvent } from '@/app/components/base/amplitude'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 
 import { createEmptyDataset } from '@/service/datasets'
 import { useInvalidDatasetList } from '@/service/knowledge/use-dataset'
diff --git a/web/app/components/datasets/create/file-uploader/hooks/__tests__/use-file-upload.spec.tsx b/web/app/components/datasets/create/file-uploader/hooks/__tests__/use-file-upload.spec.tsx
index b5d1a96554..80331afe2a 100644
--- a/web/app/components/datasets/create/file-uploader/hooks/__tests__/use-file-upload.spec.tsx
+++ b/web/app/components/datasets/create/file-uploader/hooks/__tests__/use-file-upload.spec.tsx
@@ -2,7 +2,7 @@ import type { ReactNode } from 'react'
 import type { CustomFile, FileItem } from '@/models/datasets'
 import { act, render, renderHook, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 
 import { PROGRESS_COMPLETE, PROGRESS_ERROR, PROGRESS_NOT_STARTED } from '../../constants'
 // Import after mocks
diff --git a/web/app/components/datasets/create/file-uploader/hooks/use-file-upload.ts b/web/app/components/datasets/create/file-uploader/hooks/use-file-upload.ts
index e097bab755..ada60fac1a 100644
--- a/web/app/components/datasets/create/file-uploader/hooks/use-file-upload.ts
+++ b/web/app/components/datasets/create/file-uploader/hooks/use-file-upload.ts
@@ -5,7 +5,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { getFileUploadErrorMessage } from '@/app/components/base/file-uploader/utils'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { IS_CE_EDITION } from '@/config'
 import { useLocale } from '@/context/i18n'
 import { LanguagesSupported } from '@/i18n-config/language'
diff --git a/web/app/components/datasets/documents/components/__tests__/operations.spec.tsx b/web/app/components/datasets/documents/components/__tests__/operations.spec.tsx
index 5aae8dda73..b988b1aeab 100644
--- a/web/app/components/datasets/documents/components/__tests__/operations.spec.tsx
+++ b/web/app/components/datasets/documents/components/__tests__/operations.spec.tsx
@@ -10,7 +10,7 @@ vi.mock('next/navigation', () => ({
 }))
 
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   ToastContext: {
     Provider: ({ children }: { children: React.ReactNode }) => children,
   },
diff --git a/web/app/components/datasets/documents/components/operations.tsx b/web/app/components/datasets/documents/components/operations.tsx
index 15c89a9b26..84e16c7c48 100644
--- a/web/app/components/datasets/documents/components/operations.tsx
+++ b/web/app/components/datasets/documents/components/operations.tsx
@@ -24,7 +24,7 @@ import Divider from '@/app/components/base/divider'
 import { SearchLinesSparkle } from '@/app/components/base/icons/src/vender/knowledge'
 import CustomPopover from '@/app/components/base/popover'
 import Switch from '@/app/components/base/switch'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import Tooltip from '@/app/components/base/tooltip'
 import { IS_CE_EDITION } from '@/config'
 import { DataSourceType, DocumentActionType } from '@/models/datasets'
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/hooks/__tests__/use-local-file-upload.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/hooks/__tests__/use-local-file-upload.spec.tsx
index bc9ce04beb..efd1f2a483 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/hooks/__tests__/use-local-file-upload.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/hooks/__tests__/use-local-file-upload.spec.tsx
@@ -9,7 +9,7 @@ const mockNotify = vi.fn()
 const mockClose = vi.fn()
 
 // Mock ToastContext with factory function
-vi.mock('@/app/components/base/toast', async () => {
+vi.mock('@/app/components/base/toast/context', async () => {
   const { createContext, useContext } = await import('use-context-selector')
   const context = createContext({ notify: mockNotify, close: mockClose })
   return {
@@ -87,7 +87,7 @@ vi.mock('@/service/base', () => ({
 
 // Import after all mocks are set up
 const { useLocalFileUpload } = await import('../use-local-file-upload')
-const { ToastContext } = await import('@/app/components/base/toast')
+const { ToastContext } = await import('@/app/components/base/toast/context')
 
 const createWrapper = () => {
   return ({ children }: { children: ReactNode }) => (
diff --git a/web/app/components/datasets/documents/detail/batch-modal/__tests__/csv-uploader.spec.tsx b/web/app/components/datasets/documents/detail/batch-modal/__tests__/csv-uploader.spec.tsx
index 7fb1de7cf9..6876753714 100644
--- a/web/app/components/datasets/documents/detail/batch-modal/__tests__/csv-uploader.spec.tsx
+++ b/web/app/components/datasets/documents/detail/batch-modal/__tests__/csv-uploader.spec.tsx
@@ -25,7 +25,7 @@ vi.mock('@/hooks/use-theme', () => ({
 }))
 
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   ToastContext: {
     Provider: ({ children }: { children: ReactNode }) => children,
     Consumer: ({ children }: { children: (ctx: { notify: typeof mockNotify }) => ReactNode }) => children({ notify: mockNotify }),
diff --git a/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx b/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
index f3a86e910d..63efc766b7 100644
--- a/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
+++ b/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
@@ -12,7 +12,7 @@ import Button from '@/app/components/base/button'
 import { getFileUploadErrorMessage } from '@/app/components/base/file-uploader/utils'
 import { Csv as CSVIcon } from '@/app/components/base/icons/src/public/files'
 import SimplePieChart from '@/app/components/base/simple-pie-chart'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import useTheme from '@/hooks/use-theme'
 import { upload } from '@/service/base'
 import { useFileUploadConfig } from '@/service/use-common'
diff --git a/web/app/components/datasets/documents/detail/completed/__tests__/index.spec.tsx b/web/app/components/datasets/documents/detail/completed/__tests__/index.spec.tsx
index 5802fb8b82..59ecbf5f25 100644
--- a/web/app/components/datasets/documents/detail/completed/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/detail/completed/__tests__/index.spec.tsx
@@ -65,7 +65,7 @@ vi.mock('../../context', () => ({
   },
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   ToastContext: { Provider: ({ children }: { children: React.ReactNode }) => children, Consumer: () => null },
   useToastContext: () => ({ notify: mockNotify }),
 }))
diff --git a/web/app/components/datasets/documents/detail/completed/common/__tests__/regeneration-modal.spec.tsx b/web/app/components/datasets/documents/detail/completed/common/__tests__/regeneration-modal.spec.tsx
index 719e2867b7..cc7f1aafa4 100644
--- a/web/app/components/datasets/documents/detail/completed/common/__tests__/regeneration-modal.spec.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/__tests__/regeneration-modal.spec.tsx
@@ -1,7 +1,8 @@
 import type { ReactNode } from 'react'
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { EventEmitterContextProvider, useEventEmitterContextContext } from '@/context/event-emitter'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+import { EventEmitterContextProvider } from '@/context/event-emitter-provider'
 import RegenerationModal from '../regeneration-modal'
 
 // Store emit function for triggering events in tests
diff --git a/web/app/components/datasets/documents/detail/completed/hooks/__tests__/use-child-segment-data.spec.ts b/web/app/components/datasets/documents/detail/completed/hooks/__tests__/use-child-segment-data.spec.ts
index 83918a3f30..4cfb4d5927 100644
--- a/web/app/components/datasets/documents/detail/completed/hooks/__tests__/use-child-segment-data.spec.ts
+++ b/web/app/components/datasets/documents/detail/completed/hooks/__tests__/use-child-segment-data.spec.ts
@@ -59,7 +59,7 @@ vi.mock('../../../context', () => ({
   },
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({ notify: mockNotify }),
 }))
 
diff --git a/web/app/components/datasets/documents/detail/completed/hooks/__tests__/use-segment-list-data.spec.ts b/web/app/components/datasets/documents/detail/completed/hooks/__tests__/use-segment-list-data.spec.ts
index aef2053298..f54c00e3e7 100644
--- a/web/app/components/datasets/documents/detail/completed/hooks/__tests__/use-segment-list-data.spec.ts
+++ b/web/app/components/datasets/documents/detail/completed/hooks/__tests__/use-segment-list-data.spec.ts
@@ -92,7 +92,7 @@ vi.mock('../../../context', () => ({
   },
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({ notify: mockNotify }),
 }))
 
diff --git a/web/app/components/datasets/documents/detail/completed/hooks/use-child-segment-data.ts b/web/app/components/datasets/documents/detail/completed/hooks/use-child-segment-data.ts
index 4f4c6a532d..cdc8a0b22d 100644
--- a/web/app/components/datasets/documents/detail/completed/hooks/use-child-segment-data.ts
+++ b/web/app/components/datasets/documents/detail/completed/hooks/use-child-segment-data.ts
@@ -2,7 +2,7 @@ import type { ChildChunkDetail, ChildSegmentsResponse, SegmentDetailModel, Segme
 import { useQueryClient } from '@tanstack/react-query'
 import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import {
   useChildSegmentList,
diff --git a/web/app/components/datasets/documents/detail/completed/hooks/use-segment-list-data.ts b/web/app/components/datasets/documents/detail/completed/hooks/use-segment-list-data.ts
index fd391d2864..aa91e9f464 100644
--- a/web/app/components/datasets/documents/detail/completed/hooks/use-segment-list-data.ts
+++ b/web/app/components/datasets/documents/detail/completed/hooks/use-segment-list-data.ts
@@ -4,7 +4,7 @@ import { useQueryClient } from '@tanstack/react-query'
 import { usePathname } from 'next/navigation'
 import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { ChunkingMode } from '@/models/datasets'
 import {
diff --git a/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx b/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx
index 89143662c6..7a6ae4b306 100644
--- a/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx
+++ b/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx
@@ -8,7 +8,7 @@ import { useContext } from 'use-context-selector'
 import { useShallow } from 'zustand/react/shallow'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import Divider from '@/app/components/base/divider'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { ChunkingMode } from '@/models/datasets'
 import { useAddChildSegment } from '@/service/knowledge/use-segment'
 import { cn } from '@/utils/classnames'
diff --git a/web/app/components/datasets/documents/detail/embedding/index.tsx b/web/app/components/datasets/documents/detail/embedding/index.tsx
index e89a85c6de..bd344800db 100644
--- a/web/app/components/datasets/documents/detail/embedding/index.tsx
+++ b/web/app/components/datasets/documents/detail/embedding/index.tsx
@@ -5,7 +5,7 @@ import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { useProcessRule } from '@/service/knowledge/use-dataset'
 import { useDocumentContext } from '../context'
 import { ProgressBar, RuleDetail, SegmentProgress, StatusHeader } from './components'
diff --git a/web/app/components/datasets/documents/detail/metadata/hooks/__tests__/use-metadata-state.spec.ts b/web/app/components/datasets/documents/detail/metadata/hooks/__tests__/use-metadata-state.spec.ts
index ab1d45338f..3d7b28c78c 100644
--- a/web/app/components/datasets/documents/detail/metadata/hooks/__tests__/use-metadata-state.spec.ts
+++ b/web/app/components/datasets/documents/detail/metadata/hooks/__tests__/use-metadata-state.spec.ts
@@ -3,7 +3,7 @@ import type { FullDocumentDetail } from '@/models/datasets'
 import { act, renderHook } from '@testing-library/react'
 import * as React from 'react'
 import { describe, expect, it, vi } from 'vitest'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 
 import { useMetadataState } from '../use-metadata-state'
 
diff --git a/web/app/components/datasets/documents/detail/metadata/hooks/use-metadata-state.ts b/web/app/components/datasets/documents/detail/metadata/hooks/use-metadata-state.ts
index 08651b699e..f786609981 100644
--- a/web/app/components/datasets/documents/detail/metadata/hooks/use-metadata-state.ts
+++ b/web/app/components/datasets/documents/detail/metadata/hooks/use-metadata-state.ts
@@ -4,7 +4,7 @@ import type { DocType, FullDocumentDetail } from '@/models/datasets'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { modifyDocMetadata } from '@/service/datasets'
 import { asyncRunSafe } from '@/utils'
 import { useDocumentContext } from '../../context'
diff --git a/web/app/components/datasets/documents/detail/new-segment.tsx b/web/app/components/datasets/documents/detail/new-segment.tsx
index 3a58d6ac06..f32c94bf70 100644
--- a/web/app/components/datasets/documents/detail/new-segment.tsx
+++ b/web/app/components/datasets/documents/detail/new-segment.tsx
@@ -9,7 +9,7 @@ import { useContext } from 'use-context-selector'
 import { useShallow } from 'zustand/react/shallow'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import Divider from '@/app/components/base/divider'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import ImageUploaderInChunk from '@/app/components/datasets/common/image-uploader/image-uploader-in-chunk'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { ChunkingMode } from '@/models/datasets'
diff --git a/web/app/components/datasets/documents/status-item/index.tsx b/web/app/components/datasets/documents/status-item/index.tsx
index 60d837fd81..8d3abed7cf 100644
--- a/web/app/components/datasets/documents/status-item/index.tsx
+++ b/web/app/components/datasets/documents/status-item/index.tsx
@@ -8,7 +8,7 @@ import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import Switch from '@/app/components/base/switch'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import Tooltip from '@/app/components/base/tooltip'
 import Indicator from '@/app/components/header/indicator'
 import { useDocumentDelete, useDocumentDisable, useDocumentEnable } from '@/service/knowledge/use-document'
diff --git a/web/app/components/datasets/external-api/external-api-modal/__tests__/index.spec.tsx b/web/app/components/datasets/external-api/external-api-modal/__tests__/index.spec.tsx
index a631de3ea0..66d9a163be 100644
--- a/web/app/components/datasets/external-api/external-api-modal/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/external-api/external-api-modal/__tests__/index.spec.tsx
@@ -12,7 +12,7 @@ vi.mock('@/service/datasets', () => ({
 }))
 
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({
     notify: mockNotify,
   }),
diff --git a/web/app/components/datasets/external-api/external-api-modal/index.tsx b/web/app/components/datasets/external-api/external-api-modal/index.tsx
index a9a87d11bd..b6e870cdc1 100644
--- a/web/app/components/datasets/external-api/external-api-modal/index.tsx
+++ b/web/app/components/datasets/external-api/external-api-modal/index.tsx
@@ -19,7 +19,7 @@ import {
   PortalToFollowElem,
   PortalToFollowElemContent,
 } from '@/app/components/base/portal-to-follow-elem'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import Tooltip from '@/app/components/base/tooltip'
 import { createExternalAPI } from '@/service/datasets'
 import Form from './Form'
diff --git a/web/app/components/datasets/external-knowledge-base/connector/__tests__/index.spec.tsx b/web/app/components/datasets/external-knowledge-base/connector/__tests__/index.spec.tsx
index ccd637887b..a6a60aa856 100644
--- a/web/app/components/datasets/external-knowledge-base/connector/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/external-knowledge-base/connector/__tests__/index.spec.tsx
@@ -22,7 +22,7 @@ vi.mock('@/context/i18n', () => ({
 }))
 
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({
     notify: mockNotify,
   }),
diff --git a/web/app/components/datasets/external-knowledge-base/connector/index.tsx b/web/app/components/datasets/external-knowledge-base/connector/index.tsx
index 1545c0d232..cf36eed382 100644
--- a/web/app/components/datasets/external-knowledge-base/connector/index.tsx
+++ b/web/app/components/datasets/external-knowledge-base/connector/index.tsx
@@ -5,7 +5,7 @@ import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useState } from 'react'
 import { trackEvent } from '@/app/components/base/amplitude'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import ExternalKnowledgeBaseCreate from '@/app/components/datasets/external-knowledge-base/create'
 import { createExternalKnowledgeBase } from '@/service/datasets'
 
diff --git a/web/app/components/header/account-dropdown/workplace-selector/index.spec.tsx b/web/app/components/header/account-dropdown/workplace-selector/index.spec.tsx
index fc32b5f8df..20104b572c 100644
--- a/web/app/components/header/account-dropdown/workplace-selector/index.spec.tsx
+++ b/web/app/components/header/account-dropdown/workplace-selector/index.spec.tsx
@@ -1,7 +1,7 @@
 import type { ProviderContextState } from '@/context/provider-context'
 import type { IWorkspace } from '@/models/common'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { baseProviderContextValue, useProviderContext } from '@/context/provider-context'
 import { useWorkspacesContext } from '@/context/workspace-context'
 import { switchWorkspace } from '@/service/common'
diff --git a/web/app/components/header/account-dropdown/workplace-selector/index.tsx b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
index 058935aa27..528686a26a 100644
--- a/web/app/components/header/account-dropdown/workplace-selector/index.tsx
+++ b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
@@ -4,7 +4,7 @@ import { RiArrowDownSLine } from '@remixicon/react'
 import { Fragment } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import PlanBadge from '@/app/components/header/plan-badge'
 import { useWorkspacesContext } from '@/context/workspace-context'
 import { switchWorkspace } from '@/service/common'
diff --git a/web/app/components/header/account-setting/api-based-extension-page/modal.spec.tsx b/web/app/components/header/account-setting/api-based-extension-page/modal.spec.tsx
index 3903fbfcf3..884ee8df33 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/modal.spec.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/modal.spec.tsx
@@ -1,8 +1,8 @@
 import type { TFunction } from 'i18next'
-import type { IToastProps } from '@/app/components/base/toast'
+import type { IToastProps } from '@/app/components/base/toast/context'
 import { fireEvent, render as RTLRender, screen, waitFor } from '@testing-library/react'
 import * as reactI18next from 'react-i18next'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { useDocLink } from '@/context/i18n'
 import { addApiBasedExtension, updateApiBasedExtension } from '@/service/common'
 import ApiBasedExtensionModal from './modal'
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 b04981bf3c..efe6c46dcc 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
@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
 import Modal from '@/app/components/base/modal'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { useDocLink } from '@/context/i18n'
 import {
   addApiBasedExtension,
diff --git a/web/app/components/header/account-setting/language-page/index.tsx b/web/app/components/header/account-setting/language-page/index.tsx
index 2a0604421f..5751e88285 100644
--- a/web/app/components/header/account-setting/language-page/index.tsx
+++ b/web/app/components/header/account-setting/language-page/index.tsx
@@ -7,7 +7,7 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { SimpleSelect } from '@/app/components/base/select'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { useAppContext } from '@/context/app-context'
 import { useLocale } from '@/context/i18n'
 import { setLocaleOnClient } from '@/i18n-config'
diff --git a/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.spec.tsx b/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.spec.tsx
index 46ce3f1992..ae0dd8cd4d 100644
--- a/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.spec.tsx
+++ b/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.spec.tsx
@@ -3,7 +3,7 @@ import type { ICurrentWorkspace } from '@/models/common'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { vi } from 'vitest'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { useAppContext } from '@/context/app-context'
 import { updateWorkspaceInfo } from '@/service/common'
 import EditWorkspaceModal from './index'
diff --git a/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx b/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx
index a702a83da9..1c3984b0b5 100644
--- a/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx
@@ -6,7 +6,7 @@ import { useContext } from 'use-context-selector'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { useAppContext } from '@/context/app-context'
 import { updateWorkspaceInfo } from '@/service/common'
 import { cn } from '@/utils/classnames'
diff --git a/web/app/components/header/account-setting/members-page/invite-modal/index.spec.tsx b/web/app/components/header/account-setting/members-page/invite-modal/index.spec.tsx
index ef55425ee0..82882c8be5 100644
--- a/web/app/components/header/account-setting/members-page/invite-modal/index.spec.tsx
+++ b/web/app/components/header/account-setting/members-page/invite-modal/index.spec.tsx
@@ -2,7 +2,7 @@ import type { InvitationResponse } from '@/models/common'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { vi } from 'vitest'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { useProviderContextSelector } from '@/context/provider-context'
 import { inviteMember } from '@/service/common'
 import InviteModal from './index'
diff --git a/web/app/components/header/account-setting/members-page/invite-modal/index.tsx b/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
index a8c0da40bf..8e4e47e0b8 100644
--- a/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
@@ -9,7 +9,7 @@ import { ReactMultiEmail } from 'react-multi-email'
 import { useContext } from 'use-context-selector'
 import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { emailRegex } from '@/config'
 import { useLocale } from '@/context/i18n'
 import { useProviderContextSelector } from '@/context/provider-context'
diff --git a/web/app/components/header/account-setting/members-page/operation/index.spec.tsx b/web/app/components/header/account-setting/members-page/operation/index.spec.tsx
index 661b2fbc83..e5e7fac10f 100644
--- a/web/app/components/header/account-setting/members-page/operation/index.spec.tsx
+++ b/web/app/components/header/account-setting/members-page/operation/index.spec.tsx
@@ -2,7 +2,7 @@ import type { Member } from '@/models/common'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { vi } from 'vitest'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import Operation from './index'
 
 const mockUpdateMemberRole = vi.fn()
diff --git a/web/app/components/header/account-setting/members-page/operation/index.tsx b/web/app/components/header/account-setting/members-page/operation/index.tsx
index 88c8e250ea..306a67a093 100644
--- a/web/app/components/header/account-setting/members-page/operation/index.tsx
+++ b/web/app/components/header/account-setting/members-page/operation/index.tsx
@@ -9,7 +9,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { useProviderContext } from '@/context/provider-context'
 import { deleteMemberOrCancelInvitation, updateMemberRole } from '@/service/common'
 import { cn } from '@/utils/classnames'
diff --git a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.spec.tsx b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.spec.tsx
index 11a0a2db4a..4baa90a7fa 100644
--- a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.spec.tsx
+++ b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.spec.tsx
@@ -3,7 +3,7 @@ import type { ICurrentWorkspace } from '@/models/common'
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { vi } from 'vitest'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { useAppContext } from '@/context/app-context'
 import { ownershipTransfer, sendOwnerEmail, verifyOwnerEmail } from '@/service/common'
 import { useMembers } from '@/service/use-common'
diff --git a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx
index 21ea8aa1e9..c4f614737a 100644
--- a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx
@@ -6,7 +6,7 @@ import { useContext } from 'use-context-selector'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { useAppContext } from '@/context/app-context'
 import {
   ownershipTransfer,
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/hooks/use-auth.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/hooks/use-auth.spec.tsx
index c2259f543c..b637fed894 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/hooks/use-auth.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/hooks/use-auth.spec.tsx
@@ -20,7 +20,7 @@ const mockAddModelCredential = vi.fn()
 const mockEditProviderCredential = vi.fn()
 const mockEditModelCredential = vi.fn()
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({ notify: mockNotify }),
 }))
 
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/hooks/use-auth.ts b/web/app/components/header/account-setting/model-provider-page/model-auth/hooks/use-auth.ts
index 3576c749b2..4e01677b29 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/hooks/use-auth.ts
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/hooks/use-auth.ts
@@ -12,7 +12,7 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import {
   useModelModalHandler,
   useRefreshModel,
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.spec.tsx
index 554efc93d2..9f493d25e5 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.spec.tsx
@@ -24,7 +24,7 @@ vi.mock('@/config', async (importOriginal) => {
   }
 })
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({
     notify: mockNotify,
   }),
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
index c46f9d56bd..efa768e7f5 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
@@ -3,7 +3,7 @@ import type {
 } from '../declarations'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { ConfigProvider } from '@/app/components/header/account-setting/model-provider-page/model-auth'
 import { useCredentialStatus } from '@/app/components/header/account-setting/model-provider-page/model-auth/hooks'
 import Indicator from '@/app/components/header/indicator'
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.spec.tsx
index ea78234612..b945b50e9b 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.spec.tsx
@@ -43,7 +43,7 @@ let mockCredentialData: CredentialData | undefined = {
   current_credential_name: 'Default',
 }
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({
     notify: mockNotify,
   }),
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
index 93229f1257..0009237edc 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
@@ -12,7 +12,7 @@ import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { SwitchCredentialInLoadBalancing } from '@/app/components/header/account-setting/model-provider-page/model-auth'
 import {
   useGetModelCredential,
diff --git a/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.spec.tsx b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.spec.tsx
index 819bb71164..22186b34e1 100644
--- a/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.spec.tsx
@@ -42,7 +42,7 @@ vi.mock('@/context/provider-context', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({
     notify: mockNotify,
   }),
diff --git a/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
index 29c71e04fc..5df062789b 100644
--- a/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
@@ -12,7 +12,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import Tooltip from '@/app/components/base/tooltip'
 import { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
diff --git a/web/app/components/header/account-setting/plugin-page/SerpapiPlugin.spec.tsx b/web/app/components/header/account-setting/plugin-page/SerpapiPlugin.spec.tsx
index de480d47a1..97a79815ff 100644
--- a/web/app/components/header/account-setting/plugin-page/SerpapiPlugin.spec.tsx
+++ b/web/app/components/header/account-setting/plugin-page/SerpapiPlugin.spec.tsx
@@ -1,6 +1,6 @@
 import type { PluginProvider } from '@/models/common'
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { useAppContext } from '@/context/app-context'
 import SerpapiPlugin from './SerpapiPlugin'
 import { updatePluginKey, validatePluginKey } from './utils'
@@ -20,7 +20,7 @@ const mockEventEmitter = vi.hoisted(() => {
   }
 })
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: vi.fn(),
 }))
 
diff --git a/web/app/components/header/account-setting/plugin-page/SerpapiPlugin.tsx b/web/app/components/header/account-setting/plugin-page/SerpapiPlugin.tsx
index f6909fad28..fe8832e84b 100644
--- a/web/app/components/header/account-setting/plugin-page/SerpapiPlugin.tsx
+++ b/web/app/components/header/account-setting/plugin-page/SerpapiPlugin.tsx
@@ -2,7 +2,7 @@ import type { Form, ValidateValue } from '../key-validator/declarations'
 import type { PluginProvider } from '@/models/common'
 import Image from 'next/image'
 import { useTranslation } from 'react-i18next'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { useAppContext } from '@/context/app-context'
 import SerpapiLogo from '../../assets/serpapi.png'
 import KeyValidator from '../key-validator'
diff --git a/web/app/components/header/account-setting/plugin-page/index.spec.tsx b/web/app/components/header/account-setting/plugin-page/index.spec.tsx
index 654292443f..0654bb68aa 100644
--- a/web/app/components/header/account-setting/plugin-page/index.spec.tsx
+++ b/web/app/components/header/account-setting/plugin-page/index.spec.tsx
@@ -14,7 +14,7 @@ vi.mock('@/context/app-context', () => ({
   useAppContext: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({
     notify: vi.fn(),
   }),
diff --git a/web/app/components/header/index.spec.tsx b/web/app/components/header/index.spec.tsx
index 2d5ce50fb8..36c85e6f08 100644
--- a/web/app/components/header/index.spec.tsx
+++ b/web/app/components/header/index.spec.tsx
@@ -52,7 +52,7 @@ vi.mock('@/app/components/header/plan-badge', () => ({
   ),
 }))
 
-vi.mock('@/context/workspace-context', () => ({
+vi.mock('@/context/workspace-context-provider', () => ({
   WorkspaceProvider: ({ children }: { children?: React.ReactNode }) => children,
 }))
 
diff --git a/web/app/components/header/index.tsx b/web/app/components/header/index.tsx
index 210c62b660..64498a82f8 100644
--- a/web/app/components/header/index.tsx
+++ b/web/app/components/header/index.tsx
@@ -8,7 +8,7 @@ import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
-import { WorkspaceProvider } from '@/context/workspace-context'
+import { WorkspaceProvider } from '@/context/workspace-context-provider'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { Plan } from '../billing/type'
 import AccountDropdown from './account-dropdown'
diff --git a/web/app/components/plugins/plugin-auth/__tests__/authorized-in-node.spec.tsx b/web/app/components/plugins/plugin-auth/__tests__/authorized-in-node.spec.tsx
index 7e8208b995..91ffbaa24a 100644
--- a/web/app/components/plugins/plugin-auth/__tests__/authorized-in-node.spec.tsx
+++ b/web/app/components/plugins/plugin-auth/__tests__/authorized-in-node.spec.tsx
@@ -42,7 +42,7 @@ vi.mock('@/context/app-context', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({ notify: vi.fn() }),
 }))
 
diff --git a/web/app/components/plugins/plugin-auth/__tests__/plugin-auth-in-agent.spec.tsx b/web/app/components/plugins/plugin-auth/__tests__/plugin-auth-in-agent.spec.tsx
index 6b66aca9dd..901c3ab49a 100644
--- a/web/app/components/plugins/plugin-auth/__tests__/plugin-auth-in-agent.spec.tsx
+++ b/web/app/components/plugins/plugin-auth/__tests__/plugin-auth-in-agent.spec.tsx
@@ -42,7 +42,7 @@ vi.mock('@/context/app-context', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({ notify: vi.fn() }),
 }))
 
diff --git a/web/app/components/plugins/plugin-auth/authorize/__tests__/api-key-modal.spec.tsx b/web/app/components/plugins/plugin-auth/authorize/__tests__/api-key-modal.spec.tsx
index a99b3363d6..430149e50b 100644
--- a/web/app/components/plugins/plugin-auth/authorize/__tests__/api-key-modal.spec.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/__tests__/api-key-modal.spec.tsx
@@ -9,7 +9,7 @@ const mockAddPluginCredential = vi.fn().mockResolvedValue({})
 const mockUpdatePluginCredential = vi.fn().mockResolvedValue({})
 const mockFormValues = { isCheckValidated: true, values: { __name__: 'My Key', api_key: 'sk-123' } }
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({
     notify: mockNotify,
   }),
diff --git a/web/app/components/plugins/plugin-auth/authorize/__tests__/authorize-components.spec.tsx b/web/app/components/plugins/plugin-auth/authorize/__tests__/authorize-components.spec.tsx
index 51aa287fea..d120902e6d 100644
--- a/web/app/components/plugins/plugin-auth/authorize/__tests__/authorize-components.spec.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/__tests__/authorize-components.spec.tsx
@@ -95,7 +95,7 @@ vi.mock('@/app/components/base/form/form-scenarios/auth', () => ({
 
 // Mock useToastContext
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({ notify: mockNotify }),
 }))
 
diff --git a/web/app/components/plugins/plugin-auth/authorize/__tests__/oauth-client-settings.spec.tsx b/web/app/components/plugins/plugin-auth/authorize/__tests__/oauth-client-settings.spec.tsx
index 61920e2869..f1b86f80ea 100644
--- a/web/app/components/plugins/plugin-auth/authorize/__tests__/oauth-client-settings.spec.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/__tests__/oauth-client-settings.spec.tsx
@@ -9,7 +9,7 @@ const mockDeletePluginOAuthCustomClient = vi.fn().mockResolvedValue({})
 const mockInvalidPluginOAuthClientSchema = vi.fn()
 const mockFormValues = { isCheckValidated: true, values: { __oauth_client__: 'custom', client_id: 'test-id' } }
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({
     notify: mockNotify,
   }),
diff --git a/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx b/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx
index cc98ca3731..d8ab1cafdd 100644
--- a/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx
@@ -16,7 +16,7 @@ import AuthForm from '@/app/components/base/form/form-scenarios/auth'
 import { FormTypeEnum } from '@/app/components/base/form/types'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal/modal'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { ReadmeEntrance } from '../../readme-panel/entrance'
 import { ReadmeShowType } from '../../readme-panel/store'
 import {
diff --git a/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx b/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx
index 7eb22ee4ac..28989da77c 100644
--- a/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx
@@ -17,7 +17,7 @@ import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import AuthForm from '@/app/components/base/form/form-scenarios/auth'
 import Modal from '@/app/components/base/modal/modal'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { ReadmeEntrance } from '../../readme-panel/entrance'
 import { ReadmeShowType } from '../../readme-panel/store'
 import {
diff --git a/web/app/components/plugins/plugin-auth/authorized/__tests__/index.spec.tsx b/web/app/components/plugins/plugin-auth/authorized/__tests__/index.spec.tsx
index f56c814222..a617c2543e 100644
--- a/web/app/components/plugins/plugin-auth/authorized/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized/__tests__/index.spec.tsx
@@ -52,7 +52,7 @@ vi.mock('../../hooks/use-credential', () => ({
 
 // Mock toast context
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({
     notify: mockNotify,
   }),
diff --git a/web/app/components/plugins/plugin-auth/authorized/index.tsx b/web/app/components/plugins/plugin-auth/authorized/index.tsx
index ea58cd16c9..daee3131ad 100644
--- a/web/app/components/plugins/plugin-auth/authorized/index.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized/index.tsx
@@ -19,7 +19,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import Indicator from '@/app/components/header/indicator'
 import { cn } from '@/utils/classnames'
 import Authorize from '../authorize'
diff --git a/web/app/components/plugins/plugin-auth/hooks/__tests__/use-plugin-auth-action.spec.ts b/web/app/components/plugins/plugin-auth/hooks/__tests__/use-plugin-auth-action.spec.ts
index d31b29ab85..f779623697 100644
--- a/web/app/components/plugins/plugin-auth/hooks/__tests__/use-plugin-auth-action.spec.ts
+++ b/web/app/components/plugins/plugin-auth/hooks/__tests__/use-plugin-auth-action.spec.ts
@@ -11,7 +11,7 @@ const mockSetPluginDefaultCredential = vi.fn().mockResolvedValue({})
 const mockUpdatePluginCredential = vi.fn().mockResolvedValue({})
 const mockNotify = vi.fn()
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({
     notify: mockNotify,
   }),
diff --git a/web/app/components/plugins/plugin-auth/hooks/use-plugin-auth-action.ts b/web/app/components/plugins/plugin-auth/hooks/use-plugin-auth-action.ts
index e9218e2d3d..5628c76cc3 100644
--- a/web/app/components/plugins/plugin-auth/hooks/use-plugin-auth-action.ts
+++ b/web/app/components/plugins/plugin-auth/hooks/use-plugin-auth-action.ts
@@ -5,7 +5,7 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import {
   useDeletePluginCredentialHook,
   useSetPluginDefaultCredentialHook,
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/apikey-edit-modal.spec.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/apikey-edit-modal.spec.tsx
index af145df2da..e0fb7455ce 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/apikey-edit-modal.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/apikey-edit-modal.spec.tsx
@@ -54,13 +54,16 @@ vi.mock('@/app/components/base/toast', async (importOriginal) => {
     default: {
       notify: (args: { type: string, message: string }) => mockToast(args),
     },
-    useToastContext: () => ({
-      notify: (args: { type: string, message: string }) => mockToast(args),
-      close: vi.fn(),
-    }),
   }
 })
 
+vi.mock('@/app/components/base/toast/context', () => ({
+  useToastContext: () => ({
+    notify: (args: { type: string, message: string }) => mockToast(args),
+    close: vi.fn(),
+  }),
+}))
+
 const createSubscription = (overrides: Partial<TriggerSubscription> = {}): TriggerSubscription => ({
   id: 'sub-1',
   name: 'Subscription One',
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/manual-edit-modal.spec.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/manual-edit-modal.spec.tsx
index c6144542ab..60a8428287 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/manual-edit-modal.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/manual-edit-modal.spec.tsx
@@ -37,13 +37,16 @@ vi.mock('@/app/components/base/toast', async (importOriginal) => {
     default: {
       notify: (args: { type: string, message: string }) => mockToast(args),
     },
-    useToastContext: () => ({
-      notify: (args: { type: string, message: string }) => mockToast(args),
-      close: vi.fn(),
-    }),
   }
 })
 
+vi.mock('@/app/components/base/toast/context', () => ({
+  useToastContext: () => ({
+    notify: (args: { type: string, message: string }) => mockToast(args),
+    close: vi.fn(),
+  }),
+}))
+
 const createSubscription = (overrides: Partial<TriggerSubscription> = {}): TriggerSubscription => ({
   id: 'sub-1',
   name: 'Subscription One',
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/oauth-edit-modal.spec.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/oauth-edit-modal.spec.tsx
index 7bdcdbc936..8835b46695 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/oauth-edit-modal.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/oauth-edit-modal.spec.tsx
@@ -37,13 +37,16 @@ vi.mock('@/app/components/base/toast', async (importOriginal) => {
     default: {
       notify: (args: { type: string, message: string }) => mockToast(args),
     },
-    useToastContext: () => ({
-      notify: (args: { type: string, message: string }) => mockToast(args),
-      close: vi.fn(),
-    }),
   }
 })
 
+vi.mock('@/app/components/base/toast/context', () => ({
+  useToastContext: () => ({
+    notify: (args: { type: string, message: string }) => mockToast(args),
+    close: vi.fn(),
+  }),
+}))
+
 const createSubscription = (overrides: Partial<TriggerSubscription> = {}): TriggerSubscription => ({
   id: 'sub-1',
   name: 'Subscription One',
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/tool-credentials-form.spec.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/tool-credentials-form.spec.tsx
index 20655d0139..cb5b929d29 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/tool-credentials-form.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/tool-credentials-form.spec.tsx
@@ -12,6 +12,9 @@ vi.mock('@/utils/classnames', () => ({
 
 vi.mock('@/app/components/base/toast', () => ({
   default: { notify: vi.fn() },
+}))
+
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({ notify: vi.fn() }),
 }))
 
diff --git a/web/app/components/plugins/plugin-page/__tests__/context.spec.tsx b/web/app/components/plugins/plugin-page/__tests__/context.spec.tsx
index ab0e35e042..389c161e8a 100644
--- a/web/app/components/plugins/plugin-page/__tests__/context.spec.tsx
+++ b/web/app/components/plugins/plugin-page/__tests__/context.spec.tsx
@@ -3,7 +3,8 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 // Import mocks
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
-import { PluginPageContext, PluginPageContextProvider, usePluginPageContext } from '../context'
+import { PluginPageContext, usePluginPageContext } from '../context'
+import { PluginPageContextProvider } from '../context-provider'
 
 // Mock dependencies
 vi.mock('nuqs', () => ({
diff --git a/web/app/components/plugins/plugin-page/context.tsx b/web/app/components/plugins/plugin-page/context-provider.tsx
similarity index 58%
rename from web/app/components/plugins/plugin-page/context.tsx
rename to web/app/components/plugins/plugin-page/context-provider.tsx
index 01ec518347..83776b48f9 100644
--- a/web/app/components/plugins/plugin-page/context.tsx
+++ b/web/app/components/plugins/plugin-page/context-provider.tsx
@@ -1,24 +1,20 @@
 'use client'
 
-import type { ReactNode, RefObject } from 'react'
+import type { ReactNode } from 'react'
+import type { PluginPageTab } from './context'
 import type { FilterState } from './filter-management'
-import { noop } from 'es-toolkit/function'
 import { parseAsStringEnum, useQueryState } from 'nuqs'
 import {
   useMemo,
   useRef,
   useState,
 } from 'react'
-import {
-  createContext,
-  useContextSelector,
-} from 'use-context-selector'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { PLUGIN_PAGE_TABS_MAP, usePluginPageTabs } from '../hooks'
 import { PLUGIN_TYPE_SEARCH_MAP } from '../marketplace/constants'
-
-export type PluginPageTab = typeof PLUGIN_PAGE_TABS_MAP[keyof typeof PLUGIN_PAGE_TABS_MAP]
-  | (typeof PLUGIN_TYPE_SEARCH_MAP)[keyof typeof PLUGIN_TYPE_SEARCH_MAP]
+import {
+  PluginPageContext,
+} from './context'
 
 const PLUGIN_PAGE_TAB_VALUES: PluginPageTab[] = [
   PLUGIN_PAGE_TABS_MAP.plugins,
@@ -29,42 +25,10 @@ const PLUGIN_PAGE_TAB_VALUES: PluginPageTab[] = [
 const parseAsPluginPageTab = parseAsStringEnum<PluginPageTab>(PLUGIN_PAGE_TAB_VALUES)
   .withDefault(PLUGIN_PAGE_TABS_MAP.plugins)
 
-export type PluginPageContextValue = {
-  containerRef: RefObject<HTMLDivElement | null>
-  currentPluginID: string | undefined
-  setCurrentPluginID: (pluginID?: string) => void
-  filters: FilterState
-  setFilters: (filter: FilterState) => void
-  activeTab: PluginPageTab
-  setActiveTab: (tab: PluginPageTab) => void
-  options: Array<{ value: string, text: string }>
-}
-
-const emptyContainerRef: RefObject<HTMLDivElement | null> = { current: null }
-
-export const PluginPageContext = createContext<PluginPageContextValue>({
-  containerRef: emptyContainerRef,
-  currentPluginID: undefined,
-  setCurrentPluginID: noop,
-  filters: {
-    categories: [],
-    tags: [],
-    searchQuery: '',
-  },
-  setFilters: noop,
-  activeTab: PLUGIN_PAGE_TABS_MAP.plugins,
-  setActiveTab: noop,
-  options: [],
-})
-
 type PluginPageContextProviderProps = {
   children: ReactNode
 }
 
-export function usePluginPageContext(selector: (value: PluginPageContextValue) => any) {
-  return useContextSelector(PluginPageContext, selector)
-}
-
 export const PluginPageContextProvider = ({
   children,
 }: PluginPageContextProviderProps) => {
diff --git a/web/app/components/plugins/plugin-page/context.ts b/web/app/components/plugins/plugin-page/context.ts
new file mode 100644
index 0000000000..04ab1eef19
--- /dev/null
+++ b/web/app/components/plugins/plugin-page/context.ts
@@ -0,0 +1,46 @@
+'use client'
+
+import type { RefObject } from 'react'
+import type { PLUGIN_TYPE_SEARCH_MAP } from '../marketplace/constants'
+import type { FilterState } from './filter-management'
+import { noop } from 'es-toolkit/function'
+import {
+  createContext,
+  useContextSelector,
+} from 'use-context-selector'
+import { PLUGIN_PAGE_TABS_MAP } from '../hooks'
+
+export type PluginPageTab = typeof PLUGIN_PAGE_TABS_MAP[keyof typeof PLUGIN_PAGE_TABS_MAP]
+  | (typeof PLUGIN_TYPE_SEARCH_MAP)[keyof typeof PLUGIN_TYPE_SEARCH_MAP]
+
+export type PluginPageContextValue = {
+  containerRef: RefObject<HTMLDivElement | null>
+  currentPluginID: string | undefined
+  setCurrentPluginID: (pluginID?: string) => void
+  filters: FilterState
+  setFilters: (filter: FilterState) => void
+  activeTab: PluginPageTab
+  setActiveTab: (tab: PluginPageTab) => void
+  options: Array<{ value: string, text: string }>
+}
+
+const emptyContainerRef: RefObject<HTMLDivElement | null> = { current: null }
+
+export const PluginPageContext = createContext<PluginPageContextValue>({
+  containerRef: emptyContainerRef,
+  currentPluginID: undefined,
+  setCurrentPluginID: noop,
+  filters: {
+    categories: [],
+    tags: [],
+    searchQuery: '',
+  },
+  setFilters: noop,
+  activeTab: PLUGIN_PAGE_TABS_MAP.plugins,
+  setActiveTab: noop,
+  options: [],
+})
+
+export function usePluginPageContext(selector: (value: PluginPageContextValue) => any) {
+  return useContextSelector(PluginPageContext, selector)
+}
diff --git a/web/app/components/plugins/plugin-page/index.tsx b/web/app/components/plugins/plugin-page/index.tsx
index bec1eb60ab..6768361acf 100644
--- a/web/app/components/plugins/plugin-page/index.tsx
+++ b/web/app/components/plugins/plugin-page/index.tsx
@@ -28,10 +28,8 @@ import { PLUGIN_PAGE_TABS_MAP } from '../hooks'
 import InstallFromLocalPackage from '../install-plugin/install-from-local-package'
 import InstallFromMarketplace from '../install-plugin/install-from-marketplace'
 import { PLUGIN_TYPE_SEARCH_MAP } from '../marketplace/constants'
-import {
-  PluginPageContextProvider,
-  usePluginPageContext,
-} from './context'
+import { usePluginPageContext } from './context'
+import { PluginPageContextProvider } from './context-provider'
 import DebugInfo from './debug-info'
 import InstallPluginDropdown from './install-plugin-dropdown'
 import PluginTasks from './plugin-tasks'
diff --git a/web/app/components/rag-pipeline/components/__tests__/update-dsl-modal.spec.tsx b/web/app/components/rag-pipeline/components/__tests__/update-dsl-modal.spec.tsx
index 2f9b2172bd..98ad5f78f4 100644
--- a/web/app/components/rag-pipeline/components/__tests__/update-dsl-modal.spec.tsx
+++ b/web/app/components/rag-pipeline/components/__tests__/update-dsl-modal.spec.tsx
@@ -20,7 +20,7 @@ vi.mock('use-context-selector', () => ({
   useContext: () => ({ notify: mockNotify }),
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   ToastContext: { Provider: ({ children }: PropsWithChildren) => children },
 }))
 
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/__tests__/index.spec.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/__tests__/index.spec.tsx
index 0b858eaaa7..00c989acb0 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/__tests__/index.spec.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/__tests__/index.spec.tsx
@@ -155,7 +155,7 @@ vi.mock('@/app/components/base/amplitude', () => ({
 }))
 
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({
     notify: mockNotify,
   }),
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/index.spec.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/index.spec.tsx
index 6129d3fe73..9cd1af2736 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/index.spec.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/index.spec.tsx
@@ -3,7 +3,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import Publisher from '../index'
 import Popup from '../popup'
 
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx
index 71707721a4..48282820d8 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx
@@ -57,7 +57,7 @@ vi.mock('@/app/components/workflow/store', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({ notify: mockNotify }),
 }))
 
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
index 2dd56b4277..371e4fd721 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
@@ -24,7 +24,7 @@ import Confirm from '@/app/components/base/confirm'
 import Divider from '@/app/components/base/divider'
 import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
 import PremiumBadge from '@/app/components/base/premium-badge'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import {
   useChecklistBeforePublish,
 } from '@/app/components/workflow/hooks'
diff --git a/web/app/components/rag-pipeline/hooks/__tests__/index.spec.ts b/web/app/components/rag-pipeline/hooks/__tests__/index.spec.ts
index 4c60e5133c..95fe763d61 100644
--- a/web/app/components/rag-pipeline/hooks/__tests__/index.spec.ts
+++ b/web/app/components/rag-pipeline/hooks/__tests__/index.spec.ts
@@ -31,7 +31,7 @@ vi.mock('@/app/components/workflow/store', () => ({
 }))
 
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({
     notify: mockNotify,
   }),
diff --git a/web/app/components/rag-pipeline/hooks/__tests__/use-DSL.spec.ts b/web/app/components/rag-pipeline/hooks/__tests__/use-DSL.spec.ts
index c0b983052d..c5603f2fc7 100644
--- a/web/app/components/rag-pipeline/hooks/__tests__/use-DSL.spec.ts
+++ b/web/app/components/rag-pipeline/hooks/__tests__/use-DSL.spec.ts
@@ -3,7 +3,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { useDSL } from '../use-DSL'
 
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({ notify: mockNotify }),
 }))
 
diff --git a/web/app/components/rag-pipeline/hooks/__tests__/use-update-dsl-modal.spec.ts b/web/app/components/rag-pipeline/hooks/__tests__/use-update-dsl-modal.spec.ts
index 942e337ad8..a50965fb3b 100644
--- a/web/app/components/rag-pipeline/hooks/__tests__/use-update-dsl-modal.spec.ts
+++ b/web/app/components/rag-pipeline/hooks/__tests__/use-update-dsl-modal.spec.ts
@@ -23,7 +23,7 @@ vi.mock('use-context-selector', () => ({
   useContext: () => ({ notify: mockNotify }),
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   ToastContext: {},
 }))
 
diff --git a/web/app/components/rag-pipeline/hooks/use-DSL.ts b/web/app/components/rag-pipeline/hooks/use-DSL.ts
index 5c0f9def1c..f45cf35bdf 100644
--- a/web/app/components/rag-pipeline/hooks/use-DSL.ts
+++ b/web/app/components/rag-pipeline/hooks/use-DSL.ts
@@ -3,7 +3,7 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import {
   DSL_EXPORT_CHECK,
 } from '@/app/components/workflow/constants'
diff --git a/web/app/components/rag-pipeline/hooks/use-update-dsl-modal.ts b/web/app/components/rag-pipeline/hooks/use-update-dsl-modal.ts
index 3b86937417..48d2bc78b4 100644
--- a/web/app/components/rag-pipeline/hooks/use-update-dsl-modal.ts
+++ b/web/app/components/rag-pipeline/hooks/use-update-dsl-modal.ts
@@ -6,7 +6,7 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { WORKFLOW_DATA_UPDATE } from '@/app/components/workflow/constants'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
 import { useWorkflowStore } from '@/app/components/workflow/store'
diff --git a/web/app/components/workflow-app/components/workflow-header/__tests__/features-trigger.spec.tsx b/web/app/components/workflow-app/components/workflow-header/__tests__/features-trigger.spec.tsx
index 4a7fd1275f..2318a1c7bc 100644
--- a/web/app/components/workflow-app/components/workflow-header/__tests__/features-trigger.spec.tsx
+++ b/web/app/components/workflow-app/components/workflow-header/__tests__/features-trigger.spec.tsx
@@ -4,7 +4,7 @@ import type { App } from '@/types/app'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { Plan } from '@/app/components/billing/type'
 import { BlockEnum, InputVarType } from '@/app/components/workflow/types'
 import FeaturesTrigger from '../features-trigger'
diff --git a/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx b/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx
index d58eb6c669..84603e9a13 100644
--- a/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx
+++ b/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx
@@ -17,7 +17,7 @@ import AppPublisher from '@/app/components/app/app-publisher'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import Button from '@/app/components/base/button'
 import { useFeatures } from '@/app/components/base/features/hooks'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { Plan } from '@/app/components/billing/type'
 import {
   useChecklist,
diff --git a/web/app/components/workflow-app/hooks/use-DSL.ts b/web/app/components/workflow-app/hooks/use-DSL.ts
index 939e43b554..918a60f185 100644
--- a/web/app/components/workflow-app/hooks/use-DSL.ts
+++ b/web/app/components/workflow-app/hooks/use-DSL.ts
@@ -4,7 +4,7 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import {
   DSL_EXPORT_CHECK,
 } from '@/app/components/workflow/constants'
diff --git a/web/app/components/workflow/header/run-mode.tsx b/web/app/components/workflow/header/run-mode.tsx
index 63c48ff0dc..943af13a92 100644
--- a/web/app/components/workflow/header/run-mode.tsx
+++ b/web/app/components/workflow/header/run-mode.tsx
@@ -5,7 +5,7 @@ import { useCallback, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
 import { StopCircle } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { useWorkflowRun, useWorkflowRunValidation, useWorkflowStartRun } from '@/app/components/workflow/hooks'
 import ShortcutsName from '@/app/components/workflow/shortcuts-name'
 import { useStore } from '@/app/components/workflow/store'
diff --git a/web/app/components/workflow/hooks/__tests__/use-checklist.spec.ts b/web/app/components/workflow/hooks/__tests__/use-checklist.spec.ts
index d72d001e0b..1b37055134 100644
--- a/web/app/components/workflow/hooks/__tests__/use-checklist.spec.ts
+++ b/web/app/components/workflow/hooks/__tests__/use-checklist.spec.ts
@@ -82,7 +82,7 @@ vi.mock('../index', () => ({
   useNodesMetaData: () => ({ nodes: [], nodesMap: mockNodesMap }),
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({ notify: vi.fn() }),
 }))
 
diff --git a/web/app/components/workflow/hooks/use-checklist.ts b/web/app/components/workflow/hooks/use-checklist.ts
index 642179aed7..dd1d012aed 100644
--- a/web/app/components/workflow/hooks/use-checklist.ts
+++ b/web/app/components/workflow/hooks/use-checklist.ts
@@ -22,7 +22,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import { useEdges, useStoreApi } from 'reactflow'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import useNodes from '@/app/components/workflow/store/workflow/use-nodes'
diff --git a/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/hooks.ts b/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/hooks.ts
index 3a084ef0af..511940d142 100644
--- a/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/hooks.ts
+++ b/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/hooks.ts
@@ -15,7 +15,7 @@ import {
   useEffect,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { useNoteEditorStore } from '../../store'
 import { urlRegExp } from '../../utils'
 
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/object-value-item.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/object-value-item.tsx
index ef4b4d71a9..74765c2b9e 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/object-value-item.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/object-value-item.tsx
@@ -5,7 +5,7 @@ import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import RemoveButton from '@/app/components/workflow/nodes/_base/components/remove-button'
 import VariableTypeSelector from '@/app/components/workflow/panel/chat-variable-panel/components/variable-type-select'
 import { ChatVarType } from '@/app/components/workflow/panel/chat-variable-panel/type'
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
index 5c07cca3df..dd14bcf75a 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
@@ -7,7 +7,7 @@ import { useContext } from 'use-context-selector'
 import { v4 as uuid4 } from 'uuid'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import ArrayValueList from '@/app/components/workflow/panel/chat-variable-panel/components/array-value-list'
diff --git a/web/app/components/workflow/panel/debug-and-preview/hooks.ts b/web/app/components/workflow/panel/debug-and-preview/hooks.ts
index b31673ee26..3481733cd2 100644
--- a/web/app/components/workflow/panel/debug-and-preview/hooks.ts
+++ b/web/app/components/workflow/panel/debug-and-preview/hooks.ts
@@ -26,7 +26,7 @@ import {
   getProcessedFiles,
   getProcessedFilesFromResponse,
 } from '@/app/components/base/file-uploader/utils'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import {
   CUSTOM_NODE,
 } from '@/app/components/workflow/constants'
diff --git a/web/app/components/workflow/panel/env-panel/variable-modal.tsx b/web/app/components/workflow/panel/env-panel/variable-modal.tsx
index 0e120ac77c..493a73405a 100644
--- a/web/app/components/workflow/panel/env-panel/variable-modal.tsx
+++ b/web/app/components/workflow/panel/env-panel/variable-modal.tsx
@@ -7,7 +7,7 @@ import { useContext } from 'use-context-selector'
 import { v4 as uuid4 } from 'uuid'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import Tooltip from '@/app/components/base/tooltip'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 import { cn } from '@/utils/classnames'
diff --git a/web/app/components/workflow/run/index.tsx b/web/app/components/workflow/run/index.tsx
index 441002c86c..96acb1a026 100644
--- a/web/app/components/workflow/run/index.tsx
+++ b/web/app/components/workflow/run/index.tsx
@@ -6,7 +6,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import Loading from '@/app/components/base/loading'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 import { fetchRunDetail, fetchTracingList } from '@/service/log'
 import { cn } from '@/utils/classnames'
diff --git a/web/app/components/workflow/update-dsl-modal.tsx b/web/app/components/workflow/update-dsl-modal.tsx
index d33679ff1b..08107a0c24 100644
--- a/web/app/components/workflow/update-dsl-modal.tsx
+++ b/web/app/components/workflow/update-dsl-modal.tsx
@@ -24,7 +24,7 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
 import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import {
diff --git a/web/app/education-apply/education-apply-page.tsx b/web/app/education-apply/education-apply-page.tsx
index 3f8d80a67e..636a471d3d 100644
--- a/web/app/education-apply/education-apply-page.tsx
+++ b/web/app/education-apply/education-apply-page.tsx
@@ -12,7 +12,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Checkbox from '@/app/components/base/checkbox'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { EDUCATION_VERIFYING_LOCALSTORAGE_ITEM } from '@/app/education-apply/constants'
 import { useDocLink } from '@/context/i18n'
 import { useProviderContext } from '@/context/provider-context'
diff --git a/web/context/datasets-context.tsx b/web/context/datasets-context.ts
similarity index 100%
rename from web/context/datasets-context.tsx
rename to web/context/datasets-context.ts
diff --git a/web/context/event-emitter-provider.tsx b/web/context/event-emitter-provider.tsx
new file mode 100644
index 0000000000..da8d2d78c2
--- /dev/null
+++ b/web/context/event-emitter-provider.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import type { EventEmitterValue } from './event-emitter'
+import { useEventEmitter } from 'ahooks'
+import { EventEmitterContext } from './event-emitter'
+
+type EventEmitterContextProviderProps = {
+  children: ReactNode
+}
+
+export const EventEmitterContextProvider = ({
+  children,
+}: EventEmitterContextProviderProps) => {
+  const eventEmitter = useEventEmitter<EventEmitterValue>()
+
+  return (
+    <EventEmitterContext.Provider value={{ eventEmitter }}>
+      {children}
+    </EventEmitterContext.Provider>
+  )
+}
diff --git a/web/context/event-emitter.tsx b/web/context/event-emitter.ts
similarity index 53%
rename from web/context/event-emitter.tsx
rename to web/context/event-emitter.ts
index 14b81eacb6..eb7794dfe1 100644
--- a/web/context/event-emitter.tsx
+++ b/web/context/event-emitter.ts
@@ -1,7 +1,6 @@
 'use client'
 
 import type { EventEmitter } from 'ahooks/lib/useEventEmitter'
-import { useEventEmitter } from 'ahooks'
 import { createContext, useContext } from 'use-context-selector'
 
 /**
@@ -16,25 +15,10 @@ export type EventEmitterMessage = {
 
 export type EventEmitterValue = string | EventEmitterMessage
 
-const EventEmitterContext = createContext<{ eventEmitter: EventEmitter<EventEmitterValue> | null }>({
+export const EventEmitterContext = createContext<{ eventEmitter: EventEmitter<EventEmitterValue> | null }>({
   eventEmitter: null,
 })
 
 export const useEventEmitterContextContext = () => useContext(EventEmitterContext)
 
-type EventEmitterContextProviderProps = {
-  children: React.ReactNode
-}
-export const EventEmitterContextProvider = ({
-  children,
-}: EventEmitterContextProviderProps) => {
-  const eventEmitter = useEventEmitter<EventEmitterValue>()
-
-  return (
-    <EventEmitterContext.Provider value={{ eventEmitter }}>
-      {children}
-    </EventEmitterContext.Provider>
-  )
-}
-
 export default EventEmitterContext
diff --git a/web/context/mitt-context-provider.tsx b/web/context/mitt-context-provider.tsx
new file mode 100644
index 0000000000..b177694d8d
--- /dev/null
+++ b/web/context/mitt-context-provider.tsx
@@ -0,0 +1,19 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { useMitt } from '@/hooks/use-mitt'
+import { MittContext } from './mitt-context'
+
+type MittProviderProps = {
+  children: ReactNode
+}
+
+export const MittProvider = ({ children }: MittProviderProps) => {
+  const mitt = useMitt()
+
+  return (
+    <MittContext.Provider value={mitt}>
+      {children}
+    </MittContext.Provider>
+  )
+}
diff --git a/web/context/mitt-context.tsx b/web/context/mitt-context.ts
similarity index 66%
rename from web/context/mitt-context.tsx
rename to web/context/mitt-context.ts
index 4317fc5660..5c4a0771c5 100644
--- a/web/context/mitt-context.tsx
+++ b/web/context/mitt-context.ts
@@ -1,6 +1,8 @@
+'use client'
+
+import type { useMitt } from '@/hooks/use-mitt'
 import { noop } from 'es-toolkit/function'
 import { createContext, useContext, useContextSelector } from 'use-context-selector'
-import { useMitt } from '@/hooks/use-mitt'
 
 type ContextValueType = ReturnType<typeof useMitt>
 export const MittContext = createContext<ContextValueType>({
@@ -8,16 +10,6 @@ export const MittContext = createContext<ContextValueType>({
   useSubscribe: noop,
 })
 
-export const MittProvider = ({ children }: { children: React.ReactNode }) => {
-  const mitt = useMitt()
-
-  return (
-    <MittContext.Provider value={mitt}>
-      {children}
-    </MittContext.Provider>
-  )
-}
-
 export const useMittContext = () => {
   return useContext(MittContext)
 }
diff --git a/web/context/modal-context.tsx b/web/context/modal-context-provider.tsx
similarity index 81%
rename from web/context/modal-context.tsx
rename to web/context/modal-context-provider.tsx
index ae1184e5bf..8c64642f43 100644
--- a/web/context/modal-context.tsx
+++ b/web/context/modal-context-provider.tsx
@@ -1,32 +1,20 @@
 'use client'
 
-import type { Dispatch, SetStateAction } from 'react'
-import type { TriggerEventsLimitModalPayload } from './hooks/use-trigger-events-limit-modal'
+import type { ReactNode, SetStateAction } from 'react'
+import type { ModalState, ModelModalType } from './modal-context'
 import type { OpeningStatement } from '@/app/components/base/features/types'
 import type { CreateExternalAPIReq } from '@/app/components/datasets/external-api/declarations'
 import type { AccountSettingTab } from '@/app/components/header/account-setting/constants'
-import type {
-  ConfigurationMethodEnum,
-  Credential,
-  CustomConfigurationModelFixedFields,
-  CustomModel,
-  ModelModalModeEnum,
-  ModelProvider,
-} from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { ModelLoadBalancingModalProps } from '@/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal'
 import type { UpdatePluginPayload } from '@/app/components/plugins/types'
 import type { InputVar } from '@/app/components/workflow/types'
 import type { ExpireNoticeModalPayloadProps } from '@/app/education-apply/expire-notice-modal'
-import type {
-  ApiBasedExtension,
-  ExternalDataTool,
-} from '@/models/common'
+import type { ApiBasedExtension, ExternalDataTool } from '@/models/common'
 import type { ModerationConfig, PromptVariable } from '@/models/debug'
-import { noop } from 'es-toolkit/function'
 import dynamic from 'next/dynamic'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { createContext, useContext, useContextSelector } from 'use-context-selector'
 import {
+
   DEFAULT_ACCOUNT_SETTING_TAB,
   isValidAccountSettingTab,
 } from '@/app/components/header/account-setting/constants'
@@ -39,11 +27,10 @@ import {
   useAccountSettingModal,
   usePricingModal,
 } from '@/hooks/use-query-params'
-
+import { useTriggerEventsLimitModal } from './hooks/use-trigger-events-limit-modal'
 import {
-
-  useTriggerEventsLimitModal,
-} from './hooks/use-trigger-events-limit-modal'
+  ModalContext,
+} from './modal-context'
 
 const AccountSetting = dynamic(() => import('@/app/components/header/account-setting'), {
   ssr: false,
@@ -86,72 +73,8 @@ const TriggerEventsLimitModal = dynamic(() => import('@/app/components/billing/t
   ssr: false,
 })
 
-export type ModalState<T> = {
-  payload: T
-  onCancelCallback?: () => void
-  onSaveCallback?: (newPayload?: T, formValues?: Record<string, any>) => void
-  onRemoveCallback?: (newPayload?: T, formValues?: Record<string, any>) => void
-  onEditCallback?: (newPayload: T) => void
-  onValidateBeforeSaveCallback?: (newPayload: T) => boolean
-  isEditMode?: boolean
-  datasetBindings?: { id: string, name: string }[]
-}
-
-export type ModelModalType = {
-  currentProvider: ModelProvider
-  currentConfigurationMethod: ConfigurationMethodEnum
-  currentCustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields
-  isModelCredential?: boolean
-  credential?: Credential
-  model?: CustomModel
-  mode?: ModelModalModeEnum
-}
-
-export type ModalContextState = {
-  setShowAccountSettingModal: Dispatch<SetStateAction<ModalState<AccountSettingTab> | null>>
-  setShowApiBasedExtensionModal: Dispatch<SetStateAction<ModalState<ApiBasedExtension> | null>>
-  setShowModerationSettingModal: Dispatch<SetStateAction<ModalState<ModerationConfig> | null>>
-  setShowExternalDataToolModal: Dispatch<SetStateAction<ModalState<ExternalDataTool> | null>>
-  setShowPricingModal: () => void
-  setShowAnnotationFullModal: () => void
-  setShowModelModal: Dispatch<SetStateAction<ModalState<ModelModalType> | null>>
-  setShowExternalKnowledgeAPIModal: Dispatch<SetStateAction<ModalState<CreateExternalAPIReq> | null>>
-  setShowModelLoadBalancingModal: Dispatch<SetStateAction<ModelLoadBalancingModalProps | null>>
-  setShowOpeningModal: Dispatch<SetStateAction<ModalState<OpeningStatement & {
-    promptVariables?: PromptVariable[]
-    workflowVariables?: InputVar[]
-    onAutoAddPromptVariable?: (variable: PromptVariable[]) => void
-  }> | null>>
-  setShowUpdatePluginModal: Dispatch<SetStateAction<ModalState<UpdatePluginPayload> | null>>
-  setShowEducationExpireNoticeModal: Dispatch<SetStateAction<ModalState<ExpireNoticeModalPayloadProps> | null>>
-  setShowTriggerEventsLimitModal: Dispatch<SetStateAction<ModalState<TriggerEventsLimitModalPayload> | null>>
-}
-
-const ModalContext = createContext<ModalContextState>({
-  setShowAccountSettingModal: noop,
-  setShowApiBasedExtensionModal: noop,
-  setShowModerationSettingModal: noop,
-  setShowExternalDataToolModal: noop,
-  setShowPricingModal: noop,
-  setShowAnnotationFullModal: noop,
-  setShowModelModal: noop,
-  setShowExternalKnowledgeAPIModal: noop,
-  setShowModelLoadBalancingModal: noop,
-  setShowOpeningModal: noop,
-  setShowUpdatePluginModal: noop,
-  setShowEducationExpireNoticeModal: noop,
-  setShowTriggerEventsLimitModal: noop,
-})
-
-export const useModalContext = () => useContext(ModalContext)
-
-// Adding a dangling comma to avoid the generic parsing issue in tsx, see:
-// https://github.com/microsoft/TypeScript/issues/15713
-export const useModalContextSelector = <T,>(selector: (state: ModalContextState) => T): T =>
-  useContextSelector(ModalContext, selector)
-
 type ModalContextProviderProps = {
-  children: React.ReactNode
+  children: ReactNode
 }
 export const ModalContextProvider = ({
   children,
diff --git a/web/context/modal-context.test.tsx b/web/context/modal-context.test.tsx
index a0f6ff35ec..98f67a5473 100644
--- a/web/context/modal-context.test.tsx
+++ b/web/context/modal-context.test.tsx
@@ -2,7 +2,7 @@ import { act, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { defaultPlan } from '@/app/components/billing/config'
 import { Plan } from '@/app/components/billing/type'
-import { ModalContextProvider } from '@/context/modal-context'
+import { ModalContextProvider } from '@/context/modal-context-provider'
 import { renderWithNuqs } from '@/test/nuqs-testing'
 
 vi.mock('@/config', async (importOriginal) => {
diff --git a/web/context/modal-context.ts b/web/context/modal-context.ts
new file mode 100644
index 0000000000..cc0ca28a42
--- /dev/null
+++ b/web/context/modal-context.ts
@@ -0,0 +1,92 @@
+'use client'
+
+import type { Dispatch, SetStateAction } from 'react'
+import type { TriggerEventsLimitModalPayload } from './hooks/use-trigger-events-limit-modal'
+import type { OpeningStatement } from '@/app/components/base/features/types'
+import type { CreateExternalAPIReq } from '@/app/components/datasets/external-api/declarations'
+import type { AccountSettingTab } from '@/app/components/header/account-setting/constants'
+import type {
+  ConfigurationMethodEnum,
+  Credential,
+  CustomConfigurationModelFixedFields,
+  CustomModel,
+  ModelModalModeEnum,
+  ModelProvider,
+} from '@/app/components/header/account-setting/model-provider-page/declarations'
+import type { ModelLoadBalancingModalProps } from '@/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal'
+import type { UpdatePluginPayload } from '@/app/components/plugins/types'
+import type { InputVar } from '@/app/components/workflow/types'
+import type { ExpireNoticeModalPayloadProps } from '@/app/education-apply/expire-notice-modal'
+import type {
+  ApiBasedExtension,
+  ExternalDataTool,
+} from '@/models/common'
+import type { ModerationConfig, PromptVariable } from '@/models/debug'
+import { noop } from 'es-toolkit/function'
+import { createContext, useContext, useContextSelector } from 'use-context-selector'
+
+export type ModalState<T> = {
+  payload: T
+  onCancelCallback?: () => void
+  onSaveCallback?: (newPayload?: T, formValues?: Record<string, any>) => void
+  onRemoveCallback?: (newPayload?: T, formValues?: Record<string, any>) => void
+  onEditCallback?: (newPayload: T) => void
+  onValidateBeforeSaveCallback?: (newPayload: T) => boolean
+  isEditMode?: boolean
+  datasetBindings?: { id: string, name: string }[]
+}
+
+export type ModelModalType = {
+  currentProvider: ModelProvider
+  currentConfigurationMethod: ConfigurationMethodEnum
+  currentCustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields
+  isModelCredential?: boolean
+  credential?: Credential
+  model?: CustomModel
+  mode?: ModelModalModeEnum
+}
+
+export type ModalContextState = {
+  setShowAccountSettingModal: Dispatch<SetStateAction<ModalState<AccountSettingTab> | null>>
+  setShowApiBasedExtensionModal: Dispatch<SetStateAction<ModalState<ApiBasedExtension> | null>>
+  setShowModerationSettingModal: Dispatch<SetStateAction<ModalState<ModerationConfig> | null>>
+  setShowExternalDataToolModal: Dispatch<SetStateAction<ModalState<ExternalDataTool> | null>>
+  setShowPricingModal: () => void
+  setShowAnnotationFullModal: () => void
+  setShowModelModal: Dispatch<SetStateAction<ModalState<ModelModalType> | null>>
+  setShowExternalKnowledgeAPIModal: Dispatch<SetStateAction<ModalState<CreateExternalAPIReq> | null>>
+  setShowModelLoadBalancingModal: Dispatch<SetStateAction<ModelLoadBalancingModalProps | null>>
+  setShowOpeningModal: Dispatch<SetStateAction<ModalState<OpeningStatement & {
+    promptVariables?: PromptVariable[]
+    workflowVariables?: InputVar[]
+    onAutoAddPromptVariable?: (variable: PromptVariable[]) => void
+  }> | null>>
+  setShowUpdatePluginModal: Dispatch<SetStateAction<ModalState<UpdatePluginPayload> | null>>
+  setShowEducationExpireNoticeModal: Dispatch<SetStateAction<ModalState<ExpireNoticeModalPayloadProps> | null>>
+  setShowTriggerEventsLimitModal: Dispatch<SetStateAction<ModalState<TriggerEventsLimitModalPayload> | null>>
+}
+
+export const ModalContext = createContext<ModalContextState>({
+  setShowAccountSettingModal: noop,
+  setShowApiBasedExtensionModal: noop,
+  setShowModerationSettingModal: noop,
+  setShowExternalDataToolModal: noop,
+  setShowPricingModal: noop,
+  setShowAnnotationFullModal: noop,
+  setShowModelModal: noop,
+  setShowExternalKnowledgeAPIModal: noop,
+  setShowModelLoadBalancingModal: noop,
+  setShowOpeningModal: noop,
+  setShowUpdatePluginModal: noop,
+  setShowEducationExpireNoticeModal: noop,
+  setShowTriggerEventsLimitModal: noop,
+})
+
+export const useModalContext = () => useContext(ModalContext)
+
+// Adding a dangling comma to avoid the generic parsing issue in tsx, see:
+// https://github.com/microsoft/TypeScript/issues/15713
+export const useModalContextSelector = <T>(selector: (state: ModalContextState) => T): T =>
+  useContextSelector(ModalContext, selector)
+
+export default ModalContext
diff --git a/web/context/provider-context.tsx b/web/context/provider-context-provider.tsx
similarity index 70%
rename from web/context/provider-context.tsx
rename to web/context/provider-context-provider.tsx
index 2a71d9cf93..ce7f2ba40c 100644
--- a/web/context/provider-context.tsx
+++ b/web/context/provider-context-provider.tsx
@@ -1,14 +1,10 @@
 'use client'
 
-import type { Plan, UsagePlanInfo, UsageResetInfo } from '@/app/components/billing/type'
-import type { Model, ModelProvider } from '@/app/components/header/account-setting/model-provider-page/declarations'
-import type { RETRIEVE_METHOD } from '@/types/app'
+import type { ReactNode } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
 import dayjs from 'dayjs'
-import { noop } from 'es-toolkit/function'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { createContext, useContext, useContextSelector } from 'use-context-selector'
 import Toast from '@/app/components/base/toast'
 import { setZendeskConversationFields } from '@/app/components/base/zendesk/utils'
 import { defaultPlan } from '@/app/components/billing/config'
@@ -25,93 +21,13 @@ import {
   useModelProviders,
   useSupportRetrievalMethods,
 } from '@/service/use-common'
-import {
-  useEducationStatus,
-} from '@/service/use-education'
-
-export type ProviderContextState = {
-  modelProviders: ModelProvider[]
-  refreshModelProviders: () => void
-  textGenerationModelList: Model[]
-  supportRetrievalMethods: RETRIEVE_METHOD[]
-  isAPIKeySet: boolean
-  plan: {
-    type: Plan
-    usage: UsagePlanInfo
-    total: UsagePlanInfo
-    reset: UsageResetInfo
-  }
-  isFetchedPlan: boolean
-  enableBilling: boolean
-  onPlanInfoChanged: () => void
-  enableReplaceWebAppLogo: boolean
-  modelLoadBalancingEnabled: boolean
-  datasetOperatorEnabled: boolean
-  enableEducationPlan: boolean
-  isEducationWorkspace: boolean
-  isEducationAccount: boolean
-  allowRefreshEducationVerify: boolean
-  educationAccountExpireAt: number | null
-  isLoadingEducationAccountInfo: boolean
-  isFetchingEducationAccountInfo: boolean
-  webappCopyrightEnabled: boolean
-  licenseLimit: {
-    workspace_members: {
-      size: number
-      limit: number
-    }
-  }
-  refreshLicenseLimit: () => void
-  isAllowTransferWorkspace: boolean
-  isAllowPublishAsCustomKnowledgePipelineTemplate: boolean
-  humanInputEmailDeliveryEnabled: boolean
-}
-
-export const baseProviderContextValue: ProviderContextState = {
-  modelProviders: [],
-  refreshModelProviders: noop,
-  textGenerationModelList: [],
-  supportRetrievalMethods: [],
-  isAPIKeySet: true,
-  plan: defaultPlan,
-  isFetchedPlan: false,
-  enableBilling: false,
-  onPlanInfoChanged: noop,
-  enableReplaceWebAppLogo: false,
-  modelLoadBalancingEnabled: false,
-  datasetOperatorEnabled: false,
-  enableEducationPlan: false,
-  isEducationWorkspace: false,
-  isEducationAccount: false,
-  allowRefreshEducationVerify: false,
-  educationAccountExpireAt: null,
-  isLoadingEducationAccountInfo: false,
-  isFetchingEducationAccountInfo: false,
-  webappCopyrightEnabled: false,
-  licenseLimit: {
-    workspace_members: {
-      size: 0,
-      limit: 0,
-    },
-  },
-  refreshLicenseLimit: noop,
-  isAllowTransferWorkspace: false,
-  isAllowPublishAsCustomKnowledgePipelineTemplate: false,
-  humanInputEmailDeliveryEnabled: false,
-}
-
-const ProviderContext = createContext<ProviderContextState>(baseProviderContextValue)
-
-export const useProviderContext = () => useContext(ProviderContext)
-
-// Adding a dangling comma to avoid the generic parsing issue in tsx, see:
-// https://github.com/microsoft/TypeScript/issues/15713
-export const useProviderContextSelector = <T,>(selector: (state: ProviderContextState) => T): T =>
-  useContextSelector(ProviderContext, selector)
+import { useEducationStatus } from '@/service/use-education'
+import { ProviderContext } from './provider-context'
 
 type ProviderContextProviderProps = {
-  children: React.ReactNode
+  children: ReactNode
 }
+
 export const ProviderContextProvider = ({
   children,
 }: ProviderContextProviderProps) => {
@@ -262,5 +178,3 @@ export const ProviderContextProvider = ({
     </ProviderContext.Provider>
   )
 }
-
-export default ProviderContext
diff --git a/web/context/provider-context.ts b/web/context/provider-context.ts
new file mode 100644
index 0000000000..27c43e7c91
--- /dev/null
+++ b/web/context/provider-context.ts
@@ -0,0 +1,90 @@
+'use client'
+
+import type { Plan, UsagePlanInfo, UsageResetInfo } from '@/app/components/billing/type'
+import type { Model, ModelProvider } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import type { RETRIEVE_METHOD } from '@/types/app'
+import { noop } from 'es-toolkit/function'
+import { createContext, useContext, useContextSelector } from 'use-context-selector'
+import { defaultPlan } from '@/app/components/billing/config'
+
+export type ProviderContextState = {
+  modelProviders: ModelProvider[]
+  refreshModelProviders: () => void
+  textGenerationModelList: Model[]
+  supportRetrievalMethods: RETRIEVE_METHOD[]
+  isAPIKeySet: boolean
+  plan: {
+    type: Plan
+    usage: UsagePlanInfo
+    total: UsagePlanInfo
+    reset: UsageResetInfo
+  }
+  isFetchedPlan: boolean
+  enableBilling: boolean
+  onPlanInfoChanged: () => void
+  enableReplaceWebAppLogo: boolean
+  modelLoadBalancingEnabled: boolean
+  datasetOperatorEnabled: boolean
+  enableEducationPlan: boolean
+  isEducationWorkspace: boolean
+  isEducationAccount: boolean
+  allowRefreshEducationVerify: boolean
+  educationAccountExpireAt: number | null
+  isLoadingEducationAccountInfo: boolean
+  isFetchingEducationAccountInfo: boolean
+  webappCopyrightEnabled: boolean
+  licenseLimit: {
+    workspace_members: {
+      size: number
+      limit: number
+    }
+  }
+  refreshLicenseLimit: () => void
+  isAllowTransferWorkspace: boolean
+  isAllowPublishAsCustomKnowledgePipelineTemplate: boolean
+  humanInputEmailDeliveryEnabled: boolean
+}
+
+export const baseProviderContextValue: ProviderContextState = {
+  modelProviders: [],
+  refreshModelProviders: noop,
+  textGenerationModelList: [],
+  supportRetrievalMethods: [],
+  isAPIKeySet: true,
+  plan: defaultPlan,
+  isFetchedPlan: false,
+  enableBilling: false,
+  onPlanInfoChanged: noop,
+  enableReplaceWebAppLogo: false,
+  modelLoadBalancingEnabled: false,
+  datasetOperatorEnabled: false,
+  enableEducationPlan: false,
+  isEducationWorkspace: false,
+  isEducationAccount: false,
+  allowRefreshEducationVerify: false,
+  educationAccountExpireAt: null,
+  isLoadingEducationAccountInfo: false,
+  isFetchingEducationAccountInfo: false,
+  webappCopyrightEnabled: false,
+  licenseLimit: {
+    workspace_members: {
+      size: 0,
+      limit: 0,
+    },
+  },
+  refreshLicenseLimit: noop,
+  isAllowTransferWorkspace: false,
+  isAllowPublishAsCustomKnowledgePipelineTemplate: false,
+  humanInputEmailDeliveryEnabled: false,
+}
+
+export const ProviderContext = createContext<ProviderContextState>(baseProviderContextValue)
+
+export const useProviderContext = () => useContext(ProviderContext)
+
+// Adding a dangling comma to avoid the generic parsing issue in tsx, see:
+// https://github.com/microsoft/TypeScript/issues/15713
+export const useProviderContextSelector = <T>(selector: (state: ProviderContextState) => T): T =>
+  useContextSelector(ProviderContext, selector)
+
+export default ProviderContext
diff --git a/web/context/workspace-context-provider.tsx b/web/context/workspace-context-provider.tsx
new file mode 100644
index 0000000000..afec62f710
--- /dev/null
+++ b/web/context/workspace-context-provider.tsx
@@ -0,0 +1,24 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { useWorkspaces } from '@/service/use-common'
+import { WorkspacesContext } from './workspace-context'
+
+type WorkspaceProviderProps = {
+  children: ReactNode
+}
+
+export const WorkspaceProvider = ({
+  children,
+}: WorkspaceProviderProps) => {
+  const { data } = useWorkspaces()
+
+  return (
+    <WorkspacesContext.Provider value={{
+      workspaces: data?.workspaces || [],
+    }}
+    >
+      {children}
+    </WorkspacesContext.Provider>
+  )
+}
diff --git a/web/context/workspace-context.ts b/web/context/workspace-context.ts
new file mode 100644
index 0000000000..e088d12f4e
--- /dev/null
+++ b/web/context/workspace-context.ts
@@ -0,0 +1,16 @@
+'use client'
+
+import type { IWorkspace } from '@/models/common'
+import { createContext, useContext } from 'use-context-selector'
+
+export type WorkspacesContextValue = {
+  workspaces: IWorkspace[]
+}
+
+export const WorkspacesContext = createContext<WorkspacesContextValue>({
+  workspaces: [],
+})
+
+export const useWorkspacesContext = () => useContext(WorkspacesContext)
+
+export default WorkspacesContext
diff --git a/web/context/workspace-context.tsx b/web/context/workspace-context.tsx
deleted file mode 100644
index 3834641bc1..0000000000
--- a/web/context/workspace-context.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-'use client'
-
-import type { IWorkspace } from '@/models/common'
-import { createContext, useContext } from 'use-context-selector'
-import { useWorkspaces } from '@/service/use-common'
-
-export type WorkspacesContextValue = {
-  workspaces: IWorkspace[]
-}
-
-const WorkspacesContext = createContext<WorkspacesContextValue>({
-  workspaces: [],
-})
-
-type IWorkspaceProviderProps = {
-  children: React.ReactNode
-}
-
-export const WorkspaceProvider = ({
-  children,
-}: IWorkspaceProviderProps) => {
-  const { data } = useWorkspaces()
-
-  return (
-    <WorkspacesContext.Provider value={{
-      workspaces: data?.workspaces || [],
-    }}
-    >
-      {children}
-    </WorkspacesContext.Provider>
-  )
-}
-
-export const useWorkspacesContext = () => useContext(WorkspacesContext)
-
-export default WorkspacesContext
diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json
index 0880084320..22f225d1d0 100644
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@@ -968,11 +968,6 @@
       "count": 6
     }
   },
-  "app/components/app/configuration/debug/debug-with-multiple-model/context.tsx": {
-    "react-refresh/only-export-components": {
-      "count": 1
-    }
-  },
   "app/components/app/configuration/debug/debug-with-multiple-model/debug-item.tsx": {
     "no-restricted-imports": {
       "count": 2
@@ -1561,7 +1556,7 @@
       "count": 7
     }
   },
-  "app/components/base/chat/chat-with-history/context.tsx": {
+  "app/components/base/chat/chat-with-history/context.ts": {
     "ts/no-explicit-any": {
       "count": 7
     }
@@ -1715,11 +1710,6 @@
       "count": 1
     }
   },
-  "app/components/base/chat/chat/context.tsx": {
-    "react-refresh/only-export-components": {
-      "count": 1
-    }
-  },
   "app/components/base/chat/chat/hooks.ts": {
     "react-hooks-extra/no-direct-set-state-in-use-effect": {
       "count": 2
@@ -1759,7 +1749,7 @@
       "count": 7
     }
   },
-  "app/components/base/chat/embedded-chatbot/context.tsx": {
+  "app/components/base/chat/embedded-chatbot/context.ts": {
     "ts/no-explicit-any": {
       "count": 7
     }
@@ -2763,7 +2753,7 @@
       "count": 2
     }
   },
-  "app/components/base/radio/context/index.tsx": {
+  "app/components/base/radio/context/index.ts": {
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -2915,14 +2905,6 @@
       "count": 1
     }
   },
-  "app/components/base/toast/index.tsx": {
-    "react-refresh/only-export-components": {
-      "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/base/video-gallery/VideoPlayer.tsx": {
     "react-hooks-extra/no-direct-set-state-in-use-effect": {
       "count": 1
@@ -5683,10 +5665,7 @@
       "count": 1
     }
   },
-  "app/components/plugins/plugin-page/context.tsx": {
-    "react-refresh/only-export-components": {
-      "count": 2
-    },
+  "app/components/plugins/plugin-page/context.ts": {
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -9571,16 +9550,6 @@
       "count": 5
     }
   },
-  "context/datasets-context.tsx": {
-    "react-refresh/only-export-components": {
-      "count": 1
-    }
-  },
-  "context/event-emitter.tsx": {
-    "react-refresh/only-export-components": {
-      "count": 1
-    }
-  },
   "context/external-api-panel-context.tsx": {
     "react-refresh/only-export-components": {
       "count": 1
@@ -9601,8 +9570,8 @@
       "count": 3
     }
   },
-  "context/mitt-context.tsx": {
-    "react-refresh/only-export-components": {
+  "context/modal-context-provider.tsx": {
+    "ts/no-explicit-any": {
       "count": 3
     }
   },
@@ -9611,18 +9580,12 @@
       "count": 3
     }
   },
-  "context/modal-context.tsx": {
-    "react-refresh/only-export-components": {
-      "count": 2
-    },
+  "context/modal-context.ts": {
     "ts/no-explicit-any": {
-      "count": 5
+      "count": 2
     }
   },
-  "context/provider-context.tsx": {
-    "react-refresh/only-export-components": {
-      "count": 3
-    },
+  "context/provider-context-provider.tsx": {
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -9632,11 +9595,6 @@
       "count": 1
     }
   },
-  "context/workspace-context.tsx": {
-    "react-refresh/only-export-components": {
-      "count": 1
-    }
-  },
   "hooks/use-async-window-open.spec.ts": {
     "ts/no-explicit-any": {
       "count": 6
diff --git a/web/hooks/use-import-dsl.ts b/web/hooks/use-import-dsl.ts
index ba33db1e84..454f580b42 100644
--- a/web/hooks/use-import-dsl.ts
+++ b/web/hooks/use-import-dsl.ts
@@ -10,7 +10,7 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useSelector } from '@/context/app-context'