diff --git a/.agents/skills/frontend-query-mutation/references/runtime-rules.md b/.agents/skills/frontend-query-mutation/references/runtime-rules.md
index 02e8b9c2b6..73d6fbdded 100644
--- a/.agents/skills/frontend-query-mutation/references/runtime-rules.md
+++ b/.agents/skills/frontend-query-mutation/references/runtime-rules.md
@@ -64,7 +64,7 @@ export const useUpdateAccessMode = () => {
 
 // Component only adds UI behavior.
 updateAccessMode({ appId, mode }, {
-  onSuccess: () => Toast.notify({ type: 'success', message: '...' }),
+  onSuccess: () => toast.success('...'),
 })
 
 // Avoid putting invalidation knowledge in the component.
@@ -114,10 +114,7 @@ try {
   router.push(`/orders/${order.id}`)
 }
 catch (error) {
-  Toast.notify({
-    type: 'error',
-    message: error instanceof Error ? error.message : 'Unknown error',
-  })
+  toast.error(error instanceof Error ? error.message : 'Unknown error')
 }
 ```
 
diff --git a/web/.storybook/preview.tsx b/web/.storybook/preview.tsx
index 072244c33f..a9144e7128 100644
--- a/web/.storybook/preview.tsx
+++ b/web/.storybook/preview.tsx
@@ -2,7 +2,7 @@ import type { Preview } from '@storybook/react'
 import type { Resource } from 'i18next'
 import { withThemeByDataAttribute } from '@storybook/addon-themes'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { ToastProvider } from '../app/components/base/toast'
+import { ToastHost } from '../app/components/base/ui/toast'
 import { I18nClientProvider as I18N } from '../app/components/provider/i18n'
 import commonEnUS from '../i18n/en-US/common.json'
 
@@ -39,9 +39,10 @@ export const decorators = [
     return (
       <QueryClientProvider client={queryClient}>
         <I18N locale="en-US" resource={storyResources}>
-          <ToastProvider>
+          <>
+            <ToastHost />
             <Story />
-          </ToastProvider>
+          </>
         </I18N>
       </QueryClientProvider>
     )
diff --git a/web/__tests__/apps/app-card-operations-flow.test.tsx b/web/__tests__/apps/app-card-operations-flow.test.tsx
index 5fd7e01561..be9ed9d079 100644
--- a/web/__tests__/apps/app-card-operations-flow.test.tsx
+++ b/web/__tests__/apps/app-card-operations-flow.test.tsx
@@ -25,6 +25,19 @@ let mockSystemFeatures = {
 
 const mockRouterPush = vi.fn()
 const mockNotify = vi.fn()
+const mockToast = {
+  success: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'success', message, ...options }),
+  error: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'error', message, ...options }),
+  warning: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'warning', message, ...options }),
+  info: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'info', message, ...options }),
+  dismiss: vi.fn(),
+  update: vi.fn(),
+  promise: vi.fn(),
+}
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
+}))
 const mockOnPlanInfoChanged = vi.fn()
 const mockDeleteAppMutation = vi.fn().mockResolvedValue(undefined)
 let mockDeleteMutationPending = false
@@ -94,27 +107,6 @@ vi.mock('@/context/provider-context', () => ({
   }),
 }))
 
-// Mock the ToastContext used via useContext from use-context-selector
-vi.mock('use-context-selector', async () => {
-  const actual = await vi.importActual<typeof import('use-context-selector')>('use-context-selector')
-  return {
-    ...actual,
-    useContext: () => ({ notify: mockNotify }),
-  }
-})
-
-vi.mock('@/app/components/base/tag-management/store', () => ({
-  useStore: (selector: (state: Record<string, unknown>) => unknown) => {
-    const state = {
-      tagList: [],
-      showTagManagementModal: false,
-      setTagList: vi.fn(),
-      setShowTagManagementModal: vi.fn(),
-    }
-    return selector(state)
-  },
-}))
-
 vi.mock('@/service/tag', () => ({
   fetchTagList: vi.fn().mockResolvedValue([]),
 }))
diff --git a/web/__tests__/datasets/create-dataset-flow.test.tsx b/web/__tests__/datasets/create-dataset-flow.test.tsx
index e3a59edde6..3dba22e092 100644
--- a/web/__tests__/datasets/create-dataset-flow.test.tsx
+++ b/web/__tests__/datasets/create-dataset-flow.test.tsx
@@ -33,7 +33,7 @@ vi.mock('@/service/knowledge/use-dataset', () => ({
   useInvalidDatasetList: () => vi.fn(),
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/ui/toast', () => ({
   default: { notify: vi.fn() },
 }))
 
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 dc5ab3fc86..cdf7aba4f6 100644
--- a/web/__tests__/rag-pipeline/dsl-export-import-flow.test.ts
+++ b/web/__tests__/rag-pipeline/dsl-export-import-flow.test.ts
@@ -10,6 +10,19 @@ import { describe, expect, it, vi } from 'vitest'
 const mockDoSyncWorkflowDraft = vi.fn().mockResolvedValue(undefined)
 const mockExportPipelineConfig = vi.fn().mockResolvedValue({ data: 'yaml-content' })
 const mockNotify = vi.fn()
+const mockToast = {
+  success: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'success', message, ...options }),
+  error: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'error', message, ...options }),
+  warning: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'warning', message, ...options }),
+  info: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'info', message, ...options }),
+  dismiss: vi.fn(),
+  update: vi.fn(),
+  promise: vi.fn(),
+}
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
+}))
 const mockEventEmitter = { emit: vi.fn() }
 const mockDownloadBlob = vi.fn()
 
@@ -19,10 +32,6 @@ vi.mock('react-i18next', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/toast/context', () => ({
-  useToastContext: () => ({ notify: mockNotify }),
-}))
-
 vi.mock('@/app/components/workflow/constants', () => ({
   DSL_EXPORT_CHECK: 'DSL_EXPORT_CHECK',
 }))
diff --git a/web/__tests__/tools/tool-provider-detail-flow.test.tsx b/web/__tests__/tools/tool-provider-detail-flow.test.tsx
index 0101f83f22..bde620c1e2 100644
--- a/web/__tests__/tools/tool-provider-detail-flow.test.tsx
+++ b/web/__tests__/tools/tool-provider-detail-flow.test.tsx
@@ -153,7 +153,7 @@ vi.mock('@/app/components/base/confirm', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/ui/toast', () => ({
   default: { notify: vi.fn() },
 }))
 
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 cd542cac9b..f0d21be910 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view.tsx
@@ -8,12 +8,11 @@ import type { I18nKeysByPrefix } from '@/types/i18n'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
 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/context'
+import { toast } from '@/app/components/base/ui/toast'
 import MCPServiceCard from '@/app/components/tools/mcp/mcp-service-card'
 import { collaborationManager } from '@/app/components/workflow/collaboration/core/collaboration-manager'
 import { webSocketClient } from '@/app/components/workflow/collaboration/core/websocket-manager'
@@ -37,7 +36,6 @@ export type ICardViewProps = {
 
 const CardView: FC<ICardViewProps> = ({ appId, isInPanel, className }) => {
   const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
   const appDetail = useAppStore(state => state.appDetail)
   const setAppDetail = useAppStore(state => state.setAppDetail)
 
@@ -106,10 +104,7 @@ const CardView: FC<ICardViewProps> = ({ appId, isInPanel, className }) => {
       }
     }
 
-    notify({
-      type,
-      message: t(`actionMsg.${message}`, { ns: 'common' }) as string,
-    })
+    toast(t(`actionMsg.${message}`, { ns: 'common' }) as string, { type })
   }
 
   // Listen for collaborative app state updates from other clients
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
index 1a2ec30ff9..696ea74728 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
@@ -13,7 +13,7 @@ import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import { AliyunIcon, ArizeIcon, DatabricksIcon, LangfuseIcon, LangsmithIcon, MlflowIcon, OpikIcon, PhoenixIcon, TencentIcon, WeaveIcon } from '@/app/components/base/icons/src/public/tracing'
 import Loading from '@/app/components/base/loading'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import Indicator from '@/app/components/header/indicator'
 import { useAppContext } from '@/context/app-context'
 import { usePathname } from '@/next/navigation'
@@ -43,10 +43,7 @@ const Panel: FC = () => {
     await updateTracingStatus({ appId, body: tracingStatus })
     setTracingStatus(tracingStatus)
     if (!noToast) {
-      Toast.notify({
-        type: 'success',
-        message: t('api.success', { ns: 'common' }),
-      })
+      toast(t('api.success', { ns: 'common' }), { type: 'success' })
     }
   }
 
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
index 0aa4c25989..2abaf7e8ec 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
@@ -14,7 +14,7 @@ import {
   PortalToFollowElem,
   PortalToFollowElemContent,
 } from '@/app/components/base/portal-to-follow-elem'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { addTracingConfig, removeTracingConfig, updateTracingConfig } from '@/service/apps'
 import { docURL } from './config'
 import Field from './field'
@@ -155,10 +155,7 @@ const ProviderConfigModal: FC<Props> = ({
       appId,
       provider: type,
     })
-    Toast.notify({
-      type: 'success',
-      message: t('api.remove', { ns: 'common' }),
-    })
+    toast(t('api.remove', { ns: 'common' }), { type: 'success' })
     onRemoved()
     hideRemoveConfirm()
   }, [hideRemoveConfirm, appId, type, t, onRemoved])
@@ -264,10 +261,7 @@ const ProviderConfigModal: FC<Props> = ({
       return
     const errorMessage = checkValid()
     if (errorMessage) {
-      Toast.notify({
-        type: 'error',
-        message: errorMessage,
-      })
+      toast(errorMessage, { type: 'error' })
       return
     }
     const action = isEdit ? updateTracingConfig : addTracingConfig
@@ -279,10 +273,7 @@ const ProviderConfigModal: FC<Props> = ({
           tracing_config: config,
         },
       })
-      Toast.notify({
-        type: 'success',
-        message: t('api.success', { ns: 'common' }),
-      })
+      toast(t('api.success', { ns: 'common' }), { type: 'success' })
       onSaved(config)
       if (isAdd)
         onChosen(type)
diff --git a/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx b/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx
index 3fc677d8d8..25e529a221 100644
--- a/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx
+++ b/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx
@@ -8,15 +8,14 @@ import { RiDeleteBin5Line, RiPencilLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
 import ImageInput from '@/app/components/base/app-icon-picker/ImageInput'
 import getCroppedImg from '@/app/components/base/app-icon-picker/utils'
 import { Avatar } from '@/app/components/base/avatar'
 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/context'
+import { Dialog, DialogContent } from '@/app/components/base/ui/dialog'
+import { toast } from '@/app/components/base/ui/toast'
 import { DISABLE_UPLOAD_IMAGE_AS_ICON } from '@/config'
 import { updateUserProfile } from '@/service/common'
 
@@ -25,7 +24,6 @@ type AvatarWithEditProps = AvatarProps & { onSave?: () => void }
 
 const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
   const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
 
   const [inputImageInfo, setInputImageInfo] = useState<InputImageInfo>()
   const [isShowAvatarPicker, setIsShowAvatarPicker] = useState(false)
@@ -48,24 +46,24 @@ const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
       await updateUserProfile({ url: 'account/avatar', body: { avatar: uploadedFileId } })
       setIsShowAvatarPicker(false)
       onSave?.()
-      notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
+      toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
     }
     catch (e) {
-      notify({ type: 'error', message: (e as Error).message })
+      toast.error((e as Error).message)
     }
-  }, [notify, onSave, t])
+  }, [onSave, t])
 
   const handleDeleteAvatar = useCallback(async () => {
     try {
       await updateUserProfile({ url: 'account/avatar', body: { avatar: '' } })
-      notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
+      toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
       setIsShowDeleteConfirm(false)
       onSave?.()
     }
     catch (e) {
-      notify({ type: 'error', message: (e as Error).message })
+      toast.error((e as Error).message)
     }
-  }, [notify, onSave, t])
+  }, [onSave, t])
 
   const { handleLocalFileUpload } = useLocalFileUploader({
     limit: 3,
@@ -134,45 +132,39 @@ const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
         </div>
       </div>
 
-      <Modal
-        closable
-        className="!w-[362px] !p-0"
-        isShow={isShowAvatarPicker}
-        onClose={() => setIsShowAvatarPicker(false)}
-      >
-        <ImageInput onImageInput={handleImageInput} cropShape="round" />
-        <Divider className="m-0" />
+      <Dialog open={isShowAvatarPicker} onOpenChange={open => !open && setIsShowAvatarPicker(false)}>
+        <DialogContent className="!w-[362px] !p-0">
+          <ImageInput onImageInput={handleImageInput} cropShape="round" />
+          <Divider className="m-0" />
 
-        <div className="flex w-full items-center justify-center gap-2 p-3">
-          <Button className="w-full" onClick={() => setIsShowAvatarPicker(false)}>
-            {t('iconPicker.cancel', { ns: 'app' })}
-          </Button>
+          <div className="flex w-full items-center justify-center gap-2 p-3">
+            <Button className="w-full" onClick={() => setIsShowAvatarPicker(false)}>
+              {t('iconPicker.cancel', { ns: 'app' })}
+            </Button>
 
-          <Button variant="primary" className="w-full" disabled={uploading || !inputImageInfo} loading={uploading} onClick={handleSelect}>
-            {t('iconPicker.ok', { ns: 'app' })}
-          </Button>
-        </div>
-      </Modal>
+            <Button variant="primary" className="w-full" disabled={uploading || !inputImageInfo} loading={uploading} onClick={handleSelect}>
+              {t('iconPicker.ok', { ns: 'app' })}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
 
-      <Modal
-        closable
-        className="!w-[362px] !p-6"
-        isShow={isShowDeleteConfirm}
-        onClose={() => setIsShowDeleteConfirm(false)}
-      >
-        <div className="mb-3 text-text-primary title-2xl-semi-bold">{t('avatar.deleteTitle', { ns: 'common' })}</div>
-        <p className="mb-8 text-text-secondary">{t('avatar.deleteDescription', { ns: 'common' })}</p>
+      <Dialog open={isShowDeleteConfirm} onOpenChange={open => !open && setIsShowDeleteConfirm(false)}>
+        <DialogContent className="!w-[362px] !p-6">
+          <div className="mb-3 text-text-primary title-2xl-semi-bold">{t('avatar.deleteTitle', { ns: 'common' })}</div>
+          <p className="mb-8 text-text-secondary">{t('avatar.deleteDescription', { ns: 'common' })}</p>
 
-        <div className="flex w-full items-center justify-center gap-2">
-          <Button className="w-full" onClick={() => setIsShowDeleteConfirm(false)}>
-            {t('operation.cancel', { ns: 'common' })}
-          </Button>
+          <div className="flex w-full items-center justify-center gap-2">
+            <Button className="w-full" onClick={() => setIsShowDeleteConfirm(false)}>
+              {t('operation.cancel', { ns: 'common' })}
+            </Button>
 
-          <Button variant="warning" className="w-full" onClick={handleDeleteAvatar}>
-            {t('operation.delete', { ns: 'common' })}
-          </Button>
-        </div>
-      </Modal>
+            <Button variant="warning" className="w-full" onClick={handleDeleteAvatar}>
+              {t('operation.delete', { ns: 'common' })}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
     </>
   )
 }
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 f0dfd4f12f..2e2d61f2f9 100644
--- a/web/app/account/(commonLayout)/account-page/email-change-modal.tsx
+++ b/web/app/account/(commonLayout)/account-page/email-change-modal.tsx
@@ -1,14 +1,12 @@
 import type { ResponseError } from '@/service/fetch'
 import { RiCloseLine } from '@remixicon/react'
-import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-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/context'
+import { Dialog, DialogContent } from '@/app/components/base/ui/dialog'
+import { toast } from '@/app/components/base/ui/toast'
 import { useRouter } from '@/next/navigation'
 import {
   checkEmailExisted,
@@ -34,7 +32,6 @@ enum STEP {
 
 const EmailChangeModal = ({ onClose, email, show }: Props) => {
   const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
   const router = useRouter()
   const [step, setStep] = useState<STEP>(STEP.start)
   const [code, setCode] = useState<string>('')
@@ -70,10 +67,7 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
         setStepToken(res.data)
     }
     catch (error) {
-      notify({
-        type: 'error',
-        message: `Error sending verification code: ${error ? (error as any).message : ''}`,
-      })
+      toast.error(`Error sending verification code: ${error ? (error as any).message : ''}`)
     }
   }
 
@@ -89,17 +83,11 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
         callback?.(res.token)
       }
       else {
-        notify({
-          type: 'error',
-          message: 'Verifying email failed',
-        })
+        toast.error('Verifying email failed')
       }
     }
     catch (error) {
-      notify({
-        type: 'error',
-        message: `Error verifying email: ${error ? (error as any).message : ''}`,
-      })
+      toast.error(`Error verifying email: ${error ? (error as any).message : ''}`)
     }
   }
 
@@ -154,10 +142,7 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
 
   const sendCodeToNewEmail = async () => {
     if (!isValidEmail(mail)) {
-      notify({
-        type: 'error',
-        message: 'Invalid email format',
-      })
+      toast.error('Invalid email format')
       return
     }
     await sendEmail(
@@ -187,10 +172,7 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
       handleLogout()
     }
     catch (error) {
-      notify({
-        type: 'error',
-        message: `Error changing email: ${error ? (error as any).message : ''}`,
-      })
+      toast.error(`Error changing email: ${error ? (error as any).message : ''}`)
     }
   }
 
@@ -199,187 +181,185 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
   }
 
   return (
-    <Modal
-      isShow={show}
-      onClose={noop}
-      className="!w-[420px] !p-6"
-    >
-      <div className="absolute right-5 top-5 cursor-pointer p-1.5" onClick={onClose}>
-        <RiCloseLine className="h-5 w-5 text-text-tertiary" />
-      </div>
-      {step === STEP.start && (
-        <>
-          <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.title', { ns: 'common' })}</div>
-          <div className="space-y-0.5 pb-2 pt-1">
-            <div className="text-text-warning body-md-medium">{t('account.changeEmail.authTip', { ns: 'common' })}</div>
-            <div className="text-text-secondary body-md-regular">
-              <Trans
-                i18nKey="account.changeEmail.content1"
-                ns="common"
-                components={{ email: <span className="text-text-primary body-md-medium"></span> }}
-                values={{ email }}
+    <Dialog open={show} onOpenChange={open => !open && onClose()}>
+      <DialogContent className="!w-[420px] !p-6">
+        <div className="absolute right-5 top-5 cursor-pointer p-1.5" onClick={onClose}>
+          <RiCloseLine className="h-5 w-5 text-text-tertiary" />
+        </div>
+        {step === STEP.start && (
+          <>
+            <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.title', { ns: 'common' })}</div>
+            <div className="space-y-0.5 pb-2 pt-1">
+              <div className="text-text-warning body-md-medium">{t('account.changeEmail.authTip', { ns: 'common' })}</div>
+              <div className="text-text-secondary body-md-regular">
+                <Trans
+                  i18nKey="account.changeEmail.content1"
+                  ns="common"
+                  components={{ email: <span className="text-text-primary body-md-medium"></span> }}
+                  values={{ email }}
+                />
+              </div>
+            </div>
+            <div className="pt-3"></div>
+            <div className="space-y-2">
+              <Button
+                className="!w-full"
+                variant="primary"
+                onClick={sendCodeToOriginEmail}
+              >
+                {t('account.changeEmail.sendVerifyCode', { ns: 'common' })}
+              </Button>
+              <Button
+                className="!w-full"
+                onClick={onClose}
+              >
+                {t('operation.cancel', { ns: 'common' })}
+              </Button>
+            </div>
+          </>
+        )}
+        {step === STEP.verifyOrigin && (
+          <>
+            <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.verifyEmail', { ns: 'common' })}</div>
+            <div className="space-y-0.5 pb-2 pt-1">
+              <div className="text-text-secondary body-md-regular">
+                <Trans
+                  i18nKey="account.changeEmail.content2"
+                  ns="common"
+                  components={{ email: <span className="text-text-primary body-md-medium"></span> }}
+                  values={{ email }}
+                />
+              </div>
+            </div>
+            <div className="pt-3">
+              <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">{t('account.changeEmail.codeLabel', { ns: 'common' })}</div>
+              <Input
+                className="!w-full"
+                placeholder={t('account.changeEmail.codePlaceholder', { ns: 'common' })}
+                value={code}
+                onChange={e => setCode(e.target.value)}
+                maxLength={6}
               />
             </div>
-          </div>
-          <div className="pt-3"></div>
-          <div className="space-y-2">
-            <Button
-              className="!w-full"
-              variant="primary"
-              onClick={sendCodeToOriginEmail}
-            >
-              {t('account.changeEmail.sendVerifyCode', { ns: 'common' })}
-            </Button>
-            <Button
-              className="!w-full"
-              onClick={onClose}
-            >
-              {t('operation.cancel', { ns: 'common' })}
-            </Button>
-          </div>
-        </>
-      )}
-      {step === STEP.verifyOrigin && (
-        <>
-          <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.verifyEmail', { ns: 'common' })}</div>
-          <div className="space-y-0.5 pb-2 pt-1">
-            <div className="text-text-secondary body-md-regular">
-              <Trans
-                i18nKey="account.changeEmail.content2"
-                ns="common"
-                components={{ email: <span className="text-text-primary body-md-medium"></span> }}
-                values={{ email }}
+            <div className="mt-3 space-y-2">
+              <Button
+                disabled={code.length !== 6}
+                className="!w-full"
+                variant="primary"
+                onClick={handleVerifyOriginEmail}
+              >
+                {t('account.changeEmail.continue', { ns: 'common' })}
+              </Button>
+              <Button
+                className="!w-full"
+                onClick={onClose}
+              >
+                {t('operation.cancel', { ns: 'common' })}
+              </Button>
+            </div>
+            <div className="mt-3 flex items-center gap-1 text-text-tertiary system-xs-regular">
+              <span>{t('account.changeEmail.resendTip', { ns: 'common' })}</span>
+              {time > 0 && (
+                <span>{t('account.changeEmail.resendCount', { ns: 'common', count: time })}</span>
+              )}
+              {!time && (
+                <span onClick={sendCodeToOriginEmail} className="cursor-pointer text-text-accent-secondary system-xs-medium">{t('account.changeEmail.resend', { ns: 'common' })}</span>
+              )}
+            </div>
+          </>
+        )}
+        {step === STEP.newEmail && (
+          <>
+            <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.newEmail', { ns: 'common' })}</div>
+            <div className="space-y-0.5 pb-2 pt-1">
+              <div className="text-text-secondary body-md-regular">{t('account.changeEmail.content3', { ns: 'common' })}</div>
+            </div>
+            <div className="pt-3">
+              <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">{t('account.changeEmail.emailLabel', { ns: 'common' })}</div>
+              <Input
+                className="!w-full"
+                placeholder={t('account.changeEmail.emailPlaceholder', { ns: 'common' })}
+                value={mail}
+                onChange={e => handleNewEmailValueChange(e.target.value)}
+                destructive={newEmailExited || unAvailableEmail}
+              />
+              {newEmailExited && (
+                <div className="mt-1 py-0.5 text-text-destructive body-xs-regular">{t('account.changeEmail.existingEmail', { ns: 'common' })}</div>
+              )}
+              {unAvailableEmail && (
+                <div className="mt-1 py-0.5 text-text-destructive body-xs-regular">{t('account.changeEmail.unAvailableEmail', { ns: 'common' })}</div>
+              )}
+            </div>
+            <div className="mt-3 space-y-2">
+              <Button
+                disabled={!mail || newEmailExited || unAvailableEmail || isCheckingEmail || !isValidEmail(mail)}
+                className="!w-full"
+                variant="primary"
+                onClick={sendCodeToNewEmail}
+              >
+                {t('account.changeEmail.sendVerifyCode', { ns: 'common' })}
+              </Button>
+              <Button
+                className="!w-full"
+                onClick={onClose}
+              >
+                {t('operation.cancel', { ns: 'common' })}
+              </Button>
+            </div>
+          </>
+        )}
+        {step === STEP.verifyNew && (
+          <>
+            <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.verifyNew', { ns: 'common' })}</div>
+            <div className="space-y-0.5 pb-2 pt-1">
+              <div className="text-text-secondary body-md-regular">
+                <Trans
+                  i18nKey="account.changeEmail.content4"
+                  ns="common"
+                  components={{ email: <span className="text-text-primary body-md-medium"></span> }}
+                  values={{ email: mail }}
+                />
+              </div>
+            </div>
+            <div className="pt-3">
+              <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">{t('account.changeEmail.codeLabel', { ns: 'common' })}</div>
+              <Input
+                className="!w-full"
+                placeholder={t('account.changeEmail.codePlaceholder', { ns: 'common' })}
+                value={code}
+                onChange={e => setCode(e.target.value)}
+                maxLength={6}
               />
             </div>
-          </div>
-          <div className="pt-3">
-            <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">{t('account.changeEmail.codeLabel', { ns: 'common' })}</div>
-            <Input
-              className="!w-full"
-              placeholder={t('account.changeEmail.codePlaceholder', { ns: 'common' })}
-              value={code}
-              onChange={e => setCode(e.target.value)}
-              maxLength={6}
-            />
-          </div>
-          <div className="mt-3 space-y-2">
-            <Button
-              disabled={code.length !== 6}
-              className="!w-full"
-              variant="primary"
-              onClick={handleVerifyOriginEmail}
-            >
-              {t('account.changeEmail.continue', { ns: 'common' })}
-            </Button>
-            <Button
-              className="!w-full"
-              onClick={onClose}
-            >
-              {t('operation.cancel', { ns: 'common' })}
-            </Button>
-          </div>
-          <div className="mt-3 flex items-center gap-1 text-text-tertiary system-xs-regular">
-            <span>{t('account.changeEmail.resendTip', { ns: 'common' })}</span>
-            {time > 0 && (
-              <span>{t('account.changeEmail.resendCount', { ns: 'common', count: time })}</span>
-            )}
-            {!time && (
-              <span onClick={sendCodeToOriginEmail} className="cursor-pointer text-text-accent-secondary system-xs-medium">{t('account.changeEmail.resend', { ns: 'common' })}</span>
-            )}
-          </div>
-        </>
-      )}
-      {step === STEP.newEmail && (
-        <>
-          <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.newEmail', { ns: 'common' })}</div>
-          <div className="space-y-0.5 pb-2 pt-1">
-            <div className="text-text-secondary body-md-regular">{t('account.changeEmail.content3', { ns: 'common' })}</div>
-          </div>
-          <div className="pt-3">
-            <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">{t('account.changeEmail.emailLabel', { ns: 'common' })}</div>
-            <Input
-              className="!w-full"
-              placeholder={t('account.changeEmail.emailPlaceholder', { ns: 'common' })}
-              value={mail}
-              onChange={e => handleNewEmailValueChange(e.target.value)}
-              destructive={newEmailExited || unAvailableEmail}
-            />
-            {newEmailExited && (
-              <div className="mt-1 py-0.5 text-text-destructive body-xs-regular">{t('account.changeEmail.existingEmail', { ns: 'common' })}</div>
-            )}
-            {unAvailableEmail && (
-              <div className="mt-1 py-0.5 text-text-destructive body-xs-regular">{t('account.changeEmail.unAvailableEmail', { ns: 'common' })}</div>
-            )}
-          </div>
-          <div className="mt-3 space-y-2">
-            <Button
-              disabled={!mail || newEmailExited || unAvailableEmail || isCheckingEmail || !isValidEmail(mail)}
-              className="!w-full"
-              variant="primary"
-              onClick={sendCodeToNewEmail}
-            >
-              {t('account.changeEmail.sendVerifyCode', { ns: 'common' })}
-            </Button>
-            <Button
-              className="!w-full"
-              onClick={onClose}
-            >
-              {t('operation.cancel', { ns: 'common' })}
-            </Button>
-          </div>
-        </>
-      )}
-      {step === STEP.verifyNew && (
-        <>
-          <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.verifyNew', { ns: 'common' })}</div>
-          <div className="space-y-0.5 pb-2 pt-1">
-            <div className="text-text-secondary body-md-regular">
-              <Trans
-                i18nKey="account.changeEmail.content4"
-                ns="common"
-                components={{ email: <span className="text-text-primary body-md-medium"></span> }}
-                values={{ email: mail }}
-              />
+            <div className="mt-3 space-y-2">
+              <Button
+                disabled={code.length !== 6}
+                className="!w-full"
+                variant="primary"
+                onClick={submitNewEmail}
+              >
+                {t('account.changeEmail.changeTo', { ns: 'common', email: mail })}
+              </Button>
+              <Button
+                className="!w-full"
+                onClick={onClose}
+              >
+                {t('operation.cancel', { ns: 'common' })}
+              </Button>
             </div>
-          </div>
-          <div className="pt-3">
-            <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">{t('account.changeEmail.codeLabel', { ns: 'common' })}</div>
-            <Input
-              className="!w-full"
-              placeholder={t('account.changeEmail.codePlaceholder', { ns: 'common' })}
-              value={code}
-              onChange={e => setCode(e.target.value)}
-              maxLength={6}
-            />
-          </div>
-          <div className="mt-3 space-y-2">
-            <Button
-              disabled={code.length !== 6}
-              className="!w-full"
-              variant="primary"
-              onClick={submitNewEmail}
-            >
-              {t('account.changeEmail.changeTo', { ns: 'common', email: mail })}
-            </Button>
-            <Button
-              className="!w-full"
-              onClick={onClose}
-            >
-              {t('operation.cancel', { ns: 'common' })}
-            </Button>
-          </div>
-          <div className="mt-3 flex items-center gap-1 text-text-tertiary system-xs-regular">
-            <span>{t('account.changeEmail.resendTip', { ns: 'common' })}</span>
-            {time > 0 && (
-              <span>{t('account.changeEmail.resendCount', { ns: 'common', count: time })}</span>
-            )}
-            {!time && (
-              <span onClick={sendCodeToNewEmail} className="cursor-pointer text-text-accent-secondary system-xs-medium">{t('account.changeEmail.resend', { ns: 'common' })}</span>
-            )}
-          </div>
-        </>
-      )}
-    </Modal>
+            <div className="mt-3 flex items-center gap-1 text-text-tertiary system-xs-regular">
+              <span>{t('account.changeEmail.resendTip', { ns: 'common' })}</span>
+              {time > 0 && (
+                <span>{t('account.changeEmail.resendCount', { ns: 'common', count: time })}</span>
+              )}
+              {!time && (
+                <span onClick={sendCodeToNewEmail} className="cursor-pointer text-text-accent-secondary system-xs-medium">{t('account.changeEmail.resend', { ns: 'common' })}</span>
+              )}
+            </div>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/web/app/account/(commonLayout)/account-page/index.tsx b/web/app/account/(commonLayout)/account-page/index.tsx
index 9a104619da..7b4a148530 100644
--- a/web/app/account/(commonLayout)/account-page/index.tsx
+++ b/web/app/account/(commonLayout)/account-page/index.tsx
@@ -7,13 +7,12 @@ import {
 import { useQueryClient } from '@tanstack/react-query'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
 import AppIcon from '@/app/components/base/app-icon'
 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/context'
+import { Dialog, DialogContent } from '@/app/components/base/ui/dialog'
+import { toast } from '@/app/components/base/ui/toast'
 import Collapse from '@/app/components/header/account-setting/collapse'
 import { IS_CE_EDITION, validPassword } from '@/config'
 import { useGlobalPublicStore } from '@/context/global-public-context'
@@ -43,7 +42,6 @@ export default function AccountPage() {
   const userProfile = userProfileResp?.profile
   const mutateUserProfile = () => queryClient.invalidateQueries({ queryKey: commonQueryKeys.userProfile })
   const { isEducationAccount } = useProviderContext()
-  const { notify } = useContext(ToastContext)
   const [editNameModalVisible, setEditNameModalVisible] = useState(false)
   const [editName, setEditName] = useState('')
   const [editing, setEditing] = useState(false)
@@ -68,22 +66,19 @@ export default function AccountPage() {
     try {
       setEditing(true)
       await updateUserProfile({ url: 'account/name', body: { name: editName } })
-      notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
+      toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
       mutateUserProfile()
       setEditNameModalVisible(false)
       setEditing(false)
     }
     catch (e) {
-      notify({ type: 'error', message: (e as Error).message })
+      toast.error((e as Error).message)
       setEditing(false)
     }
   }
 
   const showErrorMessage = (message: string) => {
-    notify({
-      type: 'error',
-      message,
-    })
+    toast.error(message)
   }
   const valid = () => {
     if (!password.trim()) {
@@ -119,14 +114,14 @@ export default function AccountPage() {
           repeat_new_password: confirmPassword,
         },
       })
-      notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
+      toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
       mutateUserProfile()
       setEditPasswordModalVisible(false)
       resetPasswordForm()
       setEditing(false)
     }
     catch (e) {
-      notify({ type: 'error', message: (e as Error).message })
+      toast.error((e as Error).message)
       setEditPasswordModalVisible(false)
       setEditing(false)
     }
@@ -221,119 +216,112 @@ export default function AccountPage() {
       </div>
       {
         editNameModalVisible && (
-          <Modal
-            isShow
-            onClose={() => setEditNameModalVisible(false)}
-            className="!w-[420px] !p-6"
-          >
-            <div className="mb-6 text-text-primary title-2xl-semi-bold">{t('account.editName', { ns: 'common' })}</div>
-            <div className={titleClassName}>{t('account.name', { ns: 'common' })}</div>
-            <Input
-              className="mt-2"
-              value={editName}
-              onChange={e => setEditName(e.target.value)}
-            />
-            <div className="mt-10 flex justify-end">
-              <Button className="mr-2" onClick={() => setEditNameModalVisible(false)}>{t('operation.cancel', { ns: 'common' })}</Button>
-              <Button
-                disabled={editing || !editName}
-                variant="primary"
-                onClick={handleSaveName}
-              >
-                {t('operation.save', { ns: 'common' })}
-              </Button>
-            </div>
-          </Modal>
+          <Dialog open={editNameModalVisible} onOpenChange={open => !open && setEditNameModalVisible(false)}>
+            <DialogContent className="!w-[420px] !p-6">
+              <div className="mb-6 text-text-primary title-2xl-semi-bold">{t('account.editName', { ns: 'common' })}</div>
+              <div className={titleClassName}>{t('account.name', { ns: 'common' })}</div>
+              <Input
+                className="mt-2"
+                value={editName}
+                onChange={e => setEditName(e.target.value)}
+              />
+              <div className="mt-10 flex justify-end">
+                <Button className="mr-2" onClick={() => setEditNameModalVisible(false)}>{t('operation.cancel', { ns: 'common' })}</Button>
+                <Button
+                  disabled={editing || !editName}
+                  variant="primary"
+                  onClick={handleSaveName}
+                >
+                  {t('operation.save', { ns: 'common' })}
+                </Button>
+              </div>
+            </DialogContent>
+          </Dialog>
         )
       }
       {
         editPasswordModalVisible && (
-          <Modal
-            isShow
-            onClose={() => {
-              setEditPasswordModalVisible(false)
-              resetPasswordForm()
-            }}
-            className="!w-[420px] !p-6"
-          >
-            <div className="mb-6 text-text-primary title-2xl-semi-bold">{userProfile.is_password_set ? t('account.resetPassword', { ns: 'common' }) : t('account.setPassword', { ns: 'common' })}</div>
-            {userProfile.is_password_set && (
-              <>
-                <div className={titleClassName}>{t('account.currentPassword', { ns: 'common' })}</div>
-                <div className="relative mt-2">
-                  <Input
-                    type={showCurrentPassword ? 'text' : 'password'}
-                    value={currentPassword}
-                    onChange={e => setCurrentPassword(e.target.value)}
-                  />
+          <Dialog open={editPasswordModalVisible} onOpenChange={open => !open && (setEditPasswordModalVisible(false), resetPasswordForm())}>
+            <DialogContent className="!w-[420px] !p-6">
+              <div className="mb-6 text-text-primary title-2xl-semi-bold">{userProfile.is_password_set ? t('account.resetPassword', { ns: 'common' }) : t('account.setPassword', { ns: 'common' })}</div>
+              {userProfile.is_password_set && (
+                <>
+                  <div className={titleClassName}>{t('account.currentPassword', { ns: 'common' })}</div>
+                  <div className="relative mt-2">
+                    <Input
+                      type={showCurrentPassword ? 'text' : 'password'}
+                      value={currentPassword}
+                      onChange={e => setCurrentPassword(e.target.value)}
+                    />
 
-                  <div className="absolute inset-y-0 right-0 flex items-center">
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      onClick={() => setShowCurrentPassword(!showCurrentPassword)}
-                    >
-                      {showCurrentPassword ? '👀' : '😝'}
-                    </Button>
+                    <div className="absolute inset-y-0 right-0 flex items-center">
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        onClick={() => setShowCurrentPassword(!showCurrentPassword)}
+                      >
+                        {showCurrentPassword ? '👀' : '😝'}
+                      </Button>
+                    </div>
                   </div>
+                </>
+              )}
+              <div className="mt-8 text-text-secondary system-sm-semibold">
+                {userProfile.is_password_set ? t('account.newPassword', { ns: 'common' }) : t('account.password', { ns: 'common' })}
+              </div>
+              <div className="relative mt-2">
+                <Input
+                  type={showPassword ? 'text' : 'password'}
+                  value={password}
+                  onChange={e => setPassword(e.target.value)}
+                />
+                <div className="absolute inset-y-0 right-0 flex items-center">
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    onClick={() => setShowPassword(!showPassword)}
+                  >
+                    {showPassword ? '👀' : '😝'}
+                  </Button>
                 </div>
-              </>
-            )}
-            <div className="mt-8 text-text-secondary system-sm-semibold">
-              {userProfile.is_password_set ? t('account.newPassword', { ns: 'common' }) : t('account.password', { ns: 'common' })}
-            </div>
-            <div className="relative mt-2">
-              <Input
-                type={showPassword ? 'text' : 'password'}
-                value={password}
-                onChange={e => setPassword(e.target.value)}
-              />
-              <div className="absolute inset-y-0 right-0 flex items-center">
+              </div>
+              <div className="mt-8 text-text-secondary system-sm-semibold">{t('account.confirmPassword', { ns: 'common' })}</div>
+              <div className="relative mt-2">
+                <Input
+                  type={showConfirmPassword ? 'text' : 'password'}
+                  value={confirmPassword}
+                  onChange={e => setConfirmPassword(e.target.value)}
+                />
+                <div className="absolute inset-y-0 right-0 flex items-center">
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                  >
+                    {showConfirmPassword ? '👀' : '😝'}
+                  </Button>
+                </div>
+              </div>
+              <div className="mt-10 flex justify-end">
                 <Button
-                  type="button"
-                  variant="ghost"
-                  onClick={() => setShowPassword(!showPassword)}
+                  className="mr-2"
+                  onClick={() => {
+                    setEditPasswordModalVisible(false)
+                    resetPasswordForm()
+                  }}
                 >
-                  {showPassword ? '👀' : '😝'}
+                  {t('operation.cancel', { ns: 'common' })}
+                </Button>
+                <Button
+                  disabled={editing}
+                  variant="primary"
+                  onClick={handleSavePassword}
+                >
+                  {userProfile.is_password_set ? t('operation.reset', { ns: 'common' }) : t('operation.save', { ns: 'common' })}
                 </Button>
               </div>
-            </div>
-            <div className="mt-8 text-text-secondary system-sm-semibold">{t('account.confirmPassword', { ns: 'common' })}</div>
-            <div className="relative mt-2">
-              <Input
-                type={showConfirmPassword ? 'text' : 'password'}
-                value={confirmPassword}
-                onChange={e => setConfirmPassword(e.target.value)}
-              />
-              <div className="absolute inset-y-0 right-0 flex items-center">
-                <Button
-                  type="button"
-                  variant="ghost"
-                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                >
-                  {showConfirmPassword ? '👀' : '😝'}
-                </Button>
-              </div>
-            </div>
-            <div className="mt-10 flex justify-end">
-              <Button
-                className="mr-2"
-                onClick={() => {
-                  setEditPasswordModalVisible(false)
-                  resetPasswordForm()
-                }}
-              >
-                {t('operation.cancel', { ns: 'common' })}
-              </Button>
-              <Button
-                disabled={editing}
-                variant="primary"
-                onClick={handleSavePassword}
-              >
-                {userProfile.is_password_set ? t('operation.reset', { ns: 'common' }) : t('operation.save', { ns: 'common' })}
-              </Button>
-            </div>
-          </Modal>
+            </DialogContent>
+          </Dialog>
         )
       }
       {
diff --git a/web/app/account/(commonLayout)/delete-account/components/feed-back.tsx b/web/app/account/(commonLayout)/delete-account/components/feed-back.tsx
index af82d4bc62..0fd06599d2 100644
--- a/web/app/account/(commonLayout)/delete-account/components/feed-back.tsx
+++ b/web/app/account/(commonLayout)/delete-account/components/feed-back.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import CustomDialog from '@/app/components/base/dialog'
 import Textarea from '@/app/components/base/textarea'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { useAppContext } from '@/context/app-context'
 import { useRouter } from '@/next/navigation'
 import { useLogout } from '@/service/use-common'
@@ -28,7 +28,7 @@ export default function FeedBack(props: DeleteAccountProps) {
       await logout()
       // Tokens are now stored in cookies and cleared by backend
       router.push('/signin')
-      Toast.notify({ type: 'info', message: t('account.deleteSuccessTip', { ns: 'common' }) })
+      toast.info(t('account.deleteSuccessTip', { ns: 'common' }))
     }
     catch (error) { console.error(error) }
   }, [router, t])
diff --git a/web/app/components/app-sidebar/app-info.tsx b/web/app/components/app-sidebar/app-info.tsx
index 38b3cc3108..02cf281224 100644
--- a/web/app/components/app-sidebar/app-info.tsx
+++ b/web/app/components/app-sidebar/app-info.tsx
@@ -16,8 +16,8 @@ import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import CardView from '@/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view'
 import { useStore as useAppStore } from '@/app/components/app/store'
-
 import Button from '@/app/components/base/button'
+
 import ContentDialog from '@/app/components/base/content-dialog'
 import { toast } from '@/app/components/base/ui/toast'
 import { collaborationManager } from '@/app/components/workflow/collaboration/core/collaboration-manager'
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 deea28ce3e..1fe0b6ddb5 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
@@ -27,10 +27,6 @@ vi.mock('@/next/navigation', () => ({
   useRouter: () => ({ replace: mockReplace }),
 }))
 
-vi.mock('use-context-selector', () => ({
-  useContext: () => ({ notify: mockNotify }),
-}))
-
 vi.mock('@/context/provider-context', () => ({
   useProviderContext: () => ({ onPlanInfoChanged: mockOnPlanInfoChanged }),
 }))
@@ -42,8 +38,16 @@ vi.mock('@/app/components/app/store', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/toast/context', () => ({
-  ToastContext: {},
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: Object.assign(mockNotify, {
+    success: vi.fn((message, options) => mockNotify({ type: 'success', message, ...options })),
+    error: vi.fn((message, options) => mockNotify({ type: 'error', message, ...options })),
+    warning: vi.fn((message, options) => mockNotify({ type: 'warning', message, ...options })),
+    info: vi.fn((message, options) => mockNotify({ type: 'info', message, ...options })),
+    dismiss: vi.fn(),
+    update: vi.fn(),
+    promise: vi.fn(),
+  }),
 }))
 
 vi.mock('@/service/use-apps', () => ({
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 55ec13e506..8b559f7bba 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
@@ -3,9 +3,8 @@ import type { CreateAppModalProps } from '@/app/components/explore/create-app-mo
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
 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/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useProviderContext } from '@/context/provider-context'
 import { useRouter } from '@/next/navigation'
@@ -24,7 +23,6 @@ type UseAppInfoActionsParams = {
 
 export function useAppInfoActions({ onDetailExpand }: UseAppInfoActionsParams) {
   const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
   const { replace } = useRouter()
   const { onPlanInfoChanged } = useProviderContext()
   const appDetail = useAppStore(state => state.appDetail)
@@ -72,13 +70,13 @@ export function useAppInfoActions({ onDetailExpand }: UseAppInfoActionsParams) {
         max_active_requests,
       })
       closeModal()
-      notify({ type: 'success', message: t('editDone', { ns: 'app' }) })
+      toast(t('editDone', { ns: 'app' }), { type: 'success' })
       setAppDetail(app)
     }
     catch {
-      notify({ type: 'error', message: t('editFailed', { ns: 'app' }) })
+      toast(t('editFailed', { ns: 'app' }), { type: 'error' })
     }
-  }, [appDetail, closeModal, notify, setAppDetail, t])
+  }, [appDetail, closeModal, setAppDetail, t])
 
   const onCopy: DuplicateAppModalProps['onConfirm'] = useCallback(async ({
     name,
@@ -98,15 +96,15 @@ export function useAppInfoActions({ onDetailExpand }: UseAppInfoActionsParams) {
         mode: appDetail.mode,
       })
       closeModal()
-      notify({ type: 'success', message: t('newApp.appCreated', { ns: 'app' }) })
+      toast(t('newApp.appCreated', { ns: 'app' }), { type: 'success' })
       localStorage.setItem(NEED_REFRESH_APP_LIST_KEY, '1')
       onPlanInfoChanged()
       getRedirection(true, newApp, replace)
     }
     catch {
-      notify({ type: 'error', message: t('newApp.appCreateFailed', { ns: 'app' }) })
+      toast(t('newApp.appCreateFailed', { ns: 'app' }), { type: 'error' })
     }
-  }, [appDetail, closeModal, notify, onPlanInfoChanged, replace, t])
+  }, [appDetail, closeModal, onPlanInfoChanged, replace, t])
 
   const onExport = useCallback(async (include = false) => {
     if (!appDetail)
@@ -117,9 +115,9 @@ export function useAppInfoActions({ onDetailExpand }: UseAppInfoActionsParams) {
       downloadBlob({ data: file, fileName: `${appDetail.name}.yml` })
     }
     catch {
-      notify({ type: 'error', message: t('exportFailed', { ns: 'app' }) })
+      toast(t('exportFailed', { ns: 'app' }), { type: 'error' })
     }
-  }, [appDetail, notify, t])
+  }, [appDetail, t])
 
   const exportCheck = useCallback(async () => {
     if (!appDetail)
@@ -145,29 +143,26 @@ export function useAppInfoActions({ onDetailExpand }: UseAppInfoActionsParams) {
       setSecretEnvList(list)
     }
     catch {
-      notify({ type: 'error', message: t('exportFailed', { ns: 'app' }) })
+      toast(t('exportFailed', { ns: 'app' }), { type: 'error' })
     }
-  }, [appDetail, closeModal, notify, onExport, t])
+  }, [appDetail, closeModal, onExport, t])
 
   const onConfirmDelete = useCallback(async () => {
     if (!appDetail)
       return
     try {
       await deleteApp(appDetail.id)
-      notify({ type: 'success', message: t('appDeleted', { ns: 'app' }) })
+      toast(t('appDeleted', { ns: 'app' }), { type: 'success' })
       invalidateAppList()
       onPlanInfoChanged()
       setAppDetail()
       replace('/apps')
     }
     catch (e: unknown) {
-      notify({
-        type: 'error',
-        message: `${t('appDeleteFailed', { ns: 'app' })}${e instanceof Error && e.message ? `: ${e.message}` : ''}`,
-      })
+      toast(`${t('appDeleteFailed', { ns: 'app' })}${e instanceof Error && e.message ? `: ${e.message}` : ''}`, { type: 'error' })
     }
     closeModal()
-  }, [appDetail, closeModal, invalidateAppList, notify, onPlanInfoChanged, replace, setAppDetail, t])
+  }, [appDetail, closeModal, invalidateAppList, onPlanInfoChanged, replace, setAppDetail, t])
 
   return {
     appDetail,
diff --git a/web/app/components/app-sidebar/dataset-info/dropdown.tsx b/web/app/components/app-sidebar/dataset-info/dropdown.tsx
index 528bac831f..1d1208e7d3 100644
--- a/web/app/components/app-sidebar/dataset-info/dropdown.tsx
+++ b/web/app/components/app-sidebar/dataset-info/dropdown.tsx
@@ -3,6 +3,7 @@ import { RiMoreFill } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { toast } from '@/app/components/base/ui/toast'
 import { useSelector as useAppContextWithSelector } from '@/context/app-context'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { useRouter } from '@/next/navigation'
@@ -15,7 +16,6 @@ import { downloadBlob } from '@/utils/download'
 import ActionButton from '../../base/action-button'
 import Confirm from '../../base/confirm'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '../../base/portal-to-follow-elem'
-import Toast from '../../base/toast'
 import RenameDatasetModal from '../../datasets/rename-modal'
 import Menu from './menu'
 
@@ -69,7 +69,7 @@ const DropDown = ({
       downloadBlob({ data: file, fileName: `${name}.pipeline` })
     }
     catch {
-      Toast.notify({ type: 'error', message: t('exportFailed', { ns: 'app' }) })
+      toast(t('exportFailed', { ns: 'app' }), { type: 'error' })
     }
   }, [dataset, exportPipelineConfig, handleTrigger, t])
 
@@ -81,7 +81,7 @@ const DropDown = ({
     }
     catch (e: any) {
       const res = await e.json()
-      Toast.notify({ type: 'error', message: res?.message || 'Unknown error' })
+      toast(res?.message || 'Unknown error', { type: 'error' })
     }
     finally {
       handleTrigger()
@@ -91,7 +91,7 @@ const DropDown = ({
   const onConfirmDelete = useCallback(async () => {
     try {
       await deleteDataset(dataset.id)
-      Toast.notify({ type: 'success', message: t('datasetDeleted', { ns: 'dataset' }) })
+      toast(t('datasetDeleted', { ns: 'dataset' }), { type: 'success' })
       invalidDatasetList()
       replace('/datasets')
     }
diff --git a/web/app/components/app/annotation/add-annotation-modal/index.spec.tsx b/web/app/components/app/annotation/add-annotation-modal/index.spec.tsx
index bad3ceefdf..be6f17b88e 100644
--- a/web/app/components/app/annotation/add-annotation-modal/index.spec.tsx
+++ b/web/app/components/app/annotation/add-annotation-modal/index.spec.tsx
@@ -9,7 +9,7 @@ vi.mock('@/context/provider-context', () => ({
 }))
 
 const mockToastNotify = vi.fn()
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/ui/toast', () => ({
   default: {
     notify: vi.fn(args => mockToastNotify(args)),
   },
diff --git a/web/app/components/app/annotation/add-annotation-modal/index.tsx b/web/app/components/app/annotation/add-annotation-modal/index.tsx
index ca808779c6..28e2c24382 100644
--- a/web/app/components/app/annotation/add-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/add-annotation-modal/index.tsx
@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Checkbox from '@/app/components/base/checkbox'
 import Drawer from '@/app/components/base/drawer-plus'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import AnnotationFull from '@/app/components/billing/annotation-full'
 import { useProviderContext } from '@/context/provider-context'
 import EditItem, { EditItemType } from './edit-item'
@@ -47,10 +47,7 @@ const AddAnnotationModal: FC<Props> = ({
       answer,
     }
     if (isValid(payload) !== true) {
-      Toast.notify({
-        type: 'error',
-        message: isValid(payload) as string,
-      })
+      toast.error(isValid(payload) as string)
       return
     }
 
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 55f5ee0564..603611ba9c 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,11 +1,23 @@
 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/context'
 import CSVUploader from './csv-uploader'
 
 describe('CSVUploader', () => {
   const notify = vi.fn()
+  const mockToast = {
+    success: (message: string, options?: Record<string, unknown>) => notify({ type: 'success', message, ...options }),
+    error: (message: string, options?: Record<string, unknown>) => notify({ type: 'error', message, ...options }),
+    warning: (message: string, options?: Record<string, unknown>) => notify({ type: 'warning', message, ...options }),
+    info: (message: string, options?: Record<string, unknown>) => notify({ type: 'info', message, ...options }),
+    dismiss: vi.fn(),
+    update: vi.fn(),
+    promise: vi.fn(),
+  }
+
+  vi.mock('@/app/components/base/ui/toast', () => ({
+    toast: mockToast,
+  }))
   const updateFile = vi.fn()
 
   const getDropElements = () => {
@@ -24,9 +36,8 @@ describe('CSVUploader', () => {
       ...props,
     }
     return render(
-      <ToastContext.Provider value={{ notify, close: vi.fn() }}>
-        <CSVUploader {...mergedProps} />
-      </ToastContext.Provider>,
+      <CSVUploader {...mergedProps} />,
+
     )
   }
 
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 a969b3d491..0fbd3974aa 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
@@ -4,10 +4,9 @@ import { RiDeleteBinLine } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
 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/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { cn } from '@/utils/classnames'
 
 export type Props = {
@@ -20,7 +19,6 @@ const CSVUploader: FC<Props> = ({
   updateFile,
 }) => {
   const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
   const [dragging, setDragging] = useState(false)
   const dropRef = useRef<HTMLDivElement>(null)
   const dragRef = useRef<HTMLDivElement>(null)
@@ -50,7 +48,7 @@ const CSVUploader: FC<Props> = ({
       return
     const files = Array.from(e.dataTransfer.files)
     if (files.length > 1) {
-      notify({ type: 'error', message: t('stepOne.uploader.validation.count', { ns: 'datasetCreation' }) })
+      toast.error(t('stepOne.uploader.validation.count', { ns: 'datasetCreation' }))
       return
     }
     updateFile(files[0])
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/index.spec.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/index.spec.tsx
index 7fdb99fbab..e65632267c 100644
--- a/web/app/components/app/annotation/batch-add-annotation-modal/index.spec.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/index.spec.tsx
@@ -2,17 +2,10 @@ import type { Mock } from 'vitest'
 import type { IBatchModalProps } from './index'
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
-import Toast from '@/app/components/base/toast'
 import { useProviderContext } from '@/context/provider-context'
 import { annotationBatchImport, checkAnnotationBatchImportProgress } from '@/service/annotation'
 import BatchModal, { ProcessStatus } from './index'
 
-vi.mock('@/app/components/base/toast', () => ({
-  default: {
-    notify: vi.fn(),
-  },
-}))
-
 vi.mock('@/service/annotation', () => ({
   annotationBatchImport: vi.fn(),
   checkAnnotationBatchImportProgress: vi.fn(),
@@ -49,7 +42,7 @@ vi.mock('@/app/components/billing/annotation-full', () => ({
   default: () => <div data-testid="annotation-full" />,
 }))
 
-const mockNotify = Toast.notify as Mock
+const mockNotify = vi.fn()
 const useProviderContextMock = useProviderContext as Mock
 const annotationBatchImportMock = annotationBatchImport as Mock
 const checkAnnotationBatchImportProgressMock = checkAnnotationBatchImportProgress as Mock
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx
index aaa8b6638e..47332e72d6 100644
--- a/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx
@@ -7,7 +7,7 @@ import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import AnnotationFull from '@/app/components/billing/annotation-full'
 import { useProviderContext } from '@/context/provider-context'
 import { annotationBatchImport, checkAnnotationBatchImportProgress } from '@/service/annotation'
@@ -46,7 +46,6 @@ const BatchModal: FC<IBatchModalProps> = ({
   }, [isShow])
 
   const [importStatus, setImportStatus] = useState<ProcessStatus | string>()
-  const notify = Toast.notify
   const checkProcess = async (jobID: string) => {
     try {
       const res = await checkAnnotationBatchImportProgress({ jobID, appId })
@@ -54,15 +53,15 @@ const BatchModal: FC<IBatchModalProps> = ({
       if (res.job_status === ProcessStatus.WAITING || res.job_status === ProcessStatus.PROCESSING)
         setTimeout(() => checkProcess(res.job_id), 2500)
       if (res.job_status === ProcessStatus.ERROR)
-        notify({ type: 'error', message: `${t('batchModal.runError', { ns: 'appAnnotation' })}` })
+        toast.error(`${t('batchModal.runError', { ns: 'appAnnotation' })}`)
       if (res.job_status === ProcessStatus.COMPLETED) {
-        notify({ type: 'success', message: `${t('batchModal.completed', { ns: 'appAnnotation' })}` })
+        toast.success(`${t('batchModal.completed', { ns: 'appAnnotation' })}`)
         onAdded()
         onCancel()
       }
     }
     catch (e: any) {
-      notify({ type: 'error', message: `${t('batchModal.runError', { ns: 'appAnnotation' })}${'message' in e ? `: ${e.message}` : ''}` })
+      toast.error(`${t('batchModal.runError', { ns: 'appAnnotation' })}${'message' in e ? `: ${e.message}` : ''}`)
     }
   }
 
@@ -78,7 +77,7 @@ const BatchModal: FC<IBatchModalProps> = ({
       checkProcess(res.job_id)
     }
     catch (e: any) {
-      notify({ type: 'error', message: `${t('batchModal.runError', { ns: 'appAnnotation' })}${'message' in e ? `: ${e.message}` : ''}` })
+      toast.error(`${t('batchModal.runError', { ns: 'appAnnotation' })}${'message' in e ? `: ${e.message}` : ''}`)
     }
   }
 
diff --git a/web/app/components/app/annotation/edit-annotation-modal/index.spec.tsx b/web/app/components/app/annotation/edit-annotation-modal/index.spec.tsx
index 0bbd1ab67d..8f6dec42cf 100644
--- a/web/app/components/app/annotation/edit-annotation-modal/index.spec.tsx
+++ b/web/app/components/app/annotation/edit-annotation-modal/index.spec.tsx
@@ -1,7 +1,6 @@
-import type { IToastProps, ToastHandle } from '@/app/components/base/toast'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import EditAnnotationModal from './index'
 
 const { mockAddAnnotation, mockEditAnnotation } = vi.hoisted(() => ({
@@ -37,10 +36,8 @@ vi.mock('@/app/components/billing/annotation-full', () => ({
   default: () => <div data-testid="annotation-full" />,
 }))
 
-type ToastNotifyProps = Pick<IToastProps, 'type' | 'size' | 'message' | 'duration' | 'className' | 'customComponent' | 'onClose'>
-type ToastWithNotify = typeof Toast & { notify: (props: ToastNotifyProps) => ToastHandle }
-const toastWithNotify = Toast as unknown as ToastWithNotify
-const toastNotifySpy = vi.spyOn(toastWithNotify, 'notify').mockReturnValue({ clear: vi.fn() })
+const toastSuccessSpy = vi.spyOn(toast, 'success').mockReturnValue('toast-success')
+const toastErrorSpy = vi.spyOn(toast, 'error').mockReturnValue('toast-error')
 
 describe('EditAnnotationModal', () => {
   const defaultProps = {
@@ -55,7 +52,8 @@ describe('EditAnnotationModal', () => {
   }
 
   afterAll(() => {
-    toastNotifySpy.mockRestore()
+    toastSuccessSpy.mockRestore()
+    toastErrorSpy.mockRestore()
   })
 
   beforeEach(() => {
@@ -437,10 +435,7 @@ describe('EditAnnotationModal', () => {
 
       // Assert
       await waitFor(() => {
-        expect(toastNotifySpy).toHaveBeenCalledWith({
-          message: 'API Error',
-          type: 'error',
-        })
+        expect(toastErrorSpy).toHaveBeenCalledWith('API Error')
       })
       expect(mockOnAdded).not.toHaveBeenCalled()
 
@@ -475,10 +470,7 @@ describe('EditAnnotationModal', () => {
 
       // Assert
       await waitFor(() => {
-        expect(toastNotifySpy).toHaveBeenCalledWith({
-          message: 'common.api.actionFailed',
-          type: 'error',
-        })
+        expect(toastErrorSpy).toHaveBeenCalledWith('common.api.actionFailed')
       })
       expect(mockOnAdded).not.toHaveBeenCalled()
 
@@ -517,10 +509,7 @@ describe('EditAnnotationModal', () => {
 
       // Assert
       await waitFor(() => {
-        expect(toastNotifySpy).toHaveBeenCalledWith({
-          message: 'API Error',
-          type: 'error',
-        })
+        expect(toastErrorSpy).toHaveBeenCalledWith('API Error')
       })
       expect(mockOnEdited).not.toHaveBeenCalled()
 
@@ -557,10 +546,7 @@ describe('EditAnnotationModal', () => {
 
       // Assert
       await waitFor(() => {
-        expect(toastNotifySpy).toHaveBeenCalledWith({
-          message: 'common.api.actionFailed',
-          type: 'error',
-        })
+        expect(toastErrorSpy).toHaveBeenCalledWith('common.api.actionFailed')
       })
       expect(mockOnEdited).not.toHaveBeenCalled()
 
@@ -641,10 +627,7 @@ describe('EditAnnotationModal', () => {
 
       // Assert
       await waitFor(() => {
-        expect(toastNotifySpy).toHaveBeenCalledWith({
-          message: 'common.api.actionSuccess',
-          type: 'success',
-        })
+        expect(toastSuccessSpy).toHaveBeenCalledWith('common.api.actionSuccess')
       })
     })
   })
diff --git a/web/app/components/app/annotation/edit-annotation-modal/index.tsx b/web/app/components/app/annotation/edit-annotation-modal/index.tsx
index c8da20a44a..855b827835 100644
--- a/web/app/components/app/annotation/edit-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/edit-annotation-modal/index.tsx
@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next'
 import Confirm from '@/app/components/base/confirm'
 import Drawer from '@/app/components/base/drawer-plus'
 import { MessageCheckRemove } from '@/app/components/base/icons/src/vender/line/communication'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import AnnotationFull from '@/app/components/billing/annotation-full'
 import { useProviderContext } from '@/context/provider-context'
 import useTimestamp from '@/hooks/use-timestamp'
@@ -72,18 +72,12 @@ const EditAnnotationModal: FC<Props> = ({
         onAdded(res.id, res.account?.name ?? '', postQuery, postAnswer)
       }
 
-      Toast.notify({
-        message: t('api.actionSuccess', { ns: 'common' }) as string,
-        type: 'success',
-      })
+      toast.success(t('api.actionSuccess', { ns: 'common' }) as string)
     }
     catch (error) {
       const fallbackMessage = t('api.actionFailed', { ns: 'common' }) as string
       const message = error instanceof Error && error.message ? error.message : fallbackMessage
-      Toast.notify({
-        message,
-        type: 'error',
-      })
+      toast.error(message)
       // Re-throw to preserve edit mode behavior for UI components
       throw error
     }
diff --git a/web/app/components/app/annotation/index.spec.tsx b/web/app/components/app/annotation/index.spec.tsx
index d62b60d33d..5f5e9f74c0 100644
--- a/web/app/components/app/annotation/index.spec.tsx
+++ b/web/app/components/app/annotation/index.spec.tsx
@@ -3,7 +3,7 @@ import type { AnnotationItem } from './type'
 import type { App } from '@/types/app'
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { useProviderContext } from '@/context/provider-context'
 import {
   addAnnotation,
@@ -17,10 +17,6 @@ import { AppModeEnum } from '@/types/app'
 import Annotation from './index'
 import { JobStatus } from './type'
 
-vi.mock('@/app/components/base/toast', () => ({
-  default: { notify: vi.fn() },
-}))
-
 vi.mock('ahooks', () => ({
   useDebounce: (value: any) => value,
 }))
@@ -95,7 +91,23 @@ vi.mock('./view-annotation-modal', () => ({
 vi.mock('@/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal', () => ({ default: (props: any) => props.isShow ? <div data-testid="config-modal" /> : null }))
 vi.mock('@/app/components/billing/annotation-full/modal', () => ({ default: (props: any) => props.show ? <div data-testid="annotation-full-modal" /> : null }))
 
-const mockNotify = Toast.notify as Mock
+const mockNotify = vi.fn()
+vi.spyOn(toast, 'success').mockImplementation((message, options) => {
+  mockNotify({ type: 'success', message, ...options })
+  return 'toast-success-id'
+})
+vi.spyOn(toast, 'error').mockImplementation((message, options) => {
+  mockNotify({ type: 'error', message, ...options })
+  return 'toast-error-id'
+})
+vi.spyOn(toast, 'warning').mockImplementation((message, options) => {
+  mockNotify({ type: 'warning', message, ...options })
+  return 'toast-warning-id'
+})
+vi.spyOn(toast, 'info').mockImplementation((message, options) => {
+  mockNotify({ type: 'info', message, ...options })
+  return 'toast-info-id'
+})
 const addAnnotationMock = addAnnotation as Mock
 const delAnnotationMock = delAnnotation as Mock
 const delAnnotationsMock = delAnnotations as Mock
diff --git a/web/app/components/app/annotation/index.tsx b/web/app/components/app/annotation/index.tsx
index ee276603cc..0ea25744ff 100644
--- a/web/app/components/app/annotation/index.tsx
+++ b/web/app/components/app/annotation/index.tsx
@@ -15,6 +15,7 @@ import { MessageFast } from '@/app/components/base/icons/src/vender/solid/commun
 import Loading from '@/app/components/base/loading'
 import Pagination from '@/app/components/base/pagination'
 import Switch from '@/app/components/base/switch'
+import { toast } from '@/app/components/base/ui/toast'
 import AnnotationFullModal from '@/app/components/billing/annotation-full/modal'
 import { APP_PAGE_LIMIT } from '@/config'
 import { useProviderContext } from '@/context/provider-context'
@@ -22,7 +23,6 @@ import { addAnnotation, delAnnotation, delAnnotations, fetchAnnotationConfig as
 import { AppModeEnum } from '@/types/app'
 import { sleep } from '@/utils'
 import { cn } from '@/utils/classnames'
-import Toast from '../../base/toast'
 import EmptyElement from './empty-element'
 import Filter from './filter'
 import HeaderOpts from './header-opts'
@@ -98,14 +98,14 @@ const Annotation: FC<Props> = (props) => {
 
   const handleAdd = async (payload: AnnotationItemBasic) => {
     await addAnnotation(appDetail.id, payload)
-    Toast.notify({ message: t('api.actionSuccess', { ns: 'common' }), type: 'success' })
+    toast.success(t('api.actionSuccess', { ns: 'common' }))
     fetchList()
     setControlUpdateList(Date.now())
   }
 
   const handleRemove = async (id: string) => {
     await delAnnotation(appDetail.id, id)
-    Toast.notify({ message: t('api.actionSuccess', { ns: 'common' }), type: 'success' })
+    toast.success(t('api.actionSuccess', { ns: 'common' }))
     fetchList()
     setControlUpdateList(Date.now())
   }
@@ -113,13 +113,13 @@ const Annotation: FC<Props> = (props) => {
   const handleBatchDelete = async () => {
     try {
       await delAnnotations(appDetail.id, selectedIds)
-      Toast.notify({ message: t('api.actionSuccess', { ns: 'common' }), type: 'success' })
+      toast.success(t('api.actionSuccess', { ns: 'common' }))
       fetchList()
       setControlUpdateList(Date.now())
       setSelectedIds([])
     }
     catch (e: any) {
-      Toast.notify({ type: 'error', message: e.message || t('api.actionFailed', { ns: 'common' }) })
+      toast.error(e.message || t('api.actionFailed', { ns: 'common' }))
     }
   }
 
@@ -132,7 +132,7 @@ const Annotation: FC<Props> = (props) => {
     if (!currItem)
       return
     await editAnnotation(appDetail.id, currItem.id, { question, answer })
-    Toast.notify({ message: t('api.actionSuccess', { ns: 'common' }), type: 'success' })
+    toast.success(t('api.actionSuccess', { ns: 'common' }))
     fetchList()
     setControlUpdateList(Date.now())
   }
@@ -170,10 +170,7 @@ const Annotation: FC<Props> = (props) => {
                         const { job_id: jobId }: any = await updateAnnotationStatus(appDetail.id, AnnotationEnableStatus.disable, annotationConfig?.embedding_model, annotationConfig?.score_threshold)
                         await ensureJobCompleted(jobId, AnnotationEnableStatus.disable)
                         await fetchAnnotationConfig()
-                        Toast.notify({
-                          message: t('api.actionSuccess', { ns: 'common' }),
-                          type: 'success',
-                        })
+                        toast.success(t('api.actionSuccess', { ns: 'common' }))
                       }
                     }}
                   >
@@ -263,10 +260,7 @@ const Annotation: FC<Props> = (props) => {
                 await updateAnnotationScore(appDetail.id, annotationId, score)
 
               await fetchAnnotationConfig()
-              Toast.notify({
-                message: t('api.actionSuccess', { ns: 'common' }),
-                type: 'success',
-              })
+              toast.success(t('api.actionSuccess', { ns: 'common' }))
               setIsShowEdit(false)
             }}
             annotationConfig={annotationConfig!}
diff --git a/web/app/components/app/app-access-control/access-control.spec.tsx b/web/app/components/app/app-access-control/access-control.spec.tsx
index 3950bdf7ee..289eccebb2 100644
--- a/web/app/components/app/app-access-control/access-control.spec.tsx
+++ b/web/app/components/app/app-access-control/access-control.spec.tsx
@@ -2,9 +2,9 @@ import type { AccessControlAccount, AccessControlGroup, Subject } from '@/models
 import type { App } from '@/types/app'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import { toast } from '@/app/components/base/ui/toast'
 import useAccessControlStore from '@/context/access-control-store'
 import { AccessMode, SubjectType } from '@/models/access-control'
-import Toast from '../../base/toast'
 import AccessControlDialog from './access-control-dialog'
 import AccessControlItem from './access-control-item'
 import AddMemberOrGroupDialog from './add-member-or-group-pop'
@@ -303,7 +303,7 @@ describe('AccessControl', () => {
   it('should initialize menu from app and call update on confirm', async () => {
     const onClose = vi.fn()
     const onConfirm = vi.fn()
-    const toastSpy = vi.spyOn(Toast, 'notify').mockReturnValue({})
+    const toastSpy = vi.spyOn(toast, 'success').mockReturnValue('toast-success')
     useAccessControlStore.setState({
       specificGroups: [baseGroup],
       specificMembers: [baseMember],
@@ -336,7 +336,7 @@ describe('AccessControl', () => {
           { subjectId: baseMember.id, subjectType: SubjectType.ACCOUNT },
         ],
       })
-      expect(toastSpy).toHaveBeenCalled()
+      expect(toastSpy).toHaveBeenCalledWith('app.accessControlDialog.updateSuccess')
       expect(onConfirm).toHaveBeenCalled()
     })
   })
diff --git a/web/app/components/app/app-access-control/index.tsx b/web/app/components/app/app-access-control/index.tsx
index 70f77729ca..316433f41d 100644
--- a/web/app/components/app/app-access-control/index.tsx
+++ b/web/app/components/app/app-access-control/index.tsx
@@ -5,12 +5,12 @@ import { Description as DialogDescription, DialogTitle } from '@headlessui/react
 import { RiBuildingLine, RiGlobalLine, RiVerifiedBadgeLine } from '@remixicon/react'
 import { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
+import { toast } from '@/app/components/base/ui/toast'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { AccessMode, SubjectType } from '@/models/access-control'
 import { useUpdateAccessMode } from '@/service/access-control'
 import useAccessControlStore from '../../../../context/access-control-store'
 import Button from '../../base/button'
-import Toast from '../../base/toast'
 import AccessControlDialog from './access-control-dialog'
 import AccessControlItem from './access-control-item'
 import SpecificGroupsOrMembers, { WebAppSSONotEnabledTip } from './specific-groups-or-members'
@@ -61,7 +61,7 @@ export default function AccessControl(props: AccessControlProps) {
       submitData.subjects = subjects
     }
     await updateAccessMode(submitData)
-    Toast.notify({ type: 'success', message: t('accessControlDialog.updateSuccess', { ns: 'app' }) })
+    toast.success(t('accessControlDialog.updateSuccess', { ns: 'app' }))
     onConfirm?.()
   }, [updateAccessMode, app, specificGroups, specificMembers, t, onConfirm, currentMenu])
   return (
diff --git a/web/app/components/app/app-publisher/index.tsx b/web/app/components/app/app-publisher/index.tsx
index dd988b89df..72d6490fa7 100644
--- a/web/app/components/app/app-publisher/index.tsx
+++ b/web/app/components/app/app-publisher/index.tsx
@@ -28,6 +28,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { toast } from '@/app/components/base/ui/toast'
 import UpgradeBtn from '@/app/components/billing/upgrade-btn'
 import WorkflowToolConfigureButton from '@/app/components/tools/workflow-tool/configure-button'
 import { collaborationManager } from '@/app/components/workflow/collaboration/core/collaboration-manager'
@@ -47,7 +48,6 @@ import { AppModeEnum } from '@/types/app'
 import { basePath } from '@/utils/var'
 import Divider from '../../base/divider'
 import Loading from '../../base/loading'
-import Toast from '../../base/toast'
 import Tooltip from '../../base/tooltip'
 import ShortcutsName from '../../workflow/shortcuts-name'
 import { getKeyboardKeyCodeBySystem } from '../../workflow/utils'
@@ -264,7 +264,7 @@ const AppPublisher = ({
       throw new Error('No app found in Explore')
     }, {
       onError: (err) => {
-        Toast.notify({ type: 'error', message: `${err.message || err}` })
+        toast.error(`${err.message || err}`)
       },
     })
   }, [appDetail?.id, openAsyncWindow])
@@ -290,7 +290,7 @@ const AppPublisher = ({
       window.open(result.redirect_url, '_blank')
     }
     catch (error: any) {
-      Toast.notify({ type: 'error', message: error.message || t('common.publishToMarketplaceFailed', { ns: 'workflow' }) })
+      toast.error(error.message || t('common.publishToMarketplaceFailed', { ns: 'workflow' }))
     }
     finally {
       setPublishingToMarketplace(false)
diff --git a/web/app/components/app/app-publisher/version-info-modal.tsx b/web/app/components/app/app-publisher/version-info-modal.tsx
index 45509d89ec..9713685d90 100644
--- a/web/app/components/app/app-publisher/version-info-modal.tsx
+++ b/web/app/components/app/app-publisher/version-info-modal.tsx
@@ -5,7 +5,7 @@ import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import Button from '../../base/button'
 import Input from '../../base/input'
 import Textarea from '../../base/textarea'
@@ -35,10 +35,7 @@ const VersionInfoModal: FC<VersionInfoModalProps> = ({
   const handlePublish = () => {
     if (title.length > TITLE_MAX_LENGTH) {
       setTitleError(true)
-      Toast.notify({
-        type: 'error',
-        message: t('versionHistory.editField.titleLengthLimit', { ns: 'workflow', limit: TITLE_MAX_LENGTH }),
-      })
+      toast.error(t('versionHistory.editField.titleLengthLimit', { ns: 'workflow', limit: TITLE_MAX_LENGTH }))
       return
     }
     else {
@@ -48,10 +45,7 @@ const VersionInfoModal: FC<VersionInfoModalProps> = ({
 
     if (releaseNotes.length > RELEASE_NOTES_MAX_LENGTH) {
       setReleaseNotesError(true)
-      Toast.notify({
-        type: 'error',
-        message: t('versionHistory.editField.releaseNotesLengthLimit', { ns: 'workflow', limit: RELEASE_NOTES_MAX_LENGTH }),
-      })
+      toast.error(t('versionHistory.editField.releaseNotesLengthLimit', { ns: 'workflow', limit: RELEASE_NOTES_MAX_LENGTH }))
       return
     }
     else {
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 9625204d81..482f61bb82 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,8 +20,12 @@ 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/context'
-import Tooltip from '@/app/components/base/tooltip'
+import { toast } from '@/app/components/base/ui/toast'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/app/components/base/ui/tooltip'
 import ConfigContext from '@/context/debug-configuration'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { useModalContext } from '@/context/modal-context'
@@ -74,7 +78,6 @@ const AdvancedPromptInput: FC<Props> = ({
     showSelectDataSet,
     externalDataToolsConfig,
   } = useContext(ConfigContext)
-  const { notify } = useToastContext()
   const { setShowExternalDataToolModal } = useModalContext()
   const handleOpenExternalDataToolModal = () => {
     setShowExternalDataToolModal({
@@ -94,7 +97,7 @@ const AdvancedPromptInput: FC<Props> = ({
       onValidateBeforeSaveCallback: (newExternalDataTool: ExternalDataTool) => {
         for (let i = 0; i < promptVariables.length; i++) {
           if (promptVariables[i].key === newExternalDataTool.variable) {
-            notify({ type: 'error', message: t('varKeyError.keyAlreadyExists', { ns: 'appDebug', key: promptVariables[i].key }) })
+            toast.error(t('varKeyError.keyAlreadyExists', { ns: 'appDebug', key: promptVariables[i].key }))
             return false
           }
         }
@@ -180,13 +183,18 @@ const AdvancedPromptInput: FC<Props> = ({
                         <div className="text-sm font-semibold uppercase text-indigo-800">
                           {t('pageTitle.line1', { ns: 'appDebug' })}
                         </div>
-                        <Tooltip
-                          popupContent={(
+                        <Tooltip>
+                          <TooltipTrigger
+                            render={(
+                              <span className="i-ri-question-line ml-1 h-4 w-4 shrink-0 text-text-quaternary" />
+                            )}
+                          />
+                          <TooltipContent>
                             <div className="w-[180px]">
                               {t('promptTip', { ns: 'appDebug' })}
                             </div>
-                          )}
-                        />
+                          </TooltipContent>
+                        </Tooltip>
                       </div>
                     )}
                 <div className={cn(s.optionWrap, 'items-center space-x-1')}>
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 39a1699063..bc54e0f16d 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,8 +17,12 @@ 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/context'
-import Tooltip from '@/app/components/base/tooltip'
+import { toast } from '@/app/components/base/ui/toast'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/app/components/base/ui/tooltip'
 import ConfigContext from '@/context/debug-configuration'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { useModalContext } from '@/context/modal-context'
@@ -72,7 +76,6 @@ const Prompt: FC<ISimplePromptInput> = ({
     showSelectDataSet,
     externalDataToolsConfig,
   } = useContext(ConfigContext)
-  const { notify } = useToastContext()
   const { setShowExternalDataToolModal } = useModalContext()
   const handleOpenExternalDataToolModal = () => {
     setShowExternalDataToolModal({
@@ -92,7 +95,7 @@ const Prompt: FC<ISimplePromptInput> = ({
       onValidateBeforeSaveCallback: (newExternalDataTool: ExternalDataTool) => {
         for (let i = 0; i < promptVariables.length; i++) {
           if (promptVariables[i].key === newExternalDataTool.variable) {
-            notify({ type: 'error', message: t('varKeyError.keyAlreadyExists', { ns: 'appDebug', key: promptVariables[i].key }) })
+            toast.error(t('varKeyError.keyAlreadyExists', { ns: 'appDebug', key: promptVariables[i].key }))
             return false
           }
         }
@@ -180,13 +183,18 @@ const Prompt: FC<ISimplePromptInput> = ({
             <div className="flex items-center space-x-1">
               <div className="h2 text-text-secondary system-sm-semibold-uppercase">{mode !== AppModeEnum.COMPLETION ? t('chatSubTitle', { ns: 'appDebug' }) : t('completionSubTitle', { ns: 'appDebug' })}</div>
               {!readonly && (
-                <Tooltip
-                  popupContent={(
+                <Tooltip>
+                  <TooltipTrigger
+                    render={(
+                      <span className="i-ri-question-line ml-1 h-4 w-4 shrink-0 text-text-quaternary" />
+                    )}
+                  />
+                  <TooltipContent>
                     <div className="w-[180px]">
                       {t('promptTip', { ns: 'appDebug' })}
                     </div>
-                  )}
-                />
+                  </TooltipContent>
+                </Tooltip>
               )}
             </div>
             <div className="flex items-center">
diff --git a/web/app/components/app/configuration/config-var/config-modal/index.tsx b/web/app/components/app/configuration/config-var/config-modal/index.tsx
index 2bcdffa44d..c3d31b31d4 100644
--- a/web/app/components/app/configuration/config-var/config-modal/index.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/index.tsx
@@ -15,7 +15,7 @@ import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import { SimpleSelect } from '@/app/components/base/select'
 import Textarea from '@/app/components/base/textarea'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { DEFAULT_FILE_UPLOAD_SETTING } from '@/app/components/workflow/constants'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import FileUploadSetting from '@/app/components/workflow/nodes/_base/components/file-upload-setting'
@@ -98,10 +98,7 @@ const ConfigModal: FC<IConfigModalProps> = ({
   const checkVariableName = useCallback((value: string, canBeEmpty?: boolean) => {
     const { isValid, errorMessageKey } = checkKeys([value], canBeEmpty)
     if (!isValid) {
-      Toast.notify({
-        type: 'error',
-        message: t(`varKeyError.${errorMessageKey}`, { ns: 'appDebug', key: t('variableConfig.varName', { ns: 'appDebug' }) }),
-      })
+      toast.error(t(`varKeyError.${errorMessageKey}`, { ns: 'appDebug', key: t('variableConfig.varName', { ns: 'appDebug' }) }))
       return false
     }
     return true
@@ -221,10 +218,7 @@ const ConfigModal: FC<IConfigModalProps> = ({
     const value = e.target.value
     const { isValid, errorKey, errorMessageKey } = checkKeys([value], true)
     if (!isValid) {
-      Toast.notify({
-        type: 'error',
-        message: t(`varKeyError.${errorMessageKey}`, { ns: 'appDebug', key: errorKey }),
-      })
+      toast.error(t(`varKeyError.${errorMessageKey}`, { ns: 'appDebug', key: errorKey }))
       return
     }
     handlePayloadChange('variable')(e.target.value)
@@ -266,7 +260,7 @@ const ConfigModal: FC<IConfigModalProps> = ({
       return
 
     if (!tempPayload.label) {
-      Toast.notify({ type: 'error', message: t('variableConfig.errorMsg.labelNameRequired', { ns: 'appDebug' }) })
+      toast.error(t('variableConfig.errorMsg.labelNameRequired', { ns: 'appDebug' }))
       return
     }
     if (isStringInput || type === InputVarType.number) {
@@ -274,7 +268,7 @@ const ConfigModal: FC<IConfigModalProps> = ({
     }
     else if (type === InputVarType.select) {
       if (options?.length === 0) {
-        Toast.notify({ type: 'error', message: t('variableConfig.errorMsg.atLeastOneOption', { ns: 'appDebug' }) })
+        toast.error(t('variableConfig.errorMsg.atLeastOneOption', { ns: 'appDebug' }))
         return
       }
       const obj: Record<string, boolean> = {}
@@ -287,7 +281,7 @@ const ConfigModal: FC<IConfigModalProps> = ({
         obj[o] = true
       })
       if (hasRepeatedItem) {
-        Toast.notify({ type: 'error', message: t('variableConfig.errorMsg.optionRepeat', { ns: 'appDebug' }) })
+        toast.error(t('variableConfig.errorMsg.optionRepeat', { ns: 'appDebug' }))
         return
       }
       onConfirm(payloadToSave, moreInfo)
@@ -297,12 +291,12 @@ const ConfigModal: FC<IConfigModalProps> = ({
     )) {
       if (tempPayload.allowed_file_types?.length === 0) {
         const errorMessages = t('errorMsg.fieldRequired', { ns: 'workflow', field: t('variableConfig.file.supportFileTypes', { ns: 'appDebug' }) })
-        Toast.notify({ type: 'error', message: errorMessages })
+        toast.error(errorMessages)
         return
       }
       if (tempPayload.allowed_file_types?.includes(SupportUploadFileTypes.custom) && !tempPayload.allowed_file_extensions?.length) {
         const errorMessages = t('errorMsg.fieldRequired', { ns: 'workflow', field: t('variableConfig.file.custom.name', { ns: 'appDebug' }) })
-        Toast.notify({ type: 'error', message: errorMessages })
+        toast.error(errorMessages)
         return
       }
       onConfirm(payloadToSave, moreInfo)
@@ -312,12 +306,12 @@ const ConfigModal: FC<IConfigModalProps> = ({
         try {
           const schema = JSON.parse(normalizedJsonSchema)
           if (schema?.type !== 'object') {
-            Toast.notify({ type: 'error', message: t('variableConfig.errorMsg.jsonSchemaMustBeObject', { ns: 'appDebug' }) })
+            toast.error(t('variableConfig.errorMsg.jsonSchemaMustBeObject', { ns: 'appDebug' }))
             return
           }
         }
         catch {
-          Toast.notify({ type: 'error', message: t('variableConfig.errorMsg.jsonSchemaInvalid', { ns: 'appDebug' }) })
+          toast.error(t('variableConfig.errorMsg.jsonSchemaInvalid', { ns: 'appDebug' }))
           return
         }
       }
diff --git a/web/app/components/app/configuration/config-var/index.spec.tsx b/web/app/components/app/configuration/config-var/index.spec.tsx
index 096358c805..a48d3233f5 100644
--- a/web/app/components/app/configuration/config-var/index.spec.tsx
+++ b/web/app/components/app/configuration/config-var/index.spec.tsx
@@ -5,13 +5,13 @@ import type { PromptVariable } from '@/models/debug'
 import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import * as React from 'react'
 import { vi } from 'vitest'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import DebugConfigurationContext from '@/context/debug-configuration'
 import { AppModeEnum } from '@/types/app'
 
 import ConfigVar, { ADD_EXTERNAL_DATA_TOOL } from './index'
 
-const notifySpy = vi.spyOn(Toast, 'notify').mockImplementation(vi.fn())
+const toastErrorSpy = vi.spyOn(toast, 'error').mockReturnValue('toast-error')
 
 const setShowExternalDataToolModal = vi.fn()
 
@@ -112,7 +112,7 @@ describe('ConfigVar', () => {
       latestSortableProps = null
       subscriptionCallback = null
       variableIndex = 0
-      notifySpy.mockClear()
+      toastErrorSpy.mockClear()
     })
 
     it('should show empty state when no variables exist', () => {
@@ -152,7 +152,7 @@ describe('ConfigVar', () => {
       latestSortableProps = null
       subscriptionCallback = null
       variableIndex = 0
-      notifySpy.mockClear()
+      toastErrorSpy.mockClear()
     })
 
     it('should add a text variable when selecting the string option', async () => {
@@ -218,7 +218,7 @@ describe('ConfigVar', () => {
       latestSortableProps = null
       subscriptionCallback = null
       variableIndex = 0
-      notifySpy.mockClear()
+      toastErrorSpy.mockClear()
     })
 
     it('should save updates when editing a basic variable', async () => {
@@ -268,7 +268,7 @@ describe('ConfigVar', () => {
 
       fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
 
-      expect(Toast.notify).toHaveBeenCalled()
+      expect(toastErrorSpy).toHaveBeenCalled()
       expect(onPromptVariablesChange).not.toHaveBeenCalled()
     })
 
@@ -294,7 +294,7 @@ describe('ConfigVar', () => {
 
       fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
 
-      expect(Toast.notify).toHaveBeenCalled()
+      expect(toastErrorSpy).toHaveBeenCalled()
       expect(onPromptVariablesChange).not.toHaveBeenCalled()
     })
   })
@@ -306,7 +306,7 @@ describe('ConfigVar', () => {
       latestSortableProps = null
       subscriptionCallback = null
       variableIndex = 0
-      notifySpy.mockClear()
+      toastErrorSpy.mockClear()
     })
 
     it('should remove variable directly when context confirmation is not required', () => {
@@ -359,7 +359,7 @@ describe('ConfigVar', () => {
       latestSortableProps = null
       subscriptionCallback = null
       variableIndex = 0
-      notifySpy.mockClear()
+      toastErrorSpy.mockClear()
     })
 
     it('should append external data tool variables from event emitter', () => {
diff --git a/web/app/components/app/configuration/config-var/index.tsx b/web/app/components/app/configuration/config-var/index.tsx
index 4d9a4e480f..17f5e2efe5 100644
--- a/web/app/components/app/configuration/config-var/index.tsx
+++ b/web/app/components/app/configuration/config-var/index.tsx
@@ -12,8 +12,8 @@ import { useTranslation } from 'react-i18next'
 import { ReactSortable } from 'react-sortablejs'
 import { useContext } from 'use-context-selector'
 import Confirm from '@/app/components/base/confirm'
-import Toast from '@/app/components/base/toast'
 import Tooltip from '@/app/components/base/tooltip'
+import { toast } from '@/app/components/base/ui/toast'
 import { InputVarType } from '@/app/components/workflow/types'
 import ConfigContext from '@/context/debug-configuration'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
@@ -108,10 +108,7 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
     })
     const duplicateError = getDuplicateError(newPromptVariables)
     if (duplicateError) {
-      Toast.notify({
-        type: 'error',
-        message: t(duplicateError.errorMsgKey as I18nKeysByPrefix<'appDebug', 'duplicateError.'>, { ns: 'appDebug', key: t(duplicateError.typeName as I18nKeysByPrefix<'appDebug', 'duplicateError.'>, { ns: 'appDebug' }) }) as string,
-      })
+      toast.error(t(duplicateError.errorMsgKey as I18nKeysByPrefix<'appDebug', 'duplicateError.'>, { ns: 'appDebug', key: t(duplicateError.typeName as I18nKeysByPrefix<'appDebug', 'duplicateError.'>, { ns: 'appDebug' }) }) as string)
       return false
     }
 
@@ -161,7 +158,7 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
       onValidateBeforeSaveCallback: (newExternalDataTool: ExternalDataTool) => {
         for (let i = 0; i < promptVariables.length; i++) {
           if (promptVariables[i].key === newExternalDataTool.variable && i !== index) {
-            Toast.notify({ type: 'error', message: t('varKeyError.keyAlreadyExists', { ns: 'appDebug', key: promptVariables[i].key }) })
+            toast.error(t('varKeyError.keyAlreadyExists', { ns: 'appDebug', key: promptVariables[i].key }))
             return false
           }
         }
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 f719d87261..e807c21518 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/context'
+import { toast } from '@/app/components/base/ui/toast'
 import ConfigContext from '@/context/debug-configuration'
 import { useModalContext } from '@/context/modal-context'
 import { cn } from '@/utils/classnames'
@@ -32,8 +32,6 @@ const Editor: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
 
-  const { notify } = useToastContext()
-
   const [isCopied, setIsCopied] = React.useState(false)
   const {
     modelConfig,
@@ -59,14 +57,14 @@ const Editor: FC<Props> = ({
       onValidateBeforeSaveCallback: (newExternalDataTool: ExternalDataTool) => {
         for (let i = 0; i < promptVariables.length; i++) {
           if (promptVariables[i].key === newExternalDataTool.variable) {
-            notify({ type: 'error', message: t('varKeyError.keyAlreadyExists', { ns: 'appDebug', key: promptVariables[i].key }) })
+            toast.error(t('varKeyError.keyAlreadyExists', { ns: 'appDebug', key: promptVariables[i].key }))
             return false
           }
         }
 
         for (let i = 0; i < externalDataToolsConfig.length; i++) {
           if (externalDataToolsConfig[i].variable === newExternalDataTool.variable) {
-            notify({ type: 'error', message: t('varKeyError.keyAlreadyExists', { ns: 'appDebug', key: externalDataToolsConfig[i].variable }) })
+            toast.error(t('varKeyError.keyAlreadyExists', { ns: 'appDebug', key: externalDataToolsConfig[i].variable }))
             return false
           }
         }
diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index c9cf4e926c..3f713a9317 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -23,9 +23,9 @@ import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import { Generator } from '@/app/components/base/icons/src/vender/other'
 import Loading from '@/app/components/base/loading'
-
 import Modal from '@/app/components/base/modal'
-import Toast from '@/app/components/base/toast'
+
+import { toast } from '@/app/components/base/ui/toast'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 
 import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
@@ -161,13 +161,10 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
 
   const isValid = () => {
     if (instruction.trim() === '') {
-      Toast.notify({
-        type: 'error',
-        message: t('errorMsg.fieldRequired', {
-          ns: 'common',
-          field: t('generate.instruction', { ns: 'appDebug' }),
-        }),
-      })
+      toast.error(t('errorMsg.fieldRequired', {
+        ns: 'common',
+        field: t('generate.instruction', { ns: 'appDebug' }),
+      }))
       return false
     }
     return true
@@ -242,10 +239,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
         } as GenRes
         if (error) {
           hasError = true
-          Toast.notify({
-            type: 'error',
-            message: error,
-          })
+          toast.error(error)
         }
       }
       else {
@@ -260,10 +254,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
         apiRes = res
         if (error) {
           hasError = true
-          Toast.notify({
-            type: 'error',
-            message: error,
-          })
+          toast.error(error)
         }
       }
       if (!hasError)
diff --git a/web/app/components/app/configuration/config/automatic/result.tsx b/web/app/components/app/configuration/config/automatic/result.tsx
index ef82007e51..776d774bd8 100644
--- a/web/app/components/app/configuration/config/automatic/result.tsx
+++ b/web/app/components/app/configuration/config/automatic/result.tsx
@@ -6,7 +6,7 @@ import copy from 'copy-to-clipboard'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import CodeEditor from '@/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor'
 import PromptRes from './prompt-res'
 import PromptResInWorkflow from './prompt-res-in-workflow'
@@ -54,7 +54,7 @@ const Result: FC<Props> = ({
             className="px-2"
             onClick={() => {
               copy(current.modified)
-              Toast.notify({ type: 'success', message: t('actionMsg.copySuccessfully', { ns: 'common' }) })
+              toast.success(t('actionMsg.copySuccessfully', { ns: 'common' }))
             }}
           >
             <RiClipboardLine className="h-4 w-4 text-text-secondary" />
diff --git a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
index b0833969ab..cfd58ac1db 100644
--- a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
+++ b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
@@ -15,7 +15,7 @@ import Confirm from '@/app/components/base/confirm'
 import { Generator } from '@/app/components/base/icons/src/vender/other'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
@@ -90,13 +90,10 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
 
   const isValid = () => {
     if (instruction.trim() === '') {
-      Toast.notify({
-        type: 'error',
-        message: t('errorMsg.fieldRequired', {
-          ns: 'common',
-          field: t('code.instruction', { ns: 'appDebug' }),
-        }),
-      })
+      toast.error(t('errorMsg.fieldRequired', {
+        ns: 'common',
+        field: t('code.instruction', { ns: 'appDebug' }),
+      }))
       return false
     }
     return true
@@ -149,10 +146,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
         res.modified = (res as any).code
 
       if (error) {
-        Toast.notify({
-          type: 'error',
-          message: error,
-        })
+        toast.error(error)
       }
       else {
         addVersion(res)
diff --git a/web/app/components/app/configuration/dataset-config/params-config/config-content.spec.tsx b/web/app/components/app/configuration/dataset-config/params-config/config-content.spec.tsx
index 2cd8418c65..8a53e9a8b0 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/config-content.spec.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/config-content.spec.tsx
@@ -5,7 +5,7 @@ import type { DatasetConfigs } from '@/models/debug'
 import type { RetrievalConfig } from '@/types/app'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import {
   useCurrentProviderAndModel,
   useModelListAndDefaultModelAndCurrentProviderAndModel,
@@ -46,7 +46,7 @@ vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', ()
 const mockedUseModelListAndDefaultModelAndCurrentProviderAndModel = useModelListAndDefaultModelAndCurrentProviderAndModel as MockedFunction<typeof useModelListAndDefaultModelAndCurrentProviderAndModel>
 const mockedUseCurrentProviderAndModel = useCurrentProviderAndModel as MockedFunction<typeof useCurrentProviderAndModel>
 
-let toastNotifySpy: MockInstance
+let toastErrorSpy: MockInstance
 
 const baseRetrievalConfig: RetrievalConfig = {
   search_method: RETRIEVE_METHOD.semantic,
@@ -172,7 +172,7 @@ const createDatasetConfigs = (overrides: Partial<DatasetConfigs> = {}): DatasetC
 describe('ConfigContent', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    toastNotifySpy = vi.spyOn(Toast, 'notify').mockImplementation(() => ({}))
+    toastErrorSpy = vi.spyOn(toast, 'error').mockReturnValue('toast-error')
     mockedUseModelListAndDefaultModelAndCurrentProviderAndModel.mockReturnValue({
       modelList: [],
       defaultModel: undefined,
@@ -186,7 +186,7 @@ describe('ConfigContent', () => {
   })
 
   afterEach(() => {
-    toastNotifySpy.mockRestore()
+    toastErrorSpy.mockRestore()
   })
 
   // State management
@@ -331,10 +331,7 @@ describe('ConfigContent', () => {
       await user.click(screen.getByText('common.modelProvider.rerankModel.key'))
 
       // Assert
-      expect(toastNotifySpy).toHaveBeenCalledWith({
-        type: 'error',
-        message: 'workflow.errorMsg.rerankModelRequired',
-      })
+      expect(toastErrorSpy).toHaveBeenCalledWith('workflow.errorMsg.rerankModelRequired')
       expect(onChange).toHaveBeenCalledWith(
         expect.objectContaining({
           reranking_mode: RerankingModeEnum.RerankingModel,
@@ -373,10 +370,7 @@ describe('ConfigContent', () => {
       await user.click(screen.getByRole('switch'))
 
       // Assert
-      expect(toastNotifySpy).toHaveBeenCalledWith({
-        type: 'error',
-        message: 'workflow.errorMsg.rerankModelRequired',
-      })
+      expect(toastErrorSpy).toHaveBeenCalledWith('workflow.errorMsg.rerankModelRequired')
       expect(onChange).toHaveBeenCalledWith(
         expect.objectContaining({
           reranking_enable: true,
diff --git a/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx b/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
index 6dd03d217e..be0d1d9394 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
@@ -15,8 +15,8 @@ import Divider from '@/app/components/base/divider'
 import ScoreThresholdItem from '@/app/components/base/param-item/score-threshold-item'
 import TopKItem from '@/app/components/base/param-item/top-k-item'
 import Switch from '@/app/components/base/switch'
-import Toast from '@/app/components/base/toast'
 import Tooltip from '@/app/components/base/tooltip'
+import { toast } from '@/app/components/base/ui/toast'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useCurrentProviderAndModel, useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
@@ -136,7 +136,7 @@ const ConfigContent: FC<Props> = ({
       return
 
     if (mode === RerankingModeEnum.RerankingModel && !currentRerankModel)
-      Toast.notify({ type: 'error', message: t('errorMsg.rerankModelRequired', { ns: 'workflow' }) })
+      toast.error(t('errorMsg.rerankModelRequired', { ns: 'workflow' }))
 
     onChange({
       ...datasetConfigs,
@@ -179,7 +179,7 @@ const ConfigContent: FC<Props> = ({
 
   const handleManuallyToggleRerank = useCallback((enable: boolean) => {
     if (!currentRerankModel && enable)
-      Toast.notify({ type: 'error', message: t('errorMsg.rerankModelRequired', { ns: 'workflow' }) })
+      toast.error(t('errorMsg.rerankModelRequired', { ns: 'workflow' }))
     onChange({
       ...datasetConfigs,
       reranking_enable: enable,
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 264e66fd96..1de9437745 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,6 @@ 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/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'
@@ -14,6 +13,19 @@ import { RETRIEVE_METHOD } from '@/types/app'
 import SettingsModal from './index'
 
 const mockNotify = vi.fn()
+const mockToast = {
+  success: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'success', message, ...options }),
+  error: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'error', message, ...options }),
+  warning: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'warning', message, ...options }),
+  info: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'info', message, ...options }),
+  dismiss: vi.fn(),
+  update: vi.fn(),
+  promise: vi.fn(),
+}
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
+}))
 const mockOnCancel = vi.fn()
 const mockOnSave = vi.fn()
 const mockSetShowAccountSettingModal = vi.fn()
@@ -183,13 +195,12 @@ const createDataset = (overrides: Partial<DataSet> = {}, retrievalOverrides: Par
 
 const renderWithProviders = (dataset: DataSet) => {
   return render(
-    <ToastContext.Provider value={{ notify: mockNotify, close: vi.fn() }}>
-      <SettingsModal
-        currentDataset={dataset}
-        onCancel={mockOnCancel}
-        onSave={mockOnSave}
-      />
-    </ToastContext.Provider>,
+    <SettingsModal
+      currentDataset={dataset}
+      onCancel={mockOnCancel}
+      onSave={mockOnSave}
+    />,
+
   )
 }
 
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 4435e1b311..7ec51f4fa5 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/context'
+import { toast } from '@/app/components/base/ui/toast'
 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'
@@ -51,7 +51,6 @@ const SettingsModal: FC<SettingsModalProps> = ({
   const { data: rerankModelList } = useModelList(ModelTypeEnum.rerank)
   const { t } = useTranslation()
   const docLink = useDocLink()
-  const { notify } = useToastContext()
   const ref = useRef(null)
   const isExternal = currentDataset.provider === 'external'
   const { setShowAccountSettingModal } = useModalContext()
@@ -96,7 +95,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
     if (loading)
       return
     if (!localeCurrentDataset.name?.trim()) {
-      notify({ type: 'error', message: t('form.nameError', { ns: 'datasetSettings' }) })
+      toast.error(t('form.nameError', { ns: 'datasetSettings' }))
       return
     }
     if (
@@ -106,7 +105,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
         indexMethod,
       })
     ) {
-      notify({ type: 'error', message: t('datasetConfig.rerankModelRequired', { ns: 'appDebug' }) })
+      toast.error(t('datasetConfig.rerankModelRequired', { ns: 'appDebug' }))
       return
     }
     try {
@@ -146,7 +145,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
         })
       }
       await updateDatasetSetting(requestParams)
-      notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
+      toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
       onSave({
         ...localeCurrentDataset,
         indexing_technique: indexMethod,
@@ -154,7 +153,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
       })
     }
     catch {
-      notify({ type: 'error', message: t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }) })
+      toast.error(t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }))
     }
     finally {
       setLoading(false)
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 a75516a43f..910a8fd2b5 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
@@ -386,13 +386,6 @@ vi.mock('@/context/event-emitter', () => ({
   })),
 }))
 
-// Mock toast context
-vi.mock('@/app/components/base/toast/context', () => ({
-  useToastContext: vi.fn(() => ({
-    notify: vi.fn(),
-  })),
-}))
-
 // Mock hooks/use-timestamp
 vi.mock('@/hooks/use-timestamp', () => ({
   default: vi.fn(() => ({
diff --git a/web/app/components/app/configuration/debug/index.spec.tsx b/web/app/components/app/configuration/debug/index.spec.tsx
index e94695f1ef..6b7d49bb56 100644
--- a/web/app/components/app/configuration/debug/index.spec.tsx
+++ b/web/app/components/app/configuration/debug/index.spec.tsx
@@ -1,7 +1,6 @@
 import type { ComponentProps } from 'react'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
-import { ToastContext } from '@/app/components/base/toast/context'
 import { ModelFeatureEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import ConfigContext from '@/context/debug-configuration'
 import { AppModeEnum, ModelModeType, TransferMethod } from '@/types/app'
@@ -377,6 +376,19 @@ const renderDebug = (options: {
 } = {}) => {
   const onSetting = vi.fn()
   const notify = vi.fn()
+  const mockToast = {
+    success: (message: string, options?: Record<string, unknown>) => notify({ type: 'success', message, ...options }),
+    error: (message: string, options?: Record<string, unknown>) => notify({ type: 'error', message, ...options }),
+    warning: (message: string, options?: Record<string, unknown>) => notify({ type: 'warning', message, ...options }),
+    info: (message: string, options?: Record<string, unknown>) => notify({ type: 'info', message, ...options }),
+    dismiss: vi.fn(),
+    update: vi.fn(),
+    promise: vi.fn(),
+  }
+
+  vi.mock('@/app/components/base/ui/toast', () => ({
+    toast: mockToast,
+  }))
   const props: ComponentProps<typeof Debug> = {
     isAPIKeySet: true,
     onSetting,
@@ -392,11 +404,10 @@ const renderDebug = (options: {
   }
 
   render(
-    <ToastContext.Provider value={{ notify, close: vi.fn() }}>
-      <ConfigContext.Provider value={createContextValue(options.contextValue)}>
-        <Debug {...props} />
-      </ConfigContext.Provider>
-    </ToastContext.Provider>,
+    <ConfigContext.Provider value={createContextValue(options.contextValue)}>
+      <Debug {...props} />
+    </ConfigContext.Provider>,
+
   )
 
   return { onSetting, notify, props }
diff --git a/web/app/components/app/configuration/debug/index.tsx b/web/app/components/app/configuration/debug/index.tsx
index cd07885f0c..36cd4c3445 100644
--- a/web/app/components/app/configuration/debug/index.tsx
+++ b/web/app/components/app/configuration/debug/index.tsx
@@ -29,8 +29,12 @@ 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/context'
-import TooltipPlus from '@/app/components/base/tooltip'
+import { toast } from '@/app/components/base/ui/toast'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/app/components/base/ui/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'
 import { DEFAULT_CHAT_PROMPT_CONFIG, DEFAULT_COMPLETION_PROMPT_CONFIG } from '@/config'
@@ -139,22 +143,20 @@ const Debug: FC<IDebug> = ({
     setIsShowFormattingChangeConfirm(false)
     setFormattingChanged(false)
   }
-
-  const { notify } = useContext(ToastContext)
   const logError = useCallback((message: string) => {
-    notify({ type: 'error', message })
-  }, [notify])
+    toast.error(message)
+  }, [])
   const [completionFiles, setCompletionFiles] = useState<VisionFile[]>([])
 
   const checkCanSend = useCallback(() => {
     if (isAdvancedMode && mode !== AppModeEnum.COMPLETION) {
       if (modelModeType === ModelModeType.completion) {
         if (!hasSetBlockStatus.history) {
-          notify({ type: 'error', message: t('otherError.historyNoBeEmpty', { ns: 'appDebug' }) })
+          toast.error(t('otherError.historyNoBeEmpty', { ns: 'appDebug' }))
           return false
         }
         if (!hasSetBlockStatus.query) {
-          notify({ type: 'error', message: t('otherError.queryNoBeEmpty', { ns: 'appDebug' }) })
+          toast.error(t('otherError.queryNoBeEmpty', { ns: 'appDebug' }))
           return false
         }
       }
@@ -180,7 +182,7 @@ const Debug: FC<IDebug> = ({
     }
 
     if (completionFiles.find(item => item.transfer_method === TransferMethod.local_file && !item.upload_file_id)) {
-      notify({ type: 'info', message: t('errorMessage.waitForFileUpload', { ns: 'appDebug' }) })
+      toast.info(t('errorMessage.waitForFileUpload', { ns: 'appDebug' }))
       return false
     }
     return !hasEmptyInput
@@ -194,7 +196,6 @@ const Debug: FC<IDebug> = ({
     modelConfig.configs.prompt_variables,
     t,
     logError,
-    notify,
     modelModeType,
   ])
 
@@ -205,7 +206,7 @@ const Debug: FC<IDebug> = ({
 
   const sendTextCompletion = async () => {
     if (isResponding) {
-      notify({ type: 'info', message: t('errorMessage.waitForResponse', { ns: 'appDebug' }) })
+      toast.info(t('errorMessage.waitForResponse', { ns: 'appDebug' }))
       return false
     }
 
@@ -420,27 +421,24 @@ const Debug: FC<IDebug> = ({
               <>
                 {
                   !readonly && (
-                    <TooltipPlus
-                      popupContent={t('operation.refresh', { ns: 'common' })}
-                    >
-                      <ActionButton onClick={clearConversation}>
-                        <RefreshCcw01 className="h-4 w-4" />
-                      </ActionButton>
-
-                    </TooltipPlus>
+                    <Tooltip>
+                      <TooltipTrigger render={<ActionButton onClick={clearConversation}><RefreshCcw01 className="h-4 w-4" /></ActionButton>} />
+                      <TooltipContent>
+                        {t('operation.refresh', { ns: 'common' })}
+                      </TooltipContent>
+                    </Tooltip>
                   )
                 }
 
                 {
                   varList.length > 0 && (
                     <div className="relative ml-1 mr-2">
-                      <TooltipPlus
-                        popupContent={t('panel.userInputField', { ns: 'workflow' })}
-                      >
-                        <ActionButton state={expanded ? ActionButtonState.Active : undefined} onClick={() => !readonly && setExpanded(!expanded)}>
-                          <RiEqualizer2Line className="h-4 w-4" />
-                        </ActionButton>
-                      </TooltipPlus>
+                      <Tooltip>
+                        <TooltipTrigger render={<ActionButton state={expanded ? ActionButtonState.Active : undefined} onClick={() => !readonly && setExpanded(!expanded)}><RiEqualizer2Line className="h-4 w-4" /></ActionButton>} />
+                        <TooltipContent>
+                          {t('panel.userInputField', { ns: 'workflow' })}
+                        </TooltipContent>
+                      </Tooltip>
                       {expanded && <div className="absolute bottom-[-14px] right-[5px] z-10 h-3 w-3 rotate-45 border-l-[0.5px] border-t-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg" />}
                     </div>
                   )
diff --git a/web/app/components/app/configuration/index.tsx b/web/app/components/app/configuration/index.tsx
index 6045c7819e..a96d4487f1 100644
--- a/web/app/components/app/configuration/index.tsx
+++ b/web/app/components/app/configuration/index.tsx
@@ -27,7 +27,6 @@ import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
 import { useShallow } from 'zustand/react/shallow'
 import AppPublisher from '@/app/components/app/app-publisher/features-wrapper'
 import Config from '@/app/components/app/configuration/config'
@@ -49,8 +48,7 @@ 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 from '@/app/components/base/toast'
-import { ToastContext } from '@/app/components/base/toast/context'
+import { toast } from '@/app/components/base/ui/toast'
 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 {
@@ -94,7 +92,6 @@ type PublishConfig = {
 
 const Configuration: FC = () => {
   const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
   const { isLoadingCurrentWorkspace, currentWorkspace } = useAppContext()
 
   const { appDetail, showAppConfigureFeaturesModal, setAppSidebarExpand, setShowAppConfigureFeaturesModal } = useAppStore(useShallow(state => ({
@@ -493,11 +490,11 @@ const Configuration: FC = () => {
         isAdvancedMode,
       )
       if (Object.keys(removedDetails).length)
-        Toast.notify({ type: 'warning', message: `${t('modelProvider.parametersInvalidRemoved', { ns: 'common' })}: ${Object.entries(removedDetails).map(([k, reason]) => `${k} (${reason})`).join(', ')}` })
+        toast.warning(`${t('modelProvider.parametersInvalidRemoved', { ns: 'common' })}: ${Object.entries(removedDetails).map(([k, reason]) => `${k} (${reason})`).join(', ')}`)
       setCompletionParams(filtered)
     }
     catch {
-      Toast.notify({ type: 'error', message: t('error', { ns: 'common' }) })
+      toast.error(t('error', { ns: 'common' }))
       setCompletionParams({})
     }
   }
@@ -769,23 +766,23 @@ const Configuration: FC = () => {
     const promptVariables = modelConfig.configs.prompt_variables
 
     if (promptEmpty) {
-      notify({ type: 'error', message: t('otherError.promptNoBeEmpty', { ns: 'appDebug' }) })
+      toast.error(t('otherError.promptNoBeEmpty', { ns: 'appDebug' }))
       return
     }
     if (isAdvancedMode && mode !== AppModeEnum.COMPLETION) {
       if (modelModeType === ModelModeType.completion) {
         if (!hasSetBlockStatus.history) {
-          notify({ type: 'error', message: t('otherError.historyNoBeEmpty', { ns: 'appDebug' }) })
+          toast.error(t('otherError.historyNoBeEmpty', { ns: 'appDebug' }))
           return
         }
         if (!hasSetBlockStatus.query) {
-          notify({ type: 'error', message: t('otherError.queryNoBeEmpty', { ns: 'appDebug' }) })
+          toast.error(t('otherError.queryNoBeEmpty', { ns: 'appDebug' }))
           return
         }
       }
     }
     if (contextVarEmpty) {
-      notify({ type: 'error', message: t('feature.dataSet.queryVariable.contextVarNotEmpty', { ns: 'appDebug' }) })
+      toast.error(t('feature.dataSet.queryVariable.contextVarNotEmpty', { ns: 'appDebug' }))
       return
     }
     const postDatasets = dataSets.map(({ id }) => ({
@@ -851,7 +848,7 @@ const Configuration: FC = () => {
       modelConfig: newModelConfig,
       completionParams,
     })
-    notify({ type: 'success', message: t('api.success', { ns: 'common' }) })
+    toast.success(t('api.success', { ns: 'common' }))
 
     setCanReturnToSimpleMode(false)
     return true
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 dd7a0c6a6c..1c9adca1d1 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
@@ -11,9 +11,9 @@ import Button from '@/app/components/base/button'
 import EmojiPicker from '@/app/components/base/emoji-picker'
 import FormGeneration from '@/app/components/base/features/new-feature-panel/moderation/form-generation'
 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/context'
+import { Dialog, DialogContent } from '@/app/components/base/ui/dialog'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/app/components/base/ui/select'
+import { toast } from '@/app/components/base/ui/toast'
 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'
@@ -39,7 +39,6 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
 }) => {
   const { t } = useTranslation()
   const docLink = useDocLink()
-  const { notify } = useToastContext()
   const locale = useLocale()
   const [localeData, setLocaleData] = useState(data.type ? data : { ...data, type: 'api' })
   const [showEmojiPicker, setShowEmojiPicker] = useState(false)
@@ -133,37 +132,34 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
 
   const handleSave = () => {
     if (!localeData.type) {
-      notify({ type: 'error', message: t('errorMessage.valueOfVarRequired', { ns: 'appDebug', key: t('feature.tools.modal.toolType.title', { ns: 'appDebug' }) }) })
+      toast.error(t('errorMessage.valueOfVarRequired', { ns: 'appDebug', key: t('feature.tools.modal.toolType.title', { ns: 'appDebug' }) }))
       return
     }
 
     if (!localeData.label) {
-      notify({ type: 'error', message: t('errorMessage.valueOfVarRequired', { ns: 'appDebug', key: t('feature.tools.modal.name.title', { ns: 'appDebug' }) }) })
+      toast.error(t('errorMessage.valueOfVarRequired', { ns: 'appDebug', key: t('feature.tools.modal.name.title', { ns: 'appDebug' }) }))
       return
     }
 
     if (!localeData.variable) {
-      notify({ type: 'error', message: t('errorMessage.valueOfVarRequired', { ns: 'appDebug', key: t('feature.tools.modal.variableName.title', { ns: 'appDebug' }) }) })
+      toast.error(t('errorMessage.valueOfVarRequired', { ns: 'appDebug', key: t('feature.tools.modal.variableName.title', { ns: 'appDebug' }) }))
       return
     }
 
     if (localeData.variable && !/^[a-z_]\w{0,29}$/i.test(localeData.variable)) {
-      notify({ type: 'error', message: t('varKeyError.notValid', { ns: 'appDebug', key: t('feature.tools.modal.variableName.title', { ns: 'appDebug' }) }) })
+      toast.error(t('varKeyError.notValid', { ns: 'appDebug', key: t('feature.tools.modal.variableName.title', { ns: 'appDebug' }) }))
       return
     }
 
     if (localeData.type === 'api' && !localeData.config?.api_based_extension_id) {
-      notify({ type: 'error', message: t('errorMessage.valueOfVarRequired', { ns: 'appDebug', key: locale !== LanguagesSupported[1] ? 'API Extension' : 'API 扩展' }) })
+      toast.error(t('errorMessage.valueOfVarRequired', { ns: 'appDebug', key: locale !== LanguagesSupported[1] ? 'API Extension' : 'API 扩展' }))
       return
     }
 
     if (systemTypes.findIndex(t => t === localeData.type) < 0 && currentProvider?.form_schema) {
       for (let i = 0; i < currentProvider.form_schema.length; i++) {
         if (!localeData.config?.[currentProvider.form_schema[i].variable] && currentProvider.form_schema[i].required) {
-          notify({
-            type: 'error',
-            message: t('errorMessage.valueOfVarRequired', { ns: 'appDebug', key: locale !== LanguagesSupported[1] ? currentProvider.form_schema[i].label['en-US'] : currentProvider.form_schema[i].label['zh-Hans'] }),
-          })
+          toast.error(t('errorMessage.valueOfVarRequired', { ns: 'appDebug', key: locale !== LanguagesSupported[1] ? currentProvider.form_schema[i].label['en-US'] : currentProvider.form_schema[i].label['zh-Hans'] }))
           return
         }
       }
@@ -180,122 +176,128 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
   const action = data.type ? t('operation.edit', { ns: 'common' }) : t('operation.add', { ns: 'common' })
 
   return (
-    <Modal
-      isShow
-      onClose={noop}
-      className="!w-[640px] !max-w-none !p-8 !pb-6"
+    <Dialog
+      open
+      onOpenChange={noop}
     >
-      <div className="mb-2 text-xl font-semibold text-text-primary">
-        {`${action} ${t('variableConfig.apiBasedVar', { ns: 'appDebug' })}`}
-      </div>
-      <div className="py-2">
-        <div className="text-sm font-medium leading-9 text-text-primary">
-          {t('apiBasedExtension.type', { ns: 'common' })}
+      <DialogContent className="!w-[640px] !max-w-none !p-8 !pb-6">
+        <div className="mb-2 text-xl font-semibold text-text-primary">
+          {`${action} ${t('variableConfig.apiBasedVar', { ns: 'appDebug' })}`}
         </div>
-        <SimpleSelect
-          defaultValue={localeData.type}
-          items={providers.map((option) => {
-            return {
-              value: option.key,
-              name: option.name,
-            }
-          })}
-          onSelect={item => handleDataTypeChange(item.value as string)}
-        />
-      </div>
-      <div className="py-2">
-        <div className="text-sm font-medium leading-9 text-text-primary">
-          {t('feature.tools.modal.name.title', { ns: 'appDebug' })}
+        <div className="py-2">
+          <div className="text-sm font-medium leading-9 text-text-primary">
+            {t('apiBasedExtension.type', { ns: 'common' })}
+          </div>
+          <Select
+            defaultValue={localeData.type}
+            onValueChange={value => value && handleDataTypeChange(value)}
+          >
+            <SelectTrigger className="w-full" aria-label={t('apiBasedExtension.type', { ns: 'common' })}>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent popupClassName="w-[354px]">
+              {providers.map(option => (
+                <SelectItem key={option.key} value={option.key}>
+                  {option.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </div>
-        <div className="flex items-center">
-          <input
-            value={localeData.label || ''}
-            onChange={e => handleValueChange({ label: e.target.value })}
-            className="mr-2 block h-9 grow appearance-none rounded-lg bg-components-input-bg-normal px-3 text-sm text-components-input-text-filled outline-none"
-            placeholder={t('feature.tools.modal.name.placeholder', { ns: 'appDebug' }) || ''}
-          />
-          <AppIcon
-            size="large"
-            onClick={() => { setShowEmojiPicker(true) }}
-            className="!h-9 !w-9 cursor-pointer rounded-lg border-[0.5px] border-components-panel-border"
-            icon={localeData.icon}
-            background={localeData.icon_background}
-          />
-        </div>
-      </div>
-      <div className="py-2">
-        <div className="text-sm font-medium leading-9 text-text-primary">
-          {t('feature.tools.modal.variableName.title', { ns: 'appDebug' })}
-        </div>
-        <input
-          value={localeData.variable || ''}
-          onChange={e => handleValueChange({ variable: e.target.value })}
-          className="block h-9 w-full appearance-none rounded-lg bg-components-input-bg-normal px-3 text-sm text-components-input-text-filled outline-none"
-          placeholder={t('feature.tools.modal.variableName.placeholder', { ns: 'appDebug' }) || ''}
-        />
-      </div>
-      {
-        localeData.type === 'api' && (
-          <div className="py-2">
-            <div className="flex h-9 items-center justify-between text-sm font-medium text-text-primary">
-              {t('apiBasedExtension.selector.title', { ns: 'common' })}
-              <a
-                href={docLink('/use-dify/workspace/api-extension/api-extension')}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="group flex items-center text-xs font-normal text-text-tertiary hover:text-text-accent"
-              >
-                <BookOpen01 className="mr-1 h-3 w-3 text-text-tertiary group-hover:text-text-accent" />
-                {t('apiBasedExtension.link', { ns: 'common' })}
-              </a>
-            </div>
-            <ApiBasedExtensionSelector
-              value={localeData.config?.api_based_extension_id || ''}
-              onChange={handleDataApiBasedChange}
+        <div className="py-2">
+          <div className="text-sm font-medium leading-9 text-text-primary">
+            {t('feature.tools.modal.name.title', { ns: 'appDebug' })}
+          </div>
+          <div className="flex items-center">
+            <input
+              value={localeData.label || ''}
+              onChange={e => handleValueChange({ label: e.target.value })}
+              className="mr-2 block h-9 grow appearance-none rounded-lg bg-components-input-bg-normal px-3 text-sm text-components-input-text-filled outline-none"
+              placeholder={t('feature.tools.modal.name.placeholder', { ns: 'appDebug' }) || ''}
+            />
+            <AppIcon
+              size="large"
+              onClick={() => { setShowEmojiPicker(true) }}
+              className="!h-9 !w-9 cursor-pointer rounded-lg border-[0.5px] border-components-panel-border"
+              icon={localeData.icon}
+              background={localeData.icon_background}
             />
           </div>
-        )
-      }
-      {
-        systemTypes.findIndex(t => t === localeData.type) < 0
-        && currentProvider?.form_schema
-        && (
-          <FormGeneration
-            forms={currentProvider?.form_schema}
-            value={localeData.config}
-            onChange={handleDataExtraChange}
+        </div>
+        <div className="py-2">
+          <div className="text-sm font-medium leading-9 text-text-primary">
+            {t('feature.tools.modal.variableName.title', { ns: 'appDebug' })}
+          </div>
+          <input
+            value={localeData.variable || ''}
+            onChange={e => handleValueChange({ variable: e.target.value })}
+            className="block h-9 w-full appearance-none rounded-lg bg-components-input-bg-normal px-3 text-sm text-components-input-text-filled outline-none"
+            placeholder={t('feature.tools.modal.variableName.placeholder', { ns: 'appDebug' }) || ''}
           />
-        )
-      }
-      <div className="mt-6 flex items-center justify-end">
-        <Button
-          onClick={onCancel}
-          className="mr-2"
-        >
-          {t('operation.cancel', { ns: 'common' })}
-        </Button>
-        <Button
-          variant="primary"
-          onClick={handleSave}
-        >
-          {t('operation.save', { ns: 'common' })}
-        </Button>
-      </div>
-      {
-        showEmojiPicker && (
-          <EmojiPicker
-            onSelect={(icon, icon_background) => {
-              handleValueChange({ icon, icon_background })
-              setShowEmojiPicker(false)
-            }}
-            onClose={() => {
-              handleValueChange({ icon: '', icon_background: '' })
-              setShowEmojiPicker(false)
-            }}
-          />
-        )
-      }
-    </Modal>
+        </div>
+        {
+          localeData.type === 'api' && (
+            <div className="py-2">
+              <div className="flex h-9 items-center justify-between text-sm font-medium text-text-primary">
+                {t('apiBasedExtension.selector.title', { ns: 'common' })}
+                <a
+                  href={docLink('/use-dify/workspace/api-extension/api-extension')}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="group flex items-center text-xs font-normal text-text-tertiary hover:text-text-accent"
+                >
+                  <BookOpen01 className="mr-1 h-3 w-3 text-text-tertiary group-hover:text-text-accent" />
+                  {t('apiBasedExtension.link', { ns: 'common' })}
+                </a>
+              </div>
+              <ApiBasedExtensionSelector
+                value={localeData.config?.api_based_extension_id || ''}
+                onChange={handleDataApiBasedChange}
+              />
+            </div>
+          )
+        }
+        {
+          systemTypes.findIndex(t => t === localeData.type) < 0
+          && currentProvider?.form_schema
+          && (
+            <FormGeneration
+              forms={currentProvider?.form_schema}
+              value={localeData.config}
+              onChange={handleDataExtraChange}
+            />
+          )
+        }
+        <div className="mt-6 flex items-center justify-end">
+          <Button
+            onClick={onCancel}
+            className="mr-2"
+          >
+            {t('operation.cancel', { ns: 'common' })}
+          </Button>
+          <Button
+            variant="primary"
+            onClick={handleSave}
+          >
+            {t('operation.save', { ns: 'common' })}
+          </Button>
+        </div>
+        {
+          showEmojiPicker && (
+            <EmojiPicker
+              onSelect={(icon, icon_background) => {
+                handleValueChange({ icon, icon_background })
+                setShowEmojiPicker(false)
+              }}
+              onClose={() => {
+                handleValueChange({ icon: '', icon_background: '' })
+                setShowEmojiPicker(false)
+              }}
+            />
+          )
+        }
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/web/app/components/app/configuration/tools/index.tsx b/web/app/components/app/configuration/tools/index.tsx
index 51a9e87a97..8ab71c73cf 100644
--- a/web/app/components/app/configuration/tools/index.tsx
+++ b/web/app/components/app/configuration/tools/index.tsx
@@ -5,7 +5,6 @@ import {
   RiDeleteBinLine,
 } from '@remixicon/react'
 import copy from 'copy-to-clipboard'
-// abandoned
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
@@ -15,14 +14,17 @@ 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/context'
-import Tooltip from '@/app/components/base/tooltip'
+import { toast } from '@/app/components/base/ui/toast'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/app/components/base/ui/tooltip'
 import ConfigContext from '@/context/debug-configuration'
 import { useModalContext } from '@/context/modal-context'
 
 const Tools = () => {
   const { t } = useTranslation()
-  const { notify } = useToastContext()
   const { setShowExternalDataToolModal } = useModalContext()
   const {
     externalDataToolsConfig,
@@ -48,7 +50,7 @@ const Tools = () => {
     const promptVariables = modelConfig?.configs?.prompt_variables || []
     for (let i = 0; i < promptVariables.length; i++) {
       if (promptVariables[i].key === newExternalDataTool.variable) {
-        notify({ type: 'error', message: t('varKeyError.keyAlreadyExists', { ns: 'appDebug', key: promptVariables[i].key }) })
+        toast.error(t('varKeyError.keyAlreadyExists', { ns: 'appDebug', key: promptVariables[i].key }))
         return false
       }
     }
@@ -66,7 +68,7 @@ const Tools = () => {
 
     for (let i = 0; i < existedExternalDataTools.length; i++) {
       if (existedExternalDataTools[i].variable === newExternalDataTool.variable) {
-        notify({ type: 'error', message: t('varKeyError.keyAlreadyExists', { ns: 'appDebug', key: existedExternalDataTools[i].variable }) })
+        toast.error(t('varKeyError.keyAlreadyExists', { ns: 'appDebug', key: existedExternalDataTools[i].variable }))
         return false
       }
     }
@@ -110,13 +112,14 @@ const Tools = () => {
           <div className="mr-1 text-sm font-semibold text-gray-800">
             {t('feature.tools.title', { ns: 'appDebug' })}
           </div>
-          <Tooltip
-            popupContent={(
+          <Tooltip>
+            <TooltipTrigger render={<span className="i-ri-question-line ml-1 h-4 w-4 shrink-0 text-text-quaternary" />} />
+            <TooltipContent>
               <div className="max-w-[160px]">
                 {t('feature.tools.tips', { ns: 'appDebug' })}
               </div>
-            )}
-          />
+            </TooltipContent>
+          </Tooltip>
         </div>
         {
           !expanded && !!externalDataToolsConfig.length && (
@@ -151,18 +154,23 @@ const Tools = () => {
                       background={item.icon_background}
                     />
                     <div className="mr-2 text-[13px] font-medium text-gray-800">{item.label}</div>
-                    <Tooltip
-                      popupContent={copied ? t('copied', { ns: 'appApi' }) : `${item.variable}, ${t('copy', { ns: 'appApi' })}`}
-                    >
-                      <div
-                        className="text-xs text-gray-500"
-                        onClick={() => {
-                          copy(item.variable || '')
-                          setCopied(true)
-                        }}
-                      >
-                        {item.variable}
-                      </div>
+                    <Tooltip>
+                      <TooltipTrigger
+                        render={(
+                          <div
+                            className="text-xs text-gray-500"
+                            onClick={() => {
+                              copy(item.variable || '')
+                              setCopied(true)
+                            }}
+                          >
+                            {item.variable}
+                          </div>
+                        )}
+                      />
+                      <TooltipContent>
+                        {copied ? t('copied', { ns: 'appApi' }) : `${item.variable}, ${t('copy', { ns: 'appApi' })}`}
+                      </TooltipContent>
                     </Tooltip>
                   </div>
                   <div
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 ff6a697e83..5a9028334c 100644
--- a/web/app/components/app/create-app-modal/index.spec.tsx
+++ b/web/app/components/app/create-app-modal/index.spec.tsx
@@ -2,7 +2,6 @@ import type { App } from '@/types/app'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
 import { trackEvent } from '@/app/components/base/amplitude'
-import { ToastContext } from '@/app/components/base/toast/context'
 import { MARKETPLACE_URL_PREFIX, NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
@@ -57,6 +56,19 @@ vi.mock('@/hooks/use-theme', () => ({
   default: () => ({ theme: 'light' }),
 }))
 
+const mockToast = {
+  success: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'success', message, ...options }),
+  error: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'error', message, ...options }),
+  warning: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'warning', message, ...options }),
+  info: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'info', message, ...options }),
+  dismiss: vi.fn(),
+  update: vi.fn(),
+  promise: vi.fn(),
+}
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
+}))
 const mockUseRouter = vi.mocked(useRouter)
 const mockPush = vi.fn()
 const mockCreateApp = vi.mocked(createApp)
@@ -79,9 +91,8 @@ const renderModal = () => {
   const onClose = vi.fn()
   const onSuccess = vi.fn()
   render(
-    <ToastContext.Provider value={{ notify: mockNotify, close: vi.fn() }}>
-      <CreateAppModal show onClose={onClose} onSuccess={onSuccess} defaultAppMode={AppModeEnum.ADVANCED_CHAT} />
-    </ToastContext.Provider>,
+    <CreateAppModal show onClose={onClose} onSuccess={onSuccess} defaultAppMode={AppModeEnum.ADVANCED_CHAT} />,
+
   )
   return { onClose, onSuccess }
 }
diff --git a/web/app/components/app/create-app-modal/index.tsx b/web/app/components/app/create-app-modal/index.tsx
index d7438d8c32..6cca4ae4a7 100644
--- a/web/app/components/app/create-app-modal/index.tsx
+++ b/web/app/components/app/create-app-modal/index.tsx
@@ -6,8 +6,8 @@ import { RiArrowRightLine, RiArrowRightSLine, RiExchange2Fill } from '@remixicon
 import { useDebounceFn, useKeyPress } from 'ahooks'
 import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-
 import { trackEvent } from '@/app/components/base/amplitude'
+
 import AppIcon from '@/app/components/base/app-icon'
 import Badge from '@/app/components/base/badge'
 import Button from '@/app/components/base/button'
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 d626acf8c4..7d057334ba 100644
--- a/web/app/components/app/create-from-dsl-modal/index.tsx
+++ b/web/app/components/app/create-from-dsl-modal/index.tsx
@@ -2,15 +2,13 @@
 
 import type { DocPathWithoutLang } from '@/types/doc-paths'
 import { useKeyPress } from 'ahooks'
-import { noop } from 'es-toolkit/function'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
 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/context'
+import { Dialog, DialogContent } from '@/app/components/base/ui/dialog'
+import { toast } from '@/app/components/base/ui/toast'
 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'
@@ -58,7 +56,6 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
   const { push } = useRouter()
   const { t } = useTranslation()
   const docLink = useDocLink()
-  const { notify } = useContext(ToastContext)
   const [currentFile, setDSLFile] = useState<File | undefined>(droppedFile)
   const [fileContent, setFileContent] = useState<string>()
   const [currentTab, setCurrentTab] = useState(activeTab)
@@ -152,11 +149,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
         if (onClose)
           onClose()
 
-        notify({
-          type: status === DSLImportStatus.COMPLETED ? 'success' : 'warning',
-          message: t(status === DSLImportStatus.COMPLETED ? 'newApp.appCreated' : 'newApp.caution', { ns: 'app' }),
-          children: status === DSLImportStatus.COMPLETED_WITH_WARNINGS && t('newApp.appCreateDSLWarning', { ns: 'app' }),
-        })
+        toast(t(status === DSLImportStatus.COMPLETED ? 'newApp.appCreated' : 'newApp.caution', { ns: 'app' }), { type: status === DSLImportStatus.COMPLETED ? 'success' : 'warning', description: status === DSLImportStatus.COMPLETED_WITH_WARNINGS && t('newApp.appCreateDSLWarning', { ns: 'app' }) })
         localStorage.setItem(NEED_REFRESH_APP_LIST_KEY, '1')
         if (app_id)
           await handleCheckPluginDependencies(app_id)
@@ -173,12 +166,12 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
         setImportId(id)
       }
       else {
-        notify({ type: 'error', message: t('newApp.appCreateFailed', { ns: 'app' }) })
+        toast.error(t('newApp.appCreateFailed', { ns: 'app' }))
       }
     }
     // eslint-disable-next-line unused-imports/no-unused-vars
     catch (e) {
-      notify({ type: 'error', message: t('newApp.appCreateFailed', { ns: 'app' }) })
+      toast.error(t('newApp.appCreateFailed', { ns: 'app' }))
     }
     finally {
       isCreatingRef.current = false
@@ -213,22 +206,19 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
         if (onClose)
           onClose()
 
-        notify({
-          type: 'success',
-          message: t('newApp.appCreated', { ns: 'app' }),
-        })
+        toast.success(t('newApp.appCreated', { ns: 'app' }))
         if (app_id)
           await handleCheckPluginDependencies(app_id)
         localStorage.setItem(NEED_REFRESH_APP_LIST_KEY, '1')
         getRedirection(isCurrentWorkspaceEditor, { id: app_id!, mode: app_mode }, push)
       }
       else if (status === DSLImportStatus.FAILED) {
-        notify({ type: 'error', message: t('newApp.appCreateFailed', { ns: 'app' }) })
+        toast.error(t('newApp.appCreateFailed', { ns: 'app' }))
       }
     }
     // eslint-disable-next-line unused-imports/no-unused-vars
     catch (e) {
-      notify({ type: 'error', message: t('newApp.appCreateFailed', { ns: 'app' }) })
+      toast.error(t('newApp.appCreateFailed', { ns: 'app' }))
     }
   }
 
@@ -265,94 +255,98 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
 
   return (
     <>
-      <Modal
-        className="w-[520px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0 shadow-xl"
-        isShow={show}
-        onClose={noop}
+      <Dialog
+        open={show}
+        onOpenChange={(open) => {
+          if (!open)
+            onClose()
+        }}
       >
-        <div className="flex items-center justify-between pb-3 pl-6 pr-5 pt-6 text-text-primary title-2xl-semi-bold">
-          {t('importApp', { ns: 'app' })}
-          <div
-            className="flex h-8 w-8 cursor-pointer items-center justify-center"
-            onClick={() => onClose()}
-          >
-            <span className="i-ri-close-line h-[18px] w-[18px] text-text-tertiary" aria-hidden="true" />
+        <DialogContent className="w-[520px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0 shadow-xl">
+          <div className="flex items-center justify-between pb-3 pl-6 pr-5 pt-6 text-text-primary title-2xl-semi-bold">
+            {t('importApp', { ns: 'app' })}
+            <div
+              className="flex h-8 w-8 cursor-pointer items-center justify-center"
+              onClick={() => onClose()}
+            >
+              <span className="i-ri-close-line h-[18px] w-[18px] text-text-tertiary" aria-hidden="true" />
+            </div>
           </div>
-        </div>
-        <div className="flex h-9 items-center space-x-6 border-b border-divider-subtle px-6 text-text-tertiary system-md-semibold">
-          {
-            tabs.map(tab => (
-              <div
-                key={tab.key}
-                className={cn(
-                  'relative flex h-full cursor-pointer items-center',
-                  currentTab === tab.key && 'text-text-primary',
-                )}
-                onClick={() => setCurrentTab(tab.key)}
-              >
-                {tab.label}
-                {currentTab === tab.key && (
-                  <div className="absolute bottom-0 h-[2px] w-full bg-util-colors-blue-brand-blue-brand-600"></div>
-                )}
-              </div>
-            ))
-          }
-        </div>
-        <div className="px-6 py-4">
-          {currentTab === CreateFromDSLModalTab.FROM_FILE && (
-            <Uploader
-              className="mt-0"
-              file={currentFile}
-              updateFile={handleFile}
-              accept=".yaml,.yml,.zip"
-              displayName={isZipFile(currentFile) ? 'ZIP' : 'YAML'}
-            />
-          )}
-          {currentTab === CreateFromDSLModalTab.FROM_URL && (
-            <div>
-              <div className="mb-1 text-text-secondary system-md-semibold">
-                {t('importFromDSLUrl', { ns: 'app' })}
-              </div>
-              <Input
-                placeholder={t('importFromDSLUrlPlaceholder', { ns: 'app' }) || ''}
-                value={dslUrlValue}
-                onChange={e => setDslUrlValue(e.target.value)}
+          <div className="flex h-9 items-center space-x-6 border-b border-divider-subtle px-6 text-text-tertiary system-md-semibold">
+            {
+              tabs.map(tab => (
+                <div
+                  key={tab.key}
+                  className={cn(
+                    'relative flex h-full cursor-pointer items-center',
+                    currentTab === tab.key && 'text-text-primary',
+                  )}
+                  onClick={() => setCurrentTab(tab.key)}
+                >
+                  {tab.label}
+                  {currentTab === tab.key && (
+                    <div className="absolute bottom-0 h-[2px] w-full bg-util-colors-blue-brand-blue-brand-600"></div>
+                  )}
+                </div>
+              ))
+            }
+          </div>
+          <div className="px-6 py-4">
+            {currentTab === CreateFromDSLModalTab.FROM_FILE && (
+              <Uploader
+                className="mt-0"
+                file={currentFile}
+                updateFile={handleFile}
+                accept=".yaml,.yml,.zip"
+                displayName={isZipFile(currentFile) ? 'ZIP' : 'YAML'}
               />
+            )}
+            {currentTab === CreateFromDSLModalTab.FROM_URL && (
+              <div>
+                <div className="mb-1 text-text-secondary system-md-semibold">
+                  {t('importFromDSLUrl', { ns: 'app' })}
+                </div>
+                <Input
+                  placeholder={t('importFromDSLUrlPlaceholder', { ns: 'app' }) || ''}
+                  value={dslUrlValue}
+                  onChange={e => setDslUrlValue(e.target.value)}
+                />
+              </div>
+            )}
+          </div>
+          {isAppsFull && (
+            <div className="px-6">
+              <AppsFull className="mt-0" loc="app-create-dsl" />
             </div>
           )}
-        </div>
-        {isAppsFull && (
-          <div className="px-6">
-            <AppsFull className="mt-0" loc="app-create-dsl" />
-          </div>
-        )}
-        <div className="flex items-center justify-between px-6 pb-6 pt-5">
-          <a
-            className="flex items-center gap-1 text-text-accent system-xs-regular"
-            href={docLink('/use-dify/workspace/app-management#app-export-and-import', appManagementLocalizedPathMap)}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            {learnMoreLabel}
-            <span className="i-ri-external-link-line h-[12px] w-[12px]" aria-hidden="true" />
-          </a>
-          <div className="flex items-center gap-3">
-            <Button variant="secondary" onClick={onClose}>
-              {t('newApp.Cancel', { ns: 'app' })}
-            </Button>
-            <Button
-              disabled={buttonDisabled || isCreating}
-              variant="primary"
-              onClick={onCreate}
-              className="gap-1"
-              loading={isCreating}
+          <div className="flex items-center justify-between px-6 pb-6 pt-5">
+            <a
+              className="flex items-center gap-1 text-text-accent system-xs-regular"
+              href={docLink('/use-dify/workspace/app-management#app-export-and-import', appManagementLocalizedPathMap)}
+              target="_blank"
+              rel="noopener noreferrer"
             >
-              <span>{t('newApp.import', { ns: 'app' })}</span>
-              <ShortcutsName keys={['ctrl', '↵']} bgColor="white" />
-            </Button>
+              {learnMoreLabel}
+              <span className="i-ri-external-link-line h-[12px] w-[12px]" aria-hidden="true" />
+            </a>
+            <div className="flex items-center gap-3">
+              <Button variant="secondary" onClick={onClose}>
+                {t('newApp.Cancel', { ns: 'app' })}
+              </Button>
+              <Button
+                disabled={buttonDisabled || isCreating}
+                variant="primary"
+                onClick={onCreate}
+                className="gap-1"
+                loading={isCreating}
+              >
+                <span>{t('newApp.import', { ns: 'app' })}</span>
+                <ShortcutsName keys={['ctrl', '↵']} bgColor="white" />
+              </Button>
+            </div>
           </div>
-        </div>
-      </Modal>
+        </DialogContent>
+      </Dialog>
       {showErrorModal && (
         <DSLConfirmModal
           file={currentFile}
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 677c671980..97d4cafc44 100644
--- a/web/app/components/app/create-from-dsl-modal/uploader.tsx
+++ b/web/app/components/app/create-from-dsl-modal/uploader.tsx
@@ -7,10 +7,9 @@ import {
 import * as React from 'react'
 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 { Yaml as YamlIcon } from '@/app/components/base/icons/src/public/files'
-import { ToastContext } from '@/app/components/base/toast/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { cn } from '@/utils/classnames'
 import { formatFileSize } from '@/utils/format'
 
@@ -30,7 +29,6 @@ const Uploader: FC<Props> = ({
   displayName = 'YAML',
 }) => {
   const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
   const [dragging, setDragging] = useState(false)
   const dropRef = useRef<HTMLDivElement>(null)
   const dragRef = useRef<HTMLDivElement>(null)
@@ -60,7 +58,7 @@ const Uploader: FC<Props> = ({
       return
     const files = Array.from(e.dataTransfer.files)
     if (files.length > 1) {
-      notify({ type: 'error', message: t('stepOne.uploader.validation.count', { ns: 'datasetCreation' }) })
+      toast.error(t('stepOne.uploader.validation.count', { ns: 'datasetCreation' }))
       return
     }
     updateFile(files[0])
diff --git a/web/app/components/app/duplicate-modal/index.spec.tsx b/web/app/components/app/duplicate-modal/index.spec.tsx
index ef12646571..e70329a105 100644
--- a/web/app/components/app/duplicate-modal/index.spec.tsx
+++ b/web/app/components/app/duplicate-modal/index.spec.tsx
@@ -2,7 +2,7 @@ import type { ProviderContextState } from '@/context/provider-context'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { Plan } from '@/app/components/billing/type'
 import { baseProviderContextValue } from '@/context/provider-context'
 import DuplicateAppModal from './index'
@@ -129,7 +129,7 @@ describe('DuplicateAppModal', () => {
 
     it('should show error toast when name is empty', async () => {
       const user = userEvent.setup()
-      const toastSpy = vi.spyOn(Toast, 'notify')
+      const toastSpy = vi.spyOn(toast, 'error').mockReturnValue('toast-error')
       // Arrange
       const { onConfirm, onHide } = renderComponent()
 
@@ -138,7 +138,7 @@ describe('DuplicateAppModal', () => {
       await user.click(screen.getByRole('button', { name: 'app.duplicate' }))
 
       // Assert
-      expect(toastSpy).toHaveBeenCalledWith({ type: 'error', message: 'explore.appCustomize.nameRequired' })
+      expect(toastSpy).toHaveBeenCalledWith('explore.appCustomize.nameRequired')
       expect(onConfirm).not.toHaveBeenCalled()
       expect(onHide).not.toHaveBeenCalled()
     })
diff --git a/web/app/components/app/duplicate-modal/index.tsx b/web/app/components/app/duplicate-modal/index.tsx
index a698c6664e..e74c6e1865 100644
--- a/web/app/components/app/duplicate-modal/index.tsx
+++ b/web/app/components/app/duplicate-modal/index.tsx
@@ -9,7 +9,7 @@ import AppIcon from '@/app/components/base/app-icon'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { useProviderContext } from '@/context/provider-context'
 import { cn } from '@/utils/classnames'
@@ -57,7 +57,7 @@ const DuplicateAppModal = ({
 
   const submit = () => {
     if (!name.trim()) {
-      Toast.notify({ type: 'error', message: t('appCustomize.nameRequired', { ns: 'explore' }) })
+      toast.error(t('appCustomize.nameRequired', { ns: 'explore' }))
       return
     }
     onConfirm({
diff --git a/web/app/components/app/log/list.tsx b/web/app/components/app/log/list.tsx
index 453c7c9d4c..4a22a0c85f 100644
--- a/web/app/components/app/log/list.tsx
+++ b/web/app/components/app/log/list.tsx
@@ -30,8 +30,8 @@ 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/context'
 import Tooltip from '@/app/components/base/tooltip'
+import { toast } from '@/app/components/base/ui/toast'
 import { addFileInfos, sortAgentSorts } from '@/app/components/tools/utils'
 import { WorkflowContextProvider } from '@/app/components/workflow/context'
 import { useAppContext } from '@/context/app-context'
@@ -223,7 +223,6 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
   const { userProfile: { timezone } } = useAppContext()
   const { formatTime } = useTimestamp()
   const { onClose, appDetail } = useContext(DrawerContext)
-  const { notify } = useContext(ToastContext)
   const { currentLogItem, setCurrentLogItem, showMessageLogModal, setShowMessageLogModal, showPromptLogModal, setShowPromptLogModal, currentLogModalActiveTab } = useAppStore(useShallow((state: AppStoreState) => ({
     currentLogItem: state.currentLogItem,
     setCurrentLogItem: state.setCurrentLogItem,
@@ -413,14 +412,14 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
         return item
       }))
 
-      notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
+      toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
       return true
     }
     catch {
-      notify({ type: 'error', message: t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }) })
+      toast.error(t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }))
       return false
     }
-  }, [allChatItems, appDetail?.id, notify, t])
+  }, [allChatItems, appDetail?.id, t])
 
   const fetchInitiated = useRef(false)
 
@@ -734,7 +733,6 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
 const CompletionConversationDetailComp: FC<{ appId?: string, conversationId?: string }> = ({ appId, conversationId }) => {
   // Text Generator App Session Details Including Message List
   const { data: conversationDetail, refetch: conversationDetailMutate } = useCompletionConversationDetail(appId, conversationId)
-  const { notify } = useContext(ToastContext)
   const { t } = useTranslation()
 
   const handleFeedback = async (mid: string, { rating, content }: FeedbackType): Promise<boolean> => {
@@ -744,11 +742,11 @@ const CompletionConversationDetailComp: FC<{ appId?: string, conversationId?: st
         body: { message_id: mid, rating, content: content ?? undefined },
       })
       conversationDetailMutate()
-      notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
+      toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
       return true
     }
     catch {
-      notify({ type: 'error', message: t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }) })
+      toast.error(t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }))
       return false
     }
   }
@@ -757,11 +755,11 @@ const CompletionConversationDetailComp: FC<{ appId?: string, conversationId?: st
     try {
       await updateLogMessageAnnotations({ url: `/apps/${appId}/annotations`, body: { message_id: mid, content: value } })
       conversationDetailMutate()
-      notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
+      toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
       return true
     }
     catch {
-      notify({ type: 'error', message: t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }) })
+      toast.error(t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }))
       return false
     }
   }
@@ -783,7 +781,6 @@ const CompletionConversationDetailComp: FC<{ appId?: string, conversationId?: st
  */
 const ChatConversationDetailComp: FC<{ appId?: string, conversationId?: string }> = ({ appId, conversationId }) => {
   const { data: conversationDetail } = useChatConversationDetail(appId, conversationId)
-  const { notify } = useContext(ToastContext)
   const { t } = useTranslation()
 
   const handleFeedback = async (mid: string, { rating, content }: FeedbackType): Promise<boolean> => {
@@ -792,11 +789,11 @@ const ChatConversationDetailComp: FC<{ appId?: string, conversationId?: string }
         url: `/apps/${appId}/feedbacks`,
         body: { message_id: mid, rating, content: content ?? undefined },
       })
-      notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
+      toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
       return true
     }
     catch {
-      notify({ type: 'error', message: t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }) })
+      toast.error(t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }))
       return false
     }
   }
@@ -804,11 +801,11 @@ const ChatConversationDetailComp: FC<{ appId?: string, conversationId?: string }
   const handleAnnotation = async (mid: string, value: string): Promise<boolean> => {
     try {
       await updateLogMessageAnnotations({ url: `/apps/${appId}/annotations`, body: { message_id: mid, content: value } })
-      notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
+      toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
       return true
     }
     catch {
-      notify({ type: 'error', message: t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }) })
+      toast.error(t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }))
       return false
     }
   }
diff --git a/web/app/components/app/overview/settings/index.spec.tsx b/web/app/components/app/overview/settings/index.spec.tsx
index b849b4f015..95259e72e0 100644
--- a/web/app/components/app/overview/settings/index.spec.tsx
+++ b/web/app/components/app/overview/settings/index.spec.tsx
@@ -33,6 +33,19 @@ vi.mock('react-i18next', async () => {
 })
 
 const mockNotify = vi.fn()
+const mockToast = {
+  success: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'success', message, ...options }),
+  error: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'error', message, ...options }),
+  warning: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'warning', message, ...options }),
+  info: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'info', message, ...options }),
+  dismiss: vi.fn(),
+  update: vi.fn(),
+  promise: vi.fn(),
+}
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
+}))
 const mockOnClose = vi.fn()
 const mockOnSave = vi.fn()
 const mockSetShowPricingModal = vi.fn()
@@ -59,13 +72,6 @@ vi.mock('@/context/modal-context', () => ({
   useModalContext: () => buildModalContext(),
 }))
 
-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')
   return {
diff --git a/web/app/components/app/overview/settings/index.tsx b/web/app/components/app/overview/settings/index.tsx
index 13dacde424..0d77d32ec4 100644
--- a/web/app/components/app/overview/settings/index.tsx
+++ b/web/app/components/app/overview/settings/index.tsx
@@ -19,8 +19,8 @@ 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/context'
 import Tooltip from '@/app/components/base/tooltip'
+import { toast } from '@/app/components/base/ui/toast'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
@@ -65,7 +65,6 @@ const SettingsModal: FC<ISettingsModalProps> = ({
   onClose,
   onSave,
 }) => {
-  const { notify } = useToastContext()
   const [isShowMore, setIsShowMore] = useState(false)
   const {
     title,
@@ -159,7 +158,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
 
   const onClickSave = async () => {
     if (!inputInfo.title) {
-      notify({ type: 'error', message: t('newApp.nameNotEmpty', { ns: 'app' }) })
+      toast.error(t('newApp.nameNotEmpty', { ns: 'app' }))
       return
     }
 
@@ -181,11 +180,11 @@ const SettingsModal: FC<ISettingsModalProps> = ({
 
     if (inputInfo !== null) {
       if (!validateColorHex(inputInfo.chatColorTheme)) {
-        notify({ type: 'error', message: t(`${prefixSettings}.invalidHexMessage`, { ns: 'appOverview' }) })
+        toast.error(t(`${prefixSettings}.invalidHexMessage`, { ns: 'appOverview' }))
         return
       }
       if (!validatePrivacyPolicy(inputInfo.privacyPolicy)) {
-        notify({ type: 'error', message: t(`${prefixSettings}.invalidPrivacyPolicy`, { ns: 'appOverview' }) })
+        toast.error(t(`${prefixSettings}.invalidPrivacyPolicy`, { ns: 'appOverview' }))
         return
       }
     }
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 67c4c36e23..4b5324afb5 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,6 @@ 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/context'
 import { Plan } from '@/app/components/billing/type'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { AppModeEnum } from '@/types/app'
@@ -111,20 +110,32 @@ const createMockApp = (overrides: Partial<App> = {}): App => ({
 
 const renderComponent = (overrides: Partial<React.ComponentProps<typeof SwitchAppModal>> = {}) => {
   const notify = vi.fn()
+  const mockToast = {
+    success: (message: string, options?: Record<string, unknown>) => notify({ type: 'success', message, ...options }),
+    error: (message: string, options?: Record<string, unknown>) => notify({ type: 'error', message, ...options }),
+    warning: (message: string, options?: Record<string, unknown>) => notify({ type: 'warning', message, ...options }),
+    info: (message: string, options?: Record<string, unknown>) => notify({ type: 'info', message, ...options }),
+    dismiss: vi.fn(),
+    update: vi.fn(),
+    promise: vi.fn(),
+  }
+
+  vi.mock('@/app/components/base/ui/toast', () => ({
+    toast: mockToast,
+  }))
   const onClose = vi.fn()
   const onSuccess = vi.fn()
   const appDetail = createMockApp()
 
   const utils = render(
-    <ToastContext.Provider value={{ notify, close: vi.fn() }}>
-      <SwitchAppModal
-        show
-        appDetail={appDetail}
-        onClose={onClose}
-        onSuccess={onSuccess}
-        {...overrides}
-      />
-    </ToastContext.Provider>,
+    <SwitchAppModal
+      show
+      appDetail={appDetail}
+      onClose={onClose}
+      onSuccess={onSuccess}
+      {...overrides}
+    />,
+
   )
 
   return {
diff --git a/web/app/components/app/switch-app-modal/index.tsx b/web/app/components/app/switch-app-modal/index.tsx
index 7c3269d52c..ffa5dc6ef4 100644
--- a/web/app/components/app/switch-app-modal/index.tsx
+++ b/web/app/components/app/switch-app-modal/index.tsx
@@ -5,7 +5,6 @@ import { RiCloseLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import AppIcon from '@/app/components/base/app-icon'
 import Button from '@/app/components/base/button'
@@ -14,7 +13,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/context'
+import { toast } from '@/app/components/base/ui/toast'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
@@ -37,7 +36,6 @@ type SwitchAppModalProps = {
 const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClose }: SwitchAppModalProps) => {
   const { push, replace } = useRouter()
   const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
   const setAppDetail = useAppStore(s => s.setAppDetail)
 
   const { isCurrentWorkspaceEditor } = useAppContext()
@@ -68,7 +66,7 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
         onSuccess()
       if (onClose)
         onClose()
-      notify({ type: 'success', message: t('newApp.appCreated', { ns: 'app' }) })
+      toast.success(t('newApp.appCreated', { ns: 'app' }))
       if (inAppDetail)
         setAppDetail()
       if (removeOriginal)
@@ -84,7 +82,7 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
       )
     }
     catch {
-      notify({ type: 'error', message: t('newApp.appCreateFailed', { ns: 'app' }) })
+      toast.error(t('newApp.appCreateFailed', { ns: 'app' }))
     }
   }
 
diff --git a/web/app/components/app/text-generate/item/index.tsx b/web/app/components/app/text-generate/item/index.tsx
index 7081731cba..d032054796 100644
--- a/web/app/components/app/text-generate/item/index.tsx
+++ b/web/app/components/app/text-generate/item/index.tsx
@@ -28,7 +28,7 @@ import { useChatContext } from '@/app/components/base/chat/chat/context'
 import Loading from '@/app/components/base/loading'
 import { Markdown } from '@/app/components/base/markdown'
 import NewAudioButton from '@/app/components/base/new-audio-button'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { useParams } from '@/next/navigation'
 import { fetchTextGenerationMessage } from '@/service/debug'
 import { AppSourceType, fetchMoreLikeThis, submitHumanInputForm, updateFeedback } from '@/service/share'
@@ -145,7 +145,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
 
   const handleMoreLikeThis = async () => {
     if (isQuerying || !messageId) {
-      Toast.notify({ type: 'warning', message: t('errorMessage.waitForResponse', { ns: 'appDebug' }) })
+      toast.warning(t('errorMessage.waitForResponse', { ns: 'appDebug' }))
       return
     }
     startQuerying()
@@ -368,7 +368,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                           copy(copyContent)
                         else
                           copy(JSON.stringify(copyContent))
-                        Toast.notify({ type: 'success', message: t('actionMsg.copySuccessfully', { ns: 'common' }) })
+                        toast.success(t('actionMsg.copySuccessfully', { ns: 'common' }))
                       }}
                     >
                       <RiClipboardLine className="h-4 w-4" />
diff --git a/web/app/components/app/text-generate/saved-items/index.spec.tsx b/web/app/components/app/text-generate/saved-items/index.spec.tsx
index b45a1cca6c..dff0950f89 100644
--- a/web/app/components/app/text-generate/saved-items/index.spec.tsx
+++ b/web/app/components/app/text-generate/saved-items/index.spec.tsx
@@ -4,7 +4,7 @@ import copy from 'copy-to-clipboard'
 
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import SavedItems from './index'
 
 vi.mock('copy-to-clipboard', () => ({
@@ -16,7 +16,7 @@ vi.mock('@/next/navigation', () => ({
 }))
 
 const mockCopy = vi.mocked(copy)
-const toastNotifySpy = vi.spyOn(Toast, 'notify')
+const toastSuccessSpy = vi.spyOn(toast, 'success').mockReturnValue('toast-success')
 
 const baseProps: ISavedItemsProps = {
   list: [
@@ -30,7 +30,7 @@ const baseProps: ISavedItemsProps = {
 describe('SavedItems', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    toastNotifySpy.mockClear()
+    toastSuccessSpy.mockClear()
   })
 
   it('renders saved answers with metadata and controls', () => {
@@ -58,7 +58,7 @@ describe('SavedItems', () => {
 
     fireEvent.click(copyButton)
     expect(mockCopy).toHaveBeenCalledWith('hello world')
-    expect(toastNotifySpy).toHaveBeenCalledWith({ type: 'success', message: 'common.actionMsg.copySuccessfully' })
+    expect(toastSuccessSpy).toHaveBeenCalledWith('common.actionMsg.copySuccessfully')
 
     fireEvent.click(deleteButton)
     expect(handleRemove).toHaveBeenCalledWith('1')
diff --git a/web/app/components/app/text-generate/saved-items/index.tsx b/web/app/components/app/text-generate/saved-items/index.tsx
index 9e54d9abee..620de7eb55 100644
--- a/web/app/components/app/text-generate/saved-items/index.tsx
+++ b/web/app/components/app/text-generate/saved-items/index.tsx
@@ -11,7 +11,7 @@ import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import { Markdown } from '@/app/components/base/markdown'
 import NewAudioButton from '@/app/components/base/new-audio-button'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { cn } from '@/utils/classnames'
 import NoData from './no-data'
 
@@ -60,7 +60,7 @@ const SavedItems: FC<ISavedItemsProps> = ({
                       {isShowTextToSpeech && <NewAudioButton value={answer} />}
                       <ActionButton onClick={() => {
                         copy(answer)
-                        Toast.notify({ type: 'success', message: t('actionMsg.copySuccessfully', { ns: 'common' }) })
+                        toast.success(t('actionMsg.copySuccessfully', { ns: 'common' }))
                       }}
                       >
                         <RiClipboardLine className="h-4 w-4" />
diff --git a/web/app/components/apps/app-card.tsx b/web/app/components/apps/app-card.tsx
index c228588670..2983f80f58 100644
--- a/web/app/components/apps/app-card.tsx
+++ b/web/app/components/apps/app-card.tsx
@@ -1,24 +1,18 @@
 'use client'
 
 import type { DuplicateAppModalProps } from '@/app/components/app/duplicate-modal'
-import type { HtmlContentProps } from '@/app/components/base/popover'
 import type { Tag } from '@/app/components/base/tag-management/constant'
 import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
 import type { WorkflowOnlineUser } from '@/models/app'
 import type { App } from '@/types/app'
 import * as React from 'react'
-import { useCallback, useEffect, useMemo, useState, useTransition } from 'react'
+import { useCallback, useMemo, useState, useTransition } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
 import { AppTypeIcon } from '@/app/components/app/type-selector'
 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 from '@/app/components/base/toast'
-import { ToastContext } from '@/app/components/base/toast/context'
-import Tooltip from '@/app/components/base/tooltip'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -28,6 +22,17 @@ import {
   AlertDialogDescription,
   AlertDialogTitle,
 } from '@/app/components/base/ui/alert-dialog'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/app/components/base/ui/popover'
+import { toast } from '@/app/components/base/ui/toast'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/app/components/base/ui/tooltip'
 import { UserAvatarList } from '@/app/components/base/user-avatar-list'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
@@ -65,6 +70,166 @@ const AccessControl = dynamic(() => import('@/app/components/app/app-access-cont
   ssr: false,
 })
 
+type AppCardOperationsProps = {
+  app: App
+  webappAuthEnabled: boolean
+  isCurrentWorkspaceEditor: boolean
+  exporting: boolean
+  secretEnvListLength: number
+  isUpgradingRuntime: boolean
+  popupClassName: string
+  onEdit: () => void
+  onDuplicate: () => void
+  onExport: () => void
+  onSwitch: () => void
+  onDelete: () => void
+  onAccessControl: () => void
+  onInstalledApp: () => void
+  onUpgradeRuntime: () => void
+}
+
+const AppCardOperations = ({
+  app,
+  webappAuthEnabled,
+  isCurrentWorkspaceEditor,
+  exporting,
+  secretEnvListLength,
+  isUpgradingRuntime,
+  popupClassName,
+  onEdit,
+  onDuplicate,
+  onExport,
+  onSwitch,
+  onDelete,
+  onAccessControl,
+  onInstalledApp,
+  onUpgradeRuntime,
+}: AppCardOperationsProps) => {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const { data: userCanAccessApp, isLoading: isGettingUserCanAccessApp } = useGetUserCanAccessApp({
+    appId: app.id,
+    enabled: !!open && webappAuthEnabled,
+  })
+
+  const onMouseLeave = () => {
+    setOpen(false)
+  }
+
+  const onClickInstalledApp = async () => {
+    onInstalledApp()
+    onMouseLeave()
+  }
+
+  const onClickUpgradeRuntime = async () => {
+    onUpgradeRuntime()
+    onMouseLeave()
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
+        render={(
+          <button
+            type="button"
+            className={cn(
+              'flex h-8 w-8 cursor-pointer items-center justify-center rounded-md',
+              open && '!bg-state-base-hover !shadow-none',
+            )}
+          >
+            <span className="sr-only">{t('operation.more', { ns: 'common' })}</span>
+            <span aria-hidden className="i-ri-more-fill h-4 w-4 text-text-tertiary" />
+          </button>
+        )}
+      />
+      <PopoverContent
+        placement="bottom-end"
+        sideOffset={4}
+        popupClassName={cn(
+          'w-fit min-w-[130px] overflow-hidden rounded-lg bg-components-panel-bg shadow-lg ring-1 ring-black/5',
+          popupClassName,
+        )}
+      >
+        <div className="flex w-full flex-col py-1" onMouseLeave={onMouseLeave}>
+          <button type="button" className="mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 hover:bg-state-base-hover" onClick={onEdit}>
+            <span className="text-text-secondary system-sm-regular">{t('editApp', { ns: 'app' })}</span>
+          </button>
+          <Divider className="my-1" />
+          <button type="button" className="mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 hover:bg-state-base-hover" onClick={onDuplicate}>
+            <span className="text-text-secondary system-sm-regular">{t('duplicate', { ns: 'app' })}</span>
+          </button>
+          <button type="button" disabled={exporting || secretEnvListLength > 0} className="mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 hover:bg-state-base-hover disabled:cursor-not-allowed disabled:opacity-50" onClick={onExport}>
+            <span className="text-text-secondary system-sm-regular">{t('export', { ns: 'app' })}</span>
+          </button>
+          {(app.mode === AppModeEnum.COMPLETION || app.mode === AppModeEnum.CHAT) && (
+            <>
+              <Divider className="my-1" />
+              <button type="button" className="mx-1 flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-state-base-hover" onClick={onSwitch}>
+                <span className="text-sm leading-5 text-text-secondary">{t('switch', { ns: 'app' })}</span>
+              </button>
+            </>
+          )}
+          {
+            !app.has_draft_trigger && (
+              (!webappAuthEnabled)
+                ? (
+                    <>
+                      <Divider className="my-1" />
+                      <button type="button" className="mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 hover:bg-state-base-hover" onClick={onClickInstalledApp}>
+                        <span className="text-text-secondary system-sm-regular">{t('openInExplore', { ns: 'app' })}</span>
+                      </button>
+                    </>
+                  )
+                : !(isGettingUserCanAccessApp || !userCanAccessApp?.result) && (
+                    <>
+                      <Divider className="my-1" />
+                      <button type="button" className="mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 hover:bg-state-base-hover" onClick={onClickInstalledApp}>
+                        <span className="text-text-secondary system-sm-regular">{t('openInExplore', { ns: 'app' })}</span>
+                      </button>
+                    </>
+                  )
+            )
+          }
+          <Divider className="my-1" />
+          {
+            webappAuthEnabled && isCurrentWorkspaceEditor && (
+              <>
+                <button type="button" className="mx-1 flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-state-base-hover" onClick={onAccessControl}>
+                  <span className="text-sm leading-5 text-text-secondary">{t('accessControl', { ns: 'app' })}</span>
+                </button>
+                <Divider className="my-1" />
+              </>
+            )
+          }
+          {app.runtime_type !== 'sandboxed'
+            && (app.mode === AppModeEnum.WORKFLOW || app.mode === AppModeEnum.ADVANCED_CHAT)
+            && (
+              <button
+                type="button"
+                disabled={isUpgradingRuntime}
+                className="mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 hover:bg-state-base-hover disabled:cursor-not-allowed disabled:opacity-50"
+                onClick={onClickUpgradeRuntime}
+              >
+                <span className="text-text-accent system-sm-regular">
+                  {t('upgradeRuntime', { ns: 'app' })}
+                </span>
+              </button>
+            )}
+          <button
+            type="button"
+            className="group mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-destructive-hover"
+            onClick={onDelete}
+          >
+            <span className="text-text-secondary system-sm-regular group-hover:text-text-destructive">
+              {t('operation.delete', { ns: 'common' })}
+            </span>
+          </button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
 export type AppCardProps = {
   app: App
   onRefresh?: () => void
@@ -73,7 +238,6 @@ export type AppCardProps = {
 
 const AppCard = ({ app, onRefresh, onlineUsers = [] }: AppCardProps) => {
   const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
   const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
   const { isCurrentWorkspaceEditor } = useAppContext()
   const { onPlanInfoChanged } = useProviderContext()
@@ -93,20 +257,17 @@ const AppCard = ({ app, onRefresh, onlineUsers = [] }: AppCardProps) => {
   const onConfirmDelete = useCallback(async () => {
     try {
       await mutateDeleteApp(app.id)
-      notify({ type: 'success', message: t('appDeleted', { ns: 'app' }) })
+      toast.success(t('appDeleted', { ns: 'app' }))
       onPlanInfoChanged()
     }
     catch (e: unknown) {
-      notify({
-        type: 'error',
-        message: `${t('appDeleteFailed', { ns: 'app' })}${e instanceof Error ? `: ${e.message}` : ''}`,
-      })
+      toast.error(`${t('appDeleteFailed', { ns: 'app' })}${e instanceof Error ? `: ${e.message}` : ''}`)
     }
     finally {
       setShowConfirmDelete(false)
       setConfirmDeleteInput('')
     }
-  }, [app.id, mutateDeleteApp, notify, onPlanInfoChanged, t])
+  }, [app.id, mutateDeleteApp, onPlanInfoChanged, t])
 
   const onDeleteDialogOpenChange = useCallback((open: boolean) => {
     if (isDeleting)
@@ -138,20 +299,14 @@ const AppCard = ({ app, onRefresh, onlineUsers = [] }: AppCardProps) => {
         max_active_requests,
       })
       setShowEditModal(false)
-      notify({
-        type: 'success',
-        message: t('editDone', { ns: 'app' }),
-      })
+      toast.success(t('editDone', { ns: 'app' }))
       if (onRefresh)
         onRefresh()
     }
     catch (e: unknown) {
-      notify({
-        type: 'error',
-        message: (e instanceof Error ? e.message : '') || t('editFailed', { ns: 'app' }),
-      })
+      toast.error((e instanceof Error ? e.message : '') || t('editFailed', { ns: 'app' }))
     }
-  }, [app.id, notify, onRefresh, t])
+  }, [app.id, onRefresh, t])
 
   const onCopy: DuplicateAppModalProps['onConfirm'] = async ({ name, icon_type, icon, icon_background }) => {
     try {
@@ -164,10 +319,7 @@ const AppCard = ({ app, onRefresh, onlineUsers = [] }: AppCardProps) => {
         mode: app.mode,
       })
       setShowDuplicateModal(false)
-      notify({
-        type: 'success',
-        message: t('newApp.appCreated', { ns: 'app' }),
-      })
+      toast.success(t('newApp.appCreated', { ns: 'app' }))
       localStorage.setItem(NEED_REFRESH_APP_LIST_KEY, '1')
       if (onRefresh)
         onRefresh()
@@ -175,7 +327,7 @@ const AppCard = ({ app, onRefresh, onlineUsers = [] }: AppCardProps) => {
       getRedirection(isCurrentWorkspaceEditor, newApp, push)
     }
     catch {
-      notify({ type: 'error', message: t('newApp.appCreateFailed', { ns: 'app' }) })
+      toast.error(t('newApp.appCreateFailed', { ns: 'app' }))
     }
   }
 
@@ -197,10 +349,7 @@ const AppCard = ({ app, onRefresh, onlineUsers = [] }: AppCardProps) => {
       downloadBlob({ data: file, fileName: `${app.name}.yml` })
     }
     catch {
-      notify({
-        type: 'error',
-        message: t('exportFailed', { ns: 'app' }),
-      })
+      toast.error(t('exportFailed', { ns: 'app' }))
     }
   }
 
@@ -219,196 +368,71 @@ const AppCard = ({ app, onRefresh, onlineUsers = [] }: AppCardProps) => {
       setSecretEnvList(list)
     }
     catch {
-      notify({
-        type: 'error',
-        message: t('exportFailed', { ns: 'app' }),
-      })
+      toast.error(t('exportFailed', { ns: 'app' }))
     }
   }
 
+  const [isUpgradingRuntime, startUpgradeRuntime] = useTransition()
+
   const onSwitch = () => {
     if (onRefresh)
       onRefresh()
     setShowSwitchModal(false)
   }
 
-  const [isUpgradingRuntime, startUpgradeRuntime] = useTransition()
-  const isClassicWorkflowApp = app.runtime_type !== 'sandboxed'
-    && (app.mode === AppModeEnum.WORKFLOW || app.mode === AppModeEnum.ADVANCED_CHAT)
-
   const onUpdateAccessControl = useCallback(() => {
     if (onRefresh)
       onRefresh()
     setShowAccessControl(false)
   }, [onRefresh, setShowAccessControl])
 
-  const Operations = (props: HtmlContentProps) => {
-    const { data: userCanAccessApp, isLoading: isGettingUserCanAccessApp } = useGetUserCanAccessApp({ appId: app?.id, enabled: (!!props?.open && systemFeatures.webapp_auth.enabled) })
-    const onMouseLeave = async () => {
-      props.onClose?.()
-    }
-    const onClickSettings = async (e: React.MouseEvent<HTMLButtonElement>) => {
-      e.stopPropagation()
-      props.onClick?.()
-      e.preventDefault()
-      setShowEditModal(true)
-    }
-    const onClickDuplicate = async (e: React.MouseEvent<HTMLButtonElement>) => {
-      e.stopPropagation()
-      props.onClick?.()
-      e.preventDefault()
-      setShowDuplicateModal(true)
-    }
-    const onClickExport = (e: React.MouseEvent<HTMLButtonElement>) => {
-      e.stopPropagation()
-      props.onClick?.()
-      e.preventDefault()
-      startExport(async () => {
-        await exportCheck()
+  const handleOpenEditModal = useCallback(() => setShowEditModal(true), [])
+  const handleOpenDuplicateModal = useCallback(() => setShowDuplicateModal(true), [])
+  const handleOpenSwitchModal = useCallback(() => setShowSwitchModal(true), [])
+  const handleOpenDeleteModal = useCallback(() => setShowConfirmDelete(true), [])
+  const handleOpenAccessControl = useCallback(() => setShowAccessControl(true), [])
+  const handleExport = useCallback(() => {
+    startExport(async () => {
+      await exportCheck()
+    })
+  }, [exportCheck, startExport])
+  const handleInstalledApp = useCallback(async () => {
+    try {
+      await openAsyncWindow(async () => {
+        const { installed_apps } = (await fetchInstalledAppList(app.id) || {}) as { installed_apps?: { id: string }[] }
+        if (installed_apps && installed_apps.length > 0)
+          return `${basePath}/explore/installed/${installed_apps[0].id}`
+        throw new Error('No app found in Explore')
+      }, {
+        onError: (err) => {
+          toast.error(`${err.message || err}`)
+        },
       })
     }
-    const onClickSwitch = async (e: React.MouseEvent<HTMLButtonElement>) => {
-      e.stopPropagation()
-      props.onClick?.()
-      e.preventDefault()
-      setShowSwitchModal(true)
+    catch (e: unknown) {
+      toast.error(e instanceof Error ? e.message : String(e))
     }
-    const onClickDelete = async (e: React.MouseEvent<HTMLButtonElement>) => {
-      e.stopPropagation()
-      props.onClick?.()
-      e.preventDefault()
-      setShowConfirmDelete(true)
-    }
-    const onClickAccessControl = async (e: React.MouseEvent<HTMLButtonElement>) => {
-      e.stopPropagation()
-      props.onClick?.()
-      e.preventDefault()
-      setShowAccessControl(true)
-    }
-    const onClickInstalledApp = async (e: React.MouseEvent<HTMLButtonElement>) => {
-      e.stopPropagation()
-      props.onClick?.()
-      e.preventDefault()
+  }, [app.id, openAsyncWindow])
+  const handleUpgradeRuntime = useCallback(() => {
+    startUpgradeRuntime(async () => {
       try {
-        await openAsyncWindow(async () => {
-          const { installed_apps } = (await fetchInstalledAppList(app.id) || {}) as { installed_apps?: { id: string }[] }
-          if (installed_apps && installed_apps.length > 0)
-            return `${basePath}/explore/installed/${installed_apps[0].id}`
-          throw new Error('No app found in Explore')
-        }, {
-          onError: (err) => {
-            Toast.notify({ type: 'error', message: `${err.message || err}` })
-          },
-        })
+        const res = await upgradeAppRuntime(app.id)
+        if (res.result === 'success' && res.new_app_id) {
+          toast.success(t('sandboxMigrationModal.upgrade', { ns: 'workflow' }))
+          const params = new URLSearchParams({
+            upgraded_from: app.id,
+            upgraded_from_name: app.name,
+          })
+          push(`/app/${res.new_app_id}/workflow?${params.toString()}`)
+        }
       }
       catch (e: unknown) {
-        Toast.notify({ type: 'error', message: e instanceof Error ? e.message : String(e) })
+        toast.error((e instanceof Error ? e.message : '') || 'Upgrade failed')
       }
-    }
-    const onClickUpgradeRuntime = (e: React.MouseEvent<HTMLButtonElement>) => {
-      e.stopPropagation()
-      props.onClick?.()
-      e.preventDefault()
-      startUpgradeRuntime(async () => {
-        try {
-          const res = await upgradeAppRuntime(app.id)
-          if (res.result === 'success' && res.new_app_id) {
-            notify({ type: 'success', message: t('sandboxMigrationModal.upgrade', { ns: 'workflow' }) })
-            const params = new URLSearchParams({
-              upgraded_from: app.id,
-              upgraded_from_name: app.name,
-            })
-            push(`/app/${res.new_app_id}/workflow?${params.toString()}`)
-          }
-        }
-        catch (e: unknown) {
-          notify({ type: 'error', message: (e instanceof Error ? e.message : '') || 'Upgrade failed' })
-        }
-      })
-    }
-    return (
-      <div className="relative flex w-full flex-col py-1" onMouseLeave={onMouseLeave}>
-        <button type="button" className="mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 hover:bg-state-base-hover" onClick={onClickSettings}>
-          <span className="text-text-secondary system-sm-regular">{t('editApp', { ns: 'app' })}</span>
-        </button>
-        <Divider className="my-1" />
-        <button type="button" className="mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 hover:bg-state-base-hover" onClick={onClickDuplicate}>
-          <span className="text-text-secondary system-sm-regular">{t('duplicate', { ns: 'app' })}</span>
-        </button>
-        <button type="button" disabled={exporting || secretEnvList.length > 0} className="mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 hover:bg-state-base-hover disabled:cursor-not-allowed disabled:opacity-50" onClick={onClickExport}>
-          <span className="text-text-secondary system-sm-regular">{t('export', { ns: 'app' })}</span>
-        </button>
-        {(app.mode === AppModeEnum.COMPLETION || app.mode === AppModeEnum.CHAT) && (
-          <>
-            <Divider className="my-1" />
-            <button
-              type="button"
-              className="mx-1 flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-state-base-hover"
-              onClick={onClickSwitch}
-            >
-              <span className="text-sm leading-5 text-text-secondary">{t('switch', { ns: 'app' })}</span>
-            </button>
-          </>
-        )}
-        {
-          !app.has_draft_trigger && (
-            (!systemFeatures.webapp_auth.enabled)
-              ? (
-                  <>
-                    <Divider className="my-1" />
-                    <button type="button" className="mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 hover:bg-state-base-hover" onClick={onClickInstalledApp}>
-                      <span className="text-text-secondary system-sm-regular">{t('openInExplore', { ns: 'app' })}</span>
-                    </button>
-                  </>
-                )
-              : !(isGettingUserCanAccessApp || !userCanAccessApp?.result) && (
-                  <>
-                    <Divider className="my-1" />
-                    <button type="button" className="mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 hover:bg-state-base-hover" onClick={onClickInstalledApp}>
-                      <span className="text-text-secondary system-sm-regular">{t('openInExplore', { ns: 'app' })}</span>
-                    </button>
-                  </>
-                )
-          )
-        }
-        <Divider className="my-1" />
-        {
-          systemFeatures.webapp_auth.enabled && isCurrentWorkspaceEditor && (
-            <>
-              <button type="button" className="mx-1 flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-state-base-hover" onClick={onClickAccessControl}>
-                <span className="text-sm leading-5 text-text-secondary">{t('accessControl', { ns: 'app' })}</span>
-              </button>
-              <Divider className="my-1" />
-            </>
-          )
-        }
-        {isClassicWorkflowApp && (
-          <button
-            type="button"
-            disabled={isUpgradingRuntime}
-            className="mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 hover:bg-state-base-hover disabled:cursor-not-allowed disabled:opacity-50"
-            onClick={onClickUpgradeRuntime}
-          >
-            <span className="text-text-accent system-sm-regular">{t('upgradeRuntime', { ns: 'app' })}</span>
-          </button>
-        )}
-        <button
-          type="button"
-          className="group mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-destructive-hover"
-          onClick={onClickDelete}
-        >
-          <span className="text-text-secondary system-sm-regular group-hover:text-text-destructive">
-            {t('operation.delete', { ns: 'common' })}
-          </span>
-        </button>
-      </div>
-    )
-  }
+    })
+  }, [app.id, app.name, push, startUpgradeRuntime, t])
 
-  const [tags, setTags] = useState<Tag[]>(app.tags)
-  useEffect(() => {
-    setTags(app.tags)
-  }, [app.tags])
+  const [tags, setTags] = useState<Tag[]>(() => app.tags)
 
   const EditTimeText = useMemo(() => {
     const timeText = formatTime({
@@ -463,23 +487,27 @@ const AppCard = ({ app, onRefresh, onlineUsers = [] }: AppCardProps) => {
           </div>
           <div className="flex h-5 w-5 shrink-0 items-center justify-center">
             {app.access_mode === AccessMode.PUBLIC && (
-              <Tooltip asChild={false} popupContent={t('accessItemsDescription.anyone', { ns: 'app' })}>
-                <span className="i-ri-global-line h-4 w-4 text-text-quaternary" />
+              <Tooltip>
+                <TooltipTrigger render={<span className="i-ri-global-line h-4 w-4 text-text-quaternary" />} />
+                <TooltipContent>{t('accessItemsDescription.anyone', { ns: 'app' })}</TooltipContent>
               </Tooltip>
             )}
             {app.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS && (
-              <Tooltip asChild={false} popupContent={t('accessItemsDescription.specific', { ns: 'app' })}>
-                <span className="i-ri-lock-line h-4 w-4 text-text-quaternary" />
+              <Tooltip>
+                <TooltipTrigger render={<span className="i-ri-lock-line h-4 w-4 text-text-quaternary" />} />
+                <TooltipContent>{t('accessItemsDescription.specific', { ns: 'app' })}</TooltipContent>
               </Tooltip>
             )}
             {app.access_mode === AccessMode.ORGANIZATION && (
-              <Tooltip asChild={false} popupContent={t('accessItemsDescription.organization', { ns: 'app' })}>
-                <span className="i-ri-building-line h-4 w-4 text-text-quaternary" />
+              <Tooltip>
+                <TooltipTrigger render={<span className="i-ri-building-line h-4 w-4 text-text-quaternary" />} />
+                <TooltipContent>{t('accessItemsDescription.organization', { ns: 'app' })}</TooltipContent>
               </Tooltip>
             )}
             {app.access_mode === AccessMode.EXTERNAL_MEMBERS && (
-              <Tooltip asChild={false} popupContent={t('accessItemsDescription.external', { ns: 'app' })}>
-                <span className="i-ri-verified-badge-line h-4 w-4 text-text-quaternary" />
+              <Tooltip>
+                <TooltipTrigger render={<span className="i-ri-verified-badge-line h-4 w-4 text-text-quaternary" />} />
+                <TooltipContent>{t('accessItemsDescription.external', { ns: 'app' })}</TooltipContent>
               </Tooltip>
             )}
           </div>
@@ -521,29 +549,26 @@ const AppCard = ({ app, onRefresh, onlineUsers = [] }: AppCardProps) => {
               </div>
               <div className="mx-1 !hidden h-[14px] w-[1px] shrink-0 bg-divider-regular group-hover:!flex" />
               <div className="!hidden shrink-0 group-hover:!flex">
-                <CustomPopover
-                  htmlContent={<Operations />}
-                  position="br"
-                  trigger="click"
-                  btnElement={(
-                    <div
-                      className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-md"
-                    >
-                      <span className="sr-only">{t('operation.more', { ns: 'common' })}</span>
-                      <span aria-hidden className="i-ri-more-fill h-4 w-4 text-text-tertiary" />
-                    </div>
-                  )}
-                  btnClassName={open =>
-                    cn(
-                      open ? '!bg-state-base-hover !shadow-none' : '!bg-transparent',
-                      'h-8 w-8 rounded-md border-none !p-2 hover:!bg-state-base-hover',
-                    )}
+                <AppCardOperations
+                  app={app}
+                  webappAuthEnabled={systemFeatures.webapp_auth.enabled}
+                  isCurrentWorkspaceEditor={isCurrentWorkspaceEditor}
+                  exporting={exporting}
+                  secretEnvListLength={secretEnvList.length}
+                  isUpgradingRuntime={isUpgradingRuntime}
                   popupClassName={
                     (app.mode === AppModeEnum.COMPLETION || app.mode === AppModeEnum.CHAT)
-                      ? '!w-[256px] translate-x-[-224px]'
-                      : '!w-[216px] translate-x-[-128px]'
+                      ? 'w-[256px]'
+                      : 'w-[216px]'
                   }
-                  className="!z-20 h-fit"
+                  onEdit={handleOpenEditModal}
+                  onDuplicate={handleOpenDuplicateModal}
+                  onExport={handleExport}
+                  onSwitch={handleOpenSwitchModal}
+                  onDelete={handleOpenDeleteModal}
+                  onAccessControl={handleOpenAccessControl}
+                  onInstalledApp={handleInstalledApp}
+                  onUpgradeRuntime={handleUpgradeRuntime}
                 />
               </div>
             </>
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 8b796435e0..6ce1e54a47 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
@@ -1,16 +1,32 @@
-import type { ComponentProps } from 'react'
+import type { ComponentProps, ReactNode } 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 { useStore as useAppStore } from '@/app/components/app/store'
-import { ToastContext } from '@/app/components/base/toast/context'
 import { fetchAgentLogDetail } from '@/service/log'
 import AgentLogDetail from '../detail'
 
+const { mockToast } = vi.hoisted(() => {
+  const mockToast = Object.assign(vi.fn(), {
+    success: vi.fn(),
+    error: vi.fn(),
+    warning: vi.fn(),
+    info: vi.fn(),
+    dismiss: vi.fn(),
+    update: vi.fn(),
+    promise: vi.fn(),
+  })
+  return { mockToast }
+})
+
 vi.mock('@/service/log', () => ({
   fetchAgentLogDetail: vi.fn(),
 }))
 
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
+}))
+
 vi.mock('@/app/components/app/store', () => ({
   useStore: vi.fn(selector => selector({ appDetail: { id: 'app-id' } })),
 }))
@@ -22,7 +38,7 @@ vi.mock('@/app/components/workflow/run/status', () => ({
 }))
 
 vi.mock('@/app/components/workflow/nodes/_base/components/editor/code-editor', () => ({
-  default: ({ title, value }: { title: React.ReactNode, value: string | object }) => (
+  default: ({ title, value }: { title: ReactNode, value: string | object }) => (
     <div data-testid="code-editor">
       {title}
       {typeof value === 'string' ? value : JSON.stringify(value)}
@@ -76,19 +92,13 @@ const createMockResponse = (overrides: Partial<AgentLogDetailResponse> = {}): Ag
 })
 
 describe('AgentLogDetail', () => {
-  const notify = vi.fn()
-
   const renderComponent = (props: Partial<ComponentProps<typeof AgentLogDetail>> = {}) => {
     const defaultProps: ComponentProps<typeof AgentLogDetail> = {
       conversationID: 'conv-id',
       messageID: 'msg-id',
       log: createMockLog(),
     }
-    return render(
-      <ToastContext.Provider value={{ notify, close: vi.fn() } as ComponentProps<typeof ToastContext.Provider>['value']}>
-        <AgentLogDetail {...defaultProps} {...props} />
-      </ToastContext.Provider>,
-    )
+    return render(<AgentLogDetail {...defaultProps} {...props} />)
   }
 
   const renderAndWaitForData = async (props: Partial<ComponentProps<typeof AgentLogDetail>> = {}) => {
@@ -212,10 +222,7 @@ describe('AgentLogDetail', () => {
       renderComponent()
 
       await waitFor(() => {
-        expect(notify).toHaveBeenCalledWith({
-          type: 'error',
-          message: 'Error: API Error',
-        })
+        expect(mockToast.error).toHaveBeenCalledWith('Error: API Error')
       })
     })
 
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 b2db524453..d1581c40b5 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,14 +1,30 @@
 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/context'
 import { fetchAgentLogDetail } from '@/service/log'
 import AgentLogModal from '../index'
 
+const { mockToast } = vi.hoisted(() => {
+  const mockToast = Object.assign(vi.fn(), {
+    success: vi.fn(),
+    error: vi.fn(),
+    warning: vi.fn(),
+    info: vi.fn(),
+    dismiss: vi.fn(),
+    update: vi.fn(),
+    promise: vi.fn(),
+  })
+  return { mockToast }
+})
+
 vi.mock('@/service/log', () => ({
   fetchAgentLogDetail: vi.fn(),
 }))
 
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
+}))
+
 vi.mock('@/app/components/app/store', () => ({
   useStore: vi.fn(selector => selector({ appDetail: { id: 'app-id' } })),
 }))
@@ -94,11 +110,7 @@ describe('AgentLogModal', () => {
   })
 
   it('should render correctly when log item is provided', async () => {
-    render(
-      <ToastContext.Provider value={{ notify: vi.fn(), close: vi.fn() } as React.ComponentProps<typeof ToastContext.Provider>['value']}>
-        <AgentLogModal {...mockProps} />
-      </ToastContext.Provider>,
-    )
+    render(<AgentLogModal {...mockProps} />)
 
     expect(screen.getByText('appLog.runDetail.workflowTitle')).toBeInTheDocument()
 
@@ -110,11 +122,7 @@ describe('AgentLogModal', () => {
   it('should call onCancel when close button is clicked', () => {
     vi.mocked(fetchAgentLogDetail).mockReturnValue(new Promise(() => {}))
 
-    render(
-      <ToastContext.Provider value={{ notify: vi.fn(), close: vi.fn() } as React.ComponentProps<typeof ToastContext.Provider>['value']}>
-        <AgentLogModal {...mockProps} />
-      </ToastContext.Provider>,
-    )
+    render(<AgentLogModal {...mockProps} />)
 
     const closeBtn = screen.getByRole('heading', { name: /appLog.runDetail.workflowTitle/i }).nextElementSibling!
     fireEvent.click(closeBtn)
@@ -130,11 +138,7 @@ describe('AgentLogModal', () => {
       clickAwayHandler = callback
     })
 
-    render(
-      <ToastContext.Provider value={{ notify: vi.fn(), close: vi.fn() } as React.ComponentProps<typeof ToastContext.Provider>['value']}>
-        <AgentLogModal {...mockProps} />
-      </ToastContext.Provider>,
-    )
+    render(<AgentLogModal {...mockProps} />)
     clickAwayHandler(new Event('click'))
 
     expect(mockProps.onCancel).toHaveBeenCalledTimes(1)
@@ -150,11 +154,7 @@ describe('AgentLogModal', () => {
       }
     })
 
-    render(
-      <ToastContext.Provider value={{ notify: vi.fn(), close: vi.fn() } as React.ComponentProps<typeof ToastContext.Provider>['value']}>
-        <AgentLogModal {...mockProps} />
-      </ToastContext.Provider>,
-    )
+    render(<AgentLogModal {...mockProps} />)
 
     expect(mockProps.onCancel).not.toHaveBeenCalled()
   })
diff --git a/web/app/components/base/agent-log-modal/detail.tsx b/web/app/components/base/agent-log-modal/detail.tsx
index 21ed0be7e8..6550b305f8 100644
--- a/web/app/components/base/agent-log-modal/detail.tsx
+++ b/web/app/components/base/agent-log-modal/detail.tsx
@@ -7,10 +7,9 @@ import { flatten } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 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/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { fetchAgentLogDetail } from '@/service/log'
 import { cn } from '@/utils/classnames'
 import ResultPanel from './result'
@@ -22,28 +21,19 @@ export type AgentLogDetailProps = {
   log: IChatItem
   messageID: string
 }
-
-const AgentLogDetail: FC<AgentLogDetailProps> = ({
-  activeTab = 'DETAIL',
-  conversationID,
-  messageID,
-  log,
-}) => {
+const AgentLogDetail: FC<AgentLogDetailProps> = ({ activeTab = 'DETAIL', conversationID, messageID, log }) => {
   const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
   const [currentTab, setCurrentTab] = useState<string>(activeTab)
   const appDetail = useAppStore(s => s.appDetail)
   const [loading, setLoading] = useState<boolean>(true)
   const [runDetail, setRunDetail] = useState<AgentLogDetailResponse>()
   const [list, setList] = useState<AgentIteration[]>([])
-
   const tools = useMemo(() => {
     const res = uniq(flatten(runDetail?.iterations.map((iteration) => {
       return iteration.tool_calls.map((tool: any) => tool.tool_name).filter(Boolean)
     })).filter(Boolean))
     return res
   }, [runDetail])
-
   const getLogDetail = useCallback(async (appID: string, conversationID: string, messageID: string) => {
     try {
       const res = await fetchAgentLogDetail({
@@ -57,51 +47,30 @@ const AgentLogDetail: FC<AgentLogDetailProps> = ({
       setList(res.iterations)
     }
     catch (err) {
-      notify({
-        type: 'error',
-        message: `${err}`,
-      })
+      toast.error(`${err}`)
     }
-  }, [notify])
-
+  }, [])
   const getData = async (appID: string, conversationID: string, messageID: string) => {
     setLoading(true)
     await getLogDetail(appID, conversationID, messageID)
     setLoading(false)
   }
-
   const switchTab = async (tab: string) => {
     setCurrentTab(tab)
   }
-
   useEffect(() => {
     // fetch data
     if (appDetail)
       getData(appDetail.id, conversationID, messageID)
   }, [appDetail, conversationID, messageID])
-
   return (
     <div className="relative flex grow flex-col">
       {/* tab */}
       <div className="flex shrink-0 items-center border-b-[0.5px] border-divider-regular px-4">
-        <div
-          className={cn(
-            'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
-            currentTab === 'DETAIL' && '!border-[rgb(21,94,239)] text-text-secondary',
-          )}
-          data-active={currentTab === 'DETAIL'}
-          onClick={() => switchTab('DETAIL')}
-        >
+        <div className={cn('mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary', currentTab === 'DETAIL' && '!border-[rgb(21,94,239)] text-text-secondary')} data-active={currentTab === 'DETAIL'} onClick={() => switchTab('DETAIL')}>
           {t('detail', { ns: 'runLog' })}
         </div>
-        <div
-          className={cn(
-            'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
-            currentTab === 'TRACING' && '!border-[rgb(21,94,239)] text-text-secondary',
-          )}
-          data-active={currentTab === 'TRACING'}
-          onClick={() => switchTab('TRACING')}
-        >
+        <div className={cn('mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary', currentTab === 'TRACING' && '!border-[rgb(21,94,239)] text-text-secondary')} data-active={currentTab === 'TRACING'} onClick={() => switchTab('TRACING')}>
           {t('tracing', { ns: 'runLog' })}
         </div>
       </div>
@@ -112,29 +81,10 @@ const AgentLogDetail: FC<AgentLogDetailProps> = ({
             <Loading />
           </div>
         )}
-        {!loading && currentTab === 'DETAIL' && runDetail && (
-          <ResultPanel
-            inputs={log.input}
-            outputs={log.content}
-            status={runDetail.meta.status}
-            error={runDetail.meta.error}
-            elapsed_time={runDetail.meta.elapsed_time}
-            total_tokens={runDetail.meta.total_tokens}
-            created_at={runDetail.meta.start_time}
-            created_by={runDetail.meta.executor}
-            agentMode={runDetail.meta.agent_mode}
-            tools={tools}
-            iterations={runDetail.iterations.length}
-          />
-        )}
-        {!loading && currentTab === 'TRACING' && (
-          <TracingPanel
-            list={list}
-          />
-        )}
+        {!loading && currentTab === 'DETAIL' && runDetail && (<ResultPanel inputs={log.input} outputs={log.content} status={runDetail.meta.status} error={runDetail.meta.error} elapsed_time={runDetail.meta.elapsed_time} total_tokens={runDetail.meta.total_tokens} created_at={runDetail.meta.start_time} created_by={runDetail.meta.executor} agentMode={runDetail.meta.agent_mode} tools={tools} iterations={runDetail.iterations.length} />)}
+        {!loading && currentTab === 'TRACING' && (<TracingPanel list={list} />)}
       </div>
     </div>
   )
 }
-
 export default AgentLogDetail
diff --git a/web/app/components/base/agent-log-modal/index.stories.tsx b/web/app/components/base/agent-log-modal/index.stories.tsx
index 87318848b4..e8b49600a5 100644
--- a/web/app/components/base/agent-log-modal/index.stories.tsx
+++ b/web/app/components/base/agent-log-modal/index.stories.tsx
@@ -3,7 +3,7 @@ import type { IChatItem } from '@/app/components/base/chat/chat/type'
 import type { AgentLogDetailResponse } from '@/models/log'
 import { useEffect, useRef } from 'react'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import { ToastProvider } from '@/app/components/base/toast'
+import { ToastHost } from '@/app/components/base/ui/toast'
 import AgentLogModal from '.'
 
 const MOCK_RESPONSE: AgentLogDetailResponse = {
@@ -109,7 +109,8 @@ const AgentLogModalDemo = ({
   }, [setAppDetail])
 
   return (
-    <ToastProvider>
+    <>
+      <ToastHost />
       <div className="relative min-h-[540px] w-full bg-background-default-subtle p-6">
         <AgentLogModal
           currentLogItem={MOCK_CHAT_ITEM}
@@ -119,7 +120,7 @@ const AgentLogModalDemo = ({
           }}
         />
       </div>
-    </ToastProvider>
+    </>
   )
 }
 
diff --git a/web/app/components/base/audio-btn/__tests__/audio.spec.ts b/web/app/components/base/audio-btn/__tests__/audio.spec.ts
index 00ffea2dfb..d898da4775 100644
--- a/web/app/components/base/audio-btn/__tests__/audio.spec.ts
+++ b/web/app/components/base/audio-btn/__tests__/audio.spec.ts
@@ -6,7 +6,7 @@ import AudioPlayer from '../audio'
 const mockToastNotify = vi.hoisted(() => vi.fn())
 const mockTextToAudioStream = vi.hoisted(() => vi.fn())
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/ui/toast', () => ({
   default: {
     notify: (...args: unknown[]) => mockToastNotify(...args),
   },
diff --git a/web/app/components/base/audio-btn/audio.ts b/web/app/components/base/audio-btn/audio.ts
index abfcad7c2f..5afe2bb656 100644
--- a/web/app/components/base/audio-btn/audio.ts
+++ b/web/app/components/base/audio-btn/audio.ts
@@ -1,4 +1,4 @@
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { AppSourceType, textToAudioStream } from '@/service/share'
 
 declare global {
@@ -7,7 +7,6 @@ declare global {
     ManagedMediaSource: any
   }
 }
-
 export default class AudioPlayer {
   mediaSource: MediaSource | null
   audio: HTMLAudioElement
@@ -22,7 +21,6 @@ export default class AudioPlayer {
   url: string
   isPublic: boolean
   callback: ((event: string) => void) | null
-
   constructor(streamUrl: string, isPublic: boolean, msgId: string | undefined, msgContent: string | null | undefined, voice: string | undefined, callback: ((event: string) => void) | null) {
     this.audioContext = new AudioContext()
     this.msgId = msgId
@@ -31,14 +29,10 @@ export default class AudioPlayer {
     this.isPublic = isPublic
     this.voice = voice
     this.callback = callback
-
     // Compatible with iphone ios17 ManagedMediaSource
     const MediaSource = window.ManagedMediaSource || window.MediaSource
     if (!MediaSource) {
-      Toast.notify({
-        message: 'Your browser does not support audio streaming, if you are using an iPhone, please update to iOS 17.1 or later.',
-        type: 'error',
-      })
+      toast.error('Your browser does not support audio streaming, if you are using an iPhone, please update to iOS 17.1 or later.')
     }
     this.mediaSource = MediaSource ? new MediaSource() : null
     this.audio = new Audio()
@@ -49,7 +43,6 @@ export default class AudioPlayer {
     }
     this.audio.src = this.mediaSource ? URL.createObjectURL(this.mediaSource) : ''
     this.audio.autoplay = true
-
     const source = this.audioContext.createMediaElementSource(this.audio)
     source.connect(this.audioContext.destination)
     this.listenMediaSource('audio/mpeg')
@@ -63,7 +56,6 @@ export default class AudioPlayer {
     this.mediaSource?.addEventListener('sourceopen', () => {
       if (this.sourceBuffer)
         return
-
       this.sourceBuffer = this.mediaSource?.addSourceBuffer(contentType)
     })
   }
@@ -106,22 +98,18 @@ export default class AudioPlayer {
         voice: this.voice,
         text: this.msgContent,
       })
-
       if (audioResponse.status !== 200) {
         this.isLoadData = false
         if (this.callback)
           this.callback('error')
       }
-
       const reader = audioResponse.body.getReader()
       while (true) {
         const { value, done } = await reader.read()
-
         if (done) {
           this.receiveAudioData(value)
           break
         }
-
         this.receiveAudioData(value)
       }
     }
@@ -167,7 +155,6 @@ export default class AudioPlayer {
         this.theEndOfStream()
         clearInterval(timer)
       }
-
       if (this.cacheBuffers.length && !this.sourceBuffer?.updating) {
         const arrayBuffer = this.cacheBuffers.shift()!
         this.sourceBuffer?.appendBuffer(arrayBuffer)
@@ -180,7 +167,6 @@ export default class AudioPlayer {
       this.finishStream()
       return
     }
-
     const audioContent = Buffer.from(audio, 'base64')
     this.receiveAudioData(new Uint8Array(audioContent))
     if (play) {
@@ -196,7 +182,6 @@ export default class AudioPlayer {
         this.callback?.('play')
       }
       else if (this.audio.played) { /* empty */ }
-
       else {
         this.audio.play()
         this.callback?.('play')
@@ -221,7 +206,6 @@ export default class AudioPlayer {
         this.finishStream()
       return
     }
-
     if (this.sourceBuffer?.updating) {
       this.cacheBuffers.push(audioData)
     }
diff --git a/web/app/components/base/audio-gallery/AudioPlayer.tsx b/web/app/components/base/audio-gallery/AudioPlayer.tsx
index cbf50ddc13..5a0a753ecf 100644
--- a/web/app/components/base/audio-gallery/AudioPlayer.tsx
+++ b/web/app/components/base/audio-gallery/AudioPlayer.tsx
@@ -1,7 +1,7 @@
 import { t } from 'i18next'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import useTheme from '@/hooks/use-theme'
 import { Theme } from '@/types/app'
 import { cn } from '@/utils/classnames'
@@ -10,7 +10,6 @@ type AudioPlayerProps = {
   src?: string // Keep backward compatibility
   srcs?: string[] // Support multiple sources
 }
-
 const AudioPlayer: React.FC<AudioPlayerProps> = ({ src, srcs }) => {
   const [isPlaying, setIsPlaying] = useState(false)
   const [currentTime, setCurrentTime] = useState(0)
@@ -23,43 +22,34 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({ src, srcs }) => {
   const [hoverTime, setHoverTime] = useState(0)
   const [isAudioAvailable, setIsAudioAvailable] = useState(true)
   const { theme } = useTheme()
-
   useEffect(() => {
     const audio = audioRef.current
     /* v8 ignore next 2 - @preserve */
     if (!audio)
       return
-
     const handleError = () => {
       setIsAudioAvailable(false)
     }
-
     const setAudioData = () => {
       setDuration(audio.duration)
     }
-
     const setAudioTime = () => {
       setCurrentTime(audio.currentTime)
     }
-
     const handleProgress = () => {
       if (audio.buffered.length > 0)
         setBufferedTime(audio.buffered.end(audio.buffered.length - 1))
     }
-
     const handleEnded = () => {
       setIsPlaying(false)
     }
-
     audio.addEventListener('loadedmetadata', setAudioData)
     audio.addEventListener('timeupdate', setAudioTime)
     audio.addEventListener('progress', handleProgress)
     audio.addEventListener('ended', handleEnded)
     audio.addEventListener('error', handleError)
-
     // Preload audio metadata
     audio.load()
-
     // Use the first source or src to generate waveform
     const primarySrc = srcs?.[0] || src
     if (primarySrc) {
@@ -76,17 +66,12 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({ src, srcs }) => {
       }
     }
   }, [src, srcs])
-
   const generateWaveformData = async (audioSrc: string) => {
     if (!window.AudioContext && !(window as any).webkitAudioContext) {
       setIsAudioAvailable(false)
-      Toast.notify({
-        type: 'error',
-        message: 'Web Audio API is not supported in this browser',
-      })
+      toast.error('Web Audio API is not supported in this browser')
       return null
     }
-
     const primarySrc = srcs?.[0] || src
     const url = primarySrc ? new URL(primarySrc) : null
     const isHttp = url ? (url.protocol === 'http:' || url.protocol === 'https:') : false
@@ -94,53 +79,43 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({ src, srcs }) => {
       setIsAudioAvailable(false)
       return null
     }
-
     const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)()
     const samples = 70
-
     try {
       const response = await fetch(audioSrc, { mode: 'cors' })
       if (!response || !response.ok) {
         setIsAudioAvailable(false)
         return null
       }
-
       const arrayBuffer = await response.arrayBuffer()
       const audioBuffer = await audioContext.decodeAudioData(arrayBuffer)
       const channelData = audioBuffer.getChannelData(0)
       const blockSize = Math.floor(channelData.length / samples)
       const waveformData: number[] = []
-
       for (let i = 0; i < samples; i++) {
         let sum = 0
         for (let j = 0; j < blockSize; j++)
           sum += Math.abs(channelData[i * blockSize + j])
-
         // Apply nonlinear scaling to enhance small amplitudes
         waveformData.push((sum / blockSize) * 5)
       }
-
       // Normalized waveform data
       const maxAmplitude = Math.max(...waveformData)
       const normalizedWaveform = waveformData.map(amp => amp / maxAmplitude)
-
       setWaveformData(normalizedWaveform)
       setIsAudioAvailable(true)
     }
     catch {
       const waveform: number[] = []
       let prevValue = Math.random()
-
       for (let i = 0; i < samples; i++) {
         const targetValue = Math.random()
         const interpolatedValue = prevValue + (targetValue - prevValue) * 0.3
         waveform.push(interpolatedValue)
         prevValue = interpolatedValue
       }
-
       const maxAmplitude = Math.max(...waveform)
       const randomWaveform = waveform.map(amp => amp / maxAmplitude)
-
       setWaveformData(randomWaveform)
       setIsAudioAvailable(true)
     }
@@ -148,7 +123,6 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({ src, srcs }) => {
       await audioContext.close()
     }
   }
-
   const togglePlay = useCallback(() => {
     const audio = audioRef.current
     if (audio && isAudioAvailable) {
@@ -160,99 +134,75 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({ src, srcs }) => {
         setHasStartedPlaying(true)
         audio.play().catch(error => console.error('Error playing audio:', error))
       }
-
       setIsPlaying(!isPlaying)
     }
     else {
-      Toast.notify({
-        type: 'error',
-        message: 'Audio element not found',
-      })
+      toast.error('Audio element not found')
       setIsAudioAvailable(false)
     }
   }, [isAudioAvailable, isPlaying])
-
   const handleCanvasInteraction = useCallback((e: React.MouseEvent | React.TouchEvent) => {
     e.preventDefault()
-
     const getClientX = (event: React.MouseEvent | React.TouchEvent): number => {
       if ('touches' in event)
         return event.touches[0].clientX
       return event.clientX
     }
-
     const updateProgress = (clientX: number) => {
       const canvas = canvasRef.current
       const audio = audioRef.current
       if (!canvas || !audio)
         return
-
       const rect = canvas.getBoundingClientRect()
       const percent = Math.min(Math.max(0, clientX - rect.left), rect.width) / rect.width
       const newTime = percent * duration
-
       // Removes the buffer check, allowing drag to any location
       audio.currentTime = newTime
       setCurrentTime(newTime)
-
       if (!isPlaying) {
         setIsPlaying(true)
         audio.play().catch((error) => {
-          Toast.notify({
-            type: 'error',
-            message: `Error playing audio: ${error}`,
-          })
+          toast.error(`Error playing audio: ${error}`)
           setIsPlaying(false)
         })
       }
     }
-
     updateProgress(getClientX(e))
   }, [duration, isPlaying])
-
   const formatTime = (time: number) => {
     const minutes = Math.floor(time / 60)
     const seconds = Math.floor(time % 60)
     return `${minutes}:${seconds.toString().padStart(2, '0')}`
   }
-
   const drawWaveform = useCallback(() => {
     const canvas = canvasRef.current
     /* v8 ignore next 2 - @preserve */
     if (!canvas)
       return
-
     const ctx = canvas.getContext('2d')
     if (!ctx)
       return
-
     const width = canvas.width
     const height = canvas.height
     const data = waveformData
-
     ctx.clearRect(0, 0, width, height)
-
     const barWidth = width / data.length
     const playedWidth = (currentTime / duration) * width
     const cornerRadius = 2
-
     // Draw waveform bars
     data.forEach((value, index) => {
       let color
-
       if (index * barWidth <= playedWidth)
         color = theme === Theme.light ? '#296DFF' : '#84ABFF'
       else if ((index * barWidth / width) * duration <= hoverTime)
         color = theme === Theme.light ? 'rgba(21,90,239,.40)' : 'rgba(200, 206, 218, 0.28)'
       else
         color = theme === Theme.light ? 'rgba(21,90,239,.20)' : 'rgba(200, 206, 218, 0.14)'
-
       const barHeight = value * height
       const rectX = index * barWidth
       const rectY = (height - barHeight) / 2
       const rectWidth = barWidth * 0.5
       const rectHeight = barHeight
-
       ctx.lineWidth = 1
       ctx.fillStyle = color
       if (ctx.roundRect) {
@@ -265,27 +215,22 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({ src, srcs }) => {
       }
     })
   }, [currentTime, duration, hoverTime, theme, waveformData])
-
   useEffect(() => {
     drawWaveform()
   }, [drawWaveform, bufferedTime, hasStartedPlaying])
-
   const handleMouseMove = useCallback((e: React.MouseEvent<HTMLCanvasElement> | React.TouchEvent<HTMLCanvasElement>) => {
     const canvas = canvasRef.current
     const audio = audioRef.current
     if (!canvas || !audio)
       return
-
     const clientX = 'touches' in e
       ? e.touches[0]?.clientX ?? e.changedTouches[0]?.clientX
       : e.clientX
     if (clientX === undefined)
       return
-
     const rect = canvas.getBoundingClientRect()
     const percent = Math.min(Math.max(0, clientX - rect.left), rect.width) / rect.width
     const time = percent * duration
-
     // Check if the hovered position is within a buffered range before updating hoverTime
     for (let i = 0; i < audio.buffered.length; i++) {
       if (time >= audio.buffered.start(i) && time <= audio.buffered.end(i)) {
@@ -294,38 +239,20 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({ src, srcs }) => {
       }
     }
   }, [duration])
-
   return (
     <div className="flex h-9 min-w-[240px] max-w-[420px] items-center gap-2 rounded-[10px] border border-components-panel-border-subtle bg-components-chat-input-audio-bg-alt p-2 shadow-xs backdrop-blur-sm">
       <audio ref={audioRef} src={src} preload="auto" data-testid="audio-player">
         {/* If srcs array is provided, render multiple source elements */}
-        {srcs && srcs.map((srcUrl, index) => (
-          <source key={index} src={srcUrl} />
-        ))}
+        {srcs && srcs.map((srcUrl, index) => (<source key={index} src={srcUrl} />))}
       </audio>
-      <button
-        type="button"
-        data-testid="play-pause-btn"
-        className="inline-flex shrink-0 cursor-pointer items-center justify-center border-none text-text-accent transition-all hover:text-text-accent-secondary disabled:text-components-button-primary-bg-disabled"
-        onClick={togglePlay}
-        disabled={!isAudioAvailable}
-      >
+      <button type="button" data-testid="play-pause-btn" className="inline-flex shrink-0 cursor-pointer items-center justify-center border-none text-text-accent transition-all hover:text-text-accent-secondary disabled:text-components-button-primary-bg-disabled" onClick={togglePlay} disabled={!isAudioAvailable}>
         {isPlaying
           ? (<div className="i-ri-pause-circle-fill h-5 w-5" />)
           : (<div className="i-ri-play-large-fill h-5 w-5" />)}
       </button>
       <div className={cn(isAudioAvailable && 'grow')} hidden={!isAudioAvailable}>
         <div className="flex h-8 items-center justify-center">
-          <canvas
-            ref={canvasRef}
-            data-testid="waveform-canvas"
-            className="relative flex h-6 w-full grow cursor-pointer items-center justify-center"
-            onClick={handleCanvasInteraction}
-            onMouseMove={handleMouseMove}
-            onMouseDown={handleCanvasInteraction}
-            onTouchMove={handleMouseMove}
-            onTouchStart={handleCanvasInteraction}
-          />
+          <canvas ref={canvasRef} data-testid="waveform-canvas" className="relative flex h-6 w-full grow cursor-pointer items-center justify-center" onClick={handleCanvasInteraction} onMouseMove={handleMouseMove} onMouseDown={handleCanvasInteraction} onTouchMove={handleMouseMove} onTouchStart={handleCanvasInteraction} />
           <div className="inline-flex min-w-[50px] items-center justify-center text-text-accent-secondary system-xs-medium">
             <span className="rounded-[10px] px-0.5 py-1">{formatTime(duration)}</span>
           </div>
@@ -335,5 +262,4 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({ src, srcs }) => {
     </div>
   )
 }
-
 export default AudioPlayer
diff --git a/web/app/components/base/audio-gallery/__tests__/AudioPlayer.spec.tsx b/web/app/components/base/audio-gallery/__tests__/AudioPlayer.spec.tsx
index 04db89cded..7051399755 100644
--- a/web/app/components/base/audio-gallery/__tests__/AudioPlayer.spec.tsx
+++ b/web/app/components/base/audio-gallery/__tests__/AudioPlayer.spec.tsx
@@ -1,6 +1,5 @@
-import type { ToastHandle } from '@/app/components/base/toast'
 import { act, fireEvent, render, screen } from '@testing-library/react'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import useThemeMock from '@/hooks/use-theme'
 import { Theme } from '@/types/app'
 import AudioPlayer from '../AudioPlayer'
@@ -263,10 +262,12 @@ describe('AudioPlayer — waveform generation', () => {
 
   it('should show Toast when AudioContext is not available', async () => {
     vi.stubGlobal('AudioContext', undefined)
+    const toastSpy = vi.spyOn(toast, 'error').mockReturnValue('toast-error')
 
     render(<AudioPlayer src="https://example.com/audio.mp3" />)
     await advanceWaveformTimer()
 
+    expect(toastSpy).toHaveBeenCalledWith('Web Audio API is not supported in this browser')
     const toastFound = Array.from(document.body.querySelectorAll('div')).some(
       d => d.textContent?.includes('Web Audio API is not supported in this browser'),
     )
@@ -529,7 +530,7 @@ describe('AudioPlayer — missing coverage', () => {
 
   it('should keep play button disabled when source is unavailable', async () => {
     vi.stubGlobal('AudioContext', buildAudioContext(300))
-    const toastSpy = vi.spyOn(Toast, 'notify').mockImplementation(() => ({} as unknown as ToastHandle))
+    const toastSpy = vi.spyOn(toast, 'error').mockReturnValue('toast-error')
     render(<AudioPlayer src="blob:https://example.com" />)
     await advanceWaveformTimer() // sets isAudioAvailable to false (invalid protocol)
 
@@ -545,7 +546,7 @@ describe('AudioPlayer — missing coverage', () => {
   })
 
   it('should notify when toggle is invoked while audio is unavailable', async () => {
-    const toastSpy = vi.spyOn(Toast, 'notify').mockImplementation(() => ({} as unknown as ToastHandle))
+    const toastSpy = vi.spyOn(toast, 'error').mockReturnValue('toast-error')
     render(<AudioPlayer src="https://example.com/a.mp3" />)
     const audio = document.querySelector('audio') as HTMLAudioElement
     await act(async () => {
@@ -559,10 +560,7 @@ describe('AudioPlayer — missing coverage', () => {
       props.onClick?.()
     })
 
-    expect(toastSpy).toHaveBeenCalledWith(expect.objectContaining({
-      type: 'error',
-      message: 'Audio element not found',
-    }))
+    expect(toastSpy).toHaveBeenCalledWith('Audio element not found')
     toastSpy.mockRestore()
   })
 })
@@ -626,7 +624,7 @@ describe('AudioPlayer — additional branch coverage', () => {
   })
 
   it('should ignore toggle click after audio error marks source unavailable', async () => {
-    const toastSpy = vi.spyOn(Toast, 'notify').mockImplementation(() => ({} as unknown as ToastHandle))
+    const toastSpy = vi.spyOn(toast, 'error').mockReturnValue('toast-error')
     render(<AudioPlayer src="https://example.com/a.mp3" />)
     const audio = document.querySelector('audio') as HTMLAudioElement
     await act(async () => {
diff --git a/web/app/components/base/block-input/__tests__/index.spec.tsx b/web/app/components/base/block-input/__tests__/index.spec.tsx
index 233de1937e..01dbc7bfb8 100644
--- a/web/app/components/base/block-input/__tests__/index.spec.tsx
+++ b/web/app/components/base/block-input/__tests__/index.spec.tsx
@@ -1,6 +1,6 @@
 import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import BlockInput, { getInputKeys } from '../index'
 
 vi.mock('@/utils/var', () => ({
@@ -14,7 +14,7 @@ vi.mock('@/utils/var', () => ({
 describe('BlockInput', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    vi.spyOn(Toast, 'notify')
+    vi.spyOn(toast, 'error').mockReturnValue('toast-error')
     cleanup()
   })
 
@@ -138,7 +138,7 @@ describe('BlockInput', () => {
       fireEvent.change(textarea, { target: { value: '{{invalid}}' } })
 
       await waitFor(() => {
-        expect(Toast.notify).toHaveBeenCalled()
+        expect(toast.error).toHaveBeenCalled()
       })
       expect(onConfirm).not.toHaveBeenCalled()
     })
diff --git a/web/app/components/base/block-input/index.tsx b/web/app/components/base/block-input/index.tsx
index 05bb95e10b..528e4f7887 100644
--- a/web/app/components/base/block-input/index.tsx
+++ b/web/app/components/base/block-input/index.tsx
@@ -1,17 +1,14 @@
 'use client'
-
 import type { ChangeEvent, FC } from 'react'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { toast } from '@/app/components/base/ui/toast'
 import { cn } from '@/utils/classnames'
 import { checkKeys } from '@/utils/var'
 import VarHighlight from '../../app/configuration/base/var-highlight'
-import Toast from '../toast'
-
 // regex to match the {{}} and replace it with a span
 const regex = /\{\{([^}]+)\}\}/g
-
 export const getInputKeys = (value: string) => {
   const keys = value.match(regex)?.map((item) => {
     return item.replace('{{', '').replace('}}', '')
@@ -22,13 +19,11 @@ export const getInputKeys = (value: string) => {
   keys.forEach((key) => {
     if (keyObj[key])
       return
-
     keyObj[key] = true
     res.push(key)
   })
   return res
 }
-
 export type IBlockInputProps = {
   value: string
   className?: string // wrapper class
@@ -36,20 +31,13 @@ export type IBlockInputProps = {
   readonly?: boolean
   onConfirm?: (value: string, keys: string[]) => void
 }
-
-const BlockInput: FC<IBlockInputProps> = ({
-  value = '',
-  className,
-  readonly = false,
-  onConfirm,
-}) => {
+const BlockInput: FC<IBlockInputProps> = ({ value = '', className, readonly = false, onConfirm }) => {
   const { t } = useTranslation()
   // current is used to store the current value of the contentEditable element
   const [currentValue, setCurrentValue] = useState<string>(value)
   useEffect(() => {
     setCurrentValue(value)
   }, [value])
-
   const contentEditableRef = useRef<HTMLTextAreaElement>(null)
   const [isEditing, setIsEditing] = useState<boolean>(false)
   useEffect(() => {
@@ -57,57 +45,42 @@ const BlockInput: FC<IBlockInputProps> = ({
       // TODO: Focus at the click position
       if (currentValue)
         contentEditableRef.current.setSelectionRange(currentValue.length, currentValue.length)
-
       contentEditableRef.current.focus()
     }
   }, [isEditing])
-
   const style = cn({
     'block h-full w-full break-all border-0 px-4 py-2 text-sm text-gray-900 outline-0': true,
     'block-input--editing': isEditing,
   })
-
   const renderSafeContent = (value: string) => {
     const parts = value.split(/(\{\{[^}]+\}\}|\n)/g)
     return parts.map((part, index) => {
       const variableMatch = /^\{\{([^}]+)\}\}$/.exec(part)
       if (variableMatch) {
-        return (
-          <VarHighlight
-            key={`var-${index}`}
-            name={variableMatch[1]}
-          />
-        )
+        return (<VarHighlight key={`var-${index}`} name={variableMatch[1]} />)
       }
       if (part === '\n')
         return <br key={`br-${index}`} />
-
       return <span key={`text-${index}`}>{part}</span>
     })
   }
-
   // Not use useCallback. That will cause out callback get old data.
   const handleSubmit = (value: string) => {
     if (onConfirm) {
       const keys = getInputKeys(value)
       const result = checkKeys(keys)
       if (!result.isValid) {
-        Toast.notify({
-          type: 'error',
-          message: t(`varKeyError.${result.errorMessageKey}`, { ns: 'appDebug', key: result.errorKey }),
-        })
+        toast.error(t(`varKeyError.${result.errorMessageKey}`, { ns: 'appDebug', key: result.errorKey }))
         return
       }
       onConfirm(value, keys)
     }
   }
-
   const onValueChange = useCallback((e: ChangeEvent<HTMLTextAreaElement>) => {
     const value = e.target.value
     setCurrentValue(value)
     handleSubmit(value)
   }, [])
-
   // Prevent rerendering caused cursor to jump to the start of the contentEditable element
   const TextAreaContentView = () => {
     return (
@@ -116,10 +89,8 @@ const BlockInput: FC<IBlockInputProps> = ({
       </div>
     )
   }
-
   const placeholder = ''
   const editAreaClassName = 'focus:outline-none bg-transparent text-sm'
-
   const textAreaContent = (
     <div className={cn(readonly ? 'max-h-[180px] pb-5' : 'h-[180px]', 'overflow-y-auto')} onClick={() => !readonly && setIsEditing(true)}>
       {isEditing
@@ -134,10 +105,10 @@ const BlockInput: FC<IBlockInputProps> = ({
                 onBlur={() => {
                   blur()
                   setIsEditing(false)
-                // click confirm also make blur. Then outer value is change. So below code has problem.
-                // setTimeout(() => {
-                //   handleCancel()
-                // }, 1000)
+                  // click confirm also make blur. Then outer value is change. So below code has problem.
+                  // setTimeout(() => {
+                  //   handleCancel()
+                  // }, 1000)
                 }}
               />
             </div>
@@ -145,7 +116,6 @@ const BlockInput: FC<IBlockInputProps> = ({
         : <TextAreaContentView />}
     </div>
   )
-
   return (
     <div className={cn('block-input w-full overflow-y-auto rounded-xl border-none bg-white')} data-testid="block-input">
       {textAreaContent}
@@ -159,5 +129,4 @@ const BlockInput: FC<IBlockInputProps> = ({
     </div>
   )
 }
-
 export default React.memo(BlockInput)
diff --git a/web/app/components/base/chat/chat-with-history/__tests__/hooks.spec.tsx b/web/app/components/base/chat/chat-with-history/__tests__/hooks.spec.tsx
index b004a1bee6..f4c8ef0c45 100644
--- a/web/app/components/base/chat/chat-with-history/__tests__/hooks.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/__tests__/hooks.spec.tsx
@@ -4,7 +4,7 @@ import type { InstalledApp } from '@/models/explore'
 import type { AppConversationData, AppData, AppMeta, ConversationItem } from '@/models/share'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { act, renderHook, waitFor } from '@testing-library/react'
-import { ToastProvider } from '@/app/components/base/toast'
+import { ToastHost } from '@/app/components/base/ui/toast'
 import {
   AppSourceType,
   delConversation,
@@ -95,7 +95,8 @@ const createQueryClient = () => new QueryClient({
 const createWrapper = (queryClient: QueryClient) => {
   return ({ children }: { children: ReactNode }) => (
     <QueryClientProvider client={queryClient}>
-      <ToastProvider>{children}</ToastProvider>
+      <ToastHost />
+      {children}
     </QueryClientProvider>
   )
 }
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 e19c57bd83..4bd894d63f 100644
--- a/web/app/components/base/chat/chat-with-history/hooks.tsx
+++ b/web/app/components/base/chat/chat-with-history/hooks.tsx
@@ -1,47 +1,21 @@
 import type { ExtraContent } from '../chat/type'
-import type {
-  Callback,
-  ChatConfig,
-  ChatItem,
-  Feedback,
-} from '../types'
+import type { Callback, ChatConfig, ChatItem, Feedback } from '../types'
 import type { InstalledApp } from '@/models/explore'
-import type {
-  AppData,
-  ConversationItem,
-} from '@/models/share'
+import type { AppData, ConversationItem } from '@/models/share'
 import type { HumanInputFilledFormData, HumanInputFormData } from '@/types/workflow'
 import { useLocalStorageState } from 'ahooks'
 import { noop } from 'es-toolkit/function'
 import { produce } from 'immer'
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { getProcessedFilesFromResponse } from '@/app/components/base/file-uploader/utils'
-import { useToastContext } from '@/app/components/base/toast/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { InputVarType } from '@/app/components/workflow/types'
 import { useWebAppStore } from '@/context/web-app-context'
 import { useAppFavicon } from '@/hooks/use-app-favicon'
 import { changeLanguage } from '@/i18n-config/client'
-import {
-  AppSourceType,
-  delConversation,
-  pinConversation,
-  renameConversation,
-  unpinConversation,
-  updateFeedback,
-} from '@/service/share'
-import {
-  useInvalidateShareConversations,
-  useShareChatList,
-  useShareConversationName,
-  useShareConversations,
-} from '@/service/use-share'
+import { AppSourceType, delConversation, pinConversation, renameConversation, unpinConversation, updateFeedback } from '@/service/share'
+import { useInvalidateShareConversations, useShareChatList, useShareConversationName, useShareConversations } from '@/service/use-share'
 import { TransferMethod } from '@/types/app'
 import { addFileInfos, sortAgentSorts } from '../../../tools/utils'
 import { CONVERSATION_ID_INFO } from '../constants'
@@ -94,14 +68,12 @@ function getFormattedChatList(messages: any[]) {
   })
   return newChatList
 }
-
 export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
   const isInstalledApp = useMemo(() => !!installedAppInfo, [installedAppInfo])
   const appSourceType = isInstalledApp ? AppSourceType.installedApp : AppSourceType.webApp
   const appInfo = useWebAppStore(s => s.appInfo)
   const appParams = useWebAppStore(s => s.appParams)
   const appMeta = useWebAppStore(s => s.appMeta)
-
   useAppFavicon({
     enable: !installedAppInfo,
     icon_type: appInfo?.site.icon_type,
@@ -109,7 +81,6 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
     icon_background: appInfo?.site.icon_background,
     icon_url: appInfo?.site.icon_url,
   })
-
   const appData = useMemo(() => {
     if (isInstalledApp) {
       const { id, app } = installedAppInfo!
@@ -130,18 +101,15 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
         custom_config: null,
       } as AppData
     }
-
     return appInfo
   }, [isInstalledApp, installedAppInfo, appInfo])
   const appId = useMemo(() => appData?.app_id, [appData])
-
   const [userId, setUserId] = useState<string>()
   useEffect(() => {
     getProcessedSystemVariablesFromUrlParams().then(({ user_id }) => {
       setUserId(user_id)
     })
   }, [])
-
   useEffect(() => {
     const setLocaleFromProps = async () => {
       if (appData?.site.default_language)
@@ -149,7 +117,6 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
     }
     setLocaleFromProps()
   }, [appData])
-
   const [sidebarCollapseState, setSidebarCollapseState] = useState<boolean>(() => {
     if (typeof window !== 'undefined') {
       try {
@@ -193,15 +160,12 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
       })
     }
   }, [appId, conversationIdInfo, setConversationIdInfo, userId])
-
   const [newConversationId, setNewConversationId] = useState('')
   const chatShouldReloadKey = useMemo(() => {
     if (currentConversationId === newConversationId)
       return ''
-
     return currentConversationId
   }, [currentConversationId, newConversationId])
-
   const { data: appPinnedConversationData } = useShareConversations({
     appSourceType,
     appId,
@@ -212,10 +176,7 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
     refetchOnWindowFocus: false,
     refetchOnReconnect: false,
   })
-  const {
-    data: appConversationData,
-    isLoading: appConversationDataLoading,
-  } = useShareConversations({
+  const { data: appConversationData, isLoading: appConversationDataLoading } = useShareConversations({
     appSourceType,
     appId,
     pinned: false,
@@ -225,10 +186,7 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
     refetchOnWindowFocus: false,
     refetchOnReconnect: false,
   })
-  const {
-    data: appChatListData,
-    isLoading: appChatListDataLoading,
-  } = useShareChatList({
+  const { data: appChatListData, isLoading: appChatListDataLoading } = useShareChatList({
     conversationId: chatShouldReloadKey,
     appSourceType,
     appId,
@@ -238,18 +196,12 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
     refetchOnReconnect: false,
   })
   const invalidateShareConversations = useInvalidateShareConversations()
-
   const [clearChatList, setClearChatList] = useState(false)
   const [isResponding, setIsResponding] = useState(false)
-  const appPrevChatTree = useMemo(
-    () => (currentConversationId && appChatListData?.data.length)
-      ? buildChatItemTree(getFormattedChatList(appChatListData.data))
-      : [],
-    [appChatListData, currentConversationId],
-  )
-
+  const appPrevChatTree = useMemo(() => (currentConversationId && appChatListData?.data.length)
+    ? buildChatItemTree(getFormattedChatList(appChatListData.data))
+    : [], [appChatListData, currentConversationId])
   const [showNewConversationItemInList, setShowNewConversationItemInList] = useState(false)
-
   const pinnedConversationList = useMemo(() => {
     return appPinnedConversationData?.data || []
   }, [appPinnedConversationData])
@@ -268,7 +220,6 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
         let value = initInputs[item.paragraph.variable]
         if (value && item.paragraph.max_length && value.length > item.paragraph.max_length)
           value = value.slice(0, item.paragraph.max_length)
-
         return {
           ...item.paragraph,
           default: value || item.default || item.paragraph.default,
@@ -283,7 +234,6 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
           type: 'number',
         }
       }
-
       if (item.checkbox) {
         const preset = initInputs[item.checkbox.variable] === true
         return {
@@ -292,7 +242,6 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
           type: 'checkbox',
         }
       }
-
       if (item.select) {
         const isInputInOptions = item.select.options.includes(initInputs[item.select.variable])
         return {
@@ -301,32 +250,27 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
           type: 'select',
         }
       }
-
       if (item['file-list']) {
         return {
           ...item['file-list'],
           type: 'file-list',
         }
       }
-
       if (item.file) {
         return {
           ...item.file,
           type: 'file',
         }
       }
-
       if (item.json_object) {
         return {
           ...item.json_object,
           type: 'json_object',
         }
       }
-
       let value = initInputs[item['text-input'].variable]
       if (value && item['text-input'].max_length && value.length > item['text-input'].max_length)
         value = value.slice(0, item['text-input'].max_length)
-
       return {
         ...item['text-input'],
         default: value || item.default || item['text-input'].default,
@@ -334,11 +278,9 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
       }
     })
   }, [initInputs, appParams])
-
   const allInputsHidden = useMemo(() => {
     return inputsForms.length > 0 && inputsForms.every(item => item.hide === true)
   }, [inputsForms])
-
   useEffect(() => {
     // init inputs from url params
     (async () => {
@@ -348,16 +290,13 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
       setInitUserVariables(userVariables)
     })()
   }, [])
-
   useEffect(() => {
     const conversationInputs: Record<string, any> = {}
-
     inputsForms.forEach((item: any) => {
       conversationInputs[item.variable] = item.default || null
     })
     handleNewConversationInputsChange(conversationInputs)
   }, [handleNewConversationInputsChange, inputsForms])
-
   const { data: newConversation } = useShareConversationName({
     conversationId: newConversationId,
     appSourceType,
@@ -373,7 +312,6 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
   }, [appConversationData, appConversationDataLoading])
   const conversationList = useMemo(() => {
     const data = originConversationList.slice()
-
     if (showNewConversationItemInList && data[0]?.id !== '') {
       data.unshift({
         id: '',
@@ -384,12 +322,10 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
     }
     return data
   }, [originConversationList, showNewConversationItemInList, t])
-
   useEffect(() => {
     if (newConversation) {
       setOriginConversationList(produce((draft) => {
         const index = draft.findIndex(item => item.id === newConversation.id)
-
         if (index > -1)
           draft[index] = newConversation
         else
@@ -397,16 +333,12 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
       }))
     }
   }, [newConversation])
-
   const currentConversationItem = useMemo(() => {
     let conversationItem = conversationList.find(item => item.id === currentConversationId)
-
     if (!conversationItem && pinnedConversationList.length)
       conversationItem = pinnedConversationList.find(item => item.id === currentConversationId)
-
     return conversationItem
   }, [conversationList, currentConversationId, pinnedConversationList])
-
   const currentConversationLatestInputs = useMemo(() => {
     if (!currentConversationId || !appChatListData?.data.length)
       return newConversationInputsRef.current || {}
@@ -417,12 +349,9 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
     if (currentConversationItem)
       setCurrentConversationInputs(currentConversationLatestInputs || {})
   }, [currentConversationItem, currentConversationLatestInputs])
-
-  const { notify } = useToastContext()
   const checkInputsRequired = useCallback((silent?: boolean) => {
     if (allInputsHidden)
       return true
-
     let hasEmptyInput = ''
     let fileIsUploading = false
     const requiredVars = inputsForms.filter(({ required, type }) => required && type !== InputVarType.checkbox)
@@ -430,13 +359,10 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
       requiredVars.forEach(({ variable, label, type }) => {
         if (hasEmptyInput)
           return
-
         if (fileIsUploading)
           return
-
         if (!newConversationInputsRef.current[variable] && !silent)
           hasEmptyInput = label as string
-
         if ((type === InputVarType.singleFile || type === InputVarType.multiFiles) && newConversationInputsRef.current[variable] && !silent) {
           const files = newConversationInputsRef.current[variable]
           if (Array.isArray(files))
@@ -446,26 +372,25 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
         }
       })
     }
-
     if (hasEmptyInput) {
-      notify({ type: 'error', message: t('errorMessage.valueOfVarRequired', { ns: 'appDebug', key: hasEmptyInput }) })
+      toast.error(t('errorMessage.valueOfVarRequired', { ns: 'appDebug', key: hasEmptyInput }))
       return false
     }
-
     if (fileIsUploading) {
-      notify({ type: 'info', message: t('errorMessage.waitForFileUpload', { ns: 'appDebug' }) })
+      toast.info(t('errorMessage.waitForFileUpload', { ns: 'appDebug' }))
       return
     }
-
     return true
-  }, [inputsForms, notify, t, allInputsHidden])
+  }, [inputsForms, t, allInputsHidden])
   const handleStartChat = useCallback((callback: any) => {
     if (checkInputsRequired()) {
       setShowNewConversationItemInList(true)
       callback?.()
     }
   }, [setShowNewConversationItemInList, checkInputsRequired])
-  const currentChatInstanceRef = useRef<{ handleStop: () => void }>({ handleStop: noop })
+  const currentChatInstanceRef = useRef<{
+    handleStop: () => void
+  }>({ handleStop: noop })
   const handleChangeConversation = useCallback((conversationId: string) => {
     currentChatInstanceRef.current.handleStop()
     setNewConversationId('')
@@ -487,76 +412,48 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
   const handleUpdateConversationList = useCallback(() => {
     invalidateShareConversations()
   }, [invalidateShareConversations])
-
   const handlePinConversation = useCallback(async (conversationId: string) => {
     await pinConversation(appSourceType, appId, conversationId)
-    notify({ type: 'success', message: t('api.success', { ns: 'common' }) })
+    toast.success(t('api.success', { ns: 'common' }))
     handleUpdateConversationList()
-  }, [appSourceType, appId, notify, t, handleUpdateConversationList])
-
+  }, [appSourceType, appId, t, handleUpdateConversationList])
   const handleUnpinConversation = useCallback(async (conversationId: string) => {
     await unpinConversation(appSourceType, appId, conversationId)
-    notify({ type: 'success', message: t('api.success', { ns: 'common' }) })
+    toast.success(t('api.success', { ns: 'common' }))
     handleUpdateConversationList()
-  }, [appSourceType, appId, notify, t, handleUpdateConversationList])
-
+  }, [appSourceType, appId, t, handleUpdateConversationList])
   const [conversationDeleting, setConversationDeleting] = useState(false)
-  const handleDeleteConversation = useCallback(async (
-    conversationId: string,
-    {
-      onSuccess,
-    }: Callback,
-  ) => {
+  const handleDeleteConversation = useCallback(async (conversationId: string, { onSuccess }: Callback) => {
     if (conversationDeleting)
       return
-
     try {
       setConversationDeleting(true)
       await delConversation(appSourceType, appId, conversationId)
-      notify({ type: 'success', message: t('api.success', { ns: 'common' }) })
+      toast.success(t('api.success', { ns: 'common' }))
       onSuccess()
     }
     finally {
       setConversationDeleting(false)
     }
-
     if (conversationId === currentConversationId)
       handleNewConversation()
-
     handleUpdateConversationList()
-  }, [isInstalledApp, appId, notify, t, handleUpdateConversationList, handleNewConversation, currentConversationId, conversationDeleting])
-
+  }, [isInstalledApp, appId, t, handleUpdateConversationList, handleNewConversation, currentConversationId, conversationDeleting])
   const [conversationRenaming, setConversationRenaming] = useState(false)
-  const handleRenameConversation = useCallback(async (
-    conversationId: string,
-    newName: string,
-    {
-      onSuccess,
-    }: Callback,
-  ) => {
+  const handleRenameConversation = useCallback(async (conversationId: string, newName: string, { onSuccess }: Callback) => {
     if (conversationRenaming)
       return
-
     if (!newName.trim()) {
-      notify({
-        type: 'error',
-        message: t('chat.conversationNameCanNotEmpty', { ns: 'common' }),
-      })
+      toast.error(t('chat.conversationNameCanNotEmpty', { ns: 'common' }))
       return
     }
-
     setConversationRenaming(true)
     try {
       await renameConversation(appSourceType, appId, conversationId, newName)
-
-      notify({
-        type: 'success',
-        message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }),
-      })
+      toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
       setOriginConversationList(produce((draft) => {
         const index = originConversationList.findIndex(item => item.id === conversationId)
         const item = draft[index]
-
         draft[index] = {
           ...item,
           name: newName,
@@ -567,20 +464,17 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
     finally {
       setConversationRenaming(false)
     }
-  }, [isInstalledApp, appId, notify, t, conversationRenaming, originConversationList])
-
+  }, [isInstalledApp, appId, t, conversationRenaming, originConversationList])
   const handleNewConversationCompleted = useCallback((newConversationId: string) => {
     setNewConversationId(newConversationId)
     handleConversationIdInfoChange(newConversationId)
     setShowNewConversationItemInList(false)
     invalidateShareConversations()
   }, [handleConversationIdInfoChange, invalidateShareConversations])
-
   const handleFeedback = useCallback(async (messageId: string, feedback: Feedback) => {
     await updateFeedback({ url: `/messages/${messageId}/feedbacks`, body: { rating: feedback.rating, content: feedback.content } }, appSourceType, appId)
-    notify({ type: 'success', message: t('api.success', { ns: 'common' }) })
-  }, [appSourceType, appId, t, notify])
-
+    toast.success(t('api.success', { ns: 'common' }))
+  }, [appSourceType, appId, t])
   return {
     isInstalledApp,
     appId,
diff --git a/web/app/components/base/chat/chat/__tests__/check-input-forms-hooks.spec.tsx b/web/app/components/base/chat/chat/__tests__/check-input-forms-hooks.spec.tsx
index 6afbc26582..b2bdfc1f4c 100644
--- a/web/app/components/base/chat/chat/__tests__/check-input-forms-hooks.spec.tsx
+++ b/web/app/components/base/chat/chat/__tests__/check-input-forms-hooks.spec.tsx
@@ -5,8 +5,8 @@ import { TransferMethod } from '@/types/app'
 import { useCheckInputsForms } from '../check-input-forms-hooks'
 
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/toast/context', () => ({
-  useToastContext: () => ({ notify: mockNotify }),
+vi.mock('@/app/components/base/ui/toast', () => ({
+
 }))
 
 describe('useCheckInputsForms', () => {
diff --git a/web/app/components/base/chat/chat/__tests__/hooks.spec.tsx b/web/app/components/base/chat/chat/__tests__/hooks.spec.tsx
index 92fa9ea42e..1f66230134 100644
--- a/web/app/components/base/chat/chat/__tests__/hooks.spec.tsx
+++ b/web/app/components/base/chat/chat/__tests__/hooks.spec.tsx
@@ -20,8 +20,8 @@ vi.mock('@/app/components/base/audio-btn/audio.player.manager', () => ({
   },
 }))
 
-vi.mock('@/app/components/base/toast/context', () => ({
-  useToastContext: () => ({ notify: vi.fn() }),
+vi.mock('@/app/components/base/ui/toast', () => ({
+
 }))
 
 vi.mock('@/hooks/use-timestamp', () => ({
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 e9392adb8a..9d49be3a15 100644
--- a/web/app/components/base/chat/chat/__tests__/question.spec.tsx
+++ b/web/app/components/base/chat/chat/__tests__/question.spec.tsx
@@ -5,7 +5,7 @@ import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import copy from 'copy-to-clipboard'
 import * as React from 'react'
-import Toast from '../../../toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { ThemeBuilder } from '../../embedded-chatbot/theme/theme-context'
 import { ChatContextProvider } from '../context-provider'
 import Question from '../question'
@@ -179,7 +179,7 @@ describe('Question component', () => {
 
   it('should call copy-to-clipboard and show a toast when copy action is clicked', async () => {
     const user = userEvent.setup()
-    const toastSpy = vi.spyOn(Toast, 'notify')
+    const toastSpy = vi.spyOn(toast, 'success').mockReturnValue('toast-success')
 
     renderWithProvider(makeItem())
 
diff --git a/web/app/components/base/chat/chat/answer/__tests__/operation.spec.tsx b/web/app/components/base/chat/chat/answer/__tests__/operation.spec.tsx
index c17dd5ad92..c2e840afb7 100644
--- a/web/app/components/base/chat/chat/answer/__tests__/operation.spec.tsx
+++ b/web/app/components/base/chat/chat/answer/__tests__/operation.spec.tsx
@@ -29,7 +29,7 @@ const {
 
 vi.mock('copy-to-clipboard', () => ({ default: vi.fn() }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/ui/toast', () => ({
   default: { notify: vi.fn() },
 }))
 
diff --git a/web/app/components/base/chat/chat/answer/operation.tsx b/web/app/components/base/chat/chat/answer/operation.tsx
index a1bc70512b..826ce7031d 100644
--- a/web/app/components/base/chat/chat/answer/operation.tsx
+++ b/web/app/components/base/chat/chat/answer/operation.tsx
@@ -1,14 +1,7 @@
 import type { FC } from 'react'
-import type {
-  ChatItem,
-  Feedback,
-} from '../../types'
+import type { ChatItem, Feedback } from '../../types'
 import copy from 'copy-to-clipboard'
-import {
-  memo,
-  useMemo,
-  useState,
-} from 'react'
+import { memo, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import EditReplyModal from '@/app/components/app/annotation/edit-annotation-modal'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
@@ -17,8 +10,8 @@ import AnnotationCtrlButton from '@/app/components/base/features/new-feature-pan
 import Modal from '@/app/components/base/modal/modal'
 import NewAudioButton from '@/app/components/base/new-audio-button'
 import Textarea from '@/app/components/base/textarea'
-import Toast from '@/app/components/base/toast'
 import Tooltip from '@/app/components/base/tooltip'
+import { toast } from '@/app/components/base/ui/toast'
 import { cn } from '@/utils/classnames'
 import { useChatContext } from '../context'
 
@@ -32,14 +25,11 @@ type OperationProps = {
   hasWorkflowProcess: boolean
   noChatInput?: boolean
 }
-
 const stringifyCopyValue = (value: unknown) => {
   if (typeof value === 'string')
     return value
-
   if (value === null || typeof value === 'undefined')
     return ''
-
   try {
     return JSON.stringify(value, null, 2)
   }
@@ -47,196 +37,132 @@ const stringifyCopyValue = (value: unknown) => {
     return String(value)
   }
 }
-
 const buildCopyContentFromLLMGenerationItems = (llmGenerationItems?: ChatItem['llmGenerationItems']) => {
   if (!llmGenerationItems?.length)
     return ''
-
   const hasStructuredItems = llmGenerationItems.some(item => item.type !== 'text')
   if (!hasStructuredItems)
     return ''
-
   return llmGenerationItems
     .map((item) => {
       if (item.type === 'text')
         return item.text || ''
-
       if (item.type === 'thought')
         return item.thoughtOutput ? `[THOUGHT]\n${item.thoughtOutput}` : ''
-
       if (item.type === 'tool') {
         const sections = [
           `[TOOL] ${item.toolName || ''}`.trim(),
         ]
-
         if (item.toolArguments)
           sections.push(`INPUT:\n${stringifyCopyValue(item.toolArguments)}`)
         if (typeof item.toolOutput !== 'undefined')
           sections.push(`OUTPUT:\n${stringifyCopyValue(item.toolOutput)}`)
         if (item.toolError)
           sections.push(`ERROR:\n${item.toolError}`)
-
         return sections.join('\n')
       }
-
       if (item.type === 'model') {
         const sections = [
           `[MODEL] ${item.modelName || ''}`.trim(),
         ]
-
         if (typeof item.modelOutput !== 'undefined')
           sections.push(`OUTPUT:\n${stringifyCopyValue(item.modelOutput)}`)
-
         return sections.join('\n')
       }
-
       return ''
     })
     .filter(Boolean)
     .join('\n\n')
 }
-
 const buildCopyContentFromAgentThoughts = (agentThoughts?: ChatItem['agent_thoughts']) => {
   if (!agentThoughts?.length)
     return ''
-
   return agentThoughts
     .map((thought) => {
       const sections = [
         `[AGENT] ${thought.tool || ''}`.trim(),
       ]
-
       if (thought.thought)
         sections.push(`THOUGHT:\n${thought.thought}`)
       if (thought.tool_input)
         sections.push(`INPUT:\n${thought.tool_input}`)
       if (thought.observation)
         sections.push(`OUTPUT:\n${thought.observation}`)
-
       return sections.join('\n')
     })
     .join('\n\n')
 }
-
-const Operation: FC<OperationProps> = ({
-  item,
-  question,
-  index,
-  showPromptLog,
-  maxSize,
-  contentWidth,
-  hasWorkflowProcess,
-  noChatInput,
-}) => {
+const Operation: FC<OperationProps> = ({ item, question, index, showPromptLog, maxSize, contentWidth, hasWorkflowProcess, noChatInput }) => {
   const { t } = useTranslation()
-  const {
-    config,
-    onAnnotationAdded,
-    onAnnotationEdited,
-    onAnnotationRemoved,
-    onFeedback,
-    onRegenerate,
-  } = useChatContext()
+  const { config, onAnnotationAdded, onAnnotationEdited, onAnnotationRemoved, onFeedback, onRegenerate } = useChatContext()
   const [isShowReplyModal, setIsShowReplyModal] = useState(false)
   const [isShowFeedbackModal, setIsShowFeedbackModal] = useState(false)
   const [feedbackContent, setFeedbackContent] = useState('')
-  const {
-    id,
-    isOpeningStatement,
-    content: messageContent,
-    annotation,
-    feedback,
-    adminFeedback,
-    agent_thoughts,
-    humanInputFormDataList,
-  } = item
+  const { id, isOpeningStatement, content: messageContent, annotation, feedback, adminFeedback, agent_thoughts, humanInputFormDataList } = item
   const [userLocalFeedback, setUserLocalFeedback] = useState(feedback)
   const [adminLocalFeedback, setAdminLocalFeedback] = useState(adminFeedback)
   const [feedbackTarget, setFeedbackTarget] = useState<'user' | 'admin'>('user')
-
   // Separate feedback types for display
   const userFeedback = feedback
-
   const content = useMemo(() => {
     if (agent_thoughts?.length)
       return agent_thoughts.reduce((acc, cur) => acc + cur.thought, '')
-
     return messageContent
   }, [agent_thoughts, messageContent])
-
   const copyContent = useMemo(() => {
     const llmGenerationCopyContent = buildCopyContentFromLLMGenerationItems(item.llmGenerationItems)
     if (llmGenerationCopyContent)
       return llmGenerationCopyContent
-
     const agentThoughtCopyContent = buildCopyContentFromAgentThoughts(agent_thoughts)
     if (agentThoughtCopyContent)
       return agentThoughtCopyContent
-
     return messageContent
   }, [item.llmGenerationItems, agent_thoughts, messageContent])
-
   const displayUserFeedback = userLocalFeedback ?? userFeedback
-
   const hasUserFeedback = !!displayUserFeedback?.rating
   const hasAdminFeedback = !!adminLocalFeedback?.rating
-
   const shouldShowUserFeedbackBar = !isOpeningStatement && config?.supportFeedback && !!onFeedback && !config?.supportAnnotation
   const shouldShowAdminFeedbackBar = !isOpeningStatement && config?.supportFeedback && !!onFeedback && !!config?.supportAnnotation
-
   const userFeedbackLabel = t('table.header.userRate', { ns: 'appLog' }) || 'User feedback'
   const adminFeedbackLabel = t('table.header.adminRate', { ns: 'appLog' }) || 'Admin feedback'
   const feedbackTooltipClassName = 'max-w-[260px]'
-
   const buildFeedbackTooltip = (feedbackData?: Feedback | null, label = userFeedbackLabel) => {
     if (!feedbackData?.rating)
       return label
-
     const ratingLabel = feedbackData.rating === 'like'
       ? (t('detail.operation.like', { ns: 'appLog' }) || 'like')
       : (t('detail.operation.dislike', { ns: 'appLog' }) || 'dislike')
     const feedbackText = feedbackData.content?.trim()
-
     if (feedbackText)
       return `${label}: ${ratingLabel} - ${feedbackText}`
-
     return `${label}: ${ratingLabel}`
   }
-
   const handleFeedback = async (rating: 'like' | 'dislike' | null, content?: string, target: 'user' | 'admin' = 'user') => {
     if (!config?.supportFeedback || !onFeedback)
       return
-
     await onFeedback?.(id, { rating, content })
-
     const nextFeedback = rating === null ? { rating: null } : { rating, content }
-
     if (target === 'admin')
       setAdminLocalFeedback(nextFeedback)
     else
       setUserLocalFeedback(nextFeedback)
   }
-
   const handleLikeClick = (target: 'user' | 'admin') => {
     handleFeedback('like', undefined, target)
   }
-
   const handleDislikeClick = (target: 'user' | 'admin') => {
     setFeedbackTarget(target)
     setIsShowFeedbackModal(true)
   }
-
   const handleFeedbackSubmit = async () => {
     await handleFeedback('dislike', feedbackContent, feedbackTarget)
     setFeedbackContent('')
     setIsShowFeedbackModal(false)
   }
-
   const handleFeedbackCancel = () => {
     setFeedbackContent('')
     setIsShowFeedbackModal(false)
   }
-
   const operationWidth = useMemo(() => {
     let width = 0
     if (!isOpeningStatement)
@@ -251,40 +177,18 @@ const Operation: FC<OperationProps> = ({
       width += hasUserFeedback ? 28 + 8 : 60 + 8
     if (shouldShowAdminFeedbackBar)
       width += (hasAdminFeedback ? 28 : 60) + 8 + (hasUserFeedback ? 28 : 0)
-
     return width
   }, [config?.annotation_reply?.enabled, config?.supportAnnotation, config?.text_to_speech?.enabled, hasAdminFeedback, hasUserFeedback, isOpeningStatement, shouldShowAdminFeedbackBar, shouldShowUserFeedbackBar, showPromptLog])
-
   const positionRight = useMemo(() => operationWidth < maxSize, [operationWidth, maxSize])
-
   return (
     <>
-      <div
-        className={cn(
-          'absolute flex justify-end gap-1',
-          hasWorkflowProcess && '-bottom-4 right-2',
-          !positionRight && '-bottom-4 right-2',
-          !hasWorkflowProcess && positionRight && '!top-[9px]',
-        )}
-        style={(!hasWorkflowProcess && positionRight) ? { left: contentWidth + 8 } : {}}
-        data-testid="operation-bar"
-      >
+      <div className={cn('absolute flex justify-end gap-1', hasWorkflowProcess && '-bottom-4 right-2', !positionRight && '-bottom-4 right-2', !hasWorkflowProcess && positionRight && '!top-[9px]')} style={(!hasWorkflowProcess && positionRight) ? { left: contentWidth + 8 } : {}} data-testid="operation-bar">
         {shouldShowUserFeedbackBar && !humanInputFormDataList?.length && (
-          <div className={cn(
-            'ml-1 items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm',
-            hasUserFeedback ? 'flex' : 'hidden group-hover:flex',
-          )}
-          >
+          <div className={cn('ml-1 items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm', hasUserFeedback ? 'flex' : 'hidden group-hover:flex')}>
             {hasUserFeedback
               ? (
-                  <Tooltip
-                    popupContent={buildFeedbackTooltip(displayUserFeedback, userFeedbackLabel)}
-                    popupClassName={feedbackTooltipClassName}
-                  >
-                    <ActionButton
-                      state={displayUserFeedback?.rating === 'like' ? ActionButtonState.Active : ActionButtonState.Destructive}
-                      onClick={() => handleFeedback(null, undefined, 'user')}
-                    >
+                  <Tooltip popupContent={buildFeedbackTooltip(displayUserFeedback, userFeedbackLabel)} popupClassName={feedbackTooltipClassName}>
+                    <ActionButton state={displayUserFeedback?.rating === 'like' ? ActionButtonState.Active : ActionButtonState.Destructive} onClick={() => handleFeedback(null, undefined, 'user')}>
                       {displayUserFeedback?.rating === 'like'
                         ? <div className="i-ri-thumb-up-line h-4 w-4" />
                         : <div className="i-ri-thumb-down-line h-4 w-4" />}
@@ -293,16 +197,10 @@ const Operation: FC<OperationProps> = ({
                 )
               : (
                   <>
-                    <ActionButton
-                      state={displayUserFeedback?.rating === 'like' ? ActionButtonState.Active : ActionButtonState.Default}
-                      onClick={() => handleLikeClick('user')}
-                    >
+                    <ActionButton state={displayUserFeedback?.rating === 'like' ? ActionButtonState.Active : ActionButtonState.Default} onClick={() => handleLikeClick('user')}>
                       <div className="i-ri-thumb-up-line h-4 w-4" />
                     </ActionButton>
-                    <ActionButton
-                      state={displayUserFeedback?.rating === 'dislike' ? ActionButtonState.Destructive : ActionButtonState.Default}
-                      onClick={() => handleDislikeClick('user')}
-                    >
+                    <ActionButton state={displayUserFeedback?.rating === 'dislike' ? ActionButtonState.Destructive : ActionButtonState.Default} onClick={() => handleDislikeClick('user')}>
                       <div className="i-ri-thumb-down-line h-4 w-4" />
                     </ActionButton>
                   </>
@@ -310,17 +208,10 @@ const Operation: FC<OperationProps> = ({
           </div>
         )}
         {shouldShowAdminFeedbackBar && !humanInputFormDataList?.length && (
-          <div className={cn(
-            'ml-1 items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm',
-            (hasAdminFeedback || hasUserFeedback) ? 'flex' : 'hidden group-hover:flex',
-          )}
-          >
+          <div className={cn('ml-1 items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm', (hasAdminFeedback || hasUserFeedback) ? 'flex' : 'hidden group-hover:flex')}>
             {/* User Feedback Display */}
             {displayUserFeedback?.rating && (
-              <Tooltip
-                popupContent={buildFeedbackTooltip(displayUserFeedback, userFeedbackLabel)}
-                popupClassName={feedbackTooltipClassName}
-              >
+              <Tooltip popupContent={buildFeedbackTooltip(displayUserFeedback, userFeedbackLabel)} popupClassName={feedbackTooltipClassName}>
                 {displayUserFeedback.rating === 'like'
                   ? (
                       <ActionButton state={ActionButtonState.Active}>
@@ -339,14 +230,8 @@ const Operation: FC<OperationProps> = ({
             {displayUserFeedback?.rating && <div className="mx-1 h-3 w-[0.5px] bg-components-actionbar-border" />}
             {hasAdminFeedback
               ? (
-                  <Tooltip
-                    popupContent={buildFeedbackTooltip(adminLocalFeedback, adminFeedbackLabel)}
-                    popupClassName={feedbackTooltipClassName}
-                  >
-                    <ActionButton
-                      state={adminLocalFeedback?.rating === 'like' ? ActionButtonState.Active : ActionButtonState.Destructive}
-                      onClick={() => handleFeedback(null, undefined, 'admin')}
-                    >
+                  <Tooltip popupContent={buildFeedbackTooltip(adminLocalFeedback, adminFeedbackLabel)} popupClassName={feedbackTooltipClassName}>
+                    <ActionButton state={adminLocalFeedback?.rating === 'like' ? ActionButtonState.Active : ActionButtonState.Destructive} onClick={() => handleFeedback(null, undefined, 'admin')}>
                       {adminLocalFeedback?.rating === 'like'
                         ? <div className="i-ri-thumb-up-line h-4 w-4" />
                         : <div className="i-ri-thumb-down-line h-4 w-4" />}
@@ -355,25 +240,13 @@ const Operation: FC<OperationProps> = ({
                 )
               : (
                   <>
-                    <Tooltip
-                      popupContent={buildFeedbackTooltip(adminLocalFeedback, adminFeedbackLabel)}
-                      popupClassName={feedbackTooltipClassName}
-                    >
-                      <ActionButton
-                        state={adminLocalFeedback?.rating === 'like' ? ActionButtonState.Active : ActionButtonState.Default}
-                        onClick={() => handleLikeClick('admin')}
-                      >
+                    <Tooltip popupContent={buildFeedbackTooltip(adminLocalFeedback, adminFeedbackLabel)} popupClassName={feedbackTooltipClassName}>
+                      <ActionButton state={adminLocalFeedback?.rating === 'like' ? ActionButtonState.Active : ActionButtonState.Default} onClick={() => handleLikeClick('admin')}>
                         <div className="i-ri-thumb-up-line h-4 w-4" />
                       </ActionButton>
                     </Tooltip>
-                    <Tooltip
-                      popupContent={buildFeedbackTooltip(adminLocalFeedback, adminFeedbackLabel)}
-                      popupClassName={feedbackTooltipClassName}
-                    >
-                      <ActionButton
-                        state={adminLocalFeedback?.rating === 'dislike' ? ActionButtonState.Destructive : ActionButtonState.Default}
-                        onClick={() => handleDislikeClick('admin')}
-                      >
+                    <Tooltip popupContent={buildFeedbackTooltip(adminLocalFeedback, adminFeedbackLabel)} popupClassName={feedbackTooltipClassName}>
+                      <ActionButton state={adminLocalFeedback?.rating === 'dislike' ? ActionButtonState.Destructive : ActionButtonState.Default} onClick={() => handleDislikeClick('admin')}>
                         <div className="i-ri-thumb-down-line h-4 w-4" />
                       </ActionButton>
                     </Tooltip>
@@ -388,18 +261,12 @@ const Operation: FC<OperationProps> = ({
         )}
         {!isOpeningStatement && (
           <div className="ml-1 hidden items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm group-hover:flex" data-testid="operation-actions">
-            {(config?.text_to_speech?.enabled && !humanInputFormDataList?.length) && (
-              <NewAudioButton
-                id={id}
-                value={content}
-                voice={config?.text_to_speech?.voice}
-              />
-            )}
+            {(config?.text_to_speech?.enabled && !humanInputFormDataList?.length) && (<NewAudioButton id={id} value={content} voice={config?.text_to_speech?.voice} />)}
             {!humanInputFormDataList?.length && (
               <ActionButton
                 onClick={() => {
                   copy(copyContent)
-                  Toast.notify({ type: 'success', message: t('actionMsg.copySuccessfully', { ns: 'common' }) })
+                  toast.success(t('actionMsg.copySuccessfully', { ns: 'common' }))
                 }}
                 data-testid="copy-btn"
               >
@@ -411,55 +278,19 @@ const Operation: FC<OperationProps> = ({
                 <div className="i-ri-reset-left-line h-4 w-4" />
               </ActionButton>
             )}
-            {config?.supportAnnotation && config.annotation_reply?.enabled && !humanInputFormDataList?.length && (
-              <AnnotationCtrlButton
-                appId={config?.appId || ''}
-                messageId={id}
-                cached={!!annotation?.id}
-                query={question}
-                answer={content}
-                onAdded={(id, authorName) => onAnnotationAdded?.(id, authorName, question, content, index)}
-                onEdit={() => setIsShowReplyModal(true)}
-              />
-            )}
+            {config?.supportAnnotation && config.annotation_reply?.enabled && !humanInputFormDataList?.length && (<AnnotationCtrlButton appId={config?.appId || ''} messageId={id} cached={!!annotation?.id} query={question} answer={content} onAdded={(id, authorName) => onAnnotationAdded?.(id, authorName, question, content, index)} onEdit={() => setIsShowReplyModal(true)} />)}
           </div>
         )}
       </div>
-      <EditReplyModal
-        isShow={isShowReplyModal}
-        onHide={() => setIsShowReplyModal(false)}
-        query={question}
-        answer={content}
-        onEdited={(editedQuery, editedAnswer) => onAnnotationEdited?.(editedQuery, editedAnswer, index)}
-        onAdded={(annotationId, authorName, editedQuery, editedAnswer) => onAnnotationAdded?.(annotationId, authorName, editedQuery, editedAnswer, index)}
-        appId={config?.appId || ''}
-        messageId={id}
-        annotationId={annotation?.id || ''}
-        createdAt={annotation?.created_at}
-        onRemove={() => onAnnotationRemoved?.(index)}
-      />
+      <EditReplyModal isShow={isShowReplyModal} onHide={() => setIsShowReplyModal(false)} query={question} answer={content} onEdited={(editedQuery, editedAnswer) => onAnnotationEdited?.(editedQuery, editedAnswer, index)} onAdded={(annotationId, authorName, editedQuery, editedAnswer) => onAnnotationAdded?.(annotationId, authorName, editedQuery, editedAnswer, index)} appId={config?.appId || ''} messageId={id} annotationId={annotation?.id || ''} createdAt={annotation?.created_at} onRemove={() => onAnnotationRemoved?.(index)} />
       {isShowFeedbackModal && (
-        <Modal
-          title={t('feedback.title', { ns: 'common' }) || 'Provide Feedback'}
-          subTitle={t('feedback.subtitle', { ns: 'common' }) || 'Please tell us what went wrong with this response'}
-          onClose={handleFeedbackCancel}
-          onConfirm={handleFeedbackSubmit}
-          onCancel={handleFeedbackCancel}
-          confirmButtonText={t('operation.submit', { ns: 'common' }) || 'Submit'}
-          cancelButtonText={t('operation.cancel', { ns: 'common' }) || 'Cancel'}
-        >
+        <Modal title={t('feedback.title', { ns: 'common' }) || 'Provide Feedback'} subTitle={t('feedback.subtitle', { ns: 'common' }) || 'Please tell us what went wrong with this response'} onClose={handleFeedbackCancel} onConfirm={handleFeedbackSubmit} onCancel={handleFeedbackCancel} confirmButtonText={t('operation.submit', { ns: 'common' }) || 'Submit'} cancelButtonText={t('operation.cancel', { ns: 'common' }) || 'Cancel'}>
           <div className="space-y-3">
             <div>
               <label className="mb-2 block text-text-secondary system-sm-semibold">
                 {t('feedback.content', { ns: 'common' }) || 'Feedback Content'}
               </label>
-              <Textarea
-                value={feedbackContent}
-                onChange={e => setFeedbackContent(e.target.value)}
-                placeholder={t('feedback.placeholder', { ns: 'common' }) || 'Please describe what went wrong or how we can improve...'}
-                rows={4}
-                className="w-full"
-              />
+              <Textarea value={feedbackContent} onChange={e => setFeedbackContent(e.target.value)} placeholder={t('feedback.placeholder', { ns: 'common' }) || 'Please describe what went wrong or how we can improve...'} rows={4} className="w-full" />
             </div>
           </div>
         </Modal>
@@ -467,5 +298,4 @@ const Operation: FC<OperationProps> = ({
     </>
   )
 }
-
 export default memo(Operation)
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 f628b7de82..1ed2bbecdc 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
@@ -175,8 +175,8 @@ vi.mock('@/app/components/base/features/hooks', () => ({
 // ---------------------------------------------------------------------------
 // Toast context
 // ---------------------------------------------------------------------------
-vi.mock('@/app/components/base/toast/context', () => ({
-  useToastContext: () => ({ notify: mockNotify, close: vi.fn() }),
+vi.mock('@/app/components/base/ui/toast', () => ({
+
 }))
 
 // ---------------------------------------------------------------------------
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 8b5ca18585..0ea928d6d6 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
@@ -1,28 +1,18 @@
 import type { Theme } from '../../embedded-chatbot/theme/theme-context'
-import type {
-  EnableType,
-  OnSend,
-} from '../../types'
+import type { EnableType, OnSend } from '../../types'
 import type { InputForm } from '../type'
 import type { FileUpload } from '@/app/components/base/features/types'
 import { noop } from 'es-toolkit/function'
 import { decode } from 'html-entities'
 import Recorder from 'js-audio-recorder'
-import {
-  useCallback,
-  useRef,
-  useState,
-} from 'react'
+import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Textarea from 'react-textarea-autosize'
 import FeatureBar from '@/app/components/base/features/new-feature-panel/feature-bar'
 import { FileListInChatInput } from '@/app/components/base/file-uploader'
 import { useFile } from '@/app/components/base/file-uploader/hooks'
-import {
-  FileContextProvider,
-  useFileStore,
-} from '@/app/components/base/file-uploader/store'
-import { useToastContext } from '@/app/components/base/toast/context'
+import { FileContextProvider, useFileStore } from '@/app/components/base/file-uploader/store'
+import { toast } from '@/app/components/base/ui/toast'
 import VoiceInput from '@/app/components/base/voice-input'
 import { TransferMethod } from '@/types/app'
 import { cn } from '@/utils/classnames'
@@ -53,71 +43,34 @@ type ChatInputAreaProps = {
    */
   sendOnEnter?: boolean
 }
-const ChatInputArea = ({
-  readonly,
-  botName,
-  showFeatureBar,
-  showFileUpload,
-  featureBarDisabled,
-  onFeatureBarClick,
-  visionConfig,
-  speechToTextConfig = { enabled: true },
-  onSend,
-  inputs = {},
-  inputsForm = [],
-  theme,
-  isResponding,
-  disabled,
-  sendOnEnter = true,
-}: ChatInputAreaProps) => {
+const ChatInputArea = ({ readonly, botName, showFeatureBar, showFileUpload, featureBarDisabled, onFeatureBarClick, visionConfig, speechToTextConfig = { enabled: true }, onSend, inputs = {}, inputsForm = [], theme, isResponding, disabled, sendOnEnter = true }: ChatInputAreaProps) => {
   const { t } = useTranslation()
-  const { notify } = useToastContext()
-  const {
-    wrapperRef,
-    textareaRef,
-    textValueRef,
-    holdSpaceRef,
-    handleTextareaResize,
-    isMultipleLine,
-  } = useTextAreaHeight()
+  const { wrapperRef, textareaRef, textValueRef, holdSpaceRef, handleTextareaResize, isMultipleLine } = useTextAreaHeight()
   const [query, setQuery] = useState('')
   const [showVoiceInput, setShowVoiceInput] = useState(false)
   const filesStore = useFileStore()
-  const {
-    handleDragFileEnter,
-    handleDragFileLeave,
-    handleDragFileOver,
-    handleDropFile,
-    handleClipboardPasteFile,
-    isDragActive,
-  } = useFile(visionConfig!, false)
+  const { handleDragFileEnter, handleDragFileLeave, handleDragFileOver, handleDropFile, handleClipboardPasteFile, isDragActive } = useFile(visionConfig!, false)
   const { checkInputsForm } = useCheckInputsForms()
   const historyRef = useRef([''])
   const [currentIndex, setCurrentIndex] = useState(-1)
   const isComposingRef = useRef(false)
-
-  const handleQueryChange = useCallback(
-    (value: string) => {
-      setQuery(value)
-      setTimeout(handleTextareaResize, 0)
-    },
-    [handleTextareaResize],
-  )
-
+  const handleQueryChange = useCallback((value: string) => {
+    setQuery(value)
+    setTimeout(handleTextareaResize, 0)
+  }, [handleTextareaResize])
   const handleSend = () => {
     if (isResponding) {
-      notify({ type: 'info', message: t('errorMessage.waitForResponse', { ns: 'appDebug' }) })
+      toast.info(t('errorMessage.waitForResponse', { ns: 'appDebug' }))
       return
     }
-
     if (onSend) {
       const { files, setFiles } = filesStore.getState()
       if (files.some(item => item.transferMethod === TransferMethod.local_file && !item.uploadedId)) {
-        notify({ type: 'info', message: t('errorMessage.waitForFileUpload', { ns: 'appDebug' }) })
+        toast.info(t('errorMessage.waitForFileUpload', { ns: 'appDebug' }))
         return
       }
       if (!query || !query.trim()) {
-        notify({ type: 'info', message: t('errorMessage.queryRequired', { ns: 'appAnnotation' }) })
+        toast.info(t('errorMessage.queryRequired', { ns: 'appAnnotation' }))
         return
       }
       if (checkInputsForm(inputs, inputsForm)) {
@@ -145,7 +98,6 @@ const ChatInputArea = ({
     const isSendCombo = sendOnEnter
       ? (e.key === 'Enter' && !e.shiftKey)
       : (e.key === 'Enter' && e.shiftKey)
-
     if (isSendCombo && !e.nativeEvent.isComposing) {
       // if isComposing, exit
       if (isComposingRef.current)
@@ -176,101 +128,36 @@ const ChatInputArea = ({
       }
     }
   }
-
   const handleShowVoiceInput = useCallback(() => {
     (Recorder as any).getPermission().then(() => {
       setShowVoiceInput(true)
     }, () => {
-      notify({ type: 'error', message: t('voiceInput.notAllow', { ns: 'common' }) })
+      toast.error(t('voiceInput.notAllow', { ns: 'common' }))
     })
-  }, [t, notify])
-
-  const operation = (
-    <Operation
-      ref={holdSpaceRef}
-      readonly={readonly}
-      fileConfig={visionConfig}
-      speechToTextConfig={speechToTextConfig}
-      onShowVoiceInput={handleShowVoiceInput}
-      onSend={handleSend}
-      theme={theme}
-    />
-  )
-
+  }, [t])
+  const operation = (<Operation ref={holdSpaceRef} readonly={readonly} fileConfig={visionConfig} speechToTextConfig={speechToTextConfig} onShowVoiceInput={handleShowVoiceInput} onSend={handleSend} theme={theme} />)
   return (
     <>
-      <div
-        className={cn(
-          'relative z-10 overflow-hidden rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur pb-[9px] shadow-md',
-          isDragActive && 'border border-dashed border-components-option-card-option-selected-border',
-          disabled && 'pointer-events-none border-components-panel-border opacity-50 shadow-none',
-        )}
-      >
+      <div className={cn('relative z-10 overflow-hidden rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur pb-[9px] shadow-md', isDragActive && 'border border-dashed border-components-option-card-option-selected-border', disabled && 'pointer-events-none border-components-panel-border opacity-50 shadow-none')}>
         <div className="relative max-h-[158px] overflow-y-auto overflow-x-hidden px-[9px] pt-[9px]">
           <FileListInChatInput fileConfig={visionConfig!} />
-          <div
-            ref={wrapperRef}
-            className="flex items-center justify-between"
-          >
+          <div ref={wrapperRef} className="flex items-center justify-between">
             <div className="relative flex w-full grow items-center">
-              <div
-                ref={textValueRef}
-                className="pointer-events-none invisible absolute h-auto w-auto whitespace-pre p-1 leading-6 body-lg-regular"
-              >
+              <div ref={textValueRef} className="pointer-events-none invisible absolute h-auto w-auto whitespace-pre p-1 leading-6 body-lg-regular">
                 {query}
               </div>
-              <Textarea
-                ref={ref => textareaRef.current = ref as any}
-                className={cn(
-                  'w-full resize-none bg-transparent p-1 leading-6 text-text-primary outline-none body-lg-regular',
-                )}
-                placeholder={decode(t(readonly ? 'chat.inputDisabledPlaceholder' : 'chat.inputPlaceholder', { ns: 'common', botName }) || '')}
-                autoFocus
-                minRows={1}
-                value={query}
-                onChange={e => handleQueryChange(e.target.value)}
-                onKeyDown={handleKeyDown}
-                onCompositionStart={handleCompositionStart}
-                onCompositionEnd={handleCompositionEnd}
-                onPaste={handleClipboardPasteFile}
-                onDragEnter={handleDragFileEnter}
-                onDragLeave={handleDragFileLeave}
-                onDragOver={handleDragFileOver}
-                onDrop={handleDropFile}
-                readOnly={readonly}
-              />
+              <Textarea ref={ref => textareaRef.current = ref as any} className={cn('w-full resize-none bg-transparent p-1 leading-6 text-text-primary outline-none body-lg-regular')} placeholder={decode(t(readonly ? 'chat.inputDisabledPlaceholder' : 'chat.inputPlaceholder', { ns: 'common', botName }) || '')} autoFocus minRows={1} value={query} onChange={e => handleQueryChange(e.target.value)} onKeyDown={handleKeyDown} onCompositionStart={handleCompositionStart} onCompositionEnd={handleCompositionEnd} onPaste={handleClipboardPasteFile} onDragEnter={handleDragFileEnter} onDragLeave={handleDragFileLeave} onDragOver={handleDragFileOver} onDrop={handleDropFile} readOnly={readonly} />
             </div>
-            {
-              !isMultipleLine && operation
-            }
+            {!isMultipleLine && operation}
           </div>
-          {
-            showVoiceInput && (
-              <VoiceInput
-                onCancel={() => setShowVoiceInput(false)}
-                onConverted={text => handleQueryChange(text)}
-              />
-            )
-          }
+          {showVoiceInput && (<VoiceInput onCancel={() => setShowVoiceInput(false)} onConverted={text => handleQueryChange(text)} />)}
         </div>
-        {
-          isMultipleLine && (
-            <div className="px-[9px]">{operation}</div>
-          )
-        }
+        {isMultipleLine && (<div className="px-[9px]">{operation}</div>)}
       </div>
-      {showFeatureBar && (
-        <FeatureBar
-          showFileUpload={showFileUpload}
-          disabled={featureBarDisabled}
-          onFeatureBarClick={readonly ? noop : onFeatureBarClick}
-          hideEditEntrance={readonly}
-        />
-      )}
+      {showFeatureBar && (<FeatureBar showFileUpload={showFileUpload} disabled={featureBarDisabled} onFeatureBarClick={readonly ? noop : onFeatureBarClick} hideEditEntrance={readonly} />)}
     </>
   )
 }
-
 const ChatInputAreaWrapper = (props: ChatInputAreaProps) => {
   return (
     <FileContextProvider>
@@ -278,5 +165,4 @@ const ChatInputAreaWrapper = (props: ChatInputAreaProps) => {
     </FileContextProvider>
   )
 }
-
 export default ChatInputAreaWrapper
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 842e89070b..dee6b4ca7f 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,30 +1,24 @@
 import type { InputForm } from './type'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useToastContext } from '@/app/components/base/toast/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { InputVarType } from '@/app/components/workflow/types'
 import { TransferMethod } from '@/types/app'
 
 export const useCheckInputsForms = () => {
   const { t } = useTranslation()
-  const { notify } = useToastContext()
-
   const checkInputsForm = useCallback((inputs: Record<string, any>, inputsForm: InputForm[]) => {
     let hasEmptyInput = ''
     let fileIsUploading = false
     const requiredVars = inputsForm.filter(({ required, type }) => required && type !== InputVarType.checkbox) // boolean can be not checked
-
     if (requiredVars?.length) {
       requiredVars.forEach(({ variable, label, type }) => {
         if (hasEmptyInput)
           return
-
         if (fileIsUploading)
           return
-
         if (!inputs[variable])
           hasEmptyInput = label as string
-
         if ((type === InputVarType.singleFile || type === InputVarType.multiFiles) && inputs[variable]) {
           const files = inputs[variable]
           if (Array.isArray(files))
@@ -34,20 +28,16 @@ export const useCheckInputsForms = () => {
         }
       })
     }
-
     if (hasEmptyInput) {
-      notify({ type: 'error', message: t('errorMessage.valueOfVarRequired', { ns: 'appDebug', key: hasEmptyInput }) })
+      toast.error(t('errorMessage.valueOfVarRequired', { ns: 'appDebug', key: hasEmptyInput }))
       return false
     }
-
     if (fileIsUploading) {
-      notify({ type: 'info', message: t('errorMessage.waitForFileUpload', { ns: 'appDebug' }) })
+      toast.info(t('errorMessage.waitForFileUpload', { ns: 'appDebug' }))
       return
     }
-
     return true
-  }, [notify, t])
-
+  }, [t])
   return {
     checkInputsForm,
   }
diff --git a/web/app/components/base/chat/chat/hooks.hitl.spec.tsx b/web/app/components/base/chat/chat/hooks.hitl.spec.tsx
index 0aa14dcf9d..5f024f3ff3 100644
--- a/web/app/components/base/chat/chat/hooks.hitl.spec.tsx
+++ b/web/app/components/base/chat/chat/hooks.hitl.spec.tsx
@@ -24,10 +24,8 @@ vi.mock('@/hooks/use-timestamp', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
-  useToastContext: () => ({
-    notify: vi.fn(),
-  }),
+vi.mock('@/app/components/base/ui/toast', () => ({
+
 }))
 
 vi.mock('@/app/components/base/audio-btn/audio.player.manager', () => ({
diff --git a/web/app/components/base/chat/chat/hooks.ts b/web/app/components/base/chat/chat/hooks.ts
index f5c2508cf7..6bbc9e7800 100644
--- a/web/app/components/base/chat/chat/hooks.ts
+++ b/web/app/components/base/chat/chat/hooks.ts
@@ -29,7 +29,7 @@ import {
   getProcessedFiles,
   getProcessedFilesFromResponse,
 } from '@/app/components/base/file-uploader/utils'
-import { useToastContext } from '@/app/components/base/toast/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { NodeRunningStatus, WorkflowRunningStatus } from '@/app/components/workflow/types'
 import useTimestamp from '@/hooks/use-timestamp'
 import { useParams, usePathname } from '@/next/navigation'
@@ -65,7 +65,6 @@ export const useChat = (
 ) => {
   const { t } = useTranslation()
   const { formatTime } = useTimestamp()
-  const { notify } = useToastContext()
   const conversationIdRef = useRef('')
   const hasStopRespondedRef = useRef(false)
   const [isResponding, setIsResponding] = useState(false)
@@ -637,7 +636,7 @@ export const useChat = (
     setSuggestedQuestions([])
 
     if (isRespondingRef.current) {
-      notify({ type: 'info', message: t('errorMessage.waitForResponse', { ns: 'appDebug' }) })
+      toast.info(t('errorMessage.waitForResponse', { ns: 'appDebug' }))
       return false
     }
 
@@ -1269,7 +1268,6 @@ export const useChat = (
     config?.suggested_questions_after_answer,
     updateCurrentQAOnTree,
     updateChatTreeNode,
-    notify,
     handleResponding,
     formatTime,
     createAudioPlayerManager,
diff --git a/web/app/components/base/chat/chat/question.tsx b/web/app/components/base/chat/chat/question.tsx
index 1af54bcf1e..6dc1a9d5e1 100644
--- a/web/app/components/base/chat/chat/question.tsx
+++ b/web/app/components/base/chat/chat/question.tsx
@@ -1,25 +1,16 @@
-import type {
-  FC,
-  ReactNode,
-} from 'react'
+import type { FC, ReactNode } from 'react'
 import type { Theme } from '../embedded-chatbot/theme/theme-context'
 import type { ChatItem } from '../types'
 import copy from 'copy-to-clipboard'
-import {
-  memo,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Textarea from 'react-textarea-autosize'
 import { FileList } from '@/app/components/base/file-uploader'
 import { Markdown } from '@/app/components/base/markdown'
+import { toast } from '@/app/components/base/ui/toast'
 import { cn } from '@/utils/classnames'
 import ActionButton from '../../action-button'
 import Button from '../../button'
-import Toast from '../../toast'
 import { CssTransform } from '../embedded-chatbot/theme/utils'
 import ContentSwitch from './content-switch'
 import { useChatContext } from './context'
@@ -32,38 +23,20 @@ type QuestionProps = {
   switchSibling?: (siblingMessageId: string) => void
   hideAvatar?: boolean
 }
-
-const Question: FC<QuestionProps> = ({
-  item,
-  questionIcon,
-  theme,
-  enableEdit = true,
-  switchSibling,
-  hideAvatar,
-}) => {
+const Question: FC<QuestionProps> = ({ item, questionIcon, theme, enableEdit = true, switchSibling, hideAvatar }) => {
   const { t } = useTranslation()
-
-  const {
-    content,
-    message_files,
-  } = item
-
-  const {
-    onRegenerate,
-  } = useChatContext()
-
+  const { content, message_files } = item
+  const { onRegenerate } = useChatContext()
   const [isEditing, setIsEditing] = useState(false)
   const [editedContent, setEditedContent] = useState(content)
   const [contentWidth, setContentWidth] = useState(0)
   const contentRef = useRef<HTMLDivElement>(null)
   const isComposingRef = useRef(false)
   const compositionEndTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-
   const handleEdit = useCallback(() => {
     setIsEditing(true)
     setEditedContent(content)
   }, [content])
-
   const handleResend = useCallback(() => {
     if (compositionEndTimerRef.current) {
       clearTimeout(compositionEndTimerRef.current)
@@ -73,7 +46,6 @@ const Question: FC<QuestionProps> = ({
     setIsEditing(false)
     onRegenerate?.(item, { message: editedContent, files: message_files })
   }, [editedContent, message_files, item, onRegenerate])
-
   const handleCancelEditing = useCallback(() => {
     if (compositionEndTimerRef.current) {
       clearTimeout(compositionEndTimerRef.current)
@@ -83,36 +55,28 @@ const Question: FC<QuestionProps> = ({
     setIsEditing(false)
     setEditedContent(content)
   }, [content])
-
   const handleEditInputKeyDown = useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key !== 'Enter' || e.shiftKey)
       return
-
     if (e.nativeEvent.isComposing)
       return
-
     if (isComposingRef.current) {
       e.preventDefault()
       return
     }
-
     e.preventDefault()
     handleResend()
   }, [handleResend])
-
   const clearCompositionEndTimer = useCallback(() => {
     if (!compositionEndTimerRef.current)
       return
-
     clearTimeout(compositionEndTimerRef.current)
     compositionEndTimerRef.current = null
   }, [])
-
   const handleCompositionStart = useCallback(() => {
     clearCompositionEndTimer()
     isComposingRef.current = true
   }, [clearCompositionEndTimer])
-
   const handleCompositionEnd = useCallback(() => {
     clearCompositionEndTimer()
     compositionEndTimerRef.current = setTimeout(() => {
@@ -120,7 +84,6 @@ const Question: FC<QuestionProps> = ({
       compositionEndTimerRef.current = null
     }, 50)
   }, [clearCompositionEndTimer])
-
   const handleSwitchSibling = useCallback((direction: 'prev' | 'next') => {
     if (direction === 'prev') {
       if (item.prevSibling)
@@ -131,13 +94,11 @@ const Question: FC<QuestionProps> = ({
         switchSibling?.(item.nextSibling)
     }
   }, [switchSibling, item.prevSibling, item.nextSibling])
-
   const getContentWidth = () => {
     /* v8 ignore next 2 -- @preserve */
     if (contentRef.current)
       setContentWidth(contentRef.current?.clientWidth)
   }
-
   useEffect(() => {
     /* v8 ignore next 2 -- @preserve */
     if (!contentRef.current)
@@ -150,27 +111,21 @@ const Question: FC<QuestionProps> = ({
       resizeObserver.disconnect()
     }
   }, [])
-
   useEffect(() => {
     return () => {
       clearCompositionEndTimer()
     }
   }, [clearCompositionEndTimer])
-
   return (
     <div className="mb-2 flex justify-end last:mb-0">
       <div className={cn('group relative mr-4 flex max-w-full items-start overflow-x-hidden pl-14', isEditing && 'flex-1')}>
         <div className={cn('mr-2 gap-1', isEditing ? 'hidden' : 'flex')}>
-          <div
-            data-testid="action-container"
-            className="absolute hidden gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm group-hover:flex"
-            style={{ right: contentWidth + 8 }}
-          >
+          <div data-testid="action-container" className="absolute hidden gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm group-hover:flex" style={{ right: contentWidth + 8 }}>
             <ActionButton
               data-testid="copy-btn"
               onClick={() => {
                 copy(content)
-                Toast.notify({ type: 'success', message: t('actionMsg.copySuccessfully', { ns: 'common' }) })
+                toast.success(t('actionMsg.copySuccessfully', { ns: 'common' }))
               }}
             >
               <div className="i-ri-clipboard-line h-4 w-4" />
@@ -182,43 +137,14 @@ const Question: FC<QuestionProps> = ({
             )}
           </div>
         </div>
-        <div
-          ref={contentRef}
-          data-testid="question-content"
-          className={cn(
-            'w-full px-4 py-3 text-sm',
-            !isEditing && 'rounded-2xl bg-background-gradient-bg-fill-chat-bubble-bg-3 text-text-primary',
-            isEditing && 'rounded-[24px] border-[3px] border-components-option-card-option-selected-border bg-components-panel-bg-blur shadow-lg',
-          )}
-          style={(!isEditing && theme?.chatBubbleColorStyle) ? CssTransform(theme.chatBubbleColorStyle) : {}}
-        >
-          {
-            !!message_files?.length && (
-              <FileList
-                className={cn(isEditing ? 'mb-3' : 'mb-2')}
-                files={message_files}
-                showDeleteAction={false}
-                showDownloadAction={true}
-              />
-            )
-          }
+        <div ref={contentRef} data-testid="question-content" className={cn('w-full px-4 py-3 text-sm', !isEditing && 'rounded-2xl bg-background-gradient-bg-fill-chat-bubble-bg-3 text-text-primary', isEditing && 'rounded-[24px] border-[3px] border-components-option-card-option-selected-border bg-components-panel-bg-blur shadow-lg')} style={(!isEditing && theme?.chatBubbleColorStyle) ? CssTransform(theme.chatBubbleColorStyle) : {}}>
+          {!!message_files?.length && (<FileList className={cn(isEditing ? 'mb-3' : 'mb-2')} files={message_files} showDeleteAction={false} showDownloadAction={true} />)}
           {!isEditing
             ? <Markdown content={content} />
             : (
                 <div className="flex flex-col gap-4">
                   <div className="max-h-[158px] overflow-y-auto overflow-x-hidden pr-1">
-                    <Textarea
-                      className={cn(
-                        'w-full resize-none bg-transparent p-0 leading-7 text-text-primary outline-none body-lg-regular',
-                      )}
-                      autoFocus
-                      minRows={1}
-                      value={editedContent}
-                      onChange={e => setEditedContent(e.target.value)}
-                      onKeyDown={handleEditInputKeyDown}
-                      onCompositionStart={handleCompositionStart}
-                      onCompositionEnd={handleCompositionEnd}
-                    />
+                    <Textarea className={cn('w-full resize-none bg-transparent p-0 leading-7 text-text-primary outline-none body-lg-regular')} autoFocus minRows={1} value={editedContent} onChange={e => setEditedContent(e.target.value)} onKeyDown={handleEditInputKeyDown} onCompositionStart={handleCompositionStart} onCompositionEnd={handleCompositionEnd} />
                   </div>
                   <div className="flex items-center justify-end gap-2">
                     <Button className="min-w-24" onClick={handleCancelEditing} data-testid="cancel-edit-btn">{t('operation.cancel', { ns: 'common' })}</Button>
@@ -226,31 +152,20 @@ const Question: FC<QuestionProps> = ({
                   </div>
                 </div>
               )}
-          {!isEditing && (
-            <ContentSwitch
-              count={item.siblingCount}
-              currentIndex={item.siblingIndex}
-              prevDisabled={!item.prevSibling}
-              nextDisabled={!item.nextSibling}
-              switchSibling={handleSwitchSibling}
-            />
-          )}
+          {!isEditing && (<ContentSwitch count={item.siblingCount} currentIndex={item.siblingIndex} prevDisabled={!item.prevSibling} nextDisabled={!item.nextSibling} switchSibling={handleSwitchSibling} />)}
         </div>
         <div className="mt-1 h-[18px]" />
       </div>
       {!hideAvatar && (
         <div className="h-10 w-10 shrink-0">
-          {
-            questionIcon || (
-              <div className="h-full w-full rounded-full border-[0.5px] border-black/5">
-                <div className="i-custom-public-avatar-user h-full w-full" />
-              </div>
-            )
-          }
+          {questionIcon || (
+            <div className="h-full w-full rounded-full border-[0.5px] border-black/5">
+              <div className="i-custom-public-avatar-user h-full w-full" />
+            </div>
+          )}
         </div>
       )}
     </div>
   )
 }
-
 export default memo(Question)
diff --git a/web/app/components/base/chat/embedded-chatbot/__tests__/hooks.spec.tsx b/web/app/components/base/chat/embedded-chatbot/__tests__/hooks.spec.tsx
index fef04b0c6c..7ba8df7fa1 100644
--- a/web/app/components/base/chat/embedded-chatbot/__tests__/hooks.spec.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/__tests__/hooks.spec.tsx
@@ -3,7 +3,7 @@ import type { ChatConfig } from '../../types'
 import type { AppConversationData, AppData, AppMeta, ConversationItem } from '@/models/share'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { act, renderHook, waitFor } from '@testing-library/react'
-import { ToastProvider } from '@/app/components/base/toast'
+import { ToastHost } from '@/app/components/base/ui/toast'
 import { InputVarType } from '@/app/components/workflow/types'
 import {
   AppSourceType,
@@ -109,7 +109,8 @@ const createQueryClient = () => new QueryClient({
 const createWrapper = (queryClient: QueryClient) => {
   return ({ children }: { children: ReactNode }) => (
     <QueryClientProvider client={queryClient}>
-      <ToastProvider>{children}</ToastProvider>
+      <ToastHost />
+      {children}
     </QueryClientProvider>
   )
 }
diff --git a/web/app/components/base/chat/embedded-chatbot/hooks.tsx b/web/app/components/base/chat/embedded-chatbot/hooks.tsx
index da142a69ec..67b5332434 100644
--- a/web/app/components/base/chat/embedded-chatbot/hooks.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/hooks.tsx
@@ -1,38 +1,20 @@
+import type { ChatConfig, ChatItem, Feedback } from '../types'
 /* eslint-disable ts/no-explicit-any */
-import type {
-  ChatConfig,
-  ChatItem,
-  Feedback,
-} from '../types'
 import type { InputValueTypes } from '@/app/components/share/text-generation/types'
 import type { Locale } from '@/i18n-config'
-import type {
-  AppData,
-  ConversationItem,
-} from '@/models/share'
+import type { AppData, ConversationItem } from '@/models/share'
 import { useLocalStorageState } from 'ahooks'
 import { noop } from 'es-toolkit/function'
 import { produce } from 'immer'
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useToastContext } from '@/app/components/base/toast/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { addFileInfos, sortAgentSorts } from '@/app/components/tools/utils'
 import { InputVarType } from '@/app/components/workflow/types'
 import { useWebAppStore } from '@/context/web-app-context'
 import { changeLanguage } from '@/i18n-config/client'
 import { AppSourceType, updateFeedback } from '@/service/share'
-import {
-  useInvalidateShareConversations,
-  useShareChatList,
-  useShareConversationName,
-  useShareConversations,
-} from '@/service/use-share'
+import { useInvalidateShareConversations, useShareChatList, useShareConversationName, useShareConversations } from '@/service/use-share'
 import { useGetTryAppInfo, useGetTryAppParams } from '@/service/use-try-app'
 import { TransferMethod } from '@/types/app'
 import { getProcessedFilesFromResponse } from '../../file-uploader/utils'
@@ -64,7 +46,6 @@ function getFormattedChatList(messages: any[]) {
   })
   return newChatList
 }
-
 export const useEmbeddedChatbot = (appSourceType: AppSourceType, tryAppId?: string) => {
   const isInstalledApp = false // just can be webapp and try app
   const isTryApp = appSourceType === AppSourceType.tryApp
@@ -75,17 +56,13 @@ export const useEmbeddedChatbot = (appSourceType: AppSourceType, tryAppId?: stri
   const { data: tryAppParams } = useGetTryAppParams(isTryApp ? tryAppId! : '')
   const webAppParams = useWebAppStore(s => s.appParams)
   const appParams = isTryApp ? tryAppParams : webAppParams
-
   const appId = useMemo(() => {
     return isTryApp ? tryAppId : (appInfo as any)?.app_id
   }, [appInfo, isTryApp, tryAppId])
-
   const embeddedConversationId = useWebAppStore(s => s.embeddedConversationId)
   const embeddedUserId = useWebAppStore(s => s.embeddedUserId)
-
   const [userId, setUserId] = useState<string>()
   const [conversationId, setConversationId] = useState<string>()
-
   useEffect(() => {
     if (isTryApp)
       return
@@ -94,15 +71,12 @@ export const useEmbeddedChatbot = (appSourceType: AppSourceType, tryAppId?: stri
       setConversationId(conversation_id)
     })
   }, [])
-
   useEffect(() => {
     setUserId(embeddedUserId || undefined)
   }, [embeddedUserId])
-
   useEffect(() => {
     setConversationId(embeddedConversationId || undefined)
   }, [embeddedConversationId])
-
   useEffect(() => {
     if (isTryApp)
       return
@@ -110,11 +84,9 @@ export const useEmbeddedChatbot = (appSourceType: AppSourceType, tryAppId?: stri
       // Check URL parameters for language override
       const urlParams = new URLSearchParams(window.location.search)
       const localeParam = urlParams.get('locale')
-
       // Check for encoded system variables
       const systemVariables = await getProcessedSystemVariablesFromUrlParams()
       const localeFromSysVar = systemVariables.locale
-
       if (localeParam) {
         // If locale parameter exists in URL, use it instead of default
         await changeLanguage(localeParam as Locale)
@@ -128,10 +100,8 @@ export const useEmbeddedChatbot = (appSourceType: AppSourceType, tryAppId?: stri
         await changeLanguage((appInfo as unknown as AppData).site?.default_language)
       }
     }
-
     setLanguageFromParams()
   }, [appInfo])
-
   const [conversationIdInfo, setConversationIdInfo] = useLocalStorageState<Record<string, Record<string, string>>>(CONVERSATION_ID_INFO, {
     defaultValue: {},
   })
@@ -158,51 +128,36 @@ export const useEmbeddedChatbot = (appSourceType: AppSourceType, tryAppId?: stri
       })
     }
   }, [appId, conversationIdInfo, setConversationIdInfo, userId])
-
   const [newConversationId, setNewConversationId] = useState('')
   const chatShouldReloadKey = useMemo(() => {
     if (currentConversationId === newConversationId)
       return ''
-
     return currentConversationId
   }, [currentConversationId, newConversationId])
-
   const { data: appPinnedConversationData } = useShareConversations({
     appSourceType,
     appId,
     pinned: true,
     limit: 100,
   })
-  const {
-    data: appConversationData,
-    isLoading: appConversationDataLoading,
-  } = useShareConversations({
+  const { data: appConversationData, isLoading: appConversationDataLoading } = useShareConversations({
     appSourceType,
     appId,
     pinned: false,
     limit: 100,
   })
-  const {
-    data: appChatListData,
-    isLoading: appChatListDataLoading,
-  } = useShareChatList({
+  const { data: appChatListData, isLoading: appChatListDataLoading } = useShareChatList({
     conversationId: chatShouldReloadKey,
     appSourceType,
     appId,
   })
   const invalidateShareConversations = useInvalidateShareConversations()
-
   const [clearChatList, setClearChatList] = useState(false)
   const [isResponding, setIsResponding] = useState(false)
-  const appPrevChatList = useMemo(
-    () => (currentConversationId && appChatListData?.data.length)
-      ? buildChatItemTree(getFormattedChatList(appChatListData.data))
-      : [],
-    [appChatListData, currentConversationId],
-  )
-
+  const appPrevChatList = useMemo(() => (currentConversationId && appChatListData?.data.length)
+    ? buildChatItemTree(getFormattedChatList(appChatListData.data))
+    : [], [appChatListData, currentConversationId])
   const [showNewConversationItemInList, setShowNewConversationItemInList] = useState(false)
-
   const pinnedConversationList = useMemo(() => {
     return appPinnedConversationData?.data || []
   }, [appPinnedConversationData])
@@ -222,7 +177,6 @@ export const useEmbeddedChatbot = (appSourceType: AppSourceType, tryAppId?: stri
         let value = initInputs[item.paragraph.variable]
         if (value && item.paragraph.max_length && value.length > item.paragraph.max_length)
           value = value.slice(0, item.paragraph.max_length)
-
         return {
           ...item.paragraph,
           default: value || item.default || item.paragraph.default,
@@ -237,7 +191,6 @@ export const useEmbeddedChatbot = (appSourceType: AppSourceType, tryAppId?: stri
           type: 'number',
         }
       }
-
       if (item.checkbox) {
         const preset = initInputs[item.checkbox.variable] === true
         return {
@@ -246,7 +199,6 @@ export const useEmbeddedChatbot = (appSourceType: AppSourceType, tryAppId?: stri
           type: 'checkbox',
         }
       }
-
       if (item.select) {
         const isInputInOptions = item.select.options.includes(initInputs[item.select.variable])
         return {
@@ -255,32 +207,27 @@ export const useEmbeddedChatbot = (appSourceType: AppSourceType, tryAppId?: stri
           type: 'select',
         }
       }
-
       if (item['file-list']) {
         return {
           ...item['file-list'],
           type: 'file-list',
         }
       }
-
       if (item.file) {
         return {
           ...item.file,
           type: 'file',
         }
       }
-
       if (item.json_object) {
         return {
           ...item.json_object,
           type: 'json_object',
         }
       }
-
       let value = initInputs[item['text-input'].variable]
       if (value && item['text-input'].max_length && value.length > item['text-input'].max_length)
         value = value.slice(0, item['text-input'].max_length)
-
       return {
         ...item['text-input'],
         default: value || item.default || item['text-input'].default,
@@ -288,11 +235,9 @@ export const useEmbeddedChatbot = (appSourceType: AppSourceType, tryAppId?: stri
       }
     })
   }, [initInputs, appParams])
-
   const allInputsHidden = useMemo(() => {
     return inputsForms.length > 0 && inputsForms.every(item => item.hide === true)
   }, [inputsForms])
-
   useEffect(() => {
     // init inputs from url params
     (async () => {
@@ -306,13 +251,11 @@ export const useEmbeddedChatbot = (appSourceType: AppSourceType, tryAppId?: stri
   }, [])
   useEffect(() => {
     const conversationInputs: Record<string, InputValueTypes> = {}
-
     inputsForms.forEach((item) => {
       conversationInputs[item.variable] = item.default || null
     })
     handleNewConversationInputsChange(conversationInputs)
   }, [handleNewConversationInputsChange, inputsForms])
-
   const { data: newConversation } = useShareConversationName({
     conversationId: newConversationId,
     appSourceType,
@@ -324,12 +267,11 @@ export const useEmbeddedChatbot = (appSourceType: AppSourceType, tryAppId?: stri
   const [originConversationList, setOriginConversationList] = useState<ConversationItem[]>([])
   useEffect(() => {
     if (appConversationData?.data && !appConversationDataLoading)
-      // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect
+    // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect
       setOriginConversationList(appConversationData?.data)
   }, [appConversationData, appConversationDataLoading])
   const conversationList = useMemo(() => {
     const data = originConversationList.slice()
-
     if (showNewConversationItemInList && data[0]?.id !== '') {
       data.unshift({
         id: '',
@@ -340,12 +282,10 @@ export const useEmbeddedChatbot = (appSourceType: AppSourceType, tryAppId?: stri
     }
     return data
   }, [originConversationList, showNewConversationItemInList, t])
-
   useEffect(() => {
     if (newConversation) {
       setOriginConversationList(produce((draft) => {
         const index = draft.findIndex(item => item.id === newConversation.id)
-
         if (index > -1)
           draft[index] = newConversation
         else
@@ -353,16 +293,12 @@ export const useEmbeddedChatbot = (appSourceType: AppSourceType, tryAppId?: stri
       }))
     }
   }, [newConversation])
-
   const currentConversationItem = useMemo(() => {
     let conversationItem = conversationList.find(item => item.id === currentConversationId)
-
     if (!conversationItem && pinnedConversationList.length)
       conversationItem = pinnedConversationList.find(item => item.id === currentConversationId)
-
     return conversationItem
   }, [conversationList, currentConversationId, pinnedConversationList])
-
   const currentConversationLatestInputs = useMemo(() => {
     if (!currentConversationId || !appChatListData?.data.length)
       return newConversationInputsRef.current || {}
@@ -371,15 +307,12 @@ export const useEmbeddedChatbot = (appSourceType: AppSourceType, tryAppId?: stri
   const [currentConversationInputs, setCurrentConversationInputs] = useState<Record<string, any>>(currentConversationLatestInputs || {})
   useEffect(() => {
     if (currentConversationItem && !isTryApp)
-      // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect
+    // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect
       setCurrentConversationInputs(currentConversationLatestInputs || {})
   }, [currentConversationItem, currentConversationLatestInputs])
-
-  const { notify } = useToastContext()
   const checkInputsRequired = useCallback((silent?: boolean) => {
     if (allInputsHidden)
       return true
-
     let hasEmptyInput = ''
     let fileIsUploading = false
     const requiredVars = inputsForms.filter(({ required, type }) => required && type !== InputVarType.checkbox)
@@ -387,13 +320,10 @@ export const useEmbeddedChatbot = (appSourceType: AppSourceType, tryAppId?: stri
       requiredVars.forEach(({ variable, label, type }) => {
         if (hasEmptyInput)
           return
-
         if (fileIsUploading)
           return
-
         if (!newConversationInputsRef.current[variable] && !silent)
           hasEmptyInput = label as string
-
         if ((type === InputVarType.singleFile || type === InputVarType.multiFiles) && newConversationInputsRef.current[variable] && !silent) {
           const files = newConversationInputsRef.current[variable]
           if (Array.isArray(files))
@@ -403,26 +333,25 @@ export const useEmbeddedChatbot = (appSourceType: AppSourceType, tryAppId?: stri
         }
       })
     }
-
     if (hasEmptyInput) {
-      notify({ type: 'error', message: t('errorMessage.valueOfVarRequired', { ns: 'appDebug', key: hasEmptyInput }) })
+      toast.error(t('errorMessage.valueOfVarRequired', { ns: 'appDebug', key: hasEmptyInput }))
       return false
     }
-
     if (fileIsUploading) {
-      notify({ type: 'info', message: t('errorMessage.waitForFileUpload', { ns: 'appDebug' }) })
+      toast.info(t('errorMessage.waitForFileUpload', { ns: 'appDebug' }))
       return
     }
-
     return true
-  }, [inputsForms, notify, t, allInputsHidden])
+  }, [inputsForms, t, allInputsHidden])
   const handleStartChat = useCallback((callback?: () => void) => {
     if (checkInputsRequired()) {
       setShowNewConversationItemInList(true)
       callback?.()
     }
   }, [setShowNewConversationItemInList, checkInputsRequired])
-  const currentChatInstanceRef = useRef<{ handleStop: () => void }>({ handleStop: noop })
+  const currentChatInstanceRef = useRef<{
+    handleStop: () => void
+  }>({ handleStop: noop })
   const handleChangeConversation = useCallback((conversationId: string) => {
     currentChatInstanceRef.current.handleStop()
     setNewConversationId('')
@@ -435,26 +364,22 @@ export const useEmbeddedChatbot = (appSourceType: AppSourceType, tryAppId?: stri
       setClearChatList(true)
       return
     }
-
     currentChatInstanceRef.current.handleStop()
     setShowNewConversationItemInList(true)
     handleChangeConversation('')
     handleNewConversationInputsChange(await getProcessedInputsFromUrlParams())
     setClearChatList(true)
   }, [isTryApp, setShowNewConversationItemInList, handleNewConversationInputsChange, setClearChatList])
-
   const handleNewConversationCompleted = useCallback((newConversationId: string) => {
     setNewConversationId(newConversationId)
     handleConversationIdInfoChange(newConversationId)
     setShowNewConversationItemInList(false)
     invalidateShareConversations()
   }, [handleConversationIdInfoChange, invalidateShareConversations])
-
   const handleFeedback = useCallback(async (messageId: string, feedback: Feedback) => {
     await updateFeedback({ url: `/messages/${messageId}/feedbacks`, body: { rating: feedback.rating, content: feedback.content } }, appSourceType, appId)
-    notify({ type: 'success', message: t('api.success', { ns: 'common' }) })
-  }, [appSourceType, appId, t, notify])
-
+    toast.success(t('api.success', { ns: 'common' }))
+  }, [appSourceType, appId, t])
   return {
     appSourceType,
     isInstalledApp,
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 689a9e0439..50c3790e83 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,8 +16,8 @@ vi.mock('@/next/navigation', () => ({
   useSearchParams: () => new URLSearchParams(),
 }))
 
-vi.mock('@/app/components/base/toast/context', () => ({
-  useToastContext: () => ({ notify: vi.fn() }),
+vi.mock('@/app/components/base/ui/toast', () => ({
+
 }))
 
 // Mock CodeEditor to trigger onChange easily
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/__tests__/annotation-ctrl-button.spec.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/__tests__/annotation-ctrl-button.spec.tsx
index 2932d81d06..5156c4e91c 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/__tests__/annotation-ctrl-button.spec.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/__tests__/annotation-ctrl-button.spec.tsx
@@ -28,7 +28,7 @@ vi.mock('@/service/annotation', () => ({
   addAnnotation: (...args: unknown[]) => mockAddAnnotation(...args),
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/ui/toast', () => ({
   default: { notify: vi.fn() },
 }))
 
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/__tests__/config-param-modal.spec.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/__tests__/config-param-modal.spec.tsx
index d46b83b3df..ea70812d4e 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/__tests__/config-param-modal.spec.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/__tests__/config-param-modal.spec.tsx
@@ -1,5 +1,5 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import ConfigParamModal from '../config-param-modal'
 
 let mockHooksReturn: {
@@ -31,10 +31,6 @@ vi.mock('@/app/components/header/account-setting/model-provider-page/model-selec
   ),
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
-  default: { notify: vi.fn() },
-}))
-
 vi.mock('@/config', () => ({
   ANNOTATION_DEFAULT: { score_threshold: 0.9 },
 }))
@@ -63,8 +59,11 @@ const defaultAnnotationConfig = {
 }
 
 describe('ConfigParamModal', () => {
+  const toastErrorSpy = vi.spyOn(toast, 'error').mockReturnValue('toast-error')
+
   beforeEach(() => {
     vi.clearAllMocks()
+    toastErrorSpy.mockClear()
     mockHooksReturn = {
       modelList: [{ provider: { provider: 'openai' }, models: [{ model: 'text-embedding-ada-002' }] }],
       defaultModel: { provider: { provider: 'openai' }, model: 'text-embedding-ada-002' },
@@ -241,7 +240,7 @@ describe('ConfigParamModal', () => {
     const saveBtn = buttons.find(b => b.textContent?.includes('initSetup'))
     fireEvent.click(saveBtn!)
 
-    expect(Toast.notify).toHaveBeenCalledWith(
+    expect(toastErrorSpy).toHaveBeenCalledWith(
       expect.objectContaining({ type: 'error' }),
     )
   })
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-button.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-button.tsx
index 0e8fa8dfae..a93a180e27 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-button.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-button.tsx
@@ -1,14 +1,11 @@
 'use client'
 import type { FC } from 'react'
-import {
-  RiEditLine,
-  RiFileEditLine,
-} from '@remixicon/react'
+import { RiEditLine, RiFileEditLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import Toast from '@/app/components/base/toast'
 import Tooltip from '@/app/components/base/tooltip'
+import { toast } from '@/app/components/base/ui/toast'
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
 import { addAnnotation } from '@/service/annotation'
@@ -22,16 +19,7 @@ type Props = {
   onAdded: (annotationId: string, authorName: string) => void
   onEdit: () => void
 }
-
-const AnnotationCtrlButton: FC<Props> = ({
-  cached,
-  query,
-  answer,
-  appId,
-  messageId,
-  onAdded,
-  onEdit,
-}) => {
+const AnnotationCtrlButton: FC<Props> = ({ cached, query, answer, appId, messageId, onAdded, onEdit }) => {
   const { t } = useTranslation()
   const { plan, enableBilling } = useProviderContext()
   const isAnnotationFull = (enableBilling && plan.usage.annotatedResponse >= plan.total.annotatedResponse)
@@ -46,28 +34,20 @@ const AnnotationCtrlButton: FC<Props> = ({
       question: query,
       answer,
     })
-    Toast.notify({
-      message: t('api.actionSuccess', { ns: 'common' }) as string,
-      type: 'success',
-    })
+    toast.success(t('api.actionSuccess', { ns: 'common' }) as string)
     onAdded(res.id, res.account?.name ?? '')
   }
-
   return (
     <>
       {cached && (
-        <Tooltip
-          popupContent={t('feature.annotation.edit', { ns: 'appDebug' })}
-        >
+        <Tooltip popupContent={t('feature.annotation.edit', { ns: 'appDebug' })}>
           <ActionButton onClick={onEdit}>
             <RiEditLine className="h-4 w-4" />
           </ActionButton>
         </Tooltip>
       )}
       {!cached && answer && (
-        <Tooltip
-          popupContent={t('feature.annotation.add', { ns: 'appDebug' })}
-        >
+        <Tooltip popupContent={t('feature.annotation.add', { ns: 'appDebug' })}>
           <ActionButton onClick={handleAdd}>
             <RiFileEditLine className="h-4 w-4" />
           </ActionButton>
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx
index ac0b6d0f57..56e58b0319 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx
@@ -6,7 +6,7 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
@@ -25,22 +25,10 @@ type Props = {
   isInit?: boolean
   annotationConfig: AnnotationReplyConfig
 }
-
-const ConfigParamModal: FC<Props> = ({
-  isShow,
-  onHide: doHide,
-  onSave,
-  isInit,
-  annotationConfig: oldAnnotationConfig,
-}) => {
+const ConfigParamModal: FC<Props> = ({ isShow, onHide: doHide, onSave, isInit, annotationConfig: oldAnnotationConfig }) => {
   const { t } = useTranslation()
-  const {
-    modelList: embeddingsModelList,
-    defaultModel: embeddingsDefaultModel,
-    currentModel: isEmbeddingsDefaultModelValid,
-  } = useModelListAndDefaultModelAndCurrentProviderAndModel(ModelTypeEnum.textEmbedding)
+  const { modelList: embeddingsModelList, defaultModel: embeddingsDefaultModel, currentModel: isEmbeddingsDefaultModelValid } = useModelListAndDefaultModelAndCurrentProviderAndModel(ModelTypeEnum.textEmbedding)
   const [annotationConfig, setAnnotationConfig] = useState(oldAnnotationConfig)
-
   const [isLoading, setLoading] = useState(false)
   const [embeddingModel, setEmbeddingModel] = useState(oldAnnotationConfig.embedding_model
     ? {
@@ -57,13 +45,9 @@ const ConfigParamModal: FC<Props> = ({
     if (!isLoading)
       doHide()
   }
-
   const handleSave = async () => {
     if (!embeddingModel || !embeddingModel.modelName || (embeddingModel.modelName === embeddingsDefaultModel?.model && !isEmbeddingsDefaultModelValid)) {
-      Toast.notify({
-        message: t('modelProvider.embeddingModel.required', { ns: 'common' }),
-        type: 'error',
-      })
+      toast.error(t('modelProvider.embeddingModel.required', { ns: 'common' }))
       return
     }
     setLoading(true)
@@ -73,22 +57,14 @@ const ConfigParamModal: FC<Props> = ({
     }, annotationConfig.score_threshold)
     setLoading(false)
   }
-
   return (
-    <Modal
-      isShow={isShow}
-      onClose={onHide}
-      className="!mt-14 !w-[640px] !max-w-none !p-6"
-    >
+    <Modal isShow={isShow} onClose={onHide} className="!mt-14 !w-[640px] !max-w-none !p-6">
       <div className="mb-2 text-text-primary title-2xl-semi-bold">
         {t(`initSetup.${isInit ? 'title' : 'configTitle'}`, { ns: 'appAnnotation' })}
       </div>
 
       <div className="mt-6 space-y-3">
-        <Item
-          title={t('feature.annotation.scoreThreshold.title', { ns: 'appDebug' })}
-          tooltip={t('feature.annotation.scoreThreshold.description', { ns: 'appDebug' })}
-        >
+        <Item title={t('feature.annotation.scoreThreshold.title', { ns: 'appDebug' })} tooltip={t('feature.annotation.scoreThreshold.description', { ns: 'appDebug' })}>
           <ScoreSlider
             className="mt-1"
             value={(annotationConfig.score_threshold || ANNOTATION_DEFAULT.score_threshold) * 100}
@@ -101,10 +77,7 @@ const ConfigParamModal: FC<Props> = ({
           />
         </Item>
 
-        <Item
-          title={t('modelProvider.embeddingModel.key', { ns: 'common' })}
-          tooltip={t('embeddingModelSwitchTip', { ns: 'appAnnotation' })}
-        >
+        <Item title={t('modelProvider.embeddingModel.key', { ns: 'common' })} tooltip={t('embeddingModelSwitchTip', { ns: 'appAnnotation' })}>
           <div className="pt-1">
             <ModelSelector
               defaultModel={embeddingModel && {
@@ -125,11 +98,7 @@ const ConfigParamModal: FC<Props> = ({
 
       <div className="mt-6 flex justify-end gap-2">
         <Button onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
-        <Button
-          variant="primary"
-          onClick={handleSave}
-          loading={isLoading}
-        >
+        <Button variant="primary" onClick={handleSave} loading={isLoading}>
           <div></div>
           <div>{t(`initSetup.${isInit ? 'confirmBtn' : 'configConfirmBtn'}`, { ns: 'appAnnotation' })}</div>
         </Button>
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 d200801d5b..01dc06f9dd 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
@@ -4,8 +4,8 @@ import * as i18n from 'react-i18next'
 import ModerationSettingModal from '../moderation-setting-modal'
 
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/toast/context', () => ({
-  useToastContext: () => ({ notify: mockNotify }),
+vi.mock('@/app/components/base/ui/toast', () => ({
+
 }))
 
 const mockSetShowAccountSettingModal = vi.fn()
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 460b1cceea..7700b2468b 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/context'
+import { toast } from '@/app/components/base/ui/toast'
 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'
@@ -20,27 +20,19 @@ import FormGeneration from './form-generation'
 import ModerationContent from './moderation-content'
 
 const systemTypes = ['openai_moderation', 'keywords', 'api']
-
 type Provider = {
   key: string
   name: string
   form_schema?: CodeBasedExtensionItem['form_schema']
 }
-
 type ModerationSettingModalProps = {
   data: ModerationConfig
   onCancel: () => void
   onSave: (moderationConfig: ModerationConfig) => void
 }
-
-const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
-  data,
-  onCancel,
-  onSave,
-}) => {
+const ModerationSettingModal: FC<ModerationSettingModalProps> = ({ data, onCancel, onSave }) => {
   const { t } = useTranslation()
   const docLink = useDocLink()
-  const { notify } = useToastContext()
   const locale = useLocale()
   const { data: modelProviders, isPending: isLoading, refetch: refetchModelProviders } = useModelProviders()
   const [localeData, setLocaleData] = useState<ModerationConfig>(data)
@@ -73,25 +65,20 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
       key: 'api',
       name: t('apiBasedExtension.selector.title', { ns: 'common' }),
     },
-    ...(
-      codeBasedExtensionList
-        ? codeBasedExtensionList.data.map((item) => {
-            return {
-              key: item.name,
-              name: locale === 'zh-Hans' ? item.label['zh-Hans'] : item.label['en-US'],
-              form_schema: item.form_schema,
-            }
-          })
-        : []
-    ),
+    ...(codeBasedExtensionList
+      ? codeBasedExtensionList.data.map((item) => {
+          return {
+            key: item.name,
+            name: locale === 'zh-Hans' ? item.label['zh-Hans'] : item.label['en-US'],
+            form_schema: item.form_schema,
+          }
+        })
+      : []),
   ]
-
   const currentProvider = providers.find(provider => provider.key === localeData.type)
-
   const handleDataTypeChange = (type: string) => {
     let config: undefined | Record<string, any>
     const currProvider = providers.find(provider => provider.key === type)
-
     if (systemTypes.findIndex(t => t === type) < 0 && currProvider?.form_schema) {
       config = currProvider?.form_schema.reduce((prev, next) => {
         prev[next.variable] = next.default
@@ -104,19 +91,15 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
       config,
     })
   }
-
   const handleDataKeywordsChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     const value = e.target.value
-
     const arr = value.split('\n').reduce((prev: string[], next: string) => {
       if (next !== '')
         prev.push(next.slice(0, 100))
       if (next === '' && prev[prev.length - 1] !== '')
         prev.push(next)
-
       return prev
     }, [])
-
     setLocaleData({
       ...localeData,
       config: {
@@ -125,7 +108,6 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
       },
     })
   }
-
   const handleDataContentChange = (contentType: string, contentConfig: ModerationContentConfig) => {
     setLocaleData({
       ...localeData,
@@ -135,7 +117,6 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
       },
     })
   }
-
   const handleDataApiBasedChange = (apiBasedExtensionId: string) => {
     setLocaleData({
       ...localeData,
@@ -145,7 +126,6 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
       },
     })
   }
-
   const handleDataExtraChange = (extraValue: Record<string, string>) => {
     setLocaleData({
       ...localeData,
@@ -155,24 +135,19 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
       },
     })
   }
-
   const formatData = (originData: ModerationConfig) => {
     const { enabled, type, config } = originData
     const { inputs_config, outputs_config } = config!
     const params: Record<string, string | undefined> = {}
-
     if (type === 'keywords')
       params.keywords = config?.keywords
-
     if (type === 'api')
       params.api_based_extension_id = config?.api_based_extension_id
-
     if (systemTypes.findIndex(t => t === type) < 0 && currentProvider?.form_schema) {
       currentProvider.form_schema.forEach((form) => {
         params[form.variable] = config?.[form.variable]
       })
     }
-
     return {
       type,
       enabled,
@@ -183,58 +158,42 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
       },
     }
   }
-
   const handleSave = () => {
     /* v8 ignore next -- UI-invariant guard: same condition is used in Save button disabled logic, so when true handleSave has no user-triggerable invocation path. @preserve */
     if (localeData.type === 'openai_moderation' && !isOpenAIProviderConfigured)
       return
-
     if (!localeData.config?.inputs_config?.enabled && !localeData.config?.outputs_config?.enabled) {
-      notify({ type: 'error', message: t('feature.moderation.modal.content.condition', { ns: 'appDebug' }) })
+      toast.error(t('feature.moderation.modal.content.condition', { ns: 'appDebug' }))
       return
     }
-
     if (localeData.type === 'keywords' && !localeData.config.keywords) {
-      notify({ type: 'error', message: t('errorMessage.valueOfVarRequired', { ns: 'appDebug', key: locale !== LanguagesSupported[1] ? 'keywords' : '关键词' }) })
+      toast.error(t('errorMessage.valueOfVarRequired', { ns: 'appDebug', key: locale !== LanguagesSupported[1] ? 'keywords' : '关键词' }))
       return
     }
-
     if (localeData.type === 'api' && !localeData.config.api_based_extension_id) {
-      notify({ type: 'error', message: t('errorMessage.valueOfVarRequired', { ns: 'appDebug', key: locale !== LanguagesSupported[1] ? 'API Extension' : 'API 扩展' }) })
+      toast.error(t('errorMessage.valueOfVarRequired', { ns: 'appDebug', key: locale !== LanguagesSupported[1] ? 'API Extension' : 'API 扩展' }))
       return
     }
-
     if (systemTypes.findIndex(t => t === localeData.type) < 0 && currentProvider?.form_schema) {
       for (let i = 0; i < currentProvider.form_schema.length; i++) {
         if (!localeData.config?.[currentProvider.form_schema[i].variable] && currentProvider.form_schema[i].required) {
-          notify({
-            type: 'error',
-            message: t('errorMessage.valueOfVarRequired', { ns: 'appDebug', key: locale !== LanguagesSupported[1] ? currentProvider.form_schema[i].label['en-US'] : currentProvider.form_schema[i].label['zh-Hans'] }),
-          })
+          toast.error(t('errorMessage.valueOfVarRequired', { ns: 'appDebug', key: locale !== LanguagesSupported[1] ? currentProvider.form_schema[i].label['en-US'] : currentProvider.form_schema[i].label['zh-Hans'] }))
           return
         }
       }
     }
-
     if (localeData.config.inputs_config?.enabled && !localeData.config.inputs_config.preset_response && localeData.type !== 'api') {
-      notify({ type: 'error', message: t('feature.moderation.modal.content.errorMessage', { ns: 'appDebug' }) })
+      toast.error(t('feature.moderation.modal.content.errorMessage', { ns: 'appDebug' }))
       return
     }
-
     if (localeData.config.outputs_config?.enabled && !localeData.config.outputs_config.preset_response && localeData.type !== 'api') {
-      notify({ type: 'error', message: t('feature.moderation.modal.content.errorMessage', { ns: 'appDebug' }) })
+      toast.error(t('feature.moderation.modal.content.errorMessage', { ns: 'appDebug' }))
       return
     }
-
     onSave(formatData(localeData))
   }
-
   return (
-    <Modal
-      isShow
-      onClose={noop}
-      className="!mt-14 !w-[600px] !max-w-none !p-6"
-    >
+    <Modal isShow onClose={noop} className="!mt-14 !w-[600px] !max-w-none !p-6">
       <div className="flex items-center justify-between">
         <div className="text-text-primary title-2xl-semi-bold">{t('feature.moderation.modal.title', { ns: 'appDebug' })}</div>
         <div
@@ -257,139 +216,74 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
           {t('feature.moderation.modal.provider.title', { ns: 'appDebug' })}
         </div>
         <div className="grid grid-cols-3 gap-2.5">
-          {
-            providers.map(provider => (
-              <div
-                key={provider.key}
-                className={cn(
-                  'flex h-8 cursor-default items-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 text-text-secondary system-sm-regular',
-                  localeData.type !== provider.key && 'cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
-                  localeData.type === provider.key && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs system-sm-medium',
-                  localeData.type === 'openai_moderation' && provider.key === 'openai_moderation' && !isOpenAIProviderConfigured && 'text-text-disabled',
-                )}
-                onClick={() => handleDataTypeChange(provider.key)}
-              >
-                <div className={cn(
-                  'mr-2 h-4 w-4 rounded-full border border-components-radio-border bg-components-radio-bg shadow-xs',
-                  localeData.type === provider.key && 'border-[5px] border-components-radio-border-checked',
-                )}
-                >
-                </div>
-                {provider.name}
+          {providers.map(provider => (
+            <div key={provider.key} className={cn('flex h-8 cursor-default items-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 text-text-secondary system-sm-regular', localeData.type !== provider.key && 'cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs', localeData.type === provider.key && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs system-sm-medium', localeData.type === 'openai_moderation' && provider.key === 'openai_moderation' && !isOpenAIProviderConfigured && 'text-text-disabled')} onClick={() => handleDataTypeChange(provider.key)}>
+              <div className={cn('mr-2 h-4 w-4 rounded-full border border-components-radio-border bg-components-radio-bg shadow-xs', localeData.type === provider.key && 'border-[5px] border-components-radio-border-checked')}>
               </div>
-            ))
-          }
+              {provider.name}
+            </div>
+          ))}
         </div>
-        {
-          !isLoading && !isOpenAIProviderConfigured && localeData.type === 'openai_moderation' && (
-            <div className="mt-2 flex items-center rounded-lg border border-[#FEF0C7] bg-[#FFFAEB] px-3 py-2">
-              <span className="i-custom-vender-line-general-info-circle mr-1 h-4 w-4 text-[#F79009]" />
-              <div className="flex items-center text-xs font-medium text-gray-700">
-                {t('feature.moderation.modal.openaiNotConfig.before', { ns: 'appDebug' })}
-                <span
-                  className="cursor-pointer text-primary-600"
-                  onClick={handleOpenSettingsModal}
-                >
+        {!isLoading && !isOpenAIProviderConfigured && localeData.type === 'openai_moderation' && (
+          <div className="mt-2 flex items-center rounded-lg border border-[#FEF0C7] bg-[#FFFAEB] px-3 py-2">
+            <span className="i-custom-vender-line-general-info-circle mr-1 h-4 w-4 text-[#F79009]" />
+            <div className="flex items-center text-xs font-medium text-gray-700">
+              {t('feature.moderation.modal.openaiNotConfig.before', { ns: 'appDebug' })}
+              <span className="cursor-pointer text-primary-600" onClick={handleOpenSettingsModal}>
                   &nbsp;
-                  {t('settings.provider', { ns: 'common' })}
+                {t('settings.provider', { ns: 'common' })}
                   &nbsp;
-                </span>
-                {t('feature.moderation.modal.openaiNotConfig.after', { ns: 'appDebug' })}
-              </div>
+              </span>
+              {t('feature.moderation.modal.openaiNotConfig.after', { ns: 'appDebug' })}
             </div>
-          )
-        }
+          </div>
+        )}
       </div>
-      {
-        localeData.type === 'keywords' && (
-          <div className="py-2">
-            <div className="mb-1 text-sm font-medium text-text-primary">{t('feature.moderation.modal.provider.keywords', { ns: 'appDebug' })}</div>
-            <div className="mb-2 text-xs text-text-tertiary">{t('feature.moderation.modal.keywords.tip', { ns: 'appDebug' })}</div>
-            <div className="relative h-[88px] rounded-lg bg-components-input-bg-normal px-3 py-2">
-              <textarea
-                value={localeData.config?.keywords || ''}
-                onChange={handleDataKeywordsChange}
-                className="block h-full w-full resize-none appearance-none bg-transparent text-sm text-text-secondary outline-none"
-                placeholder={t('feature.moderation.modal.keywords.placeholder', { ns: 'appDebug' }) || ''}
-              />
-              <div className="absolute bottom-2 right-2 flex h-5 items-center rounded-md bg-background-section px-1 text-xs font-medium text-text-quaternary">
-                <span>{(localeData.config?.keywords || '').split('\n').filter(Boolean).length}</span>
-                /
-                <span className="text-text-tertiary">
-                  100
-                  {t('feature.moderation.modal.keywords.line', { ns: 'appDebug' })}
-                </span>
-              </div>
+      {localeData.type === 'keywords' && (
+        <div className="py-2">
+          <div className="mb-1 text-sm font-medium text-text-primary">{t('feature.moderation.modal.provider.keywords', { ns: 'appDebug' })}</div>
+          <div className="mb-2 text-xs text-text-tertiary">{t('feature.moderation.modal.keywords.tip', { ns: 'appDebug' })}</div>
+          <div className="relative h-[88px] rounded-lg bg-components-input-bg-normal px-3 py-2">
+            <textarea value={localeData.config?.keywords || ''} onChange={handleDataKeywordsChange} className="block h-full w-full resize-none appearance-none bg-transparent text-sm text-text-secondary outline-none" placeholder={t('feature.moderation.modal.keywords.placeholder', { ns: 'appDebug' }) || ''} />
+            <div className="absolute bottom-2 right-2 flex h-5 items-center rounded-md bg-background-section px-1 text-xs font-medium text-text-quaternary">
+              <span>{(localeData.config?.keywords || '').split('\n').filter(Boolean).length}</span>
+              /
+              <span className="text-text-tertiary">
+                100
+                {t('feature.moderation.modal.keywords.line', { ns: 'appDebug' })}
+              </span>
             </div>
           </div>
-        )
-      }
-      {
-        localeData.type === 'api' && (
-          <div className="py-2">
-            <div className="flex h-9 items-center justify-between">
-              <div className="text-sm font-medium text-text-primary">{t('apiBasedExtension.selector.title', { ns: 'common' })}</div>
-              <a
-                href={docLink('/use-dify/workspace/api-extension/api-extension')}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="group flex items-center text-xs text-text-tertiary hover:text-primary-600"
-              >
-                <span className="i-custom-vender-line-education-book-open-01 mr-1 h-3 w-3 text-text-tertiary group-hover:text-primary-600" />
-                {t('apiBasedExtension.link', { ns: 'common' })}
-              </a>
-            </div>
-            <ApiBasedExtensionSelector
-              value={localeData.config?.api_based_extension_id || ''}
-              onChange={handleDataApiBasedChange}
-            />
+        </div>
+      )}
+      {localeData.type === 'api' && (
+        <div className="py-2">
+          <div className="flex h-9 items-center justify-between">
+            <div className="text-sm font-medium text-text-primary">{t('apiBasedExtension.selector.title', { ns: 'common' })}</div>
+            <a href={docLink('/use-dify/workspace/api-extension/api-extension')} target="_blank" rel="noopener noreferrer" className="group flex items-center text-xs text-text-tertiary hover:text-primary-600">
+              <span className="i-custom-vender-line-education-book-open-01 mr-1 h-3 w-3 text-text-tertiary group-hover:text-primary-600" />
+              {t('apiBasedExtension.link', { ns: 'common' })}
+            </a>
           </div>
-        )
-      }
-      {
-        systemTypes.findIndex(t => t === localeData.type) < 0
+          <ApiBasedExtensionSelector value={localeData.config?.api_based_extension_id || ''} onChange={handleDataApiBasedChange} />
+        </div>
+      )}
+      {systemTypes.findIndex(t => t === localeData.type) < 0
         && currentProvider?.form_schema
-        && (
-          <FormGeneration
-            forms={currentProvider?.form_schema}
-            value={localeData.config}
-            onChange={handleDataExtraChange}
-          />
-        )
-      }
+        && (<FormGeneration forms={currentProvider?.form_schema} value={localeData.config} onChange={handleDataExtraChange} />)}
       <Divider bgStyle="gradient" className="my-3 h-px" />
-      <ModerationContent
-        title={t('feature.moderation.modal.content.input', { ns: 'appDebug' }) || ''}
-        config={localeData.config?.inputs_config || { enabled: false, preset_response: '' }}
-        onConfigChange={config => handleDataContentChange('inputs_config', config)}
-        info={(localeData.type === 'api' && t('feature.moderation.modal.content.fromApi', { ns: 'appDebug' })) || ''}
-        showPreset={localeData.type !== 'api'}
-      />
-      <ModerationContent
-        title={t('feature.moderation.modal.content.output', { ns: 'appDebug' }) || ''}
-        config={localeData.config?.outputs_config || { enabled: false, preset_response: '' }}
-        onConfigChange={config => handleDataContentChange('outputs_config', config)}
-        info={(localeData.type === 'api' && t('feature.moderation.modal.content.fromApi', { ns: 'appDebug' })) || ''}
-        showPreset={localeData.type !== 'api'}
-      />
+      <ModerationContent title={t('feature.moderation.modal.content.input', { ns: 'appDebug' }) || ''} config={localeData.config?.inputs_config || { enabled: false, preset_response: '' }} onConfigChange={config => handleDataContentChange('inputs_config', config)} info={(localeData.type === 'api' && t('feature.moderation.modal.content.fromApi', { ns: 'appDebug' })) || ''} showPreset={localeData.type !== 'api'} />
+      <ModerationContent title={t('feature.moderation.modal.content.output', { ns: 'appDebug' }) || ''} config={localeData.config?.outputs_config || { enabled: false, preset_response: '' }} onConfigChange={config => handleDataContentChange('outputs_config', config)} info={(localeData.type === 'api' && t('feature.moderation.modal.content.fromApi', { ns: 'appDebug' })) || ''} showPreset={localeData.type !== 'api'} />
       <div className="mb-8 mt-1 text-xs font-medium text-text-tertiary">{t('feature.moderation.modal.content.condition', { ns: 'appDebug' })}</div>
       <div className="flex items-center justify-end">
-        <Button
-          onClick={onCancel}
-          className="mr-2"
-        >
+        <Button onClick={onCancel} className="mr-2">
           {t('operation.cancel', { ns: 'common' })}
         </Button>
-        <Button
-          variant="primary"
-          onClick={handleSave}
-          disabled={localeData.type === 'openai_moderation' && !isOpenAIProviderConfigured}
-        >
+        <Button variant="primary" onClick={handleSave} disabled={localeData.type === 'openai_moderation' && !isOpenAIProviderConfigured}>
           {t('operation.save', { ns: 'common' })}
         </Button>
       </div>
     </Modal>
   )
 }
-
 export default ModerationSettingModal
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 824a3b7a03..438d0385d5 100644
--- a/web/app/components/base/file-uploader/__tests__/hooks.spec.ts
+++ b/web/app/components/base/file-uploader/__tests__/hooks.spec.ts
@@ -10,11 +10,8 @@ vi.mock('@/next/navigation', () => ({
   useParams: () => ({ token: undefined }),
 }))
 
-// Exception: hook requires toast context that isn't available without a provider wrapper
-vi.mock('@/app/components/base/toast/context', () => ({
-  useToastContext: () => ({
-    notify: mockNotify,
-  }),
+vi.mock('@/app/components/base/ui/toast', () => ({
+
 }))
 
 const mockSetFiles = vi.fn()
diff --git a/web/app/components/base/file-uploader/file-uploader-in-attachment/index.stories.tsx b/web/app/components/base/file-uploader/file-uploader-in-attachment/index.stories.tsx
index f10fce1173..502bbaf59d 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-attachment/index.stories.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-attachment/index.stories.tsx
@@ -4,7 +4,7 @@ import type { FileUpload } from '@/app/components/base/features/types'
 import { useState } from 'react'
 import { fn } from 'storybook/test'
 import { PreviewMode } from '@/app/components/base/features/types'
-import { ToastProvider } from '@/app/components/base/toast'
+import { ToastHost } from '@/app/components/base/ui/toast'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import { TransferMethod } from '@/types/app'
 import FileUploaderInAttachmentWrapper from './index'
@@ -83,7 +83,8 @@ const AttachmentDemo = (props: React.ComponentProps<typeof FileUploaderInAttachm
   const [files, setFiles] = useState<FileEntity[]>(mockFiles)
 
   return (
-    <ToastProvider>
+    <>
+      <ToastHost />
       <div className="w-[320px] rounded-2xl border border-divider-subtle bg-components-panel-bg p-4 shadow-xs">
         <FileUploaderInAttachmentWrapper
           {...props}
@@ -91,7 +92,7 @@ const AttachmentDemo = (props: React.ComponentProps<typeof FileUploaderInAttachm
           onChange={setFiles}
         />
       </div>
-    </ToastProvider>
+    </>
   )
 }
 
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.stories.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.stories.tsx
index 632fc40136..7f718ca961 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.stories.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import type { FileEntity } from '../types'
 import type { FileUpload } from '@/app/components/base/features/types'
 import { useState } from 'react'
-import { ToastProvider } from '@/app/components/base/toast'
+import { ToastHost } from '@/app/components/base/ui/toast'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import { TransferMethod } from '@/types/app'
 import FileUploaderInChatInput from '.'
@@ -36,7 +36,8 @@ const ChatInputDemo = ({ initialFiles = mockFiles, ...props }: ChatInputDemoProp
   const [files, setFiles] = useState<FileEntity[]>(initialFiles)
 
   return (
-    <ToastProvider>
+    <>
+      <ToastHost />
       <FileContextProvider value={files} onChange={setFiles}>
         <div className="w-[360px] rounded-2xl border border-divider-subtle bg-components-panel-bg p-4">
           <div className="mb-3 text-xs text-text-secondary">Simulated chat input</div>
@@ -49,7 +50,7 @@ const ChatInputDemo = ({ initialFiles = mockFiles, ...props }: ChatInputDemoProp
           </div>
         </div>
       </FileContextProvider>
-    </ToastProvider>
+    </>
   )
 }
 
diff --git a/web/app/components/base/file-uploader/hooks.ts b/web/app/components/base/file-uploader/hooks.ts
index 27345b22ff..6c7b75aebf 100644
--- a/web/app/components/base/file-uploader/hooks.ts
+++ b/web/app/components/base/file-uploader/hooks.ts
@@ -17,7 +17,7 @@ import {
   MAX_FILE_UPLOAD_LIMIT,
   VIDEO_SIZE_LIMIT,
 } from '@/app/components/base/file-uploader/constants'
-import { useToastContext } from '@/app/components/base/toast/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import { useParams } from '@/next/navigation'
 import { uploadRemoteFileInfo } from '@/service/common'
@@ -49,7 +49,6 @@ export const useFileSizeLimit = (fileUploadConfig?: FileUploadConfigResponse) =>
 
 export const useFile = (fileConfig: FileUpload, noNeedToCheckEnable = true) => {
   const { t } = useTranslation()
-  const { notify } = useToastContext()
   const fileStore = useFileStore()
   const params = useParams()
   const { imgSizeLimit, docSizeLimit, audioSizeLimit, videoSizeLimit } = useFileSizeLimit(fileConfig.fileUploadConfig)
@@ -58,14 +57,11 @@ export const useFile = (fileConfig: FileUpload, noNeedToCheckEnable = true) => {
     switch (fileType) {
       case SupportUploadFileTypes.image: {
         if (fileSize > imgSizeLimit) {
-          notify({
-            type: 'error',
-            message: t('fileUploader.uploadFromComputerLimit', {
-              ns: 'common',
-              type: SupportUploadFileTypes.image,
-              size: formatFileSize(imgSizeLimit),
-            }),
-          })
+          toast.error(t('fileUploader.uploadFromComputerLimit', {
+            ns: 'common',
+            type: SupportUploadFileTypes.image,
+            size: formatFileSize(imgSizeLimit),
+          }))
           return false
         }
         return true
@@ -73,42 +69,33 @@ export const useFile = (fileConfig: FileUpload, noNeedToCheckEnable = true) => {
       case SupportUploadFileTypes.custom:
       case SupportUploadFileTypes.document: {
         if (fileSize > docSizeLimit) {
-          notify({
-            type: 'error',
-            message: t('fileUploader.uploadFromComputerLimit', {
-              ns: 'common',
-              type: SupportUploadFileTypes.document,
-              size: formatFileSize(docSizeLimit),
-            }),
-          })
+          toast.error(t('fileUploader.uploadFromComputerLimit', {
+            ns: 'common',
+            type: SupportUploadFileTypes.document,
+            size: formatFileSize(docSizeLimit),
+          }))
           return false
         }
         return true
       }
       case SupportUploadFileTypes.audio: {
         if (fileSize > audioSizeLimit) {
-          notify({
-            type: 'error',
-            message: t('fileUploader.uploadFromComputerLimit', {
-              ns: 'common',
-              type: SupportUploadFileTypes.audio,
-              size: formatFileSize(audioSizeLimit),
-            }),
-          })
+          toast.error(t('fileUploader.uploadFromComputerLimit', {
+            ns: 'common',
+            type: SupportUploadFileTypes.audio,
+            size: formatFileSize(audioSizeLimit),
+          }))
           return false
         }
         return true
       }
       case SupportUploadFileTypes.video: {
         if (fileSize > videoSizeLimit) {
-          notify({
-            type: 'error',
-            message: t('fileUploader.uploadFromComputerLimit', {
-              ns: 'common',
-              type: SupportUploadFileTypes.video,
-              size: formatFileSize(videoSizeLimit),
-            }),
-          })
+          toast.error(t('fileUploader.uploadFromComputerLimit', {
+            ns: 'common',
+            type: SupportUploadFileTypes.video,
+            size: formatFileSize(videoSizeLimit),
+          }))
           return false
         }
         return true
@@ -117,7 +104,7 @@ export const useFile = (fileConfig: FileUpload, noNeedToCheckEnable = true) => {
         return true
       }
     }
-  }, [audioSizeLimit, docSizeLimit, imgSizeLimit, notify, t, videoSizeLimit])
+  }, [audioSizeLimit, docSizeLimit, imgSizeLimit, t, videoSizeLimit])
 
   const handleAddFile = useCallback((newFile: FileEntity) => {
     const {
@@ -179,12 +166,12 @@ export const useFile = (fileConfig: FileUpload, noNeedToCheckEnable = true) => {
         },
         onErrorCallback: (error?: any) => {
           const errorMessage = getFileUploadErrorMessage(error, t('fileUploader.uploadFromComputerUploadError', { ns: 'common' }), t)
-          notify({ type: 'error', message: errorMessage })
+          toast.error(errorMessage)
           handleUpdateFile({ ...uploadingFile, progress: -1 })
         },
       }, !!params.token)
     }
-  }, [fileStore, notify, t, handleUpdateFile, params])
+  }, [fileStore, t, handleUpdateFile, params])
 
   const startProgressTimer = useCallback((fileId: string) => {
     const timer = setInterval(() => {
@@ -225,7 +212,7 @@ export const useFile = (fileConfig: FileUpload, noNeedToCheckEnable = true) => {
         url: res.url,
       }
       if (!isAllowedFileExtension(res.name, res.mime_type, fileConfig.allowed_file_types || [], fileConfig.allowed_file_extensions || [])) {
-        notify({ type: 'error', message: `${t('fileUploader.fileExtensionNotSupport', { ns: 'common' })} ${newFile.type}` })
+        toast.error(`${t('fileUploader.fileExtensionNotSupport', { ns: 'common' })} ${newFile.type}`)
         handleRemoveFile(uploadingFile.id)
       }
       if (!checkSizeLimit(newFile.supportFileType, newFile.size))
@@ -233,10 +220,10 @@ export const useFile = (fileConfig: FileUpload, noNeedToCheckEnable = true) => {
       else
         handleUpdateFile(newFile)
     }).catch(() => {
-      notify({ type: 'error', message: t('fileUploader.pasteFileLinkInvalid', { ns: 'common' }) })
+      toast.error(t('fileUploader.pasteFileLinkInvalid', { ns: 'common' }))
       handleRemoveFile(uploadingFile.id)
     })
-  }, [checkSizeLimit, handleAddFile, handleUpdateFile, notify, t, handleRemoveFile, fileConfig?.allowed_file_types, fileConfig.allowed_file_extensions, startProgressTimer, params.token])
+  }, [checkSizeLimit, handleAddFile, handleUpdateFile, t, handleRemoveFile, fileConfig?.allowed_file_types, fileConfig.allowed_file_extensions, startProgressTimer, params.token])
 
   const handleLoadFileFromLinkSuccess = useCallback(noop, [])
 
@@ -252,11 +239,11 @@ export const useFile = (fileConfig: FileUpload, noNeedToCheckEnable = true) => {
   const handleLocalFileUpload = useCallback((file: File) => {
     // Check file upload enabled
     if (!noNeedToCheckEnable && !fileConfig.enabled) {
-      notify({ type: 'error', message: t('fileUploader.uploadDisabled', { ns: 'common' }) })
+      toast.error(t('fileUploader.uploadDisabled', { ns: 'common' }))
       return
     }
     if (!isAllowedFileExtension(file.name, file.type, fileConfig.allowed_file_types || [], fileConfig.allowed_file_extensions || [])) {
-      notify({ type: 'error', message: `${t('fileUploader.fileExtensionNotSupport', { ns: 'common' })} ${file.type}` })
+      toast.error(`${t('fileUploader.fileExtensionNotSupport', { ns: 'common' })} ${file.type}`)
       return
     }
     const allowedFileTypes = fileConfig.allowed_file_types
@@ -292,7 +279,7 @@ export const useFile = (fileConfig: FileUpload, noNeedToCheckEnable = true) => {
           },
           onErrorCallback: (error?: any) => {
             const errorMessage = getFileUploadErrorMessage(error, t('fileUploader.uploadFromComputerUploadError', { ns: 'common' }), t as any)
-            notify({ type: 'error', message: errorMessage })
+            toast.error(errorMessage)
             handleUpdateFile({ ...uploadingFile, progress: -1 })
           },
         }, !!params.token)
@@ -302,12 +289,12 @@ export const useFile = (fileConfig: FileUpload, noNeedToCheckEnable = true) => {
     reader.addEventListener(
       'error',
       () => {
-        notify({ type: 'error', message: t('fileUploader.uploadFromComputerReadError', { ns: 'common' }) })
+        toast.error(t('fileUploader.uploadFromComputerReadError', { ns: 'common' }))
       },
       false,
     )
     reader.readAsDataURL(file)
-  }, [noNeedToCheckEnable, checkSizeLimit, notify, t, handleAddFile, handleUpdateFile, params.token, fileConfig?.allowed_file_types, fileConfig?.allowed_file_extensions, fileConfig?.enabled])
+  }, [noNeedToCheckEnable, checkSizeLimit, t, handleAddFile, handleUpdateFile, params.token, fileConfig?.allowed_file_types, fileConfig?.allowed_file_extensions, fileConfig?.enabled])
 
   const handleClipboardPasteFile = useCallback((e: ClipboardEvent<HTMLTextAreaElement>) => {
     const file = e.clipboardData?.files[0]
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 1cdad5840d..1d8d21b5dc 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,10 +5,8 @@ import { useCheckValidated } from '../use-check-validated'
 
 const mockNotify = vi.fn()
 
-vi.mock('@/app/components/base/toast/context', () => ({
-  useToastContext: () => ({
-    notify: mockNotify,
-  }),
+vi.mock('@/app/components/base/ui/toast', () => ({
+
 }))
 
 describe('useCheckValidated', () => {
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 d186996035..0a6cb20fc0 100644
--- a/web/app/components/base/form/hooks/use-check-validated.ts
+++ b/web/app/components/base/form/hooks/use-check-validated.ts
@@ -1,15 +1,12 @@
 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/context'
+import { toast } from '@/app/components/base/ui/toast'
 
 export const useCheckValidated = (form: AnyFormApi, FormSchemas: FormSchema[]) => {
-  const { notify } = useToastContext()
-
   const checkValidated = useCallback(() => {
     const allError = form?.getAllErrors()
     const values = form.state.values
-
     if (allError) {
       const fields = allError.fields
       const errorArray = Object.keys(fields).reduce((acc: string[], key: string) => {
@@ -24,24 +21,16 @@ export const useCheckValidated = (form: AnyFormApi, FormSchemas: FormSchema[]) =
           return conditionValue === condition.value
         })
         const errors: any[] = show ? fields[key].errors : []
-
         return [...acc, ...errors]
       }, [] as string[])
-
       if (errorArray.length) {
-        notify({
-          type: 'error',
-          message: errorArray[0],
-        })
+        toast.error(errorArray[0])
         return false
       }
-
       return true
     }
-
     return true
-  }, [form, notify, FormSchemas])
-
+  }, [form, FormSchemas])
   return {
     checkValidated,
   }
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 e4295dfb09..e4431740bc 100644
--- a/web/app/components/base/image-uploader/__tests__/hooks.spec.ts
+++ b/web/app/components/base/image-uploader/__tests__/hooks.spec.ts
@@ -5,8 +5,8 @@ import { Resolution, TransferMethod } from '@/types/app'
 import { useClipboardUploader, useDraggableUploader, useImageFiles, useLocalFileUploader } from '../hooks'
 
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/toast/context', () => ({
-  useToastContext: () => ({ notify: mockNotify }),
+vi.mock('@/app/components/base/ui/toast', () => ({
+
 }))
 
 vi.mock('@/next/navigation', () => ({
diff --git a/web/app/components/base/image-uploader/__tests__/image-preview.spec.tsx b/web/app/components/base/image-uploader/__tests__/image-preview.spec.tsx
index 08c2067420..69cfba2556 100644
--- a/web/app/components/base/image-uploader/__tests__/image-preview.spec.tsx
+++ b/web/app/components/base/image-uploader/__tests__/image-preview.spec.tsx
@@ -11,7 +11,7 @@ const mocks = vi.hoisted(() => ({
   clipboardWrite: vi.fn<(items: ClipboardItem[]) => Promise<void>>(),
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/ui/toast', () => ({
   default: {
     notify: (...args: Parameters<typeof mocks.notify>) => mocks.notify(...args),
   },
diff --git a/web/app/components/base/image-uploader/hooks.ts b/web/app/components/base/image-uploader/hooks.ts
index 9251d3888f..8a1a082b0f 100644
--- a/web/app/components/base/image-uploader/hooks.ts
+++ b/web/app/components/base/image-uploader/hooks.ts
@@ -2,7 +2,7 @@ import type { ClipboardEvent } from 'react'
 import type { ImageFile, VisionSettings } from '@/types/app'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useToastContext } from '@/app/components/base/toast/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { useParams } from '@/next/navigation'
 import { ALLOW_FILE_EXTENSIONS, TransferMethod } from '@/types/app'
 import { getImageUploadErrorMessage, imageUpload } from './utils'
@@ -10,14 +10,11 @@ import { getImageUploadErrorMessage, imageUpload } from './utils'
 export const useImageFiles = () => {
   const params = useParams()
   const { t } = useTranslation()
-  const { notify } = useToastContext()
   const [files, setFiles] = useState<ImageFile[]>([])
   const filesRef = useRef<ImageFile[]>([])
-
   const handleUpload = (imageFile: ImageFile) => {
     const files = filesRef.current
     const index = files.findIndex(file => file._id === imageFile._id)
-
     if (index > -1) {
       const currentFile = files[index]
       const newFiles = [...files.slice(0, index), { ...currentFile, ...imageFile }, ...files.slice(index + 1)]
@@ -33,7 +30,6 @@ export const useImageFiles = () => {
   const handleRemove = (imageFileId: string) => {
     const files = filesRef.current
     const index = files.findIndex(file => file._id === imageFileId)
-
     if (index > -1) {
       const currentFile = files[index]
       const newFiles = [...files.slice(0, index), { ...currentFile, deleted: true }, ...files.slice(index + 1)]
@@ -44,7 +40,6 @@ export const useImageFiles = () => {
   const handleImageLinkLoadError = (imageFileId: string) => {
     const files = filesRef.current
     const index = files.findIndex(file => file._id === imageFileId)
-
     if (index > -1) {
       const currentFile = files[index]
       const newFiles = [...files.slice(0, index), { ...currentFile, progress: -1 }, ...files.slice(index + 1)]
@@ -55,7 +50,6 @@ export const useImageFiles = () => {
   const handleImageLinkLoadSuccess = (imageFileId: string) => {
     const files = filesRef.current
     const index = files.findIndex(file => file._id === imageFileId)
-
     if (index > -1) {
       const currentImageFile = files[index]
       const newFiles = [...files.slice(0, index), { ...currentImageFile, progress: 100 }, ...files.slice(index + 1)]
@@ -66,7 +60,6 @@ export const useImageFiles = () => {
   const handleReUpload = (imageFileId: string) => {
     const files = filesRef.current
     const index = files.findIndex(file => file._id === imageFileId)
-
     if (index > -1) {
       const currentImageFile = files[index]
       imageUpload({
@@ -83,7 +76,7 @@ export const useImageFiles = () => {
         },
         onErrorCallback: (error?: any) => {
           const errorMessage = getImageUploadErrorMessage(error, t('imageUploader.uploadFromComputerUploadError', { ns: 'common' }), t as any)
-          notify({ type: 'error', message: errorMessage })
+          toast.error(errorMessage)
           const newFiles = [...files.slice(0, index), { ...currentImageFile, progress: -1 }, ...files.slice(index + 1)]
           filesRef.current = newFiles
           setFiles(newFiles)
@@ -91,16 +84,13 @@ export const useImageFiles = () => {
       }, !!params.token)
     }
   }
-
   const handleClear = () => {
     setFiles([])
     filesRef.current = []
   }
-
   const filteredFiles = useMemo(() => {
     return files.filter(file => !file.deleted)
   }, [files])
-
   return {
     files: filteredFiles,
     onUpload: handleUpload,
@@ -111,92 +101,72 @@ export const useImageFiles = () => {
     onClear: handleClear,
   }
 }
-
 type useLocalUploaderProps = {
   disabled?: boolean
   limit?: number
   onUpload: (imageFile: ImageFile) => void
 }
-
 export const useLocalFileUploader = ({ limit, disabled = false, onUpload }: useLocalUploaderProps) => {
-  const { notify } = useToastContext()
   const params = useParams()
   const { t } = useTranslation()
-
   const handleLocalFileUpload = useCallback((file: File) => {
     if (disabled) {
       // TODO: leave some warnings?
       return
     }
-
     if (!ALLOW_FILE_EXTENSIONS.includes(file.type.split('/')[1]))
       return
-
     if (limit && file.size > limit * 1024 * 1024) {
-      notify({ type: 'error', message: t('imageUploader.uploadFromComputerLimit', { ns: 'common', size: limit }) })
+      toast.error(t('imageUploader.uploadFromComputerLimit', { ns: 'common', size: limit }))
       return
     }
-
     const reader = new FileReader()
-    reader.addEventListener(
-      'load',
-      () => {
-        const imageFile = {
-          type: TransferMethod.local_file,
-          _id: `${Date.now()}`,
-          fileId: '',
-          file,
-          url: reader.result as string,
-          base64Url: reader.result as string,
-          progress: 0,
-        }
-        onUpload(imageFile)
-        imageUpload({
-          file: imageFile.file,
-          onProgressCallback: (progress) => {
-            onUpload({ ...imageFile, progress })
-          },
-          onSuccessCallback: (res) => {
-            onUpload({ ...imageFile, fileId: res.id, progress: 100 })
-          },
-          onErrorCallback: (error?: any) => {
-            const errorMessage = getImageUploadErrorMessage(error, t('imageUploader.uploadFromComputerUploadError', { ns: 'common' }), t as any)
-            notify({ type: 'error', message: errorMessage })
-            onUpload({ ...imageFile, progress: -1 })
-          },
-        }, !!params.token)
-      },
-      false,
-    )
-    reader.addEventListener(
-      'error',
-      () => {
-        notify({ type: 'error', message: t('imageUploader.uploadFromComputerReadError', { ns: 'common' }) })
-      },
-      false,
-    )
+    reader.addEventListener('load', () => {
+      const imageFile = {
+        type: TransferMethod.local_file,
+        _id: `${Date.now()}`,
+        fileId: '',
+        file,
+        url: reader.result as string,
+        base64Url: reader.result as string,
+        progress: 0,
+      }
+      onUpload(imageFile)
+      imageUpload({
+        file: imageFile.file,
+        onProgressCallback: (progress) => {
+          onUpload({ ...imageFile, progress })
+        },
+        onSuccessCallback: (res) => {
+          onUpload({ ...imageFile, fileId: res.id, progress: 100 })
+        },
+        onErrorCallback: (error?: any) => {
+          const errorMessage = getImageUploadErrorMessage(error, t('imageUploader.uploadFromComputerUploadError', { ns: 'common' }), t as any)
+          toast.error(errorMessage)
+          onUpload({ ...imageFile, progress: -1 })
+        },
+      }, !!params.token)
+    }, false)
+    reader.addEventListener('error', () => {
+      toast.error(t('imageUploader.uploadFromComputerReadError', { ns: 'common' }))
+    }, false)
     reader.readAsDataURL(file)
-  }, [disabled, limit, notify, t, onUpload, params.token])
-
+  }, [disabled, limit, t, onUpload, params.token])
   return { disabled, handleLocalFileUpload }
 }
-
 type useClipboardUploaderProps = {
   files: ImageFile[]
   visionConfig?: VisionSettings
   onUpload: (imageFile: ImageFile) => void
 }
-
 export const useClipboardUploader = ({ visionConfig, onUpload, files }: useClipboardUploaderProps) => {
   const allowLocalUpload = visionConfig?.transfer_methods?.includes(TransferMethod.local_file)
-  const disabled = useMemo(() =>
-    !visionConfig
+  const disabled = useMemo(() => !visionConfig
     || !visionConfig?.enabled
     || !allowLocalUpload
     || files.length >= visionConfig.number_limits!, [allowLocalUpload, files.length, visionConfig])
   const limit = useMemo(() => visionConfig ? +visionConfig.image_file_size_limit! : 0, [visionConfig])
   const { handleLocalFileUpload } = useLocalFileUploader({ limit, onUpload, disabled })
-
   const handleClipboardPaste = useCallback((e: ClipboardEvent<HTMLTextAreaElement>) => {
     // reserve native text copy behavior
     const file = e.clipboardData?.files[0]
@@ -206,60 +176,48 @@ export const useClipboardUploader = ({ visionConfig, onUpload, files }: useClipb
       handleLocalFileUpload(file)
     }
   }, [handleLocalFileUpload])
-
   return {
     onPaste: handleClipboardPaste,
   }
 }
-
 type useDraggableUploaderProps = {
   files: ImageFile[]
   visionConfig?: VisionSettings
   onUpload: (imageFile: ImageFile) => void
 }
-
 export const useDraggableUploader = <T extends HTMLElement>({ visionConfig, onUpload, files }: useDraggableUploaderProps) => {
   const allowLocalUpload = visionConfig?.transfer_methods?.includes(TransferMethod.local_file)
-  const disabled = useMemo(() =>
-    !visionConfig
+  const disabled = useMemo(() => !visionConfig
     || !visionConfig?.enabled
     || !allowLocalUpload
     || files.length >= visionConfig.number_limits!, [allowLocalUpload, files.length, visionConfig])
   const limit = useMemo(() => visionConfig ? +visionConfig.image_file_size_limit! : 0, [visionConfig])
   const { handleLocalFileUpload } = useLocalFileUploader({ disabled, onUpload, limit })
   const [isDragActive, setIsDragActive] = useState(false)
-
   const handleDragEnter = useCallback((e: React.DragEvent<T>) => {
     e.preventDefault()
     e.stopPropagation()
     if (!disabled)
       setIsDragActive(true)
   }, [disabled])
-
   const handleDragOver = useCallback((e: React.DragEvent<T>) => {
     e.preventDefault()
     e.stopPropagation()
   }, [])
-
   const handleDragLeave = useCallback((e: React.DragEvent<T>) => {
     e.preventDefault()
     e.stopPropagation()
     setIsDragActive(false)
   }, [])
-
   const handleDrop = useCallback((e: React.DragEvent<T>) => {
     e.preventDefault()
     e.stopPropagation()
     setIsDragActive(false)
-
     const file = e.dataTransfer.files[0]
-
     if (!file)
       return
-
     handleLocalFileUpload(file)
   }, [handleLocalFileUpload])
-
   return {
     onDragEnter: handleDragEnter,
     onDragOver: handleDragOver,
diff --git a/web/app/components/base/image-uploader/image-preview.tsx b/web/app/components/base/image-uploader/image-preview.tsx
index a6f54243c8..cc03560f40 100644
--- a/web/app/components/base/image-uploader/image-preview.tsx
+++ b/web/app/components/base/image-uploader/image-preview.tsx
@@ -5,8 +5,8 @@ import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useHotkeys } from 'react-hotkeys-hook'
-import Toast from '@/app/components/base/toast'
 import Tooltip from '@/app/components/base/tooltip'
+import { toast } from '@/app/components/base/ui/toast'
 import { downloadUrl } from '@/utils/download'
 
 type ImagePreviewProps = {
@@ -16,7 +16,6 @@ type ImagePreviewProps = {
   onPrev?: () => void
   onNext?: () => void
 }
-
 const isBase64 = (str: string): boolean => {
   try {
     return btoa(atob(str)) === str
@@ -25,21 +24,13 @@ const isBase64 = (str: string): boolean => {
     return false
   }
 }
-
-const ImagePreview: FC<ImagePreviewProps> = ({
-  url,
-  title,
-  onCancel,
-  onPrev,
-  onNext,
-}) => {
+const ImagePreview: FC<ImagePreviewProps> = ({ url, title, onCancel, onPrev, onNext }) => {
   const [scale, setScale] = useState(1)
   const [position, setPosition] = useState({ x: 0, y: 0 })
   const [isDragging, setIsDragging] = useState(false)
   const imgRef = useRef<HTMLImageElement>(null)
   const dragStartRef = useRef({ x: 0, y: 0 })
   const [isCopied, setIsCopied] = useState(false)
-
   const openInNewTab = () => {
     // Open in a new window, considering the case when the page is inside an iframe
     if (url.startsWith('http') || url.startsWith('https')) {
@@ -51,115 +42,84 @@ const ImagePreview: FC<ImagePreviewProps> = ({
       win?.document.write(`<img src="${url}" alt="${title}" />`)
     }
     else {
-      Toast.notify({
-        type: 'error',
-        message: `Unable to open image: ${url}`,
-      })
+      toast.error(`Unable to open image: ${url}`)
     }
   }
-
   const downloadImage = () => {
     // Open in a new window, considering the case when the page is inside an iframe
     if (url.startsWith('http') || url.startsWith('https') || url.startsWith('data:image')) {
       downloadUrl({ url, fileName: title, target: '_blank' })
       return
     }
-    Toast.notify({
-      type: 'error',
-      message: `Unable to open image: ${url}`,
-    })
+    toast.error(`Unable to open image: ${url}`)
   }
-
   const zoomIn = () => {
     setScale(prevScale => Math.min(prevScale * 1.2, 15))
   }
-
   const zoomOut = () => {
     setScale((prevScale) => {
       const newScale = Math.max(prevScale / 1.2, 0.5)
       if (newScale === 1)
         setPosition({ x: 0, y: 0 }) // Reset position when fully zoomed out
-
       return newScale
     })
   }
-
   const imageBase64ToBlob = (base64: string, type = 'image/png'): Blob => {
     const byteCharacters = atob(base64)
     const byteArrays = []
-
     for (let offset = 0; offset < byteCharacters.length; offset += 512) {
       const slice = byteCharacters.slice(offset, offset + 512)
       const byteNumbers = Array.from({ length: slice.length })
       for (let i = 0; i < slice.length; i++)
         byteNumbers[i] = slice.charCodeAt(i)
-
       const byteArray = new Uint8Array(byteNumbers as any)
       byteArrays.push(byteArray)
     }
-
     return new Blob(byteArrays, { type })
   }
-
   const imageCopy = useCallback(() => {
     const shareImage = async () => {
       try {
         const base64Data = url.split(',')[1]
         const blob = imageBase64ToBlob(base64Data, 'image/png')
-
         await navigator.clipboard.write([
           new ClipboardItem({
             [blob.type]: blob,
           }),
         ])
         setIsCopied(true)
-
-        Toast.notify({
-          type: 'success',
-          message: t('operation.imageCopied', { ns: 'common' }),
-        })
+        toast.success(t('operation.imageCopied', { ns: 'common' }))
       }
       catch (err) {
         console.error('Failed to copy image:', err)
-
         downloadUrl({ url, fileName: `${title}.png` })
-
-        Toast.notify({
-          type: 'info',
-          message: t('operation.imageDownloaded', { ns: 'common' }),
-        })
+        toast.info(t('operation.imageDownloaded', { ns: 'common' }))
       }
     }
     shareImage()
   }, [title, url])
-
   const handleWheel = useCallback((e: React.WheelEvent<HTMLDivElement>) => {
     if (e.deltaY < 0)
       zoomIn()
     else
       zoomOut()
   }, [])
-
   const handleMouseDown = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
     if (scale > 1) {
       setIsDragging(true)
       dragStartRef.current = { x: e.clientX - position.x, y: e.clientY - position.y }
     }
   }, [scale, position])
-
   const handleMouseMove = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
     if (isDragging && scale > 1) {
       const deltaX = e.clientX - dragStartRef.current.x
       const deltaY = e.clientY - dragStartRef.current.y
-
       // Calculate boundaries
       const imgRect = imgRef.current?.getBoundingClientRect()
       const containerRect = imgRef.current?.parentElement?.getBoundingClientRect()
-
       if (imgRect && containerRect) {
         const maxX = (imgRect.width * scale - containerRect.width) / 2
         const maxY = (imgRect.height * scale - containerRect.height) / 2
-
         setPosition({
           x: Math.max(-maxX, Math.min(maxX, deltaX)),
           y: Math.max(-maxY, Math.min(maxY, deltaY)),
@@ -167,38 +127,23 @@ const ImagePreview: FC<ImagePreviewProps> = ({
       }
     }
   }, [isDragging, scale])
-
   const handleMouseUp = useCallback(() => {
     setIsDragging(false)
   }, [])
-
   useEffect(() => {
     document.addEventListener('mouseup', handleMouseUp)
     return () => {
       document.removeEventListener('mouseup', handleMouseUp)
     }
   }, [handleMouseUp])
-
   useHotkeys('esc', onCancel)
   useHotkeys('up', zoomIn)
   useHotkeys('down', zoomOut)
   useHotkeys('left', onPrev || noop)
   useHotkeys('right', onNext || noop)
-
   return createPortal(
-    <div
-      className="image-preview-container fixed inset-0 z-[1000] flex items-center justify-center bg-black/80 p-8"
-      onClick={e => e.stopPropagation()}
-      onWheel={handleWheel}
-      onMouseDown={handleMouseDown}
-      onMouseMove={handleMouseMove}
-      onMouseUp={handleMouseUp}
-      style={{ cursor: scale > 1 ? 'move' : 'default' }}
-      tabIndex={-1}
-      data-testid="image-preview-container"
-    >
-      { }
-      { }
+    <div className="image-preview-container fixed inset-0 z-[1000] flex items-center justify-center bg-black/80 p-8" onClick={e => e.stopPropagation()} onWheel={handleWheel} onMouseDown={handleMouseDown} onMouseMove={handleMouseMove} onMouseUp={handleMouseUp} style={{ cursor: scale > 1 ? 'move' : 'default' }} tabIndex={-1} data-testid="image-preview-container">
+
       <img
         ref={imgRef}
         alt={title}
@@ -211,52 +156,34 @@ const ImagePreview: FC<ImagePreviewProps> = ({
         data-testid="image-preview-image"
       />
       <Tooltip popupContent={t('operation.copyImage', { ns: 'common' })}>
-        <div
-          className="absolute right-48 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
-          onClick={imageCopy}
-        >
+        <div className="absolute right-48 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg" onClick={imageCopy}>
           {isCopied
             ? <span className="i-ri-file-copy-line h-4 w-4 text-green-500" data-testid="image-preview-copied-icon" />
             : <span className="i-ri-file-copy-line h-4 w-4 text-gray-500" data-testid="image-preview-copy-button" />}
         </div>
       </Tooltip>
       <Tooltip popupContent={t('operation.zoomOut', { ns: 'common' })}>
-        <div
-          className="absolute right-40 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
-          onClick={zoomOut}
-        >
+        <div className="absolute right-40 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg" onClick={zoomOut}>
           <span className="i-ri-zoom-out-line h-4 w-4 text-gray-500" data-testid="image-preview-zoom-out-button" />
         </div>
       </Tooltip>
       <Tooltip popupContent={t('operation.zoomIn', { ns: 'common' })}>
-        <div
-          className="absolute right-32 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
-          onClick={zoomIn}
-        >
+        <div className="absolute right-32 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg" onClick={zoomIn}>
           <span className="i-ri-zoom-in-line h-4 w-4 text-gray-500" data-testid="image-preview-zoom-in-button" />
         </div>
       </Tooltip>
       <Tooltip popupContent={t('operation.download', { ns: 'common' })}>
-        <div
-          className="absolute right-24 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
-          onClick={downloadImage}
-        >
+        <div className="absolute right-24 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg" onClick={downloadImage}>
           <span className="i-ri-download-cloud-2-line h-4 w-4 text-gray-500" data-testid="image-preview-download-button" />
         </div>
       </Tooltip>
       <Tooltip popupContent={t('operation.openInNewTab', { ns: 'common' })}>
-        <div
-          className="absolute right-16 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
-          onClick={openInNewTab}
-        >
+        <div className="absolute right-16 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg" onClick={openInNewTab}>
           <span className="i-ri-add-box-line h-4 w-4 text-gray-500" data-testid="image-preview-open-in-tab-button" />
         </div>
       </Tooltip>
       <Tooltip popupContent={t('operation.cancel', { ns: 'common' })}>
-        <div
-          className="absolute right-6 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/8 backdrop-blur-[2px]"
-          onClick={onCancel}
-        >
+        <div className="absolute right-6 top-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/8 backdrop-blur-[2px]" onClick={onCancel}>
           <span className="i-ri-close-line h-4 w-4 text-gray-500" data-testid="image-preview-close-button" />
         </div>
       </Tooltip>
@@ -264,5 +191,4 @@ const ImagePreview: FC<ImagePreviewProps> = ({
     document.body,
   )
 }
-
 export default ImagePreview
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 f07399f8af..3441faa94b 100644
--- a/web/app/components/base/tag-input/__tests__/index.spec.tsx
+++ b/web/app/components/base/tag-input/__tests__/index.spec.tsx
@@ -5,10 +5,8 @@ import TagInput from '../index'
 
 const mockNotify = vi.fn()
 
-vi.mock('@/app/components/base/toast/context', () => ({
-  useToastContext: () => ({
-    notify: mockNotify,
-  }),
+vi.mock('@/app/components/base/ui/toast', () => ({
+
 }))
 
 type TagInputProps = ComponentProps<typeof TagInput>
diff --git a/web/app/components/base/tag-input/__tests__/interop.spec.tsx b/web/app/components/base/tag-input/__tests__/interop.spec.tsx
index f6dd316645..f31871b33e 100644
--- a/web/app/components/base/tag-input/__tests__/interop.spec.tsx
+++ b/web/app/components/base/tag-input/__tests__/interop.spec.tsx
@@ -1,8 +1,6 @@
 import type { ComponentType, InputHTMLAttributes } from 'react'
 import { render, screen } from '@testing-library/react'
 
-const mockNotify = vi.fn()
-
 type AutosizeInputProps = InputHTMLAttributes<HTMLInputElement> & {
   inputClassName?: string
 }
@@ -18,10 +16,17 @@ describe('TagInput autosize interop', () => {
   })
 
   it('should support a namespace-style default export from react-18-input-autosize', async () => {
-    vi.doMock('@/app/components/base/toast/context', () => ({
-      useToastContext: () => ({
-        notify: mockNotify,
-      }),
+    const toast = Object.assign(vi.fn(), {
+      success: vi.fn(),
+      error: vi.fn(),
+      warning: vi.fn(),
+      info: vi.fn(),
+      dismiss: vi.fn(),
+      update: vi.fn(),
+      promise: vi.fn(),
+    })
+    vi.doMock('@/app/components/base/ui/toast', () => ({
+      toast,
     }))
     vi.doMock('react-18-input-autosize', () => ({
       default: {
@@ -38,10 +43,17 @@ describe('TagInput autosize interop', () => {
   })
 
   it('should support a direct default export from react-18-input-autosize', async () => {
-    vi.doMock('@/app/components/base/toast/context', () => ({
-      useToastContext: () => ({
-        notify: mockNotify,
-      }),
+    const toast = Object.assign(vi.fn(), {
+      success: vi.fn(),
+      error: vi.fn(),
+      warning: vi.fn(),
+      info: vi.fn(),
+      dismiss: vi.fn(),
+      update: vi.fn(),
+      promise: vi.fn(),
+    })
+    vi.doMock('@/app/components/base/ui/toast', () => ({
+      toast,
     }))
     vi.doMock('react-18-input-autosize', () => ({
       default: MockAutosizeInput,
diff --git a/web/app/components/base/tag-input/index.tsx b/web/app/components/base/tag-input/index.tsx
index ab28b484d1..f98922ec8d 100644
--- a/web/app/components/base/tag-input/index.tsx
+++ b/web/app/components/base/tag-input/index.tsx
@@ -2,13 +2,11 @@ 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/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { cn } from '@/utils/classnames'
-
 // CJS/ESM interop: Turbopack may resolve the module namespace object instead of the default export
 // eslint-disable-next-line ts/no-explicit-any
 const AutosizeInput = ('default' in (_AutosizeInput as any) ? (_AutosizeInput as any).default : _AutosizeInput) as typeof _AutosizeInput
-
 type TagInputProps = {
   items: string[]
   onChange: (items: string[]) => void
@@ -20,123 +18,79 @@ type TagInputProps = {
   required?: boolean
   inputClassName?: string
 }
-
-const TagInput: FC<TagInputProps> = ({
-  items,
-  onChange,
-  disableAdd,
-  disableRemove,
-  customizedConfirmKey = 'Enter',
-  isInWorkflow,
-  placeholder,
-  required = false,
-  inputClassName,
-}) => {
+const TagInput: FC<TagInputProps> = ({ items, onChange, disableAdd, disableRemove, customizedConfirmKey = 'Enter', isInWorkflow, placeholder, required = false, inputClassName }) => {
   const { t } = useTranslation()
-  const { notify } = useToastContext()
   const [value, setValue] = useState('')
   const [focused, setFocused] = useState(false)
-
   const isSpecialMode = customizedConfirmKey === 'Tab'
-
   const handleRemove = (index: number) => {
     const copyItems = [...items]
     copyItems.splice(index, 1)
-
     onChange(copyItems)
   }
-
   const handleNewTag = useCallback((value: string) => {
     const valueTrimmed = value.trim()
     if (!valueTrimmed) {
       if (required)
-        notify({ type: 'error', message: t('segment.keywordEmpty', { ns: 'datasetDocuments' }) })
+        toast.error(t('segment.keywordEmpty', { ns: 'datasetDocuments' }))
       return
     }
-
     if ((items.find(item => item === valueTrimmed))) {
-      notify({ type: 'error', message: t('segment.keywordDuplicate', { ns: 'datasetDocuments' }) })
+      toast.error(t('segment.keywordDuplicate', { ns: 'datasetDocuments' }))
       return
     }
-
     if (valueTrimmed.length > 20) {
-      notify({ type: 'error', message: t('segment.keywordError', { ns: 'datasetDocuments' }) })
+      toast.error(t('segment.keywordError', { ns: 'datasetDocuments' }))
       return
     }
-
     onChange([...items, valueTrimmed])
     setTimeout(() => {
       setValue('')
     })
-  }, [items, onChange, notify, t, required])
-
+  }, [items, onChange, t, required])
   const handleKeyDown = (e: KeyboardEvent) => {
     if (isSpecialMode && e.key === 'Enter')
       setValue(`${value}↵`)
-
     if (e.key === customizedConfirmKey) {
       if (isSpecialMode)
         e.preventDefault()
-
       handleNewTag(value)
     }
   }
-
   const handleBlur = () => {
     handleNewTag(value)
     setFocused(false)
   }
-
   return (
     <div className={cn('flex flex-wrap', !isInWorkflow && 'min-w-[200px]', isSpecialMode ? 'rounded-lg bg-components-input-bg-normal pb-1 pl-1' : '')}>
-      {
-        (items || []).map((item, index) => (
-          <div
-            key={item}
-            className={cn('mr-1 mt-1 flex items-center rounded-md border border-divider-deep bg-components-badge-white-to-dark py-1 pl-1.5 pr-1 text-text-secondary system-xs-regular')}
-          >
-            {item}
-            {
-              !disableRemove && (
-                <div className="flex h-4 w-4 cursor-pointer items-center justify-center" onClick={() => handleRemove(index)}>
-                  <span className="i-ri-close-line ml-0.5 h-3.5 w-3.5 text-text-tertiary" data-testid="remove-tag" />
-                </div>
-              )
-            }
-          </div>
-        ))
-      }
-      {
-        !disableAdd && (
-          <div className={cn('group/tag-add mt-1 flex items-center gap-x-0.5', !isSpecialMode ? 'rounded-md border border-dashed border-divider-deep px-1.5' : '')}>
-            {!isSpecialMode && !focused && <span className="i-ri-add-line h-3.5 w-3.5 text-text-placeholder group-hover/tag-add:text-text-secondary" />}
-            <AutosizeInput
-              inputClassName={cn(
-                'appearance-none text-text-primary caret-[#295EFF] outline-none placeholder:text-text-placeholder group-hover/tag-add:placeholder:text-text-secondary',
-                isSpecialMode ? 'bg-transparent' : '',
-                inputClassName,
-              )}
-              className={cn(
-                !isInWorkflow && 'max-w-[300px]',
-                isInWorkflow && 'max-w-[146px]',
-                'overflow-hidden rounded-md py-1 system-xs-regular',
-                isSpecialMode && 'border border-transparent px-1.5',
-                focused && isSpecialMode && 'border-dashed border-divider-deep',
-              )}
-              onFocus={() => setFocused(true)}
-              onBlur={handleBlur}
-              value={value}
-              onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                setValue(e.target.value)
-              }}
-              onKeyDown={handleKeyDown}
-              placeholder={placeholder || (isSpecialMode ? t('model.params.stop_sequencesPlaceholder', { ns: 'common' }) : t('segment.addKeyWord', { ns: 'datasetDocuments' }))}
-            />
-          </div>
-        )
-      }
+      {(items || []).map((item, index) => (
+        <div key={item} className={cn('mr-1 mt-1 flex items-center rounded-md border border-divider-deep bg-components-badge-white-to-dark py-1 pl-1.5 pr-1 text-text-secondary system-xs-regular')}>
+          {item}
+          {!disableRemove && (
+            <div className="flex h-4 w-4 cursor-pointer items-center justify-center" onClick={() => handleRemove(index)}>
+              <span className="i-ri-close-line ml-0.5 h-3.5 w-3.5 text-text-tertiary" data-testid="remove-tag" />
+            </div>
+          )}
+        </div>
+      ))}
+      {!disableAdd && (
+        <div className={cn('group/tag-add mt-1 flex items-center gap-x-0.5', !isSpecialMode ? 'rounded-md border border-dashed border-divider-deep px-1.5' : '')}>
+          {!isSpecialMode && !focused && <span className="i-ri-add-line h-3.5 w-3.5 text-text-placeholder group-hover/tag-add:text-text-secondary" />}
+          <AutosizeInput
+            inputClassName={cn('appearance-none text-text-primary caret-[#295EFF] outline-none placeholder:text-text-placeholder group-hover/tag-add:placeholder:text-text-secondary', isSpecialMode ? 'bg-transparent' : '', inputClassName)}
+            className={cn(!isInWorkflow && 'max-w-[300px]', isInWorkflow && 'max-w-[146px]', 'overflow-hidden rounded-md py-1 system-xs-regular', isSpecialMode && 'border border-transparent px-1.5', focused && isSpecialMode && 'border-dashed border-divider-deep')}
+            onFocus={() => setFocused(true)}
+            onBlur={handleBlur}
+            value={value}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+              setValue(e.target.value)
+            }}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder || (isSpecialMode ? t('model.params.stop_sequencesPlaceholder', { ns: 'common' }) : t('segment.addKeyWord', { ns: 'datasetDocuments' }))}
+          />
+        </div>
+      )}
     </div>
   )
 }
-
 export default TagInput
diff --git a/web/app/components/base/tag-management/__tests__/index.spec.tsx b/web/app/components/base/tag-management/__tests__/index.spec.tsx
index 300d48ce81..9ccbbe10a9 100644
--- a/web/app/components/base/tag-management/__tests__/index.spec.tsx
+++ b/web/app/components/base/tag-management/__tests__/index.spec.tsx
@@ -7,27 +7,35 @@ import * as ReactI18next from 'react-i18next'
 import TagManagementModal from '../index'
 import { useStore as useTagStore } from '../store'
 
+const { mockNotify, mockToast } = vi.hoisted(() => {
+  const mockNotify = vi.fn()
+  const mockToast = Object.assign(mockNotify, {
+    success: vi.fn((message, options) => mockNotify({ type: 'success', message, ...options })),
+    error: vi.fn((message, options) => mockNotify({ type: 'error', message, ...options })),
+    warning: vi.fn((message, options) => mockNotify({ type: 'warning', message, ...options })),
+    info: vi.fn((message, options) => mockNotify({ type: 'info', message, ...options })),
+    dismiss: vi.fn(),
+    update: vi.fn(),
+    promise: vi.fn(),
+  })
+  return { mockNotify, mockToast }
+})
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
+}))
+
 // Hoisted mocks
 const { fetchTagList, createTag } = vi.hoisted(() => ({
   fetchTagList: vi.fn(),
   createTag: vi.fn(),
 }))
 
-const mockNotify = vi.fn()
-
 vi.mock('@/service/tag', () => ({
   fetchTagList,
   createTag,
 }))
 
-// Mock use-context-selector for ToastContext
-vi.mock('use-context-selector', () => ({
-  createContext: <T,>(defaultValue: T) => React.createContext(defaultValue),
-  useContext: () => ({
-    notify: mockNotify,
-  }),
-}))
-
 const mockTags: Tag[] = [
   { id: 'tag-1', name: 'Frontend', type: 'app', binding_count: 3 },
   { id: 'tag-2', name: 'Backend', type: 'app', binding_count: 5 },
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 9ffa271487..2bdf5798ab 100644
--- a/web/app/components/base/tag-management/__tests__/panel.spec.tsx
+++ b/web/app/components/base/tag-management/__tests__/panel.spec.tsx
@@ -4,39 +4,40 @@ import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import { act } from 'react'
 import * as ReactI18next from 'react-i18next'
-import { ToastContext } from '@/app/components/base/toast/context'
 import Panel from '../panel'
 import { useStore as useTagStore } from '../store'
 
+const { mockNotify, mockToast } = vi.hoisted(() => {
+  const mockNotify = vi.fn()
+  const mockToast = Object.assign(mockNotify, {
+    success: vi.fn((message, options) => mockNotify({ type: 'success', message, ...options })),
+    error: vi.fn((message, options) => mockNotify({ type: 'error', message, ...options })),
+    warning: vi.fn((message, options) => mockNotify({ type: 'warning', message, ...options })),
+    info: vi.fn((message, options) => mockNotify({ type: 'info', message, ...options })),
+    dismiss: vi.fn(),
+    update: vi.fn(),
+    promise: vi.fn(),
+  })
+  return { mockNotify, mockToast }
+})
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
+}))
+
 // Hoisted mocks
-const { createTag, bindTag, unBindTag, contextOverrides } = vi.hoisted(() => ({
+const { createTag, bindTag, unBindTag } = vi.hoisted(() => ({
   createTag: vi.fn(),
   bindTag: vi.fn(),
   unBindTag: vi.fn(),
-  contextOverrides: new Map<object, unknown>(),
 }))
 
-const mockNotify = vi.fn()
-
 vi.mock('@/service/tag', () => ({
   createTag,
   bindTag,
   unBindTag,
 }))
 
-// Mock use-context-selector with context-aware values and toast notify override.
-vi.mock('use-context-selector', () => ({
-  createContext: <T,>(defaultValue: T) => React.createContext(defaultValue),
-  useContext: <T,>(context: React.Context<T>) => {
-    const contextValue = React.useContext(context)
-    const override = contextOverrides.get(context as unknown as object)
-    if (override)
-      return override as T
-
-    return contextValue
-  },
-}))
-
 // i18n mock renders "ns.key" format (dot-separated)
 const i18n = {
   selectorPlaceholder: 'common.tag.selectorPlaceholder',
@@ -70,11 +71,6 @@ const defaultProps = {
 describe('Panel', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    contextOverrides.clear()
-    contextOverrides.set(ToastContext as unknown as object, {
-      notify: mockNotify,
-      close: vi.fn(),
-    })
     vi.mocked(createTag).mockResolvedValue({ id: 'new-tag', name: 'NewTag', type: 'app', binding_count: 0 })
     vi.mocked(bindTag).mockResolvedValue(undefined)
     vi.mocked(unBindTag).mockResolvedValue(undefined)
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 0f94c239dd..3c74ac9fe6 100644
--- a/web/app/components/base/tag-management/__tests__/selector.spec.tsx
+++ b/web/app/components/base/tag-management/__tests__/selector.spec.tsx
@@ -3,10 +3,26 @@ 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/context'
 import TagSelector from '../selector'
 import { useStore as useTagStore } from '../store'
 
+const { mockToast } = vi.hoisted(() => {
+  const mockToast = Object.assign(vi.fn(), {
+    success: vi.fn(),
+    error: vi.fn(),
+    warning: vi.fn(),
+    info: vi.fn(),
+    dismiss: vi.fn(),
+    update: vi.fn(),
+    promise: vi.fn(),
+  })
+  return { mockToast }
+})
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
+}))
+
 // Hoisted mocks
 const { fetchTagList, createTag, bindTag, unBindTag } = vi.hoisted(() => ({
   fetchTagList: vi.fn(),
@@ -15,8 +31,6 @@ const { fetchTagList, createTag, bindTag, unBindTag } = vi.hoisted(() => ({
   unBindTag: vi.fn(),
 }))
 
-const mockNotify = vi.fn()
-
 vi.mock('@/service/tag', () => ({
   fetchTagList,
   createTag,
@@ -72,17 +86,6 @@ vi.mock('@/app/components/base/popover', () => {
   return { __esModule: true, default: MockPopover }
 })
 
-// Mock use-context-selector for ToastContext
-vi.mock('use-context-selector', () => ({
-  createContext: <T,>(defaultValue: T) => React.createContext(defaultValue),
-  useContext: <T,>(ctx: React.Context<T>) => {
-    if (ctx === (ToastContext as unknown as React.Context<T>))
-      return { notify: mockNotify, close: vi.fn() } as T
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    return React.useContext(ctx)
-  },
-}))
-
 // i18n keys rendered in "ns.key" format
 const i18n = {
   addTag: 'common.tag.addTag',
diff --git a/web/app/components/base/tag-management/index.stories.tsx b/web/app/components/base/tag-management/index.stories.tsx
index cb62965901..3206891d5d 100644
--- a/web/app/components/base/tag-management/index.stories.tsx
+++ b/web/app/components/base/tag-management/index.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import type { Tag } from './constant'
 import { useEffect, useRef } from 'react'
-import { ToastProvider } from '@/app/components/base/toast'
+import { ToastHost } from '@/app/components/base/ui/toast'
 import TagManagementModal from '.'
 import { useStore as useTagStore } from './store'
 
@@ -86,7 +86,8 @@ const TagManagementPlayground = ({
   }, [setTagList])
 
   return (
-    <ToastProvider>
+    <>
+      <ToastHost />
       <div className="flex w-full max-w-xl flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
         <button
           type="button"
@@ -98,7 +99,7 @@ const TagManagementPlayground = ({
         <p className="text-xs text-text-tertiary">Mocked tag management flows with create and bind actions.</p>
       </div>
       <TagManagementModal show={showModal} type={type} />
-    </ToastProvider>
+    </>
   )
 }
 
diff --git a/web/app/components/base/tag-management/index.tsx b/web/app/components/base/tag-management/index.tsx
index b7682bcdad..79c557a8b9 100644
--- a/web/app/components/base/tag-management/index.tsx
+++ b/web/app/components/base/tag-management/index.tsx
@@ -1,14 +1,9 @@
 'use client'
-
 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/context'
-import {
-  createTag,
-  fetchTagList,
-} from '@/service/tag'
+import { toast } from '@/app/components/base/ui/toast'
+import { createTag, fetchTagList } from '@/service/tag'
 import { useStore as useTagStore } from './store'
 import TagItemEditor from './tag-item-editor'
 
@@ -16,19 +11,15 @@ type TagManagementModalProps = {
   type: 'knowledge' | 'app'
   show: boolean
 }
-
 const TagManagementModal = ({ show, type }: TagManagementModalProps) => {
   const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
   const tagList = useTagStore(s => s.tagList)
   const setTagList = useTagStore(s => s.setTagList)
   const setShowTagManagementModal = useTagStore(s => s.setShowTagManagementModal)
-
   const getTagList = async (type: 'knowledge' | 'app') => {
     const res = await fetchTagList(type)
     setTagList(res)
   }
-
   const [pending, setPending] = useState<boolean>(false)
   const [name, setName] = useState<string>('')
   const createNewTag = async () => {
@@ -39,7 +30,7 @@ const TagManagementModal = ({ show, type }: TagManagementModalProps) => {
     try {
       setPending(true)
       const newTag = await createTag(name, type)
-      notify({ type: 'success', message: t('tag.created', { ns: 'common' }) })
+      toast.success(t('tag.created', { ns: 'common' }))
       setTagList([
         newTag,
         ...tagList,
@@ -48,44 +39,24 @@ const TagManagementModal = ({ show, type }: TagManagementModalProps) => {
       setPending(false)
     }
     catch {
-      notify({ type: 'error', message: t('tag.failed', { ns: 'common' }) })
+      toast.error(t('tag.failed', { ns: 'common' }))
       setPending(false)
     }
   }
-
   useEffect(() => {
     getTagList(type)
   }, [type])
-
   return (
-    <Modal
-      className="!w-[600px] !max-w-[600px] rounded-xl px-8 py-6"
-      isShow={show}
-      onClose={() => setShowTagManagementModal(false)}
-    >
+    <Modal className="!w-[600px] !max-w-[600px] rounded-xl px-8 py-6" isShow={show} onClose={() => setShowTagManagementModal(false)}>
       <div className="relative pb-2 text-xl font-semibold leading-[30px] text-text-primary">{t('tag.manageTags', { ns: 'common' })}</div>
       <div className="absolute right-4 top-4 cursor-pointer p-2" onClick={() => setShowTagManagementModal(false)}>
         <span className="i-ri-close-line h-4 w-4 text-text-tertiary" data-testid="tag-management-modal-close-button" />
       </div>
       <div className="mt-3 flex flex-wrap gap-2">
-        <input
-          className="w-[100px] shrink-0 appearance-none rounded-lg border border-dashed border-divider-regular bg-transparent px-2 py-1 text-sm leading-5 text-text-secondary caret-primary-600 outline-none placeholder:text-text-quaternary focus:border-solid"
-          placeholder={t('tag.addNew', { ns: 'common' }) || ''}
-          autoFocus
-          value={name}
-          onChange={e => setName(e.target.value)}
-          onKeyDown={e => e.key === 'Enter' && !e.nativeEvent.isComposing && createNewTag()}
-          onBlur={createNewTag}
-        />
-        {tagList.map(tag => (
-          <TagItemEditor
-            key={tag.id}
-            tag={tag}
-          />
-        ))}
+        <input className="w-[100px] shrink-0 appearance-none rounded-lg border border-dashed border-divider-regular bg-transparent px-2 py-1 text-sm leading-5 text-text-secondary caret-primary-600 outline-none placeholder:text-text-quaternary focus:border-solid" placeholder={t('tag.addNew', { ns: 'common' }) || ''} autoFocus value={name} onChange={e => setName(e.target.value)} onKeyDown={e => e.key === 'Enter' && !e.nativeEvent.isComposing && createNewTag()} onBlur={createNewTag} />
+        {tagList.map(tag => (<TagItemEditor key={tag.id} tag={tag} />))}
       </div>
     </Modal>
   )
 }
-
 export default TagManagementModal
diff --git a/web/app/components/base/tag-management/panel.tsx b/web/app/components/base/tag-management/panel.tsx
index cebed74f3b..a705b70369 100644
--- a/web/app/components/base/tag-management/panel.tsx
+++ b/web/app/components/base/tag-management/panel.tsx
@@ -6,21 +6,18 @@ import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-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/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { bindTag, createTag, unBindTag } from '@/service/tag'
 import { useStore as useTagStore } from './store'
 
 type PanelProps = {
   onCreate: () => void
 } & HtmlContentProps & TagSelectorProps
-
 const Panel = (props: PanelProps) => {
   const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
   const { targetID, type, value, selectedTags, onCacheUpdate, onChange, onCreate } = props
   const tagList = useTagStore(s => s.tagList)
   const setTagList = useTagStore(s => s.setTagList)
@@ -30,7 +27,6 @@ const Panel = (props: PanelProps) => {
   const handleKeywordsChange = (value: string) => {
     setKeywords(value)
   }
-
   const notExisted = useMemo(() => {
     return tagList.every(tag => tag.type === type && tag.name !== keywords)
   }, [type, tagList, keywords])
@@ -40,7 +36,6 @@ const Panel = (props: PanelProps) => {
   const filteredTagList = useMemo(() => {
     return tagList.filter(tag => tag.type === type && !value.includes(tag.id) && tag.name.includes(keywords))
   }, [type, tagList, value, keywords])
-
   const [creating, setCreating] = useState<boolean>(false)
   const createNewTag = async () => {
     if (!keywords)
@@ -50,7 +45,7 @@ const Panel = (props: PanelProps) => {
     try {
       setCreating(true)
       const newTag = await createTag(keywords, type)
-      notify({ type: 'success', message: t('tag.created', { ns: 'common' }) })
+      toast.success(t('tag.created', { ns: 'common' }))
       setTagList([
         ...tagList,
         newTag,
@@ -60,26 +55,26 @@ const Panel = (props: PanelProps) => {
       onCreate()
     }
     catch {
-      notify({ type: 'error', message: t('tag.failed', { ns: 'common' }) })
+      toast.error(t('tag.failed', { ns: 'common' }))
       setCreating(false)
     }
   }
   const bind = async (tagIDs: string[]) => {
     try {
       await bindTag(tagIDs, targetID, type)
-      notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
+      toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
     }
     catch {
-      notify({ type: 'error', message: t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }) })
+      toast.error(t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }))
     }
   }
   const unbind = async (tagID: string) => {
     try {
       await unBindTag(tagID, targetID, type)
-      notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
+      toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
     }
     catch {
-      notify({ type: 'error', message: t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }) })
+      toast.error(t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }))
     }
   }
   const selectTag = (tag: Tag) => {
@@ -88,7 +83,6 @@ const Panel = (props: PanelProps) => {
     else
       setSelectedTagIDs([...selectedTagIDs, tag.id])
   }
-
   const valueNotChanged = useMemo(() => {
     return value.length === selectedTagIDs.length && value.every(v => selectedTagIDs.includes(v)) && selectedTagIDs.every(v => value.includes(v))
   }, [value, selectedTagIDs])
@@ -102,7 +96,6 @@ const Panel = (props: PanelProps) => {
       operations.push(bind(addTagIDs))
     if (removeTagIDs.length)
       operations.push(...removeTagIDs.map(tagID => unbind(tagID)))
-
     Promise.all(operations).finally(() => {
       if (onChange)
         onChange()
@@ -113,26 +106,14 @@ const Panel = (props: PanelProps) => {
       return
     handleValueChange()
   })
-
   return (
     <div className="relative w-full rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur">
       <div className="p-2 pb-1">
-        <Input
-          showLeftIcon
-          showClearIcon
-          value={keywords}
-          placeholder={t('tag.selectorPlaceholder', { ns: 'common' }) || ''}
-          onChange={e => handleKeywordsChange(e.target.value)}
-          onClear={() => handleKeywordsChange('')}
-        />
+        <Input showLeftIcon showClearIcon value={keywords} placeholder={t('tag.selectorPlaceholder', { ns: 'common' }) || ''} onChange={e => handleKeywordsChange(e.target.value)} onClear={() => handleKeywordsChange('')} />
       </div>
       {keywords && notExisted && (
         <div className="p-1">
-          <div
-            className="flex cursor-pointer items-center gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover"
-            data-testid="create-tag-option"
-            onClick={createNewTag}
-          >
+          <div className="flex cursor-pointer items-center gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover" data-testid="create-tag-option" onClick={createNewTag}>
             <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
             <div className="grow truncate px-1 text-text-secondary system-md-regular">
               {`${t('tag.create', { ns: 'common' })} `}
@@ -141,49 +122,21 @@ const Panel = (props: PanelProps) => {
           </div>
         </div>
       )}
-      {keywords && notExisted && filteredTagList.length > 0 && (
-        <Divider type="horizontal" className="my-0 h-px bg-divider-subtle" />
-      )}
+      {keywords && notExisted && filteredTagList.length > 0 && (<Divider type="horizontal" className="my-0 h-px bg-divider-subtle" />)}
       {(filteredTagList.length > 0 || filteredSelectedTagList.length > 0) && (
         <div className="max-h-[232px] overflow-y-auto p-1">
           {filteredSelectedTagList.map(tag => (
-            <div
-              key={tag.id}
-              className="flex cursor-pointer items-center gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover"
-              onClick={() => selectTag(tag)}
-              data-testid="tag-row"
-            >
-              <Checkbox
-                className="shrink-0"
-                checked={selectedTagIDs.includes(tag.id)}
-                onCheck={noop}
-                id={tag.id}
-              />
-              <div
-                title={tag.name}
-                className="grow truncate px-1 text-text-secondary system-md-regular"
-              >
+            <div key={tag.id} className="flex cursor-pointer items-center gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover" onClick={() => selectTag(tag)} data-testid="tag-row">
+              <Checkbox className="shrink-0" checked={selectedTagIDs.includes(tag.id)} onCheck={noop} id={tag.id} />
+              <div title={tag.name} className="grow truncate px-1 text-text-secondary system-md-regular">
                 {tag.name}
               </div>
             </div>
           ))}
           {filteredTagList.map(tag => (
-            <div
-              key={tag.id}
-              className="flex cursor-pointer items-center gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover"
-              onClick={() => selectTag(tag)}
-              data-testid="tag-row"
-            >
-              <Checkbox
-                className="shrink-0"
-                checked={selectedTagIDs.includes(tag.id)}
-                onCheck={noop}
-                id={tag.id}
-              />
-              <div
-                title={tag.name}
-                className="grow truncate px-1 text-text-secondary system-md-regular"
-              >
+            <div key={tag.id} className="flex cursor-pointer items-center gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover" onClick={() => selectTag(tag)} data-testid="tag-row">
+              <Checkbox className="shrink-0" checked={selectedTagIDs.includes(tag.id)} onCheck={noop} id={tag.id} />
+              <div title={tag.name} className="grow truncate px-1 text-text-secondary system-md-regular">
                 {tag.name}
               </div>
             </div>
@@ -200,10 +153,7 @@ const Panel = (props: PanelProps) => {
       )}
       <Divider type="horizontal" className="my-0 h-px bg-divider-subtle" />
       <div className="p-1">
-        <div
-          className="flex cursor-pointer items-center gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover"
-          onClick={() => setShowTagManagementModal(true)}
-        >
+        <div className="flex cursor-pointer items-center gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover" onClick={() => setShowTagManagementModal(true)}>
           <span className="i-ri-price-tag-3-line h-4 w-4 text-text-tertiary" />
           <div className="grow truncate px-1 text-text-secondary system-md-regular">
             {t('tag.manageTags', { ns: 'common' })}
@@ -213,5 +163,4 @@ const Panel = (props: PanelProps) => {
     </div>
   )
 }
-
 export default React.memo(Panel)
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 3cff335f58..2de769e375 100644
--- a/web/app/components/base/tag-management/tag-item-editor.tsx
+++ b/web/app/components/base/tag-management/tag-item-editor.tsx
@@ -1,31 +1,22 @@
 import type { FC } from 'react'
 import type { Tag } from '@/app/components/base/tag-management/constant'
-
 import { useDebounceFn } from 'ahooks'
 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/context'
 import Tooltip from '@/app/components/base/tooltip'
-import {
-  deleteTag,
-  updateTag,
-} from '@/service/tag'
+import { toast } from '@/app/components/base/ui/toast'
+import { deleteTag, updateTag } from '@/service/tag'
 import { cn } from '@/utils/classnames'
 import { useStore as useTagStore } from './store'
 
 type TagItemEditorProps = {
   tag: Tag
 }
-const TagItemEditor: FC<TagItemEditorProps> = ({
-  tag,
-}) => {
+const TagItemEditor: FC<TagItemEditorProps> = ({ tag }) => {
   const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
   const tagList = useTagStore(s => s.tagList)
   const setTagList = useTagStore(s => s.setTagList)
-
   const [isEditing, setIsEditing] = useState(false)
   const [name, setName] = useState(tag.name)
   const editTag = async (tagID: string, name: string) => {
@@ -34,7 +25,7 @@ const TagItemEditor: FC<TagItemEditorProps> = ({
       return
     }
     if (!name) {
-      notify({ type: 'error', message: 'tag name is empty' })
+      toast.error('tag name is empty')
       setName(tag.name)
       setIsEditing(false)
       return
@@ -54,11 +45,11 @@ const TagItemEditor: FC<TagItemEditorProps> = ({
       ])
       setIsEditing(false)
       await updateTag(tagID, name)
-      notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
+      toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
       setName(name)
     }
     catch {
-      notify({ type: 'error', message: t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }) })
+      toast.error(t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }))
       setName(tag.name)
       const recoverList = tagList.map((tag) => {
         if (tag.id === tagID) {
@@ -83,7 +74,7 @@ const TagItemEditor: FC<TagItemEditorProps> = ({
     try {
       setPending(true)
       await deleteTag(tagID)
-      notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
+      toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
       const newList = tagList.filter(tag => tag.id !== tagID)
       setTagList([
         ...newList,
@@ -91,14 +82,13 @@ const TagItemEditor: FC<TagItemEditorProps> = ({
       setPending(false)
     }
     catch {
-      notify({ type: 'error', message: t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }) })
+      toast.error(t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }))
       setPending(false)
     }
   }
   const { run: handleRemove } = useDebounceFn(() => {
     removeTag(tag.id)
   }, { wait: 200 })
-
   return (
     <>
       <div className={cn('flex shrink-0 items-center gap-0.5 rounded-lg border border-components-panel-border py-1 pl-2 pr-1 text-sm leading-5 text-text-secondary')}>
@@ -107,12 +97,7 @@ const TagItemEditor: FC<TagItemEditorProps> = ({
             <div className="text-sm leading-5 text-text-secondary">
               {tag.name}
             </div>
-            <Tooltip
-              popupContent={
-                <div>{t('common.tagBound', { ns: 'workflow' })}</div>
-              }
-              needsDelay
-            >
+            <Tooltip popupContent={<div>{t('common.tagBound', { ns: 'workflow' })}</div>} needsDelay>
               <div className="leading-4.5 shrink-0 px-1 text-sm font-medium text-text-tertiary">{tag.binding_count}</div>
             </Tooltip>
             <div className="group/edit shrink-0 cursor-pointer rounded-md p-1 hover:bg-state-base-hover" onClick={() => setIsEditing(true)}>
@@ -131,16 +116,7 @@ const TagItemEditor: FC<TagItemEditorProps> = ({
             </div>
           </>
         )}
-        {isEditing && (
-          <input
-            className="shrink-0 appearance-none caret-primary-600 outline-none placeholder:text-text-quaternary"
-            autoFocus
-            value={name}
-            onChange={e => setName(e.target.value)}
-            onKeyDown={e => e.key === 'Enter' && editTag(tag.id, name)}
-            onBlur={() => editTag(tag.id, name)}
-          />
-        )}
+        {isEditing && (<input className="shrink-0 appearance-none caret-primary-600 outline-none placeholder:text-text-quaternary" autoFocus value={name} onChange={e => setName(e.target.value)} onKeyDown={e => e.key === 'Enter' && editTag(tag.id, name)} onBlur={() => editTag(tag.id, name)} />)}
       </div>
       <Confirm
         title={`${t('tag.delete', { ns: 'common' })} "${tag.name}"`}
@@ -155,5 +131,4 @@ const TagItemEditor: FC<TagItemEditorProps> = ({
     </>
   )
 }
-
 export default TagItemEditor
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 a5b5578158..99b577c2ec 100644
--- a/web/app/components/base/text-generation/__tests__/hooks.spec.ts
+++ b/web/app/components/base/text-generation/__tests__/hooks.spec.ts
@@ -5,10 +5,8 @@ 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/context', () => ({
-  useToastContext: () => ({
-    notify: mockNotify,
-  }),
+vi.mock('@/app/components/base/ui/toast', () => ({
+
 }))
 
 vi.mock('@/service/base', () => ({
diff --git a/web/app/components/base/text-generation/hooks.ts b/web/app/components/base/text-generation/hooks.ts
index 4314a81925..0329cff110 100644
--- a/web/app/components/base/text-generation/hooks.ts
+++ b/web/app/components/base/text-generation/hooks.ts
@@ -1,57 +1,46 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useToastContext } from '@/app/components/base/toast/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { ssePost } from '@/service/base'
 
 export const useTextGeneration = () => {
   const { t } = useTranslation()
-  const { notify } = useToastContext()
   const [isResponding, setIsResponding] = useState(false)
   const [completion, setCompletion] = useState('')
   const [messageId, setMessageId] = useState<string | null>(null)
-
-  const handleSend = async (
-    url: string,
-    data: any,
-  ) => {
+  const handleSend = async (url: string, data: any) => {
     if (isResponding) {
-      notify({ type: 'info', message: t('errorMessage.waitForResponse', { ns: 'appDebug' }) })
+      toast.info(t('errorMessage.waitForResponse', { ns: 'appDebug' }))
       return false
     }
-
     setIsResponding(true)
     setCompletion('')
     setMessageId('')
     let res: string[] = []
-    ssePost(
-      url,
-      {
-        body: {
-          response_mode: 'streaming',
-          ...data,
-        },
+    ssePost(url, {
+      body: {
+        response_mode: 'streaming',
+        ...data,
       },
-      {
-        onData: (data: string, _isFirstMessage: boolean, { messageId }) => {
-          res.push(data)
-          setCompletion(res.join(''))
-          setMessageId(messageId)
-        },
-        onMessageReplace: (messageReplace) => {
-          res = [messageReplace.answer]
-          setCompletion(res.join(''))
-        },
-        onCompleted() {
-          setIsResponding(false)
-        },
-        onError() {
-          setIsResponding(false)
-        },
+    }, {
+      onData: (data: string, _isFirstMessage: boolean, { messageId }) => {
+        res.push(data)
+        setCompletion(res.join(''))
+        setMessageId(messageId)
       },
-    )
+      onMessageReplace: (messageReplace) => {
+        res = [messageReplace.answer]
+        setCompletion(res.join(''))
+      },
+      onCompleted() {
+        setIsResponding(false)
+      },
+      onError() {
+        setIsResponding(false)
+      },
+    })
     return true
   }
-
   return {
     completion,
     isResponding,
diff --git a/web/app/components/base/toast/__tests__/index.spec.tsx b/web/app/components/base/toast/__tests__/index.spec.tsx
deleted file mode 100644
index 8e60ebf827..0000000000
--- a/web/app/components/base/toast/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,349 +0,0 @@
-import type { ReactNode } from 'react'
-import type { ToastHandle } from '../index'
-import { act, render, screen, waitFor, within } from '@testing-library/react'
-import { noop } from 'es-toolkit/function'
-import * as React from 'react'
-import Toast, { ToastProvider } from '..'
-import { useToastContext } from '../context'
-
-const TestComponent = () => {
-  const { notify, close } = useToastContext()
-
-  return (
-    <div>
-      <button type="button" onClick={() => notify({ message: 'Notification message', type: 'info' })}>
-        Show Toast
-      </button>
-      <button type="button" onClick={close}>Close Toast</button>
-    </div>
-  )
-}
-
-describe('Toast', () => {
-  const getToastElementByMessage = (message: string): HTMLElement => {
-    const messageElement = screen.getByText(message)
-    const toastElement = messageElement.closest('.fixed')
-    expect(toastElement).toBeInTheDocument()
-    return toastElement as HTMLElement
-  }
-
-  beforeEach(() => {
-    vi.useFakeTimers({ shouldAdvanceTime: true })
-  })
-
-  afterEach(() => {
-    vi.runOnlyPendingTimers()
-    vi.useRealTimers()
-  })
-
-  describe('Toast Component', () => {
-    it('renders toast with correct type and message', () => {
-      render(
-        <ToastProvider>
-          <Toast type="success" message="Success message" />
-        </ToastProvider>,
-      )
-
-      expect(screen.getByText('Success message')).toBeInTheDocument()
-    })
-
-    it('renders with different types', () => {
-      const { rerender } = render(
-        <ToastProvider>
-          <Toast type="success" message="Success message" />
-        </ToastProvider>,
-      )
-
-      const successToast = getToastElementByMessage('Success message')
-      expect(successToast).toHaveClass('z-[1101]')
-      const successIcon = within(successToast).getByTestId('toast-icon-success')
-      expect(successIcon).toHaveClass('text-text-success')
-
-      rerender(
-        <ToastProvider>
-          <Toast type="error" message="Error message" />
-        </ToastProvider>,
-      )
-
-      const errorToast = getToastElementByMessage('Error message')
-      const errorIcon = within(errorToast).getByTestId('toast-icon-error')
-      expect(errorIcon).toHaveClass('text-text-destructive')
-    })
-
-    it('renders with custom component', () => {
-      render(
-        <ToastProvider>
-          <Toast
-            message="Message with custom component"
-            customComponent={<span data-testid="custom-component">Custom</span>}
-          />
-        </ToastProvider>,
-      )
-
-      expect(screen.getByTestId('custom-component')).toBeInTheDocument()
-    })
-
-    it('renders children content', () => {
-      render(
-        <ToastProvider>
-          <Toast message="Message with children">
-            <span>Additional information</span>
-          </Toast>
-        </ToastProvider>,
-      )
-
-      expect(screen.getByText('Additional information')).toBeInTheDocument()
-    })
-
-    it('does not render close button when close is undefined', () => {
-      // Create a modified context where close is undefined
-      const CustomToastContext = React.createContext({ notify: noop, close: undefined })
-
-      // Create a wrapper component using the custom context
-      const Wrapper = ({ children }: { children: ReactNode }) => (
-        <CustomToastContext.Provider value={{ notify: noop, close: undefined }}>
-          {children}
-        </CustomToastContext.Provider>
-      )
-
-      render(
-        <Wrapper>
-          <Toast message="No close button" type="info" />
-        </Wrapper>,
-      )
-
-      expect(screen.getByText('No close button')).toBeInTheDocument()
-      const toastElement = getToastElementByMessage('No close button')
-      expect(within(toastElement).queryByRole('button')).not.toBeInTheDocument()
-    })
-
-    it('returns null when message is not a string', () => {
-      const { container } = render(
-        <ToastProvider>
-          {/* @ts-expect-error - testing invalid input */}
-          <Toast message={<div>Invalid</div>} />
-        </ToastProvider>,
-      )
-      // Toast returns null, and provider adds no DOM elements
-      expect(container.firstChild).toBeNull()
-    })
-
-    it('renders with size sm', () => {
-      const { rerender } = render(
-        <ToastProvider>
-          <Toast type="info" message="Small size" size="sm" />
-        </ToastProvider>,
-      )
-      const infoToast = getToastElementByMessage('Small size')
-      const infoIcon = within(infoToast).getByTestId('toast-icon-info')
-      expect(infoIcon).toHaveClass('text-text-accent', 'h-4', 'w-4')
-      expect(infoIcon.parentElement).toHaveClass('p-1')
-
-      rerender(
-        <ToastProvider>
-          <Toast type="success" message="Small size" size="sm" />
-        </ToastProvider>,
-      )
-      const successToast = getToastElementByMessage('Small size')
-      const successIcon = within(successToast).getByTestId('toast-icon-success')
-      expect(successIcon).toHaveClass('text-text-success', 'h-4', 'w-4')
-
-      rerender(
-        <ToastProvider>
-          <Toast type="warning" message="Small size" size="sm" />
-        </ToastProvider>,
-      )
-      const warningToast = getToastElementByMessage('Small size')
-      const warningIcon = within(warningToast).getByTestId('toast-icon-warning')
-      expect(warningIcon).toHaveClass('text-text-warning-secondary', 'h-4', 'w-4')
-
-      rerender(
-        <ToastProvider>
-          <Toast type="error" message="Small size" size="sm" />
-        </ToastProvider>,
-      )
-      const errorToast = getToastElementByMessage('Small size')
-      const errorIcon = within(errorToast).getByTestId('toast-icon-error')
-      expect(errorIcon).toHaveClass('text-text-destructive', 'h-4', 'w-4')
-    })
-  })
-
-  describe('ToastProvider and Context', () => {
-    it('shows and hides toast using context', async () => {
-      render(
-        <ToastProvider>
-          <TestComponent />
-        </ToastProvider>,
-      )
-
-      // No toast initially
-      expect(screen.queryByText('Notification message')).not.toBeInTheDocument()
-
-      // Show toast
-      act(() => {
-        screen.getByText('Show Toast').click()
-      })
-      expect(screen.getByText('Notification message')).toBeInTheDocument()
-
-      // Close toast
-      act(() => {
-        screen.getByText('Close Toast').click()
-      })
-      expect(screen.queryByText('Notification message')).not.toBeInTheDocument()
-    })
-
-    it('automatically hides toast after duration', async () => {
-      render(
-        <ToastProvider>
-          <TestComponent />
-        </ToastProvider>,
-      )
-
-      // Show toast
-      act(() => {
-        screen.getByText('Show Toast').click()
-      })
-      expect(screen.getByText('Notification message')).toBeInTheDocument()
-
-      // Fast-forward timer
-      act(() => {
-        vi.advanceTimersByTime(3000) // Default for info type is 3000ms
-      })
-
-      // Toast should be gone
-      await waitFor(() => {
-        expect(screen.queryByText('Notification message')).not.toBeInTheDocument()
-      })
-    })
-
-    it('automatically hides toast after duration for error type in provider', async () => {
-      const TestComponentError = () => {
-        const { notify } = useToastContext()
-        return (
-          <button type="button" onClick={() => notify({ message: 'Error notify', type: 'error' })}>
-            Show Error
-          </button>
-        )
-      }
-
-      render(
-        <ToastProvider>
-          <TestComponentError />
-        </ToastProvider>,
-      )
-
-      act(() => {
-        screen.getByText('Show Error').click()
-      })
-      expect(screen.getByText('Error notify')).toBeInTheDocument()
-
-      // Error type uses 6000ms default
-      act(() => {
-        vi.advanceTimersByTime(6000)
-      })
-
-      await waitFor(() => {
-        expect(screen.queryByText('Error notify')).not.toBeInTheDocument()
-      })
-    })
-  })
-
-  describe('Toast.notify static method', () => {
-    it('creates and removes toast from DOM', async () => {
-      act(() => {
-        // Call the static method
-        Toast.notify({ message: 'Static notification', type: 'warning' })
-      })
-
-      // Toast should be in document
-      expect(screen.getByText('Static notification')).toBeInTheDocument()
-
-      // Fast-forward timer
-      act(() => {
-        vi.advanceTimersByTime(6000) // Default for warning type is 6000ms
-      })
-
-      // Toast should be removed
-      await waitFor(() => {
-        expect(screen.queryByText('Static notification')).not.toBeInTheDocument()
-      })
-    })
-
-    it('calls onClose callback after duration', async () => {
-      const onCloseMock = vi.fn()
-      act(() => {
-        Toast.notify({
-          message: 'Closing notification',
-          type: 'success',
-          onClose: onCloseMock,
-        })
-      })
-
-      // Fast-forward timer
-      act(() => {
-        vi.advanceTimersByTime(3000) // Default for success type is 3000ms
-      })
-
-      // onClose should be called
-      await waitFor(() => {
-        expect(onCloseMock).toHaveBeenCalled()
-      })
-    })
-
-    it('closes when close button is clicked in static toast', async () => {
-      const onCloseMock = vi.fn()
-      act(() => {
-        Toast.notify({ message: 'Static close test', type: 'info', onClose: onCloseMock })
-      })
-
-      expect(screen.getByText('Static close test')).toBeInTheDocument()
-
-      const toastElement = getToastElementByMessage('Static close test')
-      const closeButton = within(toastElement).getByRole('button')
-
-      act(() => {
-        closeButton.click()
-      })
-
-      expect(screen.queryByText('Static close test')).not.toBeInTheDocument()
-      expect(onCloseMock).toHaveBeenCalled()
-    })
-
-    it('does not auto close when duration is 0', async () => {
-      act(() => {
-        Toast.notify({ message: 'No auto close', type: 'info', duration: 0 })
-      })
-
-      expect(screen.getByText('No auto close')).toBeInTheDocument()
-
-      act(() => {
-        vi.advanceTimersByTime(10000)
-      })
-
-      expect(screen.getByText('No auto close')).toBeInTheDocument()
-
-      // manual clear to clean up
-      act(() => {
-        const toastElement = getToastElementByMessage('No auto close')
-        within(toastElement).getByRole('button').click()
-      })
-    })
-
-    it('returns a toast handler that can clear the toast', async () => {
-      let handler: ToastHandle = {}
-      const onCloseMock = vi.fn()
-      act(() => {
-        handler = Toast.notify({ message: 'Clearable toast', type: 'warning', onClose: onCloseMock })
-      })
-
-      expect(screen.getByText('Clearable toast')).toBeInTheDocument()
-
-      act(() => {
-        handler.clear?.()
-      })
-
-      expect(screen.queryByText('Clearable toast')).not.toBeInTheDocument()
-      expect(onCloseMock).toHaveBeenCalled()
-    })
-  })
-})
diff --git a/web/app/components/base/toast/context.ts b/web/app/components/base/toast/context.ts
deleted file mode 100644
index 07b4e72602..0000000000
--- a/web/app/components/base/toast/context.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-'use client'
-
-/**
- * @deprecated Use `@/app/components/base/ui/toast` instead.
- * This module will be removed after migration is complete.
- * See: https://github.com/langgenius/dify/issues/32811
- */
-
-import type { ReactNode } from 'react'
-import { createContext, useContext } from 'use-context-selector'
-
-/** @deprecated Use `@/app/components/base/ui/toast` instead. See issue #32811. */
-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
-}
-
-/** @deprecated Use `@/app/components/base/ui/toast` instead. See issue #32811. */
-export const ToastContext = createContext<IToastContext>({} as IToastContext)
-
-/** @deprecated Use `@/app/components/base/ui/toast` instead. See issue #32811. */
-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
deleted file mode 100644
index 40d6fecfc2..0000000000
--- a/web/app/components/base/toast/index.stories.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { useCallback } from 'react'
-import Toast, { ToastProvider } from '.'
-import { useToastContext } from './context'
-
-const ToastControls = () => {
-  const { notify } = useToastContext()
-
-  const trigger = useCallback((type: 'success' | 'error' | 'warning' | 'info') => {
-    notify({
-      type,
-      message: `This is a ${type} toast`,
-      children: type === 'info' ? 'Additional details can live here.' : undefined,
-    })
-  }, [notify])
-
-  return (
-    <div className="flex flex-wrap gap-3">
-      <button
-        type="button"
-        className="rounded-md border border-divider-subtle bg-background-default px-3 py-1.5 text-xs font-medium text-text-secondary hover:bg-state-base-hover"
-        onClick={() => trigger('success')}
-      >
-        Success
-      </button>
-      <button
-        type="button"
-        className="rounded-md border border-divider-subtle bg-background-default px-3 py-1.5 text-xs font-medium text-text-secondary hover:bg-state-base-hover"
-        onClick={() => trigger('info')}
-      >
-        Info
-      </button>
-      <button
-        type="button"
-        className="rounded-md border border-divider-subtle bg-background-default px-3 py-1.5 text-xs font-medium text-text-secondary hover:bg-state-base-hover"
-        onClick={() => trigger('warning')}
-      >
-        Warning
-      </button>
-      <button
-        type="button"
-        className="rounded-md border border-divider-subtle bg-background-default px-3 py-1.5 text-xs font-medium text-text-secondary hover:bg-state-base-hover"
-        onClick={() => trigger('error')}
-      >
-        Error
-      </button>
-    </div>
-  )
-}
-
-const ToastProviderDemo = () => {
-  return (
-    <ToastProvider>
-      <div className="flex w-full max-w-md flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
-        <div className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Toast provider</div>
-        <ToastControls />
-      </div>
-    </ToastProvider>
-  )
-}
-
-const StaticToastDemo = () => {
-  return (
-    <div className="flex w-full max-w-md flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
-      <div className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Static API</div>
-      <button
-        type="button"
-        className="self-start rounded-md border border-divider-subtle bg-background-default px-3 py-1.5 text-xs font-medium text-text-secondary hover:bg-state-base-hover"
-        onClick={() => {
-          const handle = Toast.notify({
-            type: 'success',
-            message: 'Saved changes',
-            duration: 2000,
-          })
-          setTimeout(() => handle.clear?.(), 2500)
-        }}
-      >
-        Trigger Toast.notify()
-      </button>
-    </div>
-  )
-}
-
-const meta = {
-  title: 'Base/Feedback/Toast',
-  component: ToastProviderDemo,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'ToastProvider based notifications and the static Toast.notify helper. Buttons showcase each toast variant.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof ToastProviderDemo>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Provider: Story = {}
-
-export const StaticApi: Story = {
-  render: () => <StaticToastDemo />,
-}
diff --git a/web/app/components/base/toast/index.tsx b/web/app/components/base/toast/index.tsx
deleted file mode 100644
index 0cb14f3f11..0000000000
--- a/web/app/components/base/toast/index.tsx
+++ /dev/null
@@ -1,173 +0,0 @@
-'use client'
-
-/**
- * @deprecated Use `@/app/components/base/ui/toast` instead.
- * This component will be removed after migration is complete.
- * See: https://github.com/langgenius/dify/issues/32811
- */
-
-import type { ReactNode } from 'react'
-import type { IToastProps } from './context'
-import { noop } from 'es-toolkit/function'
-import * as React from 'react'
-import { useEffect, useState } from 'react'
-import { createRoot } from 'react-dom/client'
-import ActionButton from '@/app/components/base/action-button'
-import { cn } from '@/utils/classnames'
-import { ToastContext, useToastContext } from './context'
-
-export type ToastHandle = {
-  clear?: VoidFunction
-}
-
-const Toast = ({
-  type = 'info',
-  size = 'md',
-  message,
-  children,
-  className,
-  customComponent,
-}: IToastProps) => {
-  const { close } = useToastContext()
-  // sometimes message is react node array. Not handle it.
-  if (typeof message !== 'string')
-    return null
-
-  return (
-    <div className={cn(
-      className,
-      // Keep legacy toast above highPriority modals until overlay migration completes.
-      'fixed z-[1101] mx-8 my-4 w-[360px] grow overflow-hidden rounded-xl',
-      'border border-components-panel-border-subtle bg-components-panel-bg-blur shadow-sm',
-      'top-0',
-      'right-0',
-      size === 'md' ? 'p-3' : 'p-2',
-      className,
-    )}
-    >
-      <div className={cn(
-        'absolute inset-0 -z-10 opacity-40',
-        type === 'success' && 'bg-toast-success-bg',
-        type === 'warning' && 'bg-toast-warning-bg',
-        type === 'error' && 'bg-toast-error-bg',
-        type === 'info' && 'bg-toast-info-bg',
-      )}
-      />
-      <div className={cn('flex', size === 'md' ? 'gap-1' : 'gap-0.5')}>
-        <div className={cn('flex items-center justify-center', size === 'md' ? 'p-0.5' : 'p-1')}>
-          {type === 'success' && <span className={cn('i-ri-checkbox-circle-fill', 'text-text-success', size === 'md' ? 'h-5 w-5' : 'h-4 w-4')} data-testid="toast-icon-success" aria-hidden="true" />}
-          {type === 'error' && <span className={cn('i-ri-error-warning-fill', 'text-text-destructive', size === 'md' ? 'h-5 w-5' : 'h-4 w-4')} data-testid="toast-icon-error" aria-hidden="true" />}
-          {type === 'warning' && <span className={cn('i-ri-alert-fill', 'text-text-warning-secondary', size === 'md' ? 'h-5 w-5' : 'h-4 w-4')} data-testid="toast-icon-warning" aria-hidden="true" />}
-          {type === 'info' && <span className={cn('i-ri-information-2-fill', 'text-text-accent', size === 'md' ? 'h-5 w-5' : 'h-4 w-4')} data-testid="toast-icon-info" aria-hidden="true" />}
-        </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="text-text-primary system-sm-semibold [word-break:break-word]">{message}</div>
-            {customComponent}
-          </div>
-          {!!children && (
-            <div className="text-text-secondary system-xs-regular">
-              {children}
-            </div>
-          )}
-        </div>
-        {close
-          && (
-            <ActionButton data-testid="toast-close-button" className="z-[1000]" onClick={close}>
-              <span className="i-ri-close-line h-4 w-4 shrink-0 text-text-tertiary" />
-            </ActionButton>
-          )}
-      </div>
-    </div>
-  )
-}
-
-/** @deprecated Use `@/app/components/base/ui/toast` instead. See issue #32811. */
-export const ToastProvider = ({
-  children,
-}: {
-  children: ReactNode
-}) => {
-  const placeholder: IToastProps = {
-    type: 'info',
-    message: 'Toast message',
-    duration: 6000,
-  }
-  const [params, setParams] = React.useState<IToastProps>(placeholder)
-  const defaultDuring = (params.type === 'success' || params.type === 'info') ? 3000 : 6000
-  const [mounted, setMounted] = useState(false)
-
-  useEffect(() => {
-    if (mounted) {
-      setTimeout(() => {
-        setMounted(false)
-      }, params.duration || defaultDuring)
-    }
-  }, [defaultDuring, mounted, params.duration])
-
-  return (
-    <ToastContext.Provider value={{
-      notify: (props) => {
-        setMounted(true)
-        setParams(props)
-      },
-      close: () => setMounted(false),
-    }}
-    >
-      {mounted && <Toast {...params} />}
-      {children}
-    </ToastContext.Provider>
-  )
-}
-
-Toast.notify = ({
-  type,
-  size = 'md',
-  message,
-  duration,
-  className,
-  customComponent,
-  onClose,
-}: Pick<IToastProps, 'type' | 'size' | 'message' | 'duration' | 'className' | 'customComponent' | 'onClose'>): ToastHandle => {
-  const defaultDuring = (type === 'success' || type === 'info') ? 3000 : 6000
-  const toastHandler: ToastHandle = {}
-
-  if (typeof window === 'object') {
-    const holder = document.createElement('div')
-    const root = createRoot(holder)
-
-    toastHandler.clear = () => {
-      if (holder) {
-        root.unmount()
-        holder.remove()
-      }
-      onClose?.()
-    }
-
-    root.render(
-      <ToastContext.Provider value={{
-        notify: noop,
-        close: () => {
-          if (holder) {
-            root.unmount()
-            holder.remove()
-          }
-          onClose?.()
-        },
-      }}
-      >
-        <Toast type={type} size={size} message={message} duration={duration} className={className} customComponent={customComponent} />
-      </ToastContext.Provider>,
-    )
-    document.body.appendChild(holder)
-    const d = duration ?? defaultDuring
-    if (d > 0)
-      setTimeout(toastHandler.clear, d)
-  }
-
-  return toastHandler
-}
-
-export default Toast
-
-export type { IToastProps } from './context'
diff --git a/web/app/components/base/toast/style.module.css b/web/app/components/base/toast/style.module.css
deleted file mode 100644
index 216ccf1da8..0000000000
--- a/web/app/components/base/toast/style.module.css
+++ /dev/null
@@ -1,44 +0,0 @@
-.toast {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: fixed;
-  z-index: 99999999;
-  width: 1.84rem;
-  height: 1.80rem;
-  left: 50%;
-  top: 50%;
-  transform: translateX(-50%) translateY(-50%);
-  background: #000000;
-  box-shadow: 0 -.04rem .1rem 1px rgba(255, 255, 255, 0.1);
-  border-radius: .1rem .1rem .1rem .1rem;
-}
-
-.main {
-  width: 2rem;
-}
-
-.icon {
-  margin-bottom: .2rem;
-  height: .4rem;
-  background: center center no-repeat;
-  background-size: contain;
-}
-
-/* .success {
-  background-image: url('./icons/success.svg');
-}
-
-.warning {
-  background-image: url('./icons/warning.svg');
-}
-
-.error {
-  background-image: url('./icons/error.svg');
-} */
-
-.text {
-  text-align: center;
-  font-size: .2rem;
-  color: rgba(255, 255, 255, 0.86);
-}
diff --git a/web/app/components/custom/custom-page/__tests__/index.spec.tsx b/web/app/components/custom/custom-page/__tests__/index.spec.tsx
index cdc35ba1eb..5514d21b50 100644
--- a/web/app/components/custom/custom-page/__tests__/index.spec.tsx
+++ b/web/app/components/custom/custom-page/__tests__/index.spec.tsx
@@ -4,7 +4,6 @@ import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createMockProviderContextValue } from '@/__mocks__/provider-context'
-import { useToastContext } from '@/app/components/base/toast/context'
 import { contactSalesUrl, defaultPlan } from '@/app/components/billing/config'
 import { Plan } from '@/app/components/billing/type'
 import {
@@ -19,6 +18,19 @@ import { useProviderContext } from '@/context/provider-context'
 import { defaultSystemFeatures } from '@/types/feature'
 import CustomPage from '../index'
 
+const { mockToast } = vi.hoisted(() => {
+  const mockToast = Object.assign(vi.fn(), {
+    success: vi.fn(),
+    error: vi.fn(),
+    warning: vi.fn(),
+    info: vi.fn(),
+    dismiss: vi.fn(),
+    update: vi.fn(),
+    promise: vi.fn(),
+  })
+  return { mockToast }
+})
+
 vi.mock('@/context/provider-context', () => ({
   useProviderContext: vi.fn(),
 }))
@@ -35,15 +47,14 @@ vi.mock('@/context/app-context', async (importOriginal) => {
 vi.mock('@/context/global-public-context', () => ({
   useGlobalPublicStore: vi.fn(),
 }))
-vi.mock('@/app/components/base/toast/context', () => ({
-  useToastContext: vi.fn(),
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
 }))
 
 const mockUseProviderContext = vi.mocked(useProviderContext)
 const mockUseModalContext = vi.mocked(useModalContext)
 const mockUseAppContext = vi.mocked(useAppContext)
 const mockUseGlobalPublicStore = vi.mocked(useGlobalPublicStore)
-const mockUseToastContext = vi.mocked(useToastContext)
 
 const createProviderContext = ({
   enableBilling = false,
@@ -106,9 +117,6 @@ describe('CustomPage', () => {
       systemFeatures: createSystemFeatures(),
       setSystemFeatures: vi.fn(),
     }))
-    mockUseToastContext.mockReturnValue({
-      notify: vi.fn(),
-    } as unknown as ReturnType<typeof useToastContext>)
   })
 
   // Integration coverage for the page and its child custom brand section.
diff --git a/web/app/components/custom/custom-web-app-brand/hooks/__tests__/use-web-app-brand.spec.tsx b/web/app/components/custom/custom-web-app-brand/hooks/__tests__/use-web-app-brand.spec.tsx
index bb19c5accc..a2730ffd27 100644
--- a/web/app/components/custom/custom-web-app-brand/hooks/__tests__/use-web-app-brand.spec.tsx
+++ b/web/app/components/custom/custom-web-app-brand/hooks/__tests__/use-web-app-brand.spec.tsx
@@ -5,7 +5,6 @@ import { act, renderHook } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createMockProviderContextValue } from '@/__mocks__/provider-context'
 import { getImageUploadErrorMessage, imageUpload } from '@/app/components/base/image-uploader/utils'
-import { useToastContext } from '@/app/components/base/toast/context'
 import { defaultPlan } from '@/app/components/billing/config'
 import { Plan } from '@/app/components/billing/type'
 import {
@@ -20,8 +19,22 @@ import { updateCurrentWorkspace } from '@/service/common'
 import { defaultSystemFeatures } from '@/types/feature'
 import useWebAppBrand from '../use-web-app-brand'
 
-vi.mock('@/app/components/base/toast/context', () => ({
-  useToastContext: vi.fn(),
+const { mockNotify, mockToast } = vi.hoisted(() => {
+  const mockNotify = vi.fn()
+  const mockToast = Object.assign(mockNotify, {
+    success: vi.fn((message, options) => mockNotify({ type: 'success', message, ...options })),
+    error: vi.fn((message, options) => mockNotify({ type: 'error', message, ...options })),
+    warning: vi.fn((message, options) => mockNotify({ type: 'warning', message, ...options })),
+    info: vi.fn((message, options) => mockNotify({ type: 'info', message, ...options })),
+    dismiss: vi.fn(),
+    update: vi.fn(),
+    promise: vi.fn(),
+  })
+  return { mockNotify, mockToast }
+})
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
 }))
 vi.mock('@/service/common', () => ({
   updateCurrentWorkspace: vi.fn(),
@@ -44,8 +57,6 @@ vi.mock('@/app/components/base/image-uploader/utils', () => ({
   getImageUploadErrorMessage: vi.fn(),
 }))
 
-const mockNotify = vi.fn()
-const mockUseToastContext = vi.mocked(useToastContext)
 const mockUpdateCurrentWorkspace = vi.mocked(updateCurrentWorkspace)
 const mockUseAppContext = vi.mocked(useAppContext)
 const mockUseProviderContext = vi.mocked(useProviderContext)
@@ -119,7 +130,6 @@ describe('useWebAppBrand', () => {
     appContextValue = createAppContextValue()
     systemFeatures = createSystemFeatures()
 
-    mockUseToastContext.mockReturnValue({ notify: mockNotify } as unknown as ReturnType<typeof useToastContext>)
     mockUpdateCurrentWorkspace.mockResolvedValue(appContextValue.currentWorkspace)
     mockUseAppContext.mockImplementation(() => appContextValue)
     mockUseProviderContext.mockReturnValue(createProviderContext())
diff --git a/web/app/components/custom/custom-web-app-brand/hooks/use-web-app-brand.ts b/web/app/components/custom/custom-web-app-brand/hooks/use-web-app-brand.ts
index 90ba0483c9..44810de1fd 100644
--- a/web/app/components/custom/custom-web-app-brand/hooks/use-web-app-brand.ts
+++ b/web/app/components/custom/custom-web-app-brand/hooks/use-web-app-brand.ts
@@ -2,7 +2,7 @@ import type { ChangeEvent } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { getImageUploadErrorMessage, imageUpload } from '@/app/components/base/image-uploader/utils'
-import { useToastContext } from '@/app/components/base/toast/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { Plan } from '@/app/components/billing/type'
 import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
@@ -12,28 +12,20 @@ import { updateCurrentWorkspace } from '@/service/common'
 const MAX_LOGO_FILE_SIZE = 5 * 1024 * 1024
 const CUSTOM_CONFIG_URL = '/workspaces/custom-config'
 const WEB_APP_LOGO_UPLOAD_URL = '/workspaces/custom-config/webapp-logo/upload'
-
 const useWebAppBrand = () => {
   const { t } = useTranslation()
-  const { notify } = useToastContext()
   const { plan, enableBilling } = useProviderContext()
-  const {
-    currentWorkspace,
-    mutateCurrentWorkspace,
-    isCurrentWorkspaceManager,
-  } = useAppContext()
+  const { currentWorkspace, mutateCurrentWorkspace, isCurrentWorkspaceManager } = useAppContext()
   const [fileId, setFileId] = useState('')
   const [imgKey, setImgKey] = useState(() => Date.now())
   const [uploadProgress, setUploadProgress] = useState(0)
   const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
-
   const isSandbox = enableBilling && plan.type === Plan.sandbox
   const uploading = uploadProgress > 0 && uploadProgress < 100
   const webappLogo = currentWorkspace.custom_config?.replace_webapp_logo || ''
   const webappBrandRemoved = currentWorkspace.custom_config?.remove_webapp_brand
   const uploadDisabled = isSandbox || webappBrandRemoved || !isCurrentWorkspaceManager
   const workspaceLogo = systemFeatures.branding.enabled ? systemFeatures.branding.workspace_logo : ''
-
   const persistWorkspaceBrand = async (body: Record<string, unknown>) => {
     await updateCurrentWorkspace({
       url: CUSTOM_CONFIG_URL,
@@ -41,18 +33,14 @@ const useWebAppBrand = () => {
     })
     mutateCurrentWorkspace()
   }
-
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0]
-
     if (!file)
       return
-
     if (file.size > MAX_LOGO_FILE_SIZE) {
-      notify({ type: 'error', message: t('imageUploader.uploadFromComputerLimit', { ns: 'common', size: 5 }) })
+      toast.error(t('imageUploader.uploadFromComputerLimit', { ns: 'common', size: 5 }))
       return
     }
-
     imageUpload({
       file,
       onProgressCallback: setUploadProgress,
@@ -61,17 +49,12 @@ const useWebAppBrand = () => {
         setFileId(res.id)
       },
       onErrorCallback: (error) => {
-        const errorMessage = getImageUploadErrorMessage(
-          error,
-          t('imageUploader.uploadFromComputerUploadError', { ns: 'common' }),
-          t,
-        )
-        notify({ type: 'error', message: errorMessage })
+        const errorMessage = getImageUploadErrorMessage(error, t('imageUploader.uploadFromComputerUploadError', { ns: 'common' }), t)
+        toast.error(errorMessage)
         setUploadProgress(-1)
       },
     }, false, WEB_APP_LOGO_UPLOAD_URL)
   }
-
   const handleApply = async () => {
     await persistWorkspaceBrand({
       remove_webapp_brand: webappBrandRemoved,
@@ -80,25 +63,21 @@ const useWebAppBrand = () => {
     setFileId('')
     setImgKey(Date.now())
   }
-
   const handleRestore = async () => {
     await persistWorkspaceBrand({
       remove_webapp_brand: false,
       replace_webapp_logo: '',
     })
   }
-
   const handleSwitch = async (checked: boolean) => {
     await persistWorkspaceBrand({
       remove_webapp_brand: checked,
     })
   }
-
   const handleCancel = () => {
     setFileId('')
     setUploadProgress(0)
   }
-
   return {
     fileId,
     imgKey,
@@ -117,5 +96,4 @@ const useWebAppBrand = () => {
     handleSwitch,
   }
 }
-
 export default useWebAppBrand
diff --git a/web/app/components/datasets/common/retrieval-param-config/index.tsx b/web/app/components/datasets/common/retrieval-param-config/index.tsx
index e0fd245ef5..acb77acfa6 100644
--- a/web/app/components/datasets/common/retrieval-param-config/index.tsx
+++ b/web/app/components/datasets/common/retrieval-param-config/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import type { RetrievalConfig } from '@/types/app'
-
 import * as React from 'react'
+
 import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import WeightedScore from '@/app/components/app/configuration/dataset-config/params-config/weighted-score'
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 e47a876fe8..f553f491e5 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
@@ -3,17 +3,21 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import Uploader from '../uploader'
 
-const mockNotify = vi.fn()
-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 }),
-  },
-}))
+const { mockToast } = vi.hoisted(() => {
+  const mockToast = Object.assign(vi.fn(), {
+    success: vi.fn(),
+    error: vi.fn(),
+    warning: vi.fn(),
+    info: vi.fn(),
+    dismiss: vi.fn(),
+    update: vi.fn(),
+    promise: vi.fn(),
+  })
+  return { mockToast }
+})
 
-// Mock use-context-selector
-vi.mock('use-context-selector', () => ({
-  useContext: () => ({ notify: mockNotify }),
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
 }))
 
 const createMockFile = (name = 'test.pipeline', _size = 1024): File => {
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 ff7aa1cafb..19023ccfe3 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
@@ -2,13 +2,9 @@
 import { useDebounceFn } from 'ahooks'
 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/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
-import {
-  DSLImportMode,
-  DSLImportStatus,
-} from '@/models/app'
+import { DSLImportMode, DSLImportStatus } from '@/models/app'
 import { useRouter } from '@/next/navigation'
 import { useImportPipelineDSL, useImportPipelineDSLConfirm } from '@/service/use-pipeline'
 
@@ -16,29 +12,19 @@ export enum CreateFromDSLModalTab {
   FROM_FILE = 'from-file',
   FROM_URL = 'from-url',
 }
-
 export type UseDSLImportOptions = {
   activeTab?: CreateFromDSLModalTab
   dslUrl?: string
   onSuccess?: () => void
   onClose?: () => void
 }
-
 export type DSLVersions = {
   importedVersion: string
   systemVersion: string
 }
-
-export const useDSLImport = ({
-  activeTab = CreateFromDSLModalTab.FROM_FILE,
-  dslUrl = '',
-  onSuccess,
-  onClose,
-}: UseDSLImportOptions) => {
+export const useDSLImport = ({ activeTab = CreateFromDSLModalTab.FROM_FILE, dslUrl = '', onSuccess, onClose }: UseDSLImportOptions) => {
   const { push } = useRouter()
   const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
-
   const [currentFile, setDSLFile] = useState<File>()
   const [fileContent, setFileContent] = useState<string>()
   const [currentTab, setCurrentTab] = useState(activeTab)
@@ -47,13 +33,10 @@ export const useDSLImport = ({
   const [versions, setVersions] = useState<DSLVersions>()
   const [importId, setImportId] = useState<string>()
   const [isConfirming, setIsConfirming] = useState(false)
-
   const { handleCheckPluginDependencies } = usePluginDependencies()
   const isCreatingRef = useRef(false)
-
   const { mutateAsync: importDSL } = useImportPipelineDSL()
   const { mutateAsync: importDSLConfirm } = useImportPipelineDSLConfirm()
-
   const readFile = useCallback((file: File) => {
     const reader = new FileReader()
     reader.onload = (event) => {
@@ -62,7 +45,6 @@ export const useDSLImport = ({
     }
     reader.readAsText(file)
   }, [])
-
   const handleFile = useCallback((file?: File) => {
     setDSLFile(file)
     if (file)
@@ -70,7 +52,6 @@ export const useDSLImport = ({
     if (!file)
       setFileContent('')
   }, [readFile])
-
   const onCreate = useCallback(async () => {
     if (currentTab === CreateFromDSLModalTab.FROM_FILE && !currentFile)
       return
@@ -78,9 +59,7 @@ export const useDSLImport = ({
       return
     if (isCreatingRef.current)
       return
-
     isCreatingRef.current = true
-
     let response
     if (currentTab === CreateFromDSLModalTab.FROM_FILE) {
       response = await importDSL({
@@ -94,28 +73,21 @@ export const useDSLImport = ({
         yaml_url: dslUrlValue || '',
       })
     }
-
     if (!response) {
-      notify({ type: 'error', message: t('creation.errorTip', { ns: 'datasetPipeline' }) })
+      toast.error(t('creation.errorTip', { ns: 'datasetPipeline' }))
       isCreatingRef.current = false
       return
     }
-
     const { id, status, pipeline_id, dataset_id, imported_dsl_version, current_dsl_version } = response
-
     if (status === DSLImportStatus.COMPLETED || status === DSLImportStatus.COMPLETED_WITH_WARNINGS) {
       onSuccess?.()
       onClose?.()
-
-      notify({
+      toast(t(status === DSLImportStatus.COMPLETED ? 'creation.successTip' : 'creation.caution', { ns: 'datasetPipeline' }), {
         type: status === DSLImportStatus.COMPLETED ? 'success' : 'warning',
-        message: t(status === DSLImportStatus.COMPLETED ? 'creation.successTip' : 'creation.caution', { ns: 'datasetPipeline' }),
-        children: status === DSLImportStatus.COMPLETED_WITH_WARNINGS && t('newApp.appCreateDSLWarning', { ns: 'app' }),
+        description: status === DSLImportStatus.COMPLETED_WITH_WARNINGS && t('newApp.appCreateDSLWarning', { ns: 'app' }),
       })
-
       if (pipeline_id)
         await handleCheckPluginDependencies(pipeline_id, true)
-
       push(`/datasets/${dataset_id}/pipeline`)
       isCreatingRef.current = false
     }
@@ -132,7 +104,7 @@ export const useDSLImport = ({
       isCreatingRef.current = false
     }
     else {
-      notify({ type: 'error', message: t('creation.errorTip', { ns: 'datasetPipeline' }) })
+      toast.error(t('creation.errorTip', { ns: 'datasetPipeline' }))
       isCreatingRef.current = false
     }
   }, [
@@ -141,54 +113,39 @@ export const useDSLImport = ({
     dslUrlValue,
     fileContent,
     importDSL,
-    notify,
     t,
     onSuccess,
     onClose,
     handleCheckPluginDependencies,
     push,
   ])
-
   const { run: handleCreateApp } = useDebounceFn(onCreate, { wait: 300 })
-
   const onDSLConfirm = useCallback(async () => {
     if (!importId)
       return
-
     setIsConfirming(true)
     const response = await importDSLConfirm(importId)
     setIsConfirming(false)
-
     if (!response) {
-      notify({ type: 'error', message: t('creation.errorTip', { ns: 'datasetPipeline' }) })
+      toast.error(t('creation.errorTip', { ns: 'datasetPipeline' }))
       return
     }
-
     const { status, pipeline_id, dataset_id } = response
-
     if (status === DSLImportStatus.COMPLETED) {
       onSuccess?.()
       setShowConfirmModal(false)
-
-      notify({
-        type: 'success',
-        message: t('creation.successTip', { ns: 'datasetPipeline' }),
-      })
-
+      toast.success(t('creation.successTip', { ns: 'datasetPipeline' }))
       if (pipeline_id)
         await handleCheckPluginDependencies(pipeline_id, true)
-
       push(`/datasets/${dataset_id}/pipeline`)
     }
     else if (status === DSLImportStatus.FAILED) {
-      notify({ type: 'error', message: t('creation.errorTip', { ns: 'datasetPipeline' }) })
+      toast.error(t('creation.errorTip', { ns: 'datasetPipeline' }))
     }
-  }, [importId, importDSLConfirm, notify, t, onSuccess, handleCheckPluginDependencies, push])
-
+  }, [importId, importDSLConfirm, t, onSuccess, handleCheckPluginDependencies, push])
   const handleCancelConfirm = useCallback(() => {
     setShowConfirmModal(false)
   }, [])
-
   const buttonDisabled = useMemo(() => {
     if (currentTab === CreateFromDSLModalTab.FROM_FILE)
       return !currentFile
@@ -196,7 +153,6 @@ export const useDSLImport = ({
       return !dslUrlValue
     return false
   }, [currentTab, currentFile, dslUrlValue])
-
   return {
     // State
     currentFile,
@@ -206,7 +162,6 @@ export const useDSLImport = ({
     versions,
     buttonDisabled,
     isConfirming,
-
     // Actions
     setCurrentTab,
     setDslUrlValue,
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 faf168c73a..74a51d488a 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
@@ -1,16 +1,11 @@
 'use client'
 import type { FC } from 'react'
-import {
-  RiDeleteBinLine,
-  RiNodeTree,
-  RiUploadCloud2Line,
-} from '@remixicon/react'
+import { RiDeleteBinLine, RiNodeTree, RiUploadCloud2Line } from '@remixicon/react'
 import * as React from 'react'
 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/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { cn } from '@/utils/classnames'
 import { formatFileSize } from '@/utils/format'
 
@@ -19,19 +14,12 @@ export type Props = {
   updateFile: (file?: File) => void
   className?: string
 }
-
-const Uploader: FC<Props> = ({
-  file,
-  updateFile,
-  className,
-}) => {
+const Uploader: FC<Props> = ({ file, updateFile, className }) => {
   const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
   const [dragging, setDragging] = useState(false)
   const dropRef = useRef<HTMLDivElement>(null)
   const dragRef = useRef<HTMLDivElement>(null)
   const fileUploader = useRef<HTMLInputElement>(null)
-
   const handleDragEnter = (e: DragEvent) => {
     e.preventDefault()
     e.stopPropagation()
@@ -56,7 +44,7 @@ const Uploader: FC<Props> = ({
       return
     const files = Array.from(e.dataTransfer.files)
     if (files.length > 1) {
-      notify({ type: 'error', message: t('stepOne.uploader.validation.count', { ns: 'datasetCreation' }) })
+      toast.error(t('stepOne.uploader.validation.count', { ns: 'datasetCreation' }))
       return
     }
     updateFile(files[0])
@@ -79,7 +67,6 @@ const Uploader: FC<Props> = ({
     const currentFile = e.target.files?.[0]
     updateFile(currentFile)
   }
-
   useEffect(() => {
     const dropArea = dropRef.current
     dropArea?.addEventListener('dragenter', handleDragEnter)
@@ -93,33 +80,17 @@ const Uploader: FC<Props> = ({
       dropArea?.removeEventListener('drop', handleDrop)
     }
   }, [])
-
   return (
     <div className={cn('mt-6', className)}>
-      <input
-        ref={fileUploader}
-        style={{ display: 'none' }}
-        type="file"
-        id="fileUploader"
-        accept=".pipeline"
-        onChange={fileChangeHandle}
-      />
+      <input ref={fileUploader} style={{ display: 'none' }} type="file" id="fileUploader" accept=".pipeline" onChange={fileChangeHandle} />
       <div ref={dropRef}>
         {!file && (
-          <div
-            className={cn(
-              'flex h-12 items-center rounded-[10px] border border-dashed border-components-dropzone-border bg-components-dropzone-bg text-sm font-normal',
-              dragging && 'border-components-dropzone-border-accent bg-components-dropzone-bg-accent',
-            )}
-          >
+          <div className={cn('flex h-12 items-center rounded-[10px] border border-dashed border-components-dropzone-border bg-components-dropzone-bg text-sm font-normal', dragging && 'border-components-dropzone-border-accent bg-components-dropzone-bg-accent')}>
             <div className="flex w-full items-center justify-center space-x-2">
               <RiUploadCloud2Line className="h-6 w-6 text-text-tertiary" />
               <div className="text-text-tertiary">
                 {t('dslUploader.button', { ns: 'app' })}
-                <span
-                  className="cursor-pointer pl-1 text-text-accent"
-                  onClick={selectHandle}
-                >
+                <span className="cursor-pointer pl-1 text-text-accent" onClick={selectHandle}>
                   {t('dslUploader.browse', { ns: 'app' })}
                 </span>
               </div>
@@ -153,5 +124,4 @@ const Uploader: FC<Props> = ({
     </div>
   )
 }
-
 export default React.memo(Uploader)
diff --git a/web/app/components/datasets/create/empty-dataset-creation-modal/__tests__/index.spec.tsx b/web/app/components/datasets/create/empty-dataset-creation-modal/__tests__/index.spec.tsx
index 5107284776..3cb5020f20 100644
--- a/web/app/components/datasets/create/empty-dataset-creation-modal/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/create/empty-dataset-creation-modal/__tests__/index.spec.tsx
@@ -1,10 +1,27 @@
 import type { MockedFunction } from 'vitest'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import * as React from 'react'
 import { createEmptyDataset } from '@/service/datasets'
 import { useInvalidDatasetList } from '@/service/knowledge/use-dataset'
 import EmptyDatasetCreationModal from '../index'
 
+const { mockNotify, mockToast } = vi.hoisted(() => {
+  const mockNotify = vi.fn()
+  const mockToast = Object.assign(mockNotify, {
+    success: vi.fn((message, options) => mockNotify({ type: 'success', message, ...options })),
+    error: vi.fn((message, options) => mockNotify({ type: 'error', message, ...options })),
+    warning: vi.fn((message, options) => mockNotify({ type: 'warning', message, ...options })),
+    info: vi.fn((message, options) => mockNotify({ type: 'info', message, ...options })),
+    dismiss: vi.fn(),
+    update: vi.fn(),
+    promise: vi.fn(),
+  })
+  return { mockNotify, mockToast }
+})
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
+}))
+
 // Mock Next.js router
 const mockPush = vi.fn()
 vi.mock('@/next/navigation', () => ({
@@ -23,15 +40,6 @@ vi.mock('@/service/knowledge/use-dataset', () => ({
   useInvalidDatasetList: vi.fn(),
 }))
 
-// Mock ToastContext - need to mock both createContext and useContext from use-context-selector
-const mockNotify = vi.fn()
-vi.mock('use-context-selector', () => ({
-  createContext: vi.fn(() => ({
-    Provider: ({ children }: { children: React.ReactNode }) => children,
-  })),
-  useContext: vi.fn(() => ({ notify: mockNotify })),
-}))
-
 // Type cast mocked functions
 const mockCreateEmptyDataset = createEmptyDataset as MockedFunction<typeof createEmptyDataset>
 const mockInvalidDatasetList = vi.fn()
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 b417c15e8f..09f1701b43 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
@@ -2,14 +2,12 @@
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
 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/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { useRouter } from '@/next/navigation'
-
 import { createEmptyDataset } from '@/service/datasets'
 import { useInvalidDatasetList } from '@/service/knowledge/use-dataset'
 import { cn } from '@/utils/classnames'
@@ -19,24 +17,18 @@ type IProps = {
   show: boolean
   onHide: () => void
 }
-
-const EmptyDatasetCreationModal = ({
-  show = false,
-  onHide,
-}: IProps) => {
+const EmptyDatasetCreationModal = ({ show = false, onHide }: IProps) => {
   const [inputValue, setInputValue] = useState('')
   const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
   const router = useRouter()
   const invalidDatasetList = useInvalidDatasetList()
-
   const submit = async () => {
     if (!inputValue) {
-      notify({ type: 'error', message: t('stepOne.modal.nameNotEmpty', { ns: 'datasetCreation' }) })
+      toast.error(t('stepOne.modal.nameNotEmpty', { ns: 'datasetCreation' }))
       return
     }
     if (inputValue.length > 40) {
-      notify({ type: 'error', message: t('stepOne.modal.nameLengthInvalid', { ns: 'datasetCreation' }) })
+      toast.error(t('stepOne.modal.nameLengthInvalid', { ns: 'datasetCreation' }))
       return
     }
     try {
@@ -50,16 +42,11 @@ const EmptyDatasetCreationModal = ({
       router.push(`/datasets/${dataset.id}/documents`)
     }
     catch {
-      notify({ type: 'error', message: t('stepOne.modal.failed', { ns: 'datasetCreation' }) })
+      toast.error(t('stepOne.modal.failed', { ns: 'datasetCreation' }))
     }
   }
-
   return (
-    <Modal
-      isShow={show}
-      onClose={onHide}
-      className={cn(s.modal, '!max-w-[520px]', 'px-8')}
-    >
+    <Modal isShow={show} onClose={onHide} className={cn(s.modal, '!max-w-[520px]', 'px-8')}>
       <div className={s.modalHeader}>
         <div className={s.title}>{t('stepOne.modal.title', { ns: 'datasetCreation' })}</div>
         <span className={s.close} onClick={onHide} />
@@ -76,5 +63,4 @@ const EmptyDatasetCreationModal = ({
     </Modal>
   )
 }
-
 export default EmptyDatasetCreationModal
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 80331afe2a..07cd283dd4 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,6 @@ 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/context'
 
 import { PROGRESS_COMPLETE, PROGRESS_ERROR, PROGRESS_NOT_STARTED } from '../../constants'
 // Import after mocks
@@ -63,9 +62,9 @@ vi.mock('@/app/components/base/file-uploader/utils', () => ({
 
 const createWrapper = () => {
   return ({ children }: { children: ReactNode }) => (
-    <ToastContext.Provider value={{ notify: mockNotify, close: mockClose }}>
+    <>
       {children}
-    </ToastContext.Provider>
+    </>
   )
 }
 
@@ -385,9 +384,9 @@ describe('useFileUpload', () => {
     it('should set dragging true on dragenter', async () => {
       const { getByTestId } = await act(async () =>
         render(
-          <ToastContext.Provider value={{ notify: mockNotify, close: mockClose }}>
+          <>
             <TestDropzone options={defaultOptions} />
-          </ToastContext.Provider>,
+          </>,
         ),
       )
 
@@ -404,9 +403,9 @@ describe('useFileUpload', () => {
     it('should handle dragover event', async () => {
       const { getByTestId } = await act(async () =>
         render(
-          <ToastContext.Provider value={{ notify: mockNotify, close: mockClose }}>
+          <>
             <TestDropzone options={defaultOptions} />
-          </ToastContext.Provider>,
+          </>,
         ),
       )
 
@@ -423,9 +422,9 @@ describe('useFileUpload', () => {
     it('should set dragging false on dragleave from drag overlay', async () => {
       const { getByTestId, queryByTestId } = await act(async () =>
         render(
-          <ToastContext.Provider value={{ notify: mockNotify, close: mockClose }}>
+          <>
             <TestDropzone options={defaultOptions} />
-          </ToastContext.Provider>,
+          </>,
         ),
       )
 
@@ -454,9 +453,9 @@ describe('useFileUpload', () => {
 
       const { getByTestId } = await act(async () =>
         render(
-          <ToastContext.Provider value={{ notify: mockNotify, close: mockClose }}>
+          <>
             <TestDropzone options={{ ...defaultOptions, prepareFileList }} />
-          </ToastContext.Provider>,
+          </>,
         ),
       )
 
@@ -486,9 +485,9 @@ describe('useFileUpload', () => {
 
       const { getByTestId } = await act(async () =>
         render(
-          <ToastContext.Provider value={{ notify: mockNotify, close: mockClose }}>
+          <>
             <TestDropzone options={{ ...defaultOptions, prepareFileList }} />
-          </ToastContext.Provider>,
+          </>,
         ),
       )
 
@@ -509,9 +508,9 @@ describe('useFileUpload', () => {
 
       const { getByTestId } = await act(async () =>
         render(
-          <ToastContext.Provider value={{ notify: mockNotify, close: mockClose }}>
+          <>
             <TestDropzone options={{ ...defaultOptions, supportBatchUpload: false, prepareFileList }} />
-          </ToastContext.Provider>,
+          </>,
         ),
       )
 
@@ -549,9 +548,9 @@ describe('useFileUpload', () => {
 
       const { getByTestId } = await act(async () =>
         render(
-          <ToastContext.Provider value={{ notify: mockNotify, close: mockClose }}>
+          <>
             <TestDropzone options={{ ...defaultOptions, prepareFileList }} />
-          </ToastContext.Provider>,
+          </>,
         ),
       )
 
@@ -586,9 +585,9 @@ describe('useFileUpload', () => {
 
       const { getByTestId } = await act(async () =>
         render(
-          <ToastContext.Provider value={{ notify: mockNotify, close: mockClose }}>
+          <>
             <TestDropzone options={{ ...defaultOptions, prepareFileList }} />
-          </ToastContext.Provider>,
+          </>,
         ),
       )
 
@@ -639,9 +638,9 @@ describe('useFileUpload', () => {
 
       const { getByTestId } = await act(async () =>
         render(
-          <ToastContext.Provider value={{ notify: mockNotify, close: mockClose }}>
+          <>
             <TestDropzone options={{ ...defaultOptions, prepareFileList }} />
-          </ToastContext.Provider>,
+          </>,
         ),
       )
 
@@ -678,9 +677,9 @@ describe('useFileUpload', () => {
 
       const { getByTestId } = await act(async () =>
         render(
-          <ToastContext.Provider value={{ notify: mockNotify, close: mockClose }}>
+          <>
             <TestDropzone options={{ ...defaultOptions, prepareFileList }} />
-          </ToastContext.Provider>,
+          </>,
         ),
       )
 
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 ada60fac1a..a202d85b61 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
@@ -3,9 +3,8 @@ import type { RefObject } from 'react'
 import type { CustomFile as File, FileItem } from '@/models/datasets'
 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/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { IS_CE_EDITION } from '@/config'
 import { useLocale } from '@/context/i18n'
 import { LanguagesSupported } from '@/i18n-config/language'
@@ -70,7 +69,6 @@ export const useFileUpload = ({
   allowedExtensions,
 }: UseFileUploadOptions): UseFileUploadReturn => {
   const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
   const locale = useLocale()
 
   const [dragging, setDragging] = useState(false)
@@ -119,14 +117,14 @@ export const useFileUpload = ({
     const ext = `.${getFileExtension(file.name)}`
     const isValidType = acceptTypes.includes(ext.toLowerCase())
     if (!isValidType)
-      notify({ type: 'error', message: t('stepOne.uploader.validation.typeError', { ns: 'datasetCreation' }) })
+      toast.error(t('stepOne.uploader.validation.typeError', { ns: 'datasetCreation' }))
 
     const isValidSize = size <= fileUploadConfig.file_size_limit * 1024 * 1024
     if (!isValidSize)
-      notify({ type: 'error', message: t('stepOne.uploader.validation.size', { ns: 'datasetCreation', size: fileUploadConfig.file_size_limit }) })
+      toast.error(t('stepOne.uploader.validation.size', { ns: 'datasetCreation', size: fileUploadConfig.file_size_limit }))
 
     return isValidType && isValidSize
-  }, [fileUploadConfig, notify, t, acceptTypes])
+  }, [fileUploadConfig, t, acceptTypes])
 
   const fileUpload = useCallback(async (fileItem: FileItem): Promise<FileItem> => {
     const formData = new FormData()
@@ -156,12 +154,12 @@ export const useFileUpload = ({
       })
       .catch((e) => {
         const errorMessage = getFileUploadErrorMessage(e, t('stepOne.uploader.failed', { ns: 'datasetCreation' }), t)
-        notify({ type: 'error', message: errorMessage })
+        toast.error(errorMessage)
         onFileUpdate(fileItem, PROGRESS_ERROR, fileListRef.current)
         return Promise.resolve({ ...fileItem })
       })
       .finally()
-  }, [notify, onFileUpdate, t])
+  }, [onFileUpdate, t])
 
   const uploadBatchFiles = useCallback((bFiles: FileItem[]) => {
     bFiles.forEach(bf => (bf.progress = 0))
@@ -191,7 +189,7 @@ export const useFileUpload = ({
       return false
 
     if (files.length + fileList.length > filesCountLimit && !IS_CE_EDITION) {
-      notify({ type: 'error', message: t('stepOne.uploader.validation.filesNumber', { ns: 'datasetCreation', filesNumber: filesCountLimit }) })
+      toast.error(t('stepOne.uploader.validation.filesNumber', { ns: 'datasetCreation', filesNumber: filesCountLimit }))
       return false
     }
 
@@ -204,7 +202,7 @@ export const useFileUpload = ({
     prepareFileList(newFiles)
     fileListRef.current = newFiles
     uploadMultipleFiles(preparedFiles)
-  }, [prepareFileList, uploadMultipleFiles, notify, t, fileList, fileUploadConfig])
+  }, [prepareFileList, uploadMultipleFiles, t, fileList, fileUploadConfig])
 
   const traverseFileEntry = useCallback(
     (entry: FileSystemEntry, prefix = ''): Promise<FileWithPath[]> => {
diff --git a/web/app/components/datasets/create/step-two/hooks/__tests__/use-document-creation.spec.ts b/web/app/components/datasets/create/step-two/hooks/__tests__/use-document-creation.spec.ts
index 74c37c876b..3b466d917e 100644
--- a/web/app/components/datasets/create/step-two/hooks/__tests__/use-document-creation.spec.ts
+++ b/web/app/components/datasets/create/step-two/hooks/__tests__/use-document-creation.spec.ts
@@ -14,7 +14,7 @@ const mocks = vi.hoisted(() => ({
   invalidDatasetList: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/ui/toast', () => ({
   default: { notify: mocks.toastNotify },
 }))
 
diff --git a/web/app/components/datasets/create/step-two/hooks/use-document-creation.ts b/web/app/components/datasets/create/step-two/hooks/use-document-creation.ts
index eaa51e393a..eb1994276c 100644
--- a/web/app/components/datasets/create/step-two/hooks/use-document-creation.ts
+++ b/web/app/components/datasets/create/step-two/hooks/use-document-creation.ts
@@ -1,26 +1,14 @@
 import type { DefaultModel, Model } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { NotionPage } from '@/models/common'
-import type {
-  ChunkingMode,
-  CrawlOptions,
-  CrawlResultItem,
-  CreateDocumentReq,
-  createDocumentResponse,
-  CustomFile,
-  FullDocumentDetail,
-  ProcessRule,
-  SummaryIndexSetting as SummaryIndexSettingType,
-} from '@/models/datasets'
+import type { ChunkingMode, CrawlOptions, CrawlResultItem, CreateDocumentReq, createDocumentResponse, CustomFile, FullDocumentDetail, ProcessRule, SummaryIndexSetting as SummaryIndexSettingType } from '@/models/datasets'
 import type { RetrievalConfig, RETRIEVE_METHOD } from '@/types/app'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { isReRankModelSelected } from '@/app/components/datasets/common/check-rerank-model'
 import { DataSourceProvider } from '@/models/common'
-import {
-  DataSourceType,
-} from '@/models/datasets'
+import { DataSourceType } from '@/models/datasets'
 import { getNotionInfo, getWebsiteInfo, useCreateDocument, useCreateFirstDocument } from '@/service/knowledge/use-create-dataset'
 import { useInvalidDatasetList } from '@/service/knowledge/use-dataset'
 import { IndexingType } from './use-indexing-config'
@@ -46,7 +34,6 @@ export type UseDocumentCreationOptions = {
   onSave?: () => void
   mutateDatasetRes?: () => void
 }
-
 export type ValidationParams = {
   segmentationType: string
   maxChunkLength: number
@@ -57,93 +44,42 @@ export type ValidationParams = {
   rerankModelList: Model[]
   retrievalConfig: RetrievalConfig
 }
-
 export const useDocumentCreation = (options: UseDocumentCreationOptions) => {
   const { t } = useTranslation()
-  const {
-    datasetId,
-    isSetting,
-    documentDetail,
-    dataSourceType,
-    files,
-    notionPages,
-    notionCredentialId,
-    websitePages,
-    crawlOptions,
-    websiteCrawlProvider = DataSourceProvider.jinaReader,
-    websiteCrawlJobId = '',
-    onStepChange,
-    updateIndexingTypeCache,
-    updateResultCache,
-    updateRetrievalMethodCache,
-    onSave,
-    mutateDatasetRes,
-  } = options
-
+  const { datasetId, isSetting, documentDetail, dataSourceType, files, notionPages, notionCredentialId, websitePages, crawlOptions, websiteCrawlProvider = DataSourceProvider.jinaReader, websiteCrawlJobId = '', onStepChange, updateIndexingTypeCache, updateResultCache, updateRetrievalMethodCache, onSave, mutateDatasetRes } = options
   const createFirstDocumentMutation = useCreateFirstDocument()
   const createDocumentMutation = useCreateDocument(datasetId!)
   const invalidDatasetList = useInvalidDatasetList()
-
   const isCreating = createFirstDocumentMutation.isPending || createDocumentMutation.isPending
-
   // Validate creation params
   const validateParams = useCallback((params: ValidationParams): boolean => {
-    const {
-      segmentationType,
-      maxChunkLength,
-      limitMaxChunkLength,
-      overlap,
-      indexType,
-      embeddingModel,
-      rerankModelList,
-      retrievalConfig,
-    } = params
-
+    const { segmentationType, maxChunkLength, limitMaxChunkLength, overlap, indexType, embeddingModel, rerankModelList, retrievalConfig } = params
     if (segmentationType === 'general' && overlap > maxChunkLength) {
-      Toast.notify({ type: 'error', message: t('stepTwo.overlapCheck', { ns: 'datasetCreation' }) })
+      toast.error(t('stepTwo.overlapCheck', { ns: 'datasetCreation' }))
       return false
     }
-
     if (segmentationType === 'general' && maxChunkLength > limitMaxChunkLength) {
-      Toast.notify({
-        type: 'error',
-        message: t('stepTwo.maxLengthCheck', { ns: 'datasetCreation', limit: limitMaxChunkLength }),
-      })
+      toast.error(t('stepTwo.maxLengthCheck', { ns: 'datasetCreation', limit: limitMaxChunkLength }))
       return false
     }
-
     if (!isSetting) {
       if (indexType === IndexingType.QUALIFIED && (!embeddingModel.model || !embeddingModel.provider)) {
-        Toast.notify({
-          type: 'error',
-          message: t('datasetConfig.embeddingModelRequired', { ns: 'appDebug' }),
-        })
+        toast.error(t('datasetConfig.embeddingModelRequired', { ns: 'appDebug' }))
         return false
       }
-
       if (!isReRankModelSelected({
         rerankModelList,
         retrievalConfig,
         indexMethod: indexType,
       })) {
-        Toast.notify({ type: 'error', message: t('datasetConfig.rerankModelRequired', { ns: 'appDebug' }) })
+        toast.error(t('datasetConfig.rerankModelRequired', { ns: 'appDebug' }))
         return false
       }
     }
-
     return true
   }, [t, isSetting])
-
   // Build creation params
-  const buildCreationParams = useCallback((
-    currentDocForm: ChunkingMode,
-    docLanguage: string,
-    processRule: ProcessRule,
-    retrievalConfig: RetrievalConfig,
-    embeddingModel: DefaultModel,
-    indexingTechnique: string,
-    summaryIndexSetting?: SummaryIndexSettingType,
-  ): CreateDocumentReq | null => {
+  const buildCreationParams = useCallback((currentDocForm: ChunkingMode, docLanguage: string, processRule: ProcessRule, retrievalConfig: RetrievalConfig, embeddingModel: DefaultModel, indexingTechnique: string, summaryIndexSetting?: SummaryIndexSettingType): CreateDocumentReq | null => {
     if (isSetting) {
       return {
         original_document_id: documentDetail?.id,
@@ -157,7 +93,6 @@ export const useDocumentCreation = (options: UseDocumentCreationOptions) => {
         indexing_technique: indexingTechnique,
       } as CreateDocumentReq
     }
-
     const params: CreateDocumentReq = {
       data_source: {
         type: dataSourceType,
@@ -174,7 +109,6 @@ export const useDocumentCreation = (options: UseDocumentCreationOptions) => {
       embedding_model: embeddingModel.model,
       embedding_model_provider: embeddingModel.provider,
     } as CreateDocumentReq
-
     // Add data source specific info
     if (dataSourceType === DataSourceType.FILE) {
       params.data_source!.info_list.file_info_list = {
@@ -183,7 +117,6 @@ export const useDocumentCreation = (options: UseDocumentCreationOptions) => {
     }
     if (dataSourceType === DataSourceType.NOTION)
       params.data_source!.info_list.notion_info_list = getNotionInfo(notionPages, notionCredentialId)
-
     if (dataSourceType === DataSourceType.WEB) {
       params.data_source!.info_list.website_info_list = getWebsiteInfo({
         websiteCrawlProvider,
@@ -192,7 +125,6 @@ export const useDocumentCreation = (options: UseDocumentCreationOptions) => {
         crawlOptions,
       })
     }
-
     return params
   }, [
     isSetting,
@@ -206,13 +138,8 @@ export const useDocumentCreation = (options: UseDocumentCreationOptions) => {
     websiteCrawlJobId,
     crawlOptions,
   ])
-
   // Execute creation
-  const executeCreation = useCallback(async (
-    params: CreateDocumentReq,
-    indexType: IndexingType,
-    retrievalConfig: RetrievalConfig,
-  ) => {
+  const executeCreation = useCallback(async (params: CreateDocumentReq, indexType: IndexingType, retrievalConfig: RetrievalConfig) => {
     if (!datasetId) {
       await createFirstDocumentMutation.mutateAsync(params, {
         onSuccess(data) {
@@ -231,17 +158,13 @@ export const useDocumentCreation = (options: UseDocumentCreationOptions) => {
         },
       })
     }
-
     mutateDatasetRes?.()
     invalidDatasetList()
-
     trackEvent('create_datasets', {
       data_source_type: dataSourceType,
       indexing_technique: indexType,
     })
-
     onStepChange?.(+1)
-
     if (isSetting)
       onSave?.()
   }, [
@@ -258,19 +181,14 @@ export const useDocumentCreation = (options: UseDocumentCreationOptions) => {
     isSetting,
     onSave,
   ])
-
   // Validate preview params
   const validatePreviewParams = useCallback((maxChunkLength: number): boolean => {
     if (maxChunkLength > MAXIMUM_CHUNK_TOKEN_LENGTH) {
-      Toast.notify({
-        type: 'error',
-        message: t('stepTwo.maxLengthCheck', { ns: 'datasetCreation', limit: MAXIMUM_CHUNK_TOKEN_LENGTH }),
-      })
+      toast.error(t('stepTwo.maxLengthCheck', { ns: 'datasetCreation', limit: MAXIMUM_CHUNK_TOKEN_LENGTH }))
       return false
     }
     return true
   }, [t])
-
   return {
     isCreating,
     validateParams,
@@ -279,5 +197,4 @@ export const useDocumentCreation = (options: UseDocumentCreationOptions) => {
     validatePreviewParams,
   }
 }
-
 export type DocumentCreation = ReturnType<typeof useDocumentCreation>
diff --git a/web/app/components/datasets/create/step-two/index.tsx b/web/app/components/datasets/create/step-two/index.tsx
index 8e03b00887..3c5e42a3d0 100644
--- a/web/app/components/datasets/create/step-two/index.tsx
+++ b/web/app/components/datasets/create/step-two/index.tsx
@@ -1,11 +1,10 @@
 'use client'
-
 import type { FC } from 'react'
 import type { StepTwoProps } from './types'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { useLocale } from '@/context/i18n'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
@@ -18,34 +17,12 @@ import { GeneralChunkingOptions, IndexingModeSection, ParentChildOptions, Previe
 import { IndexingType, MAXIMUM_CHUNK_TOKEN_LENGTH, useDocumentCreation, useIndexingConfig, useIndexingEstimate, usePreviewState, useSegmentationState } from './hooks'
 
 export { IndexingType }
-
-const StepTwo: FC<StepTwoProps> = ({
-  isSetting,
-  documentDetail,
-  isAPIKeySet,
-  datasetId,
-  indexingType: propsIndexingType,
-  dataSourceType: inCreatePageDataSourceType,
-  files,
-  notionPages = [],
-  notionCredentialId,
-  websitePages = [],
-  crawlOptions,
-  websiteCrawlProvider = DataSourceProvider.jinaReader,
-  websiteCrawlJobId = '',
-  onStepChange,
-  updateIndexingTypeCache,
-  updateResultCache,
-  onSave,
-  onCancel,
-  updateRetrievalMethodCache,
-}) => {
+const StepTwo: FC<StepTwoProps> = ({ isSetting, documentDetail, isAPIKeySet, datasetId, indexingType: propsIndexingType, dataSourceType: inCreatePageDataSourceType, files, notionPages = [], notionCredentialId, websitePages = [], crawlOptions, websiteCrawlProvider = DataSourceProvider.jinaReader, websiteCrawlJobId = '', onStepChange, updateIndexingTypeCache, updateResultCache, onSave, onCancel, updateRetrievalMethodCache }) => {
   const { t } = useTranslation()
   const locale = useLocale()
   const isMobile = useBreakpoints() === MediaType.mobile
   const currentDataset = useDatasetDetailContextWithSelector(s => s.dataset)
   const mutateDatasetRes = useDatasetDetailContextWithSelector(s => s.mutateDatasetRes)
-
   // Computed flags
   const isInUpload = Boolean(currentDataset)
   const isUploadInEmptyDataset = isInUpload && !currentDataset?.doc_form
@@ -55,13 +32,11 @@ const StepTwo: FC<StepTwoProps> = ({
   const dataSourceType = isInCreatePage ? inCreatePageDataSourceType : (currentDataset?.data_source_type ?? inCreatePageDataSourceType)
   const hasSetIndexType = !!propsIndexingType
   const isModelAndRetrievalConfigDisabled = !!datasetId && !!currentDataset?.data_source_type
-
   // Document form state
   const [docForm, setDocForm] = useState<ChunkingMode>((datasetId && documentDetail) ? documentDetail.doc_form as ChunkingMode : ChunkingMode.text)
   const [docLanguage, setDocLanguage] = useState<string>(() => (datasetId && documentDetail) ? documentDetail.doc_language : (locale !== LanguagesSupported[1] ? 'English' : 'Chinese Simplified'))
   const [isQAConfirmDialogOpen, setIsQAConfirmDialogOpen] = useState(false)
   const currentDocForm = currentDataset?.doc_form || docForm
-
   // Custom hooks
   const segmentation = useSegmentationState({
     initialSegmentationType: currentDataset?.doc_form === ChunkingMode.parentChild ? ProcessMode.parentChild : ProcessMode.general,
@@ -111,7 +86,6 @@ const StepTwo: FC<StepTwoProps> = ({
     indexingTechnique: indexing.getIndexingTechnique() as IndexingType,
     processRule: segmentation.getProcessRule(currentDocForm),
   })
-
   // Fetch default process rule
   const fetchDefaultProcessRuleMutation = useFetchDefaultProcessRule({
     onSuccess(data) {
@@ -123,7 +97,6 @@ const StepTwo: FC<StepTwoProps> = ({
       segmentation.setLimitMaxChunkLength(data.limits.indexing_max_segmentation_tokens_length)
     },
   })
-
   // Event handlers
   const handleDocFormChange = useCallback((value: ChunkingMode) => {
     if (value === ChunkingMode.qa && indexing.indexType === IndexingType.ECONOMICAL) {
@@ -136,15 +109,13 @@ const StepTwo: FC<StepTwoProps> = ({
     segmentation.setSegmentationType(value === ChunkingMode.parentChild ? ProcessMode.parentChild : ProcessMode.general)
     estimateHook.reset()
   }, [indexing, segmentation, estimateHook])
-
   const updatePreview = useCallback(() => {
     if (segmentation.segmentationType === ProcessMode.general && segmentation.maxChunkLength > MAXIMUM_CHUNK_TOKEN_LENGTH) {
-      Toast.notify({ type: 'error', message: t('stepTwo.maxLengthCheck', { ns: 'datasetCreation', limit: MAXIMUM_CHUNK_TOKEN_LENGTH }) })
+      toast.error(t('stepTwo.maxLengthCheck', { ns: 'datasetCreation', limit: MAXIMUM_CHUNK_TOKEN_LENGTH }))
       return
     }
     estimateHook.fetchEstimate()
   }, [segmentation, t, estimateHook])
-
   const handleCreate = useCallback(async () => {
     const isValid = creation.validateParams({
       segmentationType: segmentation.segmentationType,
@@ -163,19 +134,19 @@ const StepTwo: FC<StepTwoProps> = ({
       return
     await creation.executeCreation(params, indexing.indexType, indexing.retrievalConfig)
   }, [creation, segmentation, indexing, currentDocForm, docLanguage])
-
-  const handlePickerChange = useCallback((selected: { id: string, name: string }) => {
+  const handlePickerChange = useCallback((selected: {
+    id: string
+    name: string
+  }) => {
     estimateHook.reset()
     preview.handlePreviewChange(selected)
     estimateHook.fetchEstimate()
   }, [estimateHook, preview])
-
   const handleQAConfirm = useCallback(() => {
     setIsQAConfirmDialogOpen(false)
     indexing.setIndexType(IndexingType.QUALIFIED)
     setDocForm(ChunkingMode.qa)
   }, [indexing])
-
   // Initialize rules
   useEffect(() => {
     if (!isSetting) {
@@ -187,83 +158,19 @@ const StepTwo: FC<StepTwoProps> = ({
       segmentation.applyConfigFromRules(rules, isHierarchical)
       segmentation.setSegmentationType(documentDetail.dataset_process_rule.mode)
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
-
   // Show options conditions
   const showGeneralOption = (isInUpload && [ChunkingMode.text, ChunkingMode.qa].includes(currentDataset!.doc_form)) || isUploadInEmptyDataset || isInInit
   const showParentChildOption = (isInUpload && currentDataset!.doc_form === ChunkingMode.parentChild) || isUploadInEmptyDataset || isInInit
-
   return (
     <div className="flex h-full w-full">
       <div className={cn('relative h-full w-1/2 overflow-y-auto py-6', isMobile ? 'px-4' : 'px-12')}>
         <div className="mb-1 text-text-secondary system-md-semibold">{t('stepTwo.segmentation', { ns: 'datasetCreation' })}</div>
-        {showGeneralOption && (
-          <GeneralChunkingOptions
-            segmentIdentifier={segmentation.segmentIdentifier}
-            maxChunkLength={segmentation.maxChunkLength}
-            overlap={segmentation.overlap}
-            rules={segmentation.rules}
-            currentDocForm={currentDocForm}
-            docLanguage={docLanguage}
-            isActive={[ChunkingMode.text, ChunkingMode.qa].includes(currentDocForm)}
-            isInUpload={isInUpload}
-            isNotUploadInEmptyDataset={isNotUploadInEmptyDataset}
-            hasCurrentDatasetDocForm={!!currentDataset?.doc_form}
-            onSegmentIdentifierChange={value => segmentation.setSegmentIdentifier(value, true)}
-            onMaxChunkLengthChange={segmentation.setMaxChunkLength}
-            onOverlapChange={segmentation.setOverlap}
-            onRuleToggle={segmentation.toggleRule}
-            onDocFormChange={handleDocFormChange}
-            onDocLanguageChange={setDocLanguage}
-            onPreview={updatePreview}
-            onReset={segmentation.resetToDefaults}
-            locale={locale}
-            showSummaryIndexSetting={showSummaryIndexSetting}
-            summaryIndexSetting={segmentation.summaryIndexSetting}
-            onSummaryIndexSettingChange={segmentation.handleSummaryIndexSettingChange}
-          />
-        )}
-        {showParentChildOption && (
-          <ParentChildOptions
-            parentChildConfig={segmentation.parentChildConfig}
-            rules={segmentation.rules}
-            currentDocForm={currentDocForm}
-            isActive={currentDocForm === ChunkingMode.parentChild}
-            isInUpload={isInUpload}
-            isNotUploadInEmptyDataset={isNotUploadInEmptyDataset}
-            onDocFormChange={handleDocFormChange}
-            onChunkForContextChange={segmentation.setChunkForContext}
-            onParentDelimiterChange={v => segmentation.updateParentConfig('delimiter', v)}
-            onParentMaxLengthChange={v => segmentation.updateParentConfig('maxLength', v)}
-            onChildDelimiterChange={v => segmentation.updateChildConfig('delimiter', v)}
-            onChildMaxLengthChange={v => segmentation.updateChildConfig('maxLength', v)}
-            onRuleToggle={segmentation.toggleRule}
-            onPreview={updatePreview}
-            onReset={segmentation.resetToDefaults}
-            showSummaryIndexSetting={showSummaryIndexSetting}
-            summaryIndexSetting={segmentation.summaryIndexSetting}
-            onSummaryIndexSettingChange={segmentation.handleSummaryIndexSettingChange}
-          />
-        )}
+        {showGeneralOption && (<GeneralChunkingOptions segmentIdentifier={segmentation.segmentIdentifier} maxChunkLength={segmentation.maxChunkLength} overlap={segmentation.overlap} rules={segmentation.rules} currentDocForm={currentDocForm} docLanguage={docLanguage} isActive={[ChunkingMode.text, ChunkingMode.qa].includes(currentDocForm)} isInUpload={isInUpload} isNotUploadInEmptyDataset={isNotUploadInEmptyDataset} hasCurrentDatasetDocForm={!!currentDataset?.doc_form} onSegmentIdentifierChange={value => segmentation.setSegmentIdentifier(value, true)} onMaxChunkLengthChange={segmentation.setMaxChunkLength} onOverlapChange={segmentation.setOverlap} onRuleToggle={segmentation.toggleRule} onDocFormChange={handleDocFormChange} onDocLanguageChange={setDocLanguage} onPreview={updatePreview} onReset={segmentation.resetToDefaults} locale={locale} showSummaryIndexSetting={showSummaryIndexSetting} summaryIndexSetting={segmentation.summaryIndexSetting} onSummaryIndexSettingChange={segmentation.handleSummaryIndexSettingChange} />)}
+        {showParentChildOption && (<ParentChildOptions parentChildConfig={segmentation.parentChildConfig} rules={segmentation.rules} currentDocForm={currentDocForm} isActive={currentDocForm === ChunkingMode.parentChild} isInUpload={isInUpload} isNotUploadInEmptyDataset={isNotUploadInEmptyDataset} onDocFormChange={handleDocFormChange} onChunkForContextChange={segmentation.setChunkForContext} onParentDelimiterChange={v => segmentation.updateParentConfig('delimiter', v)} onParentMaxLengthChange={v => segmentation.updateParentConfig('maxLength', v)} onChildDelimiterChange={v => segmentation.updateChildConfig('delimiter', v)} onChildMaxLengthChange={v => segmentation.updateChildConfig('maxLength', v)} onRuleToggle={segmentation.toggleRule} onPreview={updatePreview} onReset={segmentation.resetToDefaults} showSummaryIndexSetting={showSummaryIndexSetting} summaryIndexSetting={segmentation.summaryIndexSetting} onSummaryIndexSettingChange={segmentation.handleSummaryIndexSettingChange} />)}
         <Divider className="my-5" />
-        <IndexingModeSection
-          indexType={indexing.indexType}
-          hasSetIndexType={hasSetIndexType}
-          docForm={docForm}
-          embeddingModel={indexing.embeddingModel}
-          embeddingModelList={indexing.embeddingModelList}
-          retrievalConfig={indexing.retrievalConfig}
-          showMultiModalTip={indexing.showMultiModalTip}
-          isModelAndRetrievalConfigDisabled={isModelAndRetrievalConfigDisabled}
-          datasetId={datasetId}
-          isQAConfirmDialogOpen={isQAConfirmDialogOpen}
-          onIndexTypeChange={indexing.setIndexType}
-          onEmbeddingModelChange={indexing.setEmbeddingModel}
-          onRetrievalConfigChange={indexing.setRetrievalConfig}
-          onQAConfirmDialogClose={() => setIsQAConfirmDialogOpen(false)}
-          onQAConfirmDialogConfirm={handleQAConfirm}
-        />
+        <IndexingModeSection indexType={indexing.indexType} hasSetIndexType={hasSetIndexType} docForm={docForm} embeddingModel={indexing.embeddingModel} embeddingModelList={indexing.embeddingModelList} retrievalConfig={indexing.retrievalConfig} showMultiModalTip={indexing.showMultiModalTip} isModelAndRetrievalConfigDisabled={isModelAndRetrievalConfigDisabled} datasetId={datasetId} isQAConfirmDialogOpen={isQAConfirmDialogOpen} onIndexTypeChange={indexing.setIndexType} onEmbeddingModelChange={indexing.setEmbeddingModel} onRetrievalConfigChange={indexing.setRetrievalConfig} onQAConfirmDialogClose={() => setIsQAConfirmDialogOpen(false)} onQAConfirmDialogConfirm={handleQAConfirm} />
         <StepTwoFooter isSetting={isSetting} isCreating={creation.isCreating} onPrevious={() => onStepChange?.(-1)} onCreate={handleCreate} onCancel={onCancel} />
       </div>
       <PreviewPanel
@@ -273,7 +180,11 @@ const StepTwo: FC<StepTwoProps> = ({
         estimate={estimateHook.estimate}
         parentChildConfig={segmentation.parentChildConfig}
         isSetting={isSetting}
-        pickerFiles={preview.getPreviewPickerItems() as Array<{ id: string, name: string, extension: string }>}
+        pickerFiles={preview.getPreviewPickerItems() as Array<{
+          id: string
+          name: string
+          extension: string
+        }>}
         pickerValue={preview.getPreviewPickerValue()}
         isIdle={estimateHook.isIdle}
         isPending={estimateHook.isPending}
@@ -282,5 +193,4 @@ const StepTwo: FC<StepTwoProps> = ({
     </div>
   )
 }
-
 export default StepTwo
diff --git a/web/app/components/datasets/create/website/firecrawl/index.tsx b/web/app/components/datasets/create/website/firecrawl/index.tsx
index 09fdbb00c2..5ad267363a 100644
--- a/web/app/components/datasets/create/website/firecrawl/index.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/index.tsx
@@ -4,7 +4,7 @@ import type { CrawlOptions, CrawlResultItem } from '@/models/datasets'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { useModalContextSelector } from '@/context/modal-context'
 import { checkFirecrawlTaskStatus, createFirecrawlTask } from '@/service/datasets'
@@ -19,7 +19,6 @@ import Options from './options'
 
 const ERROR_I18N_PREFIX = 'errorMsg'
 const I18N_PREFIX = 'stepOne.website'
-
 type Props = {
   onPreview: (payload: CrawlResultItem) => void
   checkedCrawlResult: CrawlResultItem[]
@@ -28,20 +27,17 @@ type Props = {
   crawlOptions: CrawlOptions
   onCrawlOptionsChange: (payload: CrawlOptions) => void
 }
-
 enum Step {
   init = 'init',
   running = 'running',
   finished = 'finished',
 }
-
 type CrawlState = {
   current: number
   total: number
   data: CrawlResultItem[]
   time_consuming: number | string
 }
-
 type CrawlFinishedResult = {
   isCancelled?: boolean
   isError: boolean
@@ -50,15 +46,7 @@ type CrawlFinishedResult = {
     data: CrawlResultItem[]
   }
 }
-
-const FireCrawl: FC<Props> = ({
-  onPreview,
-  checkedCrawlResult,
-  onCheckedCrawlResultChange,
-  onJobIdChange,
-  crawlOptions,
-  onCrawlOptionsChange,
-}) => {
+const FireCrawl: FC<Props> = ({ onPreview, checkedCrawlResult, onCheckedCrawlResultChange, onJobIdChange, crawlOptions, onCrawlOptionsChange }) => {
   const { t } = useTranslation()
   const [step, setStep] = useState<Step>(Step.init)
   const [controlFoldOptions, setControlFoldOptions] = useState<number>(0)
@@ -78,7 +66,6 @@ const FireCrawl: FC<Props> = ({
       payload: ACCOUNT_SETTING_TAB.DATA_SOURCE,
     })
   }, [setShowAccountSettingModal])
-
   const checkValid = useCallback((url: string) => {
     let errorMsg = ''
     if (!url) {
@@ -87,30 +74,25 @@ const FireCrawl: FC<Props> = ({
         field: 'url',
       })
     }
-
     if (!errorMsg && !((url.startsWith('http://') || url.startsWith('https://'))))
       errorMsg = t(`${ERROR_I18N_PREFIX}.urlError`, { ns: 'common' })
-
     if (!errorMsg && (crawlOptions.limit === null || crawlOptions.limit === undefined || crawlOptions.limit === '')) {
       errorMsg = t(`${ERROR_I18N_PREFIX}.fieldRequired`, {
         ns: 'common',
         field: t(`${I18N_PREFIX}.limit`, { ns: 'datasetCreation' }),
       })
     }
-
     return {
       isValid: !errorMsg,
       errorMsg,
     }
   }, [crawlOptions, t])
-
   const isInit = step === Step.init
   const isCrawlFinished = step === Step.finished
   const isRunning = step === Step.running
   const [crawlResult, setCrawlResult] = useState<CrawlState | undefined>(undefined)
   const [crawlErrorMessage, setCrawlErrorMessage] = useState('')
   const showError = isCrawlFinished && crawlErrorMessage
-
   const waitForCrawlFinished = useCallback(async (jobId: string): Promise<CrawlFinishedResult> => {
     const cancelledResult: CrawlFinishedResult = {
       isCancelled: true,
@@ -119,7 +101,6 @@ const FireCrawl: FC<Props> = ({
         data: [],
       },
     }
-
     try {
       const res = await checkFirecrawlTaskStatus(jobId) as any
       if (res.status === 'completed') {
@@ -171,14 +152,10 @@ const FireCrawl: FC<Props> = ({
       } satisfies CrawlFinishedResult
     }
   }, [crawlOptions.limit, onCheckedCrawlResultChange])
-
   const handleRun = useCallback(async (url: string) => {
     const { isValid, errorMsg } = checkValid(url)
     if (!isValid) {
-      Toast.notify({
-        message: errorMsg!,
-        type: 'error',
-      })
+      toast.error(errorMsg!)
       return
     }
     setStep(Step.running)
@@ -188,7 +165,6 @@ const FireCrawl: FC<Props> = ({
       }
       if (crawlOptions.max_depth === '')
         delete passToServerCrawlOptions.max_depth
-
       const res = await createFirecrawlTask({
         url,
         options: passToServerCrawlOptions,
@@ -220,49 +196,22 @@ const FireCrawl: FC<Props> = ({
         setStep(Step.finished)
     }
   }, [checkValid, crawlOptions, onJobIdChange, t, waitForCrawlFinished, onCheckedCrawlResultChange])
-
   return (
     <div>
-      <Header
-        onClickConfiguration={handleSetting}
-        title={t(`${I18N_PREFIX}.firecrawlTitle`, { ns: 'datasetCreation' })}
-        buttonText={t(`${I18N_PREFIX}.configureFirecrawl`, { ns: 'datasetCreation' })}
-        docTitle={t(`${I18N_PREFIX}.firecrawlDoc`, { ns: 'datasetCreation' })}
-        docLink="https://docs.firecrawl.dev/introduction"
-      />
+      <Header onClickConfiguration={handleSetting} title={t(`${I18N_PREFIX}.firecrawlTitle`, { ns: 'datasetCreation' })} buttonText={t(`${I18N_PREFIX}.configureFirecrawl`, { ns: 'datasetCreation' })} docTitle={t(`${I18N_PREFIX}.firecrawlDoc`, { ns: 'datasetCreation' })} docLink="https://docs.firecrawl.dev/introduction" />
       <div className="mt-2 rounded-xl border border-components-panel-border bg-background-default-subtle p-4 pb-0">
         <UrlInput onRun={handleRun} isRunning={isRunning} />
-        <OptionsWrap
-          className="mt-4"
-          controlFoldOptions={controlFoldOptions}
-        >
+        <OptionsWrap className="mt-4" controlFoldOptions={controlFoldOptions}>
           <Options className="mt-2" payload={crawlOptions} onChange={onCrawlOptionsChange} />
         </OptionsWrap>
 
         {!isInit && (
           <div className="relative left-[-16px] mt-3 w-[calc(100%_+_32px)] rounded-b-xl">
             {isRunning
-              && (
-                <Crawling
-                  className="mt-2"
-                  crawledNum={crawlResult?.current || 0}
-                  totalNum={crawlResult?.total || Number.parseFloat(crawlOptions.limit as string) || 0}
-                />
-              )}
-            {showError && (
-              <ErrorMessage className="rounded-b-xl" title={t(`${I18N_PREFIX}.exceptionErrorTitle`, { ns: 'datasetCreation' })} errorMsg={crawlErrorMessage} />
-            )}
+              && (<Crawling className="mt-2" crawledNum={crawlResult?.current || 0} totalNum={crawlResult?.total || Number.parseFloat(crawlOptions.limit as string) || 0} />)}
+            {showError && (<ErrorMessage className="rounded-b-xl" title={t(`${I18N_PREFIX}.exceptionErrorTitle`, { ns: 'datasetCreation' })} errorMsg={crawlErrorMessage} />)}
             {isCrawlFinished && !showError
-              && (
-                <CrawledResult
-                  className="mb-2"
-                  list={crawlResult?.data || []}
-                  checkedList={checkedCrawlResult}
-                  onSelectedChange={onCheckedCrawlResultChange}
-                  onPreview={onPreview}
-                  usedTime={Number.parseFloat(crawlResult?.time_consuming as string) || 0}
-                />
-              )}
+              && (<CrawledResult className="mb-2" list={crawlResult?.data || []} checkedList={checkedCrawlResult} onSelectedChange={onCheckedCrawlResultChange} onPreview={onPreview} usedTime={Number.parseFloat(crawlResult?.time_consuming as string) || 0} />)}
           </div>
         )}
       </div>
diff --git a/web/app/components/datasets/create/website/jina-reader/index.tsx b/web/app/components/datasets/create/website/jina-reader/index.tsx
index 9e2f1bc5ea..aa2c8739cf 100644
--- a/web/app/components/datasets/create/website/jina-reader/index.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/index.tsx
@@ -4,7 +4,7 @@ import type { CrawlOptions, CrawlResultItem } from '@/models/datasets'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { useModalContext } from '@/context/modal-context'
 import { checkJinaReaderTaskStatus, createJinaReaderTask } from '@/service/datasets'
@@ -19,7 +19,6 @@ import Options from './options'
 
 const ERROR_I18N_PREFIX = 'errorMsg'
 const I18N_PREFIX = 'stepOne.website'
-
 type Props = {
   onPreview: (payload: CrawlResultItem) => void
   checkedCrawlResult: CrawlResultItem[]
@@ -28,21 +27,12 @@ type Props = {
   crawlOptions: CrawlOptions
   onCrawlOptionsChange: (payload: CrawlOptions) => void
 }
-
 enum Step {
   init = 'init',
   running = 'running',
   finished = 'finished',
 }
-
-const JinaReader: FC<Props> = ({
-  onPreview,
-  checkedCrawlResult,
-  onCheckedCrawlResultChange,
-  onJobIdChange,
-  crawlOptions,
-  onCrawlOptionsChange,
-}) => {
+const JinaReader: FC<Props> = ({ onPreview, checkedCrawlResult, onCheckedCrawlResultChange, onJobIdChange, crawlOptions, onCrawlOptionsChange }) => {
   const { t } = useTranslation()
   const [step, setStep] = useState<Step>(Step.init)
   const [controlFoldOptions, setControlFoldOptions] = useState<number>(0)
@@ -56,7 +46,6 @@ const JinaReader: FC<Props> = ({
       payload: ACCOUNT_SETTING_TAB.DATA_SOURCE,
     })
   }, [setShowAccountSettingModal])
-
   const checkValid = useCallback((url: string) => {
     let errorMsg = ''
     if (!url) {
@@ -65,23 +54,19 @@ const JinaReader: FC<Props> = ({
         field: 'url',
       })
     }
-
     if (!errorMsg && !((url.startsWith('http://') || url.startsWith('https://'))))
       errorMsg = t(`${ERROR_I18N_PREFIX}.urlError`, { ns: 'common' })
-
     if (!errorMsg && (crawlOptions.limit === null || crawlOptions.limit === undefined || crawlOptions.limit === '')) {
       errorMsg = t(`${ERROR_I18N_PREFIX}.fieldRequired`, {
         ns: 'common',
         field: t(`${I18N_PREFIX}.limit`, { ns: 'datasetCreation' }),
       })
     }
-
     return {
       isValid: !errorMsg,
       errorMsg,
     }
   }, [crawlOptions, t])
-
   const isInit = step === Step.init
   const isCrawlFinished = step === Step.finished
   const isRunning = step === Step.running
@@ -93,7 +78,6 @@ const JinaReader: FC<Props> = ({
   } | undefined>(undefined)
   const [crawlErrorMessage, setCrawlErrorMessage] = useState('')
   const showError = isCrawlFinished && crawlErrorMessage
-
   const waitForCrawlFinished = useCallback(async (jobId: string) => {
     try {
       const res = await checkJinaReaderTaskStatus(jobId) as any
@@ -135,14 +119,10 @@ const JinaReader: FC<Props> = ({
       }
     }
   }, [crawlOptions.limit, onCheckedCrawlResultChange])
-
   const handleRun = useCallback(async (url: string) => {
     const { isValid, errorMsg } = checkValid(url)
     if (!isValid) {
-      Toast.notify({
-        message: errorMsg!,
-        type: 'error',
-      })
+      toast.error(errorMsg!)
       return
     }
     setStep(Step.running)
@@ -152,7 +132,6 @@ const JinaReader: FC<Props> = ({
         url,
         options: crawlOptions,
       }) as any
-
       if (res.data) {
         const { title, content, description, url } = res.data
         const data = {
@@ -192,49 +171,22 @@ const JinaReader: FC<Props> = ({
       setStep(Step.finished)
     }
   }, [checkValid, crawlOptions, onCheckedCrawlResultChange, onJobIdChange, t, waitForCrawlFinished])
-
   return (
     <div>
-      <Header
-        onClickConfiguration={handleSetting}
-        title={t(`${I18N_PREFIX}.jinaReaderTitle`, { ns: 'datasetCreation' })}
-        buttonText={t(`${I18N_PREFIX}.configureJinaReader`, { ns: 'datasetCreation' })}
-        docTitle={t(`${I18N_PREFIX}.jinaReaderDoc`, { ns: 'datasetCreation' })}
-        docLink="https://jina.ai/reader"
-      />
+      <Header onClickConfiguration={handleSetting} title={t(`${I18N_PREFIX}.jinaReaderTitle`, { ns: 'datasetCreation' })} buttonText={t(`${I18N_PREFIX}.configureJinaReader`, { ns: 'datasetCreation' })} docTitle={t(`${I18N_PREFIX}.jinaReaderDoc`, { ns: 'datasetCreation' })} docLink="https://jina.ai/reader" />
       <div className="mt-2 rounded-xl border border-components-panel-border bg-background-default-subtle p-4 pb-0">
         <UrlInput onRun={handleRun} isRunning={isRunning} />
-        <OptionsWrap
-          className="mt-4"
-          controlFoldOptions={controlFoldOptions}
-        >
+        <OptionsWrap className="mt-4" controlFoldOptions={controlFoldOptions}>
           <Options className="mt-2" payload={crawlOptions} onChange={onCrawlOptionsChange} />
         </OptionsWrap>
 
         {!isInit && (
           <div className="relative left-[-16px] mt-3 w-[calc(100%_+_32px)] rounded-b-xl">
             {isRunning
-              && (
-                <Crawling
-                  className="mt-2"
-                  crawledNum={crawlResult?.current || 0}
-                  totalNum={crawlResult?.total || Number.parseFloat(crawlOptions.limit as string) || 0}
-                />
-              )}
-            {showError && (
-              <ErrorMessage className="rounded-b-xl" title={t(`${I18N_PREFIX}.exceptionErrorTitle`, { ns: 'datasetCreation' })} errorMsg={crawlErrorMessage} />
-            )}
+              && (<Crawling className="mt-2" crawledNum={crawlResult?.current || 0} totalNum={crawlResult?.total || Number.parseFloat(crawlOptions.limit as string) || 0} />)}
+            {showError && (<ErrorMessage className="rounded-b-xl" title={t(`${I18N_PREFIX}.exceptionErrorTitle`, { ns: 'datasetCreation' })} errorMsg={crawlErrorMessage} />)}
             {isCrawlFinished && !showError
-              && (
-                <CrawledResult
-                  className="mb-2"
-                  list={crawlResult?.data || []}
-                  checkedList={checkedCrawlResult}
-                  onSelectedChange={onCheckedCrawlResultChange}
-                  onPreview={onPreview}
-                  usedTime={Number.parseFloat(crawlResult?.time_consuming as string) || 0}
-                />
-              )}
+              && (<CrawledResult className="mb-2" list={crawlResult?.data || []} checkedList={checkedCrawlResult} onSelectedChange={onCheckedCrawlResultChange} onPreview={onPreview} usedTime={Number.parseFloat(crawlResult?.time_consuming as string) || 0} />)}
           </div>
         )}
       </div>
diff --git a/web/app/components/datasets/create/website/watercrawl/index.tsx b/web/app/components/datasets/create/website/watercrawl/index.tsx
index e68a89ae5a..63fc2b2638 100644
--- a/web/app/components/datasets/create/website/watercrawl/index.tsx
+++ b/web/app/components/datasets/create/website/watercrawl/index.tsx
@@ -4,7 +4,7 @@ import type { CrawlOptions, CrawlResultItem } from '@/models/datasets'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { useModalContext } from '@/context/modal-context'
 import { checkWatercrawlTaskStatus, createWatercrawlTask } from '@/service/datasets'
@@ -19,7 +19,6 @@ import Options from './options'
 
 const ERROR_I18N_PREFIX = 'errorMsg'
 const I18N_PREFIX = 'stepOne.website'
-
 type Props = {
   onPreview: (payload: CrawlResultItem) => void
   checkedCrawlResult: CrawlResultItem[]
@@ -28,21 +27,12 @@ type Props = {
   crawlOptions: CrawlOptions
   onCrawlOptionsChange: (payload: CrawlOptions) => void
 }
-
 enum Step {
   init = 'init',
   running = 'running',
   finished = 'finished',
 }
-
-const WaterCrawl: FC<Props> = ({
-  onPreview,
-  checkedCrawlResult,
-  onCheckedCrawlResultChange,
-  onJobIdChange,
-  crawlOptions,
-  onCrawlOptionsChange,
-}) => {
+const WaterCrawl: FC<Props> = ({ onPreview, checkedCrawlResult, onCheckedCrawlResultChange, onJobIdChange, crawlOptions, onCrawlOptionsChange }) => {
   const { t } = useTranslation()
   const [step, setStep] = useState<Step>(Step.init)
   const [controlFoldOptions, setControlFoldOptions] = useState<number>(0)
@@ -56,7 +46,6 @@ const WaterCrawl: FC<Props> = ({
       payload: ACCOUNT_SETTING_TAB.DATA_SOURCE,
     })
   }, [setShowAccountSettingModal])
-
   const checkValid = useCallback((url: string) => {
     let errorMsg = ''
     if (!url) {
@@ -65,23 +54,19 @@ const WaterCrawl: FC<Props> = ({
         field: 'url',
       })
     }
-
     if (!errorMsg && !((url.startsWith('http://') || url.startsWith('https://'))))
       errorMsg = t(`${ERROR_I18N_PREFIX}.urlError`, { ns: 'common' })
-
     if (!errorMsg && (crawlOptions.limit === null || crawlOptions.limit === undefined || crawlOptions.limit === '')) {
       errorMsg = t(`${ERROR_I18N_PREFIX}.fieldRequired`, {
         ns: 'common',
         field: t(`${I18N_PREFIX}.limit`, { ns: 'datasetCreation' }),
       })
     }
-
     return {
       isValid: !errorMsg,
       errorMsg,
     }
   }, [crawlOptions, t])
-
   const isInit = step === Step.init
   const isCrawlFinished = step === Step.finished
   const isRunning = step === Step.running
@@ -93,7 +78,6 @@ const WaterCrawl: FC<Props> = ({
   } | undefined>(undefined)
   const [crawlErrorMessage, setCrawlErrorMessage] = useState('')
   const showError = isCrawlFinished && crawlErrorMessage
-
   const waitForCrawlFinished = useCallback(async (jobId: string): Promise<any> => {
     try {
       const res = await checkWatercrawlTaskStatus(jobId) as any
@@ -127,20 +111,22 @@ const WaterCrawl: FC<Props> = ({
     }
     catch (error: unknown) {
       let errorMessage = ''
-
-      const maybeErrorWithJson = error as { json?: () => Promise<unknown>, message?: unknown } | null
+      const maybeErrorWithJson = error as {
+        json?: () => Promise<unknown>
+        message?: unknown
+      } | null
       if (maybeErrorWithJson?.json) {
         try {
-          const errorBody = await maybeErrorWithJson.json() as { message?: unknown } | null
+          const errorBody = await maybeErrorWithJson.json() as {
+            message?: unknown
+          } | null
           if (typeof errorBody?.message === 'string')
             errorMessage = errorBody.message
         }
-        catch {}
+        catch { }
       }
-
       if (!errorMessage && typeof maybeErrorWithJson?.message === 'string')
         errorMessage = maybeErrorWithJson.message
-
       return {
         isError: true,
         errorMessage,
@@ -150,14 +136,10 @@ const WaterCrawl: FC<Props> = ({
       }
     }
   }, [crawlOptions.limit, onCheckedCrawlResultChange])
-
   const handleRun = useCallback(async (url: string) => {
     const { isValid, errorMsg } = checkValid(url)
     if (!isValid) {
-      Toast.notify({
-        message: errorMsg!,
-        type: 'error',
-      })
+      toast.error(errorMsg!)
       return
     }
     setStep(Step.running)
@@ -167,7 +149,6 @@ const WaterCrawl: FC<Props> = ({
       }
       if (crawlOptions.max_depth === '')
         delete passToServerCrawlOptions.max_depth
-
       const res = await createWatercrawlTask({
         url,
         options: passToServerCrawlOptions,
@@ -192,49 +173,22 @@ const WaterCrawl: FC<Props> = ({
       setStep(Step.finished)
     }
   }, [checkValid, crawlOptions, onCheckedCrawlResultChange, onJobIdChange, t, waitForCrawlFinished])
-
   return (
     <div>
-      <Header
-        onClickConfiguration={handleSetting}
-        title={t(`${I18N_PREFIX}.watercrawlTitle`, { ns: 'datasetCreation' })}
-        buttonText={t(`${I18N_PREFIX}.configureWatercrawl`, { ns: 'datasetCreation' })}
-        docTitle={t(`${I18N_PREFIX}.watercrawlDoc`, { ns: 'datasetCreation' })}
-        docLink="https://docs.watercrawl.dev/"
-      />
+      <Header onClickConfiguration={handleSetting} title={t(`${I18N_PREFIX}.watercrawlTitle`, { ns: 'datasetCreation' })} buttonText={t(`${I18N_PREFIX}.configureWatercrawl`, { ns: 'datasetCreation' })} docTitle={t(`${I18N_PREFIX}.watercrawlDoc`, { ns: 'datasetCreation' })} docLink="https://docs.watercrawl.dev/" />
       <div className="mt-2 rounded-xl border border-components-panel-border bg-background-default-subtle p-4 pb-0">
         <UrlInput onRun={handleRun} isRunning={isRunning} />
-        <OptionsWrap
-          className="mt-4"
-          controlFoldOptions={controlFoldOptions}
-        >
+        <OptionsWrap className="mt-4" controlFoldOptions={controlFoldOptions}>
           <Options className="mt-2" payload={crawlOptions} onChange={onCrawlOptionsChange} />
         </OptionsWrap>
 
         {!isInit && (
           <div className="relative left-[-16px] mt-3 w-[calc(100%_+_32px)] rounded-b-xl">
             {isRunning
-              && (
-                <Crawling
-                  className="mt-2"
-                  crawledNum={crawlResult?.current || 0}
-                  totalNum={crawlResult?.total || Number.parseFloat(crawlOptions.limit as string) || 0}
-                />
-              )}
-            {showError && (
-              <ErrorMessage className="rounded-b-xl" title={t(`${I18N_PREFIX}.exceptionErrorTitle`, { ns: 'datasetCreation' })} errorMsg={crawlErrorMessage} />
-            )}
+              && (<Crawling className="mt-2" crawledNum={crawlResult?.current || 0} totalNum={crawlResult?.total || Number.parseFloat(crawlOptions.limit as string) || 0} />)}
+            {showError && (<ErrorMessage className="rounded-b-xl" title={t(`${I18N_PREFIX}.exceptionErrorTitle`, { ns: 'datasetCreation' })} errorMsg={crawlErrorMessage} />)}
             {isCrawlFinished && !showError
-              && (
-                <CrawledResult
-                  className="mb-2"
-                  list={crawlResult?.data || []}
-                  checkedList={checkedCrawlResult}
-                  onSelectedChange={onCheckedCrawlResultChange}
-                  onPreview={onPreview}
-                  usedTime={Number.parseFloat(crawlResult?.time_consuming as string) || 0}
-                />
-              )}
+              && (<CrawledResult className="mb-2" list={crawlResult?.data || []} checkedList={checkedCrawlResult} onSelectedChange={onCheckedCrawlResultChange} onPreview={onPreview} usedTime={Number.parseFloat(crawlResult?.time_consuming as string) || 0} />)}
           </div>
         )}
       </div>
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 ce73368e1a..0d60ef86db 100644
--- a/web/app/components/datasets/documents/components/__tests__/operations.spec.tsx
+++ b/web/app/components/datasets/documents/components/__tests__/operations.spec.tsx
@@ -10,17 +10,21 @@ vi.mock('@/next/navigation', () => ({
   }),
 }))
 
-const mockNotify = vi.fn()
-vi.mock('@/app/components/base/toast/context', () => ({
-  ToastContext: {
-    Provider: ({ children }: { children: React.ReactNode }) => children,
-  },
-}))
+const { mockToast } = vi.hoisted(() => {
+  const mockToast = Object.assign(vi.fn(), {
+    success: vi.fn(),
+    error: vi.fn(),
+    warning: vi.fn(),
+    info: vi.fn(),
+    dismiss: vi.fn(),
+    update: vi.fn(),
+    promise: vi.fn(),
+  })
+  return { mockToast }
+})
 
-vi.mock('use-context-selector', () => ({
-  useContext: () => ({
-    notify: mockNotify,
-  }),
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
 }))
 
 // Mock document service hooks
@@ -490,10 +494,7 @@ describe('Operations', () => {
         fireEvent.click(archiveButton)
       })
       await waitFor(() => {
-        expect(mockNotify).toHaveBeenCalledWith({
-          type: 'error',
-          message: 'common.actionMsg.modifiedUnsuccessfully',
-        })
+        expect(mockToast.error).toHaveBeenCalledWith('common.actionMsg.modifiedUnsuccessfully')
       })
     })
 
@@ -511,10 +512,7 @@ describe('Operations', () => {
         fireEvent.click(downloadButton)
       })
       await waitFor(() => {
-        expect(mockNotify).toHaveBeenCalledWith({
-          type: 'error',
-          message: 'common.actionMsg.downloadUnsuccessfully',
-        })
+        expect(mockToast.error).toHaveBeenCalledWith('common.actionMsg.downloadUnsuccessfully')
       })
     })
 
@@ -532,10 +530,7 @@ describe('Operations', () => {
         fireEvent.click(downloadButton)
       })
       await waitFor(() => {
-        expect(mockNotify).toHaveBeenCalledWith({
-          type: 'error',
-          message: 'common.actionMsg.downloadUnsuccessfully',
-        })
+        expect(mockToast.error).toHaveBeenCalledWith('common.actionMsg.downloadUnsuccessfully')
       })
     })
   })
diff --git a/web/app/components/datasets/documents/components/operations.tsx b/web/app/components/datasets/documents/components/operations.tsx
index ff3563c3fe..dee847fbf1 100644
--- a/web/app/components/datasets/documents/components/operations.tsx
+++ b/web/app/components/datasets/documents/components/operations.tsx
@@ -1,46 +1,23 @@
 import type { OperationName } from '../types'
 import type { CommonResponse } from '@/models/common'
 import type { DocumentDownloadResponse } from '@/service/datasets'
-import {
-  RiArchive2Line,
-  RiDeleteBinLine,
-  RiDownload2Line,
-  RiEditLine,
-  RiEqualizer2Line,
-  RiLoopLeftLine,
-  RiMoreFill,
-  RiPauseCircleLine,
-  RiPlayCircleLine,
-} from '@remixicon/react'
+import { RiArchive2Line, RiDeleteBinLine, RiDownload2Line, RiEditLine, RiEqualizer2Line, RiLoopLeftLine, RiMoreFill, RiPauseCircleLine, RiPlayCircleLine } from '@remixicon/react'
 import { useBoolean, useDebounceFn } from 'ahooks'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
 import Confirm from '@/app/components/base/confirm'
 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/context'
 import Tooltip from '@/app/components/base/tooltip'
+import { toast } from '@/app/components/base/ui/toast'
 import { IS_CE_EDITION } from '@/config'
 import { DataSourceType, DocumentActionType } from '@/models/datasets'
 import { useRouter } from '@/next/navigation'
-import {
-  useDocumentArchive,
-  useDocumentDelete,
-  useDocumentDisable,
-  useDocumentDownload,
-  useDocumentEnable,
-  useDocumentPause,
-  useDocumentResume,
-  useDocumentSummary,
-  useDocumentUnArchive,
-  useSyncDocument,
-  useSyncWebsite,
-} from '@/service/knowledge/use-document'
+import { useDocumentArchive, useDocumentDelete, useDocumentDisable, useDocumentDownload, useDocumentEnable, useDocumentPause, useDocumentResume, useDocumentSummary, useDocumentUnArchive, useSyncDocument, useSyncWebsite } from '@/service/knowledge/use-document'
 import { asyncRunSafe } from '@/utils'
 import { cn } from '@/utils/classnames'
 import { downloadUrl } from '@/utils/download'
@@ -65,21 +42,10 @@ type OperationsProps = {
   scene?: 'list' | 'detail'
   className?: string
 }
-
-const Operations = ({
-  embeddingAvailable,
-  datasetId,
-  detail,
-  selectedIds,
-  onSelectedIdChange,
-  onUpdate,
-  scene = 'list',
-  className = '',
-}: OperationsProps) => {
+const Operations = ({ embeddingAvailable, datasetId, detail, selectedIds, onSelectedIdChange, onUpdate, scene = 'list', className = '' }: OperationsProps) => {
   const { id, name, enabled = false, archived = false, data_source_type, display_status } = detail || {}
   const [showModal, setShowModal] = useState(false)
   const [deleting, setDeleting] = useState(false)
-  const { notify } = useContext(ToastContext)
   const { t } = useTranslation()
   const router = useRouter()
   const { mutateAsync: archiveDocument } = useDocumentArchive()
@@ -94,7 +60,6 @@ const Operations = ({
   const { mutateAsync: pauseDocument } = useDocumentPause()
   const { mutateAsync: resumeDocument } = useDocumentResume()
   const isListScene = scene === 'list'
-
   const onOperate = async (operationName: OperationName) => {
     let opApi
     switch (operationName) {
@@ -132,17 +97,18 @@ const Operations = ({
     }
     const [e] = await asyncRunSafe<CommonResponse>(opApi({ datasetId, documentId: id }) as Promise<CommonResponse>)
     if (!e) {
-      notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
+      toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
       // If it is a delete operation, need to update the selectedIds state
       if (selectedIds && onSelectedIdChange && operationName === DocumentActionType.delete)
         onSelectedIdChange(selectedIds.filter(selectedId => selectedId !== id))
       onUpdate(operationName)
     }
-    else { notify({ type: 'error', message: t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }) }) }
+    else {
+      toast.error(t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }))
+    }
     if (operationName === DocumentActionType.delete)
       setDeleting(false)
   }
-
   const { run: handleSwitch } = useDebounceFn((operationName: OperationName) => {
     if (operationName === DocumentActionType.enable && enabled)
       return
@@ -150,15 +116,11 @@ const Operations = ({
       return
     onOperate(operationName)
   }, { wait: 500 })
-
   const [currDocument, setCurrDocument] = useState<{
     id: string
     name: string
   } | null>(null)
-  const [isShowRenameModal, {
-    setTrue: setShowRenameModalTrue,
-    setFalse: setShowRenameModalFalse,
-  }] = useBoolean(false)
+  const [isShowRenameModal, { setTrue: setShowRenameModalTrue, setFalse: setShowRenameModalFalse }] = useBoolean(false)
   const handleShowRenameModal = useCallback((doc: {
     id: string
     name: string
@@ -169,38 +131,27 @@ const Operations = ({
   const handleRenamed = useCallback(() => {
     onUpdate()
   }, [onUpdate])
-
   const handleDownload = useCallback(async () => {
     // Avoid repeated clicks while the signed URL request is in-flight.
     if (isDownloading)
       return
-
     // Request a signed URL first (it points to `/files/<id>/file-preview?...&as_attachment=true`).
-    const [e, res] = await asyncRunSafe<DocumentDownloadResponse>(
-      downloadDocument({ datasetId, documentId: id }) as Promise<DocumentDownloadResponse>,
-    )
+    const [e, res] = await asyncRunSafe<DocumentDownloadResponse>(downloadDocument({ datasetId, documentId: id }) as Promise<DocumentDownloadResponse>)
     if (e || !res?.url) {
-      notify({ type: 'error', message: t('actionMsg.downloadUnsuccessfully', { ns: 'common' }) })
+      toast.error(t('actionMsg.downloadUnsuccessfully', { ns: 'common' }))
       return
     }
-
     // Trigger download without navigating away (helps avoid duplicate downloads in some browsers).
     downloadUrl({ url: res.url, fileName: name })
-  }, [datasetId, downloadDocument, id, isDownloading, name, notify, t])
-
+  }, [datasetId, downloadDocument, id, isDownloading, name, t])
   return (
     <div className="flex items-center" onClick={e => e.stopPropagation()}>
-      {isListScene && !embeddingAvailable && (
-        <Switch value={false} onChange={noop} disabled={true} size="md" />
-      )}
+      {isListScene && !embeddingAvailable && (<Switch value={false} onChange={noop} disabled={true} size="md" />)}
       {isListScene && embeddingAvailable && (
         <>
           {archived
             ? (
-                <Tooltip
-                  popupContent={t('list.action.enableWarning', { ns: 'datasetDocuments' })}
-                  popupClassName="!font-semibold"
-                >
+                <Tooltip popupContent={t('list.action.enableWarning', { ns: 'datasetDocuments' })} popupClassName="!font-semibold">
                   <div>
                     <Switch value={false} onChange={noop} disabled={true} size="md" />
                   </div>
@@ -212,11 +163,7 @@ const Operations = ({
       )}
       {embeddingAvailable && (
         <>
-          <Tooltip
-            popupContent={t('list.action.settings', { ns: 'datasetDocuments' })}
-            popupClassName="text-text-secondary system-xs-medium"
-            needsDelay={false}
-          >
+          <Tooltip popupContent={t('list.action.settings', { ns: 'datasetDocuments' })} popupClassName="text-text-secondary system-xs-medium" needsDelay={false}>
             <button
               type="button"
               className={cn('mr-2 cursor-pointer rounded-lg', !isListScene
@@ -264,14 +211,12 @@ const Operations = ({
                         <span className={s.actionName}>{t('list.action.sync', { ns: 'datasetDocuments' })}</span>
                       </div>
                     )}
-                    {
-                      IS_CE_EDITION && (
-                        <div className={s.actionItem} onClick={() => onOperate('summary')}>
-                          <SearchLinesSparkle className="h-4 w-4 text-text-tertiary" />
-                          <span className={s.actionName}>{t('list.action.summary', { ns: 'datasetDocuments' })}</span>
-                        </div>
-                      )
-                    }
+                    {IS_CE_EDITION && (
+                      <div className={s.actionItem} onClick={() => onOperate('summary')}>
+                        <SearchLinesSparkle className="h-4 w-4 text-text-tertiary" />
+                        <span className={s.actionName}>{t('list.action.summary', { ns: 'datasetDocuments' })}</span>
+                      </div>
+                    )}
                     <Divider className="my-1" />
                   </>
                 )}
@@ -336,30 +281,10 @@ const Operations = ({
         </>
       )}
       {showModal
-        && (
-          <Confirm
-            isShow={showModal}
-            isLoading={deleting}
-            isDisabled={deleting}
-            title={t('list.delete.title', { ns: 'datasetDocuments' })}
-            content={t('list.delete.content', { ns: 'datasetDocuments' })}
-            confirmText={t('operation.sure', { ns: 'common' })}
-            onConfirm={() => onOperate('delete')}
-            onCancel={() => setShowModal(false)}
-          />
-        )}
+        && (<Confirm isShow={showModal} isLoading={deleting} isDisabled={deleting} title={t('list.delete.title', { ns: 'datasetDocuments' })} content={t('list.delete.content', { ns: 'datasetDocuments' })} confirmText={t('operation.sure', { ns: 'common' })} onConfirm={() => onOperate('delete')} onCancel={() => setShowModal(false)} />)}
 
-      {isShowRenameModal && currDocument && (
-        <RenameModal
-          datasetId={datasetId}
-          documentId={currDocument.id}
-          name={currDocument.name}
-          onClose={setShowRenameModalFalse}
-          onSaved={handleRenamed}
-        />
-      )}
+      {isShowRenameModal && currDocument && (<RenameModal datasetId={datasetId} documentId={currDocument.id} name={currDocument.name} onClose={setShowRenameModalFalse} onSaved={handleRenamed} />)}
     </div>
   )
 }
-
 export default React.memo(Operations)
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 efd1f2a483..cc531aad8f 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
@@ -4,20 +4,24 @@ import { act, render, renderHook, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { PROGRESS_ERROR, PROGRESS_NOT_STARTED } from '../../constants'
 
-// Mock notify function - defined before mocks
-const mockNotify = vi.fn()
-const mockClose = vi.fn()
-
-// Mock ToastContext with factory function
-vi.mock('@/app/components/base/toast/context', async () => {
-  const { createContext, useContext } = await import('use-context-selector')
-  const context = createContext({ notify: mockNotify, close: mockClose })
-  return {
-    ToastContext: context,
-    useToastContext: () => useContext(context),
-  }
+const { mockNotify, mockToast } = vi.hoisted(() => {
+  const mockNotify = vi.fn()
+  const mockToast = Object.assign(mockNotify, {
+    success: vi.fn((message, options) => mockNotify({ type: 'success', message, ...options })),
+    error: vi.fn((message, options) => mockNotify({ type: 'error', message, ...options })),
+    warning: vi.fn((message, options) => mockNotify({ type: 'warning', message, ...options })),
+    info: vi.fn((message, options) => mockNotify({ type: 'info', message, ...options })),
+    dismiss: vi.fn(),
+    update: vi.fn(),
+    promise: vi.fn(),
+  })
+  return { mockNotify, mockToast }
 })
 
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
+}))
+
 // Mock file uploader utils
 vi.mock('@/app/components/base/file-uploader/utils', () => ({
   getFileUploadErrorMessage: (e: Error, defaultMsg: string) => e.message || defaultMsg,
@@ -87,13 +91,12 @@ 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/context')
 
 const createWrapper = () => {
   return ({ children }: { children: ReactNode }) => (
-    <ToastContext.Provider value={{ notify: mockNotify, close: mockClose }}>
+    <>
       {children}
-    </ToastContext.Provider>
+    </>
   )
 }
 
@@ -555,9 +558,9 @@ describe('useLocalFileUpload', () => {
     it('should set dragging true on dragenter', async () => {
       const { getByTestId } = await act(async () =>
         render(
-          <ToastContext.Provider value={{ notify: mockNotify, close: mockClose }}>
+          <>
             <TestDropzone allowedExtensions={['pdf']} />
-          </ToastContext.Provider>,
+          </>,
         ),
       )
 
@@ -574,9 +577,9 @@ describe('useLocalFileUpload', () => {
     it('should handle dragover event', async () => {
       const { getByTestId } = await act(async () =>
         render(
-          <ToastContext.Provider value={{ notify: mockNotify, close: mockClose }}>
+          <>
             <TestDropzone allowedExtensions={['pdf']} />
-          </ToastContext.Provider>,
+          </>,
         ),
       )
 
@@ -594,9 +597,9 @@ describe('useLocalFileUpload', () => {
     it('should set dragging false on dragleave from drag overlay', async () => {
       const { getByTestId, queryByTestId } = await act(async () =>
         render(
-          <ToastContext.Provider value={{ notify: mockNotify, close: mockClose }}>
+          <>
             <TestDropzone allowedExtensions={['pdf']} />
-          </ToastContext.Provider>,
+          </>,
         ),
       )
 
@@ -626,9 +629,9 @@ describe('useLocalFileUpload', () => {
 
       const { getByTestId } = await act(async () =>
         render(
-          <ToastContext.Provider value={{ notify: mockNotify, close: mockClose }}>
+          <>
             <TestDropzone allowedExtensions={['pdf']} />
-          </ToastContext.Provider>,
+          </>,
         ),
       )
 
@@ -658,9 +661,9 @@ describe('useLocalFileUpload', () => {
     it('should handle drop without dataTransfer', async () => {
       const { getByTestId } = await act(async () =>
         render(
-          <ToastContext.Provider value={{ notify: mockNotify, close: mockClose }}>
+          <>
             <TestDropzone allowedExtensions={['pdf']} />
-          </ToastContext.Provider>,
+          </>,
         ),
       )
 
@@ -682,9 +685,9 @@ describe('useLocalFileUpload', () => {
 
       const { getByTestId } = await act(async () =>
         render(
-          <ToastContext.Provider value={{ notify: mockNotify, close: mockClose }}>
+          <>
             <TestDropzone allowedExtensions={['pdf']} supportBatchUpload={false} />
-          </ToastContext.Provider>,
+          </>,
         ),
       )
 
diff --git a/web/app/components/datasets/documents/detail/__tests__/index.spec.tsx b/web/app/components/datasets/documents/detail/__tests__/index.spec.tsx
index be4d2304bd..91e9bccc66 100644
--- a/web/app/components/datasets/documents/detail/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/detail/__tests__/index.spec.tsx
@@ -74,7 +74,7 @@ vi.mock('@/service/use-base', () => ({
   },
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/ui/toast', () => ({
   default: { notify: mocks.toastNotify },
 }))
 
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 6876753714..4f8077b54c 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
@@ -1,4 +1,3 @@
-import type { ReactNode } from 'react'
 import type { CustomFile, FileItem } from '@/models/datasets'
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -25,19 +24,25 @@ vi.mock('@/hooks/use-theme', () => ({
 }))
 
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/toast/context', () => ({
-  ToastContext: {
-    Provider: ({ children }: { children: ReactNode }) => children,
-    Consumer: ({ children }: { children: (ctx: { notify: typeof mockNotify }) => ReactNode }) => children({ notify: mockNotify }),
-  },
+const mockToast = Object.assign(mockNotify, {
+  success: vi.fn((message, options) => mockNotify({ type: 'success', message, ...options })),
+  error: vi.fn((message, options) => mockNotify({ type: 'error', message, ...options })),
+  warning: vi.fn((message, options) => mockNotify({ type: 'warning', message, ...options })),
+  info: vi.fn((message, options) => mockNotify({ type: 'info', message, ...options })),
+  dismiss: vi.fn(),
+  update: vi.fn(),
+  promise: vi.fn(),
+})
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
 }))
 
-// Create a mock ToastContext for useContext
 vi.mock('use-context-selector', async (importOriginal) => {
   const actual = await importOriginal() as Record<string, unknown>
   return {
     ...actual,
-    useContext: () => ({ notify: mockNotify }),
+    useContext: () => ({ toast: mockToast }),
   }
 })
 
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 93992a1aba..25891dff46 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
@@ -1,18 +1,15 @@
 'use client'
 import type { FC } from 'react'
 import type { FileItem } from '@/models/datasets'
-import {
-  RiDeleteBinLine,
-} from '@remixicon/react'
+import { RiDeleteBinLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
 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/context'
+import { toast } from '@/app/components/base/ui/toast'
 import useTheme from '@/hooks/use-theme'
 import { upload } from '@/service/base'
 import { useFileUploadConfig } from '@/service/use-common'
@@ -23,13 +20,8 @@ export type Props = {
   file: FileItem | undefined
   updateFile: (file?: FileItem) => void
 }
-
-const CSVUploader: FC<Props> = ({
-  file,
-  updateFile,
-}) => {
+const CSVUploader: FC<Props> = ({ file, updateFile }) => {
   const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
   const [dragging, setDragging] = useState(false)
   const dropRef = useRef<HTMLDivElement>(null)
   const dragRef = useRef<HTMLDivElement>(null)
@@ -38,12 +30,9 @@ const CSVUploader: FC<Props> = ({
   const fileUploadConfig = useMemo(() => fileUploadConfigResponse ?? {
     file_size_limit: 15,
   }, [fileUploadConfigResponse])
-
   type UploadResult = Awaited<ReturnType<typeof upload>>
-
   const fileUpload = useCallback(async (fileItem: FileItem): Promise<FileItem> => {
     fileItem.progress = 0
-
     const formData = new FormData()
     formData.append('file', fileItem.file)
     const onProgress = (e: ProgressEvent) => {
@@ -55,7 +44,6 @@ const CSVUploader: FC<Props> = ({
         })
       }
     }
-
     return upload({
       xhr: new XMLHttpRequest(),
       data: formData,
@@ -76,7 +64,7 @@ const CSVUploader: FC<Props> = ({
       })
       .catch((e) => {
         const errorMessage = getFileUploadErrorMessage(e, t('stepOne.uploader.failed', { ns: 'datasetCreation' }), t)
-        notify({ type: 'error', message: errorMessage })
+        toast.error(errorMessage)
         const errorFile = {
           ...fileItem,
           progress: -2,
@@ -85,16 +73,13 @@ const CSVUploader: FC<Props> = ({
         return Promise.resolve({ ...errorFile })
       })
       .finally()
-  }, [notify, t, updateFile])
-
+  }, [t, updateFile])
   const uploadFile = useCallback(async (fileItem: FileItem) => {
     await fileUpload(fileItem)
   }, [fileUpload])
-
   const initialUpload = useCallback((file?: File) => {
     if (!file)
       return false
-
     const newFile: FileItem = {
       fileID: `file0-${Date.now()}`,
       file,
@@ -103,7 +88,6 @@ const CSVUploader: FC<Props> = ({
     updateFile(newFile)
     uploadFile(newFile)
   }, [updateFile, uploadFile])
-
   const handleDragEnter = (e: DragEvent) => {
     e.preventDefault()
     e.stopPropagation()
@@ -128,7 +112,7 @@ const CSVUploader: FC<Props> = ({
       return
     const files = Array.from(e.dataTransfer.files)
     if (files.length > 1) {
-      notify({ type: 'error', message: t('stepOne.uploader.validation.count', { ns: 'datasetCreation' }) })
+      toast.error(t('stepOne.uploader.validation.count', { ns: 'datasetCreation' }))
       return
     }
     initialUpload(files[0])
@@ -142,43 +126,33 @@ const CSVUploader: FC<Props> = ({
       fileUploader.current.value = ''
     updateFile()
   }
-
   const getFileType = (currentFile: File) => {
     if (!currentFile)
       return ''
-
     const arr = currentFile.name.split('.')
     return arr[arr.length - 1]
   }
-
   const isValid = useCallback((file?: File) => {
     if (!file)
       return false
-
     const { size } = file
     const ext = `.${getFileType(file)}`
     const isValidType = ext.toLowerCase() === '.csv'
     if (!isValidType)
-      notify({ type: 'error', message: t('stepOne.uploader.validation.typeError', { ns: 'datasetCreation' }) })
-
+      toast.error(t('stepOne.uploader.validation.typeError', { ns: 'datasetCreation' }))
     const isValidSize = size <= fileUploadConfig.file_size_limit * 1024 * 1024
     if (!isValidSize)
-      notify({ type: 'error', message: t('stepOne.uploader.validation.size', { ns: 'datasetCreation', size: fileUploadConfig.file_size_limit }) })
-
+      toast.error(t('stepOne.uploader.validation.size', { ns: 'datasetCreation', size: fileUploadConfig.file_size_limit }))
     return isValidType && isValidSize
-  }, [fileUploadConfig, notify, t])
-
+  }, [fileUploadConfig, t])
   const fileChangeHandle = (e: React.ChangeEvent<HTMLInputElement>) => {
     const currentFile = e.target.files?.[0]
     if (!isValid(currentFile))
       return
-
     initialUpload(currentFile)
   }
-
   const { theme } = useTheme()
   const chartColor = useMemo(() => theme === Theme.dark ? '#5289ff' : '#296dff', [theme])
-
   useEffect(() => {
     dropRef.current?.addEventListener('dragenter', handleDragEnter)
     dropRef.current?.addEventListener('dragover', handleDragOver)
@@ -191,17 +165,9 @@ const CSVUploader: FC<Props> = ({
       dropRef.current?.removeEventListener('drop', handleDrop)
     }
   }, [])
-
   return (
     <div className="mt-6">
-      <input
-        ref={fileUploader}
-        style={{ display: 'none' }}
-        type="file"
-        id="fileUploader"
-        accept=".csv"
-        onChange={fileChangeHandle}
-      />
+      <input ref={fileUploader} style={{ display: 'none' }} type="file" id="fileUploader" accept=".csv" onChange={fileChangeHandle} />
       <div ref={dropRef}>
         {!file && (
           <div className={cn('flex h-20 items-center rounded-xl border border-dashed border-components-panel-border bg-components-panel-bg-blur text-sm font-normal', dragging && 'border border-divider-subtle bg-components-panel-on-panel-item-bg-hover')}>
@@ -241,5 +207,4 @@ const CSVUploader: FC<Props> = ({
     </div>
   )
 }
-
 export default React.memo(CSVUploader)
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 2a68e6f627..aae0b226db 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
@@ -12,7 +12,7 @@ const {
   mockParentMode,
   mockDatasetId,
   mockDocumentId,
-  mockNotify,
+  mockToast,
   mockEventEmitter,
   mockSegmentListData,
   mockChildSegmentListData,
@@ -26,7 +26,15 @@ const {
   mockParentMode: { current: 'paragraph' as ParentMode },
   mockDatasetId: { current: 'test-dataset-id' },
   mockDocumentId: { current: 'test-document-id' },
-  mockNotify: vi.fn(),
+  mockToast: Object.assign(vi.fn(), {
+    success: vi.fn(),
+    error: vi.fn(),
+    warning: vi.fn(),
+    info: vi.fn(),
+    dismiss: vi.fn(),
+    update: vi.fn(),
+    promise: vi.fn(),
+  }),
   mockEventEmitter: {
     emit: vi.fn(),
     on: vi.fn(),
@@ -65,9 +73,8 @@ vi.mock('../../context', () => ({
   },
 }))
 
-vi.mock('@/app/components/base/toast/context', () => ({
-  ToastContext: { Provider: ({ children }: { children: React.ReactNode }) => children, Consumer: () => null },
-  useToastContext: () => ({ notify: mockNotify }),
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
 }))
 
 vi.mock('@/context/event-emitter', () => ({
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 4cfb4d5927..dffc627e3c 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,8 +59,8 @@ vi.mock('../../../context', () => ({
   },
 }))
 
-vi.mock('@/app/components/base/toast/context', () => ({
-  useToastContext: () => ({ notify: mockNotify }),
+vi.mock('@/app/components/base/ui/toast', () => ({
+
 }))
 
 vi.mock('@/context/event-emitter', () => ({
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 6e9239c972..ded9667770 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,8 +92,8 @@ vi.mock('../../../context', () => ({
   },
 }))
 
-vi.mock('@/app/components/base/toast/context', () => ({
-  useToastContext: () => ({ notify: mockNotify }),
+vi.mock('@/app/components/base/ui/toast', () => ({
+
 }))
 
 vi.mock('@/context/event-emitter', () => ({
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 cdc8a0b22d..50a22fc71f 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,14 +2,9 @@ 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/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
-import {
-  useChildSegmentList,
-  useChildSegmentListKey,
-  useDeleteChildSegment,
-  useUpdateChildSegment,
-} from '@/service/knowledge/use-segment'
+import { useChildSegmentList, useChildSegmentListKey, useDeleteChildSegment, useUpdateChildSegment } from '@/service/knowledge/use-segment'
 import { useInvalid } from '@/service/use-base'
 import { useDocumentContext } from '../../context'
 
@@ -24,7 +19,6 @@ export type UseChildSegmentDataOptions = {
   refreshChunkListDataWithDetailChanged: () => void
   updateSegmentInCache: (segmentId: string, updater: (seg: SegmentDetailModel) => SegmentDetailModel) => void
 }
-
 export type UseChildSegmentDataReturn = {
   childSegments: ChildChunkDetail[]
   isLoadingChildSegmentList: boolean
@@ -38,61 +32,35 @@ export type UseChildSegmentDataReturn = {
   resetChildList: () => void
   viewNewlyAddedChildChunk: () => void
 }
-
 export const useChildSegmentData = (options: UseChildSegmentDataOptions): UseChildSegmentDataReturn => {
-  const {
-    searchValue,
-    currentPage,
-    limit,
-    segments,
-    currChunkId,
-    isFullDocMode,
-    onCloseChildSegmentDetail,
-    refreshChunkListDataWithDetailChanged,
-    updateSegmentInCache,
-  } = options
-
+  const { searchValue, currentPage, limit, segments, currChunkId, isFullDocMode, onCloseChildSegmentDetail, refreshChunkListDataWithDetailChanged, updateSegmentInCache } = options
   const { t } = useTranslation()
-  const { notify } = useToastContext()
   const { eventEmitter } = useEventEmitterContextContext()
   const queryClient = useQueryClient()
-
   const datasetId = useDocumentContext(s => s.datasetId) || ''
   const documentId = useDocumentContext(s => s.documentId) || ''
   const parentMode = useDocumentContext(s => s.parentMode)
-
   const childSegmentListRef = useRef<HTMLDivElement>(null)
   const needScrollToBottom = useRef(false)
-
   // Build query params
   const queryParams = useMemo(() => ({
     page: currentPage === 0 ? 1 : currentPage,
     limit,
     keyword: searchValue,
   }), [currentPage, limit, searchValue])
-
   const segmentId = segments[0]?.id || ''
-
   // Build query key for optimistic updates
-  const currentQueryKey = useMemo(() =>
-    [...useChildSegmentListKey, datasetId, documentId, segmentId, queryParams], [datasetId, documentId, segmentId, queryParams])
-
+  const currentQueryKey = useMemo(() => [...useChildSegmentListKey, datasetId, documentId, segmentId, queryParams], [datasetId, documentId, segmentId, queryParams])
   // Fetch child segment list
-  const { isLoading: isLoadingChildSegmentList, data: childChunkListData } = useChildSegmentList(
-    {
-      datasetId,
-      documentId,
-      segmentId,
-      params: queryParams,
-    },
-    !isFullDocMode || segments.length === 0,
-  )
-
+  const { isLoading: isLoadingChildSegmentList, data: childChunkListData } = useChildSegmentList({
+    datasetId,
+    documentId,
+    segmentId,
+    params: queryParams,
+  }, !isFullDocMode || segments.length === 0)
   // Derive child segments from query data
   const childSegments = useMemo(() => childChunkListData?.data || [], [childChunkListData])
-
   const invalidChildSegmentList = useInvalid(useChildSegmentListKey)
-
   // Scroll to bottom when child segments change
   useEffect(() => {
     if (childSegmentListRef.current && needScrollToBottom.current) {
@@ -100,16 +68,11 @@ export const useChildSegmentData = (options: UseChildSegmentDataOptions): UseChi
       needScrollToBottom.current = false
     }
   }, [childSegments])
-
   const resetChildList = useCallback(() => {
     invalidChildSegmentList()
   }, [invalidChildSegmentList])
-
   // Optimistic update helper for child segments
-  const updateChildSegmentInCache = useCallback((
-    childChunkId: string,
-    updater: (chunk: ChildChunkDetail) => ChildChunkDetail,
-  ) => {
+  const updateChildSegmentInCache = useCallback((childChunkId: string, updater: (chunk: ChildChunkDetail) => ChildChunkDetail) => {
     queryClient.setQueryData<ChildSegmentsResponse>(currentQueryKey, (old) => {
       if (!old)
         return old
@@ -119,69 +82,54 @@ export const useChildSegmentData = (options: UseChildSegmentDataOptions): UseChi
       }
     })
   }, [queryClient, currentQueryKey])
-
   // Mutations
   const { mutateAsync: deleteChildSegment } = useDeleteChildSegment()
   const { mutateAsync: updateChildSegment } = useUpdateChildSegment()
-
   const onDeleteChildChunk = useCallback(async (segmentIdParam: string, childChunkId: string) => {
-    await deleteChildSegment(
-      { datasetId, documentId, segmentId: segmentIdParam, childChunkId },
-      {
-        onSuccess: () => {
-          notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
-          if (parentMode === 'paragraph') {
-            // Update parent segment's child_chunks in cache
-            updateSegmentInCache(segmentIdParam, seg => ({
-              ...seg,
-              child_chunks: seg.child_chunks?.filter(chunk => chunk.id !== childChunkId),
-            }))
-          }
-          else {
-            resetChildList()
-          }
-        },
-        onError: () => {
-          notify({ type: 'error', message: t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }) })
-        },
-      },
-    )
-  }, [datasetId, documentId, parentMode, deleteChildSegment, updateSegmentInCache, resetChildList, t, notify])
-
-  const handleUpdateChildChunk = useCallback(async (
-    segmentIdParam: string,
-    childChunkId: string,
-    content: string,
-  ) => {
-    const params: SegmentUpdater = { content: '' }
-    if (!content.trim()) {
-      notify({ type: 'error', message: t('segment.contentEmpty', { ns: 'datasetDocuments' }) })
-      return
-    }
-
-    params.content = content
-
-    eventEmitter?.emit('update-child-segment')
-    await updateChildSegment({ datasetId, documentId, segmentId: segmentIdParam, childChunkId, body: params }, {
-      onSuccess: (res) => {
-        notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
-        onCloseChildSegmentDetail()
-
+    await deleteChildSegment({ datasetId, documentId, segmentId: segmentIdParam, childChunkId }, {
+      onSuccess: () => {
+        toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
         if (parentMode === 'paragraph') {
           // Update parent segment's child_chunks in cache
           updateSegmentInCache(segmentIdParam, seg => ({
             ...seg,
-            child_chunks: seg.child_chunks?.map(childSeg =>
-              childSeg.id === childChunkId
-                ? {
-                    ...childSeg,
-                    content: res.data.content,
-                    type: res.data.type,
-                    word_count: res.data.word_count,
-                    updated_at: res.data.updated_at,
-                  }
-                : childSeg,
-            ),
+            child_chunks: seg.child_chunks?.filter(chunk => chunk.id !== childChunkId),
+          }))
+        }
+        else {
+          resetChildList()
+        }
+      },
+      onError: () => {
+        toast.error(t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }))
+      },
+    })
+  }, [datasetId, documentId, parentMode, deleteChildSegment, updateSegmentInCache, resetChildList, t])
+  const handleUpdateChildChunk = useCallback(async (segmentIdParam: string, childChunkId: string, content: string) => {
+    const params: SegmentUpdater = { content: '' }
+    if (!content.trim()) {
+      toast.error(t('segment.contentEmpty', { ns: 'datasetDocuments' }))
+      return
+    }
+    params.content = content
+    eventEmitter?.emit('update-child-segment')
+    await updateChildSegment({ datasetId, documentId, segmentId: segmentIdParam, childChunkId, body: params }, {
+      onSuccess: (res) => {
+        toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
+        onCloseChildSegmentDetail()
+        if (parentMode === 'paragraph') {
+          // Update parent segment's child_chunks in cache
+          updateSegmentInCache(segmentIdParam, seg => ({
+            ...seg,
+            child_chunks: seg.child_chunks?.map(childSeg => childSeg.id === childChunkId
+              ? {
+                  ...childSeg,
+                  content: res.data.content,
+                  type: res.data.type,
+                  word_count: res.data.word_count,
+                  updated_at: res.data.updated_at,
+                }
+              : childSeg),
           }))
           refreshChunkListDataWithDetailChanged()
         }
@@ -199,8 +147,7 @@ export const useChildSegmentData = (options: UseChildSegmentDataOptions): UseChi
         eventEmitter?.emit('update-child-segment-done')
       },
     })
-  }, [datasetId, documentId, parentMode, updateChildSegment, notify, eventEmitter, onCloseChildSegmentDetail, updateSegmentInCache, updateChildSegmentInCache, refreshChunkListDataWithDetailChanged, t])
-
+  }, [datasetId, documentId, parentMode, updateChildSegment, eventEmitter, onCloseChildSegmentDetail, updateSegmentInCache, updateChildSegmentInCache, refreshChunkListDataWithDetailChanged, t])
   const onSaveNewChildChunk = useCallback((newChildChunk?: ChildChunkDetail) => {
     if (parentMode === 'paragraph') {
       // Update parent segment's child_chunks in cache
@@ -214,18 +161,15 @@ export const useChildSegmentData = (options: UseChildSegmentDataOptions): UseChi
       resetChildList()
     }
   }, [parentMode, currChunkId, updateSegmentInCache, refreshChunkListDataWithDetailChanged, resetChildList])
-
   const viewNewlyAddedChildChunk = useCallback(() => {
     const totalPages = childChunkListData?.total_pages || 0
     const total = childChunkListData?.total || 0
     const newPage = Math.ceil((total + 1) / limit)
     needScrollToBottom.current = true
-
     if (newPage > totalPages)
       return
     resetChildList()
   }, [childChunkListData, limit, resetChildList])
-
   return {
     childSegments,
     isLoadingChildSegmentList,
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 8948f6b547..fb5db4497e 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
@@ -3,28 +3,17 @@ import type { SegmentDetailModel, SegmentsResponse, SegmentUpdater } from '@/mod
 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/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { ChunkingMode } from '@/models/datasets'
 import { usePathname } from '@/next/navigation'
-import {
-  useChunkListAllKey,
-  useChunkListDisabledKey,
-  useChunkListEnabledKey,
-  useDeleteSegment,
-  useDisableSegment,
-  useEnableSegment,
-  useSegmentList,
-  useSegmentListKey,
-  useUpdateSegment,
-} from '@/service/knowledge/use-segment'
+import { useChunkListAllKey, useChunkListDisabledKey, useChunkListEnabledKey, useDeleteSegment, useDisableSegment, useEnableSegment, useSegmentList, useSegmentListKey, useUpdateSegment } from '@/service/knowledge/use-segment'
 import { useInvalid } from '@/service/use-base'
 import { formatNumber } from '@/utils/format'
 import { useDocumentContext } from '../../context'
 import { ProcessStatus } from '../../segment-add'
 
 const DEFAULT_LIMIT = 10
-
 export type UseSegmentListDataOptions = {
   searchValue: string
   selectedStatus: boolean | 'all'
@@ -35,7 +24,6 @@ export type UseSegmentListDataOptions = {
   onCloseSegmentDetail: () => void
   clearSelection: () => void
 }
-
 export type UseSegmentListDataReturn = {
   segments: SegmentDetailModel[]
   isLoadingSegmentList: boolean
@@ -47,51 +35,27 @@ export type UseSegmentListDataReturn = {
   // Operations
   onChangeSwitch: (enable: boolean, segId?: string) => Promise<void>
   onDelete: (segId?: string) => Promise<void>
-  handleUpdateSegment: (
-    segmentId: string,
-    question: string,
-    answer: string,
-    keywords: string[],
-    attachments: FileEntity[],
-    summary?: string,
-    needRegenerate?: boolean,
-  ) => Promise<void>
+  handleUpdateSegment: (segmentId: string, question: string, answer: string, keywords: string[], attachments: FileEntity[], summary?: string, needRegenerate?: boolean) => Promise<void>
   resetList: () => void
   viewNewlyAddedChunk: () => void
   invalidSegmentList: () => void
   updateSegmentInCache: (segmentId: string, updater: (seg: SegmentDetailModel) => SegmentDetailModel) => void
 }
-
 export const useSegmentListData = (options: UseSegmentListDataOptions): UseSegmentListDataReturn => {
-  const {
-    searchValue,
-    selectedStatus,
-    selectedSegmentIds,
-    importStatus,
-    currentPage,
-    limit,
-    onCloseSegmentDetail,
-    clearSelection,
-  } = options
-
+  const { searchValue, selectedStatus, selectedSegmentIds, importStatus, currentPage, limit, onCloseSegmentDetail, clearSelection } = options
   const { t } = useTranslation()
-  const { notify } = useToastContext()
   const pathname = usePathname()
   const { eventEmitter } = useEventEmitterContextContext()
   const queryClient = useQueryClient()
-
   const datasetId = useDocumentContext(s => s.datasetId) || ''
   const documentId = useDocumentContext(s => s.documentId) || ''
   const docForm = useDocumentContext(s => s.docForm)
   const parentMode = useDocumentContext(s => s.parentMode)
-
   const segmentListRef = useRef<HTMLDivElement>(null)
   const needScrollToBottom = useRef(false)
-
   const isFullDocMode = useMemo(() => {
     return docForm === ChunkingMode.parentChild && parentMode === 'full-doc'
   }, [docForm, parentMode])
-
   // Build query params
   const queryParams = useMemo(() => ({
     page: isFullDocMode ? 1 : currentPage,
@@ -99,27 +63,21 @@ export const useSegmentListData = (options: UseSegmentListDataOptions): UseSegme
     keyword: isFullDocMode ? '' : searchValue,
     enabled: selectedStatus,
   }), [isFullDocMode, currentPage, limit, searchValue, selectedStatus])
-
   // Build query key for optimistic updates
-  const currentQueryKey = useMemo(() =>
-    [...useSegmentListKey, datasetId, documentId, queryParams], [datasetId, documentId, queryParams])
-
+  const currentQueryKey = useMemo(() => [...useSegmentListKey, datasetId, documentId, queryParams], [datasetId, documentId, queryParams])
   // Fetch segment list
   const { isLoading: isLoadingSegmentList, data: segmentListData } = useSegmentList({
     datasetId,
     documentId,
     params: queryParams,
   })
-
   // Derive segments from query data
   const segments = useMemo(() => segmentListData?.data || [], [segmentListData])
-
   // Invalidation hooks
   const invalidSegmentList = useInvalid(useSegmentListKey)
   const invalidChunkListAll = useInvalid(useChunkListAllKey)
   const invalidChunkListEnabled = useInvalid(useChunkListEnabledKey)
   const invalidChunkListDisabled = useInvalid(useChunkListDisabledKey)
-
   // Scroll to bottom when needed
   useEffect(() => {
     if (segmentListRef.current && needScrollToBottom.current) {
@@ -127,13 +85,11 @@ export const useSegmentListData = (options: UseSegmentListDataOptions): UseSegme
       needScrollToBottom.current = false
     }
   }, [segments])
-
   // Reset list on pathname change
   useEffect(() => {
     clearSelection()
     invalidSegmentList()
   }, [pathname])
-
   // Reset list on import completion
   useEffect(() => {
     if (importStatus === ProcessStatus.COMPLETED) {
@@ -141,12 +97,10 @@ export const useSegmentListData = (options: UseSegmentListDataOptions): UseSegme
       invalidSegmentList()
     }
   }, [importStatus])
-
   const resetList = useCallback(() => {
     clearSelection()
     invalidSegmentList()
   }, [clearSelection, invalidSegmentList])
-
   const refreshChunkListWithStatusChanged = useCallback(() => {
     if (selectedStatus === 'all') {
       invalidChunkListDisabled()
@@ -156,7 +110,6 @@ export const useSegmentListData = (options: UseSegmentListDataOptions): UseSegme
       invalidSegmentList()
     }
   }, [selectedStatus, invalidChunkListDisabled, invalidChunkListEnabled, invalidSegmentList])
-
   const refreshChunkListDataWithDetailChanged = useCallback(() => {
     const refreshMap: Record<string, () => void> = {
       all: () => {
@@ -174,12 +127,8 @@ export const useSegmentListData = (options: UseSegmentListDataOptions): UseSegme
     }
     refreshMap[String(selectedStatus)]?.()
   }, [selectedStatus, invalidChunkListDisabled, invalidChunkListEnabled, invalidChunkListAll])
-
   // Optimistic update helper using React Query's setQueryData
-  const updateSegmentInCache = useCallback((
-    segmentId: string,
-    updater: (seg: SegmentDetailModel) => SegmentDetailModel,
-  ) => {
+  const updateSegmentInCache = useCallback((segmentId: string, updater: (seg: SegmentDetailModel) => SegmentDetailModel) => {
     queryClient.setQueryData<SegmentsResponse>(currentQueryKey, (old) => {
       if (!old)
         return old
@@ -189,12 +138,8 @@ export const useSegmentListData = (options: UseSegmentListDataOptions): UseSegme
       }
     })
   }, [queryClient, currentQueryKey])
-
   // Batch update helper
-  const updateSegmentsInCache = useCallback((
-    segmentIds: string[],
-    updater: (seg: SegmentDetailModel) => SegmentDetailModel,
-  ) => {
+  const updateSegmentsInCache = useCallback((segmentIds: string[], updater: (seg: SegmentDetailModel) => SegmentDetailModel) => {
     queryClient.setQueryData<SegmentsResponse>(currentQueryKey, (old) => {
       if (!old)
         return old
@@ -204,64 +149,49 @@ export const useSegmentListData = (options: UseSegmentListDataOptions): UseSegme
       }
     })
   }, [queryClient, currentQueryKey])
-
   // Mutations
   const { mutateAsync: enableSegment } = useEnableSegment()
   const { mutateAsync: disableSegment } = useDisableSegment()
   const { mutateAsync: deleteSegment } = useDeleteSegment()
   const { mutateAsync: updateSegment } = useUpdateSegment()
-
   const onChangeSwitch = useCallback(async (enable: boolean, segId?: string) => {
     const operationApi = enable ? enableSegment : disableSegment
     const targetIds = segId ? [segId] : selectedSegmentIds
-
     await operationApi({ datasetId, documentId, segmentIds: targetIds }, {
       onSuccess: () => {
-        notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
+        toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
         updateSegmentsInCache(targetIds, seg => ({ ...seg, enabled: enable }))
         refreshChunkListWithStatusChanged()
       },
       onError: () => {
-        notify({ type: 'error', message: t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }) })
+        toast.error(t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }))
       },
     })
-  }, [datasetId, documentId, selectedSegmentIds, disableSegment, enableSegment, t, notify, updateSegmentsInCache, refreshChunkListWithStatusChanged])
-
+  }, [datasetId, documentId, selectedSegmentIds, disableSegment, enableSegment, t, updateSegmentsInCache, refreshChunkListWithStatusChanged])
   const onDelete = useCallback(async (segId?: string) => {
     const targetIds = segId ? [segId] : selectedSegmentIds
-
     await deleteSegment({ datasetId, documentId, segmentIds: targetIds }, {
       onSuccess: () => {
-        notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
+        toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
         resetList()
         if (!segId)
           clearSelection()
       },
       onError: () => {
-        notify({ type: 'error', message: t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }) })
+        toast.error(t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }))
       },
     })
-  }, [datasetId, documentId, selectedSegmentIds, deleteSegment, resetList, clearSelection, t, notify])
-
-  const handleUpdateSegment = useCallback(async (
-    segmentId: string,
-    question: string,
-    answer: string,
-    keywords: string[],
-    attachments: FileEntity[],
-    summary?: string,
-    needRegenerate = false,
-  ) => {
+  }, [datasetId, documentId, selectedSegmentIds, deleteSegment, resetList, clearSelection, t])
+  const handleUpdateSegment = useCallback(async (segmentId: string, question: string, answer: string, keywords: string[], attachments: FileEntity[], summary?: string, needRegenerate = false) => {
     const params: SegmentUpdater = { content: '', attachment_ids: [] }
-
     // Validate and build params based on doc form
     if (docForm === ChunkingMode.qa) {
       if (!question.trim()) {
-        notify({ type: 'error', message: t('segment.questionEmpty', { ns: 'datasetDocuments' }) })
+        toast.error(t('segment.questionEmpty', { ns: 'datasetDocuments' }))
         return
       }
       if (!answer.trim()) {
-        notify({ type: 'error', message: t('segment.answerEmpty', { ns: 'datasetDocuments' }) })
+        toast.error(t('segment.answerEmpty', { ns: 'datasetDocuments' }))
         return
       }
       params.content = question
@@ -269,36 +199,30 @@ export const useSegmentListData = (options: UseSegmentListDataOptions): UseSegme
     }
     else {
       if (!question.trim()) {
-        notify({ type: 'error', message: t('segment.contentEmpty', { ns: 'datasetDocuments' }) })
+        toast.error(t('segment.contentEmpty', { ns: 'datasetDocuments' }))
         return
       }
       params.content = question
     }
-
     if (keywords.length)
       params.keywords = keywords
-
     if (attachments.length) {
       const notAllUploaded = attachments.some(item => !item.uploadedId)
       if (notAllUploaded) {
-        notify({ type: 'error', message: t('segment.allFilesUploaded', { ns: 'datasetDocuments' }) })
+        toast.error(t('segment.allFilesUploaded', { ns: 'datasetDocuments' }))
         return
       }
       params.attachment_ids = attachments.map(item => item.uploadedId!)
     }
-
     params.summary = summary ?? ''
-
     if (needRegenerate)
       params.regenerate_child_chunks = needRegenerate
-
     eventEmitter?.emit('update-segment')
     await updateSegment({ datasetId, documentId, segmentId, body: params }, {
       onSuccess(res) {
-        notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
+        toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
         if (!needRegenerate)
           onCloseSegmentDetail()
-
         updateSegmentInCache(segmentId, seg => ({
           ...seg,
           answer: res.data.answer,
@@ -320,19 +244,16 @@ export const useSegmentListData = (options: UseSegmentListDataOptions): UseSegme
         eventEmitter?.emit('update-segment-done')
       },
     })
-  }, [datasetId, documentId, docForm, updateSegment, notify, eventEmitter, onCloseSegmentDetail, updateSegmentInCache, refreshChunkListDataWithDetailChanged, t])
-
+  }, [datasetId, documentId, docForm, updateSegment, eventEmitter, onCloseSegmentDetail, updateSegmentInCache, refreshChunkListDataWithDetailChanged, t])
   const viewNewlyAddedChunk = useCallback(() => {
     const totalPages = segmentListData?.total_pages || 0
     const total = segmentListData?.total || 0
     const newPage = Math.ceil((total + 1) / limit)
     needScrollToBottom.current = true
-
     if (newPage > totalPages)
       return
     resetList()
   }, [segmentListData, limit, resetList])
-
   // Compute total text for display
   const totalText = useMemo(() => {
     const isSearch = searchValue !== '' || selectedStatus !== 'all'
@@ -348,7 +269,6 @@ export const useSegmentListData = (options: UseSegmentListDataOptions): UseSegme
     const count = segmentListData?.total || 0
     return `${total} ${t('segment.searchResults', { ns: 'datasetDocuments', count })}`
   }, [segmentListData, docForm, parentMode, searchValue, selectedStatus, t])
-
   return {
     segments,
     isLoadingSegmentList,
diff --git a/web/app/components/datasets/documents/detail/embedding/__tests__/index.spec.tsx b/web/app/components/datasets/documents/detail/embedding/__tests__/index.spec.tsx
index 554de41f87..1a07847a13 100644
--- a/web/app/components/datasets/documents/detail/embedding/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/detail/embedding/__tests__/index.spec.tsx
@@ -5,7 +5,6 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { ToastContext } from '@/app/components/base/toast/context'
 import { ProcessMode } from '@/models/datasets'
 import * as datasetsService from '@/service/datasets'
 import * as useDataset from '@/service/knowledge/use-dataset'
@@ -14,22 +13,24 @@ import { IndexingType } from '../../../../create/step-two'
 import { DocumentContext } from '../../context'
 import EmbeddingDetail from '../index'
 
-const { mockNotify, mockClose } = vi.hoisted(() => ({
-  mockNotify: vi.fn(),
-  mockClose: vi.fn(),
-}))
+const { mockToast } = vi.hoisted(() => {
+  const mockToast = Object.assign(vi.fn(), {
+    success: vi.fn(),
+    error: vi.fn(),
+    warning: vi.fn(),
+    info: vi.fn(),
+    dismiss: vi.fn(),
+    update: vi.fn(),
+    promise: vi.fn(),
+  })
+  return { mockToast }
+})
 
 vi.mock('@/service/datasets')
 vi.mock('@/service/knowledge/use-dataset')
-vi.mock('@/app/components/base/toast/context', async () => {
-  const { createContext } = await vi.importActual<typeof import('use-context-selector')>('use-context-selector')
-  return {
-    ToastContext: createContext({
-      notify: mockNotify,
-      close: mockClose,
-    }),
-  }
-})
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
+}))
 
 const mockFetchIndexingStatus = vi.mocked(datasetsService.fetchIndexingStatus)
 const mockPauseDocIndexing = vi.mocked(datasetsService.pauseDocIndexing)
@@ -47,11 +48,11 @@ const createWrapper = (contextValue: DocumentContextValue = { datasetId: 'ds1',
   const queryClient = createTestQueryClient()
   return ({ children }: { children: ReactNode }) => (
     <QueryClientProvider client={queryClient}>
-      <ToastContext.Provider value={{ notify: mockNotify, close: vi.fn() }}>
+      <>
         <DocumentContext.Provider value={contextValue}>
           {children}
         </DocumentContext.Provider>
-      </ToastContext.Provider>
+      </>
     </QueryClientProvider>
   )
 }
diff --git a/web/app/components/datasets/documents/detail/embedding/index.tsx b/web/app/components/datasets/documents/detail/embedding/index.tsx
index bd344800db..c917ee9906 100644
--- a/web/app/components/datasets/documents/detail/embedding/index.tsx
+++ b/web/app/components/datasets/documents/detail/embedding/index.tsx
@@ -4,8 +4,7 @@ import type { RETRIEVE_METHOD } from '@/types/app'
 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/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { useProcessRule } from '@/service/knowledge/use-dataset'
 import { useDocumentContext } from '../context'
 import { ProgressBar, RuleDetail, SegmentProgress, StatusHeader } from './components'
@@ -19,47 +18,24 @@ type EmbeddingDetailProps = {
   retrievalMethod?: RETRIEVE_METHOD
   detailUpdate: VoidFunction
 }
-
-const EmbeddingDetail: FC<EmbeddingDetailProps> = ({
-  datasetId: dstId,
-  documentId: docId,
-  detailUpdate,
-  indexingType,
-  retrievalMethod,
-}) => {
+const EmbeddingDetail: FC<EmbeddingDetailProps> = ({ datasetId: dstId, documentId: docId, detailUpdate, indexingType, retrievalMethod }) => {
   const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
-
   const contextDatasetId = useDocumentContext(s => s.datasetId)
   const contextDocumentId = useDocumentContext(s => s.documentId)
   const datasetId = dstId ?? contextDatasetId
   const documentId = docId ?? contextDocumentId
-
-  const {
-    data: indexingStatus,
-    isEmbedding,
-    isCompleted,
-    isPaused,
-    isError,
-    percent,
-    resetStatus,
-    refetch,
-  } = useEmbeddingStatus({
+  const { data: indexingStatus, isEmbedding, isCompleted, isPaused, isError, percent, resetStatus, refetch } = useEmbeddingStatus({
     datasetId,
     documentId,
     onComplete: detailUpdate,
   })
-
   const { data: ruleDetail } = useProcessRule(documentId)
-
   const handleSuccess = useCallback(() => {
-    notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
-  }, [notify, t])
-
+    toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
+  }, [t])
   const handleError = useCallback(() => {
-    notify({ type: 'error', message: t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }) })
-  }, [notify, t])
-
+    toast.error(t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }))
+  }, [t])
   const pauseMutation = usePauseIndexing({
     datasetId,
     documentId,
@@ -69,7 +45,6 @@ const EmbeddingDetail: FC<EmbeddingDetailProps> = ({
     },
     onError: handleError,
   })
-
   const resumeMutation = useResumeIndexing({
     datasetId,
     documentId,
@@ -80,49 +55,22 @@ const EmbeddingDetail: FC<EmbeddingDetailProps> = ({
     },
     onError: handleError,
   })
-
   const handlePause = useCallback(() => {
     pauseMutation.mutate()
   }, [pauseMutation])
-
   const handleResume = useCallback(() => {
     resumeMutation.mutate()
   }, [resumeMutation])
-
   return (
     <>
       <div className="flex flex-col gap-y-2 px-16 py-12">
-        <StatusHeader
-          isEmbedding={isEmbedding}
-          isCompleted={isCompleted}
-          isPaused={isPaused}
-          isError={isError}
-          onPause={handlePause}
-          onResume={handleResume}
-          isPauseLoading={pauseMutation.isPending}
-          isResumeLoading={resumeMutation.isPending}
-        />
-        <ProgressBar
-          percent={percent}
-          isEmbedding={isEmbedding}
-          isCompleted={isCompleted}
-          isPaused={isPaused}
-          isError={isError}
-        />
-        <SegmentProgress
-          completedSegments={indexingStatus?.completed_segments}
-          totalSegments={indexingStatus?.total_segments}
-          percent={percent}
-        />
-        <RuleDetail
-          sourceData={ruleDetail}
-          indexingType={indexingType}
-          retrievalMethod={retrievalMethod}
-        />
+        <StatusHeader isEmbedding={isEmbedding} isCompleted={isCompleted} isPaused={isPaused} isError={isError} onPause={handlePause} onResume={handleResume} isPauseLoading={pauseMutation.isPending} isResumeLoading={resumeMutation.isPending} />
+        <ProgressBar percent={percent} isEmbedding={isEmbedding} isCompleted={isCompleted} isPaused={isPaused} isError={isError} />
+        <SegmentProgress completedSegments={indexingStatus?.completed_segments} totalSegments={indexingStatus?.total_segments} percent={percent} />
+        <RuleDetail sourceData={ruleDetail} indexingType={indexingType} retrievalMethod={retrievalMethod} />
       </div>
       <EmbeddingSkeleton />
     </>
   )
 }
-
 export default React.memo(EmbeddingDetail)
diff --git a/web/app/components/datasets/documents/detail/index.tsx b/web/app/components/datasets/documents/detail/index.tsx
index 891c177169..b4ffb37f1f 100644
--- a/web/app/components/datasets/documents/detail/index.tsx
+++ b/web/app/components/datasets/documents/detail/index.tsx
@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import FloatRightContainer from '@/app/components/base/float-right-container'
 import Loading from '@/app/components/base/loading'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import Metadata from '@/app/components/datasets/metadata/metadata-document'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
@@ -31,15 +31,12 @@ type DocumentDetailProps = {
   datasetId: string
   documentId: string
 }
-
 const DocumentDetail: FC<DocumentDetailProps> = ({ datasetId, documentId }) => {
   const router = useRouter()
   const searchParams = useSearchParams()
   const { t } = useTranslation()
-
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
-
   const dataset = useDatasetDetailContextWithSelector(s => s.dataset)
   const embeddingAvailable = !!dataset?.embedding_available
   const [showMetadata, setShowMetadata] = useState(!isMobile)
@@ -50,7 +47,6 @@ const DocumentDetail: FC<DocumentDetailProps> = ({ datasetId, documentId }) => {
   const showBatchModal = () => setBatchModalVisible(true)
   const hideBatchModal = () => setBatchModalVisible(false)
   const resetProcessStatus = () => setImportStatus('')
-
   const { mutateAsync: checkSegmentBatchImportProgress } = useCheckSegmentBatchImportProgress()
   const checkProcess = async (jobID: string) => {
     await checkSegmentBatchImportProgress({ jobID }, {
@@ -59,15 +55,14 @@ const DocumentDetail: FC<DocumentDetailProps> = ({ datasetId, documentId }) => {
         if (res.job_status === ProcessStatus.WAITING || res.job_status === ProcessStatus.PROCESSING)
           setTimeout(() => checkProcess(res.job_id), 2500)
         if (res.job_status === ProcessStatus.ERROR)
-          Toast.notify({ type: 'error', message: `${t('list.batchModal.runError', { ns: 'datasetDocuments' })}` })
+          toast.error(`${t('list.batchModal.runError', { ns: 'datasetDocuments' })}`)
       },
       onError: (e) => {
         const message = 'message' in e ? `: ${e.message}` : ''
-        Toast.notify({ type: 'error', message: `${t('list.batchModal.runError', { ns: 'datasetDocuments' })}${message}` })
+        toast.error(`${t('list.batchModal.runError', { ns: 'datasetDocuments' })}${message}`)
       },
     })
   }
-
   const { mutateAsync: segmentBatchImport } = useSegmentBatchImport()
   const runBatch = async (csv: FileItem) => {
     await segmentBatchImport({
@@ -80,37 +75,30 @@ const DocumentDetail: FC<DocumentDetailProps> = ({ datasetId, documentId }) => {
       },
       onError: (e) => {
         const message = 'message' in e ? `: ${e.message}` : ''
-        Toast.notify({ type: 'error', message: `${t('list.batchModal.runError', { ns: 'datasetDocuments' })}${message}` })
+        toast.error(`${t('list.batchModal.runError', { ns: 'datasetDocuments' })}${message}`)
       },
     })
   }
-
   const { data: documentDetail, error, refetch: detailMutate } = useDocumentDetail({
     datasetId,
     documentId,
     params: { metadata: 'without' },
   })
-
   const { data: documentMetadata } = useDocumentMetadata({
     datasetId,
     documentId,
     params: { metadata: 'only' },
   })
-
   const backToPrev = () => {
     const queryString = searchParams.toString()
     const backPath = `/datasets/${datasetId}/documents${queryString ? `?${queryString}` : ''}`
     router.push(backPath)
   }
-
   const isDetailLoading = !documentDetail && !error
-
   const embedding = ['queuing', 'indexing', 'paused'].includes((documentDetail?.display_status || '').toLowerCase())
-
   const isLegacyDataSourceInfo = (info?: DataSourceInfo): info is LegacyDataSourceInfo => {
     return !!info && 'upload_file' in info
   }
-
   const documentUploadFile = useMemo(() => {
     if (!documentDetail?.data_source_info)
       return undefined
@@ -118,11 +106,9 @@ const DocumentDetail: FC<DocumentDetailProps> = ({ datasetId, documentId }) => {
       return documentDetail.data_source_info.upload_file
     return undefined
   }, [documentDetail?.data_source_info])
-
   const invalidChunkList = useInvalid(useSegmentListKey)
   const invalidChildChunkList = useInvalid(useChildSegmentListKey)
   const invalidDocumentList = useInvalidDocumentList(datasetId)
-
   const handleOperate = (operateName?: string) => {
     invalidDocumentList()
     if (operateName === 'delete') {
@@ -139,21 +125,17 @@ const DocumentDetail: FC<DocumentDetailProps> = ({ datasetId, documentId }) => {
       }
     }
   }
-
   const parentMode = useMemo(() => {
     return documentDetail?.document_process_rule?.rules?.parent_mode || documentDetail?.dataset_process_rule?.rules?.parent_mode || 'paragraph'
   }, [documentDetail?.document_process_rule?.rules?.parent_mode, documentDetail?.dataset_process_rule?.rules?.parent_mode])
-
   const isFullDocMode = useMemo(() => {
     const chunkMode = documentDetail?.doc_form
     return chunkMode === ChunkingMode.parentChild && parentMode === 'full-doc'
   }, [documentDetail?.doc_form, parentMode])
-
   const backButtonLabel = t('operation.back', { ns: 'common' })
   const metadataToggleLabel = `${showMetadata
     ? t('operation.close', { ns: 'common' })
     : t('operation.view', { ns: 'common' })} ${t('metadata.title', { ns: 'datasetDocuments' })}`
-
   return (
     <DocumentContext.Provider value={{
       datasetId,
@@ -164,37 +146,14 @@ const DocumentDetail: FC<DocumentDetailProps> = ({ datasetId, documentId }) => {
     >
       <div className="flex h-full flex-col bg-background-default">
         <div className="flex min-h-16 flex-wrap items-center justify-between border-b border-b-divider-subtle py-2.5 pl-3 pr-4">
-          <button
-            type="button"
-            data-testid="document-detail-back-button"
-            aria-label={backButtonLabel}
-            title={backButtonLabel}
-            onClick={backToPrev}
-            className="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full hover:bg-components-button-tertiary-bg"
-          >
-            <span
-              aria-hidden="true"
-              className="i-ri-arrow-left-line h-4 w-4 text-components-button-ghost-text hover:text-text-tertiary"
-            />
+          <button type="button" data-testid="document-detail-back-button" aria-label={backButtonLabel} title={backButtonLabel} onClick={backToPrev} className="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full hover:bg-components-button-tertiary-bg">
+            <span aria-hidden="true" className="i-ri-arrow-left-line h-4 w-4 text-components-button-ghost-text hover:text-text-tertiary" />
           </button>
-          <DocumentTitle
-            datasetId={datasetId}
-            extension={documentUploadFile?.extension}
-            name={documentDetail?.name}
-            wrapperCls="mr-2"
-            parent_mode={parentMode}
-            chunkingMode={documentDetail?.doc_form as ChunkingMode}
-          />
+          <DocumentTitle datasetId={datasetId} extension={documentUploadFile?.extension} name={documentDetail?.name} wrapperCls="mr-2" parent_mode={parentMode} chunkingMode={documentDetail?.doc_form as ChunkingMode} />
           <div className="flex flex-wrap items-center">
             {embeddingAvailable && documentDetail && !documentDetail.archived && !isFullDocMode && (
               <>
-                <SegmentAdd
-                  importStatus={importStatus}
-                  clearProcessStatus={resetProcessStatus}
-                  showNewSegmentModal={showNewSegmentModal}
-                  showBatchModal={showBatchModal}
-                  embedding={embedding}
-                />
+                <SegmentAdd importStatus={importStatus} clearProcessStatus={resetProcessStatus} showNewSegmentModal={showNewSegmentModal} showBatchModal={showBatchModal} embedding={embedding} />
                 <Divider type="vertical" className="!mx-3 !h-[14px] !bg-divider-regular" />
               </>
             )}
@@ -226,20 +185,10 @@ const DocumentDetail: FC<DocumentDetailProps> = ({ datasetId, documentId }) => {
               onUpdate={handleOperate}
               className="!w-[200px]"
             />
-            <button
-              type="button"
-              data-testid="document-detail-metadata-toggle"
-              aria-label={metadataToggleLabel}
-              aria-pressed={showMetadata}
-              title={metadataToggleLabel}
-              className={style.layoutRightIcon}
-              onClick={() => setShowMetadata(!showMetadata)}
-            >
-              {
-                showMetadata
-                  ? <span aria-hidden="true" className="i-ri-layout-left-2-line h-4 w-4 text-components-button-secondary-text" />
-                  : <span aria-hidden="true" className="i-ri-layout-right-2-line h-4 w-4 text-components-button-secondary-text" />
-              }
+            <button type="button" data-testid="document-detail-metadata-toggle" aria-label={metadataToggleLabel} aria-pressed={showMetadata} title={metadataToggleLabel} className={style.layoutRightIcon} onClick={() => setShowMetadata(!showMetadata)}>
+              {showMetadata
+                ? <span aria-hidden="true" className="i-ri-layout-left-2-line h-4 w-4 text-components-button-secondary-text" />
+                : <span aria-hidden="true" className="i-ri-layout-right-2-line h-4 w-4 text-components-button-secondary-text" />}
             </button>
           </div>
         </div>
@@ -249,42 +198,17 @@ const DocumentDetail: FC<DocumentDetailProps> = ({ datasetId, documentId }) => {
             : (
                 <div className={cn('flex h-full min-w-0 grow flex-col', !embedding && isFullDocMode && 'relative pl-11 pr-11 pt-4', !embedding && !isFullDocMode && 'relative pl-5 pr-11 pt-3')}>
                   {embedding
-                    ? (
-                        <Embedding
-                          detailUpdate={detailMutate}
-                          indexingType={dataset?.indexing_technique}
-                          retrievalMethod={dataset?.retrieval_model_dict?.search_method}
-                        />
-                      )
-                    : (
-                        <Completed
-                          embeddingAvailable={embeddingAvailable}
-                          showNewSegmentModal={newSegmentModalVisible}
-                          onNewSegmentModalChange={setNewSegmentModalVisible}
-                          importStatus={importStatus}
-                          archived={documentDetail?.archived}
-                        />
-                      )}
+                    ? (<Embedding detailUpdate={detailMutate} indexingType={dataset?.indexing_technique} retrievalMethod={dataset?.retrieval_model_dict?.search_method} />)
+                    : (<Completed embeddingAvailable={embeddingAvailable} showNewSegmentModal={newSegmentModalVisible} onNewSegmentModalChange={setNewSegmentModalVisible} importStatus={importStatus} archived={documentDetail?.archived} />)}
                 </div>
               )}
           <FloatRightContainer showClose isOpen={showMetadata} onClose={() => setShowMetadata(false)} isMobile={isMobile} panelClassName="!justify-start" footer={null}>
-            <Metadata
-              className="mr-2 mt-3"
-              datasetId={datasetId}
-              documentId={documentId}
-              docDetail={{ ...documentDetail, ...documentMetadata, doc_type: documentMetadata?.doc_type === 'others' ? '' : documentMetadata?.doc_type } as FullDocumentDetail}
-            />
+            <Metadata className="mr-2 mt-3" datasetId={datasetId} documentId={documentId} docDetail={{ ...documentDetail, ...documentMetadata, doc_type: documentMetadata?.doc_type === 'others' ? '' : documentMetadata?.doc_type } as FullDocumentDetail} />
           </FloatRightContainer>
         </div>
-        <BatchModal
-          isShow={batchModalVisible}
-          onCancel={hideBatchModal}
-          onConfirm={runBatch}
-          docForm={documentDetail?.doc_form as ChunkingMode}
-        />
+        <BatchModal isShow={batchModalVisible} onCancel={hideBatchModal} onConfirm={runBatch} docForm={documentDetail?.doc_form as ChunkingMode} />
       </div>
     </DocumentContext.Provider>
   )
 }
-
 export default DocumentDetail
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 3d7b28c78c..3c66d472dc 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,13 +3,25 @@ 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/context'
 
 import { useMetadataState } from '../use-metadata-state'
 
-const { mockNotify, mockModifyDocMetadata } = vi.hoisted(() => ({
-  mockNotify: vi.fn(),
-  mockModifyDocMetadata: vi.fn(),
+const { mockNotify, mockModifyDocMetadata, mockToast } = vi.hoisted(() => {
+  const mockNotify = vi.fn()
+  const mockToast = Object.assign(mockNotify, {
+    success: vi.fn((message, options) => mockNotify({ type: 'success', message, ...options })),
+    error: vi.fn((message, options) => mockNotify({ type: 'error', message, ...options })),
+    warning: vi.fn((message, options) => mockNotify({ type: 'warning', message, ...options })),
+    info: vi.fn((message, options) => mockNotify({ type: 'info', message, ...options })),
+    dismiss: vi.fn(),
+    update: vi.fn(),
+    promise: vi.fn(),
+  })
+  return { mockNotify, mockModifyDocMetadata: vi.fn(), mockToast }
+})
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
 }))
 
 vi.mock('../../../context', () => ({
@@ -32,9 +44,8 @@ vi.mock('@/utils', () => ({
   },
 }))
 
-// Wrapper that provides ToastContext with the mock notify function
 const wrapper = ({ children }: { children: ReactNode }) =>
-  React.createElement(ToastContext.Provider, { value: { notify: mockNotify, close: vi.fn() }, children })
+  React.createElement(React.Fragment, { children })
 
 type DocDetail = Parameters<typeof useMetadataState>[0]['docDetail']
 
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 f786609981..04d920b459 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
@@ -3,8 +3,7 @@ import type { CommonResponse } from '@/models/common'
 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/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { modifyDocMetadata } from '@/service/datasets'
 import { asyncRunSafe } from '@/utils'
 import { useDocumentContext } from '../../context'
@@ -13,40 +12,31 @@ type MetadataState = {
   documentType?: DocType | ''
   metadata: Record<string, string>
 }
-
 /**
  * Normalize raw doc_type: treat 'others' as empty string.
  */
 const normalizeDocType = (rawDocType: string): DocType | '' => {
   return rawDocType === 'others' ? '' : rawDocType as DocType | ''
 }
-
 type UseMetadataStateOptions = {
   docDetail?: FullDocumentDetail
   onUpdate?: () => void
 }
-
 export function useMetadataState({ docDetail, onUpdate }: UseMetadataStateOptions) {
   const { doc_metadata = {} } = docDetail || {}
   const rawDocType = docDetail?.doc_type ?? ''
   const docType = normalizeDocType(rawDocType)
-
   const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
   const datasetId = useDocumentContext(s => s.datasetId)
   const documentId = useDocumentContext(s => s.documentId)
-
   // If no documentType yet, start in editing + showDocTypes mode
   const [editStatus, setEditStatus] = useState(!docType)
-  const [metadataParams, setMetadataParams] = useState<MetadataState>(
-    docType
-      ? { documentType: docType, metadata: (doc_metadata || {}) as Record<string, string> }
-      : { metadata: {} },
-  )
+  const [metadataParams, setMetadataParams] = useState<MetadataState>(docType
+    ? { documentType: docType, metadata: (doc_metadata || {}) as Record<string, string> }
+    : { metadata: {} })
   const [showDocTypes, setShowDocTypes] = useState(!docType)
   const [tempDocType, setTempDocType] = useState<DocType | ''>('')
   const [saveLoading, setSaveLoading] = useState(false)
-
   // Sync local state when the upstream docDetail changes (e.g. after save or navigation).
   // These setters are intentionally called together to batch-reset multiple pieces
   // of derived editing state that cannot be expressed as pure derived values.
@@ -65,7 +55,6 @@ export function useMetadataState({ docDetail, onUpdate }: UseMetadataStateOption
       })
     }
   }, [docDetail?.doc_type, docDetail?.doc_metadata, docType])
-
   const confirmDocType = () => {
     if (!tempDocType)
       return
@@ -77,24 +66,20 @@ export function useMetadataState({ docDetail, onUpdate }: UseMetadataStateOption
     setEditStatus(true)
     setShowDocTypes(false)
   }
-
   const cancelDocType = () => {
     setTempDocType(metadataParams.documentType ?? '')
     setEditStatus(true)
     setShowDocTypes(false)
   }
-
   const enableEdit = () => {
     setEditStatus(true)
   }
-
   const cancelEdit = () => {
     setMetadataParams({ documentType: docType || '', metadata: { ...(docDetail?.doc_metadata || {}) } })
     setEditStatus(!docType)
     if (!docType)
       setShowDocTypes(true)
   }
-
   const saveMetadata = async () => {
     setSaveLoading(true)
     const [e] = await asyncRunSafe<CommonResponse>(modifyDocMetadata({
@@ -106,18 +91,16 @@ export function useMetadataState({ docDetail, onUpdate }: UseMetadataStateOption
       },
     }) as Promise<CommonResponse>)
     if (!e)
-      notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
+      toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
     else
-      notify({ type: 'error', message: t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }) })
+      toast.error(t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }))
     onUpdate?.()
     setEditStatus(false)
     setSaveLoading(false)
   }
-
   const updateMetadataField = (field: string, value: string) => {
     setMetadataParams(prev => ({ ...prev, metadata: { ...prev.metadata, [field]: value } }))
   }
-
   return {
     docType,
     editStatus,
diff --git a/web/app/components/datasets/documents/status-item/index.tsx b/web/app/components/datasets/documents/status-item/index.tsx
index 8d3abed7cf..3e6f31b40a 100644
--- a/web/app/components/datasets/documents/status-item/index.tsx
+++ b/web/app/components/datasets/documents/status-item/index.tsx
@@ -6,10 +6,9 @@ import { useDebounceFn } from 'ahooks'
 import * as React from 'react'
 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/context'
 import Tooltip from '@/app/components/base/tooltip'
+import { toast } from '@/app/components/base/ui/toast'
 import Indicator from '@/app/components/header/indicator'
 import { useDocumentDelete, useDocumentDisable, useDocumentEnable } from '@/service/knowledge/use-document'
 import { asyncRunSafe } from '@/utils'
@@ -25,7 +24,6 @@ const STATUS_TEXT_COLOR_MAP: ColorMap = {
   yellow: 'text-util-colors-warning-warning-600',
   gray: 'text-text-tertiary',
 }
-
 type StatusItemProps = {
   status: DocumentDisplayStatus
   reverse?: boolean
@@ -40,26 +38,14 @@ type StatusItemProps = {
   datasetId?: string
   onUpdate?: (operationName?: string) => void
 }
-
-const StatusItem = ({
-  status,
-  reverse = false,
-  scene = 'list',
-  textCls = '',
-  errorMessage,
-  datasetId = '',
-  detail,
-  onUpdate,
-}: StatusItemProps) => {
+const StatusItem = ({ status, reverse = false, scene = 'list', textCls = '', errorMessage, datasetId = '', detail, onUpdate }: StatusItemProps) => {
   const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
   const DOC_INDEX_STATUS_MAP = useIndexStatus()
   const localStatus = status.toLowerCase() as keyof typeof DOC_INDEX_STATUS_MAP
   const { enabled = false, archived = false, id = '' } = detail || {}
   const { mutateAsync: enableDocument } = useDocumentEnable()
   const { mutateAsync: disableDocument } = useDocumentDisable()
   const { mutateAsync: deleteDocument } = useDocumentDelete()
-
   const onOperate = async (operationName: OperationName) => {
     let opApi = deleteDocument
     switch (operationName) {
@@ -72,12 +58,13 @@ const StatusItem = ({
     }
     const [e] = await asyncRunSafe<CommonResponse>(opApi({ datasetId, documentId: id }) as Promise<CommonResponse>)
     if (!e) {
-      notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
+      toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
       onUpdate?.(operationName)
     }
-    else { notify({ type: 'error', message: t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }) }) }
+    else {
+      toast.error(t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }))
+    }
   }
-
   const { run: handleSwitch } = useDebounceFn((operationName: OperationName) => {
     if (operationName === 'enable' && enabled)
       return
@@ -85,51 +72,24 @@ const StatusItem = ({
       return
     onOperate(operationName)
   }, { wait: 500 })
-
   const embedding = useMemo(() => {
     return ['queuing', 'indexing', 'paused'].includes(localStatus)
   }, [localStatus])
-
   return (
-    <div className={
-      cn('flex items-center', reverse ? 'flex-row-reverse' : '', scene === 'detail' ? s.statusItemDetail : '')
-    }
-    >
+    <div className={cn('flex items-center', reverse ? 'flex-row-reverse' : '', scene === 'detail' ? s.statusItemDetail : '')}>
       <Indicator color={DOC_INDEX_STATUS_MAP[localStatus]?.color as IndicatorProps['color']} className={reverse ? 'ml-2' : 'mr-2'} />
       <span className={cn(`${STATUS_TEXT_COLOR_MAP[DOC_INDEX_STATUS_MAP[localStatus].color as keyof typeof STATUS_TEXT_COLOR_MAP]} text-sm`, textCls)}>
         {DOC_INDEX_STATUS_MAP[localStatus]?.text}
       </span>
-      {
-        errorMessage && (
-          <Tooltip
-            popupContent={
-              <div className="max-w-[260px] break-all">{errorMessage}</div>
-            }
-            triggerClassName="ml-1 w-4 h-4"
-            triggerTestId="error-tooltip-trigger"
-          />
-        )
-      }
-      {
-        scene === 'detail' && (
-          <div className="ml-1.5 flex items-center justify-between">
-            <Tooltip
-              popupContent={t('list.action.enableWarning', { ns: 'datasetDocuments' })}
-              popupClassName="text-text-secondary system-xs-medium"
-              disabled={!archived}
-            >
-              <Switch
-                value={archived ? false : enabled}
-                onChange={v => !archived && handleSwitch(v ? 'enable' : 'disable')}
-                disabled={embedding || archived}
-                size="md"
-              />
-            </Tooltip>
-          </div>
-        )
-      }
+      {errorMessage && (<Tooltip popupContent={<div className="max-w-[260px] break-all">{errorMessage}</div>} triggerClassName="ml-1 w-4 h-4" triggerTestId="error-tooltip-trigger" />)}
+      {scene === 'detail' && (
+        <div className="ml-1.5 flex items-center justify-between">
+          <Tooltip popupContent={t('list.action.enableWarning', { ns: 'datasetDocuments' })} popupClassName="text-text-secondary system-xs-medium" disabled={!archived}>
+            <Switch value={archived ? false : enabled} onChange={v => !archived && handleSwitch(v ? 'enable' : 'disable')} disabled={embedding || archived} size="md" />
+          </Tooltip>
+        </div>
+      )}
     </div>
   )
 }
-
 export default React.memo(StatusItem)
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 66d9a163be..22de43c9b1 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,10 +12,8 @@ vi.mock('@/service/datasets', () => ({
 }))
 
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/toast/context', () => ({
-  useToastContext: () => ({
-    notify: mockNotify,
-  }),
+vi.mock('@/app/components/base/ui/toast', () => ({
+
 }))
 
 describe('AddExternalAPIModal', () => {
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 809cd432a9..14ac31cb27 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
@@ -1,26 +1,14 @@
 import type { FC } from 'react'
 import type { CreateExternalAPIReq, FormSchema } from '../declarations'
-import {
-  RiBook2Line,
-  RiCloseLine,
-  RiInformation2Line,
-  RiLock2Fill,
-} from '@remixicon/react'
-import {
-  memo,
-  useEffect,
-  useState,
-} from 'react'
+import { RiBook2Line, RiCloseLine, RiInformation2Line, RiLock2Fill } from '@remixicon/react'
+import { memo, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-} from '@/app/components/base/portal-to-follow-elem'
-import { useToastContext } from '@/app/components/base/toast/context'
+import { PortalToFollowElem, PortalToFollowElemContent } from '@/app/components/base/portal-to-follow-elem'
 import Tooltip from '@/app/components/base/tooltip'
+import { toast } from '@/app/components/base/ui/toast'
 import { createExternalAPI } from '@/service/datasets'
 import Form from './Form'
 
@@ -29,10 +17,12 @@ type AddExternalAPIModalProps = {
   onSave: (formValue: CreateExternalAPIReq) => void
   onCancel: () => void
   onEdit?: (formValue: CreateExternalAPIReq) => Promise<void>
-  datasetBindings?: { id: string, name: string }[]
+  datasetBindings?: {
+    id: string
+    name: string
+  }[]
   isEditMode: boolean
 }
-
 const formSchemas: FormSchema[] = [
   {
     variable: 'name',
@@ -59,29 +49,22 @@ const formSchemas: FormSchema[] = [
     required: true,
   },
 ]
-
 const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCancel, datasetBindings, isEditMode, onEdit }) => {
   const { t } = useTranslation()
-  const { notify } = useToastContext()
   const [loading, setLoading] = useState(false)
   const [showConfirm, setShowConfirm] = useState(false)
   const [formData, setFormData] = useState<CreateExternalAPIReq>({ name: '', settings: { endpoint: '', api_key: '' } })
-
   useEffect(() => {
     if (isEditMode && data)
       setFormData(data)
   }, [isEditMode, data])
-
-  const hasEmptyInputs = Object.values(formData).some(value =>
-    typeof value === 'string' ? value.trim() === '' : Object.values(value).some(v => v.trim() === ''),
-  )
+  const hasEmptyInputs = Object.values(formData).some(value => typeof value === 'string' ? value.trim() === '' : Object.values(value).some(v => v.trim() === ''))
   const handleDataChange = (val: CreateExternalAPIReq) => {
     setFormData(val)
   }
-
   const handleSave = async () => {
     if (formData && formData.settings.api_key && formData.settings.api_key?.length < 5) {
-      notify({ type: 'error', message: t('apiBasedExtension.modal.apiKey.lengthError', { ns: 'common' }) })
+      toast.error(t('apiBasedExtension.modal.apiKey.lengthError', { ns: 'common' }))
       setLoading(false)
       return
     }
@@ -93,18 +76,16 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
         const apiKeyToSend = formData.settings.api_key === '[__HIDDEN__]'
           ? '[__HIDDEN__]'
           : formData.settings.api_key
-        await onEdit(
-          {
-            ...formData,
-            settings: { ...formData.settings, api_key: apiKeyToSend },
-          },
-        )
-        notify({ type: 'success', message: 'External API updated successfully' })
+        await onEdit({
+          ...formData,
+          settings: { ...formData.settings, api_key: apiKeyToSend },
+        })
+        toast.success('External API updated successfully')
       }
       else {
         const res = await createExternalAPI({ body: formData })
         if (res && res.id) {
-          notify({ type: 'success', message: 'External API saved successfully' })
+          toast.success('External API saved successfully')
           onSave(res)
         }
       }
@@ -112,13 +93,12 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
     }
     catch (error) {
       console.error('Error saving/updating external API:', error)
-      notify({ type: 'error', message: 'Failed to save/update External API' })
+      toast.error('Failed to save/update External API')
     }
     finally {
       setLoading(false)
     }
   }
-
   return (
     <PortalToFollowElem open>
       <PortalToFollowElemContent className="z-[60] h-full w-full">
@@ -126,9 +106,7 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
           <div className="shadows-shadow-xl relative flex w-[480px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg">
             <div className="flex flex-col items-start gap-2 self-stretch pb-3 pl-6 pr-14 pt-6">
               <div className="grow self-stretch text-text-primary title-2xl-semi-bold">
-                {
-                  isEditMode ? t('editExternalAPIFormTitle', { ns: 'dataset' }) : t('createExternalAPI', { ns: 'dataset' })
-                }
+                {isEditMode ? t('editExternalAPIFormTitle', { ns: 'dataset' }) : t('createExternalAPI', { ns: 'dataset' })}
               </div>
               {isEditMode && (datasetBindings?.length ?? 0) > 0 && (
                 <div className="flex items-center text-text-tertiary system-xs-regular">
@@ -166,12 +144,7 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
             <ActionButton className="absolute right-5 top-5" onClick={onCancel}>
               <RiCloseLine className="h-[18px] w-[18px] shrink-0 text-text-tertiary" />
             </ActionButton>
-            <Form
-              value={formData}
-              onChange={handleDataChange}
-              formSchemas={formSchemas}
-              className="flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3"
-            />
+            <Form value={formData} onChange={handleDataChange} formSchemas={formSchemas} className="flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3" />
             <div className="flex items-center justify-end gap-2 self-stretch p-6 pt-5">
               <Button type="button" variant="secondary" onClick={onCancel}>
                 {t('externalAPIForm.cancel', { ns: 'dataset' })}
@@ -184,7 +157,6 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
                     setShowConfirm(true)
                   else if (isEditMode && onEdit)
                     onEdit(formData)
-
                   else
                     handleSave()
                 }}
@@ -198,31 +170,16 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
             >
               <RiLock2Fill className="h-3 w-3 text-text-quaternary" />
               {t('externalAPIForm.encrypted.front', { ns: 'dataset' })}
-              <a
-                className="text-text-accent"
-                target="_blank"
-                rel="noopener noreferrer"
-                href="https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html"
-              >
+              <a className="text-text-accent" target="_blank" rel="noopener noreferrer" href="https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html">
                 PKCS1_OAEP
               </a>
               {t('externalAPIForm.encrypted.end', { ns: 'dataset' })}
             </div>
           </div>
-          {showConfirm && (datasetBindings?.length ?? 0) > 0 && (
-            <Confirm
-              isShow={showConfirm}
-              type="warning"
-              title="Warning"
-              content={`${t('editExternalAPIConfirmWarningContent.front', { ns: 'dataset' })} ${datasetBindings?.length} ${t('editExternalAPIConfirmWarningContent.end', { ns: 'dataset' })}`}
-              onCancel={() => setShowConfirm(false)}
-              onConfirm={handleSave}
-            />
-          )}
+          {showConfirm && (datasetBindings?.length ?? 0) > 0 && (<Confirm isShow={showConfirm} type="warning" title="Warning" content={`${t('editExternalAPIConfirmWarningContent.front', { ns: 'dataset' })} ${datasetBindings?.length} ${t('editExternalAPIConfirmWarningContent.end', { ns: 'dataset' })}`} onCancel={() => setShowConfirm(false)} onConfirm={handleSave} />)}
         </div>
       </PortalToFollowElemContent>
     </PortalToFollowElem>
   )
 }
-
 export default memo(AddExternalAPIModal)
diff --git a/web/app/components/datasets/hit-testing/__tests__/modify-retrieval-modal.spec.tsx b/web/app/components/datasets/hit-testing/__tests__/modify-retrieval-modal.spec.tsx
index dafa81971f..4640e42a7e 100644
--- a/web/app/components/datasets/hit-testing/__tests__/modify-retrieval-modal.spec.tsx
+++ b/web/app/components/datasets/hit-testing/__tests__/modify-retrieval-modal.spec.tsx
@@ -4,6 +4,23 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { RETRIEVE_METHOD } from '@/types/app'
 import ModifyRetrievalModal from '../modify-retrieval-modal'
 
+const { mockToast } = vi.hoisted(() => {
+  const mockToast = Object.assign(vi.fn(), {
+    success: vi.fn(),
+    error: vi.fn(),
+    warning: vi.fn(),
+    info: vi.fn(),
+    dismiss: vi.fn(),
+    update: vi.fn(),
+    promise: vi.fn(),
+  })
+  return { mockToast }
+})
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
+}))
+
 vi.mock('@/app/components/base/button', () => ({
   default: ({ children, onClick, variant }: { children: React.ReactNode, onClick: () => void, variant?: string }) => (
     <button data-testid={variant === 'primary' ? 'save-button' : 'cancel-button'} onClick={onClick}>
@@ -41,10 +58,6 @@ vi.mock('@/context/i18n', () => ({
   useDocLink: () => (path: string) => `https://docs.dify.ai${path}`,
 }))
 
-vi.mock('../../../base/toast', () => ({
-  default: { notify: vi.fn() },
-}))
-
 vi.mock('../../settings/utils', () => ({
   checkShowMultiModalTip: () => false,
 }))
diff --git a/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx b/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
index a942c402ed..da0ee7761f 100644
--- a/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
+++ b/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
@@ -7,13 +7,13 @@ import * as React from 'react'
 import { useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
+import { toast } from '@/app/components/base/ui/toast'
 import { isReRankModelSelected } from '@/app/components/datasets/common/check-rerank-model'
 import EconomicalRetrievalMethodConfig from '@/app/components/datasets/common/economical-retrieval-method-config'
 import RetrievalMethodConfig from '@/app/components/datasets/common/retrieval-method-config'
 import { useModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { useDocLink } from '@/context/i18n'
-import Toast from '../../base/toast'
 import { ModelTypeEnum } from '../../header/account-setting/model-provider-page/declarations'
 import { checkShowMultiModalTip } from '../settings/utils'
 
@@ -24,43 +24,30 @@ type Props = {
   onHide: () => void
   onSave: (value: RetrievalConfig) => void
 }
-
-const ModifyRetrievalModal: FC<Props> = ({
-  indexMethod,
-  value,
-  isShow,
-  onHide,
-  onSave,
-}) => {
+const ModifyRetrievalModal: FC<Props> = ({ indexMethod, value, isShow, onHide, onSave }) => {
   const ref = useRef(null)
   const { t } = useTranslation()
   const docLink = useDocLink()
   const [retrievalConfig, setRetrievalConfig] = useState(value)
   const embeddingModel = useDatasetDetailContextWithSelector(state => state.dataset?.embedding_model)
   const embeddingModelProvider = useDatasetDetailContextWithSelector(state => state.dataset?.embedding_model_provider)
-
   // useClickAway(() => {
   //   if (ref)
   //     onHide()
   // }, ref)
-
   const { data: embeddingModelList } = useModelList(ModelTypeEnum.textEmbedding)
   const { data: rerankModelList } = useModelList(ModelTypeEnum.rerank)
-
   const handleSave = () => {
-    if (
-      !isReRankModelSelected({
-        rerankModelList,
-        retrievalConfig,
-        indexMethod,
-      })
-    ) {
-      Toast.notify({ type: 'error', message: t('datasetConfig.rerankModelRequired', { ns: 'appDebug' }) })
+    if (!isReRankModelSelected({
+      rerankModelList,
+      retrievalConfig,
+      indexMethod,
+    })) {
+      toast.error(t('datasetConfig.rerankModelRequired', { ns: 'appDebug' }))
       return
     }
     onSave(retrievalConfig)
   }
-
   const showMultiModalTip = useMemo(() => {
     return checkShowMultiModalTip({
       embeddingModel: {
@@ -77,10 +64,8 @@ const ModifyRetrievalModal: FC<Props> = ({
       rerankModelList,
     })
   }, [embeddingModelProvider, embeddingModel, retrievalConfig.reranking_enable, retrievalConfig.reranking_model, indexMethod, embeddingModelList, rerankModelList])
-
   if (!isShow)
     return null
-
   return (
     <div
       className="flex w-full flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9"
@@ -93,22 +78,14 @@ const ModifyRetrievalModal: FC<Props> = ({
         <div className="text-base font-semibold text-text-primary">
           <div>{t('form.retrievalSetting.title', { ns: 'datasetSettings' })}</div>
           <div className="text-xs font-normal leading-[18px] text-text-tertiary">
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              href={docLink('/use-dify/knowledge/create-knowledge/setting-indexing-methods')}
-              className="text-text-accent"
-            >
+            <a target="_blank" rel="noopener noreferrer" href={docLink('/use-dify/knowledge/create-knowledge/setting-indexing-methods')} className="text-text-accent">
               {t('form.retrievalSetting.learnMore', { ns: 'datasetSettings' })}
             </a>
             {t('form.retrievalSetting.description', { ns: 'datasetSettings' })}
           </div>
         </div>
         <div className="flex">
-          <div
-            onClick={onHide}
-            className="flex h-8 w-8 cursor-pointer items-center justify-center"
-          >
+          <div onClick={onHide} className="flex h-8 w-8 cursor-pointer items-center justify-center">
             <RiCloseLine className="h-4 w-4 text-text-tertiary" />
           </div>
         </div>
@@ -119,19 +96,8 @@ const ModifyRetrievalModal: FC<Props> = ({
           {t('form.retrievalSetting.method', { ns: 'datasetSettings' })}
         </div>
         {indexMethod === 'high_quality'
-          ? (
-              <RetrievalMethodConfig
-                value={retrievalConfig}
-                onChange={setRetrievalConfig}
-                showMultiModalTip={showMultiModalTip}
-              />
-            )
-          : (
-              <EconomicalRetrievalMethodConfig
-                value={retrievalConfig}
-                onChange={setRetrievalConfig}
-              />
-            )}
+          ? (<RetrievalMethodConfig value={retrievalConfig} onChange={setRetrievalConfig} showMultiModalTip={showMultiModalTip} />)
+          : (<EconomicalRetrievalMethodConfig value={retrievalConfig} onChange={setRetrievalConfig} />)}
       </div>
       <div className="flex justify-end p-4 pt-2">
         <Button className="mr-2 shrink-0" onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/__tests__/modal.spec.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/__tests__/modal.spec.tsx
index 178f437517..f61079cfa2 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/__tests__/modal.spec.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/__tests__/modal.spec.tsx
@@ -30,7 +30,7 @@ vi.mock('../../hooks/use-check-metadata-name', () => ({
 
 // Mock Toast to verify notifications
 const mockToastNotify = vi.fn()
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/ui/toast', () => ({
   default: {
     notify: (args: unknown) => mockToastNotify(args),
   },
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
index 802e2e99fb..e50a45e7c5 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
@@ -7,7 +7,7 @@ import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { useCreateMetaData } from '@/service/knowledge/use-metadata'
 import Button from '../../../base/button'
 import Checkbox from '../../../base/checkbox'
@@ -21,7 +21,6 @@ import AddedMetadataItem from './add-row'
 import EditMetadataBatchItem from './edit-row'
 
 const i18nPrefix = 'metadata.batchEditMetadata'
-
 type Props = {
   datasetId: string
   documentNum: number
@@ -30,15 +29,7 @@ type Props = {
   onHide: () => void
   onShowManage: () => void
 }
-
-const EditMetadataBatchModal: FC<Props> = ({
-  datasetId,
-  documentNum,
-  list,
-  onSave,
-  onHide,
-  onShowManage,
-}) => {
+const EditMetadataBatchModal: FC<Props> = ({ datasetId, documentNum, list, onSave, onHide, onShowManage }) => {
   const { t } = useTranslation()
   const [templeList, setTempleList] = useState<MetadataItemWithEdit[]>(list)
   const handleTemplesChange = useCallback((payload: MetadataItemWithEdit) => {
@@ -62,7 +53,6 @@ const EditMetadataBatchModal: FC<Props> = ({
     })
     setTempleList(newTempleList)
   }, [templeList])
-
   const handleItemReset = useCallback((id: string) => {
     const newTempleList = produce(templeList, (draft) => {
       const index = draft.findIndex(i => i.id === id)
@@ -74,25 +64,17 @@ const EditMetadataBatchModal: FC<Props> = ({
     })
     setTempleList(newTempleList)
   }, [list, templeList])
-
   const { checkName } = useCheckMetadataName()
   const { mutate: doAddMetaData } = useCreateMetaData(datasetId)
   const handleAddMetaData = useCallback(async (payload: BuiltInMetadataItem) => {
     const errorMsg = checkName(payload.name).errorMsg
     if (errorMsg) {
-      Toast.notify({
-        message: errorMsg,
-        type: 'error',
-      })
+      toast.error(errorMsg)
       return Promise.reject(new Error(errorMsg))
     }
     await doAddMetaData(payload)
-    Toast.notify({
-      type: 'success',
-      message: t('api.actionSuccess', { ns: 'common' }),
-    })
+    toast.success(t('api.actionSuccess', { ns: 'common' }))
   }, [checkName, doAddMetaData, t])
-
   const [addedList, setAddedList] = useState<MetadataItemWithEdit[]>([])
   const handleAddedListChange = useCallback((payload: MetadataItemWithEdit) => {
     const newAddedList = addedList.map(i => i.id === payload.id ? payload : i)
@@ -104,32 +86,16 @@ const EditMetadataBatchModal: FC<Props> = ({
       setAddedList(newAddedList)
     }
   }, [addedList])
-
   const [isApplyToAllSelectDocument, setIsApplyToAllSelectDocument] = useState(false)
-
   const handleSave = useCallback(() => {
     onSave(templeList.filter(item => item.updateType !== UpdateType.delete), addedList, isApplyToAllSelectDocument)
   }, [templeList, addedList, isApplyToAllSelectDocument, onSave])
   return (
-    <Modal
-      title={t(`${i18nPrefix}.editMetadata`, { ns: 'dataset' })}
-      isShow
-      closable
-      onClose={onHide}
-      className="!max-w-[640px]"
-    >
+    <Modal title={t(`${i18nPrefix}.editMetadata`, { ns: 'dataset' })} isShow closable onClose={onHide} className="!max-w-[640px]">
       <div className="mt-1 text-text-accent system-xs-medium">{t(`${i18nPrefix}.editDocumentsNum`, { ns: 'dataset', num: documentNum })}</div>
       <div className="max-h-[305px] overflow-y-auto overflow-x-hidden">
         <div className="mt-4 space-y-2">
-          {templeList.map(item => (
-            <EditMetadataBatchItem
-              key={item.id}
-              payload={item}
-              onChange={handleTemplesChange}
-              onRemove={handleTempleItemRemove}
-              onReset={handleItemReset}
-            />
-          ))}
+          {templeList.map(item => (<EditMetadataBatchItem key={item.id} payload={item} onChange={handleTemplesChange} onRemove={handleTempleItemRemove} onReset={handleItemReset} />))}
         </div>
         <div className="mt-4 pl-[18px]">
           <div className="flex items-center">
@@ -137,27 +103,10 @@ const EditMetadataBatchModal: FC<Props> = ({
             <Divider bgStyle="gradient" />
           </div>
           <div className="mt-2 space-y-2">
-            {addedList.map((item, i) => (
-              <AddedMetadataItem
-                key={i}
-                payload={item}
-                onChange={handleAddedListChange}
-                onRemove={handleAddedItemRemove(i)}
-              />
-            ))}
+            {addedList.map((item, i) => (<AddedMetadataItem key={i} payload={item} onChange={handleAddedListChange} onRemove={handleAddedItemRemove(i)} />))}
           </div>
           <div className="mt-3">
-            <SelectMetadataModal
-              datasetId={datasetId}
-              popupPlacement="top-start"
-              popupOffset={{ mainAxis: 4, crossAxis: 0 }}
-              trigger={
-                <AddMetadataButton />
-              }
-              onSave={handleAddMetaData}
-              onSelect={data => setAddedList([...addedList, data as MetadataItemWithEdit])}
-              onManage={onShowManage}
-            />
+            <SelectMetadataModal datasetId={datasetId} popupPlacement="top-start" popupOffset={{ mainAxis: 4, crossAxis: 0 }} trigger={<AddMetadataButton />} onSave={handleAddMetaData} onSelect={data => setAddedList([...addedList, data as MetadataItemWithEdit])} onManage={onShowManage} />
           </div>
         </div>
       </div>
@@ -166,25 +115,17 @@ const EditMetadataBatchModal: FC<Props> = ({
         <div className="flex select-none items-center">
           <Checkbox checked={isApplyToAllSelectDocument} onCheck={() => setIsApplyToAllSelectDocument(!isApplyToAllSelectDocument)} id="apply-to-all" />
           <div className="ml-2 mr-1 text-text-secondary system-xs-medium">{t(`${i18nPrefix}.applyToAllSelectDocument`, { ns: 'dataset' })}</div>
-          <Tooltip popupContent={
-            <div className="max-w-[240px]">{t(`${i18nPrefix}.applyToAllSelectDocumentTip`, { ns: 'dataset' })}</div>
-          }
-          >
+          <Tooltip popupContent={<div className="max-w-[240px]">{t(`${i18nPrefix}.applyToAllSelectDocumentTip`, { ns: 'dataset' })}</div>}>
             <div className="cursor-pointer p-px">
               <RiQuestionLine className="size-3.5 text-text-tertiary" />
             </div>
           </Tooltip>
         </div>
         <div className="flex items-center space-x-2">
-          <Button
-            onClick={onHide}
-          >
+          <Button onClick={onHide}>
             {t('operation.cancel', { ns: 'common' })}
           </Button>
-          <Button
-            onClick={handleSave}
-            variant="primary"
-          >
+          <Button onClick={handleSave} variant="primary">
             {t('operation.save', { ns: 'common' })}
           </Button>
         </div>
diff --git a/web/app/components/datasets/metadata/hooks/__tests__/use-batch-edit-document-metadata.spec.ts b/web/app/components/datasets/metadata/hooks/__tests__/use-batch-edit-document-metadata.spec.ts
index 30ff2aa2aa..0d4f6648c5 100644
--- a/web/app/components/datasets/metadata/hooks/__tests__/use-batch-edit-document-metadata.spec.ts
+++ b/web/app/components/datasets/metadata/hooks/__tests__/use-batch-edit-document-metadata.spec.ts
@@ -34,7 +34,7 @@ vi.mock('@/service/knowledge/use-metadata', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/ui/toast', () => ({
   default: {
     notify: vi.fn(),
   },
diff --git a/web/app/components/datasets/metadata/hooks/__tests__/use-edit-dataset-metadata.spec.ts b/web/app/components/datasets/metadata/hooks/__tests__/use-edit-dataset-metadata.spec.ts
index 5712e82b71..f15f9712f8 100644
--- a/web/app/components/datasets/metadata/hooks/__tests__/use-edit-dataset-metadata.spec.ts
+++ b/web/app/components/datasets/metadata/hooks/__tests__/use-edit-dataset-metadata.spec.ts
@@ -40,7 +40,7 @@ vi.mock('@/service/knowledge/use-metadata', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/ui/toast', () => ({
   default: {
     notify: vi.fn(),
   },
diff --git a/web/app/components/datasets/metadata/hooks/__tests__/use-metadata-document.spec.ts b/web/app/components/datasets/metadata/hooks/__tests__/use-metadata-document.spec.ts
index 351f7fac08..424f8e24e6 100644
--- a/web/app/components/datasets/metadata/hooks/__tests__/use-metadata-document.spec.ts
+++ b/web/app/components/datasets/metadata/hooks/__tests__/use-metadata-document.spec.ts
@@ -81,7 +81,7 @@ vi.mock('@/hooks/use-metadata', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/ui/toast', () => ({
   default: {
     notify: vi.fn(),
   },
diff --git a/web/app/components/datasets/metadata/hooks/use-batch-edit-document-metadata.ts b/web/app/components/datasets/metadata/hooks/use-batch-edit-document-metadata.ts
index 84e6496859..b0feea8c56 100644
--- a/web/app/components/datasets/metadata/hooks/use-batch-edit-document-metadata.ts
+++ b/web/app/components/datasets/metadata/hooks/use-batch-edit-document-metadata.ts
@@ -3,7 +3,7 @@ import type { SimpleDocumentDetail } from '@/models/datasets'
 import { useBoolean } from 'ahooks'
 import { t } from 'i18next'
 import { useMemo } from 'react'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { useBatchUpdateDocMetadata } from '@/service/knowledge/use-metadata'
 import { UpdateType } from '../types'
 
@@ -13,18 +13,8 @@ type Props = {
   selectedDocumentIds?: string[]
   onUpdate: () => void
 }
-
-const useBatchEditDocumentMetadata = ({
-  datasetId,
-  docList,
-  selectedDocumentIds,
-  onUpdate,
-}: Props) => {
-  const [isShowEditModal, {
-    setTrue: showEditModal,
-    setFalse: hideEditModal,
-  }] = useBoolean(false)
-
+const useBatchEditDocumentMetadata = ({ datasetId, docList, selectedDocumentIds, onUpdate }: Props) => {
+  const [isShowEditModal, { setTrue: showEditModal, setFalse: hideEditModal }] = useBoolean(false)
   const metaDataList: MetadataItemWithValue[][] = (() => {
     const res: MetadataItemWithValue[][] = []
     docList.forEach((item) => {
@@ -36,11 +26,12 @@ const useBatchEditDocumentMetadata = ({
     })
     return res
   })()
-
   // To check is key has multiple value
   const originalList: MetadataItemInBatchEdit[] = useMemo(() => {
-    const idNameValue: Record<string, { value: string | number | null, isMultipleValue: boolean }> = {}
-
+    const idNameValue: Record<string, {
+      value: string | number | null
+      isMultipleValue: boolean
+    }> = {}
     const res: MetadataItemInBatchEdit[] = []
     metaDataList.forEach((metaData) => {
       metaData.forEach((item) => {
@@ -53,7 +44,6 @@ const useBatchEditDocumentMetadata = ({
             isMultipleValue: false,
           }
         }
-
         if (itemInRes && itemInRes.value !== item.value) {
           idNameValue[item.id].isMultipleValue = true
           itemInRes.isMultipleValue = true
@@ -70,14 +60,12 @@ const useBatchEditDocumentMetadata = ({
     })
     return res
   }, [metaDataList])
-
   const toCleanMetadataItem = (item: MetadataItemWithValue | MetadataItemWithEdit | MetadataItemInBatchEdit): MetadataItemWithValue => ({
     id: item.id,
     name: item.name,
     type: item.type,
     value: item.value ?? null,
   })
-
   const formateToBackendList = (editedList: MetadataItemWithEdit[], addedList: MetadataItemInBatchEdit[], isApplyToAllSelectDocument: boolean) => {
     const updatedList = editedList.filter((editedItem) => {
       return editedItem.updateType === UpdateType.changeValue
@@ -88,7 +76,6 @@ const useBatchEditDocumentMetadata = ({
         return true
       return false
     })
-
     // Use selectedDocumentIds if available, otherwise fall back to docList
     const documentIds = selectedDocumentIds || docList.map(doc => doc.id)
     const res: MetadataBatchEditToServer = documentIds.map((documentId) => {
@@ -107,14 +94,12 @@ const useBatchEditDocumentMetadata = ({
             newMetadataList.push(toCleanMetadataItem(editedItem))
         })
       }
-
       newMetadataList = newMetadataList.map((item) => {
         const editedItem = updatedList.find(i => i.id === item.id)
         if (editedItem)
           return toCleanMetadataItem(editedItem)
         return item
       })
-
       return {
         document_id: documentId,
         metadata_list: newMetadataList,
@@ -123,9 +108,7 @@ const useBatchEditDocumentMetadata = ({
     })
     return res
   }
-
   const { mutateAsync } = useBatchUpdateDocMetadata()
-
   const handleSave = async (editedList: MetadataItemInBatchEdit[], addedList: MetadataItemInBatchEdit[], isApplyToAllSelectDocument: boolean) => {
     const backendList = formateToBackendList(editedList, addedList, isApplyToAllSelectDocument)
     await mutateAsync({
@@ -134,12 +117,8 @@ const useBatchEditDocumentMetadata = ({
     })
     onUpdate()
     hideEditModal()
-    Toast.notify({
-      type: 'success',
-      message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }),
-    })
+    toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
   }
-
   return {
     isShowEditModal,
     showEditModal,
@@ -148,5 +127,4 @@ const useBatchEditDocumentMetadata = ({
     handleSave,
   }
 }
-
 export default useBatchEditDocumentMetadata
diff --git a/web/app/components/datasets/metadata/hooks/use-edit-dataset-metadata.ts b/web/app/components/datasets/metadata/hooks/use-edit-dataset-metadata.ts
index 39210fe7ef..8f7ce0ab25 100644
--- a/web/app/components/datasets/metadata/hooks/use-edit-dataset-metadata.ts
+++ b/web/app/components/datasets/metadata/hooks/use-edit-dataset-metadata.ts
@@ -3,26 +3,20 @@ import type { DataSet } from '@/models/datasets'
 import { useBoolean } from 'ahooks'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { useBuiltInMetaDataFields, useCreateMetaData, useDatasetMetaData, useDeleteMetaData, useRenameMeta, useUpdateBuiltInStatus } from '@/service/knowledge/use-metadata'
 import { isShowManageMetadataLocalStorageKey } from '../types'
 import useCheckMetadataName from './use-check-metadata-name'
 
-const useEditDatasetMetadata = ({
-  datasetId,
-  // dataset,
-  onUpdateDocList,
-}: {
+const useEditDatasetMetadata = ({ datasetId,
+// dataset,
+  onUpdateDocList }: {
   datasetId: string
   dataset?: DataSet
   onUpdateDocList: () => void
 }) => {
   const { t } = useTranslation()
-  const [isShowEditModal, {
-    setTrue: showEditModal,
-    setFalse: hideEditModal,
-  }] = useBoolean(false)
-
+  const [isShowEditModal, { setTrue: showEditModal, setFalse: hideEditModal }] = useBoolean(false)
   useEffect(() => {
     const isShowManageMetadata = localStorage.getItem(isShowManageMetadataLocalStorageKey)
     if (isShowManageMetadata) {
@@ -30,44 +24,34 @@ const useEditDatasetMetadata = ({
       localStorage.removeItem(isShowManageMetadataLocalStorageKey)
     }
   }, [])
-
   const { data: datasetMetaData } = useDatasetMetaData(datasetId)
   const { mutate: doAddMetaData } = useCreateMetaData(datasetId)
   const { checkName } = useCheckMetadataName()
   const handleAddMetaData = useCallback(async (payload: BuiltInMetadataItem) => {
     const errorMsg = checkName(payload.name).errorMsg
     if (errorMsg) {
-      Toast.notify({
-        message: errorMsg,
-        type: 'error',
-      })
+      toast.error(errorMsg)
       return Promise.reject(new Error(errorMsg))
     }
     await doAddMetaData(payload)
   }, [checkName, doAddMetaData])
-
   const { mutate: doRenameMetaData } = useRenameMeta(datasetId)
   const handleRename = useCallback(async (payload: MetadataItemWithValueLength) => {
     const errorMsg = checkName(payload.name).errorMsg
     if (errorMsg) {
-      Toast.notify({
-        message: errorMsg,
-        type: 'error',
-      })
+      toast.error(errorMsg)
       return Promise.reject(new Error(errorMsg))
     }
     await doRenameMetaData(payload)
     onUpdateDocList()
   }, [checkName, doRenameMetaData, onUpdateDocList])
-
   const { mutateAsync: doDeleteMetaData } = useDeleteMetaData(datasetId)
   const handleDeleteMetaData = useCallback(async (metaDataId: string) => {
     await doDeleteMetaData(metaDataId)
     onUpdateDocList()
   }, [doDeleteMetaData, onUpdateDocList])
-
   const [builtInEnabled, setBuiltInEnabled] = useState(datasetMetaData?.built_in_field_enabled)
-  useEffect(() => { // wait for api response to set the right value
+  useEffect(() => {
     setBuiltInEnabled(datasetMetaData?.built_in_field_enabled)
   }, [datasetMetaData])
   const { mutateAsync: toggleBuiltInStatus } = useUpdateBuiltInStatus(datasetId)
@@ -85,12 +69,8 @@ const useEditDatasetMetadata = ({
     setBuiltInEnabled: async (enable: boolean) => {
       await toggleBuiltInStatus(enable)
       setBuiltInEnabled(enable)
-      Toast.notify({
-        message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }),
-        type: 'success',
-      })
+      toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
     },
   }
 }
-
 export default useEditDatasetMetadata
diff --git a/web/app/components/datasets/metadata/hooks/use-metadata-document.ts b/web/app/components/datasets/metadata/hooks/use-metadata-document.ts
index fc490b8dba..2e9edbfa75 100644
--- a/web/app/components/datasets/metadata/hooks/use-metadata-document.ts
+++ b/web/app/components/datasets/metadata/hooks/use-metadata-document.ts
@@ -3,7 +3,7 @@ import type { FullDocumentDetail } from '@/models/datasets'
 import { get } from 'es-toolkit/compat'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { useDatasetDetailContext } from '@/context/dataset-detail'
 import { useLanguages, useMetadataMap } from '@/hooks/use-metadata'
 import { useBatchUpdateDocMetadata, useCreateMetaData, useDatasetMetaData, useDocumentMetaData } from '@/service/knowledge/use-metadata'
@@ -15,26 +15,17 @@ type Props = {
   documentId: string
   docDetail: FullDocumentDetail
 }
-
-const useMetadataDocument = ({
-  datasetId,
-  documentId,
-  docDetail,
-}: Props) => {
+const useMetadataDocument = ({ datasetId, documentId, docDetail }: Props) => {
   const { t } = useTranslation()
-
   const { dataset } = useDatasetDetailContext()
   const embeddingAvailable = !!dataset?.embedding_available
-
   const { mutateAsync } = useBatchUpdateDocMetadata()
   const { checkName } = useCheckMetadataName()
-
   const [isEdit, setIsEdit] = useState(false)
   const { data: documentDetail } = useDocumentMetaData({
     datasetId,
     documentId,
   })
-
   const allList = documentDetail?.doc_metadata || []
   const list = allList.filter(item => item.id !== 'built-in')
   const builtList = allList.filter(item => item.id === 'built-in')
@@ -45,26 +36,18 @@ const useMetadataDocument = ({
       const index = prev.findIndex(item => item.id === metaData.id)
       if (index === -1)
         return [...prev, metaData]
-
       return prev
     })
   }, [])
   const handleAddMetaData = useCallback(async (payload: BuiltInMetadataItem) => {
     const errorMsg = checkName(payload.name).errorMsg
     if (errorMsg) {
-      Toast.notify({
-        message: errorMsg,
-        type: 'error',
-      })
+      toast.error(errorMsg)
       return Promise.reject(new Error(errorMsg))
     }
     await doAddMetaData(payload)
-    Toast.notify({
-      type: 'success',
-      message: t('api.actionSuccess', { ns: 'common' }),
-    })
+    toast.success(t('api.actionSuccess', { ns: 'common' }))
   }, [checkName, doAddMetaData, t])
-
   const hasData = list.length > 0
   const handleSave = async () => {
     await mutateAsync({
@@ -75,40 +58,30 @@ const useMetadataDocument = ({
       }],
     })
     setIsEdit(false)
-    Toast.notify({
-      type: 'success',
-      message: t('api.actionSuccess', { ns: 'common' }),
-    })
+    toast.success(t('api.actionSuccess', { ns: 'common' }))
   }
-
   const handleCancel = () => {
     setTempList(list)
     setIsEdit(false)
   }
-
   const startToEdit = () => {
     setTempList(list)
     setIsEdit(true)
   }
-
   // built in enabled is set in dataset
   const { data: datasetMetaData } = useDatasetMetaData(datasetId)
   const builtInEnabled = datasetMetaData?.built_in_field_enabled
-
   // old metadata and technical params
   const metadataMap = useMetadataMap()
   const languageMap = useLanguages()
-
   const getReadOnlyMetaData = (mainField: 'originInfo' | 'technicalParameters') => {
     const fieldMap = metadataMap[mainField]?.subFieldsMap
     const sourceData = docDetail
     const getTargetMap = (field: string) => {
       if (field === 'language')
         return languageMap
-
       return {} as any
     }
-
     const getTargetValue = (field: string) => {
       const val = get(sourceData, field, '')
       if (!val && val !== 0)
@@ -128,13 +101,10 @@ const useMetadataDocument = ({
         value: getTargetValue(key),
       }
     })
-
     return fieldList
   }
-
   const originInfo = getReadOnlyMetaData('originInfo')
   const technicalParameters = getReadOnlyMetaData('technicalParameters')
-
   return {
     embeddingAvailable,
     isEdit,
@@ -154,5 +124,4 @@ const useMetadataDocument = ({
     technicalParameters,
   }
 }
-
 export default useMetadataDocument
diff --git a/web/app/components/datasets/metadata/metadata-dataset/__tests__/dataset-metadata-drawer.spec.tsx b/web/app/components/datasets/metadata/metadata-dataset/__tests__/dataset-metadata-drawer.spec.tsx
index ae4264cbea..900c8014f2 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/__tests__/dataset-metadata-drawer.spec.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/__tests__/dataset-metadata-drawer.spec.tsx
@@ -23,7 +23,7 @@ vi.mock('../../hooks/use-check-metadata-name', () => ({
 }))
 
 const mockToastNotify = vi.fn()
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/ui/toast', () => ({
   default: {
     notify: (args: unknown) => mockToastNotify(args),
   },
diff --git a/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx b/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
index 1d4c99ffd6..4f04ffdd93 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
@@ -12,15 +12,14 @@ import Drawer from '@/app/components/base/drawer'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import Switch from '@/app/components/base/switch'
-import Toast from '@/app/components/base/toast'
 import Tooltip from '@/app/components/base/tooltip'
+import { toast } from '@/app/components/base/ui/toast'
 import CreateModal from '@/app/components/datasets/metadata/metadata-dataset/create-metadata-modal'
 import { cn } from '@/utils/classnames'
 import { getIcon } from '../utils/get-icon'
 import Field from './field'
 
 const i18nPrefix = 'metadata.datasetMetadata'
-
 type Props = {
   userMetadata: MetadataItemWithValueLength[]
   builtInMetadata: BuiltInMetadataItem[]
@@ -31,7 +30,6 @@ type Props = {
   onRename: (payload: MetadataItemWithValueLength) => void
   onRemove: (metaDataId: string) => void
 }
-
 type ItemProps = {
   readonly?: boolean
   disabled?: boolean
@@ -39,46 +37,22 @@ type ItemProps = {
   onRename?: () => void
   onDelete?: () => void
 }
-const Item: FC<ItemProps> = ({
-  readonly,
-  disabled,
-  payload,
-  onRename,
-  onDelete,
-}) => {
+const Item: FC<ItemProps> = ({ readonly, disabled, payload, onRename, onDelete }) => {
   const { t } = useTranslation()
   const Icon = getIcon(payload.type)
-
   const handleRename = useCallback(() => {
     onRename?.()
   }, [onRename])
-
   const deleteBtnRef = useRef<HTMLDivElement>(null)
   const isDeleteHovering = useHover(deleteBtnRef)
-  const [isShowDeleteConfirm, {
-    setTrue: showDeleteConfirm,
-    setFalse: hideDeleteConfirm,
-  }] = useBoolean(false)
+  const [isShowDeleteConfirm, { setTrue: showDeleteConfirm, setFalse: hideDeleteConfirm }] = useBoolean(false)
   const handleDelete = useCallback(() => {
     hideDeleteConfirm()
     onDelete?.()
   }, [hideDeleteConfirm, onDelete])
-
   return (
-    <div
-      key={payload.name}
-      className={cn(
-        !readonly && !disabled && 'group/item cursor-pointer hover:shadow-xs',
-        'rounded-md border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg',
-        isDeleteHovering && 'border border-state-destructive-border bg-state-destructive-hover',
-      )}
-    >
-      <div
-        className={cn(
-          'flex h-8 items-center justify-between px-2',
-          disabled && 'opacity-30', // not include border and bg
-        )}
-      >
+    <div key={payload.name} className={cn(!readonly && !disabled && 'group/item cursor-pointer hover:shadow-xs', 'rounded-md border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg', isDeleteHovering && 'border border-state-destructive-border bg-state-destructive-hover')}>
+      <div className={cn('flex h-8 items-center justify-between px-2', disabled && 'opacity-30')}>
         <div className="flex h-full items-center space-x-1 text-text-tertiary">
           <Icon className="size-4 shrink-0" />
           <div className="max-w-[250px] truncate text-text-primary system-sm-medium">{payload.name}</div>
@@ -95,31 +69,12 @@ const Item: FC<ItemProps> = ({
             <RiDeleteBinLine className="size-4 cursor-pointer" onClick={showDeleteConfirm} />
           </div>
         </div>
-        {isShowDeleteConfirm && (
-          <Confirm
-            isShow
-            type="warning"
-            title={t('metadata.datasetMetadata.deleteTitle', { ns: 'dataset' })}
-            content={t('metadata.datasetMetadata.deleteContent', { ns: 'dataset', name: payload.name })}
-            onConfirm={handleDelete}
-            onCancel={hideDeleteConfirm}
-          />
-        )}
+        {isShowDeleteConfirm && (<Confirm isShow type="warning" title={t('metadata.datasetMetadata.deleteTitle', { ns: 'dataset' })} content={t('metadata.datasetMetadata.deleteContent', { ns: 'dataset', name: payload.name })} onConfirm={handleDelete} onCancel={hideDeleteConfirm} />)}
       </div>
     </div>
   )
 }
-
-const DatasetMetadataDrawer: FC<Props> = ({
-  userMetadata,
-  builtInMetadata,
-  isBuiltInEnabled,
-  onIsBuiltInEnabledChange,
-  onClose,
-  onAdd,
-  onRename,
-  onRemove,
-}) => {
+const DatasetMetadataDrawer: FC<Props> = ({ userMetadata, builtInMetadata, isBuiltInEnabled, onIsBuiltInEnabledChange, onClose, onAdd, onRename, onRemove }) => {
   const { t } = useTranslation()
   const [isShowRenameModal, setIsShowRenameModal] = useState(false)
   const [currPayload, setCurrPayload] = useState<MetadataItemWithValueLength | null>(null)
@@ -131,17 +86,12 @@ const DatasetMetadataDrawer: FC<Props> = ({
       setIsShowRenameModal(true)
     }
   }, [setCurrPayload, setIsShowRenameModal])
-
   const [open, setOpen] = useState(false)
   const handleAdd = useCallback(async (data: MetadataItemWithValueLength) => {
     await onAdd(data)
-    Toast.notify({
-      type: 'success',
-      message: t('api.actionSuccess', { ns: 'common' }),
-    })
+    toast.success(t('api.actionSuccess', { ns: 'common' }))
     setOpen(false)
   }, [onAdd, t])
-
   const handleRenamed = useCallback(async () => {
     const item = userMetadata.find(p => p.id === currPayload?.id)
     if (item) {
@@ -149,33 +99,18 @@ const DatasetMetadataDrawer: FC<Props> = ({
         ...item,
         name: templeName,
       })
-      Toast.notify({
-        type: 'success',
-        message: t('api.actionSuccess', { ns: 'common' }),
-      })
+      toast.success(t('api.actionSuccess', { ns: 'common' }))
     }
     setIsShowRenameModal(false)
   }, [userMetadata, currPayload?.id, onRename, templeName, t])
-
   const handleDelete = useCallback((payload: MetadataItemWithValueLength) => {
     return async () => {
       await onRemove(payload.id)
-      Toast.notify({
-        type: 'success',
-        message: t('api.actionSuccess', { ns: 'common' }),
-      })
+      toast.success(t('api.actionSuccess', { ns: 'common' }))
     }
   }, [onRemove, t])
-
   return (
-    <Drawer
-      isOpen={true}
-      onClose={onClose}
-      showClose
-      title={t('metadata.metadata', { ns: 'dataset' })}
-      footer={null}
-      panelClassName="px-4 block !max-w-[420px] my-2 rounded-l-2xl"
-    >
+    <Drawer isOpen={true} onClose={onClose} showClose title={t('metadata.metadata', { ns: 'dataset' })} footer={null} panelClassName="px-4 block !max-w-[420px] my-2 rounded-l-2xl">
       <div className="h-full overflow-y-auto">
         <div className="text-text-tertiary system-sm-regular">{t(`${i18nPrefix}.description`, { ns: 'dataset' })}</div>
         <CreateModal
@@ -192,44 +127,23 @@ const DatasetMetadataDrawer: FC<Props> = ({
         />
 
         <div className="mt-3 space-y-1">
-          {userMetadata.map(payload => (
-            <Item
-              key={payload.id}
-              payload={payload}
-              onRename={handleRename(payload)}
-              onDelete={handleDelete(payload)}
-            />
-          ))}
+          {userMetadata.map(payload => (<Item key={payload.id} payload={payload} onRename={handleRename(payload)} onDelete={handleDelete(payload)} />))}
         </div>
 
         <div className="mt-3 flex h-6 items-center">
-          <Switch
-            value={isBuiltInEnabled}
-            onChange={onIsBuiltInEnabledChange}
-          />
+          <Switch value={isBuiltInEnabled} onChange={onIsBuiltInEnabledChange} />
           <div className="ml-2 mr-0.5 text-text-secondary system-sm-semibold">{t(`${i18nPrefix}.builtIn`, { ns: 'dataset' })}</div>
           <Tooltip popupContent={<div className="max-w-[100px]">{t(`${i18nPrefix}.builtInDescription`, { ns: 'dataset' })}</div>} />
         </div>
 
         <div className="mt-1 space-y-1">
-          {builtInMetadata.map(payload => (
-            <Item
-              key={payload.name}
-              readonly
-              disabled={!isBuiltInEnabled}
-              payload={payload as MetadataItemWithValueLength}
-            />
-          ))}
+          {builtInMetadata.map(payload => (<Item key={payload.name} readonly disabled={!isBuiltInEnabled} payload={payload as MetadataItemWithValueLength} />))}
         </div>
 
         {isShowRenameModal && (
           <Modal isShow title={t(`${i18nPrefix}.rename`, { ns: 'dataset' })} onClose={() => setIsShowRenameModal(false)}>
             <Field label={t(`${i18nPrefix}.name`, { ns: 'dataset' })} className="mt-4">
-              <Input
-                value={templeName}
-                onChange={e => setTempleName(e.target.value)}
-                placeholder={t(`${i18nPrefix}.namePlaceholder`, { ns: 'dataset' })}
-              />
+              <Input value={templeName} onChange={e => setTempleName(e.target.value)} placeholder={t(`${i18nPrefix}.namePlaceholder`, { ns: 'dataset' })} />
             </Field>
             <div className="mt-4 flex justify-end">
               <Button
@@ -241,11 +155,7 @@ const DatasetMetadataDrawer: FC<Props> = ({
               >
                 {t('operation.cancel', { ns: 'common' })}
               </Button>
-              <Button
-                onClick={handleRenamed}
-                variant="primary"
-                disabled={!templeName}
-              >
+              <Button onClick={handleRenamed} variant="primary" disabled={!templeName}>
                 {t('operation.save', { ns: 'common' })}
               </Button>
             </div>
diff --git a/web/app/components/datasets/rename-modal/__tests__/index.spec.tsx b/web/app/components/datasets/rename-modal/__tests__/index.spec.tsx
index a29fc0a74c..dbae959d8d 100644
--- a/web/app/components/datasets/rename-modal/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/rename-modal/__tests__/index.spec.tsx
@@ -4,18 +4,28 @@ import { IndexingType } from '@/app/components/datasets/create/step-two'
 import { ChunkingMode, DatasetPermission, DataSourceType } from '@/models/datasets'
 import RenameDatasetModal from '../index'
 
+const { mockToast } = vi.hoisted(() => {
+  const mockToast = Object.assign(vi.fn(), {
+    success: vi.fn(),
+    error: vi.fn(),
+    warning: vi.fn(),
+    info: vi.fn(),
+    dismiss: vi.fn(),
+    update: vi.fn(),
+    promise: vi.fn(),
+  })
+  return { mockToast }
+})
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
+}))
+
 const mockUpdateDatasetSetting = vi.fn()
 vi.mock('@/service/datasets', () => ({
   updateDatasetSetting: (params: unknown) => mockUpdateDatasetSetting(params),
 }))
 
-const mockToastNotify = vi.fn()
-vi.mock('../../../base/toast', () => ({
-  default: {
-    notify: (params: unknown) => mockToastNotify(params),
-  },
-}))
-
 // Mock AppIcon - simplified mock to enable testing onClick callback
 vi.mock('../../../base/app-icon', () => ({
   default: ({ onClick }: { onClick?: () => void }) => (
@@ -474,10 +484,7 @@ describe('RenameDatasetModal', () => {
       })
 
       await waitFor(() => {
-        expect(mockToastNotify).toHaveBeenCalledWith({
-          type: 'success',
-          message: 'common.actionMsg.modifiedSuccessfully',
-        })
+        expect(mockToast.success).toHaveBeenCalledWith('common.actionMsg.modifiedSuccessfully')
       })
     })
   })
@@ -495,10 +502,7 @@ describe('RenameDatasetModal', () => {
       })
 
       await waitFor(() => {
-        expect(mockToastNotify).toHaveBeenCalledWith({
-          type: 'error',
-          message: 'datasetSettings.form.nameError',
-        })
+        expect(mockToast.error).toHaveBeenCalledWith('datasetSettings.form.nameError')
       })
     })
 
@@ -514,10 +518,7 @@ describe('RenameDatasetModal', () => {
       })
 
       await waitFor(() => {
-        expect(mockToastNotify).toHaveBeenCalledWith({
-          type: 'error',
-          message: 'datasetSettings.form.nameError',
-        })
+        expect(mockToast.error).toHaveBeenCalledWith('datasetSettings.form.nameError')
       })
     })
 
@@ -548,10 +549,7 @@ describe('RenameDatasetModal', () => {
       })
 
       await waitFor(() => {
-        expect(mockToastNotify).toHaveBeenCalledWith({
-          type: 'error',
-          message: 'common.actionMsg.modifiedUnsuccessfully',
-        })
+        expect(mockToast.error).toHaveBeenCalledWith('common.actionMsg.modifiedUnsuccessfully')
       })
     })
 
@@ -567,10 +565,7 @@ describe('RenameDatasetModal', () => {
       })
 
       await waitFor(() => {
-        expect(mockToastNotify).toHaveBeenCalledWith({
-          type: 'error',
-          message: 'common.actionMsg.modifiedUnsuccessfully',
-        })
+        expect(mockToast.error).toHaveBeenCalledWith('common.actionMsg.modifiedUnsuccessfully')
       })
 
       expect(handleSuccess).not.toHaveBeenCalled()
@@ -588,7 +583,7 @@ describe('RenameDatasetModal', () => {
       })
 
       await waitFor(() => {
-        expect(mockToastNotify).toHaveBeenCalled()
+        expect(mockToast.error).toHaveBeenCalled()
       })
 
       expect(handleClose).not.toHaveBeenCalled()
@@ -606,7 +601,7 @@ describe('RenameDatasetModal', () => {
 
       // Wait for error handling to complete
       await waitFor(() => {
-        expect(mockToastNotify).toHaveBeenCalled()
+        expect(mockToast.error).toHaveBeenCalled()
       })
 
       // Save button should be enabled again
@@ -639,10 +634,7 @@ describe('RenameDatasetModal', () => {
       })
 
       // Should not throw error when onSuccess is undefined
-      expect(mockToastNotify).toHaveBeenCalledWith({
-        type: 'success',
-        message: 'common.actionMsg.modifiedSuccessfully',
-      })
+      expect(mockToast.success).toHaveBeenCalledWith('common.actionMsg.modifiedSuccessfully')
     })
 
     it('should maintain callback identity across renders', async () => {
@@ -1139,10 +1131,7 @@ describe('RenameDatasetModal', () => {
       })
 
       // After success, the modal closes, but if it didn't, button would be re-enabled
-      expect(mockToastNotify).toHaveBeenCalledWith({
-        type: 'success',
-        message: 'common.actionMsg.modifiedSuccessfully',
-      })
+      expect(mockToast.success).toHaveBeenCalledWith('common.actionMsg.modifiedSuccessfully')
     })
 
     it('should re-enable save button after failed save', async () => {
@@ -1156,10 +1145,7 @@ describe('RenameDatasetModal', () => {
       })
 
       await waitFor(() => {
-        expect(mockToastNotify).toHaveBeenCalledWith({
-          type: 'error',
-          message: 'common.actionMsg.modifiedUnsuccessfully',
-        })
+        expect(mockToast.error).toHaveBeenCalledWith('common.actionMsg.modifiedUnsuccessfully')
       })
 
       // Button should be re-enabled after error
diff --git a/web/app/components/datasets/rename-modal/index.tsx b/web/app/components/datasets/rename-modal/index.tsx
index 106e35c4ac..ca3d09b00b 100644
--- a/web/app/components/datasets/rename-modal/index.tsx
+++ b/web/app/components/datasets/rename-modal/index.tsx
@@ -1,5 +1,4 @@
 'use client'
-
 import type { MouseEventHandler } from 'react'
 import type { AppIconSelection } from '../../base/app-icon-picker'
 import type { DataSet } from '@/models/datasets'
@@ -11,11 +10,11 @@ import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import Textarea from '@/app/components/base/textarea'
+import { toast } from '@/app/components/base/ui/toast'
 import { updateDatasetSetting } from '@/service/datasets'
 import { cn } from '@/utils/classnames'
 import AppIcon from '../../base/app-icon'
 import AppIconPicker from '../../base/app-icon-picker'
-import Toast from '../../base/toast'
 
 type RenameDatasetModalProps = {
   show: boolean
@@ -23,7 +22,6 @@ type RenameDatasetModalProps = {
   onSuccess?: () => void
   onClose: () => void
 }
-
 const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDatasetModalProps) => {
   const { t } = useTranslation()
   const [loading, setLoading] = useState(false)
@@ -31,41 +29,36 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
   const [description, setDescription] = useState<string>(dataset.description)
   const externalKnowledgeId = dataset.external_knowledge_info.external_knowledge_id
   const externalKnowledgeApiId = dataset.external_knowledge_info.external_knowledge_api_id
-  const [appIcon, setAppIcon] = useState<AppIconSelection>(
-    dataset.icon_info?.icon_type === 'image'
-      ? { type: 'image' as const, url: dataset.icon_info?.icon_url || '', fileId: dataset.icon_info?.icon || '' }
-      : { type: 'emoji' as const, icon: dataset.icon_info?.icon || '', background: dataset.icon_info?.icon_background || '' },
-  )
+  const [appIcon, setAppIcon] = useState<AppIconSelection>(dataset.icon_info?.icon_type === 'image'
+    ? { type: 'image' as const, url: dataset.icon_info?.icon_url || '', fileId: dataset.icon_info?.icon || '' }
+    : { type: 'emoji' as const, icon: dataset.icon_info?.icon || '', background: dataset.icon_info?.icon_background || '' })
   const [showAppIconPicker, setShowAppIconPicker] = useState(false)
-  const previousAppIcon = useRef<AppIconSelection>(
-    dataset.icon_info?.icon_type === 'image'
-      ? { type: 'image' as const, url: dataset.icon_info?.icon_url || '', fileId: dataset.icon_info?.icon || '' }
-      : { type: 'emoji' as const, icon: dataset.icon_info?.icon || '', background: dataset.icon_info?.icon_background || '' },
-  )
-
+  const previousAppIcon = useRef<AppIconSelection>(dataset.icon_info?.icon_type === 'image'
+    ? { type: 'image' as const, url: dataset.icon_info?.icon_url || '', fileId: dataset.icon_info?.icon || '' }
+    : { type: 'emoji' as const, icon: dataset.icon_info?.icon || '', background: dataset.icon_info?.icon_background || '' })
   const handleOpenAppIconPicker = useCallback(() => {
     setShowAppIconPicker(true)
     previousAppIcon.current = appIcon
   }, [appIcon])
-
   const handleSelectAppIcon = useCallback((icon: AppIconSelection) => {
     setAppIcon(icon)
     setShowAppIconPicker(false)
   }, [])
-
   const handleCloseAppIconPicker = useCallback(() => {
     setAppIcon(previousAppIcon.current)
     setShowAppIconPicker(false)
   }, [])
-
   const onConfirm: MouseEventHandler = useCallback(async () => {
     if (!name.trim()) {
-      Toast.notify({ type: 'error', message: t('form.nameError', { ns: 'datasetSettings' }) })
+      toast.error(t('form.nameError', { ns: 'datasetSettings' }))
       return
     }
     try {
       setLoading(true)
-      const body: Partial<DataSet> & { external_knowledge_id?: string, external_knowledge_api_id?: string } = {
+      const body: Partial<DataSet> & {
+        external_knowledge_id?: string
+        external_knowledge_api_id?: string
+      } = {
         name,
         description,
         icon_info: {
@@ -83,25 +76,20 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
         datasetId: dataset.id,
         body,
       })
-      Toast.notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
+      toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
       if (onSuccess)
         onSuccess()
       onClose()
     }
     catch {
-      Toast.notify({ type: 'error', message: t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }) })
+      toast.error(t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }))
     }
     finally {
       setLoading(false)
     }
   }, [appIcon, description, dataset.id, externalKnowledgeApiId, externalKnowledgeId, name, onClose, onSuccess, t])
-
   return (
-    <Modal
-      className="w-[520px] max-w-[520px] rounded-xl px-8 py-6"
-      isShow={show}
-      onClose={noop}
-    >
+    <Modal className="w-[520px] max-w-[520px] rounded-xl px-8 py-6" isShow={show} onClose={noop}>
       <div className="flex items-center justify-between pb-2">
         <div className="text-xl font-medium leading-[30px] text-text-primary">{t('title', { ns: 'datasetSettings' })}</div>
         <div className="cursor-pointer p-2" onClick={onClose}>
@@ -114,22 +102,8 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
             {t('form.name', { ns: 'datasetSettings' })}
           </div>
           <div className="flex items-center gap-x-2">
-            <AppIcon
-              size="medium"
-              onClick={handleOpenAppIconPicker}
-              className="cursor-pointer"
-              iconType={appIcon.type}
-              icon={appIcon.type === 'image' ? appIcon.fileId : appIcon.icon}
-              background={appIcon.type === 'image' ? undefined : appIcon.background}
-              imageUrl={appIcon.type === 'image' ? appIcon.url : undefined}
-              showEditIcon
-            />
-            <Input
-              value={name}
-              onChange={e => setName(e.target.value)}
-              className="h-9 grow"
-              placeholder={t('form.namePlaceholder', { ns: 'datasetSettings' }) || ''}
-            />
+            <AppIcon size="medium" onClick={handleOpenAppIconPicker} className="cursor-pointer" iconType={appIcon.type} icon={appIcon.type === 'image' ? appIcon.fileId : appIcon.icon} background={appIcon.type === 'image' ? undefined : appIcon.background} imageUrl={appIcon.type === 'image' ? appIcon.url : undefined} showEditIcon />
+            <Input value={name} onChange={e => setName(e.target.value)} className="h-9 grow" placeholder={t('form.namePlaceholder', { ns: 'datasetSettings' }) || ''} />
           </div>
         </div>
         <div className={cn('flex flex-col py-4')}>
@@ -137,12 +111,7 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
             {t('form.desc', { ns: 'datasetSettings' })}
           </div>
           <div className="w-full">
-            <Textarea
-              value={description}
-              onChange={e => setDescription(e.target.value)}
-              className="resize-none"
-              placeholder={t('form.descPlaceholder', { ns: 'datasetSettings' }) || ''}
-            />
+            <Textarea value={description} onChange={e => setDescription(e.target.value)} className="resize-none" placeholder={t('form.descPlaceholder', { ns: 'datasetSettings' }) || ''} />
           </div>
         </div>
       </div>
@@ -150,14 +119,8 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
         <Button className="mr-2" onClick={onClose}>{t('operation.cancel', { ns: 'common' })}</Button>
         <Button disabled={loading} variant="primary" onClick={onConfirm}>{t('operation.save', { ns: 'common' })}</Button>
       </div>
-      {showAppIconPicker && (
-        <AppIconPicker
-          onSelect={handleSelectAppIcon}
-          onClose={handleCloseAppIconPicker}
-        />
-      )}
+      {showAppIconPicker && (<AppIconPicker onSelect={handleSelectAppIcon} onClose={handleCloseAppIconPicker} />)}
     </Modal>
   )
 }
-
 export default RenameDatasetModal
diff --git a/web/app/components/explore/create-app-modal/index.tsx b/web/app/components/explore/create-app-modal/index.tsx
index 32ab285b34..8953abf02f 100644
--- a/web/app/components/explore/create-app-modal/index.tsx
+++ b/web/app/components/explore/create-app-modal/index.tsx
@@ -12,7 +12,7 @@ import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import Switch from '@/app/components/base/switch'
 import Textarea from '@/app/components/base/textarea'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { useProviderContext } from '@/context/provider-context'
 import { AppModeEnum } from '@/types/app'
@@ -81,7 +81,7 @@ const CreateAppModal = ({
 
   const submit = useCallback(() => {
     if (!name.trim()) {
-      Toast.notify({ type: 'error', message: t('appCustomize.nameRequired', { ns: 'explore' }) })
+      toast(t('appCustomize.nameRequired', { ns: 'explore' }), { type: 'error' })
       return
     }
     const isValid = maxActiveRequestsInput.trim() !== '' && !isNaN(Number(maxActiveRequestsInput))
diff --git a/web/app/components/header/account-dropdown/__tests__/compliance.spec.tsx b/web/app/components/header/account-dropdown/__tests__/compliance.spec.tsx
index 92c399be3a..01f3460e7d 100644
--- a/web/app/components/header/account-dropdown/__tests__/compliance.spec.tsx
+++ b/web/app/components/header/account-dropdown/__tests__/compliance.spec.tsx
@@ -2,13 +2,13 @@ import type { ModalContextState } from '@/context/modal-context'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/app/components/base/ui/dropdown-menu'
+import { toast } from '@/app/components/base/ui/toast'
 import { Plan } from '@/app/components/billing/type'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { useModalContext } from '@/context/modal-context'
 import { baseProviderContextValue, useProviderContext } from '@/context/provider-context'
 import { getDocDownloadUrl } from '@/service/common'
 import { downloadUrl } from '@/utils/download'
-import Toast from '../../../base/toast'
 import Compliance from '../compliance'
 
 vi.mock('@/context/provider-context', async (importOriginal) => {
@@ -38,10 +38,14 @@ vi.mock('@/utils/download', () => ({
 describe('Compliance', () => {
   const mockSetShowPricingModal = vi.fn()
   const mockSetShowAccountSettingModal = vi.fn()
+  const toastSuccessSpy = vi.spyOn(toast, 'success').mockReturnValue('toast-success')
+  const toastErrorSpy = vi.spyOn(toast, 'error').mockReturnValue('toast-error')
   let queryClient: QueryClient
 
   beforeEach(() => {
     vi.clearAllMocks()
+    toastSuccessSpy.mockClear()
+    toastErrorSpy.mockClear()
     queryClient = new QueryClient({
       defaultOptions: {
         queries: { retry: false },
@@ -59,8 +63,6 @@ describe('Compliance', () => {
       setShowPricingModal: mockSetShowPricingModal,
       setShowAccountSettingModal: mockSetShowAccountSettingModal,
     } as unknown as ModalContextState)
-
-    vi.spyOn(Toast, 'notify').mockImplementation(() => ({}))
   })
 
   const renderWithQueryClient = (ui: React.ReactElement) => {
@@ -158,10 +160,7 @@ describe('Compliance', () => {
       await waitFor(() => {
         expect(getDocDownloadUrl).toHaveBeenCalled()
         expect(downloadUrl).toHaveBeenCalledWith({ url: mockUrl })
-        expect(Toast.notify).toHaveBeenCalledWith(expect.objectContaining({
-          type: 'success',
-          message: 'common.operation.downloadSuccess',
-        }))
+        expect(toastSuccessSpy).toHaveBeenCalledWith('common.operation.downloadSuccess')
       })
     })
 
@@ -185,10 +184,7 @@ describe('Compliance', () => {
       // Assert
       await waitFor(() => {
         expect(getDocDownloadUrl).toHaveBeenCalled()
-        expect(Toast.notify).toHaveBeenCalledWith(expect.objectContaining({
-          type: 'error',
-          message: 'common.operation.downloadFailed',
-        }))
+        expect(toastErrorSpy).toHaveBeenCalledWith('common.operation.downloadFailed')
       })
       expect(consoleSpy).toHaveBeenCalled()
       consoleSpy.mockRestore()
diff --git a/web/app/components/header/account-dropdown/compliance.tsx b/web/app/components/header/account-dropdown/compliance.tsx
index fc1d27ace5..fbd969b801 100644
--- a/web/app/components/header/account-dropdown/compliance.tsx
+++ b/web/app/components/header/account-dropdown/compliance.tsx
@@ -3,6 +3,7 @@ import { useMutation } from '@tanstack/react-query'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger } from '@/app/components/base/ui/dropdown-menu'
+import { toast } from '@/app/components/base/ui/toast'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { Plan } from '@/app/components/billing/type'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
@@ -17,7 +18,6 @@ import Soc2 from '../../base/icons/src/public/common/Soc2'
 import SparklesSoft from '../../base/icons/src/public/common/SparklesSoft'
 import PremiumBadge from '../../base/premium-badge'
 import Spinner from '../../base/spinner'
-import Toast from '../../base/toast'
 import { MenuItemContent } from './menu-item-content'
 
 enum DocName {
@@ -26,7 +26,6 @@ enum DocName {
   ISO_27001 = 'ISO_27001',
   GDPR = 'GDPR',
 }
-
 type ComplianceDocActionVisualProps = {
   isCurrentPlanCanDownload: boolean
   isPending: boolean
@@ -34,33 +33,17 @@ type ComplianceDocActionVisualProps = {
   downloadText: string
   upgradeText: string
 }
-
-function ComplianceDocActionVisual({
-  isCurrentPlanCanDownload,
-  isPending,
-  tooltipText,
-  downloadText,
-  upgradeText,
-}: ComplianceDocActionVisualProps) {
+function ComplianceDocActionVisual({ isCurrentPlanCanDownload, isPending, tooltipText, downloadText, upgradeText }: ComplianceDocActionVisualProps) {
   if (isCurrentPlanCanDownload) {
     return (
-      <div
-        aria-hidden
-        data-disabled={isPending || undefined}
-        className={cn(
-          'btn btn-small btn-secondary pointer-events-none flex items-center gap-[1px]',
-          isPending && 'cursor-not-allowed',
-        )}
-      >
+      <div aria-hidden data-disabled={isPending || undefined} className={cn('btn btn-small btn-secondary pointer-events-none flex items-center gap-[1px]', isPending && 'cursor-not-allowed')}>
         <span className="i-ri-arrow-down-circle-line size-[14px] text-components-button-secondary-text-disabled" />
         <span className="px-[3px] text-components-button-secondary-text system-xs-medium">{downloadText}</span>
         {isPending && <Spinner loading={true} className="!ml-1 !h-3 !w-3 !border-2 !text-text-tertiary" />}
       </div>
     )
   }
-
   const canShowUpgradeTooltip = tooltipText.length > 0
-
   return (
     <Tooltip>
       <TooltipTrigger
@@ -83,128 +66,76 @@ function ComplianceDocActionVisual({
     </Tooltip>
   )
 }
-
 type ComplianceDocRowItemProps = {
   icon: ReactNode
   label: ReactNode
   docName: DocName
 }
-
-function ComplianceDocRowItem({
-  icon,
-  label,
-  docName,
-}: ComplianceDocRowItemProps) {
+function ComplianceDocRowItem({ icon, label, docName }: ComplianceDocRowItemProps) {
   const { t } = useTranslation()
   const { plan } = useProviderContext()
   const { setShowPricingModal, setShowAccountSettingModal } = useModalContext()
   const isFreePlan = plan.type === Plan.sandbox
-
   const { isPending, mutate: downloadCompliance } = useMutation({
     mutationKey: ['downloadCompliance', docName],
     mutationFn: async () => {
       try {
         const ret = await getDocDownloadUrl(docName)
         downloadUrl({ url: ret.url })
-        Toast.notify({
-          type: 'success',
-          message: t('operation.downloadSuccess', { ns: 'common' }),
-        })
+        toast.success(t('operation.downloadSuccess', { ns: 'common' }))
       }
       catch (error) {
         console.error(error)
-        Toast.notify({
-          type: 'error',
-          message: t('operation.downloadFailed', { ns: 'common' }),
-        })
+        toast.error(t('operation.downloadFailed', { ns: 'common' }))
       }
     },
   })
-
   const whichPlanCanDownloadCompliance = {
     [DocName.SOC2_Type_I]: [Plan.professional, Plan.team],
     [DocName.SOC2_Type_II]: [Plan.team],
     [DocName.ISO_27001]: [Plan.team],
     [DocName.GDPR]: [Plan.team, Plan.professional, Plan.sandbox],
   }
-
   const isCurrentPlanCanDownload = whichPlanCanDownloadCompliance[docName].includes(plan.type)
-
   const handleSelect = useCallback(() => {
     if (isCurrentPlanCanDownload) {
       if (!isPending)
         downloadCompliance()
       return
     }
-
     if (isFreePlan)
       setShowPricingModal()
     else
       setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.BILLING })
   }, [downloadCompliance, isCurrentPlanCanDownload, isFreePlan, isPending, setShowAccountSettingModal, setShowPricingModal])
-
   const upgradeTooltip: Record<Plan, string> = {
     [Plan.sandbox]: t('compliance.sandboxUpgradeTooltip', { ns: 'common' }),
     [Plan.professional]: t('compliance.professionalUpgradeTooltip', { ns: 'common' }),
     [Plan.team]: '',
     [Plan.enterprise]: '',
   }
-
   return (
-    <DropdownMenuItem
-      className="h-10 justify-between py-1 pl-1 pr-2"
-      closeOnClick={!isCurrentPlanCanDownload}
-      onClick={handleSelect}
-    >
+    <DropdownMenuItem className="h-10 justify-between py-1 pl-1 pr-2" closeOnClick={!isCurrentPlanCanDownload} onClick={handleSelect}>
       {icon}
       <div className="grow truncate px-1 text-text-secondary system-md-regular">{label}</div>
-      <ComplianceDocActionVisual
-        isCurrentPlanCanDownload={isCurrentPlanCanDownload}
-        isPending={isPending}
-        tooltipText={upgradeTooltip[plan.type]}
-        downloadText={t('operation.download', { ns: 'common' })}
-        upgradeText={t('upgradeBtn.encourageShort', { ns: 'billing' })}
-      />
+      <ComplianceDocActionVisual isCurrentPlanCanDownload={isCurrentPlanCanDownload} isPending={isPending} tooltipText={upgradeTooltip[plan.type]} downloadText={t('operation.download', { ns: 'common' })} upgradeText={t('upgradeBtn.encourageShort', { ns: 'billing' })} />
     </DropdownMenuItem>
   )
 }
-
 // Submenu-only: this component must be rendered within an existing DropdownMenu root.
 export default function Compliance() {
   const { t } = useTranslation()
-
   return (
     <DropdownMenuSub>
       <DropdownMenuSubTrigger>
-        <MenuItemContent
-          iconClassName="i-ri-verified-badge-line"
-          label={t('userProfile.compliance', { ns: 'common' })}
-        />
+        <MenuItemContent iconClassName="i-ri-verified-badge-line" label={t('userProfile.compliance', { ns: 'common' })} />
       </DropdownMenuSubTrigger>
-      <DropdownMenuSubContent
-        popupClassName="w-[337px] divide-y divide-divider-subtle !bg-components-panel-bg-blur !py-0 backdrop-blur-sm"
-      >
+      <DropdownMenuSubContent popupClassName="w-[337px] divide-y divide-divider-subtle !bg-components-panel-bg-blur !py-0 backdrop-blur-sm">
         <DropdownMenuGroup className="py-1">
-          <ComplianceDocRowItem
-            icon={<Soc2 aria-hidden className="size-7 shrink-0" />}
-            label={t('compliance.soc2Type1', { ns: 'common' })}
-            docName={DocName.SOC2_Type_I}
-          />
-          <ComplianceDocRowItem
-            icon={<Soc2 aria-hidden className="size-7 shrink-0" />}
-            label={t('compliance.soc2Type2', { ns: 'common' })}
-            docName={DocName.SOC2_Type_II}
-          />
-          <ComplianceDocRowItem
-            icon={<Iso aria-hidden className="size-7 shrink-0" />}
-            label={t('compliance.iso27001', { ns: 'common' })}
-            docName={DocName.ISO_27001}
-          />
-          <ComplianceDocRowItem
-            icon={<Gdpr aria-hidden className="size-7 shrink-0" />}
-            label={t('compliance.gdpr', { ns: 'common' })}
-            docName={DocName.GDPR}
-          />
+          <ComplianceDocRowItem icon={<Soc2 aria-hidden className="size-7 shrink-0" />} label={t('compliance.soc2Type1', { ns: 'common' })} docName={DocName.SOC2_Type_I} />
+          <ComplianceDocRowItem icon={<Soc2 aria-hidden className="size-7 shrink-0" />} label={t('compliance.soc2Type2', { ns: 'common' })} docName={DocName.SOC2_Type_II} />
+          <ComplianceDocRowItem icon={<Iso aria-hidden className="size-7 shrink-0" />} label={t('compliance.iso27001', { ns: 'common' })} docName={DocName.ISO_27001} />
+          <ComplianceDocRowItem icon={<Gdpr aria-hidden className="size-7 shrink-0" />} label={t('compliance.gdpr', { ns: 'common' })} docName={DocName.GDPR} />
         </DropdownMenuGroup>
       </DropdownMenuSubContent>
     </DropdownMenuSub>
diff --git a/web/app/components/header/account-dropdown/workplace-selector/__tests__/index.spec.tsx b/web/app/components/header/account-dropdown/workplace-selector/__tests__/index.spec.tsx
index bd9d11e6fd..18066a8139 100644
--- a/web/app/components/header/account-dropdown/workplace-selector/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-dropdown/workplace-selector/__tests__/index.spec.tsx
@@ -1,7 +1,6 @@
 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/context'
 import { baseProviderContextValue, useProviderContext } from '@/context/provider-context'
 import { useWorkspacesContext } from '@/context/workspace-context'
 import { switchWorkspace } from '@/service/common'
@@ -47,9 +46,9 @@ describe('WorkplaceSelector', () => {
 
   const renderComponent = () => {
     return render(
-      <ToastContext.Provider value={{ notify: mockNotify, close: vi.fn() }}>
+      <>
         <WorkplaceSelector />
-      </ToastContext.Provider>,
+      </>,
     )
   }
 
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 abaad6d8a1..6248a8418a 100644
--- a/web/app/components/header/account-dropdown/workplace-selector/index.tsx
+++ b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
@@ -3,8 +3,7 @@ import { Menu, MenuButton, MenuItems, Transition } from '@headlessui/react'
 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/context'
+import { toast } from '@/app/components/base/ui/toast'
 import PlanBadge from '@/app/components/header/plan-badge'
 import { useWorkspacesContext } from '@/context/workspace-context'
 import { switchWorkspace } from '@/service/common'
@@ -13,84 +12,64 @@ import { basePath } from '@/utils/var'
 
 const WorkplaceSelector = () => {
   const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
   const { workspaces } = useWorkspacesContext()
   const currentWorkspace = workspaces.find(v => v.current)
-
   const handleSwitchWorkspace = async (tenant_id: string) => {
     try {
       if (currentWorkspace?.id === tenant_id)
         return
       await switchWorkspace({ url: '/workspaces/switch', body: { tenant_id } })
-      notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
+      toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
       location.assign(`${location.origin}${basePath}`)
     }
     catch {
-      notify({ type: 'error', message: t('provider.saveFailed', { ns: 'common' }) })
+      toast.error(t('provider.saveFailed', { ns: 'common' }))
     }
   }
-
   return (
     <Menu as="div" className="min-w-0">
-      {
-        ({ open }) => (
-          <>
-            <MenuButton className={cn(
-              `
+      {({ open }) => (
+        <>
+          <MenuButton className={cn(`
                 group flex w-full cursor-pointer items-center
                 p-0.5 hover:bg-state-base-hover ${open && 'bg-state-base-hover'} rounded-[10px]
-              `,
-            )}
-            >
-              <div className="mr-1.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-components-icon-bg-blue-solid text-[13px] max-[800px]:mr-0">
-                <span className="h-6 bg-gradient-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text align-middle font-semibold uppercase leading-6 text-shadow-shadow-1 opacity-90">{currentWorkspace?.name[0]?.toLocaleUpperCase()}</span>
-              </div>
-              <div className="flex min-w-0 items-center">
-                <div className="min-w-0 max-w-[149px] truncate text-text-secondary system-sm-medium max-[800px]:hidden">{currentWorkspace?.name}</div>
-                <RiArrowDownSLine className="h-4 w-4 shrink-0 text-text-secondary" />
-              </div>
-            </MenuButton>
-            <Transition
-              as={Fragment}
-              enter="transition ease-out duration-100"
-              enterFrom="transform opacity-0 scale-95"
-              enterTo="transform opacity-100 scale-100"
-              leave="transition ease-in duration-75"
-              leaveFrom="transform opacity-100 scale-100"
-              leaveTo="transform opacity-0 scale-95"
-            >
-              <MenuItems
-                anchor="bottom start"
-                className={cn(
-                  `
+              `)}
+          >
+            <div className="mr-1.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-components-icon-bg-blue-solid text-[13px] max-[800px]:mr-0">
+              <span className="h-6 bg-gradient-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text align-middle font-semibold uppercase leading-6 text-shadow-shadow-1 opacity-90">{currentWorkspace?.name[0]?.toLocaleUpperCase()}</span>
+            </div>
+            <div className="flex min-w-0 items-center">
+              <div className="min-w-0 max-w-[149px] truncate text-text-secondary system-sm-medium max-[800px]:hidden">{currentWorkspace?.name}</div>
+              <RiArrowDownSLine className="h-4 w-4 shrink-0 text-text-secondary" />
+            </div>
+          </MenuButton>
+          <Transition as={Fragment} enter="transition ease-out duration-100" enterFrom="transform opacity-0 scale-95" enterTo="transform opacity-100 scale-100" leave="transition ease-in duration-75" leaveFrom="transform opacity-100 scale-100" leaveTo="transform opacity-0 scale-95">
+            <MenuItems
+              anchor="bottom start"
+              className={cn(`
                     shadows-shadow-lg absolute left-[-15px] z-[1000] mt-1 flex max-h-[400px] w-[280px] flex-col items-start overflow-y-auto
                     rounded-xl bg-components-panel-bg-blur backdrop-blur-[5px]
-                  `,
-                )}
-              >
-                <div className="flex w-full flex-col items-start self-stretch rounded-xl border-[0.5px] border-components-panel-border p-1 pb-2 shadow-lg">
-                  <div className="flex items-start self-stretch px-3 pb-0.5 pt-1">
-                    <span className="flex-1 text-text-tertiary system-xs-medium-uppercase">{t('userProfile.workspace', { ns: 'common' })}</span>
-                  </div>
-                  {
-                    workspaces.map(workspace => (
-                      <div className="flex items-center gap-2 self-stretch rounded-lg py-1 pl-3 pr-2 hover:bg-state-base-hover" key={workspace.id} onClick={() => handleSwitchWorkspace(workspace.id)}>
-                        <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-components-icon-bg-blue-solid text-[13px]">
-                          <span className="h-6 bg-gradient-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text align-middle font-semibold uppercase leading-6 text-shadow-shadow-1 opacity-90">{workspace?.name[0]?.toLocaleUpperCase()}</span>
-                        </div>
-                        <div className="line-clamp-1 grow cursor-pointer overflow-hidden text-ellipsis text-text-secondary system-md-regular">{workspace.name}</div>
-                        <PlanBadge plan={workspace.plan as Plan} />
-                      </div>
-                    ))
-                  }
+                  `)}
+            >
+              <div className="flex w-full flex-col items-start self-stretch rounded-xl border-[0.5px] border-components-panel-border p-1 pb-2 shadow-lg">
+                <div className="flex items-start self-stretch px-3 pb-0.5 pt-1">
+                  <span className="flex-1 text-text-tertiary system-xs-medium-uppercase">{t('userProfile.workspace', { ns: 'common' })}</span>
                 </div>
-              </MenuItems>
-            </Transition>
-          </>
-        )
-      }
+                {workspaces.map(workspace => (
+                  <div className="flex items-center gap-2 self-stretch rounded-lg py-1 pl-3 pr-2 hover:bg-state-base-hover" key={workspace.id} onClick={() => handleSwitchWorkspace(workspace.id)}>
+                    <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-components-icon-bg-blue-solid text-[13px]">
+                      <span className="h-6 bg-gradient-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text align-middle font-semibold uppercase leading-6 text-shadow-shadow-1 opacity-90">{workspace?.name[0]?.toLocaleUpperCase()}</span>
+                    </div>
+                    <div className="line-clamp-1 grow cursor-pointer overflow-hidden text-ellipsis text-text-secondary system-md-regular">{workspace.name}</div>
+                    <PlanBadge plan={workspace.plan as Plan} />
+                  </div>
+                ))}
+              </div>
+            </MenuItems>
+          </Transition>
+        </>
+      )}
     </Menu>
   )
 }
-
 export default WorkplaceSelector
diff --git a/web/app/components/header/account-setting/api-based-extension-page/__tests__/modal.spec.tsx b/web/app/components/header/account-setting/api-based-extension-page/__tests__/modal.spec.tsx
index 95a0ea5c1f..8bfc1b13df 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/__tests__/modal.spec.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/__tests__/modal.spec.tsx
@@ -1,12 +1,24 @@
 import type { TFunction } from 'i18next'
-import type { IToastProps } from '@/app/components/base/toast/context'
+import type { ReactElement } from 'react'
 import { fireEvent, render as RTLRender, screen, waitFor } from '@testing-library/react'
 import * as reactI18next from 'react-i18next'
-import { ToastContext } from '@/app/components/base/toast/context'
 import { useDocLink } from '@/context/i18n'
 import { addApiBasedExtension, updateApiBasedExtension } from '@/service/common'
 import ApiBasedExtensionModal from '../modal'
 
+const { mockToast } = vi.hoisted(() => {
+  const mockToast = Object.assign(vi.fn(), {
+    success: vi.fn(),
+    error: vi.fn(),
+    warning: vi.fn(),
+    info: vi.fn(),
+    dismiss: vi.fn(),
+    update: vi.fn(),
+    promise: vi.fn(),
+  })
+  return { mockToast }
+})
+
 vi.mock('@/context/i18n', () => ({
   useDocLink: vi.fn(),
 }))
@@ -16,21 +28,16 @@ vi.mock('@/service/common', () => ({
   updateApiBasedExtension: vi.fn(),
 }))
 
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
+}))
+
 describe('ApiBasedExtensionModal', () => {
   const mockOnCancel = vi.fn()
   const mockOnSave = vi.fn()
-  const mockNotify = vi.fn()
   const mockDocLink = vi.fn((path?: string) => `https://docs.dify.ai${path || ''}`)
 
-  const render = (ui: React.ReactElement) => RTLRender(
-    <ToastContext.Provider value={{
-      notify: mockNotify as unknown as (props: IToastProps) => void,
-      close: vi.fn(),
-    }}
-    >
-      {ui}
-    </ToastContext.Provider>,
-  )
+  const render = (ui: ReactElement) => RTLRender(ui)
 
   beforeEach(() => {
     vi.clearAllMocks()
@@ -111,7 +118,7 @@ describe('ApiBasedExtensionModal', () => {
             api_key: '[__HIDDEN__]',
           }),
         })
-        expect(mockNotify).toHaveBeenCalledWith({ type: 'success', message: 'common.actionMsg.modifiedSuccessfully' })
+        expect(mockToast.success).toHaveBeenCalledWith('common.actionMsg.modifiedSuccessfully')
         expect(mockOnSave).toHaveBeenCalled()
       })
     })
@@ -150,7 +157,7 @@ describe('ApiBasedExtensionModal', () => {
       fireEvent.click(screen.getByText('common.operation.save'))
 
       // Assert
-      expect(mockNotify).toHaveBeenCalledWith({ type: 'error', message: 'common.apiBasedExtension.modal.apiKey.lengthError' })
+      expect(mockToast.error).toHaveBeenCalledWith('common.apiBasedExtension.modal.apiKey.lengthError')
       expect(addApiBasedExtension).not.toHaveBeenCalled()
     })
   })
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 5f1492f14a..1436ba3d0a 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,46 +6,35 @@ 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/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { useDocLink } from '@/context/i18n'
-import {
-  addApiBasedExtension,
-  updateApiBasedExtension,
-} from '@/service/common'
+import { addApiBasedExtension, updateApiBasedExtension } from '@/service/common'
 
 export type ApiBasedExtensionData = {
   name?: string
   apiEndpoint?: string
   apiKey?: string
 }
-
 type ApiBasedExtensionModalProps = {
   data: ApiBasedExtension
   onCancel: () => void
   onSave?: (newData: ApiBasedExtension) => void
 }
-const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({
-  data,
-  onCancel,
-  onSave,
-}) => {
+const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({ data, onCancel, onSave }) => {
   const { t } = useTranslation()
   const docLink = useDocLink()
   const [localeData, setLocaleData] = useState(data)
   const [loading, setLoading] = useState(false)
-  const { notify } = useToastContext()
   const handleDataChange = (type: string, value: string) => {
     setLocaleData({ ...localeData, [type]: value })
   }
   const handleSave = async () => {
     setLoading(true)
-
     if (localeData && localeData.api_key && localeData.api_key?.length < 5) {
-      notify({ type: 'error', message: t('apiBasedExtension.modal.apiKey.lengthError', { ns: 'common' }) })
+      toast.error(t('apiBasedExtension.modal.apiKey.lengthError', { ns: 'common' }))
       setLoading(false)
       return
     }
-
     try {
       let res: ApiBasedExtension = {}
       if (!data.id) {
@@ -62,10 +51,8 @@ const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({
             api_key: data.api_key === localeData.api_key ? '[__HIDDEN__]' : localeData.api_key,
           },
         })
-
-        notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
+        toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
       }
-
       if (onSave)
         onSave(res)
     }
@@ -73,82 +60,46 @@ const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({
       setLoading(false)
     }
   }
-
   return (
-    <Modal
-      isShow
-      onClose={noop}
-      wrapperClassName="z-[1002]"
-      className="!w-[640px] !max-w-none !p-8 !pb-6"
-    >
+    <Modal isShow onClose={noop} wrapperClassName="z-[1002]" className="!w-[640px] !max-w-none !p-8 !pb-6">
       <div className="mb-2 text-xl font-semibold text-text-primary">
-        {
-          data.name
-            ? t('apiBasedExtension.modal.editTitle', { ns: 'common' })
-            : t('apiBasedExtension.modal.title', { ns: 'common' })
-        }
+        {data.name
+          ? t('apiBasedExtension.modal.editTitle', { ns: 'common' })
+          : t('apiBasedExtension.modal.title', { ns: 'common' })}
       </div>
       <div className="py-2">
         <div className="text-sm font-medium leading-9 text-text-primary">
           {t('apiBasedExtension.modal.name.title', { ns: 'common' })}
         </div>
-        <input
-          value={localeData.name || ''}
-          onChange={e => handleDataChange('name', e.target.value)}
-          className="block h-9 w-full appearance-none rounded-lg bg-components-input-bg-normal px-3 text-sm text-text-primary outline-none"
-          placeholder={t('apiBasedExtension.modal.name.placeholder', { ns: 'common' }) || ''}
-        />
+        <input value={localeData.name || ''} onChange={e => handleDataChange('name', e.target.value)} className="block h-9 w-full appearance-none rounded-lg bg-components-input-bg-normal px-3 text-sm text-text-primary outline-none" placeholder={t('apiBasedExtension.modal.name.placeholder', { ns: 'common' }) || ''} />
       </div>
       <div className="py-2">
         <div className="flex h-9 items-center justify-between text-sm font-medium text-text-primary">
           {t('apiBasedExtension.modal.apiEndpoint.title', { ns: 'common' })}
-          <a
-            href={docLink('/use-dify/workspace/api-extension/api-extension')}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="group flex items-center text-xs font-normal text-text-accent"
-          >
+          <a href={docLink('/use-dify/workspace/api-extension/api-extension')} target="_blank" rel="noopener noreferrer" className="group flex items-center text-xs font-normal text-text-accent">
             <BookOpen01 className="mr-1 h-3 w-3" />
             {t('apiBasedExtension.link', { ns: 'common' })}
           </a>
         </div>
-        <input
-          value={localeData.api_endpoint || ''}
-          onChange={e => handleDataChange('api_endpoint', e.target.value)}
-          className="block h-9 w-full appearance-none rounded-lg bg-components-input-bg-normal px-3 text-sm text-text-primary outline-none"
-          placeholder={t('apiBasedExtension.modal.apiEndpoint.placeholder', { ns: 'common' }) || ''}
-        />
+        <input value={localeData.api_endpoint || ''} onChange={e => handleDataChange('api_endpoint', e.target.value)} className="block h-9 w-full appearance-none rounded-lg bg-components-input-bg-normal px-3 text-sm text-text-primary outline-none" placeholder={t('apiBasedExtension.modal.apiEndpoint.placeholder', { ns: 'common' }) || ''} />
       </div>
       <div className="py-2">
         <div className="text-sm font-medium leading-9 text-text-primary">
           {t('apiBasedExtension.modal.apiKey.title', { ns: 'common' })}
         </div>
         <div className="flex items-center">
-          <input
-            value={localeData.api_key || ''}
-            onChange={e => handleDataChange('api_key', e.target.value)}
-            className="mr-2 block h-9 grow appearance-none rounded-lg bg-components-input-bg-normal px-3 text-sm text-text-primary outline-none"
-            placeholder={t('apiBasedExtension.modal.apiKey.placeholder', { ns: 'common' }) || ''}
-          />
+          <input value={localeData.api_key || ''} onChange={e => handleDataChange('api_key', e.target.value)} className="mr-2 block h-9 grow appearance-none rounded-lg bg-components-input-bg-normal px-3 text-sm text-text-primary outline-none" placeholder={t('apiBasedExtension.modal.apiKey.placeholder', { ns: 'common' }) || ''} />
         </div>
       </div>
       <div className="mt-6 flex items-center justify-end">
-        <Button
-          onClick={onCancel}
-          className="mr-2"
-        >
+        <Button onClick={onCancel} className="mr-2">
           {t('operation.cancel', { ns: 'common' })}
         </Button>
-        <Button
-          variant="primary"
-          disabled={!localeData.name || !localeData.api_endpoint || !localeData.api_key || loading}
-          onClick={handleSave}
-        >
+        <Button variant="primary" disabled={!localeData.name || !localeData.api_endpoint || !localeData.api_key || loading} onClick={handleSave}>
           {t('operation.save', { ns: 'common' })}
         </Button>
       </div>
     </Modal>
   )
 }
-
 export default ApiBasedExtensionModal
diff --git a/web/app/components/header/account-setting/language-page/__tests__/index.spec.tsx b/web/app/components/header/account-setting/language-page/__tests__/index.spec.tsx
index eafd57ed66..1139e953a8 100644
--- a/web/app/components/header/account-setting/language-page/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-setting/language-page/__tests__/index.spec.tsx
@@ -1,6 +1,6 @@
 import type { UserProfileResponse } from '@/models/common'
 import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
-import { ToastProvider } from '@/app/components/base/toast'
+import { ToastHost } from '@/app/components/base/ui/toast'
 import { languages } from '@/i18n-config/language'
 import { updateUserProfile } from '@/service/common'
 import { timezones } from '@/utils/timezone'
@@ -100,9 +100,10 @@ const createUserProfile = (overrides: Partial<UserProfileResponse> = {}): UserPr
 
 const renderPage = () => {
   render(
-    <ToastProvider>
+    <>
       <LanguagePage />
-    </ToastProvider>,
+      <ToastHost />
+    </>,
   )
 }
 
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 6c84a25428..e538337d62 100644
--- a/web/app/components/header/account-setting/language-page/index.tsx
+++ b/web/app/components/header/account-setting/language-page/index.tsx
@@ -1,12 +1,10 @@
 'use client'
-
 import type { Item } from '@/app/components/base/select'
 import type { Locale } from '@/i18n-config'
 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/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { useAppContext } from '@/context/app-context'
 import { useLocale } from '@/context/i18n'
 import { setLocaleOnClient } from '@/i18n-config'
@@ -18,75 +16,54 @@ import { timezones } from '@/utils/timezone'
 const titleClassName = `
   mb-2 system-sm-semibold text-text-secondary
 `
-
 export default function LanguagePage() {
   const locale = useLocale()
   const { userProfile, mutateUserProfile } = useAppContext()
-  const { notify } = useContext(ToastContext)
   const [editing, setEditing] = useState(false)
   const { t } = useTranslation()
   const router = useRouter()
-
   const handleSelectLanguage = async (item: Item) => {
     const url = '/account/interface-language'
     const bodyKey = 'interface_language'
-
     setEditing(true)
     try {
       await updateUserProfile({ url, body: { [bodyKey]: item.value } })
-      notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
-
+      toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
       setLocaleOnClient(item.value.toString() as Locale, false)
       router.refresh()
     }
     catch (e) {
-      notify({ type: 'error', message: (e as Error).message })
+      toast.error((e as Error).message)
     }
     finally {
       setEditing(false)
     }
   }
-
   const handleSelectTimezone = async (item: Item) => {
     const url = '/account/timezone'
     const bodyKey = 'timezone'
-
     setEditing(true)
     try {
       await updateUserProfile({ url, body: { [bodyKey]: item.value } })
-      notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
-
+      toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
       mutateUserProfile()
     }
     catch (e) {
-      notify({ type: 'error', message: (e as Error).message })
+      toast.error((e as Error).message)
     }
     finally {
       setEditing(false)
     }
   }
-
   return (
     <>
       <div className="mb-8">
         <div className={titleClassName}>{t('language.displayLanguage', { ns: 'common' })}</div>
-        <SimpleSelect
-          defaultValue={locale || userProfile.interface_language}
-          items={languages.filter(item => item.supported)}
-          onSelect={item => handleSelectLanguage(item)}
-          disabled={editing}
-          notClearable={true}
-        />
+        <SimpleSelect defaultValue={locale || userProfile.interface_language} items={languages.filter(item => item.supported)} onSelect={item => handleSelectLanguage(item)} disabled={editing} notClearable={true} />
       </div>
       <div className="mb-8">
         <div className={titleClassName}>{t('language.timezone', { ns: 'common' })}</div>
-        <SimpleSelect
-          defaultValue={userProfile.timezone}
-          items={timezones}
-          onSelect={item => handleSelectTimezone(item)}
-          disabled={editing}
-          notClearable={true}
-        />
+        <SimpleSelect defaultValue={userProfile.timezone} items={timezones} onSelect={item => handleSelectTimezone(item)} disabled={editing} notClearable={true} />
       </div>
     </>
   )
diff --git a/web/app/components/header/account-setting/members-page/edit-workspace-modal/__tests__/dialog.spec.tsx b/web/app/components/header/account-setting/members-page/edit-workspace-modal/__tests__/dialog.spec.tsx
index 1714c3ceee..1f3f4efff7 100644
--- a/web/app/components/header/account-setting/members-page/edit-workspace-modal/__tests__/dialog.spec.tsx
+++ b/web/app/components/header/account-setting/members-page/edit-workspace-modal/__tests__/dialog.spec.tsx
@@ -1,6 +1,5 @@
 import type { ReactNode } from 'react'
 import { render } from '@testing-library/react'
-import { ToastContext } from '@/app/components/base/toast/context'
 import { useAppContext } from '@/context/app-context'
 import EditWorkspaceModal from '../index'
 
@@ -44,9 +43,9 @@ describe('EditWorkspaceModal dialog lifecycle', () => {
     const onCancel = vi.fn()
 
     render(
-      <ToastContext.Provider value={{ notify: vi.fn(), close: vi.fn() }}>
+      <>
         <EditWorkspaceModal onCancel={onCancel} />
-      </ToastContext.Provider>,
+      </>,
     )
 
     latestOnOpenChange?.(true)
diff --git a/web/app/components/header/account-setting/members-page/edit-workspace-modal/__tests__/index.spec.tsx b/web/app/components/header/account-setting/members-page/edit-workspace-modal/__tests__/index.spec.tsx
index bd076abf11..96d3721774 100644
--- a/web/app/components/header/account-setting/members-page/edit-workspace-modal/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-setting/members-page/edit-workspace-modal/__tests__/index.spec.tsx
@@ -3,7 +3,6 @@ import type { ICurrentWorkspace } from '@/models/common'
 import { 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/context'
 import { useAppContext } from '@/context/app-context'
 import { updateWorkspaceInfo } from '@/service/common'
 import EditWorkspaceModal from '../index'
@@ -29,9 +28,9 @@ describe('EditWorkspaceModal', () => {
   })
 
   const renderModal = () => render(
-    <ToastContext.Provider value={{ notify: mockNotify, close: vi.fn() }}>
+    <>
       <EditWorkspaceModal onCancel={mockOnCancel} />
-    </ToastContext.Provider>,
+    </>,
   )
 
   it('should show current workspace name in the input', async () => {
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 1707a010ae..348a1ac3d6 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
@@ -1,11 +1,10 @@
 'use client'
 import { useId, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
-import { ToastContext } from '@/app/components/base/toast/context'
 import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@/app/components/base/ui/dialog'
+import { toast } from '@/app/components/base/ui/toast'
 import { useAppContext } from '@/context/app-context'
 import { updateWorkspaceInfo } from '@/service/common'
 import { cn } from '@/utils/classnames'
@@ -13,12 +12,8 @@ import { cn } from '@/utils/classnames'
 type IEditWorkspaceModalProps = {
   onCancel: () => void
 }
-
-const EditWorkspaceModal = ({
-  onCancel,
-}: IEditWorkspaceModalProps) => {
+const EditWorkspaceModal = ({ onCancel }: IEditWorkspaceModalProps) => {
   const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
   const { currentWorkspace, isCurrentWorkspaceOwner } = useAppContext()
   const [name, setName] = useState<string>(currentWorkspace.name)
   const [isSubmitting, setIsSubmitting] = useState(false)
@@ -31,17 +26,14 @@ const EditWorkspaceModal = ({
   const nameErrorMessage = useMemo(() => {
     if (!hasError)
       return ''
-
     return t('errorMsg.fieldRequired', {
       ns: 'common',
       field: t('account.workspaceName', { ns: 'common' }),
     })
   }, [hasError, t])
-
   const changeWorkspaceInfo = async () => {
     if (isSaveDisabled)
       return
-
     setIsSubmitting(true)
     try {
       await updateWorkspaceInfo({
@@ -50,17 +42,16 @@ const EditWorkspaceModal = ({
           name: normalizedName,
         },
       })
-      notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
+      toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
       location.assign(`${location.origin}`)
     }
     catch {
-      notify({ type: 'error', message: t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }) })
+      toast.error(t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }))
     }
     finally {
       setIsSubmitting(false)
     }
   }
-
   return (
     <Dialog
       open
@@ -69,10 +60,7 @@ const EditWorkspaceModal = ({
           onCancel()
       }}
     >
-      <DialogContent
-        backdropProps={{ forceRender: true }}
-        className="overflow-visible"
-      >
+      <DialogContent backdropProps={{ forceRender: true }} className="overflow-visible">
         <DialogCloseButton data-testid="edit-workspace-close" />
 
         <form
@@ -102,18 +90,11 @@ const EditWorkspaceModal = ({
               }}
               aria-invalid={hasError}
               aria-describedby={hasError ? errorId : undefined}
-              className={cn(
-                hasError && 'border-components-input-border-destructive bg-components-input-bg-destructive hover:border-components-input-border-destructive hover:bg-components-input-bg-destructive focus:border-components-input-border-destructive focus:bg-components-input-bg-destructive',
-              )}
+              className={cn(hasError && 'border-components-input-border-destructive bg-components-input-bg-destructive hover:border-components-input-border-destructive hover:bg-components-input-bg-destructive focus:border-components-input-border-destructive focus:bg-components-input-bg-destructive')}
             />
             <div className="min-h-6">
               {hasError && (
-                <p
-                  id={errorId}
-                  data-testid="edit-workspace-error"
-                  className="text-text-destructive system-xs-regular"
-                  role="alert"
-                >
+                <p id={errorId} data-testid="edit-workspace-error" className="text-text-destructive system-xs-regular" role="alert">
                   {nameErrorMessage}
                 </p>
               )}
@@ -121,26 +102,11 @@ const EditWorkspaceModal = ({
           </div>
 
           <div className="sticky bottom-0 -mx-2 mt-2 flex flex-wrap items-center justify-end gap-x-2 bg-components-panel-bg px-2 pt-4">
-            <Button
-              size="large"
-              type="button"
-              data-testid="edit-workspace-cancel"
-              onClick={onCancel}
-            >
+            <Button size="large" type="button" data-testid="edit-workspace-cancel" onClick={onCancel}>
               {t('operation.cancel', { ns: 'common' })}
             </Button>
-            <Button
-              size="large"
-              type="submit"
-              variant="primary"
-              data-testid="edit-workspace-save"
-              disabled={isSaveDisabled}
-              loading={isSubmitting}
-            >
-              {t(
-                isSubmitting ? 'operation.saving' : 'operation.save',
-                { ns: 'common' },
-              )}
+            <Button size="large" type="submit" variant="primary" data-testid="edit-workspace-save" disabled={isSaveDisabled} loading={isSubmitting}>
+              {t(isSubmitting ? 'operation.saving' : 'operation.save', { ns: 'common' })}
             </Button>
           </div>
         </form>
@@ -148,5 +114,4 @@ const EditWorkspaceModal = ({
     </Dialog>
   )
 }
-
 export default EditWorkspaceModal
diff --git a/web/app/components/header/account-setting/members-page/operation/__tests__/index.spec.tsx b/web/app/components/header/account-setting/members-page/operation/__tests__/index.spec.tsx
index 53acda9576..8c9081833d 100644
--- a/web/app/components/header/account-setting/members-page/operation/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-setting/members-page/operation/__tests__/index.spec.tsx
@@ -2,7 +2,6 @@ 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/context'
 import Operation from '../index'
 
 const mockUpdateMemberRole = vi.fn()
@@ -37,9 +36,9 @@ const defaultMember: Member = {
 const renderOperation = (propsOverride: Partial<Member> = {}, operatorRole = 'owner', onOperate?: () => void) => {
   const mergedMember = { ...defaultMember, ...propsOverride }
   return render(
-    <ToastContext.Provider value={{ notify: vi.fn(), close: vi.fn() }}>
+    <>
       <Operation member={mergedMember} operatorRole={operatorRole} onOperate={onOperate ?? vi.fn()} />
-    </ToastContext.Provider>,
+    </>,
   )
 }
 
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 e2b14b9078..e56ea69cb8 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
@@ -3,13 +3,8 @@ import type { Member } from '@/models/common'
 import { CheckIcon, ChevronDownIcon } from '@heroicons/react/24/outline'
 import { memo, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
-import { ToastContext } from '@/app/components/base/toast/context'
+import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
+import { toast } from '@/app/components/base/ui/toast'
 import { useProviderContext } from '@/context/provider-context'
 import { deleteMemberOrCancelInvitation, updateMemberRole } from '@/service/common'
 import { cn } from '@/utils/classnames'
@@ -19,21 +14,14 @@ type IOperationProps = {
   operatorRole: string
   onOperate: () => void
 }
-
 const roleI18nKeyMap = {
   admin: { label: 'members.admin', tip: 'members.adminTip' },
   editor: { label: 'members.editor', tip: 'members.editorTip' },
   normal: { label: 'members.normal', tip: 'members.normalTip' },
   dataset_operator: { label: 'members.datasetOperator', tip: 'members.datasetOperatorTip' },
 } as const
-
 type OperationRoleKey = keyof typeof roleI18nKeyMap
-
-const Operation = ({
-  member,
-  operatorRole,
-  onOperate,
-}: IOperationProps) => {
+const Operation = ({ member, operatorRole, onOperate }: IOperationProps) => {
   const [open, setOpen] = useState(false)
   const { t } = useTranslation()
   const { datasetOperatorEnabled } = useProviderContext()
@@ -62,16 +50,14 @@ const Operation = ({
     }
     return []
   }, [operatorRole, datasetOperatorEnabled])
-  const { notify } = useContext(ToastContext)
   const handleDeleteMemberOrCancelInvitation = async () => {
     setOpen(false)
     try {
       await deleteMemberOrCancelInvitation({ url: `/workspaces/current/members/${member.id}` })
       onOperate()
-      notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
+      toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
     }
     catch {
-
     }
   }
   const handleUpdateMemberRole = async (role: string) => {
@@ -82,20 +68,13 @@ const Operation = ({
         body: { role },
       })
       onOperate()
-      notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
+      toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
     }
     catch {
-
     }
   }
-
   return (
-    <PortalToFollowElem
-      open={open}
-      onOpenChange={setOpen}
-      placement="bottom-end"
-      offset={{ mainAxis: 4 }}
-    >
+    <PortalToFollowElem open={open} onOpenChange={setOpen} placement="bottom-end" offset={{ mainAxis: 4 }}>
       <PortalToFollowElemTrigger asChild onClick={() => setOpen(prev => !prev)}>
         <div className={cn('group flex h-full w-full cursor-pointer items-center justify-between px-3 text-text-secondary system-sm-regular hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
           {RoleMap[member.role] || RoleMap.normal}
@@ -105,21 +84,17 @@ const Operation = ({
       <PortalToFollowElemContent className="z-[1002]">
         <div className={cn('inline-flex flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm')}>
           <div className="p-1">
-            {
-              roleList.map(role => (
-                <div key={role} className="flex cursor-pointer rounded-lg px-3 py-2 hover:bg-state-base-hover" onClick={() => handleUpdateMemberRole(role)}>
-                  {
-                    role === member.role
-                      ? <CheckIcon className="mr-1 mt-[2px] h-4 w-4 text-text-accent" />
-                      : <div className="mr-1 mt-[2px] h-4 w-4 text-text-accent" />
-                  }
-                  <div>
-                    <div className="whitespace-nowrap text-text-secondary system-sm-semibold">{t(roleI18nKeyMap[role].label, { ns: 'common' })}</div>
-                    <div className="whitespace-nowrap text-text-tertiary system-xs-regular">{t(roleI18nKeyMap[role].tip, { ns: 'common' })}</div>
-                  </div>
+            {roleList.map(role => (
+              <div key={role} className="flex cursor-pointer rounded-lg px-3 py-2 hover:bg-state-base-hover" onClick={() => handleUpdateMemberRole(role)}>
+                {role === member.role
+                  ? <CheckIcon className="mr-1 mt-[2px] h-4 w-4 text-text-accent" />
+                  : <div className="mr-1 mt-[2px] h-4 w-4 text-text-accent" />}
+                <div>
+                  <div className="whitespace-nowrap text-text-secondary system-sm-semibold">{t(roleI18nKeyMap[role].label, { ns: 'common' })}</div>
+                  <div className="whitespace-nowrap text-text-tertiary system-xs-regular">{t(roleI18nKeyMap[role].tip, { ns: 'common' })}</div>
                 </div>
-              ))
-            }
+              </div>
+            ))}
           </div>
           <div className="border-t border-divider-subtle p-1">
             <div className="flex cursor-pointer rounded-lg px-3 py-2 hover:bg-state-base-hover" onClick={handleDeleteMemberOrCancelInvitation}>
@@ -135,5 +110,4 @@ const Operation = ({
     </PortalToFollowElem>
   )
 }
-
 export default memo(Operation)
diff --git a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/__tests__/index.spec.tsx b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/__tests__/index.spec.tsx
index ea20e5719e..7faad8cf26 100644
--- a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/__tests__/index.spec.tsx
@@ -3,7 +3,6 @@ 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/context'
 import { useAppContext } from '@/context/app-context'
 import { ownershipTransfer, sendOwnerEmail, verifyOwnerEmail } from '@/service/common'
 import { useMembers } from '@/service/use-common'
@@ -52,9 +51,9 @@ describe('TransferOwnershipModal', () => {
   })
 
   const renderModal = () => render(
-    <ToastContext.Provider value={{ notify: mockNotify, close: vi.fn() }}>
+    <>
       <TransferOwnershipModal show onClose={mockOnClose} />
-    </ToastContext.Provider>,
+    </>,
   )
 
   const mockEmailVerification = ({
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 6a2af9ffdb..67096bf77f 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
@@ -2,33 +2,25 @@ import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-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/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { useAppContext } from '@/context/app-context'
-import {
-  ownershipTransfer,
-  sendOwnerEmail,
-  verifyOwnerEmail,
-} from '@/service/common'
+import { ownershipTransfer, sendOwnerEmail, verifyOwnerEmail } from '@/service/common'
 import MemberSelector from './member-selector'
 
 type Props = {
   show: boolean
   onClose: () => void
 }
-
 enum STEP {
   start = 'start',
   verify = 'verify',
   transfer = 'transfer',
 }
-
 const TransferOwnershipModal = ({ onClose, show }: Props) => {
   const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
   const { currentWorkspace, userProfile } = useAppContext()
   const [step, setStep] = useState<STEP>(STEP.start)
   const [code, setCode] = useState<string>('')
@@ -37,21 +29,16 @@ const TransferOwnershipModal = ({ onClose, show }: Props) => {
   const [newOwner, setNewOwner] = useState<string>('')
   const [isTransfer, setIsTransfer] = useState<boolean>(false)
   const timerIdRef = React.useRef<number | undefined>(undefined)
-
   const retimeCountdown = useCallback((timerId?: number) => {
     if (timerIdRef.current !== undefined)
       window.clearInterval(timerIdRef.current)
-
     timerIdRef.current = timerId
   }, [])
-
   React.useEffect(() => {
     if (!show)
       retimeCountdown()
-
     return retimeCountdown
   }, [retimeCountdown, show])
-
   const startCount = () => {
     setTime(60)
     retimeCountdown(window.setInterval(() => {
@@ -64,7 +51,6 @@ const TransferOwnershipModal = ({ onClose, show }: Props) => {
       })
     }, 1000))
   }
-
   const sendEmail = async () => {
     try {
       const res = await sendOwnerEmail({})
@@ -73,13 +59,9 @@ const TransferOwnershipModal = ({ onClose, show }: Props) => {
         setStepToken(res.data)
     }
     catch (error) {
-      notify({
-        type: 'error',
-        message: `Error sending verification code: ${error ? (error as any).message : ''}`,
-      })
+      toast.error(`Error sending verification code: ${error ? (error as any).message : ''}`)
     }
   }
-
   const verifyEmailAddress = async (code: string, token: string, callback?: () => void) => {
     try {
       const res = await verifyOwnerEmail({
@@ -91,64 +73,39 @@ const TransferOwnershipModal = ({ onClose, show }: Props) => {
         callback?.()
       }
       else {
-        notify({
-          type: 'error',
-          message: 'Verifying email failed',
-        })
+        toast.error('Verifying email failed')
       }
     }
     catch (error) {
-      notify({
-        type: 'error',
-        message: `Error verifying email: ${error ? (error as any).message : ''}`,
-      })
+      toast.error(`Error verifying email: ${error ? (error as any).message : ''}`)
     }
   }
-
   const sendCodeToOriginEmail = async () => {
     await sendEmail()
     setStep(STEP.verify)
   }
-
   const handleVerifyOriginEmail = async () => {
     await verifyEmailAddress(code, stepToken, () => setStep(STEP.transfer))
     setCode('')
   }
-
   const handleTransfer = async () => {
     setIsTransfer(true)
     try {
-      await ownershipTransfer(
-        newOwner,
-        {
-          token: stepToken,
-        },
-      )
+      await ownershipTransfer(newOwner, {
+        token: stepToken,
+      })
       globalThis.location.reload()
     }
     catch (error) {
-      notify({
-        type: 'error',
-        message: `Error ownership transfer: ${error ? (error as any).message : ''}`,
-      })
+      toast.error(`Error ownership transfer: ${error ? (error as any).message : ''}`)
     }
     finally {
       setIsTransfer(false)
     }
   }
-
   return (
-    <Modal
-      isShow={show}
-      onClose={noop}
-      wrapperClassName="z-[1002]"
-      className="!w-[420px] !p-6"
-    >
-      <div
-        data-testid="transfer-modal-close"
-        className="absolute right-5 top-5 cursor-pointer p-1.5"
-        onClick={onClose}
-      >
+    <Modal isShow={show} onClose={noop} wrapperClassName="z-[1002]" className="!w-[420px] !p-6">
+      <div data-testid="transfer-modal-close" className="absolute right-5 top-5 cursor-pointer p-1.5" onClick={onClose}>
         <div className="i-ri-close-line h-5 w-5 text-text-tertiary" />
       </div>
       {step === STEP.start && (
@@ -158,29 +115,15 @@ const TransferOwnershipModal = ({ onClose, show }: Props) => {
             <div className="text-text-destructive body-md-medium">{t('members.transferModal.warning', { ns: 'common', workspace: currentWorkspace.name.replace(/'/g, '’') })}</div>
             <div className="text-text-secondary body-md-regular">{t('members.transferModal.warningTip', { ns: 'common' })}</div>
             <div className="text-text-secondary body-md-regular">
-              <Trans
-                i18nKey="members.transferModal.sendTip"
-                ns="common"
-                components={{ email: <span className="text-text-primary body-md-medium"></span> }}
-                values={{ email: userProfile.email }}
-              />
+              <Trans i18nKey="members.transferModal.sendTip" ns="common" components={{ email: <span className="text-text-primary body-md-medium"></span> }} values={{ email: userProfile.email }} />
             </div>
           </div>
           <div className="pt-3"></div>
           <div className="space-y-2">
-            <Button
-              data-testid="transfer-modal-send-code"
-              className="!w-full"
-              variant="primary"
-              onClick={sendCodeToOriginEmail}
-            >
+            <Button data-testid="transfer-modal-send-code" className="!w-full" variant="primary" onClick={sendCodeToOriginEmail}>
               {t('members.transferModal.sendVerifyCode', { ns: 'common' })}
             </Button>
-            <Button
-              data-testid="transfer-modal-cancel"
-              className="!w-full"
-              onClick={onClose}
-            >
+            <Button data-testid="transfer-modal-cancel" className="!w-full" onClick={onClose}>
               {t('operation.cancel', { ns: 'common' })}
             </Button>
           </div>
@@ -191,55 +134,27 @@ const TransferOwnershipModal = ({ onClose, show }: Props) => {
           <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('members.transferModal.verifyEmail', { ns: 'common' })}</div>
           <div className="pb-2 pt-1">
             <div className="text-text-secondary body-md-regular">
-              <Trans
-                i18nKey="members.transferModal.verifyContent"
-                ns="common"
-                components={{ email: <span className="text-text-primary body-md-medium"></span> }}
-                values={{ email: userProfile.email }}
-              />
+              <Trans i18nKey="members.transferModal.verifyContent" ns="common" components={{ email: <span className="text-text-primary body-md-medium"></span> }} values={{ email: userProfile.email }} />
             </div>
             <div className="text-text-secondary body-md-regular">{t('members.transferModal.verifyContent2', { ns: 'common' })}</div>
           </div>
           <div className="pt-3">
             <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">{t('members.transferModal.codeLabel', { ns: 'common' })}</div>
-            <Input
-              data-testid="transfer-modal-code-input"
-              className="!w-full"
-              placeholder={t('members.transferModal.codePlaceholder', { ns: 'common' })}
-              value={code}
-              onChange={e => setCode(e.target.value)}
-              maxLength={6}
-            />
+            <Input data-testid="transfer-modal-code-input" className="!w-full" placeholder={t('members.transferModal.codePlaceholder', { ns: 'common' })} value={code} onChange={e => setCode(e.target.value)} maxLength={6} />
           </div>
           <div className="mt-3 space-y-2">
-            <Button
-              data-testid="transfer-modal-continue"
-              disabled={code.length !== 6}
-              className="!w-full"
-              variant="primary"
-              onClick={handleVerifyOriginEmail}
-            >
+            <Button data-testid="transfer-modal-continue" disabled={code.length !== 6} className="!w-full" variant="primary" onClick={handleVerifyOriginEmail}>
               {t('members.transferModal.continue', { ns: 'common' })}
             </Button>
-            <Button
-              data-testid="transfer-modal-cancel"
-              className="!w-full"
-              onClick={onClose}
-            >
+            <Button data-testid="transfer-modal-cancel" className="!w-full" onClick={onClose}>
               {t('operation.cancel', { ns: 'common' })}
             </Button>
           </div>
           <div className="mt-3 flex items-center gap-1 text-text-tertiary system-xs-regular">
             <span>{t('members.transferModal.resendTip', { ns: 'common' })}</span>
-            {time > 0 && (
-              <span>{t('members.transferModal.resendCount', { ns: 'common', count: time })}</span>
-            )}
+            {time > 0 && (<span>{t('members.transferModal.resendCount', { ns: 'common', count: time })}</span>)}
             {!time && (
-              <span
-                data-testid="transfer-modal-resend"
-                onClick={sendCodeToOriginEmail}
-                className="cursor-pointer text-text-accent-secondary system-xs-medium"
-              >
+              <span data-testid="transfer-modal-resend" onClick={sendCodeToOriginEmail} className="cursor-pointer text-text-accent-secondary system-xs-medium">
                 {t('members.transferModal.resend', { ns: 'common' })}
               </span>
             )}
@@ -255,27 +170,13 @@ const TransferOwnershipModal = ({ onClose, show }: Props) => {
           </div>
           <div className="pt-3">
             <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">{t('members.transferModal.transferLabel', { ns: 'common' })}</div>
-            <MemberSelector
-              exclude={[userProfile.id]}
-              value={newOwner}
-              onSelect={setNewOwner}
-            />
+            <MemberSelector exclude={[userProfile.id]} value={newOwner} onSelect={setNewOwner} />
           </div>
           <div className="mt-4 space-y-2">
-            <Button
-              data-testid="transfer-modal-submit"
-              disabled={!newOwner || isTransfer}
-              className="!w-full"
-              variant="warning"
-              onClick={handleTransfer}
-            >
+            <Button data-testid="transfer-modal-submit" disabled={!newOwner || isTransfer} className="!w-full" variant="warning" onClick={handleTransfer}>
               {t('members.transferModal.transfer', { ns: 'common' })}
             </Button>
-            <Button
-              data-testid="transfer-modal-cancel"
-              className="!w-full"
-              onClick={onClose}
-            >
+            <Button data-testid="transfer-modal-cancel" className="!w-full" onClick={onClose}>
               {t('operation.cancel', { ns: 'common' })}
             </Button>
           </div>
@@ -284,5 +185,4 @@ const TransferOwnershipModal = ({ onClose, show }: Props) => {
     </Modal>
   )
 }
-
 export default TransferOwnershipModal
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/hooks/__tests__/use-auth.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/hooks/__tests__/use-auth.spec.tsx
index 7da7b424db..cb3a0ec6e3 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/hooks/__tests__/use-auth.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/hooks/__tests__/use-auth.spec.tsx
@@ -5,7 +5,6 @@ import type {
   ModelProvider,
 } from '../../../declarations'
 import { act, renderHook } from '@testing-library/react'
-import { ToastContext } from '@/app/components/base/toast/context'
 import { ConfigurationMethodEnum, ModelModalModeEnum, ModelTypeEnum } from '../../../declarations'
 import { useAuth } from '../use-auth'
 
@@ -22,11 +21,11 @@ const mockAddModelCredential = vi.fn()
 const mockEditProviderCredential = vi.fn()
 const mockEditModelCredential = vi.fn()
 
-vi.mock('@/app/components/base/toast/context', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/app/components/base/toast/context')>()
+vi.mock('@/app/components/base/ui/toast', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/app/components/base/ui/toast')>()
   return {
     ...actual,
-    useToastContext: () => ({ notify: mockNotify }),
+
   }
 })
 
@@ -73,9 +72,9 @@ describe('useAuth', () => {
   }
 
   const createWrapper = ({ children }: { children: ReactNode }) => (
-    <ToastContext.Provider value={{ notify: mockNotify, close: vi.fn() }}>
+    <>
       {children}
-    </ToastContext.Provider>
+    </>
   )
 
   beforeEach(() => {
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 4e01677b29..72587e3da6 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
@@ -1,50 +1,20 @@
-import type {
-  ConfigurationMethodEnum,
-  Credential,
-  CustomConfigurationModelFixedFields,
-  CustomModel,
-  ModelModalModeEnum,
-  ModelProvider,
-} from '../../declarations'
-import {
-  useCallback,
-  useRef,
-  useState,
-} from 'react'
+import type { ConfigurationMethodEnum, Credential, CustomConfigurationModelFixedFields, CustomModel, ModelModalModeEnum, ModelProvider } from '../../declarations'
+import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useToastContext } from '@/app/components/base/toast/context'
-import {
-  useModelModalHandler,
-  useRefreshModel,
-} from '@/app/components/header/account-setting/model-provider-page/hooks'
+import { toast } from '@/app/components/base/ui/toast'
+import { useModelModalHandler, useRefreshModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { useDeleteModel } from '@/service/use-models'
 import { useAuthService } from './use-auth-service'
 
-export const useAuth = (
-  provider: ModelProvider,
-  configurationMethod: ConfigurationMethodEnum,
-  currentCustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields,
-  extra: {
-    isModelCredential?: boolean
-    onUpdate?: (newPayload?: any, formValues?: Record<string, any>) => void
-    onRemove?: (credentialId: string) => void
-    mode?: ModelModalModeEnum
-  } = {},
-) => {
-  const {
-    isModelCredential,
-    onUpdate,
-    onRemove,
-    mode,
-  } = extra
+export const useAuth = (provider: ModelProvider, configurationMethod: ConfigurationMethodEnum, currentCustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields, extra: {
+  isModelCredential?: boolean
+  onUpdate?: (newPayload?: any, formValues?: Record<string, any>) => void
+  onRemove?: (credentialId: string) => void
+  mode?: ModelModalModeEnum
+} = {}) => {
+  const { isModelCredential, onUpdate, onRemove, mode } = extra
   const { t } = useTranslation()
-  const { notify } = useToastContext()
-  const {
-    getDeleteCredentialService,
-    getActiveCredentialService,
-    getEditCredentialService,
-    getAddCredentialService,
-  } = useAuthService(provider.provider)
+  const { getDeleteCredentialService, getActiveCredentialService, getEditCredentialService, getAddCredentialService } = useAuthService(provider.provider)
   const { mutateAsync: deleteModelService } = useDeleteModel(provider.provider)
   const handleOpenModelModal = useModelModalHandler()
   const { handleRefreshModel } = useRefreshModel()
@@ -86,16 +56,13 @@ export const useAuth = (
         model: model?.model,
         model_type: model?.model_type,
       })
-      notify({
-        type: 'success',
-        message: t('api.actionSuccess', { ns: 'common' }),
-      })
+      toast.success(t('api.actionSuccess', { ns: 'common' }))
       handleRefreshModel(provider, undefined, true)
     }
     finally {
       handleSetDoingAction(false)
     }
-  }, [getActiveCredentialService, notify, t, handleSetDoingAction])
+  }, [getActiveCredentialService, t, handleSetDoingAction])
   const handleConfirmDelete = useCallback(async () => {
     if (doingActionRef.current)
       return
@@ -121,10 +88,7 @@ export const useAuth = (
         }
         await deleteModelService(payload)
       }
-      notify({
-        type: 'success',
-        message: t('api.actionSuccess', { ns: 'common' }),
-      })
+      toast.success(t('api.actionSuccess', { ns: 'common' }))
       handleRefreshModel(provider, undefined, true)
       onRemove?.(pendingOperationCredentialId.current ?? '')
       closeConfirmDelete()
@@ -132,41 +96,36 @@ export const useAuth = (
     finally {
       handleSetDoingAction(false)
     }
-  }, [notify, t, handleSetDoingAction, getDeleteCredentialService, isModelCredential, closeConfirmDelete, handleRefreshModel, provider, configurationMethod, deleteModelService])
+  }, [t, handleSetDoingAction, getDeleteCredentialService, isModelCredential, closeConfirmDelete, handleRefreshModel, provider, configurationMethod, deleteModelService])
   const handleSaveCredential = useCallback(async (payload: Record<string, any>) => {
     if (doingActionRef.current)
       return
     try {
       handleSetDoingAction(true)
-
-      let res: { result?: string } = {}
+      let res: {
+        result?: string
+      } = {}
       if (payload.credential_id)
         res = await getEditCredentialService(!!isModelCredential)(payload as any)
       else
         res = await getAddCredentialService(!!isModelCredential)(payload as any)
-
       if (res.result === 'success') {
-        notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
+        toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
         handleRefreshModel(provider, undefined, !payload.credential_id)
       }
     }
     finally {
       handleSetDoingAction(false)
     }
-  }, [notify, t, handleSetDoingAction, getEditCredentialService, getAddCredentialService])
+  }, [t, handleSetDoingAction, getEditCredentialService, getAddCredentialService])
   const handleOpenModal = useCallback((credential?: Credential, model?: CustomModel) => {
-    handleOpenModelModal(
-      provider,
-      configurationMethod,
-      currentCustomConfigurationModelFixedFields,
-      {
-        isModelCredential,
-        credential,
-        model,
-        onUpdate,
-        mode,
-      },
-    )
+    handleOpenModelModal(provider, configurationMethod, currentCustomConfigurationModelFixedFields, {
+      isModelCredential,
+      credential,
+      model,
+      onUpdate,
+      mode,
+    })
   }, [
     handleOpenModelModal,
     provider,
@@ -176,7 +135,6 @@ export const useAuth = (
     onUpdate,
     mode,
   ])
-
   return {
     pendingOperationCredentialId,
     pendingOperationModel,
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/credential-panel.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/credential-panel.spec.tsx
index c9fa6b2f22..80ca3d84f4 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/credential-panel.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/credential-panel.spec.tsx
@@ -32,7 +32,7 @@ vi.mock('@/context/global-public-context', () => ({
   useSystemFeaturesQuery: () => ({ data: { trial_models: ['langgenius/openai/openai'] } }),
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/ui/toast', () => ({
   default: { notify: mockToastNotify },
 }))
 
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/model-load-balancing-modal.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/model-load-balancing-modal.spec.tsx
index ab19035736..0bcc3352ac 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/model-load-balancing-modal.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/model-load-balancing-modal.spec.tsx
@@ -1,7 +1,6 @@
 import type { ModelItem, ModelProvider } from '../../declarations'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { ToastContext } from '@/app/components/base/toast/context'
 import { ConfigurationMethodEnum } from '../../declarations'
 import ModelLoadBalancingModal from '../model-load-balancing-modal'
 
@@ -53,13 +52,11 @@ let mockCredentialData: CredentialData | undefined = {
   current_credential_name: 'Default',
 }
 
-vi.mock('@/app/components/base/toast/context', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/app/components/base/toast/context')>()
+vi.mock('@/app/components/base/ui/toast', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/app/components/base/ui/toast')>()
   return {
     ...actual,
-    useToastContext: () => ({
-      notify: mockNotify,
-    }),
+
   }
 })
 
@@ -135,9 +132,9 @@ describe('ModelLoadBalancingModal', () => {
   } as unknown as ModelItem
 
   const renderModal = (node: Parameters<typeof render>[0]) => render(
-    <ToastContext.Provider value={{ notify: mockNotify, close: vi.fn() }}>
+    <>
       {node}
-    </ToastContext.Provider>,
+    </>,
   )
 
   beforeEach(() => {
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/use-change-provider-priority.spec.ts b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/use-change-provider-priority.spec.ts
index 635384f9d1..6499783b92 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/use-change-provider-priority.spec.ts
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/use-change-provider-priority.spec.ts
@@ -16,7 +16,7 @@ const mockMutationOptions = vi.fn((options: Record<string, unknown>) => ({
   ...options,
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/ui/toast', () => ({
   default: {
     notify: (...args: unknown[]) => mockNotify(...args),
   },
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/use-activate-credential.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/use-activate-credential.spec.tsx
index d09752277b..c38d783e73 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/use-activate-credential.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/use-activate-credential.spec.tsx
@@ -1,6 +1,6 @@
 import type { Credential, ModelProvider } from '../../../declarations'
 import { act, renderHook } from '@testing-library/react'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { useActivateCredential } from '../use-activate-credential'
 
 const mockMutate = vi.fn()
@@ -40,10 +40,14 @@ const createCredential = (overrides: Partial<Credential> = {}): Credential => ({
 } as Credential)
 
 describe('useActivateCredential', () => {
+  const toastSuccessSpy = vi.spyOn(toast, 'success').mockReturnValue('toast-success')
+  const toastErrorSpy = vi.spyOn(toast, 'error').mockReturnValue('toast-error')
+
   beforeEach(() => {
     vi.clearAllMocks()
     mockIsPending = false
-    vi.spyOn(Toast, 'notify').mockImplementation(() => ({ clear: vi.fn() }))
+    toastSuccessSpy.mockClear()
+    toastErrorSpy.mockClear()
   })
 
   it('should expose the current credential id by default', () => {
@@ -94,10 +98,7 @@ describe('useActivateCredential', () => {
       callbacks.onSuccess()
     })
 
-    expect(Toast.notify).toHaveBeenCalledWith({
-      type: 'success',
-      message: 'common.api.actionSuccess',
-    })
+    expect(toastSuccessSpy).toHaveBeenCalledWith('common.api.actionSuccess')
     expect(mockUpdateModelProviders).toHaveBeenCalledTimes(1)
     expect(mockUpdateModelList).toHaveBeenNthCalledWith(1, 'llm')
     expect(mockUpdateModelList).toHaveBeenNthCalledWith(2, 'text-embedding')
@@ -119,9 +120,6 @@ describe('useActivateCredential', () => {
     })
 
     expect(result.current.selectedCredentialId).toBe('cred-1')
-    expect(Toast.notify).toHaveBeenCalledWith({
-      type: 'error',
-      message: 'common.actionMsg.modifiedUnsuccessfully',
-    })
+    expect(toastErrorSpy).toHaveBeenCalledWith('common.actionMsg.modifiedUnsuccessfully')
   })
 })
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/use-activate-credential.ts b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/use-activate-credential.ts
index f7f3f74779..6f99c32296 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/use-activate-credential.ts
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/use-activate-credential.ts
@@ -1,12 +1,9 @@
 import type { Credential, ModelProvider } from '../../declarations'
 import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { useActiveProviderCredential } from '@/service/use-models'
-import {
-  useUpdateModelList,
-  useUpdateModelProviders,
-} from '../../hooks'
+import { useUpdateModelList, useUpdateModelProviders } from '../../hooks'
 
 export function useActivateCredential(provider: ModelProvider) {
   const { t } = useTranslation()
@@ -14,36 +11,28 @@ export function useActivateCredential(provider: ModelProvider) {
   const updateModelList = useUpdateModelList()
   const { mutate, isPending } = useActiveProviderCredential(provider.provider)
   const [optimisticId, setOptimisticId] = useState<string>()
-
   const currentId = provider.custom_configuration.current_credential_id
   const selectedCredentialId = optimisticId ?? currentId
-
   const selectedIdRef = useRef(selectedCredentialId)
   selectedIdRef.current = selectedCredentialId
-
   const supportedModelTypesRef = useRef(provider.supported_model_types)
   supportedModelTypesRef.current = provider.supported_model_types
-
   const activate = useCallback((credential: Credential) => {
     if (credential.credential_id === selectedIdRef.current)
       return
     setOptimisticId(credential.credential_id)
-    mutate(
-      { credential_id: credential.credential_id },
-      {
-        onSuccess: () => {
-          Toast.notify({ type: 'success', message: t('api.actionSuccess', { ns: 'common' }) })
-          updateModelProviders()
-          supportedModelTypesRef.current.forEach(type => updateModelList(type))
-        },
-        onError: () => {
-          setOptimisticId(undefined)
-          Toast.notify({ type: 'error', message: t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }) })
-        },
+    mutate({ credential_id: credential.credential_id }, {
+      onSuccess: () => {
+        toast.success(t('api.actionSuccess', { ns: 'common' }))
+        updateModelProviders()
+        supportedModelTypesRef.current.forEach(type => updateModelList(type))
       },
-    )
+      onError: () => {
+        setOptimisticId(undefined)
+        toast.error(t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }))
+      },
+    })
   }, [mutate, t, updateModelProviders, updateModelList])
-
   return {
     selectedCredentialId,
     isActivating: isPending,
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 d0f7ac7e53..3cbc60abdd 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
@@ -1,28 +1,15 @@
-import type {
-  Credential,
-  CustomConfigurationModelFixedFields,
-  ModelItem,
-  ModelLoadBalancingConfig,
-  ModelLoadBalancingConfigEntry,
-  ModelProvider,
-} from '../declarations'
+import type { Credential, CustomConfigurationModelFixedFields, ModelItem, ModelLoadBalancingConfig, ModelLoadBalancingConfigEntry, ModelProvider } from '../declarations'
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 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/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { SwitchCredentialInLoadBalancing } from '@/app/components/header/account-setting/model-provider-page/model-auth'
-import {
-  useGetModelCredential,
-  useUpdateModelLoadBalancingConfig,
-} from '@/service/use-models'
+import { useGetModelCredential, useUpdateModelLoadBalancingConfig } from '@/service/use-models'
 import { cn } from '@/utils/classnames'
-import {
-  ConfigurationMethodEnum,
-  FormTypeEnum,
-} from '../declarations'
+import { ConfigurationMethodEnum, FormTypeEnum } from '../declarations'
 import { useRefreshModel } from '../hooks'
 import { useAuth } from '../model-auth/hooks/use-auth'
 import ModelIcon from '../model-icon'
@@ -39,49 +26,18 @@ export type ModelLoadBalancingModalProps = {
   onClose?: () => void
   onSave?: (provider: string) => void
 }
-
 // model balancing config modal
-const ModelLoadBalancingModal = ({
-  provider,
-  configurateMethod,
-  currentCustomConfigurationModelFixedFields,
-  model,
-  credential,
-  open = false,
-  onClose,
-  onSave,
-}: ModelLoadBalancingModalProps) => {
+const ModelLoadBalancingModal = ({ provider, configurateMethod, currentCustomConfigurationModelFixedFields, model, credential, open = false, onClose, onSave }: ModelLoadBalancingModalProps) => {
   const { t } = useTranslation()
-  const { notify } = useToastContext()
-  const {
-    doingAction,
-    deleteModel,
-    openConfirmDelete,
-    closeConfirmDelete,
-    handleConfirmDelete,
-  } = useAuth(
-    provider,
-    configurateMethod,
-    currentCustomConfigurationModelFixedFields,
-    {
-      isModelCredential: true,
-    },
-  )
+  const { doingAction, deleteModel, openConfirmDelete, closeConfirmDelete, handleConfirmDelete } = useAuth(provider, configurateMethod, currentCustomConfigurationModelFixedFields, {
+    isModelCredential: true,
+  })
   const [loading, setLoading] = useState(false)
   const providerFormSchemaPredefined = configurateMethod === ConfigurationMethodEnum.predefinedModel
   const configFrom = providerFormSchemaPredefined ? 'predefined-model' : 'custom-model'
-  const {
-    isLoading,
-    data,
-    refetch,
-  } = useGetModelCredential(true, provider.provider, credential?.credential_id, model.model, model.model_type, configFrom)
+  const { isLoading, data, refetch } = useGetModelCredential(true, provider.provider, credential?.credential_id, model.model, model.model_type, configFrom)
   const modelCredential = data
-  const {
-    load_balancing,
-    current_credential_id,
-    available_credentials,
-    current_credential_name,
-  } = modelCredential ?? {}
+  const { load_balancing, current_credential_id, available_credentials, current_credential_name } = modelCredential ?? {}
   const originalConfig = load_balancing
   const [draftConfig, setDraftConfig] = useState<ModelLoadBalancingConfig>()
   const originalConfigMap = useMemo(() => {
@@ -97,7 +53,6 @@ const ModelLoadBalancingModal = ({
     if (originalConfig)
       setDraftConfig(originalConfig)
   }, [originalConfig])
-
   const toggleModalBalancing = useCallback((enabled: boolean) => {
     if (draftConfig) {
       setDraftConfig({
@@ -106,21 +61,12 @@ const ModelLoadBalancingModal = ({
       })
     }
   }, [draftConfig])
-
-  const extendedSecretFormSchemas = useMemo(
-    () => {
-      if (providerFormSchemaPredefined) {
-        return provider?.provider_credential_schema?.credential_form_schemas?.filter(
-          ({ type }) => type === FormTypeEnum.secretInput,
-        ) ?? []
-      }
-      return provider?.model_credential_schema?.credential_form_schemas?.filter(
-        ({ type }) => type === FormTypeEnum.secretInput,
-      ) ?? []
-    },
-    [provider?.model_credential_schema?.credential_form_schemas, provider?.provider_credential_schema?.credential_form_schemas, providerFormSchemaPredefined],
-  )
-
+  const extendedSecretFormSchemas = useMemo(() => {
+    if (providerFormSchemaPredefined) {
+      return provider?.provider_credential_schema?.credential_form_schemas?.filter(({ type }) => type === FormTypeEnum.secretInput) ?? []
+    }
+    return provider?.model_credential_schema?.credential_form_schemas?.filter(({ type }) => type === FormTypeEnum.secretInput) ?? []
+  }, [provider?.model_credential_schema?.credential_form_schemas, provider?.provider_credential_schema?.credential_form_schemas, providerFormSchemaPredefined])
   const encodeConfigEntrySecretValues = useCallback((entry: ModelLoadBalancingConfigEntry) => {
     const result = { ...entry }
     extendedSecretFormSchemas.forEach(({ variable }) => {
@@ -129,7 +75,6 @@ const ModelLoadBalancingModal = ({
     })
     return result
   }, [extendedSecretFormSchemas, originalConfigMap])
-
   const { mutateAsync: updateModelLoadBalancingConfig } = useUpdateModelLoadBalancingConfig(provider.provider)
   const initialCustomModelCredential = useMemo(() => {
     if (!current_credential_id)
@@ -144,37 +89,31 @@ const ModelLoadBalancingModal = ({
   const handleSave = async () => {
     try {
       setLoading(true)
-      const res = await updateModelLoadBalancingConfig(
-        {
-          credential_id: customModelCredential?.credential_id || current_credential_id,
-          config_from: configFrom,
-          model: model.model,
-          model_type: model.model_type,
-          load_balancing: {
-            ...draftConfig,
-            configs: draftConfig!.configs.map(encodeConfigEntrySecretValues),
-            enabled: Boolean(draftConfig?.enabled),
-          },
+      const res = await updateModelLoadBalancingConfig({
+        credential_id: customModelCredential?.credential_id || current_credential_id,
+        config_from: configFrom,
+        model: model.model,
+        model_type: model.model_type,
+        load_balancing: {
+          ...draftConfig,
+          configs: draftConfig!.configs.map(encodeConfigEntrySecretValues),
+          enabled: Boolean(draftConfig?.enabled),
         },
-      )
+      })
       if (res.result === 'success') {
-        notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
+        toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
         handleRefreshModel(provider, currentCustomConfigurationModelFixedFields, false)
         onSave?.(provider.provider)
         onClose?.()
       }
       else {
-        notify({
-          type: 'error',
-          message: (res as { error?: string })?.error || t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }),
-        })
+        toast.error((res as {
+          error?: string
+        })?.error || t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }))
       }
     }
     catch (error) {
-      notify({
-        type: 'error',
-        message: error instanceof Error ? error.message : t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }),
-      })
+      toast.error(error instanceof Error ? error.message : t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }))
     }
     finally {
       setLoading(false)
@@ -184,18 +123,15 @@ const ModelLoadBalancingModal = ({
     await handleConfirmDelete()
     onClose?.()
   }, [handleConfirmDelete, onClose])
-
   const handleUpdate = useCallback(async (payload?: any, formValues?: Record<string, any>) => {
     const result = await refetch()
     const available_credentials = result.data?.available_credentials || []
     const credentialName = formValues?.__authorization_name__
     const modelCredential = payload?.credential
-
     if (!available_credentials.length) {
       onClose?.()
       return
     }
-
     if (!modelCredential) {
       const currentCredential = available_credentials.find(c => c.credential_name === credentialName)
       if (currentCredential) {
@@ -220,10 +156,8 @@ const ModelLoadBalancingModal = ({
         const newConfigs = [...prev.configs]
         const prevIndex = newConfigs.findIndex(item => item.credential_id === modelCredential.credential_id && item.name !== '__inherit__')
         const newIndex = available_credentials.findIndex(c => c.credential_id === modelCredential.credential_id)
-
         if (newIndex > -1 && prevIndex > -1)
           newConfigs[prevIndex].name = available_credentials[newIndex].credential_name || ''
-
         return {
           ...prev,
           configs: newConfigs,
@@ -231,14 +165,12 @@ const ModelLoadBalancingModal = ({
       })
     }
   }, [refetch, onClose])
-
   const handleUpdateWhenSwitchCredential = useCallback(async () => {
     const result = await refetch()
     const available_credentials = result.data?.available_credentials || []
     if (!available_credentials.length)
       onClose?.()
   }, [refetch, onClose])
-
   return (
     <>
       <Modal
@@ -249,26 +181,14 @@ const ModelLoadBalancingModal = ({
         title={(
           <div className="pb-3 font-semibold">
             <div className="h-[30px]">
-              {
-                draftConfig?.enabled
-                  ? t('modelProvider.auth.configLoadBalancing', { ns: 'common' })
-                  : t('modelProvider.auth.configModel', { ns: 'common' })
-              }
+              {draftConfig?.enabled
+                ? t('modelProvider.auth.configLoadBalancing', { ns: 'common' })
+                : t('modelProvider.auth.configModel', { ns: 'common' })}
             </div>
             {Boolean(model) && (
               <div className="flex h-5 items-center">
-                <ModelIcon
-                  className="mr-2 shrink-0"
-                  provider={provider}
-                  modelName={model!.model}
-                />
-                <ModelName
-                  className="grow text-text-secondary system-md-regular"
-                  modelItem={model!}
-                  showModelType
-                  showMode
-                  showContextSize
-                />
+                <ModelIcon className="mr-2 shrink-0" provider={provider} modelName={model!.model} />
+                <ModelName className="grow text-text-secondary system-md-regular" modelItem={model!} showModelType showMode showContextSize />
               </div>
             )}
           </div>
@@ -279,95 +199,65 @@ const ModelLoadBalancingModal = ({
           : (
               <>
                 <div className="py-2">
-                  <div
-                    className={cn('min-h-16 rounded-xl border bg-components-panel-bg transition-colors', draftConfig.enabled ? 'cursor-pointer border-components-panel-border' : 'cursor-default border-util-colors-blue-blue-600')}
-                    onClick={draftConfig.enabled ? () => toggleModalBalancing(false) : undefined}
-                  >
+                  <div className={cn('min-h-16 rounded-xl border bg-components-panel-bg transition-colors', draftConfig.enabled ? 'cursor-pointer border-components-panel-border' : 'cursor-default border-util-colors-blue-blue-600')} onClick={draftConfig.enabled ? () => toggleModalBalancing(false) : undefined}>
                     <div className="flex select-none items-center gap-2 px-[15px] py-3">
                       <div className="flex h-8 w-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-components-card-border bg-components-card-bg">
-                        {Boolean(model) && (
-                          <ModelIcon className="shrink-0" provider={provider} modelName={model!.model} />
-                        )}
+                        {Boolean(model) && (<ModelIcon className="shrink-0" provider={provider} modelName={model!.model} />)}
                       </div>
                       <div className="grow">
                         <div className="text-sm text-text-secondary">
-                          {
-                            providerFormSchemaPredefined
-                              ? t('modelProvider.auth.providerManaged', { ns: 'common' })
-                              : t('modelProvider.auth.specifyModelCredential', { ns: 'common' })
-                          }
+                          {providerFormSchemaPredefined
+                            ? t('modelProvider.auth.providerManaged', { ns: 'common' })
+                            : t('modelProvider.auth.specifyModelCredential', { ns: 'common' })}
                         </div>
                         <div className="text-xs text-text-tertiary">
-                          {
-                            providerFormSchemaPredefined
-                              ? t('modelProvider.auth.providerManagedTip', { ns: 'common' })
-                              : t('modelProvider.auth.specifyModelCredentialTip', { ns: 'common' })
-                          }
+                          {providerFormSchemaPredefined
+                            ? t('modelProvider.auth.providerManagedTip', { ns: 'common' })
+                            : t('modelProvider.auth.specifyModelCredentialTip', { ns: 'common' })}
                         </div>
                       </div>
-                      {
-                        !providerFormSchemaPredefined && (
-                          <SwitchCredentialInLoadBalancing
-                            provider={provider}
-                            customModelCredential={customModelCredential ?? initialCustomModelCredential}
-                            setCustomModelCredential={setCustomModelCredential}
-                            model={model}
-                            credentials={available_credentials}
-                            onUpdate={handleUpdateWhenSwitchCredential}
-                            onRemove={handleUpdateWhenSwitchCredential}
-                          />
-                        )
-                      }
+                      {!providerFormSchemaPredefined && (<SwitchCredentialInLoadBalancing provider={provider} customModelCredential={customModelCredential ?? initialCustomModelCredential} setCustomModelCredential={setCustomModelCredential} model={model} credentials={available_credentials} onUpdate={handleUpdateWhenSwitchCredential} onRemove={handleUpdateWhenSwitchCredential} />)}
                     </div>
                   </div>
-                  {
-                    modelCredential && (
-                      <ModelLoadBalancingConfigs {...{
-                        draftConfig,
-                        setDraftConfig,
-                        provider,
-                        currentCustomConfigurationModelFixedFields: {
-                          __model_name: model.model,
-                          __model_type: model.model_type,
-                        },
-                        configurationMethod: model.fetch_from,
-                        className: 'mt-2',
-                        modelCredential,
-                        onUpdate: handleUpdate,
-                        onRemove: handleUpdateWhenSwitchCredential,
-                        model: {
-                          model: model.model,
-                          model_type: model.model_type,
-                        },
-                      }}
-                      />
-                    )
-                  }
+                  {modelCredential && (
+                    <ModelLoadBalancingConfigs {...{
+                      draftConfig,
+                      setDraftConfig,
+                      provider,
+                      currentCustomConfigurationModelFixedFields: {
+                        __model_name: model.model,
+                        __model_type: model.model_type,
+                      },
+                      configurationMethod: model.fetch_from,
+                      className: 'mt-2',
+                      modelCredential,
+                      onUpdate: handleUpdate,
+                      onRemove: handleUpdateWhenSwitchCredential,
+                      model: {
+                        model: model.model,
+                        model_type: model.model_type,
+                      },
+                    }}
+                    />
+                  )}
                 </div>
 
                 <div className="mt-6 flex items-center justify-between gap-2">
                   <div>
-                    {
-                      !providerFormSchemaPredefined && (
-                        <Button
-                          onClick={() => openConfirmDelete(undefined, { model: model.model, model_type: model.model_type })}
-                          className="text-components-button-destructive-secondary-text"
-                        >
-                          {t('modelProvider.auth.removeModel', { ns: 'common' })}
-                        </Button>
-                      )
-                    }
+                    {!providerFormSchemaPredefined && (
+                      <Button onClick={() => openConfirmDelete(undefined, { model: model.model, model_type: model.model_type })} className="text-components-button-destructive-secondary-text">
+                        {t('modelProvider.auth.removeModel', { ns: 'common' })}
+                      </Button>
+                    )}
                   </div>
                   <div className="space-x-2">
                     <Button onClick={onClose}>{t('operation.cancel', { ns: 'common' })}</Button>
                     <Button
                       variant="primary"
                       onClick={handleSave}
-                      disabled={
-                        loading
+                      disabled={loading
                         || (draftConfig?.enabled && (draftConfig?.configs.filter(config => config.enabled).length ?? 0) < 2)
-                        || isLoading
-                      }
+                        || isLoading}
                     >
                       {t('operation.save', { ns: 'common' })}
                     </Button>
@@ -376,19 +266,8 @@ const ModelLoadBalancingModal = ({
               </>
             )}
       </Modal>
-      {
-        deleteModel && (
-          <Confirm
-            isShow
-            title={t('modelProvider.confirmDelete', { ns: 'common' })}
-            onCancel={closeConfirmDelete}
-            onConfirm={handleDeleteModel}
-            isDisabled={doingAction}
-          />
-        )
-      }
+      {deleteModel && (<Confirm isShow title={t('modelProvider.confirmDelete', { ns: 'common' })} onCancel={closeConfirmDelete} onConfirm={handleDeleteModel} isDisabled={doingAction} />)}
     </>
   )
 }
-
 export default memo(ModelLoadBalancingModal)
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/use-change-provider-priority.ts b/web/app/components/header/account-setting/model-provider-page/provider-added-card/use-change-provider-priority.ts
index 9762f47d74..2a9e7e62ac 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/use-change-provider-priority.ts
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/use-change-provider-priority.ts
@@ -1,7 +1,7 @@
 import type { ModelProvider, PreferredProviderTypeEnum } from '../declarations'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { consoleQuery } from '@/service/client'
 import { ConfigurationMethodEnum } from '../declarations'
 import { useUpdateModelList, useUpdateModelProviders } from '../hooks'
@@ -12,7 +12,6 @@ export function useChangeProviderPriority(provider: ModelProvider | undefined) {
   const updateModelList = useUpdateModelList()
   const updateModelProviders = useUpdateModelProviders()
   const providerName = provider?.provider ?? ''
-
   const modelProviderModelListQueryKey = consoleQuery.modelProviders.models.queryKey({
     input: {
       params: {
@@ -20,34 +19,29 @@ export function useChangeProviderPriority(provider: ModelProvider | undefined) {
       },
     },
   })
-
-  const { mutate: changePriority, isPending: isChangingPriority } = useMutation(
-    consoleQuery.modelProviders.changePreferredProviderType.mutationOptions({
-      onSuccess: () => {
-        Toast.notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
-        queryClient.invalidateQueries({
-          queryKey: modelProviderModelListQueryKey,
-          exact: true,
-          refetchType: 'none',
-        })
-        updateModelProviders()
-        provider?.configurate_methods.forEach((method) => {
-          if (method === ConfigurationMethodEnum.predefinedModel)
-            provider?.supported_model_types.forEach(modelType => updateModelList(modelType))
-        })
-      },
-      onError: () => {
-        Toast.notify({ type: 'error', message: t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }) })
-      },
-    }),
-  )
-
+  const { mutate: changePriority, isPending: isChangingPriority } = useMutation(consoleQuery.modelProviders.changePreferredProviderType.mutationOptions({
+    onSuccess: () => {
+      toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
+      queryClient.invalidateQueries({
+        queryKey: modelProviderModelListQueryKey,
+        exact: true,
+        refetchType: 'none',
+      })
+      updateModelProviders()
+      provider?.configurate_methods.forEach((method) => {
+        if (method === ConfigurationMethodEnum.predefinedModel)
+          provider?.supported_model_types.forEach(modelType => updateModelList(modelType))
+      })
+    },
+    onError: () => {
+      toast.error(t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }))
+    },
+  }))
   const handleChangePriority = (key: PreferredProviderTypeEnum) => {
     changePriority({
       params: { provider: providerName },
       body: { preferred_provider_type: key },
     })
   }
-
   return { isChangingPriority, handleChangePriority }
 }
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 c016f6a9fa..7308691b54 100644
--- a/web/app/components/header/account-setting/plugin-page/SerpapiPlugin.tsx
+++ b/web/app/components/header/account-setting/plugin-page/SerpapiPlugin.tsx
@@ -1,7 +1,7 @@
 import type { Form, ValidateValue } from '../key-validator/declarations'
 import type { PluginProvider } from '@/models/common'
 import { useTranslation } from 'react-i18next'
-import { useToastContext } from '@/app/components/base/toast/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { useAppContext } from '@/context/app-context'
 import SerpapiLogo from '../../assets/serpapi.png'
 import KeyValidator from '../key-validator'
@@ -11,14 +11,9 @@ type SerpapiPluginProps = {
   plugin: PluginProvider
   onUpdate: () => void
 }
-const SerpapiPlugin = ({
-  plugin,
-  onUpdate,
-}: SerpapiPluginProps) => {
+const SerpapiPlugin = ({ plugin, onUpdate }: SerpapiPluginProps) => {
   const { t } = useTranslation()
   const { isCurrentWorkspaceManager } = useAppContext()
-  const { notify } = useToastContext()
-
   const forms: Form[] = [{
     key: 'api_key',
     title: t('plugin.serpapi.apiKey', { ns: 'common' }),
@@ -42,24 +37,20 @@ const SerpapiPlugin = ({
         dispatch({ ...v, api_key: '' })
     },
   }]
-
   const handleSave = async (v: ValidateValue) => {
     if (!v?.api_key || v?.api_key === plugin.credentials?.api_key)
       return
-
     const res = await updatePluginKey('serpapi', {
       credentials: {
         api_key: v?.api_key,
       },
     })
-
     if (res.status === 'success') {
-      notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
+      toast.success(t('actionMsg.modifiedSuccessfully', { ns: 'common' }))
       onUpdate()
       return true
     }
   }
-
   return (
     <KeyValidator
       type="serpapi"
@@ -75,5 +66,4 @@ const SerpapiPlugin = ({
     />
   )
 }
-
 export default SerpapiPlugin
diff --git a/web/app/components/header/account-setting/plugin-page/__tests__/SerpapiPlugin.spec.tsx b/web/app/components/header/account-setting/plugin-page/__tests__/SerpapiPlugin.spec.tsx
index 2a35146e4f..85d205713b 100644
--- a/web/app/components/header/account-setting/plugin-page/__tests__/SerpapiPlugin.spec.tsx
+++ b/web/app/components/header/account-setting/plugin-page/__tests__/SerpapiPlugin.spec.tsx
@@ -1,6 +1,5 @@
 import type { PluginProvider } from '@/models/common'
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { useToastContext } from '@/app/components/base/toast/context'
 import { useAppContext } from '@/context/app-context'
 import SerpapiPlugin from '../SerpapiPlugin'
 import { updatePluginKey, validatePluginKey } from '../utils'
@@ -20,14 +19,23 @@ const mockEventEmitter = vi.hoisted(() => {
   }
 })
 
-vi.mock('@/app/components/base/toast/context', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/app/components/base/toast/context')>()
-  return {
-    ...actual,
-    useToastContext: vi.fn(),
-  }
+const { mockToast } = vi.hoisted(() => {
+  const mockToast = Object.assign(vi.fn(), {
+    success: vi.fn(),
+    error: vi.fn(),
+    warning: vi.fn(),
+    info: vi.fn(),
+    dismiss: vi.fn(),
+    update: vi.fn(),
+    promise: vi.fn(),
+  })
+  return { mockToast }
 })
 
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
+}))
+
 vi.mock('@/context/app-context', () => ({
   useAppContext: vi.fn(),
 }))
@@ -45,7 +53,6 @@ vi.mock('@/context/event-emitter', () => ({
 
 describe('SerpapiPlugin', () => {
   const mockOnUpdate = vi.fn()
-  const mockNotify = vi.fn()
   const mockUpdatePluginKey = updatePluginKey as ReturnType<typeof vi.fn>
   const mockValidatePluginKey = validatePluginKey as ReturnType<typeof vi.fn>
 
@@ -53,13 +60,9 @@ describe('SerpapiPlugin', () => {
     vi.clearAllMocks()
     mockEventEmitter.reset()
     const mockUseAppContext = useAppContext as ReturnType<typeof vi.fn>
-    const mockUseToastContext = useToastContext as ReturnType<typeof vi.fn>
     mockUseAppContext.mockReturnValue({
       isCurrentWorkspaceManager: true,
     })
-    mockUseToastContext.mockReturnValue({
-      notify: mockNotify,
-    })
     mockValidatePluginKey.mockResolvedValue({ status: 'success' })
     mockUpdatePluginKey.mockResolvedValue({ status: 'success' })
   })
diff --git a/web/app/components/header/account-setting/plugin-page/__tests__/index.spec.tsx b/web/app/components/header/account-setting/plugin-page/__tests__/index.spec.tsx
index 45047d2894..ff58fdd182 100644
--- a/web/app/components/header/account-setting/plugin-page/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-setting/plugin-page/__tests__/index.spec.tsx
@@ -14,13 +14,11 @@ vi.mock('@/context/app-context', () => ({
   useAppContext: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/toast/context', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/app/components/base/toast/context')>()
+vi.mock('@/app/components/base/ui/toast', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/app/components/base/ui/toast')>()
   return {
     ...actual,
-    useToastContext: () => ({
-      notify: vi.fn(),
-    }),
+
   }
 })
 
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 91ffbaa24a..f4eb9462fc 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,10 +42,6 @@ vi.mock('@/context/app-context', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/toast/context', () => ({
-  useToastContext: () => ({ notify: vi.fn() }),
-}))
-
 vi.mock('@/hooks/use-oauth', () => ({
   openOAuthPopup: 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 901c3ab49a..4c26712fdc 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,10 +42,6 @@ vi.mock('@/context/app-context', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/toast/context', () => ({
-  useToastContext: () => ({ notify: vi.fn() }),
-}))
-
 vi.mock('@/hooks/use-oauth', () => ({
   openOAuthPopup: 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 430149e50b..a4ddec8f51 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
@@ -5,16 +5,23 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { AuthCategory } from '../../types'
 
 const mockNotify = vi.fn()
+const mockToast = {
+  success: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'success', message, ...options }),
+  error: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'error', message, ...options }),
+  warning: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'warning', message, ...options }),
+  info: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'info', message, ...options }),
+  dismiss: vi.fn(),
+  update: vi.fn(),
+  promise: vi.fn(),
+}
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
+}))
 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/context', () => ({
-  useToastContext: () => ({
-    notify: mockNotify,
-  }),
-}))
-
 vi.mock('../../hooks/use-credential', () => ({
   useAddPluginCredentialHook: () => ({
     mutateAsync: mockAddPluginCredential,
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 d120902e6d..acb31cee5f 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
@@ -93,12 +93,20 @@ vi.mock('@/app/components/base/form/form-scenarios/auth', () => ({
   }),
 }))
 
-// Mock useToastContext
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/toast/context', () => ({
-  useToastContext: () => ({ notify: mockNotify }),
-}))
+const mockToast = {
+  success: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'success', message, ...options }),
+  error: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'error', message, ...options }),
+  warning: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'warning', message, ...options }),
+  info: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'info', message, ...options }),
+  dismiss: vi.fn(),
+  update: vi.fn(),
+  promise: vi.fn(),
+}
 
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
+}))
 // Factory function for creating test PluginPayload
 const createPluginPayload = (overrides: Partial<PluginPayload> = {}): PluginPayload => ({
   category: AuthCategory.tool,
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 f1b86f80ea..5f9b6f5695 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
@@ -4,17 +4,24 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { AuthCategory } from '../../types'
 
 const mockNotify = vi.fn()
+const mockToast = {
+  success: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'success', message, ...options }),
+  error: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'error', message, ...options }),
+  warning: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'warning', message, ...options }),
+  info: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'info', message, ...options }),
+  dismiss: vi.fn(),
+  update: vi.fn(),
+  promise: vi.fn(),
+}
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
+}))
 const mockSetPluginOAuthCustomClient = vi.fn().mockResolvedValue({})
 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/context', () => ({
-  useToastContext: () => ({
-    notify: mockNotify,
-  }),
-}))
-
 vi.mock('../../hooks/use-credential', () => ({
   useSetPluginOAuthCustomClientHook: () => ({
     mutateAsync: mockSetPluginOAuthCustomClient,
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 d8ab1cafdd..54b72ac63e 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
@@ -11,12 +11,18 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
 import { EncryptedBottom } from '@/app/components/base/encrypted-bottom'
 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/context'
+import {
+  Dialog,
+  DialogCloseButton,
+  DialogContent,
+  DialogTitle,
+} from '@/app/components/base/ui/dialog'
+import { toast } from '@/app/components/base/ui/toast'
 import { ReadmeEntrance } from '../../readme-panel/entrance'
 import { ReadmeShowType } from '../../readme-panel/store'
 import {
@@ -29,7 +35,7 @@ import { CredentialTypeEnum } from '../types'
 export type ApiKeyModalProps = {
   pluginPayload: PluginPayload
   onClose?: () => void
-  editValues?: Record<string, any>
+  editValues?: Record<string, unknown>
   onRemove?: () => void
   disabled?: boolean
   onUpdate?: () => void
@@ -45,7 +51,6 @@ const ApiKeyModal = ({
   formSchemas: formSchemasFromProps = [],
 }: ApiKeyModalProps) => {
   const { t } = useTranslation()
-  const { notify } = useToastContext()
   const [doingAction, setDoingAction] = useState(false)
   const doingActionRef = useRef(doingAction)
   const handleSetDoingAction = useCallback((value: boolean) => {
@@ -74,7 +79,7 @@ const ApiKeyModal = ({
     if (schema.default)
       acc[schema.name] = schema.default
     return acc
-  }, {} as Record<string, any>)
+  }, {} as Record<string, unknown>)
   const { mutateAsync: addPluginCredential } = useAddPluginCredentialHook(pluginPayload)
   const { mutateAsync: updatePluginCredential } = useUpdatePluginCredentialHook(pluginPayload)
   const formRef = useRef<FormRefObject>(null)
@@ -113,10 +118,7 @@ const ApiKeyModal = ({
           name: __name__ || '',
         })
       }
-      notify({
-        type: 'success',
-        message: t('api.actionSuccess', { ns: 'common' }),
-      })
+      toast.success(t('api.actionSuccess', { ns: 'common' }))
 
       onClose?.()
       onUpdate?.()
@@ -124,47 +126,60 @@ const ApiKeyModal = ({
     finally {
       handleSetDoingAction(false)
     }
-  }, [addPluginCredential, onClose, onUpdate, updatePluginCredential, notify, t, editValues, handleSetDoingAction])
+  }, [addPluginCredential, onClose, onUpdate, updatePluginCredential, t, editValues, handleSetDoingAction])
 
   return (
-    <Modal
-      size="md"
-      title={t('auth.useApiAuth', { ns: 'plugin' })}
-      subTitle={t('auth.useApiAuthDesc', { ns: 'plugin' })}
-      onClose={onClose}
-      onCancel={onClose}
-      footerSlot={
-        (<div></div>)
-      }
-      bottomSlot={<EncryptedBottom />}
-      onConfirm={handleConfirm}
-      showExtraButton={!!editValues}
-      onExtraButtonClick={onRemove}
-      disabled={disabled || isLoading || doingAction}
-      clickOutsideNotClose={true}
-      wrapperClassName="!z-[101]"
-    >
-      {pluginPayload.detail && (
-        <ReadmeEntrance pluginDetail={pluginPayload.detail} showType={ReadmeShowType.modal} />
-      )}
-      {
-        isLoading && (
-          <div className="flex h-40 items-center justify-center">
-            <Loading />
+    <Dialog open>
+      <DialogContent className="w-[640px] max-w-none overflow-visible px-8 pb-6 pt-8">
+        <DialogCloseButton onClick={onClose} />
+        <div className="mb-2 pr-8 text-xl font-semibold text-text-primary">
+          <DialogTitle>
+            {t('auth.useApiAuth', { ns: 'plugin' })}
+          </DialogTitle>
+        </div>
+        <div className="mb-4 text-sm font-medium leading-5 text-text-secondary">
+          {t('auth.useApiAuthDesc', { ns: 'plugin' })}
+        </div>
+        {pluginPayload.detail && (
+          <ReadmeEntrance pluginDetail={pluginPayload.detail} showType={ReadmeShowType.modal} />
+        )}
+        {
+          isLoading && (
+            <div className="flex h-40 items-center justify-center">
+              <Loading />
+            </div>
+          )
+        }
+        {
+          !isLoading && !!mergedData.length && (
+            <AuthForm
+              ref={formRef}
+              formSchemas={formSchemas}
+              defaultValues={editValues || defaultValues}
+              disabled={disabled}
+            />
+          )
+        }
+        <div className="mt-6 flex items-center justify-between">
+          <div>
+            {!!editValues && (
+              <Button variant="warning" onClick={onRemove} disabled={disabled || isLoading || doingAction}>
+                {t('operation.remove', { ns: 'common' })}
+              </Button>
+            )}
           </div>
-        )
-      }
-      {
-        !isLoading && !!mergedData.length && (
-          <AuthForm
-            ref={formRef}
-            formSchemas={formSchemas}
-            defaultValues={editValues || defaultValues}
-            disabled={disabled}
-          />
-        )
-      }
-    </Modal>
+          <div className="flex items-center gap-2">
+            <Button onClick={onClose} disabled={disabled || isLoading || doingAction}>
+              {t('operation.cancel', { ns: 'common' })}
+            </Button>
+            <Button variant="primary" onClick={handleConfirm} disabled={disabled || isLoading || doingAction}>
+              {t('operation.save', { ns: 'common' })}
+            </Button>
+          </div>
+        </div>
+        <EncryptedBottom />
+      </DialogContent>
+    </Dialog>
   )
 }
 
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 28989da77c..73acaf5ee2 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
@@ -16,8 +16,13 @@ import {
 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/context'
+import {
+  Dialog,
+  DialogCloseButton,
+  DialogContent,
+  DialogTitle,
+} from '@/app/components/base/ui/dialog'
+import { toast } from '@/app/components/base/ui/toast'
 import { ReadmeEntrance } from '../../readme-panel/entrance'
 import { ReadmeShowType } from '../../readme-panel/store'
 import {
@@ -29,7 +34,7 @@ import {
 type OAuthClientSettingsProps = {
   pluginPayload: PluginPayload
   onClose?: () => void
-  editValues?: Record<string, any>
+  editValues?: Record<string, unknown>
   disabled?: boolean
   schemas: FormSchema[]
   onAuth?: () => Promise<void>
@@ -47,7 +52,6 @@ const OAuthClientSettings = ({
   onUpdate,
 }: OAuthClientSettingsProps) => {
   const { t } = useTranslation()
-  const { notify } = useToastContext()
   const [doingAction, setDoingAction] = useState(false)
   const doingActionRef = useRef(doingAction)
   const handleSetDoingAction = useCallback((value: boolean) => {
@@ -58,7 +62,7 @@ const OAuthClientSettings = ({
     if (schema.default)
       acc[schema.name] = schema.default
     return acc
-  }, {} as Record<string, any>)
+  }, {} as Record<string, unknown>)
   const { mutateAsync: setPluginOAuthCustomClient } = useSetPluginOAuthCustomClientHook(pluginPayload)
   const invalidPluginOAuthClientSchema = useInvalidPluginOAuthClientSchemaHook(pluginPayload)
   const formRef = useRef<FormRefObject>(null)
@@ -86,10 +90,7 @@ const OAuthClientSettings = ({
         client_params: restValues,
         enable_oauth_custom_client: __oauth_client__ === 'custom',
       })
-      notify({
-        type: 'success',
-        message: t('api.actionSuccess', { ns: 'common' }),
-      })
+      toast.success(t('api.actionSuccess', { ns: 'common' }))
 
       onClose?.()
       onUpdate?.()
@@ -98,7 +99,7 @@ const OAuthClientSettings = ({
     finally {
       handleSetDoingAction(false)
     }
-  }, [onClose, onUpdate, invalidPluginOAuthClientSchema, setPluginOAuthCustomClient, notify, t, handleSetDoingAction])
+  }, [onClose, onUpdate, invalidPluginOAuthClientSchema, setPluginOAuthCustomClient, t, handleSetDoingAction])
 
   const handleConfirmAndAuthorize = useCallback(async () => {
     await handleConfirm()
@@ -113,10 +114,7 @@ const OAuthClientSettings = ({
     try {
       handleSetDoingAction(true)
       await deletePluginOAuthCustomClient()
-      notify({
-        type: 'success',
-        message: t('api.actionSuccess', { ns: 'common' }),
-      })
+      toast.success(t('api.actionSuccess', { ns: 'common' }))
       onClose?.()
       onUpdate?.()
       invalidPluginOAuthClientSchema()
@@ -124,53 +122,54 @@ const OAuthClientSettings = ({
     finally {
       handleSetDoingAction(false)
     }
-  }, [onUpdate, invalidPluginOAuthClientSchema, deletePluginOAuthCustomClient, notify, t, handleSetDoingAction, onClose])
+  }, [onUpdate, invalidPluginOAuthClientSchema, deletePluginOAuthCustomClient, t, handleSetDoingAction, onClose])
   const form = useForm({
     defaultValues: editValues || defaultValues,
   })
   const __oauth_client__ = useStore(form.store, s => s.values.__oauth_client__)
   return (
-    <Modal
-      title={t('auth.oauthClientSettings', { ns: 'plugin' })}
-      confirmButtonText={t('auth.saveAndAuth', { ns: 'plugin' })}
-      cancelButtonText={t('auth.saveOnly', { ns: 'plugin' })}
-      extraButtonText={t('operation.cancel', { ns: 'common' })}
-      showExtraButton
-      extraButtonVariant="secondary"
-      onExtraButtonClick={onClose}
-      onClose={onClose}
-      onCancel={handleConfirm}
-      onConfirm={handleConfirmAndAuthorize}
-      disabled={disabled || doingAction}
-      footerSlot={
-        __oauth_client__ === 'custom' && hasOriginalClientParams && (
-          <div className="grow">
-            <Button
-              variant="secondary"
-              className="text-components-button-destructive-secondary-text"
-              disabled={disabled || doingAction || !editValues}
-              onClick={handleRemove}
-            >
-              {t('operation.remove', { ns: 'common' })}
+    <Dialog open>
+      <DialogContent className="w-[640px] max-w-none overflow-visible px-8 pb-6 pt-8">
+        <DialogCloseButton onClick={onClose} />
+        <div className="mb-4 pr-8">
+          <DialogTitle className="text-xl font-semibold text-text-primary">
+            {t('auth.oauthClientSettings', { ns: 'plugin' })}
+          </DialogTitle>
+        </div>
+        {pluginPayload.detail && (
+          <ReadmeEntrance pluginDetail={pluginPayload.detail} showType={ReadmeShowType.modal} />
+        )}
+        <AuthForm
+          formFromProps={form}
+          ref={formRef}
+          formSchemas={schemas}
+          defaultValues={editValues || defaultValues}
+          disabled={disabled}
+        />
+        <div className="mt-6 flex items-center justify-between">
+          <div>
+            {__oauth_client__ === 'custom' && hasOriginalClientParams && (
+              <Button
+                variant="secondary"
+                className="text-components-button-destructive-secondary-text"
+                disabled={disabled || doingAction || !editValues}
+                onClick={handleRemove}
+              >
+                {t('operation.remove', { ns: 'common' })}
+              </Button>
+            )}
+          </div>
+          <div className="flex items-center gap-2">
+            <Button onClick={handleConfirm} disabled={disabled || doingAction}>
+              {t('auth.saveOnly', { ns: 'plugin' })}
+            </Button>
+            <Button variant="primary" onClick={handleConfirmAndAuthorize} disabled={disabled || doingAction}>
+              {t('auth.saveAndAuth', { ns: 'plugin' })}
             </Button>
           </div>
-        )
-      }
-      containerClassName="pt-0"
-      wrapperClassName="!z-[101]"
-      clickOutsideNotClose={true}
-    >
-      {pluginPayload.detail && (
-        <ReadmeEntrance pluginDetail={pluginPayload.detail} showType={ReadmeShowType.modal} />
-      )}
-      <AuthForm
-        formFromProps={form}
-        ref={formRef}
-        formSchemas={schemas}
-        defaultValues={editValues || defaultValues}
-        disabled={disabled}
-      />
-    </Modal>
+        </div>
+      </DialogContent>
+    </Dialog>
   )
 }
 
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 a617c2543e..6d0b6c9dc3 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
@@ -50,14 +50,20 @@ vi.mock('../../hooks/use-credential', () => ({
   }),
 }))
 
-// Mock toast context
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/toast/context', () => ({
-  useToastContext: () => ({
-    notify: mockNotify,
-  }),
-}))
+const mockToast = {
+  success: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'success', message, ...options }),
+  error: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'error', message, ...options }),
+  warning: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'warning', message, ...options }),
+  info: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'info', message, ...options }),
+  dismiss: vi.fn(),
+  update: vi.fn(),
+  promise: vi.fn(),
+}
 
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
+}))
 // Mock openOAuthPopup
 vi.mock('@/hooks/use-oauth', () => ({
   openOAuthPopup: vi.fn(),
diff --git a/web/app/components/plugins/plugin-auth/authorized/index.tsx b/web/app/components/plugins/plugin-auth/authorized/index.tsx
index 61f41a2edf..0eb4f06982 100644
--- a/web/app/components/plugins/plugin-auth/authorized/index.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized/index.tsx
@@ -1,11 +1,10 @@
 import type { Credential, PluginPayload } from '../types'
-import type {
-  PortalToFollowElemOptions,
-} from '@/app/components/base/portal-to-follow-elem'
+import type { Placement } from '@/app/components/base/ui/placement'
 import {
   RiArrowDownSLine,
 } from '@remixicon/react'
 import {
+  isValidElement,
   memo,
   useCallback,
   useRef,
@@ -13,13 +12,20 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
-import Confirm from '@/app/components/base/confirm'
 import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
-import { useToastContext } from '@/app/components/base/toast/context'
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/app/components/base/ui/popover'
+import { toast } from '@/app/components/base/ui/toast'
 import Indicator from '@/app/components/header/indicator'
 import { cn } from '@/utils/classnames'
 import Authorize from '../authorize'
@@ -41,8 +47,8 @@ type AuthorizedProps = {
   renderTrigger?: (open?: boolean) => React.ReactNode
   isOpen?: boolean
   onOpenChange?: (open: boolean) => void
-  offset?: PortalToFollowElemOptions['offset']
-  placement?: PortalToFollowElemOptions['placement']
+  offset?: number
+  placement?: Placement
   triggerPopupSameWidth?: boolean
   popupClassName?: string
   disableSetDefault?: boolean
@@ -75,7 +81,6 @@ const Authorized = ({
   notAllowCustomCredential,
 }: AuthorizedProps) => {
   const { t } = useTranslation()
-  const { notify } = useToastContext()
   const [isLocalOpen, setIsLocalOpen] = useState(false)
   const mergedIsOpen = isOpen ?? isLocalOpen
   const setMergedIsOpen = useCallback((open: boolean) => {
@@ -115,10 +120,7 @@ const Authorized = ({
     try {
       handleSetDoingAction(true)
       await deletePluginCredential({ credential_id: pendingOperationCredentialId.current })
-      notify({
-        type: 'success',
-        message: t('api.actionSuccess', { ns: 'common' }),
-      })
+      toast.success(t('api.actionSuccess', { ns: 'common' }))
       onUpdate?.()
       setDeleteCredentialId(null)
       pendingOperationCredentialId.current = null
@@ -126,9 +128,9 @@ const Authorized = ({
     finally {
       handleSetDoingAction(false)
     }
-  }, [deletePluginCredential, onUpdate, notify, t, handleSetDoingAction])
-  const [editValues, setEditValues] = useState<Record<string, any> | null>(null)
-  const handleEdit = useCallback((id: string, values: Record<string, any>) => {
+  }, [deletePluginCredential, onUpdate, t, handleSetDoingAction])
+  const [editValues, setEditValues] = useState<Record<string, unknown> | null>(null)
+  const handleEdit = useCallback((id: string, values: Record<string, unknown>) => {
     pendingOperationCredentialId.current = id
     setEditValues(values)
   }, [])
@@ -142,16 +144,13 @@ const Authorized = ({
     try {
       handleSetDoingAction(true)
       await setPluginDefaultCredential(id)
-      notify({
-        type: 'success',
-        message: t('api.actionSuccess', { ns: 'common' }),
-      })
+      toast.success(t('api.actionSuccess', { ns: 'common' }))
       onUpdate?.()
     }
     finally {
       handleSetDoingAction(false)
     }
-  }, [setPluginDefaultCredential, onUpdate, notify, t, handleSetDoingAction])
+  }, [setPluginDefaultCredential, onUpdate, t, handleSetDoingAction])
   const { mutateAsync: updatePluginCredential } = useUpdatePluginCredentialHook(pluginPayload)
   const handleRename = useCallback(async (payload: {
     credential_id: string
@@ -162,35 +161,24 @@ const Authorized = ({
     try {
       handleSetDoingAction(true)
       await updatePluginCredential(payload)
-      notify({
-        type: 'success',
-        message: t('api.actionSuccess', { ns: 'common' }),
-      })
+      toast.success(t('api.actionSuccess', { ns: 'common' }))
       onUpdate?.()
     }
     finally {
       handleSetDoingAction(false)
     }
-  }, [updatePluginCredential, notify, t, handleSetDoingAction, onUpdate])
+  }, [updatePluginCredential, t, handleSetDoingAction, onUpdate])
   const unavailableCredentials = credentials.filter(credential => credential.not_allowed_to_use)
   const unavailableCredential = credentials.find(credential => credential.not_allowed_to_use && credential.is_default)
+  const triggerElement = renderTrigger?.(mergedIsOpen)
 
   return (
     <>
-      <PortalToFollowElem
-        open={mergedIsOpen}
-        onOpenChange={setMergedIsOpen}
-        placement={placement}
-        offset={offset}
-        triggerPopupSameWidth={triggerPopupSameWidth}
-      >
-        <PortalToFollowElemTrigger
-          onClick={() => setMergedIsOpen(!mergedIsOpen)}
-          asChild
-        >
-          {
-            renderTrigger
-              ? renderTrigger(mergedIsOpen)
+      <Popover open={mergedIsOpen} onOpenChange={setMergedIsOpen}>
+        <PopoverTrigger
+          render={
+            isValidElement(triggerElement)
+              ? triggerElement
               : (
                   <Button
                     className={cn(
@@ -200,7 +188,7 @@ const Authorized = ({
                   >
                     <Indicator className="mr-2" color={unavailableCredential ? 'gray' : 'green'} />
                     {credentials.length}
-&nbsp;
+                    &nbsp;
                     {
                       credentials.length > 1
                         ? t('auth.authorizations', { ns: 'plugin' })
@@ -215,14 +203,20 @@ const Authorized = ({
                   </Button>
                 )
           }
-        </PortalToFollowElemTrigger>
-        <PortalToFollowElemContent className="z-[100]" data-plugin-auth-portal="true">
+        />
+        <PopoverContent
+          placement={placement}
+          sideOffset={offset}
+          popupProps={triggerPopupSameWidth ? { style: { width: 'var(--anchor-width, auto)' } } : undefined}
+          popupClassName={cn(
+            'overflow-y-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg',
+            popupClassName,
+          )}
+        >
           <div
-            className={cn(
-              'max-h-[360px] overflow-y-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg',
-              popupClassName,
-            )}
+            className="max-h-[360px]"
             data-plugin-auth-panel="true"
+            onMouseLeave={() => setMergedIsOpen(false)}
           >
             <div className="py-1">
               {
@@ -328,19 +322,31 @@ const Authorized = ({
               )
             }
           </div>
-        </PortalToFollowElemContent>
-      </PortalToFollowElem>
-      {
-        deleteCredentialId && (
-          <Confirm
-            isShow
-            title={t('list.delete.title', { ns: 'datasetDocuments' })}
-            isDisabled={doingAction}
-            onCancel={closeConfirm}
-            onConfirm={handleConfirm}
-          />
-        )
-      }
+        </PopoverContent>
+      </Popover>
+      <AlertDialog
+        open={!!deleteCredentialId}
+        onOpenChange={(open) => {
+          if (!open)
+            closeConfirm()
+        }}
+      >
+        <AlertDialogContent className="w-[480px]">
+          <div className="px-6 pb-4 pt-6">
+            <AlertDialogTitle className="text-text-primary title-2xl-semi-bold">
+              {t('list.delete.title', { ns: 'datasetDocuments' })}
+            </AlertDialogTitle>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton disabled={doingAction} onClick={closeConfirm}>
+              {t('operation.cancel', { ns: 'common' })}
+            </AlertDialogCancelButton>
+            <AlertDialogConfirmButton loading={doingAction} disabled={doingAction} onClick={handleConfirm}>
+              {t('operation.confirm', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
       {
         !!editValues && (
           <ApiKeyModal
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 f779623697..b77ef769e7 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
@@ -10,13 +10,19 @@ const mockDeletePluginCredential = vi.fn().mockResolvedValue({})
 const mockSetPluginDefaultCredential = vi.fn().mockResolvedValue({})
 const mockUpdatePluginCredential = vi.fn().mockResolvedValue({})
 const mockNotify = vi.fn()
+const mockToast = {
+  success: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'success', message, ...options }),
+  error: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'error', message, ...options }),
+  warning: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'warning', message, ...options }),
+  info: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'info', message, ...options }),
+  dismiss: vi.fn(),
+  update: vi.fn(),
+  promise: vi.fn(),
+}
 
-vi.mock('@/app/components/base/toast/context', () => ({
-  useToastContext: () => ({
-    notify: mockNotify,
-  }),
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
 }))
-
 vi.mock('../../hooks/use-credential', () => ({
   useDeletePluginCredentialHook: () => ({
     mutateAsync: mockDeletePluginCredential,
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 5628c76cc3..b4714ff96c 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/context'
+import { toast } from '@/app/components/base/ui/toast'
 import {
   useDeletePluginCredentialHook,
   useSetPluginDefaultCredentialHook,
@@ -17,7 +17,6 @@ export const usePluginAuthAction = (
   onUpdate?: () => void,
 ) => {
   const { t } = useTranslation()
-  const { notify } = useToastContext()
   const pendingOperationCredentialId = useRef<string | null>(null)
   const [deleteCredentialId, setDeleteCredentialId] = useState<string | null>(null)
   const { mutateAsync: deletePluginCredential } = useDeletePluginCredentialHook(pluginPayload)
@@ -37,7 +36,7 @@ export const usePluginAuthAction = (
     doingActionRef.current = doing
     setDoingAction(doing)
   }, [])
-  const [editValues, setEditValues] = useState<Record<string, any> | null>(null)
+  const [editValues, setEditValues] = useState<Record<string, unknown> | null>(null)
   const handleConfirm = useCallback(async () => {
     if (doingActionRef.current)
       return
@@ -48,10 +47,7 @@ export const usePluginAuthAction = (
     try {
       handleSetDoingAction(true)
       await deletePluginCredential({ credential_id: pendingOperationCredentialId.current })
-      notify({
-        type: 'success',
-        message: t('api.actionSuccess', { ns: 'common' }),
-      })
+      toast.success(t('api.actionSuccess', { ns: 'common' }))
       onUpdate?.()
       setDeleteCredentialId(null)
       pendingOperationCredentialId.current = null
@@ -60,8 +56,8 @@ export const usePluginAuthAction = (
     finally {
       handleSetDoingAction(false)
     }
-  }, [deletePluginCredential, onUpdate, notify, t, handleSetDoingAction])
-  const handleEdit = useCallback((id: string, values: Record<string, any>) => {
+  }, [deletePluginCredential, onUpdate, t, handleSetDoingAction])
+  const handleEdit = useCallback((id: string, values: Record<string, unknown>) => {
     pendingOperationCredentialId.current = id
     setEditValues(values)
   }, [])
@@ -75,16 +71,13 @@ export const usePluginAuthAction = (
     try {
       handleSetDoingAction(true)
       await setPluginDefaultCredential(id)
-      notify({
-        type: 'success',
-        message: t('api.actionSuccess', { ns: 'common' }),
-      })
+      toast.success(t('api.actionSuccess', { ns: 'common' }))
       onUpdate?.()
     }
     finally {
       handleSetDoingAction(false)
     }
-  }, [setPluginDefaultCredential, onUpdate, notify, t, handleSetDoingAction])
+  }, [setPluginDefaultCredential, onUpdate, t, handleSetDoingAction])
   const { mutateAsync: updatePluginCredential } = useUpdatePluginCredentialHook(pluginPayload)
   const handleRename = useCallback(async (payload: {
     credential_id: string
@@ -95,16 +88,13 @@ export const usePluginAuthAction = (
     try {
       handleSetDoingAction(true)
       await updatePluginCredential(payload)
-      notify({
-        type: 'success',
-        message: t('api.actionSuccess', { ns: 'common' }),
-      })
+      toast.success(t('api.actionSuccess', { ns: 'common' }))
       onUpdate?.()
     }
     finally {
       handleSetDoingAction(false)
     }
-  }, [updatePluginCredential, notify, t, handleSetDoingAction, onUpdate])
+  }, [updatePluginCredential, t, handleSetDoingAction, onUpdate])
 
   return {
     doingAction,
diff --git a/web/app/components/plugins/plugin-detail-panel/datasource-action-list.tsx b/web/app/components/plugins/plugin-detail-panel/datasource-action-list.tsx
index 7c28ea0f91..286721ef66 100644
--- a/web/app/components/plugins/plugin-detail-panel/datasource-action-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/datasource-action-list.tsx
@@ -1,6 +1,5 @@
 // import { useAppContext } from '@/context/app-context'
 // import Button from '@/app/components/base/button'
-// import Toast from '@/app/components/base/toast'
 // import Indicator from '@/app/components/header/indicator'
 // import ToolItem from '@/app/components/tools/provider/tool-item'
 // import ConfigCredential from '@/app/components/tools/setting/build-in/config-credentials'
@@ -35,10 +34,6 @@ const ActionList = ({
   // const [showSettingAuth, setShowSettingAuth] = useState(false)
 
   // const handleCredentialSettingUpdate = () => {
-  //   Toast.notify({
-  //     type: 'success',
-  //     message: t('common.api.actionSuccess'),
-  //   })
   //   setShowSettingAuth(false)
   // }
 
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 7f22a06295..b33f0af8e9 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
@@ -47,26 +47,15 @@ vi.mock('@/service/use-triggers', () => ({
   useTriggerPluginDynamicOptions: () => ({ data: [], isLoading: false }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/app/components/base/ui/toast')>()
-  return {
-    ...actual,
-    toast: Object.assign((args: { type: string, message: string }) => mockToast(args), {
-      success: (message: string) => mockToast({ type: 'success', message }),
-      error: (message: string) => mockToast({ type: 'error', message }),
-      warning: (message: string) => mockToast({ type: 'warning', message }),
-      info: (message: string) => mockToast({ type: 'info', message }),
-      dismiss: vi.fn(),
-      update: vi.fn(),
-      promise: vi.fn(),
-    }),
-  }
-})
-
-vi.mock('@/app/components/base/toast/context', () => ({
-  useToastContext: () => ({
-    notify: (args: { type: string, message: string }) => mockToast(args),
-    close: vi.fn(),
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: Object.assign((args: { type: string, message: string }) => mockToast(args), {
+    success: (message: string) => mockToast({ type: 'success', message }),
+    error: (message: string) => mockToast({ type: 'error', message }),
+    warning: (message: string) => mockToast({ type: 'warning', message }),
+    info: (message: string) => mockToast({ type: 'info', message }),
+    dismiss: vi.fn(),
+    update: vi.fn(),
+    promise: vi.fn(),
   }),
 }))
 
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 52572b3560..4fa236783b 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
@@ -30,26 +30,15 @@ vi.mock('@/service/use-triggers', () => ({
   useTriggerPluginDynamicOptions: () => ({ data: [], isLoading: false }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/app/components/base/ui/toast')>()
-  return {
-    ...actual,
-    toast: Object.assign((args: { type: string, message: string }) => mockToast(args), {
-      success: (message: string) => mockToast({ type: 'success', message }),
-      error: (message: string) => mockToast({ type: 'error', message }),
-      warning: (message: string) => mockToast({ type: 'warning', message }),
-      info: (message: string) => mockToast({ type: 'info', message }),
-      dismiss: vi.fn(),
-      update: vi.fn(),
-      promise: vi.fn(),
-    }),
-  }
-})
-
-vi.mock('@/app/components/base/toast/context', () => ({
-  useToastContext: () => ({
-    notify: (args: { type: string, message: string }) => mockToast(args),
-    close: vi.fn(),
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: Object.assign((args: { type: string, message: string }) => mockToast(args), {
+    success: (message: string) => mockToast({ type: 'success', message }),
+    error: (message: string) => mockToast({ type: 'error', message }),
+    warning: (message: string) => mockToast({ type: 'warning', message }),
+    info: (message: string) => mockToast({ type: 'info', message }),
+    dismiss: vi.fn(),
+    update: vi.fn(),
+    promise: vi.fn(),
   }),
 }))
 
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 95b2cca6af..1927ae5a43 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
@@ -30,26 +30,15 @@ vi.mock('@/service/use-triggers', () => ({
   useTriggerPluginDynamicOptions: () => ({ data: [], isLoading: false }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/app/components/base/ui/toast')>()
-  return {
-    ...actual,
-    toast: Object.assign((args: { type: string, message: string }) => mockToast(args), {
-      success: (message: string) => mockToast({ type: 'success', message }),
-      error: (message: string) => mockToast({ type: 'error', message }),
-      warning: (message: string) => mockToast({ type: 'warning', message }),
-      info: (message: string) => mockToast({ type: 'info', message }),
-      dismiss: vi.fn(),
-      update: vi.fn(),
-      promise: vi.fn(),
-    }),
-  }
-})
-
-vi.mock('@/app/components/base/toast/context', () => ({
-  useToastContext: () => ({
-    notify: (args: { type: string, message: string }) => mockToast(args),
-    close: vi.fn(),
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: Object.assign((args: { type: string, message: string }) => mockToast(args), {
+    success: (message: string) => mockToast({ type: 'success', message }),
+    error: (message: string) => mockToast({ type: 'error', message }),
+    warning: (message: string) => mockToast({ type: 'warning', message }),
+    info: (message: string) => mockToast({ type: 'info', message }),
+    dismiss: vi.fn(),
+    update: vi.fn(),
+    promise: vi.fn(),
   }),
 }))
 
diff --git a/web/app/components/plugins/plugin-page/__tests__/use-reference-setting.spec.ts b/web/app/components/plugins/plugin-page/__tests__/use-reference-setting.spec.ts
index d43e0a7b97..c3c415bb4b 100644
--- a/web/app/components/plugins/plugin-page/__tests__/use-reference-setting.spec.ts
+++ b/web/app/components/plugins/plugin-page/__tests__/use-reference-setting.spec.ts
@@ -1,11 +1,11 @@
 import { renderHook, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 // Import mocks for assertions
+import { toast } from '@/app/components/base/ui/toast'
 import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
 import { useInvalidateReferenceSettings, useMutationReferenceSettings, useReferenceSettings } from '@/service/use-plugins'
-import Toast from '../../../base/toast'
 import { PermissionType } from '../../types'
 import useReferenceSetting, { useCanInstallPluginFromMarketplace } from '../use-reference-setting'
 
@@ -23,15 +23,12 @@ vi.mock('@/service/use-plugins', () => ({
   useInvalidateReferenceSettings: vi.fn(),
 }))
 
-vi.mock('../../../base/toast', () => ({
-  default: {
-    notify: vi.fn(),
-  },
-}))
+const toastSuccessSpy = vi.spyOn(toast, 'success').mockReturnValue('toast-success')
 
 describe('useReferenceSetting Hook', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    toastSuccessSpy.mockClear()
 
     // Default mocks
     vi.mocked(useAppContext).mockReturnValue({
@@ -226,10 +223,7 @@ describe('useReferenceSetting Hook', () => {
 
       await waitFor(() => {
         expect(mockInvalidate).toHaveBeenCalled()
-        expect(Toast.notify).toHaveBeenCalledWith({
-          type: 'success',
-          message: 'common.api.actionSuccess',
-        })
+        expect(toastSuccessSpy).toHaveBeenCalledWith('common.api.actionSuccess')
       })
     })
   })
diff --git a/web/app/components/plugins/plugin-page/use-reference-setting.ts b/web/app/components/plugins/plugin-page/use-reference-setting.ts
index 88591b4ced..0a0e925207 100644
--- a/web/app/components/plugins/plugin-page/use-reference-setting.ts
+++ b/web/app/components/plugins/plugin-page/use-reference-setting.ts
@@ -1,9 +1,9 @@
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+import { toast } from '@/app/components/base/ui/toast'
 import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useInvalidateReferenceSettings, useMutationReferenceSettings, useReferenceSettings } from '@/service/use-plugins'
-import Toast from '../../base/toast'
 import { PermissionType } from '../types'
 
 const hasPermission = (permission: PermissionType | undefined, isAdmin: boolean) => {
@@ -29,10 +29,7 @@ const useReferenceSetting = () => {
   const { mutate: updateReferenceSetting, isPending: isUpdatePending } = useMutationReferenceSettings({
     onSuccess: () => {
       invalidateReferenceSettings()
-      Toast.notify({
-        type: 'success',
-        message: t('api.actionSuccess', { ns: 'common' }),
-      })
+      toast.success(t('api.actionSuccess', { ns: 'common' }))
     },
   })
   const isAdmin = isCurrentWorkspaceManager || isCurrentWorkspaceOwner
diff --git a/web/app/components/plugins/update-plugin/__tests__/index.spec.tsx b/web/app/components/plugins/update-plugin/__tests__/index.spec.tsx
index 656bb042a4..cdd7462342 100644
--- a/web/app/components/plugins/update-plugin/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/update-plugin/__tests__/index.spec.tsx
@@ -8,6 +8,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 { toast } from '@/app/components/base/ui/toast'
 import { PluginCategoryEnum, PluginSource, TaskStatus } from '../../types'
 import DowngradeWarningModal from '../downgrade-warning'
 import FromGitHub from '../from-github'
@@ -82,12 +83,7 @@ vi.mock('../../install-plugin/base/check-task-status', () => ({
   }),
 }))
 
-// Mock Toast
-vi.mock('../../../base/toast', () => ({
-  default: {
-    notify: vi.fn(),
-  },
-}))
+const toastErrorSpy = vi.spyOn(toast, 'error').mockReturnValue('toast-error')
 
 // Mock InstallFromGitHub component
 vi.mock('../../install-plugin/install-from-github', () => ({
@@ -203,6 +199,7 @@ const renderWithQueryClient = (ui: React.ReactElement) => {
 describe('update-plugin', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    toastErrorSpy.mockClear()
     mockCheck.mockResolvedValue({ status: TaskStatus.success })
   })
 
@@ -689,9 +686,6 @@ describe('update-plugin', () => {
 
       it('should reset loading state when task status check fails', async () => {
         // Arrange
-        const mockToastNotify = vi.fn()
-        vi.mocked(await import('../../../base/toast')).default.notify = mockToastNotify
-
         mockUpdateFromMarketPlace.mockResolvedValue({
           all_installed: false,
           task_id: 'task-123',
@@ -718,10 +712,7 @@ describe('update-plugin', () => {
           expect(mockCheck).toHaveBeenCalled()
         })
         await waitFor(() => {
-          expect(mockToastNotify).toHaveBeenCalledWith({
-            type: 'error',
-            message: 'Installation failed due to dependency conflict',
-          })
+          expect(toastErrorSpy).toHaveBeenCalledWith('Installation failed due to dependency conflict')
         })
         // onSave should NOT be called when task fails
         expect(onSave).not.toHaveBeenCalled()
@@ -733,9 +724,6 @@ describe('update-plugin', () => {
 
       it('should stop loading when upgrade API returns failed task directly', async () => {
         // Arrange
-        const mockToastNotify = vi.fn()
-        vi.mocked(await import('../../../base/toast')).default.notify = mockToastNotify
-
         mockUpdateFromMarketPlace.mockResolvedValue({
           task: {
             status: TaskStatus.failed,
@@ -761,10 +749,7 @@ describe('update-plugin', () => {
 
         // Assert
         await waitFor(() => {
-          expect(mockToastNotify).toHaveBeenCalledWith({
-            type: 'error',
-            message: 'failed to init environment',
-          })
+          expect(toastErrorSpy).toHaveBeenCalledWith('failed to init environment')
         })
         expect(mockCheck).not.toHaveBeenCalled()
         expect(onSave).not.toHaveBeenCalled()
diff --git a/web/app/components/plugins/update-plugin/from-market-place.tsx b/web/app/components/plugins/update-plugin/from-market-place.tsx
index 7564eae638..bbf56f7cfe 100644
--- a/web/app/components/plugins/update-plugin/from-market-place.tsx
+++ b/web/app/components/plugins/update-plugin/from-market-place.tsx
@@ -12,13 +12,13 @@ import {
   DialogContent,
   DialogTitle,
 } from '@/app/components/base/ui/dialog'
+import { toast } from '@/app/components/base/ui/toast'
 import Card from '@/app/components/plugins/card'
 import checkTaskStatus from '@/app/components/plugins/install-plugin/base/check-task-status'
 import { pluginManifestToCardPluginProps } from '@/app/components/plugins/install-plugin/utils'
 import { updateFromMarketPlace } from '@/service/plugins'
 import { useInvalidateReferenceSettings, usePluginTaskList, useRemoveAutoUpgrade } from '@/service/use-plugins'
 import { cn } from '@/utils/classnames'
-import Toast from '../../base/toast'
 import useGetIcon from '../install-plugin/base/use-get-icon'
 import { TaskStatus } from '../types'
 import DowngradeWarningModal from './downgrade-warning'
@@ -101,10 +101,7 @@ const UpdatePluginModal: FC<Props> = ({
         if (response.task?.status === TaskStatus.failed) {
           const failedPlugin = response.task.plugins?.find(plugin => plugin.plugin_unique_identifier === targetPackageInfo.id)
             ?? response.task.plugins?.[0]
-          Toast.notify({
-            type: 'error',
-            message: failedPlugin?.message || t('error', { ns: 'common' }),
-          })
+          toast.error(failedPlugin?.message || t('error', { ns: 'common' }))
           setUploadStep(UploadStep.notStarted)
           return
         }
@@ -124,7 +121,7 @@ const UpdatePluginModal: FC<Props> = ({
           pluginUniqueIdentifier: targetPackageInfo.id,
         })
         if (status === TaskStatus.failed) {
-          Toast.notify({ type: 'error', message: error! })
+          toast.error(error!)
           setUploadStep(UploadStep.notStarted)
           return
         }
diff --git a/web/app/components/rag-pipeline/components/__tests__/conversion.spec.tsx b/web/app/components/rag-pipeline/components/__tests__/conversion.spec.tsx
index c7ddf4711e..dd6264daf5 100644
--- a/web/app/components/rag-pipeline/components/__tests__/conversion.spec.tsx
+++ b/web/app/components/rag-pipeline/components/__tests__/conversion.spec.tsx
@@ -24,10 +24,21 @@ vi.mock('@/service/use-base', () => ({
   useInvalid: () => mockInvalidDatasetDetail,
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
-  default: {
-    notify: vi.fn(),
-  },
+const { mockToast } = vi.hoisted(() => {
+  const mockToast = Object.assign(vi.fn(), {
+    success: vi.fn(),
+    error: vi.fn(),
+    warning: vi.fn(),
+    info: vi.fn(),
+    dismiss: vi.fn(),
+    update: vi.fn(),
+    promise: vi.fn(),
+  })
+  return { mockToast }
+})
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
 }))
 
 vi.mock('@/app/components/base/button', () => ({
@@ -132,7 +143,6 @@ describe('Conversion', () => {
   })
 
   it('should handle successful conversion', async () => {
-    const Toast = await import('@/app/components/base/toast')
     mockConvert.mockImplementation((_id: string, opts: { onSuccess: (res: { status: string }) => void }) => {
       opts.onSuccess({ status: 'success' })
     })
@@ -142,14 +152,11 @@ describe('Conversion', () => {
     fireEvent.click(screen.getByText('datasetPipeline.operations.convert'))
     fireEvent.click(screen.getByTestId('confirm-btn'))
 
-    expect(Toast.default.notify).toHaveBeenCalledWith(expect.objectContaining({
-      type: 'success',
-    }))
+    expect(mockToast.success).toHaveBeenCalledWith('datasetPipeline.conversion.successMessage')
     expect(mockInvalidDatasetDetail).toHaveBeenCalled()
   })
 
   it('should handle failed conversion', async () => {
-    const Toast = await import('@/app/components/base/toast')
     mockConvert.mockImplementation((_id: string, opts: { onSuccess: (res: { status: string }) => void }) => {
       opts.onSuccess({ status: 'failed' })
     })
@@ -159,13 +166,10 @@ describe('Conversion', () => {
     fireEvent.click(screen.getByText('datasetPipeline.operations.convert'))
     fireEvent.click(screen.getByTestId('confirm-btn'))
 
-    expect(Toast.default.notify).toHaveBeenCalledWith(expect.objectContaining({
-      type: 'error',
-    }))
+    expect(mockToast.error).toHaveBeenCalledWith('datasetPipeline.conversion.errorMessage')
   })
 
   it('should handle conversion error', async () => {
-    const Toast = await import('@/app/components/base/toast')
     mockConvert.mockImplementation((_id: string, opts: { onError: () => void }) => {
       opts.onError()
     })
@@ -175,8 +179,6 @@ describe('Conversion', () => {
     fireEvent.click(screen.getByText('datasetPipeline.operations.convert'))
     fireEvent.click(screen.getByTestId('confirm-btn'))
 
-    expect(Toast.default.notify).toHaveBeenCalledWith(expect.objectContaining({
-      type: 'error',
-    }))
+    expect(mockToast.error).toHaveBeenCalledWith('datasetPipeline.conversion.errorMessage')
   })
 })
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 98ad5f78f4..cdf7e3fdee 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
@@ -16,14 +16,19 @@ class MockFileReader {
 vi.stubGlobal('FileReader', MockFileReader as unknown as typeof FileReader)
 
 const mockNotify = vi.fn()
-vi.mock('use-context-selector', () => ({
-  useContext: () => ({ notify: mockNotify }),
-}))
+const mockToast = {
+  success: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'success', message, ...options }),
+  error: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'error', message, ...options }),
+  warning: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'warning', message, ...options }),
+  info: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'info', message, ...options }),
+  dismiss: vi.fn(),
+  update: vi.fn(),
+  promise: vi.fn(),
+}
 
-vi.mock('@/app/components/base/toast/context', () => ({
-  ToastContext: { Provider: ({ children }: PropsWithChildren) => children },
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
 }))
-
 const mockEmit = vi.fn()
 vi.mock('@/context/event-emitter', () => ({
   useEventEmitterContextContext: () => ({
diff --git a/web/app/components/rag-pipeline/components/conversion.tsx b/web/app/components/rag-pipeline/components/conversion.tsx
index 7b2c702725..aa76ecaddf 100644
--- a/web/app/components/rag-pipeline/components/conversion.tsx
+++ b/web/app/components/rag-pipeline/components/conversion.tsx
@@ -3,7 +3,7 @@ import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { useParams } from '@/next/navigation'
 import { datasetDetailQueryKeyPrefix } from '@/service/knowledge/use-dataset'
 import { useInvalid } from '@/service/use-base'
@@ -14,44 +14,31 @@ const Conversion = () => {
   const { t } = useTranslation()
   const { datasetId } = useParams()
   const [showConfirmModal, setShowConfirmModal] = useState(false)
-
   const { mutateAsync: convert, isPending } = useConvertDatasetToPipeline()
   const invalidDatasetDetail = useInvalid([...datasetDetailQueryKeyPrefix, datasetId])
   const handleConvert = useCallback(() => {
     convert(datasetId as string, {
       onSuccess: (res) => {
         if (res.status === 'success') {
-          Toast.notify({
-            type: 'success',
-            message: t('conversion.successMessage', { ns: 'datasetPipeline' }),
-          })
+          toast.success(t('conversion.successMessage', { ns: 'datasetPipeline' }))
           setShowConfirmModal(false)
           invalidDatasetDetail()
         }
         else if (res.status === 'failed') {
-          Toast.notify({
-            type: 'error',
-            message: t('conversion.errorMessage', { ns: 'datasetPipeline' }),
-          })
+          toast.error(t('conversion.errorMessage', { ns: 'datasetPipeline' }))
         }
       },
       onError: () => {
-        Toast.notify({
-          type: 'error',
-          message: t('conversion.errorMessage', { ns: 'datasetPipeline' }),
-        })
+        toast.error(t('conversion.errorMessage', { ns: 'datasetPipeline' }))
       },
     })
   }, [convert, datasetId, invalidDatasetDetail, t])
-
   const handleShowConfirmModal = useCallback(() => {
     setShowConfirmModal(true)
   }, [])
-
   const handleCancelConversion = useCallback(() => {
     setShowConfirmModal(false)
   }, [])
-
   return (
     <div className="flex h-full w-full items-center justify-center bg-background-body p-6 pb-16">
       <div className="flex rounded-2xl border-[0.5px] border-components-card-border bg-components-card-bg shadow-sm shadow-shadow-shadow-4">
@@ -66,11 +53,7 @@ const Conversion = () => {
             </div>
           </div>
           <div className="flex items-center gap-x-4">
-            <Button
-              variant="primary"
-              className="w-32"
-              onClick={handleShowConfirmModal}
-            >
+            <Button variant="primary" className="w-32" onClick={handleShowConfirmModal}>
               {t('operations.convert', { ns: 'datasetPipeline' })}
             </Button>
             <span className="text-text-warning system-xs-regular">
@@ -86,19 +69,8 @@ const Conversion = () => {
           </div>
         </div>
       </div>
-      {showConfirmModal && (
-        <Confirm
-          title={t('conversion.confirm.title', { ns: 'datasetPipeline' })}
-          content={t('conversion.confirm.content', { ns: 'datasetPipeline' })}
-          isShow={showConfirmModal}
-          onConfirm={handleConvert}
-          onCancel={handleCancelConversion}
-          isLoading={isPending}
-          isDisabled={isPending}
-        />
-      )}
+      {showConfirmModal && (<Confirm title={t('conversion.confirm.title', { ns: 'datasetPipeline' })} content={t('conversion.confirm.content', { ns: 'datasetPipeline' })} isShow={showConfirmModal} onConfirm={handleConvert} onCancel={handleCancelConversion} isLoading={isPending} isDisabled={isPending} />)}
     </div>
   )
 }
-
 export default React.memo(Conversion)
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/editor/form/__tests__/index.spec.tsx b/web/app/components/rag-pipeline/components/panel/input-field/editor/form/__tests__/index.spec.tsx
index 11bd554ee8..da19993b09 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/editor/form/__tests__/index.spec.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/editor/form/__tests__/index.spec.tsx
@@ -2,7 +2,7 @@ import type { FormData, InputFieldFormProps } from '../types'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { fireEvent, render, renderHook, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { PipelineInputVarType } from '@/models/pipeline'
 import { useConfigurations, useHiddenConfigurations, useHiddenFieldNames } from '../hooks'
 import InputFieldForm from '../index'
@@ -81,9 +81,11 @@ const renderHookWithProviders = <TResult,>(hook: () => TResult) => {
 }
 
 // Silence expected console.error from form submit preventDefault
+const toastErrorSpy = vi.spyOn(toast, 'error').mockReturnValue('toast-error')
+
 beforeEach(() => {
   vi.spyOn(console, 'error').mockImplementation(() => {})
-  vi.spyOn(Toast, 'notify').mockImplementation(() => ({ clear: vi.fn() }))
+  toastErrorSpy.mockClear()
 })
 
 describe('InputFieldForm', () => {
@@ -210,7 +212,7 @@ describe('InputFieldForm', () => {
       fireEvent.submit(form)
 
       await waitFor(() => {
-        expect(Toast.notify).toHaveBeenCalledWith(
+        expect(toastErrorSpy).toHaveBeenCalledWith(
           expect.objectContaining({
             type: 'error',
             message: expect.any(String),
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/editor/form/index.tsx b/web/app/components/rag-pipeline/components/panel/input-field/editor/form/index.tsx
index 60ff58609c..cf918117df 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/editor/form/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/editor/form/index.tsx
@@ -6,7 +6,7 @@ import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import { useFileSizeLimit } from '@/app/components/base/file-uploader/hooks'
 import { useAppForm } from '@/app/components/base/form'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { ChangeType } from '@/app/components/workflow/types'
 import { useFileUploadConfig } from '@/service/use-common'
 import HiddenFields from './hidden-fields'
@@ -14,20 +14,10 @@ import InitialFields from './initial-fields'
 import { createInputFieldSchema } from './schema'
 import ShowAllSettings from './show-all-settings'
 
-const InputFieldForm = ({
-  initialData,
-  supportFile = false,
-  onCancel,
-  onSubmit,
-  isEditMode = true,
-}: InputFieldFormProps) => {
+const InputFieldForm = ({ initialData, supportFile = false, onCancel, onSubmit, isEditMode = true }: InputFieldFormProps) => {
   const { t } = useTranslation()
-
   const { data: fileUploadConfigResponse } = useFileUploadConfig()
-  const {
-    maxFileUploadLimit,
-  } = useFileSizeLimit(fileUploadConfigResponse)
-
+  const { maxFileUploadLimit } = useFileSizeLimit(fileUploadConfigResponse)
   const inputFieldForm = useAppForm({
     defaultValues: initialData,
     validators: {
@@ -39,10 +29,7 @@ const InputFieldForm = ({
           const issues = result.error.issues
           const firstIssue = issues[0]
           const errorMessage = `"${firstIssue.path.join('.')}" ${firstIssue.message}`
-          Toast.notify({
-            type: 'error',
-            message: errorMessage,
-          })
+          toast.error(errorMessage)
           return errorMessage
         }
         return undefined
@@ -59,9 +46,7 @@ const InputFieldForm = ({
       onSubmit(value as FormData, moreInfo)
     },
   })
-
   const [showAllSettings, setShowAllSettings] = useState(false)
-
   const InitialFieldsComp = InitialFields({
     initialData,
     supportFile,
@@ -69,16 +54,13 @@ const InputFieldForm = ({
   const HiddenFieldsComp = HiddenFields({
     initialData,
   })
-
   const handleShowAllSettings = useCallback(() => {
     setShowAllSettings(true)
   }, [])
-
   const ShowAllSettingComp = ShowAllSettings({
     initialData,
     handleShowAllSettings,
   })
-
   return (
     <form
       className="w-full"
@@ -91,12 +73,8 @@ const InputFieldForm = ({
       <div className="flex flex-col gap-4 px-4 py-2">
         <InitialFieldsComp form={inputFieldForm} />
         <Divider type="horizontal" />
-        {!showAllSettings && (
-          <ShowAllSettingComp form={inputFieldForm} />
-        )}
-        {showAllSettings && (
-          <HiddenFieldsComp form={inputFieldForm} />
-        )}
+        {!showAllSettings && (<ShowAllSettingComp form={inputFieldForm} />)}
+        {showAllSettings && (<HiddenFieldsComp form={inputFieldForm} />)}
       </div>
       <div className="flex items-center justify-end gap-x-2 p-4 pt-2">
         <Button variant="secondary" onClick={onCancel}>
@@ -109,5 +87,4 @@ const InputFieldForm = ({
     </form>
   )
 }
-
 export default InputFieldForm
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/field-list/__tests__/hooks.spec.ts b/web/app/components/rag-pipeline/components/panel/input-field/field-list/__tests__/hooks.spec.ts
index f53222c7d5..438f37d59a 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/field-list/__tests__/hooks.spec.ts
+++ b/web/app/components/rag-pipeline/components/panel/input-field/field-list/__tests__/hooks.spec.ts
@@ -23,7 +23,7 @@ vi.mock('../../../../../hooks/use-pipeline', () => ({
 }))
 
 const mockToastNotify = vi.fn()
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/ui/toast', () => ({
   default: {
     notify: (...args: unknown[]) => mockToastNotify(...args),
   },
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/field-list/__tests__/index.spec.tsx b/web/app/components/rag-pipeline/components/panel/input-field/field-list/__tests__/index.spec.tsx
index f1f45d8262..f120c47f99 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/field-list/__tests__/index.spec.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/field-list/__tests__/index.spec.tsx
@@ -2,7 +2,7 @@ import type { SortableItem } from '../types'
 import type { InputVar } from '@/models/pipeline'
 import { act, fireEvent, render, renderHook, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { PipelineInputVarType } from '@/models/pipeline'
 import FieldItem from '../field-item'
 import FieldListContainer from '../field-list-container'
@@ -85,9 +85,11 @@ const createSortableItem = (
 })
 
 // Silence expected console.error from form submission handlers
+const toastErrorSpy = vi.spyOn(toast, 'error').mockReturnValue('toast-error')
+
 beforeEach(() => {
   vi.spyOn(console, 'error').mockImplementation(() => {})
-  vi.spyOn(Toast, 'notify').mockImplementation(() => ({ clear: vi.fn() }))
+  toastErrorSpy.mockClear()
 })
 
 describe('FieldItem', () => {
@@ -1856,7 +1858,7 @@ describe('Duplicate Variable Name Handling', () => {
     editorProps.onSubmit(duplicateFieldData)
 
     expect(handleInputFieldsChange).not.toHaveBeenCalled()
-    expect(Toast.notify).toHaveBeenCalledWith(
+    expect(toastErrorSpy).toHaveBeenCalledWith(
       expect.objectContaining({ type: 'error' }),
     )
   })
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/field-list/hooks.ts b/web/app/components/rag-pipeline/components/panel/input-field/field-list/hooks.ts
index 171a5d0441..1fb5ea9218 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/field-list/hooks.ts
+++ b/web/app/components/rag-pipeline/components/panel/input-field/field-list/hooks.ts
@@ -3,52 +3,34 @@ import type { MoreInfo, ValueSelector } from '@/app/components/workflow/types'
 import type { InputVar } from '@/models/pipeline'
 import { useBoolean } from 'ahooks'
 import { produce } from 'immer'
-import {
-  useCallback,
-  useRef,
-  useState,
-} from 'react'
+import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
 import { ChangeType } from '@/app/components/workflow/types'
 import { usePipeline } from '../../../../hooks/use-pipeline'
 
 const VARIABLE_PREFIX = 'rag'
-
 type useFieldListProps = {
   initialInputFields: InputVar[]
   onInputFieldsChange: (value: InputVar[]) => void
   nodeId: string
   allVariableNames: string[]
 }
-
-export const useFieldList = ({
-  initialInputFields,
-  onInputFieldsChange,
-  nodeId,
-  allVariableNames,
-}: useFieldListProps) => {
+export const useFieldList = ({ initialInputFields, onInputFieldsChange, nodeId, allVariableNames }: useFieldListProps) => {
   const { t } = useTranslation()
   const { toggleInputFieldEditPanel } = useInputFieldPanel()
   const [inputFields, setInputFields] = useState<InputVar[]>(initialInputFields)
   const inputFieldsRef = useRef<InputVar[]>(inputFields)
   const [removedVar, setRemovedVar] = useState<ValueSelector>([])
   const [removedIndex, setRemoveIndex] = useState(0)
-
   const { handleInputVarRename, isVarUsedInNodes, removeUsedVarInNodes } = usePipeline()
-
-  const [isShowRemoveVarConfirm, {
-    setTrue: showRemoveVarConfirm,
-    setFalse: hideRemoveVarConfirm,
-  }] = useBoolean(false)
-
+  const [isShowRemoveVarConfirm, { setTrue: showRemoveVarConfirm, setFalse: hideRemoveVarConfirm }] = useBoolean(false)
   const handleInputFieldsChange = useCallback((newInputFields: InputVar[]) => {
     setInputFields(newInputFields)
     inputFieldsRef.current = newInputFields
     onInputFieldsChange(newInputFields)
   }, [onInputFieldsChange])
-
   const handleListSortChange = useCallback((list: SortableItem[]) => {
     const newInputFields = list.map((item) => {
       const { id: _id, chosen: _chosen, selected: _selected, ...filed } = item
@@ -56,14 +38,11 @@ export const useFieldList = ({
     })
     handleInputFieldsChange(newInputFields)
   }, [handleInputFieldsChange])
-
   const editingFieldIndex = useRef<number>(-1)
-
   const handleCloseInputFieldEditor = useCallback(() => {
     toggleInputFieldEditPanel?.(null)
     editingFieldIndex.current = -1
   }, [toggleInputFieldEditPanel])
-
   const handleRemoveField = useCallback((index: number) => {
     const itemToRemove = inputFieldsRef.current[index]
     // Check if the variable is used in other nodes
@@ -76,22 +55,16 @@ export const useFieldList = ({
     const newInputFields = inputFieldsRef.current.filter((_, i) => i !== index)
     handleInputFieldsChange(newInputFields)
   }, [handleInputFieldsChange, isVarUsedInNodes, nodeId, showRemoveVarConfirm])
-
   const onRemoveVarConfirm = useCallback(() => {
     const newInputFields = inputFieldsRef.current.filter((_, i) => i !== removedIndex)
     handleInputFieldsChange(newInputFields)
     removeUsedVarInNodes(removedVar)
     hideRemoveVarConfirm()
   }, [removedIndex, handleInputFieldsChange, removeUsedVarInNodes, removedVar, hideRemoveVarConfirm])
-
   const handleSubmitField = useCallback((data: InputVar, moreInfo?: MoreInfo) => {
-    const isDuplicate = allVariableNames.some(name =>
-      name === data.variable && name !== inputFieldsRef.current[editingFieldIndex.current]?.variable)
+    const isDuplicate = allVariableNames.some(name => name === data.variable && name !== inputFieldsRef.current[editingFieldIndex.current]?.variable)
     if (isDuplicate) {
-      Toast.notify({
-        type: 'error',
-        message: t('inputFieldPanel.error.variableDuplicate', { ns: 'datasetPipeline' }),
-      })
+      toast.error(t('inputFieldPanel.error.variableDuplicate', { ns: 'datasetPipeline' }))
       return
     }
     const newInputFields = produce(inputFieldsRef.current, (draft) => {
@@ -108,7 +81,6 @@ export const useFieldList = ({
       handleInputVarRename(nodeId, [VARIABLE_PREFIX, nodeId, moreInfo.payload?.beforeKey || ''], [VARIABLE_PREFIX, nodeId, moreInfo.payload?.afterKey || ''])
     handleCloseInputFieldEditor()
   }, [allVariableNames, handleCloseInputFieldEditor, handleInputFieldsChange, handleInputVarRename, nodeId, t])
-
   const handleOpenInputFieldEditor = useCallback((id?: string) => {
     const index = inputFieldsRef.current.findIndex(field => field.variable === id)
     editingFieldIndex.current = index
@@ -118,7 +90,6 @@ export const useFieldList = ({
       initialData: inputFieldsRef.current[index],
     })
   }, [])
-
   return {
     inputFields,
     handleListSortChange,
diff --git a/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/__tests__/index.spec.tsx b/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/__tests__/index.spec.tsx
index 341dfe2a51..ef7beef49e 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/__tests__/index.spec.tsx
+++ b/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/__tests__/index.spec.tsx
@@ -56,7 +56,7 @@ vi.mock('@/app/components/base/form/form-scenarios/base/utils', () => ({
 
 const mockToastNotify = vi.fn()
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/ui/toast', () => ({
   default: {
     notify: (params: { type: string, message: string }) => mockToastNotify(params),
   },
diff --git a/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/options.tsx b/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/options.tsx
index d5d4a7c6c6..49a1b9a284 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/options.tsx
+++ b/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/options.tsx
@@ -3,7 +3,7 @@ import type { CustomActionsProps } from '@/app/components/base/form/components/f
 import type { BaseConfiguration } from '@/app/components/base/form/form-scenarios/base/types'
 import { useAppForm } from '@/app/components/base/form'
 import BaseField from '@/app/components/base/form/form-scenarios/base/field'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 
 type OptionsProps = {
   initialData: Record<string, any>
@@ -12,14 +12,7 @@ type OptionsProps = {
   CustomActions: (props: CustomActionsProps) => React.JSX.Element
   onSubmit: (data: Record<string, any>) => void
 }
-
-const Options = ({
-  initialData,
-  configurations,
-  schema,
-  CustomActions,
-  onSubmit,
-}: OptionsProps) => {
+const Options = ({ initialData, configurations, schema, CustomActions, onSubmit }: OptionsProps) => {
   const form = useAppForm({
     defaultValues: initialData,
     validators: {
@@ -29,10 +22,7 @@ const Options = ({
           const issues = result.error.issues
           const firstIssue = issues[0]
           const errorMessage = `Path: ${firstIssue.path.join('.')} Error: ${firstIssue.message}`
-          Toast.notify({
-            type: 'error',
-            message: errorMessage,
-          })
+          toast.error(errorMessage)
           return errorMessage
         }
         return undefined
@@ -42,7 +32,6 @@ const Options = ({
       onSubmit(value)
     },
   })
-
   return (
     <form
       className="w-full"
@@ -62,12 +51,9 @@ const Options = ({
         })}
       </div>
       <form.AppForm>
-        <form.Actions
-          CustomActions={CustomActions}
-        />
+        <form.Actions CustomActions={CustomActions} />
       </form.AppForm>
     </form>
   )
 }
-
 export default Options
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 f30db875b3..17f95e4366 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,12 +155,19 @@ vi.mock('@/app/components/base/amplitude', () => ({
 }))
 
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/toast/context', () => ({
-  useToastContext: () => ({
-    notify: mockNotify,
-  }),
-}))
+const mockToast = {
+  success: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'success', message, ...options }),
+  error: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'error', message, ...options }),
+  warning: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'warning', message, ...options }),
+  info: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'info', message, ...options }),
+  dismiss: vi.fn(),
+  update: vi.fn(),
+  promise: vi.fn(),
+}
 
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
+}))
 vi.mock('@/app/components/workflow/utils', () => ({
   getKeyboardKeyCodeBySystem: (key: string) => key,
   getKeyboardKeyNameBySystem: (key: string) => key,
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 f0b187c0fd..ad88399af0 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,6 @@ 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/context'
 import Publisher from '../index'
 import Popup from '../popup'
 
@@ -74,7 +73,19 @@ vi.mock('@/context/provider-context', () => ({
 }))
 
 const mockNotify = vi.fn()
+const mockToast = {
+  success: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'success', message, ...options }),
+  error: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'error', message, ...options }),
+  warning: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'warning', message, ...options }),
+  info: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'info', message, ...options }),
+  dismiss: vi.fn(),
+  update: vi.fn(),
+  promise: vi.fn(),
+}
 
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
+}))
 vi.mock('@/hooks/use-api-access-url', () => ({
   useDatasetApiAccessUrl: () => 'https://api.dify.ai/v1/datasets/test-dataset-id',
 }))
@@ -156,9 +167,8 @@ const renderWithQueryClient = (ui: React.ReactElement) => {
   const queryClient = createQueryClient()
   return render(
     <QueryClientProvider client={queryClient}>
-      <ToastContext.Provider value={{ notify: mockNotify, close: vi.fn() }}>
-        {ui}
-      </ToastContext.Provider>
+      {ui}
+
     </QueryClientProvider>,
   )
 }
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 5d053f083a..d91183b461 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
@@ -6,6 +6,19 @@ import Popup from '../popup'
 const mockPublishWorkflow = vi.fn().mockResolvedValue({ created_at: '2024-01-01T00:00:00Z' })
 const mockPublishAsCustomizedPipeline = vi.fn().mockResolvedValue({})
 const mockNotify = vi.fn()
+const mockToast = {
+  success: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'success', message, ...options }),
+  error: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'error', message, ...options }),
+  warning: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'warning', message, ...options }),
+  info: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'info', message, ...options }),
+  dismiss: vi.fn(),
+  update: vi.fn(),
+  promise: vi.fn(),
+}
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
+}))
 const mockPush = vi.fn()
 const mockHandleCheckBeforePublish = vi.fn().mockResolvedValue(true)
 const mockSetPublishedAt = vi.fn()
@@ -57,10 +70,6 @@ vi.mock('@/app/components/workflow/store', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/toast/context', () => ({
-  useToastContext: () => ({ notify: mockNotify }),
-}))
-
 vi.mock('@/app/components/base/button', () => ({
   default: ({ children, onClick, disabled, variant, className }: Record<string, unknown>) => (
     <button
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 6670a8f767..e05fc2e542 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
@@ -1,20 +1,8 @@
 import type { IconInfo } from '@/models/datasets'
 import type { PublishWorkflowParams } from '@/types/workflow'
-import {
-  RiArrowRightUpLine,
-  RiHammerLine,
-  RiPlayCircleLine,
-  RiTerminalBoxLine,
-} from '@remixicon/react'
-import {
-  useBoolean,
-  useKeyPress,
-} from 'ahooks'
-import {
-  memo,
-  useCallback,
-  useState,
-} from 'react'
+import { RiArrowRightUpLine, RiHammerLine, RiPlayCircleLine, RiTerminalBoxLine } from '@remixicon/react'
+import { useBoolean, useKeyPress } from 'ahooks'
+import { memo, useCallback, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
 import Button from '@/app/components/base/button'
@@ -22,15 +10,10 @@ 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/context'
-import {
-  useChecklistBeforePublish,
-} from '@/app/components/workflow/hooks'
+import { toast } from '@/app/components/base/ui/toast'
+import { useChecklistBeforePublish } from '@/app/components/workflow/hooks'
 import ShortcutsName from '@/app/components/workflow/shortcuts-name'
-import {
-  useStore,
-  useWorkflowStore,
-} from '@/app/components/workflow/store'
+import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
 import { getKeyboardKeyCodeBySystem } from '@/app/components/workflow/utils'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { useDocLink } from '@/context/i18n'
@@ -42,17 +25,12 @@ import Link from '@/next/link'
 import { useParams, useRouter } from '@/next/navigation'
 import { useInvalidDatasetList } from '@/service/knowledge/use-dataset'
 import { useInvalid } from '@/service/use-base'
-import {
-  publishedPipelineInfoQueryKeyPrefix,
-  useInvalidCustomizedTemplateList,
-  usePublishAsCustomizedPipeline,
-} from '@/service/use-pipeline'
+import { publishedPipelineInfoQueryKeyPrefix, useInvalidCustomizedTemplateList, usePublishAsCustomizedPipeline } from '@/service/use-pipeline'
 import { usePublishWorkflow } from '@/service/use-workflow'
 import { cn } from '@/utils/classnames'
 import PublishAsKnowledgePipelineModal from '../../publish-as-knowledge-pipeline-modal'
 
 const PUBLISH_SHORTCUT = ['ctrl', '⇧', 'P']
-
 const Popup = () => {
   const { t } = useTranslation()
   const { datasetId } = useParams()
@@ -66,41 +44,22 @@ const Popup = () => {
   const { formatTimeFromNow } = useFormatTimeFromNow()
   const { handleCheckBeforePublish } = useChecklistBeforePublish()
   const { mutateAsync: publishWorkflow } = usePublishWorkflow()
-  const { notify } = useToastContext()
   const workflowStore = useWorkflowStore()
   const isAllowPublishAsCustomKnowledgePipelineTemplate = useProviderContextSelector(s => s.isAllowPublishAsCustomKnowledgePipelineTemplate)
   const setShowPricingModal = useModalContextSelector(s => s.setShowPricingModal)
   const apiReferenceUrl = useDatasetApiAccessUrl()
-
-  const [confirmVisible, {
-    setFalse: hideConfirm,
-    setTrue: showConfirm,
-  }] = useBoolean(false)
-  const [publishing, {
-    setFalse: hidePublishing,
-    setTrue: showPublishing,
-  }] = useBoolean(false)
-  const {
-    mutateAsync: publishAsCustomizedPipeline,
-  } = usePublishAsCustomizedPipeline()
-  const [showPublishAsKnowledgePipelineModal, {
-    setFalse: hidePublishAsKnowledgePipelineModal,
-    setTrue: setShowPublishAsKnowledgePipelineModal,
-  }] = useBoolean(false)
-  const [isPublishingAsCustomizedPipeline, {
-    setFalse: hidePublishingAsCustomizedPipeline,
-    setTrue: showPublishingAsCustomizedPipeline,
-  }] = useBoolean(false)
-
+  const [confirmVisible, { setFalse: hideConfirm, setTrue: showConfirm }] = useBoolean(false)
+  const [publishing, { setFalse: hidePublishing, setTrue: showPublishing }] = useBoolean(false)
+  const { mutateAsync: publishAsCustomizedPipeline } = usePublishAsCustomizedPipeline()
+  const [showPublishAsKnowledgePipelineModal, { setFalse: hidePublishAsKnowledgePipelineModal, setTrue: setShowPublishAsKnowledgePipelineModal }] = useBoolean(false)
+  const [isPublishingAsCustomizedPipeline, { setFalse: hidePublishingAsCustomizedPipeline, setTrue: showPublishingAsCustomizedPipeline }] = useBoolean(false)
   const invalidPublishedPipelineInfo = useInvalid([...publishedPipelineInfoQueryKeyPrefix, pipelineId])
   const invalidDatasetList = useInvalidDatasetList()
-
   const handlePublish = useCallback(async (params?: PublishWorkflowParams) => {
     if (publishing)
       return
     try {
       const checked = await handleCheckBeforePublish()
-
       if (checked) {
         if (!publishedAt && !confirmVisible) {
           showConfirm()
@@ -115,20 +74,15 @@ const Popup = () => {
         setPublished(true)
         trackEvent('app_published_time', { action_mode: 'pipeline', app_id: datasetId, app_name: params?.title || '' })
         if (res) {
-          notify({
-            type: 'success',
-            message: t('publishPipeline.success.message', { ns: 'datasetPipeline' }),
-            children: (
+          toast.success(t('publishPipeline.success.message', { ns: 'datasetPipeline' }), {
+            description: (
               <div className="text-text-secondary system-xs-regular">
                 <Trans
                   i18nKey="publishPipeline.success.tip"
                   ns="datasetPipeline"
                   components={{
                     CustomLink: (
-                      <Link
-                        className="text-text-accent system-xs-medium"
-                        href={`/datasets/${datasetId}/documents`}
-                      >
+                      <Link className="text-text-accent system-xs-medium" href={`/datasets/${datasetId}/documents`}>
                       </Link>
                     ),
                   }}
@@ -144,7 +98,7 @@ const Popup = () => {
       }
     }
     catch {
-      notify({ type: 'error', message: t('publishPipeline.error.message', { ns: 'datasetPipeline' }) })
+      toast.error(t('publishPipeline.error.message', { ns: 'datasetPipeline' }))
     }
     finally {
       if (publishing)
@@ -152,26 +106,18 @@ const Popup = () => {
       if (confirmVisible)
         hideConfirm()
     }
-  }, [publishing, handleCheckBeforePublish, publishedAt, confirmVisible, showPublishing, publishWorkflow, pipelineId, datasetId, showConfirm, notify, t, workflowStore, mutateDatasetRes, invalidPublishedPipelineInfo, invalidDatasetList, hidePublishing, hideConfirm])
-
+  }, [publishing, handleCheckBeforePublish, publishedAt, confirmVisible, showPublishing, publishWorkflow, pipelineId, datasetId, showConfirm, t, workflowStore, mutateDatasetRes, invalidPublishedPipelineInfo, invalidDatasetList, hidePublishing, hideConfirm])
   useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.shift.p`, (e) => {
     e.preventDefault()
     if (published)
       return
     handlePublish()
   }, { exactMatch: true, useCapture: true })
-
   const goToAddDocuments = useCallback(() => {
     push(`/datasets/${datasetId}/documents/create-from-pipeline`)
   }, [datasetId, push])
-
   const invalidCustomizedTemplateList = useInvalidCustomizedTemplateList()
-
-  const handlePublishAsKnowledgePipeline = useCallback(async (
-    name: string,
-    icon: IconInfo,
-    description?: string,
-  ) => {
+  const handlePublishAsKnowledgePipeline = useCallback(async (name: string, icon: IconInfo, description?: string) => {
     try {
       showPublishingAsCustomizedPipeline()
       await publishAsCustomizedPipeline({
@@ -180,19 +126,13 @@ const Popup = () => {
         icon_info: icon,
         description,
       })
-      notify({
-        type: 'success',
-        message: t('publishTemplate.success.message', { ns: 'datasetPipeline' }),
-        children: (
+      toast.success(t('publishTemplate.success.message', { ns: 'datasetPipeline' }), {
+        description: (
           <div className="flex flex-col gap-y-1">
             <span className="text-text-secondary system-xs-regular">
               {t('publishTemplate.success.tip', { ns: 'datasetPipeline' })}
             </span>
-            <Link
-              href={docLink()}
-              target="_blank"
-              className="inline-block text-text-accent system-xs-medium-uppercase"
-            >
+            <Link href={docLink()} target="_blank" className="inline-block text-text-accent system-xs-medium-uppercase">
               {t('publishTemplate.success.learnMore', { ns: 'datasetPipeline' })}
             </Link>
           </div>
@@ -201,88 +141,64 @@ const Popup = () => {
       invalidCustomizedTemplateList()
     }
     catch {
-      notify({ type: 'error', message: t('publishTemplate.error.message', { ns: 'datasetPipeline' }) })
+      toast.error(t('publishTemplate.error.message', { ns: 'datasetPipeline' }))
     }
     finally {
       hidePublishingAsCustomizedPipeline()
       hidePublishAsKnowledgePipelineModal()
     }
-  }, [showPublishingAsCustomizedPipeline, publishAsCustomizedPipeline, pipelineId, notify, t, invalidCustomizedTemplateList, hidePublishingAsCustomizedPipeline, hidePublishAsKnowledgePipelineModal])
-
+  }, [showPublishingAsCustomizedPipeline, publishAsCustomizedPipeline, pipelineId, t, invalidCustomizedTemplateList, hidePublishingAsCustomizedPipeline, hidePublishAsKnowledgePipelineModal])
   const handleClickPublishAsKnowledgePipeline = useCallback(() => {
     if (!isAllowPublishAsCustomKnowledgePipelineTemplate)
       setShowPricingModal()
     else
       setShowPublishAsKnowledgePipelineModal()
   }, [isAllowPublishAsCustomKnowledgePipelineTemplate, setShowPublishAsKnowledgePipelineModal, setShowPricingModal])
-
   return (
     <div className={cn('rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-5', isAllowPublishAsCustomKnowledgePipelineTemplate ? 'w-[360px]' : 'w-[400px]')}>
       <div className="p-4 pt-3">
         <div className="flex h-6 items-center text-text-tertiary system-xs-medium-uppercase">
           {publishedAt ? t('common.latestPublished', { ns: 'workflow' }) : t('common.currentDraftUnpublished', { ns: 'workflow' })}
         </div>
-        {
-          publishedAt
-            ? (
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center text-text-secondary system-sm-medium">
-                    {t('common.publishedAt', { ns: 'workflow' })}
-                    {' '}
-                    {formatTimeFromNow(publishedAt)}
-                  </div>
-                </div>
-              )
-            : (
+        {publishedAt
+          ? (
+              <div className="flex items-center justify-between">
                 <div className="flex items-center text-text-secondary system-sm-medium">
-                  {t('common.autoSaved', { ns: 'workflow' })}
+                  {t('common.publishedAt', { ns: 'workflow' })}
                   {' '}
-                  ·
-                  {Boolean(draftUpdatedAt) && formatTimeFromNow(draftUpdatedAt!)}
+                  {formatTimeFromNow(publishedAt)}
                 </div>
-              )
-        }
-        <Button
-          variant="primary"
-          className="mt-3 w-full"
-          onClick={() => handlePublish()}
-          disabled={published || publishing}
-        >
-          {
-            published
-              ? t('common.published', { ns: 'workflow' })
-              : (
-                  <div className="flex gap-1">
-                    <span>{t('common.publishUpdate', { ns: 'workflow' })}</span>
-                    <ShortcutsName keys={PUBLISH_SHORTCUT} bgColor="white" />
-                  </div>
-                )
-          }
+              </div>
+            )
+          : (
+              <div className="flex items-center text-text-secondary system-sm-medium">
+                {t('common.autoSaved', { ns: 'workflow' })}
+                {' '}
+                ·
+                {Boolean(draftUpdatedAt) && formatTimeFromNow(draftUpdatedAt!)}
+              </div>
+            )}
+        <Button variant="primary" className="mt-3 w-full" onClick={() => handlePublish()} disabled={published || publishing}>
+          {published
+            ? t('common.published', { ns: 'workflow' })
+            : (
+                <div className="flex gap-1">
+                  <span>{t('common.publishUpdate', { ns: 'workflow' })}</span>
+                  <ShortcutsName keys={PUBLISH_SHORTCUT} bgColor="white" />
+                </div>
+              )}
         </Button>
       </div>
       <div className="border-t-[0.5px] border-t-divider-regular p-4 pt-3">
-        <Button
-          className="mb-1 w-full hover:bg-state-accent-hover hover:text-text-accent"
-          variant="tertiary"
-          onClick={goToAddDocuments}
-          disabled={!publishedAt}
-        >
+        <Button className="mb-1 w-full hover:bg-state-accent-hover hover:text-text-accent" variant="tertiary" onClick={goToAddDocuments} disabled={!publishedAt}>
           <div className="flex grow items-center">
             <RiPlayCircleLine className="mr-2 h-4 w-4" />
             {t('common.goToAddDocuments', { ns: 'pipeline' })}
           </div>
           <RiArrowRightUpLine className="ml-2 h-4 w-4 shrink-0" />
         </Button>
-        <Link
-          href={apiReferenceUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Button
-            className="w-full hover:bg-state-accent-hover hover:text-text-accent"
-            variant="tertiary"
-            disabled={!publishedAt}
-          >
+        <Link href={apiReferenceUrl} target="_blank" rel="noopener noreferrer">
+          <Button className="w-full hover:bg-state-accent-hover hover:text-text-accent" variant="tertiary" disabled={!publishedAt}>
             <div className="flex grow items-center">
               <RiTerminalBoxLine className="mr-2 h-4 w-4" />
               {t('common.accessAPIReference', { ns: 'workflow' })}
@@ -291,12 +207,7 @@ const Popup = () => {
           </Button>
         </Link>
         <Divider className="my-2" />
-        <Button
-          className="w-full hover:bg-state-accent-hover hover:text-text-accent"
-          variant="tertiary"
-          onClick={handleClickPublishAsKnowledgePipeline}
-          disabled={!publishedAt || isPublishingAsCustomizedPipeline}
-        >
+        <Button className="w-full hover:bg-state-accent-hover hover:text-text-accent" variant="tertiary" onClick={handleClickPublishAsKnowledgePipeline} disabled={!publishedAt || isPublishingAsCustomizedPipeline}>
           <div className="flex grow items-center gap-x-2 overflow-hidden">
             <RiHammerLine className="h-4 w-4 shrink-0" />
             <span className="grow truncate text-left" title={t('common.publishAs', { ns: 'pipeline' })}>
@@ -313,29 +224,9 @@ const Popup = () => {
           </div>
         </Button>
       </div>
-      {
-        confirmVisible && (
-          <Confirm
-            isShow={confirmVisible}
-            title={t('common.confirmPublish', { ns: 'pipeline' })}
-            content={t('common.confirmPublishContent', { ns: 'pipeline' })}
-            onCancel={hideConfirm}
-            onConfirm={handlePublish}
-            isDisabled={publishing}
-          />
-        )
-      }
-      {
-        showPublishAsKnowledgePipelineModal && (
-          <PublishAsKnowledgePipelineModal
-            confirmDisabled={isPublishingAsCustomizedPipeline}
-            onConfirm={handlePublishAsKnowledgePipeline}
-            onCancel={hidePublishAsKnowledgePipelineModal}
-          />
-        )
-      }
+      {confirmVisible && (<Confirm isShow={confirmVisible} title={t('common.confirmPublish', { ns: 'pipeline' })} content={t('common.confirmPublishContent', { ns: 'pipeline' })} onCancel={hideConfirm} onConfirm={handlePublish} isDisabled={publishing} />)}
+      {showPublishAsKnowledgePipelineModal && (<PublishAsKnowledgePipelineModal confirmDisabled={isPublishingAsCustomizedPipeline} onConfirm={handlePublishAsKnowledgePipeline} onCancel={hidePublishAsKnowledgePipelineModal} />)}
     </div>
   )
 }
-
 export default memo(Popup)
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 1c9f96a9fd..7f730c73af 100644
--- a/web/app/components/rag-pipeline/hooks/__tests__/index.spec.ts
+++ b/web/app/components/rag-pipeline/hooks/__tests__/index.spec.ts
@@ -54,14 +54,20 @@ vi.mock('@/app/components/base/features/hooks', () => ({
   }),
 }))
 
-// Mock toast context
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/toast/context', () => ({
-  useToastContext: () => ({
-    notify: mockNotify,
-  }),
-}))
+const mockToast = {
+  success: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'success', message, ...options }),
+  error: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'error', message, ...options }),
+  warning: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'warning', message, ...options }),
+  info: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'info', message, ...options }),
+  dismiss: vi.fn(),
+  update: vi.fn(),
+  promise: vi.fn(),
+}
 
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
+}))
 const mockEventEmit = vi.fn()
 vi.mock('@/context/event-emitter', () => ({
   useEventEmitterContextContext: () => ({
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 c5603f2fc7..0538d6c6d2 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,10 +3,19 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { useDSL } from '../use-DSL'
 
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/toast/context', () => ({
-  useToastContext: () => ({ notify: mockNotify }),
-}))
+const mockToast = {
+  success: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'success', message, ...options }),
+  error: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'error', message, ...options }),
+  warning: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'warning', message, ...options }),
+  info: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'info', message, ...options }),
+  dismiss: vi.fn(),
+  update: vi.fn(),
+  promise: vi.fn(),
+}
 
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
+}))
 const mockEventEmitter = { emit: vi.fn() }
 vi.mock('@/context/event-emitter', () => ({
   useEventEmitterContextContext: () => ({ eventEmitter: mockEventEmitter }),
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 a50965fb3b..ec97827047 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
@@ -14,19 +14,24 @@ class MockFileReader {
 vi.stubGlobal('FileReader', MockFileReader as unknown as typeof FileReader)
 
 const mockNotify = vi.fn()
+const mockToast = {
+  success: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'success', message, ...options }),
+  error: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'error', message, ...options }),
+  warning: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'warning', message, ...options }),
+  info: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'info', message, ...options }),
+  dismiss: vi.fn(),
+  update: vi.fn(),
+  promise: vi.fn(),
+}
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
+}))
 const mockEmit = vi.fn()
 const mockImportDSL = vi.fn()
 const mockImportDSLConfirm = vi.fn()
 const mockHandleCheckPluginDependencies = vi.fn()
 
-vi.mock('use-context-selector', () => ({
-  useContext: () => ({ notify: mockNotify }),
-}))
-
-vi.mock('@/app/components/base/toast/context', () => ({
-  ToastContext: {},
-}))
-
 vi.mock('@/context/event-emitter', () => ({
   useEventEmitterContextContext: () => ({
     eventEmitter: { emit: mockEmit },
diff --git a/web/app/components/rag-pipeline/hooks/use-DSL.ts b/web/app/components/rag-pipeline/hooks/use-DSL.ts
index f45cf35bdf..77d5698492 100644
--- a/web/app/components/rag-pipeline/hooks/use-DSL.ts
+++ b/web/app/components/rag-pipeline/hooks/use-DSL.ts
@@ -1,12 +1,7 @@
-import {
-  useCallback,
-  useState,
-} from 'react'
+import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useToastContext } from '@/app/components/base/toast/context'
-import {
-  DSL_EXPORT_CHECK,
-} from '@/app/components/workflow/constants'
+import { toast } from '@/app/components/base/ui/toast'
+import { DSL_EXPORT_CHECK } from '@/app/components/workflow/constants'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { useExportPipelineDSL } from '@/service/use-pipeline'
@@ -16,21 +11,17 @@ import { useNodesSyncDraft } from './use-nodes-sync-draft'
 
 export const useDSL = () => {
   const { t } = useTranslation()
-  const { notify } = useToastContext()
   const { eventEmitter } = useEventEmitterContextContext()
   const [exporting, setExporting] = useState(false)
   const { doSyncWorkflowDraft } = useNodesSyncDraft()
   const workflowStore = useWorkflowStore()
   const { mutateAsync: exportPipelineConfig } = useExportPipelineDSL()
-
   const handleExportDSL = useCallback(async (include = false) => {
     const { pipelineId, knowledgeName } = workflowStore.getState()
     if (!pipelineId)
       return
-
     if (exporting)
       return
-
     try {
       setExporting(true)
       await doSyncWorkflowDraft()
@@ -42,13 +33,12 @@ export const useDSL = () => {
       downloadBlob({ data: file, fileName: `${knowledgeName}.pipeline` })
     }
     catch {
-      notify({ type: 'error', message: t('exportFailed', { ns: 'app' }) })
+      toast.error(t('exportFailed', { ns: 'app' }))
     }
     finally {
       setExporting(false)
     }
-  }, [notify, t, doSyncWorkflowDraft, exporting, exportPipelineConfig, workflowStore])
-
+  }, [t, doSyncWorkflowDraft, exporting, exportPipelineConfig, workflowStore])
   const exportCheck = useCallback(async () => {
     const { pipelineId } = workflowStore.getState()
     if (!pipelineId)
@@ -68,10 +58,9 @@ export const useDSL = () => {
       } as any)
     }
     catch {
-      notify({ type: 'error', message: t('exportFailed', { ns: 'app' }) })
+      toast.error(t('exportFailed', { ns: 'app' }))
     }
-  }, [eventEmitter, handleExportDSL, notify, t, workflowStore])
-
+  }, [eventEmitter, handleExportDSL, t, workflowStore])
   return {
     exportCheck,
     handleExportDSL,
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 48d2bc78b4..f8fd39b5d8 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
@@ -1,66 +1,43 @@
 import type { MouseEventHandler } from 'react'
-import {
-  useCallback,
-  useRef,
-  useState,
-} from 'react'
+import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
-import { ToastContext } from '@/app/components/base/toast/context'
+import { toast } from '@/app/components/base/ui/toast'
 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'
-import {
-  initialEdges,
-  initialNodes,
-} from '@/app/components/workflow/utils'
+import { initialEdges, initialNodes } from '@/app/components/workflow/utils'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
-import {
-  DSLImportMode,
-  DSLImportStatus,
-} from '@/models/app'
-import {
-  useImportPipelineDSL,
-  useImportPipelineDSLConfirm,
-} from '@/service/use-pipeline'
+import { DSLImportMode, DSLImportStatus } from '@/models/app'
+import { useImportPipelineDSL, useImportPipelineDSLConfirm } from '@/service/use-pipeline'
 import { fetchWorkflowDraft } from '@/service/workflow'
 
 type VersionInfo = {
   importedVersion: string
   systemVersion: string
 }
-
 type UseUpdateDSLModalParams = {
   onCancel: () => void
   onImport?: () => void
 }
-
-const isCompletedStatus = (status: DSLImportStatus): boolean =>
-  status === DSLImportStatus.COMPLETED || status === DSLImportStatus.COMPLETED_WITH_WARNINGS
-
+const isCompletedStatus = (status: DSLImportStatus): boolean => status === DSLImportStatus.COMPLETED || status === DSLImportStatus.COMPLETED_WITH_WARNINGS
 export const useUpdateDSLModal = ({ onCancel, onImport }: UseUpdateDSLModalParams) => {
   const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
   const { eventEmitter } = useEventEmitterContextContext()
   const workflowStore = useWorkflowStore()
   const { handleCheckPluginDependencies } = usePluginDependencies()
   const { mutateAsync: importDSL } = useImportPipelineDSL()
   const { mutateAsync: importDSLConfirm } = useImportPipelineDSLConfirm()
-
   // File state
   const [currentFile, setDSLFile] = useState<File>()
   const [fileContent, setFileContent] = useState<string>()
-
   // Modal state
   const [show, setShow] = useState(true)
   const [showErrorModal, setShowErrorModal] = useState(false)
-
   // Import state
   const [loading, setLoading] = useState(false)
   const [versions, setVersions] = useState<VersionInfo>()
   const [importId, setImportId] = useState<string>()
   const isCreatingRef = useRef(false)
-
   const readFile = (file: File) => {
     const reader = new FileReader()
     reader.onload = (event) => {
@@ -68,7 +45,6 @@ export const useUpdateDSLModal = ({ onCancel, onImport }: UseUpdateDSLModalParam
     }
     reader.readAsText(file)
   }
-
   const handleFile = (file?: File) => {
     setDSLFile(file)
     if (file)
@@ -76,18 +52,13 @@ export const useUpdateDSLModal = ({ onCancel, onImport }: UseUpdateDSLModalParam
     if (!file)
       setFileContent('')
   }
-
   const notifyError = useCallback(() => {
     setLoading(false)
-    notify({ type: 'error', message: t('common.importFailure', { ns: 'workflow' }) })
-  }, [notify, t])
-
+    toast.error(t('common.importFailure', { ns: 'workflow' }))
+  }, [t])
   const updateWorkflow = useCallback(async (pipelineId: string) => {
-    const { graph, hash, rag_pipeline_variables } = await fetchWorkflowDraft(
-      `/rag/pipelines/${pipelineId}/workflows/draft`,
-    )
+    const { graph, hash, rag_pipeline_variables } = await fetchWorkflowDraft(`/rag/pipelines/${pipelineId}/workflows/draft`)
     const { nodes, edges, viewport } = graph
-
     eventEmitter?.emit({
       type: WORKFLOW_DATA_UPDATE,
       payload: {
@@ -99,36 +70,23 @@ export const useUpdateDSLModal = ({ onCancel, onImport }: UseUpdateDSLModalParam
       },
     })
   }, [eventEmitter])
-
-  const completeImport = useCallback(async (
-    pipelineId: string | undefined,
-    status: DSLImportStatus = DSLImportStatus.COMPLETED,
-  ) => {
+  const completeImport = useCallback(async (pipelineId: string | undefined, status: DSLImportStatus = DSLImportStatus.COMPLETED) => {
     if (!pipelineId) {
       notifyError()
       return
     }
-
     updateWorkflow(pipelineId)
     onImport?.()
-
     const isWarning = status === DSLImportStatus.COMPLETED_WITH_WARNINGS
-    notify({
+    toast(t(isWarning ? 'common.importWarning' : 'common.importSuccess', { ns: 'workflow' }), {
       type: isWarning ? 'warning' : 'success',
-      message: t(isWarning ? 'common.importWarning' : 'common.importSuccess', { ns: 'workflow' }),
-      children: isWarning && t('common.importWarningDetails', { ns: 'workflow' }),
+      description: isWarning && t('common.importWarningDetails', { ns: 'workflow' }),
     })
-
     await handleCheckPluginDependencies(pipelineId, true)
     setLoading(false)
     onCancel()
-  }, [updateWorkflow, onImport, notify, t, handleCheckPluginDependencies, onCancel, notifyError])
-
-  const showVersionMismatch = useCallback((
-    id: string,
-    importedVersion?: string,
-    systemVersion?: string,
-  ) => {
+  }, [updateWorkflow, onImport, t, handleCheckPluginDependencies, onCancel, notifyError])
+  const showVersionMismatch = useCallback((id: string, importedVersion?: string, systemVersion?: string) => {
     setShow(false)
     setTimeout(() => setShowErrorModal(true), 300)
     setVersions({
@@ -137,7 +95,6 @@ export const useUpdateDSLModal = ({ onCancel, onImport }: UseUpdateDSLModalParam
     })
     setImportId(id)
   }, [])
-
   const handleImport: MouseEventHandler = useCallback(async () => {
     const { pipelineId } = workflowStore.getState()
     if (isCreatingRef.current)
@@ -145,11 +102,9 @@ export const useUpdateDSLModal = ({ onCancel, onImport }: UseUpdateDSLModalParam
     isCreatingRef.current = true
     if (!currentFile)
       return
-
     try {
       if (!pipelineId || !fileContent)
         return
-
       setLoading(true)
       const response = await importDSL({
         mode: DSLImportMode.YAML_CONTENT,
@@ -157,7 +112,6 @@ export const useUpdateDSLModal = ({ onCancel, onImport }: UseUpdateDSLModalParam
         pipeline_id: pipelineId,
       })
       const { id, status, pipeline_id, imported_dsl_version, current_dsl_version } = response
-
       if (isCompletedStatus(status))
         await completeImport(pipeline_id, status)
       else if (status === DSLImportStatus.PENDING)
@@ -170,19 +124,15 @@ export const useUpdateDSLModal = ({ onCancel, onImport }: UseUpdateDSLModalParam
     }
     isCreatingRef.current = false
   }, [currentFile, fileContent, workflowStore, importDSL, completeImport, showVersionMismatch, notifyError])
-
   const onUpdateDSLConfirm: MouseEventHandler = useCallback(async () => {
     if (!importId)
       return
-
     try {
       const { status, pipeline_id } = await importDSLConfirm(importId)
-
       if (status === DSLImportStatus.COMPLETED) {
         await completeImport(pipeline_id)
         return
       }
-
       if (status === DSLImportStatus.FAILED)
         notifyError()
     }
@@ -190,7 +140,6 @@ export const useUpdateDSLModal = ({ onCancel, onImport }: UseUpdateDSLModalParam
       notifyError()
     }
   }, [importId, importDSLConfirm, completeImport, notifyError])
-
   return {
     currentFile,
     handleFile,
diff --git a/web/app/components/share/text-generation/hooks/__tests__/use-text-generation-app-state.spec.ts b/web/app/components/share/text-generation/hooks/__tests__/use-text-generation-app-state.spec.ts
index 3339dce403..cd72f8fc7a 100644
--- a/web/app/components/share/text-generation/hooks/__tests__/use-text-generation-app-state.spec.ts
+++ b/web/app/components/share/text-generation/hooks/__tests__/use-text-generation-app-state.spec.ts
@@ -20,7 +20,7 @@ const {
   useDocumentTitleMock: vi.fn(),
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/ui/toast', () => ({
   default: {
     notify: notifyMock,
   },
diff --git a/web/app/components/share/text-generation/hooks/use-text-generation-app-state.ts b/web/app/components/share/text-generation/hooks/use-text-generation-app-state.ts
index 83fca4d0d6..a4edf40521 100644
--- a/web/app/components/share/text-generation/hooks/use-text-generation-app-state.ts
+++ b/web/app/components/share/text-generation/hooks/use-text-generation-app-state.ts
@@ -1,15 +1,10 @@
 import type { TextGenerationCustomConfig } from '../types'
-import type {
-  MoreLikeThisConfig,
-  PromptConfig,
-  SavedMessage,
-  TextToSpeechConfig,
-} from '@/models/debug'
+import type { MoreLikeThisConfig, PromptConfig, SavedMessage, TextToSpeechConfig } from '@/models/debug'
 import type { SiteInfo } from '@/models/share'
 import type { VisionSettings } from '@/types/app'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useWebAppStore } from '@/context/web-app-context'
 import { useAppFavicon } from '@/hooks/use-app-favicon'
@@ -23,7 +18,6 @@ type UseTextGenerationAppStateOptions = {
   isInstalledApp: boolean
   isWorkflow: boolean
 }
-
 type ShareAppParams = {
   user_input_form: Parameters<typeof userInputsFormToPromptVariables>[0]
   more_like_this: MoreLikeThisConfig | null
@@ -36,19 +30,13 @@ type ShareAppParams = {
     image_file_size_limit?: number
   }
 }
-
-export const useTextGenerationAppState = ({
-  isInstalledApp,
-  isWorkflow,
-}: UseTextGenerationAppStateOptions) => {
-  const { notify } = Toast
+export const useTextGenerationAppState = ({ isInstalledApp, isWorkflow }: UseTextGenerationAppStateOptions) => {
   const { t } = useTranslation()
   const appSourceType = isInstalledApp ? AppSourceType.installedApp : AppSourceType.webApp
   const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
   const appData = useWebAppStore(s => s.appInfo)
   const appParams = useWebAppStore(s => s.appParams)
   const accessMode = useWebAppStore(s => s.webAppAccessMode)
-
   const [appId, setAppId] = useState('')
   const [siteInfo, setSiteInfo] = useState<SiteInfo | null>(null)
   const [customConfig, setCustomConfig] = useState<TextGenerationCustomConfig | null>(null)
@@ -62,48 +50,41 @@ export const useTextGenerationAppState = ({
     detail: Resolution.low,
     transfer_methods: [TransferMethod.local_file],
   })
-
   const fetchSavedMessages = useCallback(async (targetAppId = appId) => {
     if (!targetAppId)
       return
-    const res = await doFetchSavedMessage(appSourceType, targetAppId) as { data: SavedMessage[] }
+    const res = await doFetchSavedMessage(appSourceType, targetAppId) as {
+      data: SavedMessage[]
+    }
     setSavedMessages(res.data)
   }, [appId, appSourceType])
-
   const handleSaveMessage = useCallback(async (messageId: string) => {
     if (!appId)
       return
     await saveMessage(messageId, appSourceType, appId)
-    notify({ type: 'success', message: t('api.saved', { ns: 'common' }) })
+    toast.success(t('api.saved', { ns: 'common' }))
     await fetchSavedMessages(appId)
-  }, [appId, appSourceType, fetchSavedMessages, notify, t])
-
+  }, [appId, appSourceType, fetchSavedMessages, t])
   const handleRemoveSavedMessage = useCallback(async (messageId: string) => {
     if (!appId)
       return
     await removeMessage(messageId, appSourceType, appId)
-    notify({ type: 'success', message: t('api.remove', { ns: 'common' }) })
+    toast.success(t('api.remove', { ns: 'common' }))
     await fetchSavedMessages(appId)
-  }, [appId, appSourceType, fetchSavedMessages, notify, t])
-
+  }, [appId, appSourceType, fetchSavedMessages, t])
   useEffect(() => {
     let cancelled = false
-
     const initialize = async () => {
       if (!appData || !appParams)
         return
-
       const { app_id: nextAppId, site, custom_config } = appData
-
       setAppId(nextAppId)
       setSiteInfo(site as SiteInfo)
       setCustomConfig((custom_config || null) as TextGenerationCustomConfig | null)
       await changeLanguage(site.default_language)
-
       const { user_input_form, more_like_this, file_upload, text_to_speech } = appParams as unknown as ShareAppParams
       if (cancelled)
         return
-
       setVisionConfig({
         ...file_upload,
         transfer_methods: file_upload?.allowed_file_upload_methods || file_upload?.allowed_upload_methods,
@@ -116,20 +97,15 @@ export const useTextGenerationAppState = ({
       } as PromptConfig)
       setMoreLikeThisConfig(more_like_this)
       setTextToSpeechConfig(text_to_speech)
-
       if (!isWorkflow)
         await fetchSavedMessages(nextAppId)
     }
-
     void initialize()
-
     return () => {
       cancelled = true
     }
   }, [appData, appParams, fetchSavedMessages, isWorkflow])
-
   useDocumentTitle(siteInfo?.title || t('generation.title', { ns: 'share' }))
-
   useAppFavicon({
     enable: !isInstalledApp,
     icon_type: siteInfo?.icon_type,
@@ -137,7 +113,6 @@ export const useTextGenerationAppState = ({
     icon_background: siteInfo?.icon_background,
     icon_url: siteInfo?.icon_url,
   })
-
   return {
     accessMode,
     appId,
diff --git a/web/app/components/share/text-generation/index.tsx b/web/app/components/share/text-generation/index.tsx
index 6162e2a87b..16444748a1 100644
--- a/web/app/components/share/text-generation/index.tsx
+++ b/web/app/components/share/text-generation/index.tsx
@@ -7,7 +7,7 @@ import { useBoolean } from 'ahooks'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useSearchParams } from '@/next/navigation'
 import { cn } from '@/utils/classnames'
@@ -21,16 +21,10 @@ export type IMainProps = {
   installedAppInfo?: InstalledApp
   isWorkflow?: boolean
 }
-
-const TextGeneration: FC<IMainProps> = ({
-  isInstalledApp = false,
-  isWorkflow = false,
-}) => {
-  const { notify } = Toast
+const TextGeneration: FC<IMainProps> = ({ isInstalledApp = false, isWorkflow = false }) => {
   const { t } = useTranslation()
   const media = useBreakpoints()
   const isPC = media === MediaType.pc
-
   const searchParams = useSearchParams()
   const mode = searchParams.get('mode') || 'create'
   const [currentTab, setCurrentTab] = useState<string>(['create', 'batch'].includes(mode) ? mode : 'create')
@@ -42,57 +36,26 @@ const TextGeneration: FC<IMainProps> = ({
   const [controlStopResponding, setControlStopResponding] = useState(0)
   const [resultExisted, setResultExisted] = useState(false)
   const [isShowResultPanel, { setTrue: showResultPanelState, setFalse: hideResultPanel }] = useBoolean(false)
-
+  const notify = useCallback(({ type, message }: { type: 'error' | 'info' | 'success' | 'warning', message: string }) => {
+    toast(message, { type })
+  }, [])
   const updateInputs = useCallback((newInputs: Record<string, InputValueTypes>) => {
     setInputs(newInputs)
     inputsRef.current = newInputs
   }, [])
-
-  const {
-    accessMode,
-    appId,
-    appSourceType,
-    customConfig,
-    handleRemoveSavedMessage,
-    handleSaveMessage,
-    moreLikeThisConfig,
-    promptConfig,
-    savedMessages,
-    siteInfo,
-    systemFeatures,
-    textToSpeechConfig,
-    visionConfig,
-  } = useTextGenerationAppState({
+  const { accessMode, appId, appSourceType, customConfig, handleRemoveSavedMessage, handleSaveMessage, moreLikeThisConfig, promptConfig, savedMessages, siteInfo, systemFeatures, textToSpeechConfig, visionConfig } = useTextGenerationAppState({
     isInstalledApp,
     isWorkflow,
   })
-
-  const {
-    allFailedTaskList,
-    allSuccessTaskList,
-    allTaskList,
-    allTasksRun,
-    controlRetry,
-    exportRes,
-    handleCompleted,
-    handleRetryAllFailedTask,
-    handleRunBatch: runBatchExecution,
-    isCallBatchAPI,
-    noPendingTask,
-    resetBatchExecution,
-    setIsCallBatchAPI,
-    showTaskList,
-  } = useTextGenerationBatch({
+  const { allFailedTaskList, allSuccessTaskList, allTaskList, allTasksRun, controlRetry, exportRes, handleCompleted, handleRetryAllFailedTask, handleRunBatch: runBatchExecution, isCallBatchAPI, noPendingTask, resetBatchExecution, setIsCallBatchAPI, showTaskList } = useTextGenerationBatch({
     promptConfig,
     notify,
     t,
   })
-
   useEffect(() => {
     if (isCallBatchAPI)
       setRunControl(null)
   }, [isCallBatchAPI])
-
   const showResultPanel = useCallback(() => {
     setTimeout(() => {
       showResultPanelState()
@@ -101,14 +64,12 @@ const TextGeneration: FC<IMainProps> = ({
   const handleRunStart = useCallback(() => {
     setResultExisted(true)
   }, [])
-
   const handleRunOnce = useCallback(() => {
     setIsCallBatchAPI(false)
     setControlSend(Date.now())
     resetBatchExecution()
     showResultPanel()
   }, [resetBatchExecution, setIsCallBatchAPI, showResultPanel])
-
   const handleRunBatch = useCallback((data: string[][]) => {
     runBatchExecution(data, {
       onStart: () => {
@@ -118,7 +79,6 @@ const TextGeneration: FC<IMainProps> = ({
       },
     })
   }, [runBatchExecution, showResultPanel])
-
   if (!appId || !siteInfo || !promptConfig) {
     return (
       <div className="flex h-screen items-center">
@@ -126,74 +86,11 @@ const TextGeneration: FC<IMainProps> = ({
       </div>
     )
   }
-
   return (
-    <div
-      className={cn(
-        'bg-background-default-burn',
-        isPC ? 'flex' : 'flex-col',
-        isInstalledApp ? 'h-full rounded-2xl shadow-md' : 'h-screen',
-      )}
-    >
-      <TextGenerationSidebar
-        accessMode={accessMode}
-        allTasksRun={allTasksRun}
-        currentTab={currentTab}
-        customConfig={customConfig}
-        inputs={inputs}
-        inputsRef={inputsRef}
-        isInstalledApp={isInstalledApp}
-        isPC={isPC}
-        isWorkflow={isWorkflow}
-        onBatchSend={handleRunBatch}
-        onInputsChange={updateInputs}
-        onRemoveSavedMessage={handleRemoveSavedMessage}
-        onRunOnceSend={handleRunOnce}
-        onTabChange={setCurrentTab}
-        onVisionFilesChange={setCompletionFiles}
-        promptConfig={promptConfig}
-        resultExisted={resultExisted}
-        runControl={runControl}
-        savedMessages={savedMessages}
-        siteInfo={siteInfo}
-        systemFeatures={systemFeatures}
-        textToSpeechConfig={textToSpeechConfig}
-        visionConfig={visionConfig}
-      />
-      <TextGenerationResultPanel
-        allFailedTaskList={allFailedTaskList}
-        allSuccessTaskList={allSuccessTaskList}
-        allTaskList={allTaskList}
-        appId={appId}
-        appSourceType={appSourceType}
-        completionFiles={completionFiles}
-        controlRetry={controlRetry}
-        controlSend={controlSend}
-        controlStopResponding={controlStopResponding}
-        exportRes={exportRes}
-        handleCompleted={handleCompleted}
-        handleRetryAllFailedTask={handleRetryAllFailedTask}
-        handleSaveMessage={handleSaveMessage}
-        inputs={inputs}
-        isCallBatchAPI={isCallBatchAPI}
-        isPC={isPC}
-        isShowResultPanel={isShowResultPanel}
-        isWorkflow={isWorkflow}
-        moreLikeThisEnabled={!!moreLikeThisConfig?.enabled}
-        noPendingTask={noPendingTask}
-        onHideResultPanel={hideResultPanel}
-        onRunControlChange={setRunControl}
-        onRunStart={handleRunStart}
-        onShowResultPanel={showResultPanel}
-        promptConfig={promptConfig}
-        resultExisted={resultExisted}
-        showTaskList={showTaskList}
-        siteInfo={siteInfo}
-        textToSpeechEnabled={!!textToSpeechConfig?.enabled}
-        visionConfig={visionConfig}
-      />
+    <div className={cn('bg-background-default-burn', isPC ? 'flex' : 'flex-col', isInstalledApp ? 'h-full rounded-2xl shadow-md' : 'h-screen')}>
+      <TextGenerationSidebar accessMode={accessMode} allTasksRun={allTasksRun} currentTab={currentTab} customConfig={customConfig} inputs={inputs} inputsRef={inputsRef} isInstalledApp={isInstalledApp} isPC={isPC} isWorkflow={isWorkflow} onBatchSend={handleRunBatch} onInputsChange={updateInputs} onRemoveSavedMessage={handleRemoveSavedMessage} onRunOnceSend={handleRunOnce} onTabChange={setCurrentTab} onVisionFilesChange={setCompletionFiles} promptConfig={promptConfig} resultExisted={resultExisted} runControl={runControl} savedMessages={savedMessages} siteInfo={siteInfo} systemFeatures={systemFeatures} textToSpeechConfig={textToSpeechConfig} visionConfig={visionConfig} />
+      <TextGenerationResultPanel allFailedTaskList={allFailedTaskList} allSuccessTaskList={allSuccessTaskList} allTaskList={allTaskList} appId={appId} appSourceType={appSourceType} completionFiles={completionFiles} controlRetry={controlRetry} controlSend={controlSend} controlStopResponding={controlStopResponding} exportRes={exportRes} handleCompleted={handleCompleted} handleRetryAllFailedTask={handleRetryAllFailedTask} handleSaveMessage={handleSaveMessage} inputs={inputs} isCallBatchAPI={isCallBatchAPI} isPC={isPC} isShowResultPanel={isShowResultPanel} isWorkflow={isWorkflow} moreLikeThisEnabled={!!moreLikeThisConfig?.enabled} noPendingTask={noPendingTask} onHideResultPanel={hideResultPanel} onRunControlChange={setRunControl} onRunStart={handleRunStart} onShowResultPanel={showResultPanel} promptConfig={promptConfig} resultExisted={resultExisted} showTaskList={showTaskList} siteInfo={siteInfo} textToSpeechEnabled={!!textToSpeechConfig?.enabled} visionConfig={visionConfig} />
     </div>
   )
 }
-
 export default TextGeneration
diff --git a/web/app/components/share/text-generation/result/__tests__/index.spec.tsx b/web/app/components/share/text-generation/result/__tests__/index.spec.tsx
index 3a349cf1c0..251032d541 100644
--- a/web/app/components/share/text-generation/result/__tests__/index.spec.tsx
+++ b/web/app/components/share/text-generation/result/__tests__/index.spec.tsx
@@ -25,7 +25,7 @@ vi.mock('i18next', () => ({
   t: (key: string) => key,
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/ui/toast', () => ({
   default: {
     notify: notifyMock,
   },
diff --git a/web/app/components/share/text-generation/result/index.tsx b/web/app/components/share/text-generation/result/index.tsx
index e0e366c52b..b4a6119a53 100644
--- a/web/app/components/share/text-generation/result/index.tsx
+++ b/web/app/components/share/text-generation/result/index.tsx
@@ -5,11 +5,12 @@ import type { SiteInfo } from '@/models/share'
 import type { AppSourceType } from '@/service/share'
 import type { VisionFile, VisionSettings } from '@/types/app'
 import { t } from 'i18next'
+import { useCallback } from 'react'
 import * as React from 'react'
 import TextGenerationRes from '@/app/components/app/text-generate/item'
 import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import NoData from '@/app/components/share/text-generation/no-data'
 import { useResultRunState } from './hooks/use-result-run-state'
 import { useResultSender } from './hooks/use-result-sender'
@@ -37,37 +38,16 @@ export type IResultProps = {
   completionFiles: VisionFile[]
   siteInfo: SiteInfo | null
   onRunStart: () => void
-  onRunControlChange?: (control: { onStop: () => Promise<void> | void, isStopping: boolean } | null) => void
+  onRunControlChange?: (control: {
+    onStop: () => Promise<void> | void
+    isStopping: boolean
+  } | null) => void
   hideInlineStopButton?: boolean
 }
-
-const Result: FC<IResultProps> = ({
-  isWorkflow,
-  isCallBatchAPI,
-  isPC,
-  isMobile,
-  appSourceType,
-  appId,
-  isError,
-  isShowTextToSpeech,
-  promptConfig,
-  moreLikeThisEnabled,
-  inputs,
-  controlSend,
-  controlRetry,
-  controlStopResponding,
-  onShowRes,
-  handleSaveMessage,
-  taskId,
-  onCompleted,
-  visionConfig,
-  completionFiles,
-  siteInfo,
-  onRunStart,
-  onRunControlChange,
-  hideInlineStopButton = false,
-}) => {
-  const { notify } = Toast
+const Result: FC<IResultProps> = ({ isWorkflow, isCallBatchAPI, isPC, isMobile, appSourceType, appId, isError, isShowTextToSpeech, promptConfig, moreLikeThisEnabled, inputs, controlSend, controlRetry, controlStopResponding, onShowRes, handleSaveMessage, taskId, onCompleted, visionConfig, completionFiles, siteInfo, onRunStart, onRunControlChange, hideInlineStopButton = false }) => {
+  const notify = useCallback(({ type, message }: { type: 'error' | 'info' | 'success' | 'warning', message: string }) => {
+    toast(message, { type })
+  }, [])
   const runState = useResultRunState({
     appId,
     appSourceType,
@@ -76,7 +56,6 @@ const Result: FC<IResultProps> = ({
     notify,
     onRunControlChange,
   })
-
   const { handleSend } = useResultSender({
     appId,
     appSourceType,
@@ -97,23 +76,15 @@ const Result: FC<IResultProps> = ({
     taskId,
     visionConfig,
   })
-
   const isNoData = !runState.completionRes
-
   const renderTextGenerationRes = () => (
     <>
       {!hideInlineStopButton && runState.isResponding && runState.currentTaskId && (
         <div className={`mb-3 flex ${isPC ? 'justify-end' : 'justify-center'}`}>
-          <Button
-            variant="secondary"
-            disabled={runState.isStopping}
-            onClick={runState.handleStop}
-          >
-            {
-              runState.isStopping
-                ? <span aria-hidden className="i-ri-loader-2-line mr-[5px] h-3.5 w-3.5 animate-spin" />
-                : <span aria-hidden className="i-ri-stop-circle-fill mr-[5px] h-3.5 w-3.5" />
-            }
+          <Button variant="secondary" disabled={runState.isStopping} onClick={runState.handleStop}>
+            {runState.isStopping
+              ? <span aria-hidden className="i-ri-loader-2-line mr-[5px] h-3.5 w-3.5 animate-spin" />
+              : <span aria-hidden className="i-ri-stop-circle-fill mr-[5px] h-3.5 w-3.5" />}
             <span className="text-xs font-normal">{t('operation.stopResponding', { ns: 'appDebug' })}</span>
           </Button>
         </div>
@@ -143,35 +114,30 @@ const Result: FC<IResultProps> = ({
       />
     </>
   )
-
   return (
     <>
-      {!isCallBatchAPI && !isWorkflow && (
-        (runState.isResponding && !runState.completionRes)
-          ? (
-              <div className="flex h-full w-full items-center justify-center">
-                <Loading type="area" />
-              </div>
-            )
-          : (
-              <>
-                {(isNoData)
-                  ? <NoData />
-                  : renderTextGenerationRes()}
-              </>
-            )
-      )}
-      {!isCallBatchAPI && isWorkflow && (
-        (runState.isResponding && !runState.workflowProcessData)
-          ? (
-              <div className="flex h-full w-full items-center justify-center">
-                <Loading type="area" />
-              </div>
-            )
-          : !runState.workflowProcessData
-              ? <NoData />
-              : renderTextGenerationRes()
-      )}
+      {!isCallBatchAPI && !isWorkflow && ((runState.isResponding && !runState.completionRes)
+        ? (
+            <div className="flex h-full w-full items-center justify-center">
+              <Loading type="area" />
+            </div>
+          )
+        : (
+            <>
+              {(isNoData)
+                ? <NoData />
+                : renderTextGenerationRes()}
+            </>
+          ))}
+      {!isCallBatchAPI && isWorkflow && ((runState.isResponding && !runState.workflowProcessData)
+        ? (
+            <div className="flex h-full w-full items-center justify-center">
+              <Loading type="area" />
+            </div>
+          )
+        : !runState.workflowProcessData
+            ? <NoData />
+            : renderTextGenerationRes())}
       {isCallBatchAPI && renderTextGenerationRes()}
     </>
   )
diff --git a/web/app/components/tools/edit-custom-collection-modal/__tests__/index.spec.tsx b/web/app/components/tools/edit-custom-collection-modal/__tests__/index.spec.tsx
index 3b821080e4..7cd1c8cd53 100644
--- a/web/app/components/tools/edit-custom-collection-modal/__tests__/index.spec.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/__tests__/index.spec.tsx
@@ -2,7 +2,7 @@ import type { ModalContextState } from '@/context/modal-context'
 import type { ProviderContextState } from '@/context/provider-context'
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { Plan } from '@/app/components/billing/type'
 import { AuthHeaderPrefix, AuthType } from '@/app/components/tools/types'
 import { parseParamsSchema } from '@/service/tools'
@@ -71,7 +71,7 @@ describe('EditCustomCollectionModal', () => {
   const mockOnAdd = vi.fn()
   const mockOnEdit = vi.fn()
   const mockOnRemove = vi.fn()
-  const toastNotifySpy = vi.spyOn(Toast, 'notify')
+  const toastNotifySpy = vi.spyOn(toast, 'error').mockReturnValue('toast-error')
 
   beforeEach(() => {
     vi.clearAllMocks()
@@ -135,10 +135,7 @@ describe('EditCustomCollectionModal', () => {
       fireEvent.click(screen.getByText('common.operation.save'))
 
       await waitFor(() => {
-        expect(toastNotifySpy).toHaveBeenCalledWith(expect.objectContaining({
-          message: 'common.errorMsg.fieldRequired:{"field":"tools.createTool.name"}',
-          type: 'error',
-        }))
+        expect(toastNotifySpy).toHaveBeenCalledWith('common.errorMsg.fieldRequired:{"field":"tools.createTool.name"}')
       })
       expect(mockOnAdd).not.toHaveBeenCalled()
     })
@@ -152,10 +149,7 @@ describe('EditCustomCollectionModal', () => {
       fireEvent.click(screen.getByText('common.operation.save'))
 
       await waitFor(() => {
-        expect(toastNotifySpy).toHaveBeenCalledWith(expect.objectContaining({
-          message: 'common.errorMsg.fieldRequired:{"field":"tools.createTool.schema"}',
-          type: 'error',
-        }))
+        expect(toastNotifySpy).toHaveBeenCalledWith('common.errorMsg.fieldRequired:{"field":"tools.createTool.schema"}')
       })
       expect(mockOnAdd).not.toHaveBeenCalled()
     })
diff --git a/web/app/components/tools/edit-custom-collection-modal/index.tsx b/web/app/components/tools/edit-custom-collection-modal/index.tsx
index 8786196d40..c50437e5ed 100644
--- a/web/app/components/tools/edit-custom-collection-modal/index.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/index.tsx
@@ -13,7 +13,7 @@ import Drawer from '@/app/components/base/drawer-plus'
 import EmojiPicker from '@/app/components/base/emoji-picker'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import LabelSelector from '@/app/components/tools/labels/selector'
 import { parseParamsSchema } from '@/service/tools'
 import { cn } from '@/utils/classnames'
@@ -33,19 +33,10 @@ type Props = {
   onEdit?: (payload: CustomCollectionBackend) => void
 }
 // Add and Edit
-const EditCustomCollectionModal: FC<Props> = ({
-  positionLeft,
-  dialogClassName = '',
-  payload,
-  onHide,
-  onAdd,
-  onEdit,
-  onRemove,
-}) => {
+const EditCustomCollectionModal: FC<Props> = ({ positionLeft, dialogClassName = '', payload, onHide, onAdd, onEdit, onRemove }) => {
   const { t } = useTranslation()
   const isAdd = !payload
   const isEdit = !!payload
-
   const [editFirst, setEditFirst] = useState(!isAdd)
   const [paramsSchemas, setParamsSchemas] = useState<CustomParamSchema[]>(payload?.tools || [])
   const [labels, setLabels] = useState<string[]>(payload?.labels || [])
@@ -65,9 +56,7 @@ const EditCustomCollectionModal: FC<Props> = ({
         schema: '',
       }
     : payload)
-
   const originalProvider = isEdit ? payload.provider : ''
-
   // Sync customCollection state when payload changes
   useEffect(() => {
     if (isEdit) {
@@ -76,7 +65,6 @@ const EditCustomCollectionModal: FC<Props> = ({
       setLabels(payload.labels || [])
     }
   }, [isEdit, payload])
-
   const [showEmojiPicker, setShowEmojiPicker] = useState(false)
   const emoji = customCollection.icon
   const setEmoji = (emoji: Emoji) => {
@@ -93,7 +81,6 @@ const EditCustomCollectionModal: FC<Props> = ({
     })
     setCustomCollection(newCollection)
   }
-
   useEffect(() => {
     if (!debouncedSchema)
       return
@@ -121,7 +108,6 @@ const EditCustomCollectionModal: FC<Props> = ({
       }
     })()
   }, [debouncedSchema])
-
   const [credentialsModalShow, setCredentialsModalShow] = useState(false)
   const credential = customCollection.credentials
   const setCredential = (credential: Credential) => {
@@ -130,58 +116,43 @@ const EditCustomCollectionModal: FC<Props> = ({
     })
     setCustomCollection(newCollection)
   }
-
   const [currTool, setCurrTool] = useState<CustomParamSchema | null>(null)
   const [isShowTestApi, setIsShowTestApi] = useState(false)
-
   const handleLabelSelect = (value: string[]) => {
     setLabels(value)
   }
-
   const handleSave = () => {
     // const postData = clone(customCollection)
     const postData = produce(customCollection, (draft) => {
       delete draft.tools
-
       if (draft.credentials.auth_type === AuthType.none) {
         delete draft.credentials.api_key_header
         delete draft.credentials.api_key_header_prefix
         delete draft.credentials.api_key_value
       }
-
       draft.labels = labels
     })
-
     let errorMessage = ''
     if (!postData.provider)
       errorMessage = t('errorMsg.fieldRequired', { ns: 'common', field: t('createTool.name', { ns: 'tools' }) })
-
     if (!postData.schema)
       errorMessage = t('errorMsg.fieldRequired', { ns: 'common', field: t('createTool.schema', { ns: 'tools' }) })
-
     if (errorMessage) {
-      Toast.notify({
-        type: 'error',
-        message: errorMessage,
-      })
+      toast.error(errorMessage)
       return
     }
-
     if (isAdd) {
       onAdd?.(postData)
       return
     }
-
     onEdit?.({
       ...postData,
       original_provider: originalProvider,
     })
   }
-
   const getPath = (url: string) => {
     if (!url)
       return ''
-
     try {
       const path = decodeURI(new URL(url).pathname)
       return path || ''
@@ -190,7 +161,6 @@ const EditCustomCollectionModal: FC<Props> = ({
       return url
     }
   }
-
   return (
     <>
       <Drawer
@@ -237,12 +207,7 @@ const EditCustomCollectionModal: FC<Props> = ({
                       <span className="ml-1 text-red-500">*</span>
                     </div>
                     <div className="mx-2 h-3 w-px bg-divider-regular"></div>
-                    <a
-                      href="https://swagger.io/specification/"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="flex h-[18px] items-center space-x-1 text-text-accent"
-                    >
+                    <a href="https://swagger.io/specification/" target="_blank" rel="noopener noreferrer" className="flex h-[18px] items-center space-x-1 text-text-accent">
                       <div className="text-xs font-normal">{t('createTool.viewSchemaSpec', { ns: 'tools' })}</div>
                       <LinkExternal02 className="h-3 w-3" />
                     </a>
@@ -250,12 +215,7 @@ const EditCustomCollectionModal: FC<Props> = ({
                   <GetSchema onChange={setSchema} />
 
                 </div>
-                <Textarea
-                  className="h-[240px] resize-none"
-                  value={schema}
-                  onChange={e => setSchema(e.target.value)}
-                  placeholder={t('createTool.schemaPlaceHolder', { ns: 'tools' })!}
-                />
+                <Textarea className="h-[240px] resize-none" value={schema} onChange={e => setSchema(e.target.value)} placeholder={t('createTool.schemaPlaceHolder', { ns: 'tools' })!} />
               </div>
 
               {/* Available Tools  */}
@@ -345,11 +305,7 @@ const EditCustomCollectionModal: FC<Props> = ({
 
             </div>
             <div className={cn(isEdit ? 'justify-between' : 'justify-end', 'mt-2 flex shrink-0 rounded-b-[10px] border-t border-divider-regular bg-background-section-burn px-6 py-4')}>
-              {
-                isEdit && (
-                  <Button variant="warning" onClick={onRemove}>{t('operation.delete', { ns: 'common' })}</Button>
-                )
-              }
+              {isEdit && (<Button variant="warning" onClick={onRemove}>{t('operation.delete', { ns: 'common' })}</Button>)}
               <div className="flex space-x-2">
                 <Button onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
                 <Button variant="primary" onClick={handleSave}>{t('operation.save', { ns: 'common' })}</Button>
@@ -366,29 +322,14 @@ const EditCustomCollectionModal: FC<Props> = ({
                 }}
               />
             )}
-            {credentialsModalShow && (
-              <ConfigCredentials
-                positionCenter={isAdd}
-                credential={credential}
-                onChange={setCredential}
-                onHide={() => setCredentialsModalShow(false)}
-              />
-            )}
-            {isShowTestApi && (
-              <TestApi
-                positionCenter={isAdd}
-                tool={currTool as CustomParamSchema}
-                customCollection={customCollection}
-                onHide={() => setIsShowTestApi(false)}
-              />
-            )}
+            {credentialsModalShow && (<ConfigCredentials positionCenter={isAdd} credential={credential} onChange={setCredential} onHide={() => setCredentialsModalShow(false)} />)}
+            {isShowTestApi && (<TestApi positionCenter={isAdd} tool={currTool as CustomParamSchema} customCollection={customCollection} onHide={() => setIsShowTestApi(false)} />)}
           </div>
         )}
         isShowMask={true}
         clickOutsideNotOpen={true}
       />
     </>
-
   )
 }
 export default React.memo(EditCustomCollectionModal)
diff --git a/web/app/components/tools/mcp/hooks/use-mcp-modal-form.ts b/web/app/components/tools/mcp/hooks/use-mcp-modal-form.ts
index ec7c479b69..13d26a4738 100644
--- a/web/app/components/tools/mcp/hooks/use-mcp-modal-form.ts
+++ b/web/app/components/tools/mcp/hooks/use-mcp-modal-form.ts
@@ -5,17 +5,15 @@ import type { ToolWithProvider } from '@/app/components/workflow/types'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { getDomain } from 'tldts'
 import { v4 as uuid } from 'uuid'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { MCPAuthMethod } from '@/app/components/tools/types'
 import { uploadRemoteFileInfo } from '@/service/common'
 
 const DEFAULT_ICON = { type: 'emoji', icon: '🔗', background: '#6366F1' }
-
 const extractFileId = (url: string) => {
   const match = /files\/(.+?)\/file-preview/.exec(url)
   return match ? match[1] : null
 }
-
 const getIcon = (data?: ToolWithProvider): AppIconSelection => {
   if (!data)
     return DEFAULT_ICON as AppIconSelection
@@ -27,11 +25,9 @@ const getIcon = (data?: ToolWithProvider): AppIconSelection => {
     type: 'emoji',
   } as unknown as AppIconSelection
 }
-
 const getInitialHeaders = (data?: ToolWithProvider): HeaderItem[] => {
   return Object.entries(data?.masked_headers || {}).map(([key, value]) => ({ id: uuid(), key, value }))
 }
-
 export const isValidUrl = (string: string) => {
   try {
     const url = new URL(string)
@@ -41,11 +37,9 @@ export const isValidUrl = (string: string) => {
     return false
   }
 }
-
 export const isValidServerID = (str: string) => {
   return /^[a-z0-9_-]{1,24}$/.test(str)
 }
-
 export type MCPModalFormState = {
   url: string
   name: string
@@ -61,7 +55,6 @@ export type MCPModalFormState = {
   clientID: string
   credentials: string
 }
-
 export type MCPModalFormActions = {
   setUrl: (url: string) => void
   setName: (name: string) => void
@@ -78,7 +71,6 @@ export type MCPModalFormActions = {
   handleUrlBlur: (url: string) => Promise<void>
   resetIcon: () => void
 }
-
 /**
  * Custom hook for MCP Modal form state management.
  *
@@ -90,10 +82,8 @@ export const useMCPModalForm = (data?: ToolWithProvider) => {
   const isCreate = !data
   const originalServerUrl = data?.server_url
   const originalServerID = data?.server_identifier
-
   // Form key for resetting state - changes when data changes
   const formKey = useMemo(() => data?.id ?? 'create', [data?.id])
-
   // Form state - initialized from data
   const [url, setUrl] = useState(() => data?.server_url || '')
   const [name, setName] = useState(() => data?.name || '')
@@ -105,13 +95,11 @@ export const useMCPModalForm = (data?: ToolWithProvider) => {
   const [headers, setHeaders] = useState<HeaderItem[]>(() => getInitialHeaders(data))
   const [isFetchingIcon, setIsFetchingIcon] = useState(false)
   const appIconRef = useRef<HTMLDivElement>(null)
-
   // Auth state
   const [authMethod, setAuthMethod] = useState(MCPAuthMethod.authentication)
   const [isDynamicRegistration, setIsDynamicRegistration] = useState(() => isCreate ? true : (data?.is_dynamic_registration ?? true))
   const [clientID, setClientID] = useState(() => data?.authentication?.client_id || '')
   const [credentials, setCredentials] = useState(() => data?.authentication?.client_secret || '')
-
   const handleUrlBlur = useCallback(async (urlValue: string) => {
     if (data)
       return
@@ -140,31 +128,26 @@ export const useMCPModalForm = (data?: ToolWithProvider) => {
         errorMessage = e.message
       }
       console.error('Failed to fetch remote icon:', e)
-      Toast.notify({ type: 'warning', message: errorMessage })
+      toast.warning(errorMessage)
     }
     finally {
       setIsFetchingIcon(false)
     }
   }, [data])
-
   const resetIcon = useCallback(() => {
     setAppIcon(getIcon(data))
   }, [data])
-
   const handleAuthMethodChange = useCallback((value: string) => {
     setAuthMethod(value as MCPAuthMethod)
   }, [])
-
   return {
     // Key for form reset (use as React key on parent)
     formKey,
-
     // Metadata
     isCreate,
     originalServerUrl,
     originalServerID,
     appIconRef,
-
     // State
     state: {
       url,
@@ -181,7 +164,6 @@ export const useMCPModalForm = (data?: ToolWithProvider) => {
       clientID,
       credentials,
     } satisfies MCPModalFormState,
-
     // Actions
     actions: {
       setUrl,
diff --git a/web/app/components/tools/setting/build-in/__tests__/config-credentials.spec.tsx b/web/app/components/tools/setting/build-in/__tests__/config-credentials.spec.tsx
index 00b583b32c..edce5c0bbb 100644
--- a/web/app/components/tools/setting/build-in/__tests__/config-credentials.spec.tsx
+++ b/web/app/components/tools/setting/build-in/__tests__/config-credentials.spec.tsx
@@ -33,7 +33,7 @@ vi.mock('@/app/components/base/drawer-plus', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/ui/toast', () => ({
   default: { notify: vi.fn() },
 }))
 
diff --git a/web/app/components/tools/setting/build-in/config-credentials.tsx b/web/app/components/tools/setting/build-in/config-credentials.tsx
index 70e30bc2e0..1e953dc5b1 100644
--- a/web/app/components/tools/setting/build-in/config-credentials.tsx
+++ b/web/app/components/tools/setting/build-in/config-credentials.tsx
@@ -9,7 +9,7 @@ import Button from '@/app/components/base/button'
 import Drawer from '@/app/components/base/drawer-plus'
 import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
 import Loading from '@/app/components/base/loading'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
 import { fetchBuiltInToolCredential, fetchBuiltInToolCredentialSchema } from '@/service/tools'
@@ -24,15 +24,7 @@ type Props = {
   onRemove?: () => void
   isSaving?: boolean
 }
-
-const ConfigCredential: FC<Props> = ({
-  collection,
-  onCancel,
-  onSaved,
-  isHideRemoveBtn,
-  onRemove = noop,
-  isSaving,
-}) => {
+const ConfigCredential: FC<Props> = ({ collection, onCancel, onSaved, isHideRemoveBtn, onRemove = noop, isSaving }) => {
   const { t } = useTranslation()
   const language = useLanguage()
   const [credentialSchema, setCredentialSchema] = useState<any>(null)
@@ -49,11 +41,10 @@ const ConfigCredential: FC<Props> = ({
       setTempCredential(defaultCredentials)
     })
   }, [])
-
   const handleSave = async () => {
     for (const field of credentialSchema) {
       if (field.required && !tempCredential[field.name]) {
-        Toast.notify({ type: 'error', message: t('errorMsg.fieldRequired', { ns: 'common', field: field.label[language] || field.label.en_US }) })
+        toast.error(t('errorMsg.fieldRequired', { ns: 'common', field: field.label[language] || field.label.en_US }))
         return
       }
     }
@@ -66,7 +57,6 @@ const ConfigCredential: FC<Props> = ({
       setIsLoading(false)
     }
   }
-
   return (
     <Drawer
       isShow
@@ -96,12 +86,7 @@ const ConfigCredential: FC<Props> = ({
                     inputClassName="!bg-components-input-bg-normal"
                     fieldMoreInfo={item => item.url
                       ? (
-                          <a
-                            href={item.url}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="inline-flex items-center text-xs text-text-accent"
-                          >
+                          <a href={item.url} target="_blank" rel="noopener noreferrer" className="inline-flex items-center text-xs text-text-accent">
                             {t('howToGet', { ns: 'tools' })}
                             <LinkExternal02 className="ml-1 h-3 w-3" />
                           </a>
@@ -109,11 +94,7 @@ const ConfigCredential: FC<Props> = ({
                       : null}
                   />
                   <div className={cn((collection.is_team_authorization && !isHideRemoveBtn) ? 'justify-between' : 'justify-end', 'mt-2 flex')}>
-                    {
-                      (collection.is_team_authorization && !isHideRemoveBtn) && (
-                        <Button onClick={onRemove}>{t('operation.remove', { ns: 'common' })}</Button>
-                      )
-                    }
+                    {(collection.is_team_authorization && !isHideRemoveBtn) && (<Button onClick={onRemove}>{t('operation.remove', { ns: 'common' })}</Button>)}
                     <div className="flex space-x-2">
                       <Button onClick={onCancel}>{t('operation.cancel', { ns: 'common' })}</Button>
                       <Button loading={isLoading || isSaving} disabled={isLoading || isSaving} variant="primary" onClick={handleSave}>{t('operation.save', { ns: 'common' })}</Button>
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 4d11197081..d35ef8eb3e 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,6 @@ 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/context'
 import { Plan } from '@/app/components/billing/type'
 import { BlockEnum, InputVarType } from '@/app/components/workflow/types'
 import FeaturesTrigger from '../features-trigger'
@@ -21,6 +20,19 @@ const mockUseNodes = vi.fn()
 const mockUseEdges = vi.fn()
 
 const mockNotify = vi.fn()
+const mockToast = {
+  success: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'success', message, ...options }),
+  error: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'error', message, ...options }),
+  warning: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'warning', message, ...options }),
+  info: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'info', message, ...options }),
+  dismiss: vi.fn(),
+  update: vi.fn(),
+  promise: vi.fn(),
+}
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
+}))
 const mockHandleCheckBeforePublish = vi.fn()
 const mockHandleSyncWorkflowDraft = vi.fn()
 const mockPublishWorkflow = vi.fn()
@@ -148,12 +160,7 @@ const createProviderContext = ({
 })
 
 const renderWithToast = (ui: ReactElement) => {
-  return render(
-    // eslint-disable-next-line react/no-context-provider
-    <ToastContext.Provider value={{ notify: mockNotify, close: vi.fn() }}>
-      {ui}
-    </ToastContext.Provider>,
-  )
+  return render(ui)
 }
 
 describe('FeaturesTrigger', () => {
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 9373daf6a9..1c30c7126d 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
@@ -1,42 +1,23 @@
 import type { ModelAndParameter } from '@/app/components/app/configuration/debug/types'
 import type { EndNodeType } from '@/app/components/workflow/nodes/end/types'
 import type { StartNodeType } from '@/app/components/workflow/nodes/start/types'
-import type {
-  CommonEdgeType,
-  Node,
-} from '@/app/components/workflow/types'
+import type { CommonEdgeType, Node } from '@/app/components/workflow/types'
 import type { PublishWorkflowParams } from '@/types/workflow'
-import {
-  memo,
-  useCallback,
-  useMemo,
-} from 'react'
+import { memo, useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useEdges } from 'reactflow'
 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/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { Plan } from '@/app/components/billing/type'
-import {
-  useChecklist,
-  useChecklistBeforePublish,
-  useIsChatMode,
-  useNodesReadOnly,
-  useNodesSyncDraft,
-  // useWorkflowRunValidation,
+import { useChecklist, useChecklistBeforePublish, useIsChatMode, useNodesReadOnly, useNodesSyncDraft,
+// useWorkflowRunValidation,
 } from '@/app/components/workflow/hooks'
-import {
-  useStore,
-  useWorkflowStore,
-} from '@/app/components/workflow/store'
+import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
 import useNodes from '@/app/components/workflow/store/workflow/use-nodes'
-import {
-  BlockEnum,
-  InputVarType,
-  isTriggerNode,
-} from '@/app/components/workflow/types'
+import { BlockEnum, InputVarType, isTriggerNode } from '@/app/components/workflow/types'
 import { useProviderContext } from '@/context/provider-context'
 import useTheme from '@/hooks/use-theme'
 import { fetchAppDetail } from '@/service/apps'
@@ -58,14 +39,12 @@ const FeaturesTrigger = () => {
   const draftUpdatedAt = useStore(s => s.draftUpdatedAt)
   const toolPublished = useStore(s => s.toolPublished)
   const lastPublishedHasUserInput = useStore(s => s.lastPublishedHasUserInput)
-
   const nodes = useNodes()
   const hasWorkflowNodes = nodes.length > 0
   const startNode = nodes.find(node => node.data.type === BlockEnum.Start)
   const endNode = nodes.find(node => node.data.type === BlockEnum.End)
   const startVariables = (startNode as Node<StartNodeType>)?.data?.variables
   const edges = useEdges<CommonEdgeType>()
-
   const fileSettings = useFeatures(s => s.features.file)
   const variables = useMemo(() => {
     const data = startVariables || []
@@ -80,27 +59,19 @@ const FeaturesTrigger = () => {
         },
       ]
     }
-
     return data
   }, [fileSettings?.image?.enabled, startVariables])
   const endVariables = useMemo(() => (endNode as Node<EndNodeType>)?.data?.outputs || [], [endNode])
-
   const { handleCheckBeforePublish } = useChecklistBeforePublish()
   const { handleSyncWorkflowDraft } = useNodesSyncDraft()
-  const { notify } = useToastContext()
-  const startNodeIds = useMemo(
-    () => nodes.filter(node => node.data.type === BlockEnum.Start).map(node => node.id),
-    [nodes],
-  )
+  const startNodeIds = useMemo(() => nodes.filter(node => node.data.type === BlockEnum.Start).map(node => node.id), [nodes])
   const hasUserInputNode = useMemo(() => {
     if (!startNodeIds.length)
       return false
     return edges.some(edge => startNodeIds.includes(edge.source))
   }, [edges, startNodeIds])
   // Track trigger presence so the publisher can adjust UI (e.g. hide missing start section).
-  const hasTriggerNode = useMemo(() => (
-    nodes.some(node => isTriggerNode(node.data.type as BlockEnum))
-  ), [nodes])
+  const hasTriggerNode = useMemo(() => (nodes.some(node => isTriggerNode(node.data.type as BlockEnum))), [nodes])
   const startNodeLimitExceeded = useMemo(() => {
     const entryCount = nodes.reduce((count, node) => {
       const nodeType = node.data.type as BlockEnum
@@ -110,25 +81,17 @@ const FeaturesTrigger = () => {
     }, 0)
     return isFetchedPlan && plan.type === Plan.sandbox && entryCount > 2
   }, [nodes, plan.type, isFetchedPlan])
-
   const hasHumanInputNode = useMemo(() => {
     return nodes.some(node => node.data.type === BlockEnum.HumanInput)
   }, [nodes])
-
   const resetWorkflowVersionHistory = useResetWorkflowVersionHistory()
   const invalidateAppTriggers = useInvalidateAppTriggers()
-
   const handleShowFeatures = useCallback(() => {
-    const {
-      showFeaturesPanel,
-      isRestoring,
-      setShowFeaturesPanel,
-    } = workflowStore.getState()
+    const { showFeaturesPanel, isRestoring, setShowFeaturesPanel } = workflowStore.getState()
     if (getNodesReadOnly() && !isRestoring)
       return
     setShowFeaturesPanel(!showFeaturesPanel)
   }, [workflowStore, getNodesReadOnly])
-
   const updateAppDetail = useCallback(async () => {
     try {
       const res = await fetchAppDetail({ url: '/apps', id: appID! })
@@ -138,27 +101,23 @@ const FeaturesTrigger = () => {
       console.error(error)
     }
   }, [appID, setAppDetail])
-
   const { mutateAsync: publishWorkflow, isPending: isPublishing } = usePublishWorkflow()
   // const { validateBeforeRun } = useWorkflowRunValidation()
   const needWarningNodes = useChecklist(nodes, edges)
-
   const updatePublishedWorkflow = useInvalidateAppWorkflow()
   const onPublish = useCallback(async (params?: ModelAndParameter | PublishWorkflowParams) => {
     const publishParams = params && 'title' in params ? params : undefined
     // First check if there are any items in the checklist
     // if (!validateBeforeRun())
     //   throw new Error('Checklist has unresolved items')
-
     if (needWarningNodes.length > 0) {
       console.warn('[workflow-header] publish blocked by checklist', {
         appId: appID,
         warningCount: needWarningNodes.length,
       })
-      notify({ type: 'error', message: t('panel.checklistTip', { ns: 'workflow' }) })
+      toast.error(t('panel.checklistTip', { ns: 'workflow' }))
       throw new Error('Checklist has unresolved items')
     }
-
     // Then perform the detailed validation
     if (await handleCheckBeforePublish()) {
       const res = await publishWorkflow({
@@ -170,7 +129,7 @@ const FeaturesTrigger = () => {
         const publishSuccessMessage = isChatMode
           ? t('common.chatflowPublishSuccess', { ns: 'workflow' })
           : t('common.workflowPublishSuccess', { ns: 'workflow' })
-        notify({ type: 'success', message: publishSuccessMessage })
+        toast.success(publishSuccessMessage)
         updatePublishedWorkflow(appID!)
         updateAppDetail()
         invalidateAppTriggers(appID!)
@@ -182,55 +141,44 @@ const FeaturesTrigger = () => {
     else {
       throw new Error('Checklist failed')
     }
-  }, [needWarningNodes, handleCheckBeforePublish, publishWorkflow, notify, appID, t, updatePublishedWorkflow, updateAppDetail, workflowStore, resetWorkflowVersionHistory, invalidateAppTriggers, hasUserInputNode, isChatMode])
-
+  }, [needWarningNodes, handleCheckBeforePublish, publishWorkflow, appID, t, updatePublishedWorkflow, updateAppDetail, workflowStore, resetWorkflowVersionHistory, invalidateAppTriggers, hasUserInputNode, isChatMode])
   const onPublisherToggle = useCallback((state: boolean) => {
     if (state)
       handleSyncWorkflowDraft(true)
   }, [handleSyncWorkflowDraft])
-
   const handleToolConfigureUpdate = useCallback(() => {
     workflowStore.setState({ toolPublished: true })
   }, [workflowStore])
-
   return (
     <>
       {/* Feature button is only visible in chatflow mode (advanced-chat) */}
       {isChatMode && (
-        <Button
-          className={cn(
-            'rounded-lg border border-transparent text-components-button-secondary-text',
-            theme === 'dark' && 'border-black/5 bg-white/10 backdrop-blur-sm',
-          )}
-          onClick={handleShowFeatures}
-        >
+        <Button className={cn('rounded-lg border border-transparent text-components-button-secondary-text', theme === 'dark' && 'border-black/5 bg-white/10 backdrop-blur-sm')} onClick={handleShowFeatures}>
           <span className="i-ri-apps-2-add-line mr-1 h-4 w-4 text-components-button-secondary-text" />
           {t('common.features', { ns: 'workflow' })}
         </Button>
       )}
-      <AppPublisher
-        {...{
-          publishedAt,
-          draftUpdatedAt,
-          disabled: nodesReadOnly || !hasWorkflowNodes,
-          toolPublished,
-          inputs: variables,
-          outputs: endVariables,
-          onRefreshData: handleToolConfigureUpdate,
-          onPublish,
-          onToggle: onPublisherToggle,
-          workflowToolAvailable: lastPublishedHasUserInput,
-          crossAxisOffset: 4,
-          missingStartNode: !startNode,
-          hasTriggerNode,
-          startNodeLimitExceeded,
-          publishDisabled: !hasWorkflowNodes || startNodeLimitExceeded,
-          publishLoading: isPublishing,
-          hasHumanInputNode,
-        }}
+      <AppPublisher {...{
+        publishedAt,
+        draftUpdatedAt,
+        disabled: nodesReadOnly || !hasWorkflowNodes,
+        toolPublished,
+        inputs: variables,
+        outputs: endVariables,
+        onRefreshData: handleToolConfigureUpdate,
+        onPublish,
+        onToggle: onPublisherToggle,
+        workflowToolAvailable: lastPublishedHasUserInput,
+        crossAxisOffset: 4,
+        missingStartNode: !startNode,
+        hasTriggerNode,
+        startNodeLimitExceeded,
+        publishDisabled: !hasWorkflowNodes || startNodeLimitExceeded,
+        publishLoading: isPublishing,
+        hasHumanInputNode,
+      }}
       />
     </>
   )
 }
-
 export default memo(FeaturesTrigger)
diff --git a/web/app/components/workflow-app/hooks/__tests__/use-DSL.spec.ts b/web/app/components/workflow-app/hooks/__tests__/use-DSL.spec.ts
index 8337a5090a..6263f84668 100644
--- a/web/app/components/workflow-app/hooks/__tests__/use-DSL.spec.ts
+++ b/web/app/components/workflow-app/hooks/__tests__/use-DSL.spec.ts
@@ -3,6 +3,19 @@ import { DSL_EXPORT_CHECK } from '@/app/components/workflow/constants'
 import { useDSL } from '../use-DSL'
 
 const mockNotify = vi.fn()
+const mockToast = {
+  success: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'success', message, ...options }),
+  error: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'error', message, ...options }),
+  warning: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'warning', message, ...options }),
+  info: (message: string, options?: Record<string, unknown>) => mockNotify({ type: 'info', message, ...options }),
+  dismiss: vi.fn(),
+  update: vi.fn(),
+  promise: vi.fn(),
+}
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
+}))
 const mockEmit = vi.fn()
 const mockDoSyncWorkflowDraft = vi.fn()
 const mockExportAppConfig = vi.fn()
@@ -17,10 +30,6 @@ let appStoreState: {
   }
 }
 
-vi.mock('@/app/components/base/toast/context', () => ({
-  useToastContext: () => ({ notify: mockNotify }),
-}))
-
 vi.mock('@/context/event-emitter', () => ({
   useEventEmitterContextContext: () => ({
     eventEmitter: {
diff --git a/web/app/components/workflow-app/hooks/use-DSL.ts b/web/app/components/workflow-app/hooks/use-DSL.ts
index 04ea96d557..1e66abedf3 100644
--- a/web/app/components/workflow-app/hooks/use-DSL.ts
+++ b/web/app/components/workflow-app/hooks/use-DSL.ts
@@ -1,13 +1,8 @@
-import {
-  useCallback,
-  useState,
-} from 'react'
+import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import { useToastContext } from '@/app/components/base/toast/context'
-import {
-  DSL_EXPORT_CHECK,
-} from '@/app/components/workflow/constants'
+import { toast } from '@/app/components/base/ui/toast'
+import { DSL_EXPORT_CHECK } from '@/app/components/workflow/constants'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { exportAppBundle, exportAppConfig } from '@/service/apps'
 import { fetchWorkflowDraft } from '@/service/workflow'
@@ -16,24 +11,18 @@ import { useNodesSyncDraft } from './use-nodes-sync-draft'
 
 export const useDSL = () => {
   const { t } = useTranslation()
-  const { notify } = useToastContext()
   const { eventEmitter } = useEventEmitterContextContext()
   const [exporting, setExporting] = useState(false)
   const { doSyncWorkflowDraft } = useNodesSyncDraft()
-
   const appDetail = useAppStore(s => s.appDetail)
-
   const handleExportDSL = useCallback(async (include = false, workflowId?: string, sandboxed = false) => {
     if (!appDetail)
       return
-
     if (exporting)
       return
-
     try {
       setExporting(true)
       await doSyncWorkflowDraft()
-
       if (sandboxed) {
         await exportAppBundle({
           appID: appDetail.id,
@@ -52,13 +41,12 @@ export const useDSL = () => {
       }
     }
     catch {
-      notify({ type: 'error', message: t('exportFailed', { ns: 'app' }) })
+      toast.error(t('exportFailed', { ns: 'app' }))
     }
     finally {
       setExporting(false)
     }
-  }, [appDetail, notify, t, doSyncWorkflowDraft, exporting])
-
+  }, [appDetail, t, doSyncWorkflowDraft, exporting])
   const exportCheck = useCallback(async () => {
     if (!appDetail)
       return
@@ -79,10 +67,9 @@ export const useDSL = () => {
       } as any)
     }
     catch {
-      notify({ type: 'error', message: t('exportFailed', { ns: 'app' }) })
+      toast.error(t('exportFailed', { ns: 'app' }))
     }
-  }, [appDetail, eventEmitter, handleExportDSL, notify, t])
-
+  }, [appDetail, eventEmitter, handleExportDSL, t])
   return {
     exportCheck,
     handleExportDSL,
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index b02e16e373..cfb70797de 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -473,6 +473,7 @@ export const Workflow: FC<WorkflowProps> = memo(({
   })
 
   // Prevent browser zoom interactions from hijacking gestures meant for the workflow canvas
+
   useEffect(() => {
     const preventBrowserZoom = (event: WheelEvent) => {
       if (!isCommentPreviewHovering && !isCommentInputActive)
diff --git a/web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts b/web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts
index 4d2211600e..b75e64f96c 100644
--- a/web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts
+++ b/web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts
@@ -3,8 +3,8 @@ import type { FlowType } from '@/types/common'
 import type { NodeRunResult, NodeTracing } from '@/types/workflow'
 import { unionBy } from 'es-toolkit/compat'
 import { noop } from 'es-toolkit/function'
-
 import { produce } from 'immer'
+
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
diff --git a/web/app/components/workflow/nodes/trigger-webhook/panel.tsx b/web/app/components/workflow/nodes/trigger-webhook/panel.tsx
index 192f8f4187..4066d61053 100644
--- a/web/app/components/workflow/nodes/trigger-webhook/panel.tsx
+++ b/web/app/components/workflow/nodes/trigger-webhook/panel.tsx
@@ -1,8 +1,8 @@
 import type { FC } from 'react'
 import type { HttpMethod, WebhookTriggerNodeType } from './types'
 import type { NodePanelProps } from '@/app/components/workflow/types'
-
 import copy from 'copy-to-clipboard'
+
 import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
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 511940d142..75a5a36fd0 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
@@ -1,113 +1,74 @@
-import {
-  TOGGLE_LINK_COMMAND,
-} from '@lexical/link'
+import { TOGGLE_LINK_COMMAND } from '@lexical/link'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
-import {
-  mergeRegister,
-} from '@lexical/utils'
+import { mergeRegister } from '@lexical/utils'
 import { escape } from 'es-toolkit/string'
-import {
-  CLICK_COMMAND,
-  COMMAND_PRIORITY_LOW,
-} from 'lexical'
-import {
-  useCallback,
-  useEffect,
-} from 'react'
+import { CLICK_COMMAND, COMMAND_PRIORITY_LOW } from 'lexical'
+import { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useToastContext } from '@/app/components/base/toast/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { useNoteEditorStore } from '../../store'
 import { urlRegExp } from '../../utils'
 
 export const useOpenLink = () => {
   const [editor] = useLexicalComposerContext()
   const noteEditorStore = useNoteEditorStore()
-
   useEffect(() => {
-    return mergeRegister(
-      editor.registerUpdateListener(() => {
-        setTimeout(() => {
-          const {
-            selectedLinkUrl,
-            selectedIsLink,
-            setLinkAnchorElement,
-            setLinkOperatorShow,
-          } = noteEditorStore.getState()
-
-          if (selectedIsLink) {
-            setLinkAnchorElement(true)
-
-            if (selectedLinkUrl)
-              setLinkOperatorShow(true)
-            else
-              setLinkOperatorShow(false)
-          }
-          else {
-            setLinkAnchorElement()
+    return mergeRegister(editor.registerUpdateListener(() => {
+      setTimeout(() => {
+        const { selectedLinkUrl, selectedIsLink, setLinkAnchorElement, setLinkOperatorShow } = noteEditorStore.getState()
+        if (selectedIsLink) {
+          setLinkAnchorElement(true)
+          if (selectedLinkUrl)
+            setLinkOperatorShow(true)
+          else
             setLinkOperatorShow(false)
+        }
+        else {
+          setLinkAnchorElement()
+          setLinkOperatorShow(false)
+        }
+      })
+    }), editor.registerCommand(CLICK_COMMAND, (payload) => {
+      setTimeout(() => {
+        const { selectedLinkUrl, selectedIsLink, setLinkAnchorElement, setLinkOperatorShow } = noteEditorStore.getState()
+        if (selectedIsLink) {
+          if ((payload.metaKey || payload.ctrlKey) && selectedLinkUrl) {
+            window.open(selectedLinkUrl, '_blank')
+            return true
           }
-        })
-      }),
-      editor.registerCommand(
-        CLICK_COMMAND,
-        (payload) => {
-          setTimeout(() => {
-            const {
-              selectedLinkUrl,
-              selectedIsLink,
-              setLinkAnchorElement,
-              setLinkOperatorShow,
-            } = noteEditorStore.getState()
-
-            if (selectedIsLink) {
-              if ((payload.metaKey || payload.ctrlKey) && selectedLinkUrl) {
-                window.open(selectedLinkUrl, '_blank')
-                return true
-              }
-              setLinkAnchorElement(true)
-
-              if (selectedLinkUrl)
-                setLinkOperatorShow(true)
-              else
-                setLinkOperatorShow(false)
-            }
-            else {
-              setLinkAnchorElement()
-              setLinkOperatorShow(false)
-            }
-          })
-          return false
-        },
-        COMMAND_PRIORITY_LOW,
-      ),
-    )
+          setLinkAnchorElement(true)
+          if (selectedLinkUrl)
+            setLinkOperatorShow(true)
+          else
+            setLinkOperatorShow(false)
+        }
+        else {
+          setLinkAnchorElement()
+          setLinkOperatorShow(false)
+        }
+      })
+      return false
+    }, COMMAND_PRIORITY_LOW))
   }, [editor, noteEditorStore])
 }
-
 export const useLink = () => {
   const { t } = useTranslation()
   const [editor] = useLexicalComposerContext()
   const noteEditorStore = useNoteEditorStore()
-  const { notify } = useToastContext()
-
   const handleSaveLink = useCallback((url: string) => {
     if (url && !urlRegExp.test(url)) {
-      notify({ type: 'error', message: t('nodes.note.editor.invalidUrl', { ns: 'workflow' }) })
+      toast.error(t('nodes.note.editor.invalidUrl', { ns: 'workflow' }))
       return
     }
     editor.dispatchCommand(TOGGLE_LINK_COMMAND, escape(url))
-
     const { setLinkAnchorElement } = noteEditorStore.getState()
     setLinkAnchorElement()
-  }, [editor, noteEditorStore, notify, t])
-
+  }, [editor, noteEditorStore, t])
   const handleUnlink = useCallback(() => {
     editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)
-
     const { setLinkAnchorElement } = noteEditorStore.getState()
     setLinkAnchorElement()
   }, [editor, noteEditorStore])
-
   return {
     handleSaveLink,
     handleUnlink,
diff --git a/web/app/components/workflow/panel/debug-and-preview/hooks/use-chat-message-sender.spec.ts b/web/app/components/workflow/panel/debug-and-preview/hooks/use-chat-message-sender.spec.ts
index 28918de42a..95206901a2 100644
--- a/web/app/components/workflow/panel/debug-and-preview/hooks/use-chat-message-sender.spec.ts
+++ b/web/app/components/workflow/panel/debug-and-preview/hooks/use-chat-message-sender.spec.ts
@@ -76,10 +76,18 @@ vi.mock('react-i18next', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
-  useToastContext: () => ({
-    notify: vi.fn(),
-  }),
+const mockToast = Object.assign(vi.fn(), {
+  success: vi.fn(),
+  error: vi.fn(),
+  warning: vi.fn(),
+  info: vi.fn(),
+  dismiss: vi.fn(),
+  update: vi.fn(),
+  promise: vi.fn(),
+})
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
 }))
 
 vi.mock('@/service/base', () => ({
diff --git a/web/app/components/workflow/skill/hooks/file-tree/dnd/use-file-drop.ts b/web/app/components/workflow/skill/hooks/file-tree/dnd/use-file-drop.ts
index af58b0d492..f6ec93e29f 100644
--- a/web/app/components/workflow/skill/hooks/file-tree/dnd/use-file-drop.ts
+++ b/web/app/components/workflow/skill/hooks/file-tree/dnd/use-file-drop.ts
@@ -1,9 +1,9 @@
 'use client'
 
+import { useCallback } from 'react'
 // Base drag-and-drop handler for file uploads
 // Used by use-root-file-drop and use-folder-file-drop
 
-import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { toast } from '@/app/components/base/ui/toast'
diff --git a/web/app/components/workflow/skill/hooks/file-tree/operations/use-modify-operations.ts b/web/app/components/workflow/skill/hooks/file-tree/operations/use-modify-operations.ts
index 0afe042aa2..505b60a9ad 100644
--- a/web/app/components/workflow/skill/hooks/file-tree/operations/use-modify-operations.ts
+++ b/web/app/components/workflow/skill/hooks/file-tree/operations/use-modify-operations.ts
@@ -1,8 +1,8 @@
 'use client'
 
+import type { NodeApi, TreeApi } from 'react-arborist'
 // Handles file/folder rename and delete operations
 
-import type { NodeApi, TreeApi } from 'react-arborist'
 import type { StoreApi } from 'zustand'
 import type { TreeNodeData } from '../../../type'
 import type { SkillEditorSliceShape } from '@/app/components/workflow/store/workflow/skill-editor/types'
diff --git a/web/app/components/workflow/skill/hooks/file-tree/operations/use-node-move.ts b/web/app/components/workflow/skill/hooks/file-tree/operations/use-node-move.ts
index 2354d070f6..d22f9de871 100644
--- a/web/app/components/workflow/skill/hooks/file-tree/operations/use-node-move.ts
+++ b/web/app/components/workflow/skill/hooks/file-tree/operations/use-node-move.ts
@@ -1,9 +1,9 @@
 'use client'
 
+import { useCallback } from 'react'
 // Internal tree node move handler - API execution logic only
 // Drag state syncing is handled by react-arborist + TreeNode useEffect
 
-import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { toast } from '@/app/components/base/ui/toast'
diff --git a/web/app/components/workflow/skill/hooks/file-tree/operations/use-node-reorder.ts b/web/app/components/workflow/skill/hooks/file-tree/operations/use-node-reorder.ts
index ad366fdea4..2950487124 100644
--- a/web/app/components/workflow/skill/hooks/file-tree/operations/use-node-reorder.ts
+++ b/web/app/components/workflow/skill/hooks/file-tree/operations/use-node-reorder.ts
@@ -1,8 +1,8 @@
 'use client'
 
+import { useCallback } from 'react'
 // Internal tree node reorder handler - API execution logic only
 
-import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { toast } from '@/app/components/base/ui/toast'
diff --git a/web/app/components/workflow/variable-inspect/__tests__/value-content-sections.spec.tsx b/web/app/components/workflow/variable-inspect/__tests__/value-content-sections.spec.tsx
index 1960576605..bc09379e1a 100644
--- a/web/app/components/workflow/variable-inspect/__tests__/value-content-sections.spec.tsx
+++ b/web/app/components/workflow/variable-inspect/__tests__/value-content-sections.spec.tsx
@@ -1,7 +1,6 @@
 import type { FileUploadConfigResponse } from '@/models/common'
 import type { VarInInspect } from '@/types/workflow'
 import { fireEvent, render, screen } from '@testing-library/react'
-import { ToastContext } from '@/app/components/base/toast/context'
 import { VarType } from '@/app/components/workflow/types'
 import { VarInInspectType } from '@/types/workflow'
 import {
@@ -12,6 +11,20 @@ import {
   TextEditorSection,
 } from '../value-content-sections'
 
+const mockToast = Object.assign(vi.fn(), {
+  success: vi.fn(),
+  error: vi.fn(),
+  warning: vi.fn(),
+  info: vi.fn(),
+  dismiss: vi.fn(),
+  update: vi.fn(),
+  promise: vi.fn(),
+})
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: mockToast,
+}))
+
 vi.mock('@/app/components/workflow/nodes/llm/components/json-schema-config-modal/schema-editor', () => ({
   default: ({ schema, onUpdate }: { schema: string, onUpdate: (value: string) => void }) => (
     <textarea data-testid="schema-editor" value={schema} onChange={event => onUpdate(event.target.value)} />
@@ -127,15 +140,13 @@ describe('value-content sections', () => {
 
   it('should render the file editor section', () => {
     render(
-      <ToastContext.Provider value={{ notify: vi.fn(), close: vi.fn() }}>
-        <FileEditorSection
-          currentVar={createVar({ name: 'files', value_type: VarType.file })}
-          fileValue={[]}
-          fileUploadConfig={createFileUploadConfig()}
-          textEditorDisabled={false}
-          onChange={vi.fn()}
-        />
-      </ToastContext.Provider>,
+      <FileEditorSection
+        currentVar={createVar({ name: 'files', value_type: VarType.file })}
+        fileValue={[]}
+        fileUploadConfig={createFileUploadConfig()}
+        textEditorDisabled={false}
+        onChange={vi.fn()}
+      />,
     )
 
     expect(screen.getAllByRole('button').length).toBeGreaterThan(0)
diff --git a/web/app/education-apply/education-apply-page.tsx b/web/app/education-apply/education-apply-page.tsx
index 19ef26814d..212cc2d4b7 100644
--- a/web/app/education-apply/education-apply-page.tsx
+++ b/web/app/education-apply/education-apply-page.tsx
@@ -8,7 +8,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/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { EDUCATION_VERIFYING_LOCALSTORAGE_ITEM } from '@/app/education-apply/constants'
 import { useDocLink } from '@/context/i18n'
 import { useProviderContext } from '@/context/provider-context'
@@ -39,7 +39,6 @@ const EducationApplyAge = () => {
   const [modalShow, setShowModal] = useState<undefined | { title: string, desc: string, onConfirm?: () => void }>(undefined)
   const { onPlanInfoChanged } = useProviderContext()
   const updateEducationStatus = useInvalidateEducationStatus()
-  const { notify } = useToastContext()
   const router = useRouter()
   const docLink = useDocLink()
 
@@ -67,10 +66,7 @@ const EducationApplyAge = () => {
         })
       }
       else {
-        notify({
-          type: 'error',
-          message: t('submitError', { ns: 'education' }),
-        })
+        toast.error(t('submitError', { ns: 'education' }))
       }
     })
   }
diff --git a/web/app/init/InitPasswordPopup.tsx b/web/app/init/InitPasswordPopup.tsx
index d2ec3c7e2b..007c1475a5 100644
--- a/web/app/init/InitPasswordPopup.tsx
+++ b/web/app/init/InitPasswordPopup.tsx
@@ -3,12 +3,12 @@ import type { InitValidateStatusResponse } from '@/models/common'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
+import { toast } from '@/app/components/base/ui/toast'
 import useDocumentTitle from '@/hooks/use-document-title'
 import { useRouter } from '@/next/navigation'
 import { fetchInitValidateStatus, initValidate } from '@/service/common'
 import { basePath } from '@/utils/var'
 import Loading from '../components/base/loading'
-import Toast from '../components/base/toast'
 
 const InitPasswordPopup = () => {
   useDocumentTitle('')
@@ -32,11 +32,7 @@ const InitPasswordPopup = () => {
       }
     }
     catch (e: any) {
-      Toast.notify({
-        type: 'error',
-        message: e.message,
-        duration: 5000,
-      })
+      toast.error(e.message)
       setLoading(false)
     }
   }
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 98cce27491..03107f5d15 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -6,7 +6,6 @@ import GlobalPublicStoreProvider from '@/context/global-public-context'
 import { TanstackQueryInitializer } from '@/context/query-client'
 import { getDatasetMap } from '@/env'
 import { getLocaleOnServer } from '@/i18n-config/server'
-import { ToastProvider } from './components/base/toast'
 import { ToastHost } from './components/base/ui/toast'
 import { TooltipProvider } from './components/base/ui/tooltip'
 import PartnerStackCookieRecorder from './components/billing/partner-stack/cookie-recorder'
@@ -69,13 +68,11 @@ const LocaleLayout = async ({
                   <I18nServerProvider>
                     <ToastHost timeout={5000} limit={3} />
                     <PartnerStackCookieRecorder />
-                    <ToastProvider>
-                      <GlobalPublicStoreProvider>
-                        <TooltipProvider delay={300} closeDelay={200}>
-                          {children}
-                        </TooltipProvider>
-                      </GlobalPublicStoreProvider>
-                    </ToastProvider>
+                    <GlobalPublicStoreProvider>
+                      <TooltipProvider delay={300} closeDelay={200}>
+                        {children}
+                      </TooltipProvider>
+                    </GlobalPublicStoreProvider>
                   </I18nServerProvider>
                 </TanstackQueryInitializer>
               </NuqsAdapter>
diff --git a/web/app/signin/invite-settings/page.tsx b/web/app/signin/invite-settings/page.tsx
index ac7a7191f8..3cc03eb648 100644
--- a/web/app/signin/invite-settings/page.tsx
+++ b/web/app/signin/invite-settings/page.tsx
@@ -8,7 +8,7 @@ import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Loading from '@/app/components/base/loading'
 import { SimpleSelect } from '@/app/components/base/select'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { LICENSE_LINK } from '@/constants/link'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { setLocaleOnClient } from '@/i18n-config'
@@ -41,7 +41,7 @@ export default function InviteSettingsPage() {
   const handleActivate = useCallback(async () => {
     try {
       if (!name) {
-        Toast.notify({ type: 'error', message: t('enterYourName', { ns: 'login' }) })
+        toast.error(t('enterYourName', { ns: 'login' }))
         return
       }
       const res = await activateMember({
diff --git a/web/app/signin/one-more-step.tsx b/web/app/signin/one-more-step.tsx
index 9363d960bf..d8c334ea20 100644
--- a/web/app/signin/one-more-step.tsx
+++ b/web/app/signin/one-more-step.tsx
@@ -4,8 +4,8 @@ import { useReducer } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import { SimpleSelect } from '@/app/components/base/select'
-import Toast from '@/app/components/base/toast'
 import Tooltip from '@/app/components/base/tooltip'
+import { toast } from '@/app/components/base/ui/toast'
 import { LICENSE_LINK } from '@/constants/link'
 import { languages, LanguagesSupported } from '@/i18n-config/language'
 import Link from '@/next/link'
@@ -70,7 +70,7 @@ const OneMoreStep = () => {
     }
     catch (error: any) {
       if (error && error.status === 400)
-        Toast.notify({ type: 'error', message: t('invalidInvitationCode', { ns: 'login' }) })
+        toast.error(t('invalidInvitationCode', { ns: 'login' }))
       dispatch({ type: 'failed', payload: null })
     }
   }
diff --git a/web/docs/overlay-migration.md b/web/docs/overlay-migration.md
index 253d4c5bcd..a13a7c3430 100644
--- a/web/docs/overlay-migration.md
+++ b/web/docs/overlay-migration.md
@@ -13,7 +13,6 @@ This document tracks the migration away from legacy overlay APIs.
   - `@/app/components/base/popover`
   - `@/app/components/base/dropdown`
   - `@/app/components/base/dialog`
-  - `@/app/components/base/toast` (including `context`)
 - Replacement primitives:
   - `@/app/components/base/ui/tooltip`
   - `@/app/components/base/ui/dropdown-menu`
@@ -22,7 +21,6 @@ This document tracks the migration away from legacy overlay APIs.
   - `@/app/components/base/ui/dialog`
   - `@/app/components/base/ui/alert-dialog`
   - `@/app/components/base/ui/select`
-  - `@/app/components/base/ui/toast`
 - Tracking issue: <https://github.com/langgenius/dify/issues/32767>
 
 ## ESLint policy
@@ -44,13 +42,6 @@ This document tracks the migration away from legacy overlay APIs.
    - Remove remaining allowlist entries.
    - Remove legacy overlay implementations when import count reaches zero.
 
-## Toast migration strategy
-
-- During migration, `@/app/components/base/toast` and `@/app/components/base/ui/toast` may coexist.
-- All new toast usage must go through `@/app/components/base/ui/toast`.
-- When a file with legacy toast usage is touched, prefer migrating that call site in the same change; full-repo toast cleanup is not required in one PR.
-- `@/app/components/base/ui/toast` is the design-system stack toast host. Legacy `ToastContext`, `ToastProvider`, anchored toast behavior, and ad-hoc mount patterns stay in `base/toast` until their call sites are migrated away.
-
 ## Allowlist maintenance
 
 - After each migration batch, run:
@@ -79,16 +70,16 @@ portal to `document.body` with explicit z-index values:
 | Legacy PortalToFollowElem callers | up to `z-[1001]` | various business components                  |
 | **New UI primitives**             | **`z-[1002]`**   | `base/ui/*` (Popover, Dialog, Tooltip, etc.) |
 | Legacy Modal (highPriority)       | `z-[1100]`       | `base/modal` (`highPriority={true}`)         |
-| Toast (legacy + new)              | `z-[1101]`       | `base/toast`, `base/ui/toast`                |
+| Toast                             | `z-[1101]`       | `base/ui/toast`                              |
 
 `z-[1002]` sits above all common legacy overlays, so new primitives always
 render on top without needing per-call-site z-index hacks. Among themselves,
 new primitives share the same z-index and rely on **DOM order** for stacking
 (later portal = on top).
 
-Toast intentionally stays one layer above the remaining legacy `highPriority`
-modal path (`z-[1100]`) so notifications keep their current visibility without
-falling back to `z-[9999]`.
+Toast stays one layer above the remaining legacy `highPriority` modal path
+(`z-[1100]`) so notifications keep their current visibility without falling
+back to `z-[9999]`.
 
 ### Rules
 
diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json
index 96a5378119..d83144e35c 100644
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@@ -1,9 +1,4 @@
 {
-  ".storybook/preview.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "__tests__/check-i18n.test.ts": {
     "regexp/no-unused-capturing-group": {
       "count": 1
@@ -81,11 +76,6 @@
       "count": 1
     }
   },
-  "app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/long-time-range-picker.tsx": {
     "no-restricted-imports": {
       "count": 2
@@ -114,14 +104,9 @@
       "count": 1
     }
   },
-  "app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx": {
     "no-restricted-imports": {
-      "count": 3
+      "count": 2
     }
   },
   "app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx": {
@@ -159,25 +144,23 @@
       "count": 2
     }
   },
-  "app/account/(commonLayout)/account-page/AvatarWithEdit.tsx": {
-    "no-restricted-imports": {
-      "count": 2
-    }
-  },
   "app/account/(commonLayout)/account-page/email-change-modal.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
     },
-    "no-restricted-imports": {
-      "count": 2
+    "style/indent": {
+      "count": 175
     },
     "ts/no-explicit-any": {
       "count": 5
+    },
+    "unused-imports/no-unused-imports": {
+      "count": 1
     }
   },
   "app/account/(commonLayout)/account-page/index.tsx": {
-    "no-restricted-imports": {
-      "count": 2
+    "style/indent": {
+      "count": 93
     },
     "ts/no-explicit-any": {
       "count": 1
@@ -185,7 +168,7 @@
   },
   "app/account/(commonLayout)/delete-account/components/feed-back.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     }
   },
   "app/account/(commonLayout)/delete-account/components/verify-email.tsx": {
@@ -216,11 +199,6 @@
       "count": 4
     }
   },
-  "app/components/app-sidebar/app-info/use-app-info-actions.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/app-sidebar/app-sidebar-dropdown.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -233,7 +211,7 @@
   },
   "app/components/app-sidebar/dataset-info/dropdown.tsx": {
     "no-restricted-imports": {
-      "count": 3
+      "count": 2
     },
     "ts/no-explicit-any": {
       "count": 1
@@ -257,11 +235,6 @@
       "count": 1
     }
   },
-  "app/components/app/annotation/add-annotation-modal/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/app/annotation/batch-action.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -272,17 +245,12 @@
       "count": 2
     }
   },
-  "app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/app/annotation/batch-add-annotation-modal/index.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
     },
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     },
     "react-refresh/only-export-components": {
       "count": 1
@@ -317,7 +285,7 @@
   },
   "app/components/app/annotation/edit-annotation-modal/index.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     }
   },
   "app/components/app/annotation/header-opts/index.spec.tsx": {
@@ -345,9 +313,6 @@
     }
   },
   "app/components/app/annotation/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react/set-state-in-effect": {
       "count": 1
     },
@@ -389,11 +354,6 @@
       "count": 1
     }
   },
-  "app/components/app/app-access-control/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/app/app-access-control/specific-groups-or-members.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -409,7 +369,7 @@
   },
   "app/components/app/app-publisher/index.tsx": {
     "no-restricted-imports": {
-      "count": 3
+      "count": 2
     },
     "ts/no-explicit-any": {
       "count": 1
@@ -422,7 +382,7 @@
   },
   "app/components/app/app-publisher/version-info-modal.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     }
   },
   "app/components/app/configuration/base/var-highlight/index.tsx": {
@@ -431,8 +391,8 @@
     }
   },
   "app/components/app/configuration/config-prompt/advanced-prompt-input.tsx": {
-    "no-restricted-imports": {
-      "count": 2
+    "perfectionist/sort-imports": {
+      "count": 1
     },
     "ts/no-explicit-any": {
       "count": 2
@@ -452,8 +412,8 @@
     }
   },
   "app/components/app/configuration/config-prompt/simple-prompt-input.tsx": {
-    "no-restricted-imports": {
-      "count": 2
+    "perfectionist/sort-imports": {
+      "count": 1
     },
     "ts/no-explicit-any": {
       "count": 3
@@ -461,7 +421,7 @@
   },
   "app/components/app/configuration/config-var/config-modal/index.tsx": {
     "no-restricted-imports": {
-      "count": 3
+      "count": 2
     },
     "ts/no-explicit-any": {
       "count": 6
@@ -474,7 +434,7 @@
   },
   "app/components/app/configuration/config-var/index.tsx": {
     "no-restricted-imports": {
-      "count": 3
+      "count": 2
     },
     "react-refresh/only-export-components": {
       "count": 1
@@ -555,11 +515,6 @@
       "count": 4
     }
   },
-  "app/components/app/configuration/config/agent/prompt-editor.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/app/configuration/config/assistant-type-picker/index.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -570,7 +525,7 @@
   },
   "app/components/app/configuration/config/automatic/get-automatic-res.tsx": {
     "no-restricted-imports": {
-      "count": 3
+      "count": 2
     },
     "react/set-state-in-effect": {
       "count": 4
@@ -594,11 +549,6 @@
       "count": 1
     }
   },
-  "app/components/app/configuration/config/automatic/result.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/app/configuration/config/automatic/types.ts": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -611,7 +561,7 @@
   },
   "app/components/app/configuration/config/code-generator/get-code-generator-res.tsx": {
     "no-restricted-imports": {
-      "count": 3
+      "count": 2
     },
     "react/set-state-in-effect": {
       "count": 4
@@ -667,7 +617,7 @@
   },
   "app/components/app/configuration/dataset-config/params-config/config-content.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     }
   },
   "app/components/app/configuration/dataset-config/params-config/index.tsx": {
@@ -689,7 +639,7 @@
     }
   },
   "app/components/app/configuration/dataset-config/settings-modal/index.tsx": {
-    "no-restricted-imports": {
+    "perfectionist/sort-imports": {
       "count": 1
     },
     "react/set-state-in-effect": {
@@ -758,8 +708,8 @@
     }
   },
   "app/components/app/configuration/debug/index.tsx": {
-    "no-restricted-imports": {
-      "count": 2
+    "perfectionist/sort-imports": {
+      "count": 1
     },
     "react/set-state-in-effect": {
       "count": 2
@@ -775,7 +725,10 @@
   },
   "app/components/app/configuration/index.tsx": {
     "no-restricted-imports": {
-      "count": 3
+      "count": 1
+    },
+    "perfectionist/sort-imports": {
+      "count": 1
     },
     "react/set-state-in-effect": {
       "count": 1
@@ -785,6 +738,9 @@
     },
     "ts/no-explicit-any": {
       "count": 24
+    },
+    "unused-imports/no-unused-imports": {
+      "count": 1
     }
   },
   "app/components/app/configuration/prompt-value-panel/index.spec.tsx": {
@@ -803,16 +759,16 @@
     }
   },
   "app/components/app/configuration/tools/external-data-tool-modal.tsx": {
-    "no-restricted-imports": {
-      "count": 3
+    "perfectionist/sort-imports": {
+      "count": 1
     },
     "ts/no-explicit-any": {
       "count": 2
     }
   },
   "app/components/app/configuration/tools/index.tsx": {
-    "no-restricted-imports": {
-      "count": 2
+    "perfectionist/sort-imports": {
+      "count": 1
     }
   },
   "app/components/app/create-app-dialog/app-card/index.spec.tsx": {
@@ -842,7 +798,7 @@
     "erasable-syntax-only/enums": {
       "count": 1
     },
-    "no-restricted-imports": {
+    "perfectionist/sort-imports": {
       "count": 2
     },
     "react-refresh/only-export-components": {
@@ -850,16 +806,14 @@
     },
     "react/set-state-in-effect": {
       "count": 2
-    }
-  },
-  "app/components/app/create-from-dsl-modal/uploader.tsx": {
-    "no-restricted-imports": {
+    },
+    "unused-imports/no-unused-imports": {
       "count": 1
     }
   },
   "app/components/app/duplicate-modal/index.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     }
   },
   "app/components/app/log/filter.tsx": {
@@ -874,7 +828,10 @@
   },
   "app/components/app/log/list.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
+    },
+    "perfectionist/sort-imports": {
+      "count": 1
     },
     "react/set-state-in-effect": {
       "count": 6
@@ -930,7 +887,10 @@
   },
   "app/components/app/overview/settings/index.tsx": {
     "no-restricted-imports": {
-      "count": 4
+      "count": 3
+    },
+    "perfectionist/sort-imports": {
+      "count": 1
     },
     "react/set-state-in-effect": {
       "count": 3
@@ -946,16 +906,19 @@
   },
   "app/components/app/switch-app-modal/index.tsx": {
     "no-restricted-imports": {
-      "count": 3
+      "count": 2
+    },
+    "perfectionist/sort-imports": {
+      "count": 1
     },
     "react/set-state-in-effect": {
       "count": 1
+    },
+    "unused-imports/no-unused-imports": {
+      "count": 1
     }
   },
   "app/components/app/text-generate/item/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react-refresh/only-export-components": {
       "count": 1
     },
@@ -971,11 +934,6 @@
       "count": 2
     }
   },
-  "app/components/app/text-generate/saved-items/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/app/type-selector/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -1007,17 +965,8 @@
     }
   },
   "app/components/apps/app-card.tsx": {
-    "no-restricted-imports": {
-      "count": 5
-    },
-    "react/component-hook-factories": {
-      "count": 1
-    },
-    "react/no-nested-component-definitions": {
-      "count": 1
-    },
-    "react/set-state-in-effect": {
-      "count": 1
+    "perfectionist/sort-imports": {
+      "count": 2
     }
   },
   "app/components/apps/list.tsx": {
@@ -1048,9 +997,6 @@
     }
   },
   "app/components/base/agent-log-modal/detail.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -1059,9 +1005,6 @@
     "no-console": {
       "count": 1
     },
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -1092,9 +1035,6 @@
     }
   },
   "app/components/base/audio-btn/audio.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "node/prefer-global/buffer": {
       "count": 1
     },
@@ -1108,9 +1048,6 @@
     }
   },
   "app/components/base/audio-gallery/AudioPlayer.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -1216,9 +1153,6 @@
     }
   },
   "app/components/base/chat/chat-with-history/hooks.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react/set-state-in-effect": {
       "count": 4
     },
@@ -1277,7 +1211,7 @@
   },
   "app/components/base/chat/chat/answer/operation.tsx": {
     "no-restricted-imports": {
-      "count": 3
+      "count": 2
     }
   },
   "app/components/base/chat/chat/answer/workflow-process.tsx": {
@@ -1286,17 +1220,11 @@
     }
   },
   "app/components/base/chat/chat/chat-input-area/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
   },
   "app/components/base/chat/chat/check-input-forms-hooks.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -1310,9 +1238,6 @@
     }
   },
   "app/components/base/chat/chat/hooks.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react/set-state-in-effect": {
       "count": 2
     },
@@ -1354,9 +1279,6 @@
     }
   },
   "app/components/base/chat/embedded-chatbot/hooks.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react-hooks-extra/no-direct-set-state-in-use-effect": {
       "count": 3
     },
@@ -1466,12 +1388,12 @@
   },
   "app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-button.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     }
   },
   "app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     }
   },
   "app/components/base/features/new-feature-panel/annotation-reply/config-param.tsx": {
@@ -1532,7 +1454,7 @@
   },
   "app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     },
     "ts/no-explicit-any": {
       "count": 2
@@ -1569,20 +1491,7 @@
       "count": 1
     }
   },
-  "app/components/base/file-uploader/file-uploader-in-attachment/index.stories.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "app/components/base/file-uploader/file-uploader-in-chat-input/index.stories.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/base/file-uploader/hooks.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
@@ -1692,9 +1601,6 @@
     }
   },
   "app/components/base/form/hooks/use-check-validated.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -1736,9 +1642,6 @@
     }
   },
   "app/components/base/image-uploader/hooks.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 4
     }
@@ -1755,7 +1658,7 @@
   },
   "app/components/base/image-uploader/image-preview.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     },
     "ts/no-explicit-any": {
       "count": 1
@@ -2181,32 +2084,14 @@
       "count": 1
     }
   },
-  "app/components/base/tag-input/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "app/components/base/tag-management/__tests__/selector.spec.tsx": {
-    "react-hooks/rules-of-hooks": {
-      "count": 1
-    },
-    "react/rules-of-hooks": {
-      "count": 1
-    }
-  },
-  "app/components/base/tag-management/index.stories.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/base/tag-management/index.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     }
   },
   "app/components/base/tag-management/panel.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     }
   },
   "app/components/base/tag-management/selector.tsx": {
@@ -2216,7 +2101,7 @@
   },
   "app/components/base/tag-management/tag-item-editor.tsx": {
     "no-restricted-imports": {
-      "count": 3
+      "count": 2
     }
   },
   "app/components/base/tag-management/tag-remove-modal.tsx": {
@@ -2225,9 +2110,6 @@
     }
   },
   "app/components/base/text-generation/hooks.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -2327,11 +2209,6 @@
       "count": 1
     }
   },
-  "app/components/custom/custom-web-app-brand/hooks/use-web-app-brand.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/datasets/common/document-picker/index.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -2385,9 +2262,6 @@
   "app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/hooks/use-dsl-import.ts": {
     "erasable-syntax-only/enums": {
       "count": 1
-    },
-    "no-restricted-imports": {
-      "count": 1
     }
   },
   "app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx": {
@@ -2395,11 +2269,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/datasets/create-from-pipeline/list/template-card/actions.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -2427,7 +2296,7 @@
   },
   "app/components/datasets/create/empty-dataset-creation-modal/index.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     }
   },
   "app/components/datasets/create/file-preview/index.tsx": {
@@ -2435,11 +2304,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/create/file-uploader/hooks/use-file-upload.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/datasets/create/notion-page-preview/index.tsx": {
     "react/set-state-in-effect": {
       "count": 1
@@ -2460,11 +2324,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/create/step-two/hooks/use-document-creation.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/datasets/create/step-two/hooks/use-indexing-config.ts": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -2474,9 +2333,6 @@
     }
   },
   "app/components/datasets/create/step-two/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react-hooks/exhaustive-deps": {
       "count": 1
     }
@@ -2516,9 +2372,6 @@
     "no-console": {
       "count": 1
     },
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react/set-state-in-effect": {
       "count": 1
     },
@@ -2538,9 +2391,6 @@
     "no-console": {
       "count": 1
     },
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react/set-state-in-effect": {
       "count": 1
     },
@@ -2560,9 +2410,6 @@
     "no-console": {
       "count": 1
     },
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react/set-state-in-effect": {
       "count": 1
     },
@@ -2587,7 +2434,7 @@
   },
   "app/components/datasets/documents/components/operations.tsx": {
     "no-restricted-imports": {
-      "count": 4
+      "count": 3
     }
   },
   "app/components/datasets/documents/components/rename-modal.tsx": {
@@ -2690,11 +2537,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/datasets/documents/detail/batch-modal/index.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -2733,21 +2575,11 @@
       "count": 1
     }
   },
-  "app/components/datasets/documents/detail/completed/hooks/use-child-segment-data.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/datasets/documents/detail/completed/hooks/use-search-filter.ts": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "app/components/datasets/documents/detail/completed/hooks/use-segment-list-data.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/datasets/documents/detail/completed/index.tsx": {
     "react-refresh/only-export-components": {
       "count": 1
@@ -2771,16 +2603,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/documents/detail/embedding/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "app/components/datasets/documents/detail/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/datasets/documents/detail/metadata/components/doc-type-selector.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -2792,9 +2614,6 @@
     }
   },
   "app/components/datasets/documents/detail/metadata/hooks/use-metadata-state.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react-hooks-extra/no-direct-set-state-in-use-effect": {
       "count": 4
     },
@@ -2825,12 +2644,12 @@
   },
   "app/components/datasets/documents/status-item/index.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     }
   },
   "app/components/datasets/external-api/external-api-modal/index.tsx": {
     "no-restricted-imports": {
-      "count": 4
+      "count": 3
     },
     "react/set-state-in-effect": {
       "count": 1
@@ -2896,11 +2715,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/hit-testing/modify-retrieval-modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/datasets/list/dataset-card/components/dataset-card-footer.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -2933,26 +2747,15 @@
   },
   "app/components/datasets/metadata/edit-metadata-batch/modal.tsx": {
     "no-restricted-imports": {
-      "count": 3
-    }
-  },
-  "app/components/datasets/metadata/hooks/use-batch-edit-document-metadata.ts": {
-    "no-restricted-imports": {
-      "count": 1
+      "count": 2
     }
   },
   "app/components/datasets/metadata/hooks/use-edit-dataset-metadata.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react/set-state-in-effect": {
       "count": 1
     }
   },
   "app/components/datasets/metadata/hooks/use-metadata-document.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -2972,7 +2775,7 @@
   },
   "app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx": {
     "no-restricted-imports": {
-      "count": 4
+      "count": 3
     }
   },
   "app/components/datasets/metadata/metadata-dataset/select-metadata-modal.tsx": {
@@ -2995,7 +2798,7 @@
   },
   "app/components/datasets/rename-modal/index.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     }
   },
   "app/components/datasets/settings/chunk-structure/types.ts": {
@@ -3075,7 +2878,7 @@
   },
   "app/components/explore/create-app-modal/index.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     },
     "ts/no-explicit-any": {
       "count": 1
@@ -3174,9 +2977,6 @@
   "app/components/header/account-dropdown/compliance.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
-    },
-    "no-restricted-imports": {
-      "count": 1
     }
   },
   "app/components/header/account-dropdown/menu-item-content.tsx": {
@@ -3184,11 +2984,6 @@
       "count": 1
     }
   },
-  "app/components/header/account-dropdown/workplace-selector/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/header/account-setting/api-based-extension-page/item.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -3196,7 +2991,7 @@
   },
   "app/components/header/account-setting/api-based-extension-page/modal.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     }
   },
   "app/components/header/account-setting/api-based-extension-page/selector.tsx": {
@@ -3252,12 +3047,7 @@
   },
   "app/components/header/account-setting/language-page/index.tsx": {
     "no-restricted-imports": {
-      "count": 3
-    }
-  },
-  "app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
+      "count": 2
     }
   },
   "app/components/header/account-setting/members-page/invite-modal/index.tsx": {
@@ -3267,7 +3057,7 @@
   },
   "app/components/header/account-setting/members-page/operation/index.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     }
   },
   "app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx": {
@@ -3275,7 +3065,7 @@
       "count": 1
     },
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     },
     "ts/no-explicit-any": {
       "count": 3
@@ -3331,9 +3121,6 @@
     }
   },
   "app/components/header/account-setting/model-provider-page/model-auth/hooks/use-auth.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 6
     }
@@ -3400,11 +3187,6 @@
       "count": 2
     }
   },
-  "app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/use-activate-credential.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -3420,7 +3202,7 @@
   },
   "app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx": {
     "no-restricted-imports": {
-      "count": 3
+      "count": 2
     },
     "react/set-state-in-effect": {
       "count": 1
@@ -3434,16 +3216,6 @@
       "count": 1
     }
   },
-  "app/components/header/account-setting/model-provider-page/provider-added-card/use-change-provider-priority.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "app/components/header/account-setting/plugin-page/SerpapiPlugin.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/header/account-setting/plugin-page/utils.ts": {
     "ts/no-explicit-any": {
       "count": 4
@@ -3549,40 +3321,16 @@
       "count": 2
     }
   },
-  "app/components/plugins/plugin-auth/authorize/api-key-modal.tsx": {
-    "no-restricted-imports": {
-      "count": 2
-    },
-    "ts/no-explicit-any": {
-      "count": 2
-    }
-  },
   "app/components/plugins/plugin-auth/authorize/index.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx": {
-    "no-restricted-imports": {
-      "count": 2
-    },
-    "ts/no-explicit-any": {
-      "count": 2
-    }
-  },
   "app/components/plugins/plugin-auth/authorized-in-node.tsx": {
     "ts/no-explicit-any": {
       "count": 1
     }
   },
-  "app/components/plugins/plugin-auth/authorized/index.tsx": {
-    "no-restricted-imports": {
-      "count": 4
-    },
-    "ts/no-explicit-any": {
-      "count": 2
-    }
-  },
   "app/components/plugins/plugin-auth/authorized/item.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -3591,14 +3339,6 @@
       "count": 1
     }
   },
-  "app/components/plugins/plugin-auth/hooks/use-plugin-auth-action.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    },
-    "ts/no-explicit-any": {
-      "count": 2
-    }
-  },
   "app/components/plugins/plugin-auth/index.tsx": {
     "react-refresh/only-export-components": {
       "count": 3
@@ -3886,11 +3626,6 @@
       "count": 1
     }
   },
-  "app/components/plugins/plugin-page/use-reference-setting.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/plugins/readme-panel/index.tsx": {
     "react/unsupported-syntax": {
       "count": 1
@@ -3932,9 +3667,6 @@
   "app/components/plugins/update-plugin/from-market-place.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
-    },
-    "no-restricted-imports": {
-      "count": 1
     }
   },
   "app/components/rag-pipeline/components/chunk-card-list/types.ts": {
@@ -3944,7 +3676,7 @@
   },
   "app/components/rag-pipeline/components/conversion.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     }
   },
   "app/components/rag-pipeline/components/panel/input-field/editor/form/hidden-fields.tsx": {
@@ -3960,11 +3692,6 @@
       "count": 2
     }
   },
-  "app/components/rag-pipeline/components/panel/input-field/editor/form/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/rag-pipeline/components/panel/input-field/editor/form/initial-fields.tsx": {
     "react/component-hook-factories": {
       "count": 1
@@ -3986,11 +3713,6 @@
       "count": 1
     }
   },
-  "app/components/rag-pipeline/components/panel/input-field/field-list/hooks.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/rag-pipeline/components/panel/input-field/hooks.ts": {
     "react/set-state-in-effect": {
       "count": 1
@@ -4012,9 +3734,6 @@
     }
   },
   "app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/options.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -4061,7 +3780,7 @@
   },
   "app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     }
   },
   "app/components/rag-pipeline/components/rag-pipeline-header/run-mode.tsx": {
@@ -4085,9 +3804,6 @@
     }
   },
   "app/components/rag-pipeline/hooks/use-DSL.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -4117,11 +3833,6 @@
       "count": 1
     }
   },
-  "app/components/rag-pipeline/hooks/use-update-dsl-modal.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/rag-pipeline/store/index.ts": {
     "ts/no-explicit-any": {
       "count": 2
@@ -4132,15 +3843,7 @@
       "count": 1
     }
   },
-  "app/components/share/text-generation/hooks/use-text-generation-app-state.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/share/text-generation/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react/set-state-in-effect": {
       "count": 1
     }
@@ -4164,9 +3867,6 @@
     }
   },
   "app/components/share/text-generation/result/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -4218,9 +3918,6 @@
     }
   },
   "app/components/tools/edit-custom-collection-modal/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react/set-state-in-effect": {
       "count": 4
     },
@@ -4261,11 +3958,6 @@
       "count": 1
     }
   },
-  "app/components/tools/mcp/hooks/use-mcp-modal-form.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/tools/mcp/mcp-server-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -4313,9 +4005,6 @@
     }
   },
   "app/components/tools/setting/build-in/config-credentials.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
@@ -4348,15 +4037,7 @@
       "count": 3
     }
   },
-  "app/components/workflow-app/components/workflow-header/features-trigger.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/workflow-app/hooks/use-DSL.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -6025,11 +5706,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/hooks.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -6447,11 +6123,6 @@
       "count": 1
     }
   },
-  "app/education-apply/education-apply-page.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/education-apply/expire-notice-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -6481,9 +6152,6 @@
     }
   },
   "app/init/InitPasswordPopup.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -6493,11 +6161,6 @@
       "count": 7
     }
   },
-  "app/layout.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/reset-password/layout.tsx": {
     "ts/no-explicit-any": {
       "count": 1
@@ -6515,7 +6178,7 @@
   },
   "app/signin/invite-settings/page.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     }
   },
   "app/signin/layout.tsx": {
@@ -6525,7 +6188,7 @@
   },
   "app/signin/one-more-step.tsx": {
     "no-restricted-imports": {
-      "count": 3
+      "count": 2
     },
     "ts/no-explicit-any": {
       "count": 1
@@ -6594,11 +6257,6 @@
       "count": 1
     }
   },
-  "hooks/use-import-dsl.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "hooks/use-metadata.ts": {
     "ts/no-explicit-any": {
       "count": 1
@@ -6767,9 +6425,6 @@
     }
   },
   "service/base.ts": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
diff --git a/web/eslint.constants.mjs b/web/eslint.constants.mjs
index 9992d94f36..d449042542 100644
--- a/web/eslint.constants.mjs
+++ b/web/eslint.constants.mjs
@@ -80,15 +80,6 @@ export const OVERLAY_RESTRICTED_IMPORT_PATTERNS = [
     ],
     message: 'Deprecated: use @/app/components/base/ui/dialog instead. See issue #32767.',
   },
-  {
-    group: [
-      '**/base/toast',
-      '**/base/toast/index',
-      '**/base/toast/context',
-      '**/base/toast/context/index',
-    ],
-    message: 'Deprecated: use @/app/components/base/ui/toast instead. See issue #32811.',
-  },
 ]
 
 export const OVERLAY_MIGRATION_LEGACY_BASE_FILES = [
diff --git a/web/hooks/use-import-dsl.ts b/web/hooks/use-import-dsl.ts
index 903fd74c5b..6be67c22ac 100644
--- a/web/hooks/use-import-dsl.ts
+++ b/web/hooks/use-import-dsl.ts
@@ -9,7 +9,7 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useToastContext } from '@/app/components/base/toast/context'
+import { toast } from '@/app/components/base/ui/toast'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useSelector } from '@/context/app-context'
@@ -38,7 +38,6 @@ type ResponseCallback = {
 }
 export const useImportDSL = () => {
   const { t } = useTranslation()
-  const { notify } = useToastContext()
   const [isFetching, setIsFetching] = useState(false)
   const { handleCheckPluginDependencies } = usePluginDependencies()
   const isCurrentWorkspaceEditor = useSelector(s => s.isCurrentWorkspaceEditor)
@@ -77,11 +76,15 @@ export const useImportDSL = () => {
         if (!app_id)
           return
 
-        notify({
-          type: status === DSLImportStatus.COMPLETED ? 'success' : 'warning',
-          message: t(status === DSLImportStatus.COMPLETED ? 'newApp.appCreated' : 'newApp.caution', { ns: 'app' }),
-          children: status === DSLImportStatus.COMPLETED_WITH_WARNINGS && t('newApp.appCreateDSLWarning', { ns: 'app' }),
-        })
+        const message = t(status === DSLImportStatus.COMPLETED ? 'newApp.appCreated' : 'newApp.caution', { ns: 'app' })
+        const description = status === DSLImportStatus.COMPLETED_WITH_WARNINGS
+          ? t('newApp.appCreateDSLWarning', { ns: 'app' })
+          : undefined
+
+        if (status === DSLImportStatus.COMPLETED)
+          toast.success(message)
+        else
+          toast.warning(message, { description })
         onSuccess?.()
         localStorage.setItem(NEED_REFRESH_APP_LIST_KEY, '1')
         await handleCheckPluginDependencies(app_id)
@@ -96,18 +99,18 @@ export const useImportDSL = () => {
         onPending?.(response)
       }
       else {
-        notify({ type: 'error', message: t('newApp.appCreateFailed', { ns: 'app' }) })
+        toast.error(t('newApp.appCreateFailed', { ns: 'app' }))
         onFailed?.()
       }
     }
     catch {
-      notify({ type: 'error', message: t('newApp.appCreateFailed', { ns: 'app' }) })
+      toast.error(t('newApp.appCreateFailed', { ns: 'app' }))
       onFailed?.()
     }
     finally {
       setIsFetching(false)
     }
-  }, [t, notify, handleCheckPluginDependencies, isCurrentWorkspaceEditor, push, isFetching])
+  }, [t, handleCheckPluginDependencies, isCurrentWorkspaceEditor, push, isFetching])
 
   const handleImportDSLConfirm = useCallback(async (
     {
@@ -132,27 +135,24 @@ export const useImportDSL = () => {
 
       if (status === DSLImportStatus.COMPLETED) {
         onSuccess?.()
-        notify({
-          type: 'success',
-          message: t('newApp.appCreated', { ns: 'app' }),
-        })
+        toast.success(t('newApp.appCreated', { ns: 'app' }))
         await handleCheckPluginDependencies(app_id)
         localStorage.setItem(NEED_REFRESH_APP_LIST_KEY, '1')
         getRedirection(isCurrentWorkspaceEditor, { id: app_id!, mode: app_mode }, push)
       }
       else if (status === DSLImportStatus.FAILED) {
-        notify({ type: 'error', message: t('newApp.appCreateFailed', { ns: 'app' }) })
+        toast.error(t('newApp.appCreateFailed', { ns: 'app' }))
         onFailed?.()
       }
     }
     catch {
-      notify({ type: 'error', message: t('newApp.appCreateFailed', { ns: 'app' }) })
+      toast.error(t('newApp.appCreateFailed', { ns: 'app' }))
       onFailed?.()
     }
     finally {
       setIsFetching(false)
     }
-  }, [t, notify, handleCheckPluginDependencies, isCurrentWorkspaceEditor, push, isFetching])
+  }, [t, handleCheckPluginDependencies, isCurrentWorkspaceEditor, push, isFetching])
 
   return {
     handleImportDSL,
diff --git a/web/service/base.ts b/web/service/base.ts
index c26ec4533a..f1aed53cdd 100644
--- a/web/service/base.ts
+++ b/web/service/base.ts
@@ -28,7 +28,7 @@ import type {
   WorkflowStartedResponse,
 } from '@/types/workflow'
 import Cookies from 'js-cookie'
-import Toast from '@/app/components/base/toast'
+import { toast } from '@/app/components/base/ui/toast'
 import { API_PREFIX, CSRF_COOKIE_NAME, CSRF_HEADER_NAME, IS_CE_EDITION, PASSPORT_HEADER_NAME, PUBLIC_API_PREFIX, WEB_APP_SHARE_CODE_HEADER_NAME } from '@/config'
 import { asyncRunSafe } from '@/utils'
 import { basePath } from '@/utils/var'
@@ -604,7 +604,7 @@ export const ssePost = async (
         }
         else {
           res.json().then((data) => {
-            Toast.notify({ type: 'error', message: data.message || 'Server Error' })
+            toast.error(data.message || 'Server Error')
           })
           onError?.('Server Error')
         }
@@ -617,7 +617,7 @@ export const ssePost = async (
             onError?.(moreInfo.errorMessage, moreInfo.errorCode)
             // TypeError: Cannot assign to read only property ... will happen in page leave, so it should be ignored.
             if (moreInfo.errorMessage !== 'AbortError: The user aborted a request.' && !moreInfo.errorMessage.includes('TypeError: Cannot assign to read only property'))
-              Toast.notify({ type: 'error', message: moreInfo.errorMessage })
+              toast.error(moreInfo.errorMessage)
             return
           }
           onData?.(str, isFirstMessage, moreInfo)
@@ -656,7 +656,7 @@ export const ssePost = async (
     })
     .catch((e) => {
       if (e.toString() !== 'AbortError: The user aborted a request.' && !e.toString().errorMessage.includes('TypeError: Cannot assign to read only property'))
-        Toast.notify({ type: 'error', message: e })
+        toast.error(String(e))
       onError?.(e)
     })
 }
@@ -751,7 +751,7 @@ export const sseGet = async (
         }
         else {
           res.json().then((data) => {
-            Toast.notify({ type: 'error', message: data.message || 'Server Error' })
+            toast.error(data.message || 'Server Error')
           })
           onError?.('Server Error')
         }
@@ -764,7 +764,7 @@ export const sseGet = async (
             onError?.(moreInfo.errorMessage, moreInfo.errorCode)
             // TypeError: Cannot assign to read only property ... will happen in page leave, so it should be ignored.
             if (moreInfo.errorMessage !== 'AbortError: The user aborted a request.' && !moreInfo.errorMessage.includes('TypeError: Cannot assign to read only property'))
-              Toast.notify({ type: 'error', message: moreInfo.errorMessage })
+              toast.error(moreInfo.errorMessage)
             return
           }
           onData?.(str, isFirstMessage, moreInfo)
@@ -803,7 +803,7 @@ export const sseGet = async (
     })
     .catch((e) => {
       if (e.toString() !== 'AbortError: The user aborted a request.' && !e.toString().includes('TypeError: Cannot assign to read only property'))
-        Toast.notify({ type: 'error', message: e })
+        toast.error(String(e))
       onError?.(e)
     })
 }
@@ -850,7 +850,7 @@ export const request = async<T>(url: string, options = {}, otherOptions?: IOther
         return Promise.reject(err)
       }
       if (code === 'init_validate_failed' && IS_CE_EDITION && !silent) {
-        Toast.notify({ type: 'error', message, duration: 4000 })
+        toast.error(message, { timeout: 4000 })
         return Promise.reject(err)
       }
       if (code === 'not_init_validated' && IS_CE_EDITION) {
@@ -871,7 +871,7 @@ export const request = async<T>(url: string, options = {}, otherOptions?: IOther
         return Promise.reject(err)
       }
       if (!silent) {
-        Toast.notify({ type: 'error', message })
+        toast.error(message)
         return Promise.reject(err)
       }
       jumpTo(loginUrl)