Merge branch 'feat/model-plugins-implementing' into deploy/dev

- Migrate PortalToFollowElem to base-ui Popover in model-selector,
  model-parameter-modal, and plugin-detail-panel model-selector
- Migrate legacy Tooltip to compound Tooltip in popup-item and trigger
- Unify EmptyTrigger, ModelTrigger, DeprecatedModelTrigger into a
  single declarative ModelSelectorTrigger that derives state from props
- Remove showDeprecatedWarnIcon boolean prop anti-pattern; deprecated
  state always renders warn icon as part of component's visual contract
- Remove deprecatedClassName prop; component manages disabled styling
- Replace manual triggerRef width measurement with CSS var(--anchor-width)
- Remove tooltip scroll listener (base-ui auto-tracks anchor position)
- Restore conditional placement for workflow mode in plugin-detail-panel
- Prune stale ESLint suppressions for removed deprecated imports

.github/actions/setup-web/action.yml

@@ -0,0 +1,33 @@
+name: Setup Web Environment
+description: Setup pnpm, Node.js, and install web dependencies.
+
+inputs:
+  node-version:
+    description: Node.js version to use
+    required: false
+    default: "22"
+  install-dependencies:
+    description: Whether to install web dependencies after setting up Node.js
+    required: false
+    default: "true"
+
+runs:
+  using: composite
+  steps:
+    - name: Install pnpm
+      uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+      with:
+        package_json_file: web/package.json
+        run_install: false
+
+    - name: Setup Node.js
+      uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+      with:
+        node-version: ${{ inputs.node-version }}
+        cache: pnpm
+        cache-dependency-path: ./web/pnpm-lock.yaml
+
+    - name: Install dependencies
+      if: ${{ inputs.install-dependencies == 'true' }}
+      shell: bash
+      run: pnpm --dir web install --frozen-lockfile

.github/dependabot.yml

@@ -26,16 +26,10 @@ updates:
     open-pull-requests-limit: 2
     ignore:
       - dependency-name: "ky"
-      - dependency-name: "@sentry/react"
-        update-types: ["version-update:semver-major"]
       - dependency-name: "tailwind-merge"
         update-types: ["version-update:semver-major"]
       - dependency-name: "tailwindcss"
         update-types: ["version-update:semver-major"]
-      - dependency-name: "echarts"
-        update-types: ["version-update:semver-major"]
-      - dependency-name: "uuid"
-        update-types: ["version-update:semver-major"]
       - dependency-name: "react-markdown"
         update-types: ["version-update:semver-major"]
       - dependency-name: "react-syntax-highlighter"

.github/workflows/api-tests.yml

@@ -22,12 +22,12 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
 
       - name: Setup UV and Python
-        uses: astral-sh/setup-uv@v7
+        uses: astral-sh/setup-uv@5a095e7a2014a4212f075830d4f7277575a9d098 # v7.3.1
         with:
           enable-cache: true
           python-version: ${{ matrix.python-version }}
@@ -51,7 +51,7 @@ jobs:
         run: sh .github/workflows/expose_service_ports.sh
 
       - name: Set up Sandbox
-        uses: hoverkraft-tech/compose-action@v2
+        uses: hoverkraft-tech/compose-action@4894d2492015c1774ee5a13a95b1072093087ec3 # v2.5.0
         with:
           compose-file: |
             docker/docker-compose.middleware.yaml

.github/workflows/autofix.yml

@@ -12,22 +12,22 @@ jobs:
     if: github.repository == 'langgenius/dify'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: Check Docker Compose inputs
         id: docker-compose-changes
-        uses: tj-actions/changed-files@v47
+        uses: tj-actions/changed-files@22103cc46bda19c2b464ffe86db46df6922fd323 # v47.0.5
         with:
           files: |
             docker/generate_docker_compose
             docker/.env.example
             docker/docker-compose-template.yaml
             docker/docker-compose.yaml
-      - uses: actions/setup-python@v6
+      - uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6.2.0
         with:
           python-version: "3.11"
 
-      - uses: astral-sh/setup-uv@v7
+      - uses: astral-sh/setup-uv@5a095e7a2014a4212f075830d4f7277575a9d098 # v7.3.1
 
       - name: Generate Docker Compose
         if: steps.docker-compose-changes.outputs.any_changed == 'true'
@@ -84,4 +84,14 @@ jobs:
         run: |
           uvx --python 3.13 mdformat . --exclude ".agents/skills/**"
 
-      - uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27
+      - name: Setup web environment
+        uses: ./.github/actions/setup-web
+        with:
+          node-version: "24"
+
+      - name: ESLint autofix
+        run: |
+          cd web
+          pnpm eslint --concurrency=2 --prune-suppressions
+
+      - uses: autofix-ci/action@7a166d7532b277f34e16238930461bf77f9d7ed8 # v1.3.3

.github/workflows/build-push.yml

@@ -53,26 +53,26 @@ jobs:
           echo "PLATFORM_PAIR=${platform//\//-}" >> $GITHUB_ENV
 
       - name: Login to Docker Hub
-        uses: docker/login-action@v3
+        uses: docker/login-action@b45d80f862d83dbcd57f89517bcf500b2ab88fb2 # v4.0.0
         with:
           username: ${{ env.DOCKERHUB_USER }}
           password: ${{ env.DOCKERHUB_TOKEN }}
 
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
+        uses: docker/setup-qemu-action@ce360397dd3f832beb865e1373c09c0e9f86d70a # v4.0.0
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@4d04d5d9486b7bd6fa91e7baf45bbb4f8b9deedd # v4.0.0
 
       - name: Extract metadata for Docker
         id: meta
-        uses: docker/metadata-action@v5
+        uses: docker/metadata-action@030e881283bb7a6894de51c315a6bfe6a94e05cf # v6.0.0
         with:
           images: ${{ env[matrix.image_name_env] }}
 
       - name: Build Docker image
         id: build
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@d08e5c354a6adb9ed34480a06d141179aa583294 # v7.0.0
         with:
           context: "{{defaultContext}}:${{ matrix.context }}"
           platforms: ${{ matrix.platform }}
@@ -91,7 +91,7 @@ jobs:
           touch "/tmp/digests/${sanitized_digest}"
 
       - name: Upload digest
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
         with:
           name: digests-${{ matrix.context }}-${{ env.PLATFORM_PAIR }}
           path: /tmp/digests/*
@@ -113,21 +113,21 @@ jobs:
             context: "web"
     steps:
       - name: Download digests
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@70fc10c6e5e1ce46ad2ea6f2b72d43f7d47b13c3 # v8.0.0
         with:
           path: /tmp/digests
           pattern: digests-${{ matrix.context }}-*
           merge-multiple: true
 
       - name: Login to Docker Hub
-        uses: docker/login-action@v3
+        uses: docker/login-action@b45d80f862d83dbcd57f89517bcf500b2ab88fb2 # v4.0.0
         with:
           username: ${{ env.DOCKERHUB_USER }}
           password: ${{ env.DOCKERHUB_TOKEN }}
 
       - name: Extract metadata for Docker
         id: meta
-        uses: docker/metadata-action@v5
+        uses: docker/metadata-action@030e881283bb7a6894de51c315a6bfe6a94e05cf # v6.0.0
         with:
           images: ${{ env[matrix.image_name_env] }}
           tags: |

.github/workflows/db-migration-test.yml

@@ -13,13 +13,13 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           fetch-depth: 0
           persist-credentials: false
 
       - name: Setup UV and Python
-        uses: astral-sh/setup-uv@v7
+        uses: astral-sh/setup-uv@5a095e7a2014a4212f075830d4f7277575a9d098 # v7.3.1
         with:
           enable-cache: true
           python-version: "3.12"
@@ -40,7 +40,7 @@ jobs:
           cp middleware.env.example middleware.env
 
       - name: Set up Middlewares
-        uses: hoverkraft-tech/compose-action@v2.0.2
+        uses: hoverkraft-tech/compose-action@4894d2492015c1774ee5a13a95b1072093087ec3 # v2.5.0
         with:
           compose-file: |
             docker/docker-compose.middleware.yaml
@@ -63,13 +63,13 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           fetch-depth: 0
           persist-credentials: false
 
       - name: Setup UV and Python
-        uses: astral-sh/setup-uv@v7
+        uses: astral-sh/setup-uv@5a095e7a2014a4212f075830d4f7277575a9d098 # v7.3.1
         with:
           enable-cache: true
           python-version: "3.12"
@@ -94,7 +94,7 @@ jobs:
           sed -i 's/DB_USERNAME=postgres/DB_USERNAME=mysql/' middleware.env
 
       - name: Set up Middlewares
-        uses: hoverkraft-tech/compose-action@v2.0.2
+        uses: hoverkraft-tech/compose-action@4894d2492015c1774ee5a13a95b1072093087ec3 # v2.5.0
         with:
           compose-file: |
             docker/docker-compose.middleware.yaml

.github/workflows/deploy-agent-dev.yml

@@ -19,7 +19,7 @@ jobs:
       github.event.workflow_run.head_branch == 'deploy/agent-dev'
     steps:
       - name: Deploy to server
-        uses: appleboy/ssh-action@v1
+        uses: appleboy/ssh-action@0ff4204d59e8e51228ff73bce53f80d53301dee2 # v1.2.5
         with:
           host: ${{ secrets.AGENT_DEV_SSH_HOST }}
           username: ${{ secrets.SSH_USER }}

.github/workflows/deploy-dev.yml

@@ -16,7 +16,7 @@ jobs:
       github.event.workflow_run.head_branch == 'deploy/dev'
     steps:
       - name: Deploy to server
-        uses: appleboy/ssh-action@v1
+        uses: appleboy/ssh-action@0ff4204d59e8e51228ff73bce53f80d53301dee2 # v1.2.5
         with:
           host: ${{ secrets.SSH_HOST }}
           username: ${{ secrets.SSH_USER }}

.github/workflows/deploy-hitl.yml

@@ -16,7 +16,7 @@ jobs:
       github.event.workflow_run.head_branch == 'build/feat/hitl'
     steps:
       - name: Deploy to server
-        uses: appleboy/ssh-action@v1
+        uses: appleboy/ssh-action@0ff4204d59e8e51228ff73bce53f80d53301dee2 # v1.2.5
         with:
           host: ${{ secrets.HITL_SSH_HOST }}
           username: ${{ secrets.SSH_USER }}

.github/workflows/docker-build.yml

@@ -32,13 +32,13 @@ jobs:
             context: "web"
     steps:
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
+        uses: docker/setup-qemu-action@ce360397dd3f832beb865e1373c09c0e9f86d70a # v4.0.0
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@4d04d5d9486b7bd6fa91e7baf45bbb4f8b9deedd # v4.0.0
 
       - name: Build Docker Image
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@d08e5c354a6adb9ed34480a06d141179aa583294 # v7.0.0
         with:
           push: false
           context: "{{defaultContext}}:${{ matrix.context }}"

.github/workflows/labeler.yml

@@ -9,6 +9,6 @@ jobs:
       pull-requests: write
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/labeler@v6
+      - uses: actions/labeler@634933edcd8ababfe52f92936142cc22ac488b1b # v6.0.1
         with:
           sync-labels: true

.github/workflows/main-ci.yml

@@ -27,8 +27,8 @@ jobs:
       vdb-changed: ${{ steps.changes.outputs.vdb }}
       migration-changed: ${{ steps.changes.outputs.migration }}
     steps:
-      - uses: actions/checkout@v6
-      - uses: dorny/paths-filter@v3
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
         id: changes
         with:
           filters: |
@@ -39,6 +39,7 @@ jobs:
             web:
               - 'web/**'
               - '.github/workflows/web-tests.yml'
+              - '.github/actions/setup-web/**'
             vdb:
               - 'api/core/rag/datasource/**'
               - 'docker/**'

.github/workflows/pyrefly-diff-comment.yml

@@ -21,7 +21,7 @@ jobs:
     if: ${{ github.event.workflow_run.conclusion == 'success' && github.event.workflow_run.pull_requests[0].head.repo.full_name != github.repository }}
     steps:
       - name: Download pyrefly diff artifact
-        uses: actions/github-script@v8
+        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8.0.0
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |
@@ -49,7 +49,7 @@ jobs:
         run: unzip -o pyrefly_diff.zip
 
       - name: Post comment
-        uses: actions/github-script@v8
+        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8.0.0
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |

.github/workflows/pyrefly-diff.yml

@@ -17,12 +17,12 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout PR branch
-        uses: actions/checkout@v6
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           fetch-depth: 0
 
       - name: Setup Python & UV
-        uses: astral-sh/setup-uv@v5
+        uses: astral-sh/setup-uv@5a095e7a2014a4212f075830d4f7277575a9d098 # v7.3.1
         with:
           enable-cache: true
 
@@ -55,7 +55,7 @@ jobs:
           echo ${{ github.event.pull_request.number }} > pr_number.txt
 
       - name: Upload pyrefly diff
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
         with:
           name: pyrefly_diff
           path: |
@@ -64,7 +64,7 @@ jobs:
 
       - name: Comment PR with pyrefly diff
         if: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
-        uses: actions/github-script@v8
+        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8.0.0
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |

.github/workflows/semantic-pull-request.yml

@@ -16,6 +16,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check title
-        uses: amannn/action-semantic-pull-request@v6.1.1
+        uses: amannn/action-semantic-pull-request@48f256284bd46cdaab1048c3721360e808335d50 # v6.1.1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/stale.yml

@@ -18,7 +18,7 @@ jobs:
       pull-requests: write
 
     steps:
-      - uses: actions/stale@v10
+      - uses: actions/stale@b5d41d4e1d5dceea10e7104786b73624c18a190f # v10.2.0
         with:
           days-before-issue-stale: 15
           days-before-issue-close: 3

.github/workflows/style.yml

@@ -19,13 +19,13 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
 
       - name: Check changed files
         id: changed-files
-        uses: tj-actions/changed-files@v47
+        uses: tj-actions/changed-files@22103cc46bda19c2b464ffe86db46df6922fd323 # v47.0.5
         with:
           files: |
             api/**
@@ -33,7 +33,7 @@ jobs:
 
       - name: Setup UV and Python
         if: steps.changed-files.outputs.any_changed == 'true'
-        uses: astral-sh/setup-uv@v7
+        uses: astral-sh/setup-uv@5a095e7a2014a4212f075830d4f7277575a9d098 # v7.3.1
         with:
           enable-cache: false
           python-version: "3.12"
@@ -67,36 +67,22 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
 
       - name: Check changed files
         id: changed-files
-        uses: tj-actions/changed-files@v47
+        uses: tj-actions/changed-files@22103cc46bda19c2b464ffe86db46df6922fd323 # v47.0.5
         with:
           files: |
             web/**
             .github/workflows/style.yml
+            .github/actions/setup-web/**
 
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          package_json_file: web/package.json
-          run_install: false
-
-      - name: Setup NodeJS
-        uses: actions/setup-node@v6
+      - name: Setup web environment
         if: steps.changed-files.outputs.any_changed == 'true'
-        with:
-          node-version: 22
-          cache: pnpm
-          cache-dependency-path: ./web/pnpm-lock.yaml
-
-      - name: Web dependencies
-        if: steps.changed-files.outputs.any_changed == 'true'
-        working-directory: ./web
-        run: pnpm install --frozen-lockfile
+        uses: ./.github/actions/setup-web
 
       - name: Web style check
         if: steps.changed-files.outputs.any_changed == 'true'
@@ -134,14 +120,14 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           fetch-depth: 0
           persist-credentials: false
 
       - name: Check changed files
         id: changed-files
-        uses: tj-actions/changed-files@v47
+        uses: tj-actions/changed-files@22103cc46bda19c2b464ffe86db46df6922fd323 # v47.0.5
         with:
           files: |
             **.sh
@@ -152,7 +138,7 @@ jobs:
             .editorconfig
 
       - name: Super-linter
-        uses: super-linter/super-linter/slim@v8
+        uses: super-linter/super-linter/slim@61abc07d755095a68f4987d1c2c3d1d64408f1f9 # v8.5.0
         if: steps.changed-files.outputs.any_changed == 'true'
         env:
           BASH_SEVERITY: warning

.github/workflows/tool-test-sdks.yaml

@@ -21,12 +21,12 @@ jobs:
         working-directory: sdks/nodejs-client
 
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
 
       - name: Use Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version: 22
           cache: ''

.github/workflows/translate-i18n-claude.yml

@@ -38,7 +38,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           fetch-depth: 0
           token: ${{ secrets.GITHUB_TOKEN }}
@@ -48,18 +48,10 @@ jobs:
           git config --global user.name "github-actions[bot]"
           git config --global user.email "github-actions[bot]@users.noreply.github.com"
 
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
+      - name: Setup web environment
+        uses: ./.github/actions/setup-web
         with:
-          package_json_file: web/package.json
-          run_install: false
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v6
-        with:
-          node-version: 22
-          cache: pnpm
-          cache-dependency-path: ./web/pnpm-lock.yaml
+          install-dependencies: "false"
 
       - name: Detect changed files and generate diff
         id: detect_changes
@@ -130,7 +122,7 @@ jobs:
 
       - name: Run Claude Code for Translation Sync
         if: steps.detect_changes.outputs.CHANGED_FILES != ''
-        uses: anthropics/claude-code-action@v1
+        uses: anthropics/claude-code-action@26ec041249acb0a944c0a47b6c0c13f05dbc5b44 # v1.0.70
         with:
           anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
           github_token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/trigger-i18n-sync.yml

@@ -21,7 +21,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           fetch-depth: 0
 
@@ -59,7 +59,7 @@ jobs:
 
       - name: Trigger i18n sync workflow
         if: steps.detect.outputs.has_changes == 'true'
-        uses: peter-evans/repository-dispatch@v3
+        uses: peter-evans/repository-dispatch@28959ce8df70de7be546dd1250a005dd32156697 # v4.0.1
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           event-type: i18n-sync

.github/workflows/vdb-tests.yml

@@ -19,19 +19,19 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
 
       - name: Free Disk Space
-        uses: endersonmenezes/free-disk-space@v3
+        uses: endersonmenezes/free-disk-space@7901478139cff6e9d44df5972fd8ab8fcade4db1 # v3.2.2
         with:
           remove_dotnet: true
           remove_haskell: true
           remove_tool_cache: true
 
       - name: Setup UV and Python
-        uses: astral-sh/setup-uv@v7
+        uses: astral-sh/setup-uv@5a095e7a2014a4212f075830d4f7277575a9d098 # v7.3.1
         with:
           enable-cache: true
           python-version: ${{ matrix.python-version }}
@@ -60,7 +60,7 @@ jobs:
 #            tiflash
 
       - name: Set up Vector Stores (Weaviate, Qdrant, PGVector, Milvus, PgVecto-RS, Chroma, MyScale, ElasticSearch, Couchbase, OceanBase)
-        uses: hoverkraft-tech/compose-action@v2.0.2
+        uses: hoverkraft-tech/compose-action@4894d2492015c1774ee5a13a95b1072093087ec3 # v2.5.0
         with:
           compose-file: |
             docker/docker-compose.yaml

.github/workflows/web-tests.yml

@@ -26,32 +26,19 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
 
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          package_json_file: web/package.json
-          run_install: false
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v6
-        with:
-          node-version: 22
-          cache: pnpm
-          cache-dependency-path: ./web/pnpm-lock.yaml
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+      - name: Setup web environment
+        uses: ./.github/actions/setup-web
 
       - name: Run tests
         run: pnpm vitest run --reporter=blob --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --coverage
 
       - name: Upload blob report
         if: ${{ !cancelled() }}
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
         with:
           name: blob-report-${{ matrix.shardIndex }}
           path: web/.vitest-reports/*
@@ -70,28 +57,15 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
 
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          package_json_file: web/package.json
-          run_install: false
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v6
-        with:
-          node-version: 22
-          cache: pnpm
-          cache-dependency-path: ./web/pnpm-lock.yaml
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+      - name: Setup web environment
+        uses: ./.github/actions/setup-web
 
       - name: Download blob reports
-        uses: actions/download-artifact@v6
+        uses: actions/download-artifact@70fc10c6e5e1ce46ad2ea6f2b72d43f7d47b13c3 # v8.0.0
         with:
           path: web/.vitest-reports
           pattern: blob-report-*
@@ -419,7 +393,7 @@ jobs:
 
       - name: Upload Coverage Artifact
         if: steps.coverage-summary.outputs.has_coverage == 'true'
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
         with:
           name: web-coverage-report
           path: web/coverage
@@ -435,36 +409,22 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
 
       - name: Check changed files
         id: changed-files
-        uses: tj-actions/changed-files@v47
+        uses: tj-actions/changed-files@22103cc46bda19c2b464ffe86db46df6922fd323 # v47.0.5
         with:
           files: |
             web/**
             .github/workflows/web-tests.yml
+            .github/actions/setup-web/**
 
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          package_json_file: web/package.json
-          run_install: false
-
-      - name: Setup NodeJS
-        uses: actions/setup-node@v6
+      - name: Setup web environment
         if: steps.changed-files.outputs.any_changed == 'true'
-        with:
-          node-version: 22
-          cache: pnpm
-          cache-dependency-path: ./web/pnpm-lock.yaml
-
-      - name: Web dependencies
-        if: steps.changed-files.outputs.any_changed == 'true'
-        working-directory: ./web
-        run: pnpm install --frozen-lockfile
+        uses: ./.github/actions/setup-web
 
       - name: Web build check
         if: steps.changed-files.outputs.any_changed == 'true'

api/controllers/console/__init__.py

@@ -39,6 +39,7 @@ from . import (
     feature,
     human_input_form,
     init_validate,
+    notification,
     ping,
     setup,
     spec,
@@ -184,6 +185,7 @@ __all__ = [
     "model_config",
     "model_providers",
     "models",
+    "notification",
     "oauth",
     "oauth_server",
     "ops_trace",

api/controllers/console/admin.py

@@ -1,3 +1,5 @@
+import csv
+import io
 from collections.abc import Callable
 from functools import wraps
 from typing import ParamSpec, TypeVar
@@ -6,7 +8,7 @@ from flask import request
 from flask_restx import Resource
 from pydantic import BaseModel, Field, field_validator
 from sqlalchemy import select
-from werkzeug.exceptions import NotFound, Unauthorized
+from werkzeug.exceptions import BadRequest, NotFound, Unauthorized
 
 from configs import dify_config
 from constants.languages import supported_language
@@ -16,6 +18,7 @@ from core.db.session_factory import session_factory
 from extensions.ext_database import db
 from libs.token import extract_access_token
 from models.model import App, ExporleBanner, InstalledApp, RecommendedApp, TrialApp
+from services.billing_service import BillingService
 
 P = ParamSpec("P")
 R = TypeVar("R")
@@ -277,3 +280,168 @@ class DeleteExploreBannerApi(Resource):
         db.session.commit()
 
         return {"result": "success"}, 204
+
+
+class LangContentPayload(BaseModel):
+    lang: str = Field(..., description="Language tag: 'zh' | 'en' | 'jp'")
+    title: str = Field(...)
+    subtitle: str | None = Field(default=None)
+    body: str = Field(...)
+    title_pic_url: str | None = Field(default=None)
+
+
+class UpsertNotificationPayload(BaseModel):
+    notification_id: str | None = Field(default=None, description="Omit to create; supply UUID to update")
+    contents: list[LangContentPayload] = Field(..., min_length=1)
+    start_time: str | None = Field(default=None, description="RFC3339, e.g. 2026-03-01T00:00:00Z")
+    end_time: str | None = Field(default=None, description="RFC3339, e.g. 2026-03-20T23:59:59Z")
+    frequency: str = Field(default="once", description="'once' | 'every_page_load'")
+    status: str = Field(default="active", description="'active' | 'inactive'")
+
+
+class BatchAddNotificationAccountsPayload(BaseModel):
+    notification_id: str = Field(...)
+    user_email: list[str] = Field(..., description="List of account email addresses")
+
+
+console_ns.schema_model(
+    UpsertNotificationPayload.__name__,
+    UpsertNotificationPayload.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0),
+)
+
+console_ns.schema_model(
+    BatchAddNotificationAccountsPayload.__name__,
+    BatchAddNotificationAccountsPayload.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0),
+)
+
+
+@console_ns.route("/admin/upsert_notification")
+class UpsertNotificationApi(Resource):
+    @console_ns.doc("upsert_notification")
+    @console_ns.doc(
+        description=(
+            "Create or update an in-product notification. "
+            "Supply notification_id to update an existing one; omit it to create a new one. "
+            "Pass at least one language variant in contents (zh / en / jp)."
+        )
+    )
+    @console_ns.expect(console_ns.models[UpsertNotificationPayload.__name__])
+    @console_ns.response(200, "Notification upserted successfully")
+    @only_edition_cloud
+    @admin_required
+    def post(self):
+        payload = UpsertNotificationPayload.model_validate(console_ns.payload)
+        result = BillingService.upsert_notification(
+            contents=[c.model_dump() for c in payload.contents],
+            frequency=payload.frequency,
+            status=payload.status,
+            notification_id=payload.notification_id,
+            start_time=payload.start_time,
+            end_time=payload.end_time,
+        )
+        return {"result": "success", "notification_id": result.get("notificationId")}, 200
+
+
+@console_ns.route("/admin/batch_add_notification_accounts")
+class BatchAddNotificationAccountsApi(Resource):
+    @console_ns.doc("batch_add_notification_accounts")
+    @console_ns.doc(
+        description=(
+            "Register target accounts for a notification by email address. "
+            'JSON body: {"notification_id": "...", "user_email": ["a@example.com", ...]}. '
+            "File upload: multipart/form-data with a 'file' field (CSV or TXT, one email per line) "
+            "plus a 'notification_id' field. "
+            "Emails that do not match any account are silently skipped."
+        )
+    )
+    @console_ns.response(200, "Accounts added successfully")
+    @only_edition_cloud
+    @admin_required
+    def post(self):
+        from models.account import Account
+
+        if "file" in request.files:
+            notification_id = request.form.get("notification_id", "").strip()
+            if not notification_id:
+                raise BadRequest("notification_id is required.")
+            emails = self._parse_emails_from_file()
+        else:
+            payload = BatchAddNotificationAccountsPayload.model_validate(console_ns.payload)
+            notification_id = payload.notification_id
+            emails = payload.user_email
+
+        if not emails:
+            raise BadRequest("No valid email addresses provided.")
+
+        # Resolve emails → account IDs in chunks to avoid large IN-clause
+        account_ids: list[str] = []
+        chunk_size = 500
+        for i in range(0, len(emails), chunk_size):
+            chunk = emails[i : i + chunk_size]
+            rows = db.session.execute(select(Account.id, Account.email).where(Account.email.in_(chunk))).all()
+            account_ids.extend(str(row.id) for row in rows)
+
+        if not account_ids:
+            raise BadRequest("None of the provided emails matched an existing account.")
+
+        # Send to dify-saas in batches of 1000
+        total_count = 0
+        batch_size = 1000
+        for i in range(0, len(account_ids), batch_size):
+            batch = account_ids[i : i + batch_size]
+            result = BillingService.batch_add_notification_accounts(
+                notification_id=notification_id,
+                account_ids=batch,
+            )
+            total_count += result.get("count", 0)
+
+        return {
+            "result": "success",
+            "emails_provided": len(emails),
+            "accounts_matched": len(account_ids),
+            "count": total_count,
+        }, 200
+
+    @staticmethod
+    def _parse_emails_from_file() -> list[str]:
+        """Parse email addresses from an uploaded CSV or TXT file."""
+        file = request.files["file"]
+        if not file.filename:
+            raise BadRequest("Uploaded file has no filename.")
+
+        filename_lower = file.filename.lower()
+        if not filename_lower.endswith((".csv", ".txt")):
+            raise BadRequest("Invalid file type. Only CSV (.csv) and TXT (.txt) files are allowed.")
+
+        try:
+            content = file.read().decode("utf-8")
+        except UnicodeDecodeError:
+            try:
+                file.seek(0)
+                content = file.read().decode("gbk")
+            except UnicodeDecodeError:
+                raise BadRequest("Unable to decode the file. Please use UTF-8 or GBK encoding.")
+
+        emails: list[str] = []
+        if filename_lower.endswith(".csv"):
+            reader = csv.reader(io.StringIO(content))
+            for row in reader:
+                for cell in row:
+                    cell = cell.strip()
+                    if cell:
+                        emails.append(cell)
+        else:
+            for line in content.splitlines():
+                line = line.strip()
+                if line:
+                    emails.append(line)
+
+        # Deduplicate while preserving order
+        seen: set[str] = set()
+        unique_emails: list[str] = []
+        for email in emails:
+            if email.lower() not in seen:
+                seen.add(email.lower())
+                unique_emails.append(email)
+
+        return unique_emails

api/controllers/console/notification.py

@@ -0,0 +1,90 @@
+from flask import request
+from flask_restx import Resource
+from pydantic import BaseModel, Field
+
+from controllers.console import console_ns
+from controllers.console.wraps import account_initialization_required, only_edition_cloud, setup_required
+from libs.login import current_account_with_tenant, login_required
+from services.billing_service import BillingService
+
+# Notification content is stored under three lang tags.
+_FALLBACK_LANG = "en-US"
+
+
+def _pick_lang_content(contents: dict, lang: str) -> dict:
+    """Return the single LangContent for *lang*, falling back to English."""
+    return contents.get(lang) or contents.get(_FALLBACK_LANG) or next(iter(contents.values()), {})
+
+
+class DismissNotificationPayload(BaseModel):
+    notification_id: str = Field(...)
+
+
+@console_ns.route("/notification")
+class NotificationApi(Resource):
+    @console_ns.doc("get_notification")
+    @console_ns.doc(
+        description=(
+            "Return the active in-product notification for the current user "
+            "in their interface language (falls back to English if unavailable). "
+            "The notification is NOT marked as seen here; call POST /notification/dismiss "
+            "when the user explicitly closes the modal."
+        ),
+        responses={
+            200: "Success — inspect should_show to decide whether to render the modal",
+            401: "Unauthorized",
+        },
+    )
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @only_edition_cloud
+    def get(self):
+        current_user, _ = current_account_with_tenant()
+
+        result = BillingService.get_account_notification(str(current_user.id))
+
+        # Proto JSON uses camelCase field names (Kratos default marshaling).
+        if not result.get("shouldShow"):
+            return {"should_show": False, "notifications": []}, 200
+
+        lang = current_user.interface_language or _FALLBACK_LANG
+
+        notifications = []
+        for notification in result.get("notifications") or []:
+            contents: dict = notification.get("contents") or {}
+            lang_content = _pick_lang_content(contents, lang)
+            notifications.append(
+                {
+                    "notification_id": notification.get("notificationId"),
+                    "frequency": notification.get("frequency"),
+                    "lang": lang_content.get("lang", lang),
+                    "title": lang_content.get("title", ""),
+                    "subtitle": lang_content.get("subtitle", ""),
+                    "body": lang_content.get("body", ""),
+                    "title_pic_url": lang_content.get("titlePicUrl", ""),
+                }
+            )
+
+        return {"should_show": bool(notifications), "notifications": notifications}, 200
+
+
+@console_ns.route("/notification/dismiss")
+class NotificationDismissApi(Resource):
+    @console_ns.doc("dismiss_notification")
+    @console_ns.doc(
+        description="Mark a notification as dismissed for the current user.",
+        responses={200: "Success", 401: "Unauthorized"},
+    )
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @only_edition_cloud
+    def post(self):
+        current_user, _ = current_account_with_tenant()
+        payload = DismissNotificationPayload.model_validate(request.get_json())
+        BillingService.dismiss_notification(
+            notification_id=payload.notification_id,
+            account_id=str(current_user.id),
+        )
+        return {"result": "success"}, 200

api/services/billing_service.py

@@ -393,3 +393,78 @@ class BillingService:
         for item in data:
             tenant_whitelist.append(item["tenant_id"])
         return tenant_whitelist
+
+    @classmethod
+    def get_account_notification(cls, account_id: str) -> dict:
+        """Return the active in-product notification for account_id, if any.
+
+        Calling this endpoint also marks the notification as seen; subsequent
+        calls will return should_show=false when frequency='once'.
+
+        Response shape (mirrors GetAccountNotificationReply):
+          {
+            "should_show": bool,
+            "notification": {          # present only when should_show=true
+              "notification_id": str,
+              "contents": {            # lang -> LangContent
+                "en": {"lang": "en", "title": ..., "subtitle": ..., "body": ..., "title_pic_url": ...},
+                ...
+              },
+              "frequency": "once" | "every_page_load"
+            }
+          }
+        """
+        return cls._send_request("GET", "/notifications/active", params={"account_id": account_id})
+
+    @classmethod
+    def upsert_notification(
+        cls,
+        contents: list[dict],
+        frequency: str = "once",
+        status: str = "active",
+        notification_id: str | None = None,
+        start_time: str | None = None,
+        end_time: str | None = None,
+    ) -> dict:
+        """Create or update a notification.
+
+        contents: list of {"lang": str, "title": str, "subtitle": str, "body": str, "title_pic_url": str}
+        start_time / end_time: RFC3339 strings (e.g. "2026-03-01T00:00:00Z"), optional.
+        Returns {"notification_id": str}.
+        """
+        payload: dict = {
+            "contents": contents,
+            "frequency": frequency,
+            "status": status,
+        }
+        if notification_id:
+            payload["notification_id"] = notification_id
+        if start_time:
+            payload["start_time"] = start_time
+        if end_time:
+            payload["end_time"] = end_time
+        return cls._send_request("POST", "/notifications", json=payload)
+
+    @classmethod
+    def batch_add_notification_accounts(cls, notification_id: str, account_ids: list[str]) -> dict:
+        """Register target account IDs for a notification (max 1000 per call).
+
+        Returns {"count": int}.
+        """
+        return cls._send_request(
+            "POST",
+            f"/notifications/{notification_id}/accounts",
+            json={"account_ids": account_ids},
+        )
+
+    @classmethod
+    def dismiss_notification(cls, notification_id: str, account_id: str) -> dict:
+        """Mark a notification as dismissed for an account.
+
+        Returns {"success": bool}.
+        """
+        return cls._send_request(
+            "POST",
+            f"/notifications/{notification_id}/dismiss",
+            json={"account_id": account_id},
+        )

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/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx

@@ -160,7 +160,7 @@ const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
         isShow={isShowDeleteConfirm}
         onClose={() => setIsShowDeleteConfirm(false)}
       >
-        <div className="title-2xl-semi-bold mb-3 text-text-primary">{t('avatar.deleteTitle', { ns: 'common' })}</div>
+        <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">

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

@@ -209,14 +209,14 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
       </div>
       {step === STEP.start && (
         <>
-          <div className="title-2xl-semi-bold pb-3 text-text-primary">{t('account.changeEmail.title', { ns: 'common' })}</div>
+          <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="body-md-medium text-text-warning">{t('account.changeEmail.authTip', { ns: 'common' })}</div>
-            <div className="body-md-regular text-text-secondary">
+            <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="body-md-medium text-text-primary"></span> }}
+                components={{ email: <span className="text-text-primary body-md-medium"></span> }}
                 values={{ email }}
               />
             </div>
@@ -241,19 +241,19 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
       )}
       {step === STEP.verifyOrigin && (
         <>
-          <div className="title-2xl-semi-bold pb-3 text-text-primary">{t('account.changeEmail.verifyEmail', { ns: 'common' })}</div>
+          <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="body-md-regular text-text-secondary">
+            <div className="text-text-secondary body-md-regular">
               <Trans
                 i18nKey="account.changeEmail.content2"
                 ns="common"
-                components={{ email: <span className="body-md-medium text-text-primary"></span> }}
+                components={{ email: <span className="text-text-primary body-md-medium"></span> }}
                 values={{ email }}
               />
             </div>
           </div>
           <div className="pt-3">
-            <div className="system-sm-medium mb-1 flex h-6 items-center text-text-secondary">{t('account.changeEmail.codeLabel', { ns: 'common' })}</div>
+            <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' })}
@@ -278,25 +278,25 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
               {t('operation.cancel', { ns: 'common' })}
             </Button>
           </div>
-          <div className="system-xs-regular mt-3 flex items-center gap-1 text-text-tertiary">
+          <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="system-xs-medium cursor-pointer text-text-accent-secondary">{t('account.changeEmail.resend', { ns: 'common' })}</span>
+              <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="title-2xl-semi-bold pb-3 text-text-primary">{t('account.changeEmail.newEmail', { ns: 'common' })}</div>
+          <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="body-md-regular text-text-secondary">{t('account.changeEmail.content3', { ns: 'common' })}</div>
+            <div className="text-text-secondary body-md-regular">{t('account.changeEmail.content3', { ns: 'common' })}</div>
           </div>
           <div className="pt-3">
-            <div className="system-sm-medium mb-1 flex h-6 items-center text-text-secondary">{t('account.changeEmail.emailLabel', { ns: 'common' })}</div>
+            <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' })}
@@ -305,10 +305,10 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
               destructive={newEmailExited || unAvailableEmail}
             />
             {newEmailExited && (
-              <div className="body-xs-regular mt-1 py-0.5 text-text-destructive">{t('account.changeEmail.existingEmail', { ns: 'common' })}</div>
+              <div className="mt-1 py-0.5 text-text-destructive body-xs-regular">{t('account.changeEmail.existingEmail', { ns: 'common' })}</div>
             )}
             {unAvailableEmail && (
-              <div className="body-xs-regular mt-1 py-0.5 text-text-destructive">{t('account.changeEmail.unAvailableEmail', { ns: 'common' })}</div>
+              <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">
@@ -331,19 +331,19 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
       )}
       {step === STEP.verifyNew && (
         <>
-          <div className="title-2xl-semi-bold pb-3 text-text-primary">{t('account.changeEmail.verifyNew', { ns: 'common' })}</div>
+          <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="body-md-regular text-text-secondary">
+            <div className="text-text-secondary body-md-regular">
               <Trans
                 i18nKey="account.changeEmail.content4"
                 ns="common"
-                components={{ email: <span className="body-md-medium text-text-primary"></span> }}
+                components={{ email: <span className="text-text-primary body-md-medium"></span> }}
                 values={{ email: mail }}
               />
             </div>
           </div>
           <div className="pt-3">
-            <div className="system-sm-medium mb-1 flex h-6 items-center text-text-secondary">{t('account.changeEmail.codeLabel', { ns: 'common' })}</div>
+            <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' })}
@@ -368,13 +368,13 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
               {t('operation.cancel', { ns: 'common' })}
             </Button>
           </div>
-          <div className="system-xs-regular mt-3 flex items-center gap-1 text-text-tertiary">
+          <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="system-xs-medium cursor-pointer text-text-accent-secondary">{t('account.changeEmail.resend', { ns: 'common' })}</span>
+              <span onClick={sendCodeToNewEmail} className="cursor-pointer text-text-accent-secondary system-xs-medium">{t('account.changeEmail.resend', { ns: 'common' })}</span>
             )}
           </div>
         </>

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

@@ -138,7 +138,7 @@ export default function AccountPage() {
             imageUrl={icon_url}
           />
         </div>
-        <div className="system-sm-medium mt-[3px] text-text-secondary">{item.name}</div>
+        <div className="mt-[3px] text-text-secondary system-sm-medium">{item.name}</div>
       </div>
     )
   }
@@ -146,12 +146,12 @@ export default function AccountPage() {
   return (
     <>
       <div className="pb-3 pt-2">
-        <h4 className="title-2xl-semi-bold text-text-primary">{t('account.myAccount', { ns: 'common' })}</h4>
+        <h4 className="text-text-primary title-2xl-semi-bold">{t('account.myAccount', { ns: 'common' })}</h4>
       </div>
       <div className="mb-8 flex items-center rounded-xl bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 p-6">
         <AvatarWithEdit avatar={userProfile.avatar_url} name={userProfile.name} onSave={mutateUserProfile} size={64} />
         <div className="ml-4">
-          <p className="system-xl-semibold text-text-primary">
+          <p className="text-text-primary system-xl-semibold">
             {userProfile.name}
             {isEducationAccount && (
               <PremiumBadge size="s" color="blue" className="ml-1 !px-2">
@@ -160,16 +160,16 @@ export default function AccountPage() {
               </PremiumBadge>
             )}
           </p>
-          <p className="system-xs-regular text-text-tertiary">{userProfile.email}</p>
+          <p className="text-text-tertiary system-xs-regular">{userProfile.email}</p>
         </div>
       </div>
       <div className="mb-8">
         <div className={titleClassName}>{t('account.name', { ns: 'common' })}</div>
         <div className="mt-2 flex w-full items-center justify-between gap-2">
-          <div className="system-sm-regular flex-1 rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled ">
+          <div className="flex-1 rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled system-sm-regular">
             <span className="pl-1">{userProfile.name}</span>
           </div>
-          <div className="system-sm-medium cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 text-components-button-tertiary-text" onClick={handleEditName}>
+          <div className="cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 text-components-button-tertiary-text system-sm-medium" onClick={handleEditName}>
             {t('operation.edit', { ns: 'common' })}
           </div>
         </div>
@@ -177,11 +177,11 @@ export default function AccountPage() {
       <div className="mb-8">
         <div className={titleClassName}>{t('account.email', { ns: 'common' })}</div>
         <div className="mt-2 flex w-full items-center justify-between gap-2">
-          <div className="system-sm-regular flex-1 rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled ">
+          <div className="flex-1 rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled system-sm-regular">
             <span className="pl-1">{userProfile.email}</span>
           </div>
           {systemFeatures.enable_change_email && (
-            <div className="system-sm-medium cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 text-components-button-tertiary-text" onClick={() => setShowUpdateEmail(true)}>
+            <div className="cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 text-components-button-tertiary-text system-sm-medium" onClick={() => setShowUpdateEmail(true)}>
               {t('operation.change', { ns: 'common' })}
             </div>
           )}
@@ -191,8 +191,8 @@ export default function AccountPage() {
         systemFeatures.enable_email_password_login && (
           <div className="mb-8 flex justify-between gap-2">
             <div>
-              <div className="system-sm-semibold mb-1 text-text-secondary">{t('account.password', { ns: 'common' })}</div>
-              <div className="body-xs-regular mb-2 text-text-tertiary">{t('account.passwordTip', { ns: 'common' })}</div>
+              <div className="mb-1 text-text-secondary system-sm-semibold">{t('account.password', { ns: 'common' })}</div>
+              <div className="mb-2 text-text-tertiary body-xs-regular">{t('account.passwordTip', { ns: 'common' })}</div>
             </div>
             <Button onClick={() => setEditPasswordModalVisible(true)}>{userProfile.is_password_set ? t('account.resetPassword', { ns: 'common' }) : t('account.setPassword', { ns: 'common' })}</Button>
           </div>
@@ -219,7 +219,7 @@ export default function AccountPage() {
             onClose={() => setEditNameModalVisible(false)}
             className="!w-[420px] !p-6"
           >
-            <div className="title-2xl-semi-bold mb-6 text-text-primary">{t('account.editName', { ns: 'common' })}</div>
+            <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"
@@ -249,7 +249,7 @@ export default function AccountPage() {
             }}
             className="!w-[420px] !p-6"
           >
-            <div className="title-2xl-semi-bold mb-6 text-text-primary">{userProfile.is_password_set ? t('account.resetPassword', { ns: 'common' }) : t('account.setPassword', { ns: 'common' })}</div>
+            <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>
@@ -272,7 +272,7 @@ export default function AccountPage() {
                 </div>
               </>
             )}
-            <div className="system-sm-semibold mt-8 text-text-secondary">
+            <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">
@@ -291,7 +291,7 @@ export default function AccountPage() {
                 </Button>
               </div>
             </div>
-            <div className="system-sm-semibold mt-8 text-text-secondary">{t('account.confirmPassword', { ns: 'common' })}</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'}

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

@@ -94,7 +94,7 @@ const CSVUploader: FC<Props> = ({
       />
       <div ref={dropRef}>
         {!file && (
-          <div className={cn('system-sm-regular flex h-20 items-center rounded-xl border border-dashed border-components-dropzone-border bg-components-dropzone-bg', dragging && 'border border-components-dropzone-border-accent bg-components-dropzone-bg-accent')}>
+          <div className={cn('flex h-20 items-center rounded-xl border border-dashed border-components-dropzone-border bg-components-dropzone-bg system-sm-regular', dragging && 'border border-components-dropzone-border-accent bg-components-dropzone-bg-accent')}>
             <div className="flex w-full items-center justify-center space-x-2">
               <CSVIcon className="shrink-0" />
               <div className="text-text-tertiary">

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

@@ -178,7 +178,7 @@ const Prompt: FC<ISimplePromptInput> = ({
         {!noTitle && (
           <div className="flex h-11 items-center justify-between pl-3 pr-2.5">
             <div className="flex items-center space-x-1">
-              <div className="h2 system-sm-semibold-uppercase text-text-secondary">{mode !== AppModeEnum.COMPLETION ? t('chatSubTitle', { ns: 'appDebug' }) : t('completionSubTitle', { ns: 'appDebug' })}</div>
+              <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={(

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

@@ -96,7 +96,7 @@ const Editor: FC<Props> = ({
                 )}
           </div>
         </div>
-        <div className={cn(editorHeight, ' min-h-[102px] overflow-y-auto px-4 text-sm text-gray-700')}>
+        <div className={cn(editorHeight, 'min-h-[102px] overflow-y-auto px-4 text-sm text-gray-700')}>
           <PromptEditor
             className={editorHeight}
             value={value}

web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx

@@ -3,8 +3,10 @@ import type { FormValue } from '@/app/components/header/account-setting/model-pr
 import type { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import type { GenRes } from '@/service/debug'
 import type { AppModeEnum, CompletionParams, Model, ModelModeType } from '@/types/app'
-import { useSessionStorageState } from 'ahooks'
-import useBoolean from 'ahooks/lib/useBoolean'
+import {
+  useBoolean,
+  useSessionStorageState,
+} from 'ahooks'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -224,7 +226,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
           </div>
           <div>
             <div className="text-[0px]">
-              <div className="system-sm-semibold-uppercase mb-1.5 text-text-secondary">{t('codegen.instruction', { ns: 'appDebug' })}</div>
+              <div className="mb-1.5 text-text-secondary system-sm-semibold-uppercase">{t('codegen.instruction', { ns: 'appDebug' })}</div>
               <InstructionEditor
                 editorKey={editorKey}
                 value={instruction}
@@ -248,7 +250,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
                 disabled={isLoading}
               >
                 <Generator className="h-4 w-4" />
-                <span className="text-xs font-semibold ">{t('codegen.generate', { ns: 'appDebug' })}</span>
+                <span className="text-xs font-semibold">{t('codegen.generate', { ns: 'appDebug' })}</span>
               </Button>
             </div>
           </div>

web/app/components/app/configuration/dataset-config/card-item/index.spec.tsx

@@ -172,12 +172,8 @@ describe('dataset-config/card-item', () => {
     const [editButton] = within(card).getAllByRole('button', { hidden: true })
     await user.click(editButton)
 
-    expect(screen.getByText('Mock settings modal')).toBeInTheDocument()
-    await waitFor(() => {
-      expect(screen.getByRole('dialog')).toBeVisible()
-    })
-
-    fireEvent.click(screen.getByText('Save changes'))
+    expect(await screen.findByText('Mock settings modal')).toBeInTheDocument()
+    fireEvent.click(await screen.findByText('Save changes'))
 
     await waitFor(() => {
       expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ name: 'Updated dataset' }))
@@ -194,7 +190,7 @@ describe('dataset-config/card-item', () => {
 
     const card = screen.getByText(dataset.name).closest('.group') as HTMLElement
     const buttons = within(card).getAllByRole('button', { hidden: true })
-    const deleteButton = buttons[buttons.length - 1]
+    const deleteButton = buttons.at(-1)!
 
     expect(deleteButton.className).not.toContain('action-btn-destructive')
 
@@ -233,7 +229,7 @@ describe('dataset-config/card-item', () => {
     await user.click(editButton)
     expect(screen.getByText('Mock settings modal')).toBeInTheDocument()
 
-    const overlay = Array.from(document.querySelectorAll('[class]'))
+    const overlay = [...document.querySelectorAll('[class]')]
       .find(element => element.className.toString().includes('bg-black/30'))
 
     expect(overlay).toBeInTheDocument()

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

@@ -210,7 +210,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
       <div className="overflow-y-auto border-b border-divider-regular p-6 pb-[68px] pt-5">
         <div className={cn(rowClass, 'items-center')}>
           <div className={labelClass}>
-            <div className="system-sm-semibold text-text-secondary">{t('form.name', { ns: 'datasetSettings' })}</div>
+            <div className="text-text-secondary system-sm-semibold">{t('form.name', { ns: 'datasetSettings' })}</div>
           </div>
           <Input
             value={localeCurrentDataset.name}
@@ -221,7 +221,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
         </div>
         <div className={cn(rowClass)}>
           <div className={labelClass}>
-            <div className="system-sm-semibold text-text-secondary">{t('form.desc', { ns: 'datasetSettings' })}</div>
+            <div className="text-text-secondary system-sm-semibold">{t('form.desc', { ns: 'datasetSettings' })}</div>
           </div>
           <div className="w-full">
             <Textarea
@@ -234,7 +234,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
         </div>
         <div className={rowClass}>
           <div className={labelClass}>
-            <div className="system-sm-semibold text-text-secondary">{t('form.permissions', { ns: 'datasetSettings' })}</div>
+            <div className="text-text-secondary system-sm-semibold">{t('form.permissions', { ns: 'datasetSettings' })}</div>
           </div>
           <div className="w-full">
             <PermissionSelector
@@ -250,7 +250,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
         {!!(currentDataset && currentDataset.indexing_technique) && (
           <div className={cn(rowClass)}>
             <div className={labelClass}>
-              <div className="system-sm-semibold text-text-secondary">{t('form.indexMethod', { ns: 'datasetSettings' })}</div>
+              <div className="text-text-secondary system-sm-semibold">{t('form.indexMethod', { ns: 'datasetSettings' })}</div>
             </div>
             <div className="grow">
               <IndexMethod
@@ -267,7 +267,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
         {indexMethod === IndexingType.QUALIFIED && (
           <div className={cn(rowClass)}>
             <div className={labelClass}>
-              <div className="system-sm-semibold text-text-secondary">{t('form.embeddingModel', { ns: 'datasetSettings' })}</div>
+              <div className="text-text-secondary system-sm-semibold">{t('form.embeddingModel', { ns: 'datasetSettings' })}</div>
             </div>
             <div className="w-full">
               <div className="h-8 w-full rounded-lg bg-components-input-bg-normal opacity-60">

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

@@ -394,7 +394,7 @@ const Debug: FC<IDebug> = ({
     <>
       <div className="shrink-0">
         <div className="flex items-center justify-between px-4 pb-2 pt-3">
-          <div className="system-xl-semibold text-text-primary">{t('inputs.title', { ns: 'appDebug' })}</div>
+          <div className="text-text-primary system-xl-semibold">{t('inputs.title', { ns: 'appDebug' })}</div>
           <div className="flex items-center">
             {
               debugWithMultipleModel
@@ -539,7 +539,7 @@ const Debug: FC<IDebug> = ({
                 {!completionRes && !isResponding && (
                   <div className="flex grow flex-col items-center justify-center gap-2">
                     <RiSparklingFill className="h-12 w-12 text-text-empty-state-icon" />
-                    <div className="system-sm-regular text-text-quaternary">{t('noResult', { ns: 'appDebug' })}</div>
+                    <div className="text-text-quaternary system-sm-regular">{t('noResult', { ns: 'appDebug' })}</div>
                   </div>
                 )}
               </>

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

@@ -966,10 +966,10 @@ const Configuration: FC = () => {
               <div className="bg-default-subtle absolute left-0 top-0 h-14 w-full">
                 <div className="flex h-14 items-center justify-between px-6">
                   <div className="flex items-center">
-                    <div className="system-xl-semibold text-text-primary">{t('orchestrate', { ns: 'appDebug' })}</div>
+                    <div className="text-text-primary system-xl-semibold">{t('orchestrate', { ns: 'appDebug' })}</div>
                     <div className="flex h-[14px] items-center space-x-1 text-xs">
                       {isAdvancedMode && (
-                        <div className="system-xs-medium-uppercase ml-1 flex h-5 items-center rounded-md border border-components-button-secondary-border px-1.5 uppercase text-text-tertiary">{t('promptMode.advanced', { ns: 'appDebug' })}</div>
+                        <div className="ml-1 flex h-5 items-center rounded-md border border-components-button-secondary-border px-1.5 uppercase text-text-tertiary system-xs-medium-uppercase">{t('promptMode.advanced', { ns: 'appDebug' })}</div>
                       )}
                     </div>
                   </div>
@@ -1030,8 +1030,8 @@ const Configuration: FC = () => {
                 <Config />
               </div>
               {!isMobile && (
-                <div className="relative flex h-full w-1/2 grow flex-col overflow-y-auto " style={{ borderColor: 'rgba(0, 0, 0, 0.02)' }}>
-                  <div className="flex grow flex-col rounded-tl-2xl border-l-[0.5px] border-t-[0.5px] border-components-panel-border bg-chatbot-bg ">
+                <div className="relative flex h-full w-1/2 grow flex-col overflow-y-auto" style={{ borderColor: 'rgba(0, 0, 0, 0.02)' }}>
+                  <div className="flex grow flex-col rounded-tl-2xl border-l-[0.5px] border-t-[0.5px] border-components-panel-border bg-chatbot-bg">
                     <Debug
                       isAPIKeySet={isAPIKeySet}
                       onSetting={() => setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.PROVIDER })}

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

@@ -217,7 +217,7 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
           <AppIcon
             size="large"
             onClick={() => { setShowEmojiPicker(true) }}
-            className="!h-9 !w-9 cursor-pointer rounded-lg border-[0.5px] border-components-panel-border "
+            className="!h-9 !w-9 cursor-pointer rounded-lg border-[0.5px] border-components-panel-border"
             icon={localeData.icon}
             background={localeData.icon_background}
           />

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

@@ -117,10 +117,10 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
           <div className="px-10">
             <div className="h-6 w-full 2xl:h-[139px]" />
             <div className="pb-6 pt-1">
-              <span className="title-2xl-semi-bold text-text-primary">{t('newApp.startFromBlank', { ns: 'app' })}</span>
+              <span className="text-text-primary title-2xl-semi-bold">{t('newApp.startFromBlank', { ns: 'app' })}</span>
             </div>
             <div className="mb-2 leading-6">
-              <span className="system-sm-semibold text-text-secondary">{t('newApp.chooseAppType', { ns: 'app' })}</span>
+              <span className="text-text-secondary system-sm-semibold">{t('newApp.chooseAppType', { ns: 'app' })}</span>
             </div>
             <div className="flex w-[660px] flex-col gap-4">
               <div>
@@ -160,7 +160,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
                     className="flex cursor-pointer items-center border-0 bg-transparent p-0"
                     onClick={() => setIsAppTypeExpanded(!isAppTypeExpanded)}
                   >
-                    <span className="system-2xs-medium-uppercase text-text-tertiary">{t('newApp.forBeginners', { ns: 'app' })}</span>
+                    <span className="text-text-tertiary system-2xs-medium-uppercase">{t('newApp.forBeginners', { ns: 'app' })}</span>
                     <RiArrowRightSLine className={`ml-1 h-4 w-4 text-text-tertiary transition-transform ${isAppTypeExpanded ? 'rotate-90' : ''}`} />
                   </button>
                 </div>
@@ -212,7 +212,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
               <div className="flex items-center space-x-3">
                 <div className="flex-1">
                   <div className="mb-1 flex h-6 items-center">
-                    <label className="system-sm-semibold text-text-secondary">{t('newApp.captionName', { ns: 'app' })}</label>
+                    <label className="text-text-secondary system-sm-semibold">{t('newApp.captionName', { ns: 'app' })}</label>
                   </div>
                   <Input
                     value={name}
@@ -243,8 +243,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
               </div>
               <div>
                 <div className="mb-1 flex h-6 items-center">
-                  <label className="system-sm-semibold text-text-secondary">{t('newApp.captionDescription', { ns: 'app' })}</label>
-                  <span className="system-xs-regular ml-1 text-text-tertiary">
+                  <label className="text-text-secondary system-sm-semibold">{t('newApp.captionDescription', { ns: 'app' })}</label>
+                  <span className="ml-1 text-text-tertiary system-xs-regular">
                     (
                     {t('newApp.optional', { ns: 'app' })}
                     )
@@ -260,7 +260,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
             </div>
             {isAppsFull && <AppsFull className="mt-4" loc="app-create" />}
             <div className="flex items-center justify-between pb-10 pt-5">
-              <div className="system-xs-regular flex cursor-pointer items-center gap-1 text-text-tertiary" onClick={onCreateFromTemplate}>
+              <div className="flex cursor-pointer items-center gap-1 text-text-tertiary system-xs-regular" onClick={onCreateFromTemplate}>
                 <span>{t('newApp.noIdeaTip', { ns: 'app' })}</span>
                 <div className="p-[1px]">
                   <RiArrowRightLine className="h-3.5 w-3.5" />
@@ -334,8 +334,8 @@ function AppTypeCard({ icon, title, description, active, onClick }: AppTypeCardP
       onClick={onClick}
     >
       {icon}
-      <div className="system-sm-semibold mb-0.5 mt-2 text-text-secondary">{title}</div>
-      <div className="system-xs-regular line-clamp-2 text-text-tertiary" title={description}>{description}</div>
+      <div className="mb-0.5 mt-2 text-text-secondary system-sm-semibold">{title}</div>
+      <div className="line-clamp-2 text-text-tertiary system-xs-regular" title={description}>{description}</div>
     </div>
   )
 }
@@ -367,8 +367,8 @@ function AppPreview({ mode }: { mode: AppModeEnum }) {
   const previewInfo = modeToPreviewInfoMap[mode]
   return (
     <div className="px-8 py-4">
-      <h4 className="system-sm-semibold-uppercase text-text-secondary">{previewInfo.title}</h4>
-      <div className="system-xs-regular mt-1 min-h-8 max-w-96 text-text-tertiary">
+      <h4 className="text-text-secondary system-sm-semibold-uppercase">{previewInfo.title}</h4>
+      <div className="mt-1 min-h-8 max-w-96 text-text-tertiary system-xs-regular">
         <span>{previewInfo.description}</span>
       </div>
     </div>

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

@@ -232,7 +232,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
         isShow={show}
         onClose={noop}
       >
-        <div className="title-2xl-semi-bold flex items-center justify-between pb-3 pl-6 pr-5 pt-6 text-text-primary">
+        <div className="flex items-center justify-between pb-3 pl-6 pr-5 pt-6 text-text-primary title-2xl-semi-bold">
           {t('importFromDSL', { ns: 'app' })}
           <div
             className="flex h-8 w-8 cursor-pointer items-center"
@@ -241,7 +241,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
             <RiCloseLine className="h-5 w-5 text-text-tertiary" />
           </div>
         </div>
-        <div className="system-md-semibold flex h-9 items-center space-x-6 border-b border-divider-subtle px-6 text-text-tertiary">
+        <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
@@ -275,7 +275,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
           {
             currentTab === CreateFromDSLModalTab.FROM_URL && (
               <div>
-                <div className="system-md-semibold mb-1 text-text-secondary">DSL URL</div>
+                <div className="mb-1 text-text-secondary system-md-semibold">DSL URL</div>
                 <Input
                   placeholder={t('importFromDSLUrlPlaceholder', { ns: 'app' }) || ''}
                   value={dslUrlValue}
@@ -309,8 +309,8 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
         className="w-[480px]"
       >
         <div className="flex flex-col items-start gap-2 self-stretch pb-4">
-          <div className="title-2xl-semi-bold text-text-primary">{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}</div>
-          <div className="system-md-regular flex grow flex-col text-text-secondary">
+          <div className="text-text-primary title-2xl-semi-bold">{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}</div>
+          <div className="flex grow flex-col text-text-secondary system-md-regular">
             <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
             <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
             <br />

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

@@ -121,7 +121,7 @@ const Uploader: FC<Props> = ({
           </div>
         )}
         {file && (
-          <div className={cn('group flex items-center rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs', ' hover:bg-components-panel-on-panel-item-bg-hover')}>
+          <div className={cn('group flex items-center rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs', 'hover:bg-components-panel-on-panel-item-bg-hover')}>
             <div className="flex items-center justify-center p-3">
               <YamlIcon className="h-6 w-6 shrink-0" />
             </div>

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

@@ -96,7 +96,7 @@ const statusTdRender = (statusCount: StatusCount) => {
 
   if (statusCount.paused > 0) {
     return (
-      <div className="system-xs-semibold-uppercase inline-flex items-center gap-1">
+      <div className="inline-flex items-center gap-1 system-xs-semibold-uppercase">
         <Indicator color="yellow" />
         <span className="text-util-colors-warning-warning-600">Pending</span>
       </div>
@@ -104,7 +104,7 @@ const statusTdRender = (statusCount: StatusCount) => {
   }
   else if (statusCount.partial_success + statusCount.failed === 0) {
     return (
-      <div className="system-xs-semibold-uppercase inline-flex items-center gap-1">
+      <div className="inline-flex items-center gap-1 system-xs-semibold-uppercase">
         <Indicator color="green" />
         <span className="text-util-colors-green-green-600">Success</span>
       </div>
@@ -112,7 +112,7 @@ const statusTdRender = (statusCount: StatusCount) => {
   }
   else if (statusCount.failed === 0) {
     return (
-      <div className="system-xs-semibold-uppercase inline-flex items-center gap-1">
+      <div className="inline-flex items-center gap-1 system-xs-semibold-uppercase">
         <Indicator color="green" />
         <span className="text-util-colors-green-green-600">Partial Success</span>
       </div>
@@ -120,7 +120,7 @@ const statusTdRender = (statusCount: StatusCount) => {
   }
   else {
     return (
-      <div className="system-xs-semibold-uppercase inline-flex items-center gap-1">
+      <div className="inline-flex items-center gap-1 system-xs-semibold-uppercase">
         <Indicator color="red" />
         <span className="text-util-colors-red-red-600">
           {statusCount.failed}
@@ -562,9 +562,9 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
       {/* Panel Header */}
       <div className="flex shrink-0 items-center gap-2 rounded-t-xl bg-components-panel-bg pb-2 pl-4 pr-3 pt-3">
         <div className="shrink-0">
-          <div className="system-xs-semibold-uppercase mb-0.5 text-text-primary">{isChatMode ? t('detail.conversationId', { ns: 'appLog' }) : t('detail.time', { ns: 'appLog' })}</div>
+          <div className="mb-0.5 text-text-primary system-xs-semibold-uppercase">{isChatMode ? t('detail.conversationId', { ns: 'appLog' }) : t('detail.time', { ns: 'appLog' })}</div>
           {isChatMode && (
-            <div className="system-2xs-regular-uppercase flex items-center text-text-secondary">
+            <div className="flex items-center text-text-secondary system-2xs-regular-uppercase">
               <Tooltip
                 popupContent={detail.id}
               >
@@ -574,7 +574,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
             </div>
           )}
           {!isChatMode && (
-            <div className="system-2xs-regular-uppercase text-text-secondary">{formatTime(detail.created_at, t('dateTimeFormat', { ns: 'appLog' }) as string)}</div>
+            <div className="text-text-secondary system-2xs-regular-uppercase">{formatTime(detail.created_at, t('dateTimeFormat', { ns: 'appLog' }) as string)}</div>
           )}
         </div>
         <div className="flex grow flex-wrap items-center justify-end gap-y-1">
@@ -600,7 +600,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
           ? (
               <div className="px-6 py-4">
                 <div className="flex h-[18px] items-center space-x-3">
-                  <div className="system-xs-semibold-uppercase text-text-tertiary">{t('table.header.output', { ns: 'appLog' })}</div>
+                  <div className="text-text-tertiary system-xs-semibold-uppercase">{t('table.header.output', { ns: 'appLog' })}</div>
                   <div
                     className="h-px grow"
                     style={{
@@ -692,7 +692,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
               </div>
               {hasMore && (
                 <div className="py-3 text-center">
-                  <div className="system-xs-regular text-text-tertiary">
+                  <div className="text-text-tertiary system-xs-regular">
                     {t('detail.loading', { ns: 'appLog' })}
                     ...
                   </div>
@@ -950,7 +950,7 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
         )}
         popupClassName={(isHighlight && !isChatMode) ? '' : '!hidden'}
       >
-        <div className={cn(isEmptyStyle ? 'text-text-quaternary' : 'text-text-secondary', !isHighlight ? '' : 'bg-orange-100', 'system-sm-regular overflow-hidden text-ellipsis whitespace-nowrap')}>
+        <div className={cn(isEmptyStyle ? 'text-text-quaternary' : 'text-text-secondary', !isHighlight ? '' : 'bg-orange-100', 'overflow-hidden text-ellipsis whitespace-nowrap system-sm-regular')}>
           {value || '-'}
         </div>
       </Tooltip>
@@ -963,7 +963,7 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
   return (
     <div className="relative mt-2 grow overflow-x-auto">
       <table className={cn('w-full min-w-[440px] border-collapse border-0')}>
-        <thead className="system-xs-medium-uppercase text-text-tertiary">
+        <thead className="text-text-tertiary system-xs-medium-uppercase">
           <tr>
             <td className="w-5 whitespace-nowrap rounded-l-lg bg-background-section-burn pl-2 pr-1"></td>
             <td className="whitespace-nowrap bg-background-section-burn py-1.5 pl-3">{isChatMode ? t('table.header.summary', { ns: 'appLog' }) : t('table.header.input', { ns: 'appLog' })}</td>
@@ -976,7 +976,7 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
             <td className="whitespace-nowrap rounded-r-lg bg-background-section-burn py-1.5 pl-3">{t('table.header.time', { ns: 'appLog' })}</td>
           </tr>
         </thead>
-        <tbody className="system-sm-regular text-text-secondary">
+        <tbody className="text-text-secondary system-sm-regular">
           {logs.data.map((log: any) => {
             const endUser = log.from_end_user_session_id || log.from_account_name
             const leftValue = get(log, isChatMode ? 'name' : 'message.inputs.query') || (!isChatMode ? (get(log, 'message.query') || get(log, 'message.inputs.default_input')) : '') || ''

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

@@ -231,12 +231,12 @@ const SettingsModal: FC<ISettingsModalProps> = ({
         {/* header */}
         <div className="pb-3 pl-6 pr-5 pt-5">
           <div className="flex items-center gap-1">
-            <div className="title-2xl-semi-bold grow text-text-primary">{t(`${prefixSettings}.title`, { ns: 'appOverview' })}</div>
+            <div className="grow text-text-primary title-2xl-semi-bold">{t(`${prefixSettings}.title`, { ns: 'appOverview' })}</div>
             <ActionButton className="shrink-0" onClick={onHide}>
               <RiCloseLine className="h-4 w-4" />
             </ActionButton>
           </div>
-          <div className="system-xs-regular mt-0.5 text-text-tertiary">
+          <div className="mt-0.5 text-text-tertiary system-xs-regular">
             <span>{t(`${prefixSettings}.modalTip`, { ns: 'appOverview' })}</span>
           </div>
         </div>
@@ -245,7 +245,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
           {/* name & icon */}
           <div className="flex gap-4">
             <div className="grow">
-              <div className={cn('system-sm-semibold mb-1 py-1 text-text-secondary')}>{t(`${prefixSettings}.webName`, { ns: 'appOverview' })}</div>
+              <div className={cn('mb-1 py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.webName`, { ns: 'appOverview' })}</div>
               <Input
                 className="w-full"
                 value={inputInfo.title}
@@ -265,32 +265,32 @@ const SettingsModal: FC<ISettingsModalProps> = ({
           </div>
           {/* description */}
           <div className="relative">
-            <div className={cn('system-sm-semibold py-1 text-text-secondary')}>{t(`${prefixSettings}.webDesc`, { ns: 'appOverview' })}</div>
+            <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.webDesc`, { ns: 'appOverview' })}</div>
             <Textarea
               className="mt-1"
               value={inputInfo.desc}
               onChange={e => onDesChange(e.target.value)}
               placeholder={t(`${prefixSettings}.webDescPlaceholder`, { ns: 'appOverview' }) as string}
             />
-            <p className={cn('body-xs-regular pb-0.5 text-text-tertiary')}>{t(`${prefixSettings}.webDescTip`, { ns: 'appOverview' })}</p>
+            <p className={cn('pb-0.5 text-text-tertiary body-xs-regular')}>{t(`${prefixSettings}.webDescTip`, { ns: 'appOverview' })}</p>
           </div>
           <Divider className="my-0 h-px" />
           {/* answer icon */}
           {isChat && (
             <div className="w-full">
               <div className="flex items-center justify-between">
-                <div className={cn('system-sm-semibold py-1 text-text-secondary')}>{t('answerIcon.title', { ns: 'app' })}</div>
+                <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t('answerIcon.title', { ns: 'app' })}</div>
                 <Switch
                   value={inputInfo.use_icon_as_answer_icon}
                   onChange={v => setInputInfo({ ...inputInfo, use_icon_as_answer_icon: v })}
                 />
               </div>
-              <p className="body-xs-regular pb-0.5 text-text-tertiary">{t('answerIcon.description', { ns: 'app' })}</p>
+              <p className="pb-0.5 text-text-tertiary body-xs-regular">{t('answerIcon.description', { ns: 'app' })}</p>
             </div>
           )}
           {/* language */}
           <div className="flex items-center">
-            <div className={cn('system-sm-semibold grow py-1 text-text-secondary')}>{t(`${prefixSettings}.language`, { ns: 'appOverview' })}</div>
+            <div className={cn('grow py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.language`, { ns: 'appOverview' })}</div>
             <SimpleSelect
               wrapperClassName="w-[200px]"
               items={languages.filter(item => item.supported)}
@@ -303,8 +303,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
           {isChat && (
             <div className="flex items-center">
               <div className="grow">
-                <div className={cn('system-sm-semibold py-1 text-text-secondary')}>{t(`${prefixSettings}.chatColorTheme`, { ns: 'appOverview' })}</div>
-                <div className="body-xs-regular pb-0.5 text-text-tertiary">{t(`${prefixSettings}.chatColorThemeDesc`, { ns: 'appOverview' })}</div>
+                <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.chatColorTheme`, { ns: 'appOverview' })}</div>
+                <div className="pb-0.5 text-text-tertiary body-xs-regular">{t(`${prefixSettings}.chatColorThemeDesc`, { ns: 'appOverview' })}</div>
               </div>
               <div className="shrink-0">
                 <Input
@@ -314,7 +314,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
                   placeholder="E.g #A020F0"
                 />
                 <div className="flex items-center justify-between">
-                  <p className={cn('body-xs-regular text-text-tertiary')}>{t(`${prefixSettings}.chatColorThemeInverted`, { ns: 'appOverview' })}</p>
+                  <p className={cn('text-text-tertiary body-xs-regular')}>{t(`${prefixSettings}.chatColorThemeInverted`, { ns: 'appOverview' })}</p>
                   <Switch value={inputInfo.chatColorThemeInverted} onChange={v => setInputInfo({ ...inputInfo, chatColorThemeInverted: v })}></Switch>
                 </div>
               </div>
@@ -323,22 +323,22 @@ const SettingsModal: FC<ISettingsModalProps> = ({
           {/* workflow detail */}
           <div className="w-full">
             <div className="flex items-center justify-between">
-              <div className={cn('system-sm-semibold py-1 text-text-secondary')}>{t(`${prefixSettings}.workflow.subTitle`, { ns: 'appOverview' })}</div>
+              <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.workflow.subTitle`, { ns: 'appOverview' })}</div>
               <Switch
                 disabled={!(appInfo.mode === AppModeEnum.WORKFLOW || appInfo.mode === AppModeEnum.ADVANCED_CHAT)}
                 value={inputInfo.show_workflow_steps}
                 onChange={v => setInputInfo({ ...inputInfo, show_workflow_steps: v })}
               />
             </div>
-            <p className="body-xs-regular pb-0.5 text-text-tertiary">{t(`${prefixSettings}.workflow.showDesc`, { ns: 'appOverview' })}</p>
+            <p className="pb-0.5 text-text-tertiary body-xs-regular">{t(`${prefixSettings}.workflow.showDesc`, { ns: 'appOverview' })}</p>
           </div>
           {/* more settings switch */}
           <Divider className="my-0 h-px" />
           {!isShowMore && (
             <div className="flex cursor-pointer items-center" onClick={() => setIsShowMore(true)}>
               <div className="grow">
-                <div className={cn('system-sm-semibold py-1 text-text-secondary')}>{t(`${prefixSettings}.more.entry`, { ns: 'appOverview' })}</div>
-                <p className={cn('body-xs-regular pb-0.5 text-text-tertiary')}>
+                <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.more.entry`, { ns: 'appOverview' })}</div>
+                <p className={cn('pb-0.5 text-text-tertiary body-xs-regular')}>
                   {t(`${prefixSettings}.more.copyRightPlaceholder`, { ns: 'appOverview' })}
                   {' '}
                   &
@@ -356,7 +356,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
               <div className="w-full">
                 <div className="flex items-center">
                   <div className="flex grow items-center">
-                    <div className={cn('system-sm-semibold mr-1 py-1 text-text-secondary')}>{t(`${prefixSettings}.more.copyright`, { ns: 'appOverview' })}</div>
+                    <div className={cn('mr-1 py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.more.copyright`, { ns: 'appOverview' })}</div>
                     {/* upgrade button */}
                     {enableBilling && isFreePlan && (
                       <div className="h-[18px] select-none">
@@ -385,7 +385,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
                     />
                   </Tooltip>
                 </div>
-                <p className="body-xs-regular pb-0.5 text-text-tertiary">{t(`${prefixSettings}.more.copyrightTip`, { ns: 'appOverview' })}</p>
+                <p className="pb-0.5 text-text-tertiary body-xs-regular">{t(`${prefixSettings}.more.copyrightTip`, { ns: 'appOverview' })}</p>
                 {inputInfo.copyrightSwitchValue && (
                   <Input
                     className="mt-2 h-10"
@@ -397,8 +397,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
               </div>
               {/* privacy policy */}
               <div className="w-full">
-                <div className={cn('system-sm-semibold py-1 text-text-secondary')}>{t(`${prefixSettings}.more.privacyPolicy`, { ns: 'appOverview' })}</div>
-                <p className={cn('body-xs-regular pb-0.5 text-text-tertiary')}>
+                <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.more.privacyPolicy`, { ns: 'appOverview' })}</div>
+                <p className={cn('pb-0.5 text-text-tertiary body-xs-regular')}>
                   <Trans
                     i18nKey={`${prefixSettings}.more.privacyPolicyTip`}
                     ns="appOverview"
@@ -414,8 +414,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
               </div>
               {/* custom disclaimer */}
               <div className="w-full">
-                <div className={cn('system-sm-semibold py-1 text-text-secondary')}>{t(`${prefixSettings}.more.customDisclaimer`, { ns: 'appOverview' })}</div>
-                <p className={cn('body-xs-regular pb-0.5 text-text-tertiary')}>{t(`${prefixSettings}.more.customDisclaimerTip`, { ns: 'appOverview' })}</p>
+                <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.more.customDisclaimer`, { ns: 'appOverview' })}</div>
+                <p className={cn('pb-0.5 text-text-tertiary body-xs-regular')}>{t(`${prefixSettings}.more.customDisclaimerTip`, { ns: 'appOverview' })}</p>
                 <Textarea
                   className="mt-1"
                   value={inputInfo.customDisclaimer}

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

@@ -200,14 +200,14 @@ const ChatInputArea = ({
             <div className="relative flex w-full grow items-center">
               <div
                 ref={textValueRef}
-                className="body-lg-regular pointer-events-none invisible absolute h-auto w-auto whitespace-pre p-1 leading-6"
+                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(
-                  'body-lg-regular w-full resize-none bg-transparent p-1 leading-6 text-text-primary outline-none',
+                  '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

web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx

@@ -164,7 +164,7 @@ const VoiceParamConfig = ({
         </div>
         <div className="flex items-center gap-1">
           <Listbox
-            value={voiceItem ?? {}}
+            value={voiceItem}
             disabled={!languageItem}
             onChange={(value: Item) => {
               handleChange({

web/app/components/base/form/components/form/__tests__/actions.spec.tsx

@@ -1,55 +1,72 @@
 import type { FormType } from '../../..'
 import type { CustomActionsProps } from '../actions'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { formContext } from '../../..'
 import Actions from '../actions'
 
-const renderWithForm = ({
-  canSubmit,
-  isSubmitting,
-  CustomActions,
-}: {
-  canSubmit: boolean
-  isSubmitting: boolean
+const mockFormState = vi.hoisted(() => ({
+  canSubmit: true,
+  isSubmitting: false,
+}))
+
+vi.mock('@tanstack/react-form', async () => {
+  const actual = await vi.importActual<typeof import('@tanstack/react-form')>('@tanstack/react-form')
+  return {
+    ...actual,
+    useStore: (_store: unknown, selector: (state: typeof mockFormState) => unknown) => selector(mockFormState),
+  }
+})
+
+type RenderWithFormOptions = {
+  canSubmit?: boolean
+  isSubmitting?: boolean
   CustomActions?: (props: CustomActionsProps) => React.ReactNode
-}) => {
-  const submitSpy = vi.fn()
-  const state = {
-    canSubmit,
-    isSubmitting,
-  }
+  onSubmit?: () => void
+}
+
+const renderWithForm = ({
+  canSubmit = true,
+  isSubmitting = false,
+  CustomActions,
+  onSubmit = vi.fn(),
+}: RenderWithFormOptions = {}) => {
+  mockFormState.canSubmit = canSubmit
+  mockFormState.isSubmitting = isSubmitting
+
   const form = {
-    store: {
-      state,
-      subscribe: () => () => {},
-    },
-    handleSubmit: submitSpy,
+    store: {},
+    handleSubmit: onSubmit,
   }
 
-  const TestComponent = () => {
-    return (
-      <formContext.Provider value={form as unknown as FormType}>
-        <Actions
-          CustomActions={CustomActions}
-        />
-      </formContext.Provider>
-    )
-  }
+  render(
+    <formContext.Provider value={form as unknown as FormType}>
+      <Actions CustomActions={CustomActions} />
+    </formContext.Provider>,
+  )
 
-  render(<TestComponent />)
-  return { submitSpy }
+  return { onSubmit }
 }
 
 describe('Actions', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
   it('should disable submit button when form cannot submit', () => {
-    renderWithForm({ canSubmit: false, isSubmitting: false })
+    renderWithForm({ canSubmit: false })
     expect(screen.getByRole('button', { name: 'common.operation.submit' })).toBeDisabled()
   })
 
-  it('should call form submit when users click submit button', () => {
-    const { submitSpy } = renderWithForm({ canSubmit: true, isSubmitting: false })
+  it('should call form submit when users click submit button', async () => {
+    const submitSpy = vi.fn()
+    renderWithForm({ onSubmit: submitSpy })
+
     fireEvent.click(screen.getByRole('button', { name: 'common.operation.submit' }))
-    expect(submitSpy).toHaveBeenCalledTimes(1)
+
+    await waitFor(() => {
+      expect(submitSpy).toHaveBeenCalledTimes(1)
+    })
   })
 
   it('should render custom actions when provided', () => {
@@ -60,15 +77,14 @@ describe('Actions', () => {
     ))
 
     renderWithForm({
-      canSubmit: true,
-      isSubmitting: true,
       CustomActions: customActionsSpy,
     })
 
     expect(screen.queryByRole('button', { name: 'common.operation.submit' })).not.toBeInTheDocument()
-    expect(screen.getByText('custom-true-true')).toBeInTheDocument()
+    expect(screen.getByText('custom-false-true')).toBeInTheDocument()
     expect(customActionsSpy).toHaveBeenCalledWith(expect.objectContaining({
-      isSubmitting: true,
+      form: expect.any(Object),
+      isSubmitting: false,
       canSubmit: true,
     }))
   })

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="#101828"/>
+<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"/>
 </g>
 </svg>

web/app/components/base/icons/assets/vender/solid/general/x-circle.svg

@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path id="Solid" fill-rule="evenodd" clip-rule="evenodd" d="M8.00008 0.666016C3.94999 0.666016 0.666748 3.94926 0.666748 7.99935C0.666748 12.0494 3.94999 15.3327 8.00008 15.3327C12.0502 15.3327 15.3334 12.0494 15.3334 7.99935C15.3334 3.94926 12.0502 0.666016 8.00008 0.666016ZM10.4715 5.52794C10.7318 5.78829 10.7318 6.2104 10.4715 6.47075L8.94289 7.99935L10.4715 9.52794C10.7318 9.78829 10.7318 10.2104 10.4715 10.4708C10.2111 10.7311 9.78903 10.7311 9.52868 10.4708L8.00008 8.94216L6.47149 10.4708C6.21114 10.7311 5.78903 10.7311 5.52868 10.4708C5.26833 10.2104 5.26833 9.78829 5.52868 9.52794L7.05727 7.99935L5.52868 6.47075C5.26833 6.2104 5.26833 5.78829 5.52868 5.52794C5.78903 5.26759 6.21114 5.26759 6.47149 5.52794L8.00008 7.05654L9.52868 5.52794C9.78903 5.26759 10.2111 5.26759 10.4715 5.52794Z" fill="#98A2B3"/>
+<path id="Solid" fill-rule="evenodd" clip-rule="evenodd" d="M8.00008 0.666016C3.94999 0.666016 0.666748 3.94926 0.666748 7.99935C0.666748 12.0494 3.94999 15.3327 8.00008 15.3327C12.0502 15.3327 15.3334 12.0494 15.3334 7.99935C15.3334 3.94926 12.0502 0.666016 8.00008 0.666016ZM10.4715 5.52794C10.7318 5.78829 10.7318 6.2104 10.4715 6.47075L8.94289 7.99935L10.4715 9.52794C10.7318 9.78829 10.7318 10.2104 10.4715 10.4708C10.2111 10.7311 9.78903 10.7311 9.52868 10.4708L8.00008 8.94216L6.47149 10.4708C6.21114 10.7311 5.78903 10.7311 5.52868 10.4708C5.26833 10.2104 5.26833 9.78829 5.52868 9.52794L7.05727 7.99935L5.52868 6.47075C5.26833 6.2104 5.26833 5.78829 5.52868 5.52794C5.78903 5.26759 6.21114 5.26759 6.47149 5.52794L8.00008 7.05654L9.52868 5.52794C9.78903 5.26759 10.2111 5.26759 10.4715 5.52794Z" fill="currentColor"/>
 </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/prompt-editor/plugins/workflow-variable-block/component.tsx

@@ -14,7 +14,7 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useReactFlow, useStoreApi } from 'reactflow'
-import Tooltip from '@/app/components/base/tooltip'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { isConversationVar, isENV, isGlobalVar, isRagVariableVar, isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
 import VarFullPathPanel from '@/app/components/workflow/nodes/_base/components/variable/var-full-path-panel'
 import {
@@ -28,6 +28,7 @@ import {
   UPDATE_WORKFLOW_NODES_MAP,
 } from './index'
 import { WorkflowVariableBlockNode } from './node'
+import { useLlmModelPluginInstalled } from './use-llm-model-plugin-installed'
 
 type WorkflowVariableBlockComponentProps = {
   nodeKey: string
@@ -68,6 +69,8 @@ const WorkflowVariableBlockComponent = ({
   const node = localWorkflowNodesMap![variables[isRagVar ? 1 : 0]]
 
   const isException = isExceptionVariable(varName, node?.type)
+  const sourceNodeId = variables[isRagVar ? 1 : 0]
+  const isLlmModelInstalled = useLlmModelPluginInstalled(sourceNodeId, localWorkflowNodesMap)
   const variableValid = useMemo(() => {
     let variableValid = true
     const isEnv = isENV(variables)
@@ -144,7 +147,13 @@ const WorkflowVariableBlockComponent = ({
         handleVariableJump()
       }}
       isExceptionVariable={isException}
-      errorMsg={!variableValid ? t('errorMsg.invalidVariable', { ns: 'workflow' }) : undefined}
+      errorMsg={
+        !variableValid
+          ? t('errorMsg.invalidVariable', { ns: 'workflow' })
+          : !isLlmModelInstalled
+              ? t('errorMsg.modelPluginNotInstalled', { ns: 'workflow' })
+              : undefined
+      }
       isSelected={isSelected}
       ref={ref}
       notShowFullPath={isShowAPart}
@@ -155,9 +164,9 @@ const WorkflowVariableBlockComponent = ({
     return Item
 
   return (
-    <Tooltip
-      noDecoration
-      popupContent={(
+    <Tooltip>
+      <TooltipTrigger disabled={!isShowAPart} render={<div>{Item}</div>} />
+      <TooltipContent variant="plain">
         <VarFullPathPanel
           nodeName={node.title}
           path={variables.slice(1)}
@@ -169,10 +178,7 @@ const WorkflowVariableBlockComponent = ({
             : Type.string}
           nodeType={node?.type}
         />
-      )}
-      disabled={!isShowAPart}
-    >
-      <div>{Item}</div>
+      </TooltipContent>
     </Tooltip>
   )
 }

web/app/components/base/prompt-editor/plugins/workflow-variable-block/use-llm-model-plugin-installed.ts

@@ -0,0 +1,23 @@
+import type { WorkflowNodesMap } from '@/app/components/base/prompt-editor/types'
+import { BlockEnum } from '@/app/components/workflow/types'
+import { extractPluginId } from '@/app/components/workflow/utils/plugin'
+import { useProviderContextSelector } from '@/context/provider-context'
+
+export function useLlmModelPluginInstalled(
+  nodeId: string,
+  workflowNodesMap: WorkflowNodesMap | undefined,
+): boolean {
+  const node = workflowNodesMap?.[nodeId]
+  const modelProvider = node?.type === BlockEnum.LLM
+    ? node.modelProvider
+    : undefined
+  const modelPluginId = modelProvider ? extractPluginId(modelProvider) : undefined
+
+  return useProviderContextSelector((state) => {
+    if (!modelPluginId)
+      return true
+    return state.modelProviders.some(p =>
+      extractPluginId(p.provider) === modelPluginId,
+    )
+  })
+}

web/app/components/base/prompt-editor/types.ts

@@ -73,7 +73,7 @@ export type GetVarType = (payload: {
 export type WorkflowVariableBlockType = {
   show?: boolean
   variables?: NodeOutPutVar[]
-  workflowNodesMap?: Record<string, Pick<Node['data'], 'title' | 'type' | 'height' | 'width' | 'position'>>
+  workflowNodesMap?: WorkflowNodesMap
   onInsert?: () => void
   onDelete?: () => void
   getVarType?: GetVarType
@@ -81,12 +81,14 @@ export type WorkflowVariableBlockType = {
   onManageInputField?: () => void
 }
 
+export type WorkflowNodesMap = Record<string, Pick<Node['data'], 'title' | 'type' | 'height' | 'width' | 'position'> & { modelProvider?: string }>
+
 export type HITLInputBlockType = {
   show?: boolean
   nodeId: string
   formInputs?: FormInputItem[]
   variables?: NodeOutPutVar[]
-  workflowNodesMap?: Record<string, Pick<Node['data'], 'title' | 'type' | 'height' | 'width' | 'position'>>
+  workflowNodesMap?: WorkflowNodesMap
   getVarType?: GetVarType
   onFormInputsChange?: (inputs: FormInputItem[]) => void
   onFormInputItemRemove: (varName: string) => void

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

@@ -100,11 +100,11 @@ const Select: FC<ISelectProps> = ({
       disabled={disabled}
       value={selectedItem}
       className={className}
-      onChange={(value: Item) => {
+      onChange={(value) => {
         if (!disabled) {
           setSelectedItem(value)
           setOpen(false)
-          onSelect(value)
+          onSelect(value as Item)
         }
       }}
     >
@@ -224,10 +224,10 @@ const SimpleSelect: FC<ISelectProps> = ({
     <Listbox
       ref={listboxRef}
       value={selectedItem}
-      onChange={(value: Item) => {
+      onChange={(value) => {
         if (!disabled) {
           setSelectedItem(value)
-          onSelect(value)
+          onSelect(value as Item)
         }
       }}
     >

web/app/components/base/svg-gallery/__tests__/index.spec.tsx

@@ -1,4 +1,5 @@
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { act, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import SVGRenderer from '..'
 
 const mockClick = vi.fn()
@@ -117,6 +118,7 @@ describe('SVGRenderer', () => {
     })
 
     it('closes image preview on cancel', async () => {
+      const user = userEvent.setup()
       render(<SVGRenderer content={validSvg} />)
 
       await waitFor(() => {
@@ -129,9 +131,11 @@ describe('SVGRenderer', () => {
 
       expect(screen.getByAltText('Preview')).toBeInTheDocument()
 
-      fireEvent.keyDown(document, { key: 'Escape' })
+      await user.click(screen.getByTestId('image-preview-close-button'))
 
-      expect(screen.queryByAltText('Preview')).not.toBeInTheDocument()
+      await waitFor(() => {
+        expect(screen.queryByAltText('Preview')).not.toBeInTheDocument()
+      })
     })
   })
 })

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

@@ -1,10 +1,14 @@
 import type { ChangeEvent, FC, KeyboardEvent } from 'react'
 import { useCallback, useState } from 'react'
-import AutosizeInput from 'react-18-input-autosize'
+import _AutosizeInput from 'react-18-input-autosize'
 import { useTranslation } from 'react-i18next'
 import { useToastContext } from '@/app/components/base/toast/context'
 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

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/datasets/documents/components/__tests__/operations.spec.tsx

@@ -1,4 +1,5 @@
 import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import Operations from '../operations'
 
@@ -355,16 +356,14 @@ describe('Operations', () => {
     })
 
     it('should show rename modal when rename is clicked', async () => {
+      const user = userEvent.setup()
       render(<Operations {...defaultProps} />)
       await openPopover()
-      const renameButton = screen.getByText('datasetDocuments.list.table.rename')
-      await act(async () => {
-        fireEvent.click(renameButton)
-      })
-      // Rename modal should be shown
-      await waitFor(() => {
-        expect(screen.getByDisplayValue('Test Document')).toBeInTheDocument()
-      })
+      const renameAction = screen.getByText('datasetDocuments.list.table.rename').parentElement as HTMLElement
+      await user.click(renameAction)
+
+      const renameInput = await screen.findByRole('textbox')
+      expect(renameInput).toHaveValue('Test Document')
     })
 
     it('should call sync for notion data source', async () => {

web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx

@@ -204,7 +204,7 @@ const CSVUploader: FC<Props> = ({
       />
       <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')}>
+          <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')}>
             <div className="flex w-full items-center justify-center space-x-2">
               <CSVIcon className="shrink-0" />
               <div className="text-text-secondary">

web/app/components/datasets/documents/detail/completed/new-child-segment.tsx

@@ -58,7 +58,7 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
       <Divider type="vertical" className="mx-1 h-3 bg-divider-regular" />
       <button
         type="button"
-        className="system-xs-semibold text-text-accent"
+        className="text-text-accent system-xs-semibold"
         onClick={() => {
           clearTimeout(refreshTimer.current)
           viewNewlyAddedChildChunk?.()
@@ -120,11 +120,11 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
     <div className="flex h-full flex-col">
       <div className={cn('flex items-center justify-between', fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3')}>
         <div className="flex flex-col">
-          <div className="system-xl-semibold text-text-primary">{t('segment.addChildChunk', { ns: 'datasetDocuments' })}</div>
+          <div className="text-text-primary system-xl-semibold">{t('segment.addChildChunk', { ns: 'datasetDocuments' })}</div>
           <div className="flex items-center gap-x-2">
             <SegmentIndexTag label={t('segment.newChildChunk', { ns: 'datasetDocuments' }) as string} />
             <Dot />
-            <span className="system-xs-medium text-text-tertiary">{wordCountText}</span>
+            <span className="text-text-tertiary system-xs-medium">{wordCountText}</span>
           </div>
         </div>
         <div className="flex items-center">

web/app/components/datasets/documents/detail/embedding/__tests__/index.spec.tsx

@@ -5,6 +5,7 @@ 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'
@@ -13,8 +14,22 @@ 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(),
+}))
+
 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,
+    }),
+  }
+})
 
 const mockFetchIndexingStatus = vi.mocked(datasetsService.fetchIndexingStatus)
 const mockPauseDocIndexing = vi.mocked(datasetsService.pauseDocIndexing)
@@ -32,9 +47,11 @@ const createWrapper = (contextValue: DocumentContextValue = { datasetId: 'ds1',
   const queryClient = createTestQueryClient()
   return ({ children }: { children: ReactNode }) => (
     <QueryClientProvider client={queryClient}>
-      <DocumentContext.Provider value={contextValue}>
-        {children}
-      </DocumentContext.Provider>
+      <ToastContext.Provider value={{ notify: mockNotify, close: vi.fn() }}>
+        <DocumentContext.Provider value={contextValue}>
+          {children}
+        </DocumentContext.Provider>
+      </ToastContext.Provider>
     </QueryClientProvider>
   )
 }

web/app/components/datasets/documents/detail/new-segment.tsx

@@ -61,7 +61,7 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
       <Divider type="vertical" className="mx-1 h-3 bg-divider-regular" />
       <button
         type="button"
-        className="system-xs-semibold text-text-accent"
+        className="text-text-accent system-xs-semibold"
         onClick={() => {
           clearTimeout(refreshTimer.current)
           viewNewlyAddedChunk()
@@ -158,13 +158,13 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
         className={cn('flex items-center justify-between', fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3')}
       >
         <div className="flex flex-col">
-          <div className="system-xl-semibold text-text-primary">
+          <div className="text-text-primary system-xl-semibold">
             {t('segment.addChunk', { ns: 'datasetDocuments' })}
           </div>
           <div className="flex items-center gap-x-2">
             <SegmentIndexTag label={t('segment.newChunk', { ns: 'datasetDocuments' })!} />
             <Dot />
-            <span className="system-xs-medium text-text-tertiary">{wordCountText}</span>
+            <span className="text-text-tertiary system-xs-medium">{wordCountText}</span>
           </div>
         </div>
         <div className="flex items-center">

web/app/components/datasets/documents/detail/settings/__tests__/document-settings.spec.tsx

@@ -100,10 +100,10 @@ vi.mock('@/app/components/datasets/create/step-two', () => ({
 }))
 
 vi.mock('@/app/components/header/account-setting', () => ({
-  default: ({ activeTab, onCancel }: { activeTab?: string, onCancel?: () => void }) => (
+  default: ({ activeTab, onCancelAction }: { activeTab?: string, onCancelAction?: () => void }) => (
     <div data-testid="account-setting">
       <span data-testid="active-tab">{activeTab}</span>
-      <button onClick={onCancel} data-testid="close-setting">Close</button>
+      <button onClick={onCancelAction} data-testid="close-setting">Close</button>
     </div>
   ),
 }))

web/app/components/datasets/documents/detail/settings/document-settings.tsx

@@ -1,3 +1,4 @@
+import type { AccountSettingTab } from '@/app/components/header/account-setting/constants'
 import type { DataSourceProvider, NotionPage } from '@/models/common'
 import type {
   CrawlOptions,
@@ -19,6 +20,7 @@ import AppUnavailable from '@/app/components/base/app-unavailable'
 import Loading from '@/app/components/base/loading'
 import StepTwo from '@/app/components/datasets/create/step-two'
 import AccountSetting from '@/app/components/header/account-setting'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useDefaultModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import DatasetDetailContext from '@/context/dataset-detail'
@@ -33,8 +35,13 @@ const DocumentSettings = ({ datasetId, documentId }: DocumentSettingsProps) => {
   const { t } = useTranslation()
   const router = useRouter()
   const [isShowSetAPIKey, { setTrue: showSetAPIKey, setFalse: hideSetAPIkey }] = useBoolean()
+  const [accountSettingTab, setAccountSettingTab] = React.useState<AccountSettingTab>(ACCOUNT_SETTING_TAB.PROVIDER)
   const { indexingTechnique, dataset } = useContext(DatasetDetailContext)
   const { data: embeddingsDefaultModel } = useDefaultModel(ModelTypeEnum.textEmbedding)
+  const handleOpenAccountSetting = React.useCallback(() => {
+    setAccountSettingTab(ACCOUNT_SETTING_TAB.PROVIDER)
+    showSetAPIKey()
+  }, [showSetAPIKey])
 
   const invalidDocumentList = useInvalidDocumentList(datasetId)
   const invalidDocumentDetail = useInvalidDocumentDetail()
@@ -135,7 +142,7 @@ const DocumentSettings = ({ datasetId, documentId }: DocumentSettingsProps) => {
         {dataset && documentDetail && (
           <StepTwo
             isAPIKeySet={!!embeddingsDefaultModel}
-            onSetting={showSetAPIKey}
+            onSetting={handleOpenAccountSetting}
             datasetId={datasetId}
             dataSourceType={documentDetail.data_source_type as DataSourceType}
             notionPages={currentPage ? [currentPage as unknown as NotionPage] : []}
@@ -155,8 +162,9 @@ const DocumentSettings = ({ datasetId, documentId }: DocumentSettingsProps) => {
       </div>
       {isShowSetAPIKey && (
         <AccountSetting
-          activeTab="provider"
-          onCancel={async () => {
+          activeTab={accountSettingTab}
+          onTabChangeAction={setAccountSettingTab}
+          onCancelAction={async () => {
             hideSetAPIkey()
           }}
         />

web/app/components/datasets/external-api/external-api-modal/index.tsx

@@ -120,13 +120,13 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
         <div className="fixed inset-0 flex items-center justify-center bg-black/[.25]">
           <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="title-2xl-semi-bold grow self-stretch text-text-primary">
+              <div className="grow self-stretch text-text-primary title-2xl-semi-bold">
                 {
                   isEditMode ? t('editExternalAPIFormTitle', { ns: 'dataset' }) : t('createExternalAPI', { ns: 'dataset' })
                 }
               </div>
               {isEditMode && (datasetBindings?.length ?? 0) > 0 && (
-                <div className="system-xs-regular flex items-center text-text-tertiary">
+                <div className="flex items-center text-text-tertiary system-xs-regular">
                   {t('editExternalAPIFormWarning.front', { ns: 'dataset' })}
                   <span className="flex cursor-pointer items-center text-text-accent">
                     &nbsp;
@@ -139,12 +139,12 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
                       popupContent={(
                         <div className="p-1">
                           <div className="flex items-start self-stretch pb-0.5 pl-2 pr-3 pt-1">
-                            <div className="system-xs-medium-uppercase text-text-tertiary">{`${datasetBindings?.length} ${t('editExternalAPITooltipTitle', { ns: 'dataset' })}`}</div>
+                            <div className="text-text-tertiary system-xs-medium-uppercase">{`${datasetBindings?.length} ${t('editExternalAPITooltipTitle', { ns: 'dataset' })}`}</div>
                           </div>
                           {datasetBindings?.map(binding => (
                             <div key={binding.id} className="flex items-center gap-1 self-stretch px-2 py-1">
                               <RiBook2Line className="h-4 w-4 text-text-secondary" />
-                              <div className="system-sm-medium text-text-secondary">{binding.name}</div>
+                              <div className="text-text-secondary system-sm-medium">{binding.name}</div>
                             </div>
                           ))}
                         </div>
@@ -188,8 +188,8 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
                 {t('externalAPIForm.save', { ns: 'dataset' })}
               </Button>
             </div>
-            <div className="system-xs-regular flex items-center justify-center gap-1 self-stretch rounded-b-2xl border-t-[0.5px]
-              border-divider-subtle bg-background-soft px-2 py-3 text-text-tertiary"
+            <div className="flex items-center justify-center gap-1 self-stretch rounded-b-2xl border-t-[0.5px] border-divider-subtle
+              bg-background-soft px-2 py-3 text-text-tertiary system-xs-regular"
             >
               <RiLock2Fill className="h-3 w-3 text-text-quaternary" />
               {t('externalAPIForm.encrypted.front', { ns: 'dataset' })}

web/app/components/datasets/settings/summary-index-setting.tsx

@@ -63,7 +63,7 @@ const SummaryIndexSetting = ({
     return (
       <div>
         <div className="flex h-6 items-center justify-between">
-          <div className="system-sm-semibold-uppercase flex items-center text-text-secondary">
+          <div className="flex items-center text-text-secondary system-sm-semibold-uppercase">
             {t('form.summaryAutoGen', { ns: 'datasetSettings' })}
             <Tooltip
               triggerClassName="ml-1 h-4 w-4 shrink-0"
@@ -80,7 +80,7 @@ const SummaryIndexSetting = ({
         {
           summaryIndexSetting?.enable && (
             <div>
-              <div className="system-xs-medium-uppercase mb-1.5 mt-2 flex h-6 items-center text-text-tertiary">
+              <div className="mb-1.5 mt-2 flex h-6 items-center text-text-tertiary system-xs-medium-uppercase">
                 {t('form.summaryModel', { ns: 'datasetSettings' })}
               </div>
               <ModelSelector
@@ -90,7 +90,7 @@ const SummaryIndexSetting = ({
                 readonly={readonly}
                 showDeprecatedWarnIcon
               />
-              <div className="system-xs-medium-uppercase mt-3 flex h-6 items-center text-text-tertiary">
+              <div className="mt-3 flex h-6 items-center text-text-tertiary system-xs-medium-uppercase">
                 {t('form.summaryInstructions', { ns: 'datasetSettings' })}
               </div>
               <Textarea
@@ -111,12 +111,12 @@ const SummaryIndexSetting = ({
       <div className="space-y-4">
         <div className="flex gap-x-1">
           <div className="flex h-7 w-[180px] shrink-0 items-center pt-1">
-            <div className="system-sm-semibold text-text-secondary">
+            <div className="text-text-secondary system-sm-semibold">
               {t('form.summaryAutoGen', { ns: 'datasetSettings' })}
             </div>
           </div>
           <div className="py-1.5">
-            <div className="system-sm-semibold flex items-center text-text-secondary">
+            <div className="flex items-center text-text-secondary system-sm-semibold">
               <Switch
                 className="mr-2"
                 value={summaryIndexSetting?.enable ?? false}
@@ -127,7 +127,7 @@ const SummaryIndexSetting = ({
                 summaryIndexSetting?.enable ? t('list.status.enabled', { ns: 'datasetDocuments' }) : t('list.status.disabled', { ns: 'datasetDocuments' })
               }
             </div>
-            <div className="system-sm-regular mt-2 text-text-tertiary">
+            <div className="mt-2 text-text-tertiary system-sm-regular">
               {
                 summaryIndexSetting?.enable && t('form.summaryAutoGenTip', { ns: 'datasetSettings' })
               }
@@ -142,7 +142,7 @@ const SummaryIndexSetting = ({
             <>
               <div className="flex gap-x-1">
                 <div className="flex h-7 w-[180px] shrink-0 items-center pt-1">
-                  <div className="system-sm-medium text-text-tertiary">
+                  <div className="text-text-tertiary system-sm-medium">
                     {t('form.summaryModel', { ns: 'datasetSettings' })}
                   </div>
                 </div>
@@ -159,7 +159,7 @@ const SummaryIndexSetting = ({
               </div>
               <div className="flex">
                 <div className="flex h-7 w-[180px] shrink-0 items-center pt-1">
-                  <div className="system-sm-medium text-text-tertiary">
+                  <div className="text-text-tertiary system-sm-medium">
                     {t('form.summaryInstructions', { ns: 'datasetSettings' })}
                   </div>
                 </div>
@@ -188,7 +188,7 @@ const SummaryIndexSetting = ({
           onChange={handleSummaryIndexEnableChange}
           size="md"
         />
-        <div className="system-sm-semibold text-text-secondary">
+        <div className="text-text-secondary system-sm-semibold">
           {t('form.summaryAutoGen', { ns: 'datasetSettings' })}
         </div>
       </div>
@@ -196,7 +196,7 @@ const SummaryIndexSetting = ({
         summaryIndexSetting?.enable && (
           <>
             <div>
-              <div className="system-sm-medium mb-1.5 flex h-6 items-center text-text-secondary">
+              <div className="mb-1.5 flex h-6 items-center text-text-secondary system-sm-medium">
                 {t('form.summaryModel', { ns: 'datasetSettings' })}
               </div>
               <ModelSelector
@@ -209,7 +209,7 @@ const SummaryIndexSetting = ({
               />
             </div>
             <div>
-              <div className="system-sm-medium mb-1.5 flex h-6 items-center text-text-secondary">
+              <div className="mb-1.5 flex h-6 items-center text-text-secondary system-sm-medium">
                 {t('form.summaryInstructions', { ns: 'datasetSettings' })}
               </div>
               <Textarea

web/app/components/header/account-dropdown/workplace-selector/index.tsx

@@ -46,7 +46,7 @@ const WorkplaceSelector = () => {
                 <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="system-sm-medium min-w-0  max-w-[149px] truncate text-text-secondary max-[800px]:hidden">{currentWorkspace?.name}</div>
+                <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>
@@ -68,9 +68,9 @@ const WorkplaceSelector = () => {
                   `,
                 )}
               >
-                <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 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="system-xs-medium-uppercase flex-1 text-text-tertiary">{t('userProfile.workspace', { ns: 'common' })}</span>
+                    <span className="flex-1 text-text-tertiary system-xs-medium-uppercase">{t('userProfile.workspace', { ns: 'common' })}</span>
                   </div>
                   {
                     workspaces.map(workspace => (
@@ -78,7 +78,7 @@ const WorkplaceSelector = () => {
                         <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="system-md-regular line-clamp-1 grow cursor-pointer overflow-hidden text-ellipsis text-text-secondary">{workspace.name}</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>
                     ))

web/app/components/header/account-setting/index.spec.tsx

@@ -1,12 +1,16 @@
+import type { AccountSettingTab } from './constants'
 import type { AppContextValue } from '@/context/app-context'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { fireEvent, render, screen } from '@testing-library/react'
+import { useState } from 'react'
 import { useAppContext } from '@/context/app-context'
 import { baseProviderContextValue, useProviderContext } from '@/context/provider-context'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { ACCOUNT_SETTING_TAB } from './constants'
 import AccountSetting from './index'
 
+const mockResetModelProviderListExpanded = vi.fn()
+
 vi.mock('@/context/provider-context', async (importOriginal) => {
   const actual = await importOriginal<typeof import('@/context/provider-context')>()
   return {
@@ -47,10 +51,15 @@ vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', ()
   useDefaultModel: vi.fn(() => ({ data: null, isLoading: false })),
   useUpdateDefaultModel: vi.fn(() => ({ trigger: vi.fn() })),
   useUpdateModelList: vi.fn(() => vi.fn()),
+  useInvalidateDefaultModel: vi.fn(() => vi.fn()),
   useModelList: vi.fn(() => ({ data: [], isLoading: false })),
   useSystemDefaultModelAndModelList: vi.fn(() => [null, vi.fn()]),
 }))
 
+vi.mock('@/app/components/header/account-setting/model-provider-page/atoms', () => ({
+  useResetModelProviderListExpanded: () => mockResetModelProviderListExpanded,
+}))
+
 vi.mock('@/service/use-datasource', () => ({
   useGetDataSourceListAuth: vi.fn(() => ({ data: { result: [] } })),
 }))
@@ -105,6 +114,38 @@ const baseAppContextValue: AppContextValue = {
 describe('AccountSetting', () => {
   const mockOnCancel = vi.fn()
   const mockOnTabChange = vi.fn()
+  const renderAccountSetting = (props?: {
+    initialTab?: AccountSettingTab
+    onCancel?: () => void
+    onTabChange?: (tab: AccountSettingTab) => void
+  }) => {
+    const {
+      initialTab = ACCOUNT_SETTING_TAB.MEMBERS,
+      onCancel = mockOnCancel,
+      onTabChange = mockOnTabChange,
+    } = props ?? {}
+
+    const StatefulAccountSetting = () => {
+      const [activeTab, setActiveTab] = useState<AccountSettingTab>(initialTab)
+
+      return (
+        <AccountSetting
+          onCancelAction={onCancel}
+          activeTab={activeTab}
+          onTabChangeAction={(tab) => {
+            setActiveTab(tab)
+            onTabChange(tab)
+          }}
+        />
+      )
+    }
+
+    return render(
+      <QueryClientProvider client={new QueryClient()}>
+        <StatefulAccountSetting />
+      </QueryClientProvider>,
+    )
+  }
 
   beforeEach(() => {
     vi.clearAllMocks()
@@ -120,11 +161,7 @@ describe('AccountSetting', () => {
   describe('Rendering', () => {
     it('should render the sidebar with correct menu items', () => {
       // Act
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} />
-        </QueryClientProvider>,
-      )
+      renderAccountSetting()
 
       // Assert
       expect(screen.getByText('common.userProfile.settings')).toBeInTheDocument()
@@ -137,13 +174,9 @@ describe('AccountSetting', () => {
       expect(screen.getAllByText('common.settings.language').length).toBeGreaterThan(0)
     })
 
-    it('should respect the activeTab prop', () => {
+    it('should respect the initial tab', () => {
       // Act
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} activeTab={ACCOUNT_SETTING_TAB.DATA_SOURCE} />
-        </QueryClientProvider>,
-      )
+      renderAccountSetting({ initialTab: ACCOUNT_SETTING_TAB.DATA_SOURCE })
 
       // Assert
       // Check that the active item title is Data Source
@@ -157,11 +190,7 @@ describe('AccountSetting', () => {
       vi.mocked(useBreakpoints).mockReturnValue(MediaType.mobile)
 
       // Act
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} />
-        </QueryClientProvider>,
-      )
+      renderAccountSetting()
 
       // Assert
       // On mobile, the labels should not be rendered as per the implementation
@@ -176,11 +205,7 @@ describe('AccountSetting', () => {
       })
 
       // Act
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} />
-        </QueryClientProvider>,
-      )
+      renderAccountSetting()
 
       // Assert
       expect(screen.queryByText('common.settings.provider')).not.toBeInTheDocument()
@@ -197,11 +222,7 @@ describe('AccountSetting', () => {
       })
 
       // Act
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} />
-        </QueryClientProvider>,
-      )
+      renderAccountSetting()
 
       // Assert
       expect(screen.queryByText('common.settings.billing')).not.toBeInTheDocument()
@@ -212,11 +233,7 @@ describe('AccountSetting', () => {
   describe('Tab Navigation', () => {
     it('should change active tab when clicking on menu item', () => {
       // Arrange
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} onTabChange={mockOnTabChange} />
-        </QueryClientProvider>,
-      )
+      renderAccountSetting({ onTabChange: mockOnTabChange })
 
       // Act
       fireEvent.click(screen.getByText('common.settings.provider'))
@@ -229,11 +246,7 @@ describe('AccountSetting', () => {
 
     it('should navigate through various tabs and show correct details', () => {
       // Act & Assert
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} />
-        </QueryClientProvider>,
-      )
+      renderAccountSetting()
 
       // Billing
       fireEvent.click(screen.getByText('common.settings.billing'))
@@ -267,13 +280,11 @@ describe('AccountSetting', () => {
   describe('Interactions', () => {
     it('should call onCancel when clicking close button', () => {
       // Act
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} />
-        </QueryClientProvider>,
-      )
-      const buttons = screen.getAllByRole('button')
-      fireEvent.click(buttons[0])
+      renderAccountSetting()
+      const closeIcon = document.querySelector('.i-ri-close-line')
+      const closeButton = closeIcon?.closest('button')
+      expect(closeButton).not.toBeNull()
+      fireEvent.click(closeButton!)
 
       // Assert
       expect(mockOnCancel).toHaveBeenCalled()
@@ -281,11 +292,7 @@ describe('AccountSetting', () => {
 
     it('should call onCancel when pressing Escape key', () => {
       // Act
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} />
-        </QueryClientProvider>,
-      )
+      renderAccountSetting()
       fireEvent.keyDown(document, { key: 'Escape' })
 
       // Assert
@@ -294,12 +301,7 @@ describe('AccountSetting', () => {
 
     it('should update search value in provider tab', () => {
       // Arrange
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} />
-        </QueryClientProvider>,
-      )
-      fireEvent.click(screen.getByText('common.settings.provider'))
+      renderAccountSetting({ initialTab: ACCOUNT_SETTING_TAB.PROVIDER })
 
       // Act
       const input = screen.getByRole('textbox')
@@ -312,11 +314,7 @@ describe('AccountSetting', () => {
 
     it('should handle scroll event in panel', () => {
       // Act
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} />
-        </QueryClientProvider>,
-      )
+      renderAccountSetting()
       const scrollContainer = screen.getByRole('dialog').querySelector('.overflow-y-auto')
 
       // Assert

web/app/components/header/account-setting/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 import type { AccountSettingTab } from '@/app/components/header/account-setting/constants'
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import SearchInput from '@/app/components/base/search-input'
 import BillingPage from '@/app/components/billing/billing-page'
@@ -20,15 +20,16 @@ import DataSourcePage from './data-source-page-new'
 import LanguagePage from './language-page'
 import MembersPage from './members-page'
 import ModelProviderPage from './model-provider-page'
+import { useResetModelProviderListExpanded } from './model-provider-page/atoms'
 
 const iconClassName = `
   w-5 h-5 mr-2
 `
 
 type IAccountSettingProps = {
-  onCancel: () => void
-  activeTab?: AccountSettingTab
-  onTabChange?: (tab: AccountSettingTab) => void
+  onCancelAction: () => void
+  activeTab: AccountSettingTab
+  onTabChangeAction: (tab: AccountSettingTab) => void
 }
 
 type GroupItem = {
@@ -40,14 +41,12 @@ type GroupItem = {
 }
 
 export default function AccountSetting({
-  onCancel,
-  activeTab = ACCOUNT_SETTING_TAB.MEMBERS,
-  onTabChange,
+  onCancelAction,
+  activeTab,
+  onTabChangeAction,
 }: IAccountSettingProps) {
-  const [activeMenu, setActiveMenu] = useState<AccountSettingTab>(activeTab)
-  useEffect(() => {
-    setActiveMenu(activeTab)
-  }, [activeTab])
+  const resetModelProviderListExpanded = useResetModelProviderListExpanded()
+  const activeMenu = activeTab
   const { t } = useTranslation()
   const { enableBilling, enableReplaceWebAppLogo } = useProviderContext()
   const { isCurrentWorkspaceDatasetOperator } = useAppContext()
@@ -148,10 +147,22 @@ export default function AccountSetting({
 
   const [searchValue, setSearchValue] = useState<string>('')
 
+  const handleTabChange = useCallback((tab: AccountSettingTab) => {
+    if (tab === ACCOUNT_SETTING_TAB.PROVIDER)
+      resetModelProviderListExpanded()
+
+    onTabChangeAction(tab)
+  }, [onTabChangeAction, resetModelProviderListExpanded])
+
+  const handleClose = useCallback(() => {
+    resetModelProviderListExpanded()
+    onCancelAction()
+  }, [onCancelAction, resetModelProviderListExpanded])
+
   return (
     <MenuDialog
       show
-      onClose={onCancel}
+      onClose={handleClose}
     >
       <div className="mx-auto flex h-[100vh] max-w-[1048px]">
         <div className="flex w-[44px] flex-col border-r border-divider-burn pl-4 pr-6 sm:w-[224px]">
@@ -166,21 +177,22 @@ export default function AccountSetting({
                   <div>
                     {
                       menuItem.items.map(item => (
-                        <div
+                        <button
+                          type="button"
                           key={item.key}
                           className={cn(
-                            'mb-0.5 flex h-[37px] cursor-pointer items-center rounded-lg p-1 pl-3 text-sm',
+                            'mb-0.5 flex h-[37px] w-full items-center rounded-lg p-1 pl-3 text-left text-sm',
                             activeMenu === item.key ? 'bg-state-base-active text-components-menu-item-text-active system-sm-semibold' : 'text-components-menu-item-text system-sm-medium',
                           )}
+                          aria-label={item.name}
                           title={item.name}
                           onClick={() => {
-                            setActiveMenu(item.key)
-                            onTabChange?.(item.key)
+                            handleTabChange(item.key)
                           }}
                         >
                           {activeMenu === item.key ? item.activeIcon : item.icon}
                           {!isMobile && <div className="truncate">{item.name}</div>}
-                        </div>
+                        </button>
                       ))
                     }
                   </div>
@@ -195,7 +207,8 @@ export default function AccountSetting({
               variant="tertiary"
               size="large"
               className="px-2"
-              onClick={onCancel}
+              aria-label={t('operation.close', { ns: 'common' })}
+              onClick={handleClose}
             >
               <span className="i-ri-close-line h-5 w-5" />
             </Button>

web/app/components/header/account-setting/members-page/operation/index.tsx

@@ -97,7 +97,7 @@ const Operation = ({
       offset={{ mainAxis: 4 }}
     >
       <PortalToFollowElemTrigger asChild onClick={() => setOpen(prev => !prev)}>
-        <div className={cn('system-sm-regular group flex h-full w-full cursor-pointer items-center justify-between px-3 text-text-secondary hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
+        <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}
           <ChevronDownIcon className={cn('h-4 w-4 shrink-0 group-hover:block', open ? 'block' : 'hidden')} />
         </div>
@@ -114,8 +114,8 @@ const Operation = ({
                       : <div className="mr-1 mt-[2px] h-4 w-4 text-text-accent" />
                   }
                   <div>
-                    <div className="system-sm-semibold whitespace-nowrap text-text-secondary">{t(roleI18nKeyMap[role].label, { ns: 'common' })}</div>
-                    <div className="system-xs-regular whitespace-nowrap text-text-tertiary">{t(roleI18nKeyMap[role].tip, { ns: 'common' })}</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>
               ))
@@ -125,8 +125,8 @@ const Operation = ({
             <div className="flex cursor-pointer rounded-lg px-3 py-2 hover:bg-state-base-hover" onClick={handleDeleteMemberOrCancelInvitation}>
               <div className="mr-1 mt-[2px] h-4 w-4 text-text-accent" />
               <div>
-                <div className="system-sm-semibold whitespace-nowrap text-text-secondary">{t('members.removeFromTeam', { ns: 'common' })}</div>
-                <div className="system-xs-regular whitespace-nowrap text-text-tertiary">{t('members.removeFromTeamTip', { ns: 'common' })}</div>
+                <div className="whitespace-nowrap text-text-secondary system-sm-semibold">{t('members.removeFromTeam', { ns: 'common' })}</div>
+                <div className="whitespace-nowrap text-text-tertiary system-xs-regular">{t('members.removeFromTeamTip', { ns: 'common' })}</div>
               </div>
             </div>
           </div>

web/app/components/header/account-setting/menu-dialog.spec.tsx

@@ -40,8 +40,7 @@ describe('MenuDialog', () => {
       )
 
       // Assert
-      const panel = screen.getByRole('dialog').querySelector('.custom-class')
-      expect(panel).toBeInTheDocument()
+      expect(screen.getByRole('dialog')).toHaveClass('custom-class')
     })
   })
 

web/app/components/header/account-setting/menu-dialog.tsx

@@ -1,7 +1,6 @@
 import type { ReactNode } from 'react'
-import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
-import { noop } from 'es-toolkit/function'
-import { Fragment, useCallback, useEffect } from 'react'
+import { useCallback } from 'react'
+import { Dialog, DialogContent } from '@/app/components/base/ui/dialog'
 import { cn } from '@/utils/classnames'
 
 type DialogProps = {
@@ -19,42 +18,25 @@ const MenuDialog = ({
 }: DialogProps) => {
   const close = useCallback(() => onClose?.(), [onClose])
 
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        event.preventDefault()
-        close()
-      }
-    }
-
-    document.addEventListener('keydown', handleKeyDown)
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown)
-    }
-  }, [close])
-
   return (
-    <Transition appear show={show} as={Fragment}>
-      <Dialog as="div" className="relative z-[60]" onClose={noop}>
-        <div className="fixed inset-0">
-          <div className="flex min-h-full flex-col items-center justify-center">
-            <TransitionChild>
-              <DialogPanel className={cn(
-                'relative h-full w-full grow overflow-hidden bg-background-sidenav-bg p-0 text-left align-middle backdrop-blur-md transition-all',
-                'duration-300 ease-in data-[closed]:scale-95 data-[closed]:opacity-0',
-                'data-[enter]:scale-100 data-[enter]:opacity-100',
-                'data-[enter]:scale-95 data-[leave]:opacity-0',
-                className,
-              )}
-              >
-                <div className="absolute right-0 top-0 h-full w-1/2 bg-components-panel-bg" />
-                {children}
-              </DialogPanel>
-            </TransitionChild>
-          </div>
-        </div>
-      </Dialog>
-    </Transition>
+    <Dialog
+      open={show}
+      onOpenChange={(open) => {
+        if (!open)
+          close()
+      }}
+    >
+      <DialogContent
+        overlayClassName="bg-transparent"
+        className={cn(
+          'left-0 top-0 h-full max-h-none w-full max-w-none translate-x-0 translate-y-0 overflow-hidden rounded-none border-none bg-background-sidenav-bg p-0 shadow-none backdrop-blur-md',
+          className,
+        )}
+      >
+        <div className="absolute right-0 top-0 h-full w-1/2 bg-components-panel-bg" />
+        {children}
+      </DialogContent>
+    </Dialog>
   )
 }
 

web/app/components/header/account-setting/model-provider-page/atoms.spec.tsx

@@ -0,0 +1,399 @@
+import type { ReactNode } from 'react'
+import { act, renderHook } from '@testing-library/react'
+import { Provider } from 'jotai'
+import { beforeEach, describe, expect, it } from 'vitest'
+import {
+  useExpandModelProviderList,
+  useModelProviderListExpanded,
+  useResetModelProviderListExpanded,
+  useSetModelProviderListExpanded,
+} from './atoms'
+
+const createWrapper = () => {
+  return ({ children }: { children: ReactNode }) => (
+    <Provider>{children}</Provider>
+  )
+}
+
+describe('atoms', () => {
+  let wrapper: ReturnType<typeof createWrapper>
+
+  beforeEach(() => {
+    wrapper = createWrapper()
+  })
+
+  // Read hook: returns whether a specific provider is expanded
+  describe('useModelProviderListExpanded', () => {
+    it('should return false when provider has not been expanded', () => {
+      const { result } = renderHook(
+        () => useModelProviderListExpanded('openai'),
+        { wrapper },
+      )
+
+      expect(result.current).toBe(false)
+    })
+
+    it('should return false for any unknown provider name', () => {
+      const { result } = renderHook(
+        () => useModelProviderListExpanded('nonexistent-provider'),
+        { wrapper },
+      )
+
+      expect(result.current).toBe(false)
+    })
+
+    it('should return true when provider has been expanded via setter', () => {
+      const { result } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('openai'),
+          setExpanded: useSetModelProviderListExpanded('openai'),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.setExpanded(true)
+      })
+
+      expect(result.current.expanded).toBe(true)
+    })
+  })
+
+  // Setter hook: toggles expanded state for a specific provider
+  describe('useSetModelProviderListExpanded', () => {
+    it('should expand a provider when called with true', () => {
+      const { result } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('anthropic'),
+          setExpanded: useSetModelProviderListExpanded('anthropic'),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.setExpanded(true)
+      })
+
+      expect(result.current.expanded).toBe(true)
+    })
+
+    it('should collapse a provider when called with false', () => {
+      const { result } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('anthropic'),
+          setExpanded: useSetModelProviderListExpanded('anthropic'),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.setExpanded(true)
+      })
+      act(() => {
+        result.current.setExpanded(false)
+      })
+
+      expect(result.current.expanded).toBe(false)
+    })
+
+    it('should not affect other providers when setting one', () => {
+      const { result } = renderHook(
+        () => ({
+          openaiExpanded: useModelProviderListExpanded('openai'),
+          anthropicExpanded: useModelProviderListExpanded('anthropic'),
+          setOpenai: useSetModelProviderListExpanded('openai'),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.setOpenai(true)
+      })
+
+      expect(result.current.openaiExpanded).toBe(true)
+      expect(result.current.anthropicExpanded).toBe(false)
+    })
+  })
+
+  // Expand hook: expands any provider by name
+  describe('useExpandModelProviderList', () => {
+    it('should expand the specified provider', () => {
+      const { result } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('google'),
+          expand: useExpandModelProviderList(),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.expand('google')
+      })
+
+      expect(result.current.expanded).toBe(true)
+    })
+
+    it('should expand multiple providers independently', () => {
+      const { result } = renderHook(
+        () => ({
+          openaiExpanded: useModelProviderListExpanded('openai'),
+          anthropicExpanded: useModelProviderListExpanded('anthropic'),
+          expand: useExpandModelProviderList(),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.expand('openai')
+      })
+      act(() => {
+        result.current.expand('anthropic')
+      })
+
+      expect(result.current.openaiExpanded).toBe(true)
+      expect(result.current.anthropicExpanded).toBe(true)
+    })
+
+    it('should not collapse already expanded providers when expanding another', () => {
+      const { result } = renderHook(
+        () => ({
+          openaiExpanded: useModelProviderListExpanded('openai'),
+          anthropicExpanded: useModelProviderListExpanded('anthropic'),
+          expand: useExpandModelProviderList(),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.expand('openai')
+      })
+      act(() => {
+        result.current.expand('anthropic')
+      })
+
+      expect(result.current.openaiExpanded).toBe(true)
+    })
+  })
+
+  // Reset hook: clears all expanded state back to empty
+  describe('useResetModelProviderListExpanded', () => {
+    it('should reset all expanded providers to false', () => {
+      const { result } = renderHook(
+        () => ({
+          openaiExpanded: useModelProviderListExpanded('openai'),
+          anthropicExpanded: useModelProviderListExpanded('anthropic'),
+          expand: useExpandModelProviderList(),
+          reset: useResetModelProviderListExpanded(),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.expand('openai')
+      })
+      act(() => {
+        result.current.expand('anthropic')
+      })
+      act(() => {
+        result.current.reset()
+      })
+
+      expect(result.current.openaiExpanded).toBe(false)
+      expect(result.current.anthropicExpanded).toBe(false)
+    })
+
+    it('should be safe to call when no providers are expanded', () => {
+      const { result } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('openai'),
+          reset: useResetModelProviderListExpanded(),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.reset()
+      })
+
+      expect(result.current.expanded).toBe(false)
+    })
+
+    it('should allow re-expanding providers after reset', () => {
+      const { result } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('openai'),
+          expand: useExpandModelProviderList(),
+          reset: useResetModelProviderListExpanded(),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.expand('openai')
+      })
+      act(() => {
+        result.current.reset()
+      })
+      act(() => {
+        result.current.expand('openai')
+      })
+
+      expect(result.current.expanded).toBe(true)
+    })
+  })
+
+  // Cross-hook interaction: verify hooks cooperate through the shared atom
+  describe('Cross-hook interaction', () => {
+    it('should reflect state set by useSetModelProviderListExpanded in useModelProviderListExpanded', () => {
+      const { result } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('openai'),
+          setExpanded: useSetModelProviderListExpanded('openai'),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.setExpanded(true)
+      })
+
+      expect(result.current.expanded).toBe(true)
+    })
+
+    it('should reflect state set by useExpandModelProviderList in useModelProviderListExpanded', () => {
+      const { result } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('anthropic'),
+          expand: useExpandModelProviderList(),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.expand('anthropic')
+      })
+
+      expect(result.current.expanded).toBe(true)
+    })
+
+    it('should allow useSetModelProviderListExpanded to collapse a provider expanded by useExpandModelProviderList', () => {
+      const { result } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('openai'),
+          expand: useExpandModelProviderList(),
+          setExpanded: useSetModelProviderListExpanded('openai'),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.expand('openai')
+      })
+      expect(result.current.expanded).toBe(true)
+
+      act(() => {
+        result.current.setExpanded(false)
+      })
+      expect(result.current.expanded).toBe(false)
+    })
+
+    it('should reset state set by useSetModelProviderListExpanded via useResetModelProviderListExpanded', () => {
+      const { result } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('openai'),
+          setExpanded: useSetModelProviderListExpanded('openai'),
+          reset: useResetModelProviderListExpanded(),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.setExpanded(true)
+      })
+      act(() => {
+        result.current.reset()
+      })
+
+      expect(result.current.expanded).toBe(false)
+    })
+  })
+
+  // selectAtom granularity: changing one provider should not affect unrelated reads
+  describe('selectAtom granularity', () => {
+    it('should not cause unrelated provider reads to change when one provider is toggled', () => {
+      const { result } = renderHook(
+        () => ({
+          openai: useModelProviderListExpanded('openai'),
+          anthropic: useModelProviderListExpanded('anthropic'),
+          google: useModelProviderListExpanded('google'),
+          setOpenai: useSetModelProviderListExpanded('openai'),
+        }),
+        { wrapper },
+      )
+
+      const anthropicBefore = result.current.anthropic
+      const googleBefore = result.current.google
+
+      act(() => {
+        result.current.setOpenai(true)
+      })
+
+      expect(result.current.openai).toBe(true)
+      expect(result.current.anthropic).toBe(anthropicBefore)
+      expect(result.current.google).toBe(googleBefore)
+    })
+
+    it('should keep individual provider states independent across multiple expansions and collapses', () => {
+      const { result } = renderHook(
+        () => ({
+          openai: useModelProviderListExpanded('openai'),
+          anthropic: useModelProviderListExpanded('anthropic'),
+          setOpenai: useSetModelProviderListExpanded('openai'),
+          setAnthropic: useSetModelProviderListExpanded('anthropic'),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.setOpenai(true)
+      })
+      act(() => {
+        result.current.setAnthropic(true)
+      })
+      act(() => {
+        result.current.setOpenai(false)
+      })
+
+      expect(result.current.openai).toBe(false)
+      expect(result.current.anthropic).toBe(true)
+    })
+  })
+
+  // Isolation: separate Provider instances have independent state
+  describe('Provider isolation', () => {
+    it('should have independent state across different Provider instances', () => {
+      const wrapper1 = createWrapper()
+      const wrapper2 = createWrapper()
+
+      const { result: result1 } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('openai'),
+          setExpanded: useSetModelProviderListExpanded('openai'),
+        }),
+        { wrapper: wrapper1 },
+      )
+
+      const { result: result2 } = renderHook(
+        () => useModelProviderListExpanded('openai'),
+        { wrapper: wrapper2 },
+      )
+
+      act(() => {
+        result1.current.setExpanded(true)
+      })
+
+      expect(result1.current.expanded).toBe(true)
+      expect(result2.current).toBe(false)
+    })
+  })
+})

web/app/components/header/account-setting/model-provider-page/atoms.ts

@@ -0,0 +1,35 @@
+import { atom, useAtomValue, useSetAtom } from 'jotai'
+import { selectAtom } from 'jotai/utils'
+import { useCallback, useMemo } from 'react'
+
+const expandedAtom = atom<Record<string, boolean>>({})
+
+export function useModelProviderListExpanded(providerName: string) {
+  return useAtomValue(
+    useMemo(
+      () => selectAtom(expandedAtom, s => !!s[providerName]),
+      [providerName],
+    ),
+  )
+}
+
+export function useSetModelProviderListExpanded(providerName: string) {
+  const set = useSetAtom(expandedAtom)
+  return useCallback(
+    (expanded: boolean) => set(prev => ({ ...prev, [providerName]: expanded })),
+    [providerName, set],
+  )
+}
+
+export function useExpandModelProviderList() {
+  const set = useSetAtom(expandedAtom)
+  return useCallback(
+    (providerName: string) => set(prev => ({ ...prev, [providerName]: true })),
+    [set],
+  )
+}
+
+export function useResetModelProviderListExpanded() {
+  const set = useSetAtom(expandedAtom)
+  return useCallback(() => set({}), [set])
+}

web/app/components/header/account-setting/model-provider-page/hooks.spec.ts

@@ -9,6 +9,7 @@ import type {
 } from './declarations'
 import { act, renderHook, waitFor } from '@testing-library/react'
 import { useLocale } from '@/context/i18n'
+import { consoleQuery } from '@/service/client'
 import { fetchDefaultModal, fetchModelList, fetchModelProviderCredentials } from '@/service/common'
 import {
   ConfigurationMethodEnum,
@@ -23,6 +24,7 @@ import {
   useAnthropicBuyQuota,
   useCurrentProviderAndModel,
   useDefaultModel,
+  useInvalidateDefaultModel,
   useLanguage,
   useMarketplaceAllPlugins,
   useModelList,
@@ -36,7 +38,6 @@ import {
   useUpdateModelList,
   useUpdateModelProviders,
 } from './hooks'
-import { UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST } from './provider-added-card'
 
 // Mock dependencies
 vi.mock('@tanstack/react-query', () => ({
@@ -78,14 +79,6 @@ vi.mock('@/context/modal-context', () => ({
   }),
 }))
 
-vi.mock('@/context/event-emitter', () => ({
-  useEventEmitterContextContext: vi.fn(() => ({
-    eventEmitter: {
-      emit: vi.fn(),
-    },
-  })),
-}))
-
 vi.mock('@/app/components/plugins/marketplace/hooks', () => ({
   useMarketplacePlugins: vi.fn(() => ({
     plugins: [],
@@ -99,12 +92,16 @@ vi.mock('@/app/components/plugins/marketplace/hooks', () => ({
   })),
 }))
 
+vi.mock('./atoms', () => ({
+  useExpandModelProviderList: vi.fn(() => vi.fn()),
+}))
+
 const { useQuery, useQueryClient } = await import('@tanstack/react-query')
 const { getPayUrl } = await import('@/service/common')
 const { useProviderContext } = await import('@/context/provider-context')
 const { useModalContextSelector } = await import('@/context/modal-context')
-const { useEventEmitterContextContext } = await import('@/context/event-emitter')
 const { useMarketplacePlugins, useMarketplacePluginsByCollectionId } = await import('@/app/components/plugins/marketplace/hooks')
+const { useExpandModelProviderList } = await import('./atoms')
 
 describe('hooks', () => {
   beforeEach(() => {
@@ -913,6 +910,38 @@ describe('hooks', () => {
     })
   })
 
+  describe('useInvalidateDefaultModel', () => {
+    it('should invalidate default model queries', () => {
+      const invalidateQueries = vi.fn()
+        ; (useQueryClient as Mock).mockReturnValue({ invalidateQueries })
+
+      const { result } = renderHook(() => useInvalidateDefaultModel())
+
+      act(() => {
+        result.current(ModelTypeEnum.textGeneration)
+      })
+
+      expect(invalidateQueries).toHaveBeenCalledWith({
+        queryKey: ['default-model', ModelTypeEnum.textGeneration],
+      })
+    })
+
+    it('should handle multiple model types', () => {
+      const invalidateQueries = vi.fn()
+        ; (useQueryClient as Mock).mockReturnValue({ invalidateQueries })
+
+      const { result } = renderHook(() => useInvalidateDefaultModel())
+
+      act(() => {
+        result.current(ModelTypeEnum.textGeneration)
+        result.current(ModelTypeEnum.textEmbedding)
+        result.current(ModelTypeEnum.rerank)
+      })
+
+      expect(invalidateQueries).toHaveBeenCalledTimes(3)
+    })
+  })
+
   describe('useAnthropicBuyQuota', () => {
     beforeEach(() => {
       Object.defineProperty(window, 'location', {
@@ -1275,39 +1304,52 @@ describe('hooks', () => {
 
     it('should refresh providers and model lists', () => {
       const invalidateQueries = vi.fn()
-      const emit = vi.fn()
 
         ; (useQueryClient as Mock).mockReturnValue({ invalidateQueries })
-      ; (useEventEmitterContextContext as Mock).mockReturnValue({
-        eventEmitter: { emit },
-      })
 
       const provider = createMockProvider()
+      const modelProviderModelListQueryKey = consoleQuery.modelProviders.models.queryKey({
+        input: {
+          params: {
+            provider: provider.provider,
+          },
+        },
+      })
       const { result } = renderHook(() => useRefreshModel())
 
       act(() => {
         result.current.handleRefreshModel(provider)
       })
 
+      expect(invalidateQueries).toHaveBeenCalledWith({
+        queryKey: modelProviderModelListQueryKey,
+        exact: true,
+        refetchType: 'none',
+      })
       expect(invalidateQueries).toHaveBeenCalledWith({ queryKey: ['model-providers'] })
       expect(invalidateQueries).toHaveBeenCalledWith({ queryKey: ['model-list', ModelTypeEnum.textGeneration] })
       expect(invalidateQueries).toHaveBeenCalledWith({ queryKey: ['model-list', ModelTypeEnum.textEmbedding] })
     })
 
-    it('should emit event when refreshModelList is true and custom config is active', () => {
+    it('should expand target provider list when refreshModelList is true and custom config is active', () => {
       const invalidateQueries = vi.fn()
-      const emit = vi.fn()
+      const expandModelProviderList = vi.fn()
 
         ; (useQueryClient as Mock).mockReturnValue({ invalidateQueries })
-      ; (useEventEmitterContextContext as Mock).mockReturnValue({
-        eventEmitter: { emit },
-      })
+      ; (useExpandModelProviderList as Mock).mockReturnValue(expandModelProviderList)
 
       const provider = createMockProvider()
       const customFields: CustomConfigurationModelFixedFields = {
         __model_name: 'gpt-4',
         __model_type: ModelTypeEnum.textGeneration,
       }
+      const modelProviderModelListQueryKey = consoleQuery.modelProviders.models.queryKey({
+        input: {
+          params: {
+            provider: provider.provider,
+          },
+        },
+      })
 
       const { result } = renderHook(() => useRefreshModel())
 
@@ -1315,23 +1357,30 @@ describe('hooks', () => {
         result.current.handleRefreshModel(provider, customFields, true)
       })
 
-      expect(emit).toHaveBeenCalledWith({
-        type: UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST,
-        payload: 'openai',
+      expect(expandModelProviderList).toHaveBeenCalledWith('openai')
+      expect(invalidateQueries).toHaveBeenCalledWith({
+        queryKey: modelProviderModelListQueryKey,
+        exact: true,
+        refetchType: 'active',
       })
       expect(invalidateQueries).toHaveBeenCalledWith({ queryKey: ['model-list', ModelTypeEnum.textGeneration] })
     })
 
-    it('should not emit event when custom config is not active', () => {
+    it('should not expand provider list when custom config is not active', () => {
       const invalidateQueries = vi.fn()
-      const emit = vi.fn()
+      const expandModelProviderList = vi.fn()
 
         ; (useQueryClient as Mock).mockReturnValue({ invalidateQueries })
-      ; (useEventEmitterContextContext as Mock).mockReturnValue({
-        eventEmitter: { emit },
-      })
+      ; (useExpandModelProviderList as Mock).mockReturnValue(expandModelProviderList)
 
       const provider = { ...createMockProvider(), custom_configuration: { status: CustomConfigurationStatusEnum.noConfigure } }
+      const modelProviderModelListQueryKey = consoleQuery.modelProviders.models.queryKey({
+        input: {
+          params: {
+            provider: provider.provider,
+          },
+        },
+      })
 
       const { result } = renderHook(() => useRefreshModel())
 
@@ -1339,17 +1388,43 @@ describe('hooks', () => {
         result.current.handleRefreshModel(provider, undefined, true)
       })
 
-      expect(emit).not.toHaveBeenCalled()
+      expect(expandModelProviderList).not.toHaveBeenCalled()
+      expect(invalidateQueries).not.toHaveBeenCalledWith({
+        queryKey: modelProviderModelListQueryKey,
+        exact: true,
+        refetchType: 'active',
+      })
     })
 
-    it('should emit event and invalidate all supported model types when __model_type is undefined', () => {
+    it('should refetch active model provider list when custom refresh callback is absent', () => {
+      const invalidateQueries = vi.fn()
+      ; (useQueryClient as Mock).mockReturnValue({ invalidateQueries })
+
+      const provider = createMockProvider()
+      const modelProviderModelListQueryKey = consoleQuery.modelProviders.models.queryKey({
+        input: {
+          params: {
+            provider: provider.provider,
+          },
+        },
+      })
+      const { result } = renderHook(() => useRefreshModel())
+
+      act(() => {
+        result.current.handleRefreshModel(provider, undefined, true)
+      })
+
+      expect(invalidateQueries).toHaveBeenCalledWith({
+        queryKey: modelProviderModelListQueryKey,
+        exact: true,
+        refetchType: 'active',
+      })
+    })
+
+    it('should invalidate all supported model types when __model_type is undefined', () => {
       const invalidateQueries = vi.fn()
-      const emit = vi.fn()
 
         ; (useQueryClient as Mock).mockReturnValue({ invalidateQueries })
-      ; (useEventEmitterContextContext as Mock).mockReturnValue({
-        eventEmitter: { emit },
-      })
 
       const provider = createMockProvider()
       const customFields = { __model_name: 'my-model', __model_type: undefined } as unknown as CustomConfigurationModelFixedFields
@@ -1360,11 +1435,7 @@ describe('hooks', () => {
         result.current.handleRefreshModel(provider, customFields, true)
       })
 
-      expect(emit).toHaveBeenCalledWith({
-        type: UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST,
-        payload: 'openai',
-      })
-      // When __model_type is undefined, all supported model types are invalidated
+      // When __model_type is undefined, all supported model types are invalidated.
       const modelListCalls = invalidateQueries.mock.calls.filter(
         call => call[0]?.queryKey?.[0] === 'model-list',
       )
@@ -1375,9 +1446,6 @@ describe('hooks', () => {
       const invalidateQueries = vi.fn()
 
         ; (useQueryClient as Mock).mockReturnValue({ invalidateQueries })
-      ; (useEventEmitterContextContext as Mock).mockReturnValue({
-        eventEmitter: { emit: vi.fn() },
-      })
 
       const provider = {
         ...createMockProvider(),

web/app/components/header/account-setting/model-provider-page/hooks.ts

@@ -21,10 +21,10 @@ import {
   useMarketplacePluginsByCollectionId,
 } from '@/app/components/plugins/marketplace/hooks'
 import { PluginCategoryEnum } from '@/app/components/plugins/types'
-import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { useLocale } from '@/context/i18n'
 import { useModalContextSelector } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
+import { consoleQuery } from '@/service/client'
 import {
   fetchDefaultModal,
   fetchModelList,
@@ -32,12 +32,12 @@ import {
   getPayUrl,
 } from '@/service/common'
 import { commonQueryKeys } from '@/service/use-common'
+import { useExpandModelProviderList } from './atoms'
 import {
   ConfigurationMethodEnum,
   CustomConfigurationStatusEnum,
   ModelStatusEnum,
 } from './declarations'
-import { UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST } from './provider-added-card'
 
 type UseDefaultModelAndModelList = (
   defaultModel: DefaultModelResponse | undefined,
@@ -57,15 +57,21 @@ export const useSystemDefaultModelAndModelList: UseDefaultModelAndModelList = (
 
     return currentDefaultModel
   }, [defaultModel, modelList])
+  const currentDefaultModelKey = currentDefaultModel
+    ? `${currentDefaultModel.provider}:${currentDefaultModel.model}`
+    : ''
   const [defaultModelState, setDefaultModelState] = useState<DefaultModel | undefined>(currentDefaultModel)
-  const handleDefaultModelChange = useCallback((model: DefaultModel) => {
-    setDefaultModelState(model)
-  }, [])
-  useEffect(() => {
-    setDefaultModelState(currentDefaultModel)
-  }, [currentDefaultModel])
+  const [defaultModelSourceKey, setDefaultModelSourceKey] = useState(currentDefaultModelKey)
+  const selectedDefaultModel = defaultModelSourceKey === currentDefaultModelKey
+    ? defaultModelState
+    : currentDefaultModel
 
-  return [defaultModelState, handleDefaultModelChange]
+  const handleDefaultModelChange = useCallback((model: DefaultModel) => {
+    setDefaultModelSourceKey(currentDefaultModelKey)
+    setDefaultModelState(model)
+  }, [currentDefaultModelKey])
+
+  return [selectedDefaultModel, handleDefaultModelChange]
 }
 
 export const useLanguage = () => {
@@ -116,7 +122,7 @@ export const useProviderCredentialsAndLoadBalancing = (
     predefinedFormSchemasValue?.credentials,
   ])
 
-  const mutate = useMemo(() => () => {
+  const mutate = useCallback(() => {
     if (predefinedEnabled)
       queryClient.invalidateQueries({ queryKey: ['model-providers', 'credentials', provider, credentialId] })
     if (customEnabled)
@@ -222,6 +228,14 @@ export const useUpdateModelList = () => {
   return updateModelList
 }
 
+export const useInvalidateDefaultModel = () => {
+  const queryClient = useQueryClient()
+
+  return useCallback((type: ModelTypeEnum) => {
+    queryClient.invalidateQueries({ queryKey: commonQueryKeys.defaultModel(type) })
+  }, [queryClient])
+}
+
 export const useAnthropicBuyQuota = () => {
   const [loading, setLoading] = useState(false)
 
@@ -314,7 +328,8 @@ export const useMarketplaceAllPlugins = (providers: ModelProvider[], searchText:
 }
 
 export const useRefreshModel = () => {
-  const { eventEmitter } = useEventEmitterContextContext()
+  const expandModelProviderList = useExpandModelProviderList()
+  const queryClient = useQueryClient()
   const updateModelProviders = useUpdateModelProviders()
   const updateModelList = useUpdateModelList()
   const handleRefreshModel = useCallback((
@@ -322,6 +337,19 @@ export const useRefreshModel = () => {
     CustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields,
     refreshModelList?: boolean,
   ) => {
+    const modelProviderModelListQueryKey = consoleQuery.modelProviders.models.queryKey({
+      input: {
+        params: {
+          provider: provider.provider,
+        },
+      },
+    })
+    queryClient.invalidateQueries({
+      queryKey: modelProviderModelListQueryKey,
+      exact: true,
+      refetchType: 'none',
+    })
+
     updateModelProviders()
 
     provider.supported_model_types.forEach((type) => {
@@ -329,15 +357,17 @@ export const useRefreshModel = () => {
     })
 
     if (refreshModelList && provider.custom_configuration.status === CustomConfigurationStatusEnum.active) {
-      eventEmitter?.emit({
-        type: UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST,
-        payload: provider.provider,
-      } as any)
+      expandModelProviderList(provider.provider)
+      queryClient.invalidateQueries({
+        queryKey: modelProviderModelListQueryKey,
+        exact: true,
+        refetchType: 'active',
+      })
 
       if (CustomConfigurationModelFixedFields?.__model_type)
         updateModelList(CustomConfigurationModelFixedFields.__model_type)
     }
-  }, [eventEmitter, updateModelList, updateModelProviders])
+  }, [expandModelProviderList, queryClient, updateModelList, updateModelProviders])
 
   return {
     handleRefreshModel,

web/app/components/header/account-setting/model-provider-page/index.spec.tsx

@@ -7,16 +7,7 @@ import {
 } from './declarations'
 import ModelProviderPage from './index'
 
-vi.mock('@/context/app-context', () => ({
-  useAppContext: () => ({
-    mutateCurrentWorkspace: vi.fn(),
-    isValidatingCurrentWorkspace: false,
-  }),
-}))
-
-const mockGlobalState = {
-  systemFeatures: { enable_marketplace: true },
-}
+let mockEnableMarketplace = true
 
 const mockQuotaConfig = {
   quota_type: CurrentSystemQuotaTypeEnum.free,
@@ -28,7 +19,11 @@ const mockQuotaConfig = {
 }
 
 vi.mock('@/context/global-public-context', () => ({
-  useGlobalPublicStore: (selector: (s: { systemFeatures: { enable_marketplace: boolean } }) => unknown) => selector(mockGlobalState),
+  useSystemFeaturesQuery: () => ({
+    data: {
+      enable_marketplace: mockEnableMarketplace,
+    },
+  }),
 }))
 
 const mockProviders = [
@@ -60,21 +55,16 @@ vi.mock('@/context/provider-context', () => ({
   }),
 }))
 
-type MockDefaultModelData = {
-  model: string
-  provider?: { provider: string }
-} | null
-
-const mockDefaultModelState: {
-  data: MockDefaultModelData
-  isLoading: boolean
-} = {
-  data: null,
-  isLoading: false,
+const mockDefaultModels: Record<string, { data: unknown, isLoading: boolean }> = {
+  'llm': { data: null, isLoading: false },
+  'text-embedding': { data: null, isLoading: false },
+  'rerank': { data: null, isLoading: false },
+  'speech2text': { data: null, isLoading: false },
+  'tts': { data: null, isLoading: false },
 }
 
 vi.mock('./hooks', () => ({
-  useDefaultModel: () => mockDefaultModelState,
+  useDefaultModel: (type: string) => mockDefaultModels[type] ?? { data: null, isLoading: false },
 }))
 
 vi.mock('./install-from-marketplace', () => ({
@@ -93,13 +83,18 @@ vi.mock('./system-model-selector', () => ({
   default: () => <div data-testid="system-model-selector" />,
 }))
 
+vi.mock('@/service/use-plugins', () => ({
+  useCheckInstalled: () => ({ data: undefined }),
+}))
+
 describe('ModelProviderPage', () => {
   beforeEach(() => {
     vi.useFakeTimers()
     vi.clearAllMocks()
-    mockGlobalState.systemFeatures.enable_marketplace = true
-    mockDefaultModelState.data = null
-    mockDefaultModelState.isLoading = false
+    mockEnableMarketplace = true
+    Object.keys(mockDefaultModels).forEach((key) => {
+      mockDefaultModels[key] = { data: null, isLoading: false }
+    })
     mockProviders.splice(0, mockProviders.length, {
       provider: 'openai',
       label: { en_US: 'OpenAI' },
@@ -157,13 +152,76 @@ describe('ModelProviderPage', () => {
   })
 
   it('should hide marketplace section when marketplace feature is disabled', () => {
-    mockGlobalState.systemFeatures.enable_marketplace = false
+    mockEnableMarketplace = false
 
     render(<ModelProviderPage searchText="" />)
 
     expect(screen.queryByTestId('install-from-marketplace')).not.toBeInTheDocument()
   })
 
+  describe('system model config status', () => {
+    it('should not show top warning when no configured providers exist (empty state card handles it)', () => {
+      mockProviders.splice(0, mockProviders.length, {
+        provider: 'anthropic',
+        label: { en_US: 'Anthropic' },
+        custom_configuration: { status: CustomConfigurationStatusEnum.noConfigure },
+        system_configuration: {
+          enabled: false,
+          current_quota_type: CurrentSystemQuotaTypeEnum.free,
+          quota_configurations: [mockQuotaConfig],
+        },
+      })
+
+      render(<ModelProviderPage searchText="" />)
+      expect(screen.queryByText('common.modelProvider.noneConfigured')).not.toBeInTheDocument()
+      expect(screen.queryByText('common.modelProvider.notConfigured')).not.toBeInTheDocument()
+      expect(screen.getByText('common.modelProvider.emptyProviderTitle')).toBeInTheDocument()
+    })
+
+    it('should show none-configured warning when providers exist but no default models set', () => {
+      render(<ModelProviderPage searchText="" />)
+      expect(screen.getByText('common.modelProvider.noneConfigured')).toBeInTheDocument()
+    })
+
+    it('should show partially-configured warning when some default models are set', () => {
+      mockDefaultModels.llm = {
+        data: { model: 'gpt-4', model_type: 'llm', provider: { provider: 'openai', icon_small: { en_US: '' } } },
+        isLoading: false,
+      }
+
+      render(<ModelProviderPage searchText="" />)
+      expect(screen.getByText('common.modelProvider.notConfigured')).toBeInTheDocument()
+    })
+
+    it('should not show warning when all default models are configured', () => {
+      const makeModel = (model: string, type: string) => ({
+        data: { model, model_type: type, provider: { provider: 'openai', icon_small: { en_US: '' } } },
+        isLoading: false,
+      })
+      mockDefaultModels.llm = makeModel('gpt-4', 'llm')
+      mockDefaultModels['text-embedding'] = makeModel('text-embedding-3', 'text-embedding')
+      mockDefaultModels.rerank = makeModel('rerank-v3', 'rerank')
+      mockDefaultModels.speech2text = makeModel('whisper-1', 'speech2text')
+      mockDefaultModels.tts = makeModel('tts-1', 'tts')
+
+      render(<ModelProviderPage searchText="" />)
+      expect(screen.queryByText('common.modelProvider.noProviderInstalled')).not.toBeInTheDocument()
+      expect(screen.queryByText('common.modelProvider.noneConfigured')).not.toBeInTheDocument()
+      expect(screen.queryByText('common.modelProvider.notConfigured')).not.toBeInTheDocument()
+    })
+
+    it('should not show warning while loading', () => {
+      Object.keys(mockDefaultModels).forEach((key) => {
+        mockDefaultModels[key] = { data: null, isLoading: true }
+      })
+
+      render(<ModelProviderPage searchText="" />)
+      expect(screen.queryByText('common.modelProvider.noProviderInstalled')).not.toBeInTheDocument()
+      expect(screen.queryByText('common.modelProvider.noneConfigured')).not.toBeInTheDocument()
+      expect(screen.queryByText('common.modelProvider.notConfigured')).not.toBeInTheDocument()
+    })
+  })
+
   it('should prioritize fixed providers in visible order', () => {
     mockProviders.splice(0, mockProviders.length, {
       provider: 'zeta-provider',
@@ -204,129 +262,4 @@ describe('ModelProviderPage', () => {
     ])
     expect(screen.queryByText('common.modelProvider.toBeConfigured')).not.toBeInTheDocument()
   })
-
-  it('should show not configured alert when all default models are absent', () => {
-    mockDefaultModelState.data = null
-    mockDefaultModelState.isLoading = false
-
-    render(<ModelProviderPage searchText="" />)
-
-    expect(screen.getByText('common.modelProvider.notConfigured')).toBeInTheDocument()
-  })
-
-  it('should not show not configured alert when default model is loading', () => {
-    mockDefaultModelState.data = null
-    mockDefaultModelState.isLoading = true
-
-    render(<ModelProviderPage searchText="" />)
-
-    expect(screen.queryByText('common.modelProvider.notConfigured')).not.toBeInTheDocument()
-  })
-
-  it('should filter providers by label text', () => {
-    render(<ModelProviderPage searchText="OpenAI" />)
-    act(() => {
-      vi.advanceTimersByTime(600)
-    })
-    expect(screen.getByText('openai')).toBeInTheDocument()
-    expect(screen.queryByText('anthropic')).not.toBeInTheDocument()
-  })
-
-  it('should classify system-enabled providers with matching quota as configured', () => {
-    mockProviders.splice(0, mockProviders.length, {
-      provider: 'sys-provider',
-      label: { en_US: 'System Provider' },
-      custom_configuration: { status: CustomConfigurationStatusEnum.noConfigure },
-      system_configuration: {
-        enabled: true,
-        current_quota_type: CurrentSystemQuotaTypeEnum.free,
-        quota_configurations: [mockQuotaConfig],
-      },
-    })
-
-    render(<ModelProviderPage searchText="" />)
-
-    expect(screen.getByText('sys-provider')).toBeInTheDocument()
-    expect(screen.queryByText('common.modelProvider.toBeConfigured')).not.toBeInTheDocument()
-  })
-
-  it('should classify system-enabled provider with no matching quota as not configured', () => {
-    mockProviders.splice(0, mockProviders.length, {
-      provider: 'sys-no-quota',
-      label: { en_US: 'System No Quota' },
-      custom_configuration: { status: CustomConfigurationStatusEnum.noConfigure },
-      system_configuration: {
-        enabled: true,
-        current_quota_type: CurrentSystemQuotaTypeEnum.free,
-        quota_configurations: [],
-      },
-    })
-
-    render(<ModelProviderPage searchText="" />)
-
-    expect(screen.getByText('sys-no-quota')).toBeInTheDocument()
-    expect(screen.getByText('common.modelProvider.toBeConfigured')).toBeInTheDocument()
-  })
-
-  it('should preserve order of two non-fixed providers (sort returns 0)', () => {
-    mockProviders.splice(0, mockProviders.length, {
-      provider: 'alpha-provider',
-      label: { en_US: 'Alpha Provider' },
-      custom_configuration: { status: CustomConfigurationStatusEnum.active },
-      system_configuration: {
-        enabled: false,
-        current_quota_type: CurrentSystemQuotaTypeEnum.free,
-        quota_configurations: [mockQuotaConfig],
-      },
-    }, {
-      provider: 'beta-provider',
-      label: { en_US: 'Beta Provider' },
-      custom_configuration: { status: CustomConfigurationStatusEnum.active },
-      system_configuration: {
-        enabled: false,
-        current_quota_type: CurrentSystemQuotaTypeEnum.free,
-        quota_configurations: [mockQuotaConfig],
-      },
-    })
-
-    render(<ModelProviderPage searchText="" />)
-
-    const renderedProviders = screen.getAllByTestId('provider-card').map(item => item.textContent)
-    expect(renderedProviders).toEqual(['alpha-provider', 'beta-provider'])
-  })
-
-  it('should not show not configured alert when shared default model mock has data', () => {
-    mockDefaultModelState.data = { model: 'embed-model' }
-
-    render(<ModelProviderPage searchText="" />)
-
-    expect(screen.queryByText('common.modelProvider.notConfigured')).not.toBeInTheDocument()
-  })
-
-  it('should not show not configured alert when rerankDefaultModel has data', () => {
-    mockDefaultModelState.data = { model: 'rerank-model', provider: { provider: 'cohere' } }
-    mockDefaultModelState.isLoading = false
-
-    render(<ModelProviderPage searchText="" />)
-
-    expect(screen.queryByText('common.modelProvider.notConfigured')).not.toBeInTheDocument()
-  })
-
-  it('should not show not configured alert when ttsDefaultModel has data', () => {
-    mockDefaultModelState.data = { model: 'tts-model', provider: { provider: 'openai' } }
-    mockDefaultModelState.isLoading = false
-
-    render(<ModelProviderPage searchText="" />)
-
-    expect(screen.queryByText('common.modelProvider.notConfigured')).not.toBeInTheDocument()
-  })
-
-  it('should not show not configured alert when speech2textDefaultModel has data', () => {
-    mockDefaultModelState.data = { model: 'whisper', provider: { provider: 'openai' } }
-    mockDefaultModelState.isLoading = false
-
-    render(<ModelProviderPage searchText="" />)
-
-    expect(screen.queryByText('common.modelProvider.notConfigured')).not.toBeInTheDocument()
-  })
 })

web/app/components/header/account-setting/model-provider-page/index.tsx

@@ -1,17 +1,14 @@
 import type {
   ModelProvider,
 } from './declarations'
-import {
-  RiAlertFill,
-  RiBrainLine,
-} from '@remixicon/react'
+import type { PluginDetail } from '@/app/components/plugins/types'
 import { useDebounce } from 'ahooks'
-import { useEffect, useMemo } from 'react'
+import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { IS_CLOUD_EDITION } from '@/config'
-import { useAppContext } from '@/context/app-context'
-import { useGlobalPublicStore } from '@/context/global-public-context'
+import { useSystemFeaturesQuery } from '@/context/global-public-context'
 import { useProviderContext } from '@/context/provider-context'
+import { useCheckInstalled } from '@/service/use-plugins'
 import { cn } from '@/utils/classnames'
 import {
   CustomConfigurationStatusEnum,
@@ -24,6 +21,9 @@ import InstallFromMarketplace from './install-from-marketplace'
 import ProviderAddedCard from './provider-added-card'
 import QuotaPanel from './provider-added-card/quota-panel'
 import SystemModelSelector from './system-model-selector'
+import { providerToPluginId } from './utils'
+
+type SystemModelConfigStatus = 'no-provider' | 'none-configured' | 'partially-configured' | 'fully-configured'
 
 type Props = {
   searchText: string
@@ -34,20 +34,35 @@ const FixedModelProvider = ['langgenius/openai/openai', 'langgenius/anthropic/an
 const ModelProviderPage = ({ searchText }: Props) => {
   const debouncedSearchText = useDebounce(searchText, { wait: 500 })
   const { t } = useTranslation()
-  const { mutateCurrentWorkspace, isValidatingCurrentWorkspace } = useAppContext()
   const { data: textGenerationDefaultModel, isLoading: isTextGenerationDefaultModelLoading } = useDefaultModel(ModelTypeEnum.textGeneration)
   const { data: embeddingsDefaultModel, isLoading: isEmbeddingsDefaultModelLoading } = useDefaultModel(ModelTypeEnum.textEmbedding)
   const { data: rerankDefaultModel, isLoading: isRerankDefaultModelLoading } = useDefaultModel(ModelTypeEnum.rerank)
   const { data: speech2textDefaultModel, isLoading: isSpeech2textDefaultModelLoading } = useDefaultModel(ModelTypeEnum.speech2text)
   const { data: ttsDefaultModel, isLoading: isTTSDefaultModelLoading } = useDefaultModel(ModelTypeEnum.tts)
   const { modelProviders: providers } = useProviderContext()
-  const { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures)
+  const { data: systemFeatures } = useSystemFeaturesQuery()
+
+  const allPluginIds = useMemo(() => {
+    return [...new Set(providers.map(p => providerToPluginId(p.provider)).filter(Boolean))]
+  }, [providers])
+  const { data: installedPlugins } = useCheckInstalled({
+    pluginIds: allPluginIds,
+    enabled: allPluginIds.length > 0,
+  })
+  const pluginDetailMap = useMemo(() => {
+    const map = new Map<string, PluginDetail>()
+    if (installedPlugins?.plugins) {
+      for (const plugin of installedPlugins.plugins)
+        map.set(plugin.plugin_id, plugin)
+    }
+    return map
+  }, [installedPlugins])
+  const enableMarketplace = systemFeatures?.enable_marketplace ?? false
   const isDefaultModelLoading = isTextGenerationDefaultModelLoading
     || isEmbeddingsDefaultModelLoading
     || isRerankDefaultModelLoading
     || isSpeech2textDefaultModelLoading
     || isTTSDefaultModelLoading
-  const defaultModelNotConfigured = !isDefaultModelLoading && !textGenerationDefaultModel && !embeddingsDefaultModel && !speech2textDefaultModel && !rerankDefaultModel && !ttsDefaultModel
   const [configuredProviders, notConfiguredProviders] = useMemo(() => {
     const configuredProviders: ModelProvider[] = []
     const notConfiguredProviders: ModelProvider[] = []
@@ -79,6 +94,26 @@ const ModelProviderPage = ({ searchText }: Props) => {
 
     return [configuredProviders, notConfiguredProviders]
   }, [providers])
+
+  const systemModelConfigStatus: SystemModelConfigStatus = useMemo(() => {
+    const defaultModels = [textGenerationDefaultModel, embeddingsDefaultModel, rerankDefaultModel, speech2textDefaultModel, ttsDefaultModel]
+    const configuredCount = defaultModels.filter(Boolean).length
+    if (configuredCount === 0 && configuredProviders.length === 0)
+      return 'no-provider'
+    if (configuredCount === 0)
+      return 'none-configured'
+    if (configuredCount < defaultModels.length)
+      return 'partially-configured'
+    return 'fully-configured'
+  }, [configuredProviders, textGenerationDefaultModel, embeddingsDefaultModel, rerankDefaultModel, speech2textDefaultModel, ttsDefaultModel])
+  const warningTextKey
+    = systemModelConfigStatus === 'none-configured'
+      ? 'modelProvider.noneConfigured'
+      : systemModelConfigStatus === 'partially-configured'
+        ? 'modelProvider.notConfigured'
+        : null
+  const showWarning = !isDefaultModelLoading && !!warningTextKey
+
   const [filteredConfiguredProviders, filteredNotConfiguredProviders] = useMemo(() => {
     const filteredConfiguredProviders = configuredProviders.filter(
       provider => provider.provider.toLowerCase().includes(debouncedSearchText.toLowerCase())
@@ -92,28 +127,24 @@ const ModelProviderPage = ({ searchText }: Props) => {
     return [filteredConfiguredProviders, filteredNotConfiguredProviders]
   }, [configuredProviders, debouncedSearchText, notConfiguredProviders])
 
-  useEffect(() => {
-    mutateCurrentWorkspace()
-  }, [mutateCurrentWorkspace])
-
   return (
     <div className="relative -mt-2 pt-1">
       <div className={cn('mb-2 flex items-center')}>
         <div className="grow text-text-primary system-md-semibold">{t('modelProvider.models', { ns: 'common' })}</div>
         <div className={cn(
           'relative flex shrink-0 items-center justify-end gap-2 rounded-lg border border-transparent p-px',
-          defaultModelNotConfigured && 'border-components-panel-border bg-components-panel-bg-blur pl-2 shadow-xs',
+          showWarning && 'border-components-panel-border bg-components-panel-bg-blur pl-2 shadow-xs',
         )}
         >
-          {defaultModelNotConfigured && <div className="absolute bottom-0 left-0 right-0 top-0 opacity-40" style={{ background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%)' }} />}
-          {defaultModelNotConfigured && (
+          {showWarning && <div className="absolute bottom-0 left-0 right-0 top-0 opacity-40" style={{ background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%)' }} />}
+          {showWarning && (
             <div className="flex items-center gap-1 text-text-primary system-xs-medium">
-              <RiAlertFill className="h-4 w-4 text-text-warning-secondary" />
-              <span className="max-w-[460px] truncate" title={t('modelProvider.notConfigured', { ns: 'common' })}>{t('modelProvider.notConfigured', { ns: 'common' })}</span>
+              <span className="i-ri-alert-fill h-4 w-4 text-text-warning-secondary" />
+              <span className="max-w-[460px] truncate" title={t(warningTextKey, { ns: 'common' })}>{t(warningTextKey, { ns: 'common' })}</span>
             </div>
           )}
           <SystemModelSelector
-            notConfigured={defaultModelNotConfigured}
+            notConfigured={showWarning}
             textGenerationDefaultModel={textGenerationDefaultModel}
             embeddingsDefaultModel={embeddingsDefaultModel}
             rerankDefaultModel={rerankDefaultModel}
@@ -123,11 +154,11 @@ const ModelProviderPage = ({ searchText }: Props) => {
           />
         </div>
       </div>
-      {IS_CLOUD_EDITION && <QuotaPanel providers={providers} isLoading={isValidatingCurrentWorkspace} />}
+      {IS_CLOUD_EDITION && <QuotaPanel providers={providers} />}
       {!filteredConfiguredProviders?.length && (
         <div className="mb-2 rounded-[10px] bg-workflow-process-bg p-4">
           <div className="flex h-10 w-10 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg backdrop-blur">
-            <RiBrainLine className="h-5 w-5 text-text-primary" />
+            <span className="i-ri-brain-line h-5 w-5 text-text-primary" />
           </div>
           <div className="mt-2 text-text-secondary system-sm-medium">{t('modelProvider.emptyProviderTitle', { ns: 'common' })}</div>
           <div className="mt-1 text-text-tertiary system-xs-regular">{t('modelProvider.emptyProviderTip', { ns: 'common' })}</div>
@@ -139,6 +170,7 @@ const ModelProviderPage = ({ searchText }: Props) => {
             <ProviderAddedCard
               key={provider.provider}
               provider={provider}
+              pluginDetail={pluginDetailMap.get(providerToPluginId(provider.provider))}
             />
           ))}
         </div>
@@ -152,13 +184,14 @@ const ModelProviderPage = ({ searchText }: Props) => {
                 notConfigured
                 key={provider.provider}
                 provider={provider}
+                pluginDetail={pluginDetailMap.get(providerToPluginId(provider.provider))}
               />
             ))}
           </div>
         </>
       )}
       {
-        enable_marketplace && (
+        enableMarketplace && (
           <InstallFromMarketplace
             providers={providers}
             searchText={searchText}

web/app/components/header/account-setting/model-provider-page/install-from-marketplace.tsx

@@ -2,10 +2,6 @@ import type {
   ModelProvider,
 } from './declarations'
 import type { Plugin } from '@/app/components/plugins/types'
-import {
-  RiArrowDownSLine,
-  RiArrowRightUpLine,
-} from '@remixicon/react'
 import { useTheme } from 'next-themes'
 import Link from 'next/link'
 import { useCallback, useState } from 'react'
@@ -47,15 +43,15 @@ const InstallFromMarketplace = ({
     <div className="mb-2">
       <Divider className="!mt-4 h-px" />
       <div className="flex items-center justify-between">
-        <div className="system-md-semibold flex cursor-pointer items-center gap-1 text-text-primary" onClick={() => setCollapse(!collapse)}>
-          <RiArrowDownSLine className={cn('h-4 w-4', collapse && '-rotate-90')} />
+        <div className="flex cursor-pointer items-center gap-1 text-text-primary system-md-semibold" onClick={() => setCollapse(!collapse)}>
+          <span className={cn('i-ri-arrow-down-s-line h-4 w-4', collapse && '-rotate-90')} />
           {t('modelProvider.installProvider', { ns: 'common' })}
         </div>
         <div className="mb-2 flex items-center pt-2">
-          <span className="system-sm-regular pr-1 text-text-tertiary">{t('modelProvider.discoverMore', { ns: 'common' })}</span>
-          <Link target="_blank" href={getMarketplaceUrl('', { theme })} className="system-sm-medium inline-flex items-center text-text-accent">
+          <span className="pr-1 text-text-tertiary system-sm-regular">{t('modelProvider.discoverMore', { ns: 'common' })}</span>
+          <Link target="_blank" href={getMarketplaceUrl('', { theme })} className="inline-flex items-center text-text-accent system-sm-medium">
             {t('marketplace.difyMarketplace', { ns: 'plugin' })}
-            <RiArrowRightUpLine className="h-4 w-4" />
+            <span className="i-ri-arrow-right-up-line h-4 w-4" />
           </Link>
         </div>
       </div>

web/app/components/header/account-setting/model-provider-page/model-auth/authorized/credential-item.spec.tsx

@@ -2,12 +2,6 @@ import type { Credential } from '../../declarations'
 import { fireEvent, render, screen } from '@testing-library/react'
 import CredentialItem from './credential-item'
 
-vi.mock('@remixicon/react', () => ({
-  RiCheckLine: () => <div data-testid="check-icon" />,
-  RiDeleteBinLine: () => <div data-testid="delete-icon" />,
-  RiEqualizer2Line: () => <div data-testid="edit-icon" />,
-}))
-
 vi.mock('@/app/components/header/indicator', () => ({
   default: () => <div data-testid="indicator" />,
 }))
@@ -61,8 +55,12 @@ describe('CredentialItem', () => {
 
     render(<CredentialItem credential={credential} onEdit={onEdit} onDelete={onDelete} />)
 
-    fireEvent.click(screen.getByTestId('edit-icon').closest('button') as HTMLButtonElement)
-    fireEvent.click(screen.getByTestId('delete-icon').closest('button') as HTMLButtonElement)
+    const buttons = screen.getAllByRole('button')
+    const editButton = buttons.find(b => b.querySelector('.i-ri-equalizer-2-line'))!
+    const deleteButton = buttons.find(b => b.querySelector('.i-ri-delete-bin-line'))!
+
+    fireEvent.click(editButton)
+    fireEvent.click(deleteButton)
 
     expect(onEdit).toHaveBeenCalledWith(credential)
     expect(onDelete).toHaveBeenCalledWith(credential)
@@ -81,7 +79,10 @@ describe('CredentialItem', () => {
       />,
     )
 
-    fireEvent.click(screen.getByTestId('delete-icon').closest('button') as HTMLButtonElement)
+    const deleteButton = screen.getAllByRole('button')
+      .find(b => b.querySelector('.i-ri-delete-bin-line'))!
+
+    fireEvent.click(deleteButton)
 
     expect(onDelete).not.toHaveBeenCalled()
   })
@@ -121,14 +122,16 @@ describe('CredentialItem', () => {
 
     render(<CredentialItem credential={credential} disabled onDelete={onDelete} />)
 
-    fireEvent.click(screen.getByTestId('delete-icon').closest('button') as HTMLButtonElement)
+    const deleteButton = screen.getAllByRole('button')
+      .find(b => b.querySelector('.i-ri-delete-bin-line'))!
+    fireEvent.click(deleteButton)
 
     expect(onDelete).not.toHaveBeenCalled()
   })
 
   // showSelectedIcon=true: check icon area is always rendered; check icon only appears when IDs match
   it('should render check icon area when showSelectedIcon=true and selectedCredentialId matches', () => {
-    render(
+    const { container } = render(
       <CredentialItem
         credential={credential}
         showSelectedIcon
@@ -136,7 +139,7 @@ describe('CredentialItem', () => {
       />,
     )
 
-    expect(screen.getByTestId('check-icon')).toBeInTheDocument()
+    expect(container.querySelector('.i-ri-check-line')).toBeInTheDocument()
   })
 
   it('should not render check icon when showSelectedIcon=true but selectedCredentialId does not match', () => {

web/app/components/header/account-setting/model-provider-page/model-auth/authorized/credential-item.tsx

@@ -1,9 +1,4 @@
 import type { Credential } from '../../declarations'
-import {
-  RiCheckLine,
-  RiDeleteBinLine,
-  RiEqualizer2Line,
-} from '@remixicon/react'
 import {
   memo,
   useMemo,
@@ -11,7 +6,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Badge from '@/app/components/base/badge'
-import Tooltip from '@/app/components/base/tooltip'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import Indicator from '@/app/components/header/indicator'
 import { cn } from '@/utils/classnames'
 
@@ -56,7 +51,7 @@ const CredentialItem = ({
       key={credential.credential_id}
       className={cn(
         'group flex h-8 items-center rounded-lg p-1 hover:bg-state-base-hover',
-        (disabled || credential.not_allowed_to_use) && 'cursor-not-allowed opacity-50',
+        (disabled || credential.not_allowed_to_use) ? 'cursor-not-allowed opacity-50' : onItemClick && 'cursor-pointer',
       )}
       onClick={() => {
         if (disabled || credential.not_allowed_to_use)
@@ -70,7 +65,7 @@ const CredentialItem = ({
             <div className="h-4 w-4">
               {
                 selectedCredentialId === credential.credential_id && (
-                  <RiCheckLine className="h-4 w-4 text-text-accent" />
+                  <span className="i-ri-check-line h-4 w-4 text-text-accent" />
                 )
               }
             </div>
@@ -78,7 +73,7 @@ const CredentialItem = ({
         }
         <Indicator className="ml-2 mr-1.5 shrink-0" />
         <div
-          className="system-md-regular truncate text-text-secondary"
+          className="truncate text-text-secondary system-md-regular"
           title={credential.credential_name}
         >
           {credential.credential_name}
@@ -96,38 +91,50 @@ const CredentialItem = ({
           <div className="ml-2 hidden shrink-0 items-center group-hover:flex">
             {
               !disableEdit && !credential.not_allowed_to_use && (
-                <Tooltip popupContent={t('operation.edit', { ns: 'common' })}>
-                  <ActionButton
-                    disabled={disabled}
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      onEdit?.(credential)
-                    }}
-                  >
-                    <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
-                  </ActionButton>
+                <Tooltip>
+                  <TooltipTrigger
+                    render={(
+                      <ActionButton
+                        disabled={disabled}
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          onEdit?.(credential)
+                        }}
+                      >
+                        <span className="i-ri-equalizer-2-line h-4 w-4 text-text-tertiary" />
+                      </ActionButton>
+                    )}
+                  />
+                  <TooltipContent>{t('operation.edit', { ns: 'common' })}</TooltipContent>
                 </Tooltip>
               )
             }
             {
               !disableDelete && (
-                <Tooltip popupContent={disableDeleteWhenSelected ? disableDeleteTip : t('operation.delete', { ns: 'common' })}>
-                  <ActionButton
-                    className="hover:bg-transparent"
-                    onClick={(e) => {
-                      if (disabled || disableDeleteWhenSelected)
-                        return
-                      e.stopPropagation()
-                      onDelete?.(credential)
-                    }}
-                  >
-                    <RiDeleteBinLine className={cn(
-                      'h-4 w-4 text-text-tertiary',
-                      !disableDeleteWhenSelected && 'hover:text-text-destructive',
-                      disableDeleteWhenSelected && 'opacity-50',
+                <Tooltip>
+                  <TooltipTrigger
+                    render={(
+                      <ActionButton
+                        className="hover:bg-transparent"
+                        onClick={(e) => {
+                          if (disabled || disableDeleteWhenSelected)
+                            return
+                          e.stopPropagation()
+                          onDelete?.(credential)
+                        }}
+                      >
+                        <span className={cn(
+                          'i-ri-delete-bin-line h-4 w-4 text-text-tertiary',
+                          !disableDeleteWhenSelected && 'hover:text-text-destructive',
+                          disableDeleteWhenSelected && 'opacity-50',
+                        )}
+                        />
+                      </ActionButton>
                     )}
-                    />
-                  </ActionButton>
+                  />
+                  <TooltipContent>
+                    {disableDeleteWhenSelected ? disableDeleteTip : t('operation.delete', { ns: 'common' })}
+                  </TooltipContent>
                 </Tooltip>
               )
             }
@@ -139,8 +146,9 @@ const CredentialItem = ({
 
   if (credential.not_allowed_to_use) {
     return (
-      <Tooltip popupContent={t('auth.customCredentialUnavailable', { ns: 'plugin' })}>
-        {Item}
+      <Tooltip>
+        <TooltipTrigger render={Item} />
+        <TooltipContent>{t('auth.customCredentialUnavailable', { ns: 'plugin' })}</TooltipContent>
       </Tooltip>
     )
   }

web/app/components/header/account-setting/model-provider-page/model-auth/hooks/use-credential-status.spec.tsx

@@ -53,4 +53,14 @@ describe('useCredentialStatus', () => {
     expect(result.current.hasCredential).toBe(false)
     expect(result.current.available_credentials).toBeUndefined()
   })
+
+  it('handles undefined provider gracefully', () => {
+    const { result } = renderHook(() => useCredentialStatus(undefined))
+    expect(result.current.hasCredential).toBe(false)
+    expect(result.current.authorized).toBeFalsy()
+    expect(result.current.authRemoved).toBe(false)
+    expect(result.current.available_credentials).toBeUndefined()
+    expect(result.current.current_credential_id).toBeUndefined()
+    expect(result.current.current_credential_name).toBeUndefined()
+  })
 })

web/app/components/header/account-setting/model-provider-page/model-auth/hooks/use-credential-status.ts

@@ -3,12 +3,12 @@ import type {
 } from '../../declarations'
 import { useMemo } from 'react'
 
-export const useCredentialStatus = (provider: ModelProvider) => {
+export const useCredentialStatus = (provider: ModelProvider | undefined) => {
   const {
     current_credential_id,
     current_credential_name,
     available_credentials,
-  } = provider.custom_configuration
+  } = provider?.custom_configuration ?? {}
   const hasCredential = !!available_credentials?.length
   const authorized = current_credential_id && current_credential_name
   const authRemoved = hasCredential && !current_credential_id && !current_credential_name

web/app/components/header/account-setting/model-provider-page/model-badge/index.tsx

@@ -10,7 +10,7 @@ const ModelBadge: FC<ModelBadgeProps> = ({
   children,
 }) => {
   return (
-    <div className={cn('system-2xs-medium-uppercase flex h-[18px] cursor-default items-center rounded-[5px] border border-divider-deep px-1 text-text-tertiary', className)}>
+    <div className={cn('inline-flex h-[18px] shrink-0 items-center justify-center whitespace-nowrap rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-[5px] text-text-tertiary system-2xs-medium-uppercase', className)}>
       {children}
     </div>
   )

web/app/components/header/account-setting/model-provider-page/model-modal/index.spec.tsx

@@ -1,7 +1,5 @@
-import type { ComponentProps } from 'react'
-import type { Credential, CredentialFormSchema, CustomModel, ModelProvider } from '../declarations'
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import * as React from 'react'
+import type { Credential, CredentialFormSchema, ModelProvider } from '../declarations'
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import {
   ConfigurationMethodEnum,
   CurrentSystemQuotaTypeEnum,
@@ -45,6 +43,15 @@ const mockHandlers = vi.hoisted(() => ({
   handleActiveCredential: vi.fn(),
 }))
 
+type FormResponse = {
+  isCheckValidated: boolean
+  values: Record<string, unknown>
+}
+const mockFormState = vi.hoisted(() => ({
+  responses: [] as FormResponse[],
+  setFieldValue: vi.fn(),
+}))
+
 vi.mock('../model-auth/hooks', () => ({
   useCredentialData: () => ({
     isLoading: mockState.isLoading,
@@ -79,6 +86,36 @@ vi.mock('../hooks', () => ({
   useLanguage: () => 'en_US',
 }))
 
+vi.mock('@/app/components/base/form/form-scenarios/auth', async () => {
+  const React = await import('react')
+  const AuthForm = React.forwardRef(({
+    onChange,
+  }: {
+    onChange?: (field: string, value: string) => void
+  }, ref: React.ForwardedRef<{ getFormValues: () => FormResponse, getForm: () => { setFieldValue: (field: string, value: string) => void } }>) => {
+    React.useImperativeHandle(ref, () => ({
+      getFormValues: () => mockFormState.responses.shift() || { isCheckValidated: false, values: {} },
+      getForm: () => ({ setFieldValue: mockFormState.setFieldValue }),
+    }))
+    return (
+      <div>
+        <button type="button" onClick={() => onChange?.('__model_name', 'updated-model')}>Model Name Change</button>
+      </div>
+    )
+  })
+
+  return { default: AuthForm }
+})
+
+vi.mock('../model-auth', () => ({
+  CredentialSelector: ({ onSelect }: { onSelect: (credential: Credential & { addNewCredential?: boolean }) => void }) => (
+    <div>
+      <button type="button" onClick={() => onSelect({ credential_id: 'existing' })}>Choose Existing</button>
+      <button type="button" onClick={() => onSelect({ credential_id: 'new', addNewCredential: true })}>Add New</button>
+    </div>
+  ),
+}))
+
 const createI18n = (text: string) => ({ en_US: text, zh_Hans: text })
 
 const createProvider = (overrides?: Partial<ModelProvider>): ModelProvider => ({
@@ -121,7 +158,7 @@ const createProvider = (overrides?: Partial<ModelProvider>): ModelProvider => ({
   ...overrides,
 })
 
-const renderModal = (overrides?: Partial<ComponentProps<typeof ModelModal>>) => {
+const renderModal = (overrides?: Partial<React.ComponentProps<typeof ModelModal>>) => {
   const provider = createProvider()
   const props = {
     provider,
@@ -131,50 +168,13 @@ const renderModal = (overrides?: Partial<ComponentProps<typeof ModelModal>>) =>
     onRemove: vi.fn(),
     ...overrides,
   }
-  render(<ModelModal {...props} />)
-  return props
+  const view = render(<ModelModal {...props} />)
+  return {
+    ...props,
+    unmount: view.unmount,
+  }
 }
 
-const mockFormRef1 = {
-  getFormValues: vi.fn(),
-  getForm: vi.fn(() => ({ setFieldValue: vi.fn() })),
-}
-
-const mockFormRef2 = {
-  getFormValues: vi.fn(),
-  getForm: vi.fn(() => ({ setFieldValue: vi.fn() })),
-}
-
-vi.mock('@/app/components/base/form/form-scenarios/auth', () => ({
-  default: React.forwardRef((props: { formSchemas: Record<string, unknown>[], onChange?: (f: string, v: string) => void }, ref: React.ForwardedRef<unknown>) => {
-    React.useImperativeHandle(ref, () => {
-      // Return the mock depending on schemas passed (hacky but works for refs)
-      if (props.formSchemas.length > 0 && props.formSchemas[0].name === '__model_name')
-        return mockFormRef1
-      return mockFormRef2
-    })
-    return (
-      <div data-testid="auth-form" onClick={() => props.onChange?.('test-field', 'val')}>
-        AuthForm Mock (
-        {props.formSchemas.length}
-        {' '}
-        fields)
-      </div>
-    )
-  }),
-}))
-
-vi.mock('../model-auth', () => ({
-  CredentialSelector: ({ onSelect }: { onSelect: (val: unknown) => void }) => (
-    <button onClick={() => onSelect({ addNewCredential: true })} data-testid="credential-selector">
-      Select Credential
-    </button>
-  ),
-  useAuth: vi.fn(),
-  useCredentialData: vi.fn(),
-  useModelFormSchemas: vi.fn(),
-}))
-
 describe('ModelModal', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -187,131 +187,168 @@ describe('ModelModal', () => {
     mockState.formValues = {}
     mockState.modelNameAndTypeFormSchemas = []
     mockState.modelNameAndTypeFormValues = {}
-
-    // reset form refs
-    mockFormRef1.getFormValues.mockReturnValue({ isCheckValidated: true, values: { __model_name: 'test', __model_type: ModelTypeEnum.textGeneration } })
-    mockFormRef2.getFormValues.mockReturnValue({ isCheckValidated: true, values: { __authorization_name__: 'test_auth', api_key: 'sk-test' } })
+    mockFormState.responses = []
   })
 
-  it('should render title and loading state for predefined credential modal', () => {
+  it('should show title, description, and loading state for predefined models', () => {
     mockState.isLoading = true
-    renderModal()
+
+    const predefined = renderModal()
+
     expect(screen.getByText('common.modelProvider.auth.apiKeyModal.title')).toBeInTheDocument()
     expect(screen.getByText('common.modelProvider.auth.apiKeyModal.desc')).toBeInTheDocument()
-  })
+    expect(screen.getByRole('status')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'common.operation.save' })).toBeDisabled()
 
-  it('should render model credential title when mode is configModelCredential', () => {
-    renderModal({
-      mode: ModelModalModeEnum.configModelCredential,
-      model: { model: 'gpt-4', model_type: ModelTypeEnum.textGeneration },
-    })
+    predefined.unmount()
+    const customizable = renderModal({ configurateMethod: ConfigurationMethodEnum.customizableModel })
+    expect(screen.queryByText('common.modelProvider.auth.apiKeyModal.desc')).not.toBeInTheDocument()
+    customizable.unmount()
+
+    mockState.credentialData = { credentials: {}, available_credentials: [] }
+    renderModal({ mode: ModelModalModeEnum.configModelCredential, model: { model: 'gpt-4', model_type: ModelTypeEnum.textGeneration } })
     expect(screen.getByText('common.modelProvider.auth.addModelCredential')).toBeInTheDocument()
   })
 
-  it('should render edit credential title when credential exists', () => {
-    renderModal({
-      mode: ModelModalModeEnum.configModelCredential,
-      credential: { credential_id: '1' } as unknown as Credential,
-    })
-    expect(screen.getByText('common.modelProvider.auth.editModelCredential')).toBeInTheDocument()
+  it('should reveal the credential label when adding a new credential', () => {
+    renderModal({ mode: ModelModalModeEnum.addCustomModelToModelList })
+
+    expect(screen.queryByText('common.modelProvider.auth.modelCredential')).not.toBeInTheDocument()
+
+    fireEvent.click(screen.getByText('Add New'))
+
+    expect(screen.getByText('common.modelProvider.auth.modelCredential')).toBeInTheDocument()
   })
 
-  it('should change title to Add Model when mode is configCustomModel', () => {
-    mockState.modelNameAndTypeFormSchemas = [{ variable: '__model_name', type: 'text' } as unknown as CredentialFormSchema]
-    renderModal({ mode: ModelModalModeEnum.configCustomModel })
-    expect(screen.getByText('common.modelProvider.auth.addModel')).toBeInTheDocument()
+  it('should call onCancel when the cancel button is clicked', () => {
+    const { onCancel } = renderModal()
+
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
+
+    expect(onCancel).toHaveBeenCalledTimes(1)
   })
 
-  it('should validate and fail save if form is invalid in configCustomModel mode', async () => {
-    mockState.modelNameAndTypeFormSchemas = [{ variable: '__model_name', type: 'text' } as unknown as CredentialFormSchema]
-    mockFormRef1.getFormValues.mockReturnValue({ isCheckValidated: false, values: {} })
-    renderModal({ mode: ModelModalModeEnum.configCustomModel })
-    fireEvent.click(screen.getByRole('button', { name: 'common.operation.add' }))
-    expect(mockHandlers.handleSaveCredential).not.toHaveBeenCalled()
-  })
+  it('should call onCancel when the escape key is pressed', () => {
+    const { onCancel } = renderModal()
 
-  it('should validate and save new credential and model in configCustomModel mode', async () => {
-    mockState.modelNameAndTypeFormSchemas = [{ variable: '__model_name', type: 'text' } as unknown as CredentialFormSchema]
-    const props = renderModal({ mode: ModelModalModeEnum.configCustomModel })
-    fireEvent.click(screen.getByRole('button', { name: 'common.operation.add' }))
-
-    await waitFor(() => {
-      expect(mockHandlers.handleSaveCredential).toHaveBeenCalledWith({
-        credential_id: undefined,
-        credentials: { api_key: 'sk-test' },
-        name: 'test_auth',
-        model: 'test',
-        model_type: ModelTypeEnum.textGeneration,
-      })
-      expect(props.onSave).toHaveBeenCalled()
-    })
-  })
-
-  it('should save credential only in standard configProviderCredential mode', async () => {
-    const { onSave } = renderModal({ mode: ModelModalModeEnum.configProviderCredential })
-    fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
-
-    await waitFor(() => {
-      expect(mockHandlers.handleSaveCredential).toHaveBeenCalledWith({
-        credential_id: undefined,
-        credentials: { api_key: 'sk-test' },
-        name: 'test_auth',
-      })
-      expect(onSave).toHaveBeenCalled()
-    })
-  })
-
-  it('should save active credential and cancel when picking existing credential in addCustomModelToModelList mode', async () => {
-    renderModal({ mode: ModelModalModeEnum.addCustomModelToModelList, model: { model: 'm1', model_type: ModelTypeEnum.textGeneration } as unknown as CustomModel })
-    // By default selected is undefined so button clicks form
-    // Let's not click credential selector, so it evaluates without it. If selectedCredential is undefined, form validation is checked.
-    mockFormRef2.getFormValues.mockReturnValue({ isCheckValidated: false, values: {} })
-    fireEvent.click(screen.getByRole('button', { name: 'common.operation.add' }))
-    expect(mockHandlers.handleSaveCredential).not.toHaveBeenCalled()
-  })
-
-  it('should save active credential when picking existing credential in addCustomModelToModelList mode', async () => {
-    renderModal({ mode: ModelModalModeEnum.addCustomModelToModelList, model: { model: 'm2', model_type: ModelTypeEnum.textGeneration } as unknown as CustomModel })
-
-    // Select existing credential (addNewCredential: true simulates new but we can simulate false if we just hack the mocked state in the component, but it's internal.
-    // The credential selector sets selectedCredential.
-    fireEvent.click(screen.getByTestId('credential-selector')) // Sets addNewCredential = true internally, so it proceeds to form save
-
-    mockFormRef2.getFormValues.mockReturnValue({ isCheckValidated: true, values: { __authorization_name__: 'auth', api: 'key' } })
-    fireEvent.click(screen.getByRole('button', { name: 'common.operation.add' }))
-
-    await waitFor(() => {
-      expect(mockHandlers.handleSaveCredential).toHaveBeenCalledWith({
-        credential_id: undefined,
-        credentials: { api: 'key' },
-        name: 'auth',
-        model: 'm2',
-        model_type: ModelTypeEnum.textGeneration,
-      })
-    })
-  })
-
-  it('should open and confirm deletion of credential', () => {
-    mockState.credentialData = { credentials: { api_key: '123' }, available_credentials: [] }
-    mockState.formValues = { api_key: '123' } // To trigger isEditMode = true
-    const credential = { credential_id: 'c1' } as unknown as Credential
-    renderModal({ credential })
-
-    // Open Delete Confirm
-    fireEvent.click(screen.getByRole('button', { name: 'common.operation.remove' }))
-    expect(mockHandlers.openConfirmDelete).toHaveBeenCalledWith(credential, undefined)
-
-    // Simulate the dialog appearing and confirming
-    mockState.deleteCredentialId = 'c1'
-    renderModal({ credential }) // Re-render logic mock
-    fireEvent.click(screen.getAllByRole('button', { name: 'common.operation.confirm' })[0])
-
-    expect(mockHandlers.handleConfirmDelete).toHaveBeenCalled()
-  })
-
-  it('should bind escape key to cancel', () => {
-    const props = renderModal()
     fireEvent.keyDown(document, { key: 'Escape' })
-    expect(props.onCancel).toHaveBeenCalled()
+
+    expect(onCancel).toHaveBeenCalledTimes(1)
+  })
+
+  it('should confirm deletion when a delete dialog is shown', () => {
+    mockState.credentialData = { credentials: { api_key: 'secret' }, available_credentials: [] }
+    mockState.deleteCredentialId = 'delete-id'
+
+    const credential: Credential = { credential_id: 'cred-1' }
+    const { onCancel } = renderModal({ credential })
+
+    const alertDialog = screen.getByRole('alertdialog', { hidden: true })
+    expect(alertDialog).toHaveTextContent('common.modelProvider.confirmDelete')
+
+    fireEvent.click(within(alertDialog).getByRole('button', { hidden: true, name: 'common.operation.confirm' }))
+
+    expect(mockHandlers.handleConfirmDelete).toHaveBeenCalledTimes(1)
+    expect(onCancel).toHaveBeenCalledTimes(1)
+  })
+
+  it('should handle save flows for different modal modes', async () => {
+    mockState.modelNameAndTypeFormSchemas = [{ variable: '__model_name', type: 'text-input' } as unknown as CredentialFormSchema]
+    mockState.formSchemas = [{ variable: 'api_key', type: 'secret-input' } as unknown as CredentialFormSchema]
+    mockFormState.responses = [
+      { isCheckValidated: true, values: { __model_name: 'custom-model', __model_type: ModelTypeEnum.textGeneration } },
+      { isCheckValidated: true, values: { __authorization_name__: 'Auth Name', api_key: 'secret' } },
+    ]
+    const configCustomModel = renderModal({ mode: ModelModalModeEnum.configCustomModel })
+    fireEvent.click(screen.getAllByText('Model Name Change')[0])
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.add' }))
+
+    expect(mockFormState.setFieldValue).toHaveBeenCalledWith('__model_name', 'updated-model')
+    await waitFor(() => {
+      expect(mockHandlers.handleSaveCredential).toHaveBeenCalledWith({
+        credential_id: undefined,
+        credentials: { api_key: 'secret' },
+        name: 'Auth Name',
+        model: 'custom-model',
+        model_type: ModelTypeEnum.textGeneration,
+      })
+    })
+    expect(configCustomModel.onSave).toHaveBeenCalledWith({ __authorization_name__: 'Auth Name', api_key: 'secret' })
+    configCustomModel.unmount()
+
+    mockFormState.responses = [{ isCheckValidated: true, values: { __authorization_name__: 'Model Auth', api_key: 'abc' } }]
+    const model = { model: 'gpt-4', model_type: ModelTypeEnum.textGeneration }
+    const configModelCredential = renderModal({
+      mode: ModelModalModeEnum.configModelCredential,
+      model,
+      credential: { credential_id: 'cred-123' },
+    })
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
+    await waitFor(() => {
+      expect(mockHandlers.handleSaveCredential).toHaveBeenCalledWith({
+        credential_id: 'cred-123',
+        credentials: { api_key: 'abc' },
+        name: 'Model Auth',
+        model: 'gpt-4',
+        model_type: ModelTypeEnum.textGeneration,
+      })
+    })
+    expect(configModelCredential.onSave).toHaveBeenCalledWith({ __authorization_name__: 'Model Auth', api_key: 'abc' })
+    configModelCredential.unmount()
+
+    mockFormState.responses = [{ isCheckValidated: true, values: { __authorization_name__: 'Provider Auth', api_key: 'provider-key' } }]
+    const configProviderCredential = renderModal({ mode: ModelModalModeEnum.configProviderCredential })
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
+    await waitFor(() => {
+      expect(mockHandlers.handleSaveCredential).toHaveBeenCalledWith({
+        credential_id: undefined,
+        credentials: { api_key: 'provider-key' },
+        name: 'Provider Auth',
+      })
+    })
+    configProviderCredential.unmount()
+
+    const addToModelList = renderModal({
+      mode: ModelModalModeEnum.addCustomModelToModelList,
+      model,
+    })
+    fireEvent.click(screen.getByText('Choose Existing'))
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.add' }))
+    expect(mockHandlers.handleActiveCredential).toHaveBeenCalledWith({ credential_id: 'existing' }, model)
+    expect(addToModelList.onCancel).toHaveBeenCalled()
+    addToModelList.unmount()
+
+    mockFormState.responses = [{ isCheckValidated: true, values: { __authorization_name__: 'New Auth', api_key: 'new-key' } }]
+    const addToModelListWithNew = renderModal({
+      mode: ModelModalModeEnum.addCustomModelToModelList,
+      model,
+    })
+    fireEvent.click(screen.getByText('Add New'))
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.add' }))
+    await waitFor(() => {
+      expect(mockHandlers.handleSaveCredential).toHaveBeenCalledWith({
+        credential_id: undefined,
+        credentials: { api_key: 'new-key' },
+        name: 'New Auth',
+        model: 'gpt-4',
+        model_type: ModelTypeEnum.textGeneration,
+      })
+    })
+    addToModelListWithNew.unmount()
+
+    mockFormState.responses = [{ isCheckValidated: false, values: {} }]
+    const invalidSave = renderModal({ mode: ModelModalModeEnum.configProviderCredential })
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
+    await waitFor(() => {
+      expect(mockHandlers.handleSaveCredential).toHaveBeenCalledTimes(4)
+    })
+    invalidSave.unmount()
+
+    mockState.credentialData = { credentials: { api_key: 'value' }, available_credentials: [] }
+    mockState.formValues = { api_key: 'value' }
+    const removable = renderModal({ credential: { credential_id: 'remove-1' } })
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.remove' }))
+    expect(mockHandlers.openConfirmDelete).toHaveBeenCalledWith({ credential_id: 'remove-1' }, undefined)
+    removable.unmount()
   })
 })

web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx

@@ -9,11 +9,9 @@ import type {
   FormRefObject,
   FormSchema,
 } from '@/app/components/base/form/types'
-import { RiCloseLine } from '@remixicon/react'
 import {
   memo,
   useCallback,
-  useEffect,
   useMemo,
   useRef,
   useState,
@@ -21,15 +19,23 @@ import {
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
 import Button from '@/app/components/base/button'
-import Confirm from '@/app/components/base/confirm'
 import AuthForm from '@/app/components/base/form/form-scenarios/auth'
 import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
 import { Lock01 } from '@/app/components/base/icons/src/vender/solid/security'
 import Loading from '@/app/components/base/loading'
 import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-} from '@/app/components/base/portal-to-follow-elem'
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
+import {
+  Dialog,
+  DialogCloseButton,
+  DialogContent,
+} from '@/app/components/base/ui/dialog'
 import {
   useAuth,
   useCredentialData,
@@ -197,7 +203,7 @@ const ModelModal: FC<ModelModalProps> = ({
     }
 
     return (
-      <div className="title-2xl-semi-bold text-text-primary">
+      <div className="text-text-primary title-2xl-semi-bold">
         {label}
       </div>
     )
@@ -206,7 +212,7 @@ const ModelModal: FC<ModelModalProps> = ({
   const modalDesc = useMemo(() => {
     if (providerFormSchemaPredefined) {
       return (
-        <div className="system-xs-regular mt-1 text-text-tertiary">
+        <div className="mt-1 text-text-tertiary system-xs-regular">
           {t('modelProvider.auth.apiKeyModal.desc', { ns: 'common' })}
         </div>
       )
@@ -223,7 +229,7 @@ const ModelModal: FC<ModelModalProps> = ({
             className="mr-2 h-4 w-4 shrink-0"
             provider={provider}
           />
-          <div className="system-md-regular mr-1 text-text-secondary">{renderI18nObject(provider.label)}</div>
+          <div className="mr-1 text-text-secondary system-md-regular">{renderI18nObject(provider.label)}</div>
         </div>
       )
     }
@@ -235,7 +241,7 @@ const ModelModal: FC<ModelModalProps> = ({
             provider={provider}
             modelName={model.model}
           />
-          <div className="system-md-regular mr-1 text-text-secondary">{model.model}</div>
+          <div className="mr-1 text-text-secondary system-md-regular">{model.model}</div>
           <Badge>{model.model_type}</Badge>
         </div>
       )
@@ -275,174 +281,171 @@ const ModelModal: FC<ModelModalProps> = ({
   }, [])
   const notAllowCustomCredential = provider.allow_custom_token === false
 
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        event.stopPropagation()
-        onCancel()
-      }
-    }
-
-    document.addEventListener('keydown', handleKeyDown, true)
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown, true)
-    }
+  const handleOpenChange = useCallback((open: boolean) => {
+    if (!open)
+      onCancel()
   }, [onCancel])
 
+  const handleConfirmOpenChange = useCallback((open: boolean) => {
+    if (!open)
+      closeConfirmDelete()
+  }, [closeConfirmDelete])
+
   return (
-    <PortalToFollowElem open>
-      <PortalToFollowElemContent className="z-[60] h-full w-full">
-        <div className="fixed inset-0 flex items-center justify-center bg-black/[.25]">
-          <div className="relative w-[640px] rounded-2xl bg-components-panel-bg shadow-xl">
-            <div
-              className="absolute right-5 top-5 flex h-8 w-8 cursor-pointer items-center justify-center"
-              onClick={onCancel}
-            >
-              <RiCloseLine className="h-4 w-4 text-text-tertiary" />
-            </div>
-            <div className="p-6 pb-3">
-              {modalTitle}
-              {modalDesc}
-              {modalModel}
-            </div>
-            <div className="max-h-[calc(100vh-320px)] overflow-y-auto px-6 py-3">
-              {
-                mode === ModelModalModeEnum.configCustomModel && (
-                  <AuthForm
-                    formSchemas={modelNameAndTypeFormSchemas.map((formSchema) => {
-                      return {
-                        ...formSchema,
-                        name: formSchema.variable,
-                      }
-                    }) as FormSchema[]}
-                    defaultValues={modelNameAndTypeFormValues}
-                    inputClassName="justify-start"
-                    ref={formRef1}
-                    onChange={handleModelNameAndTypeChange}
-                  />
-                )
-              }
-              {
-                mode === ModelModalModeEnum.addCustomModelToModelList && (
-                  <CredentialSelector
-                    credentials={available_credentials || []}
-                    onSelect={setSelectedCredential}
-                    selectedCredential={selectedCredential}
-                    disabled={isLoading}
-                    notAllowAddNewCredential={notAllowCustomCredential}
-                  />
-                )
-              }
-              {
-                showCredentialLabel && (
-                  <div className="system-xs-medium-uppercase mb-3 mt-6 flex items-center text-text-tertiary">
-                    {t('modelProvider.auth.modelCredential', { ns: 'common' })}
-                    <div className="ml-2 h-px grow bg-gradient-to-r from-divider-regular to-background-gradient-mask-transparent" />
-                  </div>
-                )
-              }
-              {
-                isLoading && (
-                  <div className="mt-3 flex items-center justify-center">
-                    <Loading />
-                  </div>
-                )
-              }
-              {
-                !isLoading
-                && showCredentialForm
-                && (
-                  <AuthForm
-                    formSchemas={formSchemas.map((formSchema) => {
-                      return {
-                        ...formSchema,
-                        name: formSchema.variable,
-                        showRadioUI: formSchema.type === FormTypeEnum.radio,
-                      }
-                    }) as FormSchema[]}
-                    defaultValues={formValues}
-                    inputClassName="justify-start"
-                    ref={formRef2}
-                  />
-                )
-              }
-            </div>
-            <div className="flex justify-between p-6 pt-5">
-              {
-                (provider.help && (provider.help.title || provider.help.url))
-                  ? (
-                      <a
-                        href={provider.help?.url[language] || provider.help?.url.en_US}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="system-xs-regular mt-2 inline-block  align-middle text-text-accent"
-                        onClick={e => !provider.help.url && e.preventDefault()}
-                      >
-                        {provider.help.title?.[language] || provider.help.url[language] || provider.help.title?.en_US || provider.help.url.en_US}
-                        <LinkExternal02 className="ml-1 mt-[-2px] inline-block h-3 w-3" />
-                      </a>
-                    )
-                  : <div />
-              }
-              <div className="ml-2 flex items-center justify-end space-x-2">
-                {
-                  isEditMode && (
-                    <Button
-                      variant="warning"
-                      onClick={() => openConfirmDelete(credential, model)}
-                    >
-                      {t('operation.remove', { ns: 'common' })}
-                    </Button>
-                  )
-                }
-                <Button
-                  onClick={onCancel}
-                >
-                  {t('operation.cancel', { ns: 'common' })}
-                </Button>
-                <Button
-                  variant="primary"
-                  onClick={handleSave}
-                  disabled={isLoading || doingAction}
-                >
-                  {saveButtonText}
-                </Button>
-              </div>
-            </div>
-            {
-              (mode === ModelModalModeEnum.configCustomModel || mode === ModelModalModeEnum.configProviderCredential) && (
-                <div className="border-t-[0.5px] border-t-divider-regular">
-                  <div className="flex items-center justify-center rounded-b-2xl bg-background-section-burn py-3 text-xs text-text-tertiary">
-                    <Lock01 className="mr-1 h-3 w-3 text-text-tertiary" />
-                    {t('modelProvider.encrypted.front', { ns: 'common' })}
-                    <a
-                      className="mx-1 text-text-accent"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      href="https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html"
-                    >
-                      PKCS1_OAEP
-                    </a>
-                    {t('modelProvider.encrypted.back', { ns: 'common' })}
-                  </div>
-                </div>
-              )
-            }
-          </div>
+    <Dialog open onOpenChange={handleOpenChange}>
+      <DialogContent
+        backdropProps={{ forceRender: true }}
+        className="w-[640px] max-w-[640px] overflow-hidden p-0"
+      >
+        <DialogCloseButton className="right-5 top-5 h-8 w-8" />
+        <div className="p-6 pb-3">
+          {modalTitle}
+          {modalDesc}
+          {modalModel}
+        </div>
+        <div className="max-h-[calc(100vh-320px)] overflow-y-auto px-6 py-3">
           {
-            deleteCredentialId && (
-              <Confirm
-                isShow
-                title={t('modelProvider.confirmDelete', { ns: 'common' })}
-                isDisabled={doingAction}
-                onCancel={closeConfirmDelete}
-                onConfirm={handleDeleteCredential}
+            mode === ModelModalModeEnum.configCustomModel && (
+              <AuthForm
+                formSchemas={modelNameAndTypeFormSchemas.map((formSchema) => {
+                  return {
+                    ...formSchema,
+                    name: formSchema.variable,
+                  }
+                }) as FormSchema[]}
+                defaultValues={modelNameAndTypeFormValues}
+                inputClassName="justify-start"
+                ref={formRef1}
+                onChange={handleModelNameAndTypeChange}
+              />
+            )
+          }
+          {
+            mode === ModelModalModeEnum.addCustomModelToModelList && (
+              <CredentialSelector
+                credentials={available_credentials || []}
+                onSelect={setSelectedCredential}
+                selectedCredential={selectedCredential}
+                disabled={isLoading}
+                notAllowAddNewCredential={notAllowCustomCredential}
+              />
+            )
+          }
+          {
+            showCredentialLabel && (
+              <div className="mb-3 mt-6 flex items-center text-text-tertiary system-xs-medium-uppercase">
+                {t('modelProvider.auth.modelCredential', { ns: 'common' })}
+                <div className="ml-2 h-px grow bg-gradient-to-r from-divider-regular to-background-gradient-mask-transparent" />
+              </div>
+            )
+          }
+          {
+            isLoading && (
+              <div className="mt-3 flex items-center justify-center">
+                <Loading />
+              </div>
+            )
+          }
+          {
+            !isLoading
+            && showCredentialForm
+            && (
+              <AuthForm
+                formSchemas={formSchemas.map((formSchema) => {
+                  return {
+                    ...formSchema,
+                    name: formSchema.variable,
+                    showRadioUI: formSchema.type === FormTypeEnum.radio,
+                  }
+                }) as FormSchema[]}
+                defaultValues={formValues}
+                inputClassName="justify-start"
+                ref={formRef2}
               />
             )
           }
         </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+        <div className="flex justify-between p-6 pt-5">
+          {
+            (provider.help && (provider.help.title || provider.help.url))
+              ? (
+                  <a
+                    href={provider.help?.url[language] || provider.help?.url.en_US}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="mt-2 inline-block align-middle text-text-accent system-xs-regular"
+                    onClick={e => !provider.help.url && e.preventDefault()}
+                  >
+                    {provider.help.title?.[language] || provider.help.url[language] || provider.help.title?.en_US || provider.help.url.en_US}
+                    <LinkExternal02 className="ml-1 mt-[-2px] inline-block h-3 w-3" />
+                  </a>
+                )
+              : <div />
+          }
+          <div className="ml-2 flex items-center justify-end space-x-2">
+            {
+              isEditMode && (
+                <Button
+                  variant="warning"
+                  onClick={() => openConfirmDelete(credential, model)}
+                >
+                  {t('operation.remove', { ns: 'common' })}
+                </Button>
+              )
+            }
+            <Button
+              onClick={onCancel}
+            >
+              {t('operation.cancel', { ns: 'common' })}
+            </Button>
+            <Button
+              variant="primary"
+              onClick={handleSave}
+              disabled={isLoading || doingAction}
+            >
+              {saveButtonText}
+            </Button>
+          </div>
+        </div>
+        {
+          (mode === ModelModalModeEnum.configCustomModel || mode === ModelModalModeEnum.configProviderCredential) && (
+            <div className="border-t-[0.5px] border-t-divider-regular">
+              <div className="flex items-center justify-center rounded-b-2xl bg-background-section-burn py-3 text-xs text-text-tertiary">
+                <Lock01 className="mr-1 h-3 w-3 text-text-tertiary" />
+                {t('modelProvider.encrypted.front', { ns: 'common' })}
+                <a
+                  className="mx-1 text-text-accent"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  href="https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html"
+                >
+                  PKCS1_OAEP
+                </a>
+                {t('modelProvider.encrypted.back', { ns: 'common' })}
+              </div>
+            </div>
+          )
+        }
+      </DialogContent>
+      <AlertDialog open={!!deleteCredentialId} onOpenChange={handleConfirmOpenChange}>
+        <AlertDialogContent backdropProps={{ forceRender: true }}>
+          <div className="flex flex-col gap-2 p-6 pb-4">
+            <AlertDialogTitle className="text-text-primary title-2xl-semi-bold">
+              {t('modelProvider.confirmDelete', { ns: 'common' })}
+            </AlertDialogTitle>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+            <AlertDialogConfirmButton
+              disabled={doingAction}
+              onClick={handleDeleteCredential}
+            >
+              {t('operation.confirm', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Dialog>
   )
 }
 

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx

@@ -14,10 +14,10 @@ import { useTranslation } from 'react-i18next'
 import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
 import Loading from '@/app/components/base/loading'
 import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/app/components/base/ui/popover'
 import { PROVIDER_WITH_PRESET_TONE, STOP_PARAMETER_RULE, TONE_LIST } from '@/config'
 import { useProviderContext } from '@/context/provider-context'
 import { useModelParameterRules } from '@/service/use-common'
@@ -129,117 +129,118 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
   }
 
   return (
-    <PortalToFollowElem
+    <Popover
       open={open}
-      onOpenChange={setOpen}
-      placement={isInWorkflow ? 'left' : 'bottom-end'}
-      offset={4}
+      onOpenChange={(newOpen) => {
+        if (readonly)
+          return
+        setOpen(newOpen)
+      }}
     >
-      <div className="relative">
-        <PortalToFollowElemTrigger
-          onClick={() => {
-            if (readonly)
-              return
-            setOpen(v => !v)
-          }}
-          className="block"
-        >
-          {
-            renderTrigger
-              ? renderTrigger({
-                  open,
-                  disabled,
-                  modelDisabled,
-                  hasDeprecated,
-                  currentProvider,
-                  currentModel,
-                  providerName: provider,
-                  modelId,
-                })
-              : (
-                  <Trigger
-                    disabled={disabled}
-                    isInWorkflow={isInWorkflow}
-                    modelDisabled={modelDisabled}
-                    hasDeprecated={hasDeprecated}
-                    currentProvider={currentProvider}
-                    currentModel={currentModel}
-                    providerName={provider}
-                    modelId={modelId}
-                  />
-                )
-          }
-        </PortalToFollowElemTrigger>
-        <PortalToFollowElemContent className={cn('z-[60]', portalToFollowElemContentClassName)}>
-          <div className={cn(popupClassName, 'w-[389px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg')}>
-            <div className={cn('max-h-[420px] overflow-y-auto p-4 pt-3')}>
-              <div className="relative">
-                <div className={cn('system-sm-semibold mb-1 flex h-6 items-center text-text-secondary')}>
-                  {t('modelProvider.model', { ns: 'common' }).toLocaleUpperCase()}
-                </div>
-                <ModelSelector
-                  defaultModel={(provider || modelId) ? { provider, model: modelId } : undefined}
-                  modelList={activeTextGenerationModelList}
-                  onSelect={handleChangeModel}
-                />
-              </div>
-              {
-                !!parameterRules.length && (
-                  <div className="my-3 h-px bg-divider-subtle" />
-                )
-              }
-              {
-                isLoading && (
-                  <div className="mt-5"><Loading /></div>
-                )
-              }
-              {
-                !isLoading && !!parameterRules.length && (
-                  <div className="mb-2 flex items-center justify-between">
-                    <div className={cn('system-sm-semibold flex h-6 items-center text-text-secondary')}>{t('modelProvider.parameters', { ns: 'common' })}</div>
-                    {
-                      PROVIDER_WITH_PRESET_TONE.includes(provider) && (
-                        <PresetsParameter onSelect={handleSelectPresetParameter} />
-                      )
-                    }
-                  </div>
-                )
-              }
-              {
-                !isLoading && !!parameterRules.length && (
-                  [
-                    ...parameterRules,
-                    ...(isAdvancedMode ? [STOP_PARAMETER_RULE] : []),
-                  ].map(parameter => (
-                    <ParameterItem
-                      key={`${modelId}-${parameter.name}`}
-                      parameterRule={parameter}
-                      value={completionParams?.[parameter.name]}
-                      onChange={v => handleParamChange(parameter.name, v)}
-                      onSwitch={(checked, assignValue) => handleSwitch(parameter.name, checked, assignValue)}
+      <PopoverTrigger
+        render={(
+          <div className="block">
+            {
+              renderTrigger
+                ? renderTrigger({
+                    open,
+                    disabled,
+                    modelDisabled,
+                    hasDeprecated,
+                    currentProvider,
+                    currentModel,
+                    providerName: provider,
+                    modelId,
+                  })
+                : (
+                    <Trigger
+                      disabled={disabled}
                       isInWorkflow={isInWorkflow}
+                      modelDisabled={modelDisabled}
+                      hasDeprecated={hasDeprecated}
+                      currentProvider={currentProvider}
+                      currentModel={currentModel}
+                      providerName={provider}
+                      modelId={modelId}
                     />
-                  ))
-                )
-              }
-            </div>
-            {!hideDebugWithMultipleModel && (
-              <div
-                className="bg-components-section-burn system-sm-regular flex h-[50px] cursor-pointer items-center justify-between rounded-b-xl border-t border-t-divider-subtle px-4 text-text-accent"
-                onClick={() => onDebugWithMultipleModelChange?.()}
-              >
-                {
-                  debugWithMultipleModel
-                    ? t('debugAsSingleModel', { ns: 'appDebug' })
-                    : t('debugAsMultipleModel', { ns: 'appDebug' })
-                }
-                <ArrowNarrowLeft className="h-3 w-3 rotate-180" />
-              </div>
-            )}
+                  )
+            }
           </div>
-        </PortalToFollowElemContent>
-      </div>
-    </PortalToFollowElem>
+        )}
+      />
+      <PopoverContent
+        placement={isInWorkflow ? 'left' : 'bottom-end'}
+        sideOffset={4}
+        className={portalToFollowElemContentClassName}
+        popupClassName={cn(popupClassName, 'w-[389px] rounded-2xl')}
+      >
+        <div className="max-h-[420px] overflow-y-auto p-4 pt-3">
+          <div className="relative">
+            <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-semibold">
+              {t('modelProvider.model', { ns: 'common' }).toLocaleUpperCase()}
+            </div>
+            <ModelSelector
+              defaultModel={(provider || modelId) ? { provider, model: modelId } : undefined}
+              modelList={activeTextGenerationModelList}
+              onSelect={handleChangeModel}
+              onHide={() => setOpen(false)}
+            />
+          </div>
+          {
+            !!parameterRules.length && (
+              <div className="my-3 h-px bg-divider-subtle" />
+            )
+          }
+          {
+            isLoading && (
+              <div className="mt-5"><Loading /></div>
+            )
+          }
+          {
+            !isLoading && !!parameterRules.length && (
+              <div className="mb-2 flex items-center justify-between">
+                <div className="flex h-6 items-center text-text-secondary system-sm-semibold">{t('modelProvider.parameters', { ns: 'common' })}</div>
+                {
+                  PROVIDER_WITH_PRESET_TONE.includes(provider) && (
+                    <PresetsParameter onSelect={handleSelectPresetParameter} />
+                  )
+                }
+              </div>
+            )
+          }
+          {
+            !isLoading && !!parameterRules.length && (
+              [
+                ...parameterRules,
+                ...(isAdvancedMode ? [STOP_PARAMETER_RULE] : []),
+              ].map(parameter => (
+                <ParameterItem
+                  key={`${modelId}-${parameter.name}`}
+                  parameterRule={parameter}
+                  value={completionParams?.[parameter.name]}
+                  onChange={v => handleParamChange(parameter.name, v)}
+                  onSwitch={(checked, assignValue) => handleSwitch(parameter.name, checked, assignValue)}
+                  isInWorkflow={isInWorkflow}
+                />
+              ))
+            )
+          }
+        </div>
+        {!hideDebugWithMultipleModel && (
+          <div
+            className="flex h-[50px] cursor-pointer items-center justify-between rounded-b-xl border-t border-t-divider-subtle px-4 text-text-accent system-sm-regular"
+            onClick={() => onDebugWithMultipleModelChange?.()}
+          >
+            {
+              debugWithMultipleModel
+                ? t('debugAsSingleModel', { ns: 'appDebug' })
+                : t('debugAsMultipleModel', { ns: 'appDebug' })
+            }
+            <ArrowNarrowLeft className="h-3 w-3 rotate-180" />
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
   )
 }
 

web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.spec.tsx

@@ -1,61 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import DeprecatedModelTrigger from './deprecated-model-trigger'
-
-vi.mock('../model-icon', () => ({
-  default: ({ modelName }: { modelName: string }) => <span>{modelName}</span>,
-}))
-
-const mockUseProviderContext = vi.hoisted(() => vi.fn())
-vi.mock('@/context/provider-context', () => ({
-  useProviderContext: mockUseProviderContext,
-}))
-
-describe('DeprecatedModelTrigger', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockUseProviderContext.mockReturnValue({
-      modelProviders: [{ provider: 'someone-else' }, { provider: 'openai' }],
-    })
-  })
-
-  it('should render model name', () => {
-    render(<DeprecatedModelTrigger modelName="gpt-deprecated" providerName="openai" />)
-    expect(screen.getAllByText('gpt-deprecated').length).toBeGreaterThan(0)
-  })
-
-  it('should show deprecated tooltip when warn icon is hovered', async () => {
-    const { container } = render(
-      <DeprecatedModelTrigger
-        modelName="gpt-deprecated"
-        providerName="openai"
-        showWarnIcon
-      />,
-    )
-
-    const tooltipTrigger = container.querySelector('[data-state]') as HTMLElement
-    fireEvent.mouseEnter(tooltipTrigger)
-
-    expect(await screen.findByText('common.modelProvider.deprecated')).toBeInTheDocument()
-  })
-
-  it('should render when provider is not found', () => {
-    mockUseProviderContext.mockReturnValue({
-      modelProviders: [{ provider: 'someone-else' }],
-    })
-
-    render(<DeprecatedModelTrigger modelName="gpt-deprecated" providerName="openai" />)
-    expect(screen.getAllByText('gpt-deprecated').length).toBeGreaterThan(0)
-  })
-
-  it('should not show deprecated tooltip when warn icon is disabled', async () => {
-    render(
-      <DeprecatedModelTrigger
-        modelName="gpt-deprecated"
-        providerName="openai"
-        showWarnIcon={false}
-      />,
-    )
-
-    expect(screen.queryByText('common.modelProvider.deprecated')).not.toBeInTheDocument()
-  })
-})