test: improve Jotai atom test quality and add model-provider atoms tests

Replace dynamic imports with static imports in marketplace atom tests.
Convert type-only and not-toThrow assertions into proper state-change
verifications. Add comprehensive test suite for model-provider-page
atoms covering all four hooks, cross-hook interaction, selectAtom
granularity, and Provider isolation.

api/controllers/service_api/app/annotation.py

@@ -185,4 +185,4 @@ class AnnotationUpdateDeleteApi(Resource):
     def delete(self, app_model: App, annotation_id: str):
         """Delete an annotation."""
         AppAnnotationService.delete_app_annotation(app_model.id, annotation_id)
-        return {"result": "success"}, 204
+        return "", 204

api/controllers/service_api/app/conversation.py

@@ -14,7 +14,6 @@ from controllers.service_api.wraps import FetchUserArg, WhereisUserArg, validate
 from core.app.entities.app_invoke_entities import InvokeFrom
 from extensions.ext_database import db
 from fields.conversation_fields import (
-    ConversationDelete,
     ConversationInfiniteScrollPagination,
     SimpleConversation,
 )
@@ -163,7 +162,7 @@ class ConversationDetailApi(Resource):
             ConversationService.delete(app_model, conversation_id, end_user)
         except services.errors.conversation.ConversationNotExistsError:
             raise NotFound("Conversation Not Exists.")
-        return ConversationDelete(result="success").model_dump(mode="json"), 204
+        return "", 204
 
 
 @service_api_ns.route("/conversations/<uuid:c_id>/name")

api/controllers/service_api/app/workflow.py

@@ -132,6 +132,8 @@ class WorkflowRunDetailApi(Resource):
             app_id=app_model.id,
             run_id=workflow_run_id,
         )
+        if not workflow_run:
+            raise NotFound("Workflow run not found.")
         return workflow_run
 
 

api/migrations/versions/2026_02_26_1336-e288952f2994_add_partial_indexes_on_conversations_.py

@@ -0,0 +1,37 @@
+"""add partial indexes on conversations for app_id with created_at and updated_at
+
+Revision ID: e288952f2994
+Revises: fce013ca180e
+Create Date: 2026-02-26 13:36:45.928922
+
+"""
+from alembic import op
+import sqlalchemy as sa
+
+# revision identifiers, used by Alembic.
+revision = 'e288952f2994'
+down_revision = 'fce013ca180e'
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    with op.batch_alter_table('conversations', schema=None) as batch_op:
+        batch_op.create_index(
+            'conversation_app_created_at_idx',
+            ['app_id', sa.literal_column('created_at DESC')],
+            unique=False,
+            postgresql_where=sa.text('is_deleted IS false'),
+        )
+        batch_op.create_index(
+            'conversation_app_updated_at_idx',
+            ['app_id', sa.literal_column('updated_at DESC')],
+            unique=False,
+            postgresql_where=sa.text('is_deleted IS false'),
+        )
+
+
+def downgrade():
+    with op.batch_alter_table('conversations', schema=None) as batch_op:
+        batch_op.drop_index('conversation_app_updated_at_idx')
+        batch_op.drop_index('conversation_app_created_at_idx')

api/models/model.py

@@ -711,6 +711,18 @@ class Conversation(Base):
     __table_args__ = (
         sa.PrimaryKeyConstraint("id", name="conversation_pkey"),
         sa.Index("conversation_app_from_user_idx", "app_id", "from_source", "from_end_user_id"),
+        sa.Index(
+            "conversation_app_created_at_idx",
+            "app_id",
+            sa.text("created_at DESC"),
+            postgresql_where=sa.text("is_deleted IS false"),
+        ),
+        sa.Index(
+            "conversation_app_updated_at_idx",
+            "app_id",
+            sa.text("updated_at DESC"),
+            postgresql_where=sa.text("is_deleted IS false"),
+        ),
     )
 
     id: Mapped[str] = mapped_column(StringUUID, default=lambda: str(uuid4()))

web/__tests__/billing/pricing-modal-flow.test.tsx

@@ -295,24 +295,7 @@ describe('Pricing Modal Flow', () => {
     })
   })
 
-  // ─── 6. Close Handling ───────────────────────────────────────────────────
-  describe('Close handling', () => {
-    it('should call onCancel when pressing ESC key', () => {
-      render(<Pricing onCancel={onCancel} />)
-
-      // ahooks useKeyPress listens on document for keydown events
-      document.dispatchEvent(new KeyboardEvent('keydown', {
-        key: 'Escape',
-        code: 'Escape',
-        keyCode: 27,
-        bubbles: true,
-      }))
-
-      expect(onCancel).toHaveBeenCalledTimes(1)
-    })
-  })
-
-  // ─── 7. Pricing URL ─────────────────────────────────────────────────────
+  // ─── 6. Pricing URL ─────────────────────────────────────────────────────
   describe('Pricing page URL', () => {
     it('should render pricing link with correct URL', () => {
       render(<Pricing onCancel={onCancel} />)

web/__tests__/rag-pipeline/dsl-export-import-flow.test.ts

@@ -19,7 +19,7 @@ vi.mock('react-i18next', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({ notify: mockNotify }),
 }))
 

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view.tsx

@@ -12,7 +12,7 @@ import AppCard from '@/app/components/app/overview/app-card'
 import TriggerCard from '@/app/components/app/overview/trigger-card'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import Loading from '@/app/components/base/loading'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import MCPServiceCard from '@/app/components/tools/mcp/mcp-service-card'
 import { isTriggerNode } from '@/app/components/workflow/types'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'

web/app/(commonLayout)/layout.tsx

@@ -9,9 +9,9 @@ import Header from '@/app/components/header'
 import HeaderWrapper from '@/app/components/header/header-wrapper'
 import ReadmePanel from '@/app/components/plugins/readme-panel'
 import { AppContextProvider } from '@/context/app-context-provider'
-import { EventEmitterContextProvider } from '@/context/event-emitter'
-import { ModalContextProvider } from '@/context/modal-context'
-import { ProviderContextProvider } from '@/context/provider-context'
+import { EventEmitterContextProvider } from '@/context/event-emitter-provider'
+import { ModalContextProvider } from '@/context/modal-context-provider'
+import { ProviderContextProvider } from '@/context/provider-context-provider'
 import PartnerStack from '../components/billing/partner-stack'
 import Splash from '../components/splash'
 import RoleRouteGuard from './role-route-guard'

web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx

@@ -16,7 +16,7 @@ import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import { useLocalFileUploader } from '@/app/components/base/image-uploader/hooks'
 import Modal from '@/app/components/base/modal'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { DISABLE_UPLOAD_IMAGE_AS_ICON } from '@/config'
 import { updateUserProfile } from '@/service/common'
 

web/app/account/(commonLayout)/account-page/email-change-modal.tsx

@@ -9,7 +9,7 @@ import { useContext } from 'use-context-selector'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import {
   checkEmailExisted,
   resetEmail,

web/app/account/(commonLayout)/account-page/index.tsx

@@ -12,7 +12,7 @@ import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import PremiumBadge from '@/app/components/base/premium-badge'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import Collapse from '@/app/components/header/account-setting/collapse'
 import { IS_CE_EDITION, validPassword } from '@/config'
 import { useAppContext } from '@/context/app-context'

web/app/account/(commonLayout)/layout.tsx

@@ -5,9 +5,9 @@ import AmplitudeProvider from '@/app/components/base/amplitude'
 import GA, { GaType } from '@/app/components/base/ga'
 import HeaderWrapper from '@/app/components/header/header-wrapper'
 import { AppContextProvider } from '@/context/app-context-provider'
-import { EventEmitterContextProvider } from '@/context/event-emitter'
-import { ModalContextProvider } from '@/context/modal-context'
-import { ProviderContextProvider } from '@/context/provider-context'
+import { EventEmitterContextProvider } from '@/context/event-emitter-provider'
+import { ModalContextProvider } from '@/context/modal-context-provider'
+import { ProviderContextProvider } from '@/context/provider-context-provider'
 import Header from './header'
 
 const Layout = ({ children }: { children: ReactNode }) => {

web/app/components/app-sidebar/app-info/__tests__/use-app-info-actions.spec.ts

@@ -42,7 +42,7 @@ vi.mock('@/app/components/app/store', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   ToastContext: {},
 }))
 

web/app/components/app-sidebar/app-info/use-app-info-actions.ts

@@ -6,7 +6,7 @@ import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useProviderContext } from '@/context/provider-context'
 import { copyApp, deleteApp, exportAppConfig, updateAppInfo } from '@/service/apps'

web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.spec.tsx

@@ -1,7 +1,7 @@
 import type { Props } from './csv-uploader'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import CSVUploader from './csv-uploader'
 
 describe('CSVUploader', () => {

web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import Button from '@/app/components/base/button'
 import { Csv as CSVIcon } from '@/app/components/base/icons/src/public/files'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { cn } from '@/utils/classnames'
 
 export type Props = {

web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx

@@ -20,7 +20,7 @@ import {
 } from '@/app/components/base/icons/src/vender/line/files'
 import PromptEditor from '@/app/components/base/prompt-editor'
 import { INSERT_VARIABLE_VALUE_BLOCK_COMMAND } from '@/app/components/base/prompt-editor/plugins/variable-block'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import Tooltip from '@/app/components/base/tooltip'
 import ConfigContext from '@/context/debug-configuration'
 import { useEventEmitterContextContext } from '@/context/event-emitter'

web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx

@@ -17,7 +17,7 @@ import { useFeaturesStore } from '@/app/components/base/features/hooks'
 import PromptEditor from '@/app/components/base/prompt-editor'
 import { PROMPT_EDITOR_UPDATE_VALUE_BY_EVENT_EMITTER } from '@/app/components/base/prompt-editor/plugins/update-block'
 import { INSERT_VARIABLE_VALUE_BLOCK_COMMAND } from '@/app/components/base/prompt-editor/plugins/variable-block'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import Tooltip from '@/app/components/base/tooltip'
 import ConfigContext from '@/context/debug-configuration'
 import { useEventEmitterContextContext } from '@/context/event-emitter'

web/app/components/app/configuration/config/agent/prompt-editor.tsx

@@ -12,7 +12,7 @@ import {
   CopyCheck,
 } from '@/app/components/base/icons/src/vender/line/files'
 import PromptEditor from '@/app/components/base/prompt-editor'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import ConfigContext from '@/context/debug-configuration'
 import { useModalContext } from '@/context/modal-context'
 import { cn } from '@/utils/classnames'

web/app/components/app/configuration/dataset-config/settings-modal/index.spec.tsx

@@ -3,7 +3,7 @@ import type { DataSet } from '@/models/datasets'
 import type { RetrievalConfig } from '@/types/app'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { IndexingType } from '@/app/components/datasets/create/step-two'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'

web/app/components/app/configuration/dataset-config/settings-modal/index.tsx

@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { isReRankModelSelected } from '@/app/components/datasets/common/check-rerank-model'
 import { IndexingType } from '@/app/components/datasets/create/step-two'
 import IndexMethod from '@/app/components/datasets/settings/index-method'

web/app/components/app/configuration/debug/debug-with-multiple-model/context-provider.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import type { DebugWithMultipleModelContextType } from './context'
+import { DebugWithMultipleModelContext } from './context'
+
+type DebugWithMultipleModelContextProviderProps = {
+  children: ReactNode
+} & DebugWithMultipleModelContextType
+export const DebugWithMultipleModelContextProvider = ({
+  children,
+  onMultipleModelConfigsChange,
+  multipleModelConfigs,
+  onDebugWithMultipleModelChange,
+  checkCanSend,
+}: DebugWithMultipleModelContextProviderProps) => {
+  return (
+    <DebugWithMultipleModelContext.Provider value={{
+      onMultipleModelConfigsChange,
+      multipleModelConfigs,
+      onDebugWithMultipleModelChange,
+      checkCanSend,
+    }}
+    >
+      {children}
+    </DebugWithMultipleModelContext.Provider>
+  )
+}

web/app/components/app/configuration/debug/debug-with-multiple-model/context.spec.tsx

@@ -1,10 +1,8 @@
 import type { ModelAndParameter } from '../types'
 import type { DebugWithMultipleModelContextType } from './context'
 import { render, screen } from '@testing-library/react'
-import {
-  DebugWithMultipleModelContextProvider,
-  useDebugWithMultipleModelContext,
-} from './context'
+import { useDebugWithMultipleModelContext } from './context'
+import { DebugWithMultipleModelContextProvider } from './context-provider'
 
 const createModelAndParameter = (overrides: Partial<ModelAndParameter> = {}): ModelAndParameter => ({
   id: 'model-1',

web/app/components/app/configuration/debug/debug-with-multiple-model/context.ts

@@ -10,7 +10,8 @@ export type DebugWithMultipleModelContextType = {
   onDebugWithMultipleModelChange: (singleModelConfig: ModelAndParameter) => void
   checkCanSend?: () => boolean
 }
-const DebugWithMultipleModelContext = createContext<DebugWithMultipleModelContextType>({
+
+export const DebugWithMultipleModelContext = createContext<DebugWithMultipleModelContextType>({
   multipleModelConfigs: [],
   onMultipleModelConfigsChange: noop,
   onDebugWithMultipleModelChange: noop,
@@ -18,27 +19,4 @@ const DebugWithMultipleModelContext = createContext<DebugWithMultipleModelContex
 
 export const useDebugWithMultipleModelContext = () => useContext(DebugWithMultipleModelContext)
 
-type DebugWithMultipleModelContextProviderProps = {
-  children: React.ReactNode
-} & DebugWithMultipleModelContextType
-export const DebugWithMultipleModelContextProvider = ({
-  children,
-  onMultipleModelConfigsChange,
-  multipleModelConfigs,
-  onDebugWithMultipleModelChange,
-  checkCanSend,
-}: DebugWithMultipleModelContextProviderProps) => {
-  return (
-    <DebugWithMultipleModelContext.Provider value={{
-      onMultipleModelConfigsChange,
-      multipleModelConfigs,
-      onDebugWithMultipleModelChange,
-      checkCanSend,
-    }}
-    >
-      {children}
-    </DebugWithMultipleModelContext.Provider>
-  )
-}
-
 export default DebugWithMultipleModelContext

web/app/components/app/configuration/debug/debug-with-multiple-model/index.tsx

@@ -14,10 +14,8 @@ import { useDebugConfigurationContext } from '@/context/debug-configuration'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { AppModeEnum } from '@/types/app'
 import { APP_CHAT_WITH_MULTIPLE_MODEL } from '../types'
-import {
-  DebugWithMultipleModelContextProvider,
-  useDebugWithMultipleModelContext,
-} from './context'
+import { useDebugWithMultipleModelContext } from './context'
+import { DebugWithMultipleModelContextProvider } from './context-provider'
 import DebugItem from './debug-item'
 
 const DebugWithMultipleModel = () => {

web/app/components/app/configuration/debug/debug-with-single-model/index.spec.tsx

@@ -387,7 +387,7 @@ vi.mock('@/context/event-emitter', () => ({
 }))
 
 // Mock toast context
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: vi.fn(() => ({
     notify: vi.fn(),
   })),

web/app/components/app/configuration/debug/index.tsx

@@ -29,7 +29,7 @@ import Button from '@/app/components/base/button'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import { RefreshCcw01 } from '@/app/components/base/icons/src/vender/line/arrows'
 import PromptLogModal from '@/app/components/base/prompt-log-modal'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import TooltipPlus from '@/app/components/base/tooltip'
 import { ModelFeatureEnum, ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useDefaultModel } from '@/app/components/header/account-setting/model-provider-page/hooks'

web/app/components/app/configuration/index.tsx

@@ -49,7 +49,8 @@ import { FeaturesProvider } from '@/app/components/base/features'
 import NewFeaturePanel from '@/app/components/base/features/new-feature-panel'
 import Loading from '@/app/components/base/loading'
 import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
-import Toast, { ToastContext } from '@/app/components/base/toast'
+import Toast from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { ModelFeatureEnum, ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import {
@@ -66,7 +67,7 @@ import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import { ANNOTATION_DEFAULT, DATASET_DEFAULT, DEFAULT_AGENT_SETTING, DEFAULT_CHAT_PROMPT_CONFIG, DEFAULT_COMPLETION_PROMPT_CONFIG } from '@/config'
 import { useAppContext } from '@/context/app-context'
 import ConfigContext from '@/context/debug-configuration'
-import { MittProvider } from '@/context/mitt-context'
+import { MittProvider } from '@/context/mitt-context-provider'
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'

web/app/components/app/configuration/tools/external-data-tool-modal.tsx

@@ -13,7 +13,7 @@ import FormGeneration from '@/app/components/base/features/new-feature-panel/mod
 import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
 import Modal from '@/app/components/base/modal'
 import { SimpleSelect } from '@/app/components/base/select'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import ApiBasedExtensionSelector from '@/app/components/header/account-setting/api-based-extension-page/selector'
 import { useDocLink, useLocale } from '@/context/i18n'
 import { LanguagesSupported } from '@/i18n-config/language'

web/app/components/app/configuration/tools/index.tsx

@@ -15,7 +15,7 @@ import {
 } from '@/app/components/base/icons/src/vender/line/general'
 import { Tool03 } from '@/app/components/base/icons/src/vender/solid/general'
 import Switch from '@/app/components/base/switch'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import Tooltip from '@/app/components/base/tooltip'
 import ConfigContext from '@/context/debug-configuration'
 import { useModalContext } from '@/context/modal-context'

web/app/components/app/create-app-modal/index.spec.tsx

@@ -4,7 +4,7 @@ import { useRouter } from 'next/navigation'
 import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
 import { trackEvent } from '@/app/components/base/amplitude'
 
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'

web/app/components/app/create-app-modal/index.tsx

@@ -17,7 +17,7 @@ import FullScreenModal from '@/app/components/base/fullscreen-modal'
 import { BubbleTextMod, ChatBot, ListSparkle, Logic } from '@/app/components/base/icons/src/vender/solid/communication'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'

web/app/components/app/create-from-dsl-modal/index.tsx

@@ -12,7 +12,7 @@ import { trackEvent } from '@/app/components/base/amplitude'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'

web/app/components/app/create-from-dsl-modal/uploader.tsx

@@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import ActionButton from '@/app/components/base/action-button'
 import { Yaml as YamlIcon } from '@/app/components/base/icons/src/public/files'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { cn } from '@/utils/classnames'
 import { formatFileSize } from '@/utils/format'
 

web/app/components/app/log/list.tsx

@@ -31,7 +31,7 @@ import Drawer from '@/app/components/base/drawer'
 import { getProcessedFilesFromResponse } from '@/app/components/base/file-uploader/utils'
 import Loading from '@/app/components/base/loading'
 import MessageLogModal from '@/app/components/base/message-log-modal'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import Tooltip from '@/app/components/base/tooltip'
 import { addFileInfos, sortAgentSorts } from '@/app/components/tools/utils'
 import { WorkflowContextProvider } from '@/app/components/workflow/context'

web/app/components/app/overview/settings/index.spec.tsx

@@ -59,16 +59,12 @@ vi.mock('@/context/modal-context', () => ({
   useModalContext: () => buildModalContext(),
 }))
 
-vi.mock('@/app/components/base/toast', async () => {
-  const actual = await vi.importActual<typeof import('@/app/components/base/toast')>('@/app/components/base/toast')
-  return {
-    ...actual,
-    useToastContext: () => ({
-      notify: mockNotify,
-      close: vi.fn(),
-    }),
-  }
-})
+vi.mock('@/app/components/base/toast/context', () => ({
+  useToastContext: () => ({
+    notify: mockNotify,
+    close: vi.fn(),
+  }),
+}))
 
 vi.mock('@/context/i18n', async () => {
   const actual = await vi.importActual<typeof import('@/context/i18n')>('@/context/i18n')

web/app/components/app/overview/settings/index.tsx

@@ -20,7 +20,7 @@ import PremiumBadge from '@/app/components/base/premium-badge'
 import { SimpleSelect } from '@/app/components/base/select'
 import Switch from '@/app/components/base/switch'
 import Textarea from '@/app/components/base/textarea'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import Tooltip from '@/app/components/base/tooltip'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { useModalContext } from '@/context/modal-context'

web/app/components/app/switch-app-modal/index.spec.tsx

@@ -3,7 +3,7 @@ import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { Plan } from '@/app/components/billing/type'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { AppModeEnum } from '@/types/app'

web/app/components/app/switch-app-modal/index.tsx

@@ -15,7 +15,7 @@ import Confirm from '@/app/components/base/confirm'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'

web/app/components/apps/app-card.tsx

@@ -18,7 +18,8 @@ import AppIcon from '@/app/components/base/app-icon'
 import Divider from '@/app/components/base/divider'
 import CustomPopover from '@/app/components/base/popover'
 import TagSelector from '@/app/components/base/tag-management/selector'
-import Toast, { ToastContext } from '@/app/components/base/toast'
+import Toast from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import Tooltip from '@/app/components/base/tooltip'
 import {
   AlertDialog,

web/app/components/base/agent-log-modal/__tests__/detail.spec.tsx

@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react'
 import type { IChatItem } from '@/app/components/base/chat/chat/type'
 import type { AgentLogDetailResponse } from '@/models/log'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { fetchAgentLogDetail } from '@/service/log'
 import AgentLogDetail from '../detail'
 

web/app/components/base/agent-log-modal/__tests__/index.spec.tsx

@@ -1,7 +1,7 @@
 import type { IChatItem } from '@/app/components/base/chat/chat/type'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { useClickAway } from 'ahooks'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { fetchAgentLogDetail } from '@/service/log'
 import AgentLogModal from '../index'
 

web/app/components/base/agent-log-modal/detail.tsx

@@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import Loading from '@/app/components/base/loading'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { fetchAgentLogDetail } from '@/service/log'
 import { cn } from '@/utils/classnames'
 import ResultPanel from './result'

web/app/components/base/chat/chat-with-history/hooks.tsx

@@ -23,7 +23,7 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { getProcessedFilesFromResponse } from '@/app/components/base/file-uploader/utils'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { InputVarType } from '@/app/components/workflow/types'
 import { useWebAppStore } from '@/context/web-app-context'
 import { useAppFavicon } from '@/hooks/use-app-favicon'

web/app/components/base/chat/chat/__tests__/context.spec.tsx

@@ -3,7 +3,8 @@ import type { ChatContextValue } from '../context'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { vi } from 'vitest'
-import { ChatContextProvider, useChatContext } from '../context'
+import { useChatContext } from '../context'
+import { ChatContextProvider } from '../context-provider'
 
 const TestConsumer = () => {
   const context = useChatContext()

web/app/components/base/chat/chat/__tests__/question.spec.tsx

@@ -9,7 +9,7 @@ import { vi } from 'vitest'
 
 import Toast from '../../../toast'
 import { ThemeBuilder } from '../../embedded-chatbot/theme/theme-context'
-import { ChatContextProvider } from '../context'
+import { ChatContextProvider } from '../context-provider'
 import Question from '../question'
 
 // Global Mocks

web/app/components/base/chat/chat/chat-input-area/__tests__/index.spec.tsx

@@ -91,15 +91,9 @@ vi.mock('@/app/components/base/features/hooks', () => ({
 // ---------------------------------------------------------------------------
 // Toast context
 // ---------------------------------------------------------------------------
-vi.mock('@/app/components/base/toast', async () => {
-  const actual = await vi.importActual<typeof import('@/app/components/base/toast')>(
-    '@/app/components/base/toast',
-  )
-  return {
-    ...actual,
-    useToastContext: () => ({ notify: mockNotify }),
-  }
-})
+vi.mock('@/app/components/base/toast/context', () => ({
+  useToastContext: () => ({ notify: mockNotify, close: vi.fn() }),
+}))
 
 // ---------------------------------------------------------------------------
 // Internal layout hook – controls single/multi-line textarea mode

web/app/components/base/chat/chat/chat-input-area/index.tsx

@@ -22,7 +22,7 @@ import {
   FileContextProvider,
   useFileStore,
 } from '@/app/components/base/file-uploader/store'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import VoiceInput from '@/app/components/base/voice-input'
 import { TransferMethod } from '@/types/app'
 import { cn } from '@/utils/classnames'

web/app/components/base/chat/chat/check-input-forms-hooks.ts

@@ -1,7 +1,7 @@
 import type { InputForm } from './type'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { InputVarType } from '@/app/components/workflow/types'
 import { TransferMethod } from '@/types/app'
 

web/app/components/base/chat/chat/context-provider.tsx

@@ -1,30 +1,8 @@
 'use client'
 
 import type { ReactNode } from 'react'
-import type { ChatProps } from './index'
-import { createContext, useContext } from 'use-context-selector'
-
-export type ChatContextValue = Pick<ChatProps, 'config'
-  | 'isResponding'
-  | 'chatList'
-  | 'showPromptLog'
-  | 'questionIcon'
-  | 'answerIcon'
-  | 'onSend'
-  | 'onRegenerate'
-  | 'onAnnotationEdited'
-  | 'onAnnotationAdded'
-  | 'onAnnotationRemoved'
-  | 'disableFeedback'
-  | 'onFeedback'
-  | 'getHumanInputNodeData'> & {
-    readonly?: boolean
-  }
-
-const ChatContext = createContext<ChatContextValue>({
-  chatList: [],
-  readonly: false,
-})
+import type { ChatContextValue } from './context'
+import { ChatContext } from './context'
 
 type ChatContextProviderProps = {
   children: ReactNode
@@ -71,7 +49,3 @@ export const ChatContextProvider = ({
     </ChatContext.Provider>
   )
 }
-
-export const useChatContext = () => useContext(ChatContext)
-
-export default ChatContext

web/app/components/base/chat/chat/context.ts

@@ -0,0 +1,30 @@
+'use client'
+
+import type { ChatProps } from './index'
+import { createContext, useContext } from 'use-context-selector'
+
+export type ChatContextValue = Pick<ChatProps, 'config'
+  | 'isResponding'
+  | 'chatList'
+  | 'showPromptLog'
+  | 'questionIcon'
+  | 'answerIcon'
+  | 'onSend'
+  | 'onRegenerate'
+  | 'onAnnotationEdited'
+  | 'onAnnotationAdded'
+  | 'onAnnotationRemoved'
+  | 'disableFeedback'
+  | 'onFeedback'
+  | 'getHumanInputNodeData'> & {
+    readonly?: boolean
+  }
+
+export const ChatContext = createContext<ChatContextValue>({
+  chatList: [],
+  readonly: false,
+})
+
+export const useChatContext = () => useContext(ChatContext)
+
+export default ChatContext

web/app/components/base/chat/chat/hooks.ts

@@ -30,7 +30,7 @@ import {
   getProcessedFiles,
   getProcessedFilesFromResponse,
 } from '@/app/components/base/file-uploader/utils'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { NodeRunningStatus, WorkflowRunningStatus } from '@/app/components/workflow/types'
 import useTimestamp from '@/hooks/use-timestamp'
 import {

web/app/components/base/chat/chat/index.tsx

@@ -30,7 +30,7 @@ import PromptLogModal from '@/app/components/base/prompt-log-modal'
 import { cn } from '@/utils/classnames'
 import Answer from './answer'
 import ChatInputArea from './chat-input-area'
-import { ChatContextProvider } from './context'
+import { ChatContextProvider } from './context-provider'
 import Question from './question'
 import TryToAsk from './try-to-ask'
 

web/app/components/base/chat/embedded-chatbot/hooks.tsx

@@ -21,7 +21,7 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { addFileInfos, sortAgentSorts } from '@/app/components/tools/utils'
 import { InputVarType } from '@/app/components/workflow/types'
 import { useWebAppStore } from '@/context/web-app-context'

web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/content.spec.tsx

@@ -16,7 +16,7 @@ vi.mock('next/navigation', () => ({
   useSearchParams: () => new URLSearchParams(),
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({ notify: vi.fn() }),
 }))
 

web/app/components/base/features/new-feature-panel/moderation/__tests__/moderation-setting-modal.spec.tsx

@@ -3,7 +3,7 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import ModerationSettingModal from '../moderation-setting-modal'
 
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({ notify: mockNotify }),
 }))
 

web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import Modal from '@/app/components/base/modal'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import ApiBasedExtensionSelector from '@/app/components/header/account-setting/api-based-extension-page/selector'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { CustomConfigurationStatusEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'

web/app/components/base/file-uploader/__tests__/hooks.spec.ts

@@ -11,7 +11,7 @@ vi.mock('next/navigation', () => ({
 }))
 
 // Exception: hook requires toast context that isn't available without a provider wrapper
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({
     notify: mockNotify,
   }),

web/app/components/base/file-uploader/hooks.ts

@@ -18,7 +18,7 @@ import {
   MAX_FILE_UPLOAD_LIMIT,
   VIDEO_SIZE_LIMIT,
 } from '@/app/components/base/file-uploader/constants'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import { uploadRemoteFileInfo } from '@/service/common'
 import { TransferMethod } from '@/types/app'

web/app/components/base/form/hooks/__tests__/use-check-validated.spec.ts

@@ -5,7 +5,7 @@ import { useCheckValidated } from '../use-check-validated'
 
 const mockNotify = vi.fn()
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({
     notify: mockNotify,
   }),

web/app/components/base/form/hooks/use-check-validated.ts

@@ -1,7 +1,7 @@
 import type { AnyFormApi } from '@tanstack/react-form'
 import type { FormSchema } from '@/app/components/base/form/types'
 import { useCallback } from 'react'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 
 export const useCheckValidated = (form: AnyFormApi, FormSchemas: FormSchema[]) => {
   const { notify } = useToastContext()

web/app/components/base/icons/assets/vender/line/financeAndECommerce/credits-coin.svg

@@ -0,0 +1,4 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 5C2 3.44487 2.58482 1.98537 3.54004 1.04932C2.17681 1.34034 1 2.90001 1 5C1 7.09996 2.17685 8.65912 3.54004 8.9502C2.58496 8.01413 2 6.55501 2 5ZM3 5C3 7.33338 4.4528 9 6 9C7.5472 9 9 7.33338 9 5C9 2.66664 7.5472 1 6 1C4.4528 1 3 2.66664 3 5ZM10 5C10 7.63722 8.3188 10 6 10H4C1.6812 10 0 7.63722 0 5C0 2.3628 1.6812 0 4 0H6C8.3188 0 10 2.3628 10 5Z" fill="#676F83"/>
+<path d="M6.71519 4.09259L6.45385 3.18667C6.42141 3.07421 6.34037 3 6.25 3C6.15963 3 6.07859 3.07421 6.04615 3.18667L5.78481 4.09259C5.74675 4.22464 5.66849 4.32899 5.56945 4.37978L4.88999 4.7282C4.80565 4.77146 4.75 4.87951 4.75 5C4.75 5.12049 4.80565 5.22854 4.88999 5.2718L5.56945 5.62022C5.66849 5.67101 5.74675 5.77536 5.78481 5.90741L6.04615 6.81333C6.07859 6.92579 6.15963 7 6.25 7C6.34037 7 6.42141 6.92579 6.45385 6.81333L6.71519 5.90741C6.75325 5.77536 6.83151 5.67101 6.93055 5.62022L7.61001 5.2718C7.69435 5.22854 7.75 5.12049 7.75 5C7.75 4.87951 7.69435 4.77146 7.61001 4.7282L6.93055 4.37978C6.83151 4.32899 6.75325 4.22464 6.71519 4.09259Z" fill="#676F83"/>
+</svg>

web/app/components/base/icons/assets/vender/solid/general/arrow-down-round-fill.svg

@@ -1,5 +1,5 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="arrow-down-round-fill">
-<path id="Vector" d="M6.02913 6.23572C5.08582 6.23572 4.56482 7.33027 5.15967 8.06239L7.13093 10.4885C7.57922 11.0403 8.42149 11.0403 8.86986 10.4885L10.8411 8.06239C11.4359 7.33027 10.9149 6.23572 9.97158 6.23572H6.02913Z" fill="currentColor"/>
+<path id="Vector" d="M6.02913 6.23572C5.08582 6.23572 4.56482 7.33027 5.15967 8.06239L7.13093 10.4885C7.57922 11.0403 8.42149 11.0403 8.86986 10.4885L10.8411 8.06239C11.4359 7.33027 10.9149 6.23572 9.97158 6.23572H6.02913Z" fill="#101828"/>
 </g>
 </svg>

web/app/components/base/icons/src/vender/line/financeAndECommerce/CreditsCoin.json

@@ -0,0 +1,35 @@
+{
+  "icon": {
+    "type": "element",
+    "isRootNode": true,
+    "name": "svg",
+    "attributes": {
+      "width": "10",
+      "height": "10",
+      "viewBox": "0 0 10 10",
+      "fill": "none",
+      "xmlns": "http://www.w3.org/2000/svg"
+    },
+    "children": [
+      {
+        "type": "element",
+        "name": "path",
+        "attributes": {
+          "d": "M2 5C2 3.44487 2.58482 1.98537 3.54004 1.04932C2.17681 1.34034 1 2.90001 1 5C1 7.09996 2.17685 8.65912 3.54004 8.9502C2.58496 8.01413 2 6.55501 2 5ZM3 5C3 7.33338 4.4528 9 6 9C7.5472 9 9 7.33338 9 5C9 2.66664 7.5472 1 6 1C4.4528 1 3 2.66664 3 5ZM10 5C10 7.63722 8.3188 10 6 10H4C1.6812 10 0 7.63722 0 5C0 2.3628 1.6812 0 4 0H6C8.3188 0 10 2.3628 10 5Z",
+          "fill": "currentColor"
+        },
+        "children": []
+      },
+      {
+        "type": "element",
+        "name": "path",
+        "attributes": {
+          "d": "M6.71519 4.09259L6.45385 3.18667C6.42141 3.07421 6.34037 3 6.25 3C6.15963 3 6.07859 3.07421 6.04615 3.18667L5.78481 4.09259C5.74675 4.22464 5.66849 4.32899 5.56945 4.37978L4.88999 4.7282C4.80565 4.77146 4.75 4.87951 4.75 5C4.75 5.12049 4.80565 5.22854 4.88999 5.2718L5.56945 5.62022C5.66849 5.67101 5.74675 5.77536 5.78481 5.90741L6.04615 6.81333C6.07859 6.92579 6.15963 7 6.25 7C6.34037 7 6.42141 6.92579 6.45385 6.81333L6.71519 5.90741C6.75325 5.77536 6.83151 5.67101 6.93055 5.62022L7.61001 5.2718C7.69435 5.22854 7.75 5.12049 7.75 5C7.75 4.87951 7.69435 4.77146 7.61001 4.7282L6.93055 4.37978C6.83151 4.32899 6.75325 4.22464 6.71519 4.09259Z",
+          "fill": "currentColor"
+        },
+        "children": []
+      }
+    ]
+  },
+  "name": "CreditsCoin"
+}

web/app/components/base/icons/src/vender/line/financeAndECommerce/CreditsCoin.tsx

@@ -0,0 +1,20 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import type { IconData } from '@/app/components/base/icons/IconBase'
+import * as React from 'react'
+import IconBase from '@/app/components/base/icons/IconBase'
+import data from './CreditsCoin.json'
+
+const Icon = (
+  {
+    ref,
+    ...props
+  }: React.SVGProps<SVGSVGElement> & {
+    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
+  },
+) => <IconBase {...props} ref={ref} data={data as IconData} />
+
+Icon.displayName = 'CreditsCoin'
+
+export default Icon

web/app/components/base/icons/src/vender/line/financeAndECommerce/index.ts

@@ -1,5 +1,6 @@
 export { default as Balance } from './Balance'
 export { default as CoinsStacked01 } from './CoinsStacked01'
+export { default as CreditsCoin } from './CreditsCoin'
 export { default as GoldCoin } from './GoldCoin'
 export { default as ReceiptList } from './ReceiptList'
 export { default as Tag01 } from './Tag01'

web/app/components/base/image-uploader/__tests__/hooks.spec.ts

@@ -5,7 +5,7 @@ import { Resolution, TransferMethod } from '@/types/app'
 import { useClipboardUploader, useDraggableUploader, useImageFiles, useLocalFileUploader } from '../hooks'
 
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({ notify: mockNotify }),
 }))
 

web/app/components/base/image-uploader/hooks.ts

@@ -3,7 +3,7 @@ import type { ImageFile, VisionSettings } from '@/types/app'
 import { useParams } from 'next/navigation'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { ALLOW_FILE_EXTENSIONS, TransferMethod } from '@/types/app'
 import { getImageUploadErrorMessage, imageUpload } from './utils'
 

web/app/components/base/markdown-blocks/__tests__/button.spec.tsx

@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event'
 // markdown-button.spec.tsx
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { ChatContextProvider } from '@/app/components/base/chat/chat/context'
+import { ChatContextProvider } from '@/app/components/base/chat/chat/context-provider'
 
 import MarkdownButton from '../button'
 

web/app/components/base/markdown-blocks/__tests__/think-block.spec.tsx

@@ -1,6 +1,6 @@
 import { act, render, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { ChatContextProvider } from '@/app/components/base/chat/chat/context'
+import { ChatContextProvider } from '@/app/components/base/chat/chat/context-provider'
 import ThinkBlock from '../think-block'
 
 // Mock react-i18next

web/app/components/base/markdown-blocks/think-block.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { useState } from 'react'
-import { ChatContextProvider } from '@/app/components/base/chat/chat/context'
+import { ChatContextProvider } from '@/app/components/base/chat/chat/context-provider'
 import ThinkBlock from './think-block'
 
 const THOUGHT_TEXT = `

web/app/components/base/prompt-editor/plugins/component-picker-block/__tests__/index.spec.tsx

@@ -28,7 +28,8 @@ import {
 import * as React from 'react'
 import { GeneratorType } from '@/app/components/app/configuration/config/automatic/types'
 import { VarType } from '@/app/components/workflow/types'
-import { EventEmitterContextProvider, useEventEmitterContextContext } from '@/context/event-emitter'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+import { EventEmitterContextProvider } from '@/context/event-emitter-provider'
 import { INSERT_CONTEXT_BLOCK_COMMAND } from '../../context-block'
 import { INSERT_CURRENT_BLOCK_COMMAND } from '../../current-block'
 import { INSERT_ERROR_MESSAGE_BLOCK_COMMAND } from '../../error-message-block'

web/app/components/base/tag-input/__tests__/index.spec.tsx

@@ -5,7 +5,7 @@ import TagInput from '../index'
 
 const mockNotify = vi.fn()
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({
     notify: mockNotify,
   }),

web/app/components/base/tag-input/index.tsx

@@ -2,7 +2,7 @@ import type { ChangeEvent, FC, KeyboardEvent } from 'react'
 import { useCallback, useState } from 'react'
 import AutosizeInput from 'react-18-input-autosize'
 import { useTranslation } from 'react-i18next'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { cn } from '@/utils/classnames'
 
 type TagInputProps = {

web/app/components/base/tag-management/__tests__/panel.spec.tsx

@@ -3,7 +3,7 @@ import { render, screen, waitFor, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import { act } from 'react'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import Panel from '../panel'
 import { useStore as useTagStore } from '../store'
 

web/app/components/base/tag-management/__tests__/selector.spec.tsx

@@ -3,7 +3,7 @@ import { render, screen, waitFor, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import { act } from 'react'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import TagSelector from '../selector'
 import { useStore as useTagStore } from '../store'
 

web/app/components/base/tag-management/index.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import Modal from '@/app/components/base/modal'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import {
   createTag,
   fetchTagList,

web/app/components/base/tag-management/panel.tsx

@@ -10,7 +10,7 @@ import { useContext } from 'use-context-selector'
 import Checkbox from '@/app/components/base/checkbox'
 import Divider from '@/app/components/base/divider'
 import Input from '@/app/components/base/input'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import { bindTag, createTag, unBindTag } from '@/service/tag'
 import { useStore as useTagStore } from './store'
 

web/app/components/base/tag-management/tag-item-editor.tsx

@@ -6,7 +6,7 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import Confirm from '@/app/components/base/confirm'
-import { ToastContext } from '@/app/components/base/toast'
+import { ToastContext } from '@/app/components/base/toast/context'
 import Tooltip from '@/app/components/base/tooltip'
 import {
   deleteTag,

web/app/components/base/text-generation/__tests__/hooks.spec.ts

@@ -5,7 +5,7 @@ import { useTextGeneration } from '../hooks'
 const mockNotify = vi.fn()
 const mockSsePost = vi.fn<(url: string, fetchOptions: { body: Record<string, unknown> }, otherOptions: IOtherOptions) => void>()
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({
     notify: mockNotify,
   }),

web/app/components/base/text-generation/hooks.ts

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { ssePost } from '@/service/base'
 
 export const useTextGeneration = () => {

web/app/components/base/toast/__tests__/index.spec.tsx

@@ -2,7 +2,8 @@ import type { ReactNode } from 'react'
 import { act, render, screen, waitFor } from '@testing-library/react'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
-import Toast, { ToastProvider, useToastContext } from '..'
+import Toast, { ToastProvider } from '..'
+import { useToastContext } from '../context'
 
 const TestComponent = () => {
   const { notify, close } = useToastContext()

web/app/components/base/toast/context.ts

@@ -0,0 +1,23 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { createContext, useContext } from 'use-context-selector'
+
+export type IToastProps = {
+  type?: 'success' | 'error' | 'warning' | 'info'
+  size?: 'md' | 'sm'
+  duration?: number
+  message: string
+  children?: ReactNode
+  onClose?: () => void
+  className?: string
+  customComponent?: ReactNode
+}
+
+type IToastContext = {
+  notify: (props: IToastProps) => void
+  close: () => void
+}
+
+export const ToastContext = createContext<IToastContext>({} as IToastContext)
+export const useToastContext = () => useContext(ToastContext)

web/app/components/base/toast/index.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { useCallback } from 'react'
-import Toast, { ToastProvider, useToastContext } from '.'
+import Toast, { ToastProvider } from '.'
+import { useToastContext } from './context'
 
 const ToastControls = () => {
   const { notify } = useToastContext()

web/app/components/base/toast/index.tsx

@@ -1,5 +1,6 @@
 'use client'
 import type { ReactNode } from 'react'
+import type { IToastProps } from './context'
 import {
   RiAlertFill,
   RiCheckboxCircleFill,
@@ -11,31 +12,13 @@ import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { createRoot } from 'react-dom/client'
-import { createContext, useContext } from 'use-context-selector'
 import ActionButton from '@/app/components/base/action-button'
 import { cn } from '@/utils/classnames'
-
-export type IToastProps = {
-  type?: 'success' | 'error' | 'warning' | 'info'
-  size?: 'md' | 'sm'
-  duration?: number
-  message: string
-  children?: ReactNode
-  onClose?: () => void
-  className?: string
-  customComponent?: ReactNode
-}
-type IToastContext = {
-  notify: (props: IToastProps) => void
-  close: () => void
-}
+import { ToastContext, useToastContext } from './context'
 
 export type ToastHandle = {
   clear?: VoidFunction
 }
-
-export const ToastContext = createContext<IToastContext>({} as IToastContext)
-export const useToastContext = () => useContext(ToastContext)
 const Toast = ({
   type = 'info',
   size = 'md',
@@ -77,11 +60,11 @@ const Toast = ({
         </div>
         <div className={cn('flex grow flex-col items-start gap-1 py-1', size === 'md' ? 'px-1' : 'px-0.5')}>
           <div className="flex items-center gap-1">
-            <div className="system-sm-semibold text-text-primary [word-break:break-word]">{message}</div>
+            <div className="text-text-primary system-sm-semibold [word-break:break-word]">{message}</div>
             {customComponent}
           </div>
           {!!children && (
-            <div className="system-xs-regular text-text-secondary">
+            <div className="text-text-secondary system-xs-regular">
               {children}
             </div>
           )}
@@ -183,3 +166,5 @@ Toast.notify = ({
 }
 
 export default Toast
+
+export type { IToastProps } from './context'

web/app/components/base/ui/dialog/index.tsx

@@ -43,20 +43,24 @@ type DialogContentProps = {
   children: React.ReactNode
   className?: string
   overlayClassName?: string
+  backdropProps?: React.ComponentPropsWithoutRef<typeof BaseDialog.Backdrop>
 }
 
 export function DialogContent({
   children,
   className,
   overlayClassName,
+  backdropProps,
 }: DialogContentProps) {
   return (
     <DialogPortal>
       <BaseDialog.Backdrop
+        {...backdropProps}
         className={cn(
           'fixed inset-0 z-50 bg-background-overlay',
           'transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 motion-reduce:transition-none',
           overlayClassName,
+          backdropProps?.className,
         )}
       />
       <BaseDialog.Popup

web/app/components/billing/pricing/__tests__/footer.spec.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react'
 import * as React from 'react'
-import { CategoryEnum } from '..'
 import Footer from '../footer'
+import { CategoryEnum } from '../types'
 
 vi.mock('next/link', () => ({
   default: ({ children, href, className, target }: { children: React.ReactNode, href: string, className?: string, target?: string }) => (

web/app/components/billing/pricing/__tests__/header.spec.tsx

@@ -1,7 +1,16 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
+import { Dialog } from '@/app/components/base/ui/dialog'
 import Header from '../header'
 
+function renderHeader(onClose: () => void) {
+  return render(
+    <Dialog open>
+      <Header onClose={onClose} />
+    </Dialog>,
+  )
+}
+
 describe('Header', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -11,7 +20,7 @@ describe('Header', () => {
     it('should render title and description translations', () => {
       const handleClose = vi.fn()
 
-      render(<Header onClose={handleClose} />)
+      renderHeader(handleClose)
 
       expect(screen.getByText('billing.plansCommon.title.plans')).toBeInTheDocument()
       expect(screen.getByText('billing.plansCommon.title.description')).toBeInTheDocument()
@@ -22,7 +31,7 @@ describe('Header', () => {
   describe('Props', () => {
     it('should invoke onClose when close button is clicked', () => {
       const handleClose = vi.fn()
-      render(<Header onClose={handleClose} />)
+      renderHeader(handleClose)
 
       fireEvent.click(screen.getByRole('button'))
 
@@ -32,7 +41,7 @@ describe('Header', () => {
 
   describe('Edge Cases', () => {
     it('should render structural elements with translation keys', () => {
-      const { container } = render(<Header onClose={vi.fn()} />)
+      const { container } = renderHeader(vi.fn())
 
       expect(container.querySelector('span')).toBeInTheDocument()
       expect(container.querySelector('p')).toBeInTheDocument()

web/app/components/billing/pricing/__tests__/index.spec.tsx

@@ -74,15 +74,11 @@ describe('Pricing', () => {
   })
 
   describe('Props', () => {
-    it('should allow switching categories and handle esc key', () => {
-      const handleCancel = vi.fn()
-      render(<Pricing onCancel={handleCancel} />)
+    it('should allow switching categories', () => {
+      render(<Pricing onCancel={vi.fn()} />)
 
       fireEvent.click(screen.getByText('billing.plansCommon.self'))
       expect(screen.queryByRole('switch')).not.toBeInTheDocument()
-
-      fireEvent.keyDown(window, { key: 'Escape', keyCode: 27 })
-      expect(handleCancel).toHaveBeenCalled()
     })
   })
 

web/app/components/billing/pricing/footer.tsx

@@ -1,10 +1,9 @@
-import type { Category } from '.'
-import { RiArrowRightUpLine } from '@remixicon/react'
+import type { Category } from './types'
 import Link from 'next/link'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { cn } from '@/utils/classnames'
-import { CategoryEnum } from '.'
+import { CategoryEnum } from './types'
 
 type FooterProps = {
   pricingPageURL: string
@@ -34,7 +33,7 @@ const Footer = ({
           >
             {t('plansCommon.comparePlanAndFeatures', { ns: 'billing' })}
           </Link>
-          <RiArrowRightUpLine className="size-4" />
+          <span aria-hidden="true" className="i-ri-arrow-right-up-line size-4" />
         </span>
       </div>
     </div>

web/app/components/billing/pricing/header.tsx

@@ -1,6 +1,6 @@
-import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import { DialogDescription, DialogTitle } from '@/app/components/base/ui/dialog'
 import Button from '../../base/button'
 import DifyLogo from '../../base/logo/dify-logo'
 
@@ -20,19 +20,19 @@ const Header = ({
           <div className="py-[5px]">
             <DifyLogo className="h-[27px] w-[60px]" />
           </div>
-          <span className="bg-billing-plan-title-bg bg-clip-text px-1.5 font-instrument text-[37px] italic leading-[1.2] text-transparent">
+          <DialogTitle className="m-0 bg-billing-plan-title-bg bg-clip-text px-1.5 font-instrument text-[37px] italic leading-[1.2] text-transparent">
             {t('plansCommon.title.plans', { ns: 'billing' })}
-          </span>
+          </DialogTitle>
         </div>
-        <p className="system-sm-regular text-text-tertiary">
+        <DialogDescription className="m-0 text-text-tertiary system-sm-regular">
           {t('plansCommon.title.description', { ns: 'billing' })}
-        </p>
+        </DialogDescription>
         <Button
           variant="secondary"
           className="absolute bottom-[40.5px] right-[-18px] z-10 size-9 rounded-full p-2"
           onClick={onClose}
         >
-          <RiCloseLine className="size-5" />
+          <span aria-hidden="true" className="i-ri-close-line size-5" />
         </Button>
       </div>
     </div>

web/app/components/billing/pricing/index.tsx

@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
-import { useKeyPress } from 'ahooks'
+import type { Category } from './types'
 import * as React from 'react'
 import { useState } from 'react'
-import { createPortal } from 'react-dom'
+import { Dialog, DialogContent } from '@/app/components/base/ui/dialog'
 import { useAppContext } from '@/context/app-context'
 import { useGetPricingPageLanguage } from '@/context/i18n'
 import { useProviderContext } from '@/context/provider-context'
@@ -13,13 +13,7 @@ import Header from './header'
 import PlanSwitcher from './plan-switcher'
 import { PlanRange } from './plan-switcher/plan-range-switcher'
 import Plans from './plans'
-
-export enum CategoryEnum {
-  CLOUD = 'cloud',
-  SELF = 'self',
-}
-
-export type Category = CategoryEnum.CLOUD | CategoryEnum.SELF
+import { CategoryEnum } from './types'
 
 type PricingProps = {
   onCancel: () => void
@@ -33,42 +27,47 @@ const Pricing: FC<PricingProps> = ({
   const [planRange, setPlanRange] = React.useState<PlanRange>(PlanRange.monthly)
   const [currentCategory, setCurrentCategory] = useState<Category>(CategoryEnum.CLOUD)
   const canPay = isCurrentWorkspaceManager
-  useKeyPress(['esc'], onCancel)
 
   const pricingPageLanguage = useGetPricingPageLanguage()
   const pricingPageURL = pricingPageLanguage
     ? `https://dify.ai/${pricingPageLanguage}/pricing#plans-and-features`
     : 'https://dify.ai/pricing#plans-and-features'
 
-  return createPortal(
-    <div
-      className="fixed inset-0 bottom-0 left-0 right-0 top-0 z-[1000] overflow-auto bg-saas-background"
-      onClick={e => e.stopPropagation()}
+  return (
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open)
+          onCancel()
+      }}
     >
-      <div className="relative grid min-h-full min-w-[1200px] grid-rows-[1fr_auto_auto_1fr] overflow-hidden">
-        <div className="absolute -top-12 left-0 right-0 -z-10">
-          <NoiseTop />
+      <DialogContent
+        className="inset-0 h-full max-h-none w-full max-w-none translate-x-0 translate-y-0 overflow-auto rounded-none border-none bg-saas-background p-0 shadow-none"
+      >
+        <div className="relative grid min-h-full min-w-[1200px] grid-rows-[1fr_auto_auto_1fr] overflow-hidden">
+          <div className="absolute -top-12 left-0 right-0 -z-10">
+            <NoiseTop />
+          </div>
+          <Header onClose={onCancel} />
+          <PlanSwitcher
+            currentCategory={currentCategory}
+            onChangeCategory={setCurrentCategory}
+            currentPlanRange={planRange}
+            onChangePlanRange={setPlanRange}
+          />
+          <Plans
+            plan={plan}
+            currentPlan={currentCategory}
+            planRange={planRange}
+            canPay={canPay}
+          />
+          <Footer pricingPageURL={pricingPageURL} currentCategory={currentCategory} />
+          <div className="absolute -bottom-12 left-0 right-0 -z-10">
+            <NoiseBottom />
+          </div>
         </div>
-        <Header onClose={onCancel} />
-        <PlanSwitcher
-          currentCategory={currentCategory}
-          onChangeCategory={setCurrentCategory}
-          currentPlanRange={planRange}
-          onChangePlanRange={setPlanRange}
-        />
-        <Plans
-          plan={plan}
-          currentPlan={currentCategory}
-          planRange={planRange}
-          canPay={canPay}
-        />
-        <Footer pricingPageURL={pricingPageURL} currentCategory={currentCategory} />
-        <div className="absolute -bottom-12 left-0 right-0 -z-10">
-          <NoiseBottom />
-        </div>
-      </div>
-    </div>,
-    document.body,
+      </DialogContent>
+    </Dialog>
   )
 }
 export default React.memo(Pricing)

web/app/components/billing/pricing/plan-switcher/__tests__/index.spec.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
-import { CategoryEnum } from '../../index'
+import { CategoryEnum } from '../../types'
 import PlanSwitcher from '../index'
 import { PlanRange } from '../plan-range-switcher'
 

web/app/components/billing/pricing/plan-switcher/index.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import type { Category } from '../index'
+import type { Category } from '../types'
 import type { PlanRange } from './plan-range-switcher'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'

web/app/components/billing/pricing/types.ts

@@ -0,0 +1,6 @@
+export enum CategoryEnum {
+  CLOUD = 'cloud',
+  SELF = 'self',
+}
+
+export type Category = CategoryEnum.CLOUD | CategoryEnum.SELF

web/app/components/custom/custom-web-app-brand/__tests__/index.spec.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { getImageUploadErrorMessage, imageUpload } from '@/app/components/base/image-uploader/utils'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { Plan } from '@/app/components/billing/type'
 import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
@@ -9,7 +9,7 @@ import { useProviderContext } from '@/context/provider-context'
 import { updateCurrentWorkspace } from '@/service/common'
 import CustomWebAppBrand from '../index'
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: vi.fn(),
 }))
 vi.mock('@/service/common', () => ({