From 1efd365b62d6edc17436937b308c5c8e3a0bd664 Mon Sep 17 00:00:00 2001
From: chariri <w@chariri.moe>
Date: Sat, 9 May 2026 17:21:26 +0900
Subject: [PATCH 01/13] fix(swagger): Apply the inline-nested-dicts patch to
 HTTP Swagger endpoints (#35952)

---
 api/dev/generate_swagger_markdown_docs.py     |  45 ++++--
 api/dev/generate_swagger_specs.py             |  54 +------
 api/libs/external_api.py                      |   2 +
 api/libs/flask_restx_compat.py                | 149 ++++++++++++++++++
 .../unit_tests/controllers/test_swagger.py    |  72 +++++++++
 5 files changed, 260 insertions(+), 62 deletions(-)
 create mode 100644 api/libs/flask_restx_compat.py
 create mode 100644 api/tests/unit_tests/controllers/test_swagger.py

diff --git a/api/dev/generate_swagger_markdown_docs.py b/api/dev/generate_swagger_markdown_docs.py
index 0900d08331..e0028c63f6 100644
--- a/api/dev/generate_swagger_markdown_docs.py
+++ b/api/dev/generate_swagger_markdown_docs.py
@@ -29,18 +29,39 @@ STALE_COMBINED_MARKDOWN_FILENAME = "api-reference.md"
 
 
 def _convert_spec_to_markdown(spec_path: Path, markdown_path: Path) -> None:
-    subprocess.run(
-        [
-            "npx",
-            "--yes",
-            SWAGGER_MARKDOWN_PACKAGE,
-            "-i",
-            str(spec_path),
-            "-o",
-            str(markdown_path),
-        ],
-        check=True,
-    )
+    markdown_path.parent.mkdir(parents=True, exist_ok=True)
+    with tempfile.TemporaryDirectory(prefix=f"{markdown_path.stem}-", dir=markdown_path.parent) as temp_dir:
+        temp_markdown_path = Path(temp_dir) / markdown_path.name
+        result = subprocess.run(
+            [
+                "npx",
+                "--yes",
+                SWAGGER_MARKDOWN_PACKAGE,
+                "-i",
+                str(spec_path),
+                "-o",
+                str(temp_markdown_path),
+            ],
+            check=False,
+            capture_output=True,
+            text=True,
+        )
+        if result.returncode != 0:
+            raise subprocess.CalledProcessError(
+                result.returncode,
+                result.args,
+                output=result.stdout,
+                stderr=result.stderr,
+            )
+        if not temp_markdown_path.exists():
+            converter_output = "\n".join(item for item in (result.stdout, result.stderr) if item).strip()
+            raise RuntimeError(f"swagger-markdown did not write {markdown_path}: {converter_output}")
+
+        converted_markdown = temp_markdown_path.read_text(encoding="utf-8")
+        if not converted_markdown.strip():
+            raise RuntimeError(f"swagger-markdown wrote an empty document for {markdown_path}")
+
+    markdown_path.write_text(converted_markdown, encoding="utf-8")
 
 
 def _demote_markdown_headings(markdown: str, *, levels: int = 1) -> str:
diff --git a/api/dev/generate_swagger_specs.py b/api/dev/generate_swagger_specs.py
index 9122f3ab24..254310cd2a 100644
--- a/api/dev/generate_swagger_specs.py
+++ b/api/dev/generate_swagger_specs.py
@@ -20,7 +20,6 @@ from pathlib import Path
 from typing import Protocol, TypeGuard
 
 from flask import Flask
-from flask_restx.swagger import Swagger
 
 logger = logging.getLogger(__name__)
 
@@ -48,9 +47,6 @@ SPEC_TARGETS: tuple[SpecTarget, ...] = (
     SpecTarget(route="/v1/swagger.json", filename="service-swagger.json", namespace="service"),
 )
 
-_ORIGINAL_REGISTER_MODEL = Swagger.register_model
-_ORIGINAL_REGISTER_FIELD = Swagger.register_field
-
 
 def _is_inline_field_map(value: object) -> TypeGuard[dict[object, object]]:
     """Return whether a nested field map is an anonymous inline mapping."""
@@ -152,56 +148,14 @@ def apply_runtime_defaults() -> None:
     dify_config.SWAGGER_UI_ENABLED = os.environ["SWAGGER_UI_ENABLED"].lower() == "true"
 
 
-def _patch_swagger_for_inline_nested_dicts() -> None:
-    """Teach Flask-RESTX Swagger generation to tolerate inline nested field maps.
-
-    Some existing controllers use `fields.Nested({...})` with a raw field mapping
-    instead of a named `api.model(...)`. Flask-RESTX crashes on those anonymous
-    dicts during schema registration, so this helper upgrades them into temporary
-    named models at export time.
-    """
-
-    if getattr(Swagger, "_dify_inline_nested_dict_patch", False):
-        return
-
-    def get_or_create_inline_model(self: Swagger, nested_fields: dict[object, object]) -> object:
-        anonymous_models = getattr(self, "_anonymous_inline_models", None)
-        if anonymous_models is None:
-            anonymous_models = {}
-            self.__dict__["_anonymous_inline_models"] = anonymous_models
-
-        anonymous_name = anonymous_models.get(id(nested_fields))
-        if anonymous_name is None:
-            anonymous_name = _inline_model_name(nested_fields)
-            anonymous_models[id(nested_fields)] = anonymous_name
-            if anonymous_name not in self.api.models:
-                self.api.model(anonymous_name, nested_fields)
-
-        return self.api.models[anonymous_name]
-
-    def register_model_with_inline_dict_support(self: Swagger, model: object) -> dict[str, str]:
-        if _is_inline_field_map(model):
-            model = get_or_create_inline_model(self, model)
-
-        return _ORIGINAL_REGISTER_MODEL(self, model)
-
-    def register_field_with_inline_dict_support(self: Swagger, field: object) -> None:
-        nested = getattr(field, "nested", None)
-        if _is_inline_field_map(nested):
-            field.model = get_or_create_inline_model(self, nested)  # type: ignore
-
-        _ORIGINAL_REGISTER_FIELD(self, field)
-
-    Swagger.register_model = register_model_with_inline_dict_support
-    Swagger.register_field = register_field_with_inline_dict_support
-    Swagger._dify_inline_nested_dict_patch = True
-
-
 def create_spec_app() -> Flask:
     """Build a minimal Flask app that only mounts the Swagger-producing blueprints."""
 
     apply_runtime_defaults()
-    _patch_swagger_for_inline_nested_dicts()
+
+    from libs.flask_restx_compat import patch_swagger_for_inline_nested_dicts
+
+    patch_swagger_for_inline_nested_dicts()
 
     app = Flask(__name__)
 
diff --git a/api/libs/external_api.py b/api/libs/external_api.py
index f907d17750..64eb99a42b 100644
--- a/api/libs/external_api.py
+++ b/api/libs/external_api.py
@@ -9,6 +9,7 @@ from werkzeug.http import HTTP_STATUS_CODES
 
 from configs import dify_config
 from core.errors.error import AppInvokeQuotaExceededError
+from libs.flask_restx_compat import patch_swagger_for_inline_nested_dicts
 from libs.token import build_force_logout_cookie_headers
 
 
@@ -120,6 +121,7 @@ class ExternalApi(Api):
     }
 
     def __init__(self, app: Blueprint | Flask, *args, **kwargs):
+        patch_swagger_for_inline_nested_dicts()
         kwargs.setdefault("authorizations", self._authorizations)
         kwargs.setdefault("security", "Bearer")
         kwargs["add_specs"] = dify_config.SWAGGER_UI_ENABLED
diff --git a/api/libs/flask_restx_compat.py b/api/libs/flask_restx_compat.py
new file mode 100644
index 0000000000..34e0d586a0
--- /dev/null
+++ b/api/libs/flask_restx_compat.py
@@ -0,0 +1,149 @@
+"""Compatibility helpers for Dify's Flask-RESTX Swagger integration.
+
+These helpers are temporary bridges for legacy Flask-RESTX field contracts
+while controllers migrate their request and response documentation to Pydantic
+models. Keep the behavior centralized so live Swagger endpoints and offline
+spec export fail or succeed in the same way.
+"""
+
+import hashlib
+import json
+from typing import TypeGuard
+
+from flask import current_app
+from flask_restx import fields
+from flask_restx.model import Model, OrderedModel, instance
+from flask_restx.swagger import Swagger
+
+
+def _is_inline_field_map(value: object) -> TypeGuard[dict[object, object]]:
+    """Return whether a nested field map is an anonymous inline mapping."""
+
+    return isinstance(value, dict) and not isinstance(value, (Model, OrderedModel))
+
+
+def _jsonable_schema_value(value: object) -> object:
+    """Return a deterministic JSON-serializable representation for schema fingerprints."""
+
+    if value is None or isinstance(value, str | int | float | bool):
+        return value
+    if isinstance(value, list | tuple):
+        return [_jsonable_schema_value(item) for item in value]
+    if isinstance(value, dict):
+        return {str(key): _jsonable_schema_value(item) for key, item in value.items()}
+    value_type = type(value)
+    return f"<{value_type.__module__}.{value_type.__qualname__}>"
+
+
+def _field_signature(field: object) -> object:
+    """Build a stable signature for a Flask-RESTX field object."""
+
+    field_instance = instance(field)
+    signature: dict[str, object] = {
+        "class": f"{field_instance.__class__.__module__}.{field_instance.__class__.__qualname__}"
+    }
+
+    if isinstance(field_instance, fields.Nested):
+        nested = getattr(field_instance, "nested", None)
+        if _is_inline_field_map(nested):
+            signature["nested"] = _inline_model_signature(nested)
+        else:
+            signature["nested"] = getattr(
+                nested,
+                "name",
+                f"<{type(nested).__module__}.{type(nested).__qualname__}>",
+            )
+    elif hasattr(field_instance, "container"):
+        signature["container"] = _field_signature(field_instance.container)
+    else:
+        schema = getattr(field_instance, "__schema__", None)
+        if isinstance(schema, dict):
+            signature["schema"] = _jsonable_schema_value(schema)
+
+    for attr_name in (
+        "attribute",
+        "default",
+        "description",
+        "example",
+        "max",
+        "max_items",
+        "min",
+        "min_items",
+        "nullable",
+        "readonly",
+        "required",
+        "title",
+        "unique",
+    ):
+        if hasattr(field_instance, attr_name):
+            signature[attr_name] = _jsonable_schema_value(getattr(field_instance, attr_name))
+
+    return signature
+
+
+def _inline_model_signature(nested_fields: dict[object, object]) -> object:
+    """Build a stable signature for an anonymous inline model."""
+
+    return [
+        (str(field_name), _field_signature(field))
+        for field_name, field in sorted(nested_fields.items(), key=lambda item: str(item[0]))
+    ]
+
+
+def _inline_model_name(nested_fields: dict[object, object]) -> str:
+    """Return a stable Swagger model name for an anonymous inline field map."""
+
+    signature = json.dumps(_inline_model_signature(nested_fields), sort_keys=True, separators=(",", ":"))
+    digest = hashlib.sha1(signature.encode("utf-8")).hexdigest()[:12]
+    return f"_AnonymousInlineModel_{digest}"
+
+
+def patch_swagger_for_inline_nested_dicts() -> None:
+    """Allow Swagger generation to handle legacy inline Flask-RESTX field dicts.
+
+    Some existing controllers use raw field mappings in `fields.Nested({...})`
+    or directly in `@namespace.response(...)`. Runtime marshalling accepts that,
+    but Flask-RESTX Swagger registration expects a named model. Convert those
+    anonymous mappings into temporary named models during docs generation.
+    """
+
+    if getattr(Swagger, "_dify_inline_nested_dict_patch", False):
+        return
+
+    original_register_model = Swagger.register_model
+    original_register_field = Swagger.register_field
+    original_as_dict = Swagger.as_dict
+
+    def get_or_create_inline_model(self: Swagger, nested_fields: dict[object, object]) -> object:
+        anonymous_name = _inline_model_name(nested_fields)
+        if anonymous_name not in self.api.models:
+            self.api.model(anonymous_name, nested_fields)
+
+        return self.api.models[anonymous_name]
+
+    def register_model_with_inline_dict_support(self: Swagger, model: object) -> dict[str, str]:
+        if _is_inline_field_map(model):
+            model = get_or_create_inline_model(self, model)
+
+        return original_register_model(self, model)
+
+    def register_field_with_inline_dict_support(self: Swagger, field: object) -> None:
+        nested = getattr(field, "nested", None)
+        if _is_inline_field_map(nested):
+            field.model = get_or_create_inline_model(self, nested)  # type: ignore[attr-defined]
+
+        original_register_field(self, field)
+
+    def as_dict_with_inline_dict_support(self: Swagger):
+        # Temporary set RESTX_INCLUDE_ALL_MODELS = false to prevent "length changed while iterating" error
+        include_all_models = current_app.config.get("RESTX_INCLUDE_ALL_MODELS", False)
+        current_app.config["RESTX_INCLUDE_ALL_MODELS"] = False
+        try:
+            return original_as_dict(self)
+        finally:
+            current_app.config["RESTX_INCLUDE_ALL_MODELS"] = include_all_models
+
+    Swagger.register_model = register_model_with_inline_dict_support
+    Swagger.register_field = register_field_with_inline_dict_support
+    Swagger.as_dict = as_dict_with_inline_dict_support
+    Swagger._dify_inline_nested_dict_patch = True
diff --git a/api/tests/unit_tests/controllers/test_swagger.py b/api/tests/unit_tests/controllers/test_swagger.py
new file mode 100644
index 0000000000..999f1ae78d
--- /dev/null
+++ b/api/tests/unit_tests/controllers/test_swagger.py
@@ -0,0 +1,72 @@
+"""Swagger JSON rendering tests for Flask-RESTX API blueprints."""
+
+import pytest
+from flask import Flask
+
+
+def _definition_refs(value: object) -> set[str]:
+    refs: set[str] = set()
+    if isinstance(value, dict):
+        ref = value.get("$ref")
+        if isinstance(ref, str) and ref.startswith("#/definitions/"):
+            refs.add(ref.removeprefix("#/definitions/"))
+        for item in value.values():
+            refs.update(_definition_refs(item))
+    elif isinstance(value, list):
+        for item in value:
+            refs.update(_definition_refs(item))
+    return refs
+
+
+@pytest.mark.parametrize(
+    ("first_kwargs", "second_kwargs"),
+    [
+        ({"min_items": 1}, {"min_items": 2}),
+        ({"max_items": 1}, {"max_items": 2}),
+        ({"unique": True}, {"unique": False}),
+    ],
+)
+def test_inline_model_name_includes_list_constraints(
+    first_kwargs: dict[str, object],
+    second_kwargs: dict[str, object],
+):
+    from flask_restx import fields
+
+    from libs.flask_restx_compat import _inline_model_name
+
+    first_inline_model: dict[object, object] = {"items": fields.List(fields.String, **first_kwargs)}
+    second_inline_model: dict[object, object] = {"items": fields.List(fields.String, **second_kwargs)}
+
+    assert _inline_model_name(first_inline_model) != _inline_model_name(second_inline_model)
+
+
+def test_swagger_json_endpoints_render(monkeypatch: pytest.MonkeyPatch):
+    from configs import dify_config
+    from controllers.console import bp as console_bp
+    from controllers.service_api import bp as service_api_bp
+    from controllers.web import bp as web_bp
+
+    monkeypatch.setattr(dify_config, "SWAGGER_UI_ENABLED", True)
+
+    app = Flask(__name__)
+    app.config["TESTING"] = True
+    app.config["RESTX_INCLUDE_ALL_MODELS"] = True
+    app.register_blueprint(console_bp)
+    app.register_blueprint(web_bp)
+    app.register_blueprint(service_api_bp)
+
+    client = app.test_client()
+
+    for route in ("/console/api/swagger.json", "/api/swagger.json", "/v1/swagger.json"):
+        response = client.get(route)
+
+        assert response.status_code == 200
+        payload = response.get_json()
+        assert payload["swagger"] == "2.0"
+        assert "paths" in payload
+        assert "definitions" in payload
+        assert isinstance(payload["definitions"], dict)
+        missing_refs = _definition_refs(payload) - set(payload["definitions"])
+        assert not sorted(ref for ref in missing_refs if ref.startswith("_AnonymousInlineModel"))
+
+    assert app.config["RESTX_INCLUDE_ALL_MODELS"] is True

From 861f73267ca41027d15c3f27ff06a9f8a5d20f82 Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Sat, 9 May 2026 16:23:50 +0800
Subject: [PATCH 02/13] feat(dify-ui): add Tabs/ToggleGroup (#35965)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 eslint-suppressions.json                      |  13 +-
 packages/dify-ui/package.json                 |   8 +
 .../dify-ui/src/tabs/__tests__/index.spec.tsx |  80 ++++++++
 packages/dify-ui/src/tabs/index.stories.tsx   |  51 +++++
 packages/dify-ui/src/tabs/index.tsx           |  59 ++++++
 .../src/toggle-group/__tests__/index.spec.tsx |  74 ++++++++
 .../src/toggle-group/index.stories.tsx        | 177 ++++++++++++++++++
 packages/dify-ui/src/toggle-group/index.tsx   |  58 ++++++
 .../variable-or-constant-input.spec.tsx       |  59 ------
 .../field/variable-or-constant-input.tsx      |  86 ---------
 .../__tests__/index.spec.tsx                  | 114 -----------
 .../base/segmented-control/index.css          | 109 -----------
 .../base/segmented-control/index.stories.tsx  |  94 ----------
 .../base/segmented-control/index.tsx          | 151 ---------------
 .../develop/__tests__/code.spec.tsx           |   4 +-
 web/app/components/develop/code.tsx           | 151 +++++++++------
 .../__tests__/panel-output-section.spec.tsx   |   2 +-
 .../json-schema-config-modal/index.tsx        |  10 +-
 .../json-schema-config.tsx                    | 116 +++++++-----
 .../llm/components/panel-output-section.tsx   |   2 +-
 .../nodes/llm/components/structure-output.tsx |  26 +--
 .../components/__tests__/integration.spec.tsx |  11 --
 .../__tests__/mode-switcher.spec.tsx          |  16 --
 .../components/mode-switcher.tsx              |  37 ----
 .../__tests__/display-content.spec.tsx        |   2 +-
 .../variable-inspect/display-content.tsx      |  47 ++---
 .../value-content-sections.tsx                |   2 +-
 web/app/styles/tailwind-core.css              |   1 -
 28 files changed, 718 insertions(+), 842 deletions(-)
 create mode 100644 packages/dify-ui/src/tabs/__tests__/index.spec.tsx
 create mode 100644 packages/dify-ui/src/tabs/index.stories.tsx
 create mode 100644 packages/dify-ui/src/tabs/index.tsx
 create mode 100644 packages/dify-ui/src/toggle-group/__tests__/index.spec.tsx
 create mode 100644 packages/dify-ui/src/toggle-group/index.stories.tsx
 create mode 100644 packages/dify-ui/src/toggle-group/index.tsx
 delete mode 100644 web/app/components/base/form/components/field/__tests__/variable-or-constant-input.spec.tsx
 delete mode 100644 web/app/components/base/form/components/field/variable-or-constant-input.tsx
 delete mode 100644 web/app/components/base/segmented-control/__tests__/index.spec.tsx
 delete mode 100644 web/app/components/base/segmented-control/index.css
 delete mode 100644 web/app/components/base/segmented-control/index.stories.tsx
 delete mode 100644 web/app/components/base/segmented-control/index.tsx
 delete mode 100644 web/app/components/workflow/nodes/trigger-schedule/components/__tests__/mode-switcher.spec.tsx
 delete mode 100644 web/app/components/workflow/nodes/trigger-schedule/components/mode-switcher.tsx

diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index 2326e92d2f..683e6b09fe 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -1051,14 +1051,6 @@
       "count": 1
     }
   },
-  "web/app/components/base/form/components/field/variable-or-constant-input.tsx": {
-    "no-console": {
-      "count": 2
-    },
-    "ts/no-explicit-any": {
-      "count": 2
-    }
-  },
   "web/app/components/base/form/components/field/variable-selector.tsx": {
     "no-console": {
       "count": 1
@@ -2307,11 +2299,8 @@
     }
   },
   "web/app/components/develop/code.tsx": {
-    "ts/no-empty-object-type": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
-      "count": 9
+      "count": 7
     }
   },
   "web/app/components/develop/md.tsx": {
diff --git a/packages/dify-ui/package.json b/packages/dify-ui/package.json
index 894e92bfd6..96c512f89c 100644
--- a/packages/dify-ui/package.json
+++ b/packages/dify-ui/package.json
@@ -77,6 +77,14 @@
       "types": "./src/switch/index.tsx",
       "import": "./src/switch/index.tsx"
     },
+    "./tabs": {
+      "types": "./src/tabs/index.tsx",
+      "import": "./src/tabs/index.tsx"
+    },
+    "./toggle-group": {
+      "types": "./src/toggle-group/index.tsx",
+      "import": "./src/toggle-group/index.tsx"
+    },
     "./toast": {
       "types": "./src/toast/index.tsx",
       "import": "./src/toast/index.tsx"
diff --git a/packages/dify-ui/src/tabs/__tests__/index.spec.tsx b/packages/dify-ui/src/tabs/__tests__/index.spec.tsx
new file mode 100644
index 0000000000..6673e35bf5
--- /dev/null
+++ b/packages/dify-ui/src/tabs/__tests__/index.spec.tsx
@@ -0,0 +1,80 @@
+import { render } from 'vitest-browser-react'
+import {
+  Tabs,
+  TabsList,
+  TabsPanel,
+  TabsTab,
+} from '../index'
+
+const asHTMLElement = (element: HTMLElement | SVGElement) => element as HTMLElement
+
+describe('Tabs wrappers', () => {
+  it('renders Base UI tabs with accessible roles', async () => {
+    const screen = await render(
+      <Tabs defaultValue="js">
+        <TabsList>
+          <TabsTab value="js">JavaScript</TabsTab>
+          <TabsTab value="py">Python</TabsTab>
+        </TabsList>
+        <TabsPanel value="js">JS panel</TabsPanel>
+        <TabsPanel value="py">Python panel</TabsPanel>
+      </Tabs>,
+    )
+
+    await expect.element(screen.getByRole('tablist')).toBeInTheDocument()
+    await expect.element(screen.getByRole('tab', { name: 'JavaScript' })).toHaveAttribute('aria-selected', 'true')
+    await expect.element(screen.getByRole('tab', { name: 'Python' })).toHaveAttribute('aria-selected', 'false')
+    await expect.element(screen.getByText('JS panel')).toBeInTheDocument()
+  })
+
+  it('keeps tabs styling minimal by default', async () => {
+    const screen = await render(
+      <Tabs defaultValue="first">
+        <TabsList>
+          <TabsTab value="first">First</TabsTab>
+          <TabsTab value="second">Second</TabsTab>
+        </TabsList>
+      </Tabs>,
+    )
+
+    await expect.element(screen.getByRole('tablist')).toHaveClass(
+      'flex',
+    )
+    await expect.element(screen.getByRole('tab', { name: 'First' })).toHaveClass(
+      'touch-manipulation',
+      'focus-visible:outline-hidden',
+    )
+  })
+
+  it('calls onValueChange while leaving controlled value to the caller', async () => {
+    const onValueChange = vi.fn()
+    const screen = await render(
+      <Tabs value="js" onValueChange={onValueChange}>
+        <TabsList>
+          <TabsTab value="js">JavaScript</TabsTab>
+          <TabsTab value="py">Python</TabsTab>
+        </TabsList>
+      </Tabs>,
+    )
+
+    asHTMLElement(screen.getByRole('tab', { name: 'Python' }).element()).click()
+
+    expect(onValueChange).toHaveBeenCalledWith('py', expect.anything())
+    await expect.element(screen.getByRole('tab', { name: 'JavaScript' })).toHaveAttribute('aria-selected', 'true')
+  })
+
+  it('forwards className to composable parts', async () => {
+    const screen = await render(
+      <Tabs defaultValue="first">
+        <TabsList className="custom-list">
+          <TabsTab value="first" className="custom-tab">First</TabsTab>
+        </TabsList>
+        <TabsPanel value="first" className="custom-panel">Panel</TabsPanel>
+      </Tabs>,
+    )
+
+    await expect.element(screen.getByRole('tablist')).toHaveClass('custom-list')
+    await expect.element(screen.getByRole('tab', { name: 'First' })).toHaveClass('custom-tab')
+    expect(screen.getByText('Panel').element()).toHaveClass('custom-panel')
+  })
+})
diff --git a/packages/dify-ui/src/tabs/index.stories.tsx b/packages/dify-ui/src/tabs/index.stories.tsx
new file mode 100644
index 0000000000..dd1e79a1ce
--- /dev/null
+++ b/packages/dify-ui/src/tabs/index.stories.tsx
@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import {
+  Tabs,
+  TabsList,
+  TabsPanel,
+  TabsTab,
+} from '.'
+
+const meta = {
+  title: 'Base/UI/Tabs',
+  component: Tabs,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Composable tabs built on Base UI. Use this when a tab controls a corresponding tab panel.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Tabs>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Basic: Story = {
+  render: () => (
+    <Tabs defaultValue="overview" className="w-96">
+      <TabsList className="gap-4 border-b border-divider-subtle">
+        <TabsTab
+          value="overview"
+          className="border-b border-transparent px-0 py-2 system-sm-medium text-text-tertiary data-active:border-text-accent data-active:text-text-primary"
+        >
+          Overview
+        </TabsTab>
+        <TabsTab
+          value="activity"
+          className="border-b border-transparent px-0 py-2 system-sm-medium text-text-tertiary data-active:border-text-accent data-active:text-text-primary"
+        >
+          Activity
+        </TabsTab>
+      </TabsList>
+      <TabsPanel value="overview" className="py-3 system-sm-regular text-text-secondary">
+        Overview panel
+      </TabsPanel>
+      <TabsPanel value="activity" className="py-3 system-sm-regular text-text-secondary">
+        Activity panel
+      </TabsPanel>
+    </Tabs>
+  ),
+}
diff --git a/packages/dify-ui/src/tabs/index.tsx b/packages/dify-ui/src/tabs/index.tsx
new file mode 100644
index 0000000000..ddc5891b89
--- /dev/null
+++ b/packages/dify-ui/src/tabs/index.tsx
@@ -0,0 +1,59 @@
+'use client'
+
+import type { Tabs as BaseTabsNS } from '@base-ui/react/tabs'
+import { Tabs as BaseTabs } from '@base-ui/react/tabs'
+import { cn } from '../cn'
+
+export type TabsProps = BaseTabsNS.Root.Props
+
+export const Tabs = BaseTabs.Root
+
+export type TabsListProps = Omit<BaseTabsNS.List.Props, 'className'> & {
+  className?: string
+}
+
+export function TabsList({
+  className,
+  ...props
+}: TabsListProps) {
+  return (
+    <BaseTabs.List
+      className={cn('flex', className)}
+      {...props}
+    />
+  )
+}
+
+export type TabsTabProps = Omit<BaseTabsNS.Tab.Props, 'className'> & {
+  className?: string
+}
+
+export function TabsTab({
+  className,
+  ...props
+}: TabsTabProps) {
+  return (
+    <BaseTabs.Tab
+      className={cn('touch-manipulation focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-components-input-border-hover data-disabled:cursor-not-allowed data-disabled:text-text-disabled', className)}
+      {...props}
+    />
+  )
+}
+
+export type TabsPanelProps = Omit<BaseTabsNS.Panel.Props, 'className'> & {
+  className?: string
+}
+
+export function TabsPanel({
+  className,
+  ...props
+}: TabsPanelProps) {
+  return (
+    <BaseTabs.Panel
+      className={className}
+      {...props}
+    />
+  )
+}
+
+export const TabsIndicator = BaseTabs.Indicator
diff --git a/packages/dify-ui/src/toggle-group/__tests__/index.spec.tsx b/packages/dify-ui/src/toggle-group/__tests__/index.spec.tsx
new file mode 100644
index 0000000000..ec6e7351e2
--- /dev/null
+++ b/packages/dify-ui/src/toggle-group/__tests__/index.spec.tsx
@@ -0,0 +1,74 @@
+import { render } from 'vitest-browser-react'
+import {
+  ToggleGroup,
+  ToggleGroupDivider,
+  ToggleGroupItem,
+} from '../index'
+
+const asHTMLElement = (element: HTMLElement | SVGElement) => element as HTMLElement
+
+describe('ToggleGroup wrappers', () => {
+  it('renders a segmented control with Base UI pressed state', async () => {
+    const screen = await render(
+      <ToggleGroup defaultValue={['one']} aria-label="View">
+        <ToggleGroupItem value="one">One</ToggleGroupItem>
+        <ToggleGroupItem value="two">Two</ToggleGroupItem>
+      </ToggleGroup>,
+    )
+
+    await expect.element(screen.getByRole('group')).toHaveClass(
+      'bg-components-segmented-control-bg-normal',
+      'p-0.5',
+      'rounded-[10px]',
+    )
+    await expect.element(screen.getByRole('button', { name: 'One' })).toHaveAttribute('aria-pressed', 'true')
+    await expect.element(screen.getByRole('button', { name: 'One' })).toHaveClass(
+      'data-pressed:bg-components-segmented-control-item-active-bg',
+      'data-pressed:text-text-accent-light-mode-only',
+    )
+  })
+
+  it('uses single selection by default', async () => {
+    const screen = await render(
+      <ToggleGroup defaultValue={['one']} aria-label="View">
+        <ToggleGroupItem value="one">One</ToggleGroupItem>
+        <ToggleGroupItem value="two">Two</ToggleGroupItem>
+      </ToggleGroup>,
+    )
+
+    asHTMLElement(screen.getByRole('button', { name: 'Two' }).element()).click()
+
+    await expect.element(screen.getByRole('button', { name: 'One' })).toHaveAttribute('aria-pressed', 'false')
+    await expect.element(screen.getByRole('button', { name: 'Two' })).toHaveAttribute('aria-pressed', 'true')
+  })
+
+  it('calls onValueChange while leaving controlled value to the caller', async () => {
+    const onValueChange = vi.fn()
+    const screen = await render(
+      <ToggleGroup value={['one']} onValueChange={onValueChange} aria-label="View">
+        <ToggleGroupItem value="one">One</ToggleGroupItem>
+        <ToggleGroupItem value="two">Two</ToggleGroupItem>
+      </ToggleGroup>,
+    )
+
+    asHTMLElement(screen.getByRole('button', { name: 'Two' }).element()).click()
+
+    expect(onValueChange).toHaveBeenCalledWith(['two'], expect.anything())
+    await expect.element(screen.getByRole('button', { name: 'One' })).toHaveAttribute('aria-pressed', 'true')
+  })
+
+  it('forwards disabled and className to composable parts', async () => {
+    const screen = await render(
+      <ToggleGroup defaultValue={['one']} aria-label="View" className="custom-group">
+        <ToggleGroupItem value="one" className="custom-item">One</ToggleGroupItem>
+        <ToggleGroupDivider className="custom-divider" data-testid="divider" />
+        <ToggleGroupItem value="two" disabled>Two</ToggleGroupItem>
+      </ToggleGroup>,
+    )
+
+    await expect.element(screen.getByRole('group')).toHaveClass('custom-group')
+    await expect.element(screen.getByRole('button', { name: 'One' })).toHaveClass('custom-item')
+    await expect.element(screen.getByRole('button', { name: 'Two' })).toBeDisabled()
+    await expect.element(screen.getByTestId('divider')).toHaveClass('custom-divider')
+  })
+})
diff --git a/packages/dify-ui/src/toggle-group/index.stories.tsx b/packages/dify-ui/src/toggle-group/index.stories.tsx
new file mode 100644
index 0000000000..960957b7ab
--- /dev/null
+++ b/packages/dify-ui/src/toggle-group/index.stories.tsx
@@ -0,0 +1,177 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { ReactNode } from 'react'
+import {
+  ToggleGroup,
+  ToggleGroupDivider,
+  ToggleGroupItem,
+} from '.'
+
+const meta = {
+  title: 'Base/UI/ToggleGroup',
+  component: ToggleGroup,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Segmented control built on Base UI ToggleGroup and Toggle. Use this for mode, filter, and view selection that does not need tabpanel semantics.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ToggleGroup>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+type SegmentedControlProps = {
+  defaultValue: string
+  values: string[]
+  iconOnly?: boolean
+  noPadding?: boolean
+}
+
+const Icon = () => (
+  <i className="i-ri-information-line size-4 shrink-0" aria-hidden="true" />
+)
+
+const Item = () => (
+  <>
+    <Icon />
+    <span className="px-0.5">Item</span>
+  </>
+)
+
+function SegmentedControl({
+  defaultValue,
+  values,
+  iconOnly = false,
+  noPadding = false,
+}: SegmentedControlProps) {
+  return (
+    <ToggleGroup
+      defaultValue={[defaultValue]}
+      aria-label="Segmented control"
+      className={noPadding ? 'rounded-lg border-[0.5px] border-divider-subtle p-0' : undefined}
+    >
+      {values.map((itemValue, index) => (
+        <span key={itemValue} className="relative flex items-center">
+          <ToggleGroupItem
+            value={itemValue}
+            aria-label={iconOnly ? `Item ${index + 1}` : undefined}
+          >
+            <Icon />
+            {!iconOnly && (
+              <span className="px-0.5">Item</span>
+            )}
+          </ToggleGroupItem>
+          {index === 1 && (
+            <span className="pointer-events-none absolute top-0 -right-px flex h-full items-center" aria-hidden="true">
+              <ToggleGroupDivider />
+            </span>
+          )}
+        </span>
+      ))}
+    </ToggleGroup>
+  )
+}
+
+function SpecColumn() {
+  const values = ['one', 'two', 'three']
+
+  return (
+    <div className="flex flex-col items-center gap-6">
+      <SegmentedControl defaultValue="one" values={values} />
+      <SegmentedControl defaultValue="one" values={values} iconOnly />
+      <SegmentedControl defaultValue="one" values={values} noPadding />
+      <SegmentedControl defaultValue="one" values={values} iconOnly noPadding />
+    </div>
+  )
+}
+
+function SpecPanel({
+  className,
+  children,
+}: {
+  className?: string
+  children: ReactNode
+}) {
+  return (
+    <div className={className}>
+      <div className="flex min-h-105 items-center justify-center">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export const DesignSpec: Story = {
+  render: () => (
+    <div className="overflow-hidden rounded-3xl bg-components-panel-bg-alt p-4">
+      <SpecPanel className="w-120 overflow-hidden rounded-2xl bg-components-chart-bg">
+        <SpecColumn />
+      </SpecPanel>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Figma node 2473:9851: segmented control examples with text+icon and icon-only rows, with and without outer padding.',
+      },
+    },
+  },
+}
+
+export const DataAttributeStates: Story = {
+  render: () => (
+    <div className="flex flex-col gap-5">
+      <ToggleGroup defaultValue={['active']} aria-label="Basic states">
+        <ToggleGroupItem value="default">
+          <Item />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="active">
+          <Item />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="disabled" disabled>
+          <Item />
+        </ToggleGroupItem>
+      </ToggleGroup>
+
+      <ToggleGroup defaultValue={['accent-light']} aria-label="Active states">
+        <ToggleGroupItem value="accent-light">
+          <Item />
+        </ToggleGroupItem>
+        <ToggleGroupItem
+          value="neutral"
+          className="data-pressed:text-text-primary"
+        >
+          <Item />
+        </ToggleGroupItem>
+        <ToggleGroupItem
+          value="accent"
+          className="data-pressed:border-components-segmented-control-item-active-accent-border data-pressed:bg-components-segmented-control-item-active-accent-bg data-pressed:text-text-accent"
+        >
+          <Item />
+        </ToggleGroupItem>
+      </ToggleGroup>
+
+      <ToggleGroup defaultValue={['one', 'three']} multiple aria-label="Multiple selection">
+        <ToggleGroupItem value="one">
+          <Item />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="two">
+          <Item />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="three">
+          <Item />
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: '`ToggleGroupItem` gets `data-pressed` and `data-disabled` from Base UI. Accent, neutral, and multiple-selection examples are composed through props and className.',
+      },
+    },
+  },
+}
diff --git a/packages/dify-ui/src/toggle-group/index.tsx b/packages/dify-ui/src/toggle-group/index.tsx
new file mode 100644
index 0000000000..661385a132
--- /dev/null
+++ b/packages/dify-ui/src/toggle-group/index.tsx
@@ -0,0 +1,58 @@
+'use client'
+
+import type { Toggle as BaseToggleNS } from '@base-ui/react/toggle'
+import type { ToggleGroup as BaseToggleGroupNS } from '@base-ui/react/toggle-group'
+import type { HTMLAttributes } from 'react'
+import { Toggle as BaseToggle } from '@base-ui/react/toggle'
+import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group'
+import { cn } from '../cn'
+
+export type ToggleGroupProps<Value extends string = string> = Omit<BaseToggleGroupNS.Props<Value>, 'className'> & {
+  className?: string
+}
+
+export function ToggleGroup<Value extends string = string>({
+  className,
+  ...props
+}: ToggleGroupProps<Value>) {
+  return (
+    <BaseToggleGroup
+      className={cn('inline-flex items-center gap-px rounded-[10px] bg-components-segmented-control-bg-normal p-0.5', className)}
+      {...props}
+    />
+  )
+}
+
+export type ToggleGroupItemProps<Value extends string = string> = Omit<BaseToggleNS.Props<Value>, 'className'> & {
+  className?: string
+}
+
+export function ToggleGroupItem<Value extends string = string>({
+  className,
+  ...props
+}: ToggleGroupItemProps<Value>) {
+  return (
+    <BaseToggle
+      className={cn('relative flex h-7 min-w-0 touch-manipulation items-center justify-center gap-0.5 overflow-hidden whitespace-nowrap rounded-lg border-[0.5px] border-transparent px-2 py-1 system-sm-medium text-text-secondary transition-colors duration-150 hover:bg-state-base-hover hover:text-text-secondary focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-components-input-border-hover data-pressed:border-components-segmented-control-item-active-border data-pressed:bg-components-segmented-control-item-active-bg data-pressed:text-text-accent-light-mode-only data-pressed:shadow-xs data-pressed:shadow-shadow-shadow-3 data-disabled:cursor-not-allowed data-disabled:bg-transparent data-disabled:text-text-disabled data-disabled:shadow-none data-disabled:hover:bg-transparent data-disabled:hover:text-text-disabled motion-reduce:transition-none', className)}
+      {...props}
+    />
+  )
+}
+
+export type ToggleGroupDividerProps = Omit<HTMLAttributes<HTMLSpanElement>, 'className'> & {
+  className?: string
+}
+
+export function ToggleGroupDivider({
+  className,
+  ...props
+}: ToggleGroupDividerProps) {
+  return (
+    <span
+      role="presentation"
+      aria-hidden="true"
+      className={cn('h-3.5 w-px shrink-0 bg-divider-regular', className)}
+      {...props}
+    />
+  )
+}
diff --git a/web/app/components/base/form/components/field/__tests__/variable-or-constant-input.spec.tsx b/web/app/components/base/form/components/field/__tests__/variable-or-constant-input.spec.tsx
deleted file mode 100644
index b4aa8bd24e..0000000000
--- a/web/app/components/base/form/components/field/__tests__/variable-or-constant-input.spec.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import VariableOrConstantInputField from '../variable-or-constant-input'
-
-vi.mock('@/app/components/workflow/nodes/_base/components/variable/var-reference-picker', () => ({
-  default: ({ onChange }: { onChange?: () => void }) => (
-    <button onClick={() => onChange?.()}>
-      Variable picker
-    </button>
-  ),
-}))
-
-describe('VariableOrConstantInputField', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it('should render variable picker by default', () => {
-    render(<VariableOrConstantInputField label="Input source" />)
-    expect(screen.getByRole('button', { name: 'Variable picker' }))!.toBeInTheDocument()
-  })
-
-  it('should switch to constant input when users choose constant', () => {
-    render(<VariableOrConstantInputField label="Input source" />)
-    fireEvent.click(screen.getAllByRole('button')[1]!)
-    expect(screen.queryByRole('button', { name: 'Variable picker' })).not.toBeInTheDocument()
-    expect(screen.getByRole('textbox'))!.toBeInTheDocument()
-  })
-
-  it('should show typed constant value in the input', () => {
-    render(<VariableOrConstantInputField label="Input source" />)
-    fireEvent.click(screen.getAllByRole('button')[1]!)
-    const textbox = screen.getByRole('textbox')
-    fireEvent.change(textbox, { target: { value: 'constant-value' } })
-    expect(textbox)!.toHaveValue('constant-value')
-  })
-
-  it('should switch back to variable mode when users choose variable again', () => {
-    render(<VariableOrConstantInputField label="Input source" />)
-    const modeButtons = screen.getAllByRole('button')
-
-    fireEvent.click(modeButtons[1]!)
-    expect(screen.getByRole('textbox'))!.toBeInTheDocument()
-
-    fireEvent.click(modeButtons[0]!)
-    expect(screen.getByRole('button', { name: 'Variable picker' }))!.toBeInTheDocument()
-  })
-
-  it('should handle variable picker changes', () => {
-    const logSpy = vi.spyOn(console, 'log').mockImplementation(() => { })
-    try {
-      render(<VariableOrConstantInputField label="Input source" />)
-      fireEvent.click(screen.getByRole('button', { name: 'Variable picker' }))
-      expect(logSpy).toHaveBeenCalledWith('Variable value changed')
-    }
-    finally {
-      logSpy.mockRestore()
-    }
-  })
-})
diff --git a/web/app/components/base/form/components/field/variable-or-constant-input.tsx b/web/app/components/base/form/components/field/variable-or-constant-input.tsx
deleted file mode 100644
index 04ecf99330..0000000000
--- a/web/app/components/base/form/components/field/variable-or-constant-input.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import type { ChangeEvent } from 'react'
-import type { LabelProps } from '../label'
-import { cn } from '@langgenius/dify-ui/cn'
-import { RiEditLine } from '@remixicon/react'
-import { useCallback, useState } from 'react'
-import { VariableX } from '@/app/components/base/icons/src/vender/workflow'
-import Input from '@/app/components/base/input'
-import SegmentedControl from '@/app/components/base/segmented-control'
-import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
-import Label from '../label'
-
-type VariableOrConstantInputFieldProps = {
-  label: string
-  labelOptions?: Omit<LabelProps, 'htmlFor' | 'label'>
-  className?: string
-}
-
-const VariableOrConstantInputField = ({
-  className,
-  label,
-  labelOptions,
-}: VariableOrConstantInputFieldProps) => {
-  const [variableType, setVariableType] = useState('variable')
-
-  const options = [
-    {
-      Icon: VariableX,
-      value: 'variable',
-    },
-    {
-      Icon: RiEditLine,
-      value: 'constant',
-    },
-  ]
-
-  const handleVariableOrConstantChange = useCallback((value: string) => {
-    setVariableType(value)
-  }, [setVariableType])
-
-  const handleVariableValueChange = () => {
-    console.log('Variable value changed')
-  }
-
-  const handleConstantValueChange = (e: ChangeEvent<HTMLInputElement>) => {
-    console.log('Constant value changed:', e.target.value)
-  }
-
-  return (
-    <div className={cn('flex flex-col gap-y-0.5', className)}>
-      <Label
-        htmlFor="variable-or-constant"
-        label={label}
-        {...(labelOptions ?? {})}
-      />
-      <div className="flex items-center">
-        <SegmentedControl
-          className="mr-1 shrink-0"
-          value={variableType}
-          onChange={handleVariableOrConstantChange as any}
-          options={options as any}
-        />
-        {
-          variableType === 'variable' && (
-            <VarReferencePicker
-              className="grow"
-              nodeId=""
-              readonly={false}
-              value={[]}
-              onChange={handleVariableValueChange}
-            />
-          )
-        }
-        {
-          variableType === 'constant' && (
-            <Input
-              className="ml-1"
-              onChange={handleConstantValueChange}
-            />
-          )
-        }
-      </div>
-    </div>
-  )
-}
-
-export default VariableOrConstantInputField
diff --git a/web/app/components/base/segmented-control/__tests__/index.spec.tsx b/web/app/components/base/segmented-control/__tests__/index.spec.tsx
deleted file mode 100644
index fd01b62764..0000000000
--- a/web/app/components/base/segmented-control/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import SegmentedControl from '../index'
-
-describe('SegmentedControl', () => {
-  const options = [
-    { value: 'option1', text: 'Option 1' },
-    { value: 'option2', text: 'Option 2' },
-    { value: 'option3', text: 'Option 3' },
-  ]
-
-  const optionsWithDisabled = [
-    { value: 'option1', text: 'Option 1' },
-    { value: 'option2', text: 'Option 2', disabled: true },
-    { value: 'option3', text: 'Option 3' },
-  ]
-
-  const onSelectMock = vi.fn((value: string | number | symbol) => value)
-
-  beforeEach(() => {
-    onSelectMock.mockClear()
-  })
-
-  it('renders all options correctly', () => {
-    render(<SegmentedControl options={options} value="option1" onChange={onSelectMock} />)
-
-    options.forEach((option) => {
-      expect(screen.getByText(option.text)).toBeInTheDocument()
-    })
-
-    const divider = screen.getByTestId('segmented-control-divider-1')
-    expect(divider).toBeInTheDocument()
-  })
-
-  it('renders with custom activeClassName when provided', () => {
-    render(
-      <SegmentedControl
-        options={options}
-        value="option1"
-        onChange={onSelectMock}
-        activeClassName="custom-active-class"
-      />,
-    )
-
-    const selectedOption = screen.getByText('Option 1').closest('button')
-    expect(selectedOption).toHaveClass('custom-active-class')
-  })
-
-  it('highlights the selected option', () => {
-    render(<SegmentedControl options={options} value="option2" onChange={onSelectMock} />)
-
-    const selectedOption = screen.getByText('Option 2').closest('button')
-    expect(selectedOption).toHaveClass('sc-active')
-  })
-
-  it('calls onChange when an option is clicked', () => {
-    render(<SegmentedControl options={options} value="option1" onChange={onSelectMock} />)
-
-    fireEvent.click(screen.getByText('Option 3'))
-    expect(onSelectMock).toHaveBeenCalledWith('option3')
-  })
-
-  it('does not call onChange when clicking the already selected option', () => {
-    render(<SegmentedControl options={options} value="option1" onChange={onSelectMock} />)
-
-    fireEvent.click(screen.getByText('Option 1'))
-    expect(onSelectMock).not.toHaveBeenCalled()
-  })
-
-  it('handles disabled state correctly', () => {
-    render(<SegmentedControl options={optionsWithDisabled} value="option1" onChange={onSelectMock} />)
-
-    fireEvent.click(screen.getByText('Option 2'))
-    expect(onSelectMock).not.toHaveBeenCalled()
-
-    const optionElement = screen.getByText('Option 2').closest('button')
-    expect(optionElement).toHaveAttribute('disabled')
-    expect(optionElement).toHaveClass('sc-disabled')
-
-    fireEvent.click(screen.getByText('Option 3'))
-    expect(onSelectMock).toHaveBeenCalledWith('option3')
-  })
-
-  it('renders with custom className when provided', () => {
-    const customClass = 'my-custom-class'
-    render(
-      <SegmentedControl
-        options={options}
-        value="option1"
-        onChange={onSelectMock}
-        className={customClass}
-      />,
-    )
-
-    const selectedOption = screen.getByText('Option 1').closest('button')?.closest('div')
-    expect(selectedOption).toHaveClass(customClass)
-  })
-
-  it('renders Icon when provided', () => {
-    const MockIcon = () => <svg data-testid="mock-icon" />
-    const optionsWithIcon = [
-      { value: 'option1', text: 'Option 1', Icon: MockIcon },
-    ]
-    render(<SegmentedControl options={optionsWithIcon} value="option1" onChange={onSelectMock} />)
-    expect(screen.getByTestId('mock-icon')).toBeInTheDocument()
-  })
-
-  it('renders count when provided and size is large', () => {
-    const optionsWithCount = [
-      { value: 'option1', text: 'Option 1', count: 42 },
-    ]
-    render(<SegmentedControl options={optionsWithCount} value="option1" onChange={onSelectMock} size="large" />)
-    expect(screen.getByText('42')).toBeInTheDocument()
-  })
-})
diff --git a/web/app/components/base/segmented-control/index.css b/web/app/components/base/segmented-control/index.css
deleted file mode 100644
index c0fbc914b6..0000000000
--- a/web/app/components/base/segmented-control/index.css
+++ /dev/null
@@ -1,109 +0,0 @@
-@utility segmented-control {
-  @apply flex items-center bg-components-segmented-control-bg-normal gap-x-px;
-}
-
-@utility segmented-control-regular {
-  @apply rounded-lg;
-
-  &.sc-padding {
-    @apply p-0.5;
-  }
-}
-
-@utility segmented-control-large {
-  @apply rounded-lg;
-
-  &.sc-padding {
-    @apply p-0.5;
-  }
-}
-
-@utility sc-padding {
-  &.segmented-control-large {
-    @apply p-0.5;
-  }
-
-  & .segmented-control-regular {
-    @apply p-0.5;
-  }
-
-  &.segmented-control-small {
-    @apply p-px;
-  }
-}
-
-@utility segmented-control-small {
-  @apply rounded-md;
-
-  &.sc-padding {
-    @apply p-px;
-  }
-}
-
-@utility sc-no-padding {
-  @apply border-[0.5px] border-divider-subtle;
-}
-
-@utility segmented-control-item {
-  @apply flex items-center justify-center relative border-[0.5px] border-transparent;
-}
-
-@utility segmented-control-item-regular {
-  @apply px-2 h-7 gap-x-0.5 rounded-lg;
-}
-
-@utility segmented-control-item-small {
-  @apply p-px h-[22px] rounded-md;
-}
-
-@utility segmented-control-item-large {
-  @apply px-2.5 h-8 gap-x-0.5 rounded-lg;
-}
-
-@utility segmented-control-item-disabled {
-  @apply cursor-not-allowed text-text-disabled;
-}
-
-@utility sc-default {
-  @apply hover:bg-state-base-hover text-text-tertiary hover:text-text-secondary;
-}
-
-@utility sc-active {
-  @apply border-components-segmented-control-item-active-border bg-components-segmented-control-item-active-bg shadow-xs shadow-shadow-shadow-3 text-text-secondary;
-
-  &.sc-accent {
-    @apply text-text-accent;
-  }
-
-  &.sc-accent-light {
-    @apply text-text-accent-light-mode-only;
-  }
-}
-
-@utility sc-disabled {
-  @apply cursor-not-allowed text-text-disabled hover:text-text-disabled bg-transparent hover:bg-transparent;
-}
-
-@utility sc-accent {
-  &.sc-active {
-    @apply text-text-accent;
-  }
-}
-
-@utility sc-accent-light {
-  &.sc-active {
-    @apply text-text-accent-light-mode-only;
-  }
-}
-
-@utility sc-item-text-regular {
-  @apply p-0.5;
-}
-
-@utility sc-item-text-small {
-  @apply p-0.5 pr-1;
-}
-
-@utility sc-item-text-large {
-  @apply px-0.5;
-}
diff --git a/web/app/components/base/segmented-control/index.stories.tsx b/web/app/components/base/segmented-control/index.stories.tsx
deleted file mode 100644
index 3f8f9b7c62..0000000000
--- a/web/app/components/base/segmented-control/index.stories.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { RiLineChartLine, RiListCheck2, RiRobot2Line } from '@remixicon/react'
-import { useState } from 'react'
-import { SegmentedControl } from '.'
-
-const SEGMENTS = [
-  { value: 'overview', text: 'Overview', Icon: RiLineChartLine },
-  { value: 'tasks', text: 'Tasks', Icon: RiListCheck2, count: 8 },
-  { value: 'agents', text: 'Agents', Icon: RiRobot2Line },
-]
-
-const SegmentedControlDemo = ({
-  initialValue = 'overview',
-  size = 'regular',
-  padding = 'with',
-  activeState = 'default',
-}: {
-  initialValue?: string
-  size?: 'regular' | 'small' | 'large'
-  padding?: 'none' | 'with'
-  activeState?: 'default' | 'accent' | 'accentLight'
-}) => {
-  const [value, setValue] = useState(initialValue)
-
-  return (
-    <div className="flex w-full max-w-lg flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
-      <div className="flex items-center justify-between text-xs tracking-[0.18em] text-text-tertiary uppercase">
-        <span>Segmented control</span>
-        <code className="rounded-md bg-background-default px-2 py-1 text-[11px] text-text-tertiary">
-          value="
-          {value}
-          "
-        </code>
-      </div>
-      <SegmentedControl
-        options={SEGMENTS}
-        value={value}
-        onChange={setValue}
-        size={size}
-        padding={padding}
-        activeState={activeState}
-      />
-    </div>
-  )
-}
-
-const meta = {
-  title: 'Base/Data Entry/SegmentedControl',
-  component: SegmentedControlDemo,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'Multi-tab segmented control with optional icons and badge counts. Adjust sizing and accent states via controls.',
-      },
-    },
-  },
-  argTypes: {
-    initialValue: {
-      control: 'radio',
-      options: SEGMENTS.map(segment => segment.value),
-    },
-    size: {
-      control: 'inline-radio',
-      options: ['small', 'regular', 'large'],
-    },
-    padding: {
-      control: 'inline-radio',
-      options: ['none', 'with'],
-    },
-    activeState: {
-      control: 'inline-radio',
-      options: ['default', 'accent', 'accentLight'],
-    },
-  },
-  args: {
-    initialValue: 'overview',
-    size: 'regular',
-    padding: 'with',
-    activeState: 'default',
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof SegmentedControlDemo>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Playground: Story = {}
-
-export const AccentState: Story = {
-  args: {
-    activeState: 'accent',
-  },
-}
diff --git a/web/app/components/base/segmented-control/index.tsx b/web/app/components/base/segmented-control/index.tsx
deleted file mode 100644
index 1f0d09472f..0000000000
--- a/web/app/components/base/segmented-control/index.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import type { RemixiconComponentType } from '@remixicon/react'
-import type { VariantProps } from 'class-variance-authority'
-import { cn } from '@langgenius/dify-ui/cn'
-import { cva } from 'class-variance-authority'
-import * as React from 'react'
-import Divider from '../divider'
-
-type SegmentedControlOption<T> = {
-  value: T
-  text?: string
-  Icon?: RemixiconComponentType
-  count?: number
-  disabled?: boolean
-}
-
-type SegmentedControlProps<T extends string | number | symbol> = {
-  options: SegmentedControlOption<T>[]
-  value: T
-  onChange: (value: T) => void
-  className?: string
-  activeClassName?: string
-  btnClassName?: string
-}
-
-const SegmentedControlVariants = cva(
-  'segmented-control',
-  {
-    variants: {
-      size: {
-        regular: 'segmented-control-regular',
-        small: 'segmented-control-small',
-        large: 'segmented-control-large',
-      },
-      padding: {
-        none: 'sc-no-padding',
-        with: 'sc-padding',
-      },
-    },
-    defaultVariants: {
-      size: 'regular',
-      padding: 'with',
-    },
-  },
-)
-
-const SegmentedControlItemVariants = cva(
-  'segmented-control-item disabled:segmented-control-item-disabled',
-  {
-    variants: {
-      size: {
-        regular: ['segmented-control-item-regular', 'system-sm-medium'],
-        small: ['segmented-control-item-small', 'system-xs-medium'],
-        large: ['segmented-control-item-large', 'system-md-semibold'],
-      },
-      activeState: {
-        default: '',
-        accent: 'sc-accent',
-        accentLight: 'sc-accent-light',
-      },
-    },
-    defaultVariants: {
-      size: 'regular',
-      activeState: 'default',
-    },
-  },
-)
-
-const ItemTextWrapperVariants = cva(
-  '',
-  {
-    variants: {
-      size: {
-        regular: 'sc-item-text-regular',
-        small: 'sc-item-text-small',
-        large: 'sc-item-text-large',
-      },
-    },
-    defaultVariants: {
-      size: 'regular',
-    },
-  },
-)
-
-export const SegmentedControl = <T extends string | number | symbol>({
-  options,
-  value,
-  onChange,
-  className,
-  size,
-  padding,
-  activeState,
-  activeClassName,
-  btnClassName,
-}: SegmentedControlProps<T>
-  & VariantProps<typeof SegmentedControlVariants>
-  & VariantProps<typeof SegmentedControlItemVariants>
-  & VariantProps<typeof ItemTextWrapperVariants>) => {
-  const selectedOptionIndex = options.findIndex(option => option.value === value)
-
-  return (
-    <div className={cn(
-      SegmentedControlVariants({ size, padding }),
-      className,
-    )}
-    >
-      {options.map((option, index) => {
-        const { Icon, text, count, disabled } = option
-        const isSelected = index === selectedOptionIndex
-        const isNextSelected = index === selectedOptionIndex - 1
-        const isLast = index === options.length - 1
-        return (
-          <button
-            type="button"
-            key={String(option.value)}
-            className={cn(
-              isSelected ? 'sc-active' : 'sc-default',
-              SegmentedControlItemVariants({ size, activeState: isSelected ? activeState : 'default' }),
-              isSelected && activeClassName,
-              disabled && 'sc-disabled',
-              btnClassName,
-            )}
-            onClick={() => {
-              if (!isSelected)
-                onChange(option.value)
-            }}
-            disabled={disabled}
-          >
-            {Icon && <Icon className="size-4 shrink-0" />}
-            {text && (
-              <div className={cn('inline-flex items-center gap-x-1', ItemTextWrapperVariants({ size }))}>
-                <span>{text}</span>
-                {!!(count && size === 'large') && (
-                  <div className="inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-[5px] system-2xs-medium-uppercase text-text-tertiary">
-                    {count}
-                  </div>
-                )}
-              </div>
-            )}
-            {!isLast && !isSelected && !isNextSelected && (
-              <div data-testid={`segmented-control-divider-${index}`} className="absolute top-0 -right-px flex h-full items-center">
-                <Divider type="vertical" className="mx-0 h-3.5" />
-              </div>
-            )}
-          </button>
-        )
-      })}
-    </div>
-  )
-}
-
-export default React.memo(SegmentedControl)
diff --git a/web/app/components/develop/__tests__/code.spec.tsx b/web/app/components/develop/__tests__/code.spec.tsx
index e5eaebb600..34a1f22380 100644
--- a/web/app/components/develop/__tests__/code.spec.tsx
+++ b/web/app/components/develop/__tests__/code.spec.tsx
@@ -139,6 +139,7 @@ describe('code.tsx components', () => {
         await waitFor(() => {
           expect(screen.getByText('second content')).toBeInTheDocument()
         })
+        expect(tab2).toHaveAttribute('aria-selected', 'true')
       })
 
       it('should use "Code" as default title when title not provided', () => {
@@ -329,7 +330,8 @@ describe('code.tsx components', () => {
           <pre><code>fallback</code></pre>
         </CodeGroup>,
       )
-      expect(screen.getByRole('tablist')).toBeInTheDocument()
+      expect(screen.getByRole('tablist')).toHaveClass('-mb-px', 'gap-4', 'bg-transparent')
+      expect(screen.getByRole('tab', { name: 'cURL' })).toHaveClass('data-active:text-emerald-400')
     })
   })
 
diff --git a/web/app/components/develop/code.tsx b/web/app/components/develop/code.tsx
index 86d57c806d..2ecd13f4ab 100644
--- a/web/app/components/develop/code.tsx
+++ b/web/app/components/develop/code.tsx
@@ -1,7 +1,12 @@
 'use client'
 import type { PropsWithChildren, ReactElement, ReactNode } from 'react'
-import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Tabs,
+  TabsList,
+  TabsPanel,
+  TabsTab,
+} from '@langgenius/dify-ui/tabs'
 import {
   Children,
   createContext,
@@ -103,6 +108,11 @@ type CodeExample = {
   code: string
 }
 
+type CodeTab = {
+  title: string
+  value: string
+}
+
 type ICodePanelProps = {
   children?: React.ReactNode
   tag?: string
@@ -142,12 +152,11 @@ function CodePanel({ tag, label, children, targetCode }: ICodePanelProps) {
 
 type CodeGroupHeaderProps = {
   title?: string
-  tabTitles?: string[]
-  selectedIndex?: number
+  tabs?: CodeTab[]
 }
 
-function CodeGroupHeader({ title, tabTitles, selectedIndex }: CodeGroupHeaderProps) {
-  const hasTabs = (tabTitles?.length ?? 0) > 1
+function CodeGroupHeader({ title, tabs }: CodeGroupHeaderProps) {
+  const hasTabs = (tabs?.length ?? 0) > 1
 
   return (
     <div className="flex min-h-[calc(--spacing(12)+1px)] flex-wrap items-start gap-x-4 border-b border-zinc-700 bg-zinc-800 px-4 dark:border-zinc-800 dark:bg-transparent">
@@ -157,18 +166,19 @@ function CodeGroupHeader({ title, tabTitles, selectedIndex }: CodeGroupHeaderPro
         </h3>
       )}
       {hasTabs && (
-        <TabList className="-mb-px flex gap-4 text-xs font-medium">
-          {tabTitles!.map((tabTitle, tabIndex) => (
-            <Tab
-              key={tabIndex}
-              className={cn('border-b py-3 transition focus:not-focus-visible:outline-hidden', tabIndex === selectedIndex
-                ? 'border-emerald-500 text-emerald-400'
-                : 'border-transparent text-zinc-400 hover:text-zinc-300')}
+        <TabsList
+          className="-mb-px flex gap-4 rounded-none bg-transparent p-0 text-xs font-medium"
+        >
+          {tabs!.map(tab => (
+            <TabsTab
+              key={tab.value}
+              value={tab.value}
+              className="h-auto rounded-none border-0 border-b border-transparent bg-transparent px-0 py-3 text-xs font-medium text-zinc-400 shadow-none transition hover:bg-transparent hover:text-zinc-300 focus:not-focus-visible:outline-hidden focus-visible:ring-0 data-active:border-emerald-500 data-active:bg-transparent data-active:text-emerald-400 data-active:shadow-none"
             >
-              {tabTitle}
-            </Tab>
+              {tab.title}
+            </TabsTab>
           ))}
-        </TabList>
+        </TabsList>
       )}
     </div>
   )
@@ -176,19 +186,24 @@ function CodeGroupHeader({ title, tabTitles, selectedIndex }: CodeGroupHeaderPro
 
 type ICodeGroupPanelsProps = PropsWithChildren<{
   targetCode?: CodeExample[]
+  tabs?: CodeTab[]
   [key: string]: any
 }>
 
-function CodeGroupPanels({ children, targetCode, ...props }: ICodeGroupPanelsProps) {
-  if ((targetCode?.length ?? 0) > 1) {
+function CodeGroupPanels({ children, targetCode, tabs, ...props }: ICodeGroupPanelsProps) {
+  if ((targetCode?.length ?? 0) > 1 && tabs) {
     return (
-      <TabPanels>
-        {targetCode!.map((code, index) => (
-          <TabPanel key={code.title || code.tag || index}>
-            <CodePanel {...props} targetCode={code} />
-          </TabPanel>
-        ))}
-      </TabPanels>
+      <>
+        {targetCode!.map((code, index) => {
+          const tab = tabs[index]
+
+          return (
+            <TabsPanel key={code.title || code.tag || index} value={tab?.value ?? String(index)}>
+              <CodePanel {...props} targetCode={code} />
+            </TabsPanel>
+          )
+        })}
+      </>
     )
   }
 
@@ -201,18 +216,27 @@ function usePreventLayoutShift() {
 
   useEffect(() => {
     return () => {
-      window.cancelAnimationFrame(rafRef.current)
+      if (rafRef.current)
+        window.cancelAnimationFrame(rafRef.current)
     }
   }, [])
 
   return {
     positionRef,
-    preventLayoutShift(callback: () => {}) {
+    preventLayoutShift(callback: () => void) {
+      if (!positionRef.current) {
+        callback()
+        return
+      }
+
       const initialTop = positionRef.current.getBoundingClientRect().top
 
       callback()
 
       rafRef.current = window.requestAnimationFrame(() => {
+        if (!positionRef.current)
+          return
+
         const newTop = positionRef.current.getBoundingClientRect().top
         window.scrollBy(0, newTop - initialTop)
       })
@@ -220,27 +244,27 @@ function usePreventLayoutShift() {
   }
 }
 
-function useTabGroupProps(availableLanguages: string[]) {
-  const [preferredLanguages, addPreferredLanguage] = useState<any>([])
-  const [selectedIndex, setSelectedIndex] = useState(0)
-  const activeLanguage = [...(availableLanguages || [])].sort(
-    (a, z) => preferredLanguages.indexOf(z) - preferredLanguages.indexOf(a),
-  )[0]
-  const languageIndex = availableLanguages?.indexOf(activeLanguage!) || 0
-  const newSelectedIndex = languageIndex === -1 ? selectedIndex : languageIndex
-  if (newSelectedIndex !== selectedIndex)
-    setSelectedIndex(newSelectedIndex)
-
+function useTabGroupProps(tabValues: string[]) {
+  const [selectedValue, setSelectedValue] = useState(tabValues[0] ?? '')
   const { positionRef, preventLayoutShift } = usePreventLayoutShift()
+  const value = tabValues.includes(selectedValue)
+    ? selectedValue
+    : tabValues[0] ?? ''
 
   return {
-    as: 'div',
     ref: positionRef,
-    selectedIndex,
-    onChange: (newSelectedIndex: number) => {
-      preventLayoutShift(() =>
-        (addPreferredLanguage(availableLanguages[newSelectedIndex]) as any),
-      )
+    value,
+    onValueChange: (newValue: string | number | null) => {
+      if (newValue == null)
+        return
+
+      const nextValue = String(newValue)
+      if (!tabValues.includes(nextValue))
+        return
+
+      preventLayoutShift(() => {
+        setSelectedValue(nextValue)
+      })
     },
   }
 }
@@ -260,24 +284,35 @@ type CodeGroupProps = PropsWithChildren<{
 
 export function CodeGroup({ children, title, targetCode, ...props }: CodeGroupProps) {
   const examples = typeof targetCode === 'string' ? [{ code: targetCode }] as CodeExample[] : targetCode
-  const tabTitles = examples?.map(({ title }) => title || 'Code') || []
-  const tabGroupProps = useTabGroupProps(tabTitles)
-  const hasTabs = tabTitles.length > 1
-  const Container = hasTabs ? TabGroup : 'div'
-  const containerProps = hasTabs ? tabGroupProps : {}
-  const headerProps = hasTabs
-    ? { selectedIndex: tabGroupProps.selectedIndex, tabTitles }
-    : {}
+  const tabs = examples?.map(({ title }, index) => ({
+    title: title || 'Code',
+    value: String(index),
+  })) || []
+  const tabGroupProps = useTabGroupProps(tabs.map(tab => tab.value))
+  const hasTabs = tabs.length > 1
+  const content = (
+    <>
+      <CodeGroupHeader title={title} tabs={hasTabs ? tabs : undefined} />
+      <CodeGroupPanels {...props} targetCode={examples} tabs={hasTabs ? tabs : undefined}>{children}</CodeGroupPanels>
+    </>
+  )
 
   return (
     <CodeGroupContext.Provider value={true}>
-      <Container
-        {...containerProps}
-        className="not-prose my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10"
-      >
-        <CodeGroupHeader title={title} {...headerProps} />
-        <CodeGroupPanels {...props} targetCode={examples}>{children}</CodeGroupPanels>
-      </Container>
+      {hasTabs
+        ? (
+            <Tabs
+              {...tabGroupProps}
+              className="not-prose my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10"
+            >
+              {content}
+            </Tabs>
+          )
+        : (
+            <div className="not-prose my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10">
+              {content}
+            </div>
+          )}
     </CodeGroupContext.Provider>
   )
 }
diff --git a/web/app/components/workflow/nodes/llm/components/__tests__/panel-output-section.spec.tsx b/web/app/components/workflow/nodes/llm/components/__tests__/panel-output-section.spec.tsx
index 65ff728292..97d5a8eb27 100644
--- a/web/app/components/workflow/nodes/llm/components/__tests__/panel-output-section.spec.tsx
+++ b/web/app/components/workflow/nodes/llm/components/__tests__/panel-output-section.spec.tsx
@@ -33,7 +33,7 @@ vi.mock('@/app/components/workflow/nodes/_base/components/output-vars', () => ({
 
 vi.mock('../structure-output', () => ({
   __esModule: true,
-  default: (props: { className?: string, value?: StructuredOutput, onChange: (value: StructuredOutput) => void }) => {
+  StructureOutput: (props: { className?: string, value?: StructuredOutput, onChange: (value: StructuredOutput) => void }) => {
     mockStructureOutput(props)
     return <div data-testid="structure-output">structured-output</div>
   },
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/index.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/index.tsx
index 66ea3bfc59..fa5166a06f 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/index.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/index.tsx
@@ -1,8 +1,6 @@
-import type { FC } from 'react'
 import type { SchemaRoot } from '../../types'
-import * as React from 'react'
 import Modal from '../../../../../base/modal'
-import JsonSchemaConfig from './json-schema-config'
+import { JsonSchemaConfig } from './json-schema-config'
 
 type JsonSchemaConfigModalProps = {
   isShow: boolean
@@ -11,12 +9,12 @@ type JsonSchemaConfigModalProps = {
   onClose: () => void
 }
 
-const JsonSchemaConfigModal: FC<JsonSchemaConfigModalProps> = ({
+export function JsonSchemaConfigModal({
   isShow,
   defaultSchema,
   onSave,
   onClose,
-}) => {
+}: JsonSchemaConfigModalProps) {
   return (
     <Modal
       isShow={isShow}
@@ -31,5 +29,3 @@ const JsonSchemaConfigModal: FC<JsonSchemaConfigModalProps> = ({
     </Modal>
   )
 }
-
-export default JsonSchemaConfigModal
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx
index 96c508b48f..c8dbf3ab90 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx
@@ -1,13 +1,12 @@
-import type { FC } from 'react'
 import type { SchemaRoot } from '../../types'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { toast } from '@langgenius/dify-ui/toast'
-import { useCallback, useState } from 'react'
+import { ToggleGroup, ToggleGroupItem } from '@langgenius/dify-ui/toggle-group'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import { JSON_SCHEMA_MAX_DEPTH } from '@/config'
-import { SegmentedControl } from '../../../../../base/segmented-control'
 import { Type } from '../../types'
 import {
   checkJsonSchemaDepth,
@@ -35,11 +34,15 @@ enum SchemaView {
   JsonSchema = 'jsonSchema',
 }
 
-const TimelineViewIcon: FC<{ className?: string }> = ({ className }) => {
+type IconProps = {
+  className?: string
+}
+
+function TimelineViewIcon({ className }: IconProps) {
   return <span className={cn('i-ri-timeline-view', className)} />
 }
 
-const BracesIcon: FC<{ className?: string }> = ({ className }) => {
+function BracesIcon({ className }: IconProps) {
   return <span className={cn('i-ri-braces-line', className)} />
 }
 
@@ -55,13 +58,13 @@ const DEFAULT_SCHEMA: SchemaRoot = {
   additionalProperties: false,
 }
 
-const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
+function JsonSchemaConfigContent({
   defaultSchema,
   onSave,
   onClose,
-}) => {
+}: JsonSchemaConfigProps) {
   const { t } = useTranslation()
-  const [currentTab, setCurrentTab] = useState(SchemaView.VisualEditor)
+  const [currentTab, setCurrentTab] = useState<readonly SchemaView[]>([SchemaView.VisualEditor])
   const [jsonSchema, setJsonSchema] = useState(defaultSchema || DEFAULT_SCHEMA)
   const [json, setJson] = useState(() => JSON.stringify(jsonSchema, null, 2))
   const [btnWidth, setBtnWidth] = useState(0)
@@ -73,15 +76,16 @@ const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
   const setIsAddingNewField = useVisualEditorStore(state => state.setIsAddingNewField)
   const setHoveringProperty = useVisualEditorStore(state => state.setHoveringProperty)
   const { emit } = useMittContext()
+  const selectedTab = currentTab[0] ?? SchemaView.VisualEditor
 
-  const updateBtnWidth = useCallback((width: number) => {
+  function updateBtnWidth(width: number) {
     setBtnWidth(width + 32)
-  }, [])
+  }
 
-  const handleTabChange = useCallback((value: SchemaView) => {
-    if (currentTab === value)
+  function handleTabChange(value: SchemaView) {
+    if (selectedTab === value)
       return
-    if (currentTab === SchemaView.JsonSchema) {
+    if (selectedTab === SchemaView.JsonSchema) {
       try {
         const schema = JSON.parse(json)
         setParseError(null)
@@ -112,41 +116,41 @@ const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
         return
       }
     }
-    else if (currentTab === SchemaView.VisualEditor) {
+    else if (selectedTab === SchemaView.VisualEditor) {
       if (advancedEditing || isAddingNewField)
         emit('quitEditing', { callback: (backup: SchemaRoot) => setJson(JSON.stringify(backup || jsonSchema, null, 2)) })
       else
         setJson(JSON.stringify(jsonSchema, null, 2))
     }
 
-    setCurrentTab(value)
-  }, [currentTab, jsonSchema, json, advancedEditing, isAddingNewField, emit])
+    setCurrentTab([value])
+  }
 
-  const handleApplySchema = useCallback((schema: SchemaRoot) => {
-    if (currentTab === SchemaView.VisualEditor)
+  function handleApplySchema(schema: SchemaRoot) {
+    if (selectedTab === SchemaView.VisualEditor)
       setJsonSchema(schema)
-    else if (currentTab === SchemaView.JsonSchema)
+    else if (selectedTab === SchemaView.JsonSchema)
       setJson(JSON.stringify(schema, null, 2))
-  }, [currentTab])
+  }
 
-  const handleSubmit = useCallback((schema: Record<string, unknown>) => {
+  function handleSubmit(schema: Record<string, unknown>) {
     const jsonSchema = jsonToSchema(schema) as SchemaRoot
-    if (currentTab === SchemaView.VisualEditor)
+    if (selectedTab === SchemaView.VisualEditor)
       setJsonSchema(jsonSchema)
-    else if (currentTab === SchemaView.JsonSchema)
+    else if (selectedTab === SchemaView.JsonSchema)
       setJson(JSON.stringify(jsonSchema, null, 2))
-  }, [currentTab])
+  }
 
-  const handleVisualEditorUpdate = useCallback((schema: SchemaRoot) => {
+  function handleVisualEditorUpdate(schema: SchemaRoot) {
     setJsonSchema(schema)
-  }, [])
+  }
 
-  const handleSchemaEditorUpdate = useCallback((schema: string) => {
+  function handleSchemaEditorUpdate(schema: string) {
     setJson(schema)
-  }, [])
+  }
 
-  const handleResetDefaults = useCallback(() => {
-    if (currentTab === SchemaView.VisualEditor) {
+  function handleResetDefaults() {
+    if (selectedTab === SchemaView.VisualEditor) {
       setHoveringProperty(null)
       if (advancedEditing)
         setAdvancedEditing(false)
@@ -155,15 +159,15 @@ const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
     }
     setJsonSchema(DEFAULT_SCHEMA)
     setJson(JSON.stringify(DEFAULT_SCHEMA, null, 2))
-  }, [currentTab, advancedEditing, isAddingNewField, setAdvancedEditing, setIsAddingNewField, setHoveringProperty])
+  }
 
-  const handleCancel = useCallback(() => {
+  function handleCancel() {
     onClose()
-  }, [onClose])
+  }
 
-  const handleSave = useCallback(() => {
+  function handleSave() {
     let schema = jsonSchema
-    if (currentTab === SchemaView.JsonSchema) {
+    if (selectedTab === SchemaView.JsonSchema) {
       try {
         schema = JSON.parse(json)
         setParseError(null)
@@ -194,7 +198,7 @@ const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
         return
       }
     }
-    else if (currentTab === SchemaView.VisualEditor) {
+    else if (selectedTab === SchemaView.VisualEditor) {
       if (advancedEditing || isAddingNewField) {
         toast.warning(t('nodes.llm.jsonSchema.warningTips.saveSchema', { ns: 'workflow' }))
         return
@@ -202,7 +206,7 @@ const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
     }
     onSave(schema)
     onClose()
-  }, [currentTab, jsonSchema, json, onSave, onClose, advancedEditing, isAddingNewField, t])
+  }
 
   return (
     <div className="flex h-full flex-col">
@@ -211,18 +215,34 @@ const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
         <div className="grow truncate title-2xl-semi-bold text-text-primary">
           {t('nodes.llm.jsonSchema.title', { ns: 'workflow' })}
         </div>
-        <div className="absolute top-5 right-5 flex h-8 w-8 items-center justify-center p-1.5" onClick={onClose}>
+        <button
+          type="button"
+          className="absolute top-5 right-5 flex h-8 w-8 items-center justify-center p-1.5"
+          aria-label={t('operation.close', { ns: 'common' })}
+          onClick={onClose}
+        >
           <span className="i-ri-close-line h-[18px] w-[18px] text-text-tertiary" />
-        </div>
+        </button>
       </div>
       {/* Content */}
       <div className="flex items-center justify-between px-6 py-2">
         {/* Tab */}
-        <SegmentedControl<SchemaView>
-          options={VIEW_TABS}
+        <ToggleGroup<SchemaView>
+          aria-label={t('nodes.llm.jsonSchema.title', { ns: 'workflow' })}
           value={currentTab}
-          onChange={handleTabChange}
-        />
+          onValueChange={(nextTab) => {
+            const value = nextTab[0]
+            if (value)
+              handleTabChange(value)
+          }}
+        >
+          {VIEW_TABS.map(({ Icon, text, value }) => (
+            <ToggleGroupItem key={value} value={value}>
+              <Icon className="size-4 shrink-0" />
+              <span className="p-0.5">{text}</span>
+            </ToggleGroupItem>
+          ))}
+        </ToggleGroup>
         <div className="flex items-center gap-x-0.5">
           {/* JSON Schema Generator */}
           <JsonSchemaGenerator
@@ -238,13 +258,13 @@ const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
         </div>
       </div>
       <div className="flex grow flex-col gap-y-1 overflow-hidden px-6">
-        {currentTab === SchemaView.VisualEditor && (
+        {selectedTab === SchemaView.VisualEditor && (
           <VisualEditor
             schema={jsonSchema}
             onChange={handleVisualEditorUpdate}
           />
         )}
-        {currentTab === SchemaView.JsonSchema && (
+        {selectedTab === SchemaView.JsonSchema && (
           <SchemaEditor
             schema={json}
             onUpdate={handleSchemaEditorUpdate}
@@ -276,14 +296,12 @@ const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
   )
 }
 
-const JsonSchemaConfigWrapper: FC<JsonSchemaConfigProps> = (props) => {
+export function JsonSchemaConfig(props: JsonSchemaConfigProps) {
   return (
     <MittProvider>
       <VisualEditorContextProvider>
-        <JsonSchemaConfig {...props} />
+        <JsonSchemaConfigContent {...props} />
       </VisualEditorContextProvider>
     </MittProvider>
   )
 }
-
-export default JsonSchemaConfigWrapper
diff --git a/web/app/components/workflow/nodes/llm/components/panel-output-section.tsx b/web/app/components/workflow/nodes/llm/components/panel-output-section.tsx
index 53f7161fba..82b0a24aef 100644
--- a/web/app/components/workflow/nodes/llm/components/panel-output-section.tsx
+++ b/web/app/components/workflow/nodes/llm/components/panel-output-section.tsx
@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next'
 import { Infotip } from '@/app/components/base/infotip'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
-import StructureOutput from './structure-output'
+import { StructureOutput } from './structure-output'
 
 type Props = {
   readOnly: boolean
diff --git a/web/app/components/workflow/nodes/llm/components/structure-output.tsx b/web/app/components/workflow/nodes/llm/components/structure-output.tsx
index d8b3e132bb..c7dadab269 100644
--- a/web/app/components/workflow/nodes/llm/components/structure-output.tsx
+++ b/web/app/components/workflow/nodes/llm/components/structure-output.tsx
@@ -1,16 +1,12 @@
 'use client'
-import type { FC } from 'react'
 import type { SchemaRoot, StructuredOutput } from '../types'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
-import { RiEditLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
-import * as React from 'react'
-import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import ShowPanel from '@/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show'
 import { Type } from '../types'
-import JsonSchemaConfigModal from './json-schema-config-modal'
+import { JsonSchemaConfigModal } from './json-schema-config-modal'
 
 type Props = {
   className?: string
@@ -18,22 +14,23 @@ type Props = {
   onChange: (value: StructuredOutput) => void
 }
 
-const StructureOutput: FC<Props> = ({
+export function StructureOutput({
   className,
   value,
   onChange,
-}) => {
+}: Props) {
   const { t } = useTranslation()
   const [showConfig, {
     setTrue: showConfigModal,
     setFalse: hideConfigModal,
   }] = useBoolean(false)
 
-  const handleChange = useCallback((value: SchemaRoot) => {
+  function handleChange(value: SchemaRoot) {
     onChange({
       schema: value,
     })
-  }, [onChange])
+  }
+
   return (
     <div className={cn(className)}>
       <div className="flex justify-between">
@@ -47,7 +44,7 @@ const StructureOutput: FC<Props> = ({
           className="flex"
           onClick={showConfigModal}
         >
-          <RiEditLine className="mr-1 size-3.5" />
+          <i className="mr-1 i-ri-edit-line size-3.5" aria-hidden="true" />
           <div className="system-xs-medium text-components-button-secondary-text">{t('structOutput.configure', { ns: 'app' })}</div>
         </Button>
       </div>
@@ -58,7 +55,13 @@ const StructureOutput: FC<Props> = ({
             />
           )
         : (
-            <div className="mt-1.5 flex h-10 cursor-pointer items-center justify-center rounded-[10px] bg-background-section system-xs-regular text-text-tertiary" onClick={showConfigModal}>{t('structOutput.notConfiguredTip', { ns: 'app' })}</div>
+            <button
+              type="button"
+              className="mt-1.5 flex h-10 w-full cursor-pointer items-center justify-center rounded-[10px] bg-background-section system-xs-regular text-text-tertiary"
+              onClick={showConfigModal}
+            >
+              {t('structOutput.notConfiguredTip', { ns: 'app' })}
+            </button>
           )}
 
       {showConfig && (
@@ -77,4 +80,3 @@ const StructureOutput: FC<Props> = ({
     </div>
   )
 }
-export default React.memo(StructureOutput)
diff --git a/web/app/components/workflow/nodes/trigger-schedule/components/__tests__/integration.spec.tsx b/web/app/components/workflow/nodes/trigger-schedule/components/__tests__/integration.spec.tsx
index c0a769ffb0..26609885d2 100644
--- a/web/app/components/workflow/nodes/trigger-schedule/components/__tests__/integration.spec.tsx
+++ b/web/app/components/workflow/nodes/trigger-schedule/components/__tests__/integration.spec.tsx
@@ -3,7 +3,6 @@ import type { ScheduleTriggerNodeType } from '../../types'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import FrequencySelector from '../frequency-selector'
-import ModeSwitcher from '../mode-switcher'
 import ModeToggle from '../mode-toggle'
 import MonthlyDaysSelector from '../monthly-days-selector'
 import NextExecutionTimes from '../next-execution-times'
@@ -53,16 +52,6 @@ describe('trigger-schedule components', () => {
       })
     })
 
-    it('should switch between visual and cron modes', async () => {
-      const user = userEvent.setup()
-      const onChange = vi.fn()
-      render(<ModeSwitcher mode="visual" onChange={onChange} />)
-
-      await user.click(screen.getByText('workflow.nodes.triggerSchedule.modeCron'))
-
-      expect(onChange).toHaveBeenCalledWith('cron')
-    })
-
     it('should toggle the mode from visual to cron', async () => {
       const user = userEvent.setup()
       const onChange = vi.fn()
diff --git a/web/app/components/workflow/nodes/trigger-schedule/components/__tests__/mode-switcher.spec.tsx b/web/app/components/workflow/nodes/trigger-schedule/components/__tests__/mode-switcher.spec.tsx
deleted file mode 100644
index c4d5af5b11..0000000000
--- a/web/app/components/workflow/nodes/trigger-schedule/components/__tests__/mode-switcher.spec.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import ModeSwitcher from '../mode-switcher'
-
-describe('trigger-schedule/mode-switcher', () => {
-  it('switches between visual and cron modes', async () => {
-    const user = userEvent.setup()
-    const onChange = vi.fn()
-
-    render(<ModeSwitcher mode="visual" onChange={onChange} />)
-
-    await user.click(screen.getByText('workflow.nodes.triggerSchedule.modeCron'))
-
-    expect(onChange).toHaveBeenCalledWith('cron')
-  })
-})
diff --git a/web/app/components/workflow/nodes/trigger-schedule/components/mode-switcher.tsx b/web/app/components/workflow/nodes/trigger-schedule/components/mode-switcher.tsx
deleted file mode 100644
index bb914e313f..0000000000
--- a/web/app/components/workflow/nodes/trigger-schedule/components/mode-switcher.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import type { ScheduleMode } from '../types'
-import { RiCalendarLine, RiCodeLine } from '@remixicon/react'
-import * as React from 'react'
-import { useTranslation } from 'react-i18next'
-import { SegmentedControl } from '@/app/components/base/segmented-control'
-
-type ModeSwitcherProps = {
-  mode: ScheduleMode
-  onChange: (mode: ScheduleMode) => void
-}
-
-const ModeSwitcher = ({ mode, onChange }: ModeSwitcherProps) => {
-  const { t } = useTranslation()
-
-  const options = [
-    {
-      Icon: RiCalendarLine,
-      text: t('nodes.triggerSchedule.modeVisual', { ns: 'workflow' }),
-      value: 'visual' as const,
-    },
-    {
-      Icon: RiCodeLine,
-      text: t('nodes.triggerSchedule.modeCron', { ns: 'workflow' }),
-      value: 'cron' as const,
-    },
-  ]
-
-  return (
-    <SegmentedControl
-      options={options}
-      value={mode}
-      onChange={onChange}
-    />
-  )
-}
-
-export default ModeSwitcher
diff --git a/web/app/components/workflow/variable-inspect/__tests__/display-content.spec.tsx b/web/app/components/workflow/variable-inspect/__tests__/display-content.spec.tsx
index bbc4714a92..9ba5763576 100644
--- a/web/app/components/workflow/variable-inspect/__tests__/display-content.spec.tsx
+++ b/web/app/components/workflow/variable-inspect/__tests__/display-content.spec.tsx
@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import DisplayContent from '../display-content'
+import { DisplayContent } from '../display-content'
 import { PreviewType } from '../types'
 
 describe('variable inspect display content', () => {
diff --git a/web/app/components/workflow/variable-inspect/display-content.tsx b/web/app/components/workflow/variable-inspect/display-content.tsx
index 2edd84d0de..11ee2a7a42 100644
--- a/web/app/components/workflow/variable-inspect/display-content.tsx
+++ b/web/app/components/workflow/variable-inspect/display-content.tsx
@@ -2,12 +2,10 @@ import type { VarType } from '../types'
 import type { ChunkInfo } from '@/app/components/rag-pipeline/components/chunk-card-list/types'
 import type { ParentMode } from '@/models/datasets'
 import { cn } from '@langgenius/dify-ui/cn'
-import { RiBracesLine, RiEyeLine } from '@remixicon/react'
-import * as React from 'react'
+import { ToggleGroup, ToggleGroupItem } from '@langgenius/dify-ui/toggle-group'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Markdown } from '@/app/components/base/markdown'
-import { SegmentedControl } from '@/app/components/base/segmented-control'
 import Textarea from '@/app/components/base/textarea'
 import { ChunkCardList } from '@/app/components/rag-pipeline/components/chunk-card-list'
 import SchemaEditor from '@/app/components/workflow/nodes/llm/components/json-schema-config-modal/schema-editor'
@@ -26,11 +24,16 @@ type DisplayContentProps = {
   className?: string
 }
 
-const DisplayContent = (props: DisplayContentProps) => {
+export function DisplayContent(props: DisplayContentProps) {
   const { previewType, varType, schemaType, mdString, jsonString, readonly, handleTextChange, handleEditorChange, className } = props
-  const [viewMode, setViewMode] = useState<ViewMode>(ViewMode.Code)
+  const [viewMode, setViewMode] = useState<readonly ViewMode[]>([ViewMode.Code])
   const [isFocused, setIsFocused] = useState(false)
   const { t } = useTranslation()
+  const viewOptions = [
+    { value: ViewMode.Code, label: t('nodes.templateTransform.code', { ns: 'workflow' }), iconClassName: 'i-ri-braces-line' },
+    { value: ViewMode.Preview, label: t('common.preview', { ns: 'workflow' }), iconClassName: 'i-ri-eye-line' },
+  ]
+  const selectedViewMode = viewMode[0] ?? ViewMode.Code
 
   const chunkType = useMemo(() => {
     if (previewType !== PreviewType.Chunks || !schemaType)
@@ -65,22 +68,26 @@ const DisplayContent = (props: DisplayContentProps) => {
             {schemaType ? `(${schemaType})` : ''}
           </div>
         )}
-        <SegmentedControl
-          options={[
-            { value: ViewMode.Code, text: t('nodes.templateTransform.code', { ns: 'workflow' }), Icon: RiBracesLine },
-            { value: ViewMode.Preview, text: t('common.preview', { ns: 'workflow' }), Icon: RiEyeLine },
-          ]}
+        <ToggleGroup<ViewMode>
+          aria-label={t('common.preview', { ns: 'workflow' })}
           value={viewMode}
-          onChange={setViewMode}
-          size="small"
-          padding="with"
-          activeClassName="text-text-accent-light-mode-only!"
-          btnClassName="pl-1.5! pr-0.5! gap-[3px]"
-          className="shrink-0"
-        />
+          onValueChange={setViewMode}
+          className="shrink-0 rounded-md p-px"
+        >
+          {viewOptions.map(({ value, label, iconClassName }) => (
+            <ToggleGroupItem
+              key={value}
+              value={value}
+              className="h-[22px] gap-[3px] rounded-md p-px pr-0.5 pl-1.5 text-text-tertiary data-pressed:text-text-accent-light-mode-only"
+            >
+              <i className={cn('size-4 shrink-0', iconClassName)} aria-hidden="true" />
+              <span className="p-0.5 pr-1">{label}</span>
+            </ToggleGroupItem>
+          ))}
+        </ToggleGroup>
       </div>
       <div className="flex flex-1 overflow-auto rounded-b-[10px] pr-1 pl-3">
-        {viewMode === ViewMode.Code && (
+        {selectedViewMode === ViewMode.Code && (
           previewType === PreviewType.Markdown
             ? (
                 <Textarea
@@ -105,7 +112,7 @@ const DisplayContent = (props: DisplayContentProps) => {
                 />
               )
         )}
-        {viewMode === ViewMode.Preview && (
+        {selectedViewMode === ViewMode.Preview && (
           previewType === PreviewType.Markdown
             ? <Markdown className="grow overflow-auto rounded-lg px-4 py-3" content={(mdString ?? '') as string} />
             : (
@@ -120,5 +127,3 @@ const DisplayContent = (props: DisplayContentProps) => {
     </div>
   )
 }
-
-export default React.memo(DisplayContent)
diff --git a/web/app/components/workflow/variable-inspect/value-content-sections.tsx b/web/app/components/workflow/variable-inspect/value-content-sections.tsx
index 8d892343cd..8fb6c14d2f 100644
--- a/web/app/components/workflow/variable-inspect/value-content-sections.tsx
+++ b/web/app/components/workflow/variable-inspect/value-content-sections.tsx
@@ -11,7 +11,7 @@ import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import { TransferMethod } from '@/types/app'
 import { PreviewMode } from '../../base/features/types'
 import BoolValue from '../panel/chat-variable-panel/components/bool-value'
-import DisplayContent from './display-content'
+import { DisplayContent } from './display-content'
 import LargeDataAlert from './large-data-alert'
 import { PreviewType } from './types'
 
diff --git a/web/app/styles/tailwind-core.css b/web/app/styles/tailwind-core.css
index 91af9df192..614a46652b 100644
--- a/web/app/styles/tailwind-core.css
+++ b/web/app/styles/tailwind-core.css
@@ -28,7 +28,6 @@
 @import '../components/base/action-button/index.css';
 @import '../components/base/badge/index.css';
 @import '../components/base/premium-badge/index.css';
-@import '../components/base/segmented-control/index.css';
 
 /* ---------- JS plugins ------------------------------------------------ */
 @plugin './plugins/icons.ts';

From 4a56763d2fa0c18114ae304de534e3a8b5be911a Mon Sep 17 00:00:00 2001
From: chariri <w@chariri.moe>
Date: Sat, 9 May 2026 17:34:15 +0900
Subject: [PATCH 03/13] refactor(api): migrate console.app.workflow etc. to
 BaseModel (#35967)

---
 api/AGENTS.md                                 |   4 +
 api/controllers/API_SCHEMA_GUIDE.md           | 193 +++++++++++
 api/controllers/common/schema.py              |  30 +-
 api/controllers/console/app/workflow.py       |  71 ++--
 api/controllers/console/app/workflow_run.py   | 314 +++++++-----------
 .../rag_pipeline/rag_pipeline_workflow.py     |  77 +++--
 api/fields/workflow_run_fields.py             | 131 +-------
 api/openapi/markdown/console-swagger.md       | 291 ++++++++--------
 .../test_rag_pipeline_workflow.py             |  41 ++-
 .../controllers/common/test_schema.py         |  18 +
 .../app/test_workflow_pause_details_api.py    |  21 ++
 .../console/app/test_workflow_run_api.py      | 248 ++++++++++++++
 12 files changed, 941 insertions(+), 498 deletions(-)
 create mode 100644 api/controllers/API_SCHEMA_GUIDE.md
 create mode 100644 api/tests/unit_tests/controllers/console/app/test_workflow_run_api.py

diff --git a/api/AGENTS.md b/api/AGENTS.md
index 8e5d9f600d..eb4404509d 100644
--- a/api/AGENTS.md
+++ b/api/AGENTS.md
@@ -193,6 +193,10 @@ Before opening a PR / submitting:
 - Controllers: parse input via Pydantic, invoke services, return serialised responses; no business logic.
 - Services: coordinate repositories, providers, background tasks; keep side effects explicit.
 - Document non-obvious behaviour with concise docstrings and comments.
+- For Flask-RESTX controller request, query, and response schemas, follow `controllers/API_SCHEMA_GUIDE.md`.
+  In short: use Pydantic models, document GET query params with `query_params_from_model(...)`, register response
+  DTOs with `register_response_schema_models(...)`, serialize with `ResponseModel.model_validate(...).model_dump(...)`,
+  and avoid adding new legacy `ns.model(...)`, `@marshal_with(...)`, or GET `@ns.expect(...)` patterns.
 
 ### Miscellaneous
 
diff --git a/api/controllers/API_SCHEMA_GUIDE.md b/api/controllers/API_SCHEMA_GUIDE.md
new file mode 100644
index 0000000000..5b1b055b09
--- /dev/null
+++ b/api/controllers/API_SCHEMA_GUIDE.md
@@ -0,0 +1,193 @@
+# API Schema Guide
+
+This guide describes the expected Flask-RESTX + Pydantic pattern for controller request payloads, query
+parameters, response schemas, and Swagger documentation.
+
+## Principles
+
+- Use Pydantic `BaseModel` for request bodies and query parameters.
+- Use `fields.base.ResponseModel` for response DTOs.
+- Keep runtime validation and Swagger documentation wired to the same Pydantic model.
+- Prefer explicit validation and serialization in controller methods over Flask-RESTX marshalling.
+- Do not add new Flask-RESTX `fields.*` dictionaries, `Namespace.model(...)` exports, or `@marshal_with(...)` for migrated or new endpoints.
+- Do not use `@ns.expect(...)` for GET query parameters. Flask-RESTX documents that as a request body.
+
+## Naming
+
+- Request body models: use a `Payload` suffix.
+  - Example: `WorkflowRunPayload`, `DatasourceVariablesPayload`.
+- Query parameter models: use a `Query` suffix.
+  - Example: `WorkflowRunListQuery`, `MessageListQuery`.
+- Response models: use a `Response` suffix and inherit from `ResponseModel`.
+  - Example: `WorkflowRunDetailResponse`, `WorkflowRunNodeExecutionListResponse`.
+- Use `ListResponse` or `PaginationResponse` for wrapper responses.
+  - Example: `WorkflowRunNodeExecutionListResponse`, `WorkflowRunPaginationResponse`.
+- Keep these models near the controller when they are endpoint-specific. Move them to `fields/*_fields.py` only when shared by multiple controllers.
+
+## Registering Models For Swagger
+
+Use helpers from `controllers.common.schema`.
+
+```python
+from controllers.common.schema import (
+    query_params_from_model,
+    register_response_schema_models,
+    register_schema_models,
+)
+```
+
+Register request payload and query models with `register_schema_models(...)`:
+
+```python
+register_schema_models(
+    console_ns,
+    WorkflowRunPayload,
+    WorkflowRunListQuery,
+)
+```
+
+Register response models with `register_response_schema_models(...)`:
+
+```python
+register_response_schema_models(
+    console_ns,
+    WorkflowRunDetailResponse,
+    WorkflowRunPaginationResponse,
+)
+```
+
+Response models are registered in Pydantic serialization mode. This matters when a response model uses
+`validation_alias` to read internal object attributes but emits public API field names. For example, a response model
+can validate from `inputs_dict` while documenting and serializing `inputs`.
+
+## Request Bodies
+
+For non-GET request bodies:
+
+1. Define a Pydantic `Payload` model.
+2. Register it with `register_schema_models(...)`.
+3. Use `@ns.expect(ns.models[Payload.__name__])` for Swagger documentation.
+4. Validate from `ns.payload or {}` inside the controller.
+
+```python
+class DraftWorkflowNodeRunPayload(BaseModel):
+    inputs: dict[str, Any]
+    query: str = ""
+
+
+register_schema_models(console_ns, DraftWorkflowNodeRunPayload)
+
+
+@console_ns.expect(console_ns.models[DraftWorkflowNodeRunPayload.__name__])
+def post(self, app_model: App, node_id: str):
+    payload = DraftWorkflowNodeRunPayload.model_validate(console_ns.payload or {})
+    result = service.run(..., inputs=payload.inputs, query=payload.query)
+    return WorkflowRunNodeExecutionResponse.model_validate(result, from_attributes=True).model_dump(mode="json")
+```
+
+## Query Parameters
+
+For GET query parameters:
+
+1. Define a Pydantic `Query` model.
+2. Register it with `register_schema_models(...)` if it is referenced elsewhere in docs, or only use
+   `query_params_from_model(...)` if a body schema is not needed.
+3. Use `@ns.doc(params=query_params_from_model(QueryModel))`.
+4. Validate from `request.args.to_dict(flat=True)` or an explicit dict when type coercion is needed.
+
+```python
+class WorkflowRunListQuery(BaseModel):
+    last_id: str | None = Field(default=None, description="Last run ID for pagination")
+    limit: int = Field(default=20, ge=1, le=100, description="Number of items per page (1-100)")
+
+
+@console_ns.doc(params=query_params_from_model(WorkflowRunListQuery))
+def get(self, app_model: App):
+    query = WorkflowRunListQuery.model_validate(request.args.to_dict(flat=True))
+    result = service.list(..., limit=query.limit, last_id=query.last_id)
+    return WorkflowRunPaginationResponse.model_validate(result, from_attributes=True).model_dump(mode="json")
+```
+
+Do not do this for GET query parameters:
+
+```python
+@console_ns.expect(console_ns.models[WorkflowRunListQuery.__name__])
+def get(...):
+    ...
+```
+
+That documents a GET request body and is not the expected contract.
+
+## Responses
+
+Response models should inherit from `ResponseModel`:
+
+```python
+class WorkflowRunNodeExecutionResponse(ResponseModel):
+    id: str
+    inputs: Any = Field(default=None, validation_alias="inputs_dict")
+    process_data: Any = Field(default=None, validation_alias="process_data_dict")
+    outputs: Any = Field(default=None, validation_alias="outputs_dict")
+```
+
+Document response models with `@ns.response(...)`:
+
+```python
+@console_ns.response(
+    200,
+    "Node run started successfully",
+    console_ns.models[WorkflowRunNodeExecutionResponse.__name__],
+)
+def post(...):
+    ...
+```
+
+Serialize explicitly:
+
+```python
+return WorkflowRunNodeExecutionResponse.model_validate(
+    workflow_node_execution,
+    from_attributes=True,
+).model_dump(mode="json")
+```
+
+If the service can return `None`, translate that into the expected HTTP error before validation:
+
+```python
+workflow_run = service.get_workflow_run(...)
+if workflow_run is None:
+    raise NotFound("Workflow run not found")
+
+return WorkflowRunDetailResponse.model_validate(workflow_run, from_attributes=True).model_dump(mode="json")
+```
+
+## Legacy Flask-RESTX Patterns
+
+Avoid adding these patterns to new or migrated endpoints:
+
+- `ns.model(...)` for new request/response DTOs.
+- Module-level exported RESTX model objects such as `workflow_run_detail_model`.
+- `fields.Nested({...})` with raw inline dict field maps.
+- `@marshal_with(...)` for response serialization.
+- `@ns.expect(...)` for GET query params.
+
+Existing legacy field dictionaries may remain where an endpoint has not yet been migrated. Keep that compatibility local
+to the legacy area and avoid importing RESTX model objects from controllers.
+
+## Verifying Swagger
+
+For schema and documentation changes, run focused tests and generate Swagger JSON:
+
+```bash
+uv run --project . pytest tests/unit_tests/controllers/common/test_schema.py
+uv run --project . pytest tests/unit_tests/commands/test_generate_swagger_specs.py tests/unit_tests/controllers/test_swagger.py
+uv run --project . dev/generate_swagger_specs.py --output-dir /tmp/dify-openapi-check
+```
+
+Inspect affected endpoints with `jq`. Check that:
+
+- GET parameters are `in: query`.
+- Request bodies appear only where the endpoint has a body.
+- Responses reference the expected `*Response` schema.
+- Response schemas use public serialized names, not internal validation aliases like `inputs_dict`.
+
diff --git a/api/controllers/common/schema.py b/api/controllers/common/schema.py
index 57070f1c80..58140f3ac8 100644
--- a/api/controllers/common/schema.py
+++ b/api/controllers/common/schema.py
@@ -8,7 +8,7 @@ These helpers keep that translation centralized so models registered through
 
 from collections.abc import Mapping
 from enum import StrEnum
-from typing import Any, NotRequired, TypedDict
+from typing import Any, Literal, NotRequired, TypedDict
 
 from flask_restx import Namespace
 from pydantic import BaseModel, TypeAdapter
@@ -54,16 +54,23 @@ def _register_json_schema(namespace: Namespace, name: str, schema: dict) -> None
             _register_json_schema(namespace, nested_name, nested_schema)
 
 
-def register_schema_model(namespace: Namespace, model: type[BaseModel]) -> None:
-    """Register a BaseModel and its nested schema definitions for Swagger documentation."""
+JsonSchemaMode = Literal["validation", "serialization"]
 
+
+def _register_schema_model(namespace: Namespace, model: type[BaseModel], *, mode: JsonSchemaMode) -> None:
     _register_json_schema(
         namespace,
         model.__name__,
-        model.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0),
+        model.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0, mode=mode),
     )
 
 
+def register_schema_model(namespace: Namespace, model: type[BaseModel]) -> None:
+    """Register a BaseModel and its nested schema definitions for Swagger documentation."""
+
+    _register_schema_model(namespace, model, mode="validation")
+
+
 def register_schema_models(namespace: Namespace, *models: type[BaseModel]) -> None:
     """Register multiple BaseModels with a namespace."""
 
@@ -71,6 +78,19 @@ def register_schema_models(namespace: Namespace, *models: type[BaseModel]) -> No
         register_schema_model(namespace, model)
 
 
+def register_response_schema_model(namespace: Namespace, model: type[BaseModel]) -> None:
+    """Register a BaseModel using its serialized response shape."""
+
+    _register_schema_model(namespace, model, mode="serialization")
+
+
+def register_response_schema_models(namespace: Namespace, *models: type[BaseModel]) -> None:
+    """Register multiple response BaseModels using their serialized response shape."""
+
+    for model in models:
+        register_response_schema_model(namespace, model)
+
+
 def get_or_create_model(model_name: str, field_def):
     # Import lazily to avoid circular imports between console controllers and schema helpers.
     from controllers.console import console_ns
@@ -190,6 +210,8 @@ __all__ = [
     "get_or_create_model",
     "query_params_from_model",
     "register_enum_models",
+    "register_response_schema_model",
+    "register_response_schema_models",
     "register_schema_model",
     "register_schema_models",
 ]
diff --git a/api/controllers/console/app/workflow.py b/api/controllers/console/app/workflow.py
index 68dd8b7a8d..e18688f069 100644
--- a/api/controllers/console/app/workflow.py
+++ b/api/controllers/console/app/workflow.py
@@ -11,9 +11,9 @@ from werkzeug.exceptions import BadRequest, Forbidden, InternalServerError, NotF
 
 import services
 from controllers.common.controller_schemas import DefaultBlockConfigQuery, WorkflowListQuery, WorkflowUpdatePayload
+from controllers.common.schema import register_response_schema_model, register_schema_models
 from controllers.console import console_ns
 from controllers.console.app.error import ConversationCompletedError, DraftWorkflowNotExist, DraftWorkflowNotSync
-from controllers.console.app.workflow_run import workflow_run_node_execution_model
 from controllers.console.app.wraps import get_app_model
 from controllers.console.wraps import account_initialization_required, edit_permission_required, setup_required
 from controllers.web.error import InvokeRateLimitError as InvokeRateLimitHttpError
@@ -37,6 +37,7 @@ from factories import file_factory, variable_factory
 from fields.member_fields import simple_account_fields
 from fields.online_user_fields import online_user_list_fields
 from fields.workflow_fields import workflow_fields, workflow_pagination_fields
+from fields.workflow_run_fields import WorkflowRunNodeExecutionResponse
 from graphon.enums import NodeType
 from graphon.file import File
 from graphon.file import helpers as file_helpers
@@ -56,6 +57,7 @@ from services.errors.llm import InvokeRateLimitError
 from services.workflow_service import DraftWorkflowDeletionError, WorkflowInUseError, WorkflowService
 
 logger = logging.getLogger(__name__)
+
 _file_access_controller = DatabaseFileAccessController()
 LISTENING_RETRY_IN = 2000
 DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
@@ -176,25 +178,25 @@ class DraftWorkflowTriggerRunAllPayload(BaseModel):
     node_ids: list[str]
 
 
-def reg(cls: type[BaseModel]):
-    console_ns.schema_model(cls.__name__, cls.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0))
-
-
-reg(SyncDraftWorkflowPayload)
-reg(AdvancedChatWorkflowRunPayload)
-reg(IterationNodeRunPayload)
-reg(LoopNodeRunPayload)
-reg(DraftWorkflowRunPayload)
-reg(DraftWorkflowNodeRunPayload)
-reg(PublishWorkflowPayload)
-reg(DefaultBlockConfigQuery)
-reg(ConvertToWorkflowPayload)
-reg(WorkflowListQuery)
-reg(WorkflowUpdatePayload)
-reg(WorkflowFeaturesPayload)
-reg(WorkflowOnlineUsersPayload)
-reg(DraftWorkflowTriggerRunPayload)
-reg(DraftWorkflowTriggerRunAllPayload)
+register_schema_models(
+    console_ns,
+    SyncDraftWorkflowPayload,
+    AdvancedChatWorkflowRunPayload,
+    IterationNodeRunPayload,
+    LoopNodeRunPayload,
+    DraftWorkflowRunPayload,
+    DraftWorkflowNodeRunPayload,
+    PublishWorkflowPayload,
+    DefaultBlockConfigQuery,
+    ConvertToWorkflowPayload,
+    WorkflowListQuery,
+    WorkflowUpdatePayload,
+    WorkflowFeaturesPayload,
+    WorkflowOnlineUsersPayload,
+    DraftWorkflowTriggerRunPayload,
+    DraftWorkflowTriggerRunAllPayload,
+)
+register_response_schema_model(console_ns, WorkflowRunNodeExecutionResponse)
 
 
 # TODO(QuantumGhost): Refactor existing node run API to handle file parameter parsing
@@ -540,9 +542,12 @@ class HumanInputDeliveryTestPayload(BaseModel):
     )
 
 
-reg(HumanInputFormPreviewPayload)
-reg(HumanInputFormSubmitPayload)
-reg(HumanInputDeliveryTestPayload)
+register_schema_models(
+    console_ns,
+    HumanInputFormPreviewPayload,
+    HumanInputFormSubmitPayload,
+    HumanInputDeliveryTestPayload,
+)
 
 
 @console_ns.route("/apps/<uuid:app_id>/advanced-chat/workflows/draft/human-input/nodes/<string:node_id>/form/preview")
@@ -760,14 +765,17 @@ class DraftWorkflowNodeRunApi(Resource):
     @console_ns.doc(description="Run draft workflow node")
     @console_ns.doc(params={"app_id": "Application ID", "node_id": "Node ID"})
     @console_ns.expect(console_ns.models[DraftWorkflowNodeRunPayload.__name__])
-    @console_ns.response(200, "Node run started successfully", workflow_run_node_execution_model)
+    @console_ns.response(
+        200,
+        "Node run started successfully",
+        console_ns.models[WorkflowRunNodeExecutionResponse.__name__],
+    )
     @console_ns.response(403, "Permission denied")
     @console_ns.response(404, "Node not found")
     @setup_required
     @login_required
     @account_initialization_required
     @get_app_model(mode=[AppMode.ADVANCED_CHAT, AppMode.WORKFLOW])
-    @marshal_with(workflow_run_node_execution_model)
     @edit_permission_required
     def post(self, app_model: App, node_id: str):
         """
@@ -799,7 +807,9 @@ class DraftWorkflowNodeRunApi(Resource):
             files=files,
         )
 
-        return workflow_node_execution
+        return WorkflowRunNodeExecutionResponse.model_validate(
+            workflow_node_execution, from_attributes=True
+        ).model_dump(mode="json")
 
 
 @console_ns.route("/apps/<uuid:app_id>/workflows/publish")
@@ -1143,14 +1153,17 @@ class DraftWorkflowNodeLastRunApi(Resource):
     @console_ns.doc("get_draft_workflow_node_last_run")
     @console_ns.doc(description="Get last run result for draft workflow node")
     @console_ns.doc(params={"app_id": "Application ID", "node_id": "Node ID"})
-    @console_ns.response(200, "Node last run retrieved successfully", workflow_run_node_execution_model)
+    @console_ns.response(
+        200,
+        "Node last run retrieved successfully",
+        console_ns.models[WorkflowRunNodeExecutionResponse.__name__],
+    )
     @console_ns.response(404, "Node last run not found")
     @console_ns.response(403, "Permission denied")
     @setup_required
     @login_required
     @account_initialization_required
     @get_app_model(mode=[AppMode.ADVANCED_CHAT, AppMode.WORKFLOW])
-    @marshal_with(workflow_run_node_execution_model)
     def get(self, app_model: App, node_id: str):
         srv = WorkflowService()
         workflow = srv.get_draft_workflow(app_model)
@@ -1163,7 +1176,7 @@ class DraftWorkflowNodeLastRunApi(Resource):
         )
         if node_exec is None:
             raise NotFound("last run not found")
-        return node_exec
+        return WorkflowRunNodeExecutionResponse.model_validate(node_exec, from_attributes=True).model_dump(mode="json")
 
 
 @console_ns.route("/apps/<uuid:app_id>/workflows/draft/trigger/run")
diff --git a/api/controllers/console/app/workflow_run.py b/api/controllers/console/app/workflow_run.py
index 6748d95d6b..e42aae6090 100644
--- a/api/controllers/console/app/workflow_run.py
+++ b/api/controllers/console/app/workflow_run.py
@@ -1,30 +1,28 @@
 from datetime import UTC, datetime, timedelta
-from typing import Literal, TypedDict, cast
+from typing import Literal, cast
 
 from flask import request
-from flask_restx import Resource, fields, marshal_with
+from flask_restx import Resource
 from pydantic import BaseModel, Field, field_validator
 from sqlalchemy import select
 from sqlalchemy.orm import sessionmaker
 
 from configs import dify_config
+from controllers.common.schema import query_params_from_model, register_response_schema_models, register_schema_models
 from controllers.console import console_ns
 from controllers.console.app.wraps import get_app_model
 from controllers.console.wraps import account_initialization_required, setup_required
 from controllers.web.error import NotFoundError
 from core.workflow.human_input_forms import load_form_tokens_by_form_id as _load_form_tokens_by_form_id
 from extensions.ext_database import db
-from fields.end_user_fields import simple_end_user_fields
-from fields.member_fields import simple_account_fields
+from fields.base import ResponseModel
 from fields.workflow_run_fields import (
-    advanced_chat_workflow_run_for_list_fields,
-    advanced_chat_workflow_run_pagination_fields,
-    workflow_run_count_fields,
-    workflow_run_detail_fields,
-    workflow_run_for_list_fields,
-    workflow_run_node_execution_fields,
-    workflow_run_node_execution_list_fields,
-    workflow_run_pagination_fields,
+    AdvancedChatWorkflowRunPaginationResponse,
+    WorkflowRunCountResponse,
+    WorkflowRunDetailResponse,
+    WorkflowRunNodeExecutionListResponse,
+    WorkflowRunNodeExecutionResponse,
+    WorkflowRunPaginationResponse,
 )
 from graphon.entities.pause_reason import HumanInputRequired
 from graphon.enums import WorkflowExecutionStatus
@@ -52,82 +50,6 @@ def _build_backstage_input_url(form_token: str | None) -> str | None:
 WORKFLOW_RUN_STATUS_CHOICES = ["running", "succeeded", "failed", "stopped", "partial-succeeded"]
 EXPORT_SIGNED_URL_EXPIRE_SECONDS = 3600
 
-# Register models for flask_restx to avoid dict type issues in Swagger
-# Register in dependency order: base models first, then dependent models
-
-# Base models
-simple_account_model = console_ns.model("SimpleAccount", simple_account_fields)
-
-simple_end_user_model = console_ns.model("SimpleEndUser", simple_end_user_fields)
-
-# Models that depend on simple_account_fields
-workflow_run_for_list_fields_copy = workflow_run_for_list_fields.copy()
-workflow_run_for_list_fields_copy["created_by_account"] = fields.Nested(
-    simple_account_model, attribute="created_by_account", allow_null=True
-)
-workflow_run_for_list_model = console_ns.model("WorkflowRunForList", workflow_run_for_list_fields_copy)
-
-advanced_chat_workflow_run_for_list_fields_copy = advanced_chat_workflow_run_for_list_fields.copy()
-advanced_chat_workflow_run_for_list_fields_copy["created_by_account"] = fields.Nested(
-    simple_account_model, attribute="created_by_account", allow_null=True
-)
-advanced_chat_workflow_run_for_list_model = console_ns.model(
-    "AdvancedChatWorkflowRunForList", advanced_chat_workflow_run_for_list_fields_copy
-)
-
-workflow_run_detail_fields_copy = workflow_run_detail_fields.copy()
-workflow_run_detail_fields_copy["created_by_account"] = fields.Nested(
-    simple_account_model, attribute="created_by_account", allow_null=True
-)
-workflow_run_detail_fields_copy["created_by_end_user"] = fields.Nested(
-    simple_end_user_model, attribute="created_by_end_user", allow_null=True
-)
-workflow_run_detail_model = console_ns.model("WorkflowRunDetail", workflow_run_detail_fields_copy)
-
-workflow_run_node_execution_fields_copy = workflow_run_node_execution_fields.copy()
-workflow_run_node_execution_fields_copy["created_by_account"] = fields.Nested(
-    simple_account_model, attribute="created_by_account", allow_null=True
-)
-workflow_run_node_execution_fields_copy["created_by_end_user"] = fields.Nested(
-    simple_end_user_model, attribute="created_by_end_user", allow_null=True
-)
-workflow_run_node_execution_model = console_ns.model(
-    "WorkflowRunNodeExecution", workflow_run_node_execution_fields_copy
-)
-
-# Simple models without nested dependencies
-workflow_run_count_model = console_ns.model("WorkflowRunCount", workflow_run_count_fields)
-
-# Pagination models that depend on list models
-advanced_chat_workflow_run_pagination_fields_copy = advanced_chat_workflow_run_pagination_fields.copy()
-advanced_chat_workflow_run_pagination_fields_copy["data"] = fields.List(
-    fields.Nested(advanced_chat_workflow_run_for_list_model), attribute="data"
-)
-advanced_chat_workflow_run_pagination_model = console_ns.model(
-    "AdvancedChatWorkflowRunPagination", advanced_chat_workflow_run_pagination_fields_copy
-)
-
-workflow_run_pagination_fields_copy = workflow_run_pagination_fields.copy()
-workflow_run_pagination_fields_copy["data"] = fields.List(fields.Nested(workflow_run_for_list_model), attribute="data")
-workflow_run_pagination_model = console_ns.model("WorkflowRunPagination", workflow_run_pagination_fields_copy)
-
-workflow_run_node_execution_list_fields_copy = workflow_run_node_execution_list_fields.copy()
-workflow_run_node_execution_list_fields_copy["data"] = fields.List(fields.Nested(workflow_run_node_execution_model))
-workflow_run_node_execution_list_model = console_ns.model(
-    "WorkflowRunNodeExecutionList", workflow_run_node_execution_list_fields_copy
-)
-
-workflow_run_export_fields = console_ns.model(
-    "WorkflowRunExport",
-    {
-        "status": fields.String(description="Export status: success/failed"),
-        "presigned_url": fields.String(description="Pre-signed URL for download", required=False),
-        "presigned_url_expires_at": fields.String(description="Pre-signed URL expiration time", required=False),
-    },
-)
-
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
-
 
 class WorkflowRunListQuery(BaseModel):
     last_id: str | None = Field(default=None, description="Last run ID for pagination")
@@ -136,7 +58,7 @@ class WorkflowRunListQuery(BaseModel):
         default=None, description="Workflow run status filter"
     )
     triggered_from: Literal["debugging", "app-run"] | None = Field(
-        default=None, description="Filter by trigger source: debugging or app-run"
+        default=None, description="Filter by trigger source: debugging or app-run. Default: debugging"
     )
 
     @field_validator("last_id")
@@ -151,9 +73,15 @@ class WorkflowRunCountQuery(BaseModel):
     status: Literal["running", "succeeded", "failed", "stopped", "partial-succeeded"] | None = Field(
         default=None, description="Workflow run status filter"
     )
-    time_range: str | None = Field(default=None, description="Time range filter (e.g., 7d, 4h, 30m, 30s)")
+    time_range: str | None = Field(
+        default=None,
+        description=(
+            "Filter by time range (optional): e.g., 7d (7 days), 4h (4 hours), "
+            "30m (30 minutes), 30s (30 seconds). Filters by created_at field."
+        ),
+    )
     triggered_from: Literal["debugging", "app-run"] | None = Field(
-        default=None, description="Filter by trigger source: debugging or app-run"
+        default=None, description="Filter by trigger source: debugging or app-run. Default: debugging"
     )
 
     @field_validator("time_range")
@@ -164,51 +92,64 @@ class WorkflowRunCountQuery(BaseModel):
         return time_duration(value)
 
 
-console_ns.schema_model(
-    WorkflowRunListQuery.__name__, WorkflowRunListQuery.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0)
-)
-console_ns.schema_model(
-    WorkflowRunCountQuery.__name__,
-    WorkflowRunCountQuery.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0),
-)
+class WorkflowRunExportResponse(ResponseModel):
+    status: str = Field(description="Export status: success/failed")
+    presigned_url: str | None = Field(default=None, description="Pre-signed URL for download")
+    presigned_url_expires_at: str | None = Field(default=None, description="Pre-signed URL expiration time")
 
 
-class HumanInputPauseTypeResponse(TypedDict):
+class HumanInputPauseTypeResponse(ResponseModel):
     type: Literal["human_input"]
     form_id: str
-    backstage_input_url: str | None
+    backstage_input_url: str | None = None
 
 
-class PausedNodeResponse(TypedDict):
+class PausedNodeResponse(ResponseModel):
     node_id: str
     node_title: str
     pause_type: HumanInputPauseTypeResponse
 
 
-class WorkflowPauseDetailsResponse(TypedDict):
-    paused_at: str | None
+class WorkflowPauseDetailsResponse(ResponseModel):
+    paused_at: str | None = None
     paused_nodes: list[PausedNodeResponse]
 
 
+register_schema_models(
+    console_ns,
+    WorkflowRunListQuery,
+    WorkflowRunCountQuery,
+)
+register_response_schema_models(
+    console_ns,
+    AdvancedChatWorkflowRunPaginationResponse,
+    WorkflowRunPaginationResponse,
+    WorkflowRunCountResponse,
+    WorkflowRunDetailResponse,
+    WorkflowRunNodeExecutionResponse,
+    WorkflowRunNodeExecutionListResponse,
+    WorkflowRunExportResponse,
+    HumanInputPauseTypeResponse,
+    PausedNodeResponse,
+    WorkflowPauseDetailsResponse,
+)
+
+
 @console_ns.route("/apps/<uuid:app_id>/advanced-chat/workflow-runs")
 class AdvancedChatAppWorkflowRunListApi(Resource):
     @console_ns.doc("get_advanced_chat_workflow_runs")
     @console_ns.doc(description="Get advanced chat workflow run list")
     @console_ns.doc(params={"app_id": "Application ID"})
-    @console_ns.doc(params={"last_id": "Last run ID for pagination", "limit": "Number of items per page (1-100)"})
-    @console_ns.doc(
-        params={"status": "Filter by status (optional): running, succeeded, failed, stopped, partial-succeeded"}
+    @console_ns.doc(params=query_params_from_model(WorkflowRunListQuery))
+    @console_ns.response(
+        200,
+        "Workflow runs retrieved successfully",
+        console_ns.models[AdvancedChatWorkflowRunPaginationResponse.__name__],
     )
-    @console_ns.doc(
-        params={"triggered_from": "Filter by trigger source (optional): debugging or app-run. Default: debugging"}
-    )
-    @console_ns.expect(console_ns.models[WorkflowRunListQuery.__name__])
-    @console_ns.response(200, "Workflow runs retrieved successfully", advanced_chat_workflow_run_pagination_model)
     @setup_required
     @login_required
     @account_initialization_required
     @get_app_model(mode=[AppMode.ADVANCED_CHAT])
-    @marshal_with(advanced_chat_workflow_run_pagination_model)
     def get(self, app_model: App):
         """
         Get advanced chat app workflow run list
@@ -232,7 +173,9 @@ class AdvancedChatAppWorkflowRunListApi(Resource):
             app_model=app_model, args=args, triggered_from=triggered_from
         )
 
-        return result
+        return AdvancedChatWorkflowRunPaginationResponse.model_validate(result, from_attributes=True).model_dump(
+            mode="json"
+        )
 
 
 @console_ns.route("/apps/<uuid:app_id>/workflow-runs/<uuid:run_id>/export")
@@ -240,7 +183,7 @@ class WorkflowRunExportApi(Resource):
     @console_ns.doc("get_workflow_run_export_url")
     @console_ns.doc(description="Generate a download URL for an archived workflow run.")
     @console_ns.doc(params={"app_id": "Application ID", "run_id": "Workflow run ID"})
-    @console_ns.response(200, "Export URL generated", workflow_run_export_fields)
+    @console_ns.response(200, "Export URL generated", console_ns.models[WorkflowRunExportResponse.__name__])
     @setup_required
     @login_required
     @account_initialization_required
@@ -278,11 +221,14 @@ class WorkflowRunExportApi(Resource):
             expires_in=EXPORT_SIGNED_URL_EXPIRE_SECONDS,
         )
         expires_at = datetime.now(UTC) + timedelta(seconds=EXPORT_SIGNED_URL_EXPIRE_SECONDS)
-        return {
-            "status": "success",
-            "presigned_url": presigned_url,
-            "presigned_url_expires_at": expires_at.isoformat(),
-        }, 200
+        response = WorkflowRunExportResponse.model_validate(
+            {
+                "status": "success",
+                "presigned_url": presigned_url,
+                "presigned_url_expires_at": expires_at.isoformat(),
+            }
+        )
+        return response.model_dump(mode="json"), 200
 
 
 @console_ns.route("/apps/<uuid:app_id>/advanced-chat/workflow-runs/count")
@@ -290,27 +236,16 @@ class AdvancedChatAppWorkflowRunCountApi(Resource):
     @console_ns.doc("get_advanced_chat_workflow_runs_count")
     @console_ns.doc(description="Get advanced chat workflow runs count statistics")
     @console_ns.doc(params={"app_id": "Application ID"})
-    @console_ns.doc(
-        params={"status": "Filter by status (optional): running, succeeded, failed, stopped, partial-succeeded"}
+    @console_ns.doc(params=query_params_from_model(WorkflowRunCountQuery))
+    @console_ns.response(
+        200,
+        "Workflow runs count retrieved successfully",
+        console_ns.models[WorkflowRunCountResponse.__name__],
     )
-    @console_ns.doc(
-        params={
-            "time_range": (
-                "Filter by time range (optional): e.g., 7d (7 days), 4h (4 hours), "
-                "30m (30 minutes), 30s (30 seconds). Filters by created_at field."
-            )
-        }
-    )
-    @console_ns.doc(
-        params={"triggered_from": "Filter by trigger source (optional): debugging or app-run. Default: debugging"}
-    )
-    @console_ns.response(200, "Workflow runs count retrieved successfully", workflow_run_count_model)
-    @console_ns.expect(console_ns.models[WorkflowRunCountQuery.__name__])
     @setup_required
     @login_required
     @account_initialization_required
     @get_app_model(mode=[AppMode.ADVANCED_CHAT])
-    @marshal_with(workflow_run_count_model)
     def get(self, app_model: App):
         """
         Get advanced chat workflow runs count statistics
@@ -333,7 +268,7 @@ class AdvancedChatAppWorkflowRunCountApi(Resource):
             triggered_from=triggered_from,
         )
 
-        return result
+        return WorkflowRunCountResponse.model_validate(result).model_dump(mode="json")
 
 
 @console_ns.route("/apps/<uuid:app_id>/workflow-runs")
@@ -341,20 +276,16 @@ class WorkflowRunListApi(Resource):
     @console_ns.doc("get_workflow_runs")
     @console_ns.doc(description="Get workflow run list")
     @console_ns.doc(params={"app_id": "Application ID"})
-    @console_ns.doc(params={"last_id": "Last run ID for pagination", "limit": "Number of items per page (1-100)"})
-    @console_ns.doc(
-        params={"status": "Filter by status (optional): running, succeeded, failed, stopped, partial-succeeded"}
+    @console_ns.doc(params=query_params_from_model(WorkflowRunListQuery))
+    @console_ns.response(
+        200,
+        "Workflow runs retrieved successfully",
+        console_ns.models[WorkflowRunPaginationResponse.__name__],
     )
-    @console_ns.doc(
-        params={"triggered_from": "Filter by trigger source (optional): debugging or app-run. Default: debugging"}
-    )
-    @console_ns.response(200, "Workflow runs retrieved successfully", workflow_run_pagination_model)
-    @console_ns.expect(console_ns.models[WorkflowRunListQuery.__name__])
     @setup_required
     @login_required
     @account_initialization_required
     @get_app_model(mode=[AppMode.ADVANCED_CHAT, AppMode.WORKFLOW])
-    @marshal_with(workflow_run_pagination_model)
     def get(self, app_model: App):
         """
         Get workflow run list
@@ -378,7 +309,7 @@ class WorkflowRunListApi(Resource):
             app_model=app_model, args=args, triggered_from=triggered_from
         )
 
-        return result
+        return WorkflowRunPaginationResponse.model_validate(result, from_attributes=True).model_dump(mode="json")
 
 
 @console_ns.route("/apps/<uuid:app_id>/workflow-runs/count")
@@ -386,27 +317,16 @@ class WorkflowRunCountApi(Resource):
     @console_ns.doc("get_workflow_runs_count")
     @console_ns.doc(description="Get workflow runs count statistics")
     @console_ns.doc(params={"app_id": "Application ID"})
-    @console_ns.doc(
-        params={"status": "Filter by status (optional): running, succeeded, failed, stopped, partial-succeeded"}
+    @console_ns.doc(params=query_params_from_model(WorkflowRunCountQuery))
+    @console_ns.response(
+        200,
+        "Workflow runs count retrieved successfully",
+        console_ns.models[WorkflowRunCountResponse.__name__],
     )
-    @console_ns.doc(
-        params={
-            "time_range": (
-                "Filter by time range (optional): e.g., 7d (7 days), 4h (4 hours), "
-                "30m (30 minutes), 30s (30 seconds). Filters by created_at field."
-            )
-        }
-    )
-    @console_ns.doc(
-        params={"triggered_from": "Filter by trigger source (optional): debugging or app-run. Default: debugging"}
-    )
-    @console_ns.response(200, "Workflow runs count retrieved successfully", workflow_run_count_model)
-    @console_ns.expect(console_ns.models[WorkflowRunCountQuery.__name__])
     @setup_required
     @login_required
     @account_initialization_required
     @get_app_model(mode=[AppMode.ADVANCED_CHAT, AppMode.WORKFLOW])
-    @marshal_with(workflow_run_count_model)
     def get(self, app_model: App):
         """
         Get workflow runs count statistics
@@ -429,7 +349,7 @@ class WorkflowRunCountApi(Resource):
             triggered_from=triggered_from,
         )
 
-        return result
+        return WorkflowRunCountResponse.model_validate(result).model_dump(mode="json")
 
 
 @console_ns.route("/apps/<uuid:app_id>/workflow-runs/<uuid:run_id>")
@@ -437,13 +357,16 @@ class WorkflowRunDetailApi(Resource):
     @console_ns.doc("get_workflow_run_detail")
     @console_ns.doc(description="Get workflow run detail")
     @console_ns.doc(params={"app_id": "Application ID", "run_id": "Workflow run ID"})
-    @console_ns.response(200, "Workflow run detail retrieved successfully", workflow_run_detail_model)
+    @console_ns.response(
+        200,
+        "Workflow run detail retrieved successfully",
+        console_ns.models[WorkflowRunDetailResponse.__name__],
+    )
     @console_ns.response(404, "Workflow run not found")
     @setup_required
     @login_required
     @account_initialization_required
     @get_app_model(mode=[AppMode.ADVANCED_CHAT, AppMode.WORKFLOW])
-    @marshal_with(workflow_run_detail_model)
     def get(self, app_model: App, run_id):
         """
         Get workflow run detail
@@ -452,8 +375,10 @@ class WorkflowRunDetailApi(Resource):
 
         workflow_run_service = WorkflowRunService()
         workflow_run = workflow_run_service.get_workflow_run(app_model=app_model, run_id=run_id)
+        if workflow_run is None:
+            raise NotFoundError("Workflow run not found")
 
-        return workflow_run
+        return WorkflowRunDetailResponse.model_validate(workflow_run, from_attributes=True).model_dump(mode="json")
 
 
 @console_ns.route("/apps/<uuid:app_id>/workflow-runs/<uuid:run_id>/node-executions")
@@ -461,13 +386,16 @@ class WorkflowRunNodeExecutionListApi(Resource):
     @console_ns.doc("get_workflow_run_node_executions")
     @console_ns.doc(description="Get workflow run node execution list")
     @console_ns.doc(params={"app_id": "Application ID", "run_id": "Workflow run ID"})
-    @console_ns.response(200, "Node executions retrieved successfully", workflow_run_node_execution_list_model)
+    @console_ns.response(
+        200,
+        "Node executions retrieved successfully",
+        console_ns.models[WorkflowRunNodeExecutionListResponse.__name__],
+    )
     @console_ns.response(404, "Workflow run not found")
     @setup_required
     @login_required
     @account_initialization_required
     @get_app_model(mode=[AppMode.ADVANCED_CHAT, AppMode.WORKFLOW])
-    @marshal_with(workflow_run_node_execution_list_model)
     def get(self, app_model: App, run_id):
         """
         Get workflow run node execution list
@@ -482,13 +410,24 @@ class WorkflowRunNodeExecutionListApi(Resource):
             user=user,
         )
 
-        return {"data": node_executions}
+        return WorkflowRunNodeExecutionListResponse.model_validate(
+            {"data": node_executions}, from_attributes=True
+        ).model_dump(mode="json")
 
 
 @console_ns.route("/workflow/<string:workflow_run_id>/pause-details")
 class ConsoleWorkflowPauseDetailsApi(Resource):
     """Console API for getting workflow pause details."""
 
+    @console_ns.doc("get_workflow_pause_details")
+    @console_ns.doc(description="Get workflow pause details")
+    @console_ns.doc(params={"workflow_run_id": "Workflow run ID"})
+    @console_ns.response(
+        200,
+        "Workflow pause details retrieved successfully",
+        console_ns.models[WorkflowPauseDetailsResponse.__name__],
+    )
+    @console_ns.response(404, "Workflow run not found")
     @setup_required
     @login_required
     @account_initialization_required
@@ -515,11 +454,8 @@ class ConsoleWorkflowPauseDetailsApi(Resource):
         # Check if workflow is suspended
         is_paused = workflow_run.status == WorkflowExecutionStatus.PAUSED
         if not is_paused:
-            empty_response: WorkflowPauseDetailsResponse = {
-                "paused_at": None,
-                "paused_nodes": [],
-            }
-            return empty_response, 200
+            empty_response = WorkflowPauseDetailsResponse(paused_at=None, paused_nodes=[])
+            return empty_response.model_dump(mode="json"), 200
 
         pause_entity = workflow_run_repo.get_workflow_pause(workflow_run_id)
         pause_reasons = pause_entity.get_pause_reasons() if pause_entity else []
@@ -530,27 +466,25 @@ class ConsoleWorkflowPauseDetailsApi(Resource):
         # Build response
         paused_at = pause_entity.paused_at if pause_entity else None
         paused_nodes: list[PausedNodeResponse] = []
-        response: WorkflowPauseDetailsResponse = {
-            "paused_at": paused_at.isoformat() + "Z" if paused_at else None,
-            "paused_nodes": paused_nodes,
-        }
 
         for reason in pause_reasons:
             if isinstance(reason, HumanInputRequired):
                 paused_nodes.append(
-                    {
-                        "node_id": reason.node_id,
-                        "node_title": reason.node_title,
-                        "pause_type": {
-                            "type": "human_input",
-                            "form_id": reason.form_id,
-                            "backstage_input_url": _build_backstage_input_url(
-                                form_tokens_by_form_id.get(reason.form_id)
-                            ),
-                        },
-                    }
+                    PausedNodeResponse(
+                        node_id=reason.node_id,
+                        node_title=reason.node_title,
+                        pause_type=HumanInputPauseTypeResponse(
+                            type="human_input",
+                            form_id=reason.form_id,
+                            backstage_input_url=_build_backstage_input_url(form_tokens_by_form_id.get(reason.form_id)),
+                        ),
+                    )
                 )
             else:
                 raise AssertionError("unimplemented.")
 
-        return response, 200
+        response = WorkflowPauseDetailsResponse(
+            paused_at=paused_at.isoformat() + "Z" if paused_at else None,
+            paused_nodes=paused_nodes,
+        )
+        return response.model_dump(mode="json"), 200
diff --git a/api/controllers/console/datasets/rag_pipeline/rag_pipeline_workflow.py b/api/controllers/console/datasets/rag_pipeline/rag_pipeline_workflow.py
index ee146e8287..8eff32c555 100644
--- a/api/controllers/console/datasets/rag_pipeline/rag_pipeline_workflow.py
+++ b/api/controllers/console/datasets/rag_pipeline/rag_pipeline_workflow.py
@@ -10,7 +10,7 @@ from werkzeug.exceptions import BadRequest, Forbidden, InternalServerError, NotF
 
 import services
 from controllers.common.controller_schemas import DefaultBlockConfigQuery, WorkflowListQuery, WorkflowUpdatePayload
-from controllers.common.schema import register_schema_models
+from controllers.common.schema import register_response_schema_models, register_schema_models
 from controllers.console import console_ns
 from controllers.console.app.error import (
     ConversationCompletedError,
@@ -22,12 +22,6 @@ from controllers.console.app.workflow import (
     workflow_model,
     workflow_pagination_model,
 )
-from controllers.console.app.workflow_run import (
-    workflow_run_detail_model,
-    workflow_run_node_execution_list_model,
-    workflow_run_node_execution_model,
-    workflow_run_pagination_model,
-)
 from controllers.console.datasets.wraps import get_rag_pipeline
 from controllers.console.wraps import (
     account_initialization_required,
@@ -40,6 +34,12 @@ from core.app.apps.pipeline.pipeline_generator import PipelineGenerator
 from core.app.entities.app_invoke_entities import InvokeFrom
 from extensions.ext_database import db
 from factories import variable_factory
+from fields.workflow_run_fields import (
+    WorkflowRunDetailResponse,
+    WorkflowRunNodeExecutionListResponse,
+    WorkflowRunNodeExecutionResponse,
+    WorkflowRunPaginationResponse,
+)
 from graphon.model_runtime.utils.encoders import jsonable_encoder
 from libs import helper
 from libs.helper import TimestampField, UUIDStrOrEmpty
@@ -131,6 +131,13 @@ register_schema_models(
     DatasourceVariablesPayload,
     RagPipelineRecommendedPluginQuery,
 )
+register_response_schema_models(
+    console_ns,
+    WorkflowRunDetailResponse,
+    WorkflowRunNodeExecutionListResponse,
+    WorkflowRunNodeExecutionResponse,
+    WorkflowRunPaginationResponse,
+)
 
 
 @console_ns.route("/rag/pipelines/<uuid:pipeline_id>/workflows/draft")
@@ -415,12 +422,16 @@ class RagPipelineDraftDatasourceNodeRunApi(Resource):
 @console_ns.route("/rag/pipelines/<uuid:pipeline_id>/workflows/draft/nodes/<string:node_id>/run")
 class RagPipelineDraftNodeRunApi(Resource):
     @console_ns.expect(console_ns.models[NodeRunRequiredPayload.__name__])
+    @console_ns.response(
+        200,
+        "Node run started successfully",
+        console_ns.models[WorkflowRunNodeExecutionResponse.__name__],
+    )
     @setup_required
     @login_required
     @edit_permission_required
     @account_initialization_required
     @get_rag_pipeline
-    @marshal_with(workflow_run_node_execution_model)
     def post(self, pipeline: Pipeline, node_id: str):
         """
         Run draft workflow node
@@ -439,7 +450,9 @@ class RagPipelineDraftNodeRunApi(Resource):
         if workflow_node_execution is None:
             raise ValueError("Workflow node execution not found")
 
-        return workflow_node_execution
+        return WorkflowRunNodeExecutionResponse.model_validate(
+            workflow_node_execution, from_attributes=True
+        ).model_dump(mode="json")
 
 
 @console_ns.route("/rag/pipelines/<uuid:pipeline_id>/workflow-runs/tasks/<string:task_id>/stop")
@@ -778,11 +791,15 @@ class DraftRagPipelineSecondStepApi(Resource):
 
 @console_ns.route("/rag/pipelines/<uuid:pipeline_id>/workflow-runs")
 class RagPipelineWorkflowRunListApi(Resource):
+    @console_ns.response(
+        200,
+        "Workflow runs retrieved successfully",
+        console_ns.models[WorkflowRunPaginationResponse.__name__],
+    )
     @setup_required
     @login_required
     @account_initialization_required
     @get_rag_pipeline
-    @marshal_with(workflow_run_pagination_model)
     def get(self, pipeline: Pipeline):
         """
         Get workflow run list
@@ -801,16 +818,20 @@ class RagPipelineWorkflowRunListApi(Resource):
         rag_pipeline_service = RagPipelineService()
         result = rag_pipeline_service.get_rag_pipeline_paginate_workflow_runs(pipeline=pipeline, args=args)
 
-        return result
+        return WorkflowRunPaginationResponse.model_validate(result, from_attributes=True).model_dump(mode="json")
 
 
 @console_ns.route("/rag/pipelines/<uuid:pipeline_id>/workflow-runs/<uuid:run_id>")
 class RagPipelineWorkflowRunDetailApi(Resource):
+    @console_ns.response(
+        200,
+        "Workflow run detail retrieved successfully",
+        console_ns.models[WorkflowRunDetailResponse.__name__],
+    )
     @setup_required
     @login_required
     @account_initialization_required
     @get_rag_pipeline
-    @marshal_with(workflow_run_detail_model)
     def get(self, pipeline: Pipeline, run_id):
         """
         Get workflow run detail
@@ -819,17 +840,23 @@ class RagPipelineWorkflowRunDetailApi(Resource):
 
         rag_pipeline_service = RagPipelineService()
         workflow_run = rag_pipeline_service.get_rag_pipeline_workflow_run(pipeline=pipeline, run_id=run_id)
+        if workflow_run is None:
+            raise NotFound("Workflow run not found")
 
-        return workflow_run
+        return WorkflowRunDetailResponse.model_validate(workflow_run, from_attributes=True).model_dump(mode="json")
 
 
 @console_ns.route("/rag/pipelines/<uuid:pipeline_id>/workflow-runs/<uuid:run_id>/node-executions")
 class RagPipelineWorkflowRunNodeExecutionListApi(Resource):
+    @console_ns.response(
+        200,
+        "Node executions retrieved successfully",
+        console_ns.models[WorkflowRunNodeExecutionListResponse.__name__],
+    )
     @setup_required
     @login_required
     @account_initialization_required
     @get_rag_pipeline
-    @marshal_with(workflow_run_node_execution_list_model)
     def get(self, pipeline: Pipeline, run_id: str):
         """
         Get workflow run node execution list
@@ -844,7 +871,9 @@ class RagPipelineWorkflowRunNodeExecutionListApi(Resource):
             user=user,
         )
 
-        return {"data": node_executions}
+        return WorkflowRunNodeExecutionListResponse.model_validate(
+            {"data": node_executions}, from_attributes=True
+        ).model_dump(mode="json")
 
 
 @console_ns.route("/rag/pipelines/datasource-plugins")
@@ -859,11 +888,15 @@ class DatasourceListApi(Resource):
 
 @console_ns.route("/rag/pipelines/<uuid:pipeline_id>/workflows/draft/nodes/<string:node_id>/last-run")
 class RagPipelineWorkflowLastRunApi(Resource):
+    @console_ns.response(
+        200,
+        "Node last run retrieved successfully",
+        console_ns.models[WorkflowRunNodeExecutionResponse.__name__],
+    )
     @setup_required
     @login_required
     @account_initialization_required
     @get_rag_pipeline
-    @marshal_with(workflow_run_node_execution_model)
     def get(self, pipeline: Pipeline, node_id: str):
         rag_pipeline_service = RagPipelineService()
         workflow = rag_pipeline_service.get_draft_workflow(pipeline=pipeline)
@@ -876,7 +909,7 @@ class RagPipelineWorkflowLastRunApi(Resource):
         )
         if node_exec is None:
             raise NotFound("last run not found")
-        return node_exec
+        return WorkflowRunNodeExecutionResponse.model_validate(node_exec, from_attributes=True).model_dump(mode="json")
 
 
 @console_ns.route("/rag/pipelines/transform/datasets/<uuid:dataset_id>")
@@ -899,12 +932,16 @@ class RagPipelineTransformApi(Resource):
 @console_ns.route("/rag/pipelines/<uuid:pipeline_id>/workflows/draft/datasource/variables-inspect")
 class RagPipelineDatasourceVariableApi(Resource):
     @console_ns.expect(console_ns.models[DatasourceVariablesPayload.__name__])
+    @console_ns.response(
+        200,
+        "Datasource variables set successfully",
+        console_ns.models[WorkflowRunNodeExecutionResponse.__name__],
+    )
     @setup_required
     @login_required
     @account_initialization_required
     @get_rag_pipeline
     @edit_permission_required
-    @marshal_with(workflow_run_node_execution_model)
     def post(self, pipeline: Pipeline):
         """
         Set datasource variables
@@ -918,7 +955,9 @@ class RagPipelineDatasourceVariableApi(Resource):
             args=args,
             current_user=current_user,
         )
-        return workflow_node_execution
+        return WorkflowRunNodeExecutionResponse.model_validate(
+            workflow_node_execution, from_attributes=True
+        ).model_dump(mode="json")
 
 
 @console_ns.route("/rag/pipelines/recommended-plugins")
diff --git a/api/fields/workflow_run_fields.py b/api/fields/workflow_run_fields.py
index 8c659086ed..a852f21bb2 100644
--- a/api/fields/workflow_run_fields.py
+++ b/api/fields/workflow_run_fields.py
@@ -1,14 +1,21 @@
+"""Workflow run response schemas for console APIs.
+
+Most workflow-run endpoints should document and serialize responses with the
+Pydantic models in this module. The remaining Flask-RESTX field dictionaries are
+kept only for workflow app-log endpoints that still build legacy log models.
+"""
+
 from __future__ import annotations
 
 from datetime import datetime
 from typing import Any
 
 from flask_restx import Namespace, fields
-from pydantic import Field, field_validator
+from pydantic import AliasChoices, Field, field_validator
 
 from fields.base import ResponseModel
-from fields.end_user_fields import SimpleEndUser, simple_end_user_fields
-from fields.member_fields import SimpleAccount, simple_account_fields
+from fields.end_user_fields import SimpleEndUser
+from fields.member_fields import SimpleAccount
 from libs.helper import TimestampField
 
 workflow_run_for_log_fields = {
@@ -43,119 +50,6 @@ def build_workflow_run_for_archived_log_model(api_or_ns: Namespace):
     return api_or_ns.model("WorkflowRunForArchivedLog", workflow_run_for_archived_log_fields)
 
 
-workflow_run_for_list_fields = {
-    "id": fields.String,
-    "version": fields.String,
-    "status": fields.String,
-    "elapsed_time": fields.Float,
-    "total_tokens": fields.Integer,
-    "total_steps": fields.Integer,
-    "created_by_account": fields.Nested(simple_account_fields, attribute="created_by_account", allow_null=True),
-    "created_at": TimestampField,
-    "finished_at": TimestampField,
-    "exceptions_count": fields.Integer,
-    "retry_index": fields.Integer,
-}
-
-advanced_chat_workflow_run_for_list_fields = {
-    "id": fields.String,
-    "conversation_id": fields.String,
-    "message_id": fields.String,
-    "version": fields.String,
-    "status": fields.String,
-    "elapsed_time": fields.Float,
-    "total_tokens": fields.Integer,
-    "total_steps": fields.Integer,
-    "created_by_account": fields.Nested(simple_account_fields, attribute="created_by_account", allow_null=True),
-    "created_at": TimestampField,
-    "finished_at": TimestampField,
-    "exceptions_count": fields.Integer,
-    "retry_index": fields.Integer,
-}
-
-advanced_chat_workflow_run_pagination_fields = {
-    "limit": fields.Integer(attribute="limit"),
-    "has_more": fields.Boolean(attribute="has_more"),
-    "data": fields.List(fields.Nested(advanced_chat_workflow_run_for_list_fields), attribute="data"),
-}
-
-workflow_run_pagination_fields = {
-    "limit": fields.Integer(attribute="limit"),
-    "has_more": fields.Boolean(attribute="has_more"),
-    "data": fields.List(fields.Nested(workflow_run_for_list_fields), attribute="data"),
-}
-
-workflow_run_count_fields = {
-    "total": fields.Integer,
-    "running": fields.Integer,
-    "succeeded": fields.Integer,
-    "failed": fields.Integer,
-    "stopped": fields.Integer,
-    "partial_succeeded": fields.Integer(attribute="partial-succeeded"),
-}
-
-workflow_run_detail_fields = {
-    "id": fields.String,
-    "version": fields.String,
-    "graph": fields.Raw(attribute="graph_dict"),
-    "inputs": fields.Raw(attribute="inputs_dict"),
-    "status": fields.String,
-    "outputs": fields.Raw(attribute="outputs_dict"),
-    "error": fields.String,
-    "elapsed_time": fields.Float,
-    "total_tokens": fields.Integer,
-    "total_steps": fields.Integer,
-    "created_by_role": fields.String,
-    "created_by_account": fields.Nested(simple_account_fields, attribute="created_by_account", allow_null=True),
-    "created_by_end_user": fields.Nested(simple_end_user_fields, attribute="created_by_end_user", allow_null=True),
-    "created_at": TimestampField,
-    "finished_at": TimestampField,
-    "exceptions_count": fields.Integer,
-}
-
-retry_event_field = {
-    "elapsed_time": fields.Float,
-    "status": fields.String,
-    "inputs": fields.Raw(attribute="inputs"),
-    "process_data": fields.Raw(attribute="process_data"),
-    "outputs": fields.Raw(attribute="outputs"),
-    "metadata": fields.Raw(attribute="metadata"),
-    "llm_usage": fields.Raw(attribute="llm_usage"),
-    "error": fields.String,
-    "retry_index": fields.Integer,
-}
-
-
-workflow_run_node_execution_fields = {
-    "id": fields.String,
-    "index": fields.Integer,
-    "predecessor_node_id": fields.String,
-    "node_id": fields.String,
-    "node_type": fields.String,
-    "title": fields.String,
-    "inputs": fields.Raw(attribute="inputs_dict"),
-    "process_data": fields.Raw(attribute="process_data_dict"),
-    "outputs": fields.Raw(attribute="outputs_dict"),
-    "status": fields.String,
-    "error": fields.String,
-    "elapsed_time": fields.Float,
-    "execution_metadata": fields.Raw(attribute="execution_metadata_dict"),
-    "extras": fields.Raw,
-    "created_at": TimestampField,
-    "created_by_role": fields.String,
-    "created_by_account": fields.Nested(simple_account_fields, attribute="created_by_account", allow_null=True),
-    "created_by_end_user": fields.Nested(simple_end_user_fields, attribute="created_by_end_user", allow_null=True),
-    "finished_at": TimestampField,
-    "inputs_truncated": fields.Boolean,
-    "outputs_truncated": fields.Boolean,
-    "process_data_truncated": fields.Boolean,
-}
-
-workflow_run_node_execution_list_fields = {
-    "data": fields.List(fields.Nested(workflow_run_node_execution_fields)),
-}
-
-
 def _to_timestamp(value: datetime | int | None) -> int | None:
     if isinstance(value, datetime):
         return int(value.timestamp())
@@ -252,7 +146,10 @@ class WorkflowRunCountResponse(ResponseModel):
     succeeded: int
     failed: int
     stopped: int
-    partial_succeeded: int = Field(validation_alias="partial-succeeded")
+    partial_succeeded: int = Field(
+        alias="partial_succeeded",
+        validation_alias=AliasChoices("partial_succeeded", "partial-succeeded"),
+    )
 
 
 class WorkflowRunDetailResponse(ResponseModel):
diff --git a/api/openapi/markdown/console-swagger.md b/api/openapi/markdown/console-swagger.md
index f4897e93c5..f3c188fc06 100644
--- a/api/openapi/markdown/console-swagger.md
+++ b/api/openapi/markdown/console-swagger.md
@@ -805,18 +805,17 @@ Get advanced chat workflow run list
 
 | Name | Located in | Description | Required | Schema |
 | ---- | ---------- | ----------- | -------- | ------ |
-| payload | body |  | Yes | [WorkflowRunListQuery](#workflowrunlistquery) |
 | app_id | path | Application ID | Yes | string |
 | last_id | query | Last run ID for pagination | No | string |
-| limit | query | Number of items per page (1-100) | No | string |
-| status | query | Filter by status (optional): running, succeeded, failed, stopped, partial-succeeded | No | string |
-| triggered_from | query | Filter by trigger source (optional): debugging or app-run. Default: debugging | No | string |
+| limit | query | Number of items per page (1-100) | No | integer |
+| status | query | Workflow run status filter | No | string |
+| triggered_from | query | Filter by trigger source: debugging or app-run. Default: debugging | No | string |
 
 ##### Responses
 
 | Code | Description | Schema |
 | ---- | ----------- | ------ |
-| 200 | Workflow runs retrieved successfully | [AdvancedChatWorkflowRunPagination](#advancedchatworkflowrunpagination) |
+| 200 | Workflow runs retrieved successfully | [AdvancedChatWorkflowRunPaginationResponse](#advancedchatworkflowrunpaginationresponse) |
 
 ### /apps/{app_id}/advanced-chat/workflow-runs/count
 
@@ -833,17 +832,16 @@ Get advanced chat workflow runs count statistics
 
 | Name | Located in | Description | Required | Schema |
 | ---- | ---------- | ----------- | -------- | ------ |
-| payload | body |  | Yes | [WorkflowRunCountQuery](#workflowruncountquery) |
 | app_id | path | Application ID | Yes | string |
-| status | query | Filter by status (optional): running, succeeded, failed, stopped, partial-succeeded | No | string |
+| status | query | Workflow run status filter | No | string |
 | time_range | query | Filter by time range (optional): e.g., 7d (7 days), 4h (4 hours), 30m (30 minutes), 30s (30 seconds). Filters by created_at field. | No | string |
-| triggered_from | query | Filter by trigger source (optional): debugging or app-run. Default: debugging | No | string |
+| triggered_from | query | Filter by trigger source: debugging or app-run. Default: debugging | No | string |
 
 ##### Responses
 
 | Code | Description | Schema |
 | ---- | ----------- | ------ |
-| 200 | Workflow runs count retrieved successfully | [WorkflowRunCount](#workflowruncount) |
+| 200 | Workflow runs count retrieved successfully | [WorkflowRunCountResponse](#workflowruncountresponse) |
 
 ### /apps/{app_id}/advanced-chat/workflows/draft/human-input/nodes/{node_id}/form/preview
 
@@ -2361,18 +2359,17 @@ Get workflow run list
 
 | Name | Located in | Description | Required | Schema |
 | ---- | ---------- | ----------- | -------- | ------ |
-| payload | body |  | Yes | [WorkflowRunListQuery](#workflowrunlistquery) |
 | app_id | path | Application ID | Yes | string |
 | last_id | query | Last run ID for pagination | No | string |
-| limit | query | Number of items per page (1-100) | No | string |
-| status | query | Filter by status (optional): running, succeeded, failed, stopped, partial-succeeded | No | string |
-| triggered_from | query | Filter by trigger source (optional): debugging or app-run. Default: debugging | No | string |
+| limit | query | Number of items per page (1-100) | No | integer |
+| status | query | Workflow run status filter | No | string |
+| triggered_from | query | Filter by trigger source: debugging or app-run. Default: debugging | No | string |
 
 ##### Responses
 
 | Code | Description | Schema |
 | ---- | ----------- | ------ |
-| 200 | Workflow runs retrieved successfully | [WorkflowRunPagination](#workflowrunpagination) |
+| 200 | Workflow runs retrieved successfully | [WorkflowRunPaginationResponse](#workflowrunpaginationresponse) |
 
 ### /apps/{app_id}/workflow-runs/count
 
@@ -2389,17 +2386,16 @@ Get workflow runs count statistics
 
 | Name | Located in | Description | Required | Schema |
 | ---- | ---------- | ----------- | -------- | ------ |
-| payload | body |  | Yes | [WorkflowRunCountQuery](#workflowruncountquery) |
 | app_id | path | Application ID | Yes | string |
-| status | query | Filter by status (optional): running, succeeded, failed, stopped, partial-succeeded | No | string |
+| status | query | Workflow run status filter | No | string |
 | time_range | query | Filter by time range (optional): e.g., 7d (7 days), 4h (4 hours), 30m (30 minutes), 30s (30 seconds). Filters by created_at field. | No | string |
-| triggered_from | query | Filter by trigger source (optional): debugging or app-run. Default: debugging | No | string |
+| triggered_from | query | Filter by trigger source: debugging or app-run. Default: debugging | No | string |
 
 ##### Responses
 
 | Code | Description | Schema |
 | ---- | ----------- | ------ |
-| 200 | Workflow runs count retrieved successfully | [WorkflowRunCount](#workflowruncount) |
+| 200 | Workflow runs count retrieved successfully | [WorkflowRunCountResponse](#workflowruncountresponse) |
 
 ### /apps/{app_id}/workflow-runs/tasks/{task_id}/stop
 
@@ -2449,7 +2445,7 @@ Get workflow run detail
 
 | Code | Description | Schema |
 | ---- | ----------- | ------ |
-| 200 | Workflow run detail retrieved successfully | [WorkflowRunDetail](#workflowrundetail) |
+| 200 | Workflow run detail retrieved successfully | [WorkflowRunDetailResponse](#workflowrundetailresponse) |
 | 404 | Workflow run not found |  |
 
 ### /apps/{app_id}/workflow-runs/{run_id}/export
@@ -2470,7 +2466,7 @@ Generate a download URL for an archived workflow run.
 
 | Code | Description | Schema |
 | ---- | ----------- | ------ |
-| 200 | Export URL generated | [WorkflowRunExport](#workflowrunexport) |
+| 200 | Export URL generated | [WorkflowRunExportResponse](#workflowrunexportresponse) |
 
 ### /apps/{app_id}/workflow-runs/{run_id}/node-executions
 
@@ -2494,7 +2490,7 @@ Get workflow run node execution list
 
 | Code | Description | Schema |
 | ---- | ----------- | ------ |
-| 200 | Node executions retrieved successfully | [WorkflowRunNodeExecutionList](#workflowrunnodeexecutionlist) |
+| 200 | Node executions retrieved successfully | [WorkflowRunNodeExecutionListResponse](#workflowrunnodeexecutionlistresponse) |
 | 404 | Workflow run not found |  |
 
 ### /apps/{app_id}/workflow/comments
@@ -3180,7 +3176,7 @@ Get last run result for draft workflow node
 
 | Code | Description | Schema |
 | ---- | ----------- | ------ |
-| 200 | Node last run retrieved successfully | [WorkflowRunNodeExecution](#workflowrunnodeexecution) |
+| 200 | Node last run retrieved successfully | [WorkflowRunNodeExecutionResponse](#workflowrunnodeexecutionresponse) |
 | 403 | Permission denied |  |
 | 404 | Node last run not found |  |
 
@@ -3207,7 +3203,7 @@ Run draft workflow node
 
 | Code | Description | Schema |
 | ---- | ----------- | ------ |
-| 200 | Node run started successfully | [WorkflowRunNodeExecution](#workflowrunnodeexecution) |
+| 200 | Node run started successfully | [WorkflowRunNodeExecutionResponse](#workflowrunnodeexecutionresponse) |
 | 403 | Permission denied |  |
 | 404 | Node not found |  |
 
@@ -6720,9 +6716,9 @@ Get workflow run list
 
 ##### Responses
 
-| Code | Description |
-| ---- | ----------- |
-| 200 | Success |
+| Code | Description | Schema |
+| ---- | ----------- | ------ |
+| 200 | Workflow runs retrieved successfully | [WorkflowRunPaginationResponse](#workflowrunpaginationresponse) |
 
 ### /rag/pipelines/{pipeline_id}/workflow-runs/tasks/{task_id}/stop
 
@@ -6760,9 +6756,9 @@ Get workflow run detail
 
 ##### Responses
 
-| Code | Description |
-| ---- | ----------- |
-| 200 | Success |
+| Code | Description | Schema |
+| ---- | ----------- | ------ |
+| 200 | Workflow run detail retrieved successfully | [WorkflowRunDetailResponse](#workflowrundetailresponse) |
 
 ### /rag/pipelines/{pipeline_id}/workflow-runs/{run_id}/node-executions
 
@@ -6780,9 +6776,9 @@ Get workflow run node execution list
 
 ##### Responses
 
-| Code | Description |
-| ---- | ----------- |
-| 200 | Success |
+| Code | Description | Schema |
+| ---- | ----------- | ------ |
+| 200 | Node executions retrieved successfully | [WorkflowRunNodeExecutionListResponse](#workflowrunnodeexecutionlistresponse) |
 
 ### /rag/pipelines/{pipeline_id}/workflows
 
@@ -6915,9 +6911,9 @@ Set datasource variables
 
 ##### Responses
 
-| Code | Description |
-| ---- | ----------- |
-| 200 | Success |
+| Code | Description | Schema |
+| ---- | ----------- | ------ |
+| 200 | Datasource variables set successfully | [WorkflowRunNodeExecutionResponse](#workflowrunnodeexecutionresponse) |
 
 ### /rag/pipelines/{pipeline_id}/workflows/draft/environment-variables
 
@@ -6988,9 +6984,9 @@ Run draft workflow loop node
 
 ##### Responses
 
-| Code | Description |
-| ---- | ----------- |
-| 200 | Success |
+| Code | Description | Schema |
+| ---- | ----------- | ------ |
+| 200 | Node last run retrieved successfully | [WorkflowRunNodeExecutionResponse](#workflowrunnodeexecutionresponse) |
 
 ### /rag/pipelines/{pipeline_id}/workflows/draft/nodes/{node_id}/run
 
@@ -7009,9 +7005,9 @@ Run draft workflow node
 
 ##### Responses
 
-| Code | Description |
-| ---- | ----------- |
-| 200 | Success |
+| Code | Description | Schema |
+| ---- | ----------- | ------ |
+| 200 | Node run started successfully | [WorkflowRunNodeExecutionResponse](#workflowrunnodeexecutionresponse) |
 
 ### /rag/pipelines/{pipeline_id}/workflows/draft/nodes/{node_id}/variables
 
@@ -7947,6 +7943,7 @@ Get workflow pause details
 
 ##### Description
 
+Get workflow pause details
 GET /console/api/workflow/<workflow_run_id>/pause-details
 
 Returns information about why and where the workflow is paused.
@@ -7955,13 +7952,14 @@ Returns information about why and where the workflow is paused.
 
 | Name | Located in | Description | Required | Schema |
 | ---- | ---------- | ----------- | -------- | ------ |
-| workflow_run_id | path |  | Yes | string |
+| workflow_run_id | path | Workflow run ID | Yes | string |
 
 ##### Responses
 
-| Code | Description |
-| ---- | ----------- |
-| 200 | Success |
+| Code | Description | Schema |
+| ---- | ----------- | ------ |
+| 200 | Workflow pause details retrieved successfully | [WorkflowPauseDetailsResponse](#workflowpausedetailsresponse) |
+| 404 | Workflow run not found |  |
 
 ### /workspaces
 
@@ -10256,31 +10254,31 @@ Get banner list
 | ---- | ---- | ----------- | -------- |
 | result | string | Operation result | Yes |
 
-#### AdvancedChatWorkflowRunForList
+#### AdvancedChatWorkflowRunForListResponse
 
 | Name | Type | Description | Required |
 | ---- | ---- | ----------- | -------- |
-| conversation_id | string |  | No |
-| created_at | object |  | No |
-| created_by_account | [SimpleAccount](#simpleaccount) |  | No |
-| elapsed_time | number |  | No |
-| exceptions_count | integer |  | No |
-| finished_at | object |  | No |
-| id | string |  | No |
-| message_id | string |  | No |
-| retry_index | integer |  | No |
-| status | string |  | No |
-| total_steps | integer |  | No |
-| total_tokens | integer |  | No |
-| version | string |  | No |
+| conversation_id |  |  | No |
+| created_at |  |  | No |
+| created_by_account |  |  | No |
+| elapsed_time |  |  | No |
+| exceptions_count |  |  | No |
+| finished_at |  |  | No |
+| id | string |  | Yes |
+| message_id |  |  | No |
+| retry_index |  |  | No |
+| status |  |  | No |
+| total_steps |  |  | No |
+| total_tokens |  |  | No |
+| version |  |  | No |
 
-#### AdvancedChatWorkflowRunPagination
+#### AdvancedChatWorkflowRunPaginationResponse
 
 | Name | Type | Description | Required |
 | ---- | ---- | ----------- | -------- |
-| data | [ [AdvancedChatWorkflowRunForList](#advancedchatworkflowrunforlist) ] |  | No |
-| has_more | boolean |  | No |
-| limit | integer |  | No |
+| data | [ [AdvancedChatWorkflowRunForListResponse](#advancedchatworkflowrunforlistresponse) ] |  | Yes |
+| has_more | boolean |  | Yes |
+| limit | integer |  | Yes |
 
 #### AdvancedChatWorkflowRunPayload
 
@@ -12169,6 +12167,14 @@ Form input types.
 | form_inputs | object | Values the user provides for the form's own fields | Yes |
 | inputs | object | Values used to fill missing upstream variables referenced in form_content | Yes |
 
+#### HumanInputPauseTypeResponse
+
+| Name | Type | Description | Required |
+| ---- | ---- | ----------- | -------- |
+| backstage_input_url |  |  | No |
+| form_id | string |  | Yes |
+| type | string |  | Yes |
+
 #### IconType
 
 | Name | Type | Description | Required |
@@ -13101,6 +13107,14 @@ Enum class for model type.
 | ---- | ---- | ----------- | -------- |
 | click_id | string | Click Id from partner referral link | Yes |
 
+#### PausedNodeResponse
+
+| Name | Type | Description | Required |
+| ---- | ---- | ----------- | -------- |
+| node_id | string |  | Yes |
+| node_title | string |  | Yes |
+| pause_type | [HumanInputPauseTypeResponse](#humaninputpausetyperesponse) |  | Yes |
+
 #### Payload
 
 | Name | Type | Description | Required |
@@ -14306,53 +14320,60 @@ User action configuration.
 | updated_at |  |  | No |
 | updated_by |  |  | No |
 
-#### WorkflowRunCount
+#### WorkflowPauseDetailsResponse
 
 | Name | Type | Description | Required |
 | ---- | ---- | ----------- | -------- |
-| failed | integer |  | No |
-| partial_succeeded | integer |  | No |
-| running | integer |  | No |
-| stopped | integer |  | No |
-| succeeded | integer |  | No |
-| total | integer |  | No |
+| paused_at |  |  | No |
+| paused_nodes | [ [PausedNodeResponse](#pausednoderesponse) ] |  | Yes |
 
 #### WorkflowRunCountQuery
 
 | Name | Type | Description | Required |
 | ---- | ---- | ----------- | -------- |
 | status |  | Workflow run status filter | No |
-| time_range |  | Time range filter (e.g., 7d, 4h, 30m, 30s) | No |
-| triggered_from |  | Filter by trigger source: debugging or app-run | No |
+| time_range |  | Filter by time range (optional): e.g., 7d (7 days), 4h (4 hours), 30m (30 minutes), 30s (30 seconds). Filters by created_at field. | No |
+| triggered_from |  | Filter by trigger source: debugging or app-run. Default: debugging | No |
 
-#### WorkflowRunDetail
+#### WorkflowRunCountResponse
 
 | Name | Type | Description | Required |
 | ---- | ---- | ----------- | -------- |
-| created_at | object |  | No |
-| created_by_account | [SimpleAccount](#simpleaccount) |  | No |
-| created_by_end_user | [SimpleEndUser](#simpleenduser) |  | No |
-| created_by_role | string |  | No |
-| elapsed_time | number |  | No |
-| error | string |  | No |
-| exceptions_count | integer |  | No |
-| finished_at | object |  | No |
-| graph | object |  | No |
-| id | string |  | No |
-| inputs | object |  | No |
-| outputs | object |  | No |
-| status | string |  | No |
-| total_steps | integer |  | No |
-| total_tokens | integer |  | No |
-| version | string |  | No |
+| failed | integer |  | Yes |
+| partial_succeeded | integer |  | Yes |
+| running | integer |  | Yes |
+| stopped | integer |  | Yes |
+| succeeded | integer |  | Yes |
+| total | integer |  | Yes |
 
-#### WorkflowRunExport
+#### WorkflowRunDetailResponse
 
 | Name | Type | Description | Required |
 | ---- | ---- | ----------- | -------- |
-| presigned_url | string | Pre-signed URL for download | No |
-| presigned_url_expires_at | string | Pre-signed URL expiration time | No |
-| status | string | Export status: success/failed | No |
+| created_at |  |  | No |
+| created_by_account |  |  | No |
+| created_by_end_user |  |  | No |
+| created_by_role |  |  | No |
+| elapsed_time |  |  | No |
+| error |  |  | No |
+| exceptions_count |  |  | No |
+| finished_at |  |  | No |
+| graph |  |  | Yes |
+| id | string |  | Yes |
+| inputs |  |  | Yes |
+| outputs |  |  | Yes |
+| status |  |  | No |
+| total_steps |  |  | No |
+| total_tokens |  |  | No |
+| version |  |  | No |
+
+#### WorkflowRunExportResponse
+
+| Name | Type | Description | Required |
+| ---- | ---- | ----------- | -------- |
+| presigned_url |  | Pre-signed URL for download | No |
+| presigned_url_expires_at |  | Pre-signed URL expiration time | No |
+| status | string | Export status: success/failed | Yes |
 
 #### WorkflowRunForArchivedLogResponse
 
@@ -14364,21 +14385,21 @@ User action configuration.
 | total_tokens |  |  | No |
 | triggered_from |  |  | No |
 
-#### WorkflowRunForList
+#### WorkflowRunForListResponse
 
 | Name | Type | Description | Required |
 | ---- | ---- | ----------- | -------- |
-| created_at | object |  | No |
-| created_by_account | [SimpleAccount](#simpleaccount) |  | No |
-| elapsed_time | number |  | No |
-| exceptions_count | integer |  | No |
-| finished_at | object |  | No |
-| id | string |  | No |
-| retry_index | integer |  | No |
-| status | string |  | No |
-| total_steps | integer |  | No |
-| total_tokens | integer |  | No |
-| version | string |  | No |
+| created_at |  |  | No |
+| created_by_account |  |  | No |
+| elapsed_time |  |  | No |
+| exceptions_count |  |  | No |
+| finished_at |  |  | No |
+| id | string |  | Yes |
+| retry_index |  |  | No |
+| status |  |  | No |
+| total_steps |  |  | No |
+| total_tokens |  |  | No |
+| version |  |  | No |
 
 #### WorkflowRunForLogResponse
 
@@ -14403,48 +14424,48 @@ User action configuration.
 | last_id |  | Last run ID for pagination | No |
 | limit | integer | Number of items per page (1-100) | No |
 | status |  | Workflow run status filter | No |
-| triggered_from |  | Filter by trigger source: debugging or app-run | No |
+| triggered_from |  | Filter by trigger source: debugging or app-run. Default: debugging | No |
 
-#### WorkflowRunNodeExecution
+#### WorkflowRunNodeExecutionListResponse
 
 | Name | Type | Description | Required |
 | ---- | ---- | ----------- | -------- |
-| created_at | object |  | No |
-| created_by_account | [SimpleAccount](#simpleaccount) |  | No |
-| created_by_end_user | [SimpleEndUser](#simpleenduser) |  | No |
-| created_by_role | string |  | No |
-| elapsed_time | number |  | No |
-| error | string |  | No |
-| execution_metadata | object |  | No |
-| extras | object |  | No |
-| finished_at | object |  | No |
-| id | string |  | No |
-| index | integer |  | No |
-| inputs | object |  | No |
-| inputs_truncated | boolean |  | No |
-| node_id | string |  | No |
-| node_type | string |  | No |
-| outputs | object |  | No |
-| outputs_truncated | boolean |  | No |
-| predecessor_node_id | string |  | No |
-| process_data | object |  | No |
-| process_data_truncated | boolean |  | No |
-| status | string |  | No |
-| title | string |  | No |
+| data | [ [WorkflowRunNodeExecutionResponse](#workflowrunnodeexecutionresponse) ] |  | Yes |
 
-#### WorkflowRunNodeExecutionList
+#### WorkflowRunNodeExecutionResponse
 
 | Name | Type | Description | Required |
 | ---- | ---- | ----------- | -------- |
-| data | [ [WorkflowRunNodeExecution](#workflowrunnodeexecution) ] |  | No |
+| created_at |  |  | No |
+| created_by_account |  |  | No |
+| created_by_end_user |  |  | No |
+| created_by_role |  |  | No |
+| elapsed_time |  |  | No |
+| error |  |  | No |
+| execution_metadata |  |  | No |
+| extras |  |  | No |
+| finished_at |  |  | No |
+| id | string |  | Yes |
+| index |  |  | No |
+| inputs |  |  | No |
+| inputs_truncated |  |  | No |
+| node_id |  |  | No |
+| node_type |  |  | No |
+| outputs |  |  | No |
+| outputs_truncated |  |  | No |
+| predecessor_node_id |  |  | No |
+| process_data |  |  | No |
+| process_data_truncated |  |  | No |
+| status |  |  | No |
+| title |  |  | No |
 
-#### WorkflowRunPagination
+#### WorkflowRunPaginationResponse
 
 | Name | Type | Description | Required |
 | ---- | ---- | ----------- | -------- |
-| data | [ [WorkflowRunForList](#workflowrunforlist) ] |  | No |
-| has_more | boolean |  | No |
-| limit | integer |  | No |
+| data | [ [WorkflowRunForListResponse](#workflowrunforlistresponse) ] |  | Yes |
+| has_more | boolean |  | Yes |
+| limit | integer |  | Yes |
 
 #### WorkflowRunPayload
 
diff --git a/api/tests/test_containers_integration_tests/controllers/console/datasets/rag_pipeline/test_rag_pipeline_workflow.py b/api/tests/test_containers_integration_tests/controllers/console/datasets/rag_pipeline/test_rag_pipeline_workflow.py
index c17a83cad3..ba59780d59 100644
--- a/api/tests/test_containers_integration_tests/controllers/console/datasets/rag_pipeline/test_rag_pipeline_workflow.py
+++ b/api/tests/test_containers_integration_tests/controllers/console/datasets/rag_pipeline/test_rag_pipeline_workflow.py
@@ -3,6 +3,7 @@
 from __future__ import annotations
 
 from datetime import datetime
+from types import SimpleNamespace
 from unittest.mock import MagicMock, patch
 from uuid import uuid4
 
@@ -44,6 +45,35 @@ def unwrap(func):
     return func
 
 
+def make_node_execution(**overrides):
+    payload = {
+        "id": "node-exec-1",
+        "index": 1,
+        "predecessor_node_id": None,
+        "node_id": "node1",
+        "node_type": "start",
+        "title": "Start",
+        "inputs_dict": {"query": "hello"},
+        "process_data_dict": {},
+        "outputs_dict": {"answer": "world"},
+        "status": "succeeded",
+        "error": None,
+        "elapsed_time": 1.0,
+        "execution_metadata_dict": {},
+        "extras": {},
+        "created_at": datetime(2026, 1, 1, 0, 0, 0),
+        "created_by_role": "account",
+        "created_by_account": None,
+        "created_by_end_user": None,
+        "finished_at": datetime(2026, 1, 1, 0, 0, 1),
+        "inputs_truncated": False,
+        "outputs_truncated": False,
+        "process_data_truncated": False,
+    }
+    payload.update(overrides)
+    return SimpleNamespace(**payload)
+
+
 class TestDraftWorkflowApi:
     @pytest.fixture
     def app(self, flask_app_with_containers: Flask):
@@ -743,7 +773,7 @@ class TestRagPipelineWorkflowLastRunApi:
 
         pipeline = MagicMock()
         workflow = MagicMock()
-        node_exec = MagicMock()
+        node_exec = make_node_execution()
 
         service = MagicMock()
         service.get_draft_workflow.return_value = workflow
@@ -757,7 +787,9 @@ class TestRagPipelineWorkflowLastRunApi:
             ),
         ):
             result = method(api, pipeline, "node1")
-            assert result == node_exec
+            assert result["id"] == "node-exec-1"
+            assert result["inputs"] == {"query": "hello"}
+            assert result["outputs"] == {"answer": "world"}
 
     def test_last_run_not_found(self, app: Flask):
         api = RagPipelineWorkflowLastRunApi()
@@ -799,7 +831,7 @@ class TestRagPipelineDatasourceVariableApi:
         }
 
         service = MagicMock()
-        service.set_datasource_variables.return_value = MagicMock()
+        service.set_datasource_variables.return_value = make_node_execution(node_id="n1")
 
         with (
             app.test_request_context("/", json=payload),
@@ -814,4 +846,5 @@ class TestRagPipelineDatasourceVariableApi:
             ),
         ):
             result = method(api, pipeline)
-            assert result is not None
+            assert result["node_id"] == "n1"
+            assert result["process_data"] == {}
diff --git a/api/tests/unit_tests/controllers/common/test_schema.py b/api/tests/unit_tests/controllers/common/test_schema.py
index 575f8c839c..7cabafba0e 100644
--- a/api/tests/unit_tests/controllers/common/test_schema.py
+++ b/api/tests/unit_tests/controllers/common/test_schema.py
@@ -47,6 +47,10 @@ class QueryModel(BaseModel):
     ambiguous: int | str | None = Field(default=None, description="Ambiguous query parameter")
 
 
+class ResponseAliasModel(BaseModel):
+    public_name: str = Field(validation_alias="internal_name")
+
+
 @pytest.fixture(autouse=True)
 def mock_console_ns():
     """Mock the console_ns to avoid circular imports during test collection."""
@@ -146,6 +150,20 @@ def test_register_schema_models_calls_register_schema_model(monkeypatch: pytest.
     ]
 
 
+def test_register_response_schema_model_uses_serialized_field_names():
+    from controllers.common.schema import register_response_schema_model
+
+    namespace = MagicMock(spec=Namespace)
+
+    register_response_schema_model(namespace, ResponseAliasModel)
+
+    model_name, schema = namespace.schema_model.call_args.args
+
+    assert model_name == "ResponseAliasModel"
+    assert "public_name" in schema["properties"]
+    assert "internal_name" not in schema["properties"]
+
+
 def test_get_or_create_model_returns_existing_model(mock_console_ns):
     from controllers.common.schema import get_or_create_model
 
diff --git a/api/tests/unit_tests/controllers/console/app/test_workflow_pause_details_api.py b/api/tests/unit_tests/controllers/console/app/test_workflow_pause_details_api.py
index c4a8148446..05c17b4e34 100644
--- a/api/tests/unit_tests/controllers/console/app/test_workflow_pause_details_api.py
+++ b/api/tests/unit_tests/controllers/console/app/test_workflow_pause_details_api.py
@@ -112,3 +112,24 @@ def test_pause_details_tenant_isolation(app: Flask, monkeypatch: pytest.MonkeyPa
     with pytest.raises(NotFoundError):
         with app.test_request_context("/console/api/workflow/run-1/pause-details", method="GET"):
             response, status = workflow_run_module.ConsoleWorkflowPauseDetailsApi().get(workflow_run_id="run-1")
+
+
+def test_pause_details_returns_empty_response_for_non_paused_run(app: Flask, monkeypatch: pytest.MonkeyPatch) -> None:
+    account = _make_account()
+    _patch_console_guards(monkeypatch, account)
+
+    workflow_run = Mock(spec=WorkflowRun)
+    workflow_run.tenant_id = "tenant-123"
+    workflow_run.status = WorkflowExecutionStatus.RUNNING
+    fake_db = SimpleNamespace(engine=Mock(), session=SimpleNamespace(get=lambda *_: workflow_run))
+    monkeypatch.setattr(workflow_run_module, "db", fake_db)
+
+    with app.test_request_context("/console/api/workflow/run-1/pause-details", method="GET"):
+        response, status = workflow_run_module.ConsoleWorkflowPauseDetailsApi().get(workflow_run_id="run-1")
+
+    assert status == 200
+    assert response == {"paused_at": None, "paused_nodes": []}
+
+
+def test_pause_details_response_schema_is_registered() -> None:
+    assert workflow_run_module.WorkflowPauseDetailsResponse.__name__ in workflow_run_module.console_ns.models
diff --git a/api/tests/unit_tests/controllers/console/app/test_workflow_run_api.py b/api/tests/unit_tests/controllers/console/app/test_workflow_run_api.py
new file mode 100644
index 0000000000..e225e31563
--- /dev/null
+++ b/api/tests/unit_tests/controllers/console/app/test_workflow_run_api.py
@@ -0,0 +1,248 @@
+from __future__ import annotations
+
+from datetime import UTC, datetime
+from types import SimpleNamespace
+from typing import Any
+
+import pytest
+from flask import Flask
+from flask_restx import marshal
+
+from controllers.console.app import workflow_run as workflow_run_module
+
+
+def _unwrap(func):
+    while hasattr(func, "__wrapped__"):
+        func = func.__wrapped__
+    return func
+
+
+def _serialize_200_response(handler, payload: Any) -> Any:
+    response_doc = getattr(handler, "__apidoc__", {}).get("responses", {}).get("200")
+    if response_doc is None:
+        return payload
+
+    response_model = response_doc[1]
+    if isinstance(response_model, dict):
+        return marshal(payload, response_model)
+    return payload
+
+
+def _account() -> SimpleNamespace:
+    return SimpleNamespace(id="account-1", name="Alice", email="alice@example.com")
+
+
+def _workflow_run_summary(**overrides) -> SimpleNamespace:
+    created_at = datetime(2026, 1, 2, 3, 4, 5, tzinfo=UTC)
+    payload = {
+        "id": "run-1",
+        "version": "v1",
+        "status": "succeeded",
+        "elapsed_time": 1.5,
+        "total_tokens": 10,
+        "total_steps": 2,
+        "created_by_account": _account(),
+        "created_at": created_at,
+        "finished_at": created_at,
+        "exceptions_count": 0,
+        "retry_index": 0,
+    }
+    payload.update(overrides)
+    return SimpleNamespace(**payload)
+
+
+def _workflow_run_node_execution(**overrides) -> SimpleNamespace:
+    created_at = datetime(2026, 1, 2, 3, 4, 5, tzinfo=UTC)
+    payload = {
+        "id": "node-exec-1",
+        "index": 1,
+        "predecessor_node_id": None,
+        "node_id": "node-1",
+        "node_type": "start",
+        "title": "Start",
+        "inputs_dict": {"query": "hello"},
+        "process_data_dict": {"step": "prepared"},
+        "outputs_dict": {"answer": "world"},
+        "status": "succeeded",
+        "error": None,
+        "elapsed_time": 1.0,
+        "execution_metadata_dict": {"total_tokens": 3},
+        "extras": {},
+        "created_at": created_at,
+        "created_by_role": "account",
+        "created_by_account": _account(),
+        "created_by_end_user": None,
+        "finished_at": created_at,
+        "inputs_truncated": False,
+        "outputs_truncated": False,
+        "process_data_truncated": False,
+    }
+    payload.update(overrides)
+    return SimpleNamespace(**payload)
+
+
+def test_workflow_run_list_returns_frontend_history_contract(app: Flask, monkeypatch: pytest.MonkeyPatch) -> None:
+    class WorkflowRunService:
+        def get_paginate_workflow_runs(self, **_kwargs):
+            return {
+                "limit": 10,
+                "has_more": False,
+                "data": [_workflow_run_summary()],
+            }
+
+    monkeypatch.setattr(workflow_run_module, "WorkflowRunService", WorkflowRunService)
+
+    api = workflow_run_module.WorkflowRunListApi()
+    handler = _unwrap(api.get)
+
+    with app.test_request_context("/apps/app-1/workflow-runs?limit=10", method="GET"):
+        payload = handler(api, app_model=SimpleNamespace(id="app-1", tenant_id="tenant-1"))
+
+    response = _serialize_200_response(api.get, payload)
+
+    assert response["limit"] == 10
+    assert response["has_more"] is False
+    assert response["data"][0] == {
+        "id": "run-1",
+        "version": "v1",
+        "status": "succeeded",
+        "elapsed_time": 1.5,
+        "total_tokens": 10,
+        "total_steps": 2,
+        "created_by_account": {"id": "account-1", "name": "Alice", "email": "alice@example.com"},
+        "created_at": 1767323045,
+        "finished_at": 1767323045,
+        "exceptions_count": 0,
+        "retry_index": 0,
+    }
+
+
+def test_advanced_chat_workflow_run_list_keeps_message_fields(app: Flask, monkeypatch: pytest.MonkeyPatch) -> None:
+    class WorkflowRunService:
+        def get_paginate_advanced_chat_workflow_runs(self, **_kwargs):
+            return {
+                "limit": 1,
+                "has_more": True,
+                "data": [
+                    _workflow_run_summary(
+                        conversation_id="conversation-1",
+                        message_id="message-1",
+                    )
+                ],
+            }
+
+    monkeypatch.setattr(workflow_run_module, "WorkflowRunService", WorkflowRunService)
+
+    api = workflow_run_module.AdvancedChatAppWorkflowRunListApi()
+    handler = _unwrap(api.get)
+
+    with app.test_request_context("/apps/app-1/advanced-chat/workflow-runs?limit=1", method="GET"):
+        payload = handler(api, app_model=SimpleNamespace(id="app-1", tenant_id="tenant-1"))
+
+    response = _serialize_200_response(api.get, payload)
+
+    assert response["data"][0]["conversation_id"] == "conversation-1"
+    assert response["data"][0]["message_id"] == "message-1"
+
+
+def test_workflow_run_detail_returns_frontend_detail_contract(app: Flask, monkeypatch: pytest.MonkeyPatch) -> None:
+    created_at = datetime(2026, 1, 2, 3, 4, 5, tzinfo=UTC)
+    workflow_run = SimpleNamespace(
+        id="run-1",
+        version="v1",
+        graph_dict={"nodes": []},
+        inputs_dict={"query": "hello"},
+        status="succeeded",
+        outputs_dict={"answer": "world"},
+        error=None,
+        elapsed_time=1.5,
+        total_tokens=10,
+        total_steps=2,
+        created_by_role="account",
+        created_by_account=_account(),
+        created_by_end_user=None,
+        created_at=created_at,
+        finished_at=created_at,
+        exceptions_count=0,
+    )
+
+    class WorkflowRunService:
+        def get_workflow_run(self, **_kwargs):
+            return workflow_run
+
+    monkeypatch.setattr(workflow_run_module, "WorkflowRunService", WorkflowRunService)
+
+    api = workflow_run_module.WorkflowRunDetailApi()
+    handler = _unwrap(api.get)
+
+    with app.test_request_context("/apps/app-1/workflow-runs/run-1", method="GET"):
+        payload = handler(api, app_model=SimpleNamespace(id="app-1", tenant_id="tenant-1"), run_id="run-1")
+
+    response = _serialize_200_response(api.get, payload)
+
+    assert response == {
+        "id": "run-1",
+        "version": "v1",
+        "graph": {"nodes": []},
+        "inputs": {"query": "hello"},
+        "status": "succeeded",
+        "outputs": {"answer": "world"},
+        "error": None,
+        "elapsed_time": 1.5,
+        "total_tokens": 10,
+        "total_steps": 2,
+        "created_by_role": "account",
+        "created_by_account": {"id": "account-1", "name": "Alice", "email": "alice@example.com"},
+        "created_by_end_user": None,
+        "created_at": 1767323045,
+        "finished_at": 1767323045,
+        "exceptions_count": 0,
+    }
+
+
+def test_workflow_run_node_executions_return_frontend_trace_contract(
+    app: Flask, monkeypatch: pytest.MonkeyPatch
+) -> None:
+    class WorkflowRunService:
+        def get_workflow_run_node_executions(self, **_kwargs):
+            return [_workflow_run_node_execution()]
+
+    monkeypatch.setattr(workflow_run_module, "WorkflowRunService", WorkflowRunService)
+    monkeypatch.setattr(workflow_run_module, "current_user", SimpleNamespace(id="account-1"))
+
+    api = workflow_run_module.WorkflowRunNodeExecutionListApi()
+    handler = _unwrap(api.get)
+
+    with app.test_request_context("/apps/app-1/workflow-runs/run-1/node-executions", method="GET"):
+        payload = handler(api, app_model=SimpleNamespace(id="app-1", tenant_id="tenant-1"), run_id="run-1")
+
+    response = _serialize_200_response(api.get, payload)
+
+    assert response == {
+        "data": [
+            {
+                "id": "node-exec-1",
+                "index": 1,
+                "predecessor_node_id": None,
+                "node_id": "node-1",
+                "node_type": "start",
+                "title": "Start",
+                "inputs": {"query": "hello"},
+                "process_data": {"step": "prepared"},
+                "outputs": {"answer": "world"},
+                "status": "succeeded",
+                "error": None,
+                "elapsed_time": 1.0,
+                "execution_metadata": {"total_tokens": 3},
+                "extras": {},
+                "created_at": 1767323045,
+                "created_by_role": "account",
+                "created_by_account": {"id": "account-1", "name": "Alice", "email": "alice@example.com"},
+                "created_by_end_user": None,
+                "finished_at": 1767323045,
+                "inputs_truncated": False,
+                "outputs_truncated": False,
+                "process_data_truncated": False,
+            }
+        ]
+    }

From f720a3bed2b23da49cca81e05473090ab2b69692 Mon Sep 17 00:00:00 2001
From: FFXN <31929997+FFXN@users.noreply.github.com>
Date: Sat, 9 May 2026 18:06:01 +0800
Subject: [PATCH 04/13] fix: Image rendering in the knowledge base failed.
 (#35914)

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 api/core/rag/datasource/retrieval_service.py  |  6 +--
 api/core/rag/extractor/pdf_extractor.py       |  2 +-
 api/core/rag/extractor/word_extractor.py      |  2 +-
 api/core/rag/retrieval/dataset_retrieval.py   |  4 +-
 api/core/tools/signature.py                   | 10 ++--
 api/models/dataset.py                         |  6 +--
 .../datasource/test_datasource_retrieval.py   |  4 +-
 .../rag/retrieval/test_dataset_retrieval.py   |  2 +-
 .../unit_tests/core/tools/test_signature.py   | 14 +++---
 .../unit_tests/models/test_dataset_models.py  | 47 +++++++++++++++++++
 10 files changed, 73 insertions(+), 24 deletions(-)

diff --git a/api/core/rag/datasource/retrieval_service.py b/api/core/rag/datasource/retrieval_service.py
index b985ebbe1d..7769878e70 100644
--- a/api/core/rag/datasource/retrieval_service.py
+++ b/api/core/rag/datasource/retrieval_service.py
@@ -21,7 +21,7 @@ from core.rag.index_processor.constant.query_type import QueryType
 from core.rag.models.document import Document
 from core.rag.rerank.rerank_type import RerankMode
 from core.rag.retrieval.retrieval_methods import RetrievalMethod
-from core.tools.signature import sign_upload_file
+from core.tools.signature import sign_upload_file_preview_url
 from extensions.ext_database import db
 from graphon.model_runtime.entities.model_entities import ModelType
 from models.dataset import (
@@ -893,7 +893,7 @@ class RetrievalService:
                     "name": upload_file.name,
                     "extension": "." + upload_file.extension,
                     "mime_type": upload_file.mime_type,
-                    "source_url": sign_upload_file(upload_file.id, upload_file.extension),
+                    "source_url": sign_upload_file_preview_url(upload_file.id, upload_file.extension),
                     "size": upload_file.size,
                 }
                 return {"attachment_info": attachment_info, "segment_id": attachment_binding.segment_id}
@@ -920,7 +920,7 @@ class RetrievalService:
                         "name": upload_file.name,
                         "extension": "." + upload_file.extension,
                         "mime_type": upload_file.mime_type,
-                        "source_url": sign_upload_file(upload_file.id, upload_file.extension),
+                        "source_url": sign_upload_file_preview_url(upload_file.id, upload_file.extension),
                         "size": upload_file.size,
                     }
                     if attachment_binding:
diff --git a/api/core/rag/extractor/pdf_extractor.py b/api/core/rag/extractor/pdf_extractor.py
index 02f0efc908..25f6fe3e2a 100644
--- a/api/core/rag/extractor/pdf_extractor.py
+++ b/api/core/rag/extractor/pdf_extractor.py
@@ -115,7 +115,7 @@ class PdfExtractor(BaseExtractor):
         """
         image_content = []
         upload_files = []
-        base_url = dify_config.INTERNAL_FILES_URL or dify_config.FILES_URL
+        base_url = dify_config.FILES_URL
 
         try:
             image_objects = page.get_objects(filter=(pdfium_c.FPDF_PAGEOBJ_IMAGE,))
diff --git a/api/core/rag/extractor/word_extractor.py b/api/core/rag/extractor/word_extractor.py
index 0330a43b28..60f8906181 100644
--- a/api/core/rag/extractor/word_extractor.py
+++ b/api/core/rag/extractor/word_extractor.py
@@ -110,7 +110,7 @@ class WordExtractor(BaseExtractor):
     def _extract_images_from_docx(self, doc):
         image_count = 0
         image_map = {}
-        base_url = dify_config.INTERNAL_FILES_URL or dify_config.FILES_URL
+        base_url = dify_config.FILES_URL
 
         for r_id, rel in doc.part.rels.items():
             if "image" in rel.target_ref:
diff --git a/api/core/rag/retrieval/dataset_retrieval.py b/api/core/rag/retrieval/dataset_retrieval.py
index 5631b3a921..010566d203 100644
--- a/api/core/rag/retrieval/dataset_retrieval.py
+++ b/api/core/rag/retrieval/dataset_retrieval.py
@@ -52,7 +52,7 @@ from core.rag.retrieval.template_prompts import (
     METADATA_FILTER_USER_PROMPT_2,
     METADATA_FILTER_USER_PROMPT_3,
 )
-from core.tools.signature import sign_upload_file
+from core.tools.signature import sign_upload_file_preview_url
 from core.tools.utils.dataset_retriever.dataset_retriever_base_tool import DatasetRetrieverBaseTool
 from core.workflow.file_reference import build_file_reference
 from core.workflow.nodes.knowledge_retrieval import exc
@@ -529,7 +529,7 @@ class DatasetRetrieval:
                                     ),
                                     size=upload_file.size,
                                     storage_key=upload_file.key,
-                                    url=sign_upload_file(upload_file.id, upload_file.extension),
+                                    url=sign_upload_file_preview_url(upload_file.id, upload_file.extension),
                                 )
                                 context_files.append(attachment_info)
                 if show_retrieve_source:
diff --git a/api/core/tools/signature.py b/api/core/tools/signature.py
index 1807226924..3c7b523ff1 100644
--- a/api/core/tools/signature.py
+++ b/api/core/tools/signature.py
@@ -26,12 +26,14 @@ def sign_tool_file(tool_file_id: str, extension: str, for_external: bool = True)
     return f"{file_preview_url}?timestamp={timestamp}&nonce={nonce}&sign={encoded_sign}"
 
 
-def sign_upload_file(upload_file_id: str, extension: str) -> str:
+def sign_upload_file_preview_url(upload_file_id: str, extension: str) -> str:
     """
-    sign file to get a temporary url for plugin access
+    Sign an upload file to get a temporary image preview URL.
+
+    The URL generated by this function is only for external preview and download,
+    not for internal communication.
     """
-    # Use internal URL for plugin/tool file access in Docker environments
-    base_url = dify_config.INTERNAL_FILES_URL or dify_config.FILES_URL
+    base_url = dify_config.FILES_URL
     file_preview_url = f"{base_url}/files/{upload_file_id}/image-preview"
 
     timestamp = str(int(time.time()))
diff --git a/api/models/dataset.py b/api/models/dataset.py
index a00e9f7640..ed7727e0f1 100644
--- a/api/models/dataset.py
+++ b/api/models/dataset.py
@@ -24,7 +24,7 @@ from core.rag.index_processor.constant.built_in_field import BuiltInField, Metad
 from core.rag.index_processor.constant.index_type import IndexStructureType, IndexTechniqueType
 from core.rag.index_processor.constant.query_type import QueryType
 from core.rag.retrieval.retrieval_methods import RetrievalMethod
-from core.tools.signature import sign_upload_file
+from core.tools.signature import sign_upload_file_preview_url
 from extensions.ext_storage import storage
 from libs.uuid_utils import uuidv7
 
@@ -1020,7 +1020,7 @@ class DocumentSegment(Base):
             encoded_sign = base64.urlsafe_b64encode(sign).decode()
 
             params = f"timestamp={timestamp}&nonce={nonce}&sign={encoded_sign}"
-            reference_url = dify_config.CONSOLE_API_URL or ""
+            reference_url = dify_config.FILES_URL or dify_config.CONSOLE_API_URL or ""
             base_url = f"{reference_url}/files/{upload_file_id}/image-preview"
             source_url = f"{base_url}?{params}"
             attachment_list.append(
@@ -1162,7 +1162,7 @@ class DatasetQuery(TypeBase):
                                 "size": file_info.size,
                                 "extension": file_info.extension,
                                 "mime_type": file_info.mime_type,
-                                "source_url": sign_upload_file(file_info.id, file_info.extension),
+                                "source_url": sign_upload_file_preview_url(file_info.id, file_info.extension),
                             }
                     else:
                         query["file_info"] = None
diff --git a/api/tests/unit_tests/core/rag/datasource/test_datasource_retrieval.py b/api/tests/unit_tests/core/rag/datasource/test_datasource_retrieval.py
index d38213dd89..f72351ffa2 100644
--- a/api/tests/unit_tests/core/rag/datasource/test_datasource_retrieval.py
+++ b/api/tests/unit_tests/core/rag/datasource/test_datasource_retrieval.py
@@ -1038,7 +1038,7 @@ class TestRetrievalServiceInternals:
         assert any(doc.metadata["doc_id"] == "processed-doc" for doc in all_documents)
         processor_instance.invoke.assert_called_once()
 
-    @patch("core.rag.datasource.retrieval_service.sign_upload_file", return_value="signed://file")
+    @patch("core.rag.datasource.retrieval_service.sign_upload_file_preview_url", return_value="signed://file")
     def test_get_segment_attachment_info_success(self, mock_sign):
         upload_file = SimpleNamespace(
             id="upload-1",
@@ -1118,7 +1118,7 @@ class TestRetrievalServiceInternals:
 
         assert result == []
 
-    @patch("core.rag.datasource.retrieval_service.sign_upload_file", return_value="signed://file")
+    @patch("core.rag.datasource.retrieval_service.sign_upload_file_preview_url", return_value="signed://file")
     def test_get_segment_attachment_infos_success(self, mock_sign):
         upload_file_1 = SimpleNamespace(
             id="upload-1",
diff --git a/api/tests/unit_tests/core/rag/retrieval/test_dataset_retrieval.py b/api/tests/unit_tests/core/rag/retrieval/test_dataset_retrieval.py
index b556ddf528..9334ad9b2f 100644
--- a/api/tests/unit_tests/core/rag/retrieval/test_dataset_retrieval.py
+++ b/api/tests/unit_tests/core/rag/retrieval/test_dataset_retrieval.py
@@ -4562,7 +4562,7 @@ class TestRetrieveCoverage:
                 "core.rag.retrieval.dataset_retrieval.RetrievalService.format_retrieval_documents",
                 return_value=[record],
             ),
-            patch("core.rag.retrieval.dataset_retrieval.sign_upload_file", return_value="https://signed"),
+            patch("core.rag.retrieval.dataset_retrieval.sign_upload_file_preview_url", return_value="https://signed"),
             patch("core.rag.retrieval.dataset_retrieval.db.session.execute") as mock_execute,
         ):
             bound_model_instance = Mock()
diff --git a/api/tests/unit_tests/core/tools/test_signature.py b/api/tests/unit_tests/core/tools/test_signature.py
index 353988d7a6..a75fdee908 100644
--- a/api/tests/unit_tests/core/tools/test_signature.py
+++ b/api/tests/unit_tests/core/tools/test_signature.py
@@ -9,7 +9,7 @@ import pytest
 from core.tools.signature import (
     get_signed_file_url_for_plugin,
     sign_tool_file,
-    sign_upload_file,
+    sign_upload_file_preview_url,
     verify_plugin_file_signature,
     verify_tool_file_signature,
 )
@@ -89,32 +89,32 @@ def test_verify_tool_file_signature_rejects_expired_signature(monkeypatch: pytes
     assert verify_tool_file_signature("tool-file-id", timestamp, nonce, sign) is False
 
 
-def test_sign_upload_file_prefers_internal_url(monkeypatch: pytest.MonkeyPatch) -> None:
+def test_sign_upload_file_preview_url_uses_files_url(monkeypatch: pytest.MonkeyPatch) -> None:
     monkeypatch.setattr("core.tools.signature.time.time", lambda: 1700000000)
     monkeypatch.setattr("core.tools.signature.os.urandom", lambda _: b"\x03" * 16)
     monkeypatch.setattr("core.tools.signature.dify_config.SECRET_KEY", "unit-secret")
     monkeypatch.setattr("core.tools.signature.dify_config.FILES_URL", "https://files.example.com")
     monkeypatch.setattr("core.tools.signature.dify_config.INTERNAL_FILES_URL", "https://internal.example.com")
 
-    url = sign_upload_file("upload-id", ".png")
+    url = sign_upload_file_preview_url("upload-id", ".png")
     parsed = urlparse(url)
     query = parse_qs(parsed.query)
 
-    assert parsed.netloc == "internal.example.com"
+    assert parsed.netloc == "files.example.com"
     assert parsed.path == "/files/upload-id/image-preview"
     assert query["timestamp"][0]
     assert query["nonce"][0]
     assert query["sign"][0]
 
 
-def test_sign_upload_file_uses_files_url_fallback(monkeypatch: pytest.MonkeyPatch) -> None:
+def test_sign_upload_file_preview_url_ignores_internal_files_url(monkeypatch: pytest.MonkeyPatch) -> None:
     monkeypatch.setattr("core.tools.signature.time.time", lambda: 1700000000)
     monkeypatch.setattr("core.tools.signature.os.urandom", lambda _: b"\x05" * 16)
     monkeypatch.setattr("core.tools.signature.dify_config.SECRET_KEY", "unit-secret")
     monkeypatch.setattr("core.tools.signature.dify_config.FILES_URL", "https://files.example.com")
-    monkeypatch.setattr("core.tools.signature.dify_config.INTERNAL_FILES_URL", "")
+    monkeypatch.setattr("core.tools.signature.dify_config.INTERNAL_FILES_URL", "https://internal.example.com")
 
-    url = sign_upload_file("upload-id", ".png")
+    url = sign_upload_file_preview_url("upload-id", ".png")
     parsed = urlparse(url)
     query = parse_qs(parsed.query)
 
diff --git a/api/tests/unit_tests/models/test_dataset_models.py b/api/tests/unit_tests/models/test_dataset_models.py
index 51d95c4239..3f14ebe8bf 100644
--- a/api/tests/unit_tests/models/test_dataset_models.py
+++ b/api/tests/unit_tests/models/test_dataset_models.py
@@ -12,7 +12,9 @@ This test suite covers:
 import json
 import pickle
 from datetime import UTC, datetime
+from types import SimpleNamespace
 from unittest.mock import Mock, patch
+from urllib.parse import parse_qs, urlparse
 from uuid import uuid4
 
 from core.rag.index_processor.constant.index_type import IndexTechniqueType
@@ -676,6 +678,51 @@ class TestDocumentSegmentIndexing:
         # Assert
         assert segment.hit_count == 5
 
+    def test_document_segment_attachments_prefers_files_url_for_source_url(self, monkeypatch):
+        """Test attachment source URLs use FILES_URL before falling back to CONSOLE_API_URL."""
+        # Arrange
+        segment = DocumentSegment(
+            tenant_id="tenant-1",
+            dataset_id="dataset-1",
+            document_id="document-1",
+            position=1,
+            content="Test",
+            word_count=1,
+            tokens=2,
+            created_by="user-1",
+        )
+        segment.id = "segment-1"
+        attachment = SimpleNamespace(
+            id="upload-1",
+            name="image.png",
+            size=128,
+            extension="png",
+            mime_type="image/png",
+        )
+
+        monkeypatch.setattr("models.dataset.time.time", lambda: 1700000000)
+        monkeypatch.setattr("models.dataset.os.urandom", lambda _: b"\x01" * 16)
+        monkeypatch.setattr("models.dataset.dify_config.SECRET_KEY", "unit-secret")
+        monkeypatch.setattr("models.dataset.dify_config.FILES_URL", "https://files.example.com")
+        monkeypatch.setattr("models.dataset.dify_config.CONSOLE_API_URL", "https://console.example.com")
+
+        with patch("models.dataset.db") as mock_db:
+            mock_db.session.execute.return_value.all.return_value = [(Mock(), attachment)]
+
+            # Act
+            attachments = segment.attachments
+
+        # Assert
+        assert len(attachments) == 1
+        source_url = attachments[0]["source_url"]
+        parsed = urlparse(source_url)
+        query = parse_qs(parsed.query)
+        assert parsed.netloc == "files.example.com"
+        assert parsed.path == "/files/upload-1/image-preview"
+        assert query["timestamp"] == ["1700000000"]
+        assert query["nonce"] == ["01010101010101010101010101010101"]
+        assert query["sign"][0]
+
     def test_document_segment_error_tracking(self):
         """Test document segment error tracking."""
         # Arrange

From 8581a68174642685374fdea6a1f321e0bdb244d2 Mon Sep 17 00:00:00 2001
From: Coding On Star <447357187@qq.com>
Date: Sat, 9 May 2026 18:33:25 +0800
Subject: [PATCH 05/13] refactor(web): drop headless-ui, migrate overlay to
 dify-ui (#35963)

Co-authored-by: CodingOnStar <hanxujiang@dify.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
Co-authored-by: yyh <92089059+lyzno1@users.noreply.github.com>
---
 eslint-suppressions.json                      | 364 +++---------------
 packages/dify-ui/src/dialog/index.tsx         |   2 +-
 pnpm-lock.yaml                                | 131 -------
 pnpm-workspace.yaml                           |   1 -
 .../apps/app-card-operations-flow.test.tsx    |  22 --
 .../develop/api-key-management-flow.test.tsx  |   4 +-
 .../header/account-dropdown-flow.test.tsx     |   1 +
 web/__tests__/header/nav-flow.test.tsx        |  77 ----
 .../(appDetailLayout)/[appId]/layout-main.tsx |   5 +
 .../delete-account/components/feed-back.tsx   |  50 ++-
 .../(commonLayout)/delete-account/index.tsx   |  42 +-
 .../app-sidebar/__tests__/index.spec.tsx      |   3 +
 .../__tests__/app-info-detail-panel.spec.tsx  |  25 +-
 .../__tests__/use-app-info-actions.spec.ts    |  21 +
 .../app-info/app-info-detail-drawer.tsx       |  34 ++
 .../app-info/app-info-detail-panel.tsx        |  15 +-
 .../components/app-sidebar/app-info/index.tsx |  84 +++-
 .../app-info/use-app-info-actions.ts          |  80 +++-
 .../app-sidebar/app-sidebar-dropdown.tsx      |  17 +-
 web/app/components/app-sidebar/index.tsx      |  20 +-
 .../batch-add-annotation-modal/index.tsx      |  62 +--
 .../header-opts/__tests__/index.spec.tsx      | 118 ------
 .../__tests__/access-control-dialog.spec.tsx  |   1 +
 .../__tests__/access-control.spec.tsx         |  29 --
 .../access-control-dialog.tsx                 |  10 +-
 .../__tests__/version-info-modal.spec.tsx     |  16 +
 .../app/app-publisher/version-info-modal.tsx  |  83 ++--
 .../__tests__/edit-modal.spec.tsx             |   7 +-
 .../conversation-history/edit-modal.tsx       |  66 ++--
 .../config-var/config-modal/index.tsx         |  64 +--
 .../config/automatic/get-automatic-res.tsx    | 269 ++++++-------
 .../code-generator/get-code-generator-res.tsx | 179 ++++-----
 .../params-config/__tests__/index.spec.tsx    |  31 --
 .../dataset-config/params-config/index.tsx    |  52 +--
 .../app/create-app-dialog-shell.tsx           |  51 +++
 .../__tests__/index.spec.tsx                  | 127 +-----
 .../app/create-app-dialog/index.tsx           |  20 +-
 .../components/app/create-app-modal/index.tsx |  31 +-
 .../__tests__/index.spec.tsx                  |  81 +++-
 .../dsl-confirm-modal.tsx                     |  63 +--
 .../app/create-from-dsl-modal/index.tsx       | 226 +++++------
 .../components/app/duplicate-modal/index.tsx  |  69 ++--
 .../components/app/switch-app-modal/index.tsx | 122 +++---
 .../app/workflow-log/__tests__/list.spec.tsx  |   3 +-
 .../components/base/app-icon-picker/index.tsx |  97 +++--
 .../sidebar/__tests__/index.spec.tsx          |  21 +-
 .../sidebar/__tests__/rename-modal.spec.tsx   |  26 +-
 .../content-dialog/__tests__/index.spec.tsx   |  59 ---
 .../base/content-dialog/index.stories.tsx     | 119 ------
 .../components/base/content-dialog/index.tsx  |  40 --
 .../date-picker/index.tsx                     |   2 -
 .../date-and-time-picker/index.stories.tsx    |   2 -
 .../base/date-and-time-picker/types.ts        |   1 -
 .../base/dialog/__tests__/index.spec.tsx      | 138 -------
 .../components/base/dialog/index.stories.tsx  | 152 --------
 web/app/components/base/dialog/index.tsx      |  70 ----
 .../base/drawer-plus/__tests__/index.spec.tsx |   3 +-
 .../base/drawer/__tests__/index.spec.tsx      |  92 +++--
 .../components/base/drawer/index.stories.tsx  |   2 +-
 web/app/components/base/drawer/index.tsx      | 142 +++----
 .../components/base/emoji-picker/index.tsx    |  72 ++--
 ...spec.tsx => feature-panel-drawer.spec.tsx} |  59 ++-
 .../annotation-reply/config-param-modal.tsx   |  91 +++--
 .../new-feature-panel/dialog-wrapper.tsx      |  57 ---
 .../feature-panel-drawer.tsx                  |  60 +++
 .../base/features/new-feature-panel/index.tsx |  13 +-
 .../moderation/moderation-setting-modal.tsx   | 292 +++++++-------
 .../__tests__/audio-preview.spec.tsx          |  15 +-
 .../__tests__/pdf-preview.spec.tsx            |  12 +-
 .../__tests__/video-preview.spec.tsx          |  17 +-
 .../base/file-uploader/audio-preview.tsx      |  60 +--
 .../__tests__/file-item.spec.tsx              |   2 +-
 .../__tests__/file-image-item.spec.tsx        |   5 +-
 .../base/file-uploader/pdf-preview.tsx        | 175 +++++----
 .../base/file-uploader/video-preview.tsx      |  59 +--
 .../__tests__/index.spec.tsx                  |   3 +-
 .../fullscreen-modal/__tests__/index.spec.tsx | 214 ----------
 .../base/fullscreen-modal/index.stories.tsx   |  59 ---
 .../base/fullscreen-modal/index.tsx           |  65 ----
 .../image-gallery/__tests__/index.spec.tsx    |   2 +-
 .../__tests__/audio-preview.spec.tsx          |   2 +-
 .../__tests__/image-preview.spec.tsx          |  14 +-
 .../__tests__/video-preview.spec.tsx          |   2 +-
 .../base/image-uploader/audio-preview.tsx     |  56 ++-
 .../base/image-uploader/image-preview.tsx     | 275 +++++++------
 .../base/image-uploader/video-preview.tsx     |  54 ++-
 .../modal-like-wrap/__tests__/index.spec.tsx  |  84 ----
 .../base/modal-like-wrap/index.stories.tsx    | 131 -------
 .../components/base/modal-like-wrap/index.tsx |  62 ---
 .../base/modal/__tests__/index.spec.tsx       | 172 ---------
 .../components/base/modal/index.stories.tsx   | 128 ------
 web/app/components/base/modal/index.tsx       |  93 -----
 .../plugins/hitl-input-block/component-ui.tsx |  32 +-
 .../plugins/hitl-input-block/input-field.tsx  |   4 +-
 .../__tests__/index.spec.tsx                  |   8 +-
 .../plugins/shortcuts-popup-plugin/index.tsx  |  12 +-
 .../annotation-full/__tests__/modal.spec.tsx  |  26 +-
 .../billing/annotation-full/modal.tsx         |  45 ++-
 .../image-list/__tests__/index.spec.tsx       |   2 +-
 .../image-previewer/__tests__/index.spec.tsx  |  11 +-
 .../datasets/common/image-previewer/index.tsx | 138 +++----
 .../dsl-confirm-modal.tsx                     |  63 +--
 .../hooks/__tests__/use-dsl-import.spec.tsx   |  94 ++++-
 .../hooks/use-dsl-import.ts                   | 158 +++++---
 .../create-from-dsl-modal/index.tsx           |  92 +++--
 .../template-card/__tests__/index.spec.tsx    |  30 ++
 .../list/template-card/index.tsx              |  52 ++-
 .../empty-dataset-creation-modal/index.tsx    |  41 +-
 .../__tests__/index.spec.tsx                  |   3 +-
 .../create/stop-embedding-modal/index.tsx     |  41 +-
 .../documents/components/rename-modal.tsx     |  40 +-
 .../completed/common/regeneration-modal.tsx   |  24 +-
 .../__tests__/chunk-detail-modal.spec.tsx     |  28 +-
 .../components/chunk-detail-modal.tsx         | 165 ++++----
 .../components/result-item-external.tsx       |  33 +-
 .../datasets/metadata/base/date-picker.tsx    |   1 -
 .../metadata/edit-metadata-batch/modal.tsx    |  95 +++--
 .../__tests__/create-content.spec.tsx         | 198 ++++------
 .../dataset-metadata-drawer.spec.tsx          |  46 +--
 .../metadata-dataset/create-content.tsx       | 115 ++++--
 .../create-metadata-modal.tsx                 |   1 -
 .../dataset-metadata-drawer.tsx               | 207 ++++++----
 .../select-metadata-modal.tsx                 |  17 +-
 .../metadata/metadata-document/info-group.tsx |   4 +-
 .../datasets/rename-modal/index.tsx           |  60 +--
 .../__tests__/secret-key-modal.spec.tsx       |  32 +-
 .../secret-key/secret-key-generate.tsx        |  43 ++-
 .../develop/secret-key/secret-key-modal.tsx   | 162 ++++----
 .../explore/try-app/__tests__/index.spec.tsx  |  56 +++
 web/app/components/explore/try-app/index.tsx  |  97 ++---
 .../account-about/__tests__/index.spec.tsx    |   2 +-
 .../components/header/account-about/index.tsx | 155 ++++----
 .../api-based-extension-page/modal.tsx        |  76 ++--
 .../model-load-balancing-modal.spec.tsx       |   8 -
 .../model-load-balancing-modal.tsx            | 210 +++++-----
 .../header/nav/__tests__/index.spec.tsx       |  54 ---
 .../nav/nav-selector/__tests__/index.spec.tsx |  54 ---
 .../install-plugin/install-bundle/index.tsx   |  43 ++-
 .../install-from-github/index.tsx             | 138 +++----
 .../install-from-local-package/index.tsx      |  95 ++---
 .../steps/__tests__/uploading.spec.tsx        |  87 ++++-
 .../steps/uploading.tsx                       |  91 +++--
 .../install-from-marketplace/index.tsx        | 110 +++---
 .../__tests__/schema-modal.spec.tsx           |  13 +-
 .../plugins/plugin-mutation-model/index.tsx   |  79 ++--
 .../__tests__/plugin-info.spec.tsx            |  10 +-
 .../plugins/plugin-page/plugin-info.tsx       |  33 +-
 .../__tests__/index.spec.tsx                  |  35 +-
 .../auto-update-setting/index.tsx             |   1 -
 .../plugins/reference-setting-modal/index.tsx | 107 ++---
 .../components/__tests__/index.spec.tsx       |   6 +-
 ...blish-as-knowledge-pipeline-modal.spec.tsx |   9 +-
 .../__tests__/update-dsl-modal.spec.tsx       |  20 +-
 .../__tests__/version-mismatch-modal.spec.tsx |   4 +-
 .../publish-as-knowledge-pipeline-modal.tsx   | 132 ++++---
 .../components/update-dsl-modal.tsx           | 117 +++---
 .../components/version-mismatch-modal.tsx     |  63 +--
 .../__tests__/use-update-dsl-modal.spec.ts    |  56 ++-
 .../hooks/use-update-dsl-modal.ts             |  43 ++-
 .../share/text-generation/info-modal.tsx      |  65 ++--
 .../mcp/__tests__/mcp-server-modal.spec.tsx   |  67 +++-
 .../components/tools/mcp/mcp-server-modal.tsx | 147 ++++---
 web/app/components/tools/mcp/modal.tsx        |  26 +-
 .../__tests__/update-dsl-modal.spec.tsx       |  35 ++
 .../workflow/header/online-users.tsx          |   1 -
 .../http/components/authorization/index.tsx   | 126 +++---
 .../nodes/http/components/curl-panel.tsx      |  51 +--
 .../json-schema-config-modal/index.tsx        |  27 +-
 .../__tests__/integration.spec.tsx            |  15 +-
 .../components/extract-parameter/update.tsx   | 119 +++---
 .../__tests__/input-var-list.spec.tsx         |  27 +-
 .../components/workflow/operator/index.tsx    |   2 +-
 .../conversation-variable-modal.tsx           | 144 ++++---
 .../action-menu/index.tsx                     |   3 +-
 .../delete-confirm-modal.tsx                  |  57 ++-
 .../panel/version-history-panel/empty.tsx     |   2 +-
 .../version-history-panel/filter/index.tsx    |   1 +
 .../restore-confirm-modal.tsx                 |  57 ++-
 .../components/workflow/update-dsl-modal.tsx  | 164 ++++----
 .../education-apply/expire-notice-modal.tsx   | 117 +++---
 .../education-apply/verify-state-modal.tsx    |  62 +--
 web/eslint.constants.mjs                      |  10 +
 web/models/pipeline.ts                        |   1 +
 web/package.json                              |   1 -
 web/service/__tests__/use-pipeline.spec.tsx   |  81 ++++
 web/service/use-pipeline.ts                   |   4 +-
 web/vitest.setup.ts                           |  40 +-
 187 files changed, 5333 insertions(+), 6395 deletions(-)
 create mode 100644 web/app/components/app-sidebar/app-info/app-info-detail-drawer.tsx
 create mode 100644 web/app/components/app/create-app-dialog-shell.tsx
 delete mode 100644 web/app/components/base/content-dialog/__tests__/index.spec.tsx
 delete mode 100644 web/app/components/base/content-dialog/index.stories.tsx
 delete mode 100644 web/app/components/base/content-dialog/index.tsx
 delete mode 100644 web/app/components/base/dialog/__tests__/index.spec.tsx
 delete mode 100644 web/app/components/base/dialog/index.stories.tsx
 delete mode 100644 web/app/components/base/dialog/index.tsx
 rename web/app/components/base/features/new-feature-panel/__tests__/{dialog-wrapper.spec.tsx => feature-panel-drawer.spec.tsx} (51%)
 delete mode 100644 web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx
 create mode 100644 web/app/components/base/features/new-feature-panel/feature-panel-drawer.tsx
 delete mode 100644 web/app/components/base/fullscreen-modal/__tests__/index.spec.tsx
 delete mode 100644 web/app/components/base/fullscreen-modal/index.stories.tsx
 delete mode 100644 web/app/components/base/fullscreen-modal/index.tsx
 delete mode 100644 web/app/components/base/modal-like-wrap/__tests__/index.spec.tsx
 delete mode 100644 web/app/components/base/modal-like-wrap/index.stories.tsx
 delete mode 100644 web/app/components/base/modal-like-wrap/index.tsx
 delete mode 100644 web/app/components/base/modal/__tests__/index.spec.tsx
 delete mode 100644 web/app/components/base/modal/index.stories.tsx
 delete mode 100644 web/app/components/base/modal/index.tsx
 create mode 100644 web/service/__tests__/use-pipeline.spec.tsx

diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index 683e6b09fe..f7ff4f8d6d 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -159,21 +159,11 @@
       "count": 5
     }
   },
-  "web/app/account/(commonLayout)/delete-account/components/feed-back.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/account/(commonLayout)/delete-account/components/verify-email.tsx": {
     "react/set-state-in-effect": {
       "count": 1
     }
   },
-  "web/app/account/(commonLayout)/delete-account/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/account/oauth/authorize/layout.tsx": {
     "ts/no-explicit-any": {
       "count": 1
@@ -211,9 +201,6 @@
     "erasable-syntax-only/enums": {
       "count": 1
     },
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react-refresh/only-export-components": {
       "count": 1
     },
@@ -272,16 +259,16 @@
       "count": 1
     }
   },
+  "web/app/components/app/app-access-control/add-member-or-group-pop.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/app/app-publisher/features-wrapper.tsx": {
     "ts/no-explicit-any": {
       "count": 4
     }
   },
-  "web/app/components/app/app-publisher/version-info-modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/app/configuration/base/var-highlight/index.tsx": {
     "react-refresh/only-export-components": {
       "count": 1
@@ -293,9 +280,6 @@
     }
   },
   "web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -311,9 +295,6 @@
     }
   },
   "web/app/components/app/configuration/config-var/config-modal/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 4
     }
@@ -356,9 +337,6 @@
     }
   },
   "web/app/components/app/configuration/config/automatic/get-automatic-res.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react/set-state-in-effect": {
       "count": 4
     },
@@ -387,9 +365,6 @@
     }
   },
   "web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react/set-state-in-effect": {
       "count": 4
     },
@@ -418,9 +393,6 @@
     }
   },
   "web/app/components/app/configuration/dataset-config/params-config/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react/set-state-in-effect": {
       "count": 1
     }
@@ -494,26 +466,10 @@
       "count": 1
     }
   },
-  "web/app/components/app/create-app-modal/index.tsx": {
-    "react/set-state-in-effect": {
-      "count": 1
-    },
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
-  "web/app/components/app/create-from-dsl-modal/dsl-confirm-modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/app/create-from-dsl-modal/index.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
     },
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react-refresh/only-export-components": {
       "count": 1
     },
@@ -521,11 +477,6 @@
       "count": 2
     }
   },
-  "web/app/components/app/duplicate-modal/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/app/log/filter.tsx": {
     "react-refresh/only-export-components": {
       "count": 1
@@ -561,9 +512,6 @@
     }
   },
   "web/app/components/app/switch-app-modal/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react/set-state-in-effect": {
       "count": 1
     }
@@ -881,11 +829,6 @@
       "count": 3
     }
   },
-  "web/app/components/base/content-dialog/index.stories.tsx": {
-    "react/set-state-in-effect": {
-      "count": 1
-    }
-  },
   "web/app/components/base/date-and-time-picker/hooks.ts": {
     "react/no-unnecessary-use-prefix": {
       "count": 2
@@ -901,11 +844,6 @@
       "count": 1
     }
   },
-  "web/app/components/base/dialog/index.stories.tsx": {
-    "react/set-state-in-effect": {
-      "count": 1
-    }
-  },
   "web/app/components/base/drawer-plus/index.stories.tsx": {
     "react/component-hook-factories": {
       "count": 1
@@ -916,11 +854,6 @@
       "count": 1
     }
   },
-  "web/app/components/base/emoji-picker/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/base/error-boundary/index.tsx": {
     "react-refresh/only-export-components": {
       "count": 3
@@ -942,11 +875,6 @@
       "count": 1
     }
   },
-  "web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx": {
     "ts/no-explicit-any": {
       "count": 3
@@ -973,9 +901,6 @@
     }
   },
   "web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -1544,16 +1469,6 @@
       "count": 1
     }
   },
-  "web/app/components/base/modal-like-wrap/index.stories.tsx": {
-    "no-console": {
-      "count": 3
-    }
-  },
-  "web/app/components/base/modal/index.stories.tsx": {
-    "react/set-state-in-effect": {
-      "count": 1
-    }
-  },
   "web/app/components/base/new-audio-button/index.tsx": {
     "ts/no-explicit-any": {
       "count": 1
@@ -1600,6 +1515,11 @@
       "count": 4
     }
   },
+  "web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/base/prompt-editor/plugins/component-picker-block/menu.tsx": {
     "erasable-syntax-only/parameter-properties": {
       "count": 1
@@ -1685,8 +1605,8 @@
     }
   },
   "web/app/components/base/prompt-editor/plugins/shortcuts-popup-plugin/index.tsx": {
-    "ts/no-explicit-any": {
-      "count": 2
+    "no-restricted-imports": {
+      "count": 1
     }
   },
   "web/app/components/base/prompt-editor/plugins/update-block.tsx": {
@@ -1840,11 +1760,6 @@
       "count": 4
     }
   },
-  "web/app/components/billing/annotation-full/modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/billing/billing-page/__tests__/index.spec.tsx": {
     "ts/no-explicit-any": {
       "count": 4
@@ -1908,11 +1823,6 @@
       "count": 1
     }
   },
-  "web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/dsl-confirm-modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/hooks/use-dsl-import.ts": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -1921,9 +1831,6 @@
   "web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx": {
     "no-barrel-files/no-barrel-files": {
       "count": 1
-    },
-    "no-restricted-imports": {
-      "count": 1
     }
   },
   "web/app/components/datasets/create-from-pipeline/list/template-card/details/types.ts": {
@@ -1931,16 +1838,6 @@
       "count": 1
     }
   },
-  "web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/datasets/create/file-preview/index.tsx": {
     "react/set-state-in-effect": {
       "count": 1
@@ -1995,11 +1892,6 @@
       "count": 1
     }
   },
-  "web/app/components/datasets/create/stop-embedding-modal/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/datasets/create/website/firecrawl/index.tsx": {
     "no-console": {
       "count": 1
@@ -2058,11 +1950,6 @@
       "count": 4
     }
   },
-  "web/app/components/datasets/documents/components/rename-modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/__tests__/index.spec.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -2133,11 +2020,6 @@
       "count": 1
     }
   },
-  "web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/datasets/documents/detail/completed/components/segment-list-content.tsx": {
     "ts/no-non-null-asserted-optional-chain": {
       "count": 1
@@ -2212,21 +2094,21 @@
       "count": 1
     }
   },
+  "web/app/components/datasets/formatted-text/flavours/edit-slice.tsx": {
+    "no-restricted-imports": {
+      "count": 2
+    }
+  },
+  "web/app/components/datasets/formatted-text/flavours/preview-slice.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/datasets/formatted-text/flavours/type.ts": {
     "ts/no-empty-object-type": {
       "count": 1
     }
   },
-  "web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "web/app/components/datasets/hit-testing/components/result-item-external.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/datasets/hit-testing/components/score.tsx": {
     "unicorn/prefer-number-properties": {
       "count": 1
@@ -2245,11 +2127,6 @@
       "count": 2
     }
   },
-  "web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/datasets/metadata/hooks/use-edit-dataset-metadata.ts": {
     "react/set-state-in-effect": {
       "count": 1
@@ -2263,36 +2140,11 @@
       "count": 2
     }
   },
-  "web/app/components/datasets/metadata/metadata-dataset/create-content.tsx": {
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
-  "web/app/components/datasets/metadata/metadata-dataset/create-metadata-modal.tsx": {
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
-  "web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx": {
-    "no-restricted-imports": {
-      "count": 2
-    }
-  },
-  "web/app/components/datasets/metadata/metadata-dataset/select-metadata-modal.tsx": {
-    "erasable-syntax-only/enums": {
-      "count": 1
-    }
-  },
   "web/app/components/datasets/metadata/types.ts": {
     "erasable-syntax-only/enums": {
       "count": 2
     }
   },
-  "web/app/components/datasets/rename-modal/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/datasets/settings/chunk-structure/types.ts": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -2311,16 +2163,6 @@
       "count": 2
     }
   },
-  "web/app/components/develop/secret-key/secret-key-generate.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "web/app/components/develop/secret-key/secret-key-modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/explore/banner/banner-item.tsx": {
     "react-hooks-extra/no-direct-set-state-in-use-effect": {
       "count": 1
@@ -2342,11 +2184,6 @@
       "count": 1
     }
   },
-  "web/app/components/explore/try-app/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/explore/try-app/tab.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -2426,16 +2263,6 @@
       "count": 1
     }
   },
-  "web/app/components/header/account-about/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "web/app/components/header/account-setting/api-based-extension-page/modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/header/account-setting/data-source-page-new/card.tsx": {
     "ts/no-explicit-any": {
       "count": 2
@@ -2505,6 +2332,11 @@
       "count": 4
     }
   },
+  "web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/header/account-setting/model-provider-page/model-auth/hooks/index.ts": {
     "no-barrel-files/no-barrel-files": {
       "count": 6
@@ -2576,9 +2408,6 @@
     }
   },
   "web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react/set-state-in-effect": {
       "count": 1
     },
@@ -2620,9 +2449,6 @@
     "erasable-syntax-only/enums": {
       "count": 1
     },
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react-refresh/only-export-components": {
       "count": 1
     }
@@ -2638,9 +2464,6 @@
     }
   },
   "web/app/components/plugins/install-plugin/install-from-github/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
@@ -2650,21 +2473,6 @@
       "count": 1
     }
   },
-  "web/app/components/plugins/install-plugin/install-from-local-package/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx": {
-    "ts/no-explicit-any": {
-      "count": 2
-    }
-  },
-  "web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/plugins/marketplace/hooks.ts": {
     "@tanstack/query/exhaustive-deps": {
       "count": 1
@@ -2675,6 +2483,11 @@
       "count": 1
     }
   },
+  "web/app/components/plugins/plugin-auth/authorized/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/plugins/plugin-auth/authorized/item.tsx": {
     "ts/no-explicit-any": {
       "count": 1
@@ -2828,11 +2641,21 @@
       "count": 7
     }
   },
+  "web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-base-form.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/plugins/plugin-detail-panel/tool-selector/hooks/index.ts": {
     "no-barrel-files/no-barrel-files": {
       "count": 2
     }
   },
+  "web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/plugins/plugin-detail-panel/trigger/event-detail-drawer.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -2846,11 +2669,6 @@
       "count": 1
     }
   },
-  "web/app/components/plugins/plugin-mutation-model/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/plugins/plugin-page/context.ts": {
     "ts/no-explicit-any": {
       "count": 1
@@ -2866,21 +2684,11 @@
       "count": 2
     }
   },
-  "web/app/components/plugins/plugin-page/plugin-info.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/plugins/reference-setting-modal/auto-update-setting/types.ts": {
     "erasable-syntax-only/enums": {
       "count": 2
     }
   },
-  "web/app/components/plugins/reference-setting-modal/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/plugins/types.ts": {
     "erasable-syntax-only/enums": {
       "count": 7
@@ -2963,11 +2771,6 @@
       "count": 4
     }
   },
-  "web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/rag-pipeline/components/rag-pipeline-children.tsx": {
     "ts/no-explicit-any": {
       "count": 1
@@ -2983,16 +2786,6 @@
       "count": 2
     }
   },
-  "web/app/components/rag-pipeline/components/update-dsl-modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "web/app/components/rag-pipeline/components/version-mismatch-modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/rag-pipeline/hooks/index.ts": {
     "no-barrel-files/no-barrel-files": {
       "count": 9
@@ -3048,11 +2841,6 @@
       "count": 1
     }
   },
-  "web/app/components/share/text-generation/info-modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/share/text-generation/menu-dropdown.tsx": {
     "react/set-state-in-effect": {
       "count": 1
@@ -3130,24 +2918,11 @@
       "count": 1
     }
   },
-  "web/app/components/tools/mcp/mcp-server-modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
-    "ts/no-explicit-any": {
-      "count": 5
-    }
-  },
   "web/app/components/tools/mcp/mcp-server-param-item.tsx": {
     "ts/no-explicit-any": {
       "count": 1
     }
   },
-  "web/app/components/tools/mcp/modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/tools/mcp/provider-card.tsx": {
     "ts/no-explicit-any": {
       "count": 3
@@ -3265,6 +3040,11 @@
       "count": 1
     }
   },
+  "web/app/components/workflow/block-selector/main.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/workflow/block-selector/market-place-plugin/action.tsx": {
     "react/set-state-in-effect": {
       "count": 1
@@ -3280,6 +3060,11 @@
       "count": 1
     }
   },
+  "web/app/components/workflow/block-selector/tool-picker.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx": {
     "ts/no-explicit-any": {
       "count": 1
@@ -3843,16 +3628,6 @@
       "count": 1
     }
   },
-  "web/app/components/workflow/nodes/http/components/authorization/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "web/app/components/workflow/nodes/http/components/curl-panel.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx": {
     "ts/no-explicit-any": {
       "count": 2
@@ -4034,11 +3809,6 @@
       "count": 1
     }
   },
-  "web/app/components/workflow/nodes/llm/components/json-schema-config-modal/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx": {
     "ts/no-explicit-any": {
       "count": 3
@@ -4159,9 +3929,6 @@
     }
   },
   "web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -4395,6 +4162,9 @@
     }
   },
   "web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
     "react/set-state-in-effect": {
       "count": 1
     }
@@ -4405,6 +4175,9 @@
     }
   },
   "web/app/components/workflow/operator/add-block.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -4466,9 +4239,6 @@
     }
   },
   "web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -4496,16 +4266,6 @@
       "count": 4
     }
   },
-  "web/app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "web/app/components/workflow/panel/version-history-panel/restore-confirm-modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/panel/workflow-preview.tsx": {
     "ts/no-explicit-any": {
       "count": 2
@@ -4641,9 +4401,6 @@
     }
   },
   "web/app/components/workflow/update-dsl-modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -4757,11 +4514,6 @@
       "count": 1
     }
   },
-  "web/app/education-apply/expire-notice-modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/education-apply/hooks.ts": {
     "react/set-state-in-effect": {
       "count": 5
diff --git a/packages/dify-ui/src/dialog/index.tsx b/packages/dify-ui/src/dialog/index.tsx
index 24c5bcc463..dbb2448ff6 100644
--- a/packages/dify-ui/src/dialog/index.tsx
+++ b/packages/dify-ui/src/dialog/index.tsx
@@ -63,7 +63,7 @@ export function DialogContent({
       />
       <BaseDialog.Popup
         className={cn(
-          'fixed top-1/2 left-1/2 z-1002 max-h-[80dvh] w-[480px] max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 overflow-y-auto overscroll-contain rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-6 shadow-xl',
+          'fixed top-1/2 left-1/2 z-1002 max-h-[80dvh] w-120 max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 overflow-y-auto overscroll-contain rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-6 shadow-xl',
           'transition-[transform,scale,opacity] duration-150 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none',
           className,
         )}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 88e9eab4a0..64e49c6777 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -42,9 +42,6 @@ catalogs:
     '@formatjs/intl-localematcher':
       specifier: 0.8.6
       version: 0.8.6
-    '@headlessui/react':
-      specifier: 2.2.10
-      version: 2.2.10
     '@heroicons/react':
       specifier: 2.2.0
       version: 2.2.0
@@ -901,9 +898,6 @@ importers:
       '@formatjs/intl-localematcher':
         specifier: 'catalog:'
         version: 0.8.6
-      '@headlessui/react':
-        specifier: 'catalog:'
-        version: 2.2.10(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@heroicons/react':
         specifier: 'catalog:'
         version: 2.2.0(react@19.2.6)
@@ -2108,12 +2102,6 @@ packages:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
 
-  '@floating-ui/react@0.26.28':
-    resolution: {integrity: sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==}
-    peerDependencies:
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
-
   '@floating-ui/react@0.27.19':
     resolution: {integrity: sha512-31B8h5mm8YxotlE7/AU/PhNAl8eWxAmjL/v2QOxroDNkTFLk3Uu82u63N3b6TXa4EGJeeZLVcd/9AlNlVqzeog==}
     peerDependencies:
@@ -2129,13 +2117,6 @@ packages:
   '@formatjs/intl-localematcher@0.8.6':
     resolution: {integrity: sha512-AZRgUxj0q93lyF7Z5lFS85bLINXuBLX4R3tCKicO6fSWo6cvh9GQfoR3B1WlsqQwefZ1QORTivhInx7gM6HUzQ==}
 
-  '@headlessui/react@2.2.10':
-    resolution: {integrity: sha512-5pVLNK9wlpxTUTy9GpgbX/SdcRh+HBnPktjM2wbiLTH4p+2EPHBO1aoSryUCuKUIItdDWO9ITlhUL8UnUN/oIA==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      react: ^18 || ^19 || ^19.0.0-rc
-      react-dom: ^18 || ^19 || ^19.0.0-rc
-
   '@heroicons/react@2.2.0':
     resolution: {integrity: sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==}
     peerDependencies:
@@ -3373,43 +3354,6 @@ packages:
       '@types/react':
         optional: true
 
-  '@react-aria/focus@3.21.5':
-    resolution: {integrity: sha512-V18fwCyf8zqgJdpLQeDU5ZRNd9TeOfBbhLgmX77Zr5ae9XwaoJ1R3SFJG1wCJX60t34AW+aLZSEEK+saQElf3Q==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
-      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
-
-  '@react-aria/interactions@3.27.1':
-    resolution: {integrity: sha512-M3wLpTTmDflI0QGNK0PJNUaBXXfeBXue8ZxLMngfc1piHNiH4G5lUvWd9W14XVbqrSCVY8i8DfGrNYpyyZu0tw==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
-      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
-
-  '@react-aria/ssr@3.9.10':
-    resolution: {integrity: sha512-hvTm77Pf+pMBhuBm760Li0BVIO38jv1IBws1xFm1NoL26PU+fe+FMW5+VZWyANR6nYL65joaJKZqOdTQMkO9IQ==}
-    engines: {node: '>= 12'}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
-
-  '@react-aria/utils@3.33.1':
-    resolution: {integrity: sha512-kIx1Sj6bbAT0pdqCegHuPanR9zrLn5zMRiM7LN12rgRf55S19ptd9g3ncahArifYTRkfEU9VIn+q0HjfMqS9/w==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
-      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
-
-  '@react-stately/flags@3.1.2':
-    resolution: {integrity: sha512-2HjFcZx1MyQXoPqcBGALwWWmgFVUk2TuKVIQxCbRq7fPyWXIl6VHcakCLurdtYC2Iks7zizvz0Idv48MQ38DWg==}
-
-  '@react-stately/utils@3.11.0':
-    resolution: {integrity: sha512-8LZpYowJ9eZmmYLpudbo/eclIRnbhWIJZ994ncmlKlouNzKohtM8qTC6B1w1pwUbiwGdUoyzLuQbeaIor5Dvcw==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
-
-  '@react-types/shared@3.33.1':
-    resolution: {integrity: sha512-oJHtjvLG43VjwemQDadlR5g/8VepK56B/xKO2XORPHt9zlW6IZs3tZrYlvH29BMvoqC7RtE7E5UjgbnbFtDGag==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
-
   '@reactflow/background@11.3.14':
     resolution: {integrity: sha512-Gewd7blEVT5Lh6jqrvOgd4G6Qk17eGKQfsDXgyRSqM+CTwDqRldG2LsWN4sNeno6sbqVIC2fZ+rAUBFA9ZEUDA==}
     peerDependencies:
@@ -3705,9 +3649,6 @@ packages:
   '@swc/helpers@0.5.15':
     resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
 
-  '@swc/helpers@0.5.20':
-    resolution: {integrity: sha512-2egEBHUMasdypIzrprsu8g+OEVd7Vp2MM3a2eVlM/cyFYto0nGz5BX5BTgh/ShZZI9ed+ozEq+Ngt+rgmUs8tw==}
-
   '@t3-oss/env-core@0.13.11':
     resolution: {integrity: sha512-sM7GYY+KL7H/Hl0BE0inWfk3nRHZOLhmVn7sHGxaZt9FAR6KqREXAE+6TqKfiavfXmpRxO/OZ2QgKRd+oiBYRQ==}
     peerDependencies:
@@ -9410,14 +9351,6 @@ snapshots:
       react: 19.2.6
       react-dom: 19.2.6(react@19.2.6)
 
-  '@floating-ui/react@0.26.28(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
-    dependencies:
-      '@floating-ui/react-dom': 2.1.8(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@floating-ui/utils': 0.2.11
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
-      tabbable: 6.4.0
-
   '@floating-ui/react@0.27.19(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@floating-ui/react-dom': 2.1.8(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -9434,16 +9367,6 @@ snapshots:
     dependencies:
       '@formatjs/fast-memoize': 3.1.4
 
-  '@headlessui/react@2.2.10(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
-    dependencies:
-      '@floating-ui/react': 0.26.28(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@react-aria/focus': 3.21.5(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@react-aria/interactions': 3.27.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@tanstack/react-virtual': 3.13.24(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
-      use-sync-external-store: 1.6.0(react@19.2.6)
-
   '@heroicons/react@2.2.0(react@19.2.6)':
     dependencies:
       react: 19.2.6
@@ -10469,55 +10392,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.14
 
-  '@react-aria/focus@3.21.5(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
-    dependencies:
-      '@react-aria/interactions': 3.27.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@react-aria/utils': 3.33.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@react-types/shared': 3.33.1(react@19.2.6)
-      '@swc/helpers': 0.5.20
-      clsx: 2.1.1
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
-
-  '@react-aria/interactions@3.27.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
-    dependencies:
-      '@react-aria/ssr': 3.9.10(react@19.2.6)
-      '@react-aria/utils': 3.33.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@react-stately/flags': 3.1.2
-      '@react-types/shared': 3.33.1(react@19.2.6)
-      '@swc/helpers': 0.5.20
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
-
-  '@react-aria/ssr@3.9.10(react@19.2.6)':
-    dependencies:
-      '@swc/helpers': 0.5.20
-      react: 19.2.6
-
-  '@react-aria/utils@3.33.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
-    dependencies:
-      '@react-aria/ssr': 3.9.10(react@19.2.6)
-      '@react-stately/flags': 3.1.2
-      '@react-stately/utils': 3.11.0(react@19.2.6)
-      '@react-types/shared': 3.33.1(react@19.2.6)
-      '@swc/helpers': 0.5.20
-      clsx: 2.1.1
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
-
-  '@react-stately/flags@3.1.2':
-    dependencies:
-      '@swc/helpers': 0.5.20
-
-  '@react-stately/utils@3.11.0(react@19.2.6)':
-    dependencies:
-      '@swc/helpers': 0.5.20
-      react: 19.2.6
-
-  '@react-types/shared@3.33.1(react@19.2.6)':
-    dependencies:
-      react: 19.2.6
-
   '@reactflow/background@11.3.14(@types/react@19.2.14)(immer@11.1.7)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@reactflow/core': 11.11.4(@types/react@19.2.14)(immer@11.1.7)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -10888,10 +10762,6 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@swc/helpers@0.5.20':
-    dependencies:
-      tslib: 2.8.1
-
   '@t3-oss/env-core@0.13.11(typescript@6.0.3)(valibot@1.3.1(typescript@6.0.3))(zod@4.4.3)':
     optionalDependencies:
       typescript: 6.0.3
@@ -16514,7 +16384,6 @@ time:
   '@eslint/js@10.0.1': '2026-02-06T22:34:56.290Z'
   '@floating-ui/react@0.27.19': '2026-03-03T03:02:09.664Z'
   '@formatjs/intl-localematcher@0.8.6': '2026-05-05T17:39:39.364Z'
-  '@headlessui/react@2.2.10': '2026-04-07T17:12:43.551Z'
   '@heroicons/react@2.2.0': '2024-11-18T15:33:27.317Z'
   '@hey-api/openapi-ts@0.97.1': '2026-05-04T00:37:14.271Z'
   '@hono/node-server@2.0.1': '2026-04-30T08:51:26.973Z'
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 2a8be97969..1373efd21e 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -66,7 +66,6 @@ catalog:
   '@eslint/js': 10.0.1
   '@floating-ui/react': 0.27.19
   '@formatjs/intl-localematcher': 0.8.6
-  '@headlessui/react': 2.2.10
   '@heroicons/react': 2.2.0
   '@hey-api/openapi-ts': 0.97.1
   '@hono/node-server': 2.0.1
diff --git a/web/__tests__/apps/app-card-operations-flow.test.tsx b/web/__tests__/apps/app-card-operations-flow.test.tsx
index ef3bee5167..8162f12dad 100644
--- a/web/__tests__/apps/app-card-operations-flow.test.tsx
+++ b/web/__tests__/apps/app-card-operations-flow.test.tsx
@@ -63,28 +63,6 @@ vi.mock('@tanstack/react-query', async (importOriginal) => {
   }
 })
 
-// Mock headless UI Popover so it renders content without transition
-vi.mock('@headlessui/react', async () => {
-  const actual = await vi.importActual<typeof import('@headlessui/react')>('@headlessui/react')
-  return {
-    ...actual,
-    Popover: ({ children, className }: { children: ((bag: { open: boolean }) => React.ReactNode) | React.ReactNode, className?: string }) => (
-      <div className={className} data-testid="popover-wrapper">
-        {typeof children === 'function' ? children({ open: true }) : children}
-      </div>
-    ),
-    PopoverButton: ({ children, className, ref: _ref, ...rest }: Record<string, unknown>) => (
-      <button className={className as string} {...rest}>{children as React.ReactNode}</button>
-    ),
-    PopoverPanel: ({ children, className }: { children: ((bag: { close: () => void }) => React.ReactNode) | React.ReactNode, className?: string }) => (
-      <div className={className}>
-        {typeof children === 'function' ? children({ close: vi.fn() }) : children}
-      </div>
-    ),
-    Transition: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-  }
-})
-
 vi.mock('@/next/dynamic', () => ({
   default: (loader: () => Promise<{ default: React.ComponentType }>) => {
     let Component: React.ComponentType<Record<string, unknown>> | null = null
diff --git a/web/__tests__/develop/api-key-management-flow.test.tsx b/web/__tests__/develop/api-key-management-flow.test.tsx
index 188b8e6304..233e152f8f 100644
--- a/web/__tests__/develop/api-key-management-flow.test.tsx
+++ b/web/__tests__/develop/api-key-management-flow.test.tsx
@@ -13,7 +13,7 @@ import userEvent from '@testing-library/user-event'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import ApiServer from '@/app/components/develop/ApiServer'
 
-// ---------- fake timers (HeadlessUI Dialog transitions) ----------
+// ---------- fake timers (modal transitions) ----------
 beforeEach(() => {
   vi.useFakeTimers({ shouldAdvanceTime: true })
 })
@@ -100,7 +100,7 @@ describe('API Key management flow', () => {
     })
     await flushUI()
 
-    // SecretKeyModal should render with real HeadlessUI Dialog
+    // SecretKeyModal should render with real modal content
     await waitFor(() => {
       expect(screen.getByText('appApi.apiKeyModal.apiSecretKey')).toBeInTheDocument()
       expect(screen.getByText('appApi.apiKeyModal.apiSecretKeyTips')).toBeInTheDocument()
diff --git a/web/__tests__/header/account-dropdown-flow.test.tsx b/web/__tests__/header/account-dropdown-flow.test.tsx
index b4a3befea0..eb128924c0 100644
--- a/web/__tests__/header/account-dropdown-flow.test.tsx
+++ b/web/__tests__/header/account-dropdown-flow.test.tsx
@@ -131,6 +131,7 @@ describe('Header Account Dropdown Flow', () => {
       payload: ACCOUNT_SETTING_TAB.MEMBERS,
     })
 
+    fireEvent.click(screen.getByRole('button', { name: 'common.account.account' }))
     fireEvent.click(screen.getByText('common.userProfile.about'))
 
     await waitFor(() => {
diff --git a/web/__tests__/header/nav-flow.test.tsx b/web/__tests__/header/nav-flow.test.tsx
index 58c95f0a01..dba7b4bf4a 100644
--- a/web/__tests__/header/nav-flow.test.tsx
+++ b/web/__tests__/header/nav-flow.test.tsx
@@ -13,83 +13,6 @@ const mockOnLoadMore = vi.fn()
 let mockSelectedSegment = 'app'
 let mockIsCurrentWorkspaceEditor = true
 
-vi.mock('@headlessui/react', () => {
-  type MenuContextValue = {
-    open: boolean
-    setOpen: React.Dispatch<React.SetStateAction<boolean>>
-  }
-  const MenuContext = React.createContext<MenuContextValue | null>(null)
-
-  const Menu = ({
-    children,
-  }: {
-    children: React.ReactNode | ((props: { open: boolean }) => React.ReactNode)
-  }) => {
-    const [open, setOpen] = React.useState(false)
-    const value = React.useMemo(() => ({ open, setOpen }), [open])
-
-    return (
-      <MenuContext.Provider value={value}>
-        {typeof children === 'function' ? children({ open }) : children}
-      </MenuContext.Provider>
-    )
-  }
-
-  const MenuButton = ({
-    children,
-    onClick,
-    ...props
-  }: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
-    const context = React.useContext(MenuContext)
-
-    return (
-      <button
-        type="button"
-        aria-expanded={context?.open ?? false}
-        onClick={(event) => {
-          context?.setOpen(v => !v)
-          onClick?.(event)
-        }}
-        {...props}
-      >
-        {children}
-      </button>
-    )
-  }
-
-  const MenuItems = ({
-    as: Component = 'div',
-    children,
-    ...props
-  }: {
-    as?: React.ElementType
-    children: React.ReactNode
-  } & Record<string, unknown>) => {
-    const context = React.useContext(MenuContext)
-    if (!context?.open)
-      return null
-
-    return <Component {...props}>{children}</Component>
-  }
-
-  const MenuItem = ({
-    as: Component = 'div',
-    children,
-    ...props
-  }: {
-    as?: React.ElementType
-    children: React.ReactNode
-  } & Record<string, unknown>) => <Component {...props}>{children}</Component>
-
-  return {
-    Menu,
-    MenuButton,
-    MenuItems,
-    MenuItem,
-    Transition: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-  }
-})
-
 vi.mock('react-i18next', () => ({
   useTranslation: () => ({
     t: (key: string) => key,
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
index 46d7f7833e..1e001a5ca4 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
@@ -19,6 +19,8 @@ import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useShallow } from 'zustand/react/shallow'
 import AppSideBar from '@/app/components/app-sidebar'
+import { AppInfoDetailLayer } from '@/app/components/app-sidebar/app-info'
+import { useAppInfoActions } from '@/app/components/app-sidebar/app-info/use-app-info-actions'
 import { useStore } from '@/app/components/app/store'
 import Loading from '@/app/components/base/loading'
 import { useAppContext } from '@/context/app-context'
@@ -45,6 +47,7 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
   const { isCurrentWorkspaceEditor, isLoadingCurrentWorkspace, currentWorkspace } = useAppContext()
+  const appInfoActions = useAppInfoActions({ resetKey: appId })
   const { appDetail, setAppDetail, setAppSidebarExpand } = useStore(useShallow(state => ({
     appDetail: state.appDetail,
     setAppDetail: state.setAppDetail,
@@ -162,11 +165,13 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
       {appDetail && (
         <AppSideBar
           navigation={navigation}
+          appInfoActions={appInfoActions}
         />
       )}
       <div className="grow overflow-hidden bg-components-panel-bg">
         {children}
       </div>
+      <AppInfoDetailLayer actions={appInfoActions} />
     </div>
   )
 }
diff --git a/web/app/account/(commonLayout)/delete-account/components/feed-back.tsx b/web/app/account/(commonLayout)/delete-account/components/feed-back.tsx
index ee1e72e6e7..5b68290dd0 100644
--- a/web/app/account/(commonLayout)/delete-account/components/feed-back.tsx
+++ b/web/app/account/(commonLayout)/delete-account/components/feed-back.tsx
@@ -1,9 +1,9 @@
 'use client'
 import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
 import { toast } from '@langgenius/dify-ui/toast'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import CustomDialog from '@/app/components/base/dialog'
 import Textarea from '@/app/components/base/textarea'
 import { useAppContext } from '@/context/app-context'
 import { useRouter } from '@/next/navigation'
@@ -47,26 +47,34 @@ export default function FeedBack(props: DeleteAccountProps) {
     handleSuccess()
   }, [handleSuccess, props])
   return (
-    <CustomDialog
-      show={true}
-      onClose={props.onCancel}
-      title={t('account.feedbackTitle', { ns: 'common' })}
-      className="max-w-[480px]"
-      footer={false}
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open)
+          props.onCancel()
+      }}
     >
-      <label className="mt-3 mb-1 flex items-center system-sm-semibold text-text-secondary">{t('account.feedbackLabel', { ns: 'common' })}</label>
-      <Textarea
-        rows={6}
-        value={userFeedback}
-        placeholder={t('account.feedbackPlaceholder', { ns: 'common' }) as string}
-        onChange={(e) => {
-          setUserFeedback(e.target.value)
-        }}
-      />
-      <div className="mt-3 flex w-full flex-col gap-2">
-        <Button className="w-full" loading={isPending} variant="primary" onClick={handleSubmit}>{t('operation.submit', { ns: 'common' })}</Button>
-        <Button className="w-full" onClick={handleSkip}>{t('operation.skip', { ns: 'common' })}</Button>
-      </div>
-    </CustomDialog>
+      <DialogContent
+        className="max-w-[480px] overflow-hidden!"
+        backdropClassName="bg-background-overlay-backdrop backdrop-blur-[6px]"
+      >
+        <DialogTitle className="pr-8 pb-3 title-2xl-semi-bold text-text-primary">
+          {t('account.feedbackTitle', { ns: 'common' })}
+        </DialogTitle>
+        <label className="mt-3 mb-1 flex items-center system-sm-semibold text-text-secondary">{t('account.feedbackLabel', { ns: 'common' })}</label>
+        <Textarea
+          rows={6}
+          value={userFeedback}
+          placeholder={t('account.feedbackPlaceholder', { ns: 'common' }) as string}
+          onChange={(e) => {
+            setUserFeedback(e.target.value)
+          }}
+        />
+        <div className="mt-3 flex w-full flex-col gap-2">
+          <Button className="w-full" loading={isPending} variant="primary" onClick={handleSubmit}>{t('operation.submit', { ns: 'common' })}</Button>
+          <Button className="w-full" onClick={handleSkip}>{t('operation.skip', { ns: 'common' })}</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
   )
 }
diff --git a/web/app/account/(commonLayout)/delete-account/index.tsx b/web/app/account/(commonLayout)/delete-account/index.tsx
index 416f680a60..e4af24e8bf 100644
--- a/web/app/account/(commonLayout)/delete-account/index.tsx
+++ b/web/app/account/(commonLayout)/delete-account/index.tsx
@@ -1,7 +1,7 @@
 'use client'
+import { Dialog, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import CustomDialog from '@/app/components/base/dialog'
 import { COUNT_DOWN_KEY, COUNT_DOWN_TIME_MS } from '@/app/components/signin/countdown'
 import CheckEmail from './components/check-email'
 import FeedBack from './components/feed-back'
@@ -30,22 +30,30 @@ export default function DeleteAccount(props: DeleteAccountProps) {
     return <FeedBack onCancel={props.onCancel} onConfirm={props.onConfirm} />
 
   return (
-    <CustomDialog
-      show={true}
-      onClose={props.onCancel}
-      title={t('account.delete', { ns: 'common' })}
-      className="max-w-[480px]"
-      footer={false}
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open)
+          props.onCancel()
+      }}
     >
-      {!showVerifyEmail && <CheckEmail onCancel={props.onCancel} onConfirm={handleEmailCheckSuccess} />}
-      {showVerifyEmail && (
-        <VerifyEmail
-          onCancel={props.onCancel}
-          onConfirm={() => {
-            setShowFeedbackDialog(true)
-          }}
-        />
-      )}
-    </CustomDialog>
+      <DialogContent
+        className="max-w-[480px] overflow-hidden!"
+        backdropClassName="bg-background-overlay-backdrop backdrop-blur-[6px]"
+      >
+        <DialogTitle className="pr-8 pb-3 title-2xl-semi-bold text-text-primary">
+          {t('account.delete', { ns: 'common' })}
+        </DialogTitle>
+        {!showVerifyEmail && <CheckEmail onCancel={props.onCancel} onConfirm={handleEmailCheckSuccess} />}
+        {showVerifyEmail && (
+          <VerifyEmail
+            onCancel={props.onCancel}
+            onConfirm={() => {
+              setShowFeedbackDialog(true)
+            }}
+          />
+        )}
+      </DialogContent>
+    </Dialog>
   )
 }
diff --git a/web/app/components/app-sidebar/__tests__/index.spec.tsx b/web/app/components/app-sidebar/__tests__/index.spec.tsx
index b2e1e92bbb..5c00ced6cc 100644
--- a/web/app/components/app-sidebar/__tests__/index.spec.tsx
+++ b/web/app/components/app-sidebar/__tests__/index.spec.tsx
@@ -60,6 +60,9 @@ vi.mock('../app-info', () => ({
   default: ({ expand }: { expand: boolean }) => (
     <div data-testid="app-info" data-expand={expand} />
   ),
+  AppInfoView: ({ expand }: { expand: boolean }) => (
+    <div data-testid="app-info" data-expand={expand} />
+  ),
 }))
 
 vi.mock('../app-sidebar-dropdown', () => ({
diff --git a/web/app/components/app-sidebar/app-info/__tests__/app-info-detail-panel.spec.tsx b/web/app/components/app-sidebar/app-info/__tests__/app-info-detail-panel.spec.tsx
index 9af90359f0..8017201e6e 100644
--- a/web/app/components/app-sidebar/app-info/__tests__/app-info-detail-panel.spec.tsx
+++ b/web/app/components/app-sidebar/app-info/__tests__/app-info-detail-panel.spec.tsx
@@ -11,17 +11,16 @@ vi.mock('../../../base/app-icon', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/content-dialog', () => ({
-  default: ({ show, onClose, children, className }: {
-    show: boolean
+vi.mock('../app-info-detail-drawer', () => ({
+  AppInfoDetailDrawer: ({ open, onClose, children }: {
+    open: boolean
     onClose: () => void
     children: React.ReactNode
-    className?: string
   }) => (
-    show
+    open
       ? (
-          <div data-testid="content-dialog" className={className}>
-            <button type="button" data-testid="dialog-close" onClick={onClose}>Close</button>
+          <div data-testid="app-info-detail-drawer">
+            <button type="button" data-testid="drawer-close" onClick={onClose}>Close</button>
             {children}
           </div>
         )
@@ -96,12 +95,12 @@ describe('AppInfoDetailPanel', () => {
   describe('Rendering', () => {
     it('should not render when show is false', () => {
       render(<AppInfoDetailPanel {...defaultProps} show={false} />)
-      expect(screen.queryByTestId('content-dialog')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('app-info-detail-drawer')).not.toBeInTheDocument()
     })
 
-    it('should render dialog when show is true', () => {
+    it('should render drawer when show is true', () => {
       render(<AppInfoDetailPanel {...defaultProps} />)
-      expect(screen.getByTestId('content-dialog')).toBeInTheDocument()
+      expect(screen.getByTestId('app-info-detail-drawer')).toBeInTheDocument()
     })
 
     it('should display app name', () => {
@@ -285,12 +284,12 @@ describe('AppInfoDetailPanel', () => {
     })
   })
 
-  describe('Dialog interactions', () => {
-    it('should call onClose when dialog close button is clicked', async () => {
+  describe('Drawer interactions', () => {
+    it('should call onClose when drawer close button is clicked', async () => {
       const user = userEvent.setup()
       render(<AppInfoDetailPanel {...defaultProps} />)
 
-      await user.click(screen.getByTestId('dialog-close'))
+      await user.click(screen.getByTestId('drawer-close'))
 
       expect(defaultProps.onClose).toHaveBeenCalledTimes(1)
     })
diff --git a/web/app/components/app-sidebar/app-info/__tests__/use-app-info-actions.spec.ts b/web/app/components/app-sidebar/app-info/__tests__/use-app-info-actions.spec.ts
index 23e5e51949..fe5fa03f67 100644
--- a/web/app/components/app-sidebar/app-info/__tests__/use-app-info-actions.spec.ts
+++ b/web/app/components/app-sidebar/app-info/__tests__/use-app-info-actions.spec.ts
@@ -153,6 +153,27 @@ describe('useAppInfoActions', () => {
       expect(result.current.panelOpen).toBe(false)
       expect(onDetailExpand).toHaveBeenCalledWith(false)
     })
+
+    it('should reset app-scoped state when resetKey changes', () => {
+      const { result, rerender } = renderHook(
+        ({ resetKey }) => useAppInfoActions({ resetKey }),
+        { initialProps: { resetKey: 'app-1' } },
+      )
+
+      act(() => {
+        result.current.openModal('delete')
+        result.current.setPanelOpen(true)
+      })
+
+      expect(result.current.panelOpen).toBe(true)
+      expect(result.current.activeModal).toBe('delete')
+
+      rerender({ resetKey: 'app-2' })
+
+      expect(result.current.panelOpen).toBe(false)
+      expect(result.current.activeModal).toBeNull()
+      expect(result.current.secretEnvList).toEqual([])
+    })
   })
 
   describe('Modal management', () => {
diff --git a/web/app/components/app-sidebar/app-info/app-info-detail-drawer.tsx b/web/app/components/app-sidebar/app-info/app-info-detail-drawer.tsx
new file mode 100644
index 0000000000..e9217df03c
--- /dev/null
+++ b/web/app/components/app-sidebar/app-info/app-info-detail-drawer.tsx
@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react'
+
+type AppInfoDetailDrawerProps = {
+  open: boolean
+  onClose: () => void
+  children: ReactNode
+}
+
+export function AppInfoDetailDrawer({
+  open,
+  onClose,
+  children,
+}: AppInfoDetailDrawerProps) {
+  if (!open)
+    return null
+
+  return (
+    <div className="absolute inset-0 z-50">
+      <button
+        type="button"
+        aria-label="Close app info"
+        className="absolute inset-0 cursor-default bg-app-detail-overlay-bg"
+        onClick={onClose}
+      />
+      <section
+        role="dialog"
+        aria-modal="false"
+        className="absolute top-2 bottom-2 left-2 flex w-[452px] max-w-[calc(100vw-1rem)] flex-col overflow-hidden rounded-2xl border-r border-divider-burn bg-app-detail-bg"
+      >
+        {children}
+      </section>
+    </div>
+  )
+}
diff --git a/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx b/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx
index 3dabb2a91e..13a55f8984 100644
--- a/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx
+++ b/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx
@@ -14,9 +14,9 @@ import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import CardView from '@/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view'
-import ContentDialog from '@/app/components/base/content-dialog'
 import { AppModeEnum } from '@/types/app'
 import AppIcon from '../../base/app-icon'
+import { AppInfoDetailDrawer } from './app-info-detail-drawer'
 import { getAppModeLabel } from './app-mode-labels'
 import AppOperations from './app-operations'
 
@@ -94,10 +94,9 @@ const AppInfoDetailPanel = ({
   }, [appDetail.mode, t, openModal])
 
   return (
-    <ContentDialog
-      show={show}
+    <AppInfoDetailDrawer
+      open={show}
       onClose={onClose}
-      className="absolute top-2 bottom-2 left-2 flex w-[452px] max-w-[calc(100vw-1rem)] flex-col rounded-2xl p-0!"
     >
       <div className="flex shrink-0 flex-col items-start justify-center gap-3 self-stretch p-4">
         <div className="flex items-center gap-3 self-stretch">
@@ -109,16 +108,16 @@ const AppInfoDetailPanel = ({
             imageUrl={appDetail.icon_url}
           />
           <div className="flex flex-1 flex-col items-start justify-center overflow-hidden">
-            <div className="w-full truncate system-md-semibold text-text-secondary">{appDetail.name}</div>
+            <h2 className="w-full truncate system-md-semibold text-text-secondary">{appDetail.name}</h2>
             <div className="system-2xs-medium-uppercase text-text-tertiary">
               {getAppModeLabel(appDetail.mode, t)}
             </div>
           </div>
         </div>
         {appDetail.description && (
-          <div className="overflow-wrap-anywhere max-h-[105px] w-full max-w-full overflow-y-auto system-xs-regular wrap-break-word whitespace-normal text-text-tertiary">
+          <p className="overflow-wrap-anywhere max-h-[105px] w-full max-w-full overflow-y-auto system-xs-regular wrap-break-word whitespace-normal text-text-tertiary">
             {appDetail.description}
-          </div>
+          </p>
         )}
         <AppOperations
           gap={4}
@@ -144,7 +143,7 @@ const AppInfoDetailPanel = ({
           </Button>
         </div>
       )}
-    </ContentDialog>
+    </AppInfoDetailDrawer>
   )
 }
 
diff --git a/web/app/components/app-sidebar/app-info/index.tsx b/web/app/components/app-sidebar/app-info/index.tsx
index a0628ec786..14a2defc1e 100644
--- a/web/app/components/app-sidebar/app-info/index.tsx
+++ b/web/app/components/app-sidebar/app-info/index.tsx
@@ -1,3 +1,4 @@
+import type { AppInfoActions } from './use-app-info-actions'
 import * as React from 'react'
 import { useAppContext } from '@/context/app-context'
 import AppInfoDetailPanel from './app-info-detail-panel'
@@ -12,13 +13,22 @@ type IAppInfoProps = {
   onDetailExpand?: (expand: boolean) => void
 }
 
-const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailExpand }: IAppInfoProps) => {
-  const { isCurrentWorkspaceEditor } = useAppContext()
+type AppInfoViewProps = Omit<IAppInfoProps, 'onDetailExpand'> & {
+  actions: AppInfoActions
+  renderDetail?: boolean
+}
 
+type AppInfoDetailLayerProps = {
+  actions: AppInfoActions
+  open?: boolean
+}
+
+export const AppInfoDetailLayer = ({
+  actions,
+  open = actions.panelOpen,
+}: AppInfoDetailLayerProps) => {
   const {
     appDetail,
-    panelOpen,
-    setPanelOpen,
     closePanel,
     activeModal,
     openModal,
@@ -31,26 +41,16 @@ const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailEx
     exportCheck,
     handleConfirmExport,
     onConfirmDelete,
-  } = useAppInfoActions({ onDetailExpand })
+  } = actions
 
   if (!appDetail)
     return null
 
   return (
-    <div>
-      {!onlyShowDetail && (
-        <AppInfoTrigger
-          appDetail={appDetail}
-          expand={expand}
-          onClick={() => {
-            if (isCurrentWorkspaceEditor)
-              setPanelOpen(v => !v)
-          }}
-        />
-      )}
+    <>
       <AppInfoDetailPanel
         appDetail={appDetail}
-        show={onlyShowDetail ? openState : panelOpen}
+        show={open}
         onClose={closePanel}
         openModal={openModal}
         exportCheck={exportCheck}
@@ -68,8 +68,58 @@ const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailEx
         handleConfirmExport={handleConfirmExport}
         onConfirmDelete={onConfirmDelete}
       />
+    </>
+  )
+}
+
+export const AppInfoView = ({
+  expand,
+  onlyShowDetail = false,
+  openState = false,
+  actions,
+  renderDetail = true,
+}: AppInfoViewProps) => {
+  const { isCurrentWorkspaceEditor } = useAppContext()
+  const {
+    appDetail,
+    panelOpen,
+    setPanelOpen,
+  } = actions
+
+  if (!appDetail)
+    return null
+
+  return (
+    <div>
+      {!onlyShowDetail && (
+        <AppInfoTrigger
+          appDetail={appDetail}
+          expand={expand}
+          onClick={() => {
+            if (isCurrentWorkspaceEditor)
+              setPanelOpen(v => !v)
+          }}
+        />
+      )}
+      {renderDetail && (
+        <AppInfoDetailLayer
+          actions={actions}
+          open={onlyShowDetail ? openState : panelOpen}
+        />
+      )}
     </div>
   )
 }
 
+const AppInfo = ({ onDetailExpand, ...props }: IAppInfoProps) => {
+  const actions = useAppInfoActions({ onDetailExpand })
+
+  return (
+    <AppInfoView
+      {...props}
+      actions={actions}
+    />
+  )
+}
+
 export default React.memo(AppInfo)
diff --git a/web/app/components/app-sidebar/app-info/use-app-info-actions.ts b/web/app/components/app-sidebar/app-info/use-app-info-actions.ts
index 262a8c7db0..134726a50c 100644
--- a/web/app/components/app-sidebar/app-info/use-app-info-actions.ts
+++ b/web/app/components/app-sidebar/app-info/use-app-info-actions.ts
@@ -1,3 +1,4 @@
+import type { Dispatch, SetStateAction } from 'react'
 import type { DuplicateAppModalProps } from '@/app/components/app/duplicate-modal'
 import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
@@ -19,9 +20,36 @@ export type AppInfoModalType = 'edit' | 'duplicate' | 'delete' | 'switch' | 'imp
 
 type UseAppInfoActionsParams = {
   onDetailExpand?: (expand: boolean) => void
+  resetKey?: string
 }
 
-export function useAppInfoActions({ onDetailExpand }: UseAppInfoActionsParams) {
+type AppInfoUiState = {
+  resetKey?: string
+  panelOpen: boolean
+  activeModal: AppInfoModalType
+  secretEnvList: EnvironmentVariable[]
+}
+
+const emptySecretEnvList: EnvironmentVariable[] = []
+
+const createInitialUiState = (resetKey?: string): AppInfoUiState => ({
+  resetKey,
+  panelOpen: false,
+  activeModal: null,
+  secretEnvList: [],
+})
+
+const resolveStateAction = <T>(value: SetStateAction<T>, previous: T) => {
+  return typeof value === 'function'
+    ? (value as (previous: T) => T)(previous)
+    : value
+}
+
+const getCurrentUiState = (state: AppInfoUiState, resetKey?: string) => {
+  return state.resetKey === resetKey ? state : createInitialUiState(resetKey)
+}
+
+export function useAppInfoActions({ onDetailExpand, resetKey }: UseAppInfoActionsParams) {
   const { t } = useTranslation()
   const { replace } = useRouter()
   const { onPlanInfoChanged } = useProviderContext()
@@ -29,23 +57,55 @@ export function useAppInfoActions({ onDetailExpand }: UseAppInfoActionsParams) {
   const setAppDetail = useAppStore(state => state.setAppDetail)
   const invalidateAppList = useInvalidateAppList()
 
-  const [panelOpen, setPanelOpen] = useState(false)
-  const [activeModal, setActiveModal] = useState<AppInfoModalType>(null)
-  const [secretEnvList, setSecretEnvList] = useState<EnvironmentVariable[]>([])
+  const [uiState, setUiState] = useState(() => createInitialUiState(resetKey))
+  const uiStateMatchesResetKey = uiState.resetKey === resetKey
+  const panelOpen = uiStateMatchesResetKey ? uiState.panelOpen : false
+  const activeModal = uiStateMatchesResetKey ? uiState.activeModal : null
+  const secretEnvList = uiStateMatchesResetKey ? uiState.secretEnvList : emptySecretEnvList
+
+  const setPanelOpen = useCallback<Dispatch<SetStateAction<boolean>>>((value) => {
+    setUiState((state) => {
+      const current = getCurrentUiState(state, resetKey)
+      return {
+        ...current,
+        panelOpen: resolveStateAction(value, current.panelOpen),
+      }
+    })
+  }, [resetKey])
+
+  const setActiveModal = useCallback<Dispatch<SetStateAction<AppInfoModalType>>>((value) => {
+    setUiState((state) => {
+      const current = getCurrentUiState(state, resetKey)
+      return {
+        ...current,
+        activeModal: resolveStateAction(value, current.activeModal),
+      }
+    })
+  }, [resetKey])
+
+  const setSecretEnvList = useCallback<Dispatch<SetStateAction<EnvironmentVariable[]>>>((value) => {
+    setUiState((state) => {
+      const current = getCurrentUiState(state, resetKey)
+      return {
+        ...current,
+        secretEnvList: resolveStateAction(value, current.secretEnvList),
+      }
+    })
+  }, [resetKey])
 
   const closePanel = useCallback(() => {
     setPanelOpen(false)
     onDetailExpand?.(false)
-  }, [onDetailExpand])
+  }, [onDetailExpand, setPanelOpen])
 
   const openModal = useCallback((modal: Exclude<AppInfoModalType, null>) => {
     closePanel()
     setActiveModal(modal)
-  }, [closePanel])
+  }, [closePanel, setActiveModal])
 
   const closeModal = useCallback(() => {
     setActiveModal(null)
-  }, [])
+  }, [setActiveModal])
 
   const emitAppMetaUpdate = useCallback(() => {
     if (!appDetail?.id)
@@ -178,7 +238,7 @@ export function useAppInfoActions({ onDetailExpand }: UseAppInfoActionsParams) {
       return
     }
     setActiveModal('exportWarning')
-  }, [appDetail, onExport])
+  }, [appDetail, onExport, setActiveModal])
 
   const handleConfirmExport = useCallback(async () => {
     if (!appDetail)
@@ -198,7 +258,7 @@ export function useAppInfoActions({ onDetailExpand }: UseAppInfoActionsParams) {
     finally {
       closeModal()
     }
-  }, [appDetail, closeModal, onExport, t])
+  }, [appDetail, closeModal, onExport, setSecretEnvList, t])
 
   const onConfirmDelete = useCallback(async () => {
     if (!appDetail)
@@ -235,3 +295,5 @@ export function useAppInfoActions({ onDetailExpand }: UseAppInfoActionsParams) {
     onConfirmDelete,
   }
 }
+
+export type AppInfoActions = ReturnType<typeof useAppInfoActions>
diff --git a/web/app/components/app-sidebar/app-sidebar-dropdown.tsx b/web/app/components/app-sidebar/app-sidebar-dropdown.tsx
index 0b5f13d918..e0661b9c52 100644
--- a/web/app/components/app-sidebar/app-sidebar-dropdown.tsx
+++ b/web/app/components/app-sidebar/app-sidebar-dropdown.tsx
@@ -1,3 +1,4 @@
+import type { AppInfoActions } from './app-info/use-app-info-actions'
 import type { NavIcon } from './nav-link'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
@@ -27,9 +28,10 @@ type Props = {
     icon: NavIcon
     selectedIcon: NavIcon
   }>
+  appInfoActions?: AppInfoActions
 }
 
-const AppSidebarDropdown = ({ navigation }: Props) => {
+const AppSidebarDropdown = ({ navigation, appInfoActions }: Props) => {
   const { t } = useTranslation()
   const { isCurrentWorkspaceEditor } = useAppContext()
   const appDetail = useAppStore(state => state.appDetail)
@@ -69,7 +71,10 @@ const AppSidebarDropdown = ({ navigation }: Props) => {
                 <div
                   className={cn('flex flex-col gap-2 rounded-lg p-2 pb-2.5', isCurrentWorkspaceEditor && 'cursor-pointer hover:bg-state-base-hover')}
                   onClick={() => {
-                    setDetailExpand(true)
+                    if (appInfoActions)
+                      appInfoActions.setPanelOpen(true)
+                    else
+                      setDetailExpand(true)
                     setOpen(false)
                   }}
                 >
@@ -109,9 +114,11 @@ const AppSidebarDropdown = ({ navigation }: Props) => {
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
-      <div className="z-20">
-        <AppInfo expand onlyShowDetail openState={detailExpand} onDetailExpand={setDetailExpand} />
-      </div>
+      {!appInfoActions && (
+        <div className="z-20">
+          <AppInfo expand onlyShowDetail openState={detailExpand} onDetailExpand={setDetailExpand} />
+        </div>
+      )}
     </>
   )
 }
diff --git a/web/app/components/app-sidebar/index.tsx b/web/app/components/app-sidebar/index.tsx
index 4750d7919c..6fe5fffe8c 100644
--- a/web/app/components/app-sidebar/index.tsx
+++ b/web/app/components/app-sidebar/index.tsx
@@ -1,3 +1,4 @@
+import type { AppInfoActions } from './app-info/use-app-info-actions'
 import type { NavIcon } from './nav-link'
 import { cn } from '@langgenius/dify-ui/cn'
 import { useHover, useKeyPress } from 'ahooks'
@@ -10,7 +11,7 @@ import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { usePathname } from '@/next/navigation'
 import Divider from '../base/divider'
 import { getKeyboardKeyCodeBySystem } from '../workflow/utils'
-import AppInfo from './app-info'
+import AppInfo, { AppInfoView } from './app-info'
 import AppSidebarDropdown from './app-sidebar-dropdown'
 import DatasetInfo from './dataset-info'
 import DatasetSidebarDropdown from './dataset-sidebar-dropdown'
@@ -36,12 +37,14 @@ type IAppDetailNavProps = {
     disabled?: boolean
   }>
   extraInfo?: (modeState: string) => React.ReactNode
+  appInfoActions?: AppInfoActions
 }
 
 const AppDetailNav = ({
   navigation,
   extraInfo,
   iconType = 'app',
+  appInfoActions,
 }: IAppDetailNavProps) => {
   const { appSidebarExpand, setAppSidebarExpand } = useAppStore(useShallow(state => ({
     appSidebarExpand: state.appSidebarExpand,
@@ -89,7 +92,10 @@ const AppDetailNav = ({
   if (inWorkflowCanvas && hideHeader) {
     return (
       <div className="flex w-0 shrink-0">
-        <AppSidebarDropdown navigation={navigation} />
+        <AppSidebarDropdown
+          navigation={navigation}
+          appInfoActions={appInfoActions}
+        />
       </div>
     )
   }
@@ -117,7 +123,15 @@ const AppDetailNav = ({
         )}
       >
         {iconType === 'app' && (
-          <AppInfo expand={expand} />
+          appInfoActions
+            ? (
+                <AppInfoView
+                  expand={expand}
+                  actions={appInfoActions}
+                  renderDetail={false}
+                />
+              )
+            : <AppInfo expand={expand} />
         )}
         {iconType !== 'app' && (
           <DatasetInfo expand={expand} />
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx
index 550794cce7..0f6c27fd5a 100644
--- a/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx
@@ -1,13 +1,12 @@
 'use client'
 import type { FC } from 'react'
 import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import { toast } from '@langgenius/dify-ui/toast'
 import { RiCloseLine } from '@remixicon/react'
-import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Modal from '@/app/components/base/modal'
 import AnnotationFull from '@/app/components/billing/annotation-full'
 import { useProviderContext } from '@/context/provider-context'
 import { annotationBatchImport, checkAnnotationBatchImportProgress } from '@/service/annotation'
@@ -88,37 +87,40 @@ const BatchModal: FC<IBatchModalProps> = ({
   }
 
   return (
-    <Modal isShow={isShow} onClose={noop} className="max-w-[520px]! rounded-xl! px-8 py-6">
-      <div className="relative pb-1 system-xl-medium text-text-primary">{t('batchModal.title', { ns: 'appAnnotation' })}</div>
-      <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={onCancel}>
-        <RiCloseLine className="h-4 w-4 text-text-tertiary" />
-      </div>
-      <CSVUploader
-        file={currentCSV}
-        updateFile={handleFile}
-      />
-      <CSVDownloader />
+    <Dialog open={isShow}>
+      <DialogContent className="w-full max-w-[520px]! overflow-hidden! rounded-xl! border-none px-8 py-6 text-left align-middle">
 
-      {isAnnotationFull && (
-        <div className="mt-4">
-          <AnnotationFull />
+        <div className="relative pb-1 system-xl-medium text-text-primary">{t('batchModal.title', { ns: 'appAnnotation' })}</div>
+        <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={onCancel}>
+          <RiCloseLine className="h-4 w-4 text-text-tertiary" />
         </div>
-      )}
+        <CSVUploader
+          file={currentCSV}
+          updateFile={handleFile}
+        />
+        <CSVDownloader />
 
-      <div className="mt-[28px] flex justify-end pt-6">
-        <Button className="mr-2 system-sm-medium text-text-tertiary" onClick={onCancel}>
-          {t('batchModal.cancel', { ns: 'appAnnotation' })}
-        </Button>
-        <Button
-          variant="primary"
-          onClick={handleSend}
-          disabled={isAnnotationFull || !currentCSV}
-          loading={importStatus === ProcessStatus.PROCESSING || importStatus === ProcessStatus.WAITING}
-        >
-          {t('batchModal.run', { ns: 'appAnnotation' })}
-        </Button>
-      </div>
-    </Modal>
+        {isAnnotationFull && (
+          <div className="mt-4">
+            <AnnotationFull />
+          </div>
+        )}
+
+        <div className="mt-[28px] flex justify-end pt-6">
+          <Button className="mr-2 system-sm-medium text-text-tertiary" onClick={onCancel}>
+            {t('batchModal.cancel', { ns: 'appAnnotation' })}
+          </Button>
+          <Button
+            variant="primary"
+            onClick={handleSend}
+            disabled={isAnnotationFull || !currentCSV}
+            loading={importStatus === ProcessStatus.PROCESSING || importStatus === ProcessStatus.WAITING}
+          >
+            {t('batchModal.run', { ns: 'appAnnotation' })}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
   )
 }
 export default React.memo(BatchModal)
diff --git a/web/app/components/app/annotation/header-opts/__tests__/index.spec.tsx b/web/app/components/app/annotation/header-opts/__tests__/index.spec.tsx
index 5e7b2dc1d0..f953514702 100644
--- a/web/app/components/app/annotation/header-opts/__tests__/index.spec.tsx
+++ b/web/app/components/app/annotation/header-opts/__tests__/index.spec.tsx
@@ -5,129 +5,11 @@ import type { AnnotationItemBasic } from '../../type'
 import type { Locale } from '@/i18n-config'
 import { act, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import * as React from 'react'
 import { useLocale } from '@/context/i18n'
 import { LanguagesSupported } from '@/i18n-config/language'
 import { clearAllAnnotations, fetchExportAnnotationList } from '@/service/annotation'
 import HeaderOptions from '../index'
 
-vi.mock('@headlessui/react', () => {
-  type PopoverContextValue = { open: boolean, setOpen: (open: boolean) => void }
-  type MenuContextValue = { open: boolean, setOpen: (open: boolean) => void }
-  const PopoverContext = React.createContext<PopoverContextValue | null>(null)
-  const MenuContext = React.createContext<MenuContextValue | null>(null)
-
-  const Popover = ({ children }: { children: React.ReactNode | ((props: { open: boolean }) => React.ReactNode) }) => {
-    const [open, setOpen] = React.useState(false)
-    const value = React.useMemo(() => ({ open, setOpen }), [open])
-    return (
-      <PopoverContext.Provider value={value}>
-        {typeof children === 'function' ? children({ open }) : children}
-      </PopoverContext.Provider>
-    )
-  }
-
-  const PopoverButton = React.forwardRef(({ onClick, children, ...props }: { onClick?: () => void, children?: React.ReactNode }, ref: React.Ref<HTMLButtonElement>) => {
-    const context = React.useContext(PopoverContext)
-    const handleClick = () => {
-      context?.setOpen(!context.open)
-      onClick?.()
-    }
-    return (
-      <button
-        ref={ref}
-        type="button"
-        aria-expanded={context?.open ?? false}
-        onClick={handleClick}
-        {...props}
-      >
-        {children}
-      </button>
-    )
-  })
-
-  const PopoverPanel = React.forwardRef(({ children, ...props }: { children: React.ReactNode | ((props: { close: () => void }) => React.ReactNode) }, ref: React.Ref<HTMLDivElement>) => {
-    const context = React.useContext(PopoverContext)
-    if (!context?.open)
-      return null
-    const content = typeof children === 'function' ? children({ close: () => context.setOpen(false) }) : children
-    return (
-      <div ref={ref} {...props}>
-        {content}
-      </div>
-    )
-  })
-
-  const Menu = ({ children }: { children: React.ReactNode }) => {
-    const [open, setOpen] = React.useState(false)
-    const value = React.useMemo(() => ({ open, setOpen }), [open])
-    return (
-      <MenuContext.Provider value={value}>
-        {children}
-      </MenuContext.Provider>
-    )
-  }
-
-  const MenuButton = ({ onClick, children, ...props }: { onClick?: () => void, children?: React.ReactNode }) => {
-    const context = React.useContext(MenuContext)
-    const handleClick = () => {
-      context?.setOpen(!context.open)
-      onClick?.()
-    }
-    return (
-      <button type="button" aria-expanded={context?.open ?? false} onClick={handleClick} {...props}>
-        {children}
-      </button>
-    )
-  }
-
-  const MenuItems = ({ children, ...props }: { children: React.ReactNode }) => {
-    const context = React.useContext(MenuContext)
-    if (!context?.open)
-      return null
-    return (
-      <div {...props}>
-        {children}
-      </div>
-    )
-  }
-
-  return {
-    Dialog: ({ open, children, className }: { open?: boolean, children: React.ReactNode, className?: string }) => {
-      if (open === false)
-        return null
-      return (
-        <div role="dialog" className={className}>
-          {children}
-        </div>
-      )
-    },
-    DialogBackdrop: ({ children, className, onClick }: { children?: React.ReactNode, className?: string, onClick?: () => void }) => (
-      <div className={className} onClick={onClick}>
-        {children}
-      </div>
-    ),
-    DialogPanel: ({ children, className, ...props }: { children: React.ReactNode, className?: string }) => (
-      <div className={className} {...props}>
-        {children}
-      </div>
-    ),
-    DialogTitle: ({ children, className, ...props }: { children: React.ReactNode, className?: string }) => (
-      <div className={className} {...props}>
-        {children}
-      </div>
-    ),
-    Popover,
-    PopoverButton,
-    PopoverPanel,
-    Menu,
-    MenuButton,
-    MenuItems,
-    Transition: ({ show = true, children }: { show?: boolean, children: React.ReactNode }) => (show ? <>{children}</> : null),
-    TransitionChild: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-  }
-})
-
 const mockJsonToCSV = vi.fn((_: unknown) => 'csv-content')
 const mockCSVDownloader = vi.fn(({ children }) => <>{children}</>)
 
diff --git a/web/app/components/app/app-access-control/__tests__/access-control-dialog.spec.tsx b/web/app/components/app/app-access-control/__tests__/access-control-dialog.spec.tsx
index 13331f3f9c..03a35bd52a 100644
--- a/web/app/components/app/app-access-control/__tests__/access-control-dialog.spec.tsx
+++ b/web/app/components/app/app-access-control/__tests__/access-control-dialog.spec.tsx
@@ -10,6 +10,7 @@ describe('AccessControlDialog', () => {
     )
 
     expect(screen.getByRole('dialog')).toBeInTheDocument()
+    expect(screen.getByRole('dialog')).toHaveClass('custom-dialog')
     expect(screen.getByText('Dialog Content')).toBeInTheDocument()
   })
 
diff --git a/web/app/components/app/app-access-control/__tests__/access-control.spec.tsx b/web/app/components/app/app-access-control/__tests__/access-control.spec.tsx
index 4aaea1670f..a686ba9f2e 100644
--- a/web/app/components/app/app-access-control/__tests__/access-control.spec.tsx
+++ b/web/app/components/app/app-access-control/__tests__/access-control.spec.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable ts/no-explicit-any */
 import type { AccessControlAccount, AccessControlGroup, Subject } from '@/models/access-control'
 import type { App } from '@/types/app'
 import { toast } from '@langgenius/dify-ui/toast'
@@ -43,34 +42,6 @@ vi.mock('@/service/access-control', () => ({
   useUpdateAccessMode: () => mockUseUpdateAccessMode(),
 }))
 
-vi.mock('@headlessui/react', () => {
-  const DialogComponent: any = ({ children, className, ...rest }: any) => (
-    <div role="dialog" className={className} {...rest}>{children}</div>
-  )
-  DialogComponent.Panel = ({ children, className, ...rest }: any) => (
-    <div className={className} {...rest}>{children}</div>
-  )
-  const DialogTitle = ({ children, className, ...rest }: any) => (
-    <div className={className} {...rest}>{children}</div>
-  )
-  const DialogDescription = ({ children, className, ...rest }: any) => (
-    <div className={className} {...rest}>{children}</div>
-  )
-  const TransitionChild = ({ children }: any) => (
-    <>{typeof children === 'function' ? children({}) : children}</>
-  )
-  const Transition = ({ show = true, children }: any) => (
-    show ? <>{typeof children === 'function' ? children({}) : children}</> : null
-  )
-  Transition.Child = TransitionChild
-  return {
-    Dialog: DialogComponent,
-    Transition,
-    DialogTitle,
-    Description: DialogDescription,
-  }
-})
-
 vi.mock('ahooks', async (importOriginal) => {
   const actual = await importOriginal<typeof import('ahooks')>()
   return {
diff --git a/web/app/components/app/app-access-control/access-control-dialog.tsx b/web/app/components/app/app-access-control/access-control-dialog.tsx
index 611c6f1c92..ed1301386c 100644
--- a/web/app/components/app/app-access-control/access-control-dialog.tsx
+++ b/web/app/components/app/app-access-control/access-control-dialog.tsx
@@ -23,9 +23,15 @@ const AccessControlDialog = ({
   const close = useCallback(() => {
     onClose?.()
   }, [onClose])
+
   return (
-    <Dialog open={show} onOpenChange={open => !open && close()}>
-      <DialogContent className={cn('min-h-[323px] w-[600px] p-0', className)}>
+    <Dialog open={show} disablePointerDismissal onOpenChange={open => !open && close()}>
+      <DialogContent
+        className={cn(
+          'h-auto max-h-none min-h-[323px] w-[600px] max-w-none overflow-y-auto rounded-2xl border-none bg-components-panel-bg p-0 shadow-xl transition-all',
+          className,
+        )}
+      >
         <DialogCloseButton className="top-5 right-5 h-8 w-8" />
         {children}
       </DialogContent>
diff --git a/web/app/components/app/app-publisher/__tests__/version-info-modal.spec.tsx b/web/app/components/app/app-publisher/__tests__/version-info-modal.spec.tsx
index 4a461bd942..942a199a87 100644
--- a/web/app/components/app/app-publisher/__tests__/version-info-modal.spec.tsx
+++ b/web/app/components/app/app-publisher/__tests__/version-info-modal.spec.tsx
@@ -87,6 +87,22 @@ describe('VersionInfoModal', () => {
     expect(handleClose).toHaveBeenCalledTimes(1)
   })
 
+  it('should close when the dialog requests close', () => {
+    const handleClose = vi.fn()
+
+    render(
+      <VersionInfoModal
+        isOpen
+        onClose={handleClose}
+        onPublish={vi.fn()}
+      />,
+    )
+
+    fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+
+    expect(handleClose).toHaveBeenCalledTimes(1)
+  })
+
   it('should validate release note length and clear previous errors before publishing', () => {
     const handlePublish = vi.fn()
     const handleClose = vi.fn()
diff --git a/web/app/components/app/app-publisher/version-info-modal.tsx b/web/app/components/app/app-publisher/version-info-modal.tsx
index 3fe4c61fb7..264975a08b 100644
--- a/web/app/components/app/app-publisher/version-info-modal.tsx
+++ b/web/app/components/app/app-publisher/version-info-modal.tsx
@@ -1,12 +1,12 @@
 import type { FC } from 'react'
 import type { VersionHistory } from '@/types/workflow'
 import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import { toast } from '@langgenius/dify-ui/toast'
 import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Modal from '@/app/components/base/modal'
 import Input from '../../base/input'
 import Textarea from '../../base/textarea'
 
@@ -66,46 +66,55 @@ const VersionInfoModal: FC<VersionInfoModalProps> = ({
   }, [])
 
   return (
-    <Modal className="p-0" isShow={isOpen} onClose={onClose}>
-      <div className="relative w-full p-6 pr-14 pb-4">
-        <div className="title-2xl-semi-bold text-text-primary first-letter:capitalize">
-          {versionInfo?.marked_name ? t('versionHistory.editVersionInfo', { ns: 'workflow' }) : t('versionHistory.nameThisVersion', { ns: 'workflow' })}
-        </div>
-        <div className="absolute top-5 right-5 flex h-8 w-8 cursor-pointer items-center justify-center p-1.5" onClick={onClose}>
-          <RiCloseLine className="h-[18px] w-[18px] text-text-tertiary" />
-        </div>
-      </div>
-      <div className="flex flex-col gap-y-4 px-6 py-3">
-        <div className="flex flex-col gap-y-1">
-          <div className="flex h-6 items-center system-sm-semibold text-text-secondary">
-            {t('versionHistory.editField.title', { ns: 'workflow' })}
+    <Dialog
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open)
+          onClose()
+      }}
+    >
+      <DialogContent className="w-full max-w-[480px] overflow-hidden! border-none p-0 text-left align-middle">
+
+        <div className="relative w-full p-6 pr-14 pb-4">
+          <div className="title-2xl-semi-bold text-text-primary first-letter:capitalize">
+            {versionInfo?.marked_name ? t('versionHistory.editVersionInfo', { ns: 'workflow' }) : t('versionHistory.nameThisVersion', { ns: 'workflow' })}
           </div>
-          <Input
-            value={title}
-            placeholder={`${t('versionHistory.nameThisVersion', { ns: 'workflow' })}${t('panel.optional', { ns: 'workflow' })}`}
-            onChange={handleTitleChange}
-            destructive={titleError}
-          />
-        </div>
-        <div className="flex flex-col gap-y-1">
-          <div className="flex h-6 items-center system-sm-semibold text-text-secondary">
-            {t('versionHistory.editField.releaseNotes', { ns: 'workflow' })}
+          <div className="absolute top-5 right-5 flex h-8 w-8 cursor-pointer items-center justify-center p-1.5" onClick={onClose}>
+            <RiCloseLine className="h-[18px] w-[18px] text-text-tertiary" />
           </div>
-          <Textarea
-            value={releaseNotes}
-            placeholder={`${t('versionHistory.releaseNotesPlaceholder', { ns: 'workflow' })}${t('panel.optional', { ns: 'workflow' })}`}
-            onChange={handleDescriptionChange}
-            destructive={releaseNotesError}
-          />
         </div>
-      </div>
-      <div className="flex justify-end p-6 pt-5">
-        <div className="flex items-center gap-x-3">
-          <Button onClick={onClose}>{t('operation.cancel', { ns: 'common' })}</Button>
-          <Button variant="primary" onClick={handlePublish}>{t('common.publish', { ns: 'workflow' })}</Button>
+        <div className="flex flex-col gap-y-4 px-6 py-3">
+          <div className="flex flex-col gap-y-1">
+            <div className="flex h-6 items-center system-sm-semibold text-text-secondary">
+              {t('versionHistory.editField.title', { ns: 'workflow' })}
+            </div>
+            <Input
+              value={title}
+              placeholder={`${t('versionHistory.nameThisVersion', { ns: 'workflow' })}${t('panel.optional', { ns: 'workflow' })}`}
+              onChange={handleTitleChange}
+              destructive={titleError}
+            />
+          </div>
+          <div className="flex flex-col gap-y-1">
+            <div className="flex h-6 items-center system-sm-semibold text-text-secondary">
+              {t('versionHistory.editField.releaseNotes', { ns: 'workflow' })}
+            </div>
+            <Textarea
+              value={releaseNotes}
+              placeholder={`${t('versionHistory.releaseNotesPlaceholder', { ns: 'workflow' })}${t('panel.optional', { ns: 'workflow' })}`}
+              onChange={handleDescriptionChange}
+              destructive={releaseNotesError}
+            />
+          </div>
         </div>
-      </div>
-    </Modal>
+        <div className="flex justify-end p-6 pt-5">
+          <div className="flex items-center gap-x-3">
+            <Button nativeButton={false} onClick={onClose}>{t('operation.cancel', { ns: 'common' })}</Button>
+            <Button nativeButton={false} variant="primary" onClick={handlePublish}>{t('common.publish', { ns: 'workflow' })}</Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/web/app/components/app/configuration/config-prompt/conversation-history/__tests__/edit-modal.spec.tsx b/web/app/components/app/configuration/config-prompt/conversation-history/__tests__/edit-modal.spec.tsx
index 236f9403c9..1dd5d03889 100644
--- a/web/app/components/app/configuration/config-prompt/conversation-history/__tests__/edit-modal.spec.tsx
+++ b/web/app/components/app/configuration/config-prompt/conversation-history/__tests__/edit-modal.spec.tsx
@@ -3,8 +3,11 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
 import EditModal from '../edit-modal'
 
-vi.mock('@/app/components/base/modal', () => ({
-  default: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+vi.mock('@langgenius/dify-ui/dialog', () => ({
+  Dialog: ({ children, open }: { children: React.ReactNode, open?: boolean }) =>
+    open === false ? null : <>{children}</>,
+  DialogContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  DialogTitle: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
 }))
 
 describe('Conversation history edit modal', () => {
diff --git a/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx b/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx
index 7906a5f8da..ad73e111c7 100644
--- a/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx
+++ b/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx
@@ -2,10 +2,10 @@
 import type { FC } from 'react'
 import type { ConversationHistoriesRole } from '@/models/debug'
 import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Modal from '@/app/components/base/modal'
 
 type Props = {
   isShow: boolean
@@ -25,37 +25,45 @@ const EditModal: FC<Props> = ({
   const { t } = useTranslation()
   const [tempData, setTempData] = useState(data)
   return (
-    <Modal
-      title={t('feature.conversationHistory.editModal.title', { ns: 'appDebug' })}
-      isShow={isShow}
-      onClose={onClose}
+    <Dialog
+      open={isShow}
+      onOpenChange={(open) => {
+        if (!open)
+          onClose()
+      }}
     >
-      <div className="mt-6 text-sm leading-[21px] font-medium text-text-primary">{t('feature.conversationHistory.editModal.userPrefix', { ns: 'appDebug' })}</div>
-      <input
-        className="mt-2 box-border h-10 w-full rounded-lg bg-components-input-bg-normal px-3 text-sm leading-10"
-        value={tempData.user_prefix}
-        onChange={e => setTempData({
-          ...tempData,
-          user_prefix: e.target.value,
-        })}
-      />
+      <DialogContent className="w-full max-w-[480px] overflow-hidden! border-none p-6 text-left align-middle">
+        <DialogTitle className="title-2xl-semi-bold text-text-primary">
+          {t('feature.conversationHistory.editModal.title', { ns: 'appDebug' })}
+        </DialogTitle>
 
-      <div className="mt-6 text-sm leading-[21px] font-medium text-text-primary">{t('feature.conversationHistory.editModal.assistantPrefix', { ns: 'appDebug' })}</div>
-      <input
-        className="mt-2 box-border h-10 w-full rounded-lg bg-components-input-bg-normal px-3 text-sm leading-10"
-        value={tempData.assistant_prefix}
-        onChange={e => setTempData({
-          ...tempData,
-          assistant_prefix: e.target.value,
-        })}
-        placeholder={t('chat.conversationNamePlaceholder', { ns: 'common' }) || ''}
-      />
+        <div className="mt-6 text-sm leading-[21px] font-medium text-text-primary">{t('feature.conversationHistory.editModal.userPrefix', { ns: 'appDebug' })}</div>
+        <input
+          className="mt-2 box-border h-10 w-full rounded-lg bg-components-input-bg-normal px-3 text-sm leading-10"
+          value={tempData.user_prefix}
+          onChange={e => setTempData({
+            ...tempData,
+            user_prefix: e.target.value,
+          })}
+        />
 
-      <div className="mt-10 flex justify-end">
-        <Button className="mr-2 shrink-0" onClick={onClose}>{t('operation.cancel', { ns: 'common' })}</Button>
-        <Button variant="primary" className="shrink-0" onClick={() => onSave(tempData)} loading={saveLoading}>{t('operation.save', { ns: 'common' })}</Button>
-      </div>
-    </Modal>
+        <div className="mt-6 text-sm leading-[21px] font-medium text-text-primary">{t('feature.conversationHistory.editModal.assistantPrefix', { ns: 'appDebug' })}</div>
+        <input
+          className="mt-2 box-border h-10 w-full rounded-lg bg-components-input-bg-normal px-3 text-sm leading-10"
+          value={tempData.assistant_prefix}
+          onChange={e => setTempData({
+            ...tempData,
+            assistant_prefix: e.target.value,
+          })}
+          placeholder={t('chat.conversationNamePlaceholder', { ns: 'common' }) || ''}
+        />
+
+        <div className="mt-10 flex justify-end">
+          <Button className="mr-2 shrink-0" onClick={onClose}>{t('operation.cancel', { ns: 'common' })}</Button>
+          <Button variant="primary" className="shrink-0" onClick={() => onSave(tempData)} loading={saveLoading}>{t('operation.save', { ns: 'common' })}</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/web/app/components/app/configuration/config-var/config-modal/index.tsx b/web/app/components/app/configuration/config-var/config-modal/index.tsx
index 824b8a8d82..1976a4ffa0 100644
--- a/web/app/components/app/configuration/config-var/config-modal/index.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/index.tsx
@@ -2,13 +2,13 @@
 import type { ChangeEvent, FC } from 'react'
 import type { Item as SelectItem } from './type-select'
 import type { InputVar, InputVarType, MoreInfo } from '@/app/components/workflow/types'
+import { Dialog, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
 import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import Modal from '@/app/components/base/modal'
 import ConfigContext from '@/context/debug-configuration'
 import { AppModeEnum } from '@/types/app'
 import { checkKeys, getNewVarInWorkflow, replaceSpaceWithUnderscoreInVarNameInput } from '@/utils/var'
@@ -141,35 +141,43 @@ const ConfigModal: FC<IConfigModalProps> = ({
   }
 
   return (
-    <Modal
-      title={t(`variableConfig.${isCreate ? 'addModalTitle' : 'editModalTitle'}`, { ns: 'appDebug' })}
-      isShow={isShow}
-      onClose={onClose}
+    <Dialog
+      open={isShow}
+      onOpenChange={(open) => {
+        if (!open)
+          onClose()
+      }}
     >
-      <div className="mb-8" ref={modalRef} tabIndex={-1}>
-        <ConfigModalFormFields
-          checkboxDefaultSelectValue={checkboxDefaultSelectValue}
-          isStringInput={isStringInput}
-          jsonSchemaStr={jsonSchemaStr}
-          maxLength={max_length}
-          modelId={modelConfig.model_id}
-          onFilePayloadChange={payload => setTempPayload(payload as InputVar)}
-          onJSONSchemaChange={handleJSONSchemaChange}
-          onPayloadChange={handlePayloadChange}
-          onTypeChange={handleTypeChange}
-          onVarKeyBlur={handleVarKeyBlur}
-          onVarNameChange={handleVarNameChange}
-          options={options}
-          selectOptions={selectOptions}
-          tempPayload={tempPayload}
-          t={t}
+      <DialogContent className="overflow-hidden! border-none text-left align-middle">
+        <DialogTitle className="title-2xl-semi-bold text-text-primary">
+          {t(`variableConfig.${isCreate ? 'addModalTitle' : 'editModalTitle'}`, { ns: 'appDebug' })}
+        </DialogTitle>
+
+        <div className="mb-8" ref={modalRef} tabIndex={-1}>
+          <ConfigModalFormFields
+            checkboxDefaultSelectValue={checkboxDefaultSelectValue}
+            isStringInput={isStringInput}
+            jsonSchemaStr={jsonSchemaStr}
+            maxLength={max_length}
+            modelId={modelConfig.model_id}
+            onFilePayloadChange={payload => setTempPayload(payload as InputVar)}
+            onJSONSchemaChange={handleJSONSchemaChange}
+            onPayloadChange={handlePayloadChange}
+            onTypeChange={handleTypeChange}
+            onVarKeyBlur={handleVarKeyBlur}
+            onVarNameChange={handleVarNameChange}
+            options={options}
+            selectOptions={selectOptions}
+            tempPayload={tempPayload}
+            t={t}
+          />
+        </div>
+        <ModalFoot
+          onConfirm={handleConfirm}
+          onCancel={onClose}
         />
-      </div>
-      <ModalFoot
-        onConfirm={handleConfirm}
-        onCancel={onClose}
-      />
-    </Modal>
+      </DialogContent>
+    </Dialog>
   )
 }
 export default React.memo(ConfigModal)
diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index aff540cecf..ba08daf9b5 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -14,6 +14,7 @@ import {
   AlertDialogTitle,
 } from '@langgenius/dify-ui/alert-dialog'
 import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import { toast } from '@langgenius/dify-ui/toast'
 import {
   RiDatabase2Line,
@@ -32,9 +33,8 @@ import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Generator } from '@/app/components/base/icons/src/vender/other'
 import Loading from '@/app/components/base/loading'
-import Modal from '@/app/components/base/modal'
-import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 
+import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
 import { generateBasicAppFirstTimeRule, generateRule } from '@/service/debug'
@@ -282,143 +282,148 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
   }
 
   return (
-    <Modal
-      isShow={isShow}
-      onClose={onClose}
-      className="min-w-[1140px] p-0!"
+    <Dialog
+      open={isShow}
+      onOpenChange={(open) => {
+        if (!open)
+          onClose()
+      }}
     >
-      <div className="flex h-[680px] flex-wrap">
-        <div className="h-full w-[570px] shrink-0 overflow-y-auto border-r border-divider-regular p-6">
-          <div className="mb-5">
-            <div className={`text-lg leading-[28px] font-bold ${s.textGradient}`}>{t('generate.title', { ns: 'appDebug' })}</div>
-            <div className="mt-1 text-[13px] font-normal text-text-tertiary">{t('generate.description', { ns: 'appDebug' })}</div>
-          </div>
-          <div>
-            <ModelParameterModal
-              popupClassName="w-[520px]!"
-              isAdvancedMode={true}
-              provider={model.provider}
-              completionParams={model.completion_params}
-              modelId={model.name}
-              setModel={handleModelChange}
-              onCompletionParamsChange={handleCompletionParamsChange}
-              hideDebugWithMultipleModel
-            />
-          </div>
-          {isBasicMode && (
-            <div className="mt-4">
-              <div className="flex items-center">
-                <div className="mr-3 shrink-0 text-xs leading-[18px] font-semibold text-text-tertiary uppercase">{t('generate.tryIt', { ns: 'appDebug' })}</div>
-                <div
-                  className="h-px grow"
-                  style={{
-                    background: 'linear-gradient(to right, rgba(243, 244, 246, 1), rgba(243, 244, 246, 0))',
-                  }}
-                >
+      <DialogContent className="max-h-none w-[1140px] max-w-none! min-w-[1140px] overflow-hidden! border-none p-0! text-left align-middle">
+
+        <div className="flex h-[680px] flex-wrap">
+          <div className="h-full w-[570px] shrink-0 overflow-y-auto border-r border-divider-regular p-6">
+            <div className="mb-5">
+              <div className={`text-lg leading-[28px] font-bold ${s.textGradient}`}>{t('generate.title', { ns: 'appDebug' })}</div>
+              <div className="mt-1 text-[13px] font-normal text-text-tertiary">{t('generate.description', { ns: 'appDebug' })}</div>
+            </div>
+            <div>
+              <ModelParameterModal
+                popupClassName="w-[520px]!"
+                isAdvancedMode={true}
+                provider={model.provider}
+                completionParams={model.completion_params}
+                modelId={model.name}
+                setModel={handleModelChange}
+                onCompletionParamsChange={handleCompletionParamsChange}
+                hideDebugWithMultipleModel
+              />
+            </div>
+            {isBasicMode && (
+              <div className="mt-4">
+                <div className="flex items-center">
+                  <div className="mr-3 shrink-0 text-xs leading-[18px] font-semibold text-text-tertiary uppercase">{t('generate.tryIt', { ns: 'appDebug' })}</div>
+                  <div
+                    className="h-px grow"
+                    style={{
+                      background: 'linear-gradient(to right, rgba(243, 244, 246, 1), rgba(243, 244, 246, 0))',
+                    }}
+                  >
+                  </div>
+                </div>
+                <div className="flex flex-wrap">
+                  {tryList.map(item => (
+                    <TryLabel
+                      key={item.key}
+                      Icon={item.icon}
+                      text={t(`generate.template.${item.key}.name`, { ns: 'appDebug' })}
+                      onClick={handleChooseTemplate(item.key)}
+                    />
+                  ))}
                 </div>
               </div>
-              <div className="flex flex-wrap">
-                {tryList.map(item => (
-                  <TryLabel
-                    key={item.key}
-                    Icon={item.icon}
-                    text={t(`generate.template.${item.key}.name`, { ns: 'appDebug' })}
-                    onClick={handleChooseTemplate(item.key)}
-                  />
-                ))}
+            )}
+
+            {/* inputs */}
+            <div className="mt-4">
+              <div>
+                <div className="mb-1.5 system-sm-semibold-uppercase text-text-secondary">{t('generate.instruction', { ns: 'appDebug' })}</div>
+                {isBasicMode
+                  ? (
+                      <InstructionEditorInBasic
+                        editorKey={editorKey}
+                        generatorType={GeneratorType.prompt}
+                        value={instruction}
+                        onChange={setInstruction}
+                        availableVars={[]}
+                        availableNodes={[]}
+                        isShowCurrentBlock={!!currentPrompt}
+                        isShowLastRunBlock={false}
+                      />
+                    )
+                  : (
+                      <InstructionEditorInWorkflow
+                        editorKey={editorKey}
+                        generatorType={GeneratorType.prompt}
+                        value={instruction}
+                        onChange={setInstruction}
+                        nodeId={nodeId || ''}
+                        isShowCurrentBlock={!!currentPrompt}
+                      />
+                    )}
+              </div>
+              <IdeaOutput
+                value={ideaOutput}
+                onChange={setIdeaOutput}
+              />
+
+              <div className="mt-7 flex justify-end space-x-2">
+                <Button onClick={onClose}>{t(`${i18nPrefix}.dismiss`, { ns: 'appDebug' })}</Button>
+                <Button
+                  className="flex space-x-1"
+                  variant="primary"
+                  onClick={onGenerate}
+                  disabled={isLoading}
+                >
+                  <Generator className="h-4 w-4" />
+                  <span className="text-xs font-semibold">{t('generate.generate', { ns: 'appDebug' })}</span>
+                </Button>
               </div>
             </div>
+          </div>
+
+          {(!isLoading && current) && (
+            <div className="h-full w-0 grow bg-background-default-subtle p-6 pb-0">
+              <Result
+                current={current!}
+                isBasicMode={isBasicMode}
+                nodeId={nodeId!}
+                currentVersionIndex={currentVersionIndex || 0}
+                setCurrentVersionIndex={setCurrentVersionIndex}
+                versions={versions || []}
+                onApply={showConfirmOverwrite}
+                generatorType={GeneratorType.prompt}
+              />
+            </div>
           )}
-
-          {/* inputs */}
-          <div className="mt-4">
-            <div>
-              <div className="mb-1.5 system-sm-semibold-uppercase text-text-secondary">{t('generate.instruction', { ns: 'appDebug' })}</div>
-              {isBasicMode
-                ? (
-                    <InstructionEditorInBasic
-                      editorKey={editorKey}
-                      generatorType={GeneratorType.prompt}
-                      value={instruction}
-                      onChange={setInstruction}
-                      availableVars={[]}
-                      availableNodes={[]}
-                      isShowCurrentBlock={!!currentPrompt}
-                      isShowLastRunBlock={false}
-                    />
-                  )
-                : (
-                    <InstructionEditorInWorkflow
-                      editorKey={editorKey}
-                      generatorType={GeneratorType.prompt}
-                      value={instruction}
-                      onChange={setInstruction}
-                      nodeId={nodeId || ''}
-                      isShowCurrentBlock={!!currentPrompt}
-                    />
-                  )}
-            </div>
-            <IdeaOutput
-              value={ideaOutput}
-              onChange={setIdeaOutput}
-            />
-
-            <div className="mt-7 flex justify-end space-x-2">
-              <Button onClick={onClose}>{t(`${i18nPrefix}.dismiss`, { ns: 'appDebug' })}</Button>
-              <Button
-                className="flex space-x-1"
-                variant="primary"
-                onClick={onGenerate}
-                disabled={isLoading}
-              >
-                <Generator className="h-4 w-4" />
-                <span className="text-xs font-semibold">{t('generate.generate', { ns: 'appDebug' })}</span>
-              </Button>
-            </div>
-          </div>
+          {isLoading && renderLoading}
+          {isShowAutoPromptResPlaceholder() && <ResPlaceholder />}
+          <AlertDialog open={isShowConfirmOverwrite} onOpenChange={open => !open && hideShowConfirmOverwrite()}>
+            <AlertDialogContent>
+              <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+                <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+                  {t('generate.overwriteTitle', { ns: 'appDebug' })}
+                </AlertDialogTitle>
+                <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+                  {t('generate.overwriteMessage', { ns: 'appDebug' })}
+                </AlertDialogDescription>
+              </div>
+              <AlertDialogActions>
+                <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+                <AlertDialogConfirmButton
+                  onClick={() => {
+                    hideShowConfirmOverwrite()
+                    onFinished(current!)
+                  }}
+                >
+                  {t('operation.confirm', { ns: 'common' })}
+                </AlertDialogConfirmButton>
+              </AlertDialogActions>
+            </AlertDialogContent>
+          </AlertDialog>
         </div>
-
-        {(!isLoading && current) && (
-          <div className="h-full w-0 grow bg-background-default-subtle p-6 pb-0">
-            <Result
-              current={current!}
-              isBasicMode={isBasicMode}
-              nodeId={nodeId!}
-              currentVersionIndex={currentVersionIndex || 0}
-              setCurrentVersionIndex={setCurrentVersionIndex}
-              versions={versions || []}
-              onApply={showConfirmOverwrite}
-              generatorType={GeneratorType.prompt}
-            />
-          </div>
-        )}
-        {isLoading && renderLoading}
-        {isShowAutoPromptResPlaceholder() && <ResPlaceholder />}
-        <AlertDialog open={isShowConfirmOverwrite} onOpenChange={open => !open && hideShowConfirmOverwrite()}>
-          <AlertDialogContent>
-            <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
-              <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
-                {t('generate.overwriteTitle', { ns: 'appDebug' })}
-              </AlertDialogTitle>
-              <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
-                {t('generate.overwriteMessage', { ns: 'appDebug' })}
-              </AlertDialogDescription>
-            </div>
-            <AlertDialogActions>
-              <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
-              <AlertDialogConfirmButton
-                onClick={() => {
-                  hideShowConfirmOverwrite()
-                  onFinished(current!)
-                }}
-              >
-                {t('operation.confirm', { ns: 'common' })}
-              </AlertDialogConfirmButton>
-            </AlertDialogActions>
-          </AlertDialogContent>
-        </AlertDialog>
-      </div>
-    </Modal>
+      </DialogContent>
+    </Dialog>
   )
 }
 export default React.memo(GetAutomaticRes)
diff --git a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
index c69c0f5dae..b603243e00 100644
--- a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
+++ b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
@@ -13,6 +13,7 @@ import {
   AlertDialogTitle,
 } from '@langgenius/dify-ui/alert-dialog'
 import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import { toast } from '@langgenius/dify-ui/toast'
 import {
   useBoolean,
@@ -23,7 +24,6 @@ import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Generator } from '@/app/components/base/icons/src/vender/other'
 import Loading from '@/app/components/base/loading'
-import Modal from '@/app/components/base/modal'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
@@ -202,99 +202,104 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
   )
 
   return (
-    <Modal
-      isShow={isShow}
-      onClose={onClose}
-      className="min-w-[1140px] p-0!"
+    <Dialog
+      open={isShow}
+      onOpenChange={(open) => {
+        if (!open)
+          onClose()
+      }}
     >
-      <div className="relative flex h-[680px] flex-wrap">
-        <div className="h-full w-[570px] shrink-0 overflow-y-auto border-r border-divider-regular p-6">
-          <div className="mb-5">
-            <div className={`text-lg leading-[28px] font-bold ${s.textGradient}`}>{t('codegen.title', { ns: 'appDebug' })}</div>
-            <div className="mt-1 text-[13px] font-normal text-text-tertiary">{t('codegen.description', { ns: 'appDebug' })}</div>
-          </div>
-          <div className="mb-4">
-            <ModelParameterModal
-              popupClassName="w-[520px]!"
-              isAdvancedMode={true}
-              provider={model.provider}
-              completionParams={model.completion_params}
-              modelId={model.name}
-              setModel={handleModelChange}
-              onCompletionParamsChange={handleCompletionParamsChange}
-              hideDebugWithMultipleModel
-            />
-          </div>
-          <div>
-            <div className="text-[0px]">
-              <div className="mb-1.5 system-sm-semibold-uppercase text-text-secondary">{t('codegen.instruction', { ns: 'appDebug' })}</div>
-              <InstructionEditor
-                editorKey={editorKey}
-                value={instruction}
-                onChange={setInstruction}
-                nodeId={nodeId}
-                generatorType={GeneratorType.code}
-                isShowCurrentBlock={!!currentCode}
+      <DialogContent className="max-h-none w-full min-w-[1140px] overflow-hidden! border-none p-0! text-left align-middle">
+
+        <div className="relative flex h-[680px] flex-wrap">
+          <div className="h-full w-[570px] shrink-0 overflow-y-auto border-r border-divider-regular p-6">
+            <div className="mb-5">
+              <div className={`text-lg leading-[28px] font-bold ${s.textGradient}`}>{t('codegen.title', { ns: 'appDebug' })}</div>
+              <div className="mt-1 text-[13px] font-normal text-text-tertiary">{t('codegen.description', { ns: 'appDebug' })}</div>
+            </div>
+            <div className="mb-4">
+              <ModelParameterModal
+                popupClassName="w-[520px]!"
+                isAdvancedMode={true}
+                provider={model.provider}
+                completionParams={model.completion_params}
+                modelId={model.name}
+                setModel={handleModelChange}
+                onCompletionParamsChange={handleCompletionParamsChange}
+                hideDebugWithMultipleModel
               />
             </div>
-            <IdeaOutput
-              value={ideaOutput}
-              onChange={setIdeaOutput}
-            />
+            <div>
+              <div className="text-[0px]">
+                <div className="mb-1.5 system-sm-semibold-uppercase text-text-secondary">{t('codegen.instruction', { ns: 'appDebug' })}</div>
+                <InstructionEditor
+                  editorKey={editorKey}
+                  value={instruction}
+                  onChange={setInstruction}
+                  nodeId={nodeId}
+                  generatorType={GeneratorType.code}
+                  isShowCurrentBlock={!!currentCode}
+                />
+              </div>
+              <IdeaOutput
+                value={ideaOutput}
+                onChange={setIdeaOutput}
+              />
 
-            <div className="mt-7 flex justify-end space-x-2">
-              <Button onClick={onClose}>{t(`${i18nPrefix}.dismiss`, { ns: 'appDebug' })}</Button>
-              <Button
-                className="flex space-x-1"
-                variant="primary"
-                onClick={onGenerate}
-                disabled={isLoading}
-              >
-                <Generator className="h-4 w-4" />
-                <span className="text-xs font-semibold">{t('codegen.generate', { ns: 'appDebug' })}</span>
-              </Button>
+              <div className="mt-7 flex justify-end space-x-2">
+                <Button onClick={onClose}>{t(`${i18nPrefix}.dismiss`, { ns: 'appDebug' })}</Button>
+                <Button
+                  className="flex space-x-1"
+                  variant="primary"
+                  onClick={onGenerate}
+                  disabled={isLoading}
+                >
+                  <Generator className="h-4 w-4" />
+                  <span className="text-xs font-semibold">{t('codegen.generate', { ns: 'appDebug' })}</span>
+                </Button>
+              </div>
             </div>
           </div>
+          {isLoading && renderLoading}
+          {!isLoading && !current && <ResPlaceholder />}
+          {(!isLoading && current) && (
+            <div className="h-full w-0 grow bg-background-default-subtle p-6 pb-0">
+              <Result
+                current={current!}
+                currentVersionIndex={currentVersionIndex || 0}
+                setCurrentVersionIndex={setCurrentVersionIndex}
+                versions={versions || []}
+                onApply={showConfirmOverwrite}
+                generatorType={GeneratorType.code}
+              />
+            </div>
+          )}
         </div>
-        {isLoading && renderLoading}
-        {!isLoading && !current && <ResPlaceholder />}
-        {(!isLoading && current) && (
-          <div className="h-full w-0 grow bg-background-default-subtle p-6 pb-0">
-            <Result
-              current={current!}
-              currentVersionIndex={currentVersionIndex || 0}
-              setCurrentVersionIndex={setCurrentVersionIndex}
-              versions={versions || []}
-              onApply={showConfirmOverwrite}
-              generatorType={GeneratorType.code}
-            />
-          </div>
-        )}
-      </div>
-      <AlertDialog open={isShowConfirmOverwrite} onOpenChange={open => !open && hideShowConfirmOverwrite()}>
-        <AlertDialogContent>
-          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
-            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
-              {t('codegen.overwriteConfirmTitle', { ns: 'appDebug' })}
-            </AlertDialogTitle>
-            <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
-              {t('codegen.overwriteConfirmMessage', { ns: 'appDebug' })}
-            </AlertDialogDescription>
-          </div>
-          <AlertDialogActions>
-            <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
-            <AlertDialogConfirmButton
-              onClick={() => {
-                hideShowConfirmOverwrite()
-                onFinished(current!)
-              }}
-            >
-              {t('operation.confirm', { ns: 'common' })}
-            </AlertDialogConfirmButton>
-          </AlertDialogActions>
-        </AlertDialogContent>
-      </AlertDialog>
-    </Modal>
+        <AlertDialog open={isShowConfirmOverwrite} onOpenChange={open => !open && hideShowConfirmOverwrite()}>
+          <AlertDialogContent>
+            <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+              <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+                {t('codegen.overwriteConfirmTitle', { ns: 'appDebug' })}
+              </AlertDialogTitle>
+              <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+                {t('codegen.overwriteConfirmMessage', { ns: 'appDebug' })}
+              </AlertDialogDescription>
+            </div>
+            <AlertDialogActions>
+              <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+              <AlertDialogConfirmButton
+                onClick={() => {
+                  hideShowConfirmOverwrite()
+                  onFinished(current!)
+                }}
+              >
+                {t('operation.confirm', { ns: 'common' })}
+              </AlertDialogConfirmButton>
+            </AlertDialogActions>
+          </AlertDialogContent>
+        </AlertDialog>
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/web/app/components/app/configuration/dataset-config/params-config/__tests__/index.spec.tsx b/web/app/components/app/configuration/dataset-config/params-config/__tests__/index.spec.tsx
index b5924a5f23..e9f535999b 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/__tests__/index.spec.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/__tests__/index.spec.tsx
@@ -13,37 +13,6 @@ import { RerankingModeEnum } from '@/models/datasets'
 import { RETRIEVE_TYPE } from '@/types/app'
 import ParamsConfig from '../index'
 
-vi.mock('@headlessui/react', () => ({
-  Dialog: ({ children, className }: { children: React.ReactNode, className?: string }) => (
-    <div role="dialog" className={className}>
-      {children}
-    </div>
-  ),
-  DialogPanel: ({ children, className, ...props }: { children: React.ReactNode, className?: string }) => (
-    <div className={className} {...props}>
-      {children}
-    </div>
-  ),
-  DialogTitle: ({ children, className, ...props }: { children: React.ReactNode, className?: string }) => (
-    <div className={className} {...props}>
-      {children}
-    </div>
-  ),
-  Transition: ({ show, children }: { show: boolean, children: React.ReactNode }) => (show ? <>{children}</> : null),
-  TransitionChild: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-  Switch: ({ checked, onChange, children, ...props }: { checked: boolean, onChange?: (value: boolean) => void, children?: React.ReactNode }) => (
-    <button
-      type="button"
-      role="switch"
-      aria-checked={checked}
-      onClick={() => onChange?.(!checked)}
-      {...props}
-    >
-      {children}
-    </button>
-  ),
-}))
-
 vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
   useModelListAndDefaultModelAndCurrentProviderAndModel: vi.fn(),
   useCurrentProviderAndModel: vi.fn(),
diff --git a/web/app/components/app/configuration/dataset-config/params-config/index.tsx b/web/app/components/app/configuration/dataset-config/params-config/index.tsx
index d4578af1d7..15d34f19d7 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/index.tsx
@@ -3,12 +3,12 @@ import type { DataSet } from '@/models/datasets'
 import type { DatasetConfigs } from '@/models/debug'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import { toast } from '@langgenius/dify-ui/toast'
 import { RiEqualizer2Line } from '@remixicon/react'
 import { memo, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
-import Modal from '@/app/components/base/modal'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useCurrentProviderAndModel, useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import {
@@ -123,32 +123,36 @@ const ParamsConfig = ({
       </Button>
       {
         rerankSettingModalOpen && (
-          <Modal
-            isShow={rerankSettingModalOpen}
-            onClose={() => {
-              setRerankSettingModalOpen(false)
+          <Dialog
+            open={rerankSettingModalOpen}
+            onOpenChange={(open) => {
+              if (!open) {
+                setRerankSettingModalOpen(false)
+              }
             }}
-            className="sm:min-w-[528px]"
           >
-            <ConfigContent
-              datasetConfigs={tempDataSetConfigs}
-              onChange={handleSetTempDataSetConfigs}
-              selectedDatasets={selectedDatasets}
-            />
+            <DialogContent className="w-full max-w-[480px] overflow-hidden! border-none text-left align-middle sm:min-w-[528px]">
 
-            <div className="mt-6 flex justify-end">
-              <Button
-                className="mr-2 shrink-0"
-                onClick={() => {
-                  setTempDataSetConfigs(datasetConfigs)
-                  setRerankSettingModalOpen(false)
-                }}
-              >
-                {t('operation.cancel', { ns: 'common' })}
-              </Button>
-              <Button variant="primary" className="shrink-0" onClick={handleSave}>{t('operation.save', { ns: 'common' })}</Button>
-            </div>
-          </Modal>
+              <ConfigContent
+                datasetConfigs={tempDataSetConfigs}
+                onChange={handleSetTempDataSetConfigs}
+                selectedDatasets={selectedDatasets}
+              />
+
+              <div className="mt-6 flex justify-end">
+                <Button
+                  className="mr-2 shrink-0"
+                  onClick={() => {
+                    setTempDataSetConfigs(datasetConfigs)
+                    setRerankSettingModalOpen(false)
+                  }}
+                >
+                  {t('operation.cancel', { ns: 'common' })}
+                </Button>
+                <Button variant="primary" className="shrink-0" onClick={handleSave}>{t('operation.save', { ns: 'common' })}</Button>
+              </div>
+            </DialogContent>
+          </Dialog>
         )
       }
 
diff --git a/web/app/components/app/create-app-dialog-shell.tsx b/web/app/components/app/create-app-dialog-shell.tsx
new file mode 100644
index 0000000000..80466efaa1
--- /dev/null
+++ b/web/app/components/app/create-app-dialog-shell.tsx
@@ -0,0 +1,51 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
+import { Dialog, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
+
+type CreateAppDialogShellProps = {
+  children: ReactNode
+  contentClassName?: string
+  onClose: () => void
+  show: boolean
+  title: ReactNode
+}
+
+export function CreateAppDialogShell({
+  children,
+  contentClassName,
+  onClose,
+  show,
+  title,
+}: CreateAppDialogShellProps) {
+  return (
+    <Dialog
+      open={show}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen)
+          onClose()
+      }}
+    >
+      <DialogContent
+        backdropClassName="bg-background-overlay-backdrop backdrop-blur-[6px]"
+        className="top-0 left-0 h-screen max-h-none w-screen max-w-none translate-x-0 translate-y-0 overflow-hidden rounded-none border-none bg-transparent p-4 shadow-none"
+      >
+        <div className="h-full w-full rounded-2xl border border-effects-highlight bg-background-default-subtle">
+          <div className={cn('relative h-full overflow-hidden', contentClassName)}>
+            <DialogTitle className="sr-only">{title}</DialogTitle>
+            <button
+              type="button"
+              aria-label="Close"
+              className="absolute top-3 right-3 z-50 flex h-9 w-9 cursor-pointer items-center justify-center rounded-[10px] bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover"
+              onClick={onClose}
+            >
+              <span aria-hidden="true" className="i-ri-close-large-line h-3.5 w-3.5 text-components-button-tertiary-text" />
+            </button>
+            {children}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/web/app/components/app/create-app-dialog/__tests__/index.spec.tsx b/web/app/components/app/create-app-dialog/__tests__/index.spec.tsx
index cc59ce7456..59febff8d5 100644
--- a/web/app/components/app/create-app-dialog/__tests__/index.spec.tsx
+++ b/web/app/components/app/create-app-dialog/__tests__/index.spec.tsx
@@ -25,17 +25,6 @@ vi.mock('../app-list', () => ({
   },
 }))
 
-// Store captured callbacks from useKeyPress
-let capturedEscCallback: (() => void) | undefined
-const mockUseKeyPress = vi.fn((key: string, callback: () => void) => {
-  if (key === 'esc')
-    capturedEscCallback = callback
-})
-
-vi.mock('ahooks', () => ({
-  useKeyPress: (key: string, callback: () => void) => mockUseKeyPress(key, callback),
-}))
-
 describe('CreateAppTemplateDialog', () => {
   const defaultProps = {
     show: false,
@@ -46,53 +35,18 @@ describe('CreateAppTemplateDialog', () => {
 
   beforeEach(() => {
     vi.clearAllMocks()
-    capturedEscCallback = undefined
   })
 
   describe('Rendering', () => {
     it('should not render when show is false', () => {
       render(<CreateAppTemplateDialog {...defaultProps} />)
 
-      // FullScreenModal should not render any content when open is false
-      // FullScreenModal should not render any content when open is false
-      // FullScreenModal should not render any content when open is false
-      // FullScreenModal should not render any content when open is false
-      // FullScreenModal should not render any content when open is false
-      // FullScreenModal should not render any content when open is false
-      // FullScreenModal should not render any content when open is false
-      // FullScreenModal should not render any content when open is false
-      // FullScreenModal should not render any content when open is false
-      // FullScreenModal should not render any content when open is false
-      // FullScreenModal should not render any content when open is false
-      // FullScreenModal should not render any content when open is false
-      // FullScreenModal should not render any content when open is false
-      // FullScreenModal should not render any content when open is false
-      // FullScreenModal should not render any content when open is false
-      // FullScreenModal should not render any content when open is false
-      // FullScreenModal should not render any content when open is false
-      // FullScreenModal should not render any content when open is false
-      // FullScreenModal should not render any content when open is false
-      // FullScreenModal should not render any content when open is false
-      // FullScreenModal should not render any content when open is false
-      // FullScreenModal should not render any content when open is false
-      // FullScreenModal should not render any content when open is false
-      // FullScreenModal should not render any content when open is false
-      // FullScreenModal should not render any content when open is false
-      // FullScreenModal should not render any content when open is false
-      // FullScreenModal should not render any content when open is false
-      // FullScreenModal should not render any content when open is false
-      // FullScreenModal should not render any content when open is false
-      // FullScreenModal should not render any content when open is false
-      // FullScreenModal should not render any content when open is false
-      // FullScreenModal should not render any content when open is false
       expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
     })
 
     it('should render modal when show is true', () => {
       render(<CreateAppTemplateDialog {...defaultProps} show={true} />)
 
-      // FullScreenModal renders with role="dialog"
-      // FullScreenModal renders with role="dialog"
       expect(screen.getByRole('dialog'))!.toBeInTheDocument()
       expect(screen.getByTestId('app-list'))!.toBeInTheDocument()
     })
@@ -113,7 +67,7 @@ describe('CreateAppTemplateDialog', () => {
   })
 
   describe('Props', () => {
-    it('should pass show prop to FullScreenModal', () => {
+    it('should pass show prop to the dialog shell', () => {
       const { rerender } = render(<CreateAppTemplateDialog {...defaultProps} />)
 
       expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
@@ -122,15 +76,17 @@ describe('CreateAppTemplateDialog', () => {
       expect(screen.getByRole('dialog'))!.toBeInTheDocument()
     })
 
-    it('should pass closable prop to FullScreenModal', () => {
-      // Since the FullScreenModal is always rendered with closable=true
-      // we can verify that the modal renders with the proper structure
-      render(<CreateAppTemplateDialog {...defaultProps} show={true} />)
+    it('should close from the dialog shell close button', () => {
+      const mockOnClose = vi.fn()
 
-      // Verify that the modal has the proper dialog structure
-      const dialog = screen.getByRole('dialog')
-      expect(dialog)!.toBeInTheDocument()
-      expect(dialog)!.toHaveAttribute('aria-modal', 'true')
+      render(<CreateAppTemplateDialog {...defaultProps} show={true} onClose={mockOnClose} />)
+
+      const closeButton = screen.getByRole('button', { name: 'Close' })
+      expect(closeButton)!.toBeInTheDocument()
+
+      fireEvent.click(closeButton)
+
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
     })
   })
 
@@ -143,8 +99,6 @@ describe('CreateAppTemplateDialog', () => {
       const dialog = screen.getByRole('dialog')
       expect(dialog)!.toBeInTheDocument()
 
-      // Test that AppList component renders (child component interactions)
-      // Test that AppList component renders (child component interactions)
       expect(screen.getByTestId('app-list'))!.toBeInTheDocument()
       expect(screen.getByTestId('app-list-success'))!.toBeInTheDocument()
     })
@@ -183,65 +137,6 @@ describe('CreateAppTemplateDialog', () => {
     })
   })
 
-  describe('useKeyPress Integration', () => {
-    it('should set up ESC key listener when modal is shown', () => {
-      render(<CreateAppTemplateDialog {...defaultProps} show={true} />)
-
-      expect(mockUseKeyPress).toHaveBeenCalledWith('esc', expect.any(Function))
-    })
-
-    it('should handle ESC key press to close modal', () => {
-      const mockOnClose = vi.fn()
-      render(
-        <CreateAppTemplateDialog
-          {...defaultProps}
-          show={true}
-          onClose={mockOnClose}
-        />,
-      )
-
-      expect(capturedEscCallback).toBeDefined()
-      expect(typeof capturedEscCallback).toBe('function')
-
-      // Simulate ESC key press
-      capturedEscCallback?.()
-
-      expect(mockOnClose).toHaveBeenCalledTimes(1)
-    })
-
-    it('should not call onClose when ESC key is pressed and modal is not shown', () => {
-      const mockOnClose = vi.fn()
-      render(
-        <CreateAppTemplateDialog
-          {...defaultProps}
-          show={false} // Modal not shown
-          onClose={mockOnClose}
-        />,
-      )
-
-      // The callback should still be created but not execute onClose
-      expect(capturedEscCallback).toBeDefined()
-
-      // Simulate ESC key press
-      capturedEscCallback?.()
-
-      // onClose should not be called because modal is not shown
-      expect(mockOnClose).not.toHaveBeenCalled()
-    })
-  })
-
-  describe('Callback Dependencies', () => {
-    it('should create stable callback reference for ESC key handler', () => {
-      render(<CreateAppTemplateDialog {...defaultProps} show={true} />)
-
-      // Verify that useKeyPress was called with a function
-      const calls = mockUseKeyPress.mock.calls
-      expect(calls.length).toBeGreaterThan(0)
-      expect(calls[0]![0]).toBe('esc')
-      expect(typeof calls[0]![1]).toBe('function')
-    })
-  })
-
   describe('Edge Cases', () => {
     it('should handle null props gracefully', () => {
       expect(() => {
diff --git a/web/app/components/app/create-app-dialog/index.tsx b/web/app/components/app/create-app-dialog/index.tsx
index 762dddc028..45950a9f62 100644
--- a/web/app/components/app/create-app-dialog/index.tsx
+++ b/web/app/components/app/create-app-dialog/index.tsx
@@ -1,7 +1,6 @@
 'use client'
-import { useKeyPress } from 'ahooks'
-import { useCallback } from 'react'
-import FullScreenModal from '@/app/components/base/fullscreen-modal'
+import { useTranslation } from 'react-i18next'
+import { CreateAppDialogShell } from '../create-app-dialog-shell'
 import AppList from './app-list'
 
 type CreateAppDialogProps = {
@@ -12,19 +11,10 @@ type CreateAppDialogProps = {
 }
 
 const CreateAppTemplateDialog = ({ show, onSuccess, onClose, onCreateFromBlank }: CreateAppDialogProps) => {
-  const handleEscKeyPress = useCallback(() => {
-    if (show)
-      onClose()
-  }, [show, onClose])
-
-  useKeyPress('esc', handleEscKeyPress)
+  const { t } = useTranslation()
 
   return (
-    <FullScreenModal
-      open={show}
-      closable
-      onClose={onClose}
-    >
+    <CreateAppDialogShell show={show} title={t('newApp.startFromTemplate', { ns: 'app' })} onClose={onClose}>
       <AppList
         onCreateFromBlank={onCreateFromBlank}
         onSuccess={() => {
@@ -32,7 +22,7 @@ const CreateAppTemplateDialog = ({ show, onSuccess, onClose, onCreateFromBlank }
           onClose()
         }}
       />
-    </FullScreenModal>
+    </CreateAppDialogShell>
   )
 }
 
diff --git a/web/app/components/app/create-app-modal/index.tsx b/web/app/components/app/create-app-modal/index.tsx
index 2ff8a0aacd..42514e986d 100644
--- a/web/app/components/app/create-app-modal/index.tsx
+++ b/web/app/components/app/create-app-modal/index.tsx
@@ -7,11 +7,10 @@ import { cn } from '@langgenius/dify-ui/cn'
 import { toast } from '@langgenius/dify-ui/toast'
 import { RiArrowRightLine, RiArrowRightSLine, RiExchange2Fill } from '@remixicon/react'
 import { useDebounceFn, useKeyPress } from 'ahooks'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
 import Divider from '@/app/components/base/divider'
-import FullScreenModal from '@/app/components/base/fullscreen-modal'
 import { BubbleTextMod, ChatBot, ListSparkle, Logic } from '@/app/components/base/icons/src/vender/solid/communication'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
@@ -28,6 +27,7 @@ import { trackCreateApp } from '@/utils/create-app-tracking'
 import { basePath } from '@/utils/var'
 import AppIconPicker from '../../base/app-icon-picker'
 import ShortcutsName from '../../workflow/shortcuts-name'
+import { CreateAppDialogShell } from '../create-app-dialog-shell'
 
 type CreateAppProps = {
   onSuccess: () => void
@@ -36,6 +36,10 @@ type CreateAppProps = {
   defaultAppMode?: AppModeEnum
 }
 
+const shouldExpandBeginnerAppTypes = (appMode?: AppModeEnum) => {
+  return appMode === AppModeEnum.CHAT || appMode === AppModeEnum.AGENT_CHAT || appMode === AppModeEnum.COMPLETION
+}
+
 function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }: CreateAppProps) {
   const { t } = useTranslation()
   const { push } = useRouter()
@@ -45,7 +49,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
   const [showAppIconPicker, setShowAppIconPicker] = useState(false)
   const [name, setName] = useState('')
   const [description, setDescription] = useState('')
-  const [isAppTypeExpanded, setIsAppTypeExpanded] = useState(false)
+  const [isAppTypeExpanded, setIsAppTypeExpanded] = useState(() => shouldExpandBeginnerAppTypes(defaultAppMode))
 
   const { plan, enableBilling } = useProviderContext()
   const isAppsFull = (enableBilling && plan.usage.buildApps >= plan.total.buildApps)
@@ -53,11 +57,6 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
 
   const isCreatingRef = useRef(false)
 
-  useEffect(() => {
-    if (appMode === AppModeEnum.CHAT || appMode === AppModeEnum.AGENT_CHAT || appMode === AppModeEnum.COMPLETION)
-      setIsAppTypeExpanded(true)
-  }, [appMode])
-
   const onCreate = useCallback(async () => {
     if (!appMode) {
       toast.error(t('newApp.appTypeRequired', { ns: 'app' }))
@@ -88,8 +87,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
       localStorage.setItem(NEED_REFRESH_APP_LIST_KEY, '1')
       getRedirection(isCurrentWorkspaceEditor, app, push)
     }
-    catch (e: any) {
-      toast.error(e.message || t('newApp.appCreateFailed', { ns: 'app' }))
+    catch (error) {
+      toast.error(error instanceof Error ? error.message : t('newApp.appCreateFailed', { ns: 'app' }))
     }
     isCreatingRef.current = false
   }, [name, t, appMode, appIcon, description, onSuccess, onClose, push, isCurrentWorkspaceEditor])
@@ -290,15 +289,17 @@ type CreateAppDialogProps = CreateAppProps & {
   show: boolean
 }
 const CreateAppModal = ({ show, onClose, onSuccess, onCreateFromTemplate, defaultAppMode }: CreateAppDialogProps) => {
+  const { t } = useTranslation()
+
   return (
-    <FullScreenModal
-      overflowVisible
-      closable
-      open={show}
+    <CreateAppDialogShell
+      show={show}
+      title={t('newApp.startFromBlank', { ns: 'app' })}
+      contentClassName="overflow-visible"
       onClose={onClose}
     >
       <CreateApp onClose={onClose} onSuccess={onSuccess} onCreateFromTemplate={onCreateFromTemplate} defaultAppMode={defaultAppMode} />
-    </FullScreenModal>
+    </CreateAppDialogShell>
   )
 }
 
diff --git a/web/app/components/app/create-from-dsl-modal/__tests__/index.spec.tsx b/web/app/components/app/create-from-dsl-modal/__tests__/index.spec.tsx
index b3d007c2e7..dac5b22ee6 100644
--- a/web/app/components/app/create-from-dsl-modal/__tests__/index.spec.tsx
+++ b/web/app/components/app/create-from-dsl-modal/__tests__/index.spec.tsx
@@ -307,6 +307,78 @@ describe('CreateFromDSLModal', () => {
     expect(mockTrackCreateApp).toHaveBeenCalledWith({ appMode: AppModeEnum.WORKFLOW })
   })
 
+  it('should close the DSL mismatch modal when dialog requests close', async () => {
+    vi.useFakeTimers()
+    mockImportDSL.mockResolvedValue({
+      id: 'import-close',
+      status: DSLImportStatus.PENDING,
+      imported_dsl_version: '1.0.0',
+      current_dsl_version: '2.0.0',
+    })
+
+    render(
+      <CreateFromDSLModal
+        show
+        onClose={vi.fn()}
+        activeTab={CreateFromDSLModalTab.FROM_URL}
+        dslUrl="https://example.com/app.yml"
+      />,
+    )
+
+    await act(async () => {
+      fireEvent.click(getCreateButton())
+    })
+
+    await act(async () => {
+      vi.advanceTimersByTime(300)
+    })
+
+    expect(screen.getByText('newApp.appCreateDSLErrorTitle'))!.toBeInTheDocument()
+
+    vi.useRealTimers()
+    fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+
+    await waitFor(() => {
+      expect(screen.queryByText('newApp.appCreateDSLErrorTitle')).not.toBeInTheDocument()
+    })
+  })
+
+  it('should close the DSL mismatch modal when cancel is clicked', async () => {
+    vi.useFakeTimers()
+    mockImportDSL.mockResolvedValue({
+      id: 'import-cancel',
+      status: DSLImportStatus.PENDING,
+      imported_dsl_version: '1.0.0',
+      current_dsl_version: '2.0.0',
+    })
+
+    render(
+      <CreateFromDSLModal
+        show
+        onClose={vi.fn()}
+        activeTab={CreateFromDSLModalTab.FROM_URL}
+        dslUrl="https://example.com/app.yml"
+      />,
+    )
+
+    await act(async () => {
+      fireEvent.click(getCreateButton())
+    })
+
+    await act(async () => {
+      vi.advanceTimersByTime(300)
+    })
+
+    expect(screen.getByText('newApp.appCreateDSLErrorTitle'))!.toBeInTheDocument()
+
+    vi.useRealTimers()
+    fireEvent.click(screen.getAllByRole('button', { name: 'newApp.Cancel' }).at(-1)!)
+
+    await waitFor(() => {
+      expect(screen.queryByText('newApp.appCreateDSLErrorTitle')).not.toBeInTheDocument()
+    })
+  })
+
   it('should ignore empty import responses and prevent duplicate submissions while a request is in flight', async () => {
     let resolveImport!: (value: { id: string, status: DSLImportStatus, app_id: string, app_mode: string }) => void
     mockImportDSL.mockImplementationOnce(() => new Promise((resolve) => {
@@ -397,6 +469,7 @@ describe('CreateFromDSLModal', () => {
     mockImportDSL.mockResolvedValueOnce({
       id: 'import-failed',
       status: DSLImportStatus.FAILED,
+      error: 'Invalid YAML format',
     })
     mockImportDSL.mockRejectedValueOnce(new Error('boom'))
 
@@ -412,7 +485,7 @@ describe('CreateFromDSLModal', () => {
     await act(async () => {
       fireEvent.click(getCreateButton())
     })
-    expect(toastMocks.error).toHaveBeenCalledWith('newApp.appCreateFailed')
+    expect(toastMocks.error).toHaveBeenCalledWith('Invalid YAML format')
 
     rerender(
       <CreateFromDSLModal
@@ -427,6 +500,7 @@ describe('CreateFromDSLModal', () => {
       fireEvent.click(getCreateButton())
     })
     expect(toastMocks.error).toHaveBeenCalledTimes(2)
+    expect(toastMocks.error).toHaveBeenLastCalledWith('newApp.appCreateFailed')
   })
 
   it('should handle pending import confirmation failures and cancellation', async () => {
@@ -438,7 +512,7 @@ describe('CreateFromDSLModal', () => {
       current_dsl_version: '2.0.0',
     })
     mockImportDSLConfirm
-      .mockResolvedValueOnce({ status: DSLImportStatus.FAILED })
+      .mockResolvedValueOnce({ status: DSLImportStatus.FAILED, error: 'Confirm failed' })
       .mockRejectedValueOnce(new Error('boom'))
 
     render(
@@ -465,11 +539,12 @@ describe('CreateFromDSLModal', () => {
     await act(async () => {
       fireEvent.click(screen.getAllByRole('button', { name: 'newApp.Confirm' })[0]!)
     })
-    expect(toastMocks.error).toHaveBeenCalledWith('newApp.appCreateFailed')
+    expect(toastMocks.error).toHaveBeenCalledWith('Confirm failed')
 
     await act(async () => {
       fireEvent.click(screen.getAllByRole('button', { name: 'newApp.Confirm' })[0]!)
     })
     expect(toastMocks.error).toHaveBeenCalledTimes(2)
+    expect(toastMocks.error).toHaveBeenLastCalledWith('newApp.appCreateFailed')
   })
 })
diff --git a/web/app/components/app/create-from-dsl-modal/dsl-confirm-modal.tsx b/web/app/components/app/create-from-dsl-modal/dsl-confirm-modal.tsx
index d0c97e185c..726b3f1742 100644
--- a/web/app/components/app/create-from-dsl-modal/dsl-confirm-modal.tsx
+++ b/web/app/components/app/create-from-dsl-modal/dsl-confirm-modal.tsx
@@ -1,6 +1,13 @@
-import { Button } from '@langgenius/dify-ui/button'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@langgenius/dify-ui/alert-dialog'
 import { useTranslation } from 'react-i18next'
-import Modal from '@/app/components/base/modal'
 
 type DSLConfirmModalProps = {
   versions?: {
@@ -20,32 +27,36 @@ const DSLConfirmModal = ({
   const { t } = useTranslation()
 
   return (
-    <Modal
-      isShow
-      onClose={() => onCancel()}
-      className="w-[480px]"
+    <AlertDialog
+      open
+      onOpenChange={(open) => {
+        if (!open)
+          onCancel()
+      }}
     >
-      <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="flex grow flex-col system-md-regular text-text-secondary">
-          <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
-          <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
-          <br />
-          <div>
-            {t('newApp.appCreateDSLErrorPart3', { ns: 'app' })}
-            <span className="system-md-medium">{versions.importedVersion}</span>
-          </div>
-          <div>
-            {t('newApp.appCreateDSLErrorPart4', { ns: 'app' })}
-            <span className="system-md-medium">{versions.systemVersion}</span>
-          </div>
+      <AlertDialogContent className="w-[480px] overflow-hidden! border-none text-left align-middle shadow-xl">
+        <div className="flex flex-col items-start gap-2 self-stretch p-6 pb-4">
+          <AlertDialogTitle className="title-2xl-semi-bold text-text-primary">{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}</AlertDialogTitle>
+          <AlertDialogDescription render={<div />} className="flex grow flex-col system-md-regular text-text-secondary">
+            <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
+            <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
+            <br />
+            <div>
+              {t('newApp.appCreateDSLErrorPart3', { ns: 'app' })}
+              <span className="system-md-medium">{versions.importedVersion}</span>
+            </div>
+            <div>
+              {t('newApp.appCreateDSLErrorPart4', { ns: 'app' })}
+              <span className="system-md-medium">{versions.systemVersion}</span>
+            </div>
+          </AlertDialogDescription>
         </div>
-      </div>
-      <div className="flex items-start justify-end gap-2 self-stretch pt-6">
-        <Button variant="secondary" onClick={() => onCancel()}>{t('newApp.Cancel', { ns: 'app' })}</Button>
-        <Button variant="primary" tone="destructive" onClick={onConfirm} disabled={confirmDisabled}>{t('newApp.Confirm', { ns: 'app' })}</Button>
-      </div>
-    </Modal>
+        <AlertDialogActions>
+          <AlertDialogCancelButton variant="secondary">{t('newApp.Cancel', { ns: 'app' })}</AlertDialogCancelButton>
+          <AlertDialogConfirmButton onClick={onConfirm} disabled={confirmDisabled}>{t('newApp.Confirm', { ns: 'app' })}</AlertDialogConfirmButton>
+        </AlertDialogActions>
+      </AlertDialogContent>
+    </AlertDialog>
   )
 }
 
diff --git a/web/app/components/app/create-from-dsl-modal/index.tsx b/web/app/components/app/create-from-dsl-modal/index.tsx
index bc5f352634..5b8a4e7469 100644
--- a/web/app/components/app/create-from-dsl-modal/index.tsx
+++ b/web/app/components/app/create-from-dsl-modal/index.tsx
@@ -3,14 +3,12 @@
 import type { MouseEventHandler } from 'react'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import { toast } from '@langgenius/dify-ui/toast'
-import { RiCloseLine } from '@remixicon/react'
 import { useDebounceFn, useKeyPress } from 'ahooks'
-import { noop } from 'es-toolkit/function'
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import Modal from '@/app/components/base/modal'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
@@ -47,7 +45,7 @@ export enum CreateFromDSLModalTab {
 const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDSLModalTab.FROM_FILE, dslUrl = '', droppedFile }: CreateFromDSLModalProps) => {
   const { push } = useRouter()
   const { t } = useTranslation()
-  const [currentFile, setDSLFile] = useState<File | undefined>(droppedFile)
+  const [currentFile, setCurrentFile] = useState<File | undefined>(droppedFile)
   const [fileContent, setFileContent] = useState<string>()
   const [currentTab, setCurrentTab] = useState(activeTab)
   const [dslUrlValue, setDslUrlValue] = useState(dslUrl)
@@ -56,22 +54,22 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
   const [importId, setImportId] = useState<string>()
   const { handleCheckPluginDependencies } = usePluginDependencies()
 
-  const readFile = (file: File) => {
+  const readFile = useCallback((file: File) => {
     const reader = new FileReader()
     reader.onload = function (event) {
       const content = event.target?.result
       setFileContent(content as string)
     }
     reader.readAsText(file)
-  }
+  }, [])
 
-  const handleFile = (file?: File) => {
-    setDSLFile(file)
+  const handleFile = useCallback((file?: File) => {
+    setCurrentFile(file)
     if (file)
       readFile(file)
     if (!file)
       setFileContent('')
-  }
+  }, [readFile])
 
   const { isCurrentWorkspaceEditor } = useAppContext()
   const { plan, enableBilling } = useProviderContext()
@@ -82,7 +80,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
   useEffect(() => {
     if (droppedFile)
       handleFile(droppedFile)
-  }, [droppedFile])
+  }, [droppedFile, handleFile])
 
   const onCreate = async (_e?: React.MouseEvent) => {
     if (currentTab === CreateFromDSLModalTab.FROM_FILE && !currentFile)
@@ -141,11 +139,10 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
         setImportId(id)
       }
       else {
-        toast.error(t('newApp.appCreateFailed', { ns: 'app' }))
+        toast.error(response.error || t('newApp.appCreateFailed', { ns: 'app' }))
       }
     }
-    // eslint-disable-next-line unused-imports/no-unused-vars
-    catch (e) {
+    catch {
       toast.error(t('newApp.appCreateFailed', { ns: 'app' }))
     }
     isCreatingRef.current = false
@@ -187,11 +184,10 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
         getRedirection(isCurrentWorkspaceEditor, { id: app_id!, mode: app_mode }, push)
       }
       else if (status === DSLImportStatus.FAILED) {
-        toast.error(t('newApp.appCreateFailed', { ns: 'app' }))
+        toast.error(response.error || t('newApp.appCreateFailed', { ns: 'app' }))
       }
     }
-    // eslint-disable-next-line unused-imports/no-unused-vars
-    catch (e) {
+    catch {
       toast.error(t('newApp.appCreateFailed', { ns: 'app' }))
     }
   }
@@ -219,108 +215,112 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
 
   return (
     <>
-      <Modal
-        className="w-[520px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0 shadow-xl"
-        isShow={show}
-        onClose={noop}
-      >
-        <div className="flex items-center justify-between pt-6 pr-5 pb-3 pl-6 title-2xl-semi-bold text-text-primary">
-          {t('importApp', { ns: 'app' })}
-          <div
-            className="flex h-8 w-8 cursor-pointer items-center"
-            onClick={() => onClose()}
-          >
-            <RiCloseLine className="h-5 w-5 text-text-tertiary" />
+      <Dialog open={show}>
+        <DialogContent className="w-full max-w-[480px]! overflow-hidden! rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0! text-left align-middle shadow-xl">
+
+          <div className="flex items-center justify-between pt-6 pr-5 pb-3 pl-6 title-2xl-semi-bold text-text-primary">
+            {t('importApp', { ns: 'app' })}
+            <div
+              className="flex h-8 w-8 cursor-pointer items-center"
+              onClick={() => onClose()}
+            >
+              <span className="i-ri-close-line h-5 w-5 text-text-tertiary" />
+            </div>
           </div>
-        </div>
-        <div className="flex h-9 items-center space-x-6 border-b border-divider-subtle px-6 system-md-semibold text-text-tertiary">
-          {
-            tabs.map(tab => (
-              <div
-                key={tab.key}
-                className={cn(
-                  'relative flex h-full cursor-pointer items-center',
-                  currentTab === tab.key && 'text-text-primary',
-                )}
-                onClick={() => setCurrentTab(tab.key)}
-              >
-                {tab.label}
-                {
-                  currentTab === tab.key && (
-                    <div className="absolute bottom-0 h-[2px] w-full bg-util-colors-blue-brand-blue-brand-600"></div>
-                  )
-                }
-              </div>
-            ))
-          }
-        </div>
-        <div className="px-6 py-4">
-          {
-            currentTab === CreateFromDSLModalTab.FROM_FILE && (
-              <Uploader
-                className="mt-0"
-                file={currentFile}
-                updateFile={handleFile}
-              />
-            )
-          }
-          {
-            currentTab === CreateFromDSLModalTab.FROM_URL && (
-              <div>
-                <div className="mb-1 system-md-semibold text-text-secondary">DSL URL</div>
-                <Input
-                  placeholder={t('importFromDSLUrlPlaceholder', { ns: 'app' }) || ''}
-                  value={dslUrlValue}
-                  onChange={e => setDslUrlValue(e.target.value)}
+          <div className="flex h-9 items-center space-x-6 border-b border-divider-subtle px-6 system-md-semibold text-text-tertiary">
+            {
+              tabs.map(tab => (
+                <div
+                  key={tab.key}
+                  className={cn(
+                    'relative flex h-full cursor-pointer items-center',
+                    currentTab === tab.key && 'text-text-primary',
+                  )}
+                  onClick={() => setCurrentTab(tab.key)}
+                >
+                  {tab.label}
+                  {
+                    currentTab === tab.key && (
+                      <div className="absolute bottom-0 h-[2px] w-full bg-util-colors-blue-brand-blue-brand-600"></div>
+                    )
+                  }
+                </div>
+              ))
+            }
+          </div>
+          <div className="px-6 py-4">
+            {
+              currentTab === CreateFromDSLModalTab.FROM_FILE && (
+                <Uploader
+                  className="mt-0"
+                  file={currentFile}
+                  updateFile={handleFile}
                 />
-              </div>
-            )
-          }
-        </div>
-        {isAppsFull && (
-          <div className="px-6">
-            <AppsFull className="mt-0" loc="app-create-dsl" />
+              )
+            }
+            {
+              currentTab === CreateFromDSLModalTab.FROM_URL && (
+                <div>
+                  <div className="mb-1 system-md-semibold text-text-secondary">DSL URL</div>
+                  <Input
+                    placeholder={t('importFromDSLUrlPlaceholder', { ns: 'app' }) || ''}
+                    value={dslUrlValue}
+                    onChange={e => setDslUrlValue(e.target.value)}
+                  />
+                </div>
+              )
+            }
           </div>
-        )}
-        <div className="flex justify-end px-6 py-5">
-          <Button className="mr-2" onClick={onClose}>{t('newApp.Cancel', { ns: 'app' })}</Button>
-          <Button
-            disabled={buttonDisabled}
-            variant="primary"
-            onClick={handleCreateApp}
-            className="gap-1"
-          >
-            <span>{t('newApp.Create', { ns: 'app' })}</span>
-            <ShortcutsName keys={['ctrl', '↵']} bgColor="white" />
-          </Button>
-        </div>
-      </Modal>
-      <Modal
-        isShow={showErrorModal}
-        onClose={() => setShowErrorModal(false)}
-        className="w-[480px]"
+          {isAppsFull && (
+            <div className="px-6">
+              <AppsFull className="mt-0" loc="app-create-dsl" />
+            </div>
+          )}
+          <div className="flex justify-end px-6 py-5">
+            <Button className="mr-2" onClick={onClose}>{t('newApp.Cancel', { ns: 'app' })}</Button>
+            <Button
+              disabled={buttonDisabled}
+              variant="primary"
+              onClick={handleCreateApp}
+              className="gap-1"
+            >
+              <span>{t('newApp.Create', { ns: 'app' })}</span>
+              <ShortcutsName keys={['ctrl', '↵']} bgColor="white" />
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+      <Dialog
+        open={showErrorModal}
+        onOpenChange={(open) => {
+          if (!open)
+            setShowErrorModal(false)
+        }}
       >
-        <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="flex grow flex-col system-md-regular text-text-secondary">
-            <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
-            <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
-            <br />
-            <div>
-              {t('newApp.appCreateDSLErrorPart3', { ns: 'app' })}
-              <span className="system-md-medium">{versions?.importedVersion}</span>
-            </div>
-            <div>
-              {t('newApp.appCreateDSLErrorPart4', { ns: 'app' })}
-              <span className="system-md-medium">{versions?.systemVersion}</span>
+        <DialogContent className="w-full max-w-[480px]! overflow-hidden! border-none text-left align-middle">
+
+          <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="flex grow flex-col system-md-regular text-text-secondary">
+              <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
+              <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
+              <br />
+              <div>
+                {t('newApp.appCreateDSLErrorPart3', { ns: 'app' })}
+                <span className="system-md-medium">{versions?.importedVersion}</span>
+              </div>
+              <div>
+                {t('newApp.appCreateDSLErrorPart4', { ns: 'app' })}
+                <span className="system-md-medium">{versions?.systemVersion}</span>
+              </div>
             </div>
           </div>
-        </div>
-        <div className="flex items-start justify-end gap-2 self-stretch pt-6">
-          <Button variant="secondary" onClick={() => setShowErrorModal(false)}>{t('newApp.Cancel', { ns: 'app' })}</Button>
-          <Button variant="primary" tone="destructive" onClick={onDSLConfirm}>{t('newApp.Confirm', { ns: 'app' })}</Button>
-        </div>
-      </Modal>
+          <div className="flex items-start justify-end gap-2 self-stretch pt-6">
+            <Button variant="secondary" onClick={() => setShowErrorModal(false)}>{t('newApp.Cancel', { ns: 'app' })}</Button>
+            <Button variant="primary" tone="destructive" onClick={onDSLConfirm}>{t('newApp.Confirm', { ns: 'app' })}</Button>
+          </div>
+        </DialogContent>
+      </Dialog>
     </>
   )
 }
diff --git a/web/app/components/app/duplicate-modal/index.tsx b/web/app/components/app/duplicate-modal/index.tsx
index e55ac6cf66..7a83c6c277 100644
--- a/web/app/components/app/duplicate-modal/index.tsx
+++ b/web/app/components/app/duplicate-modal/index.tsx
@@ -1,16 +1,14 @@
 'use client'
 import type { AppIconType } from '@/types/app'
 import { Button } from '@langgenius/dify-ui/button'
-import { cn } from '@langgenius/dify-ui/cn'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import { toast } from '@langgenius/dify-ui/toast'
 import { RiCloseLine } from '@remixicon/react'
-import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
 import Input from '@/app/components/base/input'
-import Modal from '@/app/components/base/modal'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { useProviderContext } from '@/context/provider-context'
 import AppIconPicker from '../../base/app-icon-picker'
@@ -71,40 +69,39 @@ const DuplicateAppModal = ({
 
   return (
     <>
-      <Modal
-        isShow={show}
-        onClose={noop}
-        className={cn('relative max-w-[480px]!', 'px-8')}
-      >
-        <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={onHide}>
-          <RiCloseLine className="h-4 w-4 text-text-tertiary" />
-        </div>
-        <div className="relative mt-3 mb-9 text-xl leading-[30px] font-semibold text-text-primary">{t('duplicateTitle', { ns: 'app' })}</div>
-        <div className="mb-9 system-sm-regular text-text-secondary">
-          <div className="mb-2 system-md-medium">{t('appCustomize.subTitle', { ns: 'explore' })}</div>
-          <div className="flex items-center justify-between space-x-2">
-            <AppIcon
-              size="large"
-              onClick={() => { setShowAppIconPicker(true) }}
-              className="cursor-pointer"
-              iconType={appIcon.type}
-              icon={appIcon.type === 'image' ? appIcon.fileId : appIcon.icon}
-              background={appIcon.type === 'image' ? undefined : appIcon.background}
-              imageUrl={appIcon.type === 'image' ? appIcon.url : undefined}
-            />
-            <Input
-              value={name}
-              onChange={e => setName(e.target.value)}
-              className="h-10"
-            />
+      <Dialog open={show}>
+        <DialogContent className="w-full max-w-[480px]! overflow-hidden! border-none px-8 text-left align-middle">
+
+          <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={onHide}>
+            <RiCloseLine className="h-4 w-4 text-text-tertiary" />
           </div>
-          {isAppsFull && <AppsFull className="mt-4" loc="app-duplicate-create" />}
-        </div>
-        <div className="flex flex-row-reverse">
-          <Button disabled={isAppsFull} className="ml-2 w-24" variant="primary" onClick={submit}>{t('duplicate', { ns: 'app' })}</Button>
-          <Button className="w-24" onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
-        </div>
-      </Modal>
+          <div className="relative mt-3 mb-9 text-xl leading-[30px] font-semibold text-text-primary">{t('duplicateTitle', { ns: 'app' })}</div>
+          <div className="mb-9 system-sm-regular text-text-secondary">
+            <div className="mb-2 system-md-medium">{t('appCustomize.subTitle', { ns: 'explore' })}</div>
+            <div className="flex items-center justify-between space-x-2">
+              <AppIcon
+                size="large"
+                onClick={() => { setShowAppIconPicker(true) }}
+                className="cursor-pointer"
+                iconType={appIcon.type}
+                icon={appIcon.type === 'image' ? appIcon.fileId : appIcon.icon}
+                background={appIcon.type === 'image' ? undefined : appIcon.background}
+                imageUrl={appIcon.type === 'image' ? appIcon.url : undefined}
+              />
+              <Input
+                value={name}
+                onChange={e => setName(e.target.value)}
+                className="h-10"
+              />
+            </div>
+            {isAppsFull && <AppsFull className="mt-4" loc="app-duplicate-create" />}
+          </div>
+          <div className="flex flex-row-reverse">
+            <Button disabled={isAppsFull} className="ml-2 w-24" variant="primary" onClick={submit}>{t('duplicate', { ns: 'app' })}</Button>
+            <Button className="w-24" onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
+          </div>
+        </DialogContent>
+      </Dialog>
       {showAppIconPicker && (
         <AppIconPicker
           onSelect={(payload) => {
diff --git a/web/app/components/app/switch-app-modal/index.tsx b/web/app/components/app/switch-app-modal/index.tsx
index 8da710210e..c46ce7ad13 100644
--- a/web/app/components/app/switch-app-modal/index.tsx
+++ b/web/app/components/app/switch-app-modal/index.tsx
@@ -12,9 +12,9 @@ import {
 } from '@langgenius/dify-ui/alert-dialog'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import { toast } from '@langgenius/dify-ui/toast'
 import { RiCloseLine } from '@remixicon/react'
-import { noop } from 'es-toolkit/function'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore as useAppStore } from '@/app/components/app/store'
@@ -22,7 +22,6 @@ import AppIcon from '@/app/components/base/app-icon'
 import Checkbox from '@/app/components/base/checkbox'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import Input from '@/app/components/base/input'
-import Modal from '@/app/components/base/modal'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
@@ -109,69 +108,68 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
 
   return (
     <>
-      <Modal
-        className={cn('w-[600px] max-w-[600px] p-8')}
-        isShow={show}
-        onClose={noop}
-      >
-        <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={onClose}>
-          <RiCloseLine className="h-4 w-4 text-text-tertiary" />
-        </div>
-        <div className="h-12 w-12 rounded-xl border-[0.5px] border-divider-regular bg-background-default-burn p-3 shadow-xl">
-          <AlertTriangle className="h-6 w-6 text-[rgb(247,144,9)]" />
-        </div>
-        <div className="relative mt-3 text-xl leading-[30px] font-semibold text-text-primary">{t('switch', { ns: 'app' })}</div>
-        <div className="my-1 text-sm leading-5 text-text-tertiary">
-          <span>{t('switchTipStart', { ns: 'app' })}</span>
-          <span className="font-medium text-text-secondary">{t('switchTip', { ns: 'app' })}</span>
-          <span>{t('switchTipEnd', { ns: 'app' })}</span>
-        </div>
-        <div className="pb-4">
-          <div className="py-2 text-sm leading-[20px] font-medium text-text-primary">{t('switchLabel', { ns: 'app' })}</div>
-          <div className="flex items-center justify-between space-x-2">
-            <AppIcon
-              size="large"
-              onClick={() => { setShowAppIconPicker(true) }}
-              className="cursor-pointer"
-              iconType={appIcon.type}
-              icon={appIcon.type === 'image' ? appIcon.fileId : appIcon.icon}
-              background={appIcon.type === 'image' ? undefined : appIcon.background}
-              imageUrl={appIcon.type === 'image' ? appIcon.url : undefined}
-            />
-            <Input
-              value={name}
-              onChange={e => setName(e.target.value)}
-              placeholder={t('newApp.appNamePlaceholder', { ns: 'app' }) || ''}
-              className="h-10 grow"
-            />
+      <Dialog open={show}>
+        <DialogContent className={cn('w-full overflow-hidden! border-none text-left align-middle', cn('w-[600px] max-w-[600px] p-8'))}>
+
+          <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={onClose}>
+            <RiCloseLine className="h-4 w-4 text-text-tertiary" />
           </div>
-          {showAppIconPicker && (
-            <AppIconPicker
-              onSelect={(payload) => {
-                setAppIcon(payload)
-                setShowAppIconPicker(false)
-              }}
-              onClose={() => {
-                setAppIcon(appDetail.icon_type === 'image'
-                  ? { type: 'image' as const, url: appDetail.icon_url, fileId: appDetail.icon }
-                  : { type: 'emoji' as const, icon: appDetail.icon, background: appDetail.icon_background })
-                setShowAppIconPicker(false)
-              }}
-            />
-          )}
-        </div>
-        {isAppsFull && <AppsFull loc="app-switch" />}
-        <div className="flex items-center justify-between pt-6">
-          <div className="flex items-center">
-            <Checkbox className="shrink-0" checked={removeOriginal} onCheck={() => setRemoveOriginal(!removeOriginal)} />
-            <div className="ml-2 cursor-pointer text-sm leading-5 text-text-secondary" onClick={() => setRemoveOriginal(!removeOriginal)}>{t('removeOriginal', { ns: 'app' })}</div>
+          <div className="h-12 w-12 rounded-xl border-[0.5px] border-divider-regular bg-background-default-burn p-3 shadow-xl">
+            <AlertTriangle className="h-6 w-6 text-[rgb(247,144,9)]" />
           </div>
-          <div className="flex items-center">
-            <Button className="mr-2" onClick={onClose}>{t('newApp.Cancel', { ns: 'app' })}</Button>
-            <Button className="border-red-700" disabled={isAppsFull || !name} variant="primary" tone="destructive" onClick={goStart}>{t('switchStart', { ns: 'app' })}</Button>
+          <div className="relative mt-3 text-xl leading-[30px] font-semibold text-text-primary">{t('switch', { ns: 'app' })}</div>
+          <div className="my-1 text-sm leading-5 text-text-tertiary">
+            <span>{t('switchTipStart', { ns: 'app' })}</span>
+            <span className="font-medium text-text-secondary">{t('switchTip', { ns: 'app' })}</span>
+            <span>{t('switchTipEnd', { ns: 'app' })}</span>
           </div>
-        </div>
-      </Modal>
+          <div className="pb-4">
+            <div className="py-2 text-sm leading-[20px] font-medium text-text-primary">{t('switchLabel', { ns: 'app' })}</div>
+            <div className="flex items-center justify-between space-x-2">
+              <AppIcon
+                size="large"
+                onClick={() => { setShowAppIconPicker(true) }}
+                className="cursor-pointer"
+                iconType={appIcon.type}
+                icon={appIcon.type === 'image' ? appIcon.fileId : appIcon.icon}
+                background={appIcon.type === 'image' ? undefined : appIcon.background}
+                imageUrl={appIcon.type === 'image' ? appIcon.url : undefined}
+              />
+              <Input
+                value={name}
+                onChange={e => setName(e.target.value)}
+                placeholder={t('newApp.appNamePlaceholder', { ns: 'app' }) || ''}
+                className="h-10 grow"
+              />
+            </div>
+            {showAppIconPicker && (
+              <AppIconPicker
+                onSelect={(payload) => {
+                  setAppIcon(payload)
+                  setShowAppIconPicker(false)
+                }}
+                onClose={() => {
+                  setAppIcon(appDetail.icon_type === 'image'
+                    ? { type: 'image' as const, url: appDetail.icon_url, fileId: appDetail.icon }
+                    : { type: 'emoji' as const, icon: appDetail.icon, background: appDetail.icon_background })
+                  setShowAppIconPicker(false)
+                }}
+              />
+            )}
+          </div>
+          {isAppsFull && <AppsFull loc="app-switch" />}
+          <div className="flex items-center justify-between pt-6">
+            <div className="flex items-center">
+              <Checkbox className="shrink-0" checked={removeOriginal} onCheck={() => setRemoveOriginal(!removeOriginal)} />
+              <div className="ml-2 cursor-pointer text-sm leading-5 text-text-secondary" onClick={() => setRemoveOriginal(!removeOriginal)}>{t('removeOriginal', { ns: 'app' })}</div>
+            </div>
+            <div className="flex items-center">
+              <Button className="mr-2" onClick={onClose}>{t('newApp.Cancel', { ns: 'app' })}</Button>
+              <Button className="border-red-700" disabled={isAppsFull || !name} variant="primary" tone="destructive" onClick={goStart}>{t('switchStart', { ns: 'app' })}</Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
       <AlertDialog
         open={showConfirmDelete}
         onOpenChange={handleConfirmDeleteOpenChange}
diff --git a/web/app/components/app/workflow-log/__tests__/list.spec.tsx b/web/app/components/app/workflow-log/__tests__/list.spec.tsx
index 35e6369e67..2259ed30c5 100644
--- a/web/app/components/app/workflow-log/__tests__/list.spec.tsx
+++ b/web/app/components/app/workflow-log/__tests__/list.spec.tsx
@@ -460,9 +460,10 @@ describe('WorkflowAppLogList', () => {
       // Open drawer
       const dataRows = screen.getAllByRole('row')
       await user.click(dataRows[1]!)
-      await screen.findByRole('dialog')
+      const dialog = await screen.findByRole('dialog')
 
       // Close drawer using Escape key
+      dialog.focus()
       await user.keyboard('{Escape}')
 
       await waitFor(() => {
diff --git a/web/app/components/base/app-icon-picker/index.tsx b/web/app/components/base/app-icon-picker/index.tsx
index 64a88f16e1..52a52541e9 100644
--- a/web/app/components/base/app-icon-picker/index.tsx
+++ b/web/app/components/base/app-icon-picker/index.tsx
@@ -4,15 +4,14 @@ import type { OnImageInput } from './ImageInput'
 import type { AppIconType, ImageFile } from '@/types/app'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import { RiImageCircleAiLine } from '@remixicon/react'
-import { noop } from 'es-toolkit/function'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { DISABLE_UPLOAD_IMAGE_AS_ICON } from '@/config'
 import Divider from '../divider'
 import EmojiPickerInner from '../emoji-picker/Inner'
 import { useLocalFileUploader } from '../image-uploader/hooks'
-import Modal from '../modal'
 import ImageInput from './ImageInput'
 import s from './style.module.css'
 import getCroppedImg from './utils'
@@ -45,7 +44,6 @@ const AppIconPicker: FC<AppIconPickerProps> = ({
   onSelect,
   onClose,
   initialEmoji,
-  className,
 }) => {
   const { t } = useTranslation()
 
@@ -113,57 +111,54 @@ const AppIconPicker: FC<AppIconPickerProps> = ({
   }
 
   return (
-    <Modal
-      onClose={noop}
-      isShow
-      closable={false}
-      wrapperClassName={className}
-      className={cn(s.container, 'h-[462px]! w-[362px]! p-0!')}
-    >
-      {!DISABLE_UPLOAD_IMAGE_AS_ICON && (
-        <div className="w-full p-2 pb-0">
-          <div className="flex items-center justify-center gap-2 rounded-xl bg-background-body p-1 text-text-primary">
-            {tabs.map(tab => (
-              <button
-                type="button"
-                key={tab.key}
-                className={cn(
-                  'flex h-8 flex-1 shrink-0 items-center justify-center rounded-lg p-2 system-sm-medium text-text-tertiary',
-                  activeTab === tab.key && 'bg-components-main-nav-nav-button-bg-active text-text-accent shadow-md',
-                )}
-                onClick={() => setActiveTab(tab.key as AppIconType)}
-              >
-                {tab.icon}
-                {' '}
+    <Dialog open>
+      <DialogContent className={cn('max-h-none w-full overflow-hidden! border-none text-left align-middle', s.container, 'h-[462px]! w-[362px]! p-0!')}>
+
+        {!DISABLE_UPLOAD_IMAGE_AS_ICON && (
+          <div className="w-full p-2 pb-0">
+            <div className="flex items-center justify-center gap-2 rounded-xl bg-background-body p-1 text-text-primary">
+              {tabs.map(tab => (
+                <button
+                  type="button"
+                  key={tab.key}
+                  className={cn(
+                    'flex h-8 flex-1 shrink-0 items-center justify-center rounded-lg p-2 system-sm-medium text-text-tertiary',
+                    activeTab === tab.key && 'bg-components-main-nav-nav-button-bg-active text-text-accent shadow-md',
+                  )}
+                  onClick={() => setActiveTab(tab.key as AppIconType)}
+                >
+                  {tab.icon}
+                  {' '}
 &nbsp;
-                {tab.label}
-              </button>
-            ))}
+                  {tab.label}
+                </button>
+              ))}
+            </div>
           </div>
+        )}
+
+        {activeTab === 'emoji' && (
+          <EmojiPickerInner
+            className={cn('flex-1 overflow-hidden pt-2')}
+            emoji={initialEmoji?.icon}
+            background={initialEmoji?.background ?? undefined}
+            onSelect={handleSelectEmoji}
+          />
+        )}
+        {activeTab === 'image' && <ImageInput className={cn('flex-1 overflow-hidden')} onImageInput={handleImageInput} />}
+
+        <Divider className="m-0" />
+        <div className="flex w-full items-center justify-center gap-2 p-3">
+          <Button className="w-full" onClick={() => onClose?.()}>
+            {t('iconPicker.cancel', { ns: 'app' })}
+          </Button>
+
+          <Button variant="primary" className="w-full" disabled={uploading} loading={uploading} onClick={handleSelect}>
+            {t('iconPicker.ok', { ns: 'app' })}
+          </Button>
         </div>
-      )}
-
-      {activeTab === 'emoji' && (
-        <EmojiPickerInner
-          className={cn('flex-1 overflow-hidden pt-2')}
-          emoji={initialEmoji?.icon}
-          background={initialEmoji?.background ?? undefined}
-          onSelect={handleSelectEmoji}
-        />
-      )}
-      {activeTab === 'image' && <ImageInput className={cn('flex-1 overflow-hidden')} onImageInput={handleImageInput} />}
-
-      <Divider className="m-0" />
-      <div className="flex w-full items-center justify-center gap-2 p-3">
-        <Button className="w-full" onClick={() => onClose?.()}>
-          {t('iconPicker.cancel', { ns: 'app' })}
-        </Button>
-
-        <Button variant="primary" className="w-full" disabled={uploading} loading={uploading} onClick={handleSelect}>
-          {t('iconPicker.ok', { ns: 'app' })}
-        </Button>
-      </div>
-    </Modal>
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/__tests__/index.spec.tsx b/web/app/components/base/chat/chat-with-history/sidebar/__tests__/index.spec.tsx
index 33e25dbe01..19513deff1 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/__tests__/index.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/__tests__/index.spec.tsx
@@ -62,18 +62,15 @@ vi.mock('@/next/navigation', () => ({
   usePathname: () => '/test',
 }))
 
-// Mock Modal to avoid Headless UI issues in tests
-vi.mock('@/app/components/base/modal', () => ({
-  default: ({ children, isShow, title }: { children: React.ReactNode, isShow: boolean, title: React.ReactNode }) => {
-    if (!isShow)
-      return null
-    return (
-      <div data-testid="modal">
-        {!!title && <div data-testid="modal-title">{title}</div>}
-        {children}
-      </div>
-    )
-  },
+vi.mock('@langgenius/dify-ui/dialog', () => ({
+  Dialog: ({ children, open }: { children: React.ReactNode, open?: boolean }) =>
+    open === false ? null : <>{children}</>,
+  DialogContent: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="modal">{children}</div>
+  ),
+  DialogTitle: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="modal-title">{children}</div>
+  ),
 }))
 
 describe('Sidebar Index', () => {
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/__tests__/rename-modal.spec.tsx b/web/app/components/base/chat/chat-with-history/sidebar/__tests__/rename-modal.spec.tsx
index 754d5c89b4..9c741beb0e 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/__tests__/rename-modal.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/__tests__/rename-modal.spec.tsx
@@ -4,25 +4,13 @@ import userEvent from '@testing-library/user-event'
 import * as ReactI18next from 'react-i18next'
 import RenameModal from '../rename-modal'
 
-vi.mock('@/app/components/base/modal', () => ({
-  default: ({
-    title,
-    isShow,
-    children,
-  }: {
-    title: ReactNode
-    isShow: boolean
-    children: ReactNode
-  }) => {
-    if (!isShow)
-      return null
-    return (
-      <div role="dialog">
-        <h2>{title}</h2>
-        {children}
-      </div>
-    )
-  },
+vi.mock('@langgenius/dify-ui/dialog', () => ({
+  Dialog: ({ children, open }: { children: ReactNode, open?: boolean }) =>
+    open === false ? null : <>{children}</>,
+  DialogContent: ({ children }: { children: ReactNode }) => (
+    <div role="dialog">{children}</div>
+  ),
+  DialogTitle: ({ children }: { children: ReactNode }) => <h2>{children}</h2>,
 }))
 
 describe('RenameModal', () => {
diff --git a/web/app/components/base/content-dialog/__tests__/index.spec.tsx b/web/app/components/base/content-dialog/__tests__/index.spec.tsx
deleted file mode 100644
index e987d306a1..0000000000
--- a/web/app/components/base/content-dialog/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import ContentDialog from '../index'
-
-describe('ContentDialog', () => {
-  it('renders children when show is true', async () => {
-    render(
-      <ContentDialog show={true}>
-        <div>Dialog body</div>
-      </ContentDialog>,
-    )
-
-    await screen.findByText('Dialog body')
-    expect(screen.getByText('Dialog body')).toBeInTheDocument()
-
-    const backdrop = document.querySelector('.bg-app-detail-overlay-bg')
-    expect(backdrop).toBeTruthy()
-  })
-
-  it('does not render children when show is false', () => {
-    render(
-      <ContentDialog show={false}>
-        <div>Hidden content</div>
-      </ContentDialog>,
-    )
-
-    expect(screen.queryByText('Hidden content')).toBeNull()
-    expect(document.querySelector('.bg-app-detail-overlay-bg')).toBeNull()
-  })
-
-  it('calls onClose when backdrop is clicked', async () => {
-    const onClose = vi.fn()
-    render(
-      <ContentDialog show={true} onClose={onClose}>
-        <div>Body</div>
-      </ContentDialog>,
-    )
-
-    const user = userEvent.setup()
-    const backdrop = document.querySelector('.bg-app-detail-overlay-bg') as HTMLElement | null
-    expect(backdrop).toBeTruthy()
-
-    await user.click(backdrop!)
-    expect(onClose).toHaveBeenCalledTimes(1)
-  })
-
-  it('applies provided className to the content panel', () => {
-    render(
-      <ContentDialog show={true} className="my-panel-class">
-        <div>Panel content</div>
-      </ContentDialog>,
-    )
-
-    const contentPanel = document.querySelector('.bg-app-detail-bg') as HTMLElement | null
-    expect(contentPanel).toBeTruthy()
-    expect(contentPanel?.className).toContain('my-panel-class')
-    expect(screen.getByText('Panel content')).toBeInTheDocument()
-  })
-})
diff --git a/web/app/components/base/content-dialog/index.stories.tsx b/web/app/components/base/content-dialog/index.stories.tsx
deleted file mode 100644
index 8ddd5c667d..0000000000
--- a/web/app/components/base/content-dialog/index.stories.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { useEffect, useState } from 'react'
-import ContentDialog from '.'
-
-type Props = React.ComponentProps<typeof ContentDialog>
-
-const meta = {
-  title: 'Base/Feedback/ContentDialog',
-  component: ContentDialog,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component: 'Sliding panel overlay used in the app detail view. Includes dimmed backdrop and animated entrance/exit transitions.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    className: {
-      control: 'text',
-      description: 'Additional classes applied to the sliding panel container.',
-    },
-    show: {
-      control: 'boolean',
-      description: 'Controls visibility of the dialog.',
-    },
-    onClose: {
-      control: false,
-      description: 'Invoked when the overlay/backdrop is clicked.',
-    },
-    children: {
-      control: false,
-      table: { disable: true },
-    },
-  },
-  args: {
-    show: false,
-    children: null,
-  },
-} satisfies Meta<typeof ContentDialog>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const DemoWrapper = (props: Props) => {
-  const [open, setOpen] = useState(props.show)
-
-  useEffect(() => {
-    setOpen(props.show)
-  }, [props.show])
-
-  return (
-    <div className="relative h-[480px] w-full overflow-hidden bg-gray-100">
-      <div className="flex h-full items-center justify-center">
-        <button
-          className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700"
-          onClick={() => setOpen(true)}
-        >
-          Open dialog
-        </button>
-      </div>
-
-      <ContentDialog
-        {...props}
-        show={open}
-        onClose={() => {
-          props.onClose?.()
-          setOpen(false)
-        }}
-      >
-        <div className="flex h-full flex-col space-y-4 bg-white p-6">
-          <h2 className="text-lg font-semibold text-gray-900">Plan summary</h2>
-          <p className="text-sm text-gray-600">
-            Use this area to present rich content for the selected run, configuration details, or
-            any supporting context.
-          </p>
-          <div className="flex-1 overflow-y-auto rounded-md border border-dashed border-gray-200 bg-gray-50 p-4 text-xs text-gray-500">
-            Scrollable placeholder content. Add domain-specific information, activity logs, or
-            editors in the real application.
-          </div>
-          <div className="flex justify-end gap-2 pt-4">
-            <button
-              className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-50"
-              onClick={() => setOpen(false)}
-            >
-              Cancel
-            </button>
-            <button className="rounded-md bg-primary-600 px-3 py-1.5 text-sm text-white hover:bg-primary-700">
-              Apply changes
-            </button>
-          </div>
-        </div>
-      </ContentDialog>
-    </div>
-  )
-}
-
-export const Default: Story = {
-  args: {
-    children: null,
-  },
-  render: args => <DemoWrapper {...args} />,
-}
-
-export const NarrowPanel: Story = {
-  render: args => <DemoWrapper {...args} />,
-  args: {
-    className: 'max-w-[420px]',
-    children: null,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Applies a custom width class to show the dialog as a narrower information panel.',
-      },
-    },
-  },
-}
diff --git a/web/app/components/base/content-dialog/index.tsx b/web/app/components/base/content-dialog/index.tsx
deleted file mode 100644
index 5367a35fc4..0000000000
--- a/web/app/components/base/content-dialog/index.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import type { ReactNode } from 'react'
-import { Transition, TransitionChild } from '@headlessui/react'
-import { cn } from '@langgenius/dify-ui/cn'
-
-type ContentDialogProps = {
-  className?: string
-  show: boolean
-  onClose?: () => void
-  children: ReactNode
-}
-
-const ContentDialog = ({
-  className,
-  show,
-  onClose,
-  children,
-}: ContentDialogProps) => {
-  return (
-    <Transition
-      show={show}
-      as="div"
-      className="absolute top-0 left-0 z-[70] box-border h-full w-full p-2"
-    >
-      <TransitionChild>
-        <div
-          className={cn('absolute inset-0 left-0 w-full bg-app-detail-overlay-bg', 'duration-300 ease-in data-closed:opacity-0', 'data-enter:opacity-100', 'data-leave:opacity-0')}
-          onClick={onClose}
-        />
-      </TransitionChild>
-
-      <TransitionChild>
-        <div className={cn('absolute left-0 w-full border-r border-divider-burn bg-app-detail-bg', 'duration-100 ease-in data-closed:-translate-x-full', 'data-enter:translate-x-0 data-enter:duration-300 data-enter:ease-out', 'data-leave:-translate-x-full data-leave:duration-200 data-leave:ease-in', className)}>
-          {children}
-        </div>
-      </TransitionChild>
-    </Transition>
-  )
-}
-
-export default ContentDialog
diff --git a/web/app/components/base/date-and-time-picker/date-picker/index.tsx b/web/app/components/base/date-and-time-picker/date-picker/index.tsx
index 7858fa2fbe..60888a6ec4 100644
--- a/web/app/components/base/date-and-time-picker/date-picker/index.tsx
+++ b/web/app/components/base/date-and-time-picker/date-picker/index.tsx
@@ -31,7 +31,6 @@ const DatePicker = ({
   needTimePicker = true,
   renderTrigger,
   triggerWrapClassName,
-  popupZIndexClassname,
   noConfirm,
   getIsDateDisabled,
 }: DatePickerProps) => {
@@ -236,7 +235,6 @@ const DatePicker = ({
       <PopoverContent
         placement="bottom-end"
         sideOffset={0}
-        className={popupZIndexClassname}
         popupClassName="border-none bg-transparent shadow-none"
       >
         <div className="mt-1 w-[252px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg shadow-shadow-shadow-5">
diff --git a/web/app/components/base/date-and-time-picker/index.stories.tsx b/web/app/components/base/date-and-time-picker/index.stories.tsx
index 1ed35afe88..430688d0e8 100644
--- a/web/app/components/base/date-and-time-picker/index.stories.tsx
+++ b/web/app/components/base/date-and-time-picker/index.stories.tsx
@@ -35,7 +35,6 @@ const DatePickerPlayground = (props: DatePickerProps) => {
   return (
     <div className="inline-flex flex-col items-start gap-3">
       <DatePicker
-        popupZIndexClassname="z-50"
         {...props}
         value={value}
         onChange={setValue}
@@ -65,7 +64,6 @@ export const Playground: Story = {
 const [value, setValue] = useState(getDateWithTimezone({}))
 
 <DatePicker
-  popupZIndexClassname="z-50"
   value={value}
   timezone={dayjs.tz.guess()}
   onChange={setValue}
diff --git a/web/app/components/base/date-and-time-picker/types.ts b/web/app/components/base/date-and-time-picker/types.ts
index 7dda1d013c..8d27f03ad1 100644
--- a/web/app/components/base/date-and-time-picker/types.ts
+++ b/web/app/components/base/date-and-time-picker/types.ts
@@ -30,7 +30,6 @@ export type DatePickerProps = {
   triggerWrapClassName?: string
   renderTrigger?: (props: TriggerProps) => React.ReactElement
   minuteFilter?: (minutes: string[]) => string[]
-  popupZIndexClassname?: string
   noConfirm?: boolean
   getIsDateDisabled?: (date: Dayjs) => boolean
 }
diff --git a/web/app/components/base/dialog/__tests__/index.spec.tsx b/web/app/components/base/dialog/__tests__/index.spec.tsx
deleted file mode 100644
index 241e89be26..0000000000
--- a/web/app/components/base/dialog/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import { act, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { describe, expect, it, vi } from 'vitest'
-import CustomDialog from '../index'
-
-describe('CustomDialog Component', () => {
-  const setup = () => userEvent.setup()
-
-  it('should render children and title when show is true', async () => {
-    render(
-      <CustomDialog show={true} title="Modal Title">
-        <div data-testid="dialog-content">Main Content</div>
-      </CustomDialog>,
-    )
-
-    const title = await screen.findByText('Modal Title')
-    const content = screen.getByTestId('dialog-content')
-
-    expect(title).toBeInTheDocument()
-    expect(content).toBeInTheDocument()
-    expect(screen.getByRole('dialog')).toBeInTheDocument()
-  })
-
-  it('should not render anything when show is false', async () => {
-    render(
-      <CustomDialog show={false} title="Hidden Title">
-        <div>Content</div>
-      </CustomDialog>,
-    )
-
-    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
-    expect(screen.queryByText('Hidden Title')).not.toBeInTheDocument()
-  })
-
-  it('should apply the correct semantic tag to title using titleAs', async () => {
-    render(
-      <CustomDialog show={true} title="Semantic Title" titleAs="h1">
-        Content
-      </CustomDialog>,
-    )
-
-    const title = await screen.findByRole('heading', { level: 1 })
-    expect(title).toHaveTextContent('Semantic Title')
-  })
-
-  it('should render the footer only when the prop is provided', async () => {
-    const { rerender } = render(
-      <CustomDialog show={true}>Content</CustomDialog>,
-    )
-
-    await screen.findByRole('dialog')
-    expect(screen.queryByText('Footer Content')).not.toBeInTheDocument()
-
-    rerender(
-      <CustomDialog show={true} footer={<div data-testid="footer-node">Footer Content</div>}>
-        Content
-      </CustomDialog>,
-    )
-
-    expect(await screen.findByTestId('footer-node')).toBeInTheDocument()
-  })
-
-  it('should call onClose when Escape key is pressed', async () => {
-    const user = setup()
-    const onCloseMock = vi.fn()
-
-    render(
-      <CustomDialog show={true} onClose={onCloseMock}>
-        Content
-      </CustomDialog>,
-    )
-
-    await screen.findByRole('dialog')
-
-    await act(async () => {
-      await user.keyboard('{Escape}')
-    })
-
-    expect(onCloseMock).toHaveBeenCalledTimes(1)
-  })
-
-  it('should call onClose when the backdrop is clicked', async () => {
-    const user = setup()
-    const onCloseMock = vi.fn()
-
-    render(
-      <CustomDialog show={true} onClose={onCloseMock}>
-        Content
-      </CustomDialog>,
-    )
-
-    await screen.findByRole('dialog')
-
-    const backdrop = document.querySelector('.bg-background-overlay-backdrop')
-    expect(backdrop).toBeInTheDocument()
-
-    await act(async () => {
-      await user.click(backdrop!)
-    })
-
-    expect(onCloseMock).toHaveBeenCalledTimes(1)
-  })
-
-  it('should apply custom class names to internal elements', async () => {
-    render(
-      <CustomDialog
-        show={true}
-        title="Title"
-        className="custom-panel-container"
-        titleClassName="custom-title-style"
-        bodyClassName="custom-body-style"
-        footer="Footer"
-        footerClassName="custom-footer-style"
-      >
-        <div data-testid="content">Content</div>
-      </CustomDialog>,
-    )
-
-    await screen.findByRole('dialog')
-
-    expect(document.querySelector('.custom-panel-container')).toBeInTheDocument()
-    expect(document.querySelector('.custom-title-style')).toBeInTheDocument()
-    expect(document.querySelector('.custom-body-style')).toBeInTheDocument()
-    expect(document.querySelector('.custom-footer-style')).toBeInTheDocument()
-  })
-
-  it('should maintain accessibility attributes (aria-modal)', async () => {
-    render(
-      <CustomDialog show={true} title="Accessibility Test">
-        <button>Focusable Item</button>
-      </CustomDialog>,
-    )
-
-    const dialog = await screen.findByRole('dialog')
-    // Headless UI should automatically set aria-modal="true"
-    expect(dialog).toHaveAttribute('aria-modal', 'true')
-  })
-})
diff --git a/web/app/components/base/dialog/index.stories.tsx b/web/app/components/base/dialog/index.stories.tsx
deleted file mode 100644
index 2c9863da3b..0000000000
--- a/web/app/components/base/dialog/index.stories.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { useEffect, useState } from 'react'
-import Dialog from '.'
-
-const meta = {
-  title: 'Base/Feedback/Dialog',
-  component: Dialog,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component: 'Modal dialog built on Headless UI. Provides animated overlay, title slot, and optional footer region.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    className: {
-      control: 'text',
-      description: 'Additional classes applied to the panel.',
-    },
-    titleClassName: {
-      control: 'text',
-      description: 'Extra classes for the title element.',
-    },
-    bodyClassName: {
-      control: 'text',
-      description: 'Extra classes for the content area.',
-    },
-    footerClassName: {
-      control: 'text',
-      description: 'Extra classes for the footer container.',
-    },
-    title: {
-      control: 'text',
-      description: 'Dialog title.',
-    },
-    show: {
-      control: 'boolean',
-      description: 'Controls visibility of the dialog.',
-    },
-    onClose: {
-      control: false,
-      description: 'Called when the dialog backdrop or close handler fires.',
-    },
-  },
-  args: {
-    title: 'Manage API Keys',
-    show: false,
-    children: null,
-  },
-} satisfies Meta<typeof Dialog>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const DialogDemo = (props: React.ComponentProps<typeof Dialog>) => {
-  const [open, setOpen] = useState(props.show)
-  useEffect(() => {
-    setOpen(props.show)
-  }, [props.show])
-
-  return (
-    <div className="relative flex h-[480px] items-center justify-center bg-gray-100">
-      <button
-        className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700"
-        onClick={() => setOpen(true)}
-      >
-        Show dialog
-      </button>
-
-      <Dialog
-        {...props}
-        show={open}
-        onClose={() => {
-          props.onClose?.()
-          setOpen(false)
-        }}
-      >
-        <div className="space-y-4 text-sm text-gray-600">
-          <p>
-            Centralize API key management for collaborators. You can revoke, rotate, or generate new keys directly from this dialog.
-          </p>
-          <div className="rounded-lg border border-dashed border-gray-200 bg-gray-50 p-4 text-xs text-gray-500">
-            This placeholder area represents a form or table that would live inside the dialog body.
-          </div>
-        </div>
-      </Dialog>
-    </div>
-  )
-}
-
-export const Default: Story = {
-  render: args => <DialogDemo {...args} />,
-  args: {
-    footer: (
-      <>
-        <button className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-50">
-          Cancel
-        </button>
-        <button className="rounded-md bg-primary-600 px-3 py-1.5 text-sm text-white hover:bg-primary-700">
-          Save changes
-        </button>
-      </>
-    ),
-  },
-}
-
-export const WithoutFooter: Story = {
-  render: args => <DialogDemo {...args} />,
-  args: {
-    footer: undefined,
-    title: 'Read-only summary',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Demonstrates the dialog when no footer actions are provided.',
-      },
-    },
-  },
-}
-
-export const CustomStyling: Story = {
-  render: args => <DialogDemo {...args} />,
-  args: {
-    className: 'max-w-[560px] bg-white/95 backdrop-blur-sm',
-    bodyClassName: 'bg-gray-50 rounded-xl p-5',
-    footerClassName: 'justify-between px-4 pb-4 pt-4',
-    titleClassName: 'text-lg text-primary-600',
-    footer: (
-      <>
-        <span className="text-xs text-gray-400">Last synced 2 minutes ago</span>
-        <div className="flex gap-2">
-          <button className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-50">
-            Close
-          </button>
-          <button className="rounded-md bg-primary-600 px-3 py-1.5 text-sm text-white hover:bg-primary-700">
-            Refresh data
-          </button>
-        </div>
-      </>
-    ),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Applies custom classes to the panel, body, title, and footer to match different surfaces.',
-      },
-    },
-  },
-}
diff --git a/web/app/components/base/dialog/index.tsx b/web/app/components/base/dialog/index.tsx
deleted file mode 100644
index 84d0c9b999..0000000000
--- a/web/app/components/base/dialog/index.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import type { ElementType, ReactNode } from 'react'
-import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react'
-import { cn } from '@langgenius/dify-ui/cn'
-import { Fragment, useCallback } from 'react'
-
-// https://headlessui.com/react/dialog
-
-type DialogProps = {
-  className?: string
-  titleClassName?: string
-  bodyClassName?: string
-  footerClassName?: string
-  titleAs?: ElementType
-  title?: ReactNode
-  children: ReactNode
-  footer?: ReactNode
-  show: boolean
-  onClose?: () => void
-}
-
-const CustomDialog = ({
-  className,
-  titleClassName,
-  bodyClassName,
-  footerClassName,
-  titleAs,
-  title,
-  children,
-  footer,
-  show,
-  onClose,
-}: DialogProps) => {
-  const close = useCallback(() => onClose?.(), [onClose])
-  return (
-    <Transition appear show={show} as={Fragment}>
-      <Dialog as="div" className="relative z-40" onClose={close}>
-        <TransitionChild>
-          <div className={cn('fixed inset-0 bg-background-overlay-backdrop backdrop-blur-[6px]', 'duration-300 ease-in data-closed:opacity-0', 'data-enter:opacity-100', 'data-leave:opacity-0')} />
-        </TransitionChild>
-
-        <div className="fixed inset-0 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center">
-            <TransitionChild>
-              <DialogPanel className={cn('w-full max-w-[800px] overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-6 shadow-xl transition-all', 'duration-100 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)}>
-                {Boolean(title) && (
-                  <DialogTitle
-                    as={titleAs || 'h3'}
-                    className={cn('pr-8 pb-3 title-2xl-semi-bold text-text-primary', titleClassName)}
-                  >
-                    {title}
-                  </DialogTitle>
-                )}
-                <div className={cn(bodyClassName)}>
-                  {children}
-                </div>
-                {Boolean(footer) && (
-                  <div className={cn('flex items-center justify-end gap-2 px-6 pt-3 pb-6', footerClassName)}>
-                    {footer}
-                  </div>
-                )}
-              </DialogPanel>
-            </TransitionChild>
-          </div>
-        </div>
-      </Dialog>
-    </Transition>
-  )
-}
-
-export default CustomDialog
diff --git a/web/app/components/base/drawer-plus/__tests__/index.spec.tsx b/web/app/components/base/drawer-plus/__tests__/index.spec.tsx
index 2d3667dd8f..b3a7d2cd2b 100644
--- a/web/app/components/base/drawer-plus/__tests__/index.spec.tsx
+++ b/web/app/components/base/drawer-plus/__tests__/index.spec.tsx
@@ -172,8 +172,7 @@ describe('DrawerPlus', () => {
         />,
       )
 
-      const dialog = screen.getByRole('dialog')
-      expect(dialog.className).toContain('custom-dialog')
+      expect(document.querySelector('.custom-dialog')).toBeInTheDocument()
     })
 
     it('should apply custom contentClassName', () => {
diff --git a/web/app/components/base/drawer/__tests__/index.spec.tsx b/web/app/components/base/drawer/__tests__/index.spec.tsx
index cd7eb937cc..1f9c1c258f 100644
--- a/web/app/components/base/drawer/__tests__/index.spec.tsx
+++ b/web/app/components/base/drawer/__tests__/index.spec.tsx
@@ -6,52 +6,60 @@ import Drawer from '../index'
 // Capture dialog onClose for testing
 let capturedDialogOnClose: (() => void) | null = null
 
-// Mock @headlessui/react
-vi.mock('@headlessui/react', () => ({
-  Dialog: ({ children, open, onClose, className, unmount }: {
-    children: React.ReactNode
-    open: boolean
-    onClose: () => void
-    className: string
-    unmount: boolean
-  }) => {
-    capturedDialogOnClose = onClose
-    if (!open)
-      return null
-    return (
+// Mock Base UI Dialog anatomy; behavior is covered at the legacy wrapper boundary here.
+vi.mock('@base-ui/react/dialog', () => ({
+  Dialog: {
+    Root: ({ children, open, onOpenChange }: {
+      children: React.ReactNode
+      open: boolean
+      onOpenChange: (open: boolean) => void
+    }) => {
+      capturedDialogOnClose = () => onOpenChange(false)
+      if (!open)
+        return null
+      return <>{children}</>
+    },
+    Portal: ({ children }: {
+      children: React.ReactNode
+    }) => <>{children}</>,
+    Backdrop: ({ children, className }: {
+      children?: React.ReactNode
+      className: string
+    }) => (
       <div
-        data-testid="dialog"
-        data-open={open}
-        data-unmount={unmount}
+        data-testid="dialog-backdrop"
         className={className}
-        role="dialog"
+        onClick={() => capturedDialogOnClose?.()}
       >
         {children}
       </div>
-    )
+    ),
+    Popup: ({ children, className, ...props }: {
+      children: React.ReactNode
+      className: string
+    }) => (
+      <div
+        data-testid="dialog"
+        className={className}
+        role="dialog"
+        {...props}
+      >
+        {children}
+      </div>
+    ),
+    Title: ({ children, className, render, ...props }: {
+      children: React.ReactNode
+      className?: string
+      render?: React.ReactElement
+    }) => {
+      const Component = render?.type ?? 'h2'
+      return (
+        <Component data-testid="dialog-title" className={className} {...props}>
+          {children}
+        </Component>
+      )
+    },
   },
-  DialogBackdrop: ({ children, className, onClick }: {
-    children?: React.ReactNode
-    className: string
-    onClick: () => void
-  }) => (
-    <div
-      data-testid="dialog-backdrop"
-      className={className}
-      onClick={onClick}
-    >
-      {children}
-    </div>
-  ),
-  DialogTitle: ({ children, as: _as, className, ...props }: {
-    children: React.ReactNode
-    as?: string
-    className?: string
-  }) => (
-    <div data-testid="dialog-title" className={className} {...props}>
-      {children}
-    </div>
-  ),
 }))
 
 // Mock XMarkIcon
@@ -343,10 +351,10 @@ describe('Drawer', () => {
   describe('Custom ClassNames', () => {
     it('should apply custom dialogClassName', () => {
       // Arrange & Act
-      renderDrawer({ dialogClassName: 'custom-dialog-class' })
+      const { container } = renderDrawer({ dialogClassName: 'custom-dialog-class' })
 
       // Assert
-      expect(screen.getByRole('dialog').className).toContain('custom-dialog-class')
+      expect(container.querySelector('.custom-dialog-class')).toBeInTheDocument()
     })
 
     it('should apply custom dialogBackdropClassName', () => {
diff --git a/web/app/components/base/drawer/index.stories.tsx b/web/app/components/base/drawer/index.stories.tsx
index ca7b3bc243..57ab35281c 100644
--- a/web/app/components/base/drawer/index.stories.tsx
+++ b/web/app/components/base/drawer/index.stories.tsx
@@ -10,7 +10,7 @@ const meta = {
     layout: 'fullscreen',
     docs: {
       description: {
-        component: 'Sliding panel built on Headless UI dialog primitives. Supports optional mask, custom footer, and close behaviour.',
+        component: 'Sliding panel built on Base UI dialog primitives. Supports optional mask, custom footer, and close behaviour.',
       },
     },
   },
diff --git a/web/app/components/base/drawer/index.tsx b/web/app/components/base/drawer/index.tsx
index 88c5874dd5..d6c0d58e7c 100644
--- a/web/app/components/base/drawer/index.tsx
+++ b/web/app/components/base/drawer/index.tsx
@@ -1,5 +1,6 @@
 'use client'
-import { Dialog, DialogBackdrop, DialogTitle } from '@headlessui/react'
+// eslint-disable-next-line no-restricted-imports -- Temporary legacy drawer exception: remove this direct Base UI wrapper after callers migrate to dify-ui drawer primitives.
+import { Dialog as BaseDialog } from '@base-ui/react/dialog'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
@@ -47,80 +48,81 @@ export default function Drawer({
 }: IDrawerProps) {
   const { t } = useTranslation()
   return (
-    <Dialog
-      unmount={unmount}
+    <BaseDialog.Root
       open={isOpen}
-      onClose={() => {
-        if (!clickOutsideNotOpen)
+      disablePointerDismissal={clickOutsideNotOpen}
+      onOpenChange={(open) => {
+        if (!open && !clickOutsideNotOpen)
           onClose()
       }}
-      className={cn('fixed inset-0 z-30 overflow-y-auto', dialogClassName)}
     >
-      <div className={cn('flex h-screen w-screen justify-end', positionCenter && 'justify-center!', containerClassName)}>
-        {/* mask */}
-        {!noOverlay && (
-          <DialogBackdrop
-            className={cn('fixed inset-0 z-40', mask && 'bg-black/30', dialogBackdropClassName)}
-            onClick={() => {
-              if (!clickOutsideNotOpen)
-                onClose()
-            }}
-          />
-        )}
-        <div className={cn('relative z-50 flex w-full max-w-sm flex-col justify-between overflow-hidden bg-components-panel-bg p-6 text-left align-middle shadow-xl', panelClassName)}>
-          <>
-            <div className="flex justify-between">
-              {title && (
-                <DialogTitle
-                  as="h3"
-                  className="text-lg leading-6 font-medium text-text-primary"
-                >
-                  {title}
-                </DialogTitle>
-              )}
-              {showClose && (
-                <DialogTitle className="mb-4 flex cursor-pointer items-center" as="div">
-                  <span
-                    className="i-heroicons-x-mark h-4 w-4 text-text-tertiary"
-                    onClick={onClose}
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter' || e.key === ' ')
-                        onClose()
-                    }}
-                    role="button"
-                    tabIndex={0}
-                    aria-label={t('operation.close', { ns: 'common' })}
-                    data-testid="close-icon"
-                  />
-                </DialogTitle>
-              )}
-            </div>
-            {description && <div className="mt-2 text-xs font-normal text-text-tertiary">{description}</div>}
-            {children}
-          </>
-          {footer || (footer === null
-            ? null
-            : (
-                <div className="mt-10 flex flex-row justify-end">
-                  <Button
-                    className="mr-2"
-                    onClick={() => {
-                      onCancel?.()
-                    }}
-                  >
-                    {t('operation.cancel', { ns: 'common' })}
-                  </Button>
-                  <Button
-                    onClick={() => {
-                      onOk?.()
-                    }}
-                  >
-                    {t('operation.save', { ns: 'common' })}
-                  </Button>
+      <BaseDialog.Portal>
+        <div className={cn('fixed inset-0 z-30 overflow-y-auto', dialogClassName)}>
+          <div className={cn('flex h-screen w-screen justify-end', positionCenter && 'justify-center!', containerClassName)}>
+            {!noOverlay && (
+              <BaseDialog.Backdrop
+                className={cn('fixed inset-0 z-40', mask && 'bg-black/30', dialogBackdropClassName)}
+              />
+            )}
+            <BaseDialog.Popup
+              data-unmount={unmount}
+              className={cn('relative z-50 flex w-full max-w-sm flex-col justify-between overflow-hidden bg-components-panel-bg p-6 text-left align-middle shadow-xl', panelClassName)}
+            >
+              <>
+                <div className="flex justify-between">
+                  {title && (
+                    <BaseDialog.Title
+                      render={<h3 />}
+                      className="text-lg leading-6 font-medium text-text-primary"
+                    >
+                      {title}
+                    </BaseDialog.Title>
+                  )}
+                  {showClose && (
+                    <div className="mb-4 flex cursor-pointer items-center">
+                      <span
+                        className="i-heroicons-x-mark h-4 w-4 text-text-tertiary"
+                        onClick={onClose}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter' || e.key === ' ')
+                            onClose()
+                        }}
+                        role="button"
+                        tabIndex={0}
+                        aria-label={t('operation.close', { ns: 'common' })}
+                        data-testid="close-icon"
+                      />
+                    </div>
+                  )}
                 </div>
-              ))}
+                {description && <div className="mt-2 text-xs font-normal text-text-tertiary">{description}</div>}
+                {children}
+              </>
+              {footer || (footer === null
+                ? null
+                : (
+                    <div className="mt-10 flex flex-row justify-end">
+                      <Button
+                        className="mr-2"
+                        onClick={() => {
+                          onCancel?.()
+                        }}
+                      >
+                        {t('operation.cancel', { ns: 'common' })}
+                      </Button>
+                      <Button
+                        onClick={() => {
+                          onOk?.()
+                        }}
+                      >
+                        {t('operation.save', { ns: 'common' })}
+                      </Button>
+                    </div>
+                  ))}
+            </BaseDialog.Popup>
+          </div>
         </div>
-      </div>
-    </Dialog>
+      </BaseDialog.Portal>
+    </BaseDialog.Root>
   )
 }
diff --git a/web/app/components/base/emoji-picker/index.tsx b/web/app/components/base/emoji-picker/index.tsx
index 75112e70eb..9ff81b999f 100644
--- a/web/app/components/base/emoji-picker/index.tsx
+++ b/web/app/components/base/emoji-picker/index.tsx
@@ -2,12 +2,11 @@
 import type { FC } from 'react'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
-import { noop } from 'es-toolkit/function'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
-import Modal from '@/app/components/base/modal'
 import EmojiPickerInner from './Inner'
 
 type IEmojiPickerProps = {
@@ -34,39 +33,42 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({
 
   return isModal
     ? (
-        <Modal
-          onClose={noop}
-          isShow
-          closable={false}
-          wrapperClassName={className}
-          className={cn('flex max-h-[552px] flex-col rounded-xl border-[0.5px] border-divider-subtle p-0 shadow-xl')}
-        >
-          <EmojiPickerInner
-            className="pt-3"
-            onSelect={handleSelectEmoji}
-          />
-          <Divider className="mt-3 mb-0" />
-          <div className="flex w-full items-center justify-center gap-2 p-3">
-            <Button
-              className="w-full"
-              onClick={() => {
-                onClose?.()
-              }}
-            >
-              {t('iconPicker.cancel', { ns: 'app' })}
-            </Button>
-            <Button
-              disabled={selectedEmoji === '' || !selectedBackground}
-              variant="primary"
-              className="w-full"
-              onClick={() => {
-                onSelect?.(selectedEmoji, selectedBackground!)
-              }}
-            >
-              {t('iconPicker.ok', { ns: 'app' })}
-            </Button>
-          </div>
-        </Modal>
+        <Dialog open>
+          <DialogContent
+            className={cn(
+              'max-h-none w-full overflow-hidden! text-left align-middle',
+              'flex max-h-[552px] flex-col rounded-xl border-[0.5px] border-divider-subtle p-0 shadow-xl',
+              className,
+            )}
+          >
+
+            <EmojiPickerInner
+              className="pt-3"
+              onSelect={handleSelectEmoji}
+            />
+            <Divider className="mt-3 mb-0" />
+            <div className="flex w-full items-center justify-center gap-2 p-3">
+              <Button
+                className="w-full"
+                onClick={() => {
+                  onClose?.()
+                }}
+              >
+                {t('iconPicker.cancel', { ns: 'app' })}
+              </Button>
+              <Button
+                disabled={selectedEmoji === '' || !selectedBackground}
+                variant="primary"
+                className="w-full"
+                onClick={() => {
+                  onSelect?.(selectedEmoji, selectedBackground!)
+                }}
+              >
+                {t('iconPicker.ok', { ns: 'app' })}
+              </Button>
+            </div>
+          </DialogContent>
+        </Dialog>
       )
     : <></>
 }
diff --git a/web/app/components/base/features/new-feature-panel/__tests__/dialog-wrapper.spec.tsx b/web/app/components/base/features/new-feature-panel/__tests__/feature-panel-drawer.spec.tsx
similarity index 51%
rename from web/app/components/base/features/new-feature-panel/__tests__/dialog-wrapper.spec.tsx
rename to web/app/components/base/features/new-feature-panel/__tests__/feature-panel-drawer.spec.tsx
index 374976c366..a4c45ff1e4 100644
--- a/web/app/components/base/features/new-feature-panel/__tests__/dialog-wrapper.spec.tsx
+++ b/web/app/components/base/features/new-feature-panel/__tests__/feature-panel-drawer.spec.tsx
@@ -1,7 +1,7 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import DialogWrapper from '../dialog-wrapper'
+import { FeaturePanelDrawer } from '../feature-panel-drawer'
 
-describe('DialogWrapper', () => {
+describe('FeaturePanelDrawer', () => {
   beforeEach(() => {
     vi.clearAllMocks()
   })
@@ -9,9 +9,9 @@ describe('DialogWrapper', () => {
   describe('Rendering', () => {
     it('should render children when show is true', () => {
       render(
-        <DialogWrapper show>
+        <FeaturePanelDrawer show>
           <div data-testid="content">Content</div>
-        </DialogWrapper>,
+        </FeaturePanelDrawer>,
       )
 
       expect(screen.getByTestId('content')).toBeInTheDocument()
@@ -19,9 +19,9 @@ describe('DialogWrapper', () => {
 
     it('should not render children when show is false', () => {
       render(
-        <DialogWrapper show={false}>
+        <FeaturePanelDrawer show={false}>
           <div data-testid="content">Content</div>
-        </DialogWrapper>,
+        </FeaturePanelDrawer>,
       )
 
       expect(screen.queryByTestId('content')).not.toBeInTheDocument()
@@ -31,45 +31,44 @@ describe('DialogWrapper', () => {
   describe('Props', () => {
     it('should apply workflow styles by default', () => {
       render(
-        <DialogWrapper show>
+        <FeaturePanelDrawer show>
           <div data-testid="content">Content</div>
-        </DialogWrapper>,
+        </FeaturePanelDrawer>,
       )
 
-      const wrapper = screen.getByTestId('content').parentElement
-      expect(wrapper).toHaveClass('rounded-l-2xl')
-      expect(wrapper).not.toHaveClass('rounded-2xl')
+      const drawer = screen.getByRole('dialog')
+      expect(drawer).toHaveClass('data-[swipe-direction=right]:!top-[112px]')
+      expect(drawer).toHaveClass('data-[swipe-direction=right]:!rounded-l-2xl')
+      expect(drawer).not.toHaveClass('data-[swipe-direction=right]:!rounded-2xl')
     })
 
     it('should apply non-workflow styles when inWorkflow is false', () => {
       render(
-        <DialogWrapper show inWorkflow={false}>
+        <FeaturePanelDrawer show inWorkflow={false}>
           <div data-testid="content">Content</div>
-        </DialogWrapper>,
+        </FeaturePanelDrawer>,
       )
 
-      const content = screen.getByTestId('content')
-      const panel = content.parentElement
-      const layoutContainer = screen.getByTestId('dialog-layout-container')
+      const drawer = screen.getByRole('dialog')
+      const layoutContainer = screen.getByTestId('feature-panel-drawer-layout')
 
-      expect(layoutContainer).toHaveClass('pr-2')
-      expect(layoutContainer).toHaveClass('pt-[64px]')
-      expect(layoutContainer).not.toHaveClass('pt-[112px]')
+      expect(layoutContainer).toBeInTheDocument()
 
-      expect(panel).toHaveClass('rounded-2xl')
-      expect(panel).toHaveClass('border-[0.5px]')
-      expect(panel).not.toHaveClass('rounded-l-2xl')
+      expect(drawer).toHaveClass('data-[swipe-direction=right]:!top-[64px]')
+      expect(drawer).toHaveClass('data-[swipe-direction=right]:!right-2')
+      expect(drawer).toHaveClass('data-[swipe-direction=right]:!rounded-2xl')
+      expect(drawer).toHaveClass('data-[swipe-direction=right]:!border-[0.5px]')
+      expect(drawer).not.toHaveClass('data-[swipe-direction=right]:!rounded-l-2xl')
     })
 
     it('should accept custom className', () => {
       render(
-        <DialogWrapper show className="custom-class">
+        <FeaturePanelDrawer show className="custom-class">
           <div data-testid="content">Content</div>
-        </DialogWrapper>,
+        </FeaturePanelDrawer>,
       )
 
-      const wrapper = screen.getByTestId('content').parentElement
-      expect(wrapper).toHaveClass('custom-class')
+      expect(screen.getByRole('dialog')).toHaveClass('custom-class')
     })
   })
 
@@ -78,9 +77,9 @@ describe('DialogWrapper', () => {
       const onClose = vi.fn()
 
       render(
-        <DialogWrapper show onClose={onClose}>
+        <FeaturePanelDrawer show onClose={onClose}>
           <div>Content</div>
-        </DialogWrapper>,
+        </FeaturePanelDrawer>,
       )
 
       fireEvent.keyDown(document, { key: 'Escape' })
@@ -92,9 +91,9 @@ describe('DialogWrapper', () => {
 
     it('should not throw when escape is pressed without onClose', () => {
       render(
-        <DialogWrapper show>
+        <FeaturePanelDrawer show>
           <div>Content</div>
-        </DialogWrapper>,
+        </FeaturePanelDrawer>,
       )
 
       expect(() => {
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx
index 13b4133ab6..73f76a6ce6 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx
@@ -2,11 +2,11 @@
 import type { FC } from 'react'
 import type { AnnotationReplyConfig } from '@/models/debug'
 import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Modal from '@/app/components/base/modal'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
@@ -58,52 +58,61 @@ const ConfigParamModal: FC<Props> = ({ isShow, onHide: doHide, onSave, isInit, a
     setLoading(false)
   }
   return (
-    <Modal isShow={isShow} onClose={onHide} className="!mt-14 !w-[640px] !max-w-none !p-6">
-      <div className="mb-2 title-2xl-semi-bold text-text-primary">
-        {t(`initSetup.${isInit ? 'title' : 'configTitle'}`, { ns: 'appAnnotation' })}
-      </div>
+    <Dialog
+      open={isShow}
+      onOpenChange={(open) => {
+        if (!open)
+          onHide()
+      }}
+    >
+      <DialogContent className="!mt-14 !w-[640px] !max-w-none overflow-hidden! border-none !p-6 text-left align-middle">
 
-      <div className="mt-6 space-y-3">
-        <Item title={t('feature.annotation.scoreThreshold.title', { ns: 'appDebug' })} tooltip={t('feature.annotation.scoreThreshold.description', { ns: 'appDebug' })}>
-          <ScoreSlider
-            className="mt-1"
-            value={(annotationConfig.score_threshold || ANNOTATION_DEFAULT.score_threshold) * 100}
-            onChange={(val) => {
-              setAnnotationConfig({
-                ...annotationConfig,
-                score_threshold: val / 100,
-              })
-            }}
-          />
-        </Item>
+        <div className="mb-2 title-2xl-semi-bold text-text-primary">
+          {t(`initSetup.${isInit ? 'title' : 'configTitle'}`, { ns: 'appAnnotation' })}
+        </div>
 
-        <Item title={t('modelProvider.embeddingModel.key', { ns: 'common' })} tooltip={t('embeddingModelSwitchTip', { ns: 'appAnnotation' })}>
-          <div className="pt-1">
-            <ModelSelector
-              defaultModel={embeddingModel && {
-                provider: embeddingModel.providerName,
-                model: embeddingModel.modelName,
-              }}
-              modelList={embeddingsModelList}
-              onSelect={(val) => {
-                setEmbeddingModel({
-                  providerName: val.provider,
-                  modelName: val.model,
+        <div className="mt-6 space-y-3">
+          <Item title={t('feature.annotation.scoreThreshold.title', { ns: 'appDebug' })} tooltip={t('feature.annotation.scoreThreshold.description', { ns: 'appDebug' })}>
+            <ScoreSlider
+              className="mt-1"
+              value={(annotationConfig.score_threshold || ANNOTATION_DEFAULT.score_threshold) * 100}
+              onChange={(val) => {
+                setAnnotationConfig({
+                  ...annotationConfig,
+                  score_threshold: val / 100,
                 })
               }}
             />
-          </div>
-        </Item>
-      </div>
+          </Item>
 
-      <div className="mt-6 flex justify-end gap-2">
-        <Button onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
-        <Button variant="primary" onClick={handleSave} loading={isLoading}>
-          <div></div>
-          <div>{t(`initSetup.${isInit ? 'confirmBtn' : 'configConfirmBtn'}`, { ns: 'appAnnotation' })}</div>
-        </Button>
-      </div>
-    </Modal>
+          <Item title={t('modelProvider.embeddingModel.key', { ns: 'common' })} tooltip={t('embeddingModelSwitchTip', { ns: 'appAnnotation' })}>
+            <div className="pt-1">
+              <ModelSelector
+                defaultModel={embeddingModel && {
+                  provider: embeddingModel.providerName,
+                  model: embeddingModel.modelName,
+                }}
+                modelList={embeddingsModelList}
+                onSelect={(val) => {
+                  setEmbeddingModel({
+                    providerName: val.provider,
+                    modelName: val.model,
+                  })
+                }}
+              />
+            </div>
+          </Item>
+        </div>
+
+        <div className="mt-6 flex justify-end gap-2">
+          <Button onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
+          <Button variant="primary" onClick={handleSave} loading={isLoading}>
+            <div></div>
+            <div>{t(`initSetup.${isInit ? 'confirmBtn' : 'configConfirmBtn'}`, { ns: 'appAnnotation' })}</div>
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
   )
 }
 export default React.memo(ConfigParamModal)
diff --git a/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx b/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx
deleted file mode 100644
index d3e0814777..0000000000
--- a/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import type { ReactNode } from 'react'
-import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
-import { cn } from '@langgenius/dify-ui/cn'
-import { Fragment, useCallback } from 'react'
-
-type DialogProps = {
-  className?: string
-  children: ReactNode
-  show: boolean
-  onClose?: () => void
-  inWorkflow?: boolean
-}
-
-const DialogWrapper = ({
-  className,
-  children,
-  show,
-  onClose,
-  inWorkflow = true,
-}: DialogProps) => {
-  const close = useCallback(() => onClose?.(), [onClose])
-  return (
-    <Transition appear show={show} as={Fragment}>
-      <Dialog as="div" className="relative z-40" onClose={close}>
-        <TransitionChild>
-          <div className={cn(
-            'fixed inset-0 bg-black/25',
-            'data-closed:opacity-0',
-            'data-enter:opacity-100 data-enter:duration-300 data-enter:ease-out',
-            'data-leave:opacity-0 data-leave:duration-200 data-leave:ease-in',
-          )}
-          />
-        </TransitionChild>
-
-        <div className="fixed inset-0">
-          <div className={cn('flex min-h-full flex-col items-end justify-center pb-2', inWorkflow ? 'pt-[112px]' : 'pt-[64px] pr-2')} data-testid="dialog-layout-container">
-            <TransitionChild>
-              <DialogPanel className={cn(
-                'relative flex h-0 w-[420px] grow flex-col overflow-hidden border-components-panel-border bg-components-panel-bg-alt p-0 text-left align-middle shadow-xl transition-all',
-                inWorkflow ? 'rounded-l-2xl border-t-[0.5px] border-b-[0.5px] border-l-[0.5px]' : 'rounded-2xl border-[0.5px]',
-                'data-closed:scale-95 data-closed:opacity-0',
-                'data-enter:scale-100 data-enter:opacity-100 data-enter:duration-300 data-enter:ease-out',
-                'data-leave:scale-95 data-leave:opacity-0 data-leave:duration-200 data-leave:ease-in',
-                className,
-              )}
-              >
-                {children}
-              </DialogPanel>
-            </TransitionChild>
-          </div>
-        </div>
-      </Dialog>
-    </Transition>
-  )
-}
-
-export default DialogWrapper
diff --git a/web/app/components/base/features/new-feature-panel/feature-panel-drawer.tsx b/web/app/components/base/features/new-feature-panel/feature-panel-drawer.tsx
new file mode 100644
index 0000000000..42a89a156d
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/feature-panel-drawer.tsx
@@ -0,0 +1,60 @@
+import type { ReactNode } from 'react'
+import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Drawer,
+  DrawerBackdrop,
+  DrawerContent,
+  DrawerPopup,
+  DrawerPortal,
+  DrawerViewport,
+} from '@langgenius/dify-ui/drawer'
+import { useCallback } from 'react'
+
+type FeaturePanelDrawerProps = {
+  className?: string
+  children: ReactNode
+  show: boolean
+  onClose?: () => void
+  inWorkflow?: boolean
+}
+
+export function FeaturePanelDrawer({
+  className,
+  children,
+  show,
+  onClose,
+  inWorkflow = true,
+}: FeaturePanelDrawerProps) {
+  const close = useCallback(() => onClose?.(), [onClose])
+
+  return (
+    <Drawer
+      open={show}
+      swipeDirection="right"
+      onOpenChange={(open) => {
+        if (!open)
+          close()
+      }}
+    >
+      <DrawerPortal>
+        <DrawerBackdrop className="bg-black/25" />
+        <DrawerViewport data-testid="feature-panel-drawer-layout">
+          <DrawerPopup
+            className={cn(
+              'border-components-panel-border bg-components-panel-bg-alt p-0 text-left align-middle',
+              'data-[swipe-direction=right]:!h-auto data-[swipe-direction=right]:!w-[420px] data-[swipe-direction=right]:!max-w-[calc(100vw-2rem)]',
+              inWorkflow
+                ? 'data-[swipe-direction=right]:!top-[112px] data-[swipe-direction=right]:!right-0 data-[swipe-direction=right]:!bottom-2 data-[swipe-direction=right]:!rounded-l-2xl data-[swipe-direction=right]:!rounded-r-none data-[swipe-direction=right]:!border-t-[0.5px] data-[swipe-direction=right]:!border-r-0 data-[swipe-direction=right]:!border-b-[0.5px] data-[swipe-direction=right]:!border-l-[0.5px]'
+                : 'data-[swipe-direction=right]:!top-[64px] data-[swipe-direction=right]:!right-2 data-[swipe-direction=right]:!bottom-2 data-[swipe-direction=right]:!rounded-2xl data-[swipe-direction=right]:!border-[0.5px]',
+              className,
+            )}
+          >
+            <DrawerContent className="flex min-h-0 flex-1 touch-auto flex-col overflow-hidden p-0 pb-0">
+              {children}
+            </DrawerContent>
+          </DrawerPopup>
+        </DrawerViewport>
+      </DrawerPortal>
+    </Drawer>
+  )
+}
diff --git a/web/app/components/base/features/new-feature-panel/index.tsx b/web/app/components/base/features/new-feature-panel/index.tsx
index 84c7715577..61e961c82b 100644
--- a/web/app/components/base/features/new-feature-panel/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/index.tsx
@@ -1,13 +1,13 @@
 import type { OnFeaturesChange } from '@/app/components/base/features/types'
 import type { InputVar } from '@/app/components/workflow/types'
 import type { PromptVariable } from '@/models/debug'
-import { RiCloseLine } from '@remixicon/react'
+import { DrawerCloseButton } from '@langgenius/dify-ui/drawer'
 import { useTranslation } from 'react-i18next'
 import AnnotationReply from '@/app/components/base/features/new-feature-panel/annotation-reply'
 
 import Citation from '@/app/components/base/features/new-feature-panel/citation'
 import ConversationOpener from '@/app/components/base/features/new-feature-panel/conversation-opener'
-import DialogWrapper from '@/app/components/base/features/new-feature-panel/dialog-wrapper'
+import { FeaturePanelDrawer } from '@/app/components/base/features/new-feature-panel/feature-panel-drawer'
 import FileUpload from '@/app/components/base/features/new-feature-panel/file-upload'
 import FollowUp from '@/app/components/base/features/new-feature-panel/follow-up'
 import ImageUpload from '@/app/components/base/features/new-feature-panel/image-upload'
@@ -48,7 +48,7 @@ const NewFeaturePanel = ({
   const { data: text2speechDefaultModel } = useDefaultModel(ModelTypeEnum.tts)
 
   return (
-    <DialogWrapper
+    <FeaturePanelDrawer
       show={show}
       onClose={onClose}
       inWorkflow={inWorkflow}
@@ -60,7 +60,10 @@ const NewFeaturePanel = ({
             <div className="system-xl-semibold text-text-primary">{t('common.features', { ns: 'workflow' })}</div>
             <div className="body-xs-regular text-text-tertiary">{t('common.featuresDescription', { ns: 'workflow' })}</div>
           </div>
-          <div className="h-8 w-8 cursor-pointer p-2" onClick={onClose}><RiCloseLine className="h-4 w-4 text-text-tertiary" /></div>
+          <DrawerCloseButton
+            aria-label={t('operation.close', { ns: 'common' })}
+            className="h-8 w-8 p-2"
+          />
         </div>
         {/* list */}
         <div className="grow basis-0 overflow-y-auto px-4 pb-4">
@@ -96,7 +99,7 @@ const NewFeaturePanel = ({
           )}
         </div>
       </div>
-    </DialogWrapper>
+    </FeaturePanelDrawer>
   )
 }
 
diff --git a/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx b/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
index 0ae2f458e1..7522c73445 100644
--- a/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
@@ -3,12 +3,11 @@ import type { CodeBasedExtensionItem } from '@/models/common'
 import type { ModerationConfig, ModerationContentConfig } from '@/models/debug'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import { toast } from '@langgenius/dify-ui/toast'
-import { noop } from 'es-toolkit/function'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
-import Modal from '@/app/components/base/modal'
 import ApiBasedExtensionSelector from '@/app/components/header/account-setting/api-based-extension-page/selector'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { CustomConfigurationStatusEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
@@ -226,165 +225,164 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
   }
 
   return (
-    <Modal
-      isShow
-      onClose={noop}
-      className="mt-14! w-[600px]! max-w-none! p-6!"
-    >
-      <div className="flex items-center justify-between">
-        <div className="title-2xl-semi-bold text-text-primary">{t('feature.moderation.modal.title', { ns: 'appDebug' })}</div>
-        <div
-          role="button"
-          tabIndex={0}
-          className="cursor-pointer p-1"
-          onClick={onCancel}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-              e.preventDefault()
-              onCancel()
-            }
-          }}
-        >
-          <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
+    <Dialog open>
+      <DialogContent className="mt-14! w-[600px]! max-w-none! overflow-hidden! border-none p-6! text-left align-middle">
+
+        <div className="flex items-center justify-between">
+          <div className="title-2xl-semi-bold text-text-primary">{t('feature.moderation.modal.title', { ns: 'appDebug' })}</div>
+          <div
+            role="button"
+            tabIndex={0}
+            className="cursor-pointer p-1"
+            onClick={onCancel}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                onCancel()
+              }
+            }}
+          >
+            <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
+          </div>
         </div>
-      </div>
-      <div className="py-2">
-        <div className="text-sm leading-9 font-medium text-text-primary">
-          {t('feature.moderation.modal.provider.title', { ns: 'appDebug' })}
-        </div>
-        <div className="grid grid-cols-3 gap-2.5">
-          {
-            providers.map(provider => (
-              <div
-                key={provider.key}
-                className={cn(
-                  'flex h-8 cursor-default items-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 system-sm-regular text-text-secondary',
-                  localeData.type !== provider.key && 'cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
-                  localeData.type === provider.key && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg system-sm-medium shadow-xs',
-                  localeData.type === 'openai_moderation' && provider.key === 'openai_moderation' && !isOpenAIProviderConfigured && 'text-text-disabled',
-                )}
-                onClick={() => handleDataTypeChange(provider.key)}
-              >
-                <div className={cn(
-                  'mr-2 h-4 w-4 rounded-full border border-components-radio-border bg-components-radio-bg shadow-xs',
-                  localeData.type === provider.key && 'border-[5px] border-components-radio-border-checked',
-                )}
+        <div className="py-2">
+          <div className="text-sm leading-9 font-medium text-text-primary">
+            {t('feature.moderation.modal.provider.title', { ns: 'appDebug' })}
+          </div>
+          <div className="grid grid-cols-3 gap-2.5">
+            {
+              providers.map(provider => (
+                <div
+                  key={provider.key}
+                  className={cn(
+                    'flex h-8 cursor-default items-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 system-sm-regular text-text-secondary',
+                    localeData.type !== provider.key && 'cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
+                    localeData.type === provider.key && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg system-sm-medium shadow-xs',
+                    localeData.type === 'openai_moderation' && provider.key === 'openai_moderation' && !isOpenAIProviderConfigured && 'text-text-disabled',
+                  )}
+                  onClick={() => handleDataTypeChange(provider.key)}
                 >
+                  <div className={cn(
+                    'mr-2 h-4 w-4 rounded-full border border-components-radio-border bg-components-radio-bg shadow-xs',
+                    localeData.type === provider.key && 'border-[5px] border-components-radio-border-checked',
+                  )}
+                  >
+                  </div>
+                  {provider.name}
+                </div>
+              ))
+            }
+          </div>
+          {
+            !isLoading && !isOpenAIProviderConfigured && localeData.type === 'openai_moderation' && (
+              <div className="mt-2 flex items-center rounded-lg border border-[#FEF0C7] bg-[#FFFAEB] px-3 py-2">
+                <span className="mr-1 i-custom-vender-line-general-info-circle h-4 w-4 text-[#F79009]" />
+                <div className="flex items-center text-xs font-medium text-gray-700">
+                  {t('feature.moderation.modal.openaiNotConfig.before', { ns: 'appDebug' })}
+                  <span
+                    className="cursor-pointer text-primary-600"
+                    onClick={handleOpenSettingsModal}
+                  >
+                  &nbsp;
+                    {t('settings.provider', { ns: 'common' })}
+&nbsp;
+                  </span>
+                  {t('feature.moderation.modal.openaiNotConfig.after', { ns: 'appDebug' })}
                 </div>
-                {provider.name}
               </div>
-            ))
+            )
           }
         </div>
         {
-          !isLoading && !isOpenAIProviderConfigured && localeData.type === 'openai_moderation' && (
-            <div className="mt-2 flex items-center rounded-lg border border-[#FEF0C7] bg-[#FFFAEB] px-3 py-2">
-              <span className="mr-1 i-custom-vender-line-general-info-circle h-4 w-4 text-[#F79009]" />
-              <div className="flex items-center text-xs font-medium text-gray-700">
-                {t('feature.moderation.modal.openaiNotConfig.before', { ns: 'appDebug' })}
-                <span
-                  className="cursor-pointer text-primary-600"
-                  onClick={handleOpenSettingsModal}
-                >
-                  &nbsp;
-                  {t('settings.provider', { ns: 'common' })}
-&nbsp;
-                </span>
-                {t('feature.moderation.modal.openaiNotConfig.after', { ns: 'appDebug' })}
+          localeData.type === 'keywords' && (
+            <div className="py-2">
+              <div className="mb-1 text-sm font-medium text-text-primary">{t('feature.moderation.modal.provider.keywords', { ns: 'appDebug' })}</div>
+              <div className="mb-2 text-xs text-text-tertiary">{t('feature.moderation.modal.keywords.tip', { ns: 'appDebug' })}</div>
+              <div className="relative h-[88px] rounded-lg bg-components-input-bg-normal px-3 py-2">
+                <textarea
+                  value={localeData.config?.keywords || ''}
+                  onChange={handleDataKeywordsChange}
+                  className="block h-full w-full resize-none appearance-none bg-transparent text-sm text-text-secondary outline-hidden"
+                  placeholder={t('feature.moderation.modal.keywords.placeholder', { ns: 'appDebug' }) || ''}
+                />
+                <div className="absolute right-2 bottom-2 flex h-5 items-center rounded-md bg-background-section px-1 text-xs font-medium text-text-quaternary">
+                  <span>{(localeData.config?.keywords || '').split('\n').filter(Boolean).length}</span>
+                  /
+                  <span className="text-text-tertiary">
+                    100
+                    {t('feature.moderation.modal.keywords.line', { ns: 'appDebug' })}
+                  </span>
+                </div>
               </div>
             </div>
           )
         }
-      </div>
-      {
-        localeData.type === 'keywords' && (
-          <div className="py-2">
-            <div className="mb-1 text-sm font-medium text-text-primary">{t('feature.moderation.modal.provider.keywords', { ns: 'appDebug' })}</div>
-            <div className="mb-2 text-xs text-text-tertiary">{t('feature.moderation.modal.keywords.tip', { ns: 'appDebug' })}</div>
-            <div className="relative h-[88px] rounded-lg bg-components-input-bg-normal px-3 py-2">
-              <textarea
-                value={localeData.config?.keywords || ''}
-                onChange={handleDataKeywordsChange}
-                className="block h-full w-full resize-none appearance-none bg-transparent text-sm text-text-secondary outline-hidden"
-                placeholder={t('feature.moderation.modal.keywords.placeholder', { ns: 'appDebug' }) || ''}
-              />
-              <div className="absolute right-2 bottom-2 flex h-5 items-center rounded-md bg-background-section px-1 text-xs font-medium text-text-quaternary">
-                <span>{(localeData.config?.keywords || '').split('\n').filter(Boolean).length}</span>
-                /
-                <span className="text-text-tertiary">
-                  100
-                  {t('feature.moderation.modal.keywords.line', { ns: 'appDebug' })}
-                </span>
+        {
+          localeData.type === 'api' && (
+            <div className="py-2">
+              <div className="flex h-9 items-center justify-between">
+                <div className="text-sm font-medium text-text-primary">{t('apiBasedExtension.selector.title', { ns: 'common' })}</div>
+                <a
+                  href={docLink('/use-dify/workspace/api-extension/api-extension')}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="group flex items-center text-xs text-text-tertiary hover:text-primary-600"
+                >
+                  <span className="mr-1 i-custom-vender-line-education-book-open-01 h-3 w-3 text-text-tertiary group-hover:text-primary-600" />
+                  {t('apiBasedExtension.link', { ns: 'common' })}
+                </a>
               </div>
+              <ApiBasedExtensionSelector
+                value={localeData.config?.api_based_extension_id || ''}
+                onChange={handleDataApiBasedChange}
+              />
             </div>
-          </div>
-        )
-      }
-      {
-        localeData.type === 'api' && (
-          <div className="py-2">
-            <div className="flex h-9 items-center justify-between">
-              <div className="text-sm font-medium text-text-primary">{t('apiBasedExtension.selector.title', { ns: 'common' })}</div>
-              <a
-                href={docLink('/use-dify/workspace/api-extension/api-extension')}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="group flex items-center text-xs text-text-tertiary hover:text-primary-600"
-              >
-                <span className="mr-1 i-custom-vender-line-education-book-open-01 h-3 w-3 text-text-tertiary group-hover:text-primary-600" />
-                {t('apiBasedExtension.link', { ns: 'common' })}
-              </a>
-            </div>
-            <ApiBasedExtensionSelector
-              value={localeData.config?.api_based_extension_id || ''}
-              onChange={handleDataApiBasedChange}
+          )
+        }
+        {
+          systemTypes.findIndex(t => t === localeData.type) < 0
+          && currentProvider?.form_schema
+          && (
+            <FormGeneration
+              forms={currentProvider?.form_schema}
+              value={localeData.config}
+              onChange={handleDataExtraChange}
             />
-          </div>
-        )
-      }
-      {
-        systemTypes.findIndex(t => t === localeData.type) < 0
-        && currentProvider?.form_schema
-        && (
-          <FormGeneration
-            forms={currentProvider?.form_schema}
-            value={localeData.config}
-            onChange={handleDataExtraChange}
-          />
-        )
-      }
-      <Divider bgStyle="gradient" className="my-3 h-px" />
-      <ModerationContent
-        title={t('feature.moderation.modal.content.input', { ns: 'appDebug' }) || ''}
-        config={localeData.config?.inputs_config || { enabled: false, preset_response: '' }}
-        onConfigChange={config => handleDataContentChange('inputs_config', config)}
-        info={(localeData.type === 'api' && t('feature.moderation.modal.content.fromApi', { ns: 'appDebug' })) || ''}
-        showPreset={localeData.type !== 'api'}
-      />
-      <ModerationContent
-        title={t('feature.moderation.modal.content.output', { ns: 'appDebug' }) || ''}
-        config={localeData.config?.outputs_config || { enabled: false, preset_response: '' }}
-        onConfigChange={config => handleDataContentChange('outputs_config', config)}
-        info={(localeData.type === 'api' && t('feature.moderation.modal.content.fromApi', { ns: 'appDebug' })) || ''}
-        showPreset={localeData.type !== 'api'}
-      />
-      <div className="mt-1 mb-8 text-xs font-medium text-text-tertiary">{t('feature.moderation.modal.content.condition', { ns: 'appDebug' })}</div>
-      <div className="flex items-center justify-end">
-        <Button
-          onClick={onCancel}
-          className="mr-2"
-        >
-          {t('operation.cancel', { ns: 'common' })}
-        </Button>
-        <Button
-          variant="primary"
-          onClick={handleSave}
-          disabled={localeData.type === 'openai_moderation' && !isOpenAIProviderConfigured}
-        >
-          {t('operation.save', { ns: 'common' })}
-        </Button>
-      </div>
-    </Modal>
+          )
+        }
+        <Divider bgStyle="gradient" className="my-3 h-px" />
+        <ModerationContent
+          title={t('feature.moderation.modal.content.input', { ns: 'appDebug' }) || ''}
+          config={localeData.config?.inputs_config || { enabled: false, preset_response: '' }}
+          onConfigChange={config => handleDataContentChange('inputs_config', config)}
+          info={(localeData.type === 'api' && t('feature.moderation.modal.content.fromApi', { ns: 'appDebug' })) || ''}
+          showPreset={localeData.type !== 'api'}
+        />
+        <ModerationContent
+          title={t('feature.moderation.modal.content.output', { ns: 'appDebug' }) || ''}
+          config={localeData.config?.outputs_config || { enabled: false, preset_response: '' }}
+          onConfigChange={config => handleDataContentChange('outputs_config', config)}
+          info={(localeData.type === 'api' && t('feature.moderation.modal.content.fromApi', { ns: 'appDebug' })) || ''}
+          showPreset={localeData.type !== 'api'}
+        />
+        <div className="mt-1 mb-8 text-xs font-medium text-text-tertiary">{t('feature.moderation.modal.content.condition', { ns: 'appDebug' })}</div>
+        <div className="flex items-center justify-end">
+          <Button
+            onClick={onCancel}
+            className="mr-2"
+          >
+            {t('operation.cancel', { ns: 'common' })}
+          </Button>
+          <Button
+            variant="primary"
+            onClick={handleSave}
+            disabled={localeData.type === 'openai_moderation' && !isOpenAIProviderConfigured}
+          >
+            {t('operation.save', { ns: 'common' })}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/web/app/components/base/file-uploader/__tests__/audio-preview.spec.tsx b/web/app/components/base/file-uploader/__tests__/audio-preview.spec.tsx
index 5a5740ef0d..7029bc8e0a 100644
--- a/web/app/components/base/file-uploader/__tests__/audio-preview.spec.tsx
+++ b/web/app/components/base/file-uploader/__tests__/audio-preview.spec.tsx
@@ -39,15 +39,14 @@ describe('AudioPreview', () => {
     expect(onCancel).toHaveBeenCalled()
   })
 
-  it('should stop propagation when backdrop is clicked', () => {
-    const { baseElement } = render(<AudioPreview url="https://example.com/audio.mp3" title="Test Audio" onCancel={vi.fn()} />)
+  it('should not close when backdrop is clicked', () => {
+    const onCancel = vi.fn()
+    render(<AudioPreview url="https://example.com/audio.mp3" title="Test Audio" onCancel={onCancel} />)
 
-    const backdrop = baseElement.querySelector('[tabindex="-1"]')
-    const event = new MouseEvent('click', { bubbles: true })
-    const stopPropagation = vi.spyOn(event, 'stopPropagation')
-    backdrop!.dispatchEvent(event)
+    const dialog = screen.getByRole('dialog')
+    fireEvent.click(dialog)
 
-    expect(stopPropagation).toHaveBeenCalled()
+    expect(onCancel).not.toHaveBeenCalled()
   })
 
   it('should call onCancel when Escape key is pressed', () => {
@@ -64,6 +63,6 @@ describe('AudioPreview', () => {
     render(<AudioPreview url="https://example.com/audio.mp3" title="Test Audio" onCancel={vi.fn()} />)
 
     const audio = document.querySelector('audio')
-    expect(audio?.closest('[tabindex="-1"]')?.parentElement).toBe(document.body)
+    expect(audio?.closest('[data-base-ui-portal]')?.parentElement).toBe(document.body)
   })
 })
diff --git a/web/app/components/base/file-uploader/__tests__/pdf-preview.spec.tsx b/web/app/components/base/file-uploader/__tests__/pdf-preview.spec.tsx
index b3c48a7061..3aa0f9e6d6 100644
--- a/web/app/components/base/file-uploader/__tests__/pdf-preview.spec.tsx
+++ b/web/app/components/base/file-uploader/__tests__/pdf-preview.spec.tsx
@@ -35,7 +35,7 @@ describe('PdfPreview', () => {
   }
 
   const getControl = (rightClass: 'right-24' | 'right-16' | 'right-6') => {
-    const control = document.querySelector(`div.absolute.${rightClass}.top-6`) as HTMLDivElement | null
+    const control = document.querySelector(`button.absolute.${rightClass}.top-6`) as HTMLButtonElement | null
     expect(control).toBeInTheDocument()
     return control!
   }
@@ -129,14 +129,12 @@ describe('PdfPreview', () => {
     expect(mockOnCancel).toHaveBeenCalled()
   })
 
-  it('should render the overlay and stop click propagation', () => {
+  it('should render the overlay and keep backdrop clicks from closing', () => {
     render(<PdfPreview url="https://example.com/doc.pdf" onCancel={mockOnCancel} />)
 
-    const overlay = document.querySelector('[tabindex="-1"]')
+    const overlay = screen.getByRole('dialog')
     expect(overlay).toBeInTheDocument()
-    const event = new MouseEvent('click', { bubbles: true })
-    const stopPropagation = vi.spyOn(event, 'stopPropagation')
-    overlay!.dispatchEvent(event)
-    expect(stopPropagation).toHaveBeenCalled()
+    fireEvent.click(overlay)
+    expect(mockOnCancel).not.toHaveBeenCalled()
   })
 })
diff --git a/web/app/components/base/file-uploader/__tests__/video-preview.spec.tsx b/web/app/components/base/file-uploader/__tests__/video-preview.spec.tsx
index c95455caf3..0430bd37f9 100644
--- a/web/app/components/base/file-uploader/__tests__/video-preview.spec.tsx
+++ b/web/app/components/base/file-uploader/__tests__/video-preview.spec.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 import VideoPreview from '../video-preview'
 
 describe('VideoPreview', () => {
@@ -39,15 +39,14 @@ describe('VideoPreview', () => {
     expect(onCancel).toHaveBeenCalled()
   })
 
-  it('should stop propagation when backdrop is clicked', () => {
-    const { baseElement } = render(<VideoPreview url="https://example.com/video.mp4" title="Test Video" onCancel={vi.fn()} />)
+  it('should not close when backdrop is clicked', () => {
+    const onCancel = vi.fn()
+    render(<VideoPreview url="https://example.com/video.mp4" title="Test Video" onCancel={onCancel} />)
 
-    const backdrop = baseElement.querySelector('[tabindex="-1"]')
-    const event = new MouseEvent('click', { bubbles: true })
-    const stopPropagation = vi.spyOn(event, 'stopPropagation')
-    backdrop!.dispatchEvent(event)
+    const dialog = screen.getByRole('dialog')
+    fireEvent.click(dialog)
 
-    expect(stopPropagation).toHaveBeenCalled()
+    expect(onCancel).not.toHaveBeenCalled()
   })
 
   it('should call onCancel when Escape key is pressed', () => {
@@ -64,6 +63,6 @@ describe('VideoPreview', () => {
     render(<VideoPreview url="https://example.com/video.mp4" title="Test Video" onCancel={vi.fn()} />)
 
     const video = document.querySelector('video')
-    expect(video?.closest('[tabindex="-1"]')?.parentElement).toBe(document.body)
+    expect(video?.closest('[data-base-ui-portal]')?.parentElement).toBe(document.body)
   })
 })
diff --git a/web/app/components/base/file-uploader/audio-preview.tsx b/web/app/components/base/file-uploader/audio-preview.tsx
index 28988b3a7c..6d38fad169 100644
--- a/web/app/components/base/file-uploader/audio-preview.tsx
+++ b/web/app/components/base/file-uploader/audio-preview.tsx
@@ -1,8 +1,5 @@
 import type { FC } from 'react'
-import * as React from 'react'
-import { createPortal } from 'react-dom'
-
-import { useHotkeys } from 'react-hotkeys-hook'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 
 type AudioPreviewProps = {
   url: string
@@ -14,31 +11,40 @@ const AudioPreview: FC<AudioPreviewProps> = ({
   title,
   onCancel,
 }) => {
-  useHotkeys('esc', onCancel)
-
-  return createPortal(
-    <div
-      className="fixed inset-0 z-1000 flex items-center justify-center bg-black/80 p-8"
-      onClick={e => e.stopPropagation()}
-      tabIndex={-1}
+  return (
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open)
+          onCancel()
+      }}
+      disablePointerDismissal
     >
-      <div>
-        <audio controls title={title} autoPlay={false} preload="metadata">
-          <source
-            type="audio/mpeg"
-            src={url}
-            className="max-h-full max-w-full"
-          />
-        </audio>
-      </div>
-      <div
-        className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
-        onClick={onCancel}
+      <DialogContent
+        className="inset-0! top-0! left-0! flex h-dvh! max-h-none! w-screen! max-w-none! translate-x-0! translate-y-0! items-center justify-center overflow-hidden! rounded-none! border-none! bg-black/80 p-8! shadow-none!"
+        backdropClassName="bg-transparent!"
       >
-        <span className="i-ri-close-line h-4 w-4 text-gray-500" data-testid="close-btn" />
-      </div>
-    </div>,
-    document.body,
+        <div
+          aria-label={title}
+          tabIndex={-1}
+          onClick={e => e.stopPropagation()}
+        >
+          <audio controls title={title} autoPlay={false} preload="metadata">
+            <source
+              type="audio/mpeg"
+              src={url}
+              className="max-h-full max-w-full"
+            />
+          </audio>
+        </div>
+        <div
+          className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
+          onClick={onCancel}
+        >
+          <span className="i-ri-close-line h-4 w-4 text-gray-500" data-testid="close-btn" />
+        </div>
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/web/app/components/base/file-uploader/file-uploader-in-attachment/__tests__/file-item.spec.tsx b/web/app/components/base/file-uploader/file-uploader-in-attachment/__tests__/file-item.spec.tsx
index 002eced6ca..183313cd91 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-attachment/__tests__/file-item.spec.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-attachment/__tests__/file-item.spec.tsx
@@ -186,7 +186,7 @@ describe('FileInAttachmentItem', () => {
     const buttons = screen.getAllByRole('button')
     fireEvent.click(buttons[0]!)
 
-    // ImagePreview renders via createPortal with class "image-preview-container"
+    // ImagePreview renders through Dialog with class "image-preview-container"
     const previewContainer = document.querySelector('.image-preview-container')!
     expect(previewContainer)!.toBeInTheDocument()
 
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/__tests__/file-image-item.spec.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/__tests__/file-image-item.spec.tsx
index cfe6719b20..c84d9e3d69 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/__tests__/file-image-item.spec.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/__tests__/file-image-item.spec.tsx
@@ -95,8 +95,7 @@ describe('FileImageItem', () => {
     const img = screen.getByRole('img')
     fireEvent.click(img.parentElement!)
 
-    // ImagePreview renders via createPortal with class "image-preview-container", not role="dialog"
-    // ImagePreview renders via createPortal with class "image-preview-container", not role="dialog"
+    // ImagePreview renders through Dialog with class "image-preview-container"
     expect(document.querySelector('.image-preview-container'))!.toBeInTheDocument()
   })
 
@@ -114,7 +113,7 @@ describe('FileImageItem', () => {
 
     const img = screen.getByRole('img')
     fireEvent.click(img.parentElement!)
-    // ImagePreview renders via createPortal with class "image-preview-container"
+    // ImagePreview renders through Dialog with class "image-preview-container"
     const previewContainer = document.querySelector('.image-preview-container')!
     expect(previewContainer)!.toBeInTheDocument()
 
diff --git a/web/app/components/base/file-uploader/pdf-preview.tsx b/web/app/components/base/file-uploader/pdf-preview.tsx
index c129f9cfb3..07fb2bab76 100644
--- a/web/app/components/base/file-uploader/pdf-preview.tsx
+++ b/web/app/components/base/file-uploader/pdf-preview.tsx
@@ -1,12 +1,11 @@
 import type { FC } from 'react'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { RiCloseLine, RiZoomInLine, RiZoomOutLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
-import { t } from 'i18next'
-import * as React from 'react'
 import { useState } from 'react'
-import { createPortal } from 'react-dom'
 import { useHotkeys } from 'react-hotkeys-hook'
+import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { PdfHighlighter, PdfLoader } from './pdf-highlighter-adapter'
@@ -20,6 +19,7 @@ const PdfPreview: FC<PdfPreviewProps> = ({
   url,
   onCancel,
 }) => {
+  const { t } = useTranslation()
   const media = useBreakpoints()
   const [scale, setScale] = useState(1)
   const [position, setPosition] = useState({ x: 0, y: 0 })
@@ -42,87 +42,106 @@ const PdfPreview: FC<PdfPreviewProps> = ({
     })
   }
 
-  useHotkeys('esc', onCancel)
   useHotkeys('up', zoomIn)
   useHotkeys('down', zoomOut)
 
-  return createPortal(
-    <div
-      className={`fixed inset-0 z-1000 flex items-center justify-center bg-black/80 ${!isMobile && 'p-8'}`}
-      onClick={e => e.stopPropagation()}
-      tabIndex={-1}
+  const zoomOutLabel = t('operation.zoomOut', { ns: 'common' })
+  const zoomInLabel = t('operation.zoomIn', { ns: 'common' })
+  const cancelLabel = t('operation.cancel', { ns: 'common' })
+
+  return (
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open)
+          onCancel()
+      }}
+      disablePointerDismissal
     >
-      <div
-        className="h-[95vh] max-h-full w-screen max-w-full overflow-hidden"
-        style={{ transform: `scale(${scale})`, transformOrigin: 'center', scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+      <DialogContent
+        className={`inset-0! top-0! left-0! flex h-dvh! max-h-none! w-screen! max-w-none! translate-x-0! translate-y-0! items-center justify-center overflow-hidden! rounded-none! border-none! bg-black/80 shadow-none! ${!isMobile ? 'p-8!' : 'p-0!'}`}
+        backdropClassName="bg-transparent!"
       >
-        <PdfLoader
-          workerSrc="/pdf.worker.min.mjs"
-          url={url}
-          beforeLoad={<div className="flex h-64 items-center justify-center"><Loading type="app" /></div>}
+        <div
+          aria-label={url}
+          tabIndex={-1}
+          onClick={e => e.stopPropagation()}
+          className="h-[95vh] max-h-full w-screen max-w-full overflow-hidden"
+          style={{ transform: `scale(${scale})`, transformOrigin: 'center', scrollbarWidth: 'none', msOverflowStyle: 'none' }}
         >
-          {(pdfDocument) => {
-            return (
-              <PdfHighlighter
-                pdfDocument={pdfDocument}
-                enableAreaSelection={event => event.altKey}
-                scrollRef={noop}
-                onScrollChange={noop}
-                onSelectionFinished={() => null}
-                highlightTransform={() => { return <div /> }}
-                highlights={[]}
-              />
-            )
-          }}
-        </PdfLoader>
-      </div>
-      <Tooltip>
-        <TooltipTrigger
-          render={(
-            <div
-              className="absolute top-6 right-24 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
-              onClick={zoomOut}
-            >
-              <RiZoomOutLine className="h-4 w-4 text-gray-500" />
-            </div>
-          )}
-        />
-        <TooltipContent>
-          {t('operation.zoomOut', { ns: 'common' })}
-        </TooltipContent>
-      </Tooltip>
-      <Tooltip>
-        <TooltipTrigger
-          render={(
-            <div
-              className="absolute top-6 right-16 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
-              onClick={zoomIn}
-            >
-              <RiZoomInLine className="h-4 w-4 text-gray-500" />
-            </div>
-          )}
-        />
-        <TooltipContent>
-          {t('operation.zoomIn', { ns: 'common' })}
-        </TooltipContent>
-      </Tooltip>
-      <Tooltip>
-        <TooltipTrigger
-          render={(
-            <div
-              className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/8 backdrop-blur-[2px]"
-              onClick={onCancel}
-            >
-              <RiCloseLine className="h-4 w-4 text-gray-500" />
-            </div>
-          )}
-        />
-        <TooltipContent>
-          {t('operation.cancel', { ns: 'common' })}
-        </TooltipContent>
-      </Tooltip>
-    </div>,
-    document.body,
+          <PdfLoader
+            workerSrc="/pdf.worker.min.mjs"
+            url={url}
+            beforeLoad={<div className="flex h-64 items-center justify-center"><Loading type="app" /></div>}
+          >
+            {(pdfDocument) => {
+              return (
+                <PdfHighlighter
+                  pdfDocument={pdfDocument}
+                  enableAreaSelection={event => event.altKey}
+                  scrollRef={noop}
+                  onScrollChange={noop}
+                  onSelectionFinished={() => null}
+                  highlightTransform={() => { return <div /> }}
+                  highlights={[]}
+                />
+              )
+            }}
+          </PdfLoader>
+        </div>
+        <Tooltip>
+          <TooltipTrigger
+            render={(
+              <button
+                type="button"
+                aria-label={zoomOutLabel}
+                className="absolute top-6 right-24 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
+                onClick={zoomOut}
+              >
+                <RiZoomOutLine className="h-4 w-4 text-gray-500" />
+              </button>
+            )}
+          />
+          <TooltipContent>
+            {zoomOutLabel}
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger
+            render={(
+              <button
+                type="button"
+                aria-label={zoomInLabel}
+                className="absolute top-6 right-16 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
+                onClick={zoomIn}
+              >
+                <RiZoomInLine className="h-4 w-4 text-gray-500" />
+              </button>
+            )}
+          />
+          <TooltipContent>
+            {zoomInLabel}
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger
+            render={(
+              <button
+                type="button"
+                aria-label={cancelLabel}
+                className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/8 backdrop-blur-[2px]"
+                onClick={onCancel}
+              >
+                <RiCloseLine className="h-4 w-4 text-gray-500" />
+              </button>
+            )}
+          />
+          <TooltipContent>
+            {cancelLabel}
+          </TooltipContent>
+        </Tooltip>
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/web/app/components/base/file-uploader/video-preview.tsx b/web/app/components/base/file-uploader/video-preview.tsx
index ec1644400f..986bf61dce 100644
--- a/web/app/components/base/file-uploader/video-preview.tsx
+++ b/web/app/components/base/file-uploader/video-preview.tsx
@@ -1,7 +1,5 @@
 import type { FC } from 'react'
-import * as React from 'react'
-import { createPortal } from 'react-dom'
-import { useHotkeys } from 'react-hotkeys-hook'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 
 type VideoPreviewProps = {
   url: string
@@ -13,31 +11,40 @@ const VideoPreview: FC<VideoPreviewProps> = ({
   title,
   onCancel,
 }) => {
-  useHotkeys('esc', onCancel)
-
-  return createPortal(
-    <div
-      className="fixed inset-0 z-1000 flex items-center justify-center bg-black/80 p-8"
-      onClick={e => e.stopPropagation()}
-      tabIndex={-1}
+  return (
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open)
+          onCancel()
+      }}
+      disablePointerDismissal
     >
-      <div>
-        <video controls title={title} autoPlay={false} preload="metadata">
-          <source
-            type="video/mp4"
-            src={url}
-            className="max-h-full max-w-full"
-          />
-        </video>
-      </div>
-      <div
-        className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
-        onClick={onCancel}
+      <DialogContent
+        className="inset-0! top-0! left-0! flex h-dvh! max-h-none! w-screen! max-w-none! translate-x-0! translate-y-0! items-center justify-center overflow-hidden! rounded-none! border-none! bg-black/80 p-8! shadow-none!"
+        backdropClassName="bg-transparent!"
       >
-        <span className="i-ri-close-line h-4 w-4 text-gray-500" data-testid="video-preview-close-btn" />
-      </div>
-    </div>,
-    document.body,
+        <div
+          aria-label={title}
+          tabIndex={-1}
+          onClick={e => e.stopPropagation()}
+        >
+          <video controls title={title} autoPlay={false} preload="metadata">
+            <source
+              type="video/mp4"
+              src={url}
+              className="max-h-full max-w-full"
+            />
+          </video>
+        </div>
+        <div
+          className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
+          onClick={onCancel}
+        >
+          <span className="i-ri-close-line h-4 w-4 text-gray-500" data-testid="video-preview-close-btn" />
+        </div>
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/web/app/components/base/float-right-container/__tests__/index.spec.tsx b/web/app/components/base/float-right-container/__tests__/index.spec.tsx
index ee820230d8..236a30dd20 100644
--- a/web/app/components/base/float-right-container/__tests__/index.spec.tsx
+++ b/web/app/components/base/float-right-container/__tests__/index.spec.tsx
@@ -153,10 +153,11 @@ describe('FloatRightContainer', () => {
       )
 
       const dialog = await screen.findByRole('dialog')
-      expect(dialog).toHaveClass('custom-dialog-class')
+      expect(document.querySelector('.custom-dialog-class')).toBeInTheDocument()
 
       const panel = document.querySelector('.custom-panel-class')
       expect(panel).toBeInTheDocument()
+      expect(dialog).toHaveClass('custom-panel-class')
     })
   })
 
diff --git a/web/app/components/base/fullscreen-modal/__tests__/index.spec.tsx b/web/app/components/base/fullscreen-modal/__tests__/index.spec.tsx
deleted file mode 100644
index f238ea79f7..0000000000
--- a/web/app/components/base/fullscreen-modal/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,214 +0,0 @@
-import { act, fireEvent, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { describe, expect, it, vi } from 'vitest'
-import FullScreenModal from '../index'
-
-describe('FullScreenModal Component', () => {
-  it('should not render anything when open is false', () => {
-    render(
-      <FullScreenModal open={false}>
-        <div data-testid="modal-content">Content</div>
-      </FullScreenModal>,
-    )
-    expect(screen.queryByTestId('modal-content')).not.toBeInTheDocument()
-  })
-
-  it('should render content when open is true', async () => {
-    render(
-      <FullScreenModal open={true}>
-        <div data-testid="modal-content">Content</div>
-      </FullScreenModal>,
-    )
-    expect(await screen.findByTestId('modal-content')).toBeInTheDocument()
-  })
-
-  it('should not crash when provided with title and description props', async () => {
-    await act(async () => {
-      render(
-        <FullScreenModal
-          open={true}
-          title="My Title"
-          description="My Description"
-        >
-          Content
-        </FullScreenModal>,
-      )
-    })
-  })
-
-  describe('Props Handling', () => {
-    it('should apply wrapperClassName to the dialog root', async () => {
-      render(
-        <FullScreenModal
-          open={true}
-          wrapperClassName="custom-wrapper-class"
-        >
-          Content
-        </FullScreenModal>,
-      )
-
-      await screen.findByRole('dialog')
-      const element = document.querySelector('.custom-wrapper-class')
-      expect(element).toBeInTheDocument()
-      expect(element).toHaveClass('relative', 'z-50')
-    })
-
-    it('should apply className to the inner panel', async () => {
-      await act(async () => {
-        render(
-          <FullScreenModal
-            open={true}
-            className="custom-panel-class"
-          >
-            Content
-          </FullScreenModal>,
-        )
-      })
-      const panel = document.querySelector('.custom-panel-class')
-      expect(panel).toBeInTheDocument()
-      expect(panel).toHaveClass('h-full')
-    })
-
-    it('should handle overflowVisible prop', async () => {
-      const { rerender } = await act(async () => {
-        return render(
-          <FullScreenModal
-            open={true}
-            overflowVisible={true}
-            className="target-panel"
-          >
-            Content
-          </FullScreenModal>,
-        )
-      })
-      let panel = document.querySelector('.target-panel')
-      expect(panel).toHaveClass('overflow-visible')
-      expect(panel).not.toHaveClass('overflow-hidden')
-
-      await act(async () => {
-        rerender(
-          <FullScreenModal
-            open={true}
-            overflowVisible={false}
-            className="target-panel"
-          >
-            Content
-          </FullScreenModal>,
-        )
-      })
-      panel = document.querySelector('.target-panel')
-      expect(panel).toHaveClass('overflow-hidden')
-      expect(panel).not.toHaveClass('overflow-visible')
-    })
-
-    it('should render close button when closable is true', async () => {
-      await act(async () => {
-        render(
-          <FullScreenModal open={true} closable={true}>
-            Content
-          </FullScreenModal>,
-        )
-      })
-      const closeButton = document.querySelector('.bg-components-button-tertiary-bg')
-      expect(closeButton).toBeInTheDocument()
-    })
-
-    it('should not render close button when closable is false', async () => {
-      await act(async () => {
-        render(
-          <FullScreenModal open={true} closable={false}>
-            Content
-          </FullScreenModal>,
-        )
-      })
-      const closeButton = document.querySelector('.bg-components-button-tertiary-bg')
-      expect(closeButton).not.toBeInTheDocument()
-    })
-  })
-
-  describe('Interactions', () => {
-    it('should call onClose when close button is clicked', async () => {
-      const user = userEvent.setup()
-      const onClose = vi.fn()
-
-      render(
-        <FullScreenModal open={true} closable={true} onClose={onClose}>
-          Content
-        </FullScreenModal>,
-      )
-
-      const closeBtn = document.querySelector('.bg-components-button-tertiary-bg')
-      expect(closeBtn).toBeInTheDocument()
-
-      await user.click(closeBtn!)
-      expect(onClose).toHaveBeenCalledTimes(1)
-    })
-
-    it('should call onClose when clicking the backdrop', async () => {
-      const user = userEvent.setup()
-      const onClose = vi.fn()
-
-      render(
-        <FullScreenModal open={true} onClose={onClose}>
-          <div data-testid="inner">Content</div>
-        </FullScreenModal>,
-      )
-
-      const dialog = document.querySelector('.relative.z-50')
-      if (dialog) {
-        await user.click(dialog)
-        expect(onClose).toHaveBeenCalled()
-      }
-      else {
-        throw new Error('Dialog root not found')
-      }
-    })
-
-    it('should call onClose when Escape key is pressed', async () => {
-      const user = userEvent.setup()
-      const onClose = vi.fn()
-
-      render(
-        <FullScreenModal open={true} onClose={onClose}>
-          Content
-        </FullScreenModal>,
-      )
-
-      await user.keyboard('{Escape}')
-      expect(onClose).toHaveBeenCalled()
-    })
-
-    it('should not call onClose when clicking inside the content', async () => {
-      const user = userEvent.setup()
-      const onClose = vi.fn()
-
-      render(
-        <FullScreenModal open={true} onClose={onClose}>
-          <div className="bg-background-default-subtle">
-            <button>Action</button>
-          </div>
-        </FullScreenModal>,
-      )
-
-      const innerButton = screen.getByRole('button', { name: 'Action' })
-      await user.click(innerButton)
-      expect(onClose).not.toHaveBeenCalled()
-
-      const contentPanel = document.querySelector('.bg-background-default-subtle')
-      await act(async () => {
-        fireEvent.click(contentPanel!)
-      })
-      expect(onClose).not.toHaveBeenCalled()
-    })
-  })
-
-  describe('Default Props', () => {
-    it('should not throw if onClose is not provided', async () => {
-      const user = userEvent.setup()
-      render(<FullScreenModal open={true} closable={true}>Content</FullScreenModal>)
-
-      const closeButton = document.querySelector('.bg-components-button-tertiary-bg')
-      await user.click(closeButton!)
-    })
-  })
-})
diff --git a/web/app/components/base/fullscreen-modal/index.stories.tsx b/web/app/components/base/fullscreen-modal/index.stories.tsx
deleted file mode 100644
index 3285b1c4ea..0000000000
--- a/web/app/components/base/fullscreen-modal/index.stories.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { useState } from 'react'
-import FullScreenModal from '.'
-
-const meta = {
-  title: 'Base/Feedback/FullScreenModal',
-  component: FullScreenModal,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component: 'Backdrop-blurred fullscreen modal. Supports close button, custom content, and optional overflow visibility.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof FullScreenModal>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const ModalDemo = (props: React.ComponentProps<typeof FullScreenModal>) => {
-  const [open, setOpen] = useState(false)
-
-  return (
-    <div className="flex h-[360px] items-center justify-center bg-background-default-subtle">
-      <button
-        type="button"
-        className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700"
-        onClick={() => setOpen(true)}
-      >
-        Launch full-screen modal
-      </button>
-
-      <FullScreenModal
-        {...props}
-        open={open}
-        onClose={() => setOpen(false)}
-        closable
-      >
-        <div className="flex h-full flex-col bg-background-default-subtle">
-          <div className="flex h-16 items-center justify-center border-b border-divider-subtle text-lg font-semibold text-text-primary">
-            Full-screen experience
-          </div>
-          <div className="flex flex-1 items-center justify-center text-sm text-text-secondary">
-            Place dashboards, flow builders, or immersive previews here.
-          </div>
-        </div>
-      </FullScreenModal>
-    </div>
-  )
-}
-
-export const Playground: Story = {
-  render: args => <ModalDemo {...args} />,
-  args: {
-    open: false,
-  },
-}
diff --git a/web/app/components/base/fullscreen-modal/index.tsx b/web/app/components/base/fullscreen-modal/index.tsx
deleted file mode 100644
index 95f593ec3d..0000000000
--- a/web/app/components/base/fullscreen-modal/index.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
-import { cn } from '@langgenius/dify-ui/cn'
-import { RiCloseLargeLine } from '@remixicon/react'
-import { noop } from 'es-toolkit/function'
-
-type IModal = {
-  className?: string
-  wrapperClassName?: string
-  open: boolean
-  onClose?: () => void
-  title?: React.ReactNode
-  description?: React.ReactNode
-  children?: React.ReactNode
-  closable?: boolean
-  overflowVisible?: boolean
-}
-
-export default function FullScreenModal({
-  className,
-  wrapperClassName,
-  open,
-  onClose = noop,
-  children,
-  closable = false,
-  overflowVisible = false,
-}: IModal) {
-  return (
-    <Transition show={open} appear>
-      <Dialog as="div" className={cn('relative z-50', wrapperClassName)} onClose={onClose}>
-        <TransitionChild>
-          <div className={cn('fixed inset-0 bg-background-overlay-backdrop backdrop-blur-[6px]', 'duration-300 ease-in data-closed:opacity-0', 'data-enter:opacity-100', 'data-leave:opacity-0')} />
-        </TransitionChild>
-
-        <div
-          className="fixed inset-0 h-screen w-screen p-4"
-          onClick={(e) => {
-            e.preventDefault()
-            e.stopPropagation()
-          }}
-        >
-          <div className="relative h-full w-full rounded-2xl border border-effects-highlight bg-background-default-subtle">
-            <TransitionChild>
-              <DialogPanel className={cn('h-full', overflowVisible ? 'overflow-visible' : 'overflow-hidden', 'duration-100 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)}>
-                {closable
-                  && (
-                    <div
-                      className="absolute top-3 right-3 z-50 flex h-9 w-9 cursor-pointer items-center justify-center
-                  rounded-[10px] bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover"
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        onClose()
-                      }}
-                    >
-                      <RiCloseLargeLine className="h-3.5 w-3.5 text-components-button-tertiary-text" />
-                    </div>
-                  )}
-                {children}
-              </DialogPanel>
-            </TransitionChild>
-          </div>
-        </div>
-      </Dialog>
-    </Transition>
-  )
-}
diff --git a/web/app/components/base/image-gallery/__tests__/index.spec.tsx b/web/app/components/base/image-gallery/__tests__/index.spec.tsx
index 4975ac8f1c..92ff807d75 100644
--- a/web/app/components/base/image-gallery/__tests__/index.spec.tsx
+++ b/web/app/components/base/image-gallery/__tests__/index.spec.tsx
@@ -113,7 +113,7 @@ describe('ImageGallery', () => {
       await user.click(getImages(container)[0]!)
       expect(screen.queryByTestId('image-preview-container'))!.toBeInTheDocument()
 
-      await user.keyboard('{Escape}')
+      fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
 
       await waitFor(() => {
         expect(screen.queryByTestId('image-preview-container')).not.toBeInTheDocument()
diff --git a/web/app/components/base/image-uploader/__tests__/audio-preview.spec.tsx b/web/app/components/base/image-uploader/__tests__/audio-preview.spec.tsx
index 0c92afba0a..da15c1c339 100644
--- a/web/app/components/base/image-uploader/__tests__/audio-preview.spec.tsx
+++ b/web/app/components/base/image-uploader/__tests__/audio-preview.spec.tsx
@@ -43,7 +43,7 @@ describe('AudioPreview', () => {
       render(<AudioPreview {...defaultProps} />)
       const overlay = screen.getByTestId('audio-preview-overlay')
       expect(overlay).toBeInTheDocument()
-      expect(overlay.parentElement).toBe(document.body)
+      expect(overlay.closest('[data-base-ui-portal]')?.parentElement).toBe(document.body)
     })
   })
 
diff --git a/web/app/components/base/image-uploader/__tests__/image-preview.spec.tsx b/web/app/components/base/image-uploader/__tests__/image-preview.spec.tsx
index b2a2952bf8..48db2df3d2 100644
--- a/web/app/components/base/image-uploader/__tests__/image-preview.spec.tsx
+++ b/web/app/components/base/image-uploader/__tests__/image-preview.spec.tsx
@@ -1,4 +1,4 @@
-import { act, render, screen, waitFor } from '@testing-library/react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import ImagePreview from '../image-preview'
 
@@ -89,7 +89,7 @@ describe('ImagePreview', () => {
 
       const overlay = getOverlay()
       expect(overlay).toBeInTheDocument()
-      expect(overlay?.parentElement).toBe(document.body)
+      expect(overlay.closest('[data-base-ui-portal]')?.parentElement).toBe(document.body)
       expect(screen.getByRole('img', { name: 'Preview Image' })).toHaveAttribute('src', 'https://example.com/image.png')
     })
 
@@ -108,7 +108,6 @@ describe('ImagePreview', () => {
 
   describe('Hotkeys', () => {
     it('should trigger esc/left/right handlers from keyboard', async () => {
-      const user = userEvent.setup()
       const onCancel = vi.fn()
       const onPrev = vi.fn()
       const onNext = vi.fn()
@@ -122,7 +121,9 @@ describe('ImagePreview', () => {
         />,
       )
 
-      await user.keyboard('{Escape}{ArrowLeft}{ArrowRight}')
+      fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+      fireEvent.keyDown(document, { key: 'ArrowLeft', code: 'ArrowLeft' })
+      fireEvent.keyDown(document, { key: 'ArrowRight', code: 'ArrowRight' })
 
       expect(onCancel).toHaveBeenCalledTimes(1)
       expect(onPrev).toHaveBeenCalledTimes(1)
@@ -130,7 +131,6 @@ describe('ImagePreview', () => {
     })
 
     it('should zoom in and out from keyboard up/down hotkeys', async () => {
-      const user = userEvent.setup()
       render(
         <ImagePreview
           url="https://example.com/image.png"
@@ -140,12 +140,12 @@ describe('ImagePreview', () => {
       )
       const image = screen.getByRole('img', { name: 'Preview Image' })
 
-      await user.keyboard('{ArrowUp}')
+      fireEvent.keyDown(document, { key: 'ArrowUp', code: 'ArrowUp' })
       await waitFor(() => {
         expect(image).toHaveStyle({ transform: 'scale(1.2) translate(0px, 0px)' })
       })
 
-      await user.keyboard('{ArrowDown}')
+      fireEvent.keyDown(document, { key: 'ArrowDown', code: 'ArrowDown' })
       await waitFor(() => {
         expect(image).toHaveStyle({ transform: 'scale(1) translate(0px, 0px)' })
       })
diff --git a/web/app/components/base/image-uploader/__tests__/video-preview.spec.tsx b/web/app/components/base/image-uploader/__tests__/video-preview.spec.tsx
index f56a4b82e4..90d7e1ea8f 100644
--- a/web/app/components/base/image-uploader/__tests__/video-preview.spec.tsx
+++ b/web/app/components/base/image-uploader/__tests__/video-preview.spec.tsx
@@ -51,7 +51,7 @@ describe('VideoPreview', () => {
 
       const overlay = getOverlay()
       expect(overlay).toBeInTheDocument()
-      expect(overlay.parentElement).toBe(document.body)
+      expect(overlay.closest('[data-base-ui-portal]')?.parentElement).toBe(document.body)
     })
   })
 
diff --git a/web/app/components/base/image-uploader/audio-preview.tsx b/web/app/components/base/image-uploader/audio-preview.tsx
index aa87d9d04e..4f7dd83400 100644
--- a/web/app/components/base/image-uploader/audio-preview.tsx
+++ b/web/app/components/base/image-uploader/audio-preview.tsx
@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import { createPortal } from 'react-dom'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 
 type AudioPreviewProps = {
   url: string
@@ -11,26 +11,42 @@ const AudioPreview: FC<AudioPreviewProps> = ({
   title,
   onCancel,
 }) => {
-  return createPortal(
-    <div className="fixed inset-0 z-1000 flex items-center justify-center bg-black/80 p-8" onClick={e => e.stopPropagation()} data-testid="audio-preview-overlay">
-      <div>
-        <audio controls title={title} autoPlay={false} preload="metadata" data-testid="audio-element">
-          <source
-            type="audio/mpeg"
-            src={url}
-            className="max-h-full max-w-full"
-          />
-        </audio>
-      </div>
-      <div
-        className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
-        onClick={onCancel}
-        data-testid="close-preview"
+  return (
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open)
+          onCancel()
+      }}
+      disablePointerDismissal
+    >
+      <DialogContent
+        className="inset-0! top-0! left-0! flex h-dvh! max-h-none! w-screen! max-w-none! translate-x-0! translate-y-0! items-center justify-center overflow-hidden! rounded-none! border-none! bg-black/80 p-8! shadow-none!"
+        backdropClassName="bg-transparent!"
       >
-        <span className="i-ri-close-line h-4 w-4 text-gray-500" />
-      </div>
-    </div>,
-    document.body,
+        <div
+          aria-label={title}
+          data-testid="audio-preview-overlay"
+          tabIndex={-1}
+          onClick={e => e.stopPropagation()}
+        >
+          <audio controls title={title} autoPlay={false} preload="metadata" data-testid="audio-element">
+            <source
+              type="audio/mpeg"
+              src={url}
+              className="max-h-full max-w-full"
+            />
+          </audio>
+        </div>
+        <div
+          className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
+          onClick={onCancel}
+          data-testid="close-preview"
+        >
+          <span className="i-ri-close-line h-4 w-4 text-gray-500" />
+        </div>
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/web/app/components/base/image-uploader/image-preview.tsx b/web/app/components/base/image-uploader/image-preview.tsx
index 354fb5ff2a..071188bf12 100644
--- a/web/app/components/base/image-uploader/image-preview.tsx
+++ b/web/app/components/base/image-uploader/image-preview.tsx
@@ -1,12 +1,12 @@
 import type { FC } from 'react'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import { toast } from '@langgenius/dify-ui/toast'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { noop } from 'es-toolkit/function'
-import { t } from 'i18next'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { createPortal } from 'react-dom'
 import { useHotkeys } from 'react-hotkeys-hook'
+import { useTranslation } from 'react-i18next'
 import { downloadUrl } from '@/utils/download'
 
 type ImagePreviewProps = {
@@ -33,6 +33,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
   onPrev,
   onNext,
 }) => {
+  const { t } = useTranslation()
   const [scale, setScale] = useState(1)
   const [position, setPosition] = useState({ x: 0, y: 0 })
   const [isDragging, setIsDragging] = useState(false)
@@ -119,7 +120,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
       }
     }
     shareImage()
-  }, [title, url])
+  }, [t, title, url])
 
   const handleWheel = useCallback((e: React.WheelEvent<HTMLDivElement>) => {
     if (e.deltaY < 0)
@@ -167,131 +168,161 @@ const ImagePreview: FC<ImagePreviewProps> = ({
     }
   }, [handleMouseUp])
 
-  useHotkeys('esc', onCancel)
   useHotkeys('up', zoomIn)
   useHotkeys('down', zoomOut)
   useHotkeys('left', onPrev || noop)
   useHotkeys('right', onNext || noop)
 
-  return createPortal(
-    <div
-      className="image-preview-container fixed inset-0 z-1000 flex items-center justify-center bg-black/80 p-8"
-      onClick={e => e.stopPropagation()}
-      onWheel={handleWheel}
-      onMouseDown={handleMouseDown}
-      onMouseMove={handleMouseMove}
-      onMouseUp={handleMouseUp}
-      style={{ cursor: scale > 1 ? 'move' : 'default' }}
-      tabIndex={-1}
-      data-testid="image-preview-container"
+  const copyImageLabel = t('operation.copyImage', { ns: 'common' })
+  const zoomOutLabel = t('operation.zoomOut', { ns: 'common' })
+  const zoomInLabel = t('operation.zoomIn', { ns: 'common' })
+  const downloadLabel = t('operation.download', { ns: 'common' })
+  const openInNewTabLabel = t('operation.openInNewTab', { ns: 'common' })
+  const cancelLabel = t('operation.cancel', { ns: 'common' })
+
+  return (
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open)
+          onCancel()
+      }}
+      disablePointerDismissal
     >
-      { }
-      { }
-      <img
-        ref={imgRef}
-        alt={title}
-        src={isBase64(url) ? `data:image/png;base64,${url}` : url}
-        className="max-h-full max-w-full"
-        style={{
-          transform: `scale(${scale}) translate(${position.x}px, ${position.y}px)`,
-          transition: isDragging ? 'none' : 'transform 0.2s ease-in-out',
-        }}
-        data-testid="image-preview-image"
-      />
-      <Tooltip>
-        <TooltipTrigger
-          render={(
-            <div
-              className="absolute top-6 right-48 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
-              onClick={imageCopy}
-            >
-              {isCopied
-                ? <span className="i-ri-file-copy-line h-4 w-4 text-green-500" data-testid="image-preview-copied-icon" />
-                : <span className="i-ri-file-copy-line h-4 w-4 text-gray-500" data-testid="image-preview-copy-button" />}
-            </div>
-          )}
-        />
-        <TooltipContent>
-          {t('operation.copyImage', { ns: 'common' })}
-        </TooltipContent>
-      </Tooltip>
-      <Tooltip>
-        <TooltipTrigger
-          render={(
-            <div
-              className="absolute top-6 right-40 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
-              onClick={zoomOut}
-            >
-              <span className="i-ri-zoom-out-line h-4 w-4 text-gray-500" data-testid="image-preview-zoom-out-button" />
-            </div>
-          )}
-        />
-        <TooltipContent>
-          {t('operation.zoomOut', { ns: 'common' })}
-        </TooltipContent>
-      </Tooltip>
-      <Tooltip>
-        <TooltipTrigger
-          render={(
-            <div
-              className="absolute top-6 right-32 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
-              onClick={zoomIn}
-            >
-              <span className="i-ri-zoom-in-line h-4 w-4 text-gray-500" data-testid="image-preview-zoom-in-button" />
-            </div>
-          )}
-        />
-        <TooltipContent>
-          {t('operation.zoomIn', { ns: 'common' })}
-        </TooltipContent>
-      </Tooltip>
-      <Tooltip>
-        <TooltipTrigger
-          render={(
-            <div
-              className="absolute top-6 right-24 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
-              onClick={downloadImage}
-            >
-              <span className="i-ri-download-cloud-2-line h-4 w-4 text-gray-500" data-testid="image-preview-download-button" />
-            </div>
-          )}
-        />
-        <TooltipContent>
-          {t('operation.download', { ns: 'common' })}
-        </TooltipContent>
-      </Tooltip>
-      <Tooltip>
-        <TooltipTrigger
-          render={(
-            <div
-              className="absolute top-6 right-16 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
-              onClick={openInNewTab}
-            >
-              <span className="i-ri-add-box-line h-4 w-4 text-gray-500" data-testid="image-preview-open-in-tab-button" />
-            </div>
-          )}
-        />
-        <TooltipContent>
-          {t('operation.openInNewTab', { ns: 'common' })}
-        </TooltipContent>
-      </Tooltip>
-      <Tooltip>
-        <TooltipTrigger
-          render={(
-            <div
-              className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/8 backdrop-blur-[2px]"
-              onClick={onCancel}
-            >
-              <span className="i-ri-close-line h-4 w-4 text-gray-500" data-testid="image-preview-close-button" />
-            </div>
-          )}
-        />
-        <TooltipContent>
-          {t('operation.cancel', { ns: 'common' })}
-        </TooltipContent>
-      </Tooltip>
-    </div>,
-    document.body,
+      <DialogContent
+        className="image-preview-container inset-0! top-0! left-0! flex h-dvh! max-h-none! w-screen! max-w-none! translate-x-0! translate-y-0! items-center justify-center overflow-hidden! rounded-none! border-none! bg-black/80 p-8! shadow-none!"
+        backdropClassName="bg-transparent!"
+      >
+        <div
+          aria-label={title}
+          data-testid="image-preview-container"
+          tabIndex={-1}
+          className="flex h-full w-full items-center justify-center"
+          onClick={e => e.stopPropagation()}
+          onWheel={handleWheel}
+          onMouseDown={handleMouseDown}
+          onMouseMove={handleMouseMove}
+          onMouseUp={handleMouseUp}
+          style={{ cursor: scale > 1 ? 'move' : 'default' }}
+        >
+          <img
+            ref={imgRef}
+            alt={title}
+            src={isBase64(url) ? `data:image/png;base64,${url}` : url}
+            className="max-h-full max-w-full"
+            style={{
+              transform: `scale(${scale}) translate(${position.x}px, ${position.y}px)`,
+              transition: isDragging ? 'none' : 'transform 0.2s ease-in-out',
+            }}
+            data-testid="image-preview-image"
+          />
+        </div>
+        <Tooltip>
+          <TooltipTrigger
+            render={(
+              <button
+                type="button"
+                aria-label={copyImageLabel}
+                className="absolute top-6 right-48 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
+                onClick={imageCopy}
+              >
+                {isCopied
+                  ? <span className="i-ri-file-copy-line h-4 w-4 text-green-500" data-testid="image-preview-copied-icon" />
+                  : <span className="i-ri-file-copy-line h-4 w-4 text-gray-500" data-testid="image-preview-copy-button" />}
+              </button>
+            )}
+          />
+          <TooltipContent>
+            {copyImageLabel}
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger
+            render={(
+              <button
+                type="button"
+                aria-label={zoomOutLabel}
+                className="absolute top-6 right-40 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
+                onClick={zoomOut}
+              >
+                <span className="i-ri-zoom-out-line h-4 w-4 text-gray-500" data-testid="image-preview-zoom-out-button" />
+              </button>
+            )}
+          />
+          <TooltipContent>
+            {zoomOutLabel}
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger
+            render={(
+              <button
+                type="button"
+                aria-label={zoomInLabel}
+                className="absolute top-6 right-32 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
+                onClick={zoomIn}
+              >
+                <span className="i-ri-zoom-in-line h-4 w-4 text-gray-500" data-testid="image-preview-zoom-in-button" />
+              </button>
+            )}
+          />
+          <TooltipContent>
+            {zoomInLabel}
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger
+            render={(
+              <button
+                type="button"
+                aria-label={downloadLabel}
+                className="absolute top-6 right-24 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
+                onClick={downloadImage}
+              >
+                <span className="i-ri-download-cloud-2-line h-4 w-4 text-gray-500" data-testid="image-preview-download-button" />
+              </button>
+            )}
+          />
+          <TooltipContent>
+            {downloadLabel}
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger
+            render={(
+              <button
+                type="button"
+                aria-label={openInNewTabLabel}
+                className="absolute top-6 right-16 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
+                onClick={openInNewTab}
+              >
+                <span className="i-ri-add-box-line h-4 w-4 text-gray-500" data-testid="image-preview-open-in-tab-button" />
+              </button>
+            )}
+          />
+          <TooltipContent>
+            {openInNewTabLabel}
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger
+            render={(
+              <button
+                type="button"
+                aria-label={cancelLabel}
+                className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/8 backdrop-blur-[2px]"
+                onClick={onCancel}
+              >
+                <span className="i-ri-close-line h-4 w-4 text-gray-500" data-testid="image-preview-close-button" />
+              </button>
+            )}
+          />
+          <TooltipContent>
+            {cancelLabel}
+          </TooltipContent>
+        </Tooltip>
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/web/app/components/base/image-uploader/video-preview.tsx b/web/app/components/base/image-uploader/video-preview.tsx
index d2a0179b57..8d5cb4dab3 100644
--- a/web/app/components/base/image-uploader/video-preview.tsx
+++ b/web/app/components/base/image-uploader/video-preview.tsx
@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import { createPortal } from 'react-dom'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 
 type VideoPreviewProps = {
   url: string
@@ -11,25 +11,41 @@ const VideoPreview: FC<VideoPreviewProps> = ({
   title,
   onCancel,
 }) => {
-  return createPortal(
-    <div className="fixed inset-0 z-1000 flex items-center justify-center bg-black/80 p-8" onClick={e => e.stopPropagation()} data-testid="video-preview">
-      <div>
-        <video controls title={title} autoPlay={false} preload="metadata" data-testid="video-element">
-          <source
-            type="video/mp4"
-            src={url}
-            className="max-h-full max-w-full"
-          />
-        </video>
-      </div>
-      <div
-        className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
-        onClick={onCancel}
+  return (
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open)
+          onCancel()
+      }}
+      disablePointerDismissal
+    >
+      <DialogContent
+        className="inset-0! top-0! left-0! flex h-dvh! max-h-none! w-screen! max-w-none! translate-x-0! translate-y-0! items-center justify-center overflow-hidden! rounded-none! border-none! bg-black/80 p-8! shadow-none!"
+        backdropClassName="bg-transparent!"
       >
-        <span className="i-ri-close-line h-4 w-4 text-gray-500" data-testid="close-button" />
-      </div>
-    </div>,
-    document.body,
+        <div
+          aria-label={title}
+          data-testid="video-preview"
+          tabIndex={-1}
+          onClick={e => e.stopPropagation()}
+        >
+          <video controls title={title} autoPlay={false} preload="metadata" data-testid="video-element">
+            <source
+              type="video/mp4"
+              src={url}
+              className="max-h-full max-w-full"
+            />
+          </video>
+        </div>
+        <div
+          className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
+          onClick={onCancel}
+        >
+          <span className="i-ri-close-line h-4 w-4 text-gray-500" data-testid="close-button" />
+        </div>
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/web/app/components/base/modal-like-wrap/__tests__/index.spec.tsx b/web/app/components/base/modal-like-wrap/__tests__/index.spec.tsx
deleted file mode 100644
index dc7b0758fa..0000000000
--- a/web/app/components/base/modal-like-wrap/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { act, fireEvent, render, screen } from '@testing-library/react'
-import ModalLikeWrap from '..'
-
-describe('ModalLikeWrap', () => {
-  const defaultProps = {
-    title: 'Test Title',
-    onClose: vi.fn(),
-    onConfirm: vi.fn(),
-    children: <div>Test Content</div>,
-  }
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Render', () => {
-    it('renders title and content correctly', () => {
-      render(<ModalLikeWrap {...defaultProps} />)
-
-      expect(screen.getByText('Test Title')).toBeInTheDocument()
-      expect(screen.getByText('Test Content')).toBeInTheDocument()
-    })
-
-    it('renders beforeHeader if provided', () => {
-      const beforeHeader = <div data-testid="before-header">Before Header</div>
-      render(<ModalLikeWrap {...defaultProps} beforeHeader={beforeHeader} />)
-
-      expect(screen.getByTestId('before-header')).toBeInTheDocument()
-      expect(screen.getByText('Before Header')).toBeInTheDocument()
-    })
-  })
-
-  describe('Interactions', () => {
-    it('calls onClose when close icon is clicked', async () => {
-      render(<ModalLikeWrap {...defaultProps} />)
-
-      const closeBtn = screen.getByTestId('modal-close-btn')
-      expect(closeBtn).toBeInTheDocument()
-
-      await act(async () => {
-        fireEvent.click(closeBtn)
-      })
-
-      expect(defaultProps.onClose).toHaveBeenCalledTimes(1)
-    })
-
-    it('calls onClose when Cancel button is clicked', async () => {
-      render(<ModalLikeWrap {...defaultProps} />)
-
-      const cancelBtn = screen.getByText('common.operation.cancel')
-      await act(async () => {
-        fireEvent.click(cancelBtn)
-      })
-
-      expect(defaultProps.onClose).toHaveBeenCalled()
-    })
-
-    it('calls onConfirm when Save button is clicked', async () => {
-      render(<ModalLikeWrap {...defaultProps} />)
-
-      const saveBtn = screen.getByText('common.operation.save')
-      await act(async () => {
-        fireEvent.click(saveBtn)
-      })
-
-      expect(defaultProps.onConfirm).toHaveBeenCalled()
-    })
-  })
-
-  describe('Props', () => {
-    it('hides close icon when hideCloseBtn is true', () => {
-      render(<ModalLikeWrap {...defaultProps} hideCloseBtn={true} />)
-
-      const closeBtn = document.querySelector('.remixicon')
-      expect(closeBtn).not.toBeInTheDocument()
-    })
-
-    it('applies custom className', () => {
-      const { container } = render(<ModalLikeWrap {...defaultProps} className="custom-class" />)
-
-      expect(container.firstChild).toHaveClass('custom-class')
-    })
-  })
-})
diff --git a/web/app/components/base/modal-like-wrap/index.stories.tsx b/web/app/components/base/modal-like-wrap/index.stories.tsx
deleted file mode 100644
index 38d969b2ce..0000000000
--- a/web/app/components/base/modal-like-wrap/index.stories.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import ModalLikeWrap from '.'
-
-const meta = {
-  title: 'Base/Feedback/ModalLikeWrap',
-  component: ModalLikeWrap,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'Compact “modal-like” card used in wizards. Provides header actions, optional back slot, and confirm/cancel buttons.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    title: {
-      control: 'text',
-      description: 'Header title text.',
-    },
-    className: {
-      control: 'text',
-      description: 'Additional classes on the wrapper.',
-    },
-    beforeHeader: {
-      control: false,
-      description: 'Slot rendered before the header (commonly a back link).',
-    },
-    hideCloseBtn: {
-      control: 'boolean',
-      description: 'Hides the top-right close icon when true.',
-    },
-    children: {
-      control: false,
-    },
-    onClose: {
-      control: false,
-    },
-    onConfirm: {
-      control: false,
-    },
-  },
-  args: {
-    title: 'Create dataset field',
-    hideCloseBtn: false,
-    onClose: () => console.log('close'),
-    onConfirm: () => console.log('confirm'),
-    children: null,
-  },
-} satisfies Meta<typeof ModalLikeWrap>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const BaseContent = () => (
-  <div className="space-y-3 text-sm text-gray-600">
-    <p>
-      Describe the new field your dataset should collect. Provide a clear label and optional helper text.
-    </p>
-    <div className="rounded-lg border border-dashed border-gray-200 bg-gray-50 p-4 text-xs text-gray-500">
-      Form inputs would be placed here in the real flow.
-    </div>
-  </div>
-)
-
-export const Default: Story = {
-  render: args => (
-    <ModalLikeWrap {...args}>
-      <BaseContent />
-    </ModalLikeWrap>
-  ),
-  args: {
-    children: null,
-  },
-}
-
-export const WithBackLink: Story = {
-  render: args => (
-    <ModalLikeWrap
-      {...args}
-      hideCloseBtn
-      beforeHeader={(
-        <button
-          className="mb-1 flex items-center gap-1 text-xs font-medium text-text-accent uppercase"
-          onClick={() => console.log('back')}
-        >
-          <span className="inline-block h-4 w-4 rounded-sm bg-text-accent/10 text-center text-[10px] leading-4 text-text-accent">{'<'}</span>
-          Back
-        </button>
-      )}
-    >
-      <BaseContent />
-    </ModalLikeWrap>
-  ),
-  args: {
-    title: 'Select metadata type',
-    children: null,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Demonstrates feeding content into `beforeHeader` while hiding the close button.',
-      },
-    },
-  },
-}
-
-export const CustomWidth: Story = {
-  render: args => (
-    <ModalLikeWrap
-      {...args}
-      className="w-[420px]"
-    >
-      <BaseContent />
-      <div className="mt-4 rounded-md bg-blue-50 p-3 text-xs text-blue-600">
-        Tip: metadata keys may only include letters, numbers, and underscores.
-      </div>
-    </ModalLikeWrap>
-  ),
-  args: {
-    title: 'Advanced configuration',
-    children: null,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Applies extra width and helper messaging to emulate configuration panels.',
-      },
-    },
-  },
-}
diff --git a/web/app/components/base/modal-like-wrap/index.tsx b/web/app/components/base/modal-like-wrap/index.tsx
deleted file mode 100644
index 1c049eb5f4..0000000000
--- a/web/app/components/base/modal-like-wrap/index.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import { Button } from '@langgenius/dify-ui/button'
-import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import { useTranslation } from 'react-i18next'
-
-type Props = {
-  title: string
-  className?: string
-  beforeHeader?: React.ReactNode
-  onClose: () => void
-  hideCloseBtn?: boolean
-  onConfirm: () => void
-  children: React.ReactNode
-}
-
-const ModalLikeWrap: FC<Props> = ({
-  title,
-  className,
-  beforeHeader,
-  children,
-  onClose,
-  hideCloseBtn,
-  onConfirm,
-}) => {
-  const { t } = useTranslation()
-
-  return (
-    <div className={cn('w-[320px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg px-3 pt-3.5 pb-4 shadow-xl', className)}>
-      {beforeHeader || null}
-      <div className="mb-1 flex h-6 items-center justify-between">
-        <div className="system-xl-semibold text-text-primary">{title}</div>
-        {!hideCloseBtn && (
-          <div
-            className="cursor-pointer p-1.5 text-text-tertiary"
-            onClick={onClose}
-          >
-            <span className="i-ri-close-line size-4" data-testid="modal-close-btn" />
-          </div>
-        )}
-      </div>
-      <div className="mt-2">{children}</div>
-      <div className="mt-4 flex justify-end">
-        <Button
-          className="mr-2"
-          onClick={onClose}
-        >
-          {t('operation.cancel', { ns: 'common' })}
-        </Button>
-        <Button
-          onClick={onConfirm}
-          variant="primary"
-        >
-          {t('operation.save', { ns: 'common' })}
-        </Button>
-      </div>
-    </div>
-  )
-}
-
-export default React.memo(ModalLikeWrap)
diff --git a/web/app/components/base/modal/__tests__/index.spec.tsx b/web/app/components/base/modal/__tests__/index.spec.tsx
deleted file mode 100644
index 4705d0defd..0000000000
--- a/web/app/components/base/modal/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import { act, fireEvent, render, screen } from '@testing-library/react'
-import Modal from '..'
-
-describe('Modal', () => {
-  describe('Render', () => {
-    it('should not render content when isShow is false', () => {
-      render(
-        <Modal isShow={false} title="Test Modal">
-          <div>Modal Content</div>
-        </Modal>,
-      )
-
-      expect(screen.queryByText('Test Modal')).not.toBeInTheDocument()
-      expect(screen.queryByText('Modal Content')).not.toBeInTheDocument()
-    })
-
-    it('should render content when isShow is true', async () => {
-      await act(async () => {
-        render(
-          <Modal isShow={true} title="Test Modal">
-            <div>Modal Content</div>
-          </Modal>,
-        )
-      })
-
-      expect(screen.getByText('Test Modal')).toBeInTheDocument()
-      expect(screen.getByText('Modal Content')).toBeInTheDocument()
-    })
-
-    it('should render description when provided', async () => {
-      await act(async () => {
-        render(
-          <Modal isShow={true} title="Test Modal" description="Test Description">
-            <div>Content</div>
-          </Modal>,
-        )
-      })
-
-      expect(screen.getByText('Test Description')).toBeInTheDocument()
-    })
-  })
-
-  describe('Interaction', () => {
-    it('should call onClose when close button is clicked', async () => {
-      const handleClose = vi.fn()
-      await act(async () => {
-        render(
-          <Modal isShow={true} title="Test Modal" closable={true} onClose={handleClose}>
-            <div>Content</div>
-          </Modal>,
-        )
-      })
-
-      const closeButton = screen.getByTestId('modal-close-button')
-      expect(closeButton).toBeInTheDocument()
-      await act(async () => {
-        fireEvent.click(closeButton!)
-      })
-      expect(handleClose).toHaveBeenCalledTimes(1)
-    })
-
-    it('should prevent propagation when clicking the scrollable container', async () => {
-      await act(async () => {
-        render(
-          <Modal isShow={true} title="Test Modal">
-            <div>Content</div>
-          </Modal>,
-        )
-      })
-
-      const wrapper = document.querySelector('.overflow-y-auto')
-      expect(wrapper).toBeInTheDocument()
-
-      const event = new MouseEvent('click', { bubbles: true, cancelable: true })
-      const stopPropagationSpy = vi.spyOn(event, 'stopPropagation')
-      const preventDefaultSpy = vi.spyOn(event, 'preventDefault')
-
-      await act(async () => {
-        wrapper!.dispatchEvent(event)
-      })
-
-      expect(stopPropagationSpy).toHaveBeenCalled()
-      expect(preventDefaultSpy).toHaveBeenCalled()
-    })
-
-    it('should handle clickOutsideNotClose prop', async () => {
-      const handleClose = vi.fn()
-      await act(async () => {
-        render(
-          <Modal isShow={true} title="Test Modal" clickOutsideNotClose={true} onClose={handleClose}>
-            <div>Content</div>
-          </Modal>,
-        )
-      })
-
-      await act(async () => {
-        fireEvent.keyDown(screen.getByRole('dialog'), { key: 'Escape', code: 'Escape' })
-      })
-
-      expect(handleClose).not.toHaveBeenCalled()
-    })
-  })
-
-  describe('Props', () => {
-    it('should apply custom className to the panel', async () => {
-      await act(async () => {
-        render(
-          <Modal isShow={true} title="Test Modal" className="custom-panel-class">
-            <div>Content</div>
-          </Modal>,
-        )
-      })
-
-      const panel = screen.getByText('Test Modal').parentElement
-      expect(panel).toHaveClass('custom-panel-class')
-    })
-
-    it('should apply wrapperClassName and containerClassName', async () => {
-      await act(async () => {
-        render(
-          <Modal
-            isShow={true}
-            title="Test Modal"
-            wrapperClassName="custom-wrapper"
-            containerClassName="custom-container"
-          >
-            <div>Content</div>
-          </Modal>,
-        )
-      })
-
-      const dialog = document.querySelector('.custom-wrapper')
-      expect(dialog).toBeInTheDocument()
-      const container = document.querySelector('.custom-container')
-      expect(container).toBeInTheDocument()
-    })
-
-    it('should apply overlayOpacity background when overlayOpacity is true', async () => {
-      await act(async () => {
-        render(
-          <Modal isShow={true} title="Test Modal" overlayOpacity={true}>
-            <div>Content</div>
-          </Modal>,
-        )
-      })
-
-      const overlay = document.querySelector('.bg-workflow-canvas-canvas-overlay')
-      expect(overlay).toBeInTheDocument()
-    })
-
-    it('should toggle overflow-visible class based on overflowVisible prop', async () => {
-      const { rerender } = render(
-        <Modal isShow={true} title="Test Modal" overflowVisible={true}>
-          <div>Content</div>
-        </Modal>,
-      )
-
-      let panel = screen.getByText('Test Modal').parentElement
-      expect(panel).toHaveClass('overflow-visible')
-
-      await act(async () => {
-        rerender(
-          <Modal isShow={true} title="Test Modal" overflowVisible={false}>
-            <div>Content</div>
-          </Modal>,
-        )
-      })
-      panel = screen.getByText('Test Modal').parentElement
-      expect(panel).toHaveClass('overflow-hidden')
-    })
-  })
-})
diff --git a/web/app/components/base/modal/index.stories.tsx b/web/app/components/base/modal/index.stories.tsx
deleted file mode 100644
index 33d0366324..0000000000
--- a/web/app/components/base/modal/index.stories.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { useEffect, useState } from 'react'
-import Modal from '.'
-
-const meta = {
-  title: 'Base/Feedback/Modal',
-  component: Modal,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component: 'Lightweight modal wrapper with optional header/description and close icon.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    className: {
-      control: 'text',
-      description: 'Extra classes applied to the modal panel.',
-    },
-    wrapperClassName: {
-      control: 'text',
-      description: 'Additional wrapper classes for the dialog.',
-    },
-    isShow: {
-      control: 'boolean',
-      description: 'Controls whether the modal is visible.',
-    },
-    title: {
-      control: 'text',
-      description: 'Heading displayed at the top of the modal.',
-    },
-    description: {
-      control: 'text',
-      description: 'Secondary text beneath the title.',
-    },
-    closable: {
-      control: 'boolean',
-      description: 'Whether the close icon should be shown.',
-    },
-    overflowVisible: {
-      control: 'boolean',
-      description: 'Allows content to overflow the modal panel.',
-    },
-    onClose: {
-      control: false,
-      description: 'Callback invoked when the modal requests to close.',
-    },
-  },
-  args: {
-    isShow: false,
-    title: 'Create new API key',
-    description: 'Generate a scoped key for this workspace. You can revoke it at any time.',
-    closable: true,
-  },
-} satisfies Meta<typeof Modal>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const ModalDemo = (props: React.ComponentProps<typeof Modal>) => {
-  const [open, setOpen] = useState(props.isShow)
-
-  useEffect(() => {
-    setOpen(props.isShow)
-  }, [props.isShow])
-
-  return (
-    <div className="relative flex h-[480px] items-center justify-center bg-gray-100">
-      <button
-        className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700"
-        onClick={() => setOpen(true)}
-      >
-        Show modal
-      </button>
-
-      <Modal
-        {...props}
-        isShow={open}
-        onClose={() => {
-          props.onClose?.()
-          setOpen(false)
-        }}
-      >
-        <div className="mt-6 space-y-4 text-sm text-gray-600">
-          <p>
-            Provide a descriptive name for this key so collaborators know its purpose. Restrict usage with scopes to limit access.
-          </p>
-          <div className="rounded-lg border border-dashed border-gray-200 bg-gray-50 p-4 text-xs text-gray-500">
-            Form fields and validation messaging would appear here. This placeholder keeps the story lightweight.
-          </div>
-        </div>
-        <div className="mt-8 flex justify-end gap-3">
-          <button
-            className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-50"
-            onClick={() => setOpen(false)}
-          >
-            Cancel
-          </button>
-          <button className="rounded-md bg-primary-600 px-3 py-1.5 text-sm text-white hover:bg-primary-700">
-            Create key
-          </button>
-        </div>
-      </Modal>
-    </div>
-  )
-}
-
-export const Default: Story = {
-  render: args => <ModalDemo {...args} />,
-}
-
-export const OverflowVisible: Story = {
-  render: args => <ModalDemo {...args} />,
-  args: {
-    overflowVisible: true,
-    description: 'Demonstrates the modal configured to let the body content overflow.',
-    className: 'max-w-[540px]',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Shows the modal with `overflowVisible` enabled for content that needs to escape the panel bounds.',
-      },
-    },
-  },
-}
diff --git a/web/app/components/base/modal/index.tsx b/web/app/components/base/modal/index.tsx
deleted file mode 100644
index 8b4b6174a3..0000000000
--- a/web/app/components/base/modal/index.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * @deprecated Use `@langgenius/dify-ui/dialog` instead.
- * This component will be removed after migration is complete.
- * See: https://github.com/langgenius/dify/issues/32767
- */
-import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react'
-import { cn } from '@langgenius/dify-ui/cn'
-import { noop } from 'es-toolkit/function'
-import { Fragment } from 'react'
-// https://headlessui.com/react/dialog
-
-type IModal = {
-  className?: string
-  wrapperClassName?: string
-  containerClassName?: string
-  isShow: boolean
-  onClose?: () => void
-  title?: React.ReactNode
-  description?: React.ReactNode
-  children?: React.ReactNode
-  closable?: boolean
-  overflowVisible?: boolean
-  overlayOpacity?: boolean // For semi-transparent overlay instead of default
-  clickOutsideNotClose?: boolean // Prevent closing when clicking outside modal
-}
-
-export default function Modal({
-  className,
-  wrapperClassName,
-  containerClassName,
-  isShow,
-  onClose = noop,
-  title,
-  description,
-  children,
-  closable = false,
-  overflowVisible = false,
-  overlayOpacity = false,
-  clickOutsideNotClose = false,
-}: IModal) {
-  return (
-    <Transition appear show={isShow} as={Fragment}>
-      <Dialog as="div" className={cn('relative z-60', wrapperClassName)} onClose={clickOutsideNotClose ? noop : onClose}>
-        <TransitionChild>
-          <div className={cn('fixed inset-0', overlayOpacity ? 'bg-workflow-canvas-canvas-overlay' : 'bg-background-overlay', 'duration-300 ease-in data-closed:opacity-0', 'data-enter:opacity-100', 'data-leave:opacity-0')} />
-        </TransitionChild>
-        <div
-          className="fixed inset-0 overflow-y-auto"
-          onClick={(e) => {
-            e.preventDefault()
-            e.stopPropagation()
-          }}
-        >
-          <div className={cn('flex min-h-full items-center justify-center p-4 text-center', containerClassName)}>
-            <TransitionChild>
-              <DialogPanel className={cn('relative w-full max-w-[480px] rounded-2xl bg-components-panel-bg p-6 text-left align-middle shadow-xl transition-all', overflowVisible ? 'overflow-visible' : 'overflow-hidden', 'duration-100 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)}>
-                {!!title && (
-                  <DialogTitle
-                    as="h3"
-                    className="title-2xl-semi-bold text-text-primary"
-                  >
-                    {title}
-                  </DialogTitle>
-                )}
-                {!!description && (
-                  <div className="mt-2 body-md-regular text-text-secondary">
-                    {description}
-                  </div>
-                )}
-                {closable
-                  && (
-                    <div className="absolute top-6 right-6 z-10 flex h-5 w-5 items-center justify-center rounded-2xl hover:cursor-pointer hover:bg-state-base-hover">
-                      <span
-                        className="i-ri-close-line h-4 w-4 text-text-tertiary"
-                        onClick={
-                          (e) => {
-                            e.stopPropagation()
-                            onClose()
-                          }
-                        }
-                        data-testid="modal-close-button"
-                      />
-                    </div>
-                  )}
-                {children}
-              </DialogPanel>
-            </TransitionChild>
-          </div>
-        </div>
-      </Dialog>
-    </Transition>
-  )
-}
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx
index 9a752062ea..f3fc1a605c 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx
@@ -4,6 +4,7 @@ import type { WorkflowNodesMap } from '../workflow-variable-block/node'
 import type { FormInputItem } from '@/app/components/workflow/nodes/human-input/types'
 import type { Type } from '@/app/components/workflow/nodes/llm/types'
 import type { ValueSelector, Var } from '@/app/components/workflow/types'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef } from 'react'
@@ -11,7 +12,6 @@ import { useTranslation } from 'react-i18next'
 import { InputVarType } from '@/app/components/workflow/types'
 import ActionButton from '../../../action-button'
 import { VariableX } from '../../../icons/src/vender/workflow'
-import Modal from '../../../modal'
 import InputField from './input-field'
 import VariableBlock from './variable-block'
 
@@ -157,20 +157,24 @@ const HITLInputComponentUI: FC<HITLInputComponentUIProps> = ({
       </div>
 
       {isShowEditModal && (
-        <Modal
-          isShow
-          onClose={hideEditModal}
-          wrapperClassName="z-999"
-          className="max-w-[372px] p-0!"
+        <Dialog
+          open
+          onOpenChange={(open) => {
+            if (!open)
+              hideEditModal()
+          }}
         >
-          <InputField
-            nodeId={nodeId}
-            isEdit
-            payload={formInput}
-            onChange={handleChange}
-            onCancel={hideEditModal}
-          />
-        </Modal>
+          <DialogContent className="w-full max-w-[372px] overflow-hidden! border-none p-0! text-left align-middle">
+
+            <InputField
+              nodeId={nodeId}
+              isEdit
+              payload={formInput}
+              onChange={handleChange}
+              onCancel={hideEditModal}
+            />
+          </DialogContent>
+        </Dialog>
       )}
     </div>
   )
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
index 7511406718..e0fcd3bdba 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
@@ -82,7 +82,9 @@ const InputField: React.FC<InputFieldProps> = ({
   }, [handleSave])
 
   return (
-    <div className="w-[372px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-3 shadow-lg backdrop-blur-[5px]">
+    <div className="w-[372px]
+     rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-3 shadow-lg backdrop-blur-[5px]"
+    >
       <div className="system-md-semibold text-text-primary">{t(`${i18nPrefix}.title`, { ns: 'workflow' })}</div>
       <div className="mt-3">
         <div className="system-xs-medium text-text-secondary">
diff --git a/web/app/components/base/prompt-editor/plugins/shortcuts-popup-plugin/__tests__/index.spec.tsx b/web/app/components/base/prompt-editor/plugins/shortcuts-popup-plugin/__tests__/index.spec.tsx
index e3fba27cf2..114d1d7802 100644
--- a/web/app/components/base/prompt-editor/plugins/shortcuts-popup-plugin/__tests__/index.spec.tsx
+++ b/web/app/components/base/prompt-editor/plugins/shortcuts-popup-plugin/__tests__/index.spec.tsx
@@ -1,4 +1,4 @@
-import type { LexicalCommand } from 'lexical'
+import type { ShortcutPopupInsertHandler } from '../index'
 import { LexicalComposer } from '@lexical/react/LexicalComposer'
 import { ContentEditable } from '@lexical/react/LexicalContentEditable'
 import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary'
@@ -50,7 +50,7 @@ const CONTENT_EDITABLE_ID = 'ce'
 type MinimalEditorProps = {
   withContainer?: boolean
   hotkey?: string | string[] | string[][] | ((e: KeyboardEvent) => boolean)
-  children?: React.ReactNode | ((close: () => void, onInsert: (command: LexicalCommand<unknown>, params: unknown[]) => void) => React.ReactNode)
+  children?: React.ReactNode | ((close: () => void, onInsert: ShortcutPopupInsertHandler) => React.ReactNode)
   className?: string
   onOpen?: () => void
   onClose?: () => void
@@ -316,7 +316,7 @@ describe('ShortcutsPopupPlugin', () => {
 
   it('renders children as render function and provides close/onInsert', async () => {
     const TEST_COMMAND = createCommand<unknown>('TEST_COMMAND')
-    const childrenFn = vi.fn((close: () => void, onInsert: (cmd: LexicalCommand<unknown>, params: unknown[]) => void) => (
+    const childrenFn = vi.fn((close: () => void, onInsert: ShortcutPopupInsertHandler) => (
       <div>
         <button type="button" data-testid="close-btn" onClick={close}>Close</button>
         <button type="button" data-testid="insert-btn" onClick={() => onInsert(TEST_COMMAND, ['param1'])}>Insert</button>
@@ -346,7 +346,7 @@ describe('ShortcutsPopupPlugin', () => {
     const TEST_COMMAND = createCommand<unknown>('TEST_INSERT_COMMAND')
     render(
       <MinimalEditor>
-        {(close: () => void, onInsert: (cmd: LexicalCommand<unknown>, params: unknown[]) => void) => (
+        {(close: () => void, onInsert: ShortcutPopupInsertHandler) => (
           <div>
             <button type="button" data-testid="insert-btn" onClick={() => onInsert(TEST_COMMAND, ['value'])}>Insert</button>
           </div>
diff --git a/web/app/components/base/prompt-editor/plugins/shortcuts-popup-plugin/index.tsx b/web/app/components/base/prompt-editor/plugins/shortcuts-popup-plugin/index.tsx
index 19a2efb5bc..ec03b2fc3d 100644
--- a/web/app/components/base/prompt-editor/plugins/shortcuts-popup-plugin/index.tsx
+++ b/web/app/components/base/prompt-editor/plugins/shortcuts-popup-plugin/index.tsx
@@ -23,6 +23,7 @@ import {
 import { createPortal } from 'react-dom'
 
 export const SHORTCUTS_EMPTY_CONTENT = 'shortcuts_empty_content'
+export type ShortcutPopupInsertHandler = <Payload>(command: LexicalCommand<Payload>, params: Payload) => void
 
 // Hotkey can be:
 // - string: 'mod+/'
@@ -33,7 +34,7 @@ export type Hotkey = string | string[] | string[][] | ((e: KeyboardEvent) => boo
 
 type ShortcutPopupPluginProps = {
   hotkey?: Hotkey
-  children?: React.ReactNode | ((close: () => void, onInsert: (command: LexicalCommand<unknown>, params: any[]) => void) => React.ReactNode)
+  children?: React.ReactNode | ((close: () => void, onInsert: ShortcutPopupInsertHandler) => React.ReactNode)
   className?: string
   container?: Element | null
   onOpen?: () => void
@@ -158,8 +159,9 @@ export default function ShortcutsPopupPlugin({
         apply({ availableWidth, availableHeight, elements }) {
           Object.assign(elements.floating.style, {
             maxWidth: `${Math.min(400, availableWidth)}px`,
-            maxHeight: `${Math.min(300, availableHeight)}px`,
-            overflow: 'auto',
+            maxHeight: `${Math.max(0, availableHeight)}px`,
+            overflowX: 'hidden',
+            overflowY: 'auto',
           })
         },
         padding: 8,
@@ -236,7 +238,7 @@ export default function ShortcutsPopupPlugin({
 
     setOpen(true)
     onOpen?.()
-  }, [onOpen])
+  }, [editor, onOpen, refs])
 
   const closePortal = useCallback(() => {
     setOpen(false)
@@ -280,7 +282,7 @@ export default function ShortcutsPopupPlugin({
     return () => document.removeEventListener('mousedown', onMouseDown, false)
   }, [open, closePortal])
 
-  const handleInsert = useCallback((command: LexicalCommand<unknown>, params: any) => {
+  const handleInsert = useCallback(<Payload,>(command: LexicalCommand<Payload>, params: Payload) => {
     editor.dispatchCommand(command, params)
     closePortal()
   }, [editor, closePortal])
diff --git a/web/app/components/billing/annotation-full/__tests__/modal.spec.tsx b/web/app/components/billing/annotation-full/__tests__/modal.spec.tsx
index 0033ced4ce..3f7862b24b 100644
--- a/web/app/components/billing/annotation-full/__tests__/modal.spec.tsx
+++ b/web/app/components/billing/annotation-full/__tests__/modal.spec.tsx
@@ -29,26 +29,26 @@ type ModalSnapshot = {
   className?: string
 }
 let mockModalProps: ModalSnapshot | null = null
-vi.mock('../../../base/modal', () => ({
-  default: ({ isShow, children, onClose, closable, className }: { isShow: boolean, children: React.ReactNode, onClose: () => void, closable?: boolean, className?: string }) => {
+let mockOnOpenChange: ((open: boolean) => void) | undefined
+vi.mock('@langgenius/dify-ui/dialog', () => ({
+  Dialog: ({ open, onOpenChange, children }: { open?: boolean, onOpenChange?: (open: boolean) => void, children: React.ReactNode }) => {
+    mockOnOpenChange = onOpenChange
+    mockModalProps = { isShow: open !== false }
+    return open === false ? null : <>{children}</>
+  },
+  DialogContent: ({ children, className }: { children: React.ReactNode, className?: string }) => {
     mockModalProps = {
-      isShow,
-      closable,
+      isShow: true,
+      closable: true,
       className,
     }
-    if (!isShow)
-      return null
     return (
       <div data-testid="annotation-full-modal" data-classname={className ?? ''}>
-        {closable && (
-          <button type="button" data-testid="mock-modal-close" onClick={onClose}>
-            close
-          </button>
-        )}
         {children}
       </div>
     )
   },
+  DialogCloseButton: () => <button type="button" data-testid="mock-modal-close" onClick={() => mockOnOpenChange?.(false)}>close</button>,
 }))
 
 describe('AnnotationFullModal', () => {
@@ -56,6 +56,7 @@ describe('AnnotationFullModal', () => {
     vi.clearAllMocks()
     mockUpgradeBtnProps = null
     mockModalProps = null
+    mockOnOpenChange = undefined
   })
 
   // Rendering marketing copy inside modal
@@ -71,8 +72,9 @@ describe('AnnotationFullModal', () => {
       expect(mockModalProps).toEqual(expect.objectContaining({
         isShow: true,
         closable: true,
-        className: 'p-0!',
+        className: expect.stringContaining('p-0!'),
       }))
+      expect(mockModalProps?.className).toContain('w-full')
     })
   })
 
diff --git a/web/app/components/billing/annotation-full/modal.tsx b/web/app/components/billing/annotation-full/modal.tsx
index 4308cad160..c3c6aab2ce 100644
--- a/web/app/components/billing/annotation-full/modal.tsx
+++ b/web/app/components/billing/annotation-full/modal.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Dialog, DialogCloseButton, DialogContent } from '@langgenius/dify-ui/dialog'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import GridMask from '@/app/components/base/grid-mask'
-import Modal from '../../base/modal'
 import UpgradeBtn from '../upgrade-btn'
 import s from './style.module.css'
 import Usage from './usage'
@@ -20,28 +20,33 @@ const AnnotationFullModal: FC<Props> = ({
   const { t } = useTranslation()
 
   return (
-    <Modal
-      isShow={show}
-      onClose={onHide}
-      closable
-      className="p-0!"
+    <Dialog
+      open={show}
+      onOpenChange={(open) => {
+        if (!open)
+          onHide()
+      }}
     >
-      <GridMask wrapperClassName="rounded-lg" canvasClassName="rounded-lg" gradientClassName="rounded-lg">
-        <div className="mt-6 flex cursor-pointer flex-col rounded-lg border-2 border-solid border-transparent px-7 py-6 shadow-md transition-all duration-200 ease-in-out">
-          <div className="flex items-center justify-between">
-            <div className={cn(s.textGradient, 'text-[18px] leading-[27px] font-semibold')}>
-              <div>{t('annotatedResponse.fullTipLine1', { ns: 'billing' })}</div>
-              <div>{t('annotatedResponse.fullTipLine2', { ns: 'billing' })}</div>
-            </div>
+      <DialogContent className="w-full overflow-hidden! border-none p-0! text-left align-middle">
+        <DialogCloseButton data-testid="modal-close-button" />
 
+        <GridMask wrapperClassName="rounded-lg" canvasClassName="rounded-lg" gradientClassName="rounded-lg">
+          <div className="mt-6 flex cursor-pointer flex-col rounded-lg border-2 border-solid border-transparent px-7 py-6 shadow-md transition-all duration-200 ease-in-out">
+            <div className="flex items-center justify-between">
+              <div className={cn(s.textGradient, 'text-[18px] leading-[27px] font-semibold')}>
+                <div>{t('annotatedResponse.fullTipLine1', { ns: 'billing' })}</div>
+                <div>{t('annotatedResponse.fullTipLine2', { ns: 'billing' })}</div>
+              </div>
+
+            </div>
+            <Usage className="mt-4" />
+            <div className="mt-7 flex justify-end">
+              <UpgradeBtn loc="annotation-create" />
+            </div>
           </div>
-          <Usage className="mt-4" />
-          <div className="mt-7 flex justify-end">
-            <UpgradeBtn loc="annotation-create" />
-          </div>
-        </div>
-      </GridMask>
-    </Modal>
+        </GridMask>
+      </DialogContent>
+    </Dialog>
   )
 }
 export default React.memo(AnnotationFullModal)
diff --git a/web/app/components/datasets/common/image-list/__tests__/index.spec.tsx b/web/app/components/datasets/common/image-list/__tests__/index.spec.tsx
index e1fde328bb..cc60160595 100644
--- a/web/app/components/datasets/common/image-list/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/common/image-list/__tests__/index.spec.tsx
@@ -42,7 +42,7 @@ type ImageInfo = {
   size: number
 }
 
-// Mock ImagePreviewer since it uses createPortal
+// Mock ImagePreviewer since it renders through a Dialog portal
 vi.mock('../../image-previewer', () => ({
   default: ({ images, initialIndex, onClose }: ImagePreviewerProps) => (
     <div data-testid="image-previewer">
diff --git a/web/app/components/datasets/common/image-previewer/__tests__/index.spec.tsx b/web/app/components/datasets/common/image-previewer/__tests__/index.spec.tsx
index 1ff5cb33f8..aea1a181ff 100644
--- a/web/app/components/datasets/common/image-previewer/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/common/image-previewer/__tests__/index.spec.tsx
@@ -474,23 +474,18 @@ describe('ImagePreviewer', () => {
       expect(nextButton)!.toBeDisabled()
     })
 
-    it('should stop event propagation on container click', async () => {
+    it('should not close on container click', async () => {
       const onClose = vi.fn()
-      const parentClick = vi.fn()
       const images = createMockImages()
 
       await act(async () => {
-        render(
-          <div onClick={parentClick}>
-            <ImagePreviewer images={images} onClose={onClose} />
-          </div>,
-        )
+        render(<ImagePreviewer images={images} onClose={onClose} />)
       })
 
       const container = document.querySelector('.image-previewer')
       if (container) {
         fireEvent.click(container)
-        expect(parentClick).not.toHaveBeenCalled()
+        expect(onClose).not.toHaveBeenCalled()
       }
     })
 
diff --git a/web/app/components/datasets/common/image-previewer/index.tsx b/web/app/components/datasets/common/image-previewer/index.tsx
index 42b4ce33a9..7520f62f81 100644
--- a/web/app/components/datasets/common/image-previewer/index.tsx
+++ b/web/app/components/datasets/common/image-previewer/index.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import { RiArrowLeftLine, RiArrowRightLine, RiCloseLine, RiRefreshLine } from '@remixicon/react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { createPortal } from 'react-dom'
 import { useHotkeys } from 'react-hotkeys-hook'
 import Loading from '@/app/components/base/loading'
 import { formatFileSize } from '@/utils/format'
@@ -145,81 +145,87 @@ const ImagePreviewer = ({
     fetchImage(image)
   }, [fetchImage])
 
-  useHotkeys('esc', onClose)
   useHotkeys('left', prevImage)
   useHotkeys('right', nextImage)
 
-  return createPortal(
-    <div
-      className="image-previewer fixed inset-0 z-10000 flex items-center justify-center bg-background-overlay-fullscreen p-5 pb-4 backdrop-blur-[6px]"
-      onClick={e => e.stopPropagation()}
-      tabIndex={-1}
+  return (
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open)
+          onClose()
+      }}
+      disablePointerDismissal
     >
-      <div className="absolute top-6 right-6 z-10 flex cursor-pointer flex-col items-center gap-y-1">
-        <Button
-          variant="tertiary"
-          onClick={onClose}
-          className="size-9 rounded-[10px] p-0"
-          size="large"
-        >
-          <RiCloseLine className="size-5" />
-        </Button>
-        <span className="system-2xs-medium-uppercase text-text-tertiary">
-          Esc
-        </span>
-      </div>
-      {cachedImages[currentImage!.url]!.status === 'loading' && (
-        <Loading type="app" />
-      )}
-      {cachedImages[currentImage!.url]!.status === 'error' && (
-        <div className="flex max-w-sm flex-col items-center gap-y-2 system-sm-regular text-text-tertiary">
-          <span>{`Failed to load image: ${currentImage!.url}. Please try again.`}</span>
+      <DialogContent
+        className="image-previewer inset-0! top-0! left-0! flex h-dvh! max-h-none! w-screen! max-w-none! translate-x-0! translate-y-0! items-center justify-center overflow-hidden! rounded-none! border-none! bg-background-overlay-fullscreen p-5! pb-4! shadow-none! backdrop-blur-[6px]"
+        backdropClassName="bg-transparent!"
+      >
+        <div className="absolute top-6 right-6 z-10 flex cursor-pointer flex-col items-center gap-y-1">
           <Button
-            variant="secondary"
-            onClick={() => retryImage(currentImage!)}
-            className="size-9 rounded-full p-0"
+            variant="tertiary"
+            onClick={onClose}
+            className="size-9 rounded-[10px] p-0"
             size="large"
           >
-            <RiRefreshLine className="size-5" />
+            <RiCloseLine className="size-5" />
           </Button>
+          <span className="system-2xs-medium-uppercase text-text-tertiary">
+            Esc
+          </span>
         </div>
-      )}
-      {cachedImages[currentImage!.url]!.status === 'loaded' && (
-        <div className="flex size-full flex-col items-center justify-center gap-y-2">
-          <img
-            alt={currentImage!.name}
-            src={cachedImages[currentImage!.url]!.blobUrl}
-            className="max-h-[calc(100%-2.5rem)] max-w-full object-contain shadow-lg ring-8 ring-effects-image-frame backdrop-blur-[5px]"
-          />
-          <div className="flex shrink-0 gap-x-2 pt-3 pb-1 system-sm-regular text-text-tertiary">
-            <span>{currentImage!.name}</span>
-            <span>·</span>
-            <span>{`${cachedImages[currentImage!.url]!.width} ×  ${cachedImages[currentImage!.url]!.height}`}</span>
-            <span>·</span>
-            <span>{formatFileSize(currentImage!.size)}</span>
+        {cachedImages[currentImage!.url]!.status === 'loading' && (
+          <Loading type="app" />
+        )}
+        {cachedImages[currentImage!.url]!.status === 'error' && (
+          <div className="flex max-w-sm flex-col items-center gap-y-2 system-sm-regular text-text-tertiary">
+            <span>{`Failed to load image: ${currentImage!.url}. Please try again.`}</span>
+            <Button
+              variant="secondary"
+              onClick={() => retryImage(currentImage!)}
+              className="size-9 rounded-full p-0"
+              size="large"
+            >
+              <RiRefreshLine className="size-5" />
+            </Button>
           </div>
-        </div>
-      )}
-      <Button
-        variant="secondary"
-        onClick={prevImage}
-        className="absolute top-1/2 left-8 z-10 size-9 -translate-y-1/2 rounded-full p-0"
-        disabled={currentIndex === 0}
-        size="large"
-      >
-        <RiArrowLeftLine className="size-5" />
-      </Button>
-      <Button
-        variant="secondary"
-        onClick={nextImage}
-        className="absolute top-1/2 right-8 z-10 size-9 -translate-y-1/2 rounded-full p-0"
-        disabled={currentIndex === images.length - 1}
-        size="large"
-      >
-        <RiArrowRightLine className="size-5" />
-      </Button>
-    </div>,
-    document.body,
+        )}
+        {cachedImages[currentImage!.url]!.status === 'loaded' && (
+          <div className="flex size-full flex-col items-center justify-center gap-y-2">
+            <img
+              alt={currentImage!.name}
+              src={cachedImages[currentImage!.url]!.blobUrl}
+              className="max-h-[calc(100%-2.5rem)] max-w-full object-contain shadow-lg ring-8 ring-effects-image-frame backdrop-blur-[5px]"
+            />
+            <div className="flex shrink-0 gap-x-2 pt-3 pb-1 system-sm-regular text-text-tertiary">
+              <span>{currentImage!.name}</span>
+              <span>·</span>
+              <span>{`${cachedImages[currentImage!.url]!.width} ×  ${cachedImages[currentImage!.url]!.height}`}</span>
+              <span>·</span>
+              <span>{formatFileSize(currentImage!.size)}</span>
+            </div>
+          </div>
+        )}
+        <Button
+          variant="secondary"
+          onClick={prevImage}
+          className="absolute top-1/2 left-8 z-10 size-9 -translate-y-1/2 rounded-full p-0"
+          disabled={currentIndex === 0}
+          size="large"
+        >
+          <RiArrowLeftLine className="size-5" />
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={nextImage}
+          className="absolute top-1/2 right-8 z-10 size-9 -translate-y-1/2 rounded-full p-0"
+          disabled={currentIndex === images.length - 1}
+          size="large"
+        >
+          <RiArrowRightLine className="size-5" />
+        </Button>
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/dsl-confirm-modal.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/dsl-confirm-modal.tsx
index d0c97e185c..849d36807f 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/dsl-confirm-modal.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/dsl-confirm-modal.tsx
@@ -1,6 +1,13 @@
-import { Button } from '@langgenius/dify-ui/button'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@langgenius/dify-ui/alert-dialog'
 import { useTranslation } from 'react-i18next'
-import Modal from '@/app/components/base/modal'
 
 type DSLConfirmModalProps = {
   versions?: {
@@ -20,32 +27,36 @@ const DSLConfirmModal = ({
   const { t } = useTranslation()
 
   return (
-    <Modal
-      isShow
-      onClose={() => onCancel()}
-      className="w-[480px]"
+    <AlertDialog
+      open
+      onOpenChange={(open) => {
+        if (!open)
+          onCancel()
+      }}
     >
-      <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="flex grow flex-col system-md-regular text-text-secondary">
-          <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
-          <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
-          <br />
-          <div>
-            {t('newApp.appCreateDSLErrorPart3', { ns: 'app' })}
-            <span className="system-md-medium">{versions.importedVersion}</span>
-          </div>
-          <div>
-            {t('newApp.appCreateDSLErrorPart4', { ns: 'app' })}
-            <span className="system-md-medium">{versions.systemVersion}</span>
-          </div>
+      <AlertDialogContent className="w-[480px] max-w-none! overflow-hidden! border-none p-6 text-left align-middle shadow-xl">
+        <div className="flex flex-col items-start gap-2 self-stretch pb-4">
+          <AlertDialogTitle className="title-2xl-semi-bold text-text-primary">{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}</AlertDialogTitle>
+          <AlertDialogDescription render={<div />} className="flex grow flex-col system-md-regular text-text-secondary">
+            <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
+            <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
+            <br />
+            <div>
+              {t('newApp.appCreateDSLErrorPart3', { ns: 'app' })}
+              <span className="system-md-medium">{versions.importedVersion}</span>
+            </div>
+            <div>
+              {t('newApp.appCreateDSLErrorPart4', { ns: 'app' })}
+              <span className="system-md-medium">{versions.systemVersion}</span>
+            </div>
+          </AlertDialogDescription>
         </div>
-      </div>
-      <div className="flex items-start justify-end gap-2 self-stretch pt-6">
-        <Button variant="secondary" onClick={() => onCancel()}>{t('newApp.Cancel', { ns: 'app' })}</Button>
-        <Button variant="primary" tone="destructive" onClick={onConfirm} disabled={confirmDisabled}>{t('newApp.Confirm', { ns: 'app' })}</Button>
-      </div>
-    </Modal>
+        <AlertDialogActions className="items-start p-0 pt-6">
+          <AlertDialogCancelButton variant="secondary">{t('newApp.Cancel', { ns: 'app' })}</AlertDialogCancelButton>
+          <AlertDialogConfirmButton onClick={onConfirm} disabled={confirmDisabled}>{t('newApp.Confirm', { ns: 'app' })}</AlertDialogConfirmButton>
+        </AlertDialogActions>
+      </AlertDialogContent>
+    </AlertDialog>
   )
 }
 
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/hooks/__tests__/use-dsl-import.spec.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/hooks/__tests__/use-dsl-import.spec.tsx
index b95fa4d5db..a00cdf6098 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/hooks/__tests__/use-dsl-import.spec.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/hooks/__tests__/use-dsl-import.spec.tsx
@@ -418,7 +418,10 @@ describe('useDSLImport', () => {
 
     it('should handle FAILED status', async () => {
       vi.useFakeTimers({ shouldAdvanceTime: true })
-      mockImportDSL.mockResolvedValue(createImportDSLResponse({ status: 'failed' }))
+      mockImportDSL.mockResolvedValue(createImportDSLResponse({
+        status: 'failed',
+        error: 'Missing rag_pipeline data in YAML content',
+      }))
 
       const { result } = renderHook(
         () => useDSLImport({
@@ -434,9 +437,42 @@ describe('useDSLImport', () => {
       })
 
       await waitFor(() => {
-        expect(toastMocks.record).toHaveBeenCalledWith(expect.objectContaining({
+        expect(toastMocks.record).toHaveBeenCalledWith({
           type: 'error',
-        }))
+          message: 'Missing rag_pipeline data in YAML content',
+        })
+      })
+
+      vi.useRealTimers()
+    })
+
+    it('should show response error when import request rejects with a response body', async () => {
+      vi.useFakeTimers({ shouldAdvanceTime: true })
+      mockImportDSL.mockRejectedValue(new Response(JSON.stringify({
+        error: 'Missing rag_pipeline data in YAML content',
+      }), {
+        status: 400,
+        headers: { 'Content-Type': 'application/json' },
+      }))
+
+      const { result } = renderHook(
+        () => useDSLImport({
+          activeTab: CreateFromDSLModalTab.FROM_URL,
+          dslUrl: 'https://example.com/test.pipeline',
+        }),
+        { wrapper: createWrapper() },
+      )
+
+      await act(async () => {
+        result.current.handleCreateApp()
+        vi.advanceTimersByTime(400)
+      })
+
+      await waitFor(() => {
+        expect(toastMocks.record).toHaveBeenCalledWith({
+          type: 'error',
+          message: 'Missing rag_pipeline data in YAML content',
+        })
       })
 
       vi.useRealTimers()
@@ -692,6 +728,7 @@ describe('useDSLImport', () => {
         status: 'failed',
         pipeline_id: 'pipeline-456',
         dataset_id: 'dataset-789',
+        error: 'Import information expired or does not exist',
       })
 
       const { result } = renderHook(
@@ -718,9 +755,56 @@ describe('useDSLImport', () => {
       })
 
       await waitFor(() => {
-        expect(toastMocks.record).toHaveBeenCalledWith(expect.objectContaining({
+        expect(toastMocks.record).toHaveBeenCalledWith({
           type: 'error',
-        }))
+          message: 'Import information expired or does not exist',
+        })
+      })
+
+      vi.useRealTimers()
+    })
+
+    it('should show response error when confirm request rejects with a response body', async () => {
+      vi.useFakeTimers({ shouldAdvanceTime: true })
+
+      mockImportDSL.mockResolvedValue(createImportDSLResponse({
+        id: 'import-123',
+        status: 'pending',
+      }))
+
+      mockImportDSLConfirm.mockRejectedValue(new Response(JSON.stringify({
+        error: 'Import information expired or does not exist',
+      }), {
+        status: 400,
+        headers: { 'Content-Type': 'application/json' },
+      }))
+
+      const { result } = renderHook(
+        () => useDSLImport({
+          activeTab: CreateFromDSLModalTab.FROM_URL,
+          dslUrl: 'https://example.com/test.pipeline',
+        }),
+        { wrapper: createWrapper() },
+      )
+
+      await act(async () => {
+        result.current.handleCreateApp()
+        vi.advanceTimersByTime(400)
+      })
+
+      await act(async () => {
+        vi.advanceTimersByTime(400)
+      })
+
+      await act(async () => {
+        result.current.onDSLConfirm()
+      })
+
+      await waitFor(() => {
+        expect(toastMocks.record).toHaveBeenCalledWith({
+          type: 'error',
+          message: 'Import information expired or does not exist',
+        })
       })
 
       vi.useRealTimers()
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/hooks/use-dsl-import.ts b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/hooks/use-dsl-import.ts
index e085ffe1bc..0dbfdf2156 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/hooks/use-dsl-import.ts
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/hooks/use-dsl-import.ts
@@ -22,6 +22,31 @@ type DSLVersions = {
   importedVersion: string
   systemVersion: string
 }
+type ImportErrorResponse = {
+  message?: unknown
+  error?: unknown
+}
+const getNonEmptyString = (value: unknown): string | undefined => {
+  if (typeof value !== 'string')
+    return undefined
+
+  const trimmedValue = value.trim()
+  return trimmedValue || undefined
+}
+const getImportErrorMessage = async (error: unknown): Promise<string | undefined> => {
+  if (error instanceof Response && !error.bodyUsed) {
+    try {
+      const errorData = await error.clone().json() as ImportErrorResponse
+      return getNonEmptyString(errorData.message) ?? getNonEmptyString(errorData.error)
+    }
+    catch {}
+  }
+
+  if (error instanceof Error)
+    return getNonEmptyString(error.message)
+
+  return undefined
+}
 export const useDSLImport = ({ activeTab = CreateFromDSLModalTab.FROM_FILE, dslUrl = '', onSuccess, onClose }: UseDSLImportOptions) => {
   const { push } = useRouter()
   const { t } = useTranslation()
@@ -37,6 +62,9 @@ export const useDSLImport = ({ activeTab = CreateFromDSLModalTab.FROM_FILE, dslU
   const isCreatingRef = useRef(false)
   const { mutateAsync: importDSL } = useImportPipelineDSL()
   const { mutateAsync: importDSLConfirm } = useImportPipelineDSLConfirm()
+  const notifyError = useCallback((message?: string) => {
+    toast.error(message || t('creation.errorTip', { ns: 'datasetPipeline' }))
+  }, [t])
   const readFile = useCallback((file: File) => {
     const reader = new FileReader()
     reader.onload = (event) => {
@@ -60,51 +88,55 @@ export const useDSLImport = ({ activeTab = CreateFromDSLModalTab.FROM_FILE, dslU
     if (isCreatingRef.current)
       return
     isCreatingRef.current = true
-    let response
-    if (currentTab === CreateFromDSLModalTab.FROM_FILE) {
-      response = await importDSL({
-        mode: DSLImportMode.YAML_CONTENT,
-        yaml_content: fileContent || '',
-      })
+    try {
+      let response
+      if (currentTab === CreateFromDSLModalTab.FROM_FILE) {
+        response = await importDSL({
+          mode: DSLImportMode.YAML_CONTENT,
+          yaml_content: fileContent || '',
+        })
+      }
+      if (currentTab === CreateFromDSLModalTab.FROM_URL) {
+        response = await importDSL({
+          mode: DSLImportMode.YAML_URL,
+          yaml_url: dslUrlValue || '',
+        })
+      }
+      if (!response) {
+        notifyError()
+        return
+      }
+      const { id, status, pipeline_id, dataset_id, imported_dsl_version, current_dsl_version } = response
+      if (status === DSLImportStatus.COMPLETED || status === DSLImportStatus.COMPLETED_WITH_WARNINGS) {
+        onSuccess?.()
+        onClose?.()
+        toast(t(status === DSLImportStatus.COMPLETED ? 'creation.successTip' : 'creation.caution', { ns: 'datasetPipeline' }), {
+          type: status === DSLImportStatus.COMPLETED ? 'success' : 'warning',
+          description: status === DSLImportStatus.COMPLETED_WITH_WARNINGS && t('newApp.appCreateDSLWarning', { ns: 'app' }),
+        })
+        if (pipeline_id)
+          await handleCheckPluginDependencies(pipeline_id, true)
+        push(`/datasets/${dataset_id}/pipeline`)
+      }
+      else if (status === DSLImportStatus.PENDING) {
+        setVersions({
+          importedVersion: imported_dsl_version ?? '',
+          systemVersion: current_dsl_version ?? '',
+        })
+        onClose?.()
+        setTimeout(() => {
+          setShowConfirmModal(true)
+        }, 300)
+        setImportId(id)
+      }
+      else {
+        notifyError(response.error)
+      }
     }
-    if (currentTab === CreateFromDSLModalTab.FROM_URL) {
-      response = await importDSL({
-        mode: DSLImportMode.YAML_URL,
-        yaml_url: dslUrlValue || '',
-      })
+    catch (error) {
+      notifyError(await getImportErrorMessage(error))
     }
-    if (!response) {
-      toast.error(t('creation.errorTip', { ns: 'datasetPipeline' }))
-      isCreatingRef.current = false
-      return
-    }
-    const { id, status, pipeline_id, dataset_id, imported_dsl_version, current_dsl_version } = response
-    if (status === DSLImportStatus.COMPLETED || status === DSLImportStatus.COMPLETED_WITH_WARNINGS) {
-      onSuccess?.()
-      onClose?.()
-      toast(t(status === DSLImportStatus.COMPLETED ? 'creation.successTip' : 'creation.caution', { ns: 'datasetPipeline' }), {
-        type: status === DSLImportStatus.COMPLETED ? 'success' : 'warning',
-        description: status === DSLImportStatus.COMPLETED_WITH_WARNINGS && t('newApp.appCreateDSLWarning', { ns: 'app' }),
-      })
-      if (pipeline_id)
-        await handleCheckPluginDependencies(pipeline_id, true)
-      push(`/datasets/${dataset_id}/pipeline`)
-      isCreatingRef.current = false
-    }
-    else if (status === DSLImportStatus.PENDING) {
-      setVersions({
-        importedVersion: imported_dsl_version ?? '',
-        systemVersion: current_dsl_version ?? '',
-      })
-      onClose?.()
-      setTimeout(() => {
-        setShowConfirmModal(true)
-      }, 300)
-      setImportId(id)
-      isCreatingRef.current = false
-    }
-    else {
-      toast.error(t('creation.errorTip', { ns: 'datasetPipeline' }))
+    finally {
       isCreatingRef.current = false
     }
   }, [
@@ -114,6 +146,7 @@ export const useDSLImport = ({ activeTab = CreateFromDSLModalTab.FROM_FILE, dslU
     fileContent,
     importDSL,
     t,
+    notifyError,
     onSuccess,
     onClose,
     handleCheckPluginDependencies,
@@ -124,25 +157,32 @@ export const useDSLImport = ({ activeTab = CreateFromDSLModalTab.FROM_FILE, dslU
     if (!importId)
       return
     setIsConfirming(true)
-    const response = await importDSLConfirm(importId)
-    setIsConfirming(false)
-    if (!response) {
-      toast.error(t('creation.errorTip', { ns: 'datasetPipeline' }))
-      return
+    try {
+      const response = await importDSLConfirm(importId)
+      if (!response) {
+        notifyError()
+        return
+      }
+      const { status, pipeline_id, dataset_id, error } = response
+      if (status === DSLImportStatus.COMPLETED) {
+        onSuccess?.()
+        setShowConfirmModal(false)
+        toast.success(t('creation.successTip', { ns: 'datasetPipeline' }))
+        if (pipeline_id)
+          await handleCheckPluginDependencies(pipeline_id, true)
+        push(`/datasets/${dataset_id}/pipeline`)
+      }
+      else if (status === DSLImportStatus.FAILED) {
+        notifyError(error)
+      }
     }
-    const { status, pipeline_id, dataset_id } = response
-    if (status === DSLImportStatus.COMPLETED) {
-      onSuccess?.()
-      setShowConfirmModal(false)
-      toast.success(t('creation.successTip', { ns: 'datasetPipeline' }))
-      if (pipeline_id)
-        await handleCheckPluginDependencies(pipeline_id, true)
-      push(`/datasets/${dataset_id}/pipeline`)
+    catch (error) {
+      notifyError(await getImportErrorMessage(error))
     }
-    else if (status === DSLImportStatus.FAILED) {
-      toast.error(t('creation.errorTip', { ns: 'datasetPipeline' }))
+    finally {
+      setIsConfirming(false)
     }
-  }, [importId, importDSLConfirm, t, onSuccess, handleCheckPluginDependencies, push])
+  }, [importId, importDSLConfirm, notifyError, t, onSuccess, handleCheckPluginDependencies, push])
   const handleCancelConfirm = useCallback(() => {
     setShowConfirmModal(false)
   }, [])
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx
index 4f5b5c23fd..8aeaed3ebd 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx
@@ -1,10 +1,9 @@
 'use client'
 import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import { useKeyPress } from 'ahooks'
-import { noop } from 'es-toolkit/function'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import Modal from '@/app/components/base/modal'
 import DSLConfirmModal from './dsl-confirm-modal'
 import Header from './header'
 import { CreateFromDSLModalTab, useDSLImport } from './hooks/use-dsl-import'
@@ -54,55 +53,54 @@ const CreateFromDSLModal = ({
   useKeyPress('esc', () => {
     if (show && !showConfirmModal)
       onClose()
-  })
+  }, { target: () => document })
 
   return (
     <>
-      <Modal
-        className="w-[520px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0 shadow-xl"
-        isShow={show}
-        onClose={noop}
-      >
-        <Header onClose={onClose} />
-        <Tab
-          currentTab={currentTab}
-          setCurrentTab={setCurrentTab}
-        />
-        <div className="px-6 py-4">
-          {currentTab === CreateFromDSLModalTab.FROM_FILE && (
-            <Uploader
-              className="mt-0"
-              file={currentFile}
-              updateFile={handleFile}
-            />
-          )}
-          {currentTab === CreateFromDSLModalTab.FROM_URL && (
-            <div>
-              <div className="leading6 mb-1 system-md-semibold text-text-secondary">
-                DSL URL
-              </div>
-              <Input
-                placeholder={t('importFromDSLUrlPlaceholder', { ns: 'app' }) || ''}
-                value={dslUrlValue}
-                onChange={e => setDslUrlValue(e.target.value)}
+      <Dialog open={show}>
+        <DialogContent className="w-full max-w-[480px]! overflow-hidden! rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0! text-left align-middle shadow-xl">
+
+          <Header onClose={onClose} />
+          <Tab
+            currentTab={currentTab}
+            setCurrentTab={setCurrentTab}
+          />
+          <div className="px-6 py-4">
+            {currentTab === CreateFromDSLModalTab.FROM_FILE && (
+              <Uploader
+                className="mt-0"
+                file={currentFile}
+                updateFile={handleFile}
               />
-            </div>
-          )}
-        </div>
-        <div className="flex justify-end gap-x-2 p-6 pt-5">
-          <Button onClick={onClose}>
-            {t('newApp.Cancel', { ns: 'app' })}
-          </Button>
-          <Button
-            disabled={buttonDisabled}
-            variant="primary"
-            onClick={handleCreateApp}
-            className="gap-1"
-          >
-            <span>{t('newApp.import', { ns: 'app' })}</span>
-          </Button>
-        </div>
-      </Modal>
+            )}
+            {currentTab === CreateFromDSLModalTab.FROM_URL && (
+              <div>
+                <div className="leading6 mb-1 system-md-semibold text-text-secondary">
+                  DSL URL
+                </div>
+                <Input
+                  placeholder={t('importFromDSLUrlPlaceholder', { ns: 'app' }) || ''}
+                  value={dslUrlValue}
+                  onChange={e => setDslUrlValue(e.target.value)}
+                />
+              </div>
+            )}
+          </div>
+          <div className="flex justify-end gap-x-2 p-6 pt-5">
+            <Button onClick={onClose}>
+              {t('newApp.Cancel', { ns: 'app' })}
+            </Button>
+            <Button
+              disabled={buttonDisabled}
+              variant="primary"
+              onClick={handleCreateApp}
+              className="gap-1"
+            >
+              <span>{t('newApp.import', { ns: 'app' })}</span>
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
       {showConfirmModal && (
         <DSLConfirmModal
           versions={versions}
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/index.spec.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/index.spec.tsx
index bcf2c068ef..8f28f75045 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/index.spec.tsx
@@ -323,6 +323,21 @@ describe('TemplateCard', () => {
       })
     })
 
+    it('should close details modal when dialog requests close', async () => {
+      render(<TemplateCard {...defaultProps} />)
+      fireEvent.click(screen.getByTestId('action-details'))
+
+      await waitFor(() => {
+        expect(screen.getByTestId('details-component')).toBeInTheDocument()
+      })
+
+      fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('details-component')).not.toBeInTheDocument()
+      })
+    })
+
     it('should trigger use template from details modal', async () => {
       mockCreateDataset.mockImplementation((_data, callbacks) => {
         callbacks.onSuccess({ dataset_id: 'new-dataset-123', pipeline_id: 'pipe-123' })
@@ -593,6 +608,21 @@ describe('TemplateCard', () => {
         expect(screen.queryByTestId('edit-pipeline-info')).not.toBeInTheDocument()
       })
     })
+
+    it('should close edit modal when dialog requests close', async () => {
+      render(<TemplateCard {...defaultProps} />)
+      fireEvent.click(screen.getByTestId('action-edit'))
+
+      await waitFor(() => {
+        expect(screen.getByTestId('edit-pipeline-info')).toBeInTheDocument()
+      })
+
+      fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('edit-pipeline-info')).not.toBeInTheDocument()
+      })
+    })
   })
 
   // Props Tests
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx
index 03bda31f1f..4663c55e38 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx
@@ -8,12 +8,12 @@ import {
   AlertDialogDescription,
   AlertDialogTitle,
 } from '@langgenius/dify-ui/alert-dialog'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
-import Modal from '@/app/components/base/modal'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
 import { useRouter } from '@/next/navigation'
 import { useCreatePipelineDatasetFromCustomized } from '@/service/knowledge/use-create-dataset'
@@ -153,16 +153,21 @@ const TemplateCard = ({
         handleDelete={handleDelete}
       />
       {showEditModal && (
-        <Modal
-          isShow={showEditModal}
-          onClose={closeEditModal}
-          className="max-w-[520px] p-0"
+        <Dialog
+          open={showEditModal}
+          onOpenChange={(open) => {
+            if (!open)
+              closeEditModal()
+          }}
         >
-          <EditPipelineInfo
-            pipeline={pipeline}
-            onClose={closeEditModal}
-          />
-        </Modal>
+          <DialogContent className="w-[calc(100vw-2rem)] max-w-[520px]! overflow-hidden! border-none p-0 text-left align-middle">
+
+            <EditPipelineInfo
+              pipeline={pipeline}
+              onClose={closeEditModal}
+            />
+          </DialogContent>
+        </Dialog>
       )}
       <AlertDialog open={showDeleteConfirm} onOpenChange={open => !open && onCancelDelete()}>
         <AlertDialogContent>
@@ -183,18 +188,23 @@ const TemplateCard = ({
         </AlertDialogContent>
       </AlertDialog>
       {showDetailModal && (
-        <Modal
-          isShow={showDetailModal}
-          onClose={closeDetailsModal}
-          className="h-[calc(100vh-64px)] max-w-[1680px] rounded-3xl p-0"
+        <Dialog
+          open={showDetailModal}
+          onOpenChange={(open) => {
+            if (!open)
+              closeDetailsModal()
+          }}
         >
-          <Details
-            id={pipeline.id}
-            type={type}
-            onClose={closeDetailsModal}
-            onApplyTemplate={handleUseTemplate}
-          />
-        </Modal>
+          <DialogContent className="h-[calc(100vh-64px)] max-h-none w-[calc(100vw-2rem)] max-w-[1680px]! overflow-hidden! rounded-3xl border-none p-0 text-left align-middle">
+
+            <Details
+              id={pipeline.id}
+              type={type}
+              onClose={closeDetailsModal}
+              onApplyTemplate={handleUseTemplate}
+            />
+          </DialogContent>
+        </Dialog>
       )}
     </div>
   )
diff --git a/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx b/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
index fdb032b1ef..0de10a8ecd 100644
--- a/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
+++ b/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
@@ -1,13 +1,13 @@
 'use client'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
 import Input from '@/app/components/base/input'
-import Modal from '@/app/components/base/modal'
 import { useRouter } from '@/next/navigation'
 import { createEmptyDataset } from '@/service/datasets'
 import { useInvalidDatasetList } from '@/service/knowledge/use-dataset'
@@ -46,21 +46,30 @@ const EmptyDatasetCreationModal = ({ show = false, onHide }: IProps) => {
     }
   }
   return (
-    <Modal isShow={show} onClose={onHide} className={cn(s.modal, '!max-w-[520px]', 'px-8')}>
-      <div className={s.modalHeader}>
-        <div className={s.title}>{t('stepOne.modal.title', { ns: 'datasetCreation' })}</div>
-        <span className={s.close} onClick={onHide} />
-      </div>
-      <div className={s.tip}>{t('stepOne.modal.tip', { ns: 'datasetCreation' })}</div>
-      <div className={s.form}>
-        <div className={s.label}>{t('stepOne.modal.input', { ns: 'datasetCreation' })}</div>
-        <Input value={inputValue} placeholder={t('stepOne.modal.placeholder', { ns: 'datasetCreation' }) || ''} onChange={e => setInputValue(e.target.value)} />
-      </div>
-      <div className="flex flex-row-reverse">
-        <Button className="ml-2 w-24" variant="primary" onClick={submit}>{t('stepOne.modal.confirmButton', { ns: 'datasetCreation' })}</Button>
-        <Button className="w-24" onClick={onHide}>{t('stepOne.modal.cancelButton', { ns: 'datasetCreation' })}</Button>
-      </div>
-    </Modal>
+    <Dialog
+      open={show}
+      onOpenChange={(open) => {
+        if (!open)
+          onHide()
+      }}
+    >
+      <DialogContent className={cn('w-full overflow-hidden! border-none text-left align-middle', cn(s.modal, '!max-w-[520px]', 'px-8'))}>
+
+        <div className={s.modalHeader}>
+          <div className={s.title}>{t('stepOne.modal.title', { ns: 'datasetCreation' })}</div>
+          <span className={s.close} onClick={onHide} />
+        </div>
+        <div className={s.tip}>{t('stepOne.modal.tip', { ns: 'datasetCreation' })}</div>
+        <div className={s.form}>
+          <div className={s.label}>{t('stepOne.modal.input', { ns: 'datasetCreation' })}</div>
+          <Input value={inputValue} placeholder={t('stepOne.modal.placeholder', { ns: 'datasetCreation' }) || ''} onChange={e => setInputValue(e.target.value)} />
+        </div>
+        <div className="flex flex-row-reverse">
+          <Button className="ml-2 w-24" variant="primary" onClick={submit}>{t('stepOne.modal.confirmButton', { ns: 'datasetCreation' })}</Button>
+          <Button className="w-24" onClick={onHide}>{t('stepOne.modal.cancelButton', { ns: 'datasetCreation' })}</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
   )
 }
 export default EmptyDatasetCreationModal
diff --git a/web/app/components/datasets/create/stop-embedding-modal/__tests__/index.spec.tsx b/web/app/components/datasets/create/stop-embedding-modal/__tests__/index.spec.tsx
index 1b3abfeadc..840c5cc0e5 100644
--- a/web/app/components/datasets/create/stop-embedding-modal/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/create/stop-embedding-modal/__tests__/index.spec.tsx
@@ -25,8 +25,7 @@ const renderStopEmbeddingModal = (props: Partial<StopEmbeddingModalProps> = {})
 
 // StopEmbeddingModal Component Tests
 describe('StopEmbeddingModal', () => {
-  // Suppress Headless UI warnings in tests
-  // These warnings are from the library's internal behavior, not our code
+  // Suppress expected modal warnings in tests.
   let consoleWarnSpy: MockInstance
   let consoleErrorSpy: MockInstance
 
diff --git a/web/app/components/datasets/create/stop-embedding-modal/index.tsx b/web/app/components/datasets/create/stop-embedding-modal/index.tsx
index 93df58d276..41faf58b09 100644
--- a/web/app/components/datasets/create/stop-embedding-modal/index.tsx
+++ b/web/app/components/datasets/create/stop-embedding-modal/index.tsx
@@ -1,9 +1,16 @@
 'use client'
-import { Button } from '@langgenius/dify-ui/button'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@langgenius/dify-ui/alert-dialog'
 import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Modal from '@/app/components/base/modal'
 import s from './index.module.css'
 
 type IProps = {
@@ -25,20 +32,24 @@ const StopEmbeddingModal = ({
   }
 
   return (
-    <Modal
-      isShow={show}
-      onClose={onHide}
-      className={cn(s.modal, 'max-w-[480px]!', 'px-8')}
+    <AlertDialog
+      open={show}
+      onOpenChange={(open) => {
+        if (!open)
+          onHide()
+      }}
     >
-      <div className={s.icon} />
-      <span className={s.close} onClick={onHide} />
-      <div className={s.title}>{t('stepThree.modelTitle', { ns: 'datasetCreation' })}</div>
-      <div className={s.content}>{t('stepThree.modelContent', { ns: 'datasetCreation' })}</div>
-      <div className="flex flex-row-reverse">
-        <Button className="ml-2 w-24" variant="primary" onClick={submit}>{t('stepThree.modelButtonConfirm', { ns: 'datasetCreation' })}</Button>
-        <Button className="w-24" onClick={onHide}>{t('stepThree.modelButtonCancel', { ns: 'datasetCreation' })}</Button>
-      </div>
-    </Modal>
+      <AlertDialogContent className={cn(s.modal, 'max-w-[480px]! overflow-hidden! border-none px-8 py-6 text-left align-middle shadow-xl')}>
+        <div className={s.icon} />
+        <span className={s.close} onClick={onHide} />
+        <AlertDialogTitle className={s.title}>{t('stepThree.modelTitle', { ns: 'datasetCreation' })}</AlertDialogTitle>
+        <AlertDialogDescription className={s.content}>{t('stepThree.modelContent', { ns: 'datasetCreation' })}</AlertDialogDescription>
+        <AlertDialogActions className="flex-row-reverse gap-0 p-0">
+          <AlertDialogConfirmButton className="ml-2 w-24" tone="default" onClick={submit}>{t('stepThree.modelButtonConfirm', { ns: 'datasetCreation' })}</AlertDialogConfirmButton>
+          <AlertDialogCancelButton className="w-24" variant="secondary">{t('stepThree.modelButtonCancel', { ns: 'datasetCreation' })}</AlertDialogCancelButton>
+        </AlertDialogActions>
+      </AlertDialogContent>
+    </AlertDialog>
   )
 }
 
diff --git a/web/app/components/datasets/documents/components/rename-modal.tsx b/web/app/components/datasets/documents/components/rename-modal.tsx
index fc4626676b..ac4fc7fc84 100644
--- a/web/app/components/datasets/documents/components/rename-modal.tsx
+++ b/web/app/components/datasets/documents/components/rename-modal.tsx
@@ -1,13 +1,13 @@
 'use client'
 import type { FC } from 'react'
 import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
 import { toast } from '@langgenius/dify-ui/toast'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import Modal from '@/app/components/base/modal'
 import { renameDocumentName } from '@/service/datasets'
 
 type Props = {
@@ -55,23 +55,31 @@ const RenameModal: FC<Props> = ({
   }
 
   return (
-    <Modal
-      title={t('list.table.rename', { ns: 'datasetDocuments' })}
-      isShow
-      onClose={onClose}
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open)
+          onClose()
+      }}
     >
-      <div className="mt-6 text-sm leading-[21px] font-medium text-text-primary">{t('list.table.name', { ns: 'datasetDocuments' })}</div>
-      <Input
-        className="mt-2 h-10"
-        value={newName}
-        onChange={e => setNewName(e.target.value)}
-      />
+      <DialogContent className="overflow-hidden! border-none text-left align-middle">
+        <DialogTitle className="title-2xl-semi-bold text-text-primary">
+          {t('list.table.rename', { ns: 'datasetDocuments' })}
+        </DialogTitle>
 
-      <div className="mt-10 flex justify-end">
-        <Button className="mr-2 shrink-0" onClick={onClose}>{t('operation.cancel', { ns: 'common' })}</Button>
-        <Button variant="primary" className="shrink-0" onClick={handleSave} loading={saveLoading}>{t('operation.save', { ns: 'common' })}</Button>
-      </div>
-    </Modal>
+        <div className="mt-6 text-sm leading-[21px] font-medium text-text-primary">{t('list.table.name', { ns: 'datasetDocuments' })}</div>
+        <Input
+          className="mt-2 h-10"
+          value={newName}
+          onChange={e => setNewName(e.target.value)}
+        />
+
+        <div className="mt-10 flex justify-end">
+          <Button className="mr-2 shrink-0" onClick={onClose}>{t('operation.cancel', { ns: 'common' })}</Button>
+          <Button variant="primary" className="shrink-0" onClick={handleSave} loading={saveLoading}>{t('operation.save', { ns: 'common' })}</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
   )
 }
 export default React.memo(RenameModal)
diff --git a/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx b/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx
index 9b2a2e36ee..3999e113af 100644
--- a/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx
@@ -1,12 +1,16 @@
 import type { FC } from 'react'
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@langgenius/dify-ui/alert-dialog'
 import { Button } from '@langgenius/dify-ui/button'
 import { RiLoader2Line } from '@remixicon/react'
 import { useCountDown } from 'ahooks'
-import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Modal from '@/app/components/base/modal'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 
 type IDefaultContentProps = {
@@ -23,8 +27,8 @@ const DefaultContent: FC<IDefaultContentProps> = React.memo(({
   return (
     <>
       <div className="pb-4">
-        <span className="title-2xl-semi-bold text-text-primary">{t('segment.regenerationConfirmTitle', { ns: 'datasetDocuments' })}</span>
-        <p className="system-md-regular text-text-secondary">{t('segment.regenerationConfirmMessage', { ns: 'datasetDocuments' })}</p>
+        <AlertDialogTitle className="title-2xl-semi-bold text-text-primary">{t('segment.regenerationConfirmTitle', { ns: 'datasetDocuments' })}</AlertDialogTitle>
+        <AlertDialogDescription className="system-md-regular text-text-secondary">{t('segment.regenerationConfirmMessage', { ns: 'datasetDocuments' })}</AlertDialogDescription>
       </div>
       <div className="flex justify-end gap-x-2 pt-6">
         <Button onClick={onCancel}>
@@ -123,11 +127,13 @@ const RegenerationModal: FC<IRegenerationModalProps> = ({
   })
 
   return (
-    <Modal isShow={isShow} onClose={noop} className="max-w-[480px]! rounded-2xl!" wrapperClassName="z-10000!">
-      {!loading && !updateSucceeded && <DefaultContent onCancel={onCancel} onConfirm={onConfirm} />}
-      {loading && !updateSucceeded && <RegeneratingContent />}
-      {!loading && updateSucceeded && <RegenerationCompletedContent onClose={onClose} />}
-    </Modal>
+    <AlertDialog open={isShow}>
+      <AlertDialogContent className="w-[calc(100vw-2rem)] max-w-[480px]! overflow-hidden! rounded-2xl! border-none p-6 text-left align-middle shadow-xl">
+        {!loading && !updateSucceeded && <DefaultContent onCancel={onCancel} onConfirm={onConfirm} />}
+        {loading && !updateSucceeded && <RegeneratingContent />}
+        {!loading && updateSucceeded && <RegenerationCompletedContent onClose={onClose} />}
+      </AlertDialogContent>
+    </AlertDialog>
   )
 }
 
diff --git a/web/app/components/datasets/hit-testing/components/__tests__/chunk-detail-modal.spec.tsx b/web/app/components/datasets/hit-testing/components/__tests__/chunk-detail-modal.spec.tsx
index 109d2f9cfe..b4d017d0df 100644
--- a/web/app/components/datasets/hit-testing/components/__tests__/chunk-detail-modal.spec.tsx
+++ b/web/app/components/datasets/hit-testing/components/__tests__/chunk-detail-modal.spec.tsx
@@ -1,5 +1,5 @@
 import type { HitTesting } from '@/models/datasets'
-import { render, screen } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import ChunkDetailModal from '../chunk-detail-modal'
 
@@ -11,16 +11,6 @@ vi.mock('@/app/components/base/markdown', () => ({
   Markdown: ({ content }: { content: string }) => <div data-testid="markdown">{content}</div>,
 }))
 
-vi.mock('@/app/components/base/modal', () => ({
-  default: ({ children, title, onClose }: { children: React.ReactNode, title: string, onClose: () => void }) => (
-    <div data-testid="modal">
-      <div data-testid="modal-title">{title}</div>
-      <button data-testid="modal-close" onClick={onClose}>close</button>
-      {children}
-    </div>
-  ),
-}))
-
 vi.mock('../../../common/image-list', () => ({
   default: () => <div data-testid="image-list" />,
 }))
@@ -85,7 +75,7 @@ describe('ChunkDetailModal', () => {
 
   it('should render modal with title', () => {
     render(<ChunkDetailModal payload={makePayload()} onHide={onHide} />)
-    expect(screen.getByTestId('modal-title')).toHaveTextContent('chunkDetail')
+    expect(screen.getByRole('dialog')).toHaveTextContent('chunkDetail')
   })
 
   it('should render segment index tag and score', () => {
@@ -134,4 +124,18 @@ describe('ChunkDetailModal', () => {
     render(<ChunkDetailModal payload={makePayload()} onHide={onHide} />)
     expect(screen.getByTestId('mask')).toBeInTheDocument()
   })
+
+  it('should call onHide when close button is clicked', () => {
+    render(<ChunkDetailModal payload={makePayload()} onHide={onHide} />)
+    fireEvent.click(screen.getByTestId('modal-close-button'))
+    expect(onHide).toHaveBeenCalled()
+  })
+
+  it('should call onHide when the dialog requests close', () => {
+    render(<ChunkDetailModal payload={makePayload()} onHide={onHide} />)
+
+    fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+
+    expect(onHide).toHaveBeenCalledTimes(1)
+  })
 })
diff --git a/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx b/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx
index ee0d949a7e..6f789a81ce 100644
--- a/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx
+++ b/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx
@@ -2,12 +2,12 @@
 import type { FileAppearanceTypeEnum } from '@/app/components/base/file-uploader/types'
 import type { HitTesting } from '@/models/datasets'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import FileIcon from '@/app/components/base/file-uploader/file-type-icon'
 import { Markdown } from '@/app/components/base/markdown'
-import Modal from '@/app/components/base/modal'
 import Tag from '@/app/components/datasets/documents/detail/completed/common/tag'
 import ImageList from '../../common/image-list'
 import Dot from '../../documents/detail/completed/common/dot'
@@ -52,93 +52,106 @@ const ChunkDetailModal = ({
   const showKeywords = !isParentChildRetrieval && keywords && keywords.length > 0
 
   return (
-    <Modal
-      title={t(`${i18nPrefix}chunkDetail`, { ns: 'datasetHitTesting' })}
-      isShow
-      closable
-      onClose={onHide}
-      className={cn(isParentChildRetrieval ? 'min-w-[1200px]!' : 'min-w-[800px]!')}
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open)
+          onHide()
+      }}
     >
-      <div className="mt-4 flex">
-        <div className={cn('flex-1', isParentChildRetrieval && 'pr-6')}>
-          {/* Meta info */}
-          <div className="flex items-center justify-between">
-            <div className="flex grow items-center space-x-2">
-              <SegmentIndexTag
-                labelPrefix={labelPrefix}
-                positionId={position}
-                className={cn('w-fit group-hover:opacity-100')}
-              />
-              <Dot />
-              <div className="flex grow items-center space-x-1">
-                <FileIcon type={extension} size="sm" />
-                <span className="w-0 grow truncate text-[13px] font-normal text-text-secondary">{document.name}</span>
+      <DialogContent className={cn('max-h-none overflow-hidden! border-none p-6 text-left align-middle', isParentChildRetrieval ? 'w-[1200px] max-w-none! min-w-[1200px]!' : 'w-[800px] max-w-none! min-w-[800px]!')}>
+        <DialogCloseButton
+          data-testid="modal-close-button"
+          onClick={(e) => {
+            e.stopPropagation()
+            onHide()
+          }}
+        />
+        <DialogTitle className="title-2xl-semi-bold text-text-primary">
+          {t(`${i18nPrefix}chunkDetail`, { ns: 'datasetHitTesting' })}
+        </DialogTitle>
+
+        <div className="mt-4 flex">
+          <div className={cn('flex-1', isParentChildRetrieval && 'pr-6')}>
+            {/* Meta info */}
+            <div className="flex items-center justify-between">
+              <div className="flex grow items-center space-x-2">
+                <SegmentIndexTag
+                  labelPrefix={labelPrefix}
+                  positionId={position}
+                  className={cn('w-fit group-hover:opacity-100')}
+                />
+                <Dot />
+                <div className="flex grow items-center space-x-1">
+                  <FileIcon type={extension} size="sm" />
+                  <span className="w-0 grow truncate text-[13px] font-normal text-text-secondary">{document.name}</span>
+                </div>
               </div>
+              <Score value={score} />
             </div>
-            <Score value={score} />
-          </div>
-          {/* Content */}
-          <div className="relative">
-            {!answer && (
-              <Markdown
-                className={cn('mt-2! text-text-secondary!', heighClassName)}
-                content={sign_content || content}
-                customDisallowedElements={['input']}
-              />
-            )}
-            {answer && (
-              <div className="break-all">
-                <div className="flex gap-x-1">
-                  <div className="w-4 shrink-0 text-[13px] leading-[20px] font-medium text-text-tertiary">Q</div>
-                  <div className={cn('line-clamp-20 body-md-regular text-text-secondary')}>
-                    {content}
+            {/* Content */}
+            <div className="relative">
+              {!answer && (
+                <Markdown
+                  className={cn('mt-2! text-text-secondary!', heighClassName)}
+                  content={sign_content || content}
+                  customDisallowedElements={['input']}
+                />
+              )}
+              {answer && (
+                <div className="break-all">
+                  <div className="flex gap-x-1">
+                    <div className="w-4 shrink-0 text-[13px] leading-[20px] font-medium text-text-tertiary">Q</div>
+                    <div className={cn('line-clamp-20 body-md-regular text-text-secondary')}>
+                      {content}
+                    </div>
+                  </div>
+                  <div className="flex gap-x-1">
+                    <div className="w-4 shrink-0 text-[13px] leading-[20px] font-medium text-text-tertiary">A</div>
+                    <div className={cn('line-clamp-20 body-md-regular text-text-secondary')}>
+                      {answer}
+                    </div>
                   </div>
                 </div>
-                <div className="flex gap-x-1">
-                  <div className="w-4 shrink-0 text-[13px] leading-[20px] font-medium text-text-tertiary">A</div>
-                  <div className={cn('line-clamp-20 body-md-regular text-text-secondary')}>
-                    {answer}
+              )}
+              {/* Mask */}
+              <Mask className="absolute inset-x-0 bottom-0" />
+            </div>
+            {(showImages || showKeywords || !!summary) && (
+              <div className="flex flex-col gap-y-3 pt-3">
+                {showImages && (
+                  <ImageList images={images} size="md" className="py-1" />
+                )}
+                {!!summary && (
+                  <SummaryText value={summary} disabled />
+                )}
+                {showKeywords && (
+                  <div className="flex flex-col gap-y-1">
+                    <div className="text-xs font-medium text-text-tertiary uppercase">{t(`${i18nPrefix}keyword`, { ns: 'datasetHitTesting' })}</div>
+                    <div className="flex flex-wrap gap-x-2">
+                      {keywords.map(keyword => (
+                        <Tag key={keyword} text={keyword} />
+                      ))}
+                    </div>
                   </div>
-                </div>
+                )}
               </div>
             )}
-            {/* Mask */}
-            <Mask className="absolute inset-x-0 bottom-0" />
           </div>
-          {(showImages || showKeywords || !!summary) && (
-            <div className="flex flex-col gap-y-3 pt-3">
-              {showImages && (
-                <ImageList images={images} size="md" className="py-1" />
-              )}
-              {!!summary && (
-                <SummaryText value={summary} disabled />
-              )}
-              {showKeywords && (
-                <div className="flex flex-col gap-y-1">
-                  <div className="text-xs font-medium text-text-tertiary uppercase">{t(`${i18nPrefix}keyword`, { ns: 'datasetHitTesting' })}</div>
-                  <div className="flex flex-wrap gap-x-2">
-                    {keywords.map(keyword => (
-                      <Tag key={keyword} text={keyword} />
-                    ))}
-                  </div>
-                </div>
-              )}
+
+          {isParentChildRetrieval && (
+            <div className="flex-1 pb-6 pl-6">
+              <div className="system-xs-semibold-uppercase text-text-secondary">{t(`${i18nPrefix}hitChunks`, { ns: 'datasetHitTesting', num: child_chunks.length })}</div>
+              <div className={cn('mt-1 space-y-2', heighClassName)}>
+                {child_chunks.map(item => (
+                  <ChildChunksItem key={item.id} payload={item} isShowAll />
+                ))}
+              </div>
             </div>
           )}
         </div>
-
-        {isParentChildRetrieval && (
-          <div className="flex-1 pb-6 pl-6">
-            <div className="system-xs-semibold-uppercase text-text-secondary">{t(`${i18nPrefix}hitChunks`, { ns: 'datasetHitTesting', num: child_chunks.length })}</div>
-            <div className={cn('mt-1 space-y-2', heighClassName)}>
-              {child_chunks.map(item => (
-                <ChildChunksItem key={item.id} payload={item} isShowAll />
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-    </Modal>
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/web/app/components/datasets/hit-testing/components/result-item-external.tsx b/web/app/components/datasets/hit-testing/components/result-item-external.tsx
index 68e9930665..9f68e054d1 100644
--- a/web/app/components/datasets/hit-testing/components/result-item-external.tsx
+++ b/web/app/components/datasets/hit-testing/components/result-item-external.tsx
@@ -2,11 +2,11 @@
 import type { FC } from 'react'
 import type { ExternalKnowledgeBaseHitTesting } from '@/models/datasets'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { FileAppearanceTypeEnum } from '@/app/components/base/file-uploader/types'
-import Modal from '@/app/components/base/modal'
 import ResultItemFooter from './result-item-footer'
 import ResultItemMeta from './result-item-meta'
 
@@ -38,20 +38,27 @@ const ResultItemExternal: FC<Props> = ({ payload, positionId }) => {
       <ResultItemFooter docType={FileAppearanceTypeEnum.custom} docTitle={title} showDetailModal={showDetailModal} />
 
       {isShowDetailModal && (
-        <Modal
-          title={t(`${i18nPrefix}chunkDetail`, { ns: 'datasetHitTesting' })}
-          className="min-w-[800px]!"
-          closable
-          onClose={hideDetailModal}
-          isShow={isShowDetailModal}
+        <Dialog
+          open={isShowDetailModal}
+          onOpenChange={(open) => {
+            if (!open)
+              hideDetailModal()
+          }}
         >
-          <div className="mt-4 flex-1">
-            <ResultItemMeta labelPrefix="Chunk" positionId={positionId} wordCount={content.length} score={score} />
-            <div className={cn('mt-2 body-md-regular break-all text-text-secondary', 'h-[min(539px,80vh)] overflow-y-auto')}>
-              {content}
+          <DialogContent className="w-full min-w-[800px]! overflow-hidden! border-none text-left align-middle">
+            <DialogCloseButton data-testid="modal-close-button" />
+            <DialogTitle className="title-2xl-semi-bold text-text-primary">
+              {t(`${i18nPrefix}chunkDetail`, { ns: 'datasetHitTesting' })}
+            </DialogTitle>
+
+            <div className="mt-4 flex-1">
+              <ResultItemMeta labelPrefix="Chunk" positionId={positionId} wordCount={content.length} score={score} />
+              <div className={cn('mt-2 body-md-regular break-all text-text-secondary', 'h-[min(539px,80vh)] overflow-y-auto')}>
+                {content}
+              </div>
             </div>
-          </div>
-        </Modal>
+          </DialogContent>
+        </Dialog>
       )}
     </div>
   )
diff --git a/web/app/components/datasets/metadata/base/date-picker.tsx b/web/app/components/datasets/metadata/base/date-picker.tsx
index 79c61469de..ed583b8411 100644
--- a/web/app/components/datasets/metadata/base/date-picker.tsx
+++ b/web/app/components/datasets/metadata/base/date-picker.tsx
@@ -70,7 +70,6 @@ const WrappedDatePicker = ({
       onClear={handleDateChange}
       renderTrigger={renderTrigger}
       triggerWrapClassName="w-full"
-      popupZIndexClassname="z-1000"
     />
   )
 }
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
index f76284b36f..a8b5875541 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { BuiltInMetadataItem, MetadataItemInBatchEdit, MetadataItemWithEdit } from '../types'
 import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
 import { toast } from '@langgenius/dify-ui/toast'
 import { produce } from 'immer'
 import * as React from 'react'
@@ -11,7 +12,6 @@ import Divider from '@/app/components/base/divider'
 import { useCreateMetaData } from '@/service/knowledge/use-metadata'
 import Checkbox from '../../../base/checkbox'
 import { Infotip } from '../../../base/infotip'
-import Modal from '../../../base/modal'
 import AddMetadataButton from '../add-metadata-button'
 import useCheckMetadataName from '../hooks/use-check-metadata-name'
 import SelectMetadataModal from '../metadata-dataset/select-metadata-modal'
@@ -90,49 +90,62 @@ const EditMetadataBatchModal: FC<Props> = ({ datasetId, documentNum, list, onSav
     onSave(templeList.filter(item => item.updateType !== UpdateType.delete), addedList, isApplyToAllSelectDocument)
   }, [templeList, addedList, isApplyToAllSelectDocument, onSave])
   return (
-    <Modal title={t(`${i18nPrefix}.editMetadata`, { ns: 'dataset' })} isShow closable onClose={onHide} className="!max-w-[640px]">
-      <div className="mt-1 system-xs-medium text-text-accent">{t(`${i18nPrefix}.editDocumentsNum`, { ns: 'dataset', num: documentNum })}</div>
-      <div className="max-h-[305px] overflow-x-hidden overflow-y-auto">
-        <div className="mt-4 space-y-2">
-          {templeList.map(item => (<EditMetadataBatchItem key={item.id} payload={item} onChange={handleTemplesChange} onRemove={handleTempleItemRemove} onReset={handleItemReset} />))}
-        </div>
-        <div className="mt-4 pl-[18px]">
-          <div className="flex items-center">
-            <div className="mr-2 shrink-0 system-xs-medium-uppercase text-text-tertiary">{t('metadata.createMetadata.title', { ns: 'dataset' })}</div>
-            <Divider bgStyle="gradient" />
-          </div>
-          <div className="mt-2 space-y-2">
-            {addedList.map((item, i) => (<AddedMetadataItem key={i} payload={item} onChange={handleAddedListChange} onRemove={handleAddedItemRemove(i)} />))}
-          </div>
-          <div className="mt-3">
-            <SelectMetadataModal datasetId={datasetId} popupPlacement="top-start" popupOffset={{ mainAxis: 4, crossAxis: 0 }} trigger={<AddMetadataButton />} onSave={handleAddMetaData} onSelect={data => setAddedList([...addedList, data as MetadataItemWithEdit])} onManage={onShowManage} />
-          </div>
-        </div>
-      </div>
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open)
+          onHide()
+      }}
+    >
+      <DialogContent className="w-full !max-w-[640px] overflow-hidden! border-none text-left align-middle">
+        <DialogCloseButton data-testid="modal-close-button" />
+        <DialogTitle className="title-2xl-semi-bold text-text-primary">
+          {t(`${i18nPrefix}.editMetadata`, { ns: 'dataset' })}
+        </DialogTitle>
 
-      <div className="mt-4 flex items-center justify-between">
-        <div className="flex items-center select-none">
-          <Checkbox checked={isApplyToAllSelectDocument} onCheck={() => setIsApplyToAllSelectDocument(!isApplyToAllSelectDocument)} id="apply-to-all" />
-          <div className="mr-1 ml-2 system-xs-medium text-text-secondary">{t(`${i18nPrefix}.applyToAllSelectDocument`, { ns: 'dataset' })}</div>
-          <Infotip
-            aria-label={t(`${i18nPrefix}.applyToAllSelectDocumentTip`, { ns: 'dataset' })}
-            className="p-px"
-            iconClassName="size-3.5 text-text-tertiary"
-            popupClassName="max-w-[240px]"
-          >
-            {t(`${i18nPrefix}.applyToAllSelectDocumentTip`, { ns: 'dataset' })}
-          </Infotip>
+        <div className="mt-1 system-xs-medium text-text-accent">{t(`${i18nPrefix}.editDocumentsNum`, { ns: 'dataset', num: documentNum })}</div>
+        <div className="max-h-[305px] overflow-x-hidden overflow-y-auto">
+          <div className="mt-4 space-y-2">
+            {templeList.map(item => (<EditMetadataBatchItem key={item.id} payload={item} onChange={handleTemplesChange} onRemove={handleTempleItemRemove} onReset={handleItemReset} />))}
+          </div>
+          <div className="mt-4 pl-[18px]">
+            <div className="flex items-center">
+              <div className="mr-2 shrink-0 system-xs-medium-uppercase text-text-tertiary">{t('metadata.createMetadata.title', { ns: 'dataset' })}</div>
+              <Divider bgStyle="gradient" />
+            </div>
+            <div className="mt-2 space-y-2">
+              {addedList.map((item, i) => (<AddedMetadataItem key={i} payload={item} onChange={handleAddedListChange} onRemove={handleAddedItemRemove(i)} />))}
+            </div>
+            <div className="mt-3">
+              <SelectMetadataModal datasetId={datasetId} popupPlacement="top-start" popupOffset={{ mainAxis: 4, crossAxis: 0 }} trigger={<AddMetadataButton />} onSave={handleAddMetaData} onSelect={data => setAddedList([...addedList, data as MetadataItemWithEdit])} onManage={onShowManage} />
+            </div>
+          </div>
         </div>
-        <div className="flex items-center space-x-2">
-          <Button onClick={onHide}>
-            {t('operation.cancel', { ns: 'common' })}
-          </Button>
-          <Button onClick={handleSave} variant="primary">
-            {t('operation.save', { ns: 'common' })}
-          </Button>
+
+        <div className="mt-4 flex items-center justify-between">
+          <div className="flex items-center select-none">
+            <Checkbox checked={isApplyToAllSelectDocument} onCheck={() => setIsApplyToAllSelectDocument(!isApplyToAllSelectDocument)} id="apply-to-all" />
+            <div className="mr-1 ml-2 system-xs-medium text-text-secondary">{t(`${i18nPrefix}.applyToAllSelectDocument`, { ns: 'dataset' })}</div>
+            <Infotip
+              aria-label={t(`${i18nPrefix}.applyToAllSelectDocumentTip`, { ns: 'dataset' })}
+              className="p-px"
+              iconClassName="size-3.5 text-text-tertiary"
+              popupClassName="max-w-[240px]"
+            >
+              {t(`${i18nPrefix}.applyToAllSelectDocumentTip`, { ns: 'dataset' })}
+            </Infotip>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Button onClick={onHide}>
+              {t('operation.cancel', { ns: 'common' })}
+            </Button>
+            <Button onClick={handleSave} variant="primary">
+              {t('operation.save', { ns: 'common' })}
+            </Button>
+          </div>
         </div>
-      </div>
-    </Modal>
+      </DialogContent>
+    </Dialog>
   )
 }
 export default React.memo(EditMetadataBatchModal)
diff --git a/web/app/components/datasets/metadata/metadata-dataset/__tests__/create-content.spec.tsx b/web/app/components/datasets/metadata/metadata-dataset/__tests__/create-content.spec.tsx
index 8070061776..da77a50419 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/__tests__/create-content.spec.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/__tests__/create-content.spec.tsx
@@ -1,148 +1,117 @@
+import type { Props as CreateContentProps } from '../create-content'
+import { Popover } from '@langgenius/dify-ui/popover'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
 import { DataType } from '../../types'
 import CreateContent from '../create-content'
 
-type ModalLikeWrapProps = {
-  children: React.ReactNode
-  title: string
-  onClose?: () => void
-  onConfirm: () => void
-  beforeHeader?: React.ReactNode
+const renderCreateContent = (props: CreateContentProps) => {
+  return render(
+    <Popover open>
+      <CreateContent {...props} />
+    </Popover>,
+  )
 }
 
-type OptionCardProps = {
-  title: string
-  selected: boolean
-  onSelect: () => void
-}
-
-type FieldProps = {
-  label: string
-  children: React.ReactNode
-}
-
-// Mock ModalLikeWrap
-vi.mock('../../../../base/modal-like-wrap', () => ({
-  default: ({ children, title, onClose, onConfirm, beforeHeader }: ModalLikeWrapProps) => (
-    <div data-testid="modal-wrap">
-      <div data-testid="modal-title">{title}</div>
-      {!!beforeHeader && <div data-testid="before-header">{beforeHeader}</div>}
-      <div data-testid="modal-content">{children}</div>
-      <button data-testid="close-btn" onClick={onClose}>Close</button>
-      <button data-testid="confirm-btn" onClick={onConfirm}>Confirm</button>
-    </div>
-  ),
-}))
-
-// Mock OptionCard
-vi.mock('../../../../workflow/nodes/_base/components/option-card', () => ({
-  default: ({ title, selected, onSelect }: OptionCardProps) => (
-    <button
-      data-testid={`option-${title.toLowerCase()}`}
-      data-selected={selected}
-      onClick={onSelect}
-    >
-      {title}
-    </button>
-  ),
-}))
-
-// Mock Field
-vi.mock('../field', () => ({
-  default: ({ label, children }: FieldProps) => (
-    <div data-testid="field">
-      <label data-testid="field-label">{label}</label>
-      {children}
-    </div>
-  ),
-}))
-
 describe('CreateContent', () => {
   describe('Rendering', () => {
     it('should render without crashing', () => {
       const handleSave = vi.fn()
-      render(<CreateContent onSave={handleSave} />)
-      expect(screen.getByTestId('modal-wrap')).toBeInTheDocument()
+      renderCreateContent({ onSave: handleSave })
+      expect(screen.getByText('dataset.metadata.createMetadata.title')).toBeInTheDocument()
     })
 
     it('should render modal title', () => {
       const handleSave = vi.fn()
-      render(<CreateContent onSave={handleSave} />)
-      expect(screen.getByTestId('modal-title')).toBeInTheDocument()
+      renderCreateContent({ onSave: handleSave })
+      expect(screen.getByText('dataset.metadata.createMetadata.title')).toBeInTheDocument()
     })
 
     it('should render type selection options', () => {
       const handleSave = vi.fn()
-      render(<CreateContent onSave={handleSave} />)
-      expect(screen.getByTestId('option-string')).toBeInTheDocument()
-      expect(screen.getByTestId('option-number')).toBeInTheDocument()
-      expect(screen.getByTestId('option-time')).toBeInTheDocument()
+      renderCreateContent({ onSave: handleSave })
+      expect(screen.getByText('String')).toBeInTheDocument()
+      expect(screen.getByText('Number')).toBeInTheDocument()
+      expect(screen.getByText('Time')).toBeInTheDocument()
     })
 
     it('should render name input field', () => {
       const handleSave = vi.fn()
-      render(<CreateContent onSave={handleSave} />)
+      renderCreateContent({ onSave: handleSave })
       expect(screen.getByRole('textbox')).toBeInTheDocument()
     })
 
     it('should render confirm button', () => {
       const handleSave = vi.fn()
-      render(<CreateContent onSave={handleSave} />)
-      expect(screen.getByTestId('confirm-btn')).toBeInTheDocument()
+      renderCreateContent({ onSave: handleSave })
+      expect(screen.getByRole('button', { name: 'common.operation.save' })).toBeInTheDocument()
     })
 
     it('should render close button', () => {
       const handleSave = vi.fn()
-      render(<CreateContent onSave={handleSave} />)
-      expect(screen.getByTestId('close-btn')).toBeInTheDocument()
+      renderCreateContent({ onSave: handleSave })
+      expect(screen.getByTestId('modal-close-btn')).toBeInTheDocument()
     })
   })
 
   describe('Type Selection', () => {
-    it('should default to string type', () => {
+    it('should save string type by default', () => {
       const handleSave = vi.fn()
-      render(<CreateContent onSave={handleSave} />)
-      expect(screen.getByTestId('option-string')).toHaveAttribute('data-selected', 'true')
+      renderCreateContent({ onSave: handleSave })
+
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
+
+      expect(handleSave).toHaveBeenCalledWith({
+        type: DataType.string,
+        name: '',
+      })
     })
 
-    it('should select number type when clicked', () => {
+    it('should save number type when number is clicked', () => {
       const handleSave = vi.fn()
-      render(<CreateContent onSave={handleSave} />)
+      renderCreateContent({ onSave: handleSave })
 
-      fireEvent.click(screen.getByTestId('option-number'))
+      fireEvent.click(screen.getByText('Number'))
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
 
-      expect(screen.getByTestId('option-number')).toHaveAttribute('data-selected', 'true')
+      expect(handleSave).toHaveBeenCalledWith({
+        type: DataType.number,
+        name: '',
+      })
     })
 
-    it('should select time type when clicked', () => {
+    it('should save time type when time is clicked', () => {
       const handleSave = vi.fn()
-      render(<CreateContent onSave={handleSave} />)
+      renderCreateContent({ onSave: handleSave })
 
-      fireEvent.click(screen.getByTestId('option-time'))
+      fireEvent.click(screen.getByText('Time'))
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
 
-      expect(screen.getByTestId('option-time')).toHaveAttribute('data-selected', 'true')
+      expect(handleSave).toHaveBeenCalledWith({
+        type: DataType.time,
+        name: '',
+      })
     })
 
-    it('should deselect previous type when new type is selected', () => {
+    it('should use the latest selected type when type changes', () => {
       const handleSave = vi.fn()
-      render(<CreateContent onSave={handleSave} />)
+      renderCreateContent({ onSave: handleSave })
 
-      // Initially string is selected
-      expect(screen.getByTestId('option-string')).toHaveAttribute('data-selected', 'true')
+      fireEvent.click(screen.getByText('Number'))
+      fireEvent.click(screen.getByText('Time'))
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
 
-      // Select number
-      fireEvent.click(screen.getByTestId('option-number'))
-
-      expect(screen.getByTestId('option-string')).toHaveAttribute('data-selected', 'false')
-      expect(screen.getByTestId('option-number')).toHaveAttribute('data-selected', 'true')
+      expect(handleSave).toHaveBeenCalledWith({
+        type: DataType.time,
+        name: '',
+      })
     })
   })
 
   describe('Name Input', () => {
     it('should update name when typing', () => {
       const handleSave = vi.fn()
-      render(<CreateContent onSave={handleSave} />)
+      renderCreateContent({ onSave: handleSave })
 
       const input = screen.getByRole('textbox')
       fireEvent.change(input, { target: { value: 'new_field' } })
@@ -152,7 +121,7 @@ describe('CreateContent', () => {
 
     it('should start with empty name', () => {
       const handleSave = vi.fn()
-      render(<CreateContent onSave={handleSave} />)
+      renderCreateContent({ onSave: handleSave })
 
       expect(screen.getByRole('textbox')).toHaveValue('')
     })
@@ -161,11 +130,11 @@ describe('CreateContent', () => {
   describe('User Interactions', () => {
     it('should call onSave with type and name when confirmed', () => {
       const handleSave = vi.fn()
-      render(<CreateContent onSave={handleSave} />)
+      renderCreateContent({ onSave: handleSave })
 
       const input = screen.getByRole('textbox')
       fireEvent.change(input, { target: { value: 'test_field' } })
-      fireEvent.click(screen.getByTestId('confirm-btn'))
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
 
       expect(handleSave).toHaveBeenCalledWith({
         type: DataType.string,
@@ -175,12 +144,12 @@ describe('CreateContent', () => {
 
     it('should call onSave with correct type after changing type', () => {
       const handleSave = vi.fn()
-      render(<CreateContent onSave={handleSave} />)
+      renderCreateContent({ onSave: handleSave })
 
-      fireEvent.click(screen.getByTestId('option-number'))
+      fireEvent.click(screen.getByText('Number'))
       const input = screen.getByRole('textbox')
       fireEvent.change(input, { target: { value: 'num_field' } })
-      fireEvent.click(screen.getByTestId('confirm-btn'))
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
 
       expect(handleSave).toHaveBeenCalledWith({
         type: DataType.number,
@@ -191,9 +160,9 @@ describe('CreateContent', () => {
     it('should call onClose when close button is clicked', () => {
       const handleSave = vi.fn()
       const handleClose = vi.fn()
-      render(<CreateContent onSave={handleSave} onClose={handleClose} />)
+      renderCreateContent({ onSave: handleSave, onClose: handleClose })
 
-      fireEvent.click(screen.getByTestId('close-btn'))
+      fireEvent.click(screen.getByTestId('modal-close-btn'))
 
       expect(handleClose).toHaveBeenCalled()
     })
@@ -202,40 +171,35 @@ describe('CreateContent', () => {
   describe('Back Button', () => {
     it('should show back button when hasBack is true', () => {
       const handleSave = vi.fn()
-      render(<CreateContent onSave={handleSave} hasBack />)
+      renderCreateContent({ onSave: handleSave, hasBack: true })
 
-      expect(screen.getByTestId('before-header')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /dataset\.metadata\.createMetadata\.back/ })).toBeInTheDocument()
     })
 
     it('should not show back button when hasBack is false', () => {
       const handleSave = vi.fn()
-      render(<CreateContent onSave={handleSave} hasBack={false} />)
+      renderCreateContent({ onSave: handleSave, hasBack: false })
 
-      expect(screen.queryByTestId('before-header')).not.toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: /dataset\.metadata\.createMetadata\.back/ })).not.toBeInTheDocument()
     })
 
     it('should call onBack when back button is clicked', () => {
       const handleSave = vi.fn()
       const handleBack = vi.fn()
-      render(<CreateContent onSave={handleSave} hasBack onBack={handleBack} />)
+      renderCreateContent({ onSave: handleSave, hasBack: true, onBack: handleBack })
 
-      const backButton = screen.getByTestId('before-header')
-      // Find the clickable element inside
-      const clickable = backButton.querySelector('.cursor-pointer') || backButton.firstChild
-      if (clickable)
-        fireEvent.click(clickable)
+      fireEvent.click(screen.getByRole('button', { name: /dataset\.metadata\.createMetadata\.back/ }))
 
-      // The back functionality is tested through the actual implementation
-      expect(screen.getByTestId('before-header')).toBeInTheDocument()
+      expect(handleBack).toHaveBeenCalled()
     })
   })
 
   describe('Edge Cases', () => {
     it('should handle empty name submission', () => {
       const handleSave = vi.fn()
-      render(<CreateContent onSave={handleSave} />)
+      renderCreateContent({ onSave: handleSave })
 
-      fireEvent.click(screen.getByTestId('confirm-btn'))
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
 
       expect(handleSave).toHaveBeenCalledWith({
         type: DataType.string,
@@ -245,19 +209,23 @@ describe('CreateContent', () => {
 
     it('should handle type cycling', () => {
       const handleSave = vi.fn()
-      render(<CreateContent onSave={handleSave} />)
+      renderCreateContent({ onSave: handleSave })
 
       // Cycle through all types
-      fireEvent.click(screen.getByTestId('option-number'))
-      fireEvent.click(screen.getByTestId('option-time'))
-      fireEvent.click(screen.getByTestId('option-string'))
+      fireEvent.click(screen.getByText('Number'))
+      fireEvent.click(screen.getByText('Time'))
+      fireEvent.click(screen.getByText('String'))
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
 
-      expect(screen.getByTestId('option-string')).toHaveAttribute('data-selected', 'true')
+      expect(handleSave).toHaveBeenCalledWith({
+        type: DataType.string,
+        name: '',
+      })
     })
 
     it('should handle special characters in name', () => {
       const handleSave = vi.fn()
-      render(<CreateContent onSave={handleSave} />)
+      renderCreateContent({ onSave: handleSave })
 
       const input = screen.getByRole('textbox')
       fireEvent.change(input, { target: { value: 'test_field_123' } })
diff --git a/web/app/components/datasets/metadata/metadata-dataset/__tests__/dataset-metadata-drawer.spec.tsx b/web/app/components/datasets/metadata/metadata-dataset/__tests__/dataset-metadata-drawer.spec.tsx
index 55e5f9de65..f05bd53b7f 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/__tests__/dataset-metadata-drawer.spec.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/__tests__/dataset-metadata-drawer.spec.tsx
@@ -135,6 +135,19 @@ describe('DatasetMetadataDrawer', () => {
   })
 
   describe('User Interactions', () => {
+    it('should call onClose when drawer close button is clicked', async () => {
+      const onClose = vi.fn()
+      render(<DatasetMetadataDrawer {...defaultProps} onClose={onClose} />)
+
+      await waitFor(() => {
+        expect(screen.getByRole('dialog'))!.toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('close-icon'))
+
+      expect(onClose).toHaveBeenCalledTimes(1)
+    })
+
     it('should call onIsBuiltInEnabledChange when switch is toggled', async () => {
       const onIsBuiltInEnabledChange = vi.fn()
       render(
@@ -280,8 +293,8 @@ describe('DatasetMetadataDrawer', () => {
         expect(inputs.length).toBeGreaterThan(0)
       })
 
-      const inputs = document.querySelectorAll('input')
-      fireEvent.change(inputs[0]!, { target: { value: 'renamed_field' } })
+      const input = screen.getByPlaceholderText('dataset.metadata.datasetMetadata.namePlaceholder')
+      fireEvent.change(input, { target: { value: 'renamed_field' } })
 
       // Find and click save button
       fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
@@ -322,8 +335,8 @@ describe('DatasetMetadataDrawer', () => {
       })
 
       // Change name first
-      const inputs = document.querySelectorAll('input')
-      fireEvent.change(inputs[0]!, { target: { value: 'changed_name' } })
+      const input = screen.getByPlaceholderText('dataset.metadata.datasetMetadata.namePlaceholder')
+      fireEvent.change(input, { target: { value: 'changed_name' } })
 
       // Find and click cancel button
       fireEvent.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
@@ -335,7 +348,7 @@ describe('DatasetMetadataDrawer', () => {
       })
     })
 
-    it('should close rename modal when modal close button is clicked', async () => {
+    it('should close rename modal when dialog requests close', async () => {
       render(<DatasetMetadataDrawer {...defaultProps} />)
 
       await waitFor(() => {
@@ -357,23 +370,12 @@ describe('DatasetMetadataDrawer', () => {
         expect(inputs.length).toBeGreaterThan(0)
       })
 
-      // Find and click the modal close button (X button)
-      // The Modal component has a close button in the header
-      const dialogs = screen.getAllByRole('dialog')
-      const renameModal = dialogs.find(d => d.querySelector('input'))
-      if (renameModal) {
-        // Find close button by looking for a button with close-related class or X icon
-        const closeButtons = renameModal.querySelectorAll('button')
-        for (const btn of Array.from(closeButtons)) {
-          // Skip cancel/save buttons
-          if (!btn.textContent?.toLowerCase().includes('cancel')
-            && !btn.textContent?.toLowerCase().includes('save')
-            && btn.querySelector('svg')) {
-            fireEvent.click(btn)
-            break
-          }
-        }
-      }
+      fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+
+      await waitFor(() => {
+        expect(screen.queryByRole('dialog', { name: 'dataset.metadata.datasetMetadata.rename' })).not.toBeInTheDocument()
+        expect(screen.getAllByRole('dialog')).toHaveLength(1)
+      })
     })
   })
 
diff --git a/web/app/components/datasets/metadata/metadata-dataset/create-content.tsx b/web/app/components/datasets/metadata/metadata-dataset/create-content.tsx
index ee1b9cbcdc..b0824d14a9 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/create-content.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/create-content.tsx
@@ -1,12 +1,13 @@
 'use client'
 import type { FC } from 'react'
-import { RiArrowLeftLine } from '@remixicon/react'
+import type { BuiltInMetadataItem } from '../types'
+import { Button } from '@langgenius/dify-ui/button'
+import { PopoverTitle } from '@langgenius/dify-ui/popover'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import ModalLikeWrap from '../../../base/modal-like-wrap'
 import OptionCard from '../../../workflow/nodes/_base/components/option-card'
 import { DataType } from '../types'
 import Field from './field'
@@ -15,7 +16,7 @@ const i18nPrefix = 'metadata.createMetadata'
 
 export type Props = {
   onClose?: () => void
-  onSave: (data: any) => void
+  onSave: (data: BuiltInMetadataItem) => void
   hasBack?: boolean
   onBack?: () => void
 }
@@ -45,47 +46,77 @@ const CreateContent: FC<Props> = ({
   }, [onSave, type, name])
 
   return (
-    <ModalLikeWrap
-      title={t(`${i18nPrefix}.title`, { ns: 'dataset' })}
-      onClose={onClose}
-      onConfirm={handleSave}
-      hideCloseBtn={hasBack}
-      beforeHeader={hasBack && (
-        <div className="relative left-[-4px] mb-1 flex cursor-pointer items-center space-x-1 py-1 text-text-accent" onClick={onBack}>
-          <RiArrowLeftLine className="size-4" />
-          <div className="system-xs-semibold-uppercase">{t(`${i18nPrefix}.back`, { ns: 'dataset' })}</div>
-        </div>
+    <div className="w-[320px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg px-3 pt-3.5 pb-4 shadow-xl">
+      {hasBack && (
+        <button
+          type="button"
+          className="relative left-[-4px] mb-1 flex cursor-pointer items-center space-x-1 py-1 text-text-accent"
+          onClick={onBack}
+        >
+          <span className="i-ri-arrow-left-line size-4" />
+          <span className="system-xs-semibold-uppercase">{t(`${i18nPrefix}.back`, { ns: 'dataset' })}</span>
+        </button>
       )}
-    >
-      <div className="space-y-3">
-        <Field label={t(`${i18nPrefix}.type`, { ns: 'dataset' })}>
-          <div className="grid grid-cols-3 gap-2">
-            <OptionCard
-              title="String"
-              selected={type === DataType.string}
-              onSelect={handleTypeChange(DataType.string)}
-            />
-            <OptionCard
-              title="Number"
-              selected={type === DataType.number}
-              onSelect={handleTypeChange(DataType.number)}
-            />
-            <OptionCard
-              title="Time"
-              selected={type === DataType.time}
-              onSelect={handleTypeChange(DataType.time)}
-            />
-          </div>
-        </Field>
-        <Field label={t(`${i18nPrefix}.name`, { ns: 'dataset' })}>
-          <Input
-            value={name}
-            onChange={handleNameChange}
-            placeholder={t(`${i18nPrefix}.namePlaceholder`, { ns: 'dataset' })}
-          />
-        </Field>
+      <div className="mb-1 flex h-6 items-center justify-between">
+        <PopoverTitle className="system-xl-semibold text-text-primary">
+          {t(`${i18nPrefix}.title`, { ns: 'dataset' })}
+        </PopoverTitle>
+        {!hasBack && (
+          <button
+            type="button"
+            aria-label={t('operation.close', { ns: 'common' })}
+            className="cursor-pointer p-1.5 text-text-tertiary"
+            onClick={onClose}
+          >
+            <span className="i-ri-close-line size-4" data-testid="modal-close-btn" />
+          </button>
+        )}
       </div>
-    </ModalLikeWrap>
+      <div className="mt-2">
+        <div className="space-y-3">
+          <Field label={t(`${i18nPrefix}.type`, { ns: 'dataset' })}>
+            <div className="grid grid-cols-3 gap-2">
+              <OptionCard
+                title="String"
+                selected={type === DataType.string}
+                onSelect={handleTypeChange(DataType.string)}
+              />
+              <OptionCard
+                title="Number"
+                selected={type === DataType.number}
+                onSelect={handleTypeChange(DataType.number)}
+              />
+              <OptionCard
+                title="Time"
+                selected={type === DataType.time}
+                onSelect={handleTypeChange(DataType.time)}
+              />
+            </div>
+          </Field>
+          <Field label={t(`${i18nPrefix}.name`, { ns: 'dataset' })}>
+            <Input
+              value={name}
+              onChange={handleNameChange}
+              placeholder={t(`${i18nPrefix}.namePlaceholder`, { ns: 'dataset' })}
+            />
+          </Field>
+        </div>
+      </div>
+      <div className="mt-4 flex justify-end">
+        <Button
+          className="mr-2"
+          onClick={onClose}
+        >
+          {t('operation.cancel', { ns: 'common' })}
+        </Button>
+        <Button
+          onClick={handleSave}
+          variant="primary"
+        >
+          {t('operation.save', { ns: 'common' })}
+        </Button>
+      </div>
+    </div>
   )
 }
 export default React.memo(CreateContent)
diff --git a/web/app/components/datasets/metadata/metadata-dataset/create-metadata-modal.tsx b/web/app/components/datasets/metadata/metadata-dataset/create-metadata-modal.tsx
index 687266eed9..fad6fd6bb4 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/create-metadata-modal.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/create-metadata-modal.tsx
@@ -8,7 +8,6 @@ import CreateContent from './create-content'
 type Props = {
   open: boolean
   setOpen: (open: boolean) => void
-  onSave: (data: any) => void
   trigger: React.ReactNode
   popupLeft?: number
 } & CreateContentProps
diff --git a/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx b/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
index 69a8712c67..b6597e5f51 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
@@ -12,6 +12,17 @@ import {
 } from '@langgenius/dify-ui/alert-dialog'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Dialog, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
+import {
+  Drawer,
+  DrawerBackdrop,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerPopup,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerViewport,
+} from '@langgenius/dify-ui/drawer'
 import { Switch } from '@langgenius/dify-ui/switch'
 import { toast } from '@langgenius/dify-ui/toast'
 import { RiAddLine, RiDeleteBinLine, RiEditLine } from '@remixicon/react'
@@ -19,10 +30,8 @@ import { useBoolean, useHover } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Drawer from '@/app/components/base/drawer'
 import { Infotip } from '@/app/components/base/infotip'
 import Input from '@/app/components/base/input'
-import Modal from '@/app/components/base/modal'
 import CreateModal from '@/app/components/datasets/metadata/metadata-dataset/create-metadata-modal'
 import { getIcon } from '../utils/get-icon'
 import Field from './field'
@@ -149,7 +158,7 @@ const DatasetMetadataDrawer: FC<Props> = ({
   }, [setCurrPayload, setIsShowRenameModal])
 
   const [open, setOpen] = useState(false)
-  const handleAdd = useCallback(async (data: MetadataItemWithValueLength) => {
+  const handleAdd = useCallback(async (data: BuiltInMetadataItem) => {
     await onAdd(data)
     toast.success(t('api.actionSuccess', { ns: 'common' }))
     setOpen(false)
@@ -176,91 +185,123 @@ const DatasetMetadataDrawer: FC<Props> = ({
 
   return (
     <Drawer
-      isOpen={true}
-      onClose={onClose}
-      showClose
-      title={t('metadata.metadata', { ns: 'dataset' })}
-      footer={null}
-      panelClassName="px-4 block max-w-[420px]! my-2 rounded-l-2xl"
+      open
+      modal
+      swipeDirection="right"
+      onOpenChange={(open) => {
+        if (!open)
+          onClose()
+      }}
     >
-      <div className="h-full overflow-y-auto">
-        <div className="system-sm-regular text-text-tertiary">{t(`${i18nPrefix}.description`, { ns: 'dataset' })}</div>
-        <CreateModal
-          open={open}
-          setOpen={setOpen}
-          trigger={(
-            <Button variant="primary" className="mt-3">
-              <RiAddLine className="mr-1" />
-              {t(`${i18nPrefix}.addMetaData`, { ns: 'dataset' })}
-            </Button>
-          )}
-          hasBack
-          onSave={handleAdd}
-        />
+      <DrawerPortal>
+        <DrawerBackdrop />
+        <DrawerViewport>
+          <DrawerPopup className="data-[swipe-direction=right]:top-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-[calc(100dvh-16px)] data-[swipe-direction=right]:w-full data-[swipe-direction=right]:max-w-[420px]">
+            <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
+              <div className="flex shrink-0 justify-between px-4 pt-6 pb-4">
+                <DrawerTitle className="text-lg leading-6 font-medium text-text-primary">
+                  {t('metadata.metadata', { ns: 'dataset' })}
+                </DrawerTitle>
+                <DrawerCloseButton
+                  aria-label={t('operation.close', { ns: 'common' })}
+                  className="h-6 w-6 rounded-md"
+                  data-testid="close-icon"
+                />
+              </div>
+              <div className="min-h-0 flex-1 overflow-y-auto px-4 pb-6">
+                <div className="system-sm-regular text-text-tertiary">{t(`${i18nPrefix}.description`, { ns: 'dataset' })}</div>
+                <CreateModal
+                  open={open}
+                  setOpen={setOpen}
+                  trigger={(
+                    <Button variant="primary" className="mt-3">
+                      <RiAddLine className="mr-1" />
+                      {t(`${i18nPrefix}.addMetaData`, { ns: 'dataset' })}
+                    </Button>
+                  )}
+                  hasBack
+                  onSave={handleAdd}
+                />
 
-        <div className="mt-3 space-y-1">
-          {userMetadata.map(payload => (
-            <Item
-              key={payload.id}
-              payload={payload}
-              onRename={handleRename(payload)}
-              onDelete={handleDelete(payload)}
-            />
-          ))}
-        </div>
+                <div className="mt-3 space-y-1">
+                  {userMetadata.map(payload => (
+                    <Item
+                      key={payload.id}
+                      payload={payload}
+                      onRename={handleRename(payload)}
+                      onDelete={handleDelete(payload)}
+                    />
+                  ))}
+                </div>
 
-        <div className="mt-3 flex h-6 items-center">
-          <Switch
-            checked={isBuiltInEnabled}
-            onCheckedChange={onIsBuiltInEnabledChange}
-          />
-          <div className="mr-0.5 ml-2 system-sm-semibold text-text-secondary">{t(`${i18nPrefix}.builtIn`, { ns: 'dataset' })}</div>
-          <Infotip aria-label={t(`${i18nPrefix}.builtInDescription`, { ns: 'dataset' })} popupClassName="max-w-[100px]">
-            {t(`${i18nPrefix}.builtInDescription`, { ns: 'dataset' })}
-          </Infotip>
-        </div>
+                <div className="mt-3 flex h-6 items-center">
+                  <Switch
+                    checked={isBuiltInEnabled}
+                    onCheckedChange={onIsBuiltInEnabledChange}
+                  />
+                  <div className="mr-0.5 ml-2 system-sm-semibold text-text-secondary">{t(`${i18nPrefix}.builtIn`, { ns: 'dataset' })}</div>
+                  <Infotip aria-label={t(`${i18nPrefix}.builtInDescription`, { ns: 'dataset' })} popupClassName="max-w-[100px]">
+                    {t(`${i18nPrefix}.builtInDescription`, { ns: 'dataset' })}
+                  </Infotip>
+                </div>
 
-        <div className="mt-1 space-y-1">
-          {builtInMetadata.map(payload => (
-            <Item
-              key={payload.name}
-              readonly
-              disabled={!isBuiltInEnabled}
-              payload={payload as MetadataItemWithValueLength}
-            />
-          ))}
-        </div>
+                <div className="mt-1 space-y-1">
+                  {builtInMetadata.map(payload => (
+                    <Item
+                      key={payload.name}
+                      readonly
+                      disabled={!isBuiltInEnabled}
+                      payload={payload as MetadataItemWithValueLength}
+                    />
+                  ))}
+                </div>
 
-        {isShowRenameModal && (
-          <Modal isShow title={t(`${i18nPrefix}.rename`, { ns: 'dataset' })} onClose={() => setIsShowRenameModal(false)}>
-            <Field label={t(`${i18nPrefix}.name`, { ns: 'dataset' })} className="mt-4">
-              <Input
-                value={templeName}
-                onChange={e => setTempleName(e.target.value)}
-                placeholder={t(`${i18nPrefix}.namePlaceholder`, { ns: 'dataset' })}
-              />
-            </Field>
-            <div className="mt-4 flex justify-end">
-              <Button
-                className="mr-2"
-                onClick={() => {
-                  setIsShowRenameModal(false)
-                  setTempleName(currPayload!.name)
-                }}
-              >
-                {t('operation.cancel', { ns: 'common' })}
-              </Button>
-              <Button
-                onClick={handleRenamed}
-                variant="primary"
-                disabled={!templeName}
-              >
-                {t('operation.save', { ns: 'common' })}
-              </Button>
-            </div>
-          </Modal>
-        )}
-      </div>
+                {isShowRenameModal && (
+                  <Dialog
+                    open
+                    onOpenChange={(open) => {
+                      if (!open)
+                        setIsShowRenameModal(false)
+                    }}
+                  >
+                    <DialogContent className="overflow-hidden! border-none text-left align-middle">
+                      <DialogTitle className="title-2xl-semi-bold text-text-primary">
+                        {t(`${i18nPrefix}.rename`, { ns: 'dataset' })}
+                      </DialogTitle>
+
+                      <Field label={t(`${i18nPrefix}.name`, { ns: 'dataset' })} className="mt-4">
+                        <Input
+                          value={templeName}
+                          onChange={e => setTempleName(e.target.value)}
+                          placeholder={t(`${i18nPrefix}.namePlaceholder`, { ns: 'dataset' })}
+                        />
+                      </Field>
+                      <div className="mt-4 flex justify-end">
+                        <Button
+                          className="mr-2"
+                          onClick={() => {
+                            setIsShowRenameModal(false)
+                            setTempleName(currPayload!.name)
+                          }}
+                        >
+                          {t('operation.cancel', { ns: 'common' })}
+                        </Button>
+                        <Button
+                          onClick={handleRenamed}
+                          variant="primary"
+                          disabled={!templeName}
+                        >
+                          {t('operation.save', { ns: 'common' })}
+                        </Button>
+                      </div>
+                    </DialogContent>
+                  </Dialog>
+                )}
+              </div>
+            </DrawerContent>
+          </DrawerPopup>
+        </DrawerViewport>
+      </DrawerPortal>
     </Drawer>
   )
 }
diff --git a/web/app/components/datasets/metadata/metadata-dataset/select-metadata-modal.tsx b/web/app/components/datasets/metadata/metadata-dataset/select-metadata-modal.tsx
index e0ed692677..352b95f248 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/select-metadata-modal.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/select-metadata-modal.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { Placement } from '@langgenius/dify-ui/popover'
 import type { FC } from 'react'
-import type { MetadataItem } from '../types'
+import type { BuiltInMetadataItem, MetadataItem } from '../types'
 import type { Props as CreateContentProps } from './create-content'
 import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
 import * as React from 'react'
@@ -15,15 +15,16 @@ type Props = {
   popupPlacement?: Placement
   popupOffset?: { mainAxis: number, crossAxis: number }
   onSelect: (data: MetadataItem) => void
-  onSave: (data: MetadataItem) => void
   trigger: React.ReactNode
   onManage: () => void
 } & CreateContentProps
 
-enum Step {
-  select = 'select',
-  create = 'create',
-}
+const Step = {
+  select: 'select',
+  create: 'create',
+} as const
+
+type Step = typeof Step[keyof typeof Step]
 
 const SelectMetadataModal: FC<Props> = ({
   datasetId,
@@ -37,7 +38,7 @@ const SelectMetadataModal: FC<Props> = ({
   const { data: datasetMetaData } = useDatasetMetaData(datasetId)
 
   const [open, setOpen] = useState(false)
-  const [step, setStep] = useState(Step.select)
+  const [step, setStep] = useState<Step>(Step.select)
   const triggerElement = React.isValidElement(trigger)
     ? trigger
     : <button type="button">{trigger}</button>
@@ -47,7 +48,7 @@ const SelectMetadataModal: FC<Props> = ({
       setStep(Step.select)
   }, [])
 
-  const handleSave = useCallback(async (data: MetadataItem) => {
+  const handleSave = useCallback(async (data: BuiltInMetadataItem) => {
     await onSave(data)
     setStep(Step.select)
   }, [onSave])
diff --git a/web/app/components/datasets/metadata/metadata-document/info-group.tsx b/web/app/components/datasets/metadata/metadata-document/info-group.tsx
index 16f5e573fb..5d174b2534 100644
--- a/web/app/components/datasets/metadata/metadata-document/info-group.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/info-group.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import type { MetadataItemWithValue } from '../types'
+import type { BuiltInMetadataItem, MetadataItemWithValue } from '../types'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiDeleteBinLine } from '@remixicon/react'
 import * as React from 'react'
@@ -29,7 +29,7 @@ type Props = {
   onChange?: (item: MetadataItemWithValue) => void
   onDelete?: (item: MetadataItemWithValue) => void
   onSelect?: (item: MetadataItemWithValue) => void
-  onAdd?: (item: MetadataItemWithValue) => void
+  onAdd?: (item: BuiltInMetadataItem) => void
 }
 
 const InfoGroup: FC<Props> = ({
diff --git a/web/app/components/datasets/rename-modal/index.tsx b/web/app/components/datasets/rename-modal/index.tsx
index a62c1c93be..ae8f9f5d6a 100644
--- a/web/app/components/datasets/rename-modal/index.tsx
+++ b/web/app/components/datasets/rename-modal/index.tsx
@@ -4,13 +4,12 @@ import type { AppIconSelection } from '../../base/app-icon-picker'
 import type { DataSet } from '@/models/datasets'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import { toast } from '@langgenius/dify-ui/toast'
 import { RiCloseLine } from '@remixicon/react'
-import { noop } from 'es-toolkit/function'
 import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import Modal from '@/app/components/base/modal'
 import Textarea from '@/app/components/base/textarea'
 import { updateDatasetSetting } from '@/service/datasets'
 import AppIcon from '../../base/app-icon'
@@ -89,38 +88,41 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
     }
   }, [appIcon, description, dataset.id, externalKnowledgeApiId, externalKnowledgeId, name, onClose, onSuccess, t])
   return (
-    <Modal className="w-[520px] max-w-[520px] rounded-xl px-8 py-6" isShow={show} onClose={noop}>
-      <div className="flex items-center justify-between pb-2">
-        <div className="text-xl leading-[30px] font-medium text-text-primary">{t('title', { ns: 'datasetSettings' })}</div>
-        <div className="cursor-pointer p-2" onClick={onClose}>
-          <RiCloseLine className="h-4 w-4 text-text-tertiary" />
-        </div>
-      </div>
-      <div>
-        <div className={cn('flex flex-col py-4')}>
-          <div className="shrink-0 py-2 text-sm leading-[20px] font-medium text-text-primary">
-            {t('form.name', { ns: 'datasetSettings' })}
-          </div>
-          <div className="flex items-center gap-x-2">
-            <AppIcon size="medium" onClick={handleOpenAppIconPicker} className="cursor-pointer" iconType={appIcon.type} icon={appIcon.type === 'image' ? appIcon.fileId : appIcon.icon} background={appIcon.type === 'image' ? undefined : appIcon.background} imageUrl={appIcon.type === 'image' ? appIcon.url : undefined} showEditIcon />
-            <Input value={name} onChange={e => setName(e.target.value)} className="h-9 grow" placeholder={t('form.namePlaceholder', { ns: 'datasetSettings' }) || ''} />
+    <Dialog open={show}>
+      <DialogContent className="w-full max-w-[520px] overflow-hidden! rounded-xl border-none px-8 py-6 text-left align-middle">
+
+        <div className="flex items-center justify-between pb-2">
+          <div className="text-xl leading-[30px] font-medium text-text-primary">{t('title', { ns: 'datasetSettings' })}</div>
+          <div className="cursor-pointer p-2" onClick={onClose}>
+            <RiCloseLine className="h-4 w-4 text-text-tertiary" />
           </div>
         </div>
-        <div className={cn('flex flex-col py-4')}>
-          <div className="shrink-0 py-2 text-sm leading-[20px] font-medium text-text-primary">
-            {t('form.desc', { ns: 'datasetSettings' })}
+        <div>
+          <div className={cn('flex flex-col py-4')}>
+            <div className="shrink-0 py-2 text-sm leading-[20px] font-medium text-text-primary">
+              {t('form.name', { ns: 'datasetSettings' })}
+            </div>
+            <div className="flex items-center gap-x-2">
+              <AppIcon size="medium" onClick={handleOpenAppIconPicker} className="cursor-pointer" iconType={appIcon.type} icon={appIcon.type === 'image' ? appIcon.fileId : appIcon.icon} background={appIcon.type === 'image' ? undefined : appIcon.background} imageUrl={appIcon.type === 'image' ? appIcon.url : undefined} showEditIcon />
+              <Input value={name} onChange={e => setName(e.target.value)} className="h-9 grow" placeholder={t('form.namePlaceholder', { ns: 'datasetSettings' }) || ''} />
+            </div>
           </div>
-          <div className="w-full">
-            <Textarea value={description} onChange={e => setDescription(e.target.value)} className="resize-none" placeholder={t('form.descPlaceholder', { ns: 'datasetSettings' }) || ''} />
+          <div className={cn('flex flex-col py-4')}>
+            <div className="shrink-0 py-2 text-sm leading-[20px] font-medium text-text-primary">
+              {t('form.desc', { ns: 'datasetSettings' })}
+            </div>
+            <div className="w-full">
+              <Textarea value={description} onChange={e => setDescription(e.target.value)} className="resize-none" placeholder={t('form.descPlaceholder', { ns: 'datasetSettings' }) || ''} />
+            </div>
           </div>
         </div>
-      </div>
-      <div className="flex justify-end pt-6">
-        <Button className="mr-2" onClick={onClose}>{t('operation.cancel', { ns: 'common' })}</Button>
-        <Button disabled={loading} variant="primary" onClick={onConfirm}>{t('operation.save', { ns: 'common' })}</Button>
-      </div>
-      {showAppIconPicker && (<AppIconPicker onSelect={handleSelectAppIcon} onClose={handleCloseAppIconPicker} />)}
-    </Modal>
+        <div className="flex justify-end pt-6">
+          <Button className="mr-2" onClick={onClose}>{t('operation.cancel', { ns: 'common' })}</Button>
+          <Button disabled={loading} variant="primary" onClick={onConfirm}>{t('operation.save', { ns: 'common' })}</Button>
+        </div>
+        {showAppIconPicker && (<AppIconPicker onSelect={handleSelectAppIcon} onClose={handleCloseAppIconPicker} />)}
+      </DialogContent>
+    </Dialog>
   )
 }
 export default RenameDatasetModal
diff --git a/web/app/components/develop/secret-key/__tests__/secret-key-modal.spec.tsx b/web/app/components/develop/secret-key/__tests__/secret-key-modal.spec.tsx
index 333ef45162..0dbf7318b2 100644
--- a/web/app/components/develop/secret-key/__tests__/secret-key-modal.spec.tsx
+++ b/web/app/components/develop/secret-key/__tests__/secret-key-modal.spec.tsx
@@ -88,7 +88,7 @@ describe('SecretKeyModal', () => {
 
   beforeEach(() => {
     vi.clearAllMocks()
-    // Suppress expected React act() warnings from Headless UI Dialog transitions and async API state updates
+    // Suppress expected React act() warnings from modal transitions and async API state updates.
     vi.spyOn(console, 'error').mockImplementation(() => {})
     vi.useFakeTimers({ shouldAdvanceTime: true })
     mockCurrentWorkspace.mockReturnValue({ id: 'workspace-1', name: 'Test Workspace' })
@@ -290,6 +290,36 @@ describe('SecretKeyModal', () => {
       })
     })
 
+    it('should place the generated key backdrop above the API keys modal', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime })
+      mockAppApiKeysData.mockReturnValue({
+        data: [
+          { id: 'key-1', token: 'sk-abc123def456ghi789', created_at: 1700000000, last_used_at: null },
+        ],
+      })
+      await renderModal(<SecretKeyModal {...defaultProps} appId="app-123" />)
+
+      const createButton = screen.getByText('appApi.apiKeyModal.createNewSecretKey')
+      await act(async () => {
+        await user.click(createButton)
+      })
+
+      await waitFor(() => {
+        expect(screen.getByText('appApi.apiKeyModal.generateTips')).toBeInTheDocument()
+      })
+
+      const parentDialog = screen.getByText('appApi.apiKeyModal.apiSecretKeyTips').closest('[role="dialog"]')
+      const generatedKeyDialog = screen.getByText('appApi.apiKeyModal.generateTips').closest('[role="dialog"]')
+      const backdrops = document.body.querySelectorAll('.bg-background-overlay')
+      const generatedKeyBackdrop = backdrops[1]
+
+      expect(parentDialog).toBeInTheDocument()
+      expect(generatedKeyDialog).toBeInTheDocument()
+      expect(backdrops).toHaveLength(2)
+      expect(parentDialog!.compareDocumentPosition(generatedKeyBackdrop!) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+      expect(generatedKeyBackdrop!.compareDocumentPosition(generatedKeyDialog!) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+    })
+
     it('should invalidate app API keys after creating', async () => {
       const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime })
       await renderModal(<SecretKeyModal {...defaultProps} appId="app-123" />)
diff --git a/web/app/components/develop/secret-key/secret-key-generate.tsx b/web/app/components/develop/secret-key/secret-key-generate.tsx
index 1fb6e65714..cc9b4c778d 100644
--- a/web/app/components/develop/secret-key/secret-key-generate.tsx
+++ b/web/app/components/develop/secret-key/secret-key-generate.tsx
@@ -2,8 +2,9 @@
 import type { CreateApiKeyResponse } from '@/models/app'
 import { XMarkIcon } from '@heroicons/react/20/solid'
 import { Button } from '@langgenius/dify-ui/button'
+import { cn } from '@langgenius/dify-ui/cn'
+import { Dialog, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
 import { useTranslation } from 'react-i18next'
-import Modal from '@/app/components/base/modal'
 import InputCopy from './input-copy'
 import s from './style.module.css'
 
@@ -22,21 +23,33 @@ const SecretKeyGenerateModal = ({
 }: ISecretKeyGenerateModalProps) => {
   const { t } = useTranslation()
   return (
-    <Modal isShow={isShow} onClose={onClose} title={`${t('apiKeyModal.apiSecretKey', { ns: 'appApi' })}`} className={`px-8 ${className}`}>
-      <div className="-mt-6 -mr-2 mb-4 flex justify-end">
-        <XMarkIcon className="h-6 w-6 cursor-pointer text-text-tertiary" onClick={onClose} />
-      </div>
-      <p className="mt-1 text-[13px] leading-5 font-normal text-text-tertiary">{t('apiKeyModal.generateTips', { ns: 'appApi' })}</p>
-      <div className="my-4">
-        <InputCopy className="w-full" value={newKey?.token} />
-      </div>
-      <div className="my-4 flex justify-end">
-        <Button className={`shrink-0 ${s.w64}`} onClick={onClose}>
-          <span className="text-xs font-medium text-text-secondary">{t('actionMsg.ok', { ns: 'appApi' })}</span>
-        </Button>
-      </div>
+    <Dialog
+      open={isShow}
+      onOpenChange={(open) => {
+        if (!open)
+          onClose()
+      }}
+    >
+      <DialogContent className={cn('w-full max-w-[480px] overflow-hidden! border-none px-8 text-left align-middle', className)}>
+        <DialogTitle className="title-2xl-semi-bold text-text-primary">
+          {`${t('apiKeyModal.apiSecretKey', { ns: 'appApi' })}`}
+        </DialogTitle>
 
-    </Modal>
+        <div className="-mt-6 -mr-2 mb-4 flex justify-end">
+          <XMarkIcon className="h-6 w-6 cursor-pointer text-text-tertiary" onClick={onClose} />
+        </div>
+        <p className="mt-1 text-[13px] leading-5 font-normal text-text-tertiary">{t('apiKeyModal.generateTips', { ns: 'appApi' })}</p>
+        <div className="my-4">
+          <InputCopy className="w-full" value={newKey?.token} />
+        </div>
+        <div className="my-4 flex justify-end">
+          <Button className={`shrink-0 ${s.w64}`} onClick={onClose}>
+            <span className="text-xs font-medium text-text-secondary">{t('actionMsg.ok', { ns: 'appApi' })}</span>
+          </Button>
+        </div>
+
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/web/app/components/develop/secret-key/secret-key-modal.tsx b/web/app/components/develop/secret-key/secret-key-modal.tsx
index e8d9204318..71cb87019c 100644
--- a/web/app/components/develop/secret-key/secret-key-modal.tsx
+++ b/web/app/components/develop/secret-key/secret-key-modal.tsx
@@ -11,6 +11,8 @@ import {
   AlertDialogTitle,
 } from '@langgenius/dify-ui/alert-dialog'
 import { Button } from '@langgenius/dify-ui/button'
+import { cn } from '@langgenius/dify-ui/cn'
+import { Dialog, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
 import { RiDeleteBinLine } from '@remixicon/react'
 import {
   useState,
@@ -19,7 +21,6 @@ import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import CopyFeedback from '@/app/components/base/copy-feedback'
 import Loading from '@/app/components/base/loading'
-import Modal from '@/app/components/base/modal'
 import { useAppContext } from '@/context/app-context'
 import useTimestamp from '@/hooks/use-timestamp'
 import {
@@ -103,78 +104,99 @@ const SecretKeyModal = ({
     setShowConfirmDelete(false)
   }
 
+  const handleClose = () => {
+    setVisible(false)
+    onClose()
+  }
+
   return (
-    <Modal isShow={isShow} onClose={onClose} title={`${t('apiKeyModal.apiSecretKey', { ns: 'appApi' })}`} className={`${s.customModal} flex flex-col px-8`}>
-      <div className="-mt-6 -mr-2 mb-4 flex justify-end">
-        <XMarkIcon className="h-6 w-6 cursor-pointer text-text-tertiary" onClick={onClose} />
-      </div>
-      <p className="mt-1 shrink-0 text-[13px] leading-5 font-normal text-text-tertiary">{t('apiKeyModal.apiSecretKeyTips', { ns: 'appApi' })}</p>
-      {isApiKeysLoading && <div className="mt-4"><Loading /></div>}
-      {
-        !!apiKeysList?.data?.length && (
-          <div className="mt-4 flex grow flex-col overflow-hidden">
-            <div className="flex h-9 shrink-0 items-center border-b border-divider-regular text-xs font-semibold text-text-tertiary">
-              <div className="w-64 shrink-0 px-3">{t('apiKeyModal.secretKey', { ns: 'appApi' })}</div>
-              <div className="w-[200px] shrink-0 px-3">{t('apiKeyModal.created', { ns: 'appApi' })}</div>
-              <div className="w-[200px] shrink-0 px-3">{t('apiKeyModal.lastUsed', { ns: 'appApi' })}</div>
-              <div className="grow px-3"></div>
-            </div>
-            <div className="grow overflow-auto">
-              {apiKeysList.data.map(api => (
-                <div className="flex h-9 items-center border-b border-divider-regular text-sm font-normal text-text-secondary" key={api.id}>
-                  <div className="w-64 shrink-0 truncate px-3 font-mono">{generateToken(api.token)}</div>
-                  <div className="w-[200px] shrink-0 truncate px-3">{formatTime(Number(api.created_at), t('dateTimeFormat', { ns: 'appLog' }) as string)}</div>
-                  <div className="w-[200px] shrink-0 truncate px-3">{api.last_used_at ? formatTime(Number(api.last_used_at), t('dateTimeFormat', { ns: 'appLog' }) as string) : t('never', { ns: 'appApi' })}</div>
-                  <div className="flex grow space-x-2 px-3">
-                    <CopyFeedback content={api.token} />
-                    {isCurrentWorkspaceManager && (
-                      <ActionButton
-                        onClick={() => {
-                          setDelKeyId(api.id)
-                          setShowConfirmDelete(true)
-                        }}
-                      >
-                        <RiDeleteBinLine className="h-4 w-4" />
-                      </ActionButton>
-                    )}
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        )
-      }
-      <div className="flex">
-        <Button className={`mt-4 flex shrink-0 ${s.autoWidth}`} onClick={onCreate} disabled={!currentWorkspace || !isCurrentWorkspaceEditor}>
-          <PlusIcon className="mr-1 flex h-4 w-4 shrink-0" />
-          <div className="text-xs font-medium text-text-secondary">{t('apiKeyModal.createNewSecretKey', { ns: 'appApi' })}</div>
-        </Button>
-      </div>
-      <SecretKeyGenerateModal className="shrink-0" isShow={isVisible} onClose={() => setVisible(false)} newKey={newKey} />
-      <AlertDialog
-        open={showConfirmDelete}
-        onOpenChange={handleDeleteConfirmOpenChange}
+    <>
+      <Dialog
+        open={isShow}
+        onOpenChange={(open) => {
+          if (!open)
+            handleClose()
+        }}
       >
-        <AlertDialogContent>
-          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
-            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
-              {t('actionMsg.deleteConfirmTitle', { ns: 'appApi' })}
-            </AlertDialogTitle>
-            <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
-              {t('actionMsg.deleteConfirmTips', { ns: 'appApi' })}
-            </AlertDialogDescription>
+        <DialogContent className={cn('max-h-[calc(100vh-80px)]! w-full max-w-[800px]! overflow-hidden! border-none text-left align-middle', `${s.customModal} flex flex-col px-8`)}>
+          <DialogTitle className="title-2xl-semi-bold text-text-primary">
+            {`${t('apiKeyModal.apiSecretKey', { ns: 'appApi' })}`}
+          </DialogTitle>
+
+          <div className="-mt-6 -mr-2 mb-4 flex justify-end">
+            <XMarkIcon className="h-6 w-6 cursor-pointer text-text-tertiary" onClick={handleClose} />
           </div>
-          <AlertDialogActions>
-            <AlertDialogCancelButton>
-              {t('operation.cancel', { ns: 'common' })}
-            </AlertDialogCancelButton>
-            <AlertDialogConfirmButton onClick={onDel}>
-              {t('operation.confirm', { ns: 'common' })}
-            </AlertDialogConfirmButton>
-          </AlertDialogActions>
-        </AlertDialogContent>
-      </AlertDialog>
-    </Modal>
+          <p className="mt-1 shrink-0 text-[13px] leading-5 font-normal text-text-tertiary">{t('apiKeyModal.apiSecretKeyTips', { ns: 'appApi' })}</p>
+          {isApiKeysLoading && <div className="mt-4"><Loading /></div>}
+          {
+            !!apiKeysList?.data?.length && (
+              <div className="mt-4 flex grow flex-col overflow-hidden">
+                <div className="flex h-9 shrink-0 items-center border-b border-divider-regular text-xs font-semibold text-text-tertiary">
+                  <div className="w-64 shrink-0 px-3">{t('apiKeyModal.secretKey', { ns: 'appApi' })}</div>
+                  <div className="w-[200px] shrink-0 px-3">{t('apiKeyModal.created', { ns: 'appApi' })}</div>
+                  <div className="w-[200px] shrink-0 px-3">{t('apiKeyModal.lastUsed', { ns: 'appApi' })}</div>
+                  <div className="grow px-3"></div>
+                </div>
+                <div className="grow overflow-auto">
+                  {apiKeysList.data.map(api => (
+                    <div className="flex h-9 items-center border-b border-divider-regular text-sm font-normal text-text-secondary" key={api.id}>
+                      <div className="w-64 shrink-0 truncate px-3 font-mono">{generateToken(api.token)}</div>
+                      <div className="w-[200px] shrink-0 truncate px-3">{formatTime(Number(api.created_at), t('dateTimeFormat', { ns: 'appLog' }) as string)}</div>
+                      <div className="w-[200px] shrink-0 truncate px-3">{api.last_used_at ? formatTime(Number(api.last_used_at), t('dateTimeFormat', { ns: 'appLog' }) as string) : t('never', { ns: 'appApi' })}</div>
+                      <div className="flex grow space-x-2 px-3">
+                        <CopyFeedback content={api.token} />
+                        {isCurrentWorkspaceManager && (
+                          <ActionButton
+                            onClick={() => {
+                              setDelKeyId(api.id)
+                              setShowConfirmDelete(true)
+                            }}
+                          >
+                            <RiDeleteBinLine className="h-4 w-4" />
+                          </ActionButton>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )
+          }
+          <div className="flex">
+            <Button className={`mt-4 flex shrink-0 ${s.autoWidth}`} onClick={onCreate} disabled={!currentWorkspace || !isCurrentWorkspaceEditor}>
+              <PlusIcon className="mr-1 flex h-4 w-4 shrink-0" />
+              <div className="text-xs font-medium text-text-secondary">{t('apiKeyModal.createNewSecretKey', { ns: 'appApi' })}</div>
+            </Button>
+          </div>
+          <AlertDialog
+            open={showConfirmDelete}
+            onOpenChange={handleDeleteConfirmOpenChange}
+          >
+            <AlertDialogContent>
+              <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+                <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+                  {t('actionMsg.deleteConfirmTitle', { ns: 'appApi' })}
+                </AlertDialogTitle>
+                <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+                  {t('actionMsg.deleteConfirmTips', { ns: 'appApi' })}
+                </AlertDialogDescription>
+              </div>
+              <AlertDialogActions>
+                <AlertDialogCancelButton>
+                  {t('operation.cancel', { ns: 'common' })}
+                </AlertDialogCancelButton>
+                <AlertDialogConfirmButton onClick={onDel}>
+                  {t('operation.confirm', { ns: 'common' })}
+                </AlertDialogConfirmButton>
+              </AlertDialogActions>
+            </AlertDialogContent>
+          </AlertDialog>
+        </DialogContent>
+      </Dialog>
+      {isShow && (
+        <SecretKeyGenerateModal className="shrink-0" isShow={isVisible} onClose={() => setVisible(false)} newKey={newKey} />
+      )}
+    </>
   )
 }
 
diff --git a/web/app/components/explore/try-app/__tests__/index.spec.tsx b/web/app/components/explore/try-app/__tests__/index.spec.tsx
index b93598b64a..84d6332e67 100644
--- a/web/app/components/explore/try-app/__tests__/index.spec.tsx
+++ b/web/app/components/explore/try-app/__tests__/index.spec.tsx
@@ -120,6 +120,42 @@ describe('TryApp (main index.tsx)', () => {
 
       expect(document.body.querySelector('[role="status"]')).toBeInTheDocument()
     })
+
+    it('renders unavailable state when the app detail request fails', () => {
+      mockUseGetTryAppInfo.mockReturnValue({
+        data: null,
+        isError: true,
+        error: new Error('App is unavailable'),
+      })
+
+      render(
+        <TryApp
+          appId="test-app-id"
+          onClose={vi.fn()}
+          onCreate={vi.fn()}
+        />,
+      )
+
+      expect(screen.getByText('App is unavailable')).toBeInTheDocument()
+    })
+
+    it('renders unknown unavailable state when app detail is empty', () => {
+      mockUseGetTryAppInfo.mockReturnValue({
+        data: null,
+        isLoading: false,
+        isError: false,
+      })
+
+      render(
+        <TryApp
+          appId="test-app-id"
+          onClose={vi.fn()}
+          onCreate={vi.fn()}
+        />,
+      )
+
+      expect(screen.getByText('share.common.appUnknownError')).toBeInTheDocument()
+    })
   })
 
   describe('content rendering', () => {
@@ -257,6 +293,26 @@ describe('TryApp (main index.tsx)', () => {
 
       expect(mockOnClose).toHaveBeenCalled()
     })
+
+    it('calls onClose when the dialog requests close', async () => {
+      const mockOnClose = vi.fn()
+
+      render(
+        <TryApp
+          appId="test-app-id"
+          onClose={mockOnClose}
+          onCreate={vi.fn()}
+        />,
+      )
+
+      await waitFor(() => {
+        expect(screen.getByRole('dialog')).toBeInTheDocument()
+      })
+
+      fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+    })
   })
 
   describe('create functionality', () => {
diff --git a/web/app/components/explore/try-app/index.tsx b/web/app/components/explore/try-app/index.tsx
index eb5ea952da..95e312c4c8 100644
--- a/web/app/components/explore/try-app/index.tsx
+++ b/web/app/components/explore/try-app/index.tsx
@@ -3,12 +3,12 @@
 import type { FC } from 'react'
 import type { App as AppType } from '@/models/explore'
 import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import { useSuspenseQuery } from '@tanstack/react-query'
 import * as React from 'react'
 import { useState } from 'react'
 import AppUnavailable from '@/app/components/base/app-unavailable'
 import Loading from '@/app/components/base/loading'
-import Modal from '@/app/components/base/modal/index'
 import { IS_CLOUD_EDITION } from '@/config'
 import { systemFeaturesQueryOptions } from '@/service/system-features'
 import { useGetTryAppInfo } from '@/service/use-try-app'
@@ -40,54 +40,59 @@ const TryApp: FC<Props> = ({
   const { data: appDetail, isLoading, isError, error } = useGetTryAppInfo(appId)
 
   return (
-    <Modal
-      isShow
-      onClose={onClose}
-      className="h-[calc(100vh-32px)] max-w-[calc(100vw-32px)] min-w-[1280px] overflow-x-auto p-2"
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open)
+          onClose()
+      }}
     >
-      {isLoading ? (
-        <div className="flex h-full items-center justify-center">
-          <Loading type="area" />
-        </div>
-      ) : isError ? (
-        <div className="flex h-full items-center justify-center">
-          <AppUnavailable className="h-auto w-auto" isUnknownReason={!error} unknownReason={error instanceof Error ? error.message : undefined} />
-        </div>
-      ) : !appDetail ? (
-        <div className="flex h-full items-center justify-center">
-          <AppUnavailable className="h-auto w-auto" isUnknownReason />
-        </div>
-      ) : (
-        <div className="flex h-full flex-col">
-          <div className="flex shrink-0 justify-between pl-4">
-            <Tab
-              value={activeType}
-              onChange={setType}
-              disableTry={app ? !isTrialApp : false}
-            />
-            <Button
-              size="large"
-              variant="tertiary"
-              className="flex size-7 items-center justify-center rounded-[10px] p-0 text-components-button-tertiary-text"
-              onClick={onClose}
-            >
-              <span className="i-ri-close-line size-5" />
-            </Button>
+      <DialogContent className="h-[calc(100vh-32px)] max-h-none w-full max-w-[calc(100vw-32px)] min-w-[1280px] overflow-hidden overflow-x-auto border-none p-2 text-left align-middle">
+
+        {isLoading ? (
+          <div className="flex h-full items-center justify-center">
+            <Loading type="area" />
           </div>
-          {/* Main content */}
-          <div className="mt-2 flex h-0 grow justify-between space-x-2">
-            {activeType === TypeEnum.TRY ? <App appId={appId} appDetail={appDetail} /> : <Preview appId={appId} appDetail={appDetail} />}
-            <AppInfo
-              className="w-[360px] shrink-0"
-              appDetail={appDetail}
-              appId={appId}
-              categories={categories}
-              onCreate={onCreate}
-            />
+        ) : isError ? (
+          <div className="flex h-full items-center justify-center">
+            <AppUnavailable className="h-auto w-auto" isUnknownReason={!error} unknownReason={error instanceof Error ? error.message : undefined} />
           </div>
-        </div>
-      )}
-    </Modal>
+        ) : !appDetail ? (
+          <div className="flex h-full items-center justify-center">
+            <AppUnavailable className="h-auto w-auto" isUnknownReason />
+          </div>
+        ) : (
+          <div className="flex h-full flex-col">
+            <div className="flex shrink-0 justify-between pl-4">
+              <Tab
+                value={activeType}
+                onChange={setType}
+                disableTry={app ? !isTrialApp : false}
+              />
+              <Button
+                size="large"
+                variant="tertiary"
+                className="flex size-7 items-center justify-center rounded-[10px] p-0 text-components-button-tertiary-text"
+                onClick={onClose}
+              >
+                <span className="i-ri-close-line size-5" />
+              </Button>
+            </div>
+            {/* Main content */}
+            <div className="mt-2 flex h-0 grow justify-between space-x-2">
+              {activeType === TypeEnum.TRY ? <App appId={appId} appDetail={appDetail} /> : <Preview appId={appId} appDetail={appDetail} />}
+              <AppInfo
+                className="w-[360px] shrink-0"
+                appDetail={appDetail}
+                appId={appId}
+                categories={categories}
+                onCreate={onCreate}
+              />
+            </div>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
   )
 }
 export default React.memo(TryApp)
diff --git a/web/app/components/header/account-about/__tests__/index.spec.tsx b/web/app/components/header/account-about/__tests__/index.spec.tsx
index 694a632039..8ec7d8800d 100644
--- a/web/app/components/header/account-about/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-about/__tests__/index.spec.tsx
@@ -90,7 +90,7 @@ describe('AccountAbout', () => {
   describe('User Interactions', () => {
     it('should call onCancel when close button is clicked', () => {
       renderWithSystemFeatures(<AccountAbout langGeniusVersionInfo={mockVersionInfo} onCancel={mockOnCancel} />)
-      // Modal uses Headless UI Dialog which renders into a portal, so we need to use document
+      // Modal content renders into a portal, so we need to use document.
       const closeButton = document.querySelector('div.absolute.cursor-pointer')
 
       if (!closeButton)
diff --git a/web/app/components/header/account-about/index.tsx b/web/app/components/header/account-about/index.tsx
index e2535144f9..ba3eba5993 100644
--- a/web/app/components/header/account-about/index.tsx
+++ b/web/app/components/header/account-about/index.tsx
@@ -1,15 +1,15 @@
 'use client'
 import type { LangGeniusVersionResponse } from '@/models/common'
 import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import { RiCloseLine } from '@remixicon/react'
 import { useSuspenseQuery } from '@tanstack/react-query'
 import dayjs from 'dayjs'
 import { useTranslation } from 'react-i18next'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
-import Modal from '@/app/components/base/modal'
 import { IS_CE_EDITION } from '@/config'
-import Link from '@/next/link'
 
+import Link from '@/next/link'
 import { systemFeaturesQueryOptions } from '@/service/system-features'
 
 type IAccountSettingProps = {
@@ -26,87 +26,92 @@ export default function AccountAbout({
   const { data: systemFeatures } = useSuspenseQuery(systemFeaturesQueryOptions())
 
   return (
-    <Modal
-      isShow
-      onClose={onCancel}
-      className="w-[480px]! max-w-[480px]! px-6! py-4!"
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open)
+          onCancel()
+      }}
     >
-      <div className="relative">
-        <div className="absolute top-0 right-0 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="flex flex-col items-center gap-4 py-8">
-          {systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
-            ? (
-                <img
-                  src={systemFeatures.branding.workspace_logo}
-                  className="block h-7 w-auto object-contain"
-                  alt="logo"
-                />
-              )
-            : <DifyLogo size="large" className="mx-auto" />}
+      <DialogContent className="w-[calc(100vw-2rem)]! max-w-[480px]! overflow-hidden! border-none px-6! py-4! text-left align-middle">
 
-          <div className="text-center text-xs font-normal text-text-tertiary">
-            Version
-            {langGeniusVersionInfo?.current_version}
+        <div className="relative">
+          <div className="absolute top-0 right-0 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="flex flex-col items-center gap-2 text-center text-xs font-normal text-text-secondary">
-            <div>
-              ©
-              {dayjs().year()}
-              {' '}
-              LangGenius, Inc., Contributors.
+          <div className="flex flex-col items-center gap-4 py-8">
+            {systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
+              ? (
+                  <img
+                    src={systemFeatures.branding.workspace_logo}
+                    className="block h-7 w-auto object-contain"
+                    alt="logo"
+                  />
+                )
+              : <DifyLogo size="large" className="mx-auto" />}
+
+            <div className="text-center text-xs font-normal text-text-tertiary">
+              Version
+              {langGeniusVersionInfo?.current_version}
             </div>
-            <div className="text-text-accent">
+            <div className="flex flex-col items-center gap-2 text-center text-xs font-normal text-text-secondary">
+              <div>
+                ©
+                {dayjs().year()}
+                {' '}
+                LangGenius, Inc., Contributors.
+              </div>
+              <div className="text-text-accent">
+                {
+                  IS_CE_EDITION
+                    ? <Link href="https://github.com/langgenius/dify/blob/main/LICENSE" target="_blank" rel="noopener noreferrer">Open Source License</Link>
+                    : (
+                        <>
+                          <Link href="https://dify.ai/privacy" target="_blank" rel="noopener noreferrer">Privacy Policy</Link>
+                          ,&nbsp;
+                          <Link href="https://dify.ai/terms" target="_blank" rel="noopener noreferrer">Terms of Service</Link>
+                        </>
+                      )
+                }
+              </div>
+            </div>
+          </div>
+          <div className="-mx-6 mb-4 h-[0.5px] bg-divider-regular" />
+          <div className="flex items-center justify-between gap-3">
+            <div className="min-w-0 text-xs font-medium text-text-tertiary">
               {
-                IS_CE_EDITION
-                  ? <Link href="https://github.com/langgenius/dify/blob/main/LICENSE" target="_blank" rel="noopener noreferrer">Open Source License</Link>
-                  : (
-                      <>
-                        <Link href="https://dify.ai/privacy" target="_blank" rel="noopener noreferrer">Privacy Policy</Link>
-                        ,&nbsp;
-                        <Link href="https://dify.ai/terms" target="_blank" rel="noopener noreferrer">Terms of Service</Link>
-                      </>
-                    )
+                isLatest
+                  ? t('about.latestAvailable', { ns: 'common', version: langGeniusVersionInfo.latest_version })
+                  : t('about.nowAvailable', { ns: 'common', version: langGeniusVersionInfo.latest_version })
+              }
+            </div>
+            <div className="flex shrink-0 items-center">
+              <Button className="mr-2" size="small">
+                <Link
+                  href="https://github.com/langgenius/dify/releases"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {t('about.changeLog', { ns: 'common' })}
+                </Link>
+              </Button>
+              {
+                !isLatest && !IS_CE_EDITION && (
+                  <Button variant="primary" size="small">
+                    <Link
+                      href={langGeniusVersionInfo.release_notes}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {t('about.updateNow', { ns: 'common' })}
+                    </Link>
+                  </Button>
+                )
               }
             </div>
           </div>
         </div>
-        <div className="-mx-8 mb-4 h-[0.5px] bg-divider-regular" />
-        <div className="flex items-center justify-between">
-          <div className="text-xs font-medium text-text-tertiary">
-            {
-              isLatest
-                ? t('about.latestAvailable', { ns: 'common', version: langGeniusVersionInfo.latest_version })
-                : t('about.nowAvailable', { ns: 'common', version: langGeniusVersionInfo.latest_version })
-            }
-          </div>
-          <div className="flex items-center">
-            <Button className="mr-2" size="small">
-              <Link
-                href="https://github.com/langgenius/dify/releases"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                {t('about.changeLog', { ns: 'common' })}
-              </Link>
-            </Button>
-            {
-              !isLatest && !IS_CE_EDITION && (
-                <Button variant="primary" size="small">
-                  <Link
-                    href={langGeniusVersionInfo.release_notes}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    {t('about.updateNow', { ns: 'common' })}
-                  </Link>
-                </Button>
-              )
-            }
-          </div>
-        </div>
-      </div>
-    </Modal>
+      </DialogContent>
+    </Dialog>
   )
 }
diff --git a/web/app/components/header/account-setting/api-based-extension-page/modal.tsx b/web/app/components/header/account-setting/api-based-extension-page/modal.tsx
index b7d2e09734..f75b42bc45 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/modal.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/modal.tsx
@@ -1,12 +1,11 @@
 import type { FC } from 'react'
 import type { ApiBasedExtension } from '@/models/common'
 import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import { toast } from '@langgenius/dify-ui/toast'
-import { noop } from 'es-toolkit/function'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
-import Modal from '@/app/components/base/modal'
 import { useDocLink } from '@/context/i18n'
 import { addApiBasedExtension, updateApiBasedExtension } from '@/service/common'
 
@@ -61,45 +60,48 @@ const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({ data, onCance
     }
   }
   return (
-    <Modal isShow onClose={noop} wrapperClassName="z-1002" className="w-[640px]! max-w-none! p-8! pb-6!">
-      <div className="mb-2 text-xl font-semibold text-text-primary">
-        {data.name
-          ? t('apiBasedExtension.modal.editTitle', { ns: 'common' })
-          : t('apiBasedExtension.modal.title', { ns: 'common' })}
-      </div>
-      <div className="py-2">
-        <div className="text-sm leading-9 font-medium text-text-primary">
-          {t('apiBasedExtension.modal.name.title', { ns: 'common' })}
+    <Dialog open>
+      <DialogContent className="w-[640px]! max-w-none! overflow-hidden! border-none p-8! pb-6! text-left align-middle">
+
+        <div className="mb-2 text-xl font-semibold text-text-primary">
+          {data.name
+            ? t('apiBasedExtension.modal.editTitle', { ns: 'common' })
+            : t('apiBasedExtension.modal.title', { ns: 'common' })}
         </div>
-        <input value={localeData.name || ''} onChange={e => handleDataChange('name', e.target.value)} className="block h-9 w-full appearance-none rounded-lg bg-components-input-bg-normal px-3 text-sm text-text-primary outline-hidden" placeholder={t('apiBasedExtension.modal.name.placeholder', { ns: 'common' }) || ''} />
-      </div>
-      <div className="py-2">
-        <div className="flex h-9 items-center justify-between text-sm font-medium text-text-primary">
-          {t('apiBasedExtension.modal.apiEndpoint.title', { ns: 'common' })}
-          <a href={docLink('/use-dify/workspace/api-extension/api-extension')} target="_blank" rel="noopener noreferrer" className="group flex items-center text-xs font-normal text-text-accent">
-            <BookOpen01 className="mr-1 h-3 w-3" />
-            {t('apiBasedExtension.link', { ns: 'common' })}
-          </a>
+        <div className="py-2">
+          <div className="text-sm leading-9 font-medium text-text-primary">
+            {t('apiBasedExtension.modal.name.title', { ns: 'common' })}
+          </div>
+          <input value={localeData.name || ''} onChange={e => handleDataChange('name', e.target.value)} className="block h-9 w-full appearance-none rounded-lg bg-components-input-bg-normal px-3 text-sm text-text-primary outline-hidden" placeholder={t('apiBasedExtension.modal.name.placeholder', { ns: 'common' }) || ''} />
         </div>
-        <input value={localeData.api_endpoint || ''} onChange={e => handleDataChange('api_endpoint', e.target.value)} className="block h-9 w-full appearance-none rounded-lg bg-components-input-bg-normal px-3 text-sm text-text-primary outline-hidden" placeholder={t('apiBasedExtension.modal.apiEndpoint.placeholder', { ns: 'common' }) || ''} />
-      </div>
-      <div className="py-2">
-        <div className="text-sm leading-9 font-medium text-text-primary">
-          {t('apiBasedExtension.modal.apiKey.title', { ns: 'common' })}
+        <div className="py-2">
+          <div className="flex h-9 items-center justify-between text-sm font-medium text-text-primary">
+            {t('apiBasedExtension.modal.apiEndpoint.title', { ns: 'common' })}
+            <a href={docLink('/use-dify/workspace/api-extension/api-extension')} target="_blank" rel="noopener noreferrer" className="group flex items-center text-xs font-normal text-text-accent">
+              <BookOpen01 className="mr-1 h-3 w-3" />
+              {t('apiBasedExtension.link', { ns: 'common' })}
+            </a>
+          </div>
+          <input value={localeData.api_endpoint || ''} onChange={e => handleDataChange('api_endpoint', e.target.value)} className="block h-9 w-full appearance-none rounded-lg bg-components-input-bg-normal px-3 text-sm text-text-primary outline-hidden" placeholder={t('apiBasedExtension.modal.apiEndpoint.placeholder', { ns: 'common' }) || ''} />
         </div>
-        <div className="flex items-center">
-          <input value={localeData.api_key || ''} onChange={e => handleDataChange('api_key', e.target.value)} className="mr-2 block h-9 grow appearance-none rounded-lg bg-components-input-bg-normal px-3 text-sm text-text-primary outline-hidden" placeholder={t('apiBasedExtension.modal.apiKey.placeholder', { ns: 'common' }) || ''} />
+        <div className="py-2">
+          <div className="text-sm leading-9 font-medium text-text-primary">
+            {t('apiBasedExtension.modal.apiKey.title', { ns: 'common' })}
+          </div>
+          <div className="flex items-center">
+            <input value={localeData.api_key || ''} onChange={e => handleDataChange('api_key', e.target.value)} className="mr-2 block h-9 grow appearance-none rounded-lg bg-components-input-bg-normal px-3 text-sm text-text-primary outline-hidden" placeholder={t('apiBasedExtension.modal.apiKey.placeholder', { ns: 'common' }) || ''} />
+          </div>
         </div>
-      </div>
-      <div className="mt-6 flex items-center justify-end">
-        <Button onClick={onCancel} className="mr-2">
-          {t('operation.cancel', { ns: 'common' })}
-        </Button>
-        <Button variant="primary" disabled={!localeData.name || !localeData.api_endpoint || !localeData.api_key || loading} onClick={handleSave}>
-          {t('operation.save', { ns: 'common' })}
-        </Button>
-      </div>
-    </Modal>
+        <div className="mt-6 flex items-center justify-end">
+          <Button onClick={onCancel} className="mr-2">
+            {t('operation.cancel', { ns: 'common' })}
+          </Button>
+          <Button variant="primary" disabled={!localeData.name || !localeData.api_endpoint || !localeData.api_key || loading} onClick={handleSave}>
+            {t('operation.save', { ns: 'common' })}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
   )
 }
 export default ApiBasedExtensionModal
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/model-load-balancing-modal.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/model-load-balancing-modal.spec.tsx
index c4794c9775..002908ce8b 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/model-load-balancing-modal.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/model-load-balancing-modal.spec.tsx
@@ -4,14 +4,6 @@ import userEvent from '@testing-library/user-event'
 import { ConfigurationMethodEnum } from '../../declarations'
 import ModelLoadBalancingModal from '../model-load-balancing-modal'
 
-vi.mock('@headlessui/react', () => ({
-  Transition: ({ show, children }: { show: boolean, children: React.ReactNode }) => (show ? <>{children}</> : null),
-  TransitionChild: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-  Dialog: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-  DialogPanel: ({ children, className }: { children: React.ReactNode, className?: string }) => <div className={className}>{children}</div>,
-  DialogTitle: ({ children, className }: { children: React.ReactNode, className?: string }) => <h3 className={className}>{children}</h3>,
-}))
-
 type CredentialData = {
   load_balancing: {
     enabled: boolean
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
index 34b9d1578f..15632fb898 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
@@ -9,11 +9,11 @@ import {
 } from '@langgenius/dify-ui/alert-dialog'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Dialog, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
 import { toast } from '@langgenius/dify-ui/toast'
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
-import Modal from '@/app/components/base/modal'
 import { SwitchCredentialInLoadBalancing } from '@/app/components/header/account-setting/model-provider-page/model-auth'
 import { useGetModelCredential, useUpdateModelLoadBalancingConfig } from '@/service/use-models'
 import { ConfigurationMethodEnum, FormTypeEnum } from '../declarations'
@@ -180,114 +180,118 @@ const ModelLoadBalancingModal = ({ provider, configurateMethod, currentCustomCon
   }, [refetch, onClose])
   return (
     <>
-      <Modal
-        isShow={Boolean(model) && open}
-        onClose={onClose}
-        wrapperClassName="z-1002"
-        className="w-[640px] max-w-none px-8 pt-8"
-        title={(
-          <div className="pb-3 font-semibold">
-            <div className="h-[30px]">
-              {draftConfig?.enabled
-                ? t('modelProvider.auth.configLoadBalancing', { ns: 'common' })
-                : t('modelProvider.auth.configModel', { ns: 'common' })}
-            </div>
-            {Boolean(model) && (
-              <div className="flex h-5 items-center">
-                <ModelIcon className="mr-2 shrink-0" provider={provider} modelName={model!.model} />
-                <ModelName className="grow system-md-regular text-text-secondary" modelItem={model!} showModelType showMode showContextSize />
-              </div>
-            )}
-          </div>
-        )}
+      <Dialog
+        open={Boolean(model) && open}
+        onOpenChange={(open) => {
+          if (!open)
+            onClose?.()
+        }}
       >
-        {!draftConfig
-          ? <Loading type="area" />
-          : (
-              <>
-                <div className="py-2">
-                  <div className={cn('min-h-16 rounded-xl border bg-components-panel-bg transition-colors', draftConfig.enabled ? 'cursor-pointer border-components-panel-border' : 'cursor-default border-util-colors-blue-blue-600')} onClick={draftConfig.enabled ? () => toggleModalBalancing(false) : undefined}>
-                    <div className="flex items-center gap-2 px-[15px] py-3 select-none">
-                      <div className="flex h-8 w-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-components-card-border bg-components-card-bg">
-                        {Boolean(model) && (<ModelIcon className="shrink-0" provider={provider} modelName={model!.model} />)}
-                      </div>
-                      <div className="grow">
-                        <div className="text-sm text-text-secondary">
-                          {providerFormSchemaPredefined
-                            ? t('modelProvider.auth.providerManaged', { ns: 'common' })
-                            : t('modelProvider.auth.specifyModelCredential', { ns: 'common' })}
-                        </div>
-                        <div className="text-xs text-text-tertiary">
-                          {providerFormSchemaPredefined
-                            ? t('modelProvider.auth.providerManagedTip', { ns: 'common' })
-                            : t('modelProvider.auth.specifyModelCredentialTip', { ns: 'common' })}
-                        </div>
-                      </div>
-                      {!providerFormSchemaPredefined && (<SwitchCredentialInLoadBalancing provider={provider} customModelCredential={customModelCredential ?? initialCustomModelCredential} setCustomModelCredential={setCustomModelCredential} model={model} credentials={available_credentials} onUpdate={handleUpdateWhenSwitchCredential} onRemove={handleUpdateWhenSwitchCredential} />)}
-                    </div>
-                  </div>
-                  {modelCredential && (
-                    <ModelLoadBalancingConfigs {...{
-                      draftConfig,
-                      setDraftConfig,
-                      provider,
-                      currentCustomConfigurationModelFixedFields: {
-                        __model_name: model.model,
-                        __model_type: model.model_type,
-                      },
-                      configurationMethod: model.fetch_from,
-                      className: 'mt-2',
-                      modelCredential,
-                      onUpdate: handleUpdate,
-                      onRemove: handleUpdateWhenSwitchCredential,
-                      model: {
-                        model: model.model,
-                        model_type: model.model_type,
-                      },
-                    }}
-                    />
-                  )}
+        <DialogContent className="w-[640px] max-w-none overflow-hidden! border-none px-8 pt-8 text-left align-middle">
+          <DialogTitle className="title-2xl-semi-bold text-text-primary">
+            <div className="pb-3 font-semibold">
+              <div className="h-[30px]">
+                {draftConfig?.enabled
+                  ? t('modelProvider.auth.configLoadBalancing', { ns: 'common' })
+                  : t('modelProvider.auth.configModel', { ns: 'common' })}
+              </div>
+              {Boolean(model) && (
+                <div className="flex h-5 items-center">
+                  <ModelIcon className="mr-2 shrink-0" provider={provider} modelName={model!.model} />
+                  <ModelName className="grow system-md-regular text-text-secondary" modelItem={model!} showModelType showMode showContextSize />
                 </div>
+              )}
+            </div>
+          </DialogTitle>
 
-                <div className="mt-6 flex items-center justify-between gap-2">
-                  <div>
-                    {!providerFormSchemaPredefined && (
-                      <Button onClick={() => openConfirmDelete(undefined, { model: model.model, model_type: model.model_type })} className="text-components-button-destructive-secondary-text">
-                        {t('modelProvider.auth.removeModel', { ns: 'common' })}
-                      </Button>
+          {!draftConfig
+            ? <Loading type="area" />
+            : (
+                <>
+                  <div className="py-2">
+                    <div className={cn('min-h-16 rounded-xl border bg-components-panel-bg transition-colors', draftConfig.enabled ? 'cursor-pointer border-components-panel-border' : 'cursor-default border-util-colors-blue-blue-600')} onClick={draftConfig.enabled ? () => toggleModalBalancing(false) : undefined}>
+                      <div className="flex items-center gap-2 px-[15px] py-3 select-none">
+                        <div className="flex h-8 w-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-components-card-border bg-components-card-bg">
+                          {Boolean(model) && (<ModelIcon className="shrink-0" provider={provider} modelName={model!.model} />)}
+                        </div>
+                        <div className="grow">
+                          <div className="text-sm text-text-secondary">
+                            {providerFormSchemaPredefined
+                              ? t('modelProvider.auth.providerManaged', { ns: 'common' })
+                              : t('modelProvider.auth.specifyModelCredential', { ns: 'common' })}
+                          </div>
+                          <div className="text-xs text-text-tertiary">
+                            {providerFormSchemaPredefined
+                              ? t('modelProvider.auth.providerManagedTip', { ns: 'common' })
+                              : t('modelProvider.auth.specifyModelCredentialTip', { ns: 'common' })}
+                          </div>
+                        </div>
+                        {!providerFormSchemaPredefined && (<SwitchCredentialInLoadBalancing provider={provider} customModelCredential={customModelCredential ?? initialCustomModelCredential} setCustomModelCredential={setCustomModelCredential} model={model} credentials={available_credentials} onUpdate={handleUpdateWhenSwitchCredential} onRemove={handleUpdateWhenSwitchCredential} />)}
+                      </div>
+                    </div>
+                    {modelCredential && (
+                      <ModelLoadBalancingConfigs {...{
+                        draftConfig,
+                        setDraftConfig,
+                        provider,
+                        currentCustomConfigurationModelFixedFields: {
+                          __model_name: model.model,
+                          __model_type: model.model_type,
+                        },
+                        configurationMethod: model.fetch_from,
+                        className: 'mt-2',
+                        modelCredential,
+                        onUpdate: handleUpdate,
+                        onRemove: handleUpdateWhenSwitchCredential,
+                        model: {
+                          model: model.model,
+                          model_type: model.model_type,
+                        },
+                      }}
+                      />
                     )}
                   </div>
-                  <div className="space-x-2">
-                    <Button onClick={onClose}>{t('operation.cancel', { ns: 'common' })}</Button>
-                    <Button
-                      variant="primary"
-                      onClick={handleSave}
-                      disabled={loading
-                        || (draftConfig?.enabled && (draftConfig?.configs.filter(config => config.enabled).length ?? 0) < 2)
-                        || isLoading}
-                    >
-                      {t('operation.save', { ns: 'common' })}
-                    </Button>
+
+                  <div className="mt-6 flex items-center justify-between gap-2">
+                    <div>
+                      {!providerFormSchemaPredefined && (
+                        <Button onClick={() => openConfirmDelete(undefined, { model: model.model, model_type: model.model_type })} className="text-components-button-destructive-secondary-text">
+                          {t('modelProvider.auth.removeModel', { ns: 'common' })}
+                        </Button>
+                      )}
+                    </div>
+                    <div className="space-x-2">
+                      <Button onClick={onClose}>{t('operation.cancel', { ns: 'common' })}</Button>
+                      <Button
+                        variant="primary"
+                        onClick={handleSave}
+                        disabled={loading
+                          || (draftConfig?.enabled && (draftConfig?.configs.filter(config => config.enabled).length ?? 0) < 2)
+                          || isLoading}
+                      >
+                        {t('operation.save', { ns: 'common' })}
+                      </Button>
+                    </div>
                   </div>
-                </div>
-              </>
-            )}
-      </Modal>
-      <AlertDialog open={!!deleteModel} onOpenChange={open => !open && closeConfirmDelete()}>
-        <AlertDialogContent>
-          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
-            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
-              {t('modelProvider.confirmDelete', { ns: 'common' })}
-            </AlertDialogTitle>
-          </div>
-          <AlertDialogActions>
-            <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
-            <AlertDialogConfirmButton disabled={doingAction} onClick={handleDeleteModel}>
-              {t('operation.confirm', { ns: 'common' })}
-            </AlertDialogConfirmButton>
-          </AlertDialogActions>
-        </AlertDialogContent>
-      </AlertDialog>
+                </>
+              )}
+          <AlertDialog open={!!deleteModel} onOpenChange={open => !open && closeConfirmDelete()}>
+            <AlertDialogContent>
+              <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+                <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+                  {t('modelProvider.confirmDelete', { ns: 'common' })}
+                </AlertDialogTitle>
+              </div>
+              <AlertDialogActions>
+                <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+                <AlertDialogConfirmButton disabled={doingAction} onClick={handleDeleteModel}>
+                  {t('operation.confirm', { ns: 'common' })}
+                </AlertDialogConfirmButton>
+              </AlertDialogActions>
+            </AlertDialogContent>
+          </AlertDialog>
+        </DialogContent>
+      </Dialog>
     </>
   )
 }
diff --git a/web/app/components/header/nav/__tests__/index.spec.tsx b/web/app/components/header/nav/__tests__/index.spec.tsx
index 6f9b448981..1e456296f7 100644
--- a/web/app/components/header/nav/__tests__/index.spec.tsx
+++ b/web/app/components/header/nav/__tests__/index.spec.tsx
@@ -9,7 +9,6 @@ import {
 } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
-import { use } from 'react'
 import { vi } from 'vitest'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { useAppContext } from '@/context/app-context'
@@ -17,59 +16,6 @@ import { useRouter, useSelectedLayoutSegment } from '@/next/navigation'
 import { AppModeEnum } from '@/types/app'
 import Nav from '../index'
 
-vi.mock('@headlessui/react', () => {
-  type MenuContextValue = { open: boolean, setOpen: (open: boolean) => void }
-  const MenuContext = React.createContext<MenuContextValue | null>(null)
-
-  const Menu = ({ children }: { children: React.ReactNode | ((props: { open: boolean }) => React.ReactNode) }) => {
-    const [open, setOpen] = React.useState(false)
-    const value = React.useMemo(() => ({ open, setOpen }), [open])
-    return (
-      <MenuContext value={value}>
-        {typeof children === 'function' ? children({ open }) : children}
-      </MenuContext>
-    )
-  }
-
-  const MenuButton = ({ onClick, children, ...props }: { onClick?: () => void, children?: React.ReactNode }) => {
-    const context = use(MenuContext)
-    const handleClick = () => {
-      context?.setOpen(!context.open)
-      onClick?.()
-    }
-    return (
-      <button type="button" aria-expanded={context?.open ?? false} onClick={handleClick} {...props}>
-        {children}
-      </button>
-    )
-  }
-
-  const MenuItems = ({ as: Component = 'div', role, children, ...props }: { as?: React.ElementType, role?: string, children: React.ReactNode }) => {
-    const context = use(MenuContext)
-    if (!context?.open)
-      return null
-    return (
-      <Component role={role ?? 'menu'} {...props}>
-        {children}
-      </Component>
-    )
-  }
-
-  const MenuItem = ({ as: Component = 'div', role, children, ...props }: { as?: React.ElementType, role?: string, children: React.ReactNode }) => (
-    <Component role={role ?? 'menuitem'} {...props}>
-      {children}
-    </Component>
-  )
-
-  return {
-    Menu,
-    MenuButton,
-    MenuItems,
-    MenuItem,
-    Transition: ({ show = true, children }: { show?: boolean, children: React.ReactNode }) => (show ? <>{children}</> : null),
-  }
-})
-
 // Mock next/navigation
 vi.mock('@/next/navigation', () => ({
   useSelectedLayoutSegment: vi.fn(),
diff --git a/web/app/components/header/nav/nav-selector/__tests__/index.spec.tsx b/web/app/components/header/nav/nav-selector/__tests__/index.spec.tsx
index 32de0691dd..aaabe45613 100644
--- a/web/app/components/header/nav/nav-selector/__tests__/index.spec.tsx
+++ b/web/app/components/header/nav/nav-selector/__tests__/index.spec.tsx
@@ -2,7 +2,6 @@ import type { INavSelectorProps, NavItem } from '../index'
 import type { AppContextValue } from '@/context/app-context'
 import { act, fireEvent, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import * as React from 'react'
 import { vi } from 'vitest'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { useAppContext } from '@/context/app-context'
@@ -10,59 +9,6 @@ import { useRouter } from '@/next/navigation'
 import { AppModeEnum } from '@/types/app'
 import NavSelector from '../index'
 
-vi.mock('@headlessui/react', () => {
-  type MenuContextValue = { open: boolean, setOpen: (open: boolean) => void }
-  const MenuContext = React.createContext<MenuContextValue | null>(null)
-
-  const Menu = ({ children }: { children: React.ReactNode | ((props: { open: boolean }) => React.ReactNode) }) => {
-    const [open, setOpen] = React.useState(false)
-    const value = React.useMemo(() => ({ open, setOpen }), [open])
-    return (
-      <MenuContext.Provider value={value}>
-        {typeof children === 'function' ? children({ open }) : children}
-      </MenuContext.Provider>
-    )
-  }
-
-  const MenuButton = ({ onClick, children, ...props }: { onClick?: () => void, children?: React.ReactNode }) => {
-    const context = React.useContext(MenuContext)
-    const handleClick = () => {
-      context?.setOpen(!context.open)
-      onClick?.()
-    }
-    return (
-      <button type="button" aria-expanded={context?.open ?? false} onClick={handleClick} {...props}>
-        {children}
-      </button>
-    )
-  }
-
-  const MenuItems = ({ as: Component = 'div', role, children, ...props }: { as?: React.ElementType, role?: string, children: React.ReactNode }) => {
-    const context = React.useContext(MenuContext)
-    if (!context?.open)
-      return null
-    return (
-      <Component role={role ?? 'menu'} {...props}>
-        {children}
-      </Component>
-    )
-  }
-
-  const MenuItem = ({ as: Component = 'div', role, children, ...props }: { as?: React.ElementType, role?: string, children: React.ReactNode }) => (
-    <Component role={role ?? 'menuitem'} {...props}>
-      {children}
-    </Component>
-  )
-
-  return {
-    Menu,
-    MenuButton,
-    MenuItems,
-    MenuItem,
-    Transition: ({ show = true, children }: { show?: boolean, children: React.ReactNode }) => (show ? <>{children}</> : null),
-  }
-})
-
 // Mock next/navigation
 vi.mock('@/next/navigation', () => ({
   useRouter: vi.fn(),
diff --git a/web/app/components/plugins/install-plugin/install-bundle/index.tsx b/web/app/components/plugins/install-plugin/install-bundle/index.tsx
index 6d2b476c51..1cf2202dae 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/index.tsx
@@ -2,10 +2,10 @@
 import type { FC } from 'react'
 import type { Dependency } from '../../types'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Dialog, DialogCloseButton, DialogContent } from '@langgenius/dify-ui/dialog'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Modal from '@/app/components/base/modal'
 import { InstallStep } from '../../types'
 import useHideLogic from '../hooks/use-hide-logic'
 import ReadyToInstall from './ready-to-install'
@@ -50,26 +50,31 @@ const InstallBundle: FC<Props> = ({
   }, [step, t])
 
   return (
-    <Modal
-      isShow={true}
-      onClose={foldAnimInto}
-      className={cn(modalClassName, 'shadows-shadow-xl flex min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0')}
-      closable
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open)
+          foldAnimInto()
+      }}
     >
-      <div className="flex items-start gap-2 self-stretch pt-6 pr-14 pb-3 pl-6">
-        <div className="self-stretch title-2xl-semi-bold text-text-primary">
-          {getTitle()}
+      <DialogContent className={cn('relative w-full max-w-[480px] overflow-hidden! text-left align-middle', cn(modalClassName, 'shadows-shadow-xl flex min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0'))}>
+        <DialogCloseButton data-testid="modal-close-button" />
+
+        <div className="flex items-start gap-2 self-stretch pt-6 pr-14 pb-3 pl-6">
+          <div className="self-stretch title-2xl-semi-bold text-text-primary">
+            {getTitle()}
+          </div>
         </div>
-      </div>
-      <ReadyToInstall
-        step={step}
-        onStepChange={setStep}
-        onStartToInstall={handleStartToInstall}
-        setIsInstalling={setIsInstalling}
-        allPlugins={fromDSLPayload}
-        onClose={onClose}
-      />
-    </Modal>
+        <ReadyToInstall
+          step={step}
+          onStepChange={setStep}
+          onStartToInstall={handleStartToInstall}
+          setIsInstalling={setIsInstalling}
+          allPlugins={fromDSLPayload}
+          onClose={onClose}
+        />
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/web/app/components/plugins/install-plugin/install-from-github/index.tsx b/web/app/components/plugins/install-plugin/install-from-github/index.tsx
index 4e2c97ab0b..ca2b28d2ef 100644
--- a/web/app/components/plugins/install-plugin/install-from-github/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/index.tsx
@@ -3,11 +3,11 @@
 import type { PluginDeclaration, UpdateFromGitHubPayload } from '../../types'
 import type { InstallState } from '@/app/components/plugins/types'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Dialog, DialogCloseButton, DialogContent } from '@langgenius/dify-ui/dialog'
 import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Modal from '@/app/components/base/modal'
 import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
 import { InstallStepFromGitHub } from '../../types'
 import Installed from '../base/installed'
@@ -160,74 +160,80 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ updatePayload, on
   }
 
   return (
-    <Modal
-      isShow={true}
-      onClose={foldAnimInto}
-      className={cn(modalClassName, `shadows-shadow-xl flex min-w-[560px] flex-col items-start rounded-2xl border-[0.5px]
-        border-components-panel-border bg-components-panel-bg p-0`)}
-      closable
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open)
+          foldAnimInto()
+      }}
     >
-      <div className="flex items-start gap-2 self-stretch pt-6 pr-14 pb-3 pl-6">
-        <div className="flex grow flex-col items-start gap-1">
-          <div className="self-stretch title-2xl-semi-bold text-text-primary">
-            {getTitle()}
-          </div>
-          <div className="self-stretch system-xs-regular text-text-tertiary">
-            {!([InstallStepFromGitHub.uploadFailed, InstallStepFromGitHub.installed, InstallStepFromGitHub.installFailed].includes(state.step)) && t('installFromGitHub.installNote', { ns: 'plugin' })}
+      <DialogContent className={cn('w-[560px] max-w-none! overflow-hidden! text-left align-middle', cn(modalClassName, `shadows-shadow-xl flex min-w-[560px] flex-col items-start rounded-2xl border-[0.5px]
+        border-components-panel-border bg-components-panel-bg p-0`))}
+      >
+        <DialogCloseButton data-testid="modal-close-button" />
+
+        <div className="flex items-start gap-2 self-stretch pt-6 pr-14 pb-3 pl-6">
+          <div className="flex grow flex-col items-start gap-1">
+            <div className="self-stretch title-2xl-semi-bold text-text-primary">
+              {getTitle()}
+            </div>
+            <div className="self-stretch system-xs-regular text-text-tertiary">
+              {!([InstallStepFromGitHub.uploadFailed, InstallStepFromGitHub.installed, InstallStepFromGitHub.installFailed].includes(state.step)) && t('installFromGitHub.installNote', { ns: 'plugin' })}
+            </div>
           </div>
         </div>
-      </div>
-      {([InstallStepFromGitHub.uploadFailed, InstallStepFromGitHub.installed, InstallStepFromGitHub.installFailed].includes(state.step))
-        ? (
-            <Installed
-              payload={manifest}
-              isFailed={[InstallStepFromGitHub.uploadFailed, InstallStepFromGitHub.installFailed].includes(state.step)}
-              errMsg={errorMsg}
-              onCancel={onClose}
-            />
-          )
-        : (
-            <div className={`flex flex-col items-start justify-center self-stretch px-6 py-3 ${state.step === InstallStepFromGitHub.installed ? 'gap-2' : 'gap-4'}`}>
-              {state.step === InstallStepFromGitHub.setUrl && (
-                <SetURL
-                  repoUrl={state.repoUrl}
-                  onChange={value => setState(prevState => ({ ...prevState, repoUrl: value }))}
-                  onNext={handleUrlSubmit}
-                  onCancel={onClose}
-                />
-              )}
-              {state.step === InstallStepFromGitHub.selectPackage && (
-                <SelectPackage
-                  updatePayload={updatePayload!}
-                  repoUrl={state.repoUrl}
-                  selectedVersion={state.selectedVersion}
-                  versions={versions}
-                  onSelectVersion={item => setState(prevState => ({ ...prevState, selectedVersion: String(item.value) }))}
-                  selectedPackage={state.selectedPackage}
-                  packages={packages}
-                  onSelectPackage={item => setState(prevState => ({ ...prevState, selectedPackage: String(item.value) }))}
-                  onUploaded={handleUploaded}
-                  onFailed={handleUploadFail}
-                  onBack={handleBack}
-                />
-              )}
-              {state.step === InstallStepFromGitHub.readyToInstall && (
-                <Loaded
-                  updatePayload={updatePayload!}
-                  uniqueIdentifier={uniqueIdentifier!}
-                  payload={manifest as any}
-                  repoUrl={state.repoUrl}
-                  selectedVersion={state.selectedVersion}
-                  selectedPackage={state.selectedPackage}
-                  onBack={handleBack}
-                  onStartToInstall={handleStartToInstall}
-                  onInstalled={handleInstalled}
-                  onFailed={handleFailed}
-                />
-              )}
-            </div>
-          )}
-    </Modal>
+        {([InstallStepFromGitHub.uploadFailed, InstallStepFromGitHub.installed, InstallStepFromGitHub.installFailed].includes(state.step))
+          ? (
+              <Installed
+                payload={manifest}
+                isFailed={[InstallStepFromGitHub.uploadFailed, InstallStepFromGitHub.installFailed].includes(state.step)}
+                errMsg={errorMsg}
+                onCancel={onClose}
+              />
+            )
+          : (
+              <div className={`flex flex-col items-start justify-center self-stretch px-6 py-3 ${state.step === InstallStepFromGitHub.installed ? 'gap-2' : 'gap-4'}`}>
+                {state.step === InstallStepFromGitHub.setUrl && (
+                  <SetURL
+                    repoUrl={state.repoUrl}
+                    onChange={value => setState(prevState => ({ ...prevState, repoUrl: value }))}
+                    onNext={handleUrlSubmit}
+                    onCancel={onClose}
+                  />
+                )}
+                {state.step === InstallStepFromGitHub.selectPackage && (
+                  <SelectPackage
+                    updatePayload={updatePayload!}
+                    repoUrl={state.repoUrl}
+                    selectedVersion={state.selectedVersion}
+                    versions={versions}
+                    onSelectVersion={item => setState(prevState => ({ ...prevState, selectedVersion: String(item.value) }))}
+                    selectedPackage={state.selectedPackage}
+                    packages={packages}
+                    onSelectPackage={item => setState(prevState => ({ ...prevState, selectedPackage: String(item.value) }))}
+                    onUploaded={handleUploaded}
+                    onFailed={handleUploadFail}
+                    onBack={handleBack}
+                  />
+                )}
+                {state.step === InstallStepFromGitHub.readyToInstall && (
+                  <Loaded
+                    updatePayload={updatePayload!}
+                    uniqueIdentifier={uniqueIdentifier!}
+                    payload={manifest as any}
+                    repoUrl={state.repoUrl}
+                    selectedVersion={state.selectedVersion}
+                    selectedPackage={state.selectedPackage}
+                    onBack={handleBack}
+                    onStartToInstall={handleStartToInstall}
+                    onInstalled={handleInstalled}
+                    onFailed={handleFailed}
+                  />
+                )}
+              </div>
+            )}
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
index 94504acd98..e7696d455a 100644
--- a/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
@@ -2,10 +2,10 @@
 
 import type { Dependency, PluginDeclaration } from '../../types'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Dialog, DialogCloseButton, DialogContent } from '@langgenius/dify-ui/dialog'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Modal from '@/app/components/base/modal'
 import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
 import { InstallStep } from '../../types'
 import useHideLogic from '../hooks/use-hide-logic'
@@ -86,52 +86,57 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
   }, [])
 
   return (
-    <Modal
-      isShow={true}
-      onClose={foldAnimInto}
-      className={cn(modalClassName, 'shadows-shadow-xl flex min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0')}
-      closable
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open)
+          foldAnimInto()
+      }}
     >
-      <div className="flex items-start gap-2 self-stretch pt-6 pr-14 pb-3 pl-6">
-        <div className="self-stretch title-2xl-semi-bold text-text-primary">
-          {getTitle()}
+      <DialogContent className={cn('w-[560px] max-w-none! overflow-hidden! text-left align-middle', cn(modalClassName, 'shadows-shadow-xl flex min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0'))}>
+        <DialogCloseButton data-testid="modal-close-button" />
+
+        <div className="flex items-start gap-2 self-stretch pt-6 pr-14 pb-3 pl-6">
+          <div className="self-stretch title-2xl-semi-bold text-text-primary">
+            {getTitle()}
+          </div>
         </div>
-      </div>
-      {step === InstallStep.uploading && (
-        <Uploading
-          isBundle={isBundle}
-          file={file}
-          onCancel={onClose}
-          onPackageUploaded={handlePackageUploaded}
-          onBundleUploaded={handleBundleUploaded}
-          onFailed={handleUploadFail}
-        />
-      )}
-      {isBundle
-        ? (
-            <ReadyToInstallBundle
-              step={step}
-              onStepChange={setStep}
-              onStartToInstall={handleStartToInstall}
-              setIsInstalling={setIsInstalling}
-              onClose={onClose}
-              allPlugins={dependencies}
-            />
-          )
-        : (
-            <ReadyToInstallPackage
-              step={step}
-              onStepChange={setStep}
-              onStartToInstall={handleStartToInstall}
-              setIsInstalling={setIsInstalling}
-              onClose={onClose}
-              uniqueIdentifier={uniqueIdentifier}
-              manifest={manifest}
-              errorMsg={errorMsg}
-              onError={setErrorMsg}
-            />
-          )}
-    </Modal>
+        {step === InstallStep.uploading && (
+          <Uploading
+            isBundle={isBundle}
+            file={file}
+            onCancel={onClose}
+            onPackageUploaded={handlePackageUploaded}
+            onBundleUploaded={handleBundleUploaded}
+            onFailed={handleUploadFail}
+          />
+        )}
+        {isBundle
+          ? (
+              <ReadyToInstallBundle
+                step={step}
+                onStepChange={setStep}
+                onStartToInstall={handleStartToInstall}
+                setIsInstalling={setIsInstalling}
+                onClose={onClose}
+                allPlugins={dependencies}
+              />
+            )
+          : (
+              <ReadyToInstallPackage
+                step={step}
+                onStepChange={setStep}
+                onStartToInstall={handleStartToInstall}
+                setIsInstalling={setIsInstalling}
+                onClose={onClose}
+                uniqueIdentifier={uniqueIdentifier}
+                manifest={manifest}
+                errorMsg={errorMsg}
+                onError={setErrorMsg}
+              />
+            )}
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/steps/__tests__/uploading.spec.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/steps/__tests__/uploading.spec.tsx
index aace5dcbe9..674d6a451c 100644
--- a/web/app/components/plugins/install-plugin/install-from-local-package/steps/__tests__/uploading.spec.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/steps/__tests__/uploading.spec.tsx
@@ -161,11 +161,9 @@ describe('Uploading', () => {
       })
     })
 
-    // NOTE: The uploadFile API has an unconventional contract where it always rejects.
-    // Success vs failure is determined by whether response.message exists:
-    // - If response.message exists → treated as failure (calls onFailed)
-    // - If response.message is absent → treated as success (calls onPackageUploaded/onBundleUploaded)
-    // This explains why we use mockRejectedValue for "success" scenarios below.
+    // NOTE: Some upload endpoints have historically returned successful plugin upload
+    // payloads through rejected XHR objects, so the component accepts both resolved
+    // responses and rejected responses without an error message.
 
     it('should call onPackageUploaded when upload rejects without error message (success case)', async () => {
       const mockResult = {
@@ -193,6 +191,30 @@ describe('Uploading', () => {
       })
     })
 
+    it('should call onPackageUploaded when upload resolves with package response', async () => {
+      const mockResult = {
+        unique_identifier: 'test-uid',
+        manifest: createMockManifest(),
+      }
+      mockUploadFile.mockResolvedValue(mockResult)
+
+      const onPackageUploaded = vi.fn()
+      render(
+        <Uploading
+          {...defaultProps}
+          isBundle={false}
+          onPackageUploaded={onPackageUploaded}
+        />,
+      )
+
+      await waitFor(() => {
+        expect(onPackageUploaded).toHaveBeenCalledWith({
+          uniqueIdentifier: mockResult.unique_identifier,
+          manifest: mockResult.manifest,
+        })
+      })
+    })
+
     it('should call onBundleUploaded when upload rejects without error message (success case)', async () => {
       const mockDependencies = createMockDependencies()
       mockUploadFile.mockRejectedValue({
@@ -212,6 +234,24 @@ describe('Uploading', () => {
         expect(onBundleUploaded).toHaveBeenCalledWith(mockDependencies)
       })
     })
+
+    it('should call onBundleUploaded when upload resolves with bundle response', async () => {
+      const mockDependencies = createMockDependencies()
+      mockUploadFile.mockResolvedValue(mockDependencies)
+
+      const onBundleUploaded = vi.fn()
+      render(
+        <Uploading
+          {...defaultProps}
+          isBundle
+          onBundleUploaded={onBundleUploaded}
+        />,
+      )
+
+      await waitFor(() => {
+        expect(onBundleUploaded).toHaveBeenCalledWith(mockDependencies)
+      })
+    })
   })
 
   // ================================
@@ -260,35 +300,48 @@ describe('Uploading', () => {
   // Edge Cases Tests
   // ================================
   describe('Edge Cases', () => {
-    it('should handle empty response gracefully', async () => {
+    it('should fail gracefully when upload response is empty', async () => {
       mockUploadFile.mockRejectedValue({
         response: {},
       })
 
       const onPackageUploaded = vi.fn()
-      render(<Uploading {...defaultProps} onPackageUploaded={onPackageUploaded} />)
+      const onFailed = vi.fn()
+      render(<Uploading {...defaultProps} onPackageUploaded={onPackageUploaded} onFailed={onFailed} />)
 
       await waitFor(() => {
-        expect(onPackageUploaded).toHaveBeenCalledWith({
-          uniqueIdentifier: undefined,
-          manifest: undefined,
-        })
+        expect(onPackageUploaded).not.toHaveBeenCalled()
+        expect(onFailed).toHaveBeenCalledWith('plugin.installModal.uploadFailed')
       })
     })
 
-    it('should handle response with only unique_identifier', async () => {
+    it('should fail gracefully when upload response has no manifest', async () => {
       mockUploadFile.mockRejectedValue({
         response: { unique_identifier: 'only-uid' },
       })
 
       const onPackageUploaded = vi.fn()
-      render(<Uploading {...defaultProps} onPackageUploaded={onPackageUploaded} />)
+      const onFailed = vi.fn()
+      render(<Uploading {...defaultProps} onPackageUploaded={onPackageUploaded} onFailed={onFailed} />)
 
       await waitFor(() => {
-        expect(onPackageUploaded).toHaveBeenCalledWith({
-          uniqueIdentifier: 'only-uid',
-          manifest: undefined,
-        })
+        expect(onPackageUploaded).not.toHaveBeenCalled()
+        expect(onFailed).toHaveBeenCalledWith('plugin.installModal.uploadFailed')
+      })
+    })
+
+    it('should fail gracefully when upload response is null', async () => {
+      mockUploadFile.mockRejectedValue({
+        response: null,
+      })
+
+      const onPackageUploaded = vi.fn()
+      const onFailed = vi.fn()
+      render(<Uploading {...defaultProps} onPackageUploaded={onPackageUploaded} onFailed={onFailed} />)
+
+      await waitFor(() => {
+        expect(onPackageUploaded).not.toHaveBeenCalled()
+        expect(onFailed).toHaveBeenCalledWith('plugin.installModal.uploadFailed')
       })
     })
 
diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx
index e7c3b4cd0f..ea90975ec5 100644
--- a/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx
@@ -1,8 +1,7 @@
 'use client'
 import type { FC } from 'react'
-import type { Dependency, PluginDeclaration } from '../../../types'
+import type { Dependency, Plugin, PluginDeclaration } from '../../../types'
 import { Button } from '@langgenius/dify-ui/button'
-import { RiLoader2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { uploadFile } from '@/service/plugins'
@@ -10,6 +9,40 @@ import Card from '../../../card'
 
 const i18nPrefix = 'installModal'
 
+type PackageUploadResponse = {
+  unique_identifier: string
+  manifest: PluginDeclaration
+}
+
+type UploadFailureResponse = {
+  message?: string
+}
+
+function isObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null
+}
+
+function isPackageUploadResponse(value: unknown): value is PackageUploadResponse {
+  if (!isObject(value))
+    return false
+
+  return typeof value.unique_identifier === 'string' && isObject(value.manifest)
+}
+
+function getRejectedResponse(error: unknown): unknown {
+  if (!isObject(error) || !('response' in error))
+    return undefined
+
+  return error.response
+}
+
+function getUploadFailureMessage(response: unknown): string | undefined {
+  if (!isObject(response))
+    return undefined
+
+  return (response as UploadFailureResponse).message
+}
+
 type Props = {
   isBundle: boolean
   file: File
@@ -32,36 +65,50 @@ const Uploading: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   const fileName = file.name
-  const handleUpload = async () => {
+  const handleUploadedResponse = React.useCallback((response: unknown) => {
+    if (isBundle) {
+      if (Array.isArray(response)) {
+        onBundleUploaded(response as Dependency[])
+        return
+      }
+      onFailed(t(`${i18nPrefix}.uploadFailed`, { ns: 'plugin' }))
+      return
+    }
+
+    if (!isPackageUploadResponse(response)) {
+      onFailed(t(`${i18nPrefix}.uploadFailed`, { ns: 'plugin' }))
+      return
+    }
+
+    onPackageUploaded({
+      uniqueIdentifier: response.unique_identifier,
+      manifest: response.manifest,
+    })
+  }, [isBundle, onBundleUploaded, onFailed, onPackageUploaded, t])
+
+  const handleUpload = React.useCallback(async () => {
     try {
-      await uploadFile(file, isBundle)
+      handleUploadedResponse(await uploadFile(file, isBundle))
     }
-    catch (e: any) {
-      if (e.response?.message) {
-        onFailed(e.response?.message)
-      }
-      else { // Why it would into this branch?
-        const res = e.response
-        if (isBundle) {
-          onBundleUploaded(res)
-          return
-        }
-        onPackageUploaded({
-          uniqueIdentifier: res.unique_identifier,
-          manifest: res.manifest,
-        })
+    catch (error: unknown) {
+      const response = getRejectedResponse(error)
+      const message = getUploadFailureMessage(response)
+      if (message) {
+        onFailed(message)
+        return
       }
+      handleUploadedResponse(response)
     }
-  }
+  }, [file, handleUploadedResponse, isBundle, onFailed])
 
   React.useEffect(() => {
     handleUpload()
-  }, [])
+  }, [handleUpload])
   return (
     <>
       <div className="flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3">
         <div className="flex items-center gap-1 self-stretch">
-          <RiLoader2Line className="h-4 w-4 animate-spin-slow text-text-accent" />
+          <span className="i-ri-loader-2-line h-4 w-4 animate-spin-slow text-text-accent" />
           <div className="system-md-regular text-text-secondary">
             {t(`${i18nPrefix}.uploadingPackage`, {
               ns: 'plugin',
@@ -72,7 +119,7 @@ const Uploading: FC<Props> = ({
         <div className="flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl bg-background-section-burn p-2">
           <Card
             className="w-full"
-            payload={{ name: fileName } as any}
+            payload={{ name: fileName } as Plugin}
             isLoading
             loadingFileName={fileName}
             installed={false}
diff --git a/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx b/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
index 128b49fcae..f2bcc14fda 100644
--- a/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
@@ -2,10 +2,10 @@
 
 import type { Dependency, Plugin, PluginManifestInMarket } from '../../types'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Dialog, DialogCloseButton, DialogContent } from '@langgenius/dify-ui/dialog'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Modal from '@/app/components/base/modal'
 import { InstallStep } from '../../types'
 import Installed from '../base/installed'
 import useHideLogic from '../hooks/use-hide-logic'
@@ -70,60 +70,64 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({
   }, [setIsInstalling])
 
   return (
-    <Modal
-      isShow={true}
-      onClose={foldAnimInto}
-      wrapperClassName="z-9999"
-      className={cn(modalClassName, 'shadows-shadow-xl flex min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0')}
-      closable
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open)
+          foldAnimInto()
+      }}
     >
-      <div className="flex items-start gap-2 self-stretch pt-6 pr-14 pb-3 pl-6">
-        <div className="self-stretch title-2xl-semi-bold text-text-primary">
-          {getTitle()}
+      <DialogContent className={cn('w-[560px] max-w-none! overflow-hidden! text-left align-middle', cn(modalClassName, 'shadows-shadow-xl flex min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0'))}>
+        <DialogCloseButton data-testid="modal-close-button" />
+
+        <div className="flex items-start gap-2 self-stretch pt-6 pr-14 pb-3 pl-6">
+          <div className="self-stretch title-2xl-semi-bold text-text-primary">
+            {getTitle()}
+          </div>
         </div>
-      </div>
-      {
-        isBundle
-          ? (
-              <ReadyToInstallBundle
-                step={step}
-                onStepChange={setStep}
-                onStartToInstall={handleStartToInstall}
-                setIsInstalling={setIsInstalling}
-                onClose={onClose}
-                allPlugins={dependencies!}
-                isFromMarketPlace
-              />
-            )
-          : (
-              <>
-                {
-                  step === InstallStep.readyToInstall && (
-                    <Install
-                      uniqueIdentifier={uniqueIdentifier}
-                      payload={manifest!}
-                      onCancel={onClose}
-                      onInstalled={handleInstalled}
-                      onFailed={handleFailed}
-                      onStartToInstall={handleStartToInstall}
-                    />
-                  )
-                }
-                {
-                  [InstallStep.installed, InstallStep.installFailed].includes(step) && (
-                    <Installed
-                      payload={manifest!}
-                      isMarketPayload
-                      isFailed={step === InstallStep.installFailed}
-                      errMsg={errorMsg}
-                      onCancel={onSuccess}
-                    />
-                  )
-                }
-              </>
-            )
-      }
-    </Modal>
+        {
+          isBundle
+            ? (
+                <ReadyToInstallBundle
+                  step={step}
+                  onStepChange={setStep}
+                  onStartToInstall={handleStartToInstall}
+                  setIsInstalling={setIsInstalling}
+                  onClose={onClose}
+                  allPlugins={dependencies!}
+                  isFromMarketPlace
+                />
+              )
+            : (
+                <>
+                  {
+                    step === InstallStep.readyToInstall && (
+                      <Install
+                        uniqueIdentifier={uniqueIdentifier}
+                        payload={manifest!}
+                        onCancel={onClose}
+                        onInstalled={handleInstalled}
+                        onFailed={handleFailed}
+                        onStartToInstall={handleStartToInstall}
+                      />
+                    )
+                  }
+                  {
+                    [InstallStep.installed, InstallStep.installFailed].includes(step) && (
+                      <Installed
+                        payload={manifest!}
+                        isMarketPayload
+                        isFailed={step === InstallStep.installFailed}
+                        errMsg={errorMsg}
+                        onCancel={onSuccess}
+                      />
+                    )
+                  }
+                </>
+              )
+        }
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/schema-modal.spec.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/schema-modal.spec.tsx
index e8a2ee8318..b2debdb10f 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/schema-modal.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/schema-modal.spec.tsx
@@ -2,14 +2,11 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import SchemaModal from '../schema-modal'
 
-vi.mock('@/app/components/base/modal', () => ({
-  default: ({
-    children,
-    isShow,
-  }: {
-    children: React.ReactNode
-    isShow: boolean
-  }) => isShow ? <div data-testid="modal">{children}</div> : null,
+vi.mock('@langgenius/dify-ui/dialog', () => ({
+  Dialog: ({ children, open }: { children: React.ReactNode, open?: boolean }) =>
+    open === false ? null : <>{children}</>,
+  DialogContent: ({ children }: { children: React.ReactNode }) => <div data-testid="modal">{children}</div>,
+  DialogTitle: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
 }))
 
 vi.mock('@/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor', () => ({
diff --git a/web/app/components/plugins/plugin-mutation-model/index.tsx b/web/app/components/plugins/plugin-mutation-model/index.tsx
index 96a60fd938..339ec9edb5 100644
--- a/web/app/components/plugins/plugin-mutation-model/index.tsx
+++ b/web/app/components/plugins/plugin-mutation-model/index.tsx
@@ -2,9 +2,9 @@ import type { UseMutationResult } from '@tanstack/react-query'
 import type { FC, ReactNode } from 'react'
 import type { Plugin } from '../types'
 import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
 import * as React from 'react'
 import { memo } from 'react'
-import Modal from '@/app/components/base/modal'
 import Card from '@/app/components/plugins/card'
 
 type Props = {
@@ -33,45 +33,52 @@ const PluginMutationModal: FC<Props> = ({
   modalBottomLeft,
 }: Props) => {
   return (
-    <Modal
-      isShow={true}
-      onClose={onCancel}
-      className="min-w-[560px]"
-      closable
-      title={modelTitle}
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open)
+          onCancel()
+      }}
     >
-      <div className="mt-3 mb-2 system-md-regular text-text-secondary">
-        {description}
-      </div>
-      <div className="flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl bg-background-section-burn p-2">
-        <Card
-          installed={mutation.isSuccess}
-          payload={plugin}
-          className="w-full"
-          titleLeft={cardTitleLeft}
-        />
-      </div>
-      <div className="flex items-center gap-2 self-stretch pt-5">
-        <div>
-          {modalBottomLeft}
+      <DialogContent className="w-full min-w-[560px] overflow-hidden! border-none text-left align-middle">
+        <DialogCloseButton data-testid="modal-close-button" />
+        <DialogTitle className="title-2xl-semi-bold text-text-primary">
+          {modelTitle}
+        </DialogTitle>
+
+        <div className="mt-3 mb-2 system-md-regular text-text-secondary">
+          {description}
         </div>
-        <div className="ml-auto flex gap-2">
-          {!mutation.isPending && (
-            <Button onClick={onCancel}>
-              {cancelButtonText}
+        <div className="flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl bg-background-section-burn p-2">
+          <Card
+            installed={mutation.isSuccess}
+            payload={plugin}
+            className="w-full"
+            titleLeft={cardTitleLeft}
+          />
+        </div>
+        <div className="flex items-center gap-2 self-stretch pt-5">
+          <div>
+            {modalBottomLeft}
+          </div>
+          <div className="ml-auto flex gap-2">
+            {!mutation.isPending && (
+              <Button onClick={onCancel}>
+                {cancelButtonText}
+              </Button>
+            )}
+            <Button
+              variant="primary"
+              loading={mutation.isPending}
+              onClick={mutate}
+              disabled={mutation.isPending}
+            >
+              {confirmButtonText}
             </Button>
-          )}
-          <Button
-            variant="primary"
-            loading={mutation.isPending}
-            onClick={mutate}
-            disabled={mutation.isPending}
-          >
-            {confirmButtonText}
-          </Button>
+          </div>
         </div>
-      </div>
-    </Modal>
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/web/app/components/plugins/plugin-page/__tests__/plugin-info.spec.tsx b/web/app/components/plugins/plugin-page/__tests__/plugin-info.spec.tsx
index e95f4686f8..54818e4d02 100644
--- a/web/app/components/plugins/plugin-page/__tests__/plugin-info.spec.tsx
+++ b/web/app/components/plugins/plugin-page/__tests__/plugin-info.spec.tsx
@@ -2,17 +2,19 @@ import { render, screen } from '@testing-library/react'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-vi.mock('../../../base/modal', () => ({
-  default: ({ children, title, isShow }: { children: React.ReactNode, title: string, isShow: boolean }) => (
-    isShow
+vi.mock('@langgenius/dify-ui/dialog', () => ({
+  Dialog: ({ children, open }: { children: React.ReactNode, open?: boolean }) => (
+    open !== false
       ? (
           <div data-testid="modal">
-            <div data-testid="modal-title">{title}</div>
             {children}
           </div>
         )
       : null
   ),
+  DialogContent: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  DialogTitle: ({ children }: { children: React.ReactNode }) => <div data-testid="modal-title">{children}</div>,
+  DialogCloseButton: () => <button type="button">Close</button>,
 }))
 
 vi.mock('../../base/key-value-item', () => ({
diff --git a/web/app/components/plugins/plugin-page/plugin-info.tsx b/web/app/components/plugins/plugin-page/plugin-info.tsx
index 0638bd66a2..29a137afca 100644
--- a/web/app/components/plugins/plugin-page/plugin-info.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-info.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
+import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Modal from '../../base/modal'
 import KeyValueItem from '../base/key-value-item'
 import { convertRepoToUrl } from '../install-plugin/utils'
 
@@ -23,19 +23,26 @@ const PlugInfo: FC<Props> = ({
   const { t } = useTranslation()
   const labelWidthClassName = 'w-[96px]'
   return (
-    <Modal
-      title={t(`${i18nPrefix}.title`, { ns: 'plugin' })}
-      className="w-[480px]"
-      isShow
-      onClose={onHide}
-      closable
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open)
+          onHide()
+      }}
     >
-      <div className="mt-5 space-y-3">
-        {repository && <KeyValueItem label={t(`${i18nPrefix}.repository`, { ns: 'plugin' })} labelWidthClassName={labelWidthClassName} value={`${convertRepoToUrl(repository)}`} valueMaxWidthClassName="max-w-[190px]" />}
-        {release && <KeyValueItem label={t(`${i18nPrefix}.release`, { ns: 'plugin' })} labelWidthClassName={labelWidthClassName} value={release} />}
-        {packageName && <KeyValueItem label={t(`${i18nPrefix}.packageName`, { ns: 'plugin' })} labelWidthClassName={labelWidthClassName} value={packageName} />}
-      </div>
-    </Modal>
+      <DialogContent className="w-full max-w-[480px]! overflow-hidden! border-none text-left align-middle">
+        <DialogCloseButton data-testid="modal-close-button" />
+        <DialogTitle className="title-2xl-semi-bold text-text-primary">
+          {t(`${i18nPrefix}.title`, { ns: 'plugin' })}
+        </DialogTitle>
+
+        <div className="mt-5 space-y-3">
+          {repository && <KeyValueItem label={t(`${i18nPrefix}.repository`, { ns: 'plugin' })} labelWidthClassName={labelWidthClassName} value={`${convertRepoToUrl(repository)}`} valueMaxWidthClassName="max-w-[190px]" />}
+          {release && <KeyValueItem label={t(`${i18nPrefix}.release`, { ns: 'plugin' })} labelWidthClassName={labelWidthClassName} value={release} />}
+          {packageName && <KeyValueItem label={t(`${i18nPrefix}.packageName`, { ns: 'plugin' })} labelWidthClassName={labelWidthClassName} value={packageName} />}
+        </div>
+      </DialogContent>
+    </Dialog>
   )
 }
 export default React.memo(PlugInfo)
diff --git a/web/app/components/plugins/reference-setting-modal/__tests__/index.spec.tsx b/web/app/components/plugins/reference-setting-modal/__tests__/index.spec.tsx
index 95a9910038..f1959e8119 100644
--- a/web/app/components/plugins/reference-setting-modal/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/reference-setting-modal/__tests__/index.spec.tsx
@@ -14,28 +14,25 @@ const mockSystemFeatures = { enable_marketplace: true }
 const render = (ui: ReactElement) =>
   renderWithSystemFeatures(ui, { systemFeatures: mockSystemFeatures })
 
-// Mock Modal component
-vi.mock('@/app/components/base/modal', () => ({
-  default: ({ children, isShow, onClose, closable, className }: {
+let mockDialogOnOpenChange: ((open: boolean) => void) | undefined
+
+vi.mock('@langgenius/dify-ui/dialog', () => ({
+  Dialog: ({ children, open, onOpenChange }: {
     children: React.ReactNode
-    isShow: boolean
-    onClose: () => void
-    closable?: boolean
-    className?: string
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
   }) => {
-    if (!isShow)
-      return null
-    return (
-      <div data-testid="modal" className={className}>
-        {closable && (
-          <button data-testid="modal-close" onClick={onClose}>
-            Close
-          </button>
-        )}
-        {children}
-      </div>
-    )
+    mockDialogOnOpenChange = onOpenChange
+    return open === false ? null : <>{children}</>
   },
+  DialogContent: ({ children, className }: { children: React.ReactNode, className?: string }) => (
+    <div data-testid="modal" className={className}>{children}</div>
+  ),
+  DialogCloseButton: () => (
+    <button data-testid="modal-close" onClick={() => mockDialogOnOpenChange?.(false)}>
+      Close
+    </button>
+  ),
 }))
 
 // Mock OptionCard component
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
index d7d6fcd35f..5710eb7a66 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
@@ -143,7 +143,6 @@ const AutoUpdateSetting: FC<Props> = ({
                   timezone={timezone}
                   onChange={v => handleChange('upgrade_time_of_day')(convertLocalSecondsToUTCDaySeconds(dayjsToTimeOfDay(v), timezone!))}
                   onClear={() => handleChange('upgrade_time_of_day')(convertLocalSecondsToUTCDaySeconds(0, timezone!))}
-                  popupClassName="z-99"
                   title={t(`${i18nPrefix}.updateTime`, { ns: 'plugin' })}
                   minuteFilter={minuteFilter}
                   renderTrigger={renderTimePickerTrigger}
diff --git a/web/app/components/plugins/reference-setting-modal/index.tsx b/web/app/components/plugins/reference-setting-modal/index.tsx
index b93713bdd8..9bc0aaf7d6 100644
--- a/web/app/components/plugins/reference-setting-modal/index.tsx
+++ b/web/app/components/plugins/reference-setting-modal/index.tsx
@@ -3,11 +3,11 @@ import type { FC } from 'react'
 import type { AutoUpdateConfig } from './auto-update-setting/types'
 import type { Permissions, ReferenceSetting } from '@/app/components/plugins/types'
 import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogCloseButton, DialogContent } from '@langgenius/dify-ui/dialog'
 import { useSuspenseQuery } from '@tanstack/react-query'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Modal from '@/app/components/base/modal'
 import { PermissionType } from '@/app/components/plugins/types'
 import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
 import { systemFeaturesQueryOptions } from '@/service/system-features'
@@ -53,59 +53,64 @@ const PluginSettingModal: FC<Props> = ({
   }, [onHide, onSave, tempAutoUpdateConfig, tempPrivilege])
 
   return (
-    <Modal
-      isShow
-      onClose={onHide}
-      closable
-      className="w-[620px] max-w-[620px] p-0!"
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open)
+          onHide()
+      }}
     >
-      <div className="shadows-shadow-xl flex w-full flex-col items-start rounded-2xl border border-components-panel-border bg-components-panel-bg">
-        <div className="flex items-start gap-2 self-stretch pt-6 pr-14 pb-3 pl-6">
-          <span className="self-stretch title-2xl-semi-bold text-text-primary">{t(`${i18nPrefix}.title`, { ns: 'plugin' })}</span>
-        </div>
-        <div className="flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3">
-          {[
-            { title: t(`${i18nPrefix}.whoCanInstall`, { ns: 'plugin' }), key: 'install_permission', value: tempPrivilege?.install_permission || PermissionType.noOne },
-            { title: t(`${i18nPrefix}.whoCanDebug`, { ns: 'plugin' }), key: 'debug_permission', value: tempPrivilege?.debug_permission || PermissionType.noOne },
-          ].map(({ title, key, value }) => (
-            <div key={key} className="flex flex-col items-start gap-1 self-stretch">
-              <Label label={title} />
-              <div className="flex w-full items-start justify-between gap-2">
-                {[PermissionType.everyone, PermissionType.admin, PermissionType.noOne].map(option => (
-                  <OptionCard
-                    key={option}
-                    title={t(`${i18nPrefix}.${option}`, { ns: 'plugin' })}
-                    onSelect={() => handlePrivilegeChange(key)(option)}
-                    selected={value === option}
-                    className="flex-1"
-                  />
-                ))}
+      <DialogContent className="w-[620px] max-w-[620px] overflow-hidden! border-none p-0! text-left align-middle">
+        <DialogCloseButton data-testid="modal-close-button" />
+
+        <div className="shadows-shadow-xl flex w-full flex-col items-start rounded-2xl border border-components-panel-border bg-components-panel-bg">
+          <div className="flex items-start gap-2 self-stretch pt-6 pr-14 pb-3 pl-6">
+            <span className="self-stretch title-2xl-semi-bold text-text-primary">{t(`${i18nPrefix}.title`, { ns: 'plugin' })}</span>
+          </div>
+          <div className="flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3">
+            {[
+              { title: t(`${i18nPrefix}.whoCanInstall`, { ns: 'plugin' }), key: 'install_permission', value: tempPrivilege?.install_permission || PermissionType.noOne },
+              { title: t(`${i18nPrefix}.whoCanDebug`, { ns: 'plugin' }), key: 'debug_permission', value: tempPrivilege?.debug_permission || PermissionType.noOne },
+            ].map(({ title, key, value }) => (
+              <div key={key} className="flex flex-col items-start gap-1 self-stretch">
+                <Label label={title} />
+                <div className="flex w-full items-start justify-between gap-2">
+                  {[PermissionType.everyone, PermissionType.admin, PermissionType.noOne].map(option => (
+                    <OptionCard
+                      key={option}
+                      title={t(`${i18nPrefix}.${option}`, { ns: 'plugin' })}
+                      onSelect={() => handlePrivilegeChange(key)(option)}
+                      selected={value === option}
+                      className="flex-1"
+                    />
+                  ))}
+                </div>
               </div>
-            </div>
-          ))}
+            ))}
+          </div>
+          {
+            enable_marketplace && (
+              <AutoUpdateSetting payload={tempAutoUpdateConfig} onChange={setTempAutoUpdateConfig} />
+            )
+          }
+          <div className="flex h-[76px] items-center justify-end gap-2 self-stretch p-6 pt-5">
+            <Button
+              className="min-w-[72px]"
+              onClick={onHide}
+            >
+              {t('operation.cancel', { ns: 'common' })}
+            </Button>
+            <Button
+              className="min-w-[72px]"
+              variant="primary"
+              onClick={handleSave}
+            >
+              {t('operation.save', { ns: 'common' })}
+            </Button>
+          </div>
         </div>
-        {
-          enable_marketplace && (
-            <AutoUpdateSetting payload={tempAutoUpdateConfig} onChange={setTempAutoUpdateConfig} />
-          )
-        }
-        <div className="flex h-[76px] items-center justify-end gap-2 self-stretch p-6 pt-5">
-          <Button
-            className="min-w-[72px]"
-            onClick={onHide}
-          >
-            {t('operation.cancel', { ns: 'common' })}
-          </Button>
-          <Button
-            className="min-w-[72px]"
-            variant="primary"
-            onClick={handleSave}
-          >
-            {t('operation.save', { ns: 'common' })}
-          </Button>
-        </div>
-      </div>
-    </Modal>
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/web/app/components/rag-pipeline/components/__tests__/index.spec.tsx b/web/app/components/rag-pipeline/components/__tests__/index.spec.tsx
index 0eec89b8b8..30b503899e 100644
--- a/web/app/components/rag-pipeline/components/__tests__/index.spec.tsx
+++ b/web/app/components/rag-pipeline/components/__tests__/index.spec.tsx
@@ -420,7 +420,7 @@ function getDescriptionTextarea() {
 }
 
 // Helper to find the AppIcon span in PublishAsKnowledgePipelineModal
-// HeadlessUI Dialog renders via portal to document.body, so we search the full document
+// The modal renders via portal to document.body, so we search the full document.
 function getAppIcon() {
   const emoji = document.querySelector('em-emoji')
   return emoji?.closest('span') as HTMLElement
@@ -687,7 +687,7 @@ describe('PublishAsKnowledgePipelineModal', () => {
       render(<PublishAsKnowledgePipelineModal {...defaultProps} />)
 
       // Real AppIcon renders an em-emoji custom element inside a span
-      // HeadlessUI Dialog renders via portal, so search the full document
+      // The modal renders via portal, so search the full document.
       expect(document.querySelector('em-emoji')).toBeInTheDocument()
     })
 
@@ -845,7 +845,7 @@ describe('PublishAsKnowledgePipelineModal', () => {
       const { rerender } = render(<PublishAsKnowledgePipelineModal {...defaultProps} />)
 
       rerender(<PublishAsKnowledgePipelineModal {...defaultProps} />)
-      // HeadlessUI Dialog renders via portal, so search the full document
+      // The modal renders via portal, so search the full document.
       expect(document.querySelector('em-emoji')).toBeInTheDocument()
     })
   })
diff --git a/web/app/components/rag-pipeline/components/__tests__/publish-as-knowledge-pipeline-modal.spec.tsx b/web/app/components/rag-pipeline/components/__tests__/publish-as-knowledge-pipeline-modal.spec.tsx
index 7a99b7ab90..e1a4af0410 100644
--- a/web/app/components/rag-pipeline/components/__tests__/publish-as-knowledge-pipeline-modal.spec.tsx
+++ b/web/app/components/rag-pipeline/components/__tests__/publish-as-knowledge-pipeline-modal.spec.tsx
@@ -17,9 +17,12 @@ vi.mock('@/app/components/workflow/store', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/modal', () => ({
-  default: ({ children, isShow }: { children: React.ReactNode, isShow: boolean }) =>
-    isShow ? <div data-testid="modal">{children}</div> : null,
+vi.mock('@langgenius/dify-ui/dialog', () => ({
+  Dialog: ({ children, open }: { children: React.ReactNode, open?: boolean }) =>
+    open === false ? null : <>{children}</>,
+  DialogContent: ({ children, className }: { children: React.ReactNode, className?: string }) => (
+    <div data-testid="modal" className={className}>{children}</div>
+  ),
 }))
 
 vi.mock('@langgenius/dify-ui/button', () => ({
diff --git a/web/app/components/rag-pipeline/components/__tests__/update-dsl-modal.spec.tsx b/web/app/components/rag-pipeline/components/__tests__/update-dsl-modal.spec.tsx
index d31a06f421..815b21ba98 100644
--- a/web/app/components/rag-pipeline/components/__tests__/update-dsl-modal.spec.tsx
+++ b/web/app/components/rag-pipeline/components/__tests__/update-dsl-modal.spec.tsx
@@ -121,18 +121,14 @@ vi.mock('@langgenius/dify-ui/button', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/modal', () => ({
-  default: ({ children, isShow, _onClose, className }: PropsWithChildren<{
-    isShow: boolean
-    _onClose: () => void
-    className?: string
-  }>) => isShow
-    ? (
-        <div data-testid="modal" className={className}>
-          {children}
-        </div>
-      )
-    : null,
+vi.mock('@langgenius/dify-ui/dialog', () => ({
+  Dialog: ({ children, open }: PropsWithChildren<{ open?: boolean }>) =>
+    open === false ? null : <>{children}</>,
+  DialogContent: ({ children, className }: PropsWithChildren<{ className?: string }>) => (
+    <div data-testid="modal" className={className}>
+      {children}
+    </div>
+  ),
 }))
 
 vi.mock('@/app/components/workflow/constants', () => ({
diff --git a/web/app/components/rag-pipeline/components/__tests__/version-mismatch-modal.spec.tsx b/web/app/components/rag-pipeline/components/__tests__/version-mismatch-modal.spec.tsx
index 56ed88e2ae..b4b29fd0a8 100644
--- a/web/app/components/rag-pipeline/components/__tests__/version-mismatch-modal.spec.tsx
+++ b/web/app/components/rag-pipeline/components/__tests__/version-mismatch-modal.spec.tsx
@@ -31,13 +31,13 @@ describe('VersionMismatchModal', () => {
     it('should render dialog when isShow is true', () => {
       render(<VersionMismatchModal {...defaultProps} />)
 
-      expect(screen.getByRole('dialog')).toBeInTheDocument()
+      expect(screen.getByRole('alertdialog')).toBeInTheDocument()
     })
 
     it('should not render dialog when isShow is false', () => {
       render(<VersionMismatchModal {...defaultProps} isShow={false} />)
 
-      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+      expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument()
     })
 
     it('should render error title', () => {
diff --git a/web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx b/web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx
index faa71f0f4e..eeb6337847 100644
--- a/web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx
+++ b/web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx
@@ -2,14 +2,13 @@
 import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
 import type { IconInfo } from '@/models/datasets'
 import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import { RiCloseLine } from '@remixicon/react'
-import { noop } from 'es-toolkit/function'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
 import AppIconPicker from '@/app/components/base/app-icon-picker'
 import Input from '@/app/components/base/input'
-import Modal from '@/app/components/base/modal'
 import Textarea from '@/app/components/base/textarea'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 
@@ -77,77 +76,76 @@ const PublishAsKnowledgePipelineModal = ({
 
   return (
     <>
-      <Modal
-        isShow
-        onClose={noop}
-        className="relative w-[520px]! p-0!"
-      >
-        <div className="relative flex items-center p-6 pr-14 pb-3 title-2xl-semi-bold text-text-primary">
-          {t('common.publishAs', { ns: 'pipeline' })}
-          <div
-            data-testid="publish-modal-close-btn"
-            className="absolute top-5 right-5 flex h-8 w-8 cursor-pointer items-center justify-center"
-            onClick={onCancel}
-          >
-            <RiCloseLine className="h-4 w-4 text-text-tertiary" />
+      <Dialog open>
+        <DialogContent className="relative w-full max-w-[480px]! overflow-hidden! border-none p-0! text-left align-middle">
+
+          <div className="relative flex items-center p-6 pr-14 pb-3 title-2xl-semi-bold text-text-primary">
+            {t('common.publishAs', { ns: 'pipeline' })}
+            <div
+              data-testid="publish-modal-close-btn"
+              className="absolute top-5 right-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>
-        </div>
-        <div className="px-6 py-3">
-          <div className="mb-5 flex">
-            <div className="mr-3 grow">
-              <div className="mb-1 flex h-6 items-center system-sm-medium text-text-secondary">
-                {t('common.publishAsPipeline.name', { ns: 'pipeline' })}
+          <div className="px-6 py-3">
+            <div className="mb-5 flex">
+              <div className="mr-3 grow">
+                <div className="mb-1 flex h-6 items-center system-sm-medium text-text-secondary">
+                  {t('common.publishAsPipeline.name', { ns: 'pipeline' })}
+                </div>
+                <Input
+                  value={pipelineName}
+                  onChange={e => setPipelineName(e.target.value)}
+                  placeholder={t('common.publishAsPipeline.namePlaceholder', { ns: 'pipeline' }) || ''}
+                />
               </div>
-              <Input
-                value={pipelineName}
-                onChange={e => setPipelineName(e.target.value)}
-                placeholder={t('common.publishAsPipeline.namePlaceholder', { ns: 'pipeline' }) || ''}
+              <AppIcon
+                size="xxl"
+                onClick={() => { setShowAppIconPicker(true) }}
+                className="mt-2 shrink-0 cursor-pointer"
+                iconType={pipelineIcon?.icon_type}
+                icon={pipelineIcon?.icon}
+                background={pipelineIcon?.icon_background}
+                imageUrl={pipelineIcon?.icon_url}
               />
             </div>
-            <AppIcon
-              size="xxl"
-              onClick={() => { setShowAppIconPicker(true) }}
-              className="mt-2 shrink-0 cursor-pointer"
-              iconType={pipelineIcon?.icon_type}
-              icon={pipelineIcon?.icon}
-              background={pipelineIcon?.icon_background}
-              imageUrl={pipelineIcon?.icon_url}
-            />
-          </div>
-          <div>
-            <div className="mb-1 flex h-6 items-center system-sm-medium text-text-secondary">
-              {t('common.publishAsPipeline.description', { ns: 'pipeline' })}
+            <div>
+              <div className="mb-1 flex h-6 items-center system-sm-medium text-text-secondary">
+                {t('common.publishAsPipeline.description', { ns: 'pipeline' })}
+              </div>
+              <Textarea
+                className="resize-none"
+                placeholder={t('common.publishAsPipeline.descriptionPlaceholder', { ns: 'pipeline' }) || ''}
+                value={description}
+                onChange={e => setDescription(e.target.value)}
+              />
             </div>
-            <Textarea
-              className="resize-none"
-              placeholder={t('common.publishAsPipeline.descriptionPlaceholder', { ns: 'pipeline' }) || ''}
-              value={description}
-              onChange={e => setDescription(e.target.value)}
-            />
           </div>
-        </div>
-        <div className="flex items-center justify-end px-6 py-5">
-          <Button
-            className="mr-2"
-            onClick={onCancel}
-          >
-            {t('operation.cancel', { ns: 'common' })}
-          </Button>
-          <Button
-            disabled={!pipelineName?.trim() || confirmDisabled}
-            variant="primary"
-            onClick={() => handleConfirm()}
-          >
-            {t('common.publish', { ns: 'workflow' })}
-          </Button>
-        </div>
-      </Modal>
-      {showAppIconPicker && (
-        <AppIconPicker
-          onSelect={handleSelectIcon}
-          onClose={handleCloseIconPicker}
-        />
-      )}
+          <div className="flex items-center justify-end px-6 py-5">
+            <Button
+              className="mr-2"
+              onClick={onCancel}
+            >
+              {t('operation.cancel', { ns: 'common' })}
+            </Button>
+            <Button
+              disabled={!pipelineName?.trim() || confirmDisabled}
+              variant="primary"
+              onClick={() => handleConfirm()}
+            >
+              {t('common.publish', { ns: 'workflow' })}
+            </Button>
+          </div>
+          {showAppIconPicker && (
+            <AppIconPicker
+              onSelect={handleSelectIcon}
+              onClose={handleCloseIconPicker}
+            />
+          )}
+        </DialogContent>
+      </Dialog>
     </>
   )
 }
diff --git a/web/app/components/rag-pipeline/components/update-dsl-modal.tsx b/web/app/components/rag-pipeline/components/update-dsl-modal.tsx
index 742c29a6da..da75e03b5c 100644
--- a/web/app/components/rag-pipeline/components/update-dsl-modal.tsx
+++ b/web/app/components/rag-pipeline/components/update-dsl-modal.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import {
   RiAlertFill,
   RiCloseLine,
@@ -9,7 +10,6 @@ import {
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Uploader from '@/app/components/app/create-from-dsl-modal/uploader'
-import Modal from '@/app/components/base/modal'
 import { useUpdateDSLModal } from '../hooks/use-update-dsl-modal'
 import VersionMismatchModal from './version-mismatch-modal'
 
@@ -39,66 +39,71 @@ const UpdateDSLModal = ({
 
   return (
     <>
-      <Modal
-        className="w-[520px] rounded-2xl p-6"
-        isShow={show}
-        onClose={onCancel}
+      <Dialog
+        open={show}
+        onOpenChange={(open) => {
+          if (!open)
+            onCancel()
+        }}
       >
-        <div className="mb-3 flex items-center justify-between">
-          <div className="title-2xl-semi-bold text-text-primary">{t('common.importDSL', { ns: 'workflow' })}</div>
-          <div className="flex h-[22px] w-[22px] cursor-pointer items-center justify-center" onClick={onCancel}>
-            <RiCloseLine className="h-[18px] w-[18px] text-text-tertiary" />
-          </div>
-        </div>
-        <div className="relative mb-2 flex grow gap-0.5 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-xs">
-          <div className="absolute top-0 left-0 h-full w-full bg-toast-warning-bg opacity-40" />
-          <div className="flex items-start justify-center p-1">
-            <RiAlertFill className="h-4 w-4 shrink-0 text-text-warning-secondary" />
-          </div>
-          <div className="flex grow flex-col items-start gap-0.5 py-1">
-            <div className="system-xs-medium whitespace-pre-line text-text-primary">{t('common.importDSLTip', { ns: 'workflow' })}</div>
-            <div className="flex items-start gap-1 self-stretch pt-1 pb-0.5">
-              <Button
-                size="small"
-                variant="secondary"
-                className="z-1000"
-                onClick={onBackup}
-              >
-                <RiFileDownloadLine className="h-3.5 w-3.5 text-components-button-secondary-text" />
-                <div className="flex items-center justify-center gap-1 px-[3px]">
-                  {t('common.backupCurrentDraft', { ns: 'workflow' })}
-                </div>
-              </Button>
+        <DialogContent className="w-full max-w-[480px]! overflow-hidden! rounded-2xl border-none p-6 text-left align-middle">
+
+          <div className="mb-3 flex items-center justify-between">
+            <div className="title-2xl-semi-bold text-text-primary">{t('common.importDSL', { ns: 'workflow' })}</div>
+            <div className="flex h-[22px] w-[22px] cursor-pointer items-center justify-center" onClick={onCancel}>
+              <RiCloseLine className="h-[18px] w-[18px] text-text-tertiary" />
             </div>
           </div>
-        </div>
-        <div>
-          <div className="pt-2 system-md-semibold text-text-primary">
-            {t('common.chooseDSL', { ns: 'workflow' })}
+          <div className="relative mb-2 flex grow gap-0.5 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-xs">
+            <div className="absolute top-0 left-0 h-full w-full bg-toast-warning-bg opacity-40" />
+            <div className="flex items-start justify-center p-1">
+              <RiAlertFill className="h-4 w-4 shrink-0 text-text-warning-secondary" />
+            </div>
+            <div className="flex grow flex-col items-start gap-0.5 py-1">
+              <div className="system-xs-medium whitespace-pre-line text-text-primary">{t('common.importDSLTip', { ns: 'workflow' })}</div>
+              <div className="flex items-start gap-1 self-stretch pt-1 pb-0.5">
+                <Button
+                  size="small"
+                  variant="secondary"
+                  className="z-1000"
+                  onClick={onBackup}
+                >
+                  <RiFileDownloadLine className="h-3.5 w-3.5 text-components-button-secondary-text" />
+                  <div className="flex items-center justify-center gap-1 px-[3px]">
+                    {t('common.backupCurrentDraft', { ns: 'workflow' })}
+                  </div>
+                </Button>
+              </div>
+            </div>
           </div>
-          <div className="flex w-full flex-col items-start justify-center gap-4 self-stretch py-4">
-            <Uploader
-              file={currentFile}
-              updateFile={handleFile}
-              className="mt-0! w-full"
-              accept=".pipeline"
-              displayName="PIPELINE"
-            />
+          <div>
+            <div className="pt-2 system-md-semibold text-text-primary">
+              {t('common.chooseDSL', { ns: 'workflow' })}
+            </div>
+            <div className="flex w-full flex-col items-start justify-center gap-4 self-stretch py-4">
+              <Uploader
+                file={currentFile}
+                updateFile={handleFile}
+                className="mt-0! w-full"
+                accept=".pipeline"
+                displayName="PIPELINE"
+              />
+            </div>
           </div>
-        </div>
-        <div className="flex items-center justify-end gap-2 self-stretch pt-5">
-          <Button onClick={onCancel}>{t('newApp.Cancel', { ns: 'app' })}</Button>
-          <Button
-            disabled={!currentFile || loading}
-            variant="primary"
-            tone="destructive"
-            onClick={handleImport}
-            loading={loading}
-          >
-            {t('common.overwriteAndImport', { ns: 'workflow' })}
-          </Button>
-        </div>
-      </Modal>
+          <div className="flex items-center justify-end gap-2 self-stretch pt-5">
+            <Button onClick={onCancel}>{t('newApp.Cancel', { ns: 'app' })}</Button>
+            <Button
+              disabled={!currentFile || loading}
+              variant="primary"
+              tone="destructive"
+              onClick={handleImport}
+              loading={loading}
+            >
+              {t('common.overwriteAndImport', { ns: 'workflow' })}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
       <VersionMismatchModal
         isShow={showErrorModal}
         versions={versions}
diff --git a/web/app/components/rag-pipeline/components/version-mismatch-modal.tsx b/web/app/components/rag-pipeline/components/version-mismatch-modal.tsx
index dc50e972e9..221757de02 100644
--- a/web/app/components/rag-pipeline/components/version-mismatch-modal.tsx
+++ b/web/app/components/rag-pipeline/components/version-mismatch-modal.tsx
@@ -1,7 +1,14 @@
 import type { MouseEventHandler } from 'react'
-import { Button } from '@langgenius/dify-ui/button'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@langgenius/dify-ui/alert-dialog'
 import { useTranslation } from 'react-i18next'
-import Modal from '@/app/components/base/modal'
 
 type VersionMismatchModalProps = {
   isShow: boolean
@@ -22,32 +29,36 @@ const VersionMismatchModal = ({
   const { t } = useTranslation()
 
   return (
-    <Modal
-      isShow={isShow}
-      onClose={onClose}
-      className="w-[480px]"
+    <AlertDialog
+      open={isShow}
+      onOpenChange={(open) => {
+        if (!open)
+          onClose()
+      }}
     >
-      <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="flex grow flex-col system-md-regular text-text-secondary">
-          <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
-          <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
-          <br />
-          <div>
-            {t('newApp.appCreateDSLErrorPart3', { ns: 'app' })}
-            <span className="system-md-medium">{versions?.importedVersion}</span>
-          </div>
-          <div>
-            {t('newApp.appCreateDSLErrorPart4', { ns: 'app' })}
-            <span className="system-md-medium">{versions?.systemVersion}</span>
-          </div>
+      <AlertDialogContent className="w-[480px] max-w-none! overflow-hidden! border-none p-6 text-left align-middle shadow-xl">
+        <div className="flex flex-col items-start gap-2 self-stretch pb-4">
+          <AlertDialogTitle className="title-2xl-semi-bold text-text-primary">{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}</AlertDialogTitle>
+          <AlertDialogDescription render={<div />} className="flex grow flex-col system-md-regular text-text-secondary">
+            <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
+            <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
+            <br />
+            <div>
+              {t('newApp.appCreateDSLErrorPart3', { ns: 'app' })}
+              <span className="system-md-medium">{versions?.importedVersion}</span>
+            </div>
+            <div>
+              {t('newApp.appCreateDSLErrorPart4', { ns: 'app' })}
+              <span className="system-md-medium">{versions?.systemVersion}</span>
+            </div>
+          </AlertDialogDescription>
         </div>
-      </div>
-      <div className="flex items-start justify-end gap-2 self-stretch pt-6">
-        <Button variant="secondary" onClick={onClose}>{t('newApp.Cancel', { ns: 'app' })}</Button>
-        <Button variant="primary" tone="destructive" onClick={onConfirm}>{t('newApp.Confirm', { ns: 'app' })}</Button>
-      </div>
-    </Modal>
+        <AlertDialogActions className="items-start p-0 pt-6">
+          <AlertDialogCancelButton variant="secondary">{t('newApp.Cancel', { ns: 'app' })}</AlertDialogCancelButton>
+          <AlertDialogConfirmButton onClick={onConfirm}>{t('newApp.Confirm', { ns: 'app' })}</AlertDialogConfirmButton>
+        </AlertDialogActions>
+      </AlertDialogContent>
+    </AlertDialog>
   )
 }
 
diff --git a/web/app/components/rag-pipeline/hooks/__tests__/use-update-dsl-modal.spec.ts b/web/app/components/rag-pipeline/hooks/__tests__/use-update-dsl-modal.spec.ts
index 2449bcc605..6876df9014 100644
--- a/web/app/components/rag-pipeline/hooks/__tests__/use-update-dsl-modal.spec.ts
+++ b/web/app/components/rag-pipeline/hooks/__tests__/use-update-dsl-modal.spec.ts
@@ -340,6 +340,7 @@ describe('useUpdateDSLModal', () => {
         id: 'import-id',
         status: DSLImportStatus.FAILED,
         pipeline_id: 'test-pipeline-id',
+        error: 'Missing rag_pipeline data in YAML content',
       })
 
       const { result } = renderUpdateDSLModal()
@@ -351,7 +352,10 @@ describe('useUpdateDSLModal', () => {
         await (result.current.handleImport as unknown as AsyncFn)()
       })
 
-      expect(toastMocks.call).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
+      expect(toastMocks.call).toHaveBeenCalledWith({
+        type: 'error',
+        message: 'Missing rag_pipeline data in YAML content',
+      })
     })
 
     it('should notify error when importDSL throws', async () => {
@@ -369,6 +373,29 @@ describe('useUpdateDSLModal', () => {
       expect(toastMocks.call).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
     })
 
+    it('should notify response error when importDSL rejects with a response body', async () => {
+      mockImportDSL.mockRejectedValue(new Response(JSON.stringify({
+        error: 'Missing rag_pipeline data in YAML content',
+      }), {
+        status: 400,
+        headers: { 'Content-Type': 'application/json' },
+      }))
+
+      const { result } = renderUpdateDSLModal()
+      act(() => {
+        result.current.handleFile(createFile())
+      })
+
+      await act(async () => {
+        await (result.current.handleImport as unknown as AsyncFn)()
+      })
+
+      expect(toastMocks.call).toHaveBeenCalledWith({
+        type: 'error',
+        message: 'Missing rag_pipeline data in YAML content',
+      })
+    })
+
     it('should notify error when pipeline_id is missing on success', async () => {
       mockImportDSL.mockResolvedValue({
         id: 'import-id',
@@ -468,6 +495,7 @@ describe('useUpdateDSLModal', () => {
       mockImportDSLConfirm.mockResolvedValue({
         status: DSLImportStatus.FAILED,
         pipeline_id: 'test-pipeline-id',
+        error: 'Import information expired or does not exist',
       })
 
       const { result } = renderUpdateDSLModal()
@@ -477,7 +505,10 @@ describe('useUpdateDSLModal', () => {
         await (result.current.onUpdateDSLConfirm as unknown as AsyncFn)()
       })
 
-      expect(toastMocks.call).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
+      expect(toastMocks.call).toHaveBeenCalledWith({
+        type: 'error',
+        message: 'Import information expired or does not exist',
+      })
     })
 
     it('should notify error when confirm throws exception', async () => {
@@ -493,6 +524,27 @@ describe('useUpdateDSLModal', () => {
       expect(toastMocks.call).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
     })
 
+    it('should notify response error when confirm rejects with a response body', async () => {
+      mockImportDSLConfirm.mockRejectedValue(new Response(JSON.stringify({
+        error: 'Import information expired or does not exist',
+      }), {
+        status: 400,
+        headers: { 'Content-Type': 'application/json' },
+      }))
+
+      const { result } = renderUpdateDSLModal()
+      await setupPendingState(result)
+
+      await act(async () => {
+        await (result.current.onUpdateDSLConfirm as unknown as AsyncFn)()
+      })
+
+      expect(toastMocks.call).toHaveBeenCalledWith({
+        type: 'error',
+        message: 'Import information expired or does not exist',
+      })
+    })
+
     it('should notify error when confirm succeeds but pipeline_id is missing', async () => {
       mockImportDSLConfirm.mockResolvedValue({
         status: DSLImportStatus.COMPLETED,
diff --git a/web/app/components/rag-pipeline/hooks/use-update-dsl-modal.ts b/web/app/components/rag-pipeline/hooks/use-update-dsl-modal.ts
index 7271279996..0d12a0a881 100644
--- a/web/app/components/rag-pipeline/hooks/use-update-dsl-modal.ts
+++ b/web/app/components/rag-pipeline/hooks/use-update-dsl-modal.ts
@@ -15,11 +15,36 @@ type VersionInfo = {
   importedVersion: string
   systemVersion: string
 }
+type ImportErrorResponse = {
+  message?: unknown
+  error?: unknown
+}
 type UseUpdateDSLModalParams = {
   onCancel: () => void
   onImport?: () => void
 }
 const isCompletedStatus = (status: DSLImportStatus): boolean => status === DSLImportStatus.COMPLETED || status === DSLImportStatus.COMPLETED_WITH_WARNINGS
+const getNonEmptyString = (value: unknown): string | undefined => {
+  if (typeof value !== 'string')
+    return undefined
+
+  const trimmedValue = value.trim()
+  return trimmedValue || undefined
+}
+const getImportErrorMessage = async (error: unknown): Promise<string | undefined> => {
+  if (error instanceof Response && !error.bodyUsed) {
+    try {
+      const errorData = await error.clone().json() as ImportErrorResponse
+      return getNonEmptyString(errorData.message) ?? getNonEmptyString(errorData.error)
+    }
+    catch {}
+  }
+
+  if (error instanceof Error)
+    return getNonEmptyString(error.message)
+
+  return undefined
+}
 export const useUpdateDSLModal = ({ onCancel, onImport }: UseUpdateDSLModalParams) => {
   const { t } = useTranslation()
   const { eventEmitter } = useEventEmitterContextContext()
@@ -52,9 +77,9 @@ export const useUpdateDSLModal = ({ onCancel, onImport }: UseUpdateDSLModalParam
     if (!file)
       setFileContent('')
   }
-  const notifyError = useCallback(() => {
+  const notifyError = useCallback((message?: string) => {
     setLoading(false)
-    toast.error(t('common.importFailure', { ns: 'workflow' }))
+    toast.error(message || t('common.importFailure', { ns: 'workflow' }))
   }, [t])
   const updateWorkflow = useCallback(async (pipelineId: string) => {
     const { graph, hash, rag_pipeline_variables } = await fetchWorkflowDraft(`/rag/pipelines/${pipelineId}/workflows/draft`)
@@ -117,10 +142,10 @@ export const useUpdateDSLModal = ({ onCancel, onImport }: UseUpdateDSLModalParam
       else if (status === DSLImportStatus.PENDING)
         showVersionMismatch(id, imported_dsl_version, current_dsl_version)
       else
-        notifyError()
+        notifyError(response.error)
     }
-    catch {
-      notifyError()
+    catch (error) {
+      notifyError(await getImportErrorMessage(error))
     }
     isCreatingRef.current = false
   }, [currentFile, fileContent, workflowStore, importDSL, completeImport, showVersionMismatch, notifyError])
@@ -128,16 +153,16 @@ export const useUpdateDSLModal = ({ onCancel, onImport }: UseUpdateDSLModalParam
     if (!importId)
       return
     try {
-      const { status, pipeline_id } = await importDSLConfirm(importId)
+      const { status, pipeline_id, error } = await importDSLConfirm(importId)
       if (status === DSLImportStatus.COMPLETED) {
         await completeImport(pipeline_id)
         return
       }
       if (status === DSLImportStatus.FAILED)
-        notifyError()
+        notifyError(error)
     }
-    catch {
-      notifyError()
+    catch (error) {
+      notifyError(await getImportErrorMessage(error))
     }
   }, [importId, importDSLConfirm, completeImport, notifyError])
   return {
diff --git a/web/app/components/share/text-generation/info-modal.tsx b/web/app/components/share/text-generation/info-modal.tsx
index 29471548ef..f3b2bef5ad 100644
--- a/web/app/components/share/text-generation/info-modal.tsx
+++ b/web/app/components/share/text-generation/info-modal.tsx
@@ -1,8 +1,8 @@
 import type { SiteInfo } from '@/models/share'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Dialog, DialogCloseButton, DialogContent } from '@langgenius/dify-ui/dialog'
 import * as React from 'react'
 import AppIcon from '@/app/components/base/app-icon'
-import Modal from '@/app/components/base/modal'
 import { appDefaultIconBackground } from '@/config'
 
 type Props = {
@@ -17,37 +17,42 @@ const InfoModal = ({
   data,
 }: Props) => {
   return (
-    <Modal
-      isShow={isShow}
-      onClose={onClose}
-      className="max-w-[400px] min-w-[400px] p-0!"
-      closable
+    <Dialog
+      open={isShow}
+      onOpenChange={(open) => {
+        if (!open)
+          onClose()
+      }}
     >
-      <div className={cn('flex flex-col items-center gap-4 px-4 pt-10 pb-8')}>
-        <AppIcon
-          size="xxl"
-          iconType={data?.icon_type}
-          icon={data?.icon}
-          background={data?.icon_background || appDefaultIconBackground}
-          imageUrl={data?.icon_url}
-        />
-        <div className="system-xl-semibold text-text-secondary">{data?.title}</div>
-        <div className="system-xs-regular text-text-tertiary">
-          {/* copyright */}
-          {data?.copyright && (
-            <div>
-              ©
-              {(new Date()).getFullYear()}
-              {' '}
-              {data?.copyright}
-            </div>
-          )}
-          {data?.custom_disclaimer && (
-            <div className="mt-2">{data.custom_disclaimer}</div>
-          )}
+      <DialogContent className="w-full max-w-[400px] min-w-[400px] overflow-hidden! border-none p-0! text-left align-middle">
+        <DialogCloseButton data-testid="modal-close-button" />
+
+        <div className={cn('flex flex-col items-center gap-4 px-4 pt-10 pb-8')}>
+          <AppIcon
+            size="xxl"
+            iconType={data?.icon_type}
+            icon={data?.icon}
+            background={data?.icon_background || appDefaultIconBackground}
+            imageUrl={data?.icon_url}
+          />
+          <div className="system-xl-semibold text-text-secondary">{data?.title}</div>
+          <div className="system-xs-regular text-text-tertiary">
+            {/* copyright */}
+            {data?.copyright && (
+              <div>
+                ©
+                {(new Date()).getFullYear()}
+                {' '}
+                {data?.copyright}
+              </div>
+            )}
+            {data?.custom_disclaimer && (
+              <div className="mt-2">{data.custom_disclaimer}</div>
+            )}
+          </div>
         </div>
-      </div>
-    </Modal>
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/web/app/components/tools/mcp/__tests__/mcp-server-modal.spec.tsx b/web/app/components/tools/mcp/__tests__/mcp-server-modal.spec.tsx
index 9029ee56a2..c496dd9adf 100644
--- a/web/app/components/tools/mcp/__tests__/mcp-server-modal.spec.tsx
+++ b/web/app/components/tools/mcp/__tests__/mcp-server-modal.spec.tsx
@@ -3,9 +3,12 @@ import type { MCPServerDetail } from '@/app/components/tools/types'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import MCPServerModal from '../mcp-server-modal'
 
+const mockGetSocket = vi.hoisted(() => vi.fn())
+const mockSocketEmit = vi.hoisted(() => vi.fn())
+
 // Mock the services
 vi.mock('@/service/use-tools', () => ({
   useCreateMCPServer: () => ({
@@ -19,6 +22,12 @@ vi.mock('@/service/use-tools', () => ({
   useInvalidateMCPServerDetail: () => vi.fn(),
 }))
 
+vi.mock('@/app/components/workflow/collaboration/core/websocket-manager', () => ({
+  webSocketClient: {
+    getSocket: mockGetSocket,
+  },
+}))
+
 describe('MCPServerModal', () => {
   const createWrapper = () => {
     const queryClient = new QueryClient({
@@ -38,6 +47,11 @@ describe('MCPServerModal', () => {
     onHide: vi.fn(),
   }
 
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockGetSocket.mockReturnValue(null)
+  })
+
   describe('Rendering', () => {
     it('should render without crashing', () => {
       render(<MCPServerModal {...defaultProps} />, { wrapper: createWrapper() })
@@ -168,6 +182,15 @@ describe('MCPServerModal', () => {
       }
     })
 
+    it('should call onHide when the dialog requests close', () => {
+      const onHide = vi.fn()
+      render(<MCPServerModal {...defaultProps} onHide={onHide} />, { wrapper: createWrapper() })
+
+      fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+
+      expect(onHide).toHaveBeenCalledTimes(1)
+    })
+
     it('should disable confirm button when description is empty', () => {
       render(<MCPServerModal {...defaultProps} />, { wrapper: createWrapper() })
 
@@ -346,6 +369,48 @@ describe('MCPServerModal', () => {
       })
     })
 
+    it('should ignore parameters without variables when rendering and submitting', async () => {
+      const onHide = vi.fn()
+      const latestParams = [
+        { label: 'Missing variable', type: 'string' },
+      ]
+
+      render(
+        <MCPServerModal {...defaultProps} latestParams={latestParams} onHide={onHide} />,
+        { wrapper: createWrapper() },
+      )
+
+      expect(screen.queryByText('Missing variable')).not.toBeInTheDocument()
+
+      fireEvent.change(screen.getByPlaceholderText('tools.mcp.server.modal.descriptionPlaceholder'), {
+        target: { value: 'Test description' },
+      })
+      fireEvent.click(screen.getByText('tools.mcp.server.modal.confirm'))
+
+      await waitFor(() => {
+        expect(onHide).toHaveBeenCalled()
+      })
+    })
+
+    it('should emit a created update when socket exists', async () => {
+      const onHide = vi.fn()
+      mockGetSocket.mockReturnValue({ emit: mockSocketEmit })
+
+      render(<MCPServerModal {...defaultProps} onHide={onHide} />, { wrapper: createWrapper() })
+
+      fireEvent.change(screen.getByPlaceholderText('tools.mcp.server.modal.descriptionPlaceholder'), {
+        target: { value: 'Test description' },
+      })
+      fireEvent.click(screen.getByText('tools.mcp.server.modal.confirm'))
+
+      await waitFor(() => {
+        expect(mockSocketEmit).toHaveBeenCalledWith('collaboration_event', expect.objectContaining({
+          type: 'mcp_server_update',
+          data: expect.objectContaining({ action: 'created' }),
+        }))
+      })
+    })
+
     it('should handle empty description submission', async () => {
       const onHide = vi.fn()
       render(<MCPServerModal {...defaultProps} onHide={onHide} />, { wrapper: createWrapper() })
diff --git a/web/app/components/tools/mcp/mcp-server-modal.tsx b/web/app/components/tools/mcp/mcp-server-modal.tsx
index ab4a5c36f4..cfb33f3839 100644
--- a/web/app/components/tools/mcp/mcp-server-modal.tsx
+++ b/web/app/components/tools/mcp/mcp-server-modal.tsx
@@ -3,12 +3,11 @@ import type {
   MCPServerDetail,
 } from '@/app/components/tools/types'
 import { Button } from '@langgenius/dify-ui/button'
-import { cn } from '@langgenius/dify-ui/cn'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
-import Modal from '@/app/components/base/modal'
 import Textarea from '@/app/components/base/textarea'
 import MCPServerParamItem from '@/app/components/tools/mcp/mcp-server-param-item'
 import { webSocketClient } from '@/app/components/workflow/collaboration/core/websocket-manager'
@@ -20,11 +19,19 @@ import {
 
 type ModalProps = {
   appID: string
-  latestParams?: any[]
+  latestParams?: MCPServerParam[]
   data?: MCPServerDetail
   show: boolean
   onHide: () => void
-  appInfo?: any
+  appInfo?: {
+    description?: string
+  }
+}
+
+type MCPServerParam = {
+  variable?: string
+  label?: string
+  type?: string
 }
 
 const MCPServerModal = ({
@@ -42,7 +49,7 @@ const MCPServerModal = ({
 
   const defaultDescription = data?.description || appInfo?.description || ''
   const [description, setDescription] = React.useState(defaultDescription)
-  const [params, setParams] = React.useState(data?.parameters || {})
+  const [params, setParams] = React.useState<Record<string, string>>(data?.parameters || {})
 
   const handleParamChange = (variable: string, value: string) => {
     setParams(prev => ({
@@ -52,10 +59,14 @@ const MCPServerModal = ({
   }
 
   const getParamValue = () => {
-    const res = {} as any
-    latestParams.map((param) => {
-      res[param.variable] = params[param.variable]
-      return param
+    const res: Record<string, string> = {}
+    latestParams.forEach((param) => {
+      if (!param.variable)
+        return
+
+      const value = params[param.variable]
+      if (value !== undefined)
+        res[param.variable] = value
     })
     return res
   }
@@ -78,7 +89,11 @@ const MCPServerModal = ({
 
   const submit = async () => {
     if (!data) {
-      const payload: any = {
+      const payload: {
+        appID: string
+        description?: string
+        parameters: Record<string, string>
+      } = {
         appID,
         parameters: getParamValue(),
       }
@@ -92,13 +107,18 @@ const MCPServerModal = ({
       onHide()
     }
     else {
-      const payload: any = {
+      const payload: {
+        appID: string
+        id: string
+        description: string
+        parameters: Record<string, string>
+      } = {
         appID,
         id: data.id,
         parameters: getParamValue(),
+        description,
       }
 
-      payload.description = description
       await updateMCPServer(payload)
       invalidateMCPServerDetail(appID)
       emitMcpServerUpdate('updated')
@@ -107,56 +127,67 @@ const MCPServerModal = ({
   }
 
   return (
-    <Modal
-      isShow={show}
-      onClose={onHide}
-      className={cn('relative max-w-[520px]! p-0!')}
+    <Dialog
+      open={show}
+      onOpenChange={(open) => {
+        if (!open)
+          onHide()
+      }}
     >
-      <div className="absolute top-5 right-5 z-10 cursor-pointer p-1.5" onClick={onHide}>
-        <RiCloseLine className="h-5 w-5 text-text-tertiary" />
-      </div>
-      <div className="relative p-6 pb-3 title-2xl-semi-bold text-xl text-text-primary">
-        {!data ? t('mcp.server.modal.addTitle', { ns: 'tools' }) : t('mcp.server.modal.editTitle', { ns: 'tools' })}
-      </div>
-      <div className="space-y-5 px-6 py-3">
-        <div className="space-y-0.5">
-          <div className="flex h-6 items-center gap-1">
-            <div className="system-sm-medium text-text-secondary">{t('mcp.server.modal.description', { ns: 'tools' })}</div>
-            <div className="system-xs-regular text-text-destructive-secondary">*</div>
-          </div>
-          <Textarea
-            className="h-[96px] resize-none"
-            value={description}
-            placeholder={t('mcp.server.modal.descriptionPlaceholder', { ns: 'tools' })}
-            onChange={e => setDescription(e.target.value)}
-          >
-          </Textarea>
+      <DialogContent className="w-[calc(100vw-2rem)] max-w-[520px]! overflow-hidden! border-none p-0! text-left align-middle transition-all duration-100 ease-in">
+        <div className="absolute top-5 right-5 z-10 cursor-pointer p-1.5" onClick={onHide}>
+          <RiCloseLine className="h-5 w-5 text-text-tertiary" />
         </div>
-        {latestParams.length > 0 && (
-          <div>
-            <div className="mb-1 flex items-center gap-2">
-              <div className="shrink-0 system-xs-medium-uppercase text-text-primary">{t('mcp.server.modal.parameters', { ns: 'tools' })}</div>
-              <Divider type="horizontal" className="m-0! h-px! grow bg-divider-subtle" />
-            </div>
-            <div className="mb-2 body-xs-regular text-text-tertiary">{t('mcp.server.modal.parametersTip', { ns: 'tools' })}</div>
-            <div className="space-y-3">
-              {latestParams.map(paramItem => (
-                <MCPServerParamItem
-                  key={paramItem.variable}
-                  data={paramItem}
-                  value={params[paramItem.variable] || ''}
-                  onChange={value => handleParamChange(paramItem.variable, value)}
-                />
-              ))}
+        <div className="relative p-6 pb-3 title-2xl-semi-bold text-xl text-text-primary">
+          {!data ? t('mcp.server.modal.addTitle', { ns: 'tools' }) : t('mcp.server.modal.editTitle', { ns: 'tools' })}
+        </div>
+        <div className="space-y-5 px-6 py-3">
+          <div className="space-y-0.5">
+            <div className="flex h-6 items-center gap-1">
+              <div className="system-sm-medium text-text-secondary">{t('mcp.server.modal.description', { ns: 'tools' })}</div>
+              <div className="system-xs-regular text-text-destructive-secondary">*</div>
             </div>
+            <Textarea
+              className="h-[96px] resize-none"
+              value={description}
+              placeholder={t('mcp.server.modal.descriptionPlaceholder', { ns: 'tools' })}
+              onChange={e => setDescription(e.target.value)}
+            >
+            </Textarea>
           </div>
-        )}
-      </div>
-      <div className="flex flex-row-reverse p-6 pt-5">
-        <Button disabled={!description || creating || updating} className="ml-2" variant="primary" onClick={submit}>{data ? t('mcp.modal.save', { ns: 'tools' }) : t('mcp.server.modal.confirm', { ns: 'tools' })}</Button>
-        <Button onClick={onHide}>{t('mcp.modal.cancel', { ns: 'tools' })}</Button>
-      </div>
-    </Modal>
+          {latestParams.length > 0 && (
+            <div>
+              <div className="mb-1 flex items-center gap-2">
+                <div className="shrink-0 system-xs-medium-uppercase text-text-primary">{t('mcp.server.modal.parameters', { ns: 'tools' })}</div>
+                <Divider type="horizontal" className="m-0! h-px! grow bg-divider-subtle" />
+              </div>
+              <div className="mb-2 body-xs-regular text-text-tertiary">{t('mcp.server.modal.parametersTip', { ns: 'tools' })}</div>
+              <div className="space-y-3">
+                {latestParams.map((paramItem) => {
+                  if (!paramItem.variable)
+                    return null
+
+                  const { variable } = paramItem
+
+                  return (
+                    <MCPServerParamItem
+                      key={variable}
+                      data={paramItem}
+                      value={params[variable] || ''}
+                      onChange={value => handleParamChange(variable, value)}
+                    />
+                  )
+                })}
+              </div>
+            </div>
+          )}
+        </div>
+        <div className="flex flex-row-reverse p-6 pt-5">
+          <Button disabled={!description || creating || updating} className="ml-2" variant="primary" onClick={submit}>{data ? t('mcp.modal.save', { ns: 'tools' }) : t('mcp.server.modal.confirm', { ns: 'tools' })}</Button>
+          <Button onClick={onHide}>{t('mcp.modal.cancel', { ns: 'tools' })}</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/web/app/components/tools/mcp/modal.tsx b/web/app/components/tools/mcp/modal.tsx
index 165535127d..79179ae3dc 100644
--- a/web/app/components/tools/mcp/modal.tsx
+++ b/web/app/components/tools/mcp/modal.tsx
@@ -4,17 +4,15 @@ import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
 import type { AppIconType } from '@/types/app'
 import { Button } from '@langgenius/dify-ui/button'
-import { cn } from '@langgenius/dify-ui/cn'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import { toast } from '@langgenius/dify-ui/toast'
 import { RiCloseLine, RiEditLine } from '@remixicon/react'
 import { useHover } from 'ahooks'
-import { noop } from 'es-toolkit/function'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
 import AppIconPicker from '@/app/components/base/app-icon-picker'
 import { Mcp } from '@/app/components/base/icons/src/vender/other'
 import Input from '@/app/components/base/input'
-import Modal from '@/app/components/base/modal'
 import TabSlider from '@/app/components/base/tab-slider'
 import { MCPAuthMethod } from '@/app/components/tools/types'
 import { shouldUseMcpIconForAppIcon } from '@/utils/mcp'
@@ -281,18 +279,16 @@ const MCPModal: FC<DuplicateAppModalProps> = ({
   const formKey = data?.id ?? 'create'
 
   return (
-    <Modal
-      isShow={show}
-      onClose={noop}
-      className={cn('relative max-w-[520px]!', 'p-6')}
-    >
-      <MCPModalContent
-        key={formKey}
-        data={data}
-        onConfirm={onConfirm}
-        onHide={onHide}
-      />
-    </Modal>
+    <Dialog open={show}>
+      <DialogContent className="w-full max-w-[520px]! overflow-hidden! border-none p-6 text-left align-middle">
+        <MCPModalContent
+          key={formKey}
+          data={data}
+          onConfirm={onConfirm}
+          onHide={onHide}
+        />
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/web/app/components/workflow/__tests__/update-dsl-modal.spec.tsx b/web/app/components/workflow/__tests__/update-dsl-modal.spec.tsx
index 241cd7d762..684c700648 100644
--- a/web/app/components/workflow/__tests__/update-dsl-modal.spec.tsx
+++ b/web/app/components/workflow/__tests__/update-dsl-modal.spec.tsx
@@ -126,6 +126,15 @@ describe('UpdateDSLModal', () => {
     expect(defaultProps.onBackup).toHaveBeenCalledTimes(1)
   })
 
+  it('should call cancel handler when the import dialog requests close', () => {
+    const onCancel = vi.fn()
+    renderModal({ ...defaultProps, onCancel })
+
+    fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+
+    expect(onCancel).toHaveBeenCalledTimes(1)
+  })
+
   it('should import a valid file and emit workflow update payload', async () => {
     renderModal()
 
@@ -228,6 +237,32 @@ describe('UpdateDSLModal', () => {
     })
   })
 
+  it('should close the pending modal when dialog requests close', async () => {
+    mockImportDSL.mockResolvedValue({
+      id: 'import-8',
+      status: DSLImportStatus.PENDING,
+      imported_dsl_version: '1.0.0',
+      current_dsl_version: '2.0.0',
+    })
+
+    renderModal()
+
+    fireEvent.change(screen.getByTestId('dsl-file-input'), {
+      target: { files: [new File(['workflow'], 'workflow.yml', { type: 'text/yaml' })] },
+    })
+    fireEvent.click(screen.getByRole('button', { name: 'workflow.common.overwriteAndImport' }))
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'app.newApp.Confirm' })).toBeInTheDocument()
+    })
+
+    fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+
+    await waitFor(() => {
+      expect(screen.queryByRole('button', { name: 'app.newApp.Confirm' })).not.toBeInTheDocument()
+    })
+  })
+
   it('should show an error when the selected file content is invalid for the current app mode', async () => {
     class InvalidDSLFileReader extends MockFileReader {
       override readAsText(_file: Blob) {
diff --git a/web/app/components/workflow/header/online-users.tsx b/web/app/components/workflow/header/online-users.tsx
index 17e1de3feb..93e9d1fa85 100644
--- a/web/app/components/workflow/header/online-users.tsx
+++ b/web/app/components/workflow/header/online-users.tsx
@@ -189,7 +189,6 @@ const OnlineUsers = () => {
                 placement="bottom-start"
                 sideOffset={8}
                 alignOffset={-48}
-                className="z-[9999]"
                 popupClassName={cn(
                   'mt-1.5 flex max-h-[200px] w-[240px] flex-col overflow-y-auto',
                   'rounded-xl border-[0.5px] border-components-panel-border',
diff --git a/web/app/components/workflow/nodes/http/components/authorization/index.tsx b/web/app/components/workflow/nodes/http/components/authorization/index.tsx
index b72e52911d..684f943d5f 100644
--- a/web/app/components/workflow/nodes/http/components/authorization/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/authorization/index.tsx
@@ -4,12 +4,12 @@ import type { Authorization as AuthorizationPayloadType } from '../../types'
 import type { Var } from '@/app/components/workflow/types'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Dialog, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
 import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import BaseInput from '@/app/components/base/input'
-import Modal from '@/app/components/base/modal'
 import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
 import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
 import { VarType } from '@/app/components/workflow/types'
@@ -115,70 +115,78 @@ const Authorization: FC<Props> = ({
     onHide()
   }, [tempPayload, onChange, onHide])
   return (
-    <Modal
-      title={t(`${i18nPrefix}.authorization`, { ns: 'workflow' })}
-      isShow={isShow}
-      onClose={onHide}
+    <Dialog
+      open={isShow}
+      onOpenChange={(open) => {
+        if (!open)
+          onHide()
+      }}
     >
-      <div>
-        <div className="space-y-2">
-          <Field title={t(`${i18nPrefix}.authorizationType`, { ns: 'workflow' })}>
-            <RadioGroup
-              options={[
-                { value: AuthorizationType.none, label: t(`${i18nPrefix}.no-auth`, { ns: 'workflow' }) },
-                { value: AuthorizationType.apiKey, label: t(`${i18nPrefix}.api-key`, { ns: 'workflow' }) },
-              ]}
-              value={tempPayload.type}
-              onChange={handleAuthTypeChange}
-            />
-          </Field>
+      <DialogContent className="overflow-hidden! border-none text-left align-middle">
+        <DialogTitle className="title-2xl-semi-bold text-text-primary">
+          {t(`${i18nPrefix}.authorization`, { ns: 'workflow' })}
+        </DialogTitle>
 
-          {tempPayload.type === AuthorizationType.apiKey && (
-            <>
-              <Field title={t(`${i18nPrefix}.auth-type`, { ns: 'workflow' })}>
-                <RadioGroup
-                  options={[
-                    { value: APIType.basic, label: t(`${i18nPrefix}.basic`, { ns: 'workflow' }) },
-                    { value: APIType.bearer, label: t(`${i18nPrefix}.bearer`, { ns: 'workflow' }) },
-                    { value: APIType.custom, label: t(`${i18nPrefix}.custom`, { ns: 'workflow' }) },
-                  ]}
-                  value={tempPayload.config?.type || APIType.basic}
-                  onChange={handleAuthAPITypeChange}
-                />
-              </Field>
-              {tempPayload.config?.type === APIType.custom && (
-                <Field title={t(`${i18nPrefix}.header`, { ns: 'workflow' })} isRequired>
-                  <BaseInput
-                    value={tempPayload.config?.header || ''}
-                    onChange={handleAPIKeyOrHeaderChange('header')}
+        <div>
+          <div className="space-y-2">
+            <Field title={t(`${i18nPrefix}.authorizationType`, { ns: 'workflow' })}>
+              <RadioGroup
+                options={[
+                  { value: AuthorizationType.none, label: t(`${i18nPrefix}.no-auth`, { ns: 'workflow' }) },
+                  { value: AuthorizationType.apiKey, label: t(`${i18nPrefix}.api-key`, { ns: 'workflow' }) },
+                ]}
+                value={tempPayload.type}
+                onChange={handleAuthTypeChange}
+              />
+            </Field>
+
+            {tempPayload.type === AuthorizationType.apiKey && (
+              <>
+                <Field title={t(`${i18nPrefix}.auth-type`, { ns: 'workflow' })}>
+                  <RadioGroup
+                    options={[
+                      { value: APIType.basic, label: t(`${i18nPrefix}.basic`, { ns: 'workflow' }) },
+                      { value: APIType.bearer, label: t(`${i18nPrefix}.bearer`, { ns: 'workflow' }) },
+                      { value: APIType.custom, label: t(`${i18nPrefix}.custom`, { ns: 'workflow' }) },
+                    ]}
+                    value={tempPayload.config?.type || APIType.basic}
+                    onChange={handleAuthAPITypeChange}
                   />
                 </Field>
-              )}
+                {tempPayload.config?.type === APIType.custom && (
+                  <Field title={t(`${i18nPrefix}.header`, { ns: 'workflow' })} isRequired>
+                    <BaseInput
+                      value={tempPayload.config?.header || ''}
+                      onChange={handleAPIKeyOrHeaderChange('header')}
+                    />
+                  </Field>
+                )}
 
-              <Field title={t(`${i18nPrefix}.api-key-title`, { ns: 'workflow' })} isRequired>
-                <div className="flex">
-                  <Input
-                    instanceId="http-api-key"
-                    className={cn(isFocus ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs' : 'border-components-input-border-hover bg-components-input-bg-normal', 'w-0 grow rounded-lg border px-3 py-[6px]')}
-                    value={tempPayload.config?.api_key || ''}
-                    onChange={handleAPIKeyChange}
-                    nodesOutputVars={availableVars}
-                    availableNodes={availableNodesWithParent}
-                    onFocusChange={setIsFocus}
-                    placeholder={' '}
-                    placeholderClassName="leading-[21px]!"
-                  />
-                </div>
-              </Field>
-            </>
-          )}
+                <Field title={t(`${i18nPrefix}.api-key-title`, { ns: 'workflow' })} isRequired>
+                  <div className="flex">
+                    <Input
+                      instanceId="http-api-key"
+                      className={cn(isFocus ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs' : 'border-components-input-border-hover bg-components-input-bg-normal', 'w-0 grow rounded-lg border px-3 py-[6px]')}
+                      value={tempPayload.config?.api_key || ''}
+                      onChange={handleAPIKeyChange}
+                      nodesOutputVars={availableVars}
+                      availableNodes={availableNodesWithParent}
+                      onFocusChange={setIsFocus}
+                      placeholder={' '}
+                      placeholderClassName="leading-[21px]!"
+                    />
+                  </div>
+                </Field>
+              </>
+            )}
+          </div>
+          <div className="mt-6 flex justify-end space-x-2">
+            <Button onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
+            <Button variant="primary" onClick={handleConfirm}>{t('operation.save', { ns: 'common' })}</Button>
+          </div>
         </div>
-        <div className="mt-6 flex justify-end space-x-2">
-          <Button onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
-          <Button variant="primary" onClick={handleConfirm}>{t('operation.save', { ns: 'common' })}</Button>
-        </div>
-      </div>
-    </Modal>
+      </DialogContent>
+    </Dialog>
   )
 }
 export default React.memo(Authorization)
diff --git a/web/app/components/workflow/nodes/http/components/curl-panel.tsx b/web/app/components/workflow/nodes/http/components/curl-panel.tsx
index 8ba5fb36a9..87dc2a3427 100644
--- a/web/app/components/workflow/nodes/http/components/curl-panel.tsx
+++ b/web/app/components/workflow/nodes/http/components/curl-panel.tsx
@@ -2,11 +2,11 @@
 import type { FC } from 'react'
 import type { HttpNodeType } from '../types'
 import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
 import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Modal from '@/app/components/base/modal'
 import Textarea from '@/app/components/base/textarea'
 import { useNodesInteractions } from '@/app/components/workflow/hooks'
 import { parseCurl } from './curl-parser'
@@ -42,28 +42,35 @@ const CurlPanel: FC<Props> = ({ nodeId, isShow, onHide, handleCurlImport }) => {
   }, [onHide, nodeId, inputString, handleNodeSelect, handleCurlImport])
 
   return (
-    <Modal
-      title={t('nodes.http.curl.title', { ns: 'workflow' })}
-      isShow={isShow}
-      onClose={onHide}
-      className="w-[400px]! max-w-[400px]! p-4!"
+    <Dialog
+      open={isShow}
+      onOpenChange={(open) => {
+        if (!open)
+          onHide()
+      }}
     >
-      <div>
-        <Textarea
-          value={inputString}
-          className="my-3 h-40 w-full grow"
-          onChange={e => setInputString(e.target.value)}
-          placeholder={t('nodes.http.curl.placeholder', { ns: 'workflow' })!}
-        />
-      </div>
-      <div className="mt-4 flex justify-end space-x-2">
-        <Button className="w-[95px]!" onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
-        <Button className="w-[95px]!" variant="primary" onClick={handleSave}>
-          {' '}
-          {t('operation.save', { ns: 'common' })}
-        </Button>
-      </div>
-    </Modal>
+      <DialogContent className="w-[400px]! max-w-[400px]! overflow-hidden! border-none p-4! text-left align-middle">
+        <DialogTitle className="title-2xl-semi-bold text-text-primary">
+          {t('nodes.http.curl.title', { ns: 'workflow' })}
+        </DialogTitle>
+
+        <div>
+          <Textarea
+            value={inputString}
+            className="my-3 h-40 w-full grow"
+            onChange={e => setInputString(e.target.value)}
+            placeholder={t('nodes.http.curl.placeholder', { ns: 'workflow' })!}
+          />
+        </div>
+        <div className="mt-4 flex justify-end space-x-2">
+          <Button className="w-[95px]!" onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
+          <Button className="w-[95px]!" variant="primary" onClick={handleSave}>
+            {' '}
+            {t('operation.save', { ns: 'common' })}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/index.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/index.tsx
index fa5166a06f..f4445fd54d 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/index.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/index.tsx
@@ -1,5 +1,5 @@
 import type { SchemaRoot } from '../../types'
-import Modal from '../../../../../base/modal'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import { JsonSchemaConfig } from './json-schema-config'
 
 type JsonSchemaConfigModalProps = {
@@ -16,16 +16,21 @@ export function JsonSchemaConfigModal({
   onClose,
 }: JsonSchemaConfigModalProps) {
   return (
-    <Modal
-      isShow={isShow}
-      onClose={onClose}
-      className="h-[800px] max-w-[960px] p-0"
+    <Dialog
+      open={isShow}
+      onOpenChange={(open) => {
+        if (!open)
+          onClose()
+      }}
     >
-      <JsonSchemaConfig
-        defaultSchema={defaultSchema}
-        onSave={onSave}
-        onClose={onClose}
-      />
-    </Modal>
+      <DialogContent className="h-[800px] max-h-none w-full max-w-[960px] overflow-hidden! border-none p-0 text-left align-middle">
+
+        <JsonSchemaConfig
+          defaultSchema={defaultSchema}
+          onSave={onSave}
+          onClose={onClose}
+        />
+      </DialogContent>
+    </Dialog>
   )
 }
diff --git a/web/app/components/workflow/nodes/parameter-extractor/__tests__/integration.spec.tsx b/web/app/components/workflow/nodes/parameter-extractor/__tests__/integration.spec.tsx
index f63d9a0d50..2c5de93964 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/__tests__/integration.spec.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/__tests__/integration.spec.tsx
@@ -110,24 +110,23 @@ vi.mock('@/app/components/header/account-setting/model-provider-page/model-param
   ),
 }))
 
-vi.mock('@/app/components/base/modal', () => ({
+vi.mock('@langgenius/dify-ui/dialog', () => ({
   __esModule: true,
-  default: ({
+  Dialog: ({
     children,
-    isShow,
-    title,
+    open,
   }: {
     children: ReactNode
-    isShow?: boolean
-    title?: ReactNode
-  }) => isShow
+    open?: boolean
+  }) => open !== false
     ? (
         <div data-testid="base-modal">
-          <div>{title}</div>
           {children}
         </div>
       )
     : null,
+  DialogContent: ({ children }: { children: ReactNode }) => <>{children}</>,
+  DialogTitle: ({ children }: { children: ReactNode }) => <div>{children}</div>,
 }))
 
 vi.mock('@/app/components/workflow/nodes/_base/components/collapse', () => ({
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
index ddded68989..122ee16941 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
@@ -3,6 +3,7 @@ import type { FC } from 'react'
 import type { Param } from '../../types'
 import type { MoreInfo } from '@/app/components/workflow/types'
 import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
 import { Select, SelectContent, SelectItem, SelectItemIndicator, SelectItemText, SelectTrigger } from '@langgenius/dify-ui/select'
 import { Switch } from '@langgenius/dify-ui/switch'
 import { toast } from '@langgenius/dify-ui/toast'
@@ -13,7 +14,6 @@ import { useTranslation } from 'react-i18next'
 import Field from '@/app/components/app/configuration/config-var/config-modal/field'
 import ConfigSelect from '@/app/components/app/configuration/config-var/config-select'
 import Input from '@/app/components/base/input'
-import Modal from '@/app/components/base/modal'
 import Textarea from '@/app/components/base/textarea'
 import { ChangeType } from '@/app/components/workflow/types'
 import { checkKeys } from '@/utils/var'
@@ -124,64 +124,71 @@ const AddExtractParameter: FC<Props> = ({
         </div>
       )}
       {isShowModal && (
-        <Modal
-          title={t(`${i18nPrefix}.addExtractParameter`, { ns: 'workflow' })}
-          isShow
-          onClose={hideModal}
-          className="w-[400px]! max-w-[400px]! p-4!"
+        <Dialog
+          open
+          onOpenChange={(open) => {
+            if (!open)
+              hideModal()
+          }}
         >
-          <div>
-            <div className="space-y-2">
-              <Field title={t(`${i18nPrefix}.addExtractParameterContent.name`, { ns: 'workflow' })}>
-                <Input
-                  value={param.name}
-                  onChange={e => handleParamChange('name')(e.target.value)}
-                  placeholder={t(`${i18nPrefix}.addExtractParameterContent.namePlaceholder`, { ns: 'workflow' })!}
-                />
-              </Field>
-              <Field title={t(`${i18nPrefix}.addExtractParameterContent.type`, { ns: 'workflow' })}>
-                <Select
-                  value={param.type}
-                  onValueChange={value => value && handleParamChange('type')(value)}
-                >
-                  <SelectTrigger className="w-full capitalize">
-                    {param.type}
-                  </SelectTrigger>
-                  <SelectContent>
-                    {TYPES.map(type => (
-                      <SelectItem key={type} value={type} className="capitalize">
-                        <SelectItemText className="capitalize">{type}</SelectItemText>
-                        <SelectItemIndicator />
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </Field>
-              {param.type === ParamType.select && (
-                <Field title={t('variableConfig.options', { ns: 'appDebug' })}>
-                  <ConfigSelect options={param.options || []} onChange={handleParamChange('options')} />
+          <DialogContent className="w-[400px]! max-w-[400px]! overflow-hidden! border-none p-4! text-left align-middle">
+            <DialogTitle className="title-2xl-semi-bold text-text-primary">
+              {t(`${i18nPrefix}.addExtractParameter`, { ns: 'workflow' })}
+            </DialogTitle>
+
+            <div>
+              <div className="space-y-2">
+                <Field title={t(`${i18nPrefix}.addExtractParameterContent.name`, { ns: 'workflow' })}>
+                  <Input
+                    value={param.name}
+                    onChange={e => handleParamChange('name')(e.target.value)}
+                    placeholder={t(`${i18nPrefix}.addExtractParameterContent.namePlaceholder`, { ns: 'workflow' })!}
+                  />
                 </Field>
-              )}
-              <Field title={t(`${i18nPrefix}.addExtractParameterContent.description`, { ns: 'workflow' })}>
-                <Textarea
-                  value={param.description}
-                  onChange={e => handleParamChange('description')(e.target.value)}
-                  placeholder={t(`${i18nPrefix}.addExtractParameterContent.descriptionPlaceholder`, { ns: 'workflow' })!}
-                />
-              </Field>
-              <Field title={t(`${i18nPrefix}.addExtractParameterContent.required`, { ns: 'workflow' })}>
-                <>
-                  <div className="mb-1.5 text-xs leading-[18px] font-normal text-text-tertiary">{t(`${i18nPrefix}.addExtractParameterContent.requiredContent`, { ns: 'workflow' })}</div>
-                  <Switch size="lg" checked={param.required ?? false} onCheckedChange={handleParamChange('required')} />
-                </>
-              </Field>
+                <Field title={t(`${i18nPrefix}.addExtractParameterContent.type`, { ns: 'workflow' })}>
+                  <Select
+                    value={param.type}
+                    onValueChange={value => value && handleParamChange('type')(value)}
+                  >
+                    <SelectTrigger className="w-full capitalize">
+                      {param.type}
+                    </SelectTrigger>
+                    <SelectContent>
+                      {TYPES.map(type => (
+                        <SelectItem key={type} value={type} className="capitalize">
+                          <SelectItemText className="capitalize">{type}</SelectItemText>
+                          <SelectItemIndicator />
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </Field>
+                {param.type === ParamType.select && (
+                  <Field title={t('variableConfig.options', { ns: 'appDebug' })}>
+                    <ConfigSelect options={param.options || []} onChange={handleParamChange('options')} />
+                  </Field>
+                )}
+                <Field title={t(`${i18nPrefix}.addExtractParameterContent.description`, { ns: 'workflow' })}>
+                  <Textarea
+                    value={param.description}
+                    onChange={e => handleParamChange('description')(e.target.value)}
+                    placeholder={t(`${i18nPrefix}.addExtractParameterContent.descriptionPlaceholder`, { ns: 'workflow' })!}
+                  />
+                </Field>
+                <Field title={t(`${i18nPrefix}.addExtractParameterContent.required`, { ns: 'workflow' })}>
+                  <>
+                    <div className="mb-1.5 text-xs leading-[18px] font-normal text-text-tertiary">{t(`${i18nPrefix}.addExtractParameterContent.requiredContent`, { ns: 'workflow' })}</div>
+                    <Switch size="lg" checked={param.required ?? false} onCheckedChange={handleParamChange('required')} />
+                  </>
+                </Field>
+              </div>
+              <div className="mt-4 flex justify-end space-x-2">
+                <Button className="w-[95px]!" onClick={hideModal}>{t('operation.cancel', { ns: 'common' })}</Button>
+                <Button className="w-[95px]!" variant="primary" onClick={handleSave}>{isAdd ? t('operation.add', { ns: 'common' }) : t('operation.save', { ns: 'common' })}</Button>
+              </div>
             </div>
-            <div className="mt-4 flex justify-end space-x-2">
-              <Button className="w-[95px]!" onClick={hideModal}>{t('operation.cancel', { ns: 'common' })}</Button>
-              <Button className="w-[95px]!" variant="primary" onClick={handleSave}>{isAdd ? t('operation.add', { ns: 'common' }) : t('operation.save', { ns: 'common' })}</Button>
-            </div>
-          </div>
-        </Modal>
+          </DialogContent>
+        </Dialog>
       )}
     </div>
   )
diff --git a/web/app/components/workflow/nodes/tool/components/__tests__/input-var-list.spec.tsx b/web/app/components/workflow/nodes/tool/components/__tests__/input-var-list.spec.tsx
index 11d7d33295..87ee0447ff 100644
--- a/web/app/components/workflow/nodes/tool/components/__tests__/input-var-list.spec.tsx
+++ b/web/app/components/workflow/nodes/tool/components/__tests__/input-var-list.spec.tsx
@@ -1,7 +1,7 @@
 import type { ToolVarInputs } from '../../types'
 import type { CredentialFormSchema } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { App } from '@/types/app'
-import { screen } from '@testing-library/react'
+import { screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { useState } from 'react'
 import { createMockProviderContextValue } from '@/__mocks__/provider-context'
@@ -479,20 +479,23 @@ describe('InputVarList', () => {
       },
     })
 
-    await user.click(screen.getByRole('combobox', { name: 'app.appSelector.label' }))
-    await user.type(screen.getByPlaceholderText('Topic'), 'weather')
+    const topicInput = await screen.findByPlaceholderText('Topic')
+    await user.type(topicInput, 'weather')
 
-    expect(onChange).toHaveBeenLastCalledWith({
-      assistant: {
-        app_id: 'app-1',
-        inputs: { topic: 'weather' },
-        files: [],
-      },
-      model: {
-        credential_id: 'credential-1',
-      },
+    await waitFor(() => {
+      expect(onChange).toHaveBeenLastCalledWith({
+        assistant: {
+          app_id: 'app-1',
+          inputs: { topic: 'weather' },
+          files: [],
+        },
+        model: {
+          credential_id: 'credential-1',
+        },
+      })
     })
 
+    await user.click(screen.getByRole('button', { name: 'app.appSelector.label' }))
     await user.click(screen.getByText('workflow:errorMsg.configureModel'))
     await user.click(await screen.findByRole('combobox', { name: 'plugin.detailPanel.configureModel' }))
     await user.click(await screen.findByRole('option', { name: /GPT-4o/i }))
diff --git a/web/app/components/workflow/operator/index.tsx b/web/app/components/workflow/operator/index.tsx
index 5797983e44..97fc4378b9 100644
--- a/web/app/components/workflow/operator/index.tsx
+++ b/web/app/components/workflow/operator/index.tsx
@@ -92,7 +92,7 @@ const Operator = ({ handleUndo, handleRedo }: OperatorProps) => {
   return (
     <div
       ref={bottomPanelRef}
-      className="absolute right-0 bottom-0 left-0 z-[60] px-1"
+      className="absolute right-0 bottom-0 left-0 z-10 px-1"
       style={
         {
           width: bottomPanelWidth,
diff --git a/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx b/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
index 573d3e5642..689b2fe0b3 100644
--- a/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
@@ -3,10 +3,10 @@ import type {
   ConversationVariable,
 } from '@/app/components/workflow/types'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import { RiCloseLine } from '@remixicon/react'
 import { useMount } from 'ahooks'
 import copy from 'copy-to-clipboard'
-import { noop } from 'es-toolkit/function'
 import { capitalize } from 'es-toolkit/string'
 import * as React from 'react'
 import { useCallback } from 'react'
@@ -16,7 +16,6 @@ import {
   CopyCheck,
 } from '@/app/components/base/icons/src/vender/line/files'
 import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
-import Modal from '@/app/components/base/modal'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import { ChatVarType } from '@/app/components/workflow/panel/chat-variable-panel/type'
@@ -76,87 +75,86 @@ const ConversationVariableModal = ({
   })
 
   return (
-    <Modal
-      isShow
-      onClose={noop}
-      className={cn('h-[640px] w-[920px] max-w-[920px] p-0')}
-    >
-      <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={onHide}>
-        <RiCloseLine className="h-4 w-4 text-text-tertiary" />
-      </div>
-      <div className="flex h-full w-full">
-        {/* LEFT */}
-        <div className="flex h-full w-[224px] shrink-0 flex-col border-r border-divider-burn bg-background-sidenav-bg">
-          <div className="shrink-0 pt-5 pr-4 pb-3 pl-5 system-xl-semibold text-text-primary">{t('chatVariable.panelTitle', { ns: 'workflow' })}</div>
-          <div className="grow overflow-y-auto px-3 py-2">
-            {varList.map(chatVar => (
-              <div key={chatVar.id} className={cn('group mb-0.5 flex cursor-pointer items-center rounded-lg p-2 hover:bg-state-base-hover', currentVar.id === chatVar.id && 'bg-state-base-hover')} onClick={() => setCurrentVar(chatVar)}>
-                <BubbleX className={cn('mr-1 h-4 w-4 shrink-0 text-text-tertiary group-hover:text-util-colors-teal-teal-700', currentVar.id === chatVar.id && 'text-util-colors-teal-teal-700')} />
-                <div title={chatVar.name} className={cn('truncate system-sm-medium text-text-tertiary group-hover:text-util-colors-teal-teal-700', currentVar.id === chatVar.id && 'text-util-colors-teal-teal-700')}>{chatVar.name}</div>
-              </div>
-            ))}
-          </div>
+    <Dialog open>
+      <DialogContent className={cn('max-h-none w-full overflow-hidden! border-none text-left align-middle', cn('h-[640px] w-[920px] max-w-[920px] p-0'))}>
+
+        <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={onHide}>
+          <RiCloseLine className="h-4 w-4 text-text-tertiary" />
         </div>
-        {/* RIGHT */}
-        <div className="flex h-full w-0 grow flex-col bg-components-panel-bg">
-          <div className="shrink-0 p-4 pb-2">
-            <div className="flex items-center gap-1 py-1">
-              <div className="system-xl-semibold text-text-primary">{currentVar.name}</div>
-              <div className="system-xs-medium text-text-tertiary">{capitalize(currentVar.value_type)}</div>
+        <div className="flex h-full w-full">
+          {/* LEFT */}
+          <div className="flex h-full w-[224px] shrink-0 flex-col border-r border-divider-burn bg-background-sidenav-bg">
+            <div className="shrink-0 pt-5 pr-4 pb-3 pl-5 system-xl-semibold text-text-primary">{t('chatVariable.panelTitle', { ns: 'workflow' })}</div>
+            <div className="grow overflow-y-auto px-3 py-2">
+              {varList.map(chatVar => (
+                <div key={chatVar.id} className={cn('group mb-0.5 flex cursor-pointer items-center rounded-lg p-2 hover:bg-state-base-hover', currentVar.id === chatVar.id && 'bg-state-base-hover')} onClick={() => setCurrentVar(chatVar)}>
+                  <BubbleX className={cn('mr-1 h-4 w-4 shrink-0 text-text-tertiary group-hover:text-util-colors-teal-teal-700', currentVar.id === chatVar.id && 'text-util-colors-teal-teal-700')} />
+                  <div title={chatVar.name} className={cn('truncate system-sm-medium text-text-tertiary group-hover:text-util-colors-teal-teal-700', currentVar.id === chatVar.id && 'text-util-colors-teal-teal-700')}>{chatVar.name}</div>
+                </div>
+              ))}
             </div>
           </div>
-          <div className="flex h-0 grow flex-col p-4 pt-2">
-            <div className="mb-2 flex shrink-0 items-center gap-2">
-              <div className="shrink-0 system-xs-medium-uppercase text-text-tertiary">{t('chatVariable.storedContent', { ns: 'workflow' }).toLocaleUpperCase()}</div>
-              <div
-                className="h-px grow"
-                style={{
-                  background: 'linear-gradient(to right, rgba(16, 24, 40, 0.08) 0%, rgba(255, 255, 255) 100%)',
-                }}
-              >
+          {/* RIGHT */}
+          <div className="flex h-full w-0 grow flex-col bg-components-panel-bg">
+            <div className="shrink-0 p-4 pb-2">
+              <div className="flex items-center gap-1 py-1">
+                <div className="system-xl-semibold text-text-primary">{currentVar.name}</div>
+                <div className="system-xs-medium text-text-tertiary">{capitalize(currentVar.value_type)}</div>
               </div>
-              {!!latestValueTimestampMap[currentVar.id] && (
-                <div className="shrink-0 system-xs-regular text-text-tertiary">
-                  {t('chatVariable.updatedAt', { ns: 'workflow' })}
-                  {formatTime(latestValueTimestampMap[currentVar.id]!, t('dateTimeFormat', { ns: 'appLog' }) as string)}
-                </div>
-              )}
             </div>
-            <div className="grow overflow-y-auto">
-              {currentVar.value_type !== ChatVarType.Number && currentVar.value_type !== ChatVarType.String && (
-                <div className="flex h-full flex-col rounded-lg bg-components-input-bg-normal px-2 pb-2">
-                  <div className="flex h-7 shrink-0 items-center justify-between pt-1 pr-2 pl-3">
-                    <div className="system-xs-semibold text-text-secondary">JSON</div>
-                    <div className="flex items-center p-1">
-                      {!isCopied
-                        ? (
-                            <Copy className="h-4 w-4 cursor-pointer text-text-tertiary" onClick={handleCopy} />
-                          )
-                        : (
-                            <CopyCheck className="h-4 w-4 text-text-tertiary" />
-                          )}
+            <div className="flex h-0 grow flex-col p-4 pt-2">
+              <div className="mb-2 flex shrink-0 items-center gap-2">
+                <div className="shrink-0 system-xs-medium-uppercase text-text-tertiary">{t('chatVariable.storedContent', { ns: 'workflow' }).toLocaleUpperCase()}</div>
+                <div
+                  className="h-px grow"
+                  style={{
+                    background: 'linear-gradient(to right, rgba(16, 24, 40, 0.08) 0%, rgba(255, 255, 255) 100%)',
+                  }}
+                >
+                </div>
+                {!!latestValueTimestampMap[currentVar.id] && (
+                  <div className="shrink-0 system-xs-regular text-text-tertiary">
+                    {t('chatVariable.updatedAt', { ns: 'workflow' })}
+                    {formatTime(latestValueTimestampMap[currentVar.id]!, t('dateTimeFormat', { ns: 'appLog' }) as string)}
+                  </div>
+                )}
+              </div>
+              <div className="grow overflow-y-auto">
+                {currentVar.value_type !== ChatVarType.Number && currentVar.value_type !== ChatVarType.String && (
+                  <div className="flex h-full flex-col rounded-lg bg-components-input-bg-normal px-2 pb-2">
+                    <div className="flex h-7 shrink-0 items-center justify-between pt-1 pr-2 pl-3">
+                      <div className="system-xs-semibold text-text-secondary">JSON</div>
+                      <div className="flex items-center p-1">
+                        {!isCopied
+                          ? (
+                              <Copy className="h-4 w-4 cursor-pointer text-text-tertiary" onClick={handleCopy} />
+                            )
+                          : (
+                              <CopyCheck className="h-4 w-4 text-text-tertiary" />
+                            )}
+                      </div>
+                    </div>
+                    <div className="grow pl-4">
+                      <CodeEditor
+                        readOnly
+                        noWrapper
+                        isExpand
+                        language={CodeLanguage.json}
+                        value={latestValueMap[currentVar.id] || ''}
+                        isJSONStringifyBeauty
+                      />
                     </div>
                   </div>
-                  <div className="grow pl-4">
-                    <CodeEditor
-                      readOnly
-                      noWrapper
-                      isExpand
-                      language={CodeLanguage.json}
-                      value={latestValueMap[currentVar.id] || ''}
-                      isJSONStringifyBeauty
-                    />
-                  </div>
-                </div>
-              )}
-              {(currentVar.value_type === ChatVarType.Number || currentVar.value_type === ChatVarType.String) && (
-                <div className="h-full overflow-x-hidden overflow-y-auto rounded-lg bg-components-input-bg-normal px-4 py-3 system-md-regular text-components-input-text-filled">{latestValueMap[currentVar.id] || ''}</div>
-              )}
+                )}
+                {(currentVar.value_type === ChatVarType.Number || currentVar.value_type === ChatVarType.String) && (
+                  <div className="h-full overflow-x-hidden overflow-y-auto rounded-lg bg-components-input-bg-normal px-4 py-3 system-md-regular text-components-input-text-filled">{latestValueMap[currentVar.id] || ''}</div>
+                )}
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </Modal>
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/web/app/components/workflow/panel/version-history-panel/action-menu/index.tsx b/web/app/components/workflow/panel/version-history-panel/action-menu/index.tsx
index 8299ff2b30..bd0c9934c3 100644
--- a/web/app/components/workflow/panel/version-history-panel/action-menu/index.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/action-menu/index.tsx
@@ -33,7 +33,8 @@ const ActionMenu: FC<ActionMenuProps> = (props: ActionMenuProps) => {
       onOpenChange={setOpen}
     >
       <DropdownMenuTrigger
-        render={<Button size="small" className="px-1" onClick={e => e.stopPropagation()} />}
+        nativeButton={false}
+        render={<Button nativeButton={false} size="small" className="px-1" onClick={e => e.stopPropagation()} />}
       >
         <RiMoreFill className="h-4 w-4" />
       </DropdownMenuTrigger>
diff --git a/web/app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx b/web/app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx
index 1f7948c41b..b2057ae54c 100644
--- a/web/app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx
@@ -1,9 +1,16 @@
 import type { FC } from 'react'
 import type { VersionHistory } from '@/types/workflow'
-import { Button } from '@langgenius/dify-ui/button'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@langgenius/dify-ui/alert-dialog'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Modal from '@/app/components/base/modal'
 
 type DeleteConfirmModalProps = {
   isOpen: boolean
@@ -21,24 +28,36 @@ const DeleteConfirmModal: FC<DeleteConfirmModalProps> = ({
   const { t } = useTranslation()
 
   return (
-    <Modal className="p-0" isShow={isOpen} onClose={onClose}>
-      <div className="flex flex-col gap-y-2 p-6 pb-4">
-        <div className="title-2xl-semi-bold text-text-primary">
-          {`${t('operation.delete', { ns: 'common' })} ${versionInfo.marked_name || t('versionHistory.defaultName', { ns: 'workflow' })}`}
+    <AlertDialog
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open)
+          onClose()
+      }}
+    >
+      <AlertDialogContent className="overflow-hidden! border-none text-left align-middle shadow-xl">
+        <div className="flex flex-col gap-y-2 p-6 pb-4">
+          <AlertDialogTitle className="title-2xl-semi-bold text-text-primary">
+            {`${t('operation.delete', { ns: 'common' })} ${versionInfo.marked_name || t('versionHistory.defaultName', { ns: 'workflow' })}`}
+          </AlertDialogTitle>
+          <AlertDialogDescription className="system-md-regular text-text-secondary">
+            {t('versionHistory.deletionTip', { ns: 'workflow' })}
+          </AlertDialogDescription>
         </div>
-        <p className="system-md-regular text-text-secondary">
-          {t('versionHistory.deletionTip', { ns: 'workflow' })}
-        </p>
-      </div>
-      <div className="flex items-center justify-end gap-x-2 p-6">
-        <Button onClick={onClose}>
-          {t('operation.cancel', { ns: 'common' })}
-        </Button>
-        <Button variant="primary" tone="destructive" onClick={onDelete.bind(null, versionInfo.id)}>
-          {t('operation.delete', { ns: 'common' })}
-        </Button>
-      </div>
-    </Modal>
+        <AlertDialogActions>
+          <AlertDialogCancelButton
+            nativeButton={false}
+            variant="secondary"
+            closeProps={{ nativeButton: false }}
+          >
+            {t('operation.cancel', { ns: 'common' })}
+          </AlertDialogCancelButton>
+          <AlertDialogConfirmButton nativeButton={false} onClick={onDelete.bind(null, versionInfo.id)}>
+            {t('operation.delete', { ns: 'common' })}
+          </AlertDialogConfirmButton>
+        </AlertDialogActions>
+      </AlertDialogContent>
+    </AlertDialog>
   )
 }
 
diff --git a/web/app/components/workflow/panel/version-history-panel/empty.tsx b/web/app/components/workflow/panel/version-history-panel/empty.tsx
index 21751234d7..844b53412e 100644
--- a/web/app/components/workflow/panel/version-history-panel/empty.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/empty.tsx
@@ -22,7 +22,7 @@ const Empty: FC<EmptyProps> = ({
         {t('versionHistory.filter.empty', { ns: 'workflow' })}
       </div>
       <div className="flex justify-center">
-        <Button size="small" onClick={onResetFilter}>
+        <Button nativeButton={false} size="small" onClick={onResetFilter}>
           {t('versionHistory.filter.reset', { ns: 'workflow' })}
         </Button>
       </div>
diff --git a/web/app/components/workflow/panel/version-history-panel/filter/index.tsx b/web/app/components/workflow/panel/version-history-panel/filter/index.tsx
index bb94e3727a..e2277b3fb1 100644
--- a/web/app/components/workflow/panel/version-history-panel/filter/index.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/filter/index.tsx
@@ -42,6 +42,7 @@ const Filter: FC<FilterProps> = ({
       onOpenChange={setOpen}
     >
       <PopoverTrigger
+        nativeButton={false}
         render={(
           <div
             className={cn(
diff --git a/web/app/components/workflow/panel/version-history-panel/restore-confirm-modal.tsx b/web/app/components/workflow/panel/version-history-panel/restore-confirm-modal.tsx
index 9fc2c25742..b001224c08 100644
--- a/web/app/components/workflow/panel/version-history-panel/restore-confirm-modal.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/restore-confirm-modal.tsx
@@ -1,9 +1,16 @@
 import type { FC } from 'react'
 import type { VersionHistory } from '@/types/workflow'
-import { Button } from '@langgenius/dify-ui/button'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@langgenius/dify-ui/alert-dialog'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Modal from '@/app/components/base/modal'
 
 type RestoreConfirmModalProps = {
   isOpen: boolean
@@ -21,24 +28,36 @@ const RestoreConfirmModal: FC<RestoreConfirmModalProps> = ({
   const { t } = useTranslation()
 
   return (
-    <Modal className="p-0" isShow={isOpen} onClose={onClose}>
-      <div className="flex flex-col gap-y-2 p-6 pb-4">
-        <div className="title-2xl-semi-bold text-text-primary">
-          {`${t('common.restore', { ns: 'workflow' })} ${versionInfo.marked_name || t('versionHistory.defaultName', { ns: 'workflow' })}`}
+    <AlertDialog
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open)
+          onClose()
+      }}
+    >
+      <AlertDialogContent className="overflow-hidden! border-none text-left align-middle shadow-xl">
+        <div className="flex flex-col gap-y-2 p-6 pb-4">
+          <AlertDialogTitle className="title-2xl-semi-bold text-text-primary">
+            {`${t('common.restore', { ns: 'workflow' })} ${versionInfo.marked_name || t('versionHistory.defaultName', { ns: 'workflow' })}`}
+          </AlertDialogTitle>
+          <AlertDialogDescription className="system-md-regular text-text-secondary">
+            {t('versionHistory.restorationTip', { ns: 'workflow' })}
+          </AlertDialogDescription>
         </div>
-        <p className="system-md-regular text-text-secondary">
-          {t('versionHistory.restorationTip', { ns: 'workflow' })}
-        </p>
-      </div>
-      <div className="flex items-center justify-end gap-x-2 p-6">
-        <Button onClick={onClose}>
-          {t('operation.cancel', { ns: 'common' })}
-        </Button>
-        <Button variant="primary" onClick={onRestore.bind(null, versionInfo)}>
-          {t('common.restore', { ns: 'workflow' })}
-        </Button>
-      </div>
-    </Modal>
+        <AlertDialogActions>
+          <AlertDialogCancelButton
+            nativeButton={false}
+            variant="secondary"
+            closeProps={{ nativeButton: false }}
+          >
+            {t('operation.cancel', { ns: 'common' })}
+          </AlertDialogCancelButton>
+          <AlertDialogConfirmButton nativeButton={false} tone="default" onClick={onRestore.bind(null, versionInfo)}>
+            {t('common.restore', { ns: 'workflow' })}
+          </AlertDialogConfirmButton>
+        </AlertDialogActions>
+      </AlertDialogContent>
+    </AlertDialog>
   )
 }
 
diff --git a/web/app/components/workflow/update-dsl-modal.tsx b/web/app/components/workflow/update-dsl-modal.tsx
index 549dee487f..c5cb9cc62d 100644
--- a/web/app/components/workflow/update-dsl-modal.tsx
+++ b/web/app/components/workflow/update-dsl-modal.tsx
@@ -2,6 +2,7 @@
 
 import type { MouseEventHandler } from 'react'
 import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
 import { toast } from '@langgenius/dify-ui/toast'
 import {
   RiAlertFill,
@@ -17,7 +18,6 @@ import {
 import { useTranslation } from 'react-i18next'
 import Uploader from '@/app/components/app/create-from-dsl-modal/uploader'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import Modal from '@/app/components/base/modal'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import {
@@ -199,90 +199,100 @@ const UpdateDSLModal = ({
 
   return (
     <>
-      <Modal
-        className="w-[520px] rounded-2xl p-6"
-        isShow={show}
-        onClose={onCancel}
+      <Dialog
+        open={show}
+        onOpenChange={(open) => {
+          if (!open)
+            onCancel()
+        }}
       >
-        <div className="mb-3 flex items-center justify-between">
-          <div className="title-2xl-semi-bold text-text-primary">{t('importApp', { ns: 'app' })}</div>
-          <div className="flex h-[22px] w-[22px] cursor-pointer items-center justify-center" onClick={onCancel}>
-            <RiCloseLine className="h-[18px] w-[18px] text-text-tertiary" />
-          </div>
-        </div>
-        <div className="relative mb-2 flex grow gap-0.5 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-xs">
-          <div className="absolute top-0 left-0 h-full w-full bg-toast-warning-bg opacity-40" />
-          <div className="flex items-start justify-center p-1">
-            <RiAlertFill className="h-4 w-4 shrink-0 text-text-warning-secondary" />
-          </div>
-          <div className="flex grow flex-col items-start gap-0.5 py-1">
-            <div className="system-xs-medium whitespace-pre-line text-text-primary">{t('common.importDSLTip', { ns: 'workflow' })}</div>
-            <div className="flex items-start gap-1 self-stretch pt-1 pb-0.5">
-              <Button
-                size="small"
-                variant="secondary"
-                className="z-1000"
-                onClick={onBackup}
-              >
-                <RiFileDownloadLine className="h-3.5 w-3.5 text-components-button-secondary-text" />
-                <div className="flex items-center justify-center gap-1 px-[3px]">
-                  {t('common.backupCurrentDraft', { ns: 'workflow' })}
-                </div>
-              </Button>
+        <DialogContent className="w-full max-w-[480px]! overflow-hidden! rounded-2xl border-none p-6 text-left align-middle">
+
+          <div className="mb-3 flex items-center justify-between">
+            <div className="title-2xl-semi-bold text-text-primary">{t('importApp', { ns: 'app' })}</div>
+            <div className="flex h-[22px] w-[22px] cursor-pointer items-center justify-center" onClick={onCancel}>
+              <RiCloseLine className="h-[18px] w-[18px] text-text-tertiary" />
             </div>
           </div>
-        </div>
-        <div>
-          <div className="pt-2 system-md-semibold text-text-primary">
-            {t('common.chooseDSL', { ns: 'workflow' })}
+          <div className="relative mb-2 flex grow gap-0.5 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-xs">
+            <div className="absolute top-0 left-0 h-full w-full bg-toast-warning-bg opacity-40" />
+            <div className="flex items-start justify-center p-1">
+              <RiAlertFill className="h-4 w-4 shrink-0 text-text-warning-secondary" />
+            </div>
+            <div className="flex grow flex-col items-start gap-0.5 py-1">
+              <div className="system-xs-medium whitespace-pre-line text-text-primary">{t('common.importDSLTip', { ns: 'workflow' })}</div>
+              <div className="flex items-start gap-1 self-stretch pt-1 pb-0.5">
+                <Button
+                  size="small"
+                  variant="secondary"
+                  className="z-1000"
+                  onClick={onBackup}
+                >
+                  <RiFileDownloadLine className="h-3.5 w-3.5 text-components-button-secondary-text" />
+                  <div className="flex items-center justify-center gap-1 px-[3px]">
+                    {t('common.backupCurrentDraft', { ns: 'workflow' })}
+                  </div>
+                </Button>
+              </div>
+            </div>
           </div>
-          <div className="flex w-full flex-col items-start justify-center gap-4 self-stretch py-4">
-            <Uploader
-              file={currentFile}
-              updateFile={handleFile}
-              className="mt-0! w-full"
-            />
+          <div>
+            <div className="pt-2 system-md-semibold text-text-primary">
+              {t('common.chooseDSL', { ns: 'workflow' })}
+            </div>
+            <div className="flex w-full flex-col items-start justify-center gap-4 self-stretch py-4">
+              <Uploader
+                file={currentFile}
+                updateFile={handleFile}
+                className="mt-0! w-full"
+              />
+            </div>
           </div>
-        </div>
-        <div className="flex items-center justify-end gap-2 self-stretch pt-5">
-          <Button onClick={onCancel}>{t('newApp.Cancel', { ns: 'app' })}</Button>
-          <Button
-            disabled={!currentFile || loading}
-            variant="primary"
-            tone="destructive"
-            onClick={handleImport}
-            loading={loading}
-          >
-            {t('common.overwriteAndImport', { ns: 'workflow' })}
-          </Button>
-        </div>
-      </Modal>
-      <Modal
-        isShow={showErrorModal}
-        onClose={() => setShowErrorModal(false)}
-        className="w-[480px]"
+          <div className="flex items-center justify-end gap-2 self-stretch pt-5">
+            <Button onClick={onCancel}>{t('newApp.Cancel', { ns: 'app' })}</Button>
+            <Button
+              disabled={!currentFile || loading}
+              variant="primary"
+              tone="destructive"
+              onClick={handleImport}
+              loading={loading}
+            >
+              {t('common.overwriteAndImport', { ns: 'workflow' })}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+      <Dialog
+        open={showErrorModal}
+        onOpenChange={(open) => {
+          if (!open)
+            setShowErrorModal(false)
+        }}
       >
-        <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="flex grow flex-col system-md-regular text-text-secondary">
-            <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
-            <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
-            <br />
-            <div>
-              {t('newApp.appCreateDSLErrorPart3', { ns: 'app' })}
-              <span className="system-md-medium">{versions?.importedVersion}</span>
-            </div>
-            <div>
-              {t('newApp.appCreateDSLErrorPart4', { ns: 'app' })}
-              <span className="system-md-medium">{versions?.systemVersion}</span>
+        <DialogContent className="w-full max-w-[480px]! overflow-hidden! border-none text-left align-middle">
+
+          <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="flex grow flex-col system-md-regular text-text-secondary">
+              <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
+              <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
+              <br />
+              <div>
+                {t('newApp.appCreateDSLErrorPart3', { ns: 'app' })}
+                <span className="system-md-medium">{versions?.importedVersion}</span>
+              </div>
+              <div>
+                {t('newApp.appCreateDSLErrorPart4', { ns: 'app' })}
+                <span className="system-md-medium">{versions?.systemVersion}</span>
+              </div>
             </div>
           </div>
-        </div>
-        <div className="flex items-start justify-end gap-2 self-stretch pt-6">
-          <Button variant="secondary" onClick={() => setShowErrorModal(false)}>{t('newApp.Cancel', { ns: 'app' })}</Button>
-          <Button variant="primary" tone="destructive" onClick={onUpdateDSLConfirm}>{t('newApp.Confirm', { ns: 'app' })}</Button>
-        </div>
-      </Modal>
+          <div className="flex items-start justify-end gap-2 self-stretch pt-6">
+            <Button variant="secondary" onClick={() => setShowErrorModal(false)}>{t('newApp.Cancel', { ns: 'app' })}</Button>
+            <Button variant="primary" tone="destructive" onClick={onUpdateDSLConfirm}>{t('newApp.Confirm', { ns: 'app' })}</Button>
+          </div>
+        </DialogContent>
+      </Dialog>
     </>
   )
 }
diff --git a/web/app/education-apply/expire-notice-modal.tsx b/web/app/education-apply/expire-notice-modal.tsx
index e54afaecde..5e07bf0fb1 100644
--- a/web/app/education-apply/expire-notice-modal.tsx
+++ b/web/app/education-apply/expire-notice-modal.tsx
@@ -1,9 +1,9 @@
 'use client'
 import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
 import { RiExternalLinkLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Modal from '@/app/components/base/modal'
 import { useDocLink } from '@/context/i18n'
 import { useModalContextSelector } from '@/context/modal-context'
 import useTimestamp from '@/hooks/use-timestamp'
@@ -41,63 +41,70 @@ const ExpireNoticeModal: React.FC<Props> = ({ expireAt, expired, onClose }) => {
   }
 
   return (
-    <Modal
-      isShow
-      onClose={onClose}
-      title={expired ? t(`${i18nPrefix}.expired.title`, { ns: 'education' }) : t(`${i18nPrefix}.isAboutToExpire.title`, { ns: 'education', date: formatTime(expireAt, t(`${i18nPrefix}.dateFormat`, { ns: 'education' }) as string), interpolation: { escapeValue: false } })}
-      closable
-      className="max-w-[600px]"
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open)
+          onClose()
+      }}
     >
-      <div className="mt-5 space-y-5 body-md-regular text-text-secondary">
-        <div>
-          {expired
-            ? (
-                <>
-                  <div>{t(`${i18nPrefix}.expired.summary.line1`, { ns: 'education' })}</div>
-                  <div>{t(`${i18nPrefix}.expired.summary.line2`, { ns: 'education' })}</div>
-                </>
-              )
-            : t(`${i18nPrefix}.isAboutToExpire.summary`, { ns: 'education' })}
+      <DialogContent className="w-full max-w-[600px] overflow-hidden! border-none text-left align-middle">
+        <DialogCloseButton data-testid="modal-close-button" />
+        <DialogTitle className="title-2xl-semi-bold text-text-primary">
+          {expired ? t(`${i18nPrefix}.expired.title`, { ns: 'education' }) : t(`${i18nPrefix}.isAboutToExpire.title`, { ns: 'education', date: formatTime(expireAt, t(`${i18nPrefix}.dateFormat`, { ns: 'education' }) as string), interpolation: { escapeValue: false } })}
+        </DialogTitle>
+
+        <div className="mt-5 space-y-5 body-md-regular text-text-secondary">
+          <div>
+            {expired
+              ? (
+                  <>
+                    <div>{t(`${i18nPrefix}.expired.summary.line1`, { ns: 'education' })}</div>
+                    <div>{t(`${i18nPrefix}.expired.summary.line2`, { ns: 'education' })}</div>
+                  </>
+                )
+              : t(`${i18nPrefix}.isAboutToExpire.summary`, { ns: 'education' })}
+          </div>
+          <div>
+            <strong className="block title-md-semi-bold">{t(`${i18nPrefix}.stillInEducation.title`, { ns: 'education' })}</strong>
+            {t(`${i18nPrefix}.stillInEducation.${expired ? 'expired' : 'isAboutToExpire'}`, { ns: 'education' })}
+          </div>
+          <div>
+            <strong className="block title-md-semi-bold">{t(`${i18nPrefix}.alreadyGraduated.title`, { ns: 'education' })}</strong>
+            {t(`${i18nPrefix}.alreadyGraduated.${expired ? 'expired' : 'isAboutToExpire'}`, { ns: 'education' })}
+          </div>
         </div>
-        <div>
-          <strong className="block title-md-semi-bold">{t(`${i18nPrefix}.stillInEducation.title`, { ns: 'education' })}</strong>
-          {t(`${i18nPrefix}.stillInEducation.${expired ? 'expired' : 'isAboutToExpire'}`, { ns: 'education' })}
+        <div className="mt-7 flex items-center justify-between space-x-2">
+          <Link className="flex items-center space-x-1 system-xs-regular text-text-accent" href={eduDocLink} target="_blank" rel="noopener noreferrer">
+            <div>{t('learn', { ns: 'education' })}</div>
+            <RiExternalLinkLine className="size-3" />
+          </Link>
+          <div className="flex space-x-2">
+            {expired
+              ? (
+                  <Button
+                    onClick={() => {
+                      onClose()
+                      setShowPricingModal()
+                    }}
+                    className="flex items-center space-x-1"
+                  >
+                    <SparklesSoftAccent className="size-4" />
+                    <div className="text-components-button-secondary-accent-text">{t(`${i18nPrefix}.action.upgrade`, { ns: 'education' })}</div>
+                  </Button>
+                )
+              : (
+                  <Button onClick={onClose}>
+                    {t(`${i18nPrefix}.action.dismiss`, { ns: 'education' })}
+                  </Button>
+                )}
+            <Button variant="primary" onClick={handleConfirm}>
+              {t(`${i18nPrefix}.action.reVerify`, { ns: 'education' })}
+            </Button>
+          </div>
         </div>
-        <div>
-          <strong className="block title-md-semi-bold">{t(`${i18nPrefix}.alreadyGraduated.title`, { ns: 'education' })}</strong>
-          {t(`${i18nPrefix}.alreadyGraduated.${expired ? 'expired' : 'isAboutToExpire'}`, { ns: 'education' })}
-        </div>
-      </div>
-      <div className="mt-7 flex items-center justify-between space-x-2">
-        <Link className="flex items-center space-x-1 system-xs-regular text-text-accent" href={eduDocLink} target="_blank" rel="noopener noreferrer">
-          <div>{t('learn', { ns: 'education' })}</div>
-          <RiExternalLinkLine className="size-3" />
-        </Link>
-        <div className="flex space-x-2">
-          {expired
-            ? (
-                <Button
-                  onClick={() => {
-                    onClose()
-                    setShowPricingModal()
-                  }}
-                  className="flex items-center space-x-1"
-                >
-                  <SparklesSoftAccent className="size-4" />
-                  <div className="text-components-button-secondary-accent-text">{t(`${i18nPrefix}.action.upgrade`, { ns: 'education' })}</div>
-                </Button>
-              )
-            : (
-                <Button onClick={onClose}>
-                  {t(`${i18nPrefix}.action.dismiss`, { ns: 'education' })}
-                </Button>
-              )}
-          <Button variant="primary" onClick={handleConfirm}>
-            {t(`${i18nPrefix}.action.reVerify`, { ns: 'education' })}
-          </Button>
-        </div>
-      </div>
-    </Modal>
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/web/app/education-apply/verify-state-modal.tsx b/web/app/education-apply/verify-state-modal.tsx
index 9103e94f36..ac10f2319e 100644
--- a/web/app/education-apply/verify-state-modal.tsx
+++ b/web/app/education-apply/verify-state-modal.tsx
@@ -1,10 +1,9 @@
 import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
 import {
   RiExternalLinkLine,
 } from '@remixicon/react'
 import * as React from 'react'
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import { useDocLink } from '@/context/i18n'
 
@@ -34,61 +33,25 @@ function Confirm({
 }: IConfirm) {
   const { t } = useTranslation()
   const docLink = useDocLink()
-  const dialogRef = useRef<HTMLDivElement>(null)
-  const [isVisible, setIsVisible] = useState(isShow)
   const eduDocLink = docLink('/use-dify/workspace/subscription-management#dify-for-education')
 
   const handleClick = () => {
     window.open(eduDocLink, '_blank', 'noopener,noreferrer')
   }
 
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape')
-        onCancel()
-    }
-
-    document.addEventListener('keydown', handleKeyDown)
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown)
-    }
-  }, [onCancel])
-
-  const handleClickOutside = useCallback((event: MouseEvent) => {
-    if (maskClosable && dialogRef.current && !dialogRef.current.contains(event.target as Node))
-      onCancel()
-  }, [maskClosable, onCancel])
-
-  useEffect(() => {
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside)
-    }
-  }, [handleClickOutside])
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setIsVisible(isShow)
-    }, isShow ? 0 : 200)
-
-    return () => clearTimeout(timer)
-  }, [isShow])
-
-  if (!isVisible)
-    return null
-
-  return createPortal(
-    <div
-      className="fixed inset-0 z-10000000 flex items-center justify-center bg-background-overlay"
-      onClick={(e) => {
-        e.preventDefault()
-        e.stopPropagation()
+  return (
+    <Dialog
+      open={isShow}
+      onOpenChange={(open) => {
+        if (!open)
+          onCancel()
       }}
+      disablePointerDismissal={!maskClosable}
     >
-      <div ref={dialogRef} className="relative w-full max-w-[481px] overflow-hidden">
+      <DialogContent className="w-full max-w-[481px]! overflow-hidden! border-none bg-transparent p-0! shadow-none">
         <div className="shadows-shadow-lg flex max-w-full flex-col items-start rounded-2xl border-[0.5px] border-solid border-components-panel-border bg-components-panel-bg">
           <div className="flex flex-col items-start gap-2 self-stretch pt-6 pr-6 pb-4 pl-6">
-            <div className="title-2xl-semi-bold text-text-primary">{title}</div>
+            <DialogTitle className="title-2xl-semi-bold text-text-primary">{title}</DialogTitle>
             <div className="w-full system-md-regular text-text-tertiary">{content}</div>
           </div>
           {email && (
@@ -109,9 +72,8 @@ function Confirm({
             <Button variant="primary" className={confirmText ? 'min-w-20!' : 'w-20!'} onClick={onConfirm}>{confirmText || t('operation.ok', { ns: 'common' })}</Button>
           </div>
         </div>
-      </div>
-    </div>,
-    document.body,
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/web/eslint.constants.mjs b/web/eslint.constants.mjs
index eb85d5d902..bd8254b6fb 100644
--- a/web/eslint.constants.mjs
+++ b/web/eslint.constants.mjs
@@ -39,9 +39,19 @@ const BASE_UI_RESTRICTED_IMPORT_PATTERNS = [
   },
 ]
 
+const FLOATING_UI_RESTRICTED_IMPORT_PATTERNS = [
+  {
+    group: [
+      '@floating-ui/*',
+    ],
+    message: 'Do not import Floating UI directly in web. Use @langgenius/dify-ui/* primitives instead.',
+  },
+]
+
 export const WEB_RESTRICTED_IMPORT_PATTERNS = [
   ...NEXT_PLATFORM_RESTRICTED_IMPORT_PATTERNS,
   ...BASE_UI_RESTRICTED_IMPORT_PATTERNS,
+  ...FLOATING_UI_RESTRICTED_IMPORT_PATTERNS,
 ]
 
 export const OVERLAY_RESTRICTED_IMPORT_PATTERNS = [
diff --git a/web/models/pipeline.ts b/web/models/pipeline.ts
index e75ee7569a..30389ab5e0 100644
--- a/web/models/pipeline.ts
+++ b/web/models/pipeline.ts
@@ -89,6 +89,7 @@ export type ImportPipelineDSLResponse = {
   dataset_id: string
   current_dsl_version: string
   imported_dsl_version: string
+  error?: string
 }
 
 export type ImportPipelineDSLConfirmResponse = {
diff --git a/web/package.json b/web/package.json
index 0dd9dfbde5..df1ceed01f 100644
--- a/web/package.json
+++ b/web/package.json
@@ -54,7 +54,6 @@
     "@emoji-mart/data": "catalog:",
     "@floating-ui/react": "catalog:",
     "@formatjs/intl-localematcher": "catalog:",
-    "@headlessui/react": "catalog:",
     "@heroicons/react": "catalog:",
     "@lexical/code": "catalog:",
     "@lexical/link": "catalog:",
diff --git a/web/service/__tests__/use-pipeline.spec.tsx b/web/service/__tests__/use-pipeline.spec.tsx
new file mode 100644
index 0000000000..411d29ac6a
--- /dev/null
+++ b/web/service/__tests__/use-pipeline.spec.tsx
@@ -0,0 +1,81 @@
+import type { ReactNode } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { act, renderHook } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { DSLImportMode, DSLImportStatus } from '@/models/app'
+import { post } from '../base'
+import { useImportPipelineDSL, useImportPipelineDSLConfirm } from '../use-pipeline'
+
+vi.mock('../base', () => ({
+  post: vi.fn(),
+  get: vi.fn(),
+  patch: vi.fn(),
+  del: vi.fn(),
+}))
+
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  })
+
+  return ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>
+      {children}
+    </QueryClientProvider>
+  )
+}
+
+describe('use-pipeline imports', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(post).mockResolvedValue({
+      id: 'import-id',
+      status: DSLImportStatus.COMPLETED,
+      pipeline_id: 'pipeline-id',
+      dataset_id: 'dataset-id',
+      current_dsl_version: '0.1.0',
+      imported_dsl_version: '0.1.0',
+    })
+  })
+
+  it('should import pipeline DSL silently so callers can own error toasts', async () => {
+    const { result } = renderHook(
+      () => useImportPipelineDSL(),
+      { wrapper: createWrapper() },
+    )
+    const request = {
+      mode: DSLImportMode.YAML_CONTENT,
+      yaml_content: 'rag_pipeline: {}',
+    }
+
+    await act(async () => {
+      await result.current.mutateAsync(request)
+    })
+
+    expect(post).toHaveBeenCalledWith(
+      '/rag/pipelines/imports',
+      { body: request },
+      { silent: true },
+    )
+  })
+
+  it('should confirm pipeline DSL import silently so callers can own error toasts', async () => {
+    const { result } = renderHook(
+      () => useImportPipelineDSLConfirm(),
+      { wrapper: createWrapper() },
+    )
+
+    await act(async () => {
+      await result.current.mutateAsync('import-id')
+    })
+
+    expect(post).toHaveBeenCalledWith(
+      '/rag/pipelines/imports/import-id/confirm',
+      {},
+      { silent: true },
+    )
+  })
+})
diff --git a/web/service/use-pipeline.ts b/web/service/use-pipeline.ts
index 6efb5bb8c6..7e1bd9711f 100644
--- a/web/service/use-pipeline.ts
+++ b/web/service/use-pipeline.ts
@@ -113,7 +113,7 @@ export const useImportPipelineDSL = (
   return useMutation({
     mutationKey: [NAME_SPACE, 'dsl-import'],
     mutationFn: (request: ImportPipelineDSLRequest) => {
-      return post<ImportPipelineDSLResponse>('/rag/pipelines/imports', { body: request })
+      return post<ImportPipelineDSLResponse>('/rag/pipelines/imports', { body: request }, { silent: true })
     },
     ...mutationOptions,
   })
@@ -125,7 +125,7 @@ export const useImportPipelineDSLConfirm = (
   return useMutation({
     mutationKey: [NAME_SPACE, 'dsl-import-confirm'],
     mutationFn: (importId: string) => {
-      return post<ImportPipelineDSLConfirmResponse>(`/rag/pipelines/imports/${importId}/confirm`)
+      return post<ImportPipelineDSLConfirmResponse>(`/rag/pipelines/imports/${importId}/confirm`, {}, { silent: true })
     },
     ...mutationOptions,
   })
diff --git a/web/vitest.setup.ts b/web/vitest.setup.ts
index 6211fcd2f4..99d264113e 100644
--- a/web/vitest.setup.ts
+++ b/web/vitest.setup.ts
@@ -1,46 +1,26 @@
 import * as jestDomMatchers from '@testing-library/jest-dom/matchers'
 import { act, cleanup } from '@testing-library/react'
 import * as React from 'react'
-import '@testing-library/jest-dom/vitest'
+import { afterEach, beforeEach, expect, vi } from 'vitest'
 import 'vitest-canvas-mock'
 
-expect.extend(jestDomMatchers)
-
-// Suppress act() warnings from @headlessui/react internal Transition component
-// These warnings are caused by Headless UI's internal async state updates, not our code
-const originalConsoleError = console.error
-console.error = (...args: unknown[]) => {
-  // Check all arguments for the Headless UI TransitionRootFn act warning
-  const fullMessage = args.map(arg => (typeof arg === 'string' ? arg : '')).join(' ')
-  if (fullMessage.includes('TransitionRootFn') && fullMessage.includes('not wrapped in act'))
-    return
-  originalConsoleError.apply(console, args)
+if (typeof expect.extend === 'function') {
+  expect.extend(jestDomMatchers)
 }
 
-// Fix for @headlessui/react compatibility with happy-dom
-// headlessui tries to override focus properties which may be read-only in happy-dom
+(
+  globalThis as typeof globalThis & {
+    BASE_UI_ANIMATIONS_DISABLED: boolean
+  }
+).BASE_UI_ANIMATIONS_DISABLED = true
+
+// Base UI waits for element animations while closing overlays.
 if (typeof window !== 'undefined') {
-  // Provide a minimal animations API polyfill before @headlessui/react boots
   if (typeof Element !== 'undefined' && !Element.prototype.getAnimations)
     Element.prototype.getAnimations = () => []
 
   if (!document.getAnimations)
     document.getAnimations = () => []
-
-  const ensureWritable = (target: object, prop: string) => {
-    const descriptor = Object.getOwnPropertyDescriptor(target, prop)
-    if (descriptor && !descriptor.writable) {
-      const original = descriptor.value ?? descriptor.get?.call(target)
-      Object.defineProperty(target, prop, {
-        value: typeof original === 'function' ? original : vi.fn(),
-        writable: true,
-        configurable: true,
-      })
-    }
-  }
-
-  ensureWritable(window, 'focus')
-  ensureWritable(HTMLElement.prototype, 'focus')
 }
 
 if (typeof globalThis.ResizeObserver === 'undefined') {

From 24ea21db25b8e254de8fef286bd33b245e487766 Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Sat, 9 May 2026 20:18:39 +0800
Subject: [PATCH 06/13] refactor(web): converge overlay layering on dify-ui
 z-50 (#35976)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 eslint-suppressions.json                      |  42 --
 packages/dify-ui/AGENTS.md                    |   2 +-
 packages/dify-ui/README.md                    |  14 +-
 packages/dify-ui/src/alert-dialog/index.tsx   |   4 +-
 .../src/autocomplete/__tests__/index.spec.tsx |   2 +-
 packages/dify-ui/src/autocomplete/index.tsx   |   2 +-
 .../src/combobox/__tests__/index.spec.tsx     |   2 +-
 packages/dify-ui/src/combobox/index.tsx       |   2 +-
 packages/dify-ui/src/context-menu/index.tsx   |   2 +-
 packages/dify-ui/src/dialog/index.tsx         |   8 +-
 .../src/drawer/__tests__/index.spec.tsx       |   2 +-
 packages/dify-ui/src/drawer/index.tsx         |   6 +-
 packages/dify-ui/src/dropdown-menu/index.tsx  |   2 +-
 packages/dify-ui/src/overlay-shared.ts        |   2 +-
 packages/dify-ui/src/popover/index.tsx        |   2 +-
 packages/dify-ui/src/preview-card/index.tsx   |   2 +-
 packages/dify-ui/src/select/index.tsx         |   2 +-
 .../src/toast/__tests__/index.spec.tsx        |   2 +-
 packages/dify-ui/src/toast/index.tsx          |   2 +-
 packages/dify-ui/src/tooltip/index.tsx        |   2 +-
 web/AGENTS.md                                 |   6 +-
 .../annotation/add-annotation-modal/index.tsx | 115 +++--
 .../edit-annotation-modal/index.tsx           | 192 ++++----
 .../view-annotation-modal/index.tsx           | 159 ++++---
 .../inputs-form/__tests__/content.spec.tsx    |   2 +-
 .../inputs-form/__tests__/content.spec.tsx    |   2 +-
 .../base/drawer-plus/__tests__/index.spec.tsx | 446 ------------------
 .../base/drawer-plus/index.stories.tsx        | 124 -----
 web/app/components/base/drawer-plus/index.tsx | 106 -----
 .../pricing/plans/cloud-plan-item/index.tsx   |   1 -
 .../__tests__/index.spec.tsx                  |   2 +-
 .../__tests__/config-credentials.spec.tsx     |  21 +-
 .../config-credentials.tsx                    | 341 +++++++------
 .../get-schema.tsx                            | 147 +++---
 .../edit-custom-collection-modal/index.tsx    | 412 ++++++++--------
 .../edit-custom-collection-modal/test-api.tsx | 160 ++++---
 .../__tests__/config-credentials.spec.tsx     |  12 +-
 .../setting/build-in/config-credentials.tsx   | 143 +++---
 web/docs/lint.md                              |   4 +-
 web/docs/overlay-migration.md                 |  91 ----
 web/docs/overlay.md                           |  44 ++
 web/eslint.config.mjs                         |   2 +-
 web/eslint.constants.mjs                      |  16 -
 web/service/tools.ts                          |   2 +-
 44 files changed, 1052 insertions(+), 1602 deletions(-)
 delete mode 100644 web/app/components/base/drawer-plus/__tests__/index.spec.tsx
 delete mode 100644 web/app/components/base/drawer-plus/index.stories.tsx
 delete mode 100644 web/app/components/base/drawer-plus/index.tsx
 delete mode 100644 web/docs/overlay-migration.md
 create mode 100644 web/docs/overlay.md

diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index f7ff4f8d6d..e49483f63c 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -192,11 +192,6 @@
       "count": 1
     }
   },
-  "web/app/components/app/annotation/add-annotation-modal/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/app/annotation/batch-add-annotation-modal/index.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -222,11 +217,6 @@
       "count": 1
     }
   },
-  "web/app/components/app/annotation/edit-annotation-modal/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/app/annotation/header-opts/index.tsx": {
     "ts/no-explicit-any": {
       "count": 1
@@ -249,9 +239,6 @@
     "erasable-syntax-only/enums": {
       "count": 1
     },
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react/set-state-in-effect": {
       "count": 5
     },
@@ -844,16 +831,6 @@
       "count": 1
     }
   },
-  "web/app/components/base/drawer-plus/index.stories.tsx": {
-    "react/component-hook-factories": {
-      "count": 1
-    }
-  },
-  "web/app/components/base/drawer-plus/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/base/error-boundary/index.tsx": {
     "react-refresh/only-export-components": {
       "count": 3
@@ -2879,20 +2856,7 @@
       "count": 2
     }
   },
-  "web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "web/app/components/tools/edit-custom-collection-modal/get-schema.tsx": {
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
   "web/app/components/tools/edit-custom-collection-modal/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react/set-state-in-effect": {
       "count": 4
     },
@@ -2901,9 +2865,6 @@
     }
   },
   "web/app/components/tools/edit-custom-collection-modal/test-api.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -2944,9 +2905,6 @@
     }
   },
   "web/app/components/tools/setting/build-in/config-credentials.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
diff --git a/packages/dify-ui/AGENTS.md b/packages/dify-ui/AGENTS.md
index bdc2160702..9524394214 100644
--- a/packages/dify-ui/AGENTS.md
+++ b/packages/dify-ui/AGENTS.md
@@ -75,7 +75,7 @@ Composition rules:
 
 - Keep Base UI primitive semantics visible in the public API. Export compound parts such as `ComboboxInputGroup`, `ComboboxInput`, `ComboboxContent`, `ComboboxList`, `ComboboxItem`, and `ComboboxItemIndicator` instead of wrapping them into one business component.
 - For `Combobox` multiple selection, follow the official chips pattern: `ComboboxInputGroup` contains `ComboboxChips`, `ComboboxValue` renders `ComboboxChip` items, and `ComboboxInput` remains inside the chips row. Chips should wrap and let the input group grow vertically instead of forcing horizontal overflow.
-- Content primitives must own their Base UI `Portal` and use `z-1002` on `Positioner`, matching the overlay contract in `README.md`.
+- Content primitives must own their Base UI `Portal` and use `z-50` on `Positioner`, matching the overlay contract in `README.md`. Toast owns `z-60`.
 - Use `w-(--anchor-width)` with viewport-aware max-width for `Autocomplete` and `Combobox` popups. Do not add `min-w-(--anchor-width)` when it would defeat available-width clamping.
 
 [Autocomplete docs]: https://base-ui.com/react/components/autocomplete.md#usage-guidelines
diff --git a/packages/dify-ui/README.md b/packages/dify-ui/README.md
index c78faede89..010fb3e56d 100644
--- a/packages/dify-ui/README.md
+++ b/packages/dify-ui/README.md
@@ -84,18 +84,18 @@ Equivalent: any root element with `isolation: isolate` in CSS. Without it, overl
 
 Every overlay primitive uses a single, shared z-index. Do **not** override it at call sites.
 
-| Layer                                                                                                               | z-index  | Where                                                                      |
-| ------------------------------------------------------------------------------------------------------------------- | -------- | -------------------------------------------------------------------------- |
-| Overlays (Dialog, AlertDialog, Autocomplete, Combobox, Drawer, Popover, DropdownMenu, ContextMenu, Select, Tooltip) | `z-1002` | Positioner / Backdrop                                                      |
-| Toast viewport                                                                                                      | `z-1003` | One layer above overlays so notifications are never hidden under a dialog. |
+| Layer                                                                                                               | z-index | Where                                                                      |
+| ------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------- |
+| Overlays (Dialog, AlertDialog, Autocomplete, Combobox, Drawer, Popover, DropdownMenu, ContextMenu, Select, Tooltip) | `z-50`  | Positioner / Backdrop                                                      |
+| Toast viewport                                                                                                      | `z-60`  | One layer above overlays so notifications are never hidden under a dialog. |
 
-Rationale: during Dify's migration from legacy `base/modal` / `base/dialog` / `base/drawer` / `base/drawer-plus` overlays to this package, new and old overlays coexist in the DOM. `z-1002` sits above any common legacy layer, eliminating per-call-site z-index hacks. Among themselves, new primitives share the same z-index and **rely on DOM order** for stacking — the portal mounted later wins.
+Rationale: Dify UI owns the normal application overlay layer. Overlay primitives share `z-50` and **rely on DOM order** for stacking — the portal mounted later wins. Toast owns `z-60` so notifications remain visible above dialogs, popovers, and other portalled surfaces without falling back to `z-9999`.
 
-See `[web/docs/overlay-migration.md](../../web/docs/overlay-migration.md)` for the Dify-web migration history. Once the legacy overlays are gone, the values in this table can drop back to `z-50` / `z-51`.
+See `[web/docs/overlay.md](../../web/docs/overlay.md)` for the web app overlay best practices.
 
 ### Rules
 
-- Never add `z-1003` / `z-9999` / etc. overrides on primitives from this package. If something is getting clipped, the **parent** overlay (typically a legacy one) is the problem and should be migrated.
+- Never add ad hoc `z-*` overrides on primitives from this package. If something is getting clipped, fix the parent overlay structure instead of raising the child primitive.
 - Never create an extra manual portal on top of our primitives — use the exported content / portal parts such as `DialogContent`, `PopoverContent`, and `DrawerPortal`. Base UI handles focus management, scroll-locking, and dismissal.
 - When a primitive needs additional presentation chrome (e.g. a custom backdrop), add it **inside** the exported component, not at call sites.
 
diff --git a/packages/dify-ui/src/alert-dialog/index.tsx b/packages/dify-ui/src/alert-dialog/index.tsx
index 7b432c87dc..81299ef932 100644
--- a/packages/dify-ui/src/alert-dialog/index.tsx
+++ b/packages/dify-ui/src/alert-dialog/index.tsx
@@ -29,14 +29,14 @@ export function AlertDialogContent({
       <BaseAlertDialog.Backdrop
         {...backdropProps}
         className={cn(
-          'fixed inset-0 z-1002 bg-background-overlay',
+          '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',
           backdropClassName,
         )}
       />
       <BaseAlertDialog.Popup
         className={cn(
-          'fixed top-1/2 left-1/2 z-1002 max-h-[calc(100vh-2rem)] w-[480px] max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 overflow-y-auto overscroll-contain rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg',
+          'fixed top-1/2 left-1/2 z-50 max-h-[calc(100vh-2rem)] w-120 max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 overflow-y-auto overscroll-contain rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg',
           'transition-[transform,scale,opacity] duration-150 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none',
           className,
         )}
diff --git a/packages/dify-ui/src/autocomplete/__tests__/index.spec.tsx b/packages/dify-ui/src/autocomplete/__tests__/index.spec.tsx
index a7031c5b12..5c56dc4c07 100644
--- a/packages/dify-ui/src/autocomplete/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/autocomplete/__tests__/index.spec.tsx
@@ -173,7 +173,7 @@ describe('Autocomplete wrappers', () => {
 
       await expect.element(screen.getByRole('group', { name: 'autocomplete positioner' })).toHaveAttribute('data-side', 'bottom')
       await expect.element(screen.getByRole('group', { name: 'autocomplete positioner' })).toHaveAttribute('data-align', 'start')
-      await expect.element(screen.getByRole('group', { name: 'autocomplete positioner' })).toHaveClass('z-1002')
+      await expect.element(screen.getByRole('group', { name: 'autocomplete positioner' })).toHaveClass('z-50')
       await expect.element(screen.getByRole('dialog', { name: 'autocomplete popup' })).toHaveClass('rounded-xl')
       await expect.element(screen.getByRole('dialog', { name: 'autocomplete popup' })).toHaveClass('w-(--anchor-width)')
       await expect.element(screen.getByRole('listbox', { name: 'autocomplete list' })).toHaveClass('scroll-py-1')
diff --git a/packages/dify-ui/src/autocomplete/index.tsx b/packages/dify-ui/src/autocomplete/index.tsx
index 16c4b19673..4c8893b376 100644
--- a/packages/dify-ui/src/autocomplete/index.tsx
+++ b/packages/dify-ui/src/autocomplete/index.tsx
@@ -261,7 +261,7 @@ export function AutocompleteContent({
         align={align}
         sideOffset={sideOffset}
         alignOffset={alignOffset}
-        className={cn('z-1002 outline-hidden', className)}
+        className={cn('z-50 outline-hidden', className)}
         {...positionerProps}
       >
         <BaseAutocomplete.Popup
diff --git a/packages/dify-ui/src/combobox/__tests__/index.spec.tsx b/packages/dify-ui/src/combobox/__tests__/index.spec.tsx
index 705ebe9601..75968c162f 100644
--- a/packages/dify-ui/src/combobox/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/combobox/__tests__/index.spec.tsx
@@ -231,7 +231,7 @@ describe('Combobox wrappers', () => {
 
       await expect.element(screen.getByRole('group', { name: 'combobox positioner' })).toHaveAttribute('data-side', 'bottom')
       await expect.element(screen.getByRole('group', { name: 'combobox positioner' })).toHaveAttribute('data-align', 'start')
-      await expect.element(screen.getByRole('group', { name: 'combobox positioner' })).toHaveClass('z-1002')
+      await expect.element(screen.getByRole('group', { name: 'combobox positioner' })).toHaveClass('z-50')
       await expect.element(screen.getByRole('dialog', { name: 'combobox popup' })).toHaveClass('rounded-xl')
       await expect.element(screen.getByRole('dialog', { name: 'combobox popup' })).toHaveClass('w-(--anchor-width)')
       await expect.element(screen.getByRole('listbox', { name: 'combobox list' })).toHaveClass('scroll-py-1')
diff --git a/packages/dify-ui/src/combobox/index.tsx b/packages/dify-ui/src/combobox/index.tsx
index c4f03241f6..eb43b911c7 100644
--- a/packages/dify-ui/src/combobox/index.tsx
+++ b/packages/dify-ui/src/combobox/index.tsx
@@ -323,7 +323,7 @@ export function ComboboxContent({
         align={align}
         sideOffset={sideOffset}
         alignOffset={alignOffset}
-        className={cn('z-1002 outline-hidden', className)}
+        className={cn('z-50 outline-hidden', className)}
         {...positionerProps}
       >
         <BaseCombobox.Popup
diff --git a/packages/dify-ui/src/context-menu/index.tsx b/packages/dify-ui/src/context-menu/index.tsx
index 10b9f2c206..e33a94f03f 100644
--- a/packages/dify-ui/src/context-menu/index.tsx
+++ b/packages/dify-ui/src/context-menu/index.tsx
@@ -76,7 +76,7 @@ function renderContextMenuPopup({
         align={align}
         sideOffset={sideOffset}
         alignOffset={alignOffset}
-        className={cn('z-1002 outline-hidden', className)}
+        className={cn('z-50 outline-hidden', className)}
         {...positionerProps}
       >
         <BaseContextMenu.Popup
diff --git a/packages/dify-ui/src/dialog/index.tsx b/packages/dify-ui/src/dialog/index.tsx
index dbb2448ff6..f29517717a 100644
--- a/packages/dify-ui/src/dialog/index.tsx
+++ b/packages/dify-ui/src/dialog/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 //   z-index strategy (relies on root `isolation: isolate` in layout.tsx):
-//   All @langgenius/dify-ui/* overlay primitives — z-1002
-//   Toast stays one layer above overlays at z-1003.
+//   All @langgenius/dify-ui/* overlay primitives — z-50
+//   Toast stays one layer above overlays at z-60.
 //   Overlays share the same z-index; DOM order handles stacking when multiple are open.
 //   This ensures overlays inside a Dialog (e.g. a Tooltip on a dialog button) render
 //   above the dialog backdrop instead of being clipped by it.
@@ -56,14 +56,14 @@ export function DialogContent({
       <BaseDialog.Backdrop
         {...backdropProps}
         className={cn(
-          'fixed inset-0 z-1002 bg-background-overlay',
+          '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',
           backdropClassName,
         )}
       />
       <BaseDialog.Popup
         className={cn(
-          'fixed top-1/2 left-1/2 z-1002 max-h-[80dvh] w-120 max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 overflow-y-auto overscroll-contain rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-6 shadow-xl',
+          'fixed top-1/2 left-1/2 z-50 max-h-[80dvh] w-120 max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 overflow-y-auto overscroll-contain rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-6 shadow-xl',
           'transition-[transform,scale,opacity] duration-150 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none',
           className,
         )}
diff --git a/packages/dify-ui/src/drawer/__tests__/index.spec.tsx b/packages/dify-ui/src/drawer/__tests__/index.spec.tsx
index 8c3a93f02c..a0ca1cdf99 100644
--- a/packages/dify-ui/src/drawer/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/drawer/__tests__/index.spec.tsx
@@ -49,7 +49,7 @@ describe('Drawer wrapper', () => {
       expect(screen.container).not.toContainElement(dialog)
       await expect.element(dialog).toHaveTextContent('Workspace controls')
       await expect.element(screen.getByText('Configure the current workspace.')).toBeInTheDocument()
-      await expect.element(screen.getByTestId('drawer-backdrop')).toHaveClass('z-1002')
+      await expect.element(screen.getByTestId('drawer-backdrop')).toHaveClass('z-50')
 
       asHTMLElement(screen.getByRole('button', { name: 'Close drawer' }).element()).click()
 
diff --git a/packages/dify-ui/src/drawer/index.tsx b/packages/dify-ui/src/drawer/index.tsx
index c63bc8174e..a2ad6dcdaf 100644
--- a/packages/dify-ui/src/drawer/index.tsx
+++ b/packages/dify-ui/src/drawer/index.tsx
@@ -32,7 +32,7 @@ export function DrawerBackdrop({
   return (
     <BaseDrawer.Backdrop
       className={cn(
-        'fixed inset-0 z-1002 bg-background-overlay opacity-[calc(1-var(--drawer-swipe-progress,0))]',
+        'fixed inset-0 z-50 bg-background-overlay opacity-[calc(1-var(--drawer-swipe-progress,0))]',
         'transition-opacity duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 motion-reduce:transition-none',
         className,
       )}
@@ -47,7 +47,7 @@ export function DrawerViewport({
 }: BaseDrawer.Viewport.Props) {
   return (
     <BaseDrawer.Viewport
-      className={cn('fixed inset-0 z-1002 touch-none overflow-hidden overscroll-contain outline-hidden', className)}
+      className={cn('fixed inset-0 z-50 touch-none overflow-hidden overscroll-contain outline-hidden', className)}
       {...props}
     />
   )
@@ -60,7 +60,7 @@ export function DrawerPopup({
   return (
     <BaseDrawer.Popup
       className={cn(
-        'fixed z-1002 flex min-h-0 flex-col overflow-hidden border-[0.5px] border-components-panel-border bg-components-panel-bg text-text-primary shadow-xl outline-hidden touch-none',
+        'fixed z-50 flex min-h-0 flex-col overflow-hidden border-[0.5px] border-components-panel-border bg-components-panel-bg text-text-primary shadow-xl outline-hidden touch-none',
         'transition-[transform,opacity,box-shadow] duration-200 data-swiping:select-none data-swiping:duration-0 motion-reduce:transition-none',
         'data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:h-dvh data-[swipe-direction=right]:w-120 data-[swipe-direction=right]:max-w-[calc(100vw-2rem)] data-[swipe-direction=right]:rounded-l-2xl data-[swipe-direction=right]:border-r-0 data-[swipe-direction=right]:transform-[translateX(var(--drawer-swipe-movement-x,0px))]',
         'data-starting-style:data-[swipe-direction=right]:transform-[translateX(calc(100%+2px))] data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(100%+2px))]',
diff --git a/packages/dify-ui/src/dropdown-menu/index.tsx b/packages/dify-ui/src/dropdown-menu/index.tsx
index f742625964..509d4c9d35 100644
--- a/packages/dify-ui/src/dropdown-menu/index.tsx
+++ b/packages/dify-ui/src/dropdown-menu/index.tsx
@@ -134,7 +134,7 @@ function renderDropdownMenuPopup({
         align={align}
         sideOffset={sideOffset}
         alignOffset={alignOffset}
-        className={cn('z-1002 outline-hidden', className)}
+        className={cn('z-50 outline-hidden', className)}
         {...positionerProps}
       >
         <Menu.Popup
diff --git a/packages/dify-ui/src/overlay-shared.ts b/packages/dify-ui/src/overlay-shared.ts
index cdff8253a1..d6d3a05b9d 100644
--- a/packages/dify-ui/src/overlay-shared.ts
+++ b/packages/dify-ui/src/overlay-shared.ts
@@ -7,4 +7,4 @@ export const overlayLabelClassName = 'px-3 pb-0.5 pt-1 text-text-tertiary system
 export const overlaySeparatorClassName = 'my-1 h-px bg-divider-subtle'
 export const overlayPopupBaseClassName = 'max-h-(--available-height) overflow-y-auto overflow-x-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur py-1 text-sm text-text-secondary shadow-lg outline-hidden focus:outline-hidden focus-visible:outline-hidden backdrop-blur-[5px]'
 export const overlayPopupAnimationClassName = 'origin-(--transform-origin) transition-[transform,scale,opacity] data-ending-style:scale-95 data-starting-style:scale-95 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none'
-export const overlayBackdropClassName = 'fixed inset-0 z-1002 bg-transparent transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none'
+export const overlayBackdropClassName = 'fixed inset-0 z-50 bg-transparent transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none'
diff --git a/packages/dify-ui/src/popover/index.tsx b/packages/dify-ui/src/popover/index.tsx
index 3fc9f98f9a..c29c50d1fe 100644
--- a/packages/dify-ui/src/popover/index.tsx
+++ b/packages/dify-ui/src/popover/index.tsx
@@ -51,7 +51,7 @@ export function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         alignOffset={alignOffset}
-        className={cn('z-1002 outline-hidden', className)}
+        className={cn('z-50 outline-hidden', className)}
         {...positionerProps}
       >
         <BasePopover.Popup
diff --git a/packages/dify-ui/src/preview-card/index.tsx b/packages/dify-ui/src/preview-card/index.tsx
index 771b15cf13..f4448e477a 100644
--- a/packages/dify-ui/src/preview-card/index.tsx
+++ b/packages/dify-ui/src/preview-card/index.tsx
@@ -62,7 +62,7 @@ export function PreviewCardContent({
         align={align}
         sideOffset={sideOffset}
         alignOffset={alignOffset}
-        className={cn('z-1002 outline-hidden', className)}
+        className={cn('z-50 outline-hidden', className)}
         {...positionerProps}
       >
         <BasePreviewCard.Popup
diff --git a/packages/dify-ui/src/select/index.tsx b/packages/dify-ui/src/select/index.tsx
index 2f2f91d9c6..676fcae6b4 100644
--- a/packages/dify-ui/src/select/index.tsx
+++ b/packages/dify-ui/src/select/index.tsx
@@ -135,7 +135,7 @@ export function SelectContent({
         sideOffset={sideOffset}
         alignOffset={alignOffset}
         alignItemWithTrigger={false}
-        className={cn('z-1002 outline-hidden', className)}
+        className={cn('z-50 outline-hidden', className)}
         {...positionerProps}
       >
         <BaseSelect.Popup
diff --git a/packages/dify-ui/src/toast/__tests__/index.spec.tsx b/packages/dify-ui/src/toast/__tests__/index.spec.tsx
index e02f6828ac..68ba746f4f 100644
--- a/packages/dify-ui/src/toast/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/toast/__tests__/index.spec.tsx
@@ -39,7 +39,7 @@ describe('@langgenius/dify-ui/toast', () => {
     await expect.element(screen.getByText('Saved')).toBeInTheDocument()
     await expect.element(screen.getByText('Your changes are available now.')).toBeInTheDocument()
     await expect.element(screen.getByRole('region', { name: 'Notifications' })).toHaveAttribute('aria-live', 'polite')
-    await expect.element(screen.getByRole('region', { name: 'Notifications' })).toHaveClass('z-1003')
+    await expect.element(screen.getByRole('region', { name: 'Notifications' })).toHaveClass('z-60')
     expect(screen.getByRole('region', { name: 'Notifications' }).element().firstElementChild).toHaveClass('top-4')
     expect(screen.getByRole('dialog').element()).not.toHaveClass('outline-hidden')
     expect(document.body.querySelector('[aria-hidden="true"].i-ri-checkbox-circle-fill')).toBeInTheDocument()
diff --git a/packages/dify-ui/src/toast/index.tsx b/packages/dify-ui/src/toast/index.tsx
index a479621563..7d4e867faf 100644
--- a/packages/dify-ui/src/toast/index.tsx
+++ b/packages/dify-ui/src/toast/index.tsx
@@ -222,7 +222,7 @@ function ToastViewport() {
     <BaseToast.Viewport
       aria-label={toastViewportLabel}
       className={cn(
-        'group/toast-viewport pointer-events-none fixed inset-0 z-1003 overflow-visible',
+        'group/toast-viewport pointer-events-none fixed inset-0 z-60 overflow-visible',
       )}
     >
       <div
diff --git a/packages/dify-ui/src/tooltip/index.tsx b/packages/dify-ui/src/tooltip/index.tsx
index 1f9772ce2d..88bd6459f7 100644
--- a/packages/dify-ui/src/tooltip/index.tsx
+++ b/packages/dify-ui/src/tooltip/index.tsx
@@ -58,7 +58,7 @@ export function TooltipContent({
         align={align}
         sideOffset={sideOffset}
         alignOffset={alignOffset}
-        className={cn('z-1002 outline-hidden', positionerClassName)}
+        className={cn('z-50 outline-hidden', positionerClassName)}
       >
         <BaseTooltip.Popup
           className={cn(
diff --git a/web/AGENTS.md b/web/AGENTS.md
index dc72a293d1..2f7e0f6cda 100644
--- a/web/AGENTS.md
+++ b/web/AGENTS.md
@@ -4,10 +4,10 @@
 
 ## Overlay Components (Mandatory)
 
-- `../packages/dify-ui/README.md` is the permanent contract for overlay primitives, portals, root `isolation: isolate`, and the `z-1002` / `z-1003` layering.
-- `./docs/overlay-migration.md` is the source of truth for the ongoing migration (deprecated import paths and coexistence rules).
+- `../packages/dify-ui/README.md` is the permanent contract for overlay primitives, portals, root `isolation: isolate`, and the `z-50` / `z-60` layering.
+- `./docs/overlay.md` records the current web overlay best practices.
 - In new or modified code, use only overlay primitives from `@langgenius/dify-ui/*`.
-- Do not introduce deprecated overlay imports from `@/app/components/base/*`; when touching legacy callers, prefer migrating them.
+- Do not introduce overlay imports from `@/app/components/base/*`; when touching existing callers, migrate them.
 
 ## Query & Mutation (Mandatory)
 
diff --git a/web/app/components/app/annotation/add-annotation-modal/index.tsx b/web/app/components/app/annotation/add-annotation-modal/index.tsx
index ba987a8a8a..53f3cd5bdd 100644
--- a/web/app/components/app/annotation/add-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/add-annotation-modal/index.tsx
@@ -2,12 +2,21 @@
 import type { FC } from 'react'
 import type { AnnotationItemBasic } from '../type'
 import { Button } from '@langgenius/dify-ui/button'
+import {
+  Drawer,
+  DrawerBackdrop,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerPopup,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerViewport,
+} from '@langgenius/dify-ui/drawer'
 import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Checkbox from '@/app/components/base/checkbox'
-import Drawer from '@/app/components/base/drawer-plus'
 import AnnotationFull from '@/app/components/billing/annotation-full'
 import { useProviderContext } from '@/context/provider-context'
 import EditItem, { EditItemType } from './edit-item'
@@ -67,52 +76,72 @@ const AddAnnotationModal: FC<Props> = ({
       onHide()
     }
   }
+  if (!isShow)
+    return null
+
   return (
     <div>
       <Drawer
-        isShow={isShow}
-        onHide={onHide}
-        maxWidthClassName="max-w-[480px]!"
-        title={t('addModal.title', { ns: 'appAnnotation' }) as string}
-        body={(
-          <div className="space-y-6 p-6 pb-4">
-            <EditItem
-              type={EditItemType.Query}
-              content={question}
-              onChange={setQuestion}
-            />
-            <EditItem
-              type={EditItemType.Answer}
-              content={answer}
-              onChange={setAnswer}
-            />
-          </div>
-        )}
-        foot={
-          (
-            <div>
-              {isAnnotationFull && (
-                <div className="mt-6 mb-4 px-6">
-                  <AnnotationFull />
-                </div>
-              )}
-              <div className="flex h-16 items-center justify-between rounded-br-xl rounded-bl-xl border-t border-divider-subtle bg-background-section-burn px-4 system-sm-medium text-text-tertiary">
-                <div
-                  className="flex items-center space-x-2"
-                >
-                  <Checkbox id="create-next-checkbox" checked={isCreateNext} onCheck={() => setIsCreateNext(!isCreateNext)} />
-                  <div>{t('addModal.createNext', { ns: 'appAnnotation' })}</div>
-                </div>
-                <div className="mt-2 flex space-x-2">
-                  <Button className="h-7 text-xs" onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
-                  <Button className="h-7 text-xs" variant="primary" onClick={handleSave} loading={isSaving} disabled={isAnnotationFull}>{t('operation.add', { ns: 'common' })}</Button>
-                </div>
-              </div>
-            </div>
-
-          )
-        }
+        open
+        modal
+        disablePointerDismissal
+        swipeDirection="right"
+        onOpenChange={(open) => {
+          if (!open)
+            onHide()
+        }}
       >
+        <DrawerPortal>
+          <DrawerBackdrop />
+          <DrawerViewport>
+            <DrawerPopup className="data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-3 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-120 data-[swipe-direction=right]:max-w-[calc(100vw-1rem)] data-[swipe-direction=right]:rounded-xl data-[swipe-direction=right]:border-r-[0.5px] data-[swipe-direction=right]:border-divider-subtle">
+              <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
+                <div className="shrink-0 border-b border-divider-subtle py-4">
+                  <div className="flex h-6 items-center justify-between pr-5 pl-6">
+                    <DrawerTitle className="min-w-0 truncate system-xl-semibold text-text-primary">
+                      {t('addModal.title', { ns: 'appAnnotation' })}
+                    </DrawerTitle>
+                    <DrawerCloseButton
+                      aria-label={t('operation.close', { ns: 'common' })}
+                      className="h-6 w-6 rounded-md"
+                    />
+                  </div>
+                </div>
+                <div className="min-h-0 flex-1 overflow-y-auto">
+                  <div className="space-y-6 p-6 pb-4">
+                    <EditItem
+                      type={EditItemType.Query}
+                      content={question}
+                      onChange={setQuestion}
+                    />
+                    <EditItem
+                      type={EditItemType.Answer}
+                      content={answer}
+                      onChange={setAnswer}
+                    />
+                  </div>
+                </div>
+                <div className="shrink-0">
+                  {isAnnotationFull && (
+                    <div className="mt-6 mb-4 px-6">
+                      <AnnotationFull />
+                    </div>
+                  )}
+                  <div className="flex h-16 items-center justify-between rounded-br-xl rounded-bl-xl border-t border-divider-subtle bg-background-section-burn px-4 system-sm-medium text-text-tertiary">
+                    <div className="flex items-center space-x-2">
+                      <Checkbox id="create-next-checkbox" checked={isCreateNext} onCheck={() => setIsCreateNext(!isCreateNext)} />
+                      <div>{t('addModal.createNext', { ns: 'appAnnotation' })}</div>
+                    </div>
+                    <div className="mt-2 flex space-x-2">
+                      <Button className="h-7 text-xs" onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
+                      <Button className="h-7 text-xs" variant="primary" onClick={handleSave} loading={isSaving} disabled={isAnnotationFull}>{t('operation.add', { ns: 'common' })}</Button>
+                    </div>
+                  </div>
+                </div>
+              </DrawerContent>
+            </DrawerPopup>
+          </DrawerViewport>
+        </DrawerPortal>
       </Drawer>
     </div>
   )
diff --git a/web/app/components/app/annotation/edit-annotation-modal/index.tsx b/web/app/components/app/annotation/edit-annotation-modal/index.tsx
index 8e690eca9b..0f6ee0dd1b 100644
--- a/web/app/components/app/annotation/edit-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/edit-annotation-modal/index.tsx
@@ -8,11 +8,20 @@ import {
   AlertDialogContent,
   AlertDialogTitle,
 } from '@langgenius/dify-ui/alert-dialog'
+import {
+  Drawer,
+  DrawerBackdrop,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerPopup,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerViewport,
+} from '@langgenius/dify-ui/drawer'
 import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Drawer from '@/app/components/base/drawer-plus'
 import { MessageCheckRemove } from '@/app/components/base/icons/src/vender/line/communication'
 import AnnotationFull from '@/app/components/billing/annotation-full'
 import { useProviderContext } from '@/context/provider-context'
@@ -90,92 +99,115 @@ const EditAnnotationModal: FC<Props> = ({
     }
   }
   const [showModal, setShowModal] = useState(false)
+  if (!isShow)
+    return null
 
   return (
     <div>
       <Drawer
-        isShow={isShow}
-        onHide={onHide}
-        maxWidthClassName="max-w-[480px]!"
-        title={t('editModal.title', { ns: 'appAnnotation' }) as string}
-        body={(
-          <div>
-            <div className="space-y-6 p-6 pb-4">
-              <EditItem
-                type={EditItemType.Query}
-                content={query}
-                readonly={(isAdd && isAnnotationFull) || onlyEditResponse}
-                onSave={editedContent => handleSave(EditItemType.Query, editedContent)}
-              />
-              <EditItem
-                type={EditItemType.Answer}
-                content={answer}
-                readonly={isAdd && isAnnotationFull}
-                onSave={editedContent => handleSave(EditItemType.Answer, editedContent)}
-              />
-              <AlertDialog open={showModal} onOpenChange={open => !open && setShowModal(false)}>
-                <AlertDialogContent>
-                  <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
-                    <AlertDialogTitle
-                      title={t('feature.annotation.removeConfirm', { ns: 'appDebug' })}
-                      className="w-full truncate title-2xl-semi-bold text-text-primary"
-                    >
-                      {t('feature.annotation.removeConfirm', { ns: 'appDebug' })}
-                    </AlertDialogTitle>
+        open
+        modal
+        disablePointerDismissal
+        swipeDirection="right"
+        onOpenChange={(open) => {
+          if (!open)
+            onHide()
+        }}
+      >
+        <DrawerPortal>
+          <DrawerBackdrop />
+          <DrawerViewport>
+            <DrawerPopup className="data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-3 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-120 data-[swipe-direction=right]:max-w-[calc(100vw-1rem)] data-[swipe-direction=right]:rounded-xl data-[swipe-direction=right]:border-r-[0.5px] data-[swipe-direction=right]:border-divider-subtle">
+              <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
+                <div className="shrink-0 border-b border-divider-subtle py-4">
+                  <div className="flex h-6 items-center justify-between pr-5 pl-6">
+                    <DrawerTitle className="min-w-0 truncate system-xl-semibold text-text-primary">
+                      {t('editModal.title', { ns: 'appAnnotation' })}
+                    </DrawerTitle>
+                    <DrawerCloseButton
+                      aria-label={t('operation.close', { ns: 'common' })}
+                      className="h-6 w-6 rounded-md"
+                    />
                   </div>
-                  <AlertDialogActions>
-                    <AlertDialogCancelButton>
-                      {t('operation.cancel', { ns: 'common' })}
-                    </AlertDialogCancelButton>
-                    <AlertDialogConfirmButton
-                      tone="destructive"
-                      onClick={() => {
-                        onRemove()
-                        setShowModal(false)
-                        onHide()
-                      }}
-                    >
-                      {t('operation.confirm', { ns: 'common' })}
-                    </AlertDialogConfirmButton>
-                  </AlertDialogActions>
-                </AlertDialogContent>
-              </AlertDialog>
-            </div>
-          </div>
-        )}
-        foot={(
-          <div>
-            {isAnnotationFull && (
-              <div className="mt-6 mb-4 px-6">
-                <AnnotationFull />
-              </div>
-            )}
-
-            {
-              annotationId
-                ? (
-                    <div className="flex h-16 items-center justify-between rounded-br-xl rounded-bl-xl border-t border-divider-subtle bg-background-section-burn px-4 system-sm-medium text-text-tertiary">
-                      <div
-                        className="flex cursor-pointer items-center space-x-2 pl-3"
-                        onClick={() => setShowModal(true)}
-                      >
-                        <MessageCheckRemove />
-                        <div>{t('editModal.removeThisCache', { ns: 'appAnnotation' })}</div>
-                      </div>
-                      {!!createdAt && (
-                        <div>
-                          {t('editModal.createdAt', { ns: 'appAnnotation' })}
-&nbsp;
-                          {formatTime(createdAt, t('dateTimeFormat', { ns: 'appLog' }) as string)}
+                </div>
+                <div className="min-h-0 flex-1 overflow-y-auto">
+                  <div className="space-y-6 p-6 pb-4">
+                    <EditItem
+                      type={EditItemType.Query}
+                      content={query}
+                      readonly={(isAdd && isAnnotationFull) || onlyEditResponse}
+                      onSave={editedContent => handleSave(EditItemType.Query, editedContent)}
+                    />
+                    <EditItem
+                      type={EditItemType.Answer}
+                      content={answer}
+                      readonly={isAdd && isAnnotationFull}
+                      onSave={editedContent => handleSave(EditItemType.Answer, editedContent)}
+                    />
+                    <AlertDialog open={showModal} onOpenChange={open => !open && setShowModal(false)}>
+                      <AlertDialogContent>
+                        <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+                          <AlertDialogTitle
+                            title={t('feature.annotation.removeConfirm', { ns: 'appDebug' })}
+                            className="w-full truncate title-2xl-semi-bold text-text-primary"
+                          >
+                            {t('feature.annotation.removeConfirm', { ns: 'appDebug' })}
+                          </AlertDialogTitle>
                         </div>
-                      )}
+                        <AlertDialogActions>
+                          <AlertDialogCancelButton>
+                            {t('operation.cancel', { ns: 'common' })}
+                          </AlertDialogCancelButton>
+                          <AlertDialogConfirmButton
+                            tone="destructive"
+                            onClick={() => {
+                              onRemove()
+                              setShowModal(false)
+                              onHide()
+                            }}
+                          >
+                            {t('operation.confirm', { ns: 'common' })}
+                          </AlertDialogConfirmButton>
+                        </AlertDialogActions>
+                      </AlertDialogContent>
+                    </AlertDialog>
+                  </div>
+                </div>
+                <div className="shrink-0">
+                  {isAnnotationFull && (
+                    <div className="mt-6 mb-4 px-6">
+                      <AnnotationFull />
                     </div>
-                  )
-                : undefined
-            }
-          </div>
-        )}
-      />
+                  )}
+
+                  {
+                    annotationId
+                      ? (
+                          <div className="flex h-16 items-center justify-between rounded-br-xl rounded-bl-xl border-t border-divider-subtle bg-background-section-burn px-4 system-sm-medium text-text-tertiary">
+                            <div
+                              className="flex cursor-pointer items-center space-x-2 pl-3"
+                              onClick={() => setShowModal(true)}
+                            >
+                              <MessageCheckRemove />
+                              <div>{t('editModal.removeThisCache', { ns: 'appAnnotation' })}</div>
+                            </div>
+                            {!!createdAt && (
+                              <div>
+                                {t('editModal.createdAt', { ns: 'appAnnotation' })}
+&nbsp;
+                                {formatTime(createdAt, t('dateTimeFormat', { ns: 'appLog' }) as string)}
+                              </div>
+                            )}
+                          </div>
+                        )
+                      : undefined
+                  }
+                </div>
+              </DrawerContent>
+            </DrawerPopup>
+          </DrawerViewport>
+        </DrawerPortal>
+      </Drawer>
     </div>
 
   )
diff --git a/web/app/components/app/annotation/view-annotation-modal/index.tsx b/web/app/components/app/annotation/view-annotation-modal/index.tsx
index c9f7e8a78f..712fb29c2e 100644
--- a/web/app/components/app/annotation/view-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/view-annotation-modal/index.tsx
@@ -10,11 +10,20 @@ import {
   AlertDialogTitle,
 } from '@langgenius/dify-ui/alert-dialog'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Drawer,
+  DrawerBackdrop,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerPopup,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerViewport,
+} from '@langgenius/dify-ui/drawer'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
-import Drawer from '@/app/components/base/drawer-plus'
 import { MessageCheckRemove } from '@/app/components/base/icons/src/vender/line/communication'
 import Pagination from '@/app/components/base/pagination'
 import TabSlider from '@/app/components/base/tab-slider-plain'
@@ -198,75 +207,97 @@ const ViewAnnotationModal: FC<Props> = ({
         </div>
 
       )
+  if (!isShow)
+    return null
+
   return (
     <div>
       <Drawer
-        isShow={isShow}
-        onHide={onHide}
-        maxWidthClassName="max-w-[800px]!"
-        title={(
-          <TabSlider
-            className="relative top-[9px] shrink-0"
-            value={activeTab}
-            onChange={v => setActiveTab(v as TabType)}
-            options={tabs}
-            noBorderBottom
-            itemClassName="pb-3.5!"
-          />
-        )}
-        body={(
-          <div>
-            <div className="space-y-6 p-6 pb-4">
-              {activeTab === TabType.annotation ? annotationTab : hitHistoryTab}
-            </div>
-            <AlertDialog open={showModal} onOpenChange={open => !open && setShowModal(false)}>
-              <AlertDialogContent>
-                <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
-                  <AlertDialogTitle
-                    title={t('feature.annotation.removeConfirm', { ns: 'appDebug' })}
-                    className="w-full truncate title-2xl-semi-bold text-text-primary"
-                  >
-                    {t('feature.annotation.removeConfirm', { ns: 'appDebug' })}
-                  </AlertDialogTitle>
+        open
+        modal
+        disablePointerDismissal
+        swipeDirection="right"
+        onOpenChange={(open) => {
+          if (!open)
+            onHide()
+        }}
+      >
+        <DrawerPortal>
+          <DrawerBackdrop />
+          <DrawerViewport>
+            <DrawerPopup className="data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-3 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-200 data-[swipe-direction=right]:max-w-[calc(100vw-1rem)] data-[swipe-direction=right]:rounded-xl data-[swipe-direction=right]:border-r-[0.5px] data-[swipe-direction=right]:border-divider-subtle">
+              <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
+                <div className="shrink-0 border-b border-divider-subtle py-4">
+                  <div className="flex h-6 items-center justify-between pr-5 pl-6">
+                    <DrawerTitle render={<div />} className="min-w-0">
+                      <TabSlider
+                        className="relative top-[9px] shrink-0"
+                        value={activeTab}
+                        onChange={v => setActiveTab(v as TabType)}
+                        options={tabs}
+                        noBorderBottom
+                        itemClassName="pb-3.5!"
+                      />
+                    </DrawerTitle>
+                    <DrawerCloseButton
+                      aria-label={t('operation.close', { ns: 'common' })}
+                      className="h-6 w-6 rounded-md"
+                    />
+                  </div>
                 </div>
-                <AlertDialogActions>
-                  <AlertDialogCancelButton>
-                    {t('operation.cancel', { ns: 'common' })}
-                  </AlertDialogCancelButton>
-                  <AlertDialogConfirmButton
-                    tone="destructive"
-                    onClick={async () => {
-                      await onRemove()
-                      setShowModal(false)
-                      onHide()
-                    }}
-                  >
-                    {t('operation.confirm', { ns: 'common' })}
-                  </AlertDialogConfirmButton>
-                </AlertDialogActions>
-              </AlertDialogContent>
-            </AlertDialog>
-          </div>
-        )}
-        foot={id
-          ? (
-              <div className="flex h-16 items-center justify-between rounded-br-xl rounded-bl-xl border-t border-divider-subtle bg-background-section-burn px-4 system-sm-medium text-text-tertiary">
-                <div
-                  className="flex cursor-pointer items-center space-x-2 pl-3"
-                  onClick={() => setShowModal(true)}
-                >
-                  <MessageCheckRemove />
-                  <div>{t('editModal.removeThisCache', { ns: 'appAnnotation' })}</div>
+                <div className="min-h-0 flex-1 overflow-y-auto">
+                  <div className="space-y-6 p-6 pb-4">
+                    {activeTab === TabType.annotation ? annotationTab : hitHistoryTab}
+                  </div>
+                  <AlertDialog open={showModal} onOpenChange={open => !open && setShowModal(false)}>
+                    <AlertDialogContent>
+                      <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+                        <AlertDialogTitle
+                          title={t('feature.annotation.removeConfirm', { ns: 'appDebug' })}
+                          className="w-full truncate title-2xl-semi-bold text-text-primary"
+                        >
+                          {t('feature.annotation.removeConfirm', { ns: 'appDebug' })}
+                        </AlertDialogTitle>
+                      </div>
+                      <AlertDialogActions>
+                        <AlertDialogCancelButton>
+                          {t('operation.cancel', { ns: 'common' })}
+                        </AlertDialogCancelButton>
+                        <AlertDialogConfirmButton
+                          tone="destructive"
+                          onClick={async () => {
+                            await onRemove()
+                            setShowModal(false)
+                            onHide()
+                          }}
+                        >
+                          {t('operation.confirm', { ns: 'common' })}
+                        </AlertDialogConfirmButton>
+                      </AlertDialogActions>
+                    </AlertDialogContent>
+                  </AlertDialog>
                 </div>
-                <div>
-                  {t('editModal.createdAt', { ns: 'appAnnotation' })}
+                {id && (
+                  <div className="flex h-16 shrink-0 items-center justify-between rounded-br-xl rounded-bl-xl border-t border-divider-subtle bg-background-section-burn px-4 system-sm-medium text-text-tertiary">
+                    <div
+                      className="flex cursor-pointer items-center space-x-2 pl-3"
+                      onClick={() => setShowModal(true)}
+                    >
+                      <MessageCheckRemove />
+                      <div>{t('editModal.removeThisCache', { ns: 'appAnnotation' })}</div>
+                    </div>
+                    <div>
+                      {t('editModal.createdAt', { ns: 'appAnnotation' })}
 &nbsp;
-                  {formatTime(createdAt, t('dateTimeFormat', { ns: 'appLog' }) as string)}
-                </div>
-              </div>
-            )
-          : undefined}
-      />
+                      {formatTime(createdAt, t('dateTimeFormat', { ns: 'appLog' }) as string)}
+                    </div>
+                  </div>
+                )}
+              </DrawerContent>
+            </DrawerPopup>
+          </DrawerViewport>
+        </DrawerPortal>
+      </Drawer>
     </div>
 
   )
diff --git a/web/app/components/base/chat/chat-with-history/inputs-form/__tests__/content.spec.tsx b/web/app/components/base/chat/chat-with-history/inputs-form/__tests__/content.spec.tsx
index 8d3c7002d7..a53bdc3b93 100644
--- a/web/app/components/base/chat/chat-with-history/inputs-form/__tests__/content.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/inputs-form/__tests__/content.spec.tsx
@@ -258,7 +258,7 @@ describe('InputsFormContent', () => {
     renderWithContext(<InputsFormContent />, context)
     await user.click(screen.getByText('B'))
 
-    expect(screen.getByText('A').closest('.z-1002')).not.toBeNull()
+    expect(screen.getByText('A').closest('.z-50')).not.toBeNull()
   })
 
   it('handles select input with existing value (value not in options -> shows placeholder)', () => {
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/content.spec.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/content.spec.tsx
index 47c273d163..d552af8cec 100644
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/content.spec.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/content.spec.tsx
@@ -208,7 +208,7 @@ describe('InputsFormContent', () => {
 
     await user.click(selectTrigger)
 
-    expect(screen.getByText('Option 1').closest('.z-1002')).not.toBeNull()
+    expect(screen.getByText('Option 1').closest('.z-50')).not.toBeNull()
   })
 
   it('should handle single file upload change', async () => {
diff --git a/web/app/components/base/drawer-plus/__tests__/index.spec.tsx b/web/app/components/base/drawer-plus/__tests__/index.spec.tsx
deleted file mode 100644
index b3a7d2cd2b..0000000000
--- a/web/app/components/base/drawer-plus/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,446 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import * as React from 'react'
-import DrawerPlus from '..'
-
-vi.mock('@/hooks/use-breakpoints', () => ({
-  default: () => 'desktop',
-  MediaType: { mobile: 'mobile', desktop: 'desktop', tablet: 'tablet' },
-}))
-
-describe('DrawerPlus', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Rendering', () => {
-    it('should not render when isShow is false', () => {
-      render(
-        <DrawerPlus
-          isShow={false}
-          onHide={() => {}}
-          title="Test Drawer"
-          body={<div>Content</div>}
-        />,
-      )
-
-      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
-    })
-
-    it('should render when isShow is true', () => {
-      const bodyContent = <div>Body Content</div>
-      render(
-        <DrawerPlus
-          isShow={true}
-          onHide={() => {}}
-          title="Test Drawer"
-          body={bodyContent}
-        />,
-      )
-
-      expect(screen.getByRole('dialog')).toBeInTheDocument()
-      expect(screen.getByText('Test Drawer')).toBeInTheDocument()
-      expect(screen.getByText('Body Content')).toBeInTheDocument()
-    })
-
-    it('should render footer when provided', () => {
-      const footerContent = <div>Footer Content</div>
-      render(
-        <DrawerPlus
-          isShow={true}
-          onHide={() => {}}
-          title="Test Drawer"
-          body={<div>Body</div>}
-          foot={footerContent}
-        />,
-      )
-
-      expect(screen.getByText('Footer Content')).toBeInTheDocument()
-    })
-
-    it('should render JSX element as title', () => {
-      const titleElement = <h1 data-testid="custom-title">Custom Title</h1>
-      render(
-        <DrawerPlus
-          isShow={true}
-          onHide={() => {}}
-          title={titleElement}
-          body={<div>Body</div>}
-        />,
-      )
-
-      expect(screen.getByTestId('custom-title')).toBeInTheDocument()
-    })
-
-    it('should render titleDescription when provided', () => {
-      render(
-        <DrawerPlus
-          isShow={true}
-          onHide={() => {}}
-          title="Test Drawer"
-          titleDescription="Description text"
-          body={<div>Body</div>}
-        />,
-      )
-
-      expect(screen.getByText('Description text')).toBeInTheDocument()
-    })
-
-    it('should not render titleDescription when not provided', () => {
-      render(
-        <DrawerPlus
-          isShow={true}
-          onHide={() => {}}
-          title="Test Drawer"
-          body={<div>Body</div>}
-        />,
-      )
-
-      expect(screen.queryByText(/Description/)).not.toBeInTheDocument()
-    })
-
-    it('should render JSX element as titleDescription', () => {
-      const descElement = <span data-testid="custom-desc">Custom Description</span>
-      render(
-        <DrawerPlus
-          isShow={true}
-          onHide={() => {}}
-          title="Test"
-          titleDescription={descElement}
-          body={<div>Body</div>}
-        />,
-      )
-
-      expect(screen.getByTestId('custom-desc')).toBeInTheDocument()
-    })
-  })
-
-  describe('Props - Display Options', () => {
-    it('should apply default maxWidthClassName', () => {
-      render(
-        <DrawerPlus
-          isShow={true}
-          onHide={() => {}}
-          title="Test"
-          body={<div>Body</div>}
-        />,
-      )
-      const innerPanel = screen.getByText('Test').closest('.bg-components-panel-bg')
-      const outerPanel = innerPanel?.parentElement
-      expect(outerPanel?.className).toContain('max-w-[640px]!')
-    })
-
-    it('should apply custom maxWidthClassName', () => {
-      render(
-        <DrawerPlus
-          isShow={true}
-          onHide={() => {}}
-          title="Test"
-          body={<div>Body</div>}
-          maxWidthClassName="max-w-[800px]!"
-        />,
-      )
-
-      const innerPanel = screen.getByText('Test').closest('.bg-components-panel-bg')
-      const outerPanel = innerPanel?.parentElement
-      expect(outerPanel?.className).toContain('max-w-[800px]!')
-    })
-
-    it('should apply custom panelClassName', () => {
-      render(
-        <DrawerPlus
-          isShow={true}
-          onHide={() => {}}
-          title="Test"
-          body={<div>Body</div>}
-          panelClassName="custom-panel"
-        />,
-      )
-
-      const innerPanel = screen.getByText('Test').closest('.bg-components-panel-bg')
-      const outerPanel = innerPanel?.parentElement
-      expect(outerPanel?.className).toContain('custom-panel')
-    })
-
-    it('should apply custom dialogClassName', () => {
-      render(
-        <DrawerPlus
-          isShow={true}
-          onHide={() => {}}
-          title="Test"
-          body={<div>Body</div>}
-          dialogClassName="custom-dialog"
-        />,
-      )
-
-      expect(document.querySelector('.custom-dialog')).toBeInTheDocument()
-    })
-
-    it('should apply custom contentClassName', () => {
-      render(
-        <DrawerPlus
-          isShow={true}
-          onHide={() => {}}
-          title="Test"
-          body={<div>Body</div>}
-          contentClassName="custom-content"
-        />,
-      )
-      const title = screen.getByText('Test')
-      const header = title.closest('.shrink-0.border-b.border-divider-subtle')
-      const content = header?.parentElement
-      expect(content?.className).toContain('custom-content')
-    })
-
-    it('should apply custom headerClassName', () => {
-      render(
-        <DrawerPlus
-          isShow={true}
-          onHide={() => {}}
-          title="Test"
-          body={<div>Body</div>}
-          headerClassName="custom-header"
-        />,
-      )
-
-      const title = screen.getByText('Test')
-      const header = title.closest('.shrink-0.border-b.border-divider-subtle')
-      expect(header?.className).toContain('custom-header')
-    })
-
-    it('should apply custom height', () => {
-      render(
-        <DrawerPlus
-          isShow={true}
-          onHide={() => {}}
-          title="Test"
-          body={<div>Body</div>}
-          height="500px"
-        />,
-      )
-
-      const title = screen.getByText('Test')
-      const header = title.closest('.shrink-0.border-b.border-divider-subtle')
-      const content = header?.parentElement
-      expect(content?.getAttribute('style')).toContain('height: 500px')
-    })
-
-    it('should use default height', () => {
-      render(
-        <DrawerPlus
-          isShow={true}
-          onHide={() => {}}
-          title="Test"
-          body={<div>Body</div>}
-        />,
-      )
-
-      const title = screen.getByText('Test')
-      const header = title.closest('.shrink-0.border-b.border-divider-subtle')
-      const content = header?.parentElement
-      expect(content?.getAttribute('style')).toContain('calc(100vh - 72px)')
-    })
-  })
-
-  describe('Event Handlers', () => {
-    it('should call onHide when close button is clicked', () => {
-      const handleHide = vi.fn()
-      render(
-        <DrawerPlus
-          isShow={true}
-          onHide={handleHide}
-          title="Test"
-          body={<div>Body</div>}
-        />,
-      )
-
-      const title = screen.getByText('Test')
-      const headerRight = title.nextElementSibling // .flex items-center
-      const closeDiv = headerRight?.querySelector('.cursor-pointer') as HTMLElement
-
-      fireEvent.click(closeDiv)
-      expect(handleHide).toHaveBeenCalledTimes(1)
-    })
-  })
-
-  describe('Complex Content', () => {
-    it('should render complex JSX elements in body', () => {
-      const complexBody = (
-        <div>
-          <h2>Header</h2>
-          <p>Paragraph</p>
-          <button>Action Button</button>
-        </div>
-      )
-
-      render(
-        <DrawerPlus
-          isShow={true}
-          onHide={() => {}}
-          title="Test"
-          body={complexBody}
-        />,
-      )
-
-      expect(screen.getByText('Header')).toBeInTheDocument()
-      expect(screen.getByText('Paragraph')).toBeInTheDocument()
-      expect(screen.getByRole('button', { name: 'Action Button' })).toBeInTheDocument()
-    })
-
-    it('should render complex footer', () => {
-      const complexFooter = (
-        <div className="footer-actions">
-          <button>Cancel</button>
-          <button>Save</button>
-        </div>
-      )
-
-      render(
-        <DrawerPlus
-          isShow={true}
-          onHide={() => {}}
-          title="Test"
-          body={<div>Body</div>}
-          foot={complexFooter}
-        />,
-      )
-
-      expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument()
-      expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument()
-    })
-  })
-
-  describe('Edge Cases', () => {
-    it('should handle empty title', () => {
-      render(
-        <DrawerPlus
-          isShow={true}
-          onHide={() => {}}
-          title=""
-          body={<div>Body</div>}
-        />,
-      )
-
-      expect(screen.getByRole('dialog')).toBeInTheDocument()
-    })
-
-    it('should handle undefined titleDescription', () => {
-      render(
-        <DrawerPlus
-          isShow={true}
-          onHide={() => {}}
-          title="Test"
-          titleDescription={undefined}
-          body={<div>Body</div>}
-        />,
-      )
-
-      expect(screen.getByRole('dialog')).toBeInTheDocument()
-    })
-
-    it('should handle rapid isShow toggle', () => {
-      const { rerender } = render(
-        <DrawerPlus
-          isShow={true}
-          onHide={() => {}}
-          title="Test"
-          body={<div>Body</div>}
-        />,
-      )
-
-      expect(screen.getByRole('dialog')).toBeInTheDocument()
-
-      rerender(
-        <DrawerPlus
-          isShow={false}
-          onHide={() => {}}
-          title="Test"
-          body={<div>Body</div>}
-        />,
-      )
-
-      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
-
-      rerender(
-        <DrawerPlus
-          isShow={true}
-          onHide={() => {}}
-          title="Test"
-          body={<div>Body</div>}
-        />,
-      )
-
-      expect(screen.getByRole('dialog')).toBeInTheDocument()
-    })
-
-    it('should handle special characters in title', () => {
-      const specialTitle = 'Test <> & " \' | Drawer'
-      render(
-        <DrawerPlus
-          isShow={true}
-          onHide={() => {}}
-          title={specialTitle}
-          body={<div>Body</div>}
-        />,
-      )
-
-      expect(screen.getByText(specialTitle)).toBeInTheDocument()
-    })
-
-    it('should handle empty body content', () => {
-      render(
-        <DrawerPlus
-          isShow={true}
-          onHide={() => {}}
-          title="Test"
-          body={<div></div>}
-        />,
-      )
-
-      expect(screen.getByRole('dialog')).toBeInTheDocument()
-    })
-
-    it('should apply both custom maxWidth and panel classNames', () => {
-      render(
-        <DrawerPlus
-          isShow={true}
-          onHide={() => {}}
-          title="Test"
-          body={<div>Body</div>}
-          maxWidthClassName="max-w-[500px]!"
-          panelClassName="custom-style"
-        />,
-      )
-
-      const innerPanel = screen.getByText('Test').closest('.bg-components-panel-bg')
-      const outerPanel = innerPanel?.parentElement
-      expect(outerPanel?.className).toContain('max-w-[500px]!')
-      expect(outerPanel?.className).toContain('custom-style')
-    })
-  })
-
-  describe('Memoization', () => {
-    it('should be memoized and not re-render on parent changes', () => {
-      const { rerender } = render(
-        <DrawerPlus
-          isShow={true}
-          onHide={() => {}}
-          title="Test"
-          body={<div>Body</div>}
-        />,
-      )
-
-      const dialog = screen.getByRole('dialog')
-
-      rerender(
-        <DrawerPlus
-          isShow={true}
-          onHide={() => {}}
-          title="Test"
-          body={<div>Body</div>}
-        />,
-      )
-
-      expect(dialog).toBeInTheDocument()
-    })
-  })
-})
diff --git a/web/app/components/base/drawer-plus/index.stories.tsx b/web/app/components/base/drawer-plus/index.stories.tsx
deleted file mode 100644
index 4bdfef2ab3..0000000000
--- a/web/app/components/base/drawer-plus/index.stories.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { useState } from 'react'
-import { fn } from 'storybook/test'
-import DrawerPlus from '.'
-
-const meta = {
-  title: 'Base/Feedback/DrawerPlus',
-  component: DrawerPlus,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component: 'Enhanced drawer built atop the base drawer component. Provides header/foot slots, mask control, and mobile breakpoints.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof DrawerPlus>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-type DrawerPlusProps = React.ComponentProps<typeof DrawerPlus>
-
-const storyBodyElement: React.JSX.Element = (
-  <div className="space-y-3 p-6 text-sm text-text-secondary">
-    <p>
-      DrawerPlus allows rich content with sticky header/footer and responsive masking on mobile. Great for editing flows or showing execution logs.
-    </p>
-    <div className="rounded-lg border border-divider-subtle bg-components-panel-bg p-3 text-xs">
-      Body content scrolls if it exceeds the allotted height.
-    </div>
-  </div>
-)
-
-const DrawerPlusDemo = (props: Partial<DrawerPlusProps>) => {
-  const [open, setOpen] = useState(false)
-
-  const {
-    body,
-    title,
-    foot,
-    isShow: _isShow,
-    onHide: _onHide,
-    ...rest
-  } = props
-
-  const resolvedBody: React.JSX.Element = body ?? storyBodyElement
-
-  return (
-    <div className="flex h-[400px] items-center justify-center bg-background-default-subtle">
-      <button
-        type="button"
-        className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700"
-        onClick={() => setOpen(true)}
-      >
-        Open drawer plus
-      </button>
-
-      <DrawerPlus
-        {...rest as Omit<DrawerPlusProps, 'isShow' | 'onHide' | 'title' | 'body' | 'foot'>}
-        isShow={open}
-        onHide={() => setOpen(false)}
-        title={title ?? 'Workflow execution details'}
-        body={resolvedBody}
-        foot={foot}
-      />
-    </div>
-  )
-}
-
-export const Playground: Story = {
-  render: args => <DrawerPlusDemo {...args} />,
-  args: {
-    isShow: false,
-    onHide: fn(),
-    title: 'Edit configuration',
-    body: storyBodyElement,
-  },
-}
-
-export const WithFooter: Story = {
-  render: (args) => {
-    const FooterDemo = () => {
-      const [open, setOpen] = useState(false)
-      return (
-        <div className="flex h-[400px] items-center justify-center bg-background-default-subtle">
-          <button
-            type="button"
-            className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700"
-            onClick={() => setOpen(true)}
-          >
-            Open drawer plus
-          </button>
-
-          <DrawerPlus
-            {...args}
-            isShow={open}
-            onHide={() => setOpen(false)}
-            title={args.title ?? 'Workflow execution details'}
-            body={args.body ?? (
-              <div className="space-y-3 p-6 text-sm text-text-secondary">
-                <p>Populate the body with scrollable content. Footer stays pinned.</p>
-              </div>
-            )}
-            foot={(
-              <div className="flex justify-end gap-2 border-t border-divider-subtle bg-components-panel-bg p-4">
-                <button className="rounded-md border border-divider-subtle px-3 py-1.5 text-sm text-text-secondary" onClick={() => setOpen(false)}>Cancel</button>
-                <button className="rounded-md bg-primary-600 px-3 py-1.5 text-sm text-white">Save</button>
-              </div>
-            )}
-          />
-        </div>
-      )
-    }
-    return <FooterDemo />
-  },
-  args: {
-    isShow: false,
-    onHide: fn(),
-    title: 'Edit configuration!',
-    body: storyBodyElement,
-  },
-}
diff --git a/web/app/components/base/drawer-plus/index.tsx b/web/app/components/base/drawer-plus/index.tsx
deleted file mode 100644
index 261022669b..0000000000
--- a/web/app/components/base/drawer-plus/index.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import { cn } from '@langgenius/dify-ui/cn'
-import { RiCloseLine } from '@remixicon/react'
-import * as React from 'react'
-import { useRef } from 'react'
-import Drawer from '@/app/components/base/drawer'
-import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
-
-type Props = {
-  isShow: boolean
-  onHide: () => void
-  dialogClassName?: string
-  dialogBackdropClassName?: string
-  panelClassName?: string
-  maxWidthClassName?: string
-  contentClassName?: string
-  headerClassName?: string
-  height?: number | string
-  title: string | React.JSX.Element
-  titleDescription?: string | React.JSX.Element
-  body: React.JSX.Element
-  foot?: React.JSX.Element
-  isShowMask?: boolean
-  clickOutsideNotOpen?: boolean
-  positionCenter?: boolean
-}
-
-const DrawerPlus: FC<Props> = ({
-  isShow,
-  onHide,
-  dialogClassName = '',
-  dialogBackdropClassName = '',
-  panelClassName = '',
-  maxWidthClassName = 'max-w-[640px]!',
-  height = 'calc(100vh - 72px)',
-  contentClassName,
-  headerClassName,
-  title,
-  titleDescription,
-  body,
-  foot,
-  isShowMask,
-  clickOutsideNotOpen = true,
-  positionCenter,
-}) => {
-  const ref = useRef(null)
-  const media = useBreakpoints()
-  const isMobile = media === MediaType.mobile
-
-  if (!isShow)
-    return null
-
-  return (
-    // clickOutsideNotOpen to fix confirm modal click cause drawer close
-    <Drawer
-      isOpen={isShow}
-      clickOutsideNotOpen={clickOutsideNotOpen}
-      onClose={onHide}
-      footer={null}
-      mask={isMobile || isShowMask}
-      positionCenter={positionCenter}
-      dialogClassName={dialogClassName}
-      dialogBackdropClassName={dialogBackdropClassName}
-      panelClassName={cn('mx-2 mt-16 mb-3 rounded-xl p-0! sm:mr-2', panelClassName, maxWidthClassName)}
-    >
-      <div
-        className={cn(contentClassName, 'flex w-full flex-col rounded-xl border-[0.5px] border-divider-subtle bg-components-panel-bg shadow-xl')}
-        style={{
-          height,
-        }}
-        ref={ref}
-      >
-        <div className={cn(headerClassName, 'shrink-0 border-b border-divider-subtle py-4')}>
-          <div className="flex h-6 items-center justify-between pr-5 pl-6">
-            <div className="system-xl-semibold text-text-primary">
-              {title}
-            </div>
-            <div className="flex items-center">
-              <div
-                onClick={onHide}
-                className="flex h-6 w-6 cursor-pointer items-center justify-center"
-              >
-                <RiCloseLine className="h-4 w-4 text-text-tertiary" />
-              </div>
-            </div>
-          </div>
-          {titleDescription && (
-            <div className="pr-10 pl-6 system-xs-regular text-text-tertiary">
-              {titleDescription}
-            </div>
-          )}
-        </div>
-        <div className="grow overflow-y-auto">
-          {body}
-        </div>
-        {foot && (
-          <div className="shrink-0">
-            {foot}
-          </div>
-        )}
-      </div>
-    </Drawer>
-  )
-}
-export default React.memo(DrawerPlus)
diff --git a/web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx b/web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx
index d3dc47b29f..e6546a469c 100644
--- a/web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx
+++ b/web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx
@@ -201,7 +201,6 @@ const CloudPlanItem: FC<CloudPlanItemProps> = ({
         open={showEducationPricingConfirm}
         onOpenChange={setShowEducationPricingConfirm}
       >
-        {showEducationPricingConfirm && <div className="fixed inset-0 z-1002 bg-background-overlay"></div>}
         <AlertDialogContent>
           <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
             <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
diff --git a/web/app/components/header/account-setting/members-page/edit-workspace-modal/__tests__/index.spec.tsx b/web/app/components/header/account-setting/members-page/edit-workspace-modal/__tests__/index.spec.tsx
index 206a7c0148..db7b69f7cb 100644
--- a/web/app/components/header/account-setting/members-page/edit-workspace-modal/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-setting/members-page/edit-workspace-modal/__tests__/index.spec.tsx
@@ -57,7 +57,7 @@ describe('EditWorkspaceModal', () => {
   it('should render on the dify-ui overlay layer', async () => {
     renderModal()
 
-    expect(await screen.findByRole('dialog')).toHaveClass('z-1002')
+    expect(await screen.findByRole('dialog')).toHaveClass('z-50')
   })
 
   it('should let user edit workspace name', async () => {
diff --git a/web/app/components/tools/edit-custom-collection-modal/__tests__/config-credentials.spec.tsx b/web/app/components/tools/edit-custom-collection-modal/__tests__/config-credentials.spec.tsx
index ec4866b212..98a7b10c76 100644
--- a/web/app/components/tools/edit-custom-collection-modal/__tests__/config-credentials.spec.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/__tests__/config-credentials.spec.tsx
@@ -1,5 +1,5 @@
 import type { Credential } from '@/app/components/tools/types'
-import { act, fireEvent, render, screen } from '@testing-library/react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { AuthHeaderPrefix, AuthType } from '@/app/components/tools/types'
 import ConfigCredential from '../config-credentials'
@@ -82,6 +82,25 @@ describe('ConfigCredential', () => {
       expect(mockOnChange).not.toHaveBeenCalled()
     })
 
+    it('should call onHide when Escape is pressed', async () => {
+      await act(async () => {
+        render(
+          <ConfigCredential
+            credential={baseCredential}
+            onChange={mockOnChange}
+            onHide={mockOnHide}
+          />,
+        )
+      })
+
+      fireEvent.keyDown(document, { key: 'Escape' })
+
+      await waitFor(() => {
+        expect(mockOnHide).toHaveBeenCalledTimes(1)
+      })
+      expect(mockOnChange).not.toHaveBeenCalled()
+    })
+
     it('should call both onChange and onHide when save is pressed', async () => {
       await act(async () => {
         render(
diff --git a/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx b/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
index 9ed7c45165..dde11b56f3 100644
--- a/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
@@ -1,11 +1,19 @@
 'use client'
-import type { FC } from 'react'
 import type { Credential } from '@/app/components/tools/types'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
+import {
+  Drawer,
+  DrawerBackdrop,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerPopup,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerViewport,
+} from '@langgenius/dify-ui/drawer'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Drawer from '@/app/components/base/drawer-plus'
 import { Infotip } from '@/app/components/base/infotip'
 import Input from '@/app/components/base/input'
 import Radio from '@/app/components/base/radio/ui'
@@ -25,175 +33,200 @@ type ItemProps = {
   onClick: (value: AuthType | AuthHeaderPrefix) => void
 }
 
-const SelectItem: FC<ItemProps> = ({ text, value, isChecked, onClick }) => {
+function SelectItem({ text, value, isChecked, onClick }: ItemProps) {
   return (
-    <div
-      className={cn(isChecked ? 'border-2 border-util-colors-indigo-indigo-600 bg-components-panel-on-panel-item-bg shadow-sm' : 'border border-components-card-border', 'mb-2 flex h-9 w-[150px] cursor-pointer items-center space-x-2 rounded-xl bg-components-panel-on-panel-item-bg pl-3 hover:bg-components-panel-on-panel-item-bg-hover')}
+    <button
+      type="button"
+      className={cn(
+        isChecked ? 'border-2 border-util-colors-indigo-indigo-600 bg-components-panel-on-panel-item-bg shadow-sm' : 'border border-components-card-border',
+        'mb-2 flex h-9 w-37.5 cursor-pointer items-center space-x-2 rounded-xl bg-components-panel-on-panel-item-bg pl-3 text-left outline-hidden hover:bg-components-panel-on-panel-item-bg-hover focus-visible:ring-1 focus-visible:ring-components-input-border-hover',
+      )}
       onClick={() => onClick(value)}
     >
       <Radio isChecked={isChecked} />
       <div className="system-sm-regular text-text-primary">{text}</div>
-    </div>
+    </button>
   )
 }
 
-const ConfigCredential: FC<Props> = ({
+export default function ConfigCredential({
   positionCenter,
   credential,
   onChange,
   onHide,
-}) => {
+}: Props) {
   const { t } = useTranslation()
-  const [tempCredential, setTempCredential] = React.useState<Credential>(credential)
+  const [tempCredential, setTempCredential] = useState<Credential>(credential)
 
   return (
     <Drawer
-      isShow
-      positionCenter={positionCenter}
-      onHide={onHide}
-      title={t('createTool.authMethod.title', { ns: 'tools' })!}
-      dialogClassName="z-60"
-      dialogBackdropClassName="z-70"
-      panelClassName="mt-2 w-[520px]! h-fit z-80"
-      maxWidthClassName="max-w-[520px]!"
-      height="fit-content"
-      headerClassName="border-b-divider-regular!"
-      body={(
-        <div className="px-6 pt-2">
-          <div className="space-y-4">
-            <div>
-              <div className="py-2 system-sm-medium text-text-primary">{t('createTool.authMethod.type', { ns: 'tools' })}</div>
-              <div className="flex space-x-3">
-                <SelectItem
-                  text={t('createTool.authMethod.types.none', { ns: 'tools' })}
-                  value={AuthType.none}
-                  isChecked={tempCredential.auth_type === AuthType.none}
-                  onClick={value => setTempCredential({
-                    auth_type: value as AuthType,
-                  })}
-                />
-                <SelectItem
-                  text={t('createTool.authMethod.types.api_key_header', { ns: 'tools' })}
-                  value={AuthType.apiKeyHeader}
-                  isChecked={tempCredential.auth_type === AuthType.apiKeyHeader}
-                  onClick={value => setTempCredential({
-                    auth_type: value as AuthType,
-                    api_key_header: tempCredential.api_key_header || 'Authorization',
-                    api_key_value: tempCredential.api_key_value || '',
-                    api_key_header_prefix: tempCredential.api_key_header_prefix || AuthHeaderPrefix.custom,
-                  })}
-                />
-                <SelectItem
-                  text={t('createTool.authMethod.types.api_key_query', { ns: 'tools' })}
-                  value={AuthType.apiKeyQuery}
-                  isChecked={tempCredential.auth_type === AuthType.apiKeyQuery}
-                  onClick={value => setTempCredential({
-                    auth_type: value as AuthType,
-                    api_key_query_param: tempCredential.api_key_query_param || 'key',
-                    api_key_value: tempCredential.api_key_value || '',
-                  })}
-                />
+      open
+      modal
+      disablePointerDismissal
+      swipeDirection="right"
+      onOpenChange={(open) => {
+        if (!open)
+          onHide()
+      }}
+    >
+      <DrawerPortal>
+        <DrawerBackdrop forceRender />
+        <DrawerViewport>
+          <DrawerPopup
+            className={cn(
+              'data-[swipe-direction=right]:top-2 data-[swipe-direction=right]:bottom-auto data-[swipe-direction=right]:h-fit data-[swipe-direction=right]:max-h-[calc(100dvh-1rem)] data-[swipe-direction=right]:w-130 data-[swipe-direction=right]:max-w-[calc(100vw-1rem)] data-[swipe-direction=right]:rounded-xl data-[swipe-direction=right]:border-r-[0.5px] data-[swipe-direction=right]:border-divider-subtle',
+              positionCenter
+                ? 'data-[swipe-direction=right]:right-[max(0.5rem,calc(50%_-_260px))]'
+                : 'data-[swipe-direction=right]:right-2',
+            )}
+          >
+            <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
+              <div className="shrink-0 border-b border-divider-regular py-4">
+                <div className="flex h-6 items-center justify-between pr-5 pl-6">
+                  <DrawerTitle className="min-w-0 truncate system-xl-semibold text-text-primary">
+                    {t('createTool.authMethod.title', { ns: 'tools' })}
+                  </DrawerTitle>
+                  <DrawerCloseButton
+                    aria-label={t('operation.close', { ns: 'common' })}
+                    className="h-6 w-6 rounded-md"
+                  />
+                </div>
               </div>
-            </div>
-            {tempCredential.auth_type === AuthType.apiKeyHeader && (
-              <>
-                <div>
-                  <div className="py-2 system-sm-medium text-text-primary">{t('createTool.authHeaderPrefix.title', { ns: 'tools' })}</div>
-                  <div className="flex space-x-3">
-                    <SelectItem
-                      text={t('createTool.authHeaderPrefix.types.basic', { ns: 'tools' })}
-                      value={AuthHeaderPrefix.basic}
-                      isChecked={tempCredential.api_key_header_prefix === AuthHeaderPrefix.basic}
-                      onClick={value => setTempCredential({ ...tempCredential, api_key_header_prefix: value as AuthHeaderPrefix })}
-                    />
-                    <SelectItem
-                      text={t('createTool.authHeaderPrefix.types.bearer', { ns: 'tools' })}
-                      value={AuthHeaderPrefix.bearer}
-                      isChecked={tempCredential.api_key_header_prefix === AuthHeaderPrefix.bearer}
-                      onClick={value => setTempCredential({ ...tempCredential, api_key_header_prefix: value as AuthHeaderPrefix })}
-                    />
-                    <SelectItem
-                      text={t('createTool.authHeaderPrefix.types.custom', { ns: 'tools' })}
-                      value={AuthHeaderPrefix.custom}
-                      isChecked={tempCredential.api_key_header_prefix === AuthHeaderPrefix.custom}
-                      onClick={value => setTempCredential({ ...tempCredential, api_key_header_prefix: value as AuthHeaderPrefix })}
-                    />
+              <div className="min-h-0 flex-1 overflow-y-auto px-6 pt-2">
+                <div className="space-y-4">
+                  <div>
+                    <div className="py-2 system-sm-medium text-text-primary">{t('createTool.authMethod.type', { ns: 'tools' })}</div>
+                    <div className="flex space-x-3">
+                      <SelectItem
+                        text={t('createTool.authMethod.types.none', { ns: 'tools' })}
+                        value={AuthType.none}
+                        isChecked={tempCredential.auth_type === AuthType.none}
+                        onClick={value => setTempCredential({
+                          auth_type: value as AuthType,
+                        })}
+                      />
+                      <SelectItem
+                        text={t('createTool.authMethod.types.api_key_header', { ns: 'tools' })}
+                        value={AuthType.apiKeyHeader}
+                        isChecked={tempCredential.auth_type === AuthType.apiKeyHeader}
+                        onClick={value => setTempCredential({
+                          auth_type: value as AuthType,
+                          api_key_header: tempCredential.api_key_header || 'Authorization',
+                          api_key_value: tempCredential.api_key_value || '',
+                          api_key_header_prefix: tempCredential.api_key_header_prefix || AuthHeaderPrefix.custom,
+                        })}
+                      />
+                      <SelectItem
+                        text={t('createTool.authMethod.types.api_key_query', { ns: 'tools' })}
+                        value={AuthType.apiKeyQuery}
+                        isChecked={tempCredential.auth_type === AuthType.apiKeyQuery}
+                        onClick={value => setTempCredential({
+                          auth_type: value as AuthType,
+                          api_key_query_param: tempCredential.api_key_query_param || 'key',
+                          api_key_value: tempCredential.api_key_value || '',
+                        })}
+                      />
+                    </div>
                   </div>
+                  {tempCredential.auth_type === AuthType.apiKeyHeader && (
+                    <>
+                      <div>
+                        <div className="py-2 system-sm-medium text-text-primary">{t('createTool.authHeaderPrefix.title', { ns: 'tools' })}</div>
+                        <div className="flex space-x-3">
+                          <SelectItem
+                            text={t('createTool.authHeaderPrefix.types.basic', { ns: 'tools' })}
+                            value={AuthHeaderPrefix.basic}
+                            isChecked={tempCredential.api_key_header_prefix === AuthHeaderPrefix.basic}
+                            onClick={value => setTempCredential({ ...tempCredential, api_key_header_prefix: value as AuthHeaderPrefix })}
+                          />
+                          <SelectItem
+                            text={t('createTool.authHeaderPrefix.types.bearer', { ns: 'tools' })}
+                            value={AuthHeaderPrefix.bearer}
+                            isChecked={tempCredential.api_key_header_prefix === AuthHeaderPrefix.bearer}
+                            onClick={value => setTempCredential({ ...tempCredential, api_key_header_prefix: value as AuthHeaderPrefix })}
+                          />
+                          <SelectItem
+                            text={t('createTool.authHeaderPrefix.types.custom', { ns: 'tools' })}
+                            value={AuthHeaderPrefix.custom}
+                            isChecked={tempCredential.api_key_header_prefix === AuthHeaderPrefix.custom}
+                            onClick={value => setTempCredential({ ...tempCredential, api_key_header_prefix: value as AuthHeaderPrefix })}
+                          />
+                        </div>
+                      </div>
+                      <div>
+                        <div className="flex items-center py-2 system-sm-medium text-text-primary">
+                          {t('createTool.authMethod.key', { ns: 'tools' })}
+                          <Infotip
+                            aria-label={t('createTool.authMethod.keyTooltip', { ns: 'tools' })}
+                            className="ml-0.5 h-4 w-4"
+                            popupClassName="w-[261px] text-text-tertiary"
+                          >
+                            {t('createTool.authMethod.keyTooltip', { ns: 'tools' })}
+                          </Infotip>
+                        </div>
+                        <Input
+                          value={tempCredential.api_key_header}
+                          onChange={e => setTempCredential({ ...tempCredential, api_key_header: e.target.value })}
+                          placeholder={t('createTool.authMethod.types.apiKeyPlaceholder', { ns: 'tools' })!}
+                        />
+                      </div>
+                      <div>
+                        <div className="py-2 system-sm-medium text-text-primary">{t('createTool.authMethod.value', { ns: 'tools' })}</div>
+                        <Input
+                          value={tempCredential.api_key_value}
+                          onChange={e => setTempCredential({ ...tempCredential, api_key_value: e.target.value })}
+                          placeholder={t('createTool.authMethod.types.apiValuePlaceholder', { ns: 'tools' })!}
+                        />
+                      </div>
+                    </>
+                  )}
+                  {tempCredential.auth_type === AuthType.apiKeyQuery && (
+                    <>
+                      <div>
+                        <div className="flex items-center py-2 system-sm-medium text-text-primary">
+                          {t('createTool.authMethod.queryParam', { ns: 'tools' })}
+                          <Infotip
+                            aria-label={t('createTool.authMethod.queryParamTooltip', { ns: 'tools' })}
+                            className="ml-0.5 h-4 w-4"
+                            popupClassName="w-[261px] text-text-tertiary"
+                          >
+                            {t('createTool.authMethod.queryParamTooltip', { ns: 'tools' })}
+                          </Infotip>
+                        </div>
+                        <Input
+                          value={tempCredential.api_key_query_param}
+                          onChange={e => setTempCredential({ ...tempCredential, api_key_query_param: e.target.value })}
+                          placeholder={t('createTool.authMethod.types.queryParamPlaceholder', { ns: 'tools' })!}
+                        />
+                      </div>
+                      <div>
+                        <div className="py-2 system-sm-medium text-text-primary">{t('createTool.authMethod.value', { ns: 'tools' })}</div>
+                        <Input
+                          value={tempCredential.api_key_value}
+                          onChange={e => setTempCredential({ ...tempCredential, api_key_value: e.target.value })}
+                          placeholder={t('createTool.authMethod.types.apiValuePlaceholder', { ns: 'tools' })!}
+                        />
+                      </div>
+                    </>
+                  )}
                 </div>
-                <div>
-                  <div className="flex items-center py-2 system-sm-medium text-text-primary">
-                    {t('createTool.authMethod.key', { ns: 'tools' })}
-                    <Infotip
-                      aria-label={t('createTool.authMethod.keyTooltip', { ns: 'tools' })}
-                      className="ml-0.5 h-4 w-4"
-                      popupClassName="w-[261px] text-text-tertiary"
-                    >
-                      {t('createTool.authMethod.keyTooltip', { ns: 'tools' })}
-                    </Infotip>
-                  </div>
-                  <Input
-                    value={tempCredential.api_key_header}
-                    onChange={e => setTempCredential({ ...tempCredential, api_key_header: e.target.value })}
-                    placeholder={t('createTool.authMethod.types.apiKeyPlaceholder', { ns: 'tools' })!}
-                  />
-                </div>
-                <div>
-                  <div className="py-2 system-sm-medium text-text-primary">{t('createTool.authMethod.value', { ns: 'tools' })}</div>
-                  <Input
-                    value={tempCredential.api_key_value}
-                    onChange={e => setTempCredential({ ...tempCredential, api_key_value: e.target.value })}
-                    placeholder={t('createTool.authMethod.types.apiValuePlaceholder', { ns: 'tools' })!}
-                  />
-                </div>
-              </>
-            )}
-            {tempCredential.auth_type === AuthType.apiKeyQuery && (
-              <>
-                <div>
-                  <div className="flex items-center py-2 system-sm-medium text-text-primary">
-                    {t('createTool.authMethod.queryParam', { ns: 'tools' })}
-                    <Infotip
-                      aria-label={t('createTool.authMethod.queryParamTooltip', { ns: 'tools' })}
-                      className="ml-0.5 h-4 w-4"
-                      popupClassName="w-[261px] text-text-tertiary"
-                    >
-                      {t('createTool.authMethod.queryParamTooltip', { ns: 'tools' })}
-                    </Infotip>
-                  </div>
-                  <Input
-                    value={tempCredential.api_key_query_param}
-                    onChange={e => setTempCredential({ ...tempCredential, api_key_query_param: e.target.value })}
-                    placeholder={t('createTool.authMethod.types.queryParamPlaceholder', { ns: 'tools' })!}
-                  />
-                </div>
-                <div>
-                  <div className="py-2 system-sm-medium text-text-primary">{t('createTool.authMethod.value', { ns: 'tools' })}</div>
-                  <Input
-                    value={tempCredential.api_key_value}
-                    onChange={e => setTempCredential({ ...tempCredential, api_key_value: e.target.value })}
-                    placeholder={t('createTool.authMethod.types.apiValuePlaceholder', { ns: 'tools' })!}
-                  />
-                </div>
-              </>
-            )}
-
-          </div>
-
-          <div className="mt-4 flex shrink-0 justify-end space-x-2 py-4">
-            <Button onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
-            <Button
-              variant="primary"
-              onClick={() => {
-                onChange(tempCredential)
-                onHide()
-              }}
-            >
-              {t('operation.save', { ns: 'common' })}
-            </Button>
-          </div>
-        </div>
-      )}
-    />
+              </div>
+              <div className="mt-4 flex shrink-0 justify-end space-x-2 py-4 pr-6 pl-6">
+                <Button onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
+                <Button
+                  variant="primary"
+                  onClick={() => {
+                    onChange(tempCredential)
+                    onHide()
+                  }}
+                >
+                  {t('operation.save', { ns: 'common' })}
+                </Button>
+              </div>
+            </DrawerContent>
+          </DrawerPopup>
+        </DrawerViewport>
+      </DrawerPortal>
+    </Drawer>
   )
 }
-export default React.memo(ConfigCredential)
diff --git a/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx b/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx
index 2bb5059870..b07d21ce14 100644
--- a/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx
@@ -1,12 +1,13 @@
 'use client'
 import type { FC } from 'react'
 import { Button } from '@langgenius/dify-ui/button'
-import { toast } from '@langgenius/dify-ui/toast'
 import {
-  RiAddLine,
-  RiArrowDownSLine,
-} from '@remixicon/react'
-import { useClickAway } from 'ahooks'
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
+import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -32,7 +33,7 @@ const GetSchema: FC<Props> = ({
     }
     setIsParsing(true)
     try {
-      const { schema } = await importSchemaFromURL(importUrl) as any
+      const { schema } = await importSchemaFromURL(importUrl)
       setImportUrl('')
       onChange(schema)
     }
@@ -42,79 +43,79 @@ const GetSchema: FC<Props> = ({
     }
   }
 
-  const importURLRef = React.useRef(null)
-  useClickAway(() => {
-    setShowImportFromUrl(false)
-  }, importURLRef)
-
   const [showExamples, setShowExamples] = useState(false)
-  const showExamplesRef = React.useRef(null)
-  useClickAway(() => {
-    setShowExamples(false)
-  }, showExamplesRef)
 
   return (
-    <div className="relative flex w-[224px] justify-end space-x-1">
-      <div ref={importURLRef}>
-        <Button
-          size="small"
-          className="space-x-1"
-          onClick={() => { setShowImportFromUrl(!showImportFromUrl) }}
+    <div className="flex w-[224px] justify-end gap-1">
+      <DropdownMenu open={showImportFromUrl} onOpenChange={setShowImportFromUrl}>
+        <DropdownMenuTrigger
+          render={(
+            <Button
+              size="small"
+              className="gap-1"
+            />
+          )}
         >
-          <RiAddLine className="h-3 w-3" />
-          <div className="system-xs-medium text-text-secondary">{t('createTool.importFromUrl', { ns: 'tools' })}</div>
-        </Button>
-        {showImportFromUrl && (
-          <div className="absolute top-[26px] left-[-35px] rounded-lg border border-components-panel-border bg-components-panel-bg p-2 shadow-lg">
-            <div className="relative">
-              <Input
-                type="text"
-                className="w-[244px]"
-                placeholder={t('createTool.importFromUrlPlaceHolder', { ns: 'tools' })!}
-                value={importUrl}
-                onChange={e => setImportUrl(e.target.value)}
-              />
-              <Button
-                className="absolute top-1 right-1"
-                size="small"
-                variant="primary"
-                disabled={!importUrl}
-                onClick={handleImportFromUrl}
-                loading={isParsing}
-              >
-                {isParsing ? '' : t('operation.ok', { ns: 'common' })}
-              </Button>
-            </div>
-          </div>
-        )}
-      </div>
-      <div className="relative -mt-0.5" ref={showExamplesRef}>
-        <Button
-          size="small"
-          className="space-x-1"
-          onClick={() => { setShowExamples(!showExamples) }}
+          <span className="i-ri-add-line size-3" aria-hidden />
+          <span className="system-xs-medium text-text-secondary">{t('createTool.importFromUrl', { ns: 'tools' })}</span>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          placement="bottom-start"
+          sideOffset={2}
+          popupClassName="w-[300px] p-2"
         >
-          <div className="system-xs-medium text-text-secondary">{t('createTool.examples', { ns: 'tools' })}</div>
-          <RiArrowDownSLine className="h-3 w-3" />
-        </Button>
-        {showExamples && (
-          <div className="absolute top-7 right-0 rounded-lg bg-components-panel-bg p-1 shadow-sm">
-            {examples.map(item => (
-              <div
-                key={item.key}
-                onClick={() => {
-                  onChange(item.content)
-                  setShowExamples(false)
-                }}
-                className="cursor-pointer rounded-lg px-3 py-1.5 system-sm-regular leading-5 whitespace-nowrap text-text-secondary hover:bg-components-panel-on-panel-item-bg-hover"
-              >
-                {t(`createTool.exampleOptions.${item.key}`, { ns: 'tools' })}
-              </div>
-            ))}
+          <div className="relative">
+            <Input
+              type="text"
+              className="w-full"
+              placeholder={t('createTool.importFromUrlPlaceHolder', { ns: 'tools' })!}
+              value={importUrl}
+              onChange={e => setImportUrl(e.target.value)}
+            />
+            <Button
+              className="absolute top-1 right-1"
+              size="small"
+              variant="primary"
+              disabled={!importUrl}
+              onClick={handleImportFromUrl}
+              loading={isParsing}
+            >
+              {isParsing ? '' : t('operation.ok', { ns: 'common' })}
+            </Button>
           </div>
-        )}
-
-      </div>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <DropdownMenu open={showExamples} onOpenChange={setShowExamples}>
+        <DropdownMenuTrigger
+          render={(
+            <Button
+              size="small"
+              className="gap-1"
+            />
+          )}
+        >
+          <span className="system-xs-medium text-text-secondary">{t('createTool.examples', { ns: 'tools' })}</span>
+          <span className="i-ri-arrow-down-s-line size-3" aria-hidden />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          placement="bottom-end"
+          sideOffset={2}
+          popupClassName="min-w-max"
+        >
+          {examples.map(item => (
+            <DropdownMenuItem
+              key={item.key}
+              onClick={() => {
+                onChange(item.content)
+                setShowExamples(false)
+              }}
+              className="system-sm-regular whitespace-nowrap text-text-secondary"
+            >
+              {t(`createTool.exampleOptions.${item.key}`, { ns: 'tools' })}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
     </div>
   )
 }
diff --git a/web/app/components/tools/edit-custom-collection-modal/index.tsx b/web/app/components/tools/edit-custom-collection-modal/index.tsx
index 03899941ba..0a0f017a36 100644
--- a/web/app/components/tools/edit-custom-collection-modal/index.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/index.tsx
@@ -3,6 +3,16 @@ import type { FC } from 'react'
 import type { Credential, CustomCollectionBackend, CustomParamSchema, Emoji } from '../types'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Drawer,
+  DrawerBackdrop,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerPopup,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerViewport,
+} from '@langgenius/dify-ui/drawer'
 import { toast } from '@langgenius/dify-ui/toast'
 import { RiSettings2Line } from '@remixicon/react'
 import { useDebounce, useGetState } from 'ahooks'
@@ -11,7 +21,6 @@ import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
-import Drawer from '@/app/components/base/drawer-plus'
 import EmojiPicker from '@/app/components/base/emoji-picker'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
@@ -191,199 +200,224 @@ const EditCustomCollectionModal: FC<Props> = ({
   return (
     <>
       <Drawer
-        isShow
-        positionCenter={isAdd && !positionLeft}
-        onHide={onHide}
-        title={t(`createTool.${isAdd ? 'title' : 'editTitle'}`, { ns: 'tools' })!}
-        dialogClassName={dialogClassName}
-        panelClassName="mt-2 w-[640px]!"
-        maxWidthClassName="max-w-[640px]!"
-        height="calc(100vh - 16px)"
-        headerClassName="border-b-divider-regular!"
-        body={(
-          <div className="flex h-full flex-col">
-            <div className="h-0 grow space-y-4 overflow-y-auto px-6 py-3">
-              <div>
-                <div className="py-2 system-sm-medium text-text-primary">
-                  {t('createTool.name', { ns: 'tools' })}
-                  {' '}
-                  <span className="ml-1 text-red-500">*</span>
-                </div>
-                <div className="flex items-center justify-between gap-3">
-                  <AppIcon size="large" onClick={() => { setShowEmojiPicker(true) }} className="cursor-pointer" icon={emoji.content} background={emoji.background} />
-                  <Input
-                    className="h-10 grow"
-                    placeholder={t('createTool.toolNamePlaceHolder', { ns: 'tools' })!}
-                    value={customCollection.provider}
-                    onChange={(e) => {
-                      const newCollection = produce(customCollection, (draft) => {
-                        draft.provider = e.target.value
-                      })
-                      setCustomCollection(newCollection)
-                    }}
-                  />
-                </div>
-              </div>
-
-              {/* Schema */}
-              <div className="select-none">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center">
-                    <div className="py-2 system-sm-medium text-text-primary">
-                      {t('createTool.schema', { ns: 'tools' })}
-                      <span className="ml-1 text-red-500">*</span>
-                    </div>
-                    <div className="mx-2 h-3 w-px bg-divider-regular"></div>
-                    <a
-                      href="https://swagger.io/specification/"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="flex h-[18px] items-center space-x-1 text-text-accent"
-                    >
-                      <div className="text-xs font-normal">{t('createTool.viewSchemaSpec', { ns: 'tools' })}</div>
-                      <LinkExternal02 className="h-3 w-3" />
-                    </a>
+        open
+        modal
+        disablePointerDismissal
+        swipeDirection="right"
+        onOpenChange={(open) => {
+          if (!open)
+            onHide()
+        }}
+      >
+        <DrawerPortal>
+          <DrawerBackdrop forceRender />
+          <DrawerViewport className={dialogClassName}>
+            <DrawerPopup
+              className={cn(
+                'data-[swipe-direction=right]:top-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-160 data-[swipe-direction=right]:max-w-[calc(100vw-1rem)] data-[swipe-direction=right]:rounded-xl data-[swipe-direction=right]:border-r-[0.5px] data-[swipe-direction=right]:border-divider-subtle',
+                isAdd && !positionLeft
+                  ? 'data-[swipe-direction=right]:right-[max(0.5rem,calc(50%_-_320px))]'
+                  : 'data-[swipe-direction=right]:right-2',
+              )}
+            >
+              <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
+                <div className="shrink-0 border-b border-divider-regular py-4">
+                  <div className="flex h-6 items-center justify-between pr-5 pl-6">
+                    <DrawerTitle className="min-w-0 truncate system-xl-semibold text-text-primary">
+                      {t(`createTool.${isAdd ? 'title' : 'editTitle'}`, { ns: 'tools' })}
+                    </DrawerTitle>
+                    <DrawerCloseButton
+                      aria-label={t('operation.close', { ns: 'common' })}
+                      className="h-6 w-6 rounded-md"
+                    />
                   </div>
-                  <GetSchema onChange={setSchema} />
-
                 </div>
-                <Textarea
-                  className="h-[240px] resize-none"
-                  value={schema}
-                  onChange={e => setSchema(e.target.value)}
-                  placeholder={t('createTool.schemaPlaceHolder', { ns: 'tools' })!}
-                />
-              </div>
+                <div className="min-h-0 flex-1">
+                  <div className="flex h-full flex-col">
+                    <div className="h-0 grow space-y-4 overflow-y-auto px-6 py-3">
+                      <div>
+                        <div className="py-2 system-sm-medium text-text-primary">
+                          {t('createTool.name', { ns: 'tools' })}
+                          {' '}
+                          <span className="ml-1 text-red-500">*</span>
+                        </div>
+                        <div className="flex items-center justify-between gap-3">
+                          <AppIcon size="large" onClick={() => { setShowEmojiPicker(true) }} className="cursor-pointer" icon={emoji.content} background={emoji.background} />
+                          <Input
+                            className="h-10 grow"
+                            placeholder={t('createTool.toolNamePlaceHolder', { ns: 'tools' })!}
+                            value={customCollection.provider}
+                            onChange={(e) => {
+                              const newCollection = produce(customCollection, (draft) => {
+                                draft.provider = e.target.value
+                              })
+                              setCustomCollection(newCollection)
+                            }}
+                          />
+                        </div>
+                      </div>
 
-              {/* Available Tools  */}
-              <div>
-                <div className="py-2 system-sm-medium text-text-primary">{t('createTool.availableTools.title', { ns: 'tools' })}</div>
-                <div className="w-full overflow-x-auto rounded-lg border border-divider-regular">
-                  <table className="w-full system-xs-regular text-text-secondary">
-                    <thead className="text-text-tertiary uppercase">
-                      <tr className={cn(paramsSchemas.length > 0 && 'border-b', 'border-divider-regular')}>
-                        <th className="p-2 pl-3 font-medium">{t('createTool.availableTools.name', { ns: 'tools' })}</th>
-                        <th className="w-[236px] p-2 pl-3 font-medium">{t('createTool.availableTools.description', { ns: 'tools' })}</th>
-                        <th className="p-2 pl-3 font-medium">{t('createTool.availableTools.method', { ns: 'tools' })}</th>
-                        <th className="p-2 pl-3 font-medium">{t('createTool.availableTools.path', { ns: 'tools' })}</th>
-                        <th className="w-[54px] p-2 pl-3 font-medium">{t('createTool.availableTools.action', { ns: 'tools' })}</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {paramsSchemas.map((item, index) => (
-                        <tr key={index} className="border-b border-divider-regular last:border-0">
-                          <td className="p-2 pl-3">{item.operation_id}</td>
-                          <td className="w-[236px] p-2 pl-3">{item.summary}</td>
-                          <td className="p-2 pl-3">{item.method}</td>
-                          <td className="p-2 pl-3">{getPath(item.server_url)}</td>
-                          <td className="w-[62px] p-2 pl-3">
-                            <Button
-                              size="small"
-                              onClick={() => {
-                                setCurrTool(item)
-                                setIsShowTestApi(true)
-                              }}
+                      {/* Schema */}
+                      <div className="select-none">
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center">
+                            <div className="py-2 system-sm-medium text-text-primary">
+                              {t('createTool.schema', { ns: 'tools' })}
+                              <span className="ml-1 text-red-500">*</span>
+                            </div>
+                            <div className="mx-2 h-3 w-px bg-divider-regular"></div>
+                            <a
+                              href="https://swagger.io/specification/"
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="flex h-[18px] items-center space-x-1 text-text-accent"
                             >
-                              {t('createTool.availableTools.test', { ns: 'tools' })}
-                            </Button>
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
+                              <div className="text-xs font-normal">{t('createTool.viewSchemaSpec', { ns: 'tools' })}</div>
+                              <LinkExternal02 className="h-3 w-3" />
+                            </a>
+                          </div>
+                          <GetSchema onChange={setSchema} />
+
+                        </div>
+                        <Textarea
+                          className="h-[240px] resize-none"
+                          value={schema}
+                          onChange={e => setSchema(e.target.value)}
+                          placeholder={t('createTool.schemaPlaceHolder', { ns: 'tools' })!}
+                        />
+                      </div>
+
+                      {/* Available Tools  */}
+                      <div>
+                        <div className="py-2 system-sm-medium text-text-primary">{t('createTool.availableTools.title', { ns: 'tools' })}</div>
+                        <div className="w-full overflow-x-auto rounded-lg border border-divider-regular">
+                          <table className="w-full system-xs-regular text-text-secondary">
+                            <thead className="text-text-tertiary uppercase">
+                              <tr className={cn(paramsSchemas.length > 0 && 'border-b', 'border-divider-regular')}>
+                                <th className="p-2 pl-3 font-medium">{t('createTool.availableTools.name', { ns: 'tools' })}</th>
+                                <th className="w-[236px] p-2 pl-3 font-medium">{t('createTool.availableTools.description', { ns: 'tools' })}</th>
+                                <th className="p-2 pl-3 font-medium">{t('createTool.availableTools.method', { ns: 'tools' })}</th>
+                                <th className="p-2 pl-3 font-medium">{t('createTool.availableTools.path', { ns: 'tools' })}</th>
+                                <th className="w-[54px] p-2 pl-3 font-medium">{t('createTool.availableTools.action', { ns: 'tools' })}</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              {paramsSchemas.map((item, index) => (
+                                <tr key={index} className="border-b border-divider-regular last:border-0">
+                                  <td className="p-2 pl-3">{item.operation_id}</td>
+                                  <td className="w-[236px] p-2 pl-3">{item.summary}</td>
+                                  <td className="p-2 pl-3">{item.method}</td>
+                                  <td className="p-2 pl-3">{getPath(item.server_url)}</td>
+                                  <td className="w-[62px] p-2 pl-3">
+                                    <Button
+                                      size="small"
+                                      onClick={() => {
+                                        setCurrTool(item)
+                                        setIsShowTestApi(true)
+                                      }}
+                                    >
+                                      {t('createTool.availableTools.test', { ns: 'tools' })}
+                                    </Button>
+                                  </td>
+                                </tr>
+                              ))}
+                            </tbody>
+                          </table>
+                        </div>
+                      </div>
+
+                      {/* Authorization method */}
+                      <div>
+                        <div className="py-2 system-sm-medium text-text-primary">{t('createTool.authMethod.title', { ns: 'tools' })}</div>
+                        <div className="flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal px-2.5" onClick={() => setCredentialsModalShow(true)}>
+                          <div className="system-xs-regular text-text-primary">{t(`createTool.authMethod.types.${credential.auth_type}`, { ns: 'tools' })}</div>
+                          <RiSettings2Line className="h-4 w-4 text-text-secondary" />
+                        </div>
+                      </div>
+
+                      {/* Labels */}
+                      <div>
+                        <div className="py-2 system-sm-medium text-text-primary">{t('createTool.toolInput.label', { ns: 'tools' })}</div>
+                        <LabelSelector value={labels} onChange={handleLabelSelect} />
+                      </div>
+
+                      {/* Privacy Policy */}
+                      <div>
+                        <div className="py-2 system-sm-medium text-text-primary">{t('createTool.privacyPolicy', { ns: 'tools' })}</div>
+                        <Input
+                          value={customCollection.privacy_policy}
+                          onChange={(e) => {
+                            const newCollection = produce(customCollection, (draft) => {
+                              draft.privacy_policy = e.target.value
+                            })
+                            setCustomCollection(newCollection)
+                          }}
+                          className="h-10 grow"
+                          placeholder={t('createTool.privacyPolicyPlaceholder', { ns: 'tools' }) || ''}
+                        />
+                      </div>
+
+                      <div>
+                        <div className="py-2 system-sm-medium text-text-primary">{t('createTool.customDisclaimer', { ns: 'tools' })}</div>
+                        <Input
+                          value={customCollection.custom_disclaimer}
+                          onChange={(e) => {
+                            const newCollection = produce(customCollection, (draft) => {
+                              draft.custom_disclaimer = e.target.value
+                            })
+                            setCustomCollection(newCollection)
+                          }}
+                          className="h-10 grow"
+                          placeholder={t('createTool.customDisclaimerPlaceholder', { ns: 'tools' }) || ''}
+                        />
+                      </div>
+
+                    </div>
+                    <div className={cn(isEdit ? 'justify-between' : 'justify-end', 'mt-2 flex shrink-0 rounded-b-[10px] border-t border-divider-regular bg-background-section-burn px-6 py-4')}>
+                      {
+                        isEdit && (
+                          <Button variant="primary" tone="destructive" onClick={onRemove}>{t('operation.delete', { ns: 'common' })}</Button>
+                        )
+                      }
+                      <div className="flex space-x-2">
+                        <Button onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
+                        <Button variant="primary" onClick={handleSave}>{t('operation.save', { ns: 'common' })}</Button>
+                      </div>
+                    </div>
+                    {showEmojiPicker && (
+                      <EmojiPicker
+                        onSelect={(icon, icon_background) => {
+                          setEmoji({ content: icon, background: icon_background })
+                          setShowEmojiPicker(false)
+                        }}
+                        onClose={() => {
+                          setShowEmojiPicker(false)
+                        }}
+                      />
+                    )}
+                    {credentialsModalShow && (
+                      <ConfigCredentials
+                        positionCenter={isAdd}
+                        credential={credential}
+                        onChange={setCredential}
+                        onHide={() => setCredentialsModalShow(false)}
+                      />
+                    )}
+                    {isShowTestApi && (
+                      <TestApi
+                        positionCenter={isAdd}
+                        tool={currTool as CustomParamSchema}
+                        customCollection={customCollection}
+                        onHide={() => setIsShowTestApi(false)}
+                      />
+                    )}
+                  </div>
                 </div>
-              </div>
-
-              {/* Authorization method */}
-              <div>
-                <div className="py-2 system-sm-medium text-text-primary">{t('createTool.authMethod.title', { ns: 'tools' })}</div>
-                <div className="flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal px-2.5" onClick={() => setCredentialsModalShow(true)}>
-                  <div className="system-xs-regular text-text-primary">{t(`createTool.authMethod.types.${credential.auth_type}`, { ns: 'tools' })}</div>
-                  <RiSettings2Line className="h-4 w-4 text-text-secondary" />
-                </div>
-              </div>
-
-              {/* Labels */}
-              <div>
-                <div className="py-2 system-sm-medium text-text-primary">{t('createTool.toolInput.label', { ns: 'tools' })}</div>
-                <LabelSelector value={labels} onChange={handleLabelSelect} />
-              </div>
-
-              {/* Privacy Policy */}
-              <div>
-                <div className="py-2 system-sm-medium text-text-primary">{t('createTool.privacyPolicy', { ns: 'tools' })}</div>
-                <Input
-                  value={customCollection.privacy_policy}
-                  onChange={(e) => {
-                    const newCollection = produce(customCollection, (draft) => {
-                      draft.privacy_policy = e.target.value
-                    })
-                    setCustomCollection(newCollection)
-                  }}
-                  className="h-10 grow"
-                  placeholder={t('createTool.privacyPolicyPlaceholder', { ns: 'tools' }) || ''}
-                />
-              </div>
-
-              <div>
-                <div className="py-2 system-sm-medium text-text-primary">{t('createTool.customDisclaimer', { ns: 'tools' })}</div>
-                <Input
-                  value={customCollection.custom_disclaimer}
-                  onChange={(e) => {
-                    const newCollection = produce(customCollection, (draft) => {
-                      draft.custom_disclaimer = e.target.value
-                    })
-                    setCustomCollection(newCollection)
-                  }}
-                  className="h-10 grow"
-                  placeholder={t('createTool.customDisclaimerPlaceholder', { ns: 'tools' }) || ''}
-                />
-              </div>
-
-            </div>
-            <div className={cn(isEdit ? 'justify-between' : 'justify-end', 'mt-2 flex shrink-0 rounded-b-[10px] border-t border-divider-regular bg-background-section-burn px-6 py-4')}>
-              {
-                isEdit && (
-                  <Button variant="primary" tone="destructive" onClick={onRemove}>{t('operation.delete', { ns: 'common' })}</Button>
-                )
-              }
-              <div className="flex space-x-2">
-                <Button onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
-                <Button variant="primary" onClick={handleSave}>{t('operation.save', { ns: 'common' })}</Button>
-              </div>
-            </div>
-            {showEmojiPicker && (
-              <EmojiPicker
-                onSelect={(icon, icon_background) => {
-                  setEmoji({ content: icon, background: icon_background })
-                  setShowEmojiPicker(false)
-                }}
-                onClose={() => {
-                  setShowEmojiPicker(false)
-                }}
-              />
-            )}
-            {credentialsModalShow && (
-              <ConfigCredentials
-                positionCenter={isAdd}
-                credential={credential}
-                onChange={setCredential}
-                onHide={() => setCredentialsModalShow(false)}
-              />
-            )}
-            {isShowTestApi && (
-              <TestApi
-                positionCenter={isAdd}
-                tool={currTool as CustomParamSchema}
-                customCollection={customCollection}
-                onHide={() => setIsShowTestApi(false)}
-              />
-            )}
-          </div>
-        )}
-        isShowMask={true}
-        clickOutsideNotOpen={true}
-      />
+              </DrawerContent>
+            </DrawerPopup>
+          </DrawerViewport>
+        </DrawerPortal>
+      </Drawer>
     </>
 
   )
diff --git a/web/app/components/tools/edit-custom-collection-modal/test-api.tsx b/web/app/components/tools/edit-custom-collection-modal/test-api.tsx
index 0eecb8ca6b..19ef1bbf54 100644
--- a/web/app/components/tools/edit-custom-collection-modal/test-api.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/test-api.tsx
@@ -2,11 +2,21 @@
 import type { FC } from 'react'
 import type { Credential, CustomCollectionBackend, CustomParamSchema } from '@/app/components/tools/types'
 import { Button } from '@langgenius/dify-ui/button'
+import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Drawer,
+  DrawerBackdrop,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerPopup,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerViewport,
+} from '@langgenius/dify-ui/drawer'
 import { RiSettings2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Drawer from '@/app/components/base/drawer-plus'
 import Input from '@/app/components/base/input'
 import { AuthType } from '@/app/components/tools/types'
 import { useLocale } from '@/context/i18n'
@@ -63,70 +73,96 @@ const TestApi: FC<Props> = ({
   return (
     <>
       <Drawer
-        isShow
-        positionCenter={positionCenter}
-        onHide={onHide}
-        title={`${t('test.title', { ns: 'tools' })}  ${toolName}`}
-        panelClassName="mt-2 w-[600px]!"
-        maxWidthClassName="max-w-[600px]!"
-        height="calc(100vh - 16px)"
-        headerClassName="border-b-divider-regular!"
-        body={(
-          <div className="overflow-y-auto px-6 pt-2">
-            <div className="space-y-4">
-              <div>
-                <div className="py-2 system-sm-medium text-text-primary">{t('createTool.authMethod.title', { ns: 'tools' })}</div>
-                <div className="flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal px-2.5" onClick={() => setCredentialsModalShow(true)}>
-                  <div className="system-xs-regular text-text-primary">{t(`createTool.authMethod.types.${tempCredential.auth_type}`, { ns: 'tools' })}</div>
-                  <RiSettings2Line className="h-4 w-4 text-text-secondary" />
+        open
+        modal
+        disablePointerDismissal
+        swipeDirection="right"
+        onOpenChange={(open) => {
+          if (!open)
+            onHide()
+        }}
+      >
+        <DrawerPortal>
+          <DrawerBackdrop forceRender />
+          <DrawerViewport>
+            <DrawerPopup
+              className={cn(
+                'data-[swipe-direction=right]:top-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-150 data-[swipe-direction=right]:max-w-[calc(100vw-1rem)] data-[swipe-direction=right]:rounded-xl data-[swipe-direction=right]:border-r-[0.5px] data-[swipe-direction=right]:border-divider-subtle',
+                positionCenter
+                  ? 'data-[swipe-direction=right]:right-[max(0.5rem,calc(50%_-_300px))]'
+                  : 'data-[swipe-direction=right]:right-2',
+              )}
+            >
+              <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
+                <div className="shrink-0 border-b border-divider-regular py-4">
+                  <div className="flex h-6 items-center justify-between pr-5 pl-6">
+                    <DrawerTitle className="min-w-0 truncate system-xl-semibold text-text-primary">
+                      {`${t('test.title', { ns: 'tools' })}  ${toolName}`}
+                    </DrawerTitle>
+                    <DrawerCloseButton
+                      aria-label={t('operation.close', { ns: 'common' })}
+                      className="h-6 w-6 rounded-md"
+                    />
+                  </div>
                 </div>
-              </div>
+                <div className="min-h-0 flex-1 overflow-y-auto px-6 pt-2">
+                  <div className="space-y-4">
+                    <div>
+                      <div className="py-2 system-sm-medium text-text-primary">{t('createTool.authMethod.title', { ns: 'tools' })}</div>
+                      <div className="flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal px-2.5" onClick={() => setCredentialsModalShow(true)}>
+                        <div className="system-xs-regular text-text-primary">{t(`createTool.authMethod.types.${tempCredential.auth_type}`, { ns: 'tools' })}</div>
+                        <RiSettings2Line className="h-4 w-4 text-text-secondary" />
+                      </div>
+                    </div>
 
-              <div>
-                <div className="py-2 system-sm-medium text-text-primary">{t('test.parametersValue', { ns: 'tools' })}</div>
-                <div className="rounded-lg border border-divider-regular">
-                  <table className="w-full system-xs-regular font-normal text-text-secondary">
-                    <thead className="text-text-tertiary uppercase">
-                      <tr className="border-b border-divider-regular">
-                        <th className="p-2 pl-3 font-medium">{t('test.parameters', { ns: 'tools' })}</th>
-                        <th className="p-2 pl-3 font-medium">{t('test.value', { ns: 'tools' })}</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {parameters.map((item, index) => (
-                        <tr key={index} className="border-b border-divider-regular last:border-0">
-                          <td className="py-2 pr-2.5 pl-3">
-                            {item.label[language]}
-                          </td>
-                          <td className="">
-                            <Input
-                              value={parametersValue[item.name] || ''}
-                              onChange={e => setParametersValue({ ...parametersValue, [item.name]: e.target.value })}
-                              type="text"
-                              className="!hover:border-transparent !hover:bg-transparent !focus:border-transparent !focus:bg-transparent border-transparent! bg-transparent!"
-                            />
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
+                    <div>
+                      <div className="py-2 system-sm-medium text-text-primary">{t('test.parametersValue', { ns: 'tools' })}</div>
+                      <div className="rounded-lg border border-divider-regular">
+                        <table className="w-full system-xs-regular font-normal text-text-secondary">
+                          <thead className="text-text-tertiary uppercase">
+                            <tr className="border-b border-divider-regular">
+                              <th className="p-2 pl-3 font-medium">{t('test.parameters', { ns: 'tools' })}</th>
+                              <th className="p-2 pl-3 font-medium">{t('test.value', { ns: 'tools' })}</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {parameters.map((item, index) => (
+                              <tr key={index} className="border-b border-divider-regular last:border-0">
+                                <td className="py-2 pr-2.5 pl-3">
+                                  {item.label[language]}
+                                </td>
+                                <td className="">
+                                  <Input
+                                    value={parametersValue[item.name] || ''}
+                                    onChange={e => setParametersValue({ ...parametersValue, [item.name]: e.target.value })}
+                                    type="text"
+                                    className="!hover:border-transparent !hover:bg-transparent !focus:border-transparent !focus:bg-transparent border-transparent! bg-transparent!"
+                                  />
+                                </td>
+                              </tr>
+                            ))}
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+
+                  </div>
+                  <Button variant="primary" className="mt-4 h-10 w-full" loading={testing} disabled={testing} onClick={handleTest}>{t('test.title', { ns: 'tools' })}</Button>
+                  <div className="mt-6">
+                    <div className="flex items-center space-x-3">
+                      <div className="system-xs-semibold text-text-tertiary">{t('test.testResult', { ns: 'tools' })}</div>
+                      <div className="bg-[rgb(243, 244, 246)] h-px w-0 grow"></div>
+                    </div>
+                    <div className="mt-2 h-[200px] overflow-x-hidden overflow-y-auto rounded-lg bg-components-input-bg-normal px-3 py-2 system-xs-regular text-text-secondary">
+                      {result || <span className="text-text-quaternary">{t('test.testResultPlaceholder', { ns: 'tools' })}</span>}
+                    </div>
+                  </div>
                 </div>
-              </div>
-
-            </div>
-            <Button variant="primary" className="mt-4 h-10 w-full" loading={testing} disabled={testing} onClick={handleTest}>{t('test.title', { ns: 'tools' })}</Button>
-            <div className="mt-6">
-              <div className="flex items-center space-x-3">
-                <div className="system-xs-semibold text-text-tertiary">{t('test.testResult', { ns: 'tools' })}</div>
-                <div className="bg-[rgb(243, 244, 246)] h-px w-0 grow"></div>
-              </div>
-              <div className="mt-2 h-[200px] overflow-x-hidden overflow-y-auto rounded-lg bg-components-input-bg-normal px-3 py-2 system-xs-regular text-text-secondary">
-                {result || <span className="text-text-quaternary">{t('test.testResultPlaceholder', { ns: 'tools' })}</span>}
-              </div>
-            </div>
-          </div>
-        )}
-      />
+              </DrawerContent>
+            </DrawerPopup>
+          </DrawerViewport>
+        </DrawerPortal>
+      </Drawer>
       {credentialsModalShow && (
         <ConfigCredentials
           positionCenter={positionCenter}
diff --git a/web/app/components/tools/setting/build-in/__tests__/config-credentials.spec.tsx b/web/app/components/tools/setting/build-in/__tests__/config-credentials.spec.tsx
index 996a4077af..0cb3970eaa 100644
--- a/web/app/components/tools/setting/build-in/__tests__/config-credentials.spec.tsx
+++ b/web/app/components/tools/setting/build-in/__tests__/config-credentials.spec.tsx
@@ -23,16 +23,6 @@ vi.mock('../../../utils/to-form-schema', () => ({
   addDefaultValue: (value: Record<string, unknown>, _schemas: unknown[]) => ({ ...value }),
 }))
 
-vi.mock('@/app/components/base/drawer-plus', () => ({
-  default: ({ body, title, onHide }: { body: React.ReactNode, title: string, onHide: () => void }) => (
-    <div data-testid="drawer">
-      <span data-testid="drawer-title">{title}</span>
-      <button data-testid="drawer-close" onClick={onHide}>Close</button>
-      {body}
-    </div>
-  ),
-}))
-
 vi.mock('@langgenius/dify-ui/toast', () => ({
   default: { notify: vi.fn() },
 }))
@@ -104,7 +94,7 @@ describe('ConfigCredential', () => {
         onSaved={mockOnSaved}
       />,
     )
-    expect(screen.getByTestId('drawer-title')).toHaveTextContent('tools.auth.setupModalTitle')
+    expect(screen.getByText('tools.auth.setupModalTitle')).toBeInTheDocument()
   })
 
   it('calls onCancel when cancel button is clicked', async () => {
diff --git a/web/app/components/tools/setting/build-in/config-credentials.tsx b/web/app/components/tools/setting/build-in/config-credentials.tsx
index d6c62f5d88..2ee17d4298 100644
--- a/web/app/components/tools/setting/build-in/config-credentials.tsx
+++ b/web/app/components/tools/setting/build-in/config-credentials.tsx
@@ -3,12 +3,22 @@ import type { FC } from 'react'
 import type { Collection } from '../../types'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Drawer,
+  DrawerBackdrop,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerDescription,
+  DrawerPopup,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerViewport,
+} from '@langgenius/dify-ui/drawer'
 import { toast } from '@langgenius/dify-ui/toast'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Drawer from '@/app/components/base/drawer-plus'
 import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
 import Loading from '@/app/components/base/loading'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
@@ -69,64 +79,81 @@ const ConfigCredential: FC<Props> = ({
 
   return (
     <Drawer
-      isShow
-      onHide={onCancel}
-      title={t('auth.setupModalTitle', { ns: 'tools' }) as string}
-      titleDescription={t('auth.setupModalTitleDescription', { ns: 'tools' }) as string}
-      panelClassName="mt-[64px] mb-2 w-[420px]! border-components-panel-border"
-      maxWidthClassName="max-w-[420px]!"
-      height="calc(100vh - 64px)"
-      contentClassName="bg-components-panel-bg!"
-      headerClassName="border-b-divider-subtle!"
-      body={(
-        <div className="h-full px-6 py-3">
-          {!credentialSchema
-            ? <Loading type="app" />
-            : (
-                <>
-                  <Form
-                    value={tempCredential}
-                    onChange={(v) => {
-                      setTempCredential(v)
-                    }}
-                    formSchemas={credentialSchema}
-                    isEditMode={true}
-                    showOnVariableMap={{}}
-                    validating={false}
-                    inputClassName="bg-components-input-bg-normal!"
-                    fieldMoreInfo={item => item.url
-                      ? (
-                          <a
-                            href={item.url}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="inline-flex items-center text-xs text-text-accent"
-                          >
-                            {t('howToGet', { ns: 'tools' })}
-                            <LinkExternal02 className="ml-1 h-3 w-3" />
-                          </a>
-                        )
-                      : null}
+      open
+      modal
+      swipeDirection="right"
+      onOpenChange={(open) => {
+        if (!open)
+          onCancel()
+      }}
+    >
+      <DrawerPortal>
+        <DrawerBackdrop />
+        <DrawerViewport>
+          <DrawerPopup className="data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-105 data-[swipe-direction=right]:max-w-[calc(100vw-1rem)] data-[swipe-direction=right]:rounded-xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border">
+            <DrawerContent className="flex min-h-0 flex-1 flex-col bg-components-panel-bg p-0 pb-0">
+              <div className="shrink-0 border-b border-divider-subtle py-4">
+                <div className="flex h-6 items-center justify-between pr-5 pl-6">
+                  <DrawerTitle className="min-w-0 truncate system-xl-semibold text-text-primary">
+                    {t('auth.setupModalTitle', { ns: 'tools' })}
+                  </DrawerTitle>
+                  <DrawerCloseButton
+                    aria-label={t('operation.close', { ns: 'common' })}
+                    className="h-6 w-6 rounded-md"
                   />
-                  <div className={cn((collection.is_team_authorization && !isHideRemoveBtn) ? 'justify-between' : 'justify-end', 'mt-2 flex')}>
-                    {
-                      (collection.is_team_authorization && !isHideRemoveBtn) && (
-                        <Button onClick={onRemove}>{t('operation.remove', { ns: 'common' })}</Button>
-                      )
-                    }
-                    <div className="flex space-x-2">
-                      <Button onClick={onCancel}>{t('operation.cancel', { ns: 'common' })}</Button>
-                      <Button loading={isLoading || isSaving} disabled={isLoading || isSaving} variant="primary" onClick={handleSave}>{t('operation.save', { ns: 'common' })}</Button>
-                    </div>
-                  </div>
-                </>
-              )}
-
-        </div>
-      )}
-      isShowMask={true}
-      clickOutsideNotOpen={false}
-    />
+                </div>
+                <DrawerDescription className="pr-10 pl-6 system-xs-regular text-text-tertiary">
+                  {t('auth.setupModalTitleDescription', { ns: 'tools' })}
+                </DrawerDescription>
+              </div>
+              <div className="min-h-0 flex-1 overflow-y-auto px-6 py-3">
+                {!credentialSchema
+                  ? <Loading type="app" />
+                  : (
+                      <>
+                        <Form
+                          value={tempCredential}
+                          onChange={(v) => {
+                            setTempCredential(v)
+                          }}
+                          formSchemas={credentialSchema}
+                          isEditMode={true}
+                          showOnVariableMap={{}}
+                          validating={false}
+                          inputClassName="bg-components-input-bg-normal!"
+                          fieldMoreInfo={item => item.url
+                            ? (
+                                <a
+                                  href={item.url}
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  className="inline-flex items-center text-xs text-text-accent"
+                                >
+                                  {t('howToGet', { ns: 'tools' })}
+                                  <LinkExternal02 className="ml-1 h-3 w-3" />
+                                </a>
+                              )
+                            : null}
+                        />
+                        <div className={cn((collection.is_team_authorization && !isHideRemoveBtn) ? 'justify-between' : 'justify-end', 'mt-2 flex')}>
+                          {
+                            (collection.is_team_authorization && !isHideRemoveBtn) && (
+                              <Button onClick={onRemove}>{t('operation.remove', { ns: 'common' })}</Button>
+                            )
+                          }
+                          <div className="flex space-x-2">
+                            <Button onClick={onCancel}>{t('operation.cancel', { ns: 'common' })}</Button>
+                            <Button loading={isLoading || isSaving} disabled={isLoading || isSaving} variant="primary" onClick={handleSave}>{t('operation.save', { ns: 'common' })}</Button>
+                          </div>
+                        </div>
+                      </>
+                    )}
+              </div>
+            </DrawerContent>
+          </DrawerPopup>
+        </DrawerViewport>
+      </DrawerPortal>
+    </Drawer>
   )
 }
 export default React.memo(ConfigCredential)
diff --git a/web/docs/lint.md b/web/docs/lint.md
index ed38a7cf37..047a30d25f 100644
--- a/web/docs/lint.md
+++ b/web/docs/lint.md
@@ -62,7 +62,7 @@ This command lints the entire project and is intended for final verification bef
 If a new rule causes many existing code errors or automatic fixes generate too many diffs, do not use the `--fix` option for automatic fixes.
 You can introduce the rule first, then use the `--suppress-all` option to temporarily suppress these errors, and gradually fix them in subsequent changes.
 
-For overlay migration policy and cleanup phases, see [Overlay Migration Guide].
+For overlay import policy and composition rules, see [Overlay Guide].
 
 ## Type Check
 
@@ -78,7 +78,7 @@ Type checking is powered by [`tsgo`] (the native TypeScript 7 compiler), which i
 
 [ESLint bulk suppressions blog post]: https://eslint.org/blog/2025/04/introducing-bulk-suppressions
 [ESLint multi-thread linting blog post]: https://eslint.org/blog/2025/08/multithread-linting
-[Overlay Migration Guide]: ./overlay-migration.md
+[Overlay Guide]: ./overlay.md
 [TSSLint]: https://github.com/johnsoncodehk/tsslint
 [`tsgo`]: https://devblogs.microsoft.com/typescript/announcing-typescript-7-0-beta
 [no-leaked-conditional-rendering]: https://www.eslint-react.xyz/docs/rules/no-leaked-conditional-rendering
diff --git a/web/docs/overlay-migration.md b/web/docs/overlay-migration.md
deleted file mode 100644
index 3d94d82e64..0000000000
--- a/web/docs/overlay-migration.md
+++ /dev/null
@@ -1,91 +0,0 @@
-# Overlay Migration Guide
-
-This document tracks the Dify-web migration away from legacy overlay APIs.
-
-> **See also:** [`packages/dify-ui/README.md`] for the permanent overlay / portal / z-index contract of the replacement primitives. This document covers the one-off migration mechanics (deprecated import paths and coexistence z-index strategy) and is expected to shrink and eventually be removed once the legacy overlays are gone.
-
-## Scope
-
-- Deprecated imports:
-  - `@/app/components/base/modal`
-  - `@/app/components/base/dialog`
-  - `@/app/components/base/drawer`
-  - `@/app/components/base/drawer-plus`
-- Replacement primitives:
-  - `@langgenius/dify-ui/tooltip`
-  - `@langgenius/dify-ui/dropdown-menu`
-  - `@langgenius/dify-ui/context-menu`
-  - `@langgenius/dify-ui/popover`
-  - `@langgenius/dify-ui/dialog`
-  - `@langgenius/dify-ui/drawer`
-  - `@langgenius/dify-ui/alert-dialog`
-  - `@langgenius/dify-ui/autocomplete`
-  - `@langgenius/dify-ui/combobox`
-  - `@langgenius/dify-ui/select`
-  - `@langgenius/dify-ui/toast`
-- Tracking issue: <https://github.com/langgenius/dify/issues/32767>
-
-## ESLint policy
-
-- `no-restricted-imports` blocks all deprecated imports listed above.
-- The rule is enabled for normal source files (`.ts` / `.tsx`) and test files are excluded.
-
-## Migration phases
-
-1. Business/UI features outside `app/components/base/**`
-   - Migrate old calls to semantic primitives from `@langgenius/dify-ui/*`.
-   - Keep deprecated imports out of newly touched files.
-   - Use `@langgenius/dify-ui/tooltip` only for short, non-interactive labels where the trigger already has its own accessible name.
-   - Use `@langgenius/dify-ui/popover` or the web `Infotip` wrapper for explanatory, long-form, structured, or interactive content.
-1. Legacy base components
-   - Migrate legacy base callers gradually.
-   - Keep deprecated imports out of newly touched files.
-1. Cleanup
-   - Remove legacy overlay implementations when import count reaches zero.
-
-## z-index strategy
-
-All new overlay primitives in `@langgenius/dify-ui/*` share a single z-index value:
-**`z-1002`**, except Toast which stays one layer above at **`z-1003`**.
-
-### Why z-[1002]?
-
-During the migration period, legacy and new overlays coexist. Legacy overlays
-portal to `document.body` with explicit z-index values:
-
-| Layer                 | z-index      | Components                                                                               |
-| --------------------- | ------------ | ---------------------------------------------------------------------------------------- |
-| Legacy Drawer         | `z-30`       | `base/drawer`, `base/drawer-plus`                                                        |
-| Legacy Modal          | `z-60`       | `base/modal` (default)                                                                   |
-| **New UI primitives** | **`z-1002`** | `@langgenius/dify-ui/*` (Drawer, Popover, Dialog, Autocomplete, Combobox, Tooltip, etc.) |
-| Toast                 | `z-1003`     | `@langgenius/dify-ui/toast`                                                              |
-
-`z-1002` sits above all common legacy overlays, so new primitives always
-render on top without needing per-call-site z-index hacks. Among themselves,
-new primitives share the same z-index and rely on **DOM order** for stacking
-(later portal = on top).
-
-Toast stays one layer above the overlay primitives so notifications remain
-visible above dialogs, popovers, and other portalled surfaces without falling
-back to `z-9999`.
-
-### Rules
-
-- **Do NOT add z-index overrides** (e.g. `className="z-1003"`) on new
-  `@langgenius/dify-ui/*` components. If you find yourself needing one, the
-  parent legacy overlay should be migrated instead.
-- When migrating a legacy overlay that has a high z-index, remove the z-index
-  entirely — the new primitive's default `z-1002` handles it.
-- When using Base UI trigger `render`, render a real `button` for button-like
-  triggers. If the trigger must render a non-button element, the primitive must
-  explicitly opt out of the native button behavior where that API is available.
-
-### Post-migration cleanup
-
-Once all legacy overlays are removed:
-
-1. Reduce `z-1002` back to `z-50` across all `@langgenius/dify-ui/*` primitives.
-1. Reduce Toast from `z-1003` to `z-51`.
-1. Remove this section from the migration guide.
-
-[`packages/dify-ui/README.md`]: ../../packages/dify-ui/README.md
diff --git a/web/docs/overlay.md b/web/docs/overlay.md
new file mode 100644
index 0000000000..76ba21b64d
--- /dev/null
+++ b/web/docs/overlay.md
@@ -0,0 +1,44 @@
+# Overlay Best Practices
+
+Use `@langgenius/dify-ui/*` primitives for overlays in new and modified web
+code. Do not import raw Base UI overlays or legacy web overlays from
+`@/app/components/base/modal`, `@/app/components/base/dialog`, or
+`@/app/components/base/drawer`.
+
+## Primitive choice
+
+- Use `@langgenius/dify-ui/dialog` for modal surfaces that need focus
+  management, scroll locking, escape handling, and outside-press dismissal.
+- Use `@langgenius/dify-ui/alert-dialog` only for destructive or must-confirm
+  decisions.
+- Use `@langgenius/dify-ui/drawer` for side panels, setup panels, and nested
+  editor panels that must behave like a drawer. Do not add separate web drawer
+  wrappers.
+- Use `@langgenius/dify-ui/popover` or the web `Infotip` wrapper for
+  explanatory content, long help text, rich layout, or interactive content.
+- Use `@langgenius/dify-ui/tooltip` only for short, non-interactive labels where
+  the trigger already has its own accessible name.
+
+## Preferences
+
+- Prefer the most specific semantic primitive over styling a generic `Dialog`.
+- Prefer controlled `open` / `onOpenChange` when business state, analytics, or
+  cleanup must react to open state changes.
+- Prefer the primitive-owned portal or content component. Do not create manual
+  portals around overlay primitives.
+- Prefer native button trigger semantics. When passing a Base UI trigger
+  `render` prop, render a real `<button type="button">` for button-like
+  triggers; use `nativeButton={false}` only for intentional non-button triggers.
+- Use `Infotip` for visible `?` help triggers. Give icon-only triggers an
+  accessible name.
+- Keep overlay chrome inside the shared primitive or business wrapper instead of
+  repeating backdrop, z-index, and portal styles at call sites.
+
+## Layering
+
+All body-portalled Dify UI overlays use `z-50`. Toast uses `z-60`. The app root
+must keep an isolated stacking context.
+
+Do not add call-site z-index overrides such as `z-9999`. If an overlay is
+clipped or hidden, fix the parent overlay structure instead of raising the
+child primitive.
diff --git a/web/eslint.config.mjs b/web/eslint.config.mjs
index 864b3fa960..ab2c626482 100644
--- a/web/eslint.config.mjs
+++ b/web/eslint.config.mjs
@@ -172,7 +172,7 @@ export default antfu(
     },
   },
   {
-    name: 'dify/overlay-migration',
+    name: 'dify/overlay-import-policy',
     files: [GLOB_TS, GLOB_TSX],
     ignores: [
       'next/**',
diff --git a/web/eslint.constants.mjs b/web/eslint.constants.mjs
index bd8254b6fb..cc0ba060a5 100644
--- a/web/eslint.constants.mjs
+++ b/web/eslint.constants.mjs
@@ -55,26 +55,10 @@ export const WEB_RESTRICTED_IMPORT_PATTERNS = [
 ]
 
 export const OVERLAY_RESTRICTED_IMPORT_PATTERNS = [
-  {
-    group: [
-      '**/base/modal',
-      '**/base/modal/index',
-    ],
-    message: 'Deprecated: use @langgenius/dify-ui/dialog instead. See issue #32767.',
-  },
-  {
-    group: [
-      '**/base/dialog',
-      '**/base/dialog/index',
-    ],
-    message: 'Deprecated: use @langgenius/dify-ui/dialog instead. See issue #32767.',
-  },
   {
     group: [
       '**/base/drawer',
       '**/base/drawer/index',
-      '**/base/drawer-plus',
-      '**/base/drawer-plus/index',
     ],
     message: 'Deprecated: use @langgenius/dify-ui/drawer instead. See issue #32767.',
   },
diff --git a/web/service/tools.ts b/web/service/tools.ts
index ae9655d520..843fd64c6d 100644
--- a/web/service/tools.ts
+++ b/web/service/tools.ts
@@ -92,7 +92,7 @@ export const removeCustomCollection = (collectionName: string) => {
 }
 
 export const importSchemaFromURL = (url: string) => {
-  return get('/workspaces/current/tool-provider/api/remote', {
+  return get<{ schema: string }>('/workspaces/current/tool-provider/api/remote', {
     params: {
       url,
     },

From e48d7bb097159629923730bc5da7496d4d438ca7 Mon Sep 17 00:00:00 2001
From: Coding On Star <447357187@qq.com>
Date: Sun, 10 May 2026 00:24:45 +0800
Subject: [PATCH 07/13] refactor(web): migrate drawer components to dify-ui and
 remove legacy drawer implementation (#35982)

Co-authored-by: CodingOnStar <hanxujiang@dify.com>
---
 eslint-suppressions.json                      |  56 --
 .../tools/tool-provider-detail-flow.test.tsx  |  17 +-
 .../agent-tools/setting-built-in-tool.tsx     | 196 ++---
 .../app/configuration/configuration-view.tsx  |  60 +-
 .../card-item/__tests__/index.spec.tsx        |   8 +-
 .../dataset-config/card-item/index.tsx        |  42 +-
 .../app/log/__tests__/list.spec.tsx           |  32 +-
 web/app/components/app/log/list.tsx           |  50 +-
 web/app/components/app/workflow-log/list.tsx  |  40 +-
 .../base/drawer/__tests__/index.spec.tsx      | 676 ------------------
 .../components/base/drawer/index.stories.tsx  | 114 ---
 web/app/components/base/drawer/index.tsx      | 128 ----
 .../__tests__/index.spec.tsx                  |  45 +-
 .../float-right-container/index.stories.tsx   |   1 -
 .../base/float-right-container/index.tsx      |  72 +-
 .../step-two/components/preview-panel.tsx     |   2 +-
 .../datasets/documents/detail/index.tsx       |   2 +-
 .../components/datasets/hit-testing/index.tsx |  52 +-
 .../plugin-detail-panel/endpoint-modal.tsx    | 122 ++--
 .../plugins/plugin-detail-panel/index.tsx     |  78 +-
 .../plugin-detail-panel/strategy-detail.tsx   | 178 ++---
 .../trigger/event-detail-drawer.tsx           | 158 ++--
 .../detail/__tests__/provider-detail.spec.tsx |  11 +-
 .../tools/mcp/detail/provider-detail.tsx      |  50 +-
 .../tools/provider/__tests__/detail.spec.tsx  |   5 -
 web/app/components/tools/provider/detail.tsx  | 396 +++++-----
 .../components/dataset-item.tsx               |  39 +-
 27 files changed, 946 insertions(+), 1684 deletions(-)
 delete mode 100644 web/app/components/base/drawer/__tests__/index.spec.tsx
 delete mode 100644 web/app/components/base/drawer/index.stories.tsx
 delete mode 100644 web/app/components/base/drawer/index.tsx

diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index e49483f63c..23e2da9ee0 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -305,9 +305,6 @@
     }
   },
   "web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react-hooks/exhaustive-deps": {
       "count": 1
     },
@@ -359,16 +356,6 @@
       "count": 2
     }
   },
-  "web/app/components/app/configuration/configuration-view.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "web/app/components/app/configuration/dataset-config/card-item/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/app/configuration/dataset-config/index.tsx": {
     "ts/no-explicit-any": {
       "count": 1
@@ -475,9 +462,6 @@
     }
   },
   "web/app/components/app/log/list.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react/set-state-in-effect": {
       "count": 6
     },
@@ -519,9 +503,6 @@
     }
   },
   "web/app/components/app/workflow-log/list.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react/set-state-in-effect": {
       "count": 2
     }
@@ -933,11 +914,6 @@
       "count": 3
     }
   },
-  "web/app/components/base/float-right-container/index.tsx": {
-    "no-restricted-imports": {
-      "count": 2
-    }
-  },
   "web/app/components/base/form/components/base/base-form.tsx": {
     "ts/no-explicit-any": {
       "count": 6
@@ -2092,9 +2068,6 @@
     }
   },
   "web/app/components/datasets/hit-testing/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react/unsupported-syntax": {
       "count": 1
     }
@@ -2540,18 +2513,10 @@
     }
   },
   "web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 7
     }
   },
-  "web/app/components/plugins/plugin-detail-panel/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/plugins/plugin-detail-panel/model-list.tsx": {
     "ts/no-explicit-any": {
       "count": 1
@@ -2573,9 +2538,6 @@
     }
   },
   "web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -2634,9 +2596,6 @@
     }
   },
   "web/app/components/plugins/plugin-detail-panel/trigger/event-detail-drawer.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 5
     }
@@ -2874,11 +2833,6 @@
       "count": 1
     }
   },
-  "web/app/components/tools/mcp/detail/provider-detail.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/tools/mcp/mcp-server-param-item.tsx": {
     "ts/no-explicit-any": {
       "count": 1
@@ -2894,11 +2848,6 @@
       "count": 1
     }
   },
-  "web/app/components/tools/provider/detail.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/tools/provider/empty.tsx": {
     "ts/no-explicit-any": {
       "count": 1
@@ -3711,11 +3660,6 @@
       "count": 1
     }
   },
-  "web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-item.tsx": {
     "ts/no-explicit-any": {
       "count": 1
diff --git a/web/__tests__/tools/tool-provider-detail-flow.test.tsx b/web/__tests__/tools/tool-provider-detail-flow.test.tsx
index c0dd6da1c5..5e3e94d4ff 100644
--- a/web/__tests__/tools/tool-provider-detail-flow.test.tsx
+++ b/web/__tests__/tools/tool-provider-detail-flow.test.tsx
@@ -120,19 +120,6 @@ vi.mock('@/utils/var', () => ({
   basePath: '',
 }))
 
-vi.mock('@/app/components/base/drawer', () => ({
-  default: ({ isOpen, children, onClose }: { isOpen: boolean, children: React.ReactNode, onClose: () => void }) => (
-    isOpen
-      ? (
-          <div data-testid="drawer">
-            {children}
-            <button data-testid="drawer-close" onClick={onClose}>Close Drawer</button>
-          </div>
-        )
-      : null
-  ),
-}))
-
 vi.mock('@langgenius/dify-ui/toast', () => ({
   default: { notify: vi.fn() },
   toast: {
@@ -525,10 +512,10 @@ describe('Tool Provider Detail Flow Integration', () => {
       render(<ProviderDetail collection={collection} onHide={mockOnHide} onRefreshData={mockOnRefreshData} />)
 
       await waitFor(() => {
-        expect(screen.getByTestId('drawer')).toBeInTheDocument()
+        expect(screen.getByRole('dialog')).toBeInTheDocument()
       })
 
-      fireEvent.click(screen.getByTestId('drawer-close'))
+      fireEvent.click(screen.getByRole('button', { name: 'operation.close' }))
       expect(mockOnHide).toHaveBeenCalled()
     })
   })
diff --git a/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx b/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
index 71922d5a7e..806fdd5e93 100644
--- a/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
@@ -4,6 +4,14 @@ import type { Collection, Tool } from '@/app/components/tools/types'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Drawer,
+  DrawerBackdrop,
+  DrawerContent,
+  DrawerPopup,
+  DrawerPortal,
+  DrawerViewport,
+} from '@langgenius/dify-ui/drawer'
 import {
   RiArrowLeftLine,
   RiCloseLine,
@@ -12,7 +20,6 @@ import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import Drawer from '@/app/components/base/drawer'
 import Loading from '@/app/components/base/loading'
 import TabSlider from '@/app/components/base/tab-slider-plain'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
@@ -165,98 +172,105 @@ const SettingBuiltInTool: FC<Props> = ({
 
   return (
     <Drawer
-      isOpen
-      clickOutsideNotOpen={false}
-      onClose={onHide}
-      footer={null}
-      mask={false}
-      positionCenter={false}
-      panelClassName={cn('mt-[64px] mr-2 mb-2 w-[420px]! max-w-[420px]! justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg! p-0! shadow-xl')}
+      open
+      modal
+      swipeDirection="right"
+      onOpenChange={(open) => {
+        if (!open)
+          onHide()
+      }}
     >
-      <>
-        {isLoading && <Loading type="app" />}
-        {!isLoading && (
-          <>
-            {/* header */}
-            <div className="relative border-b border-divider-subtle p-4 pb-3">
-              <div className="absolute top-3 right-3">
-                <ActionButton onClick={onHide}>
-                  <RiCloseLine className="h-4 w-4" />
-                </ActionButton>
-              </div>
-              {showBackButton && (
-                <div
-                  className="mb-2 flex cursor-pointer items-center gap-1 system-xs-semibold-uppercase text-text-accent-secondary"
-                  onClick={onHide}
-                >
-                  <RiArrowLeftLine className="h-4 w-4" />
-                  {t('detailPanel.operation.back', { ns: 'plugin' })}
-                </div>
-              )}
-              <div className="flex items-center gap-1">
-                <Icon size="tiny" className="h-6 w-6" src={collection.icon} />
-                <OrgInfo
-                  packageNameClassName="w-auto"
-                  orgName={collection.author}
-                  packageName={collection.name.split('/').pop() || ''}
-                />
-              </div>
-              <div className="mt-1 system-md-semibold text-text-primary">{currTool?.label[language]}</div>
-              {!!currTool?.description[language] && (
-                <Description className="mt-3 mb-2 h-auto" text={currTool.description[language]} descriptionLineRows={2}></Description>
-              )}
-              {
-                collection.allow_delete && collection.type === CollectionType.builtIn && (
-                  <PluginAuthInAgent
-                    pluginPayload={{
-                      provider: collection.name,
-                      category: AuthCategory.tool,
-                      providerType: collection.type,
-                      detail: collection as any,
-                    }}
-                    credentialId={credentialId}
-                    onAuthorizationItemClick={onAuthorizationItemClick}
-                  />
-                )
-              }
-            </div>
-            {/* form */}
-            <div className="h-full">
-              <div className="flex h-full flex-col">
-                {(hasSetting && !readonly)
-                  ? (
-                      <TabSlider
-                        className="mt-1 shrink-0 px-4"
-                        itemClassName="py-3"
-                        noBorderBottom
-                        value={currType}
-                        onChange={(value) => {
-                          setCurrType(value)
-                        }}
-                        options={[
-                          { value: 'info', text: t('setBuiltInTools.parameters', { ns: 'tools' })! },
-                          { value: 'setting', text: t('setBuiltInTools.setting', { ns: 'tools' })! },
-                        ]}
-                      />
-                    )
-                  : (
-                      <div className="p-4 pb-1 system-sm-semibold-uppercase text-text-primary">{t('setBuiltInTools.parameters', { ns: 'tools' })}</div>
-                    )}
-                <div className="h-0 grow overflow-y-auto px-4">
-                  {isInfoActive ? infoUI : settingUI}
-                  {!readonly && !isInfoActive && (
-                    <div className="flex shrink-0 justify-end space-x-2 rounded-b-[10px] bg-components-panel-bg py-2">
-                      <Button className="flex h-8 items-center px-3! text-[13px]! font-medium" onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
-                      <Button className="flex h-8 items-center px-3! text-[13px]! font-medium" variant="primary" disabled={!isValid} onClick={() => onSave?.(tempSetting)}>{t('operation.save', { ns: 'common' })}</Button>
+      <DrawerPortal>
+        <DrawerBackdrop className="bg-transparent" />
+        <DrawerViewport>
+          <DrawerPopup className={cn('justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-[420px] data-[swipe-direction=right]:max-w-[420px] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border')}>
+            <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
+              {isLoading && <Loading type="app" />}
+              {!isLoading && (
+                <>
+                  {/* header */}
+                  <div className="relative border-b border-divider-subtle p-4 pb-3">
+                    <div className="absolute top-3 right-3">
+                      <ActionButton onClick={onHide}>
+                        <RiCloseLine className="h-4 w-4" />
+                      </ActionButton>
                     </div>
-                  )}
-                </div>
-                <ReadmeEntrance pluginDetail={collection as any} className="mt-auto" />
-              </div>
-            </div>
-          </>
-        )}
-      </>
+                    {showBackButton && (
+                      <div
+                        className="mb-2 flex cursor-pointer items-center gap-1 system-xs-semibold-uppercase text-text-accent-secondary"
+                        onClick={onHide}
+                      >
+                        <RiArrowLeftLine className="h-4 w-4" />
+                        {t('detailPanel.operation.back', { ns: 'plugin' })}
+                      </div>
+                    )}
+                    <div className="flex items-center gap-1">
+                      <Icon size="tiny" className="h-6 w-6" src={collection.icon} />
+                      <OrgInfo
+                        packageNameClassName="w-auto"
+                        orgName={collection.author}
+                        packageName={collection.name.split('/').pop() || ''}
+                      />
+                    </div>
+                    <div className="mt-1 system-md-semibold text-text-primary">{currTool?.label[language]}</div>
+                    {!!currTool?.description[language] && (
+                      <Description className="mt-3 mb-2 h-auto" text={currTool.description[language]} descriptionLineRows={2}></Description>
+                    )}
+                    {
+                      collection.allow_delete && collection.type === CollectionType.builtIn && (
+                        <PluginAuthInAgent
+                          pluginPayload={{
+                            provider: collection.name,
+                            category: AuthCategory.tool,
+                            providerType: collection.type,
+                            detail: collection as any,
+                          }}
+                          credentialId={credentialId}
+                          onAuthorizationItemClick={onAuthorizationItemClick}
+                        />
+                      )
+                    }
+                  </div>
+                  {/* form */}
+                  <div className="h-full">
+                    <div className="flex h-full flex-col">
+                      {(hasSetting && !readonly)
+                        ? (
+                            <TabSlider
+                              className="mt-1 shrink-0 px-4"
+                              itemClassName="py-3"
+                              noBorderBottom
+                              value={currType}
+                              onChange={(value) => {
+                                setCurrType(value)
+                              }}
+                              options={[
+                                { value: 'info', text: t('setBuiltInTools.parameters', { ns: 'tools' })! },
+                                { value: 'setting', text: t('setBuiltInTools.setting', { ns: 'tools' })! },
+                              ]}
+                            />
+                          )
+                        : (
+                            <div className="p-4 pb-1 system-sm-semibold-uppercase text-text-primary">{t('setBuiltInTools.parameters', { ns: 'tools' })}</div>
+                          )}
+                      <div className="h-0 grow overflow-y-auto px-4">
+                        {isInfoActive ? infoUI : settingUI}
+                        {!readonly && !isInfoActive && (
+                          <div className="flex shrink-0 justify-end space-x-2 rounded-b-[10px] bg-components-panel-bg py-2">
+                            <Button className="flex h-8 items-center px-3! text-[13px]! font-medium" onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
+                            <Button className="flex h-8 items-center px-3! text-[13px]! font-medium" variant="primary" disabled={!isValid} onClick={() => onSave?.(tempSetting)}>{t('operation.save', { ns: 'common' })}</Button>
+                          </div>
+                        )}
+                      </div>
+                      <ReadmeEntrance pluginDetail={collection as any} className="mt-auto" />
+                    </div>
+                  </div>
+                </>
+              )}
+            </DrawerContent>
+          </DrawerPopup>
+        </DrawerViewport>
+      </DrawerPortal>
     </Drawer>
   )
 }
diff --git a/web/app/components/app/configuration/configuration-view.tsx b/web/app/components/app/configuration/configuration-view.tsx
index 1e2b0bf81a..04cb3ffeda 100644
--- a/web/app/components/app/configuration/configuration-view.tsx
+++ b/web/app/components/app/configuration/configuration-view.tsx
@@ -12,6 +12,15 @@ import {
   AlertDialogTitle,
 } from '@langgenius/dify-ui/alert-dialog'
 import { Button } from '@langgenius/dify-ui/button'
+import {
+  Drawer,
+  DrawerBackdrop,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerPopup,
+  DrawerPortal,
+  DrawerViewport,
+} from '@langgenius/dify-ui/drawer'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import AppPublisher from '@/app/components/app/app-publisher/features-wrapper'
@@ -21,7 +30,6 @@ import AgentSettingButton from '@/app/components/app/configuration/config/agent-
 import SelectDataSet from '@/app/components/app/configuration/dataset-config/select-dataset'
 import Debug from '@/app/components/app/configuration/debug'
 import Divider from '@/app/components/base/divider'
-import Drawer from '@/app/components/base/drawer'
 import { FeaturesProvider } from '@/app/components/base/features'
 import NewFeaturePanel from '@/app/components/base/features/new-feature-panel'
 import Loading from '@/app/components/base/loading'
@@ -192,19 +200,43 @@ const ConfigurationView: FC<ConfigurationViewModel> = ({
           )}
 
           {isMobile && (
-            <Drawer showClose isOpen={isShowDebugPanel} onClose={onHideDebugPanel} mask footer={null}>
-              <Debug
-                isAPIKeySet={contextValue.isAPIKeySet}
-                onSetting={onOpenAccountSettings}
-                inputs={contextValue.inputs}
-                modelParameterParams={{
-                  setModel: onModelChange,
-                  onCompletionParamsChange,
-                }}
-                debugWithMultipleModel={!!debugWithMultipleModel}
-                multipleModelConfigs={multipleModelConfigs}
-                onMultipleModelConfigsChange={onMultipleModelConfigsChange}
-              />
+            <Drawer
+              open={isShowDebugPanel}
+              modal
+              swipeDirection="right"
+              onOpenChange={(open) => {
+                if (!open)
+                  onHideDebugPanel()
+              }}
+            >
+              <DrawerPortal>
+                <DrawerBackdrop className="bg-black/30" />
+                <DrawerViewport>
+                  <DrawerPopup className="data-[swipe-direction=right]:w-full data-[swipe-direction=right]:max-w-sm">
+                    <DrawerContent className="flex min-h-0 flex-1 flex-col">
+                      <div className="mb-4 flex shrink-0 justify-end">
+                        <DrawerCloseButton
+                          aria-label={t('operation.close', { ns: 'common' })}
+                          className="h-6 w-6 rounded-md"
+                          data-testid="close-icon"
+                        />
+                      </div>
+                      <Debug
+                        isAPIKeySet={contextValue.isAPIKeySet}
+                        onSetting={onOpenAccountSettings}
+                        inputs={contextValue.inputs}
+                        modelParameterParams={{
+                          setModel: onModelChange,
+                          onCompletionParamsChange,
+                        }}
+                        debugWithMultipleModel={!!debugWithMultipleModel}
+                        multipleModelConfigs={multipleModelConfigs}
+                        onMultipleModelConfigsChange={onMultipleModelConfigsChange}
+                      />
+                    </DrawerContent>
+                  </DrawerPopup>
+                </DrawerViewport>
+              </DrawerPortal>
             </Drawer>
           )}
 
diff --git a/web/app/components/app/configuration/dataset-config/card-item/__tests__/index.spec.tsx b/web/app/components/app/configuration/dataset-config/card-item/__tests__/index.spec.tsx
index 1d14f7dbd2..cffed4b846 100644
--- a/web/app/components/app/configuration/dataset-config/card-item/__tests__/index.spec.tsx
+++ b/web/app/components/app/configuration/dataset-config/card-item/__tests__/index.spec.tsx
@@ -230,8 +230,12 @@ describe('dataset-config/card-item', () => {
     expect(screen.getByText('Mock settings modal'))!.toBeInTheDocument()
 
     const overlay = [...document.querySelectorAll('[class]')]
-      .find(element => element.className.toString().includes('bg-black/30'))
+      .find(element =>
+        element instanceof HTMLElement
+        && element.classList.contains('bg-background-overlay')
+        && !element.classList.contains('bg-transparent'),
+      )
 
-    expect(overlay)!.toBeInTheDocument()
+    expect(overlay).toBeInTheDocument()
   })
 })
diff --git a/web/app/components/app/configuration/dataset-config/card-item/index.tsx b/web/app/components/app/configuration/dataset-config/card-item/index.tsx
index 8eb856feb3..62dd17f4b1 100644
--- a/web/app/components/app/configuration/dataset-config/card-item/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/card-item/index.tsx
@@ -2,6 +2,14 @@
 import type { FC } from 'react'
 import type { DataSet } from '@/models/datasets'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Drawer,
+  DrawerBackdrop,
+  DrawerContent,
+  DrawerPopup,
+  DrawerPortal,
+  DrawerViewport,
+} from '@langgenius/dify-ui/drawer'
 import {
   RiDeleteBinLine,
   RiEditLine,
@@ -12,7 +20,6 @@ import { useTranslation } from 'react-i18next'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 import AppIcon from '@/app/components/base/app-icon'
 import Badge from '@/app/components/base/badge'
-import Drawer from '@/app/components/base/drawer'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useKnowledge } from '@/hooks/use-knowledge'
 import SettingsModal from '../settings-modal'
@@ -112,14 +119,31 @@ const Item: FC<ItemProps> = ({
           />
         )
       }
-      <Drawer isOpen={showSettingsModal} onClose={() => setShowSettingsModal(false)} footer={null} mask={isMobile} panelClassName="mt-16 mx-2 sm:mr-2 mb-3 p-0! max-w-[640px]! rounded-xl">
-        {showSettingsModal && (
-          <SettingsModal
-            currentDataset={config}
-            onCancel={() => setShowSettingsModal(false)}
-            onSave={handleSave}
-          />
-        )}
+      <Drawer
+        open={showSettingsModal}
+        modal
+        swipeDirection="right"
+        onOpenChange={(open) => {
+          if (!open)
+            setShowSettingsModal(false)
+        }}
+      >
+        <DrawerPortal>
+          <DrawerBackdrop className={cn(!isMobile && 'bg-transparent')} />
+          <DrawerViewport>
+            <DrawerPopup className="p-0! data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-3 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-full data-[swipe-direction=right]:max-w-[640px] data-[swipe-direction=right]:rounded-xl">
+              <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
+                {showSettingsModal && (
+                  <SettingsModal
+                    currentDataset={config}
+                    onCancel={() => setShowSettingsModal(false)}
+                    onSave={handleSave}
+                  />
+                )}
+              </DrawerContent>
+            </DrawerPopup>
+          </DrawerViewport>
+        </DrawerPortal>
       </Drawer>
     </div>
   )
diff --git a/web/app/components/app/log/__tests__/list.spec.tsx b/web/app/components/app/log/__tests__/list.spec.tsx
index fe589b599a..dbd350f16b 100644
--- a/web/app/components/app/log/__tests__/list.spec.tsx
+++ b/web/app/components/app/log/__tests__/list.spec.tsx
@@ -84,19 +84,6 @@ vi.mock('@/app/components/app/store', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/drawer', () => ({
-  default: ({ children, isOpen, onClose }: { children: ReactNode, isOpen: boolean, onClose: () => void }) => (
-    isOpen
-      ? (
-          <div data-testid="drawer">
-            <button onClick={onClose}>close-drawer</button>
-            {children}
-          </div>
-        )
-      : null
-  ),
-}))
-
 vi.mock('@/app/components/base/loading', () => ({
   default: () => <div>loading</div>,
 }))
@@ -283,7 +270,7 @@ describe('ConversationList', () => {
 
     await waitFor(() => {
       expect(onUrlUpdate).toHaveBeenCalled()
-      expect(screen.getByTestId('drawer')).toBeInTheDocument()
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
     })
 
     const update = onUrlUpdate.mock.calls.at(-1)![0]
@@ -293,11 +280,26 @@ describe('ConversationList', () => {
   })
 
   it('should close the drawer, refresh, and clear modal flags', async () => {
+    mockChatConversationDetail = {
+      id: 'conversation-1',
+      created_at: 1710000000,
+      model_config: {
+        model: 'gpt-4o',
+        configs: {
+          introduction: 'Hello there',
+        },
+        user_input_form: [],
+      },
+      message: {
+        inputs: {},
+      },
+    }
+
     const { onUrlUpdate } = renderConversationList({
       searchParams: '?page=2&conversation_id=conversation-1',
     })
 
-    fireEvent.click(screen.getByText('close-drawer'))
+    fireEvent.click(await screen.findByRole('button', { name: 'operation.close' }))
 
     expect(mockOnRefresh).toHaveBeenCalledTimes(1)
     expect(mockSetShowPromptLogModal).toHaveBeenCalledWith(false)
diff --git a/web/app/components/app/log/list.tsx b/web/app/components/app/log/list.tsx
index 1633d53ccc..2e078b7b93 100644
--- a/web/app/components/app/log/list.tsx
+++ b/web/app/components/app/log/list.tsx
@@ -9,6 +9,14 @@ import {
   HandThumbUpIcon,
 } from '@heroicons/react/24/outline'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Drawer,
+  DrawerBackdrop,
+  DrawerContent,
+  DrawerPopup,
+  DrawerPortal,
+  DrawerViewport,
+} from '@langgenius/dify-ui/drawer'
 import { toast } from '@langgenius/dify-ui/toast'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { RiCloseLine, RiEditFill } from '@remixicon/react'
@@ -28,7 +36,6 @@ import TextGeneration from '@/app/components/app/text-generate/item'
 import ActionButton from '@/app/components/base/action-button'
 import Chat from '@/app/components/base/chat/chat'
 import CopyIcon from '@/app/components/base/copy-icon'
-import Drawer from '@/app/components/base/drawer'
 import Loading from '@/app/components/base/loading'
 import MessageLogModal from '@/app/components/base/message-log-modal'
 import { WorkflowContextProvider } from '@/app/components/workflow/context'
@@ -429,7 +436,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
         <div className="flex grow flex-wrap items-center justify-end gap-y-1">
           {!isAdvanced && <ModelInfo model={detail.model_config.model} />}
         </div>
-        <ActionButton size="l" onClick={onClose}>
+        <ActionButton size="l" aria-label={t('operation.close', { ns: 'common' })} onClick={onClose}>
           <RiCloseLine className="h-4 w-4 text-text-tertiary" />
         </ActionButton>
       </div>
@@ -872,21 +879,32 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
         </tbody>
       </table>
       <Drawer
-        isOpen={showDrawer}
-        onClose={onCloseDrawer}
-        mask={isMobile}
-        footer={null}
-        panelClassName="mt-16 mx-2 sm:mr-2 mb-4 p-0! max-w-[640px]! rounded-xl bg-components-panel-bg"
-      >
-        <DrawerContext.Provider value={{
-          onClose: onCloseDrawer,
-          appDetail,
+        open={showDrawer}
+        modal
+        swipeDirection="right"
+        onOpenChange={(open) => {
+          if (!open)
+            onCloseDrawer()
         }}
-        >
-          {isChatMode
-            ? <ChatConversationDetailComp appId={appDetail.id} conversationId={currentConversation?.id} />
-            : <CompletionConversationDetailComp appId={appDetail.id} conversationId={currentConversation?.id} />}
-        </DrawerContext.Provider>
+      >
+        <DrawerPortal>
+          <DrawerBackdrop className={cn(!isMobile && 'bg-transparent')} />
+          <DrawerViewport>
+            <DrawerPopup className="bg-components-panel-bg p-0! data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-4 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-full data-[swipe-direction=right]:max-w-[640px] data-[swipe-direction=right]:rounded-xl">
+              <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
+                <DrawerContext.Provider value={{
+                  onClose: onCloseDrawer,
+                  appDetail,
+                }}
+                >
+                  {isChatMode
+                    ? <ChatConversationDetailComp appId={appDetail.id} conversationId={currentConversation?.id} />
+                    : <CompletionConversationDetailComp appId={appDetail.id} conversationId={currentConversation?.id} />}
+                </DrawerContext.Provider>
+              </DrawerContent>
+            </DrawerPopup>
+          </DrawerViewport>
+        </DrawerPortal>
       </Drawer>
     </div>
   )
diff --git a/web/app/components/app/workflow-log/list.tsx b/web/app/components/app/workflow-log/list.tsx
index e514962d9b..78d9a329e6 100644
--- a/web/app/components/app/workflow-log/list.tsx
+++ b/web/app/components/app/workflow-log/list.tsx
@@ -4,10 +4,17 @@ import type { WorkflowAppLogDetail, WorkflowLogsResponse, WorkflowRunTriggeredFr
 import type { App } from '@/types/app'
 import { ArrowDownIcon } from '@heroicons/react/24/outline'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Drawer,
+  DrawerBackdrop,
+  DrawerContent,
+  DrawerPopup,
+  DrawerPortal,
+  DrawerViewport,
+} from '@langgenius/dify-ui/drawer'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Drawer from '@/app/components/base/drawer'
 import Loading from '@/app/components/base/loading'
 import Indicator from '@/app/components/header/indicator'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
@@ -183,17 +190,28 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
         </tbody>
       </table>
       <Drawer
-        isOpen={showDrawer}
-        onClose={onCloseDrawer}
-        mask={isMobile}
-        footer={null}
-        panelClassName="mt-16 mx-2 sm:mr-2 mb-3 p-0! max-w-[600px]! rounded-xl border border-components-panel-border"
+        open={showDrawer}
+        modal
+        swipeDirection="right"
+        onOpenChange={(open) => {
+          if (!open)
+            onCloseDrawer()
+        }}
       >
-        <DetailPanel
-          onClose={onCloseDrawer}
-          runID={currentLog?.workflow_run.id || ''}
-          canReplay={currentLog?.workflow_run.triggered_from === 'app-run' || currentLog?.workflow_run.triggered_from === 'debugging'}
-        />
+        <DrawerPortal>
+          <DrawerBackdrop className={cn(!isMobile && 'bg-transparent')} />
+          <DrawerViewport>
+            <DrawerPopup className="p-0! data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-3 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-full data-[swipe-direction=right]:max-w-[600px] data-[swipe-direction=right]:rounded-xl data-[swipe-direction=right]:border data-[swipe-direction=right]:border-components-panel-border">
+              <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
+                <DetailPanel
+                  onClose={onCloseDrawer}
+                  runID={currentLog?.workflow_run.id || ''}
+                  canReplay={currentLog?.workflow_run.triggered_from === 'app-run' || currentLog?.workflow_run.triggered_from === 'debugging'}
+                />
+              </DrawerContent>
+            </DrawerPopup>
+          </DrawerViewport>
+        </DrawerPortal>
       </Drawer>
     </div>
   )
diff --git a/web/app/components/base/drawer/__tests__/index.spec.tsx b/web/app/components/base/drawer/__tests__/index.spec.tsx
deleted file mode 100644
index 1f9c1c258f..0000000000
--- a/web/app/components/base/drawer/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,676 +0,0 @@
-import type { IDrawerProps } from '../index'
-import { fireEvent, render, screen } from '@testing-library/react'
-import * as React from 'react'
-import Drawer from '../index'
-
-// Capture dialog onClose for testing
-let capturedDialogOnClose: (() => void) | null = null
-
-// Mock Base UI Dialog anatomy; behavior is covered at the legacy wrapper boundary here.
-vi.mock('@base-ui/react/dialog', () => ({
-  Dialog: {
-    Root: ({ children, open, onOpenChange }: {
-      children: React.ReactNode
-      open: boolean
-      onOpenChange: (open: boolean) => void
-    }) => {
-      capturedDialogOnClose = () => onOpenChange(false)
-      if (!open)
-        return null
-      return <>{children}</>
-    },
-    Portal: ({ children }: {
-      children: React.ReactNode
-    }) => <>{children}</>,
-    Backdrop: ({ children, className }: {
-      children?: React.ReactNode
-      className: string
-    }) => (
-      <div
-        data-testid="dialog-backdrop"
-        className={className}
-        onClick={() => capturedDialogOnClose?.()}
-      >
-        {children}
-      </div>
-    ),
-    Popup: ({ children, className, ...props }: {
-      children: React.ReactNode
-      className: string
-    }) => (
-      <div
-        data-testid="dialog"
-        className={className}
-        role="dialog"
-        {...props}
-      >
-        {children}
-      </div>
-    ),
-    Title: ({ children, className, render, ...props }: {
-      children: React.ReactNode
-      className?: string
-      render?: React.ReactElement
-    }) => {
-      const Component = render?.type ?? 'h2'
-      return (
-        <Component data-testid="dialog-title" className={className} {...props}>
-          {children}
-        </Component>
-      )
-    },
-  },
-}))
-
-// Mock XMarkIcon
-vi.mock('@heroicons/react/24/outline', () => ({
-  XMarkIcon: ({ className, onClick }: { className: string, onClick?: () => void }) => (
-    <svg data-testid="close-icon" className={className} onClick={onClick} />
-  ),
-}))
-
-// Helper function to render Drawer with default props
-const defaultProps: IDrawerProps = {
-  isOpen: true,
-  onClose: vi.fn(),
-  children: <div data-testid="drawer-content">Content</div>,
-}
-
-const renderDrawer = (props: Partial<IDrawerProps> = {}) => {
-  const mergedProps = { ...defaultProps, ...props }
-  return render(<Drawer {...mergedProps} />)
-}
-
-describe('Drawer', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    capturedDialogOnClose = null
-  })
-
-  // Basic rendering tests
-  describe('Rendering', () => {
-    it('should render when isOpen is true', () => {
-      // Arrange & Act
-      renderDrawer({ isOpen: true })
-
-      // Assert
-      expect(screen.getByRole('dialog')).toBeInTheDocument()
-      expect(screen.getByTestId('drawer-content')).toBeInTheDocument()
-    })
-
-    it('should not render when isOpen is false', () => {
-      // Arrange & Act
-      renderDrawer({ isOpen: false })
-
-      // Assert
-      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
-    })
-
-    it('should render children content', () => {
-      // Arrange
-      const childContent = <p data-testid="custom-child">Custom Content</p>
-
-      // Act
-      renderDrawer({ children: childContent })
-
-      // Assert
-      expect(screen.getByTestId('custom-child')).toBeInTheDocument()
-      expect(screen.getByText('Custom Content')).toBeInTheDocument()
-    })
-  })
-
-  // Title and description tests
-  describe('Title and Description', () => {
-    it('should render title when provided', () => {
-      // Arrange & Act
-      renderDrawer({ title: 'Test Title' })
-
-      // Assert
-      expect(screen.getByText('Test Title')).toBeInTheDocument()
-    })
-
-    it('should not render title when not provided', () => {
-      // Arrange & Act
-      renderDrawer({ title: '' })
-
-      // Assert
-      const titles = screen.queryAllByTestId('dialog-title')
-      const titleWithText = titles.find(el => el.textContent !== '')
-      expect(titleWithText).toBeUndefined()
-    })
-
-    it('should render description when provided', () => {
-      // Arrange & Act
-      renderDrawer({ description: 'Test Description' })
-
-      // Assert
-      expect(screen.getByText('Test Description')).toBeInTheDocument()
-    })
-
-    it('should not render description when not provided', () => {
-      // Arrange & Act
-      renderDrawer({ description: '' })
-
-      // Assert
-      expect(screen.queryByText('Test Description')).not.toBeInTheDocument()
-    })
-
-    it('should render both title and description together', () => {
-      // Arrange & Act
-      renderDrawer({
-        title: 'My Title',
-        description: 'My Description',
-      })
-
-      // Assert
-      expect(screen.getByText('My Title')).toBeInTheDocument()
-      expect(screen.getByText('My Description')).toBeInTheDocument()
-    })
-  })
-
-  // Close button tests
-  describe('Close Button', () => {
-    it('should render close icon when showClose is true', () => {
-      // Arrange & Act
-      renderDrawer({ showClose: true })
-
-      // Assert
-      expect(screen.getByTestId('close-icon')).toBeInTheDocument()
-    })
-
-    it('should not render close icon when showClose is false', () => {
-      // Arrange & Act
-      renderDrawer({ showClose: false })
-
-      // Assert
-      expect(screen.queryByTestId('close-icon')).not.toBeInTheDocument()
-    })
-
-    it('should not render close icon by default', () => {
-      // Arrange & Act
-      renderDrawer({})
-
-      // Assert
-      expect(screen.queryByTestId('close-icon')).not.toBeInTheDocument()
-    })
-
-    it('should call onClose when close icon is clicked', () => {
-      // Arrange
-      const onClose = vi.fn()
-      renderDrawer({ showClose: true, onClose })
-
-      // Act
-      fireEvent.click(screen.getByTestId('close-icon'))
-
-      // Assert
-      expect(onClose).toHaveBeenCalledTimes(1)
-    })
-  })
-
-  // Backdrop/Mask tests
-  describe('Backdrop and Mask', () => {
-    it('should render backdrop when noOverlay is false', () => {
-      // Arrange & Act
-      renderDrawer({ noOverlay: false })
-
-      // Assert
-      expect(screen.getByTestId('dialog-backdrop')).toBeInTheDocument()
-    })
-
-    it('should not render backdrop when noOverlay is true', () => {
-      // Arrange & Act
-      renderDrawer({ noOverlay: true })
-
-      // Assert
-      expect(screen.queryByTestId('dialog-backdrop')).not.toBeInTheDocument()
-    })
-
-    it('should apply mask background when mask is true', () => {
-      // Arrange & Act
-      renderDrawer({ mask: true })
-
-      // Assert
-      const backdrop = screen.getByTestId('dialog-backdrop')
-      expect(backdrop.className).toContain('bg-black/30')
-    })
-
-    it('should not apply mask background when mask is false', () => {
-      // Arrange & Act
-      renderDrawer({ mask: false })
-
-      // Assert
-      const backdrop = screen.getByTestId('dialog-backdrop')
-      expect(backdrop.className).not.toContain('bg-black/30')
-    })
-
-    it('should call onClose when backdrop is clicked and clickOutsideNotOpen is false', () => {
-      // Arrange
-      const onClose = vi.fn()
-      renderDrawer({ onClose, clickOutsideNotOpen: false })
-
-      // Act
-      fireEvent.click(screen.getByTestId('dialog-backdrop'))
-
-      // Assert
-      expect(onClose).toHaveBeenCalledTimes(1)
-    })
-
-    it('should not call onClose when backdrop is clicked and clickOutsideNotOpen is true', () => {
-      // Arrange
-      const onClose = vi.fn()
-      renderDrawer({ onClose, clickOutsideNotOpen: true })
-
-      // Act
-      fireEvent.click(screen.getByTestId('dialog-backdrop'))
-
-      // Assert
-      expect(onClose).not.toHaveBeenCalled()
-    })
-  })
-
-  // Footer tests
-  describe('Footer', () => {
-    it('should render default footer with cancel and save buttons when footer is undefined', () => {
-      // Arrange & Act
-      renderDrawer({ footer: undefined })
-
-      // Assert
-      expect(screen.getByText('common.operation.cancel')).toBeInTheDocument()
-      expect(screen.getByText('common.operation.save')).toBeInTheDocument()
-    })
-
-    it('should not render footer when footer is null', () => {
-      // Arrange & Act
-      renderDrawer({ footer: null })
-
-      // Assert
-      expect(screen.queryByText('common.operation.cancel')).not.toBeInTheDocument()
-      expect(screen.queryByText('common.operation.save')).not.toBeInTheDocument()
-    })
-
-    it('should render custom footer when provided', () => {
-      // Arrange
-      const customFooter = <div data-testid="custom-footer">Custom Footer</div>
-
-      // Act
-      renderDrawer({ footer: customFooter })
-
-      // Assert
-      expect(screen.getByTestId('custom-footer')).toBeInTheDocument()
-      expect(screen.queryByText('common.operation.cancel')).not.toBeInTheDocument()
-    })
-
-    it('should call onCancel when cancel button is clicked', () => {
-      // Arrange
-      const onCancel = vi.fn()
-      renderDrawer({ onCancel })
-
-      // Act
-      const cancelButton = screen.getByText('common.operation.cancel')
-      fireEvent.click(cancelButton)
-
-      // Assert
-      expect(onCancel).toHaveBeenCalledTimes(1)
-    })
-
-    it('should call onOk when save button is clicked', () => {
-      // Arrange
-      const onOk = vi.fn()
-      renderDrawer({ onOk })
-
-      // Act
-      const saveButton = screen.getByText('common.operation.save')
-      fireEvent.click(saveButton)
-
-      // Assert
-      expect(onOk).toHaveBeenCalledTimes(1)
-    })
-
-    it('should not throw when onCancel is not provided and cancel is clicked', () => {
-      // Arrange
-      renderDrawer({ onCancel: undefined })
-
-      // Act & Assert
-      expect(() => {
-        fireEvent.click(screen.getByText('common.operation.cancel'))
-      }).not.toThrow()
-    })
-
-    it('should not throw when onOk is not provided and save is clicked', () => {
-      // Arrange
-      renderDrawer({ onOk: undefined })
-
-      // Act & Assert
-      expect(() => {
-        fireEvent.click(screen.getByText('common.operation.save'))
-      }).not.toThrow()
-    })
-  })
-
-  // Custom className tests
-  describe('Custom ClassNames', () => {
-    it('should apply custom dialogClassName', () => {
-      // Arrange & Act
-      const { container } = renderDrawer({ dialogClassName: 'custom-dialog-class' })
-
-      // Assert
-      expect(container.querySelector('.custom-dialog-class')).toBeInTheDocument()
-    })
-
-    it('should apply custom dialogBackdropClassName', () => {
-      // Arrange & Act
-      renderDrawer({ dialogBackdropClassName: 'custom-backdrop-class' })
-
-      // Assert
-      expect(screen.getByTestId('dialog-backdrop').className).toContain('custom-backdrop-class')
-    })
-
-    it('should apply custom containerClassName', () => {
-      // Arrange & Act
-      const { container } = renderDrawer({ containerClassName: 'custom-container-class' })
-
-      // Assert
-      const containerDiv = container.querySelector('.custom-container-class')
-      expect(containerDiv).toBeInTheDocument()
-    })
-
-    it('should apply custom panelClassName', () => {
-      // Arrange & Act
-      const { container } = renderDrawer({ panelClassName: 'custom-panel-class' })
-
-      // Assert
-      const panelDiv = container.querySelector('.custom-panel-class')
-      expect(panelDiv).toBeInTheDocument()
-    })
-  })
-
-  // Position tests
-  describe('Position', () => {
-    it('should apply center position class when positionCenter is true', () => {
-      // Arrange & Act
-      const { container } = renderDrawer({ positionCenter: true })
-
-      // Assert
-      const containerDiv = container.querySelector('.justify-center\\!')
-      expect(containerDiv).toBeInTheDocument()
-    })
-
-    it('should use end position by default when positionCenter is false', () => {
-      // Arrange & Act
-      const { container } = renderDrawer({ positionCenter: false })
-
-      // Assert
-      const containerDiv = container.querySelector('.justify-end')
-      expect(containerDiv).toBeInTheDocument()
-    })
-  })
-
-  // Unmount prop tests
-  describe('Unmount Prop', () => {
-    it('should pass unmount prop to Dialog component', () => {
-      // Arrange & Act
-      renderDrawer({ unmount: true })
-
-      // Assert
-      expect(screen.getByTestId('dialog').getAttribute('data-unmount')).toBe('true')
-    })
-
-    it('should default unmount to false', () => {
-      // Arrange & Act
-      renderDrawer({})
-
-      // Assert
-      expect(screen.getByTestId('dialog').getAttribute('data-unmount')).toBe('false')
-    })
-  })
-
-  // Edge cases
-  describe('Edge Cases', () => {
-    it('should handle empty string title', () => {
-      // Arrange & Act
-      renderDrawer({ title: '' })
-
-      // Assert
-      expect(screen.getByRole('dialog')).toBeInTheDocument()
-    })
-
-    it('should handle empty string description', () => {
-      // Arrange & Act
-      renderDrawer({ description: '' })
-
-      // Assert
-      expect(screen.getByRole('dialog')).toBeInTheDocument()
-    })
-
-    it('should handle special characters in title', () => {
-      // Arrange
-      const specialTitle = '<script>alert("xss")</script>'
-
-      // Act
-      renderDrawer({ title: specialTitle })
-
-      // Assert
-      expect(screen.getByText(specialTitle)).toBeInTheDocument()
-    })
-
-    it('should handle very long title', () => {
-      // Arrange
-      const longTitle = 'A'.repeat(500)
-
-      // Act
-      renderDrawer({ title: longTitle })
-
-      // Assert
-      expect(screen.getByText(longTitle)).toBeInTheDocument()
-    })
-
-    it('should handle complex children with multiple elements', () => {
-      // Arrange
-      const complexChildren = (
-        <div data-testid="complex-children">
-          <h1>Heading</h1>
-          <p>Paragraph</p>
-          <input data-testid="input-element" />
-          <button data-testid="button-element">Button</button>
-        </div>
-      )
-
-      // Act
-      renderDrawer({ children: complexChildren })
-
-      // Assert
-      expect(screen.getByTestId('complex-children')).toBeInTheDocument()
-      expect(screen.getByText('Heading')).toBeInTheDocument()
-      expect(screen.getByText('Paragraph')).toBeInTheDocument()
-      expect(screen.getByTestId('input-element')).toBeInTheDocument()
-      expect(screen.getByTestId('button-element')).toBeInTheDocument()
-    })
-
-    it('should handle null children gracefully', () => {
-      // Arrange & Act
-      renderDrawer({ children: null as unknown as React.ReactNode })
-
-      // Assert
-      expect(screen.getByRole('dialog')).toBeInTheDocument()
-    })
-
-    it('should handle undefined footer without crashing', () => {
-      // Arrange & Act
-      renderDrawer({ footer: undefined })
-
-      // Assert
-      expect(screen.getByRole('dialog')).toBeInTheDocument()
-    })
-
-    it('should handle rapid open/close toggles', () => {
-      // Arrange
-      const onClose = vi.fn()
-      const { rerender } = render(
-        <Drawer {...defaultProps} isOpen={true} onClose={onClose}>
-          <div>Content</div>
-        </Drawer>,
-      )
-
-      // Act - Toggle multiple times
-      rerender(
-        <Drawer {...defaultProps} isOpen={false} onClose={onClose}>
-          <div>Content</div>
-        </Drawer>,
-      )
-      rerender(
-        <Drawer {...defaultProps} isOpen={true} onClose={onClose}>
-          <div>Content</div>
-        </Drawer>,
-      )
-      rerender(
-        <Drawer {...defaultProps} isOpen={false} onClose={onClose}>
-          <div>Content</div>
-        </Drawer>,
-      )
-
-      // Assert
-      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
-    })
-  })
-
-  // Combined prop scenarios
-  describe('Combined Prop Scenarios', () => {
-    it('should render with all optional props', () => {
-      // Arrange & Act
-      renderDrawer({
-        title: 'Full Feature Title',
-        description: 'Full Feature Description',
-        dialogClassName: 'custom-dialog',
-        dialogBackdropClassName: 'custom-backdrop',
-        containerClassName: 'custom-container',
-        panelClassName: 'custom-panel',
-        showClose: true,
-        mask: true,
-        positionCenter: true,
-        unmount: true,
-        noOverlay: false,
-        footer: <div data-testid="custom-full-footer">Footer</div>,
-      })
-
-      // Assert
-      expect(screen.getByRole('dialog')).toBeInTheDocument()
-      expect(screen.getByText('Full Feature Title')).toBeInTheDocument()
-      expect(screen.getByText('Full Feature Description')).toBeInTheDocument()
-      expect(screen.getByTestId('close-icon')).toBeInTheDocument()
-      expect(screen.getByTestId('custom-full-footer')).toBeInTheDocument()
-    })
-
-    it('should render minimal drawer with only required props', () => {
-      // Arrange
-      const minimalProps: IDrawerProps = {
-        isOpen: true,
-        onClose: vi.fn(),
-        children: <div>Minimal Content</div>,
-      }
-
-      // Act
-      render(<Drawer {...minimalProps} />)
-
-      // Assert
-      expect(screen.getByRole('dialog')).toBeInTheDocument()
-      expect(screen.getByText('Minimal Content')).toBeInTheDocument()
-    })
-
-    it('should handle showClose with title simultaneously', () => {
-      // Arrange & Act
-      renderDrawer({
-        title: 'Title with Close',
-        showClose: true,
-      })
-
-      // Assert
-      expect(screen.getByText('Title with Close')).toBeInTheDocument()
-      expect(screen.getByTestId('close-icon')).toBeInTheDocument()
-    })
-
-    it('should handle noOverlay with clickOutsideNotOpen', () => {
-      // Arrange
-      const onClose = vi.fn()
-
-      // Act
-      renderDrawer({
-        noOverlay: true,
-        clickOutsideNotOpen: true,
-        onClose,
-      })
-
-      // Assert - backdrop should not exist
-      expect(screen.queryByTestId('dialog-backdrop')).not.toBeInTheDocument()
-    })
-  })
-
-  // Dialog onClose callback tests (e.g., Escape key)
-  describe('Dialog onClose Callback', () => {
-    it('should call onClose when Dialog triggers close and clickOutsideNotOpen is false', () => {
-      // Arrange
-      const onClose = vi.fn()
-      renderDrawer({ onClose, clickOutsideNotOpen: false })
-
-      // Act - Simulate Dialog's onClose (e.g., pressing Escape)
-      capturedDialogOnClose?.()
-
-      // Assert
-      expect(onClose).toHaveBeenCalledTimes(1)
-    })
-
-    it('should not call onClose when Dialog triggers close and clickOutsideNotOpen is true', () => {
-      // Arrange
-      const onClose = vi.fn()
-      renderDrawer({ onClose, clickOutsideNotOpen: true })
-
-      // Act - Simulate Dialog's onClose (e.g., pressing Escape)
-      capturedDialogOnClose?.()
-
-      // Assert
-      expect(onClose).not.toHaveBeenCalled()
-    })
-
-    it('should call onClose by default when Dialog triggers close', () => {
-      // Arrange
-      const onClose = vi.fn()
-      renderDrawer({ onClose })
-
-      // Act
-      capturedDialogOnClose?.()
-
-      // Assert
-      expect(onClose).toHaveBeenCalledTimes(1)
-    })
-  })
-
-  // Event handler interaction tests
-  describe('Event Handler Interactions', () => {
-    it('should handle multiple consecutive close icon clicks', () => {
-      // Arrange
-      const onClose = vi.fn()
-      renderDrawer({ showClose: true, onClose })
-
-      // Act
-      const closeIcon = screen.getByTestId('close-icon')
-      fireEvent.click(closeIcon)
-      fireEvent.click(closeIcon)
-      fireEvent.click(closeIcon)
-
-      // Assert
-      expect(onClose).toHaveBeenCalledTimes(3)
-    })
-
-    it('should handle onCancel and onOk being the same function', () => {
-      // Arrange
-      const handler = vi.fn()
-      renderDrawer({ onCancel: handler, onOk: handler })
-
-      // Act
-      fireEvent.click(screen.getByText('common.operation.cancel'))
-      fireEvent.click(screen.getByText('common.operation.save'))
-
-      // Assert
-      expect(handler).toHaveBeenCalledTimes(2)
-    })
-  })
-})
diff --git a/web/app/components/base/drawer/index.stories.tsx b/web/app/components/base/drawer/index.stories.tsx
deleted file mode 100644
index 57ab35281c..0000000000
--- a/web/app/components/base/drawer/index.stories.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { useState } from 'react'
-import { fn } from 'storybook/test'
-import Drawer from '.'
-
-const meta = {
-  title: 'Base/Feedback/Drawer',
-  component: Drawer,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component: 'Sliding panel built on Base UI dialog primitives. Supports optional mask, custom footer, and close behaviour.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof Drawer>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const DrawerDemo = (props: React.ComponentProps<typeof Drawer>) => {
-  const [open, setOpen] = useState(false)
-
-  return (
-    <div className="flex h-[400px] items-center justify-center bg-background-default-subtle">
-      <button
-        type="button"
-        className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700"
-        onClick={() => setOpen(true)}
-      >
-        Open drawer
-      </button>
-
-      <Drawer
-        {...props}
-        isOpen={open}
-        onClose={() => setOpen(false)}
-        title={props.title ?? 'Edit configuration'}
-        description={props.description ?? 'Adjust settings in the side panel and save.'}
-        footer={props.footer ?? undefined}
-      >
-        <div className="mt-4 space-y-3 text-sm text-text-secondary">
-          <p>
-            This example renders arbitrary content inside the drawer body. Use it for contextual forms, settings, or informational panels.
-          </p>
-          <div className="rounded-lg border border-divider-subtle bg-components-panel-bg p-3 text-xs">
-            Content area
-          </div>
-        </div>
-      </Drawer>
-    </div>
-  )
-}
-
-export const Playground: Story = {
-  render: args => <DrawerDemo {...args} />,
-  args: {
-    children: null,
-    isOpen: false,
-    onClose: fn(),
-  },
-  parameters: {
-    docs: {
-      source: {
-        language: 'tsx',
-        code: `
-const [open, setOpen] = useState(false)
-
-<Drawer
-  isOpen={open}
-  onClose={() => setOpen(false)}
-  title="Edit configuration"
-  description="Adjust settings in the side panel and save."
->
-  ...
-</Drawer>
-        `.trim(),
-      },
-    },
-  },
-}
-
-export const CustomFooter: Story = {
-  render: args => (
-    <DrawerDemo
-      {...args}
-      footer={(
-        <div className="mt-6 flex justify-end gap-2">
-          <button className="rounded-md border border-divider-subtle px-3 py-1.5 text-sm text-text-secondary" onClick={() => args.onCancel?.()}>Discard</button>
-          <button className="rounded-md bg-primary-600 px-3 py-1.5 text-sm text-white">Save changes</button>
-        </div>
-      )}
-    />
-  ),
-  args: {
-    children: null,
-    isOpen: false,
-    onClose: fn(),
-  },
-  parameters: {
-    docs: {
-      source: {
-        language: 'tsx',
-        code: `
-<Drawer footer={<CustomFooter />}>
-  ...
-</Drawer>
-        `.trim(),
-      },
-    },
-  },
-}
diff --git a/web/app/components/base/drawer/index.tsx b/web/app/components/base/drawer/index.tsx
deleted file mode 100644
index d6c0d58e7c..0000000000
--- a/web/app/components/base/drawer/index.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-'use client'
-// eslint-disable-next-line no-restricted-imports -- Temporary legacy drawer exception: remove this direct Base UI wrapper after callers migrate to dify-ui drawer primitives.
-import { Dialog as BaseDialog } from '@base-ui/react/dialog'
-import { Button } from '@langgenius/dify-ui/button'
-import { cn } from '@langgenius/dify-ui/cn'
-import { useTranslation } from 'react-i18next'
-
-export type IDrawerProps = {
-  title?: string
-  description?: string
-  dialogClassName?: string
-  dialogBackdropClassName?: string
-  containerClassName?: string
-  panelClassName?: string
-  children: React.ReactNode
-  footer?: React.ReactNode
-  mask?: boolean
-  positionCenter?: boolean
-  isOpen: boolean
-  showClose?: boolean
-  clickOutsideNotOpen?: boolean
-  onClose: () => void
-  onCancel?: () => void
-  onOk?: () => void
-  unmount?: boolean
-  noOverlay?: boolean
-}
-
-export default function Drawer({
-  title = '',
-  description = '',
-  dialogClassName = '',
-  dialogBackdropClassName = '',
-  containerClassName = '',
-  panelClassName = '',
-  children,
-  footer,
-  mask = true,
-  positionCenter,
-  showClose = false,
-  isOpen,
-  clickOutsideNotOpen,
-  onClose,
-  onCancel,
-  onOk,
-  unmount = false,
-  noOverlay = false,
-}: IDrawerProps) {
-  const { t } = useTranslation()
-  return (
-    <BaseDialog.Root
-      open={isOpen}
-      disablePointerDismissal={clickOutsideNotOpen}
-      onOpenChange={(open) => {
-        if (!open && !clickOutsideNotOpen)
-          onClose()
-      }}
-    >
-      <BaseDialog.Portal>
-        <div className={cn('fixed inset-0 z-30 overflow-y-auto', dialogClassName)}>
-          <div className={cn('flex h-screen w-screen justify-end', positionCenter && 'justify-center!', containerClassName)}>
-            {!noOverlay && (
-              <BaseDialog.Backdrop
-                className={cn('fixed inset-0 z-40', mask && 'bg-black/30', dialogBackdropClassName)}
-              />
-            )}
-            <BaseDialog.Popup
-              data-unmount={unmount}
-              className={cn('relative z-50 flex w-full max-w-sm flex-col justify-between overflow-hidden bg-components-panel-bg p-6 text-left align-middle shadow-xl', panelClassName)}
-            >
-              <>
-                <div className="flex justify-between">
-                  {title && (
-                    <BaseDialog.Title
-                      render={<h3 />}
-                      className="text-lg leading-6 font-medium text-text-primary"
-                    >
-                      {title}
-                    </BaseDialog.Title>
-                  )}
-                  {showClose && (
-                    <div className="mb-4 flex cursor-pointer items-center">
-                      <span
-                        className="i-heroicons-x-mark h-4 w-4 text-text-tertiary"
-                        onClick={onClose}
-                        onKeyDown={(e) => {
-                          if (e.key === 'Enter' || e.key === ' ')
-                            onClose()
-                        }}
-                        role="button"
-                        tabIndex={0}
-                        aria-label={t('operation.close', { ns: 'common' })}
-                        data-testid="close-icon"
-                      />
-                    </div>
-                  )}
-                </div>
-                {description && <div className="mt-2 text-xs font-normal text-text-tertiary">{description}</div>}
-                {children}
-              </>
-              {footer || (footer === null
-                ? null
-                : (
-                    <div className="mt-10 flex flex-row justify-end">
-                      <Button
-                        className="mr-2"
-                        onClick={() => {
-                          onCancel?.()
-                        }}
-                      >
-                        {t('operation.cancel', { ns: 'common' })}
-                      </Button>
-                      <Button
-                        onClick={() => {
-                          onOk?.()
-                        }}
-                      >
-                        {t('operation.save', { ns: 'common' })}
-                      </Button>
-                    </div>
-                  ))}
-            </BaseDialog.Popup>
-          </div>
-        </div>
-      </BaseDialog.Portal>
-    </BaseDialog.Root>
-  )
-}
diff --git a/web/app/components/base/float-right-container/__tests__/index.spec.tsx b/web/app/components/base/float-right-container/__tests__/index.spec.tsx
index 236a30dd20..4466b2cadc 100644
--- a/web/app/components/base/float-right-container/__tests__/index.spec.tsx
+++ b/web/app/components/base/float-right-container/__tests__/index.spec.tsx
@@ -32,7 +32,6 @@ describe('FloatRightContainer', () => {
           isMobile={true}
           isOpen={false}
           onClose={vi.fn()}
-          unmount={true}
         >
           <div>Closed mobile content</div>
         </FloatRightContainer>,
@@ -99,53 +98,12 @@ describe('FloatRightContainer', () => {
       expect(onClose).toHaveBeenCalledTimes(1)
     })
 
-    it('should call onClose when close is done using escape key', async () => {
-      const onClose = vi.fn()
-      render(
-        <FloatRightContainer
-          isMobile={true}
-          isOpen={true}
-          onClose={onClose}
-          showClose={true}
-        >
-          <div>Closable content</div>
-        </FloatRightContainer>,
-      )
-
-      const closeIcon = screen.getByTestId('close-icon')
-      closeIcon.focus()
-      await userEvent.keyboard('{Enter}')
-
-      expect(onClose).toHaveBeenCalledTimes(1)
-    })
-
-    it('should call onClose when close is done using space key', async () => {
-      const onClose = vi.fn()
-      render(
-        <FloatRightContainer
-          isMobile={true}
-          isOpen={true}
-          onClose={onClose}
-          showClose={true}
-        >
-          <div>Closable content</div>
-        </FloatRightContainer>,
-      )
-
-      const closeIcon = screen.getByTestId('close-icon')
-      closeIcon.focus()
-      await userEvent.keyboard(' ')
-
-      expect(onClose).toHaveBeenCalledTimes(1)
-    })
-
-    it('should apply drawer className props in mobile drawer mode', async () => {
+    it('should apply panel className in mobile drawer mode', async () => {
       render(
         <FloatRightContainer
           isMobile={true}
           isOpen={true}
           onClose={vi.fn()}
-          dialogClassName="custom-dialog-class"
           panelClassName="custom-panel-class"
         >
           <div>Class forwarding content</div>
@@ -153,7 +111,6 @@ describe('FloatRightContainer', () => {
       )
 
       const dialog = await screen.findByRole('dialog')
-      expect(document.querySelector('.custom-dialog-class')).toBeInTheDocument()
 
       const panel = document.querySelector('.custom-panel-class')
       expect(panel).toBeInTheDocument()
diff --git a/web/app/components/base/float-right-container/index.stories.tsx b/web/app/components/base/float-right-container/index.stories.tsx
index 5887afd1e3..ec26bb7be0 100644
--- a/web/app/components/base/float-right-container/index.stories.tsx
+++ b/web/app/components/base/float-right-container/index.stories.tsx
@@ -49,7 +49,6 @@ const ContainerDemo = () => {
         isOpen={open}
         onClose={() => setOpen(false)}
         title="Responsive panel"
-        description="Switch the toggle to see drawer vs inline behaviour."
         mask
       >
         <div className="rounded-xl border border-divider-subtle bg-components-panel-bg p-4 text-xs text-text-secondary">
diff --git a/web/app/components/base/float-right-container/index.tsx b/web/app/components/base/float-right-container/index.tsx
index 7435fd9643..db3b73da95 100644
--- a/web/app/components/base/float-right-container/index.tsx
+++ b/web/app/components/base/float-right-container/index.tsx
@@ -1,17 +1,79 @@
 'use client'
-import type { IDrawerProps } from '@/app/components/base/drawer'
-import Drawer from '@/app/components/base/drawer'
+import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Drawer,
+  DrawerBackdrop,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerPopup,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerViewport,
+} from '@langgenius/dify-ui/drawer'
+import { useTranslation } from 'react-i18next'
 
 type IFloatRightContainerProps = {
   isMobile: boolean
+  isOpen: boolean
+  onClose: () => void
   children?: React.ReactNode
-} & IDrawerProps
+  showClose?: boolean
+  panelClassName?: string
+  title?: string
+  mask?: boolean
+}
+
+const FloatRightContainer = ({
+  isMobile,
+  children,
+  isOpen,
+  onClose,
+  showClose = false,
+  panelClassName,
+  title,
+  mask = true,
+}: IFloatRightContainerProps) => {
+  const { t } = useTranslation()
 
-const FloatRightContainer = ({ isMobile, children, isOpen, ...drawerProps }: IFloatRightContainerProps) => {
   return (
     <>
       {isMobile && (
-        <Drawer isOpen={isOpen} {...drawerProps}>{children}</Drawer>
+        <Drawer
+          open={isOpen}
+          modal
+          swipeDirection="right"
+          onOpenChange={(open) => {
+            if (!open)
+              onClose()
+          }}
+        >
+          <DrawerPortal>
+            <DrawerBackdrop className={cn(!mask && 'bg-transparent')} />
+            <DrawerViewport>
+              <DrawerPopup className={cn('data-[swipe-direction=right]:w-full data-[swipe-direction=right]:max-w-sm', panelClassName)}>
+                <DrawerContent className="flex min-h-0 flex-1 flex-col">
+                  {(title || showClose) && (
+                    <div className="mb-4 flex shrink-0 items-center justify-between">
+                      {title && (
+                        <DrawerTitle className="text-lg leading-6 font-medium text-text-primary">
+                          {title}
+                        </DrawerTitle>
+                      )}
+                      {showClose && (
+                        <DrawerCloseButton
+                          aria-label={t('operation.close', { ns: 'common' })}
+                          className="h-6 w-6 rounded-md"
+                          data-testid="close-icon"
+                        />
+                      )}
+                    </div>
+                  )}
+                  {children}
+                </DrawerContent>
+              </DrawerPopup>
+            </DrawerViewport>
+          </DrawerPortal>
+        </Drawer>
       )}
       {(!isMobile && isOpen) && (
         <>{children}</>
diff --git a/web/app/components/datasets/create/step-two/components/preview-panel.tsx b/web/app/components/datasets/create/step-two/components/preview-panel.tsx
index 254a28619c..9f10863288 100644
--- a/web/app/components/datasets/create/step-two/components/preview-panel.tsx
+++ b/web/app/components/datasets/create/step-two/components/preview-panel.tsx
@@ -54,7 +54,7 @@ export const PreviewPanel: FC<PreviewPanelProps> = ({
   const { t } = useTranslation()
 
   return (
-    <FloatRightContainer isMobile={isMobile} isOpen={true} onClose={noop} footer={null}>
+    <FloatRightContainer isMobile={isMobile} isOpen={true} onClose={noop}>
       <PreviewContainer
         header={(
           <PreviewHeader title={t('stepTwo.preview', { ns: 'datasetCreation' })}>
diff --git a/web/app/components/datasets/documents/detail/index.tsx b/web/app/components/datasets/documents/detail/index.tsx
index caae703f6b..43fc99851d 100644
--- a/web/app/components/datasets/documents/detail/index.tsx
+++ b/web/app/components/datasets/documents/detail/index.tsx
@@ -292,7 +292,7 @@ const DocumentDetail: FC<DocumentDetailProps> = ({ datasetId, documentId }) => {
                       )}
                 </div>
               )}
-          <FloatRightContainer showClose isOpen={showMetadata} onClose={() => setShowMetadata(false)} isMobile={isMobile} panelClassName="justify-start!" footer={null}>
+          <FloatRightContainer showClose isOpen={showMetadata} onClose={() => setShowMetadata(false)} isMobile={isMobile} panelClassName="justify-start!">
             <Metadata
               className="mt-3 mr-2"
               datasetId={datasetId}
diff --git a/web/app/components/datasets/hit-testing/index.tsx b/web/app/components/datasets/hit-testing/index.tsx
index ec9100bb97..7c1ce62860 100644
--- a/web/app/components/datasets/hit-testing/index.tsx
+++ b/web/app/components/datasets/hit-testing/index.tsx
@@ -10,12 +10,19 @@ import type {
 } from '@/models/datasets'
 import type { RetrievalConfig } from '@/types/app'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Drawer,
+  DrawerBackdrop,
+  DrawerContent,
+  DrawerPopup,
+  DrawerPortal,
+  DrawerViewport,
+} from '@langgenius/dify-ui/drawer'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
-import Drawer from '@/app/components/base/drawer'
 import FloatRightContainer from '@/app/components/base/float-right-container'
 import Loading from '@/app/components/base/loading'
 import Pagination from '@/app/components/base/pagination'
@@ -158,7 +165,6 @@ const HitTestingPage: FC<Props> = ({ datasetId }: Props) => {
         isMobile={isMobile}
         isOpen={isShowRightPanel}
         onClose={hideRightPanel}
-        footer={null}
       >
         <div className="flex min-w-0 flex-1 flex-col pt-3">
           {isRetrievalLoading
@@ -181,23 +187,33 @@ const HitTestingPage: FC<Props> = ({ datasetId }: Props) => {
         </div>
       </FloatRightContainer>
       <Drawer
-        unmount={true}
-        isOpen={isShowModifyRetrievalModal}
-        onClose={() => setIsShowModifyRetrievalModal(false)}
-        footer={null}
-        mask={isMobile}
-        panelClassName="mt-16 mx-2 sm:mr-2 mb-3 p-0! max-w-[640px]! rounded-xl"
-      >
-        <ModifyRetrievalModal
-          indexMethod={currentDataset?.indexing_technique || ''}
-          value={retrievalConfig}
-          isShow={isShowModifyRetrievalModal}
-          onHide={() => setIsShowModifyRetrievalModal(false)}
-          onSave={(value) => {
-            setRetrievalConfig(value)
+        open={isShowModifyRetrievalModal}
+        modal
+        swipeDirection="right"
+        onOpenChange={(open) => {
+          if (!open)
             setIsShowModifyRetrievalModal(false)
-          }}
-        />
+        }}
+      >
+        <DrawerPortal>
+          <DrawerBackdrop className={cn(!isMobile && 'bg-transparent')} />
+          <DrawerViewport>
+            <DrawerPopup className="p-0! data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-3 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-full data-[swipe-direction=right]:max-w-[640px] data-[swipe-direction=right]:rounded-xl">
+              <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
+                <ModifyRetrievalModal
+                  indexMethod={currentDataset?.indexing_technique || ''}
+                  value={retrievalConfig}
+                  isShow={isShowModifyRetrievalModal}
+                  onHide={() => setIsShowModifyRetrievalModal(false)}
+                  onSave={(value) => {
+                    setRetrievalConfig(value)
+                    setIsShowModifyRetrievalModal(false)
+                  }}
+                />
+              </DrawerContent>
+            </DrawerPopup>
+          </DrawerViewport>
+        </DrawerPortal>
       </Drawer>
     </div>
   )
diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
index 0fe0fff6df..5bac8c827b 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
@@ -4,12 +4,19 @@ import type { FormSchema } from '../../base/form/types'
 import type { PluginDetail } from '../types'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Drawer,
+  DrawerBackdrop,
+  DrawerContent,
+  DrawerPopup,
+  DrawerPortal,
+  DrawerViewport,
+} from '@langgenius/dify-ui/drawer'
 import { toast } from '@langgenius/dify-ui/toast'
 import { RiArrowRightUpLine, RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import Drawer from '@/app/components/base/drawer'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import { ReadmeEntrance } from '../readme-panel/entrance'
@@ -75,60 +82,67 @@ const EndpointModal: FC<Props> = ({
 
   return (
     <Drawer
-      isOpen
-      clickOutsideNotOpen={false}
-      onClose={onCancel}
-      footer={null}
-      mask
-      positionCenter={false}
-      panelClassName={cn('mt-[64px] mr-2 mb-2 w-[420px]! max-w-[420px]! justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg! p-0! shadow-xl')}
+      open
+      modal
+      swipeDirection="right"
+      onOpenChange={(open) => {
+        if (!open)
+          onCancel()
+      }}
     >
-      <>
-        <div className="p-4 pb-2">
-          <div className="flex items-center justify-between">
-            <div className="system-xl-semibold text-text-primary">{t('detailPanel.endpointModalTitle', { ns: 'plugin' })}</div>
-            <ActionButton onClick={onCancel}>
-              <RiCloseLine className="h-4 w-4" />
-            </ActionButton>
-          </div>
-          <div className="mt-0.5 system-xs-regular text-text-tertiary">{t('detailPanel.endpointModalDesc', { ns: 'plugin' })}</div>
-          <ReadmeEntrance pluginDetail={pluginDetail} className="px-0 pt-3" />
-        </div>
-        <div className="grow overflow-y-auto">
-          <div className="px-4 py-2">
-            <Form
-              value={tempCredential}
-              onChange={(v) => {
-                setTempCredential(v)
-              }}
-              formSchemas={formSchemas as any}
-              isEditMode={true}
-              showOnVariableMap={{}}
-              validating={false}
-              inputClassName="bg-components-input-bg-normal hover:bg-components-input-bg-hover"
-              fieldMoreInfo={item => item.url
-                ? (
-                    <a
-                      href={item.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="inline-flex items-center body-xs-regular text-text-accent-secondary"
-                    >
-                      {t('howToGet', { ns: 'tools' })}
-                      <RiArrowRightUpLine className="ml-1 h-3 w-3" />
-                    </a>
-                  )
-                : null}
-            />
-          </div>
-          <div className={cn('flex justify-end p-4 pt-0')}>
-            <div className="flex gap-2">
-              <Button onClick={onCancel}>{t('operation.cancel', { ns: 'common' })}</Button>
-              <Button variant="primary" onClick={handleSave}>{t('operation.save', { ns: 'common' })}</Button>
-            </div>
-          </div>
-        </div>
-      </>
+      <DrawerPortal>
+        <DrawerBackdrop className="bg-black/30" />
+        <DrawerViewport>
+          <DrawerPopup className={cn('justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-[420px] data-[swipe-direction=right]:max-w-[420px] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border')}>
+            <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
+              <div className="p-4 pb-2">
+                <div className="flex items-center justify-between">
+                  <div className="system-xl-semibold text-text-primary">{t('detailPanel.endpointModalTitle', { ns: 'plugin' })}</div>
+                  <ActionButton onClick={onCancel}>
+                    <RiCloseLine className="h-4 w-4" />
+                  </ActionButton>
+                </div>
+                <div className="mt-0.5 system-xs-regular text-text-tertiary">{t('detailPanel.endpointModalDesc', { ns: 'plugin' })}</div>
+                <ReadmeEntrance pluginDetail={pluginDetail} className="px-0 pt-3" />
+              </div>
+              <div className="grow overflow-y-auto">
+                <div className="px-4 py-2">
+                  <Form
+                    value={tempCredential}
+                    onChange={(v) => {
+                      setTempCredential(v)
+                    }}
+                    formSchemas={formSchemas as any}
+                    isEditMode={true}
+                    showOnVariableMap={{}}
+                    validating={false}
+                    inputClassName="bg-components-input-bg-normal hover:bg-components-input-bg-hover"
+                    fieldMoreInfo={item => item.url
+                      ? (
+                          <a
+                            href={item.url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="inline-flex items-center body-xs-regular text-text-accent-secondary"
+                          >
+                            {t('howToGet', { ns: 'tools' })}
+                            <RiArrowRightUpLine className="ml-1 h-3 w-3" />
+                          </a>
+                        )
+                      : null}
+                  />
+                </div>
+                <div className={cn('flex justify-end p-4 pt-0')}>
+                  <div className="flex gap-2">
+                    <Button onClick={onCancel}>{t('operation.cancel', { ns: 'common' })}</Button>
+                    <Button variant="primary" onClick={handleSave}>{t('operation.save', { ns: 'common' })}</Button>
+                  </div>
+                </div>
+              </div>
+            </DrawerContent>
+          </DrawerPopup>
+        </DrawerViewport>
+      </DrawerPortal>
     </Drawer>
   )
 }
diff --git a/web/app/components/plugins/plugin-detail-panel/index.tsx b/web/app/components/plugins/plugin-detail-panel/index.tsx
index 3041d2e2a6..877b15c51e 100644
--- a/web/app/components/plugins/plugin-detail-panel/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/index.tsx
@@ -2,8 +2,15 @@
 import type { FC } from 'react'
 import type { PluginDetail } from '@/app/components/plugins/types'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Drawer,
+  DrawerBackdrop,
+  DrawerContent,
+  DrawerPopup,
+  DrawerPortal,
+  DrawerViewport,
+} from '@langgenius/dify-ui/drawer'
 import { useCallback, useEffect } from 'react'
-import Drawer from '@/app/components/base/drawer'
 import { PluginCategoryEnum } from '@/app/components/plugins/types'
 import { ReadmeEntrance } from '../readme-panel/entrance'
 import ActionList from './action-list'
@@ -53,37 +60,46 @@ const PluginDetailPanel: FC<Props> = ({
 
   return (
     <Drawer
-      isOpen={!!detail}
-      clickOutsideNotOpen={false}
-      onClose={onHide}
-      footer={null}
-      mask={false}
-      positionCenter={false}
-      panelClassName={cn('mt-[64px] mr-2 mb-2 w-[420px]! max-w-[420px]! justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg! p-0! shadow-xl')}
+      open={!!detail}
+      modal
+      swipeDirection="right"
+      onOpenChange={(open) => {
+        if (!open)
+          onHide()
+      }}
     >
-      {detail && (
-        <>
-          <DetailHeader detail={detail} onUpdate={handleUpdate} onHide={onHide} />
-          <div className="grow overflow-y-auto">
-            <div className="flex min-h-full flex-col">
-              <div className="flex-1">
-                {detail.declaration.category === PluginCategoryEnum.trigger && (
-                  <>
-                    <SubscriptionList pluginDetail={detail} />
-                    <TriggerEventsList />
-                  </>
-                )}
-                {!!detail.declaration.tool && <ActionList detail={detail} />}
-                {!!detail.declaration.agent_strategy && <AgentStrategyList detail={detail} />}
-                {!!detail.declaration.endpoint && <EndpointList detail={detail} />}
-                {!!detail.declaration.model && <ModelList detail={detail} />}
-                {!!detail.declaration.datasource && <DatasourceActionList detail={detail} />}
-              </div>
-              <ReadmeEntrance pluginDetail={detail} className="mt-auto" />
-            </div>
-          </div>
-        </>
-      )}
+      <DrawerPortal>
+        <DrawerBackdrop className="bg-transparent" />
+        <DrawerViewport>
+          <DrawerPopup className={cn('justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-[420px] data-[swipe-direction=right]:max-w-[420px] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border')}>
+            <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
+              {detail && (
+                <>
+                  <DetailHeader detail={detail} onUpdate={handleUpdate} onHide={onHide} />
+                  <div className="grow overflow-y-auto">
+                    <div className="flex min-h-full flex-col">
+                      <div className="flex-1">
+                        {detail.declaration.category === PluginCategoryEnum.trigger && (
+                          <>
+                            <SubscriptionList pluginDetail={detail} />
+                            <TriggerEventsList />
+                          </>
+                        )}
+                        {!!detail.declaration.tool && <ActionList detail={detail} />}
+                        {!!detail.declaration.agent_strategy && <AgentStrategyList detail={detail} />}
+                        {!!detail.declaration.endpoint && <EndpointList detail={detail} />}
+                        {!!detail.declaration.model && <ModelList detail={detail} />}
+                        {!!detail.declaration.datasource && <DatasourceActionList detail={detail} />}
+                      </div>
+                      <ReadmeEntrance pluginDetail={detail} className="mt-auto" />
+                    </div>
+                  </div>
+                </>
+              )}
+            </DrawerContent>
+          </DrawerPopup>
+        </DrawerViewport>
+      </DrawerPortal>
     </Drawer>
   )
 }
diff --git a/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx b/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx
index 8fda455b26..824697566b 100644
--- a/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx
@@ -5,6 +5,14 @@ import type {
 } from '@/app/components/plugins/types'
 import type { Locale } from '@/i18n-config'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Drawer,
+  DrawerBackdrop,
+  DrawerContent,
+  DrawerPopup,
+  DrawerPortal,
+  DrawerViewport,
+} from '@langgenius/dify-ui/drawer'
 import {
   RiArrowLeftLine,
   RiCloseLine,
@@ -14,7 +22,6 @@ import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Divider from '@/app/components/base/divider'
-import Drawer from '@/app/components/base/drawer'
 import Icon from '@/app/components/plugins/card/base/card-icon'
 import Description from '@/app/components/plugins/card/base/description'
 import { API_PREFIX } from '@/config'
@@ -75,92 +82,99 @@ const StrategyDetail: FC<Props> = ({
 
   return (
     <Drawer
-      isOpen
-      clickOutsideNotOpen={false}
-      onClose={onHide}
-      footer={null}
-      mask={false}
-      positionCenter={false}
-      panelClassName={cn('mt-[64px] mr-2 mb-2 w-[420px]! max-w-[420px]! justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg! p-0! shadow-xl')}
+      open
+      modal
+      swipeDirection="right"
+      onOpenChange={(open) => {
+        if (!open)
+          onHide()
+      }}
     >
-      <>
-        {/* header */}
-        <div className="relative border-b border-divider-subtle p-4 pb-3">
-          <div className="absolute top-3 right-3">
-            <ActionButton onClick={onHide}>
-              <RiCloseLine className="h-4 w-4" />
-            </ActionButton>
-          </div>
-          <div
-            className="mb-2 flex cursor-pointer items-center gap-1 system-xs-semibold-uppercase text-text-accent-secondary"
-            onClick={onHide}
-          >
-            <RiArrowLeftLine className="h-4 w-4" />
-            BACK
-          </div>
-          <div className="flex items-center gap-1">
-            <Icon size="tiny" className="h-6 w-6" src={`${API_PREFIX}/workspaces/current/plugin/icon?tenant_id=${provider.tenant_id}&filename=${provider.icon}`} />
-            <div className="">{getValueFromI18nObject(provider.label)}</div>
-          </div>
-          <div className="mt-1 system-md-semibold text-text-primary">{getValueFromI18nObject(detail.identity.label)}</div>
-          <Description className="mt-3" text={getValueFromI18nObject(detail.description)} descriptionLineRows={2}></Description>
-        </div>
-        {/* form */}
-        <div className="h-full">
-          <div className="flex h-full flex-col overflow-y-auto">
-            <div className="p-4 pb-1 system-sm-semibold-uppercase text-text-primary">{t('setBuiltInTools.parameters', { ns: 'tools' })}</div>
-            <div className="px-4">
-              {detail.parameters.length > 0 && (
-                <div className="space-y-1 py-2">
-                  {detail.parameters.map((item: any, index) => (
-                    <div key={index} className="py-1">
-                      <div className="flex items-center gap-2">
-                        <div className="code-sm-semibold text-text-secondary">{getValueFromI18nObject(item.label)}</div>
-                        <div className="system-xs-regular text-text-tertiary">
-                          {getType(item.type)}
-                        </div>
-                        {item.required && (
-                          <div className="system-xs-medium text-text-warning-secondary">{t('setBuiltInTools.required', { ns: 'tools' })}</div>
-                        )}
+      <DrawerPortal>
+        <DrawerBackdrop className="bg-transparent" />
+        <DrawerViewport>
+          <DrawerPopup className={cn('justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-[420px] data-[swipe-direction=right]:max-w-[420px] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border')}>
+            <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
+              {/* header */}
+              <div className="relative border-b border-divider-subtle p-4 pb-3">
+                <div className="absolute top-3 right-3">
+                  <ActionButton onClick={onHide}>
+                    <RiCloseLine className="h-4 w-4" />
+                  </ActionButton>
+                </div>
+                <div
+                  className="mb-2 flex cursor-pointer items-center gap-1 system-xs-semibold-uppercase text-text-accent-secondary"
+                  onClick={onHide}
+                >
+                  <RiArrowLeftLine className="h-4 w-4" />
+                  BACK
+                </div>
+                <div className="flex items-center gap-1">
+                  <Icon size="tiny" className="h-6 w-6" src={`${API_PREFIX}/workspaces/current/plugin/icon?tenant_id=${provider.tenant_id}&filename=${provider.icon}`} />
+                  <div className="">{getValueFromI18nObject(provider.label)}</div>
+                </div>
+                <div className="mt-1 system-md-semibold text-text-primary">{getValueFromI18nObject(detail.identity.label)}</div>
+                <Description className="mt-3" text={getValueFromI18nObject(detail.description)} descriptionLineRows={2}></Description>
+              </div>
+              {/* form */}
+              <div className="h-full">
+                <div className="flex h-full flex-col overflow-y-auto">
+                  <div className="p-4 pb-1 system-sm-semibold-uppercase text-text-primary">{t('setBuiltInTools.parameters', { ns: 'tools' })}</div>
+                  <div className="px-4">
+                    {detail.parameters.length > 0 && (
+                      <div className="space-y-1 py-2">
+                        {detail.parameters.map((item: any, index) => (
+                          <div key={index} className="py-1">
+                            <div className="flex items-center gap-2">
+                              <div className="code-sm-semibold text-text-secondary">{getValueFromI18nObject(item.label)}</div>
+                              <div className="system-xs-regular text-text-tertiary">
+                                {getType(item.type)}
+                              </div>
+                              {item.required && (
+                                <div className="system-xs-medium text-text-warning-secondary">{t('setBuiltInTools.required', { ns: 'tools' })}</div>
+                              )}
+                            </div>
+                            {item.human_description && (
+                              <div className="mt-0.5 system-xs-regular text-text-tertiary">
+                                {getValueFromI18nObject(item.human_description)}
+                              </div>
+                            )}
+                          </div>
+                        ))}
                       </div>
-                      {item.human_description && (
-                        <div className="mt-0.5 system-xs-regular text-text-tertiary">
-                          {getValueFromI18nObject(item.human_description)}
+                    )}
+                  </div>
+                  {detail.output_schema && (
+                    <>
+                      <div className="px-4">
+                        <Divider className="mt-2!" />
+                      </div>
+                      <div className="p-4 pb-1 system-sm-semibold-uppercase text-text-primary">OUTPUT</div>
+                      {outputSchema.length > 0 && (
+                        <div className="space-y-1 px-4 py-2">
+                          {outputSchema.map((outputItem, index) => (
+                            <div key={index} className="py-1">
+                              <div className="flex items-center gap-2">
+                                <div className="code-sm-semibold text-text-secondary">{outputItem.name}</div>
+                                <div className="system-xs-regular text-text-tertiary">{outputItem.type}</div>
+                              </div>
+                              {outputItem.description && (
+                                <div className="mt-0.5 system-xs-regular text-text-tertiary">
+                                  {outputItem.description}
+                                </div>
+                              )}
+                            </div>
+                          ))}
                         </div>
                       )}
-                    </div>
-                  ))}
+                    </>
+                  )}
                 </div>
-              )}
-            </div>
-            {detail.output_schema && (
-              <>
-                <div className="px-4">
-                  <Divider className="mt-2!" />
-                </div>
-                <div className="p-4 pb-1 system-sm-semibold-uppercase text-text-primary">OUTPUT</div>
-                {outputSchema.length > 0 && (
-                  <div className="space-y-1 px-4 py-2">
-                    {outputSchema.map((outputItem, index) => (
-                      <div key={index} className="py-1">
-                        <div className="flex items-center gap-2">
-                          <div className="code-sm-semibold text-text-secondary">{outputItem.name}</div>
-                          <div className="system-xs-regular text-text-tertiary">{outputItem.type}</div>
-                        </div>
-                        {outputItem.description && (
-                          <div className="mt-0.5 system-xs-regular text-text-tertiary">
-                            {outputItem.description}
-                          </div>
-                        )}
-                      </div>
-                    ))}
-                  </div>
-                )}
-              </>
-            )}
-          </div>
-        </div>
-      </>
+              </div>
+            </DrawerContent>
+          </DrawerPopup>
+        </DrawerViewport>
+      </DrawerPortal>
     </Drawer>
   )
 }
diff --git a/web/app/components/plugins/plugin-detail-panel/trigger/event-detail-drawer.tsx b/web/app/components/plugins/plugin-detail-panel/trigger/event-detail-drawer.tsx
index eb56a0178c..3de2b30f1c 100644
--- a/web/app/components/plugins/plugin-detail-panel/trigger/event-detail-drawer.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/trigger/event-detail-drawer.tsx
@@ -4,6 +4,14 @@ import type { FC } from 'react'
 import type { TriggerEvent } from '@/app/components/plugins/types'
 import type { TriggerProviderApiEntity } from '@/app/components/workflow/block-selector/types'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Drawer,
+  DrawerBackdrop,
+  DrawerContent,
+  DrawerPopup,
+  DrawerPortal,
+  DrawerViewport,
+} from '@langgenius/dify-ui/drawer'
 import {
   RiArrowLeftLine,
   RiCloseLine,
@@ -11,7 +19,6 @@ import {
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Divider from '@/app/components/base/divider'
-import Drawer from '@/app/components/base/drawer'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import Icon from '@/app/components/plugins/card/base/card-icon'
 import Description from '@/app/components/plugins/card/base/description'
@@ -82,78 +89,87 @@ export const EventDetailDrawer: FC<EventDetailDrawerProps> = (props) => {
 
   return (
     <Drawer
-      isOpen
-      clickOutsideNotOpen={false}
-      onClose={onClose}
-      footer={null}
-      mask={false}
-      positionCenter={false}
-      panelClassName={cn('mt-[64px] mr-2 mb-2 w-[420px]! max-w-[420px]! justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg! p-0! shadow-xl')}
+      open
+      modal
+      swipeDirection="right"
+      onOpenChange={(open) => {
+        if (!open)
+          onClose()
+      }}
     >
-      <div className="relative border-b border-divider-subtle p-4 pb-3">
-        <div className="absolute top-3 right-3">
-          <ActionButton onClick={onClose}>
-            <RiCloseLine className="h-4 w-4" />
-          </ActionButton>
-        </div>
-        <div
-          className="mb-2 flex cursor-pointer items-center gap-1 system-xs-semibold-uppercase text-text-accent-secondary"
-          onClick={onClose}
-        >
-          <RiArrowLeftLine className="h-4 w-4" />
-          {t('detailPanel.operation.back', { ns: 'plugin' })}
-        </div>
-        <div className="flex items-center gap-1">
-          <Icon size="tiny" className="h-6 w-6" src={providerInfo.icon!} />
-          <OrgInfo
-            packageNameClassName="w-auto"
-            orgName={providerInfo.author}
-            packageName={providerInfo.name.split('/').pop() || ''}
-          />
-        </div>
-        <div className="mt-1 system-md-semibold text-text-primary">{eventInfo?.identity?.label[language]}</div>
-        <Description className="mt-3 mb-2 h-auto" text={eventInfo.description[language]!} descriptionLineRows={2}></Description>
-      </div>
-      <div className="flex h-full flex-col gap-2 overflow-y-auto px-4 pt-4 pb-2">
-        <div className="system-sm-semibold-uppercase text-text-secondary">{t('setBuiltInTools.parameters', { ns: 'tools' })}</div>
-        {parametersSchemas.length > 0
-          ? (
-              parametersSchemas.map((item, index) => (
-                <div key={index} className="py-1">
-                  <div className="flex items-center gap-2">
-                    <div className="code-sm-semibold text-text-secondary">{item.label[language]}</div>
-                    <div className="system-xs-regular text-text-tertiary">
-                      {getType(item.type, t)}
-                    </div>
-                    {item.required && (
-                      <div className="system-xs-medium text-text-warning-secondary">{t('setBuiltInTools.required', { ns: 'tools' })}</div>
-                    )}
-                  </div>
-                  {item.description && (
-                    <div className="mt-0.5 system-xs-regular text-text-tertiary">
-                      {item.description?.[language]}
-                    </div>
-                  )}
+      <DrawerPortal>
+        <DrawerBackdrop className="bg-transparent" />
+        <DrawerViewport>
+          <DrawerPopup className={cn('justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-[420px] data-[swipe-direction=right]:max-w-[420px] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border')}>
+            <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
+              <div className="relative border-b border-divider-subtle p-4 pb-3">
+                <div className="absolute top-3 right-3">
+                  <ActionButton onClick={onClose}>
+                    <RiCloseLine className="h-4 w-4" />
+                  </ActionButton>
                 </div>
-              ))
-            )
-          : <div className="system-xs-regular text-text-tertiary">{t('events.item.noParameters', { ns: 'pluginTrigger' })}</div>}
-        <Divider className="mt-1 mb-2 h-px" />
-        <div className="flex flex-col gap-2">
-          <div className="system-sm-semibold-uppercase text-text-secondary">{t('events.output', { ns: 'pluginTrigger' })}</div>
-          <div className="relative left-[-7px]">
-            {outputFields.map(item => (
-              <Field
-                key={item.name}
-                name={item.name}
-                payload={item.field}
-                required={item.required}
-                rootClassName="code-sm-semibold text-text-secondary"
-              />
-            ))}
-          </div>
-        </div>
-      </div>
+                <div
+                  className="mb-2 flex cursor-pointer items-center gap-1 system-xs-semibold-uppercase text-text-accent-secondary"
+                  onClick={onClose}
+                >
+                  <RiArrowLeftLine className="h-4 w-4" />
+                  {t('detailPanel.operation.back', { ns: 'plugin' })}
+                </div>
+                <div className="flex items-center gap-1">
+                  <Icon size="tiny" className="h-6 w-6" src={providerInfo.icon!} />
+                  <OrgInfo
+                    packageNameClassName="w-auto"
+                    orgName={providerInfo.author}
+                    packageName={providerInfo.name.split('/').pop() || ''}
+                  />
+                </div>
+                <div className="mt-1 system-md-semibold text-text-primary">{eventInfo?.identity?.label[language]}</div>
+                <Description className="mt-3 mb-2 h-auto" text={eventInfo.description[language]!} descriptionLineRows={2}></Description>
+              </div>
+              <div className="flex h-full flex-col gap-2 overflow-y-auto px-4 pt-4 pb-2">
+                <div className="system-sm-semibold-uppercase text-text-secondary">{t('setBuiltInTools.parameters', { ns: 'tools' })}</div>
+                {parametersSchemas.length > 0
+                  ? (
+                      parametersSchemas.map((item, index) => (
+                        <div key={index} className="py-1">
+                          <div className="flex items-center gap-2">
+                            <div className="code-sm-semibold text-text-secondary">{item.label[language]}</div>
+                            <div className="system-xs-regular text-text-tertiary">
+                              {getType(item.type, t)}
+                            </div>
+                            {item.required && (
+                              <div className="system-xs-medium text-text-warning-secondary">{t('setBuiltInTools.required', { ns: 'tools' })}</div>
+                            )}
+                          </div>
+                          {item.description && (
+                            <div className="mt-0.5 system-xs-regular text-text-tertiary">
+                              {item.description?.[language]}
+                            </div>
+                          )}
+                        </div>
+                      ))
+                    )
+                  : <div className="system-xs-regular text-text-tertiary">{t('events.item.noParameters', { ns: 'pluginTrigger' })}</div>}
+                <Divider className="mt-1 mb-2 h-px" />
+                <div className="flex flex-col gap-2">
+                  <div className="system-sm-semibold-uppercase text-text-secondary">{t('events.output', { ns: 'pluginTrigger' })}</div>
+                  <div className="relative left-[-7px]">
+                    {outputFields.map(item => (
+                      <Field
+                        key={item.name}
+                        name={item.name}
+                        payload={item.field}
+                        required={item.required}
+                        rootClassName="code-sm-semibold text-text-secondary"
+                      />
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </DrawerContent>
+          </DrawerPopup>
+        </DrawerViewport>
+      </DrawerPortal>
     </Drawer>
   )
 }
diff --git a/web/app/components/tools/mcp/detail/__tests__/provider-detail.spec.tsx b/web/app/components/tools/mcp/detail/__tests__/provider-detail.spec.tsx
index 05380916b2..4d69d89516 100644
--- a/web/app/components/tools/mcp/detail/__tests__/provider-detail.spec.tsx
+++ b/web/app/components/tools/mcp/detail/__tests__/provider-detail.spec.tsx
@@ -6,15 +6,6 @@ import * as React from 'react'
 import { describe, expect, it, vi } from 'vitest'
 import MCPDetailPanel from '../provider-detail'
 
-// Mock the drawer component
-vi.mock('@/app/components/base/drawer', () => ({
-  default: ({ children, isOpen }: { children: ReactNode, isOpen: boolean }) => {
-    if (!isOpen)
-      return null
-    return <div data-testid="drawer">{children}</div>
-  },
-}))
-
 // Mock the content component to expose onUpdate callback
 vi.mock('../content', () => ({
   default: ({ detail, onUpdate }: { detail: ToolWithProvider, onUpdate: (isDelete?: boolean) => void }) => (
@@ -71,7 +62,7 @@ describe('MCPDetailPanel', () => {
         <MCPDetailPanel {...defaultProps} detail={detail} />,
         { wrapper: createWrapper() },
       )
-      expect(screen.getByTestId('drawer')).toBeInTheDocument()
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
     })
 
     it('should render content when detail is provided', () => {
diff --git a/web/app/components/tools/mcp/detail/provider-detail.tsx b/web/app/components/tools/mcp/detail/provider-detail.tsx
index 7b2d351637..e704e6d262 100644
--- a/web/app/components/tools/mcp/detail/provider-detail.tsx
+++ b/web/app/components/tools/mcp/detail/provider-detail.tsx
@@ -2,8 +2,15 @@
 import type { FC } from 'react'
 import type { ToolWithProvider } from '../../../workflow/types'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Drawer,
+  DrawerBackdrop,
+  DrawerContent,
+  DrawerPopup,
+  DrawerPortal,
+  DrawerViewport,
+} from '@langgenius/dify-ui/drawer'
 import * as React from 'react'
-import Drawer from '@/app/components/base/drawer'
 import MCPDetailContent from './content'
 
 type Props = {
@@ -32,23 +39,32 @@ const MCPDetailPanel: FC<Props> = ({
 
   return (
     <Drawer
-      isOpen={!!detail}
-      clickOutsideNotOpen={false}
-      onClose={onHide}
-      footer={null}
-      mask={false}
-      positionCenter={false}
-      panelClassName={cn('mt-[64px] mr-2 mb-2 w-[420px]! max-w-[420px]! justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg! p-0! shadow-xl')}
+      open={!!detail}
+      modal
+      swipeDirection="right"
+      onOpenChange={(open) => {
+        if (!open)
+          onHide()
+      }}
     >
-      {detail && (
-        <MCPDetailContent
-          detail={detail}
-          onHide={onHide}
-          onUpdate={handleUpdate}
-          isTriggerAuthorize={isTriggerAuthorize}
-          onFirstCreate={onFirstCreate}
-        />
-      )}
+      <DrawerPortal>
+        <DrawerBackdrop className="bg-transparent" />
+        <DrawerViewport>
+          <DrawerPopup className={cn('justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-[420px] data-[swipe-direction=right]:max-w-[420px] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border')}>
+            <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
+              {detail && (
+                <MCPDetailContent
+                  detail={detail}
+                  onHide={onHide}
+                  onUpdate={handleUpdate}
+                  isTriggerAuthorize={isTriggerAuthorize}
+                  onFirstCreate={onFirstCreate}
+                />
+              )}
+            </DrawerContent>
+          </DrawerPopup>
+        </DrawerViewport>
+      </DrawerPortal>
     </Drawer>
   )
 }
diff --git a/web/app/components/tools/provider/__tests__/detail.spec.tsx b/web/app/components/tools/provider/__tests__/detail.spec.tsx
index edb052fa41..5a26589e11 100644
--- a/web/app/components/tools/provider/__tests__/detail.spec.tsx
+++ b/web/app/components/tools/provider/__tests__/detail.spec.tsx
@@ -74,11 +74,6 @@ vi.mock('@/utils/var', () => ({
   basePath: '',
 }))
 
-vi.mock('@/app/components/base/drawer', () => ({
-  default: ({ children, isOpen }: { children: React.ReactNode, isOpen: boolean }) =>
-    isOpen ? <div data-testid="drawer">{children}</div> : null,
-}))
-
 const mockToastSuccess = vi.hoisted(() => vi.fn())
 const mockToastError = vi.hoisted(() => vi.fn())
 vi.mock('@langgenius/dify-ui/toast', () => ({
diff --git a/web/app/components/tools/provider/detail.tsx b/web/app/components/tools/provider/detail.tsx
index 9080ee2c7d..359f6af88c 100644
--- a/web/app/components/tools/provider/detail.tsx
+++ b/web/app/components/tools/provider/detail.tsx
@@ -12,6 +12,14 @@ import {
 } from '@langgenius/dify-ui/alert-dialog'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Drawer,
+  DrawerBackdrop,
+  DrawerContent,
+  DrawerPopup,
+  DrawerPortal,
+  DrawerViewport,
+} from '@langgenius/dify-ui/drawer'
 import { toast } from '@langgenius/dify-ui/toast'
 import {
   RiCloseLine,
@@ -20,7 +28,6 @@ import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import Drawer from '@/app/components/base/drawer'
 import { LinkExternal02, Settings01 } from '@/app/components/base/icons/src/vender/line/general'
 import Loading from '@/app/components/base/loading'
 import { ConfigurationMethodEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
@@ -230,204 +237,213 @@ const ProviderDetail = ({
 
   return (
     <Drawer
-      isOpen={!!collection}
-      clickOutsideNotOpen={false}
-      onClose={onHide}
-      footer={null}
-      mask={false}
-      positionCenter={false}
-      panelClassName={cn('mt-[64px] mr-2 mb-2 w-[420px]! max-w-[420px]! justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg! p-0! shadow-xl')}
+      open={!!collection}
+      modal
+      swipeDirection="right"
+      onOpenChange={(open) => {
+        if (!open)
+          onHide()
+      }}
     >
-      <div className="flex h-full flex-col p-4">
-        <div className="shrink-0">
-          <div className="mb-3 flex">
-            <Icon src={collection.icon} />
-            <div className="ml-3 w-0 grow">
-              <div className="flex h-5 items-center">
-                <Title title={collection.label[language]!} />
-              </div>
-              <div className="mt-0.5 mb-1 flex h-4 items-center justify-between">
-                <OrgInfo
-                  packageNameClassName="w-auto"
-                  orgName={collection.author}
-                  packageName={collection.name}
-                />
-              </div>
-            </div>
-            <div className="flex gap-1">
-              <ActionButton onClick={onHide}>
-                <RiCloseLine className="h-4 w-4" />
-              </ActionButton>
-            </div>
-          </div>
-        </div>
-        {!!collection.description[language] && (
-          <Description text={collection.description[language]} descriptionLineRows={2}></Description>
-        )}
-        <div className="flex gap-1 border-b-[0.5px] border-divider-subtle">
-          {collection.type === CollectionType.custom && !isDetailLoading && (
-            <Button
-              className={cn('my-3 w-full shrink-0')}
-              onClick={() => setIsShowEditCustomCollectionModal(true)}
-            >
-              <Settings01 className="mr-1 h-4 w-4 text-text-tertiary" />
-              <div className="system-sm-medium text-text-secondary">{t('createTool.editAction', { ns: 'tools' })}</div>
-            </Button>
-          )}
-          {collection.type === CollectionType.workflow && !isDetailLoading && customCollection && (
-            <>
-              <Button
-                variant="primary"
-                className={cn('my-3 w-[183px] shrink-0')}
-              >
-                <a className="flex items-center" href={`${basePath}/app/${(customCollection as WorkflowToolProviderResponse).workflow_app_id}/workflow`} rel="noreferrer" target="_blank">
-                  <div className="system-sm-medium">{t('openInStudio', { ns: 'tools' })}</div>
-                  <LinkExternal02 className="ml-1 h-4 w-4" />
-                </a>
-              </Button>
-              <Button
-                className={cn('my-3 w-[183px] shrink-0')}
-                onClick={() => setWorkflowToolDrawerOpen(true)}
-                disabled={!isCurrentWorkspaceManager}
-              >
-                <div className="system-sm-medium text-text-secondary">{t('createTool.editAction', { ns: 'tools' })}</div>
-              </Button>
-            </>
-          )}
-        </div>
-        <div className="flex min-h-0 flex-1 flex-col pt-3">
-          {isDetailLoading && <div className="flex h-[200px]"><Loading type="app" /></div>}
-          {!isDetailLoading && (
-            <>
-              <div className="shrink-0">
-                {(collection.type === CollectionType.builtIn || collection.type === CollectionType.model) && isAuthed && (
-                  <div className="mb-1 flex h-6 items-center justify-between system-sm-semibold-uppercase text-text-secondary">
-                    {t('detailPanel.actionNum', { ns: 'plugin', num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' })}
-                    {needAuth && (
+      <DrawerPortal>
+        <DrawerBackdrop className="bg-transparent" />
+        <DrawerViewport>
+          <DrawerPopup className={cn('justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-[420px] data-[swipe-direction=right]:max-w-[420px] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border')}>
+            <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
+              <div className="flex h-full flex-col p-4">
+                <div className="shrink-0">
+                  <div className="mb-3 flex">
+                    <Icon src={collection.icon} />
+                    <div className="ml-3 w-0 grow">
+                      <div className="flex h-5 items-center">
+                        <Title title={collection.label[language]!} />
+                      </div>
+                      <div className="mt-0.5 mb-1 flex h-4 items-center justify-between">
+                        <OrgInfo
+                          packageNameClassName="w-auto"
+                          orgName={collection.author}
+                          packageName={collection.name}
+                        />
+                      </div>
+                    </div>
+                    <div className="flex gap-1">
+                      <ActionButton aria-label={t('operation.close', { ns: 'common' })} onClick={onHide}>
+                        <RiCloseLine className="h-4 w-4" />
+                      </ActionButton>
+                    </div>
+                  </div>
+                </div>
+                {!!collection.description[language] && (
+                  <Description text={collection.description[language]} descriptionLineRows={2}></Description>
+                )}
+                <div className="flex gap-1 border-b-[0.5px] border-divider-subtle">
+                  {collection.type === CollectionType.custom && !isDetailLoading && (
+                    <Button
+                      className={cn('my-3 w-full shrink-0')}
+                      onClick={() => setIsShowEditCustomCollectionModal(true)}
+                    >
+                      <Settings01 className="mr-1 h-4 w-4 text-text-tertiary" />
+                      <div className="system-sm-medium text-text-secondary">{t('createTool.editAction', { ns: 'tools' })}</div>
+                    </Button>
+                  )}
+                  {collection.type === CollectionType.workflow && !isDetailLoading && customCollection && (
+                    <>
                       <Button
-                        variant="secondary"
-                        size="small"
-                        onClick={() => {
-                          if (collection.type === CollectionType.builtIn || collection.type === CollectionType.model)
-                            showSettingAuthModal()
-                        }}
+                        variant="primary"
+                        className={cn('my-3 w-[183px] shrink-0')}
+                      >
+                        <a className="flex items-center" href={`${basePath}/app/${(customCollection as WorkflowToolProviderResponse).workflow_app_id}/workflow`} rel="noreferrer" target="_blank">
+                          <div className="system-sm-medium">{t('openInStudio', { ns: 'tools' })}</div>
+                          <LinkExternal02 className="ml-1 h-4 w-4" />
+                        </a>
+                      </Button>
+                      <Button
+                        className={cn('my-3 w-[183px] shrink-0')}
+                        onClick={() => setWorkflowToolDrawerOpen(true)}
                         disabled={!isCurrentWorkspaceManager}
                       >
-                        <Indicator className="mr-2" color="green" />
-                        {t('auth.authorized', { ns: 'tools' })}
+                        <div className="system-sm-medium text-text-secondary">{t('createTool.editAction', { ns: 'tools' })}</div>
                       </Button>
-                    )}
-                  </div>
-                )}
-                {(collection.type === CollectionType.builtIn || collection.type === CollectionType.model) && needAuth && !isAuthed && (
-                  <>
-                    <div className="system-sm-semibold-uppercase text-text-secondary">
-                      <span className="">{t('includeToolNum', { ns: 'tools', num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' }).toLocaleUpperCase()}</span>
-                      <span className="px-1">·</span>
-                      <span className="text-util-colors-orange-orange-600">{t('auth.setup', { ns: 'tools' }).toLocaleUpperCase()}</span>
-                    </div>
-                    <Button
-                      variant="primary"
-                      className={cn('my-3 w-full shrink-0')}
-                      onClick={() => {
-                        if (collection.type === CollectionType.builtIn || collection.type === CollectionType.model)
-                          showSettingAuthModal()
-                      }}
-                      disabled={!isCurrentWorkspaceManager}
-                    >
-                      {t('auth.unauthorized', { ns: 'tools' })}
-                    </Button>
-                  </>
-                )}
-                {(collection.type === CollectionType.custom) && (
-                  <div className="system-sm-semibold-uppercase text-text-secondary">
-                    <span className="">{t('includeToolNum', { ns: 'tools', num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' }).toLocaleUpperCase()}</span>
-                  </div>
-                )}
-                {(collection.type === CollectionType.workflow) && (
-                  <div className="system-sm-semibold-uppercase text-text-secondary">
-                    <span className="">{t('createTool.toolInput.title', { ns: 'tools' }).toLocaleUpperCase()}</span>
-                  </div>
-                )}
-              </div>
-              <div className="mt-1 flex-1 overflow-y-auto py-2">
-                {collection.type !== CollectionType.workflow && toolList.map(tool => (
-                  <ToolItem
-                    key={tool.name}
-                    disabled={false}
+                    </>
+                  )}
+                </div>
+                <div className="flex min-h-0 flex-1 flex-col pt-3">
+                  {isDetailLoading && <div className="flex h-[200px]"><Loading type="app" /></div>}
+                  {!isDetailLoading && (
+                    <>
+                      <div className="shrink-0">
+                        {(collection.type === CollectionType.builtIn || collection.type === CollectionType.model) && isAuthed && (
+                          <div className="mb-1 flex h-6 items-center justify-between system-sm-semibold-uppercase text-text-secondary">
+                            {t('detailPanel.actionNum', { ns: 'plugin', num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' })}
+                            {needAuth && (
+                              <Button
+                                variant="secondary"
+                                size="small"
+                                onClick={() => {
+                                  if (collection.type === CollectionType.builtIn || collection.type === CollectionType.model)
+                                    showSettingAuthModal()
+                                }}
+                                disabled={!isCurrentWorkspaceManager}
+                              >
+                                <Indicator className="mr-2" color="green" />
+                                {t('auth.authorized', { ns: 'tools' })}
+                              </Button>
+                            )}
+                          </div>
+                        )}
+                        {(collection.type === CollectionType.builtIn || collection.type === CollectionType.model) && needAuth && !isAuthed && (
+                          <>
+                            <div className="system-sm-semibold-uppercase text-text-secondary">
+                              <span className="">{t('includeToolNum', { ns: 'tools', num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' }).toLocaleUpperCase()}</span>
+                              <span className="px-1">·</span>
+                              <span className="text-util-colors-orange-orange-600">{t('auth.setup', { ns: 'tools' }).toLocaleUpperCase()}</span>
+                            </div>
+                            <Button
+                              variant="primary"
+                              className={cn('my-3 w-full shrink-0')}
+                              onClick={() => {
+                                if (collection.type === CollectionType.builtIn || collection.type === CollectionType.model)
+                                  showSettingAuthModal()
+                              }}
+                              disabled={!isCurrentWorkspaceManager}
+                            >
+                              {t('auth.unauthorized', { ns: 'tools' })}
+                            </Button>
+                          </>
+                        )}
+                        {(collection.type === CollectionType.custom) && (
+                          <div className="system-sm-semibold-uppercase text-text-secondary">
+                            <span className="">{t('includeToolNum', { ns: 'tools', num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' }).toLocaleUpperCase()}</span>
+                          </div>
+                        )}
+                        {(collection.type === CollectionType.workflow) && (
+                          <div className="system-sm-semibold-uppercase text-text-secondary">
+                            <span className="">{t('createTool.toolInput.title', { ns: 'tools' }).toLocaleUpperCase()}</span>
+                          </div>
+                        )}
+                      </div>
+                      <div className="mt-1 flex-1 overflow-y-auto py-2">
+                        {collection.type !== CollectionType.workflow && toolList.map(tool => (
+                          <ToolItem
+                            key={tool.name}
+                            disabled={false}
+                            collection={collection}
+                            tool={tool}
+                            isBuiltIn={isBuiltIn}
+                            isModel={isModel}
+                          />
+                        ))}
+                        {collection.type === CollectionType.workflow && (customCollection as WorkflowToolProviderResponse)?.tool?.parameters.map(item => (
+                          <div key={item.name} className="mb-1 py-1">
+                            <div className="mb-1 flex items-center gap-2">
+                              <span className="code-sm-semibold text-text-secondary">{item.name}</span>
+                              <span className="system-xs-regular text-text-tertiary">{item.type}</span>
+                              <span className="system-xs-medium text-text-warning-secondary">{item.required ? t('createTool.toolInput.required', { ns: 'tools' }) : ''}</span>
+                            </div>
+                            <div className="system-xs-regular text-text-tertiary">{item.llm_description}</div>
+                          </div>
+                        ))}
+                      </div>
+                    </>
+                  )}
+                </div>
+                {showSettingAuth && (
+                  <ConfigCredential
                     collection={collection}
-                    tool={tool}
-                    isBuiltIn={isBuiltIn}
-                    isModel={isModel}
+                    onCancel={() => setShowSettingAuth(false)}
+                    onSaved={async (value) => {
+                      await updateBuiltInToolCredential(collection.name, value)
+                      toast.success(t('api.actionSuccess', { ns: 'common' }))
+                      await onRefreshData()
+                      setShowSettingAuth(false)
+                    }}
+                    onRemove={async () => {
+                      await removeBuiltInToolCredential(collection.name)
+                      toast.success(t('api.actionSuccess', { ns: 'common' }))
+                      await onRefreshData()
+                      setShowSettingAuth(false)
+                    }}
                   />
-                ))}
-                {collection.type === CollectionType.workflow && (customCollection as WorkflowToolProviderResponse)?.tool?.parameters.map(item => (
-                  <div key={item.name} className="mb-1 py-1">
-                    <div className="mb-1 flex items-center gap-2">
-                      <span className="code-sm-semibold text-text-secondary">{item.name}</span>
-                      <span className="system-xs-regular text-text-tertiary">{item.type}</span>
-                      <span className="system-xs-medium text-text-warning-secondary">{item.required ? t('createTool.toolInput.required', { ns: 'tools' }) : ''}</span>
+                )}
+                {isShowEditCollectionToolModal && (
+                  <EditCustomToolModal
+                    payload={customCollection}
+                    onHide={() => setIsShowEditCustomCollectionModal(false)}
+                    onEdit={doUpdateCustomToolCollection}
+                    onRemove={onClickCustomToolDelete}
+                  />
+                )}
+                {workflowToolDrawerOpen && (
+                  <WorkflowToolDrawer
+                    payload={customCollection as unknown as WorkflowToolDrawerPayload}
+                    onHide={() => setWorkflowToolDrawerOpen(false)}
+                    onRemove={onClickWorkflowToolDelete}
+                    onSave={updateWorkflowToolProvider}
+                  />
+                )}
+                <AlertDialog open={showConfirmDelete} onOpenChange={open => !open && setShowConfirmDelete(false)}>
+                  <AlertDialogContent>
+                    <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+                      <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+                        {t('createTool.deleteToolConfirmTitle', { ns: 'tools' })}
+                      </AlertDialogTitle>
+                      <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+                        {t('createTool.deleteToolConfirmContent', { ns: 'tools' })}
+                      </AlertDialogDescription>
                     </div>
-                    <div className="system-xs-regular text-text-tertiary">{item.llm_description}</div>
-                  </div>
-                ))}
+                    <AlertDialogActions>
+                      <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+                      <AlertDialogConfirmButton onClick={handleConfirmDelete}>
+                        {t('operation.confirm', { ns: 'common' })}
+                      </AlertDialogConfirmButton>
+                    </AlertDialogActions>
+                  </AlertDialogContent>
+                </AlertDialog>
               </div>
-            </>
-          )}
-        </div>
-        {showSettingAuth && (
-          <ConfigCredential
-            collection={collection}
-            onCancel={() => setShowSettingAuth(false)}
-            onSaved={async (value) => {
-              await updateBuiltInToolCredential(collection.name, value)
-              toast.success(t('api.actionSuccess', { ns: 'common' }))
-              await onRefreshData()
-              setShowSettingAuth(false)
-            }}
-            onRemove={async () => {
-              await removeBuiltInToolCredential(collection.name)
-              toast.success(t('api.actionSuccess', { ns: 'common' }))
-              await onRefreshData()
-              setShowSettingAuth(false)
-            }}
-          />
-        )}
-        {isShowEditCollectionToolModal && (
-          <EditCustomToolModal
-            payload={customCollection}
-            onHide={() => setIsShowEditCustomCollectionModal(false)}
-            onEdit={doUpdateCustomToolCollection}
-            onRemove={onClickCustomToolDelete}
-          />
-        )}
-        {workflowToolDrawerOpen && (
-          <WorkflowToolDrawer
-            payload={customCollection as unknown as WorkflowToolDrawerPayload}
-            onHide={() => setWorkflowToolDrawerOpen(false)}
-            onRemove={onClickWorkflowToolDelete}
-            onSave={updateWorkflowToolProvider}
-          />
-        )}
-        <AlertDialog open={showConfirmDelete} onOpenChange={open => !open && setShowConfirmDelete(false)}>
-          <AlertDialogContent>
-            <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
-              <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
-                {t('createTool.deleteToolConfirmTitle', { ns: 'tools' })}
-              </AlertDialogTitle>
-              <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
-                {t('createTool.deleteToolConfirmContent', { ns: 'tools' })}
-              </AlertDialogDescription>
-            </div>
-            <AlertDialogActions>
-              <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
-              <AlertDialogConfirmButton onClick={handleConfirmDelete}>
-                {t('operation.confirm', { ns: 'common' })}
-              </AlertDialogConfirmButton>
-            </AlertDialogActions>
-          </AlertDialogContent>
-        </AlertDialog>
-      </div>
+            </DrawerContent>
+          </DrawerPopup>
+        </DrawerViewport>
+      </DrawerPortal>
     </Drawer>
   )
 }
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
index 90e9caae9d..8182a5ab87 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
@@ -1,6 +1,15 @@
 'use client'
 import type { FC } from 'react'
 import type { DataSet } from '@/models/datasets'
+import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Drawer,
+  DrawerBackdrop,
+  DrawerContent,
+  DrawerPopup,
+  DrawerPortal,
+  DrawerViewport,
+} from '@langgenius/dify-ui/drawer'
 import {
   RiDeleteBinLine,
   RiEditLine,
@@ -13,7 +22,6 @@ import SettingsModal from '@/app/components/app/configuration/dataset-config/set
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 import AppIcon from '@/app/components/base/app-icon'
 import Badge from '@/app/components/base/badge'
-import Drawer from '@/app/components/base/drawer'
 import { ModelFeatureEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import FeatureIcon from '@/app/components/header/account-setting/model-provider-page/model-selector/feature-icon'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
@@ -131,12 +139,29 @@ const DatasetItem: FC<Props> = ({
       }
 
       {isShowSettingsModal && (
-        <Drawer isOpen={isShowSettingsModal} onClose={hideSettingsModal} footer={null} mask={isMobile} panelClassName="mt-16 mx-2 sm:mr-2 mb-3 p-0! max-w-[640px]! rounded-xl">
-          <SettingsModal
-            currentDataset={payload}
-            onCancel={hideSettingsModal}
-            onSave={handleSave}
-          />
+        <Drawer
+          open={isShowSettingsModal}
+          modal
+          swipeDirection="right"
+          onOpenChange={(open) => {
+            if (!open)
+              hideSettingsModal()
+          }}
+        >
+          <DrawerPortal>
+            <DrawerBackdrop className={cn(!isMobile && 'bg-transparent')} />
+            <DrawerViewport>
+              <DrawerPopup className="p-0! data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-3 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-full data-[swipe-direction=right]:max-w-[640px] data-[swipe-direction=right]:rounded-xl">
+                <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
+                  <SettingsModal
+                    currentDataset={payload}
+                    onCancel={hideSettingsModal}
+                    onSave={handleSave}
+                  />
+                </DrawerContent>
+              </DrawerPopup>
+            </DrawerViewport>
+          </DrawerPortal>
         </Drawer>
       )}
     </div>

From c67ce6f66dc1a464813ee9d997adda9299851a87 Mon Sep 17 00:00:00 2001
From: Asuka Minato <i@asukaminato.eu.org>
Date: Sun, 10 May 2026 13:16:29 +0900
Subject: [PATCH 08/13] chore: unify api && clean some type ignore (#35984)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 api/controllers/console/admin.py              | 12 +----
 .../console/app/advanced_prompt_template.py   |  2 +-
 api/controllers/console/app/agent.py          |  9 ++--
 api/controllers/console/app/annotation.py     | 22 ++++-----
 api/controllers/console/app/app.py            |  2 +-
 api/controllers/console/app/audio.py          |  2 +-
 api/controllers/console/app/completion.py     | 10 +----
 api/controllers/console/app/conversation.py   | 17 ++-----
 .../console/app/conversation_variables.py     |  2 +-
 api/controllers/console/app/ops_trace.py      | 15 ++-----
 api/controllers/console/app/statistic.py      | 24 +++++-----
 api/controllers/console/app/workflow.py       |  6 +--
 .../console/app/workflow_app_log.py           |  4 +-
 .../console/app/workflow_comment.py           | 10 ++---
 .../console/app/workflow_draft_variable.py    | 25 ++++-------
 api/controllers/console/app/workflow_run.py   |  8 ++--
 .../console/app/workflow_statistic.py         | 16 +++----
 .../console/app/workflow_trigger.py           |  2 +-
 api/controllers/console/auth/activate.py      |  2 +-
 .../console/auth/data_source_bearer_auth.py   |  8 +---
 .../console/auth/email_register.py            |  6 +--
 .../console/auth/forgot_password.py           |  2 -
 api/controllers/console/auth/login.py         | 10 +----
 .../datasource_content_preview.py             |  5 +--
 .../console/explore/recommended_app.py        |  2 +-
 api/controllers/console/explore/trial.py      | 20 +--------
 api/controllers/console/extension.py          |  2 +-
 api/controllers/console/workspace/account.py  | 45 +++++++++----------
 api/controllers/console/workspace/endpoint.py | 10 +----
 api/controllers/console/workspace/members.py  | 22 +++++----
 .../console/workspace/model_providers.py      | 26 +++++------
 api/controllers/console/workspace/models.py   | 29 +++++-------
 api/controllers/console/workspace/plugin.py   | 16 +++----
 .../console/workspace/workspace.py            | 19 ++++----
 api/controllers/files/image_preview.py        | 14 ++----
 api/controllers/files/tool_files.py           |  7 +--
 api/controllers/files/upload.py               |  9 ++--
 .../service_api/dataset/dataset.py            | 10 +----
 .../service_api/dataset/document.py           |  3 --
 39 files changed, 162 insertions(+), 293 deletions(-)

diff --git a/api/controllers/console/admin.py b/api/controllers/console/admin.py
index a32c3420bb..bb2f477e3d 100644
--- a/api/controllers/console/admin.py
+++ b/api/controllers/console/admin.py
@@ -21,8 +21,6 @@ from libs.token import extract_access_token
 from models.model import App, ExporleBanner, InstalledApp, RecommendedApp, TrialApp
 from services.billing_service import BillingService, LangContentDict
 
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
-
 
 class InsertExploreAppPayload(BaseModel):
     app_id: str = Field(...)
@@ -59,15 +57,7 @@ class InsertExploreBannerPayload(BaseModel):
     model_config = {"populate_by_name": True}
 
 
-console_ns.schema_model(
-    InsertExploreAppPayload.__name__,
-    InsertExploreAppPayload.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0),
-)
-
-console_ns.schema_model(
-    InsertExploreBannerPayload.__name__,
-    InsertExploreBannerPayload.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0),
-)
+register_schema_models(console_ns, InsertExploreAppPayload, InsertExploreBannerPayload)
 
 
 def admin_required[**P, R](view: Callable[P, R]) -> Callable[P, R]:
diff --git a/api/controllers/console/app/advanced_prompt_template.py b/api/controllers/console/app/advanced_prompt_template.py
index ed66da1be5..ad21671176 100644
--- a/api/controllers/console/app/advanced_prompt_template.py
+++ b/api/controllers/console/app/advanced_prompt_template.py
@@ -34,7 +34,7 @@ class AdvancedPromptTemplateList(Resource):
     @login_required
     @account_initialization_required
     def get(self):
-        args = AdvancedPromptTemplateQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = AdvancedPromptTemplateQuery.model_validate(request.args.to_dict(flat=True))
         prompt_args: AdvancedPromptTemplateArgs = {
             "app_mode": args.app_mode,
             "model_mode": args.model_mode,
diff --git a/api/controllers/console/app/agent.py b/api/controllers/console/app/agent.py
index cfdb9cf417..c05600ced5 100644
--- a/api/controllers/console/app/agent.py
+++ b/api/controllers/console/app/agent.py
@@ -2,6 +2,7 @@ from flask import request
 from flask_restx import Resource, fields
 from pydantic import BaseModel, Field, field_validator
 
+from controllers.common.schema import register_schema_models
 from controllers.console import console_ns
 from controllers.console.app.wraps import get_app_model
 from controllers.console.wraps import account_initialization_required, setup_required
@@ -10,8 +11,6 @@ from libs.login import login_required
 from models.model import AppMode
 from services.agent_service import AgentService
 
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
-
 
 class AgentLogQuery(BaseModel):
     message_id: str = Field(..., description="Message UUID")
@@ -23,9 +22,7 @@ class AgentLogQuery(BaseModel):
         return uuid_value(value)
 
 
-console_ns.schema_model(
-    AgentLogQuery.__name__, AgentLogQuery.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0)
-)
+register_schema_models(console_ns, AgentLogQuery)
 
 
 @console_ns.route("/apps/<uuid:app_id>/agent/logs")
@@ -44,6 +41,6 @@ class AgentLogApi(Resource):
     @get_app_model(mode=[AppMode.AGENT_CHAT])
     def get(self, app_model):
         """Get agent logs"""
-        args = AgentLogQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = AgentLogQuery.model_validate(request.args.to_dict(flat=True))
 
         return AgentService.get_agent_logs(app_model, args.conversation_id, args.message_id)
diff --git a/api/controllers/console/app/annotation.py b/api/controllers/console/app/annotation.py
index 528785931e..5970e55285 100644
--- a/api/controllers/console/app/annotation.py
+++ b/api/controllers/console/app/annotation.py
@@ -33,8 +33,6 @@ from services.annotation_service import (
     UpsertAnnotationArgs,
 )
 
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
-
 
 class AnnotationReplyPayload(BaseModel):
     score_threshold: float = Field(..., description="Score threshold for annotation matching")
@@ -87,17 +85,6 @@ class AnnotationFilePayload(BaseModel):
         return uuid_value(value)
 
 
-def reg(model: type[BaseModel]) -> None:
-    console_ns.schema_model(model.__name__, model.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0))
-
-
-reg(AnnotationReplyPayload)
-reg(AnnotationSettingUpdatePayload)
-reg(AnnotationListQuery)
-reg(CreateAnnotationPayload)
-reg(UpdateAnnotationPayload)
-reg(AnnotationReplyStatusQuery)
-reg(AnnotationFilePayload)
 register_schema_models(
     console_ns,
     Annotation,
@@ -105,6 +92,13 @@ register_schema_models(
     AnnotationExportList,
     AnnotationHitHistory,
     AnnotationHitHistoryList,
+    AnnotationReplyPayload,
+    AnnotationSettingUpdatePayload,
+    AnnotationListQuery,
+    CreateAnnotationPayload,
+    UpdateAnnotationPayload,
+    AnnotationReplyStatusQuery,
+    AnnotationFilePayload,
 )
 
 
@@ -218,7 +212,7 @@ class AnnotationApi(Resource):
     @account_initialization_required
     @edit_permission_required
     def get(self, app_id):
-        args = AnnotationListQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = AnnotationListQuery.model_validate(request.args.to_dict(flat=True))
         page = args.page
         limit = args.limit
         keyword = args.keyword
diff --git a/api/controllers/console/app/app.py b/api/controllers/console/app/app.py
index 58ed6efc14..5023d46893 100644
--- a/api/controllers/console/app/app.py
+++ b/api/controllers/console/app/app.py
@@ -701,7 +701,7 @@ class AppExportApi(Resource):
     @edit_permission_required
     def get(self, app_model):
         """Export app"""
-        args = AppExportQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = AppExportQuery.model_validate(request.args.to_dict(flat=True))
 
         payload = AppExportResponse(
             data=AppDslService.export_dsl(
diff --git a/api/controllers/console/app/audio.py b/api/controllers/console/app/audio.py
index 91fbe4a85a..5b673f3394 100644
--- a/api/controllers/console/app/audio.py
+++ b/api/controllers/console/app/audio.py
@@ -173,7 +173,7 @@ class TextModesApi(Resource):
     @account_initialization_required
     def get(self, app_model):
         try:
-            args = TextToSpeechVoiceQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+            args = TextToSpeechVoiceQuery.model_validate(request.args.to_dict(flat=True))
 
             response = AudioService.transcript_tts_voices(
                 tenant_id=app_model.tenant_id,
diff --git a/api/controllers/console/app/completion.py b/api/controllers/console/app/completion.py
index fe274e4c9a..6a20296cff 100644
--- a/api/controllers/console/app/completion.py
+++ b/api/controllers/console/app/completion.py
@@ -7,6 +7,7 @@ from pydantic import BaseModel, Field, field_validator
 from werkzeug.exceptions import InternalServerError, NotFound
 
 import services
+from controllers.common.schema import register_schema_models
 from controllers.console import console_ns
 from controllers.console.app.error import (
     AppUnavailableError,
@@ -37,7 +38,6 @@ from services.app_task_service import AppTaskService
 from services.errors.llm import InvokeRateLimitError
 
 logger = logging.getLogger(__name__)
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
 
 
 class BaseMessagePayload(BaseModel):
@@ -65,13 +65,7 @@ class ChatMessagePayload(BaseMessagePayload):
         return uuid_value(value)
 
 
-console_ns.schema_model(
-    CompletionMessagePayload.__name__,
-    CompletionMessagePayload.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0),
-)
-console_ns.schema_model(
-    ChatMessagePayload.__name__, ChatMessagePayload.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0)
-)
+register_schema_models(console_ns, CompletionMessagePayload, ChatMessagePayload)
 
 
 # define completion message api for user
diff --git a/api/controllers/console/app/conversation.py b/api/controllers/console/app/conversation.py
index b2b1049f0c..c7347933cb 100644
--- a/api/controllers/console/app/conversation.py
+++ b/api/controllers/console/app/conversation.py
@@ -39,8 +39,6 @@ from models.model import AppMode
 from services.conversation_service import ConversationService
 from services.errors.conversation import ConversationNotExistsError
 
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
-
 
 class BaseConversationQuery(BaseModel):
     keyword: str | None = Field(default=None, description="Search keyword")
@@ -70,15 +68,6 @@ class ChatConversationQuery(BaseConversationQuery):
     )
 
 
-console_ns.schema_model(
-    CompletionConversationQuery.__name__,
-    CompletionConversationQuery.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0),
-)
-console_ns.schema_model(
-    ChatConversationQuery.__name__,
-    ChatConversationQuery.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0),
-)
-
 register_schema_models(
     console_ns,
     CompletionConversationQuery,
@@ -89,6 +78,8 @@ register_schema_models(
     ConversationWithSummaryPaginationResponse,
     ConversationDetailResponse,
     ResultResponse,
+    CompletionConversationQuery,
+    ChatConversationQuery,
 )
 
 
@@ -107,7 +98,7 @@ class CompletionConversationApi(Resource):
     @edit_permission_required
     def get(self, app_model):
         current_user, _ = current_account_with_tenant()
-        args = CompletionConversationQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = CompletionConversationQuery.model_validate(request.args.to_dict(flat=True))
 
         query = sa.select(Conversation).where(
             Conversation.app_id == app_model.id, Conversation.mode == "completion", Conversation.is_deleted.is_(False)
@@ -221,7 +212,7 @@ class ChatConversationApi(Resource):
     @edit_permission_required
     def get(self, app_model):
         current_user, _ = current_account_with_tenant()
-        args = ChatConversationQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = ChatConversationQuery.model_validate(request.args.to_dict(flat=True))
 
         subquery = (
             sa.select(Conversation.id.label("conversation_id"), EndUser.session_id.label("from_end_user_session_id"))
diff --git a/api/controllers/console/app/conversation_variables.py b/api/controllers/console/app/conversation_variables.py
index 9c8b095b9f..60a2bfc799 100644
--- a/api/controllers/console/app/conversation_variables.py
+++ b/api/controllers/console/app/conversation_variables.py
@@ -100,7 +100,7 @@ class ConversationVariablesApi(Resource):
     @account_initialization_required
     @get_app_model(mode=AppMode.ADVANCED_CHAT)
     def get(self, app_model):
-        args = ConversationVariablesQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = ConversationVariablesQuery.model_validate(request.args.to_dict(flat=True))
 
         stmt = (
             select(ConversationVariable)
diff --git a/api/controllers/console/app/ops_trace.py b/api/controllers/console/app/ops_trace.py
index cbcf513162..ee2fc39f86 100644
--- a/api/controllers/console/app/ops_trace.py
+++ b/api/controllers/console/app/ops_trace.py
@@ -5,14 +5,13 @@ from flask_restx import Resource, fields
 from pydantic import BaseModel, Field
 from werkzeug.exceptions import BadRequest
 
+from controllers.common.schema import register_schema_models
 from controllers.console import console_ns
 from controllers.console.app.error import TracingConfigCheckError, TracingConfigIsExist, TracingConfigNotExist
 from controllers.console.wraps import account_initialization_required, setup_required
 from libs.login import login_required
 from services.ops_service import OpsService
 
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
-
 
 class TraceProviderQuery(BaseModel):
     tracing_provider: str = Field(..., description="Tracing provider name")
@@ -23,13 +22,7 @@ class TraceConfigPayload(BaseModel):
     tracing_config: dict[str, Any] = Field(..., description="Tracing configuration data")
 
 
-console_ns.schema_model(
-    TraceProviderQuery.__name__,
-    TraceProviderQuery.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0),
-)
-console_ns.schema_model(
-    TraceConfigPayload.__name__, TraceConfigPayload.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0)
-)
+register_schema_models(console_ns, TraceProviderQuery, TraceConfigPayload)
 
 
 @console_ns.route("/apps/<uuid:app_id>/trace-config")
@@ -50,7 +43,7 @@ class TraceAppConfigApi(Resource):
     @login_required
     @account_initialization_required
     def get(self, app_id):
-        args = TraceProviderQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = TraceProviderQuery.model_validate(request.args.to_dict(flat=True))
 
         try:
             trace_config = OpsService.get_tracing_app_config(app_id=app_id, tracing_provider=args.tracing_provider)
@@ -121,7 +114,7 @@ class TraceAppConfigApi(Resource):
     @account_initialization_required
     def delete(self, app_id):
         """Delete an existing trace app configuration"""
-        args = TraceProviderQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = TraceProviderQuery.model_validate(request.args.to_dict(flat=True))
 
         try:
             result = OpsService.delete_tracing_app_config(app_id=app_id, tracing_provider=args.tracing_provider)
diff --git a/api/controllers/console/app/statistic.py b/api/controllers/console/app/statistic.py
index ffa28b1c95..d23b2837c9 100644
--- a/api/controllers/console/app/statistic.py
+++ b/api/controllers/console/app/statistic.py
@@ -5,6 +5,7 @@ from flask import abort, jsonify, request
 from flask_restx import Resource, fields
 from pydantic import BaseModel, Field, field_validator
 
+from controllers.common.schema import register_schema_models
 from controllers.console import console_ns
 from controllers.console.app.wraps import get_app_model
 from controllers.console.wraps import account_initialization_required, setup_required
@@ -15,8 +16,6 @@ from libs.helper import convert_datetime_to_date
 from libs.login import current_account_with_tenant, login_required
 from models import AppMode
 
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
-
 
 class StatisticTimeRangeQuery(BaseModel):
     start: str | None = Field(default=None, description="Start date (YYYY-MM-DD HH:MM)")
@@ -30,10 +29,7 @@ class StatisticTimeRangeQuery(BaseModel):
         return value
 
 
-console_ns.schema_model(
-    StatisticTimeRangeQuery.__name__,
-    StatisticTimeRangeQuery.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0),
-)
+register_schema_models(console_ns, StatisticTimeRangeQuery)
 
 
 @console_ns.route("/apps/<uuid:app_id>/statistics/daily-messages")
@@ -54,7 +50,7 @@ class DailyMessageStatistic(Resource):
     def get(self, app_model):
         account, _ = current_account_with_tenant()
 
-        args = StatisticTimeRangeQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = StatisticTimeRangeQuery.model_validate(request.args.to_dict(flat=True))
 
         converted_created_at = convert_datetime_to_date("created_at")
         sql_query = f"""SELECT
@@ -111,7 +107,7 @@ class DailyConversationStatistic(Resource):
     def get(self, app_model):
         account, _ = current_account_with_tenant()
 
-        args = StatisticTimeRangeQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = StatisticTimeRangeQuery.model_validate(request.args.to_dict(flat=True))
 
         converted_created_at = convert_datetime_to_date("created_at")
         sql_query = f"""SELECT
@@ -167,7 +163,7 @@ class DailyTerminalsStatistic(Resource):
     def get(self, app_model):
         account, _ = current_account_with_tenant()
 
-        args = StatisticTimeRangeQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = StatisticTimeRangeQuery.model_validate(request.args.to_dict(flat=True))
 
         converted_created_at = convert_datetime_to_date("created_at")
         sql_query = f"""SELECT
@@ -224,7 +220,7 @@ class DailyTokenCostStatistic(Resource):
     def get(self, app_model):
         account, _ = current_account_with_tenant()
 
-        args = StatisticTimeRangeQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = StatisticTimeRangeQuery.model_validate(request.args.to_dict(flat=True))
 
         converted_created_at = convert_datetime_to_date("created_at")
         sql_query = f"""SELECT
@@ -284,7 +280,7 @@ class AverageSessionInteractionStatistic(Resource):
     def get(self, app_model):
         account, _ = current_account_with_tenant()
 
-        args = StatisticTimeRangeQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = StatisticTimeRangeQuery.model_validate(request.args.to_dict(flat=True))
 
         converted_created_at = convert_datetime_to_date("c.created_at")
         sql_query = f"""SELECT
@@ -360,7 +356,7 @@ class UserSatisfactionRateStatistic(Resource):
     def get(self, app_model):
         account, _ = current_account_with_tenant()
 
-        args = StatisticTimeRangeQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = StatisticTimeRangeQuery.model_validate(request.args.to_dict(flat=True))
 
         converted_created_at = convert_datetime_to_date("m.created_at")
         sql_query = f"""SELECT
@@ -426,7 +422,7 @@ class AverageResponseTimeStatistic(Resource):
     def get(self, app_model):
         account, _ = current_account_with_tenant()
 
-        args = StatisticTimeRangeQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = StatisticTimeRangeQuery.model_validate(request.args.to_dict(flat=True))
 
         converted_created_at = convert_datetime_to_date("created_at")
         sql_query = f"""SELECT
@@ -482,7 +478,7 @@ class TokensPerSecondStatistic(Resource):
     @account_initialization_required
     def get(self, app_model):
         account, _ = current_account_with_tenant()
-        args = StatisticTimeRangeQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = StatisticTimeRangeQuery.model_validate(request.args.to_dict(flat=True))
 
         converted_created_at = convert_datetime_to_date("created_at")
         sql_query = f"""SELECT
diff --git a/api/controllers/console/app/workflow.py b/api/controllers/console/app/workflow.py
index e18688f069..4f532b437c 100644
--- a/api/controllers/console/app/workflow.py
+++ b/api/controllers/console/app/workflow.py
@@ -60,7 +60,7 @@ logger = logging.getLogger(__name__)
 
 _file_access_controller = DatabaseFileAccessController()
 LISTENING_RETRY_IN = 2000
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
+
 RESTORE_SOURCE_WORKFLOW_MUST_BE_PUBLISHED_MESSAGE = "source workflow must be published"
 MAX_WORKFLOW_ONLINE_USERS_REQUEST_IDS = 1000
 WORKFLOW_ONLINE_USERS_REDIS_BATCH_SIZE = 50
@@ -912,7 +912,7 @@ class DefaultBlockConfigApi(Resource):
         """
         Get default block config
         """
-        args = DefaultBlockConfigQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = DefaultBlockConfigQuery.model_validate(request.args.to_dict(flat=True))
 
         filters = None
         if args.q:
@@ -1005,7 +1005,7 @@ class PublishedAllWorkflowApi(Resource):
         """
         current_user, _ = current_account_with_tenant()
 
-        args = WorkflowListQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = WorkflowListQuery.model_validate(request.args.to_dict(flat=True))
         page = args.page
         limit = args.limit
         user_id = args.user_id
diff --git a/api/controllers/console/app/workflow_app_log.py b/api/controllers/console/app/workflow_app_log.py
index 4b39590235..ddc900eb2d 100644
--- a/api/controllers/console/app/workflow_app_log.py
+++ b/api/controllers/console/app/workflow_app_log.py
@@ -185,7 +185,7 @@ class WorkflowAppLogApi(Resource):
         """
         Get workflow app logs
         """
-        args = WorkflowAppLogQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = WorkflowAppLogQuery.model_validate(request.args.to_dict(flat=True))
 
         # get paginate workflow app logs
         workflow_app_service = WorkflowAppService()
@@ -228,7 +228,7 @@ class WorkflowArchivedLogApi(Resource):
         """
         Get workflow archived logs
         """
-        args = WorkflowAppLogQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = WorkflowAppLogQuery.model_validate(request.args.to_dict(flat=True))
 
         workflow_app_service = WorkflowAppService()
         with sessionmaker(db.engine, expire_on_commit=False).begin() as session:
diff --git a/api/controllers/console/app/workflow_comment.py b/api/controllers/console/app/workflow_comment.py
index e7c3e982a6..c003be1303 100644
--- a/api/controllers/console/app/workflow_comment.py
+++ b/api/controllers/console/app/workflow_comment.py
@@ -23,7 +23,6 @@ from services.account_service import TenantService
 from services.workflow_comment_service import WorkflowCommentService
 
 logger = logging.getLogger(__name__)
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
 
 
 class WorkflowCommentCreatePayload(BaseModel):
@@ -52,13 +51,14 @@ class WorkflowCommentMentionUsersPayload(BaseModel):
     users: list[AccountWithRole]
 
 
-for model in (
+register_schema_models(
+    console_ns,
+    AccountWithRole,
+    WorkflowCommentMentionUsersPayload,
     WorkflowCommentCreatePayload,
     WorkflowCommentUpdatePayload,
     WorkflowCommentReplyPayload,
-):
-    console_ns.schema_model(model.__name__, model.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0))
-register_schema_models(console_ns, AccountWithRole, WorkflowCommentMentionUsersPayload)
+)
 
 workflow_comment_basic_model = console_ns.model("WorkflowCommentBasic", workflow_comment_basic_fields)
 workflow_comment_detail_model = console_ns.model("WorkflowCommentDetail", workflow_comment_detail_fields)
diff --git a/api/controllers/console/app/workflow_draft_variable.py b/api/controllers/console/app/workflow_draft_variable.py
index c688a69074..3c887c33dc 100644
--- a/api/controllers/console/app/workflow_draft_variable.py
+++ b/api/controllers/console/app/workflow_draft_variable.py
@@ -8,6 +8,7 @@ from flask_restx import Resource, fields, marshal, marshal_with
 from pydantic import BaseModel, Field
 from sqlalchemy.orm import sessionmaker
 
+from controllers.common.schema import register_schema_models
 from controllers.console import console_ns
 from controllers.console.app.error import (
     DraftWorkflowNotExist,
@@ -33,7 +34,6 @@ from services.workflow_service import WorkflowService
 
 logger = logging.getLogger(__name__)
 _file_access_controller = DatabaseFileAccessController()
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
 
 
 class WorkflowDraftVariableListQuery(BaseModel):
@@ -56,21 +56,12 @@ class EnvironmentVariableUpdatePayload(BaseModel):
     environment_variables: list[dict[str, Any]] = Field(..., description="Environment variables for the draft workflow")
 
 
-console_ns.schema_model(
-    WorkflowDraftVariableListQuery.__name__,
-    WorkflowDraftVariableListQuery.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0),
-)
-console_ns.schema_model(
-    WorkflowDraftVariableUpdatePayload.__name__,
-    WorkflowDraftVariableUpdatePayload.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0),
-)
-console_ns.schema_model(
-    ConversationVariableUpdatePayload.__name__,
-    ConversationVariableUpdatePayload.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0),
-)
-console_ns.schema_model(
-    EnvironmentVariableUpdatePayload.__name__,
-    EnvironmentVariableUpdatePayload.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0),
+register_schema_models(
+    console_ns,
+    WorkflowDraftVariableListQuery,
+    WorkflowDraftVariableUpdatePayload,
+    ConversationVariableUpdatePayload,
+    EnvironmentVariableUpdatePayload,
 )
 
 
@@ -260,7 +251,7 @@ class WorkflowVariableCollectionApi(Resource):
         """
         Get draft workflow
         """
-        args = WorkflowDraftVariableListQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = WorkflowDraftVariableListQuery.model_validate(request.args.to_dict(flat=True))
 
         # fetch draft workflow by app_model
         workflow_service = WorkflowService()
diff --git a/api/controllers/console/app/workflow_run.py b/api/controllers/console/app/workflow_run.py
index e42aae6090..97d2003209 100644
--- a/api/controllers/console/app/workflow_run.py
+++ b/api/controllers/console/app/workflow_run.py
@@ -154,7 +154,7 @@ class AdvancedChatAppWorkflowRunListApi(Resource):
         """
         Get advanced chat app workflow run list
         """
-        args_model = WorkflowRunListQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args_model = WorkflowRunListQuery.model_validate(request.args.to_dict(flat=True))
         args: WorkflowRunListArgs = {"limit": args_model.limit}
         if args_model.last_id is not None:
             args["last_id"] = args_model.last_id
@@ -250,7 +250,7 @@ class AdvancedChatAppWorkflowRunCountApi(Resource):
         """
         Get advanced chat workflow runs count statistics
         """
-        args_model = WorkflowRunCountQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args_model = WorkflowRunCountQuery.model_validate(request.args.to_dict(flat=True))
         args = args_model.model_dump(exclude_none=True)
 
         # Default to DEBUGGING if not specified
@@ -290,7 +290,7 @@ class WorkflowRunListApi(Resource):
         """
         Get workflow run list
         """
-        args_model = WorkflowRunListQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args_model = WorkflowRunListQuery.model_validate(request.args.to_dict(flat=True))
         args: WorkflowRunListArgs = {"limit": args_model.limit}
         if args_model.last_id is not None:
             args["last_id"] = args_model.last_id
@@ -331,7 +331,7 @@ class WorkflowRunCountApi(Resource):
         """
         Get workflow runs count statistics
         """
-        args_model = WorkflowRunCountQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args_model = WorkflowRunCountQuery.model_validate(request.args.to_dict(flat=True))
         args = args_model.model_dump(exclude_none=True)
 
         # Default to DEBUGGING for workflow if not specified (backward compatibility)
diff --git a/api/controllers/console/app/workflow_statistic.py b/api/controllers/console/app/workflow_statistic.py
index e48cf42762..ca899d8784 100644
--- a/api/controllers/console/app/workflow_statistic.py
+++ b/api/controllers/console/app/workflow_statistic.py
@@ -3,6 +3,7 @@ from flask_restx import Resource
 from pydantic import BaseModel, Field, field_validator
 from sqlalchemy.orm import sessionmaker
 
+from controllers.common.schema import register_schema_models
 from controllers.console import console_ns
 from controllers.console.app.wraps import get_app_model
 from controllers.console.wraps import account_initialization_required, setup_required
@@ -13,8 +14,6 @@ from models.enums import WorkflowRunTriggeredFrom
 from models.model import AppMode
 from repositories.factory import DifyAPIRepositoryFactory
 
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
-
 
 class WorkflowStatisticQuery(BaseModel):
     start: str | None = Field(default=None, description="Start date and time (YYYY-MM-DD HH:MM)")
@@ -28,10 +27,7 @@ class WorkflowStatisticQuery(BaseModel):
         return value
 
 
-console_ns.schema_model(
-    WorkflowStatisticQuery.__name__,
-    WorkflowStatisticQuery.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0),
-)
+register_schema_models(console_ns, WorkflowStatisticQuery)
 
 
 @console_ns.route("/apps/<uuid:app_id>/workflow/statistics/daily-conversations")
@@ -53,7 +49,7 @@ class WorkflowDailyRunsStatistic(Resource):
     def get(self, app_model):
         account, _ = current_account_with_tenant()
 
-        args = WorkflowStatisticQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = WorkflowStatisticQuery.model_validate(request.args.to_dict(flat=True))
 
         assert account.timezone is not None
 
@@ -93,7 +89,7 @@ class WorkflowDailyTerminalsStatistic(Resource):
     def get(self, app_model):
         account, _ = current_account_with_tenant()
 
-        args = WorkflowStatisticQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = WorkflowStatisticQuery.model_validate(request.args.to_dict(flat=True))
 
         assert account.timezone is not None
 
@@ -133,7 +129,7 @@ class WorkflowDailyTokenCostStatistic(Resource):
     def get(self, app_model):
         account, _ = current_account_with_tenant()
 
-        args = WorkflowStatisticQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = WorkflowStatisticQuery.model_validate(request.args.to_dict(flat=True))
 
         assert account.timezone is not None
 
@@ -173,7 +169,7 @@ class WorkflowAverageAppInteractionStatistic(Resource):
     def get(self, app_model):
         account, _ = current_account_with_tenant()
 
-        args = WorkflowStatisticQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = WorkflowStatisticQuery.model_validate(request.args.to_dict(flat=True))
 
         assert account.timezone is not None
 
diff --git a/api/controllers/console/app/workflow_trigger.py b/api/controllers/console/app/workflow_trigger.py
index a6715fa200..a80b4f5d0c 100644
--- a/api/controllers/console/app/workflow_trigger.py
+++ b/api/controllers/console/app/workflow_trigger.py
@@ -94,7 +94,7 @@ class WebhookTriggerApi(Resource):
     @console_ns.response(200, "Success", console_ns.models[WebhookTriggerResponse.__name__])
     def get(self, app_model: App):
         """Get webhook trigger for a node"""
-        args = Parser.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = Parser.model_validate(request.args.to_dict(flat=True))
 
         node_id = args.node_id
 
diff --git a/api/controllers/console/auth/activate.py b/api/controllers/console/auth/activate.py
index f7061f820f..0c05cf2fe3 100644
--- a/api/controllers/console/auth/activate.py
+++ b/api/controllers/console/auth/activate.py
@@ -63,7 +63,7 @@ class ActivateCheckApi(Resource):
         console_ns.models[ActivationCheckResponse.__name__],
     )
     def get(self):
-        args = ActivateCheckQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = ActivateCheckQuery.model_validate(request.args.to_dict(flat=True))
 
         workspaceId = args.workspace_id
         token = args.token
diff --git a/api/controllers/console/auth/data_source_bearer_auth.py b/api/controllers/console/auth/data_source_bearer_auth.py
index 905d0daef0..db0d36af6e 100644
--- a/api/controllers/console/auth/data_source_bearer_auth.py
+++ b/api/controllers/console/auth/data_source_bearer_auth.py
@@ -1,6 +1,7 @@
 from flask_restx import Resource
 from pydantic import BaseModel, Field
 
+from controllers.common.schema import register_schema_models
 from libs.login import current_account_with_tenant, login_required
 from services.auth.api_key_auth_service import ApiKeyAuthService
 
@@ -8,8 +9,6 @@ from .. import console_ns
 from ..auth.error import ApiKeyAuthFailedError
 from ..wraps import account_initialization_required, is_admin_or_owner_required, setup_required
 
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
-
 
 class ApiKeyAuthBindingPayload(BaseModel):
     category: str = Field(...)
@@ -17,10 +16,7 @@ class ApiKeyAuthBindingPayload(BaseModel):
     credentials: dict = Field(...)
 
 
-console_ns.schema_model(
-    ApiKeyAuthBindingPayload.__name__,
-    ApiKeyAuthBindingPayload.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0),
-)
+register_schema_models(console_ns, ApiKeyAuthBindingPayload)
 
 
 @console_ns.route("/api-key-auth/data-source")
diff --git a/api/controllers/console/auth/email_register.py b/api/controllers/console/auth/email_register.py
index 1fd781b4fc..f6b8aedf22 100644
--- a/api/controllers/console/auth/email_register.py
+++ b/api/controllers/console/auth/email_register.py
@@ -4,6 +4,7 @@ from pydantic import BaseModel, Field, field_validator
 
 from configs import dify_config
 from constants.languages import languages
+from controllers.common.schema import register_schema_models
 from controllers.console import console_ns
 from controllers.console.auth.error import (
     EmailAlreadyInUseError,
@@ -23,8 +24,6 @@ from services.errors.account import AccountNotFoundError, AccountRegisterError
 from ..error import AccountInFreezeError, EmailSendIpLimitError
 from ..wraps import email_password_login_enabled, email_register_enabled, setup_required
 
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
-
 
 class EmailRegisterSendPayload(BaseModel):
     email: EmailStr = Field(..., description="Email address")
@@ -48,8 +47,7 @@ class EmailRegisterResetPayload(BaseModel):
         return valid_password(value)
 
 
-for model in (EmailRegisterSendPayload, EmailRegisterValidityPayload, EmailRegisterResetPayload):
-    console_ns.schema_model(model.__name__, model.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0))
+register_schema_models(console_ns, EmailRegisterSendPayload, EmailRegisterValidityPayload, EmailRegisterResetPayload)
 
 
 @console_ns.route("/email-register/send-email")
diff --git a/api/controllers/console/auth/forgot_password.py b/api/controllers/console/auth/forgot_password.py
index ed390a5f89..c34dd1ac85 100644
--- a/api/controllers/console/auth/forgot_password.py
+++ b/api/controllers/console/auth/forgot_password.py
@@ -28,8 +28,6 @@ from services.entities.auth_entities import (
 )
 from services.feature_service import FeatureService
 
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
-
 
 class ForgotPasswordEmailResponse(BaseModel):
     result: str = Field(description="Operation result")
diff --git a/api/controllers/console/auth/login.py b/api/controllers/console/auth/login.py
index 8216b3d0da..19c98f3a1a 100644
--- a/api/controllers/console/auth/login.py
+++ b/api/controllers/console/auth/login.py
@@ -9,6 +9,7 @@ from werkzeug.exceptions import Unauthorized
 import services
 from configs import dify_config
 from constants.languages import get_valid_language
+from controllers.common.schema import register_schema_models
 from controllers.console import console_ns
 from controllers.console.auth.error import (
     AuthenticationFailedError,
@@ -50,7 +51,6 @@ from services.errors.account import AccountRegisterError
 from services.errors.workspace import WorkSpaceNotAllowedCreateError, WorkspacesLimitExceededError
 from services.feature_service import FeatureService
 
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
 logger = logging.getLogger(__name__)
 
 
@@ -71,13 +71,7 @@ class EmailCodeLoginPayload(BaseModel):
     language: str | None = Field(default=None)
 
 
-def reg(cls: type[BaseModel]):
-    console_ns.schema_model(cls.__name__, cls.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0))
-
-
-reg(LoginPayload)
-reg(EmailPayload)
-reg(EmailCodeLoginPayload)
+register_schema_models(console_ns, LoginPayload, EmailPayload, EmailCodeLoginPayload)
 
 
 @console_ns.route("/login")
diff --git a/api/controllers/console/datasets/rag_pipeline/datasource_content_preview.py b/api/controllers/console/datasets/rag_pipeline/datasource_content_preview.py
index 7caf5b52ed..a43caa8f56 100644
--- a/api/controllers/console/datasets/rag_pipeline/datasource_content_preview.py
+++ b/api/controllers/console/datasets/rag_pipeline/datasource_content_preview.py
@@ -4,6 +4,7 @@ from flask_restx import (  # type: ignore
 from pydantic import BaseModel
 from werkzeug.exceptions import Forbidden
 
+from controllers.common.schema import register_schema_models
 from controllers.console import console_ns
 from controllers.console.datasets.wraps import get_rag_pipeline
 from controllers.console.wraps import account_initialization_required, setup_required
@@ -12,8 +13,6 @@ from models import Account
 from models.dataset import Pipeline
 from services.rag_pipeline.rag_pipeline import RagPipelineService
 
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
-
 
 class Parser(BaseModel):
     inputs: dict
@@ -21,7 +20,7 @@ class Parser(BaseModel):
     credential_id: str | None = None
 
 
-console_ns.schema_model(Parser.__name__, Parser.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0))
+register_schema_models(console_ns, Parser)
 
 
 @console_ns.route("/rag/pipelines/<uuid:pipeline_id>/workflows/published/datasource/nodes/<string:node_id>/preview")
diff --git a/api/controllers/console/explore/recommended_app.py b/api/controllers/console/explore/recommended_app.py
index 572f9773a1..bd0e875666 100644
--- a/api/controllers/console/explore/recommended_app.py
+++ b/api/controllers/console/explore/recommended_app.py
@@ -80,7 +80,7 @@ class RecommendedAppListApi(Resource):
     @account_initialization_required
     def get(self):
         # language args
-        args = RecommendedAppsQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = RecommendedAppsQuery.model_validate(request.args.to_dict(flat=True))
         language = args.language
         if language and language in languages:
             language_prefix = language
diff --git a/api/controllers/console/explore/trial.py b/api/controllers/console/explore/trial.py
index 1456301a24..025c517d20 100644
--- a/api/controllers/console/explore/trial.py
+++ b/api/controllers/console/explore/trial.py
@@ -10,7 +10,7 @@ from werkzeug.exceptions import Forbidden, InternalServerError, NotFound
 import services
 from controllers.common.fields import Parameters as ParametersResponse
 from controllers.common.fields import Site as SiteResponse
-from controllers.common.schema import get_or_create_model
+from controllers.common.schema import get_or_create_model, register_schema_models
 from controllers.console import console_ns
 from controllers.console.app.error import (
     AppUnavailableError,
@@ -120,10 +120,6 @@ workflow_fields_copy["rag_pipeline_variables"] = fields.List(fields.Nested(pipel
 workflow_model = get_or_create_model("TrialWorkflow", workflow_fields_copy)
 
 
-# Pydantic models for request validation
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
-
-
 class WorkflowRunRequest(BaseModel):
     inputs: dict
     files: list | None = None
@@ -153,19 +149,7 @@ class CompletionRequest(BaseModel):
     retriever_from: str = "explore_app"
 
 
-# Register schemas for Swagger documentation
-console_ns.schema_model(
-    WorkflowRunRequest.__name__, WorkflowRunRequest.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0)
-)
-console_ns.schema_model(
-    ChatRequest.__name__, ChatRequest.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0)
-)
-console_ns.schema_model(
-    TextToSpeechRequest.__name__, TextToSpeechRequest.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0)
-)
-console_ns.schema_model(
-    CompletionRequest.__name__, CompletionRequest.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0)
-)
+register_schema_models(console_ns, WorkflowRunRequest, ChatRequest, TextToSpeechRequest, CompletionRequest)
 
 
 class TrialAppWorkflowRunApi(TrialAppResource):
diff --git a/api/controllers/console/extension.py b/api/controllers/console/extension.py
index 7a6356d052..9ffc18e4c2 100644
--- a/api/controllers/console/extension.py
+++ b/api/controllers/console/extension.py
@@ -89,7 +89,7 @@ class CodeBasedExtensionAPI(Resource):
     @login_required
     @account_initialization_required
     def get(self):
-        query = CodeBasedExtensionQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        query = CodeBasedExtensionQuery.model_validate(request.args.to_dict(flat=True))
 
         return CodeBasedExtensionResponse(
             module=query.module,
diff --git a/api/controllers/console/workspace/account.py b/api/controllers/console/workspace/account.py
index d69a59ecb7..68520e540b 100644
--- a/api/controllers/console/workspace/account.py
+++ b/api/controllers/console/workspace/account.py
@@ -52,8 +52,6 @@ from services.account_service import AccountService
 from services.billing_service import BillingService
 from services.errors.account import CurrentPasswordIncorrectError as ServiceCurrentPasswordIncorrectError
 
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
-
 
 class AccountInitPayload(BaseModel):
     interface_language: str
@@ -161,27 +159,26 @@ class CheckEmailUniquePayload(BaseModel):
     email: EmailStr
 
 
-def reg(cls: type[BaseModel]):
-    console_ns.schema_model(cls.__name__, cls.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0))
-
-
-reg(AccountInitPayload)
-reg(AccountNamePayload)
-reg(AccountAvatarPayload)
-reg(AccountAvatarQuery)
-reg(AccountInterfaceLanguagePayload)
-reg(AccountInterfaceThemePayload)
-reg(AccountTimezonePayload)
-reg(AccountPasswordPayload)
-reg(AccountDeletePayload)
-reg(AccountDeletionFeedbackPayload)
-reg(EducationActivatePayload)
-reg(EducationAutocompleteQuery)
-reg(ChangeEmailSendPayload)
-reg(ChangeEmailValidityPayload)
-reg(ChangeEmailResetPayload)
-reg(CheckEmailUniquePayload)
-register_schema_models(console_ns, AccountResponse)
+register_schema_models(
+    console_ns,
+    AccountResponse,
+    AccountInitPayload,
+    AccountNamePayload,
+    AccountAvatarPayload,
+    AccountAvatarQuery,
+    AccountInterfaceLanguagePayload,
+    AccountInterfaceThemePayload,
+    AccountTimezonePayload,
+    AccountPasswordPayload,
+    AccountDeletePayload,
+    AccountDeletionFeedbackPayload,
+    EducationActivatePayload,
+    EducationAutocompleteQuery,
+    ChangeEmailSendPayload,
+    ChangeEmailValidityPayload,
+    ChangeEmailResetPayload,
+    CheckEmailUniquePayload,
+)
 
 
 def _serialize_account(account) -> dict[str, Any]:
@@ -326,7 +323,7 @@ class AccountAvatarApi(Resource):
     @account_initialization_required
     def get(self):
         current_user, current_tenant_id = current_account_with_tenant()
-        args = AccountAvatarQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = AccountAvatarQuery.model_validate(request.args.to_dict(flat=True))
         avatar = args.avatar
 
         if avatar.startswith(("http://", "https://")):
diff --git a/api/controllers/console/workspace/endpoint.py b/api/controllers/console/workspace/endpoint.py
index d4be07382a..925f3e1197 100644
--- a/api/controllers/console/workspace/endpoint.py
+++ b/api/controllers/console/workspace/endpoint.py
@@ -20,8 +20,6 @@ from graphon.model_runtime.utils.encoders import jsonable_encoder
 from libs.login import current_account_with_tenant, login_required
 from services.plugin.endpoint_service import EndpointService
 
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
-
 
 class EndpointCreatePayload(BaseModel):
     plugin_unique_identifier: str
@@ -80,10 +78,6 @@ class EndpointDisableResponse(BaseModel):
     success: bool = Field(description="Operation success")
 
 
-def reg(cls: type[BaseModel]):
-    console_ns.schema_model(cls.__name__, cls.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0))
-
-
 register_schema_models(
     console_ns,
     EndpointCreatePayload,
@@ -215,7 +209,7 @@ class EndpointListApi(Resource):
     def get(self):
         user, tenant_id = current_account_with_tenant()
 
-        args = EndpointListQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = EndpointListQuery.model_validate(request.args.to_dict(flat=True))
 
         page = args.page
         page_size = args.page_size
@@ -248,7 +242,7 @@ class EndpointListForSinglePluginApi(Resource):
     def get(self):
         user, tenant_id = current_account_with_tenant()
 
-        args = EndpointListForPluginQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = EndpointListForPluginQuery.model_validate(request.args.to_dict(flat=True))
 
         page = args.page
         page_size = args.page_size
diff --git a/api/controllers/console/workspace/members.py b/api/controllers/console/workspace/members.py
index e3bf4c95b8..c2533c9872 100644
--- a/api/controllers/console/workspace/members.py
+++ b/api/controllers/console/workspace/members.py
@@ -33,8 +33,6 @@ from services.account_service import AccountService, RegisterService, TenantServ
 from services.errors.account import AccountAlreadyInTenantError
 from services.feature_service import FeatureService
 
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
-
 
 class MemberInvitePayload(BaseModel):
     emails: list[str] = Field(default_factory=list)
@@ -59,17 +57,17 @@ class OwnerTransferPayload(BaseModel):
     token: str
 
 
-def reg(cls: type[BaseModel]):
-    console_ns.schema_model(cls.__name__, cls.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0))
-
-
-reg(MemberInvitePayload)
-reg(MemberRoleUpdatePayload)
-reg(OwnerTransferEmailPayload)
-reg(OwnerTransferCheckPayload)
-reg(OwnerTransferPayload)
 register_enum_models(console_ns, TenantAccountRole)
-register_schema_models(console_ns, AccountWithRole, AccountWithRoleList)
+register_schema_models(
+    console_ns,
+    AccountWithRole,
+    AccountWithRoleList,
+    MemberInvitePayload,
+    MemberRoleUpdatePayload,
+    OwnerTransferEmailPayload,
+    OwnerTransferCheckPayload,
+    OwnerTransferPayload,
+)
 
 
 @console_ns.route("/workspaces/current/members")
diff --git a/api/controllers/console/workspace/model_providers.py b/api/controllers/console/workspace/model_providers.py
index 4b10561fdb..2f75218c0f 100644
--- a/api/controllers/console/workspace/model_providers.py
+++ b/api/controllers/console/workspace/model_providers.py
@@ -5,6 +5,7 @@ from flask import request, send_file
 from flask_restx import Resource
 from pydantic import BaseModel, Field, field_validator
 
+from controllers.common.schema import register_schema_models
 from controllers.console import console_ns
 from controllers.console.wraps import account_initialization_required, is_admin_or_owner_required, setup_required
 from graphon.model_runtime.entities.model_entities import ModelType
@@ -15,8 +16,6 @@ from libs.login import current_account_with_tenant, login_required
 from services.billing_service import BillingService
 from services.model_provider_service import ModelProviderService
 
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
-
 
 class ParserModelList(BaseModel):
     model_type: ModelType | None = None
@@ -75,18 +74,17 @@ class ParserPreferredProviderType(BaseModel):
     preferred_provider_type: Literal["system", "custom"]
 
 
-def reg(cls: type[BaseModel]):
-    console_ns.schema_model(cls.__name__, cls.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0))
-
-
-reg(ParserModelList)
-reg(ParserCredentialId)
-reg(ParserCredentialCreate)
-reg(ParserCredentialUpdate)
-reg(ParserCredentialDelete)
-reg(ParserCredentialSwitch)
-reg(ParserCredentialValidate)
-reg(ParserPreferredProviderType)
+register_schema_models(
+    console_ns,
+    ParserModelList,
+    ParserCredentialId,
+    ParserCredentialCreate,
+    ParserCredentialUpdate,
+    ParserCredentialDelete,
+    ParserCredentialSwitch,
+    ParserCredentialValidate,
+    ParserPreferredProviderType,
+)
 
 
 @console_ns.route("/workspaces/current/model-providers")
diff --git a/api/controllers/console/workspace/models.py b/api/controllers/console/workspace/models.py
index b2d07ff8f9..7f7d6379c3 100644
--- a/api/controllers/console/workspace/models.py
+++ b/api/controllers/console/workspace/models.py
@@ -17,7 +17,6 @@ from services.model_load_balancing_service import ModelLoadBalancingService
 from services.model_provider_service import ModelProviderService
 
 logger = logging.getLogger(__name__)
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
 
 
 class ParserGetDefault(BaseModel):
@@ -107,6 +106,12 @@ class ParserParameter(BaseModel):
     model: str
 
 
+class ParserSwitch(BaseModel):
+    model: str
+    model_type: ModelType
+    credential_id: str
+
+
 register_schema_models(
     console_ns,
     ParserGetDefault,
@@ -119,6 +124,7 @@ register_schema_models(
     ParserDeleteCredential,
     ParserParameter,
     Inner,
+    ParserSwitch,
 )
 
 register_enum_models(console_ns, ModelType)
@@ -133,7 +139,7 @@ class DefaultModelApi(Resource):
     def get(self):
         _, tenant_id = current_account_with_tenant()
 
-        args = ParserGetDefault.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = ParserGetDefault.model_validate(request.args.to_dict(flat=True))
 
         model_provider_service = ModelProviderService()
         default_model_entity = model_provider_service.get_default_model_of_model_type(
@@ -261,7 +267,7 @@ class ModelProviderModelCredentialApi(Resource):
     def get(self, provider: str):
         _, tenant_id = current_account_with_tenant()
 
-        args = ParserGetCredentials.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = ParserGetCredentials.model_validate(request.args.to_dict(flat=True))
 
         model_provider_service = ModelProviderService()
         current_credential = model_provider_service.get_model_credential(
@@ -387,17 +393,6 @@ class ModelProviderModelCredentialApi(Resource):
         return {"result": "success"}, 204
 
 
-class ParserSwitch(BaseModel):
-    model: str
-    model_type: ModelType
-    credential_id: str
-
-
-console_ns.schema_model(
-    ParserSwitch.__name__, ParserSwitch.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0)
-)
-
-
 @console_ns.route("/workspaces/current/model-providers/<path:provider>/models/credentials/switch")
 class ModelProviderModelCredentialSwitchApi(Resource):
     @console_ns.expect(console_ns.models[ParserSwitch.__name__])
@@ -468,9 +463,7 @@ class ParserValidate(BaseModel):
     credentials: dict[str, Any]
 
 
-console_ns.schema_model(
-    ParserValidate.__name__, ParserValidate.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0)
-)
+register_schema_models(console_ns, ParserSwitch, ParserValidate)
 
 
 @console_ns.route("/workspaces/current/model-providers/<path:provider>/models/credentials/validate")
@@ -515,7 +508,7 @@ class ModelProviderModelParameterRuleApi(Resource):
     @login_required
     @account_initialization_required
     def get(self, provider: str):
-        args = ParserParameter.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = ParserParameter.model_validate(request.args.to_dict(flat=True))
         _, tenant_id = current_account_with_tenant()
 
         model_provider_service = ModelProviderService()
diff --git a/api/controllers/console/workspace/plugin.py b/api/controllers/console/workspace/plugin.py
index b3e344ccea..93e7f3acab 100644
--- a/api/controllers/console/workspace/plugin.py
+++ b/api/controllers/console/workspace/plugin.py
@@ -211,7 +211,7 @@ class PluginListApi(Resource):
     @account_initialization_required
     def get(self):
         _, tenant_id = current_account_with_tenant()
-        args = ParserList.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = ParserList.model_validate(request.args.to_dict(flat=True))
         try:
             plugins_with_total = PluginService.list_with_total(tenant_id, args.page, args.page_size)
         except PluginDaemonClientSideError as e:
@@ -261,7 +261,7 @@ class PluginIconApi(Resource):
     @console_ns.expect(console_ns.models[ParserIcon.__name__])
     @setup_required
     def get(self):
-        args = ParserIcon.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = ParserIcon.model_validate(request.args.to_dict(flat=True))
 
         try:
             icon_bytes, mimetype = PluginService.get_asset(args.tenant_id, args.filename)
@@ -279,7 +279,7 @@ class PluginAssetApi(Resource):
     @login_required
     @account_initialization_required
     def get(self):
-        args = ParserAsset.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = ParserAsset.model_validate(request.args.to_dict(flat=True))
 
         _, tenant_id = current_account_with_tenant()
         try:
@@ -421,7 +421,7 @@ class PluginFetchMarketplacePkgApi(Resource):
     @plugin_permission_required(install_required=True)
     def get(self):
         _, tenant_id = current_account_with_tenant()
-        args = ParserPluginIdentifierQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = ParserPluginIdentifierQuery.model_validate(request.args.to_dict(flat=True))
 
         try:
             return jsonable_encoder(
@@ -446,7 +446,7 @@ class PluginFetchManifestApi(Resource):
     def get(self):
         _, tenant_id = current_account_with_tenant()
 
-        args = ParserPluginIdentifierQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = ParserPluginIdentifierQuery.model_validate(request.args.to_dict(flat=True))
 
         try:
             return jsonable_encoder(
@@ -466,7 +466,7 @@ class PluginFetchInstallTasksApi(Resource):
     def get(self):
         _, tenant_id = current_account_with_tenant()
 
-        args = ParserTasks.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = ParserTasks.model_validate(request.args.to_dict(flat=True))
 
         try:
             return jsonable_encoder({"tasks": PluginService.fetch_install_tasks(tenant_id, args.page, args.page_size)})
@@ -660,7 +660,7 @@ class PluginFetchDynamicSelectOptionsApi(Resource):
         current_user, tenant_id = current_account_with_tenant()
         user_id = current_user.id
 
-        args = ParserDynamicOptions.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = ParserDynamicOptions.model_validate(request.args.to_dict(flat=True))
 
         try:
             options = PluginParameterService.get_dynamic_select_options(
@@ -822,7 +822,7 @@ class PluginReadmeApi(Resource):
     @account_initialization_required
     def get(self):
         _, tenant_id = current_account_with_tenant()
-        args = ParserReadme.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = ParserReadme.model_validate(request.args.to_dict(flat=True))
         return jsonable_encoder(
             {"readme": PluginService.fetch_plugin_readme(tenant_id, args.plugin_unique_identifier, args.language)}
         )
diff --git a/api/controllers/console/workspace/workspace.py b/api/controllers/console/workspace/workspace.py
index 565099db61..a15d8b5918 100644
--- a/api/controllers/console/workspace/workspace.py
+++ b/api/controllers/console/workspace/workspace.py
@@ -16,6 +16,7 @@ from controllers.common.errors import (
     TooManyFilesError,
     UnsupportedFileTypeError,
 )
+from controllers.common.schema import register_schema_models
 from controllers.console import console_ns
 from controllers.console.admin import admin_required
 from controllers.console.error import AccountNotLinkTenantError
@@ -39,7 +40,6 @@ from services.file_service import FileService
 from services.workspace_service import WorkspaceService
 
 logger = logging.getLogger(__name__)
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
 
 
 class WorkspaceListQuery(BaseModel):
@@ -91,15 +91,14 @@ class TenantInfoResponse(ResponseModel):
         return value
 
 
-def reg(cls: type[BaseModel]):
-    console_ns.schema_model(cls.__name__, cls.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0))
-
-
-reg(WorkspaceListQuery)
-reg(SwitchWorkspacePayload)
-reg(WorkspaceCustomConfigPayload)
-reg(WorkspaceInfoPayload)
-reg(TenantInfoResponse)
+register_schema_models(
+    console_ns,
+    WorkspaceListQuery,
+    SwitchWorkspacePayload,
+    WorkspaceCustomConfigPayload,
+    WorkspaceInfoPayload,
+    TenantInfoResponse,
+)
 
 provider_fields = {
     "provider_name": fields.String,
diff --git a/api/controllers/files/image_preview.py b/api/controllers/files/image_preview.py
index a91e745f80..be7886e831 100644
--- a/api/controllers/files/image_preview.py
+++ b/api/controllers/files/image_preview.py
@@ -8,13 +8,12 @@ from werkzeug.exceptions import NotFound
 import services
 from controllers.common.errors import UnsupportedFileTypeError
 from controllers.common.file_response import enforce_download_for_html
+from controllers.common.schema import register_schema_models
 from controllers.files import files_ns
 from extensions.ext_database import db
 from services.account_service import TenantService
 from services.file_service import FileService
 
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
-
 
 class FileSignatureQuery(BaseModel):
     timestamp: str = Field(..., description="Unix timestamp used in the signature")
@@ -26,12 +25,7 @@ class FilePreviewQuery(FileSignatureQuery):
     as_attachment: bool = Field(default=False, description="Whether to download as attachment")
 
 
-files_ns.schema_model(
-    FileSignatureQuery.__name__, FileSignatureQuery.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0)
-)
-files_ns.schema_model(
-    FilePreviewQuery.__name__, FilePreviewQuery.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0)
-)
+register_schema_models(files_ns, FileSignatureQuery, FilePreviewQuery)
 
 
 @files_ns.route("/<uuid:file_id>/image-preview")
@@ -58,7 +52,7 @@ class ImagePreviewApi(Resource):
     def get(self, file_id):
         file_id = str(file_id)
 
-        args = FileSignatureQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = FileSignatureQuery.model_validate(request.args.to_dict(flat=True))
         timestamp = args.timestamp
         nonce = args.nonce
         sign = args.sign
@@ -100,7 +94,7 @@ class FilePreviewApi(Resource):
     def get(self, file_id):
         file_id = str(file_id)
 
-        args = FilePreviewQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = FilePreviewQuery.model_validate(request.args.to_dict(flat=True))
 
         try:
             generator, upload_file = FileService(db.engine).get_file_generator_by_file_id(
diff --git a/api/controllers/files/tool_files.py b/api/controllers/files/tool_files.py
index 2f1e2f28bd..8ae16ce7f4 100644
--- a/api/controllers/files/tool_files.py
+++ b/api/controllers/files/tool_files.py
@@ -7,12 +7,11 @@ from werkzeug.exceptions import Forbidden, NotFound
 
 from controllers.common.errors import UnsupportedFileTypeError
 from controllers.common.file_response import enforce_download_for_html
+from controllers.common.schema import register_schema_models
 from controllers.files import files_ns
 from core.tools.signature import verify_tool_file_signature
 from core.tools.tool_file_manager import ToolFileManager
 
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
-
 
 class ToolFileQuery(BaseModel):
     timestamp: str = Field(..., description="Unix timestamp")
@@ -21,9 +20,7 @@ class ToolFileQuery(BaseModel):
     as_attachment: bool = Field(default=False, description="Download as attachment")
 
 
-files_ns.schema_model(
-    ToolFileQuery.__name__, ToolFileQuery.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0)
-)
+register_schema_models(files_ns, ToolFileQuery)
 
 
 @files_ns.route("/tools/<uuid:file_id>.<string:extension>")
diff --git a/api/controllers/files/upload.py b/api/controllers/files/upload.py
index ed3278a28b..462e9ef58e 100644
--- a/api/controllers/files/upload.py
+++ b/api/controllers/files/upload.py
@@ -20,8 +20,6 @@ from ..console.wraps import setup_required
 from ..files import files_ns
 from ..inner_api.plugin.wraps import get_user
 
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
-
 
 class PluginUploadQuery(BaseModel):
     timestamp: str = Field(..., description="Unix timestamp for signature verification")
@@ -31,9 +29,8 @@ class PluginUploadQuery(BaseModel):
     user_id: str | None = Field(default=None, description="User identifier")
 
 
-files_ns.schema_model(
-    PluginUploadQuery.__name__, PluginUploadQuery.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0)
-)
+register_schema_models(files_ns, PluginUploadQuery)
+
 
 register_schema_models(files_ns, FileResponse)
 
@@ -69,7 +66,7 @@ class PluginUploadFileApi(Resource):
             FileTooLargeError: File exceeds size limit
             UnsupportedFileTypeError: File type not supported
         """
-        args = PluginUploadQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
+        args = PluginUploadQuery.model_validate(request.args.to_dict(flat=True))
 
         file = request.files.get("file")
         if file is None:
diff --git a/api/controllers/service_api/dataset/dataset.py b/api/controllers/service_api/dataset/dataset.py
index 3eb773fa7c..9af66f1960 100644
--- a/api/controllers/service_api/dataset/dataset.py
+++ b/api/controllers/service_api/dataset/dataset.py
@@ -6,7 +6,7 @@ from pydantic import BaseModel, Field, TypeAdapter, field_validator, model_valid
 from werkzeug.exceptions import Forbidden, NotFound
 
 import services
-from controllers.common.schema import register_schema_models
+from controllers.common.schema import register_enum_models, register_schema_models
 from controllers.console.wraps import edit_permission_required
 from controllers.service_api import service_api_ns
 from controllers.service_api.dataset.error import DatasetInUseError, DatasetNameDuplicateError, InvalidActionError
@@ -34,13 +34,7 @@ from services.tag_service import (
     UpdateTagPayload,
 )
 
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
-
-
-service_api_ns.schema_model(
-    DatasetPermissionEnum.__name__,
-    TypeAdapter(DatasetPermissionEnum).json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0),
-)
+register_enum_models(service_api_ns, DatasetPermissionEnum)
 
 
 class DatasetCreatePayload(BaseModel):
diff --git a/api/controllers/service_api/dataset/document.py b/api/controllers/service_api/dataset/document.py
index 0b09facf58..1cf757912f 100644
--- a/api/controllers/service_api/dataset/document.py
+++ b/api/controllers/service_api/dataset/document.py
@@ -77,9 +77,6 @@ class DocumentTextCreatePayload(BaseModel):
         return value
 
 
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
-
-
 class DocumentTextUpdate(BaseModel):
     name: str | None = None
     text: str | None = None

From 7b5c371b9d79e553f433a7d88c6fa51d2aa08425 Mon Sep 17 00:00:00 2001
From: Asuka Minato <i@asukaminato.eu.org>
Date: Sun, 10 May 2026 15:04:42 +0900
Subject: [PATCH 09/13] chore: api para type (#35985)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 api/controllers/console/admin.py              |  9 ++-
 api/controllers/console/app/annotation.py     | 75 ++++++++-----------
 api/controllers/console/app/app.py            |  9 ++-
 api/controllers/console/app/ops_trace.py      | 17 +++--
 .../console/explore/recommended_app.py        |  6 +-
 api/controllers/console/files.py              |  2 +-
 api/controllers/console/workspace/plugin.py   |  2 +-
 .../console/workspace/workspace.py            |  2 +-
 api/controllers/files/upload.py               |  2 +-
 api/controllers/service_api/app/file.py       |  2 +-
 .../service_api/dataset/document.py           |  4 +-
 .../rag_pipeline/rag_pipeline_workflow.py     |  2 +-
 api/controllers/web/files.py                  |  2 +-
 .../prompt_template/manager.py                |  2 +-
 api/services/annotation_service.py            |  2 +-
 api/services/audio_service.py                 |  2 +-
 .../trigger_subscription_builder_service.py   |  8 +-
 api/services/trigger/webhook_service.py       |  2 +-
 .../services/test_webhook_service.py          |  4 +-
 .../controllers/files/test_upload.py          |  4 +-
 .../test_prompt_template_manager.py           | 15 ++--
 .../unit_tests/services/test_audio_service.py | 53 ++++++++-----
 .../services/test_webhook_service.py          |  8 +-
 23 files changed, 120 insertions(+), 114 deletions(-)

diff --git a/api/controllers/console/admin.py b/api/controllers/console/admin.py
index bb2f477e3d..ae2b1007dd 100644
--- a/api/controllers/console/admin.py
+++ b/api/controllers/console/admin.py
@@ -3,6 +3,7 @@ import io
 from collections.abc import Callable
 from functools import wraps
 from typing import cast
+from uuid import UUID
 
 from flask import request
 from flask_restx import Resource
@@ -181,7 +182,7 @@ class InsertExploreAppApi(Resource):
     @console_ns.response(204, "App removed successfully")
     @only_edition_cloud
     @admin_required
-    def delete(self, app_id):
+    def delete(self, app_id: UUID):
         with session_factory.create_session() as session:
             recommended_app = session.execute(
                 select(RecommendedApp).where(RecommendedApp.app_id == str(app_id))
@@ -394,11 +395,11 @@ class BatchAddNotificationAccountsApi(Resource):
             raise BadRequest("Invalid file type. Only CSV (.csv) and TXT (.txt) files are allowed.")
 
         try:
-            content = file.read().decode("utf-8")
+            content = file.stream.read().decode("utf-8")
         except UnicodeDecodeError:
             try:
-                file.seek(0)
-                content = file.read().decode("gbk")
+                file.stream.seek(0)
+                content = file.stream.read().decode("gbk")
             except UnicodeDecodeError:
                 raise BadRequest("Unable to decode the file. Please use UTF-8 or GBK encoding.")
 
diff --git a/api/controllers/console/app/annotation.py b/api/controllers/console/app/annotation.py
index 5970e55285..cfeaec4af9 100644
--- a/api/controllers/console/app/annotation.py
+++ b/api/controllers/console/app/annotation.py
@@ -1,4 +1,5 @@
 from typing import Any, Literal
+from uuid import UUID
 
 from flask import abort, make_response, request
 from flask_restx import Resource
@@ -115,8 +116,7 @@ class AnnotationReplyActionApi(Resource):
     @account_initialization_required
     @cloud_edition_billing_resource_check("annotation")
     @edit_permission_required
-    def post(self, app_id, action: Literal["enable", "disable"]):
-        app_id = str(app_id)
+    def post(self, app_id: UUID, action: Literal["enable", "disable"]):
         args = AnnotationReplyPayload.model_validate(console_ns.payload)
         match action:
             case "enable":
@@ -125,9 +125,9 @@ class AnnotationReplyActionApi(Resource):
                     "embedding_provider_name": args.embedding_provider_name,
                     "embedding_model_name": args.embedding_model_name,
                 }
-                result = AppAnnotationService.enable_app_annotation(enable_args, app_id)
+                result = AppAnnotationService.enable_app_annotation(enable_args, str(app_id))
             case "disable":
-                result = AppAnnotationService.disable_app_annotation(app_id)
+                result = AppAnnotationService.disable_app_annotation(str(app_id))
         return result, 200
 
 
@@ -142,9 +142,8 @@ class AppAnnotationSettingDetailApi(Resource):
     @login_required
     @account_initialization_required
     @edit_permission_required
-    def get(self, app_id):
-        app_id = str(app_id)
-        result = AppAnnotationService.get_app_annotation_setting_by_app_id(app_id)
+    def get(self, app_id: UUID):
+        result = AppAnnotationService.get_app_annotation_setting_by_app_id(str(app_id))
         return result, 200
 
 
@@ -160,14 +159,13 @@ class AppAnnotationSettingUpdateApi(Resource):
     @login_required
     @account_initialization_required
     @edit_permission_required
-    def post(self, app_id, annotation_setting_id):
-        app_id = str(app_id)
+    def post(self, app_id: UUID, annotation_setting_id):
         annotation_setting_id = str(annotation_setting_id)
 
         args = AnnotationSettingUpdatePayload.model_validate(console_ns.payload)
 
         setting_args: UpdateAnnotationSettingArgs = {"score_threshold": args.score_threshold}
-        result = AppAnnotationService.update_app_annotation_setting(app_id, annotation_setting_id, setting_args)
+        result = AppAnnotationService.update_app_annotation_setting(str(app_id), annotation_setting_id, setting_args)
         return result, 200
 
 
@@ -183,7 +181,7 @@ class AnnotationReplyActionStatusApi(Resource):
     @account_initialization_required
     @cloud_edition_billing_resource_check("annotation")
     @edit_permission_required
-    def get(self, app_id, job_id, action):
+    def get(self, app_id: UUID, job_id, action):
         job_id = str(job_id)
         app_annotation_job_key = f"{action}_app_annotation_job_{str(job_id)}"
         cache_result = redis_client.get(app_annotation_job_key)
@@ -211,14 +209,13 @@ class AnnotationApi(Resource):
     @login_required
     @account_initialization_required
     @edit_permission_required
-    def get(self, app_id):
+    def get(self, app_id: UUID):
         args = AnnotationListQuery.model_validate(request.args.to_dict(flat=True))
         page = args.page
         limit = args.limit
         keyword = args.keyword
 
-        app_id = str(app_id)
-        annotation_list, total = AppAnnotationService.get_annotation_list_by_app_id(app_id, page, limit, keyword)
+        annotation_list, total = AppAnnotationService.get_annotation_list_by_app_id(str(app_id), page, limit, keyword)
         annotation_models = TypeAdapter(list[Annotation]).validate_python(annotation_list, from_attributes=True)
         response = AnnotationList(
             data=annotation_models,
@@ -240,8 +237,7 @@ class AnnotationApi(Resource):
     @account_initialization_required
     @cloud_edition_billing_resource_check("annotation")
     @edit_permission_required
-    def post(self, app_id):
-        app_id = str(app_id)
+    def post(self, app_id: UUID):
         args = CreateAnnotationPayload.model_validate(console_ns.payload)
         upsert_args: UpsertAnnotationArgs = {}
         if args.answer is not None:
@@ -252,15 +248,14 @@ class AnnotationApi(Resource):
             upsert_args["message_id"] = args.message_id
         if args.question is not None:
             upsert_args["question"] = args.question
-        annotation = AppAnnotationService.up_insert_app_annotation_from_message(upsert_args, app_id)
+        annotation = AppAnnotationService.up_insert_app_annotation_from_message(upsert_args, str(app_id))
         return Annotation.model_validate(annotation, from_attributes=True).model_dump(mode="json")
 
     @setup_required
     @login_required
     @account_initialization_required
     @edit_permission_required
-    def delete(self, app_id):
-        app_id = str(app_id)
+    def delete(self, app_id: UUID):
 
         # Use request.args.getlist to get annotation_ids array directly
         annotation_ids = request.args.getlist("annotation_id")
@@ -274,11 +269,11 @@ class AnnotationApi(Resource):
                     "message": "annotation_ids are required if the parameter is provided.",
                 }, 400
 
-            result = AppAnnotationService.delete_app_annotations_in_batch(app_id, annotation_ids)
+            result = AppAnnotationService.delete_app_annotations_in_batch(str(app_id), annotation_ids)
             return result, 204
         # If no annotation_ids are provided, handle clearing all annotations
         else:
-            AppAnnotationService.clear_all_annotations(app_id)
+            AppAnnotationService.clear_all_annotations(str(app_id))
             return {"result": "success"}, 204
 
 
@@ -297,9 +292,8 @@ class AnnotationExportApi(Resource):
     @login_required
     @account_initialization_required
     @edit_permission_required
-    def get(self, app_id):
-        app_id = str(app_id)
-        annotation_list = AppAnnotationService.export_annotation_list_by_app_id(app_id)
+    def get(self, app_id: UUID):
+        annotation_list = AppAnnotationService.export_annotation_list_by_app_id(str(app_id))
         annotation_models = TypeAdapter(list[Annotation]).validate_python(annotation_list, from_attributes=True)
         response_data = AnnotationExportList(data=annotation_models).model_dump(mode="json")
 
@@ -325,26 +319,22 @@ class AnnotationUpdateDeleteApi(Resource):
     @account_initialization_required
     @cloud_edition_billing_resource_check("annotation")
     @edit_permission_required
-    def post(self, app_id, annotation_id):
-        app_id = str(app_id)
-        annotation_id = str(annotation_id)
+    def post(self, app_id: UUID, annotation_id: UUID):
         args = UpdateAnnotationPayload.model_validate(console_ns.payload)
         update_args: UpdateAnnotationArgs = {}
         if args.answer is not None:
             update_args["answer"] = args.answer
         if args.question is not None:
             update_args["question"] = args.question
-        annotation = AppAnnotationService.update_app_annotation_directly(update_args, app_id, annotation_id)
+        annotation = AppAnnotationService.update_app_annotation_directly(update_args, str(app_id), str(annotation_id))
         return Annotation.model_validate(annotation, from_attributes=True).model_dump(mode="json")
 
     @setup_required
     @login_required
     @account_initialization_required
     @edit_permission_required
-    def delete(self, app_id, annotation_id):
-        app_id = str(app_id)
-        annotation_id = str(annotation_id)
-        AppAnnotationService.delete_app_annotation(app_id, annotation_id)
+    def delete(self, app_id: UUID, annotation_id: UUID):
+        AppAnnotationService.delete_app_annotation(str(app_id), str(annotation_id))
         return {"result": "success"}, 204
 
 
@@ -365,11 +355,9 @@ class AnnotationBatchImportApi(Resource):
     @annotation_import_rate_limit
     @annotation_import_concurrency_limit
     @edit_permission_required
-    def post(self, app_id):
+    def post(self, app_id: UUID):
         from configs import dify_config
 
-        app_id = str(app_id)
-
         # check file
         if "file" not in request.files:
             raise NoFileUploadedError()
@@ -385,9 +373,9 @@ class AnnotationBatchImportApi(Resource):
             raise ValueError("Invalid file type. Only CSV files are allowed")
 
         # Check file size before processing
-        file.seek(0, 2)  # Seek to end of file
-        file_size = file.tell()
-        file.seek(0)  # Reset to beginning
+        file.stream.seek(0, 2)  # Seek to end of file
+        file_size = file.stream.tell()
+        file.stream.seek(0)  # Reset to beginning
 
         max_size_bytes = dify_config.ANNOTATION_IMPORT_FILE_SIZE_LIMIT * 1024 * 1024
         if file_size > max_size_bytes:
@@ -400,7 +388,7 @@ class AnnotationBatchImportApi(Resource):
         if file_size == 0:
             raise ValueError("The uploaded file is empty")
 
-        return AppAnnotationService.batch_import_app_annotations(app_id, file)
+        return AppAnnotationService.batch_import_app_annotations(str(app_id), file)
 
 
 @console_ns.route("/apps/<uuid:app_id>/annotations/batch-import-status/<uuid:job_id>")
@@ -415,8 +403,7 @@ class AnnotationBatchImportStatusApi(Resource):
     @account_initialization_required
     @cloud_edition_billing_resource_check("annotation")
     @edit_permission_required
-    def get(self, app_id, job_id):
-        job_id = str(job_id)
+    def get(self, app_id: UUID, job_id: UUID):
         indexing_cache_key = f"app_annotation_batch_import_{str(job_id)}"
         cache_result = redis_client.get(indexing_cache_key)
         if cache_result is None:
@@ -450,13 +437,11 @@ class AnnotationHitHistoryListApi(Resource):
     @login_required
     @account_initialization_required
     @edit_permission_required
-    def get(self, app_id, annotation_id):
+    def get(self, app_id: UUID, annotation_id: UUID):
         page = request.args.get("page", default=1, type=int)
         limit = request.args.get("limit", default=20, type=int)
-        app_id = str(app_id)
-        annotation_id = str(annotation_id)
         annotation_hit_history_list, total = AppAnnotationService.get_annotation_hit_histories(
-            app_id, annotation_id, page, limit
+            str(app_id), str(annotation_id), page, limit
         )
         history_models = TypeAdapter(list[AnnotationHitHistory]).validate_python(
             annotation_hit_history_list, from_attributes=True
diff --git a/api/controllers/console/app/app.py b/api/controllers/console/app/app.py
index 5023d46893..a8ab5bec48 100644
--- a/api/controllers/console/app/app.py
+++ b/api/controllers/console/app/app.py
@@ -3,6 +3,7 @@ import re
 import uuid
 from datetime import datetime
 from typing import Any, Literal
+from uuid import UUID
 
 from flask import request
 from flask_restx import Resource
@@ -840,10 +841,10 @@ class AppTraceApi(Resource):
     @setup_required
     @login_required
     @account_initialization_required
-    def get(self, app_id):
+    def get(self, app_id: UUID):
         """Get app trace"""
         with session_factory.create_session() as session:
-            app_trace_config = OpsTraceManager.get_app_tracing_config(app_id, session)
+            app_trace_config = OpsTraceManager.get_app_tracing_config(str(app_id), session)
 
         return app_trace_config
 
@@ -857,12 +858,12 @@ class AppTraceApi(Resource):
     @login_required
     @account_initialization_required
     @edit_permission_required
-    def post(self, app_id):
+    def post(self, app_id: UUID):
         # add app trace
         args = AppTracePayload.model_validate(console_ns.payload)
 
         OpsTraceManager.update_app_tracing_config(
-            app_id=app_id,
+            app_id=str(app_id),
             enabled=args.enabled,
             tracing_provider=args.tracing_provider,
         )
diff --git a/api/controllers/console/app/ops_trace.py b/api/controllers/console/app/ops_trace.py
index ee2fc39f86..9227d00a21 100644
--- a/api/controllers/console/app/ops_trace.py
+++ b/api/controllers/console/app/ops_trace.py
@@ -1,4 +1,5 @@
 from typing import Any
+from uuid import UUID
 
 from flask import request
 from flask_restx import Resource, fields
@@ -42,11 +43,11 @@ class TraceAppConfigApi(Resource):
     @setup_required
     @login_required
     @account_initialization_required
-    def get(self, app_id):
+    def get(self, app_id: UUID):
         args = TraceProviderQuery.model_validate(request.args.to_dict(flat=True))
 
         try:
-            trace_config = OpsService.get_tracing_app_config(app_id=app_id, tracing_provider=args.tracing_provider)
+            trace_config = OpsService.get_tracing_app_config(app_id=str(app_id), tracing_provider=args.tracing_provider)
             if not trace_config:
                 return {"has_not_configured": True}
             return trace_config
@@ -64,13 +65,13 @@ class TraceAppConfigApi(Resource):
     @setup_required
     @login_required
     @account_initialization_required
-    def post(self, app_id):
+    def post(self, app_id: UUID):
         """Create a new trace app configuration"""
         args = TraceConfigPayload.model_validate(console_ns.payload)
 
         try:
             result = OpsService.create_tracing_app_config(
-                app_id=app_id, tracing_provider=args.tracing_provider, tracing_config=args.tracing_config
+                app_id=str(app_id), tracing_provider=args.tracing_provider, tracing_config=args.tracing_config
             )
             if not result:
                 raise TracingConfigIsExist()
@@ -89,13 +90,13 @@ class TraceAppConfigApi(Resource):
     @setup_required
     @login_required
     @account_initialization_required
-    def patch(self, app_id):
+    def patch(self, app_id: UUID):
         """Update an existing trace app configuration"""
         args = TraceConfigPayload.model_validate(console_ns.payload)
 
         try:
             result = OpsService.update_tracing_app_config(
-                app_id=app_id, tracing_provider=args.tracing_provider, tracing_config=args.tracing_config
+                app_id=str(app_id), tracing_provider=args.tracing_provider, tracing_config=args.tracing_config
             )
             if not result:
                 raise TracingConfigNotExist()
@@ -112,12 +113,12 @@ class TraceAppConfigApi(Resource):
     @setup_required
     @login_required
     @account_initialization_required
-    def delete(self, app_id):
+    def delete(self, app_id: UUID):
         """Delete an existing trace app configuration"""
         args = TraceProviderQuery.model_validate(request.args.to_dict(flat=True))
 
         try:
-            result = OpsService.delete_tracing_app_config(app_id=app_id, tracing_provider=args.tracing_provider)
+            result = OpsService.delete_tracing_app_config(app_id=str(app_id), tracing_provider=args.tracing_provider)
             if not result:
                 raise TracingConfigNotExist()
             return {"result": "success"}, 204
diff --git a/api/controllers/console/explore/recommended_app.py b/api/controllers/console/explore/recommended_app.py
index bd0e875666..5821b91489 100644
--- a/api/controllers/console/explore/recommended_app.py
+++ b/api/controllers/console/explore/recommended_app.py
@@ -1,4 +1,5 @@
 from typing import Any
+from uuid import UUID
 
 from flask import request
 from flask_restx import Resource
@@ -99,6 +100,5 @@ class RecommendedAppListApi(Resource):
 class RecommendedAppApi(Resource):
     @login_required
     @account_initialization_required
-    def get(self, app_id):
-        app_id = str(app_id)
-        return RecommendedAppService.get_recommend_app_detail(app_id)
+    def get(self, app_id: UUID):
+        return RecommendedAppService.get_recommend_app_detail(str(app_id))
diff --git a/api/controllers/console/files.py b/api/controllers/console/files.py
index 109a3cd0d3..9fa5b0f5c1 100644
--- a/api/controllers/console/files.py
+++ b/api/controllers/console/files.py
@@ -82,7 +82,7 @@ class FileApi(Resource):
         try:
             upload_file = FileService(db.engine).upload_file(
                 filename=file.filename,
-                content=file.read(),
+                content=file.stream.read(),
                 mimetype=file.mimetype,
                 user=current_user,
                 source=source,
diff --git a/api/controllers/console/workspace/plugin.py b/api/controllers/console/workspace/plugin.py
index 93e7f3acab..a6d4a60beb 100644
--- a/api/controllers/console/workspace/plugin.py
+++ b/api/controllers/console/workspace/plugin.py
@@ -177,7 +177,7 @@ def _read_upload_content(file: FileStorage, max_size: int) -> bytes:
     FileStorage.content_length is not reliable for multipart test uploads and may be zero even when
     content exists, so the controllers validate against the loaded bytes instead.
     """
-    content = file.read()
+    content = file.stream.read()
     if len(content) > max_size:
         raise ValueError("File size exceeds the maximum allowed size")
 
diff --git a/api/controllers/console/workspace/workspace.py b/api/controllers/console/workspace/workspace.py
index a15d8b5918..84890f0443 100644
--- a/api/controllers/console/workspace/workspace.py
+++ b/api/controllers/console/workspace/workspace.py
@@ -321,7 +321,7 @@ class WebappLogoWorkspaceApi(Resource):
         try:
             upload_file = FileService(db.engine).upload_file(
                 filename=file.filename,
-                content=file.read(),
+                content=file.stream.read(),
                 mimetype=file.mimetype,
                 user=current_user,
             )
diff --git a/api/controllers/files/upload.py b/api/controllers/files/upload.py
index 462e9ef58e..7d588b95dd 100644
--- a/api/controllers/files/upload.py
+++ b/api/controllers/files/upload.py
@@ -100,7 +100,7 @@ class PluginUploadFileApi(Resource):
             tool_file = ToolFileManager().create_file_by_raw(
                 user_id=user.id,
                 tenant_id=tenant_id,
-                file_binary=file.read(),
+                file_binary=file.stream.read(),
                 mimetype=mimetype,
                 filename=filename,
                 conversation_id=None,
diff --git a/api/controllers/service_api/app/file.py b/api/controllers/service_api/app/file.py
index 6f6dadf768..687d34076d 100644
--- a/api/controllers/service_api/app/file.py
+++ b/api/controllers/service_api/app/file.py
@@ -58,7 +58,7 @@ class FileApi(Resource):
         try:
             upload_file = FileService(db.engine).upload_file(
                 filename=file.filename,
-                content=file.read(),
+                content=file.stream.read(),
                 mimetype=file.mimetype,
                 user=end_user,
             )
diff --git a/api/controllers/service_api/dataset/document.py b/api/controllers/service_api/dataset/document.py
index 1cf757912f..cb48fe6715 100644
--- a/api/controllers/service_api/dataset/document.py
+++ b/api/controllers/service_api/dataset/document.py
@@ -432,7 +432,7 @@ class DocumentAddByFileApi(DatasetApiResource):
             raise ValueError("current_user is required")
         upload_file = FileService(db.engine).upload_file(
             filename=file.filename,
-            content=file.read(),
+            content=file.stream.read(),
             mimetype=file.mimetype,
             user=current_user,
             source="datasets",
@@ -506,7 +506,7 @@ def _update_document_by_file(tenant_id: str, dataset_id: UUID, document_id: UUID
         try:
             upload_file = FileService(db.engine).upload_file(
                 filename=file.filename,
-                content=file.read(),
+                content=file.stream.read(),
                 mimetype=file.mimetype,
                 user=current_user,
                 source="datasets",
diff --git a/api/controllers/service_api/dataset/rag_pipeline/rag_pipeline_workflow.py b/api/controllers/service_api/dataset/rag_pipeline/rag_pipeline_workflow.py
index 2dc98bfbf7..8bc43bccd5 100644
--- a/api/controllers/service_api/dataset/rag_pipeline/rag_pipeline_workflow.py
+++ b/api/controllers/service_api/dataset/rag_pipeline/rag_pipeline_workflow.py
@@ -241,7 +241,7 @@ class KnowledgebasePipelineFileUploadApi(DatasetApiResource):
         try:
             upload_file = FileService(db.engine).upload_file(
                 filename=file.filename,
-                content=file.read(),
+                content=file.stream.read(),
                 mimetype=file.mimetype,
                 user=current_user,
             )
diff --git a/api/controllers/web/files.py b/api/controllers/web/files.py
index 0036c90800..6128490104 100644
--- a/api/controllers/web/files.py
+++ b/api/controllers/web/files.py
@@ -73,7 +73,7 @@ class FileApi(WebApiResource):
         try:
             upload_file = FileService(db.engine).upload_file(
                 filename=file.filename,
-                content=file.read(),
+                content=file.stream.read(),
                 mimetype=file.mimetype,
                 user=end_user,
                 source="datasets" if source == "datasets" else None,
diff --git a/api/core/app/app_config/easy_ui_based_app/prompt_template/manager.py b/api/core/app/app_config/easy_ui_based_app/prompt_template/manager.py
index 4c07445df3..f4bbbe5d8b 100644
--- a/api/core/app/app_config/easy_ui_based_app/prompt_template/manager.py
+++ b/api/core/app/app_config/easy_ui_based_app/prompt_template/manager.py
@@ -75,7 +75,7 @@ class PromptTemplateConfigManager:
         if not config.get("prompt_type"):
             config["prompt_type"] = PromptTemplateEntity.PromptType.SIMPLE
 
-        prompt_type_vals = [typ.value for typ in PromptTemplateEntity.PromptType]
+        prompt_type_vals = list(PromptTemplateEntity.PromptType)
         if config["prompt_type"] not in prompt_type_vals:
             raise ValueError(f"prompt_type must be in {prompt_type_vals}")
 
diff --git a/api/services/annotation_service.py b/api/services/annotation_service.py
index 0229a1f43a..aa6b8ffc6e 100644
--- a/api/services/annotation_service.py
+++ b/api/services/annotation_service.py
@@ -425,7 +425,7 @@ class AppAnnotationService:
         return {"deleted_count": deleted_count}
 
     @classmethod
-    def batch_import_app_annotations(cls, app_id, file: FileStorage):
+    def batch_import_app_annotations(cls, app_id: str, file: FileStorage):
         """
         Batch import annotations from CSV file with enhanced security checks.
 
diff --git a/api/services/audio_service.py b/api/services/audio_service.py
index 60948e652b..c80b2f43fd 100644
--- a/api/services/audio_service.py
+++ b/api/services/audio_service.py
@@ -54,7 +54,7 @@ class AudioService:
         if extension not in [f"audio/{ext}" for ext in AUDIO_EXTENSIONS]:
             raise UnsupportedAudioTypeServiceError()
 
-        file_content = file.read()
+        file_content = file.stream.read()
         file_size = len(file_content)
 
         if file_size > FILE_SIZE_LIMIT:
diff --git a/api/services/trigger/trigger_subscription_builder_service.py b/api/services/trigger/trigger_subscription_builder_service.py
index 889717df72..cff735b39d 100644
--- a/api/services/trigger/trigger_subscription_builder_service.py
+++ b/api/services/trigger/trigger_subscription_builder_service.py
@@ -121,9 +121,7 @@ class TriggerSubscriptionBuilderService:
             if not subscription_builder.name:
                 raise ValueError("Subscription builder name is required")
 
-            credential_type = CredentialType.of(
-                subscription_builder.credential_type or CredentialType.UNAUTHORIZED.value
-            )
+            credential_type = CredentialType.of(subscription_builder.credential_type or CredentialType.UNAUTHORIZED)
             if credential_type == CredentialType.UNAUTHORIZED:
                 # manually create
                 TriggerProviderService.add_trigger_subscription(
@@ -321,9 +319,7 @@ class TriggerSubscriptionBuilderService:
                 raise ValueError("Subscription builder name is required")
 
             # Build
-            credential_type = CredentialType.of(
-                subscription_builder.credential_type or CredentialType.UNAUTHORIZED.value
-            )
+            credential_type = CredentialType.of(subscription_builder.credential_type or CredentialType.UNAUTHORIZED)
             if credential_type == CredentialType.UNAUTHORIZED:
                 # manually create
                 TriggerProviderService.add_trigger_subscription(
diff --git a/api/services/trigger/webhook_service.py b/api/services/trigger/webhook_service.py
index 5d99900a04..592f678421 100644
--- a/api/services/trigger/webhook_service.py
+++ b/api/services/trigger/webhook_service.py
@@ -402,7 +402,7 @@ class WebhookService:
         for name, file in files.items():
             if file and file.filename:
                 try:
-                    file_content = file.read()
+                    file_content = file.stream.read()
                     mimetype = file.content_type or mimetypes.guess_type(file.filename)[0] or "application/octet-stream"
                     file_obj = cls._create_file_from_binary(file_content, mimetype, webhook_trigger)
                     processed_files[name] = file_obj.to_dict()
diff --git a/api/tests/test_containers_integration_tests/services/test_webhook_service.py b/api/tests/test_containers_integration_tests/services/test_webhook_service.py
index 6d5c7380b7..52b1229302 100644
--- a/api/tests/test_containers_integration_tests/services/test_webhook_service.py
+++ b/api/tests/test_containers_integration_tests/services/test_webhook_service.py
@@ -543,8 +543,8 @@ class TestWebhookService:
             "bad_file": MagicMock(filename="test.bad", content_type="text/plain"),
         }
 
-        files["good_file"].read.return_value = b"content"
-        files["bad_file"].read.side_effect = Exception("Read error")
+        files["good_file"].stream.read.return_value = b"content"
+        files["bad_file"].stream.read.side_effect = Exception("Read error")
 
         webhook_trigger = MagicMock()
         webhook_trigger.tenant_id = "test_tenant"
diff --git a/api/tests/unit_tests/controllers/files/test_upload.py b/api/tests/unit_tests/controllers/files/test_upload.py
index e8f3cd4b66..ff6ba0e9a1 100644
--- a/api/tests/unit_tests/controllers/files/test_upload.py
+++ b/api/tests/unit_tests/controllers/files/test_upload.py
@@ -1,3 +1,4 @@
+import io
 import types
 from unittest.mock import patch
 
@@ -30,9 +31,10 @@ class DummyFile:
         self.filename = filename
         self.mimetype = mimetype
         self._content = content
+        self.stream = io.BytesIO(content)
 
     def read(self):
-        return self._content
+        return self.stream.read()
 
 
 class DummyToolFile:
diff --git a/api/tests/unit_tests/core/app/app_config/easy_ui_based_app/test_prompt_template_manager.py b/api/tests/unit_tests/core/app/app_config/easy_ui_based_app/test_prompt_template_manager.py
index 3fd21ab22b..62e1d22129 100644
--- a/api/tests/unit_tests/core/app/app_config/easy_ui_based_app/test_prompt_template_manager.py
+++ b/api/tests/unit_tests/core/app/app_config/easy_ui_based_app/test_prompt_template_manager.py
@@ -1,3 +1,4 @@
+from collections import UserString
 from unittest.mock import MagicMock
 
 import pytest
@@ -12,21 +13,25 @@ from core.app.app_config.easy_ui_based_app.prompt_template.manager import (
 # -----------------------------
 
 
-class DummyEnumValue:
+class DummyEnumValue(UserString):
     def __init__(self, value):
+        super().__init__(value)
         self.value = value
 
 
 class DummyPromptType:
     def __init__(self):
-        self.SIMPLE = "simple"
-        self.ADVANCED = "advanced"
+        self.SIMPLE = DummyEnumValue("simple")
+        self.ADVANCED = DummyEnumValue("advanced")
 
     def value_of(self, value):
-        return value
+        for enum_value in self:
+            if enum_value.value == value:
+                return enum_value
+        raise ValueError(f"invalid prompt type value {value}")
 
     def __iter__(self):
-        return iter([DummyEnumValue("simple"), DummyEnumValue("advanced")])
+        return iter([self.SIMPLE, self.ADVANCED])
 
 
 # -----------------------------
diff --git a/api/tests/unit_tests/services/test_audio_service.py b/api/tests/unit_tests/services/test_audio_service.py
index 83258fd1b7..5d148974f8 100644
--- a/api/tests/unit_tests/services/test_audio_service.py
+++ b/api/tests/unit_tests/services/test_audio_service.py
@@ -173,7 +173,8 @@ class AudioServiceTestDataFactory:
         file = Mock(spec=FileStorage)
         file.filename = filename
         file.mimetype = mimetype
-        file.read = Mock(return_value=content)
+        file.stream = Mock()
+        file.stream.read = Mock(return_value=content)
         for key, value in kwargs.items():
             setattr(file, key, value)
         return file
@@ -216,7 +217,7 @@ class TestAudioServiceASR:
     """Test speech-to-text (ASR) operations."""
 
     @patch("services.audio_service.ModelManager.for_tenant", autospec=True)
-    def test_transcript_asr_success_chat_mode(self, mock_model_manager_class, factory):
+    def test_transcript_asr_success_chat_mode(self, mock_model_manager_class, factory: AudioServiceTestDataFactory):
         """Test successful ASR transcription in CHAT mode."""
         # Arrange
         app_model_config = factory.create_app_model_config_mock(speech_to_text_dict={"enabled": True})
@@ -241,7 +242,9 @@ class TestAudioServiceASR:
         mock_model_manager_class.assert_called_once_with(tenant_id=app.tenant_id, user_id="user-123")
 
     @patch("services.audio_service.ModelManager.for_tenant", autospec=True)
-    def test_transcript_asr_success_advanced_chat_mode(self, mock_model_manager_class, factory):
+    def test_transcript_asr_success_advanced_chat_mode(
+        self, mock_model_manager_class, factory: AudioServiceTestDataFactory
+    ):
         """Test successful ASR transcription in ADVANCED_CHAT mode."""
         # Arrange
         workflow = factory.create_workflow_mock(features_dict={"speech_to_text": {"enabled": True}})
@@ -263,7 +266,7 @@ class TestAudioServiceASR:
         # Assert
         assert result == {"text": "Workflow transcribed text"}
 
-    def test_transcript_asr_raises_error_when_feature_disabled_chat_mode(self, factory):
+    def test_transcript_asr_raises_error_when_feature_disabled_chat_mode(self, factory: AudioServiceTestDataFactory):
         """Test that ASR raises error when speech-to-text is disabled in CHAT mode."""
         # Arrange
         app_model_config = factory.create_app_model_config_mock(speech_to_text_dict={"enabled": False})
@@ -277,7 +280,9 @@ class TestAudioServiceASR:
         with pytest.raises(ValueError, match="Speech to text is not enabled"):
             AudioService.transcript_asr(app_model=app, file=file)
 
-    def test_transcript_asr_raises_error_when_feature_disabled_workflow_mode(self, factory):
+    def test_transcript_asr_raises_error_when_feature_disabled_workflow_mode(
+        self, factory: AudioServiceTestDataFactory
+    ):
         """Test that ASR raises error when speech-to-text is disabled in WORKFLOW mode."""
         # Arrange
         workflow = factory.create_workflow_mock(features_dict={"speech_to_text": {"enabled": False}})
@@ -291,7 +296,7 @@ class TestAudioServiceASR:
         with pytest.raises(ValueError, match="Speech to text is not enabled"):
             AudioService.transcript_asr(app_model=app, file=file)
 
-    def test_transcript_asr_raises_error_when_workflow_missing(self, factory):
+    def test_transcript_asr_raises_error_when_workflow_missing(self, factory: AudioServiceTestDataFactory):
         """Test that ASR raises error when workflow is missing in WORKFLOW mode."""
         # Arrange
         app = factory.create_app_mock(
@@ -304,7 +309,7 @@ class TestAudioServiceASR:
         with pytest.raises(ValueError, match="Speech to text is not enabled"):
             AudioService.transcript_asr(app_model=app, file=file)
 
-    def test_transcript_asr_raises_error_when_no_file_uploaded(self, factory):
+    def test_transcript_asr_raises_error_when_no_file_uploaded(self, factory: AudioServiceTestDataFactory):
         """Test that ASR raises error when no file is uploaded."""
         # Arrange
         app_model_config = factory.create_app_model_config_mock(speech_to_text_dict={"enabled": True})
@@ -317,7 +322,7 @@ class TestAudioServiceASR:
         with pytest.raises(NoAudioUploadedServiceError):
             AudioService.transcript_asr(app_model=app, file=None)
 
-    def test_transcript_asr_raises_error_for_unsupported_audio_type(self, factory):
+    def test_transcript_asr_raises_error_for_unsupported_audio_type(self, factory: AudioServiceTestDataFactory):
         """Test that ASR raises error for unsupported audio file types."""
         # Arrange
         app_model_config = factory.create_app_model_config_mock(speech_to_text_dict={"enabled": True})
@@ -331,7 +336,7 @@ class TestAudioServiceASR:
         with pytest.raises(UnsupportedAudioTypeServiceError):
             AudioService.transcript_asr(app_model=app, file=file)
 
-    def test_transcript_asr_raises_error_for_large_file(self, factory):
+    def test_transcript_asr_raises_error_for_large_file(self, factory: AudioServiceTestDataFactory):
         """Test that ASR raises error when file exceeds size limit (30MB)."""
         # Arrange
         app_model_config = factory.create_app_model_config_mock(speech_to_text_dict={"enabled": True})
@@ -348,7 +353,9 @@ class TestAudioServiceASR:
             AudioService.transcript_asr(app_model=app, file=file)
 
     @patch("services.audio_service.ModelManager.for_tenant", autospec=True)
-    def test_transcript_asr_raises_error_when_no_model_instance(self, mock_model_manager_class, factory):
+    def test_transcript_asr_raises_error_when_no_model_instance(
+        self, mock_model_manager_class, factory: AudioServiceTestDataFactory
+    ):
         """Test that ASR raises error when no model instance is available."""
         # Arrange
         app_model_config = factory.create_app_model_config_mock(speech_to_text_dict={"enabled": True})
@@ -371,7 +378,7 @@ class TestAudioServiceTTS:
     """Test text-to-speech (TTS) operations."""
 
     @patch("services.audio_service.ModelManager.for_tenant", autospec=True)
-    def test_transcript_tts_with_text_success(self, mock_model_manager_class, factory):
+    def test_transcript_tts_with_text_success(self, mock_model_manager_class, factory: AudioServiceTestDataFactory):
         """Test successful TTS with text input."""
         # Arrange
         app_model_config = factory.create_app_model_config_mock(
@@ -405,7 +412,7 @@ class TestAudioServiceTTS:
         )
 
     @patch("services.audio_service.ModelManager.for_tenant", autospec=True)
-    def test_transcript_tts_with_default_voice(self, mock_model_manager_class, factory):
+    def test_transcript_tts_with_default_voice(self, mock_model_manager_class, factory: AudioServiceTestDataFactory):
         """Test TTS uses default voice when none specified."""
         # Arrange
         app_model_config = factory.create_app_model_config_mock(
@@ -435,7 +442,9 @@ class TestAudioServiceTTS:
         assert call_args.kwargs["voice"] == "default-voice"
 
     @patch("services.audio_service.ModelManager.for_tenant", autospec=True)
-    def test_transcript_tts_gets_first_available_voice_when_none_configured(self, mock_model_manager_class, factory):
+    def test_transcript_tts_gets_first_available_voice_when_none_configured(
+        self, mock_model_manager_class, factory: AudioServiceTestDataFactory
+    ):
         """Test TTS gets first available voice when none is configured."""
         # Arrange
         app_model_config = factory.create_app_model_config_mock(
@@ -467,7 +476,7 @@ class TestAudioServiceTTS:
     @patch("services.audio_service.WorkflowService", autospec=True)
     @patch("services.audio_service.ModelManager.for_tenant", autospec=True)
     def test_transcript_tts_workflow_mode_with_draft(
-        self, mock_model_manager_class, mock_workflow_service_class, factory
+        self, mock_model_manager_class, mock_workflow_service_class, factory: AudioServiceTestDataFactory
     ):
         """Test TTS in WORKFLOW mode with draft workflow."""
         # Arrange
@@ -499,7 +508,7 @@ class TestAudioServiceTTS:
         assert result == b"draft audio"
         mock_workflow_service.get_draft_workflow.assert_called_once_with(app_model=app)
 
-    def test_transcript_tts_raises_error_when_text_missing(self, factory):
+    def test_transcript_tts_raises_error_when_text_missing(self, factory: AudioServiceTestDataFactory):
         """Test that TTS raises error when text is missing."""
         # Arrange
         app = factory.create_app_mock()
@@ -509,7 +518,9 @@ class TestAudioServiceTTS:
             AudioService.transcript_tts(app_model=app, text=None)
 
     @patch("services.audio_service.ModelManager.for_tenant", autospec=True)
-    def test_transcript_tts_raises_error_when_no_voices_available(self, mock_model_manager_class, factory):
+    def test_transcript_tts_raises_error_when_no_voices_available(
+        self, mock_model_manager_class, factory: AudioServiceTestDataFactory
+    ):
         """Test that TTS raises error when no voices are available."""
         # Arrange
         app_model_config = factory.create_app_model_config_mock(
@@ -535,7 +546,7 @@ class TestAudioServiceTTSVoices:
     """Test TTS voice listing operations."""
 
     @patch("services.audio_service.ModelManager.for_tenant", autospec=True)
-    def test_transcript_tts_voices_success(self, mock_model_manager_class, factory):
+    def test_transcript_tts_voices_success(self, mock_model_manager_class, factory: AudioServiceTestDataFactory):
         """Test successful retrieval of TTS voices."""
         # Arrange
         tenant_id = "tenant-123"
@@ -560,7 +571,9 @@ class TestAudioServiceTTSVoices:
         mock_model_instance.get_tts_voices.assert_called_once_with(language)
 
     @patch("services.audio_service.ModelManager.for_tenant", autospec=True)
-    def test_transcript_tts_voices_raises_error_when_no_model_instance(self, mock_model_manager_class, factory):
+    def test_transcript_tts_voices_raises_error_when_no_model_instance(
+        self, mock_model_manager_class, factory: AudioServiceTestDataFactory
+    ):
         """Test that TTS voices raises error when no model instance is available."""
         # Arrange
         tenant_id = "tenant-123"
@@ -575,7 +588,9 @@ class TestAudioServiceTTSVoices:
             AudioService.transcript_tts_voices(tenant_id=tenant_id, language=language)
 
     @patch("services.audio_service.ModelManager.for_tenant", autospec=True)
-    def test_transcript_tts_voices_propagates_exceptions(self, mock_model_manager_class, factory):
+    def test_transcript_tts_voices_propagates_exceptions(
+        self, mock_model_manager_class, factory: AudioServiceTestDataFactory
+    ):
         """Test that TTS voices propagates exceptions from model instance."""
         # Arrange
         tenant_id = "tenant-123"
diff --git a/api/tests/unit_tests/services/test_webhook_service.py b/api/tests/unit_tests/services/test_webhook_service.py
index 95edc436d7..a2b56fe777 100644
--- a/api/tests/unit_tests/services/test_webhook_service.py
+++ b/api/tests/unit_tests/services/test_webhook_service.py
@@ -268,8 +268,8 @@ class TestWebhookServiceUnit:
         }
 
         # Mock file reads
-        files["file1"].read.return_value = b"content1"
-        files["file2"].read.return_value = b"content2"
+        files["file1"].stream.read.return_value = b"content1"
+        files["file2"].stream.read.return_value = b"content2"
 
         webhook_trigger = MagicMock()
         webhook_trigger.tenant_id = "test_tenant"
@@ -304,8 +304,8 @@ class TestWebhookServiceUnit:
             "bad_file": MagicMock(filename="test.bad", content_type="text/plain"),
         }
 
-        files["good_file"].read.return_value = b"content"
-        files["bad_file"].read.side_effect = Exception("Read error")
+        files["good_file"].stream.read.return_value = b"content"
+        files["bad_file"].stream.read.side_effect = Exception("Read error")
 
         webhook_trigger = MagicMock()
         webhook_trigger.tenant_id = "test_tenant"

From b99ba74aa46c5aa6ebf321a17052bf711d27c851 Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Sun, 10 May 2026 17:35:27 +0800
Subject: [PATCH 10/13] chore(web): remove drawer overlay import restriction
 (#35990)

---
 web/eslint.config.mjs    | 18 ------------------
 web/eslint.constants.mjs | 10 ----------
 2 files changed, 28 deletions(-)

diff --git a/web/eslint.config.mjs b/web/eslint.config.mjs
index ab2c626482..a46256ebf1 100644
--- a/web/eslint.config.mjs
+++ b/web/eslint.config.mjs
@@ -14,7 +14,6 @@ import {
   GENERATED_IGNORES,
   HYOBAN_PREFER_TAILWIND_ICONS_OPTIONS,
   NEXT_PLATFORM_RESTRICTED_IMPORT_PATHS,
-  OVERLAY_RESTRICTED_IMPORT_PATTERNS,
   WEB_RESTRICTED_IMPORT_PATTERNS,
 } from './eslint.constants.mjs'
 import dify from './plugins/eslint/index.js'
@@ -171,21 +170,4 @@ export default antfu(
       }],
     },
   },
-  {
-    name: 'dify/overlay-import-policy',
-    files: [GLOB_TS, GLOB_TSX],
-    ignores: [
-      'next/**',
-      ...GLOB_TESTS,
-    ],
-    rules: {
-      'no-restricted-imports': ['error', {
-        paths: NEXT_PLATFORM_RESTRICTED_IMPORT_PATHS,
-        patterns: [
-          ...WEB_RESTRICTED_IMPORT_PATTERNS,
-          ...OVERLAY_RESTRICTED_IMPORT_PATTERNS,
-        ],
-      }],
-    },
-  },
 )
diff --git a/web/eslint.constants.mjs b/web/eslint.constants.mjs
index cc0ba060a5..1d342fbf4d 100644
--- a/web/eslint.constants.mjs
+++ b/web/eslint.constants.mjs
@@ -54,16 +54,6 @@ export const WEB_RESTRICTED_IMPORT_PATTERNS = [
   ...FLOATING_UI_RESTRICTED_IMPORT_PATTERNS,
 ]
 
-export const OVERLAY_RESTRICTED_IMPORT_PATTERNS = [
-  {
-    group: [
-      '**/base/drawer',
-      '**/base/drawer/index',
-    ],
-    message: 'Deprecated: use @langgenius/dify-ui/drawer instead. See issue #32767.',
-  },
-]
-
 export const HYOBAN_PREFER_TAILWIND_ICONS_OPTIONS = {
   prefix: 'i-',
   propMappings: {

From b95e6f6a7a33cd1623633be388222143bff5210d Mon Sep 17 00:00:00 2001
From: Blackoutta <37723456+Blackoutta@users.noreply.github.com>
Date: Sun, 10 May 2026 20:10:16 +0800
Subject: [PATCH 11/13] feat: support editable class labels in question
 classifier (#35430)

---
 eslint-suppressions.json                      |  23 +--
 .../prompt-editor/__tests__/index.spec.tsx    |   8 +
 .../components/base/prompt-editor/index.tsx   |  16 +-
 web/app/components/workflow/constants.ts      |   4 +
 .../__tests__/integration.spec.tsx            |   6 +
 .../__tests__/node.spec.tsx                   |  10 +-
 .../__tests__/panel.spec.tsx                  |   1 +
 .../__tests__/use-config.spec.ts              | 147 ++++++++++++++++++
 .../components/__tests__/class-item.spec.tsx  |  36 ++++-
 .../components/class-item.tsx                 |  99 +++++++++++-
 .../components/class-label-utils.ts           |  66 ++++++++
 .../components/class-list.tsx                 |  51 ++++--
 .../nodes/question-classifier/default.ts      |   5 +-
 .../nodes/question-classifier/node.tsx        |  10 +-
 .../nodes/question-classifier/panel.tsx       |   5 +
 .../nodes/question-classifier/types.ts        |   1 +
 .../nodes/question-classifier/use-config.ts   | 118 ++++++++++----
 .../__tests__/node.spec.tsx                   |   5 +-
 .../nodes/question-classifier/node.tsx        |   5 +-
 web/i18n/en-US/workflow.json                  |   4 +
 web/i18n/ja-JP/workflow.json                  |   4 +
 web/i18n/zh-Hans/workflow.json                |   4 +
 web/i18n/zh-Hant/workflow.json                |   4 +
 23 files changed, 535 insertions(+), 97 deletions(-)
 create mode 100644 web/app/components/workflow/nodes/question-classifier/__tests__/use-config.spec.ts
 create mode 100644 web/app/components/workflow/nodes/question-classifier/components/class-label-utils.ts

diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index 23e2da9ee0..2de84456ee 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -1465,7 +1465,7 @@
   },
   "web/app/components/base/prompt-editor/index.tsx": {
     "ts/no-explicit-any": {
-      "count": 4
+      "count": 3
     }
   },
   "web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx": {
@@ -3858,30 +3858,9 @@
       "count": 9
     }
   },
-  "web/app/components/workflow/nodes/question-classifier/components/class-item.tsx": {
-    "react/set-state-in-effect": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/nodes/question-classifier/components/class-list.tsx": {
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "react/unsupported-syntax": {
-      "count": 2
-    }
-  },
-  "web/app/components/workflow/nodes/question-classifier/default.ts": {
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
-  "web/app/components/workflow/nodes/question-classifier/use-config.ts": {
-    "react/set-state-in-effect": {
-      "count": 2
-    },
-    "ts/no-explicit-any": {
-      "count": 2
     }
   },
   "web/app/components/workflow/nodes/question-classifier/use-single-run-form-params.ts": {
diff --git a/web/app/components/base/prompt-editor/__tests__/index.spec.tsx b/web/app/components/base/prompt-editor/__tests__/index.spec.tsx
index 9d75b9e061..31e25ab19e 100644
--- a/web/app/components/base/prompt-editor/__tests__/index.spec.tsx
+++ b/web/app/components/base/prompt-editor/__tests__/index.spec.tsx
@@ -365,6 +365,14 @@ describe('PromptEditor', () => {
       expect(() => unmount()).not.toThrow()
     })
 
+    it('should rerender without ref-driven update loops', () => {
+      const { rerender } = render(<PromptEditor value="first" />)
+
+      expect(() => {
+        rerender(<PromptEditor value="second" />)
+      }).not.toThrow()
+    })
+
     it('should render hitl block when show=true', () => {
       render(
         <PromptEditor
diff --git a/web/app/components/base/prompt-editor/index.tsx b/web/app/components/base/prompt-editor/index.tsx
index fce70d2781..29d0d71715 100644
--- a/web/app/components/base/prompt-editor/index.tsx
+++ b/web/app/components/base/prompt-editor/index.tsx
@@ -29,7 +29,7 @@ import {
   TextNode,
 } from 'lexical'
 import * as React from 'react'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import {
   UPDATE_DATASETS_EVENT_EMITTER,
@@ -203,12 +203,16 @@ const PromptEditor: FC<PromptEditorProps> = ({
     } as any)
   }, [eventEmitter, historyBlock?.history])
 
-  const [floatingAnchorElem, setFloatingAnchorElem] = useState(null)
+  const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLDivElement | null>(null)
 
-  const onRef = (_floatingAnchorElem: any) => {
-    if (_floatingAnchorElem !== null)
-      setFloatingAnchorElem(_floatingAnchorElem)
-  }
+  const onRef = useCallback((nextFloatingAnchorElem: HTMLDivElement | null) => {
+    setFloatingAnchorElem((currentFloatingAnchorElem) => {
+      if (currentFloatingAnchorElem === nextFloatingAnchorElem)
+        return currentFloatingAnchorElem
+
+      return nextFloatingAnchorElem
+    })
+  }, [])
 
   return (
     <LexicalComposer initialConfig={{ ...initialConfig, editable }}>
diff --git a/web/app/components/workflow/constants.ts b/web/app/components/workflow/constants.ts
index ed9a072824..101d15a140 100644
--- a/web/app/components/workflow/constants.ts
+++ b/web/app/components/workflow/constants.ts
@@ -172,6 +172,10 @@ export const QUESTION_CLASSIFIER_OUTPUT_STRUCT = [
     variable: 'class_name',
     type: VarType.string,
   },
+  {
+    variable: 'class_label',
+    type: VarType.string,
+  },
   {
     variable: 'usage',
     type: VarType.object,
diff --git a/web/app/components/workflow/nodes/question-classifier/__tests__/integration.spec.tsx b/web/app/components/workflow/nodes/question-classifier/__tests__/integration.spec.tsx
index ada3fc43cc..c4f8a41d47 100644
--- a/web/app/components/workflow/nodes/question-classifier/__tests__/integration.spec.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/__tests__/integration.spec.tsx
@@ -55,6 +55,12 @@ vi.mock('@/app/components/header/account-setting/model-provider-page/model-selec
   default: ({ defaultModel }: any) => <div>{defaultModel.provider}:{defaultModel.model}</div>,
 }))
 
+vi.mock('@langgenius/dify-ui/tooltip', () => ({
+  Tooltip: ({ children }: any) => <div>{children}</div>,
+  TooltipTrigger: ({ children }: any) => <>{children}</>,
+  TooltipContent: ({ children }: any) => <div>{children}</div>,
+}))
+
 vi.mock('@/app/components/workflow/nodes/_base/components/readonly-input-with-select-var', () => ({
   default: ({ value }: any) => <div>{value}</div>,
 }))
diff --git a/web/app/components/workflow/nodes/question-classifier/__tests__/node.spec.tsx b/web/app/components/workflow/nodes/question-classifier/__tests__/node.spec.tsx
index ad411639e9..3356226a85 100644
--- a/web/app/components/workflow/nodes/question-classifier/__tests__/node.spec.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/__tests__/node.spec.tsx
@@ -76,12 +76,18 @@ describe('question-classifier/node', () => {
     render(
       <Node
         {...baseNodeProps}
-        data={createData({ classes: [createTopic(), createTopic({ id: 'topic-2', name: 'Refunds' })] })}
+        data={createData({
+          classes: [
+            createTopic({ label: 'Billing' } as Partial<Topic>),
+            createTopic({ id: 'topic-2', name: 'Refunds', label: 'Refund desk' } as Partial<Topic>),
+          ],
+        })}
       />,
     )
 
     expect(screen.getByText('openai:gpt-4o')).toBeInTheDocument()
-    expect(screen.getByText('Billing questions')).toBeInTheDocument()
+    expect(screen.getByText('Billing')).toBeInTheDocument()
+    expect(screen.getByText('Refund desk')).toBeInTheDocument()
     expect(screen.getByText('handle-topic-1')).toBeInTheDocument()
     expect(screen.getByText('handle-topic-2')).toBeInTheDocument()
   })
diff --git a/web/app/components/workflow/nodes/question-classifier/__tests__/panel.spec.tsx b/web/app/components/workflow/nodes/question-classifier/__tests__/panel.spec.tsx
index c205f57d08..f92bb5abb3 100644
--- a/web/app/components/workflow/nodes/question-classifier/__tests__/panel.spec.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/__tests__/panel.spec.tsx
@@ -144,6 +144,7 @@ describe('question-classifier/panel', () => {
     expect(handleVisionResolutionEnabledChange).toHaveBeenCalledWith(true)
     expect(handleVisionResolutionChange).toHaveBeenCalledWith({ resolution: 'high' })
     expect(screen.getByText('class_name:string')).toBeInTheDocument()
+    expect(screen.getByText('class_label:string')).toBeInTheDocument()
     expect(screen.getByText('usage:object')).toBeInTheDocument()
   })
 })
diff --git a/web/app/components/workflow/nodes/question-classifier/__tests__/use-config.spec.ts b/web/app/components/workflow/nodes/question-classifier/__tests__/use-config.spec.ts
new file mode 100644
index 0000000000..89af550de1
--- /dev/null
+++ b/web/app/components/workflow/nodes/question-classifier/__tests__/use-config.spec.ts
@@ -0,0 +1,147 @@
+import type { QuestionClassifierNodeType } from '../types'
+import { act, renderHook, waitFor } from '@testing-library/react'
+import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import {
+  useIsChatMode,
+  useNodesReadOnly,
+  useWorkflow,
+} from '@/app/components/workflow/hooks'
+import useConfigVision from '@/app/components/workflow/hooks/use-config-vision'
+import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
+import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
+import { useStore } from '@/app/components/workflow/store'
+import { BlockEnum } from '@/app/components/workflow/types'
+import { AppModeEnum } from '@/types/app'
+import useConfig from '../use-config'
+
+vi.mock('@/app/components/workflow/hooks', () => ({
+  useNodesReadOnly: vi.fn(),
+  useIsChatMode: vi.fn(),
+  useWorkflow: vi.fn(),
+}))
+
+vi.mock('reactflow', () => ({
+  useUpdateNodeInternals: vi.fn(() => vi.fn()),
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/hooks/use-node-crud', () => ({
+  __esModule: true,
+  default: vi.fn(),
+}))
+
+vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
+  useModelListAndDefaultModelAndCurrentProviderAndModel: vi.fn(),
+}))
+
+vi.mock('@/app/components/workflow/store', () => ({
+  useStore: vi.fn(),
+}))
+
+vi.mock('@/app/components/workflow/hooks/use-config-vision', () => ({
+  __esModule: true,
+  default: vi.fn(),
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/hooks/use-available-var-list', () => ({
+  __esModule: true,
+  default: vi.fn(),
+}))
+
+const mockUseNodesReadOnly = vi.mocked(useNodesReadOnly)
+const mockUseIsChatMode = vi.mocked(useIsChatMode)
+const mockUseWorkflow = vi.mocked(useWorkflow)
+const mockUseNodeCrud = vi.mocked(useNodeCrud)
+const mockUseModelListAndDefaultModelAndCurrentProviderAndModel = vi.mocked(useModelListAndDefaultModelAndCurrentProviderAndModel)
+const mockUseStore = vi.mocked(useStore)
+const mockUseConfigVision = vi.mocked(useConfigVision)
+const mockUseAvailableVarList = vi.mocked(useAvailableVarList)
+
+const createPayload = (overrides: Partial<QuestionClassifierNodeType> = {}): QuestionClassifierNodeType => ({
+  type: BlockEnum.QuestionClassifier,
+  title: 'Question Classifier',
+  desc: '',
+  model: {
+    provider: '',
+    name: '',
+    mode: AppModeEnum.CHAT,
+    completion_params: {},
+  },
+  classes: [{ id: 'topic-1', name: 'Billing questions', label: 'CLASS 1' }],
+  query_variable_selector: ['start-node', 'sys.query'],
+  instruction: 'Route by topic',
+  vision: {
+    enabled: false,
+  },
+  ...overrides,
+})
+
+describe('question-classifier/use-config', () => {
+  const setInputs = vi.fn()
+  let latestVisionOptions: {
+    onChange: (payload: QuestionClassifierNodeType['vision']) => void
+  } | null = null
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    latestVisionOptions = null
+    mockUseNodesReadOnly.mockReturnValue({ nodesReadOnly: false, getNodesReadOnly: () => false })
+    mockUseIsChatMode.mockReturnValue(true)
+    mockUseWorkflow.mockReturnValue({
+      getBeforeNodesInSameBranch: vi.fn(() => []),
+    } as unknown as ReturnType<typeof useWorkflow>)
+    mockUseNodeCrud.mockReturnValue({
+      inputs: createPayload(),
+      setInputs,
+    })
+    mockUseModelListAndDefaultModelAndCurrentProviderAndModel.mockReturnValue({
+      modelList: [],
+      defaultModel: undefined,
+      currentProvider: undefined,
+      currentModel: undefined,
+    } as ReturnType<typeof useModelListAndDefaultModelAndCurrentProviderAndModel>)
+    mockUseStore.mockImplementation((selector) => {
+      return selector({ nodesDefaultConfigs: {} } as never)
+    })
+    mockUseConfigVision.mockImplementation((_model, options) => {
+      latestVisionOptions = options as typeof latestVisionOptions
+      return {
+        isVisionModel: false,
+        handleVisionResolutionEnabledChange: vi.fn(),
+        handleVisionResolutionChange: vi.fn(),
+        handleModelChanged: vi.fn(() => {
+          latestVisionOptions?.onChange({ enabled: false })
+        }),
+      }
+    })
+    mockUseAvailableVarList.mockReturnValue({
+      availableVars: [],
+      availableNodes: [],
+      availableNodesWithParent: [],
+    } as unknown as ReturnType<typeof useAvailableVarList>)
+  })
+
+  it('preserves the selected model when the vision follow-up updates after model selection', async () => {
+    const { result } = renderHook(() => useConfig('question-classifier-node', createPayload()))
+
+    act(() => {
+      result.current.handleModelChanged({
+        provider: 'openai',
+        modelId: 'gpt-4o',
+        mode: AppModeEnum.CHAT,
+      })
+    })
+
+    await waitFor(() => {
+      expect(setInputs).toHaveBeenLastCalledWith(expect.objectContaining({
+        model: expect.objectContaining({
+          provider: 'openai',
+          name: 'gpt-4o',
+          mode: AppModeEnum.CHAT,
+        }),
+        vision: {
+          enabled: false,
+        },
+      }))
+    })
+  })
+})
diff --git a/web/app/components/workflow/nodes/question-classifier/components/__tests__/class-item.spec.tsx b/web/app/components/workflow/nodes/question-classifier/components/__tests__/class-item.spec.tsx
index 6ba88016e0..ab1d0e0224 100644
--- a/web/app/components/workflow/nodes/question-classifier/components/__tests__/class-item.spec.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/components/__tests__/class-item.spec.tsx
@@ -3,8 +3,6 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import ClassItem from '../class-item'
 
-const mockEditorRender = vi.hoisted(() => vi.fn())
-
 vi.mock('@/app/components/workflow/nodes/_base/hooks/use-available-var-list', () => ({
   __esModule: true,
   default: () => ({
@@ -16,13 +14,12 @@ vi.mock('@/app/components/workflow/nodes/_base/hooks/use-available-var-list', ()
 vi.mock('@/app/components/workflow/nodes/_base/components/prompt/editor', () => ({
   __esModule: true,
   default: (props: {
-    title: string
+    title: React.ReactNode
     value: string
     onChange: (value: string) => void
     onRemove: () => void
     showRemove?: boolean
   }) => {
-    mockEditorRender(props)
     return (
       <div>
         <div>{props.title}</div>
@@ -70,9 +67,32 @@ describe('question-classifier/class-item', () => {
       name: 'Billing questions updated',
     })
     expect(onRemove).toHaveBeenCalledTimes(1)
-    expect(mockEditorRender).toHaveBeenCalledWith(expect.objectContaining({
-      title: 'workflow.nodes.questionClassifiers.class 1',
-      value: 'Billing questions',
-    }))
+    expect(screen.getByRole('button', { name: 'CLASS 1' })).toBeInTheDocument()
+  })
+
+  it('preserves a custom label when editing the classifier name', () => {
+    const onChange = vi.fn()
+
+    render(
+      <ClassItem
+        nodeId="node-1"
+        payload={{ id: 'topic-1', name: 'Billing questions', label: 'Billing' } as Topic}
+        onChange={onChange}
+        onRemove={vi.fn()}
+        index={1}
+        filterVar={() => true}
+      />,
+    )
+
+    fireEvent.change(screen.getByLabelText('class-name'), {
+      target: { value: 'Billing questions updated' },
+    })
+
+    expect(onChange).toHaveBeenCalledWith({
+      id: 'topic-1',
+      name: 'Billing questions updated',
+      label: 'Billing',
+    })
+    expect(screen.getByRole('button', { name: 'Billing' })).toBeInTheDocument()
   })
 })
diff --git a/web/app/components/workflow/nodes/question-classifier/components/class-item.tsx b/web/app/components/workflow/nodes/question-classifier/components/class-item.tsx
index 1e90d4590d..139c314def 100644
--- a/web/app/components/workflow/nodes/question-classifier/components/class-item.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/components/class-item.tsx
@@ -2,12 +2,13 @@
 import type { FC } from 'react'
 import type { Topic } from '../types'
 import type { ValueSelector, Var } from '@/app/components/workflow/types'
-import { uniqueId } from 'es-toolkit/compat'
+import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useId, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Editor from '@/app/components/workflow/nodes/_base/components/prompt/editor'
 import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
+import { getCanonicalClassLabel, getDisplayClassLabel } from './class-label-utils'
 
 const i18nPrefix = 'nodes.questionClassifiers'
 
@@ -21,6 +22,7 @@ type Props = {
   index: number
   readonly?: boolean
   filterVar: (payload: Var, valueSelector: ValueSelector) => boolean
+  onLabelEditStart?: () => void
 }
 
 const ClassItem: FC<Props> = ({
@@ -33,18 +35,49 @@ const ClassItem: FC<Props> = ({
   index,
   readonly,
   filterVar,
+  onLabelEditStart,
 }) => {
   const { t } = useTranslation()
-  const [instanceId, setInstanceId] = useState(() => uniqueId())
+  const reactId = useId()
+  const [isEditingLabel, setIsEditingLabel] = useState(false)
+  const [draftLabel, setDraftLabel] = useState('')
+  const labelInputRef = useRef<HTMLInputElement>(null)
+  const displayLabel = getDisplayClassLabel(payload.label, index, t)
+  const instanceId = `${nodeId}-${reactId}`
 
   useEffect(() => {
-    setInstanceId(`${nodeId}-${uniqueId()}`)
-  }, [nodeId])
+    if (isEditingLabel)
+      labelInputRef.current?.select()
+  }, [isEditingLabel])
 
   const handleNameChange = useCallback((value: string) => {
     onChange({ ...payload, name: value })
   }, [onChange, payload])
 
+  const handleLabelSave = useCallback((nextValue: string) => {
+    const normalizedLabel = getCanonicalClassLabel(nextValue, index, t)
+    setIsEditingLabel(false)
+    setDraftLabel(normalizedLabel)
+    const shouldPersistLabel = normalizedLabel !== displayLabel
+      || (payload.label !== undefined && payload.label !== normalizedLabel)
+    if (shouldPersistLabel)
+      onChange({ ...payload, label: normalizedLabel })
+  }, [displayLabel, index, onChange, payload, t])
+
+  const handleLabelCancel = useCallback(() => {
+    setDraftLabel(displayLabel)
+    setIsEditingLabel(false)
+  }, [displayLabel])
+
+  const handleLabelEditStart = useCallback(() => {
+    if (readonly)
+      return
+
+    setDraftLabel(displayLabel)
+    setIsEditingLabel(true)
+    onLabelEditStart?.()
+  }, [displayLabel, onLabelEditStart, readonly])
+
   const { availableVars, availableNodesWithParent } = useAvailableVarList(nodeId, {
     onlyLeafNodeVar: false,
     hideChatVar: false,
@@ -52,11 +85,65 @@ const ClassItem: FC<Props> = ({
     filterVar,
   })
 
+  const title = isEditingLabel
+    ? (
+        <input
+          ref={labelInputRef}
+          value={draftLabel}
+          aria-label={t(`${i18nPrefix}.labelEditorAriaLabel`, { ns: 'workflow' })}
+          className={cn(
+            'h-6 w-full rounded-md border border-divider-regular bg-components-input-bg-normal px-2 text-xs font-semibold text-text-secondary ring-0 outline-none',
+            'focus:border-components-input-border-active',
+          )}
+          onChange={event => setDraftLabel(event.target.value)}
+          onBlur={() => handleLabelSave(draftLabel)}
+          onClick={event => event.stopPropagation()}
+          onDoubleClick={event => event.stopPropagation()}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              event.preventDefault()
+              handleLabelSave(draftLabel)
+            }
+
+            if (event.key === 'Escape') {
+              event.preventDefault()
+              handleLabelCancel()
+            }
+          }}
+          autoFocus
+        />
+      )
+    : readonly
+      ? (
+          <div className="-ml-1 px-1 py-0.5 text-left text-xs leading-4 font-semibold text-text-secondary">
+            {displayLabel}
+          </div>
+        )
+      : (
+          <button
+            type="button"
+            aria-label={displayLabel}
+            className={cn(
+              '-ml-1 rounded px-1 py-0.5 text-left text-xs leading-4 font-semibold text-text-secondary transition-colors',
+              'cursor-text hover:bg-state-base-hover',
+            )}
+            onDoubleClick={handleLabelEditStart}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault()
+                handleLabelEditStart()
+              }
+            }}
+          >
+            {displayLabel}
+          </button>
+        )
+
   return (
     <Editor
       className={className}
       headerClassName={headerClassName}
-      title={`${t(`${i18nPrefix}.class`, { ns: 'workflow' })} ${index}`}
+      title={title}
       placeholder={t(`${i18nPrefix}.topicPlaceholder`, { ns: 'workflow' })!}
       value={payload.name}
       onChange={handleNameChange}
diff --git a/web/app/components/workflow/nodes/question-classifier/components/class-label-utils.ts b/web/app/components/workflow/nodes/question-classifier/components/class-label-utils.ts
new file mode 100644
index 0000000000..aea17588b8
--- /dev/null
+++ b/web/app/components/workflow/nodes/question-classifier/components/class-label-utils.ts
@@ -0,0 +1,66 @@
+'use client'
+import type { TFunction } from 'i18next'
+
+const i18nPrefix = 'nodes.questionClassifiers'
+const LEGACY_DEFAULT_LABEL_PREFIX = 'CLASS'
+const DEFAULT_EQUIVALENT_PREFIXES = ['CLASS', '分类', '分類', 'クラス']
+
+const getCanonicalDefaultClassLabel = (index: number) => `${LEGACY_DEFAULT_LABEL_PREFIX} ${index}`
+
+const getTranslatedDefaultClassLabel = (t: TFunction, index: number) => {
+  const translated = t(`${i18nPrefix}.defaultLabel`, { ns: 'workflow', index })
+  if (typeof translated !== 'string')
+    return undefined
+
+  const resolvedLabel = translated.replace('{{index}}', String(index))
+  const rawWorkflowKey = `workflow.${i18nPrefix}.defaultLabel`
+  const rawKey = `${i18nPrefix}.defaultLabel`
+  if (
+    resolvedLabel === rawWorkflowKey
+    || resolvedLabel === rawKey
+    || resolvedLabel.startsWith(`${rawWorkflowKey}:`)
+    || resolvedLabel.startsWith(`${rawKey}:`)
+  ) {
+    return undefined
+  }
+
+  return resolvedLabel
+}
+
+const normalizeClassLabel = (label?: string | null) => label?.trim() ?? ''
+
+export const getDefaultClassLabel = (_t: TFunction, index: number) => getCanonicalDefaultClassLabel(index)
+
+export const getDisplayClassLabel = (
+  label: string | undefined,
+  index: number,
+  t: TFunction,
+) => normalizeClassLabel(label) || getTranslatedDefaultClassLabel(t, index) || getCanonicalDefaultClassLabel(index)
+
+export const isDefaultClassLabel = (
+  label: string | undefined,
+  index: number,
+  t: TFunction,
+) => {
+  const normalizedLabel = normalizeClassLabel(label)
+  if (!normalizedLabel)
+    return true
+
+  return DEFAULT_EQUIVALENT_PREFIXES.some(prefix => normalizedLabel === `${prefix} ${index}`)
+    || normalizedLabel === getTranslatedDefaultClassLabel(t, index)
+}
+
+export const getCanonicalClassLabel = (
+  label: string | undefined,
+  index: number,
+  t: TFunction,
+) => {
+  const normalizedLabel = normalizeClassLabel(label)
+  if (!normalizedLabel)
+    return getCanonicalDefaultClassLabel(index)
+
+  if (isDefaultClassLabel(normalizedLabel, index, t))
+    return getCanonicalDefaultClassLabel(index)
+
+  return normalizedLabel
+}
diff --git a/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx b/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
index fead81fb19..1a80266de5 100644
--- a/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
@@ -14,8 +14,10 @@ import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid
 import { useEdgesInteractions } from '../../../hooks'
 import AddButton from '../../_base/components/add-button'
 import Item from './class-item'
+import { getDefaultClassLabel, isDefaultClassLabel } from './class-label-utils'
 
 const i18nPrefix = 'nodes.questionClassifiers'
+const INLINE_LABEL_HINT_STORAGE_KEY = 'question-classifier-inline-label-hint-dismissed'
 
 type Props = {
   nodeId: string
@@ -40,6 +42,17 @@ const ClassList: FC<Props> = ({
   const [shouldScrollToEnd, setShouldScrollToEnd] = useState(false)
   const prevListLength = useRef(list.length)
   const [collapsed, setCollapsed] = useState(false)
+  const [isRenameHintDismissed, setIsRenameHintDismissed] = useState(() => {
+    if (typeof window === 'undefined')
+      return true
+
+    try {
+      return window.localStorage.getItem(INLINE_LABEL_HINT_STORAGE_KEY) === 'true'
+    }
+    catch {
+      return false
+    }
+  })
 
   const handleClassChange = useCallback((index: number) => {
     return (value: Topic) => {
@@ -52,13 +65,17 @@ const ClassList: FC<Props> = ({
 
   const handleAddClass = useCallback(() => {
     const newList = produce(list, (draft) => {
-      draft.push({ id: `${Date.now()}`, name: '' })
+      draft.push({
+        id: `${Date.now()}`,
+        name: '',
+        label: getDefaultClassLabel(t, draft.length + 1),
+      })
     })
     onChange(newList)
     setShouldScrollToEnd(true)
     if (collapsed)
       setCollapsed(false)
-  }, [list, onChange, collapsed])
+  }, [collapsed, list, onChange, t])
 
   const handleRemoveClass = useCallback((index: number) => {
     return () => {
@@ -72,7 +89,6 @@ const ClassList: FC<Props> = ({
 
   const topicCount = list.length
 
-  // Scroll to the newly added item after the list updates
   useEffect(() => {
     if (shouldScrollToEnd && list.length > prevListLength.current)
       setShouldScrollToEnd(false)
@@ -83,6 +99,22 @@ const ClassList: FC<Props> = ({
     setCollapsed(!collapsed)
   }, [collapsed])
 
+  const dismissRenameHint = useCallback(() => {
+    if (isRenameHintDismissed)
+      return
+
+    setIsRenameHintDismissed(true)
+    try {
+      window.localStorage.setItem(INLINE_LABEL_HINT_STORAGE_KEY, 'true')
+    }
+    catch {
+    }
+  }, [isRenameHintDismissed])
+
+  const shouldShowRenameHint = !readonly && !isRenameHintDismissed && list.some((item, index) => {
+    return isDefaultClassLabel(item.label, index + 1, t)
+  })
+
   return (
     <>
       <div className="mb-2 flex items-center justify-between" onClick={handleCollapse}>
@@ -100,6 +132,11 @@ const ClassList: FC<Props> = ({
           )}
         </div>
       </div>
+      {shouldShowRenameHint && (
+        <div className="mb-2 rounded-lg border border-divider-subtle bg-components-panel-bg px-3 py-2 text-xs text-text-tertiary">
+          {t(`${i18nPrefix}.renameHint`, { ns: 'workflow' })}
+        </div>
+      )}
 
       {!collapsed && (
         <div
@@ -117,12 +154,7 @@ const ClassList: FC<Props> = ({
           >
             {
               list.map((item, index) => {
-                const canDrag = (() => {
-                  if (readonly)
-                    return false
-
-                  return topicCount >= 2
-                })()
+                const canDrag = !readonly && topicCount >= 2
                 return (
                   <div
                     key={item.id}
@@ -153,6 +185,7 @@ const ClassList: FC<Props> = ({
                         index={index + 1}
                         readonly={readonly}
                         filterVar={filterVar}
+                        onLabelEditStart={dismissRenameHint}
                       />
                     </div>
                   </div>
diff --git a/web/app/components/workflow/nodes/question-classifier/default.ts b/web/app/components/workflow/nodes/question-classifier/default.ts
index 1ee0d3e8d1..c8f882ae31 100644
--- a/web/app/components/workflow/nodes/question-classifier/default.ts
+++ b/web/app/components/workflow/nodes/question-classifier/default.ts
@@ -1,3 +1,4 @@
+import type { TFunction } from 'i18next'
 import type { NodeDefault } from '../../types'
 import type { QuestionClassifierNodeType } from './types'
 import { BlockClassificationEnum } from '@/app/components/workflow/block-selector/types'
@@ -28,10 +29,12 @@ const nodeDefault: NodeDefault<QuestionClassifierNodeType> = {
       {
         id: '1',
         name: '',
+        label: 'CLASS 1',
       },
       {
         id: '2',
         name: '',
+        label: 'CLASS 2',
       },
     ],
     _targetBranches: [
@@ -48,7 +51,7 @@ const nodeDefault: NodeDefault<QuestionClassifierNodeType> = {
       enabled: false,
     },
   },
-  checkValid(payload: QuestionClassifierNodeType, t: any) {
+  checkValid(payload: QuestionClassifierNodeType, t: TFunction<'workflow'>) {
     let errorMessages = ''
     if (!errorMessages && (!payload.query_variable_selector || payload.query_variable_selector.length === 0))
       errorMessages = t(`${i18nPrefix}errorMsg.fieldRequired`, { ns: 'workflow', field: t(`${i18nPrefix}nodes.questionClassifiers.inputVars`, { ns: 'workflow' }) })
diff --git a/web/app/components/workflow/nodes/question-classifier/node.tsx b/web/app/components/workflow/nodes/question-classifier/node.tsx
index 305eacc204..ac932f4767 100644
--- a/web/app/components/workflow/nodes/question-classifier/node.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/node.tsx
@@ -11,19 +11,19 @@ import {
 import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
 import { NodeSourceHandle } from '../_base/components/node-handle'
 import ReadonlyInputWithSelectVar from '../_base/components/readonly-input-with-select-var'
-
-const i18nPrefix = 'nodes.questionClassifiers'
+import { getDisplayClassLabel } from './components/class-label-utils'
 
 const MAX_CLASS_TEXT_LENGTH = 50
 
 type TruncatedClassItemProps = {
-  topic: { id: string, name: string }
+  topic: { id: string, name: string, label?: string }
   index: number
   nodeId: string
   t: TFunction
 }
 
 const TruncatedClassItem: FC<TruncatedClassItemProps> = ({ topic, index, nodeId, t }) => {
+  const displayLabel = getDisplayClassLabel(topic.label, index + 1, t)
   const truncatedText = topic.name.length > MAX_CLASS_TEXT_LENGTH
     ? `${topic.name.slice(0, MAX_CLASS_TEXT_LENGTH)}...`
     : topic.name
@@ -42,8 +42,8 @@ const TruncatedClassItem: FC<TruncatedClassItemProps> = ({ topic, index, nodeId,
 
   return (
     <div className="flex flex-col gap-y-0.5 rounded-md bg-workflow-block-parma-bg px-[5px] py-[3px]">
-      <div className="system-2xs-semibold-uppercase text-text-secondary uppercase">
-        {`${t(`${i18nPrefix}.class`, { ns: 'workflow' })} ${index + 1}`}
+      <div className="text-xs leading-4 font-semibold text-text-secondary">
+        {displayLabel}
       </div>
       {shouldShowTooltip
         ? (
diff --git a/web/app/components/workflow/nodes/question-classifier/panel.tsx b/web/app/components/workflow/nodes/question-classifier/panel.tsx
index 8d0bd4665f..624952203b 100644
--- a/web/app/components/workflow/nodes/question-classifier/panel.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/panel.tsx
@@ -127,6 +127,11 @@ const Panel: FC<NodePanelProps<QuestionClassifierNodeType>> = ({
               type="string"
               description={t(`${i18nPrefix}.outputVars.className`, { ns: 'workflow' })}
             />
+            <VarItem
+              name="class_label"
+              type="string"
+              description={t(`${i18nPrefix}.outputVars.classLabel`, { ns: 'workflow' })}
+            />
             <VarItem
               name="usage"
               type="object"
diff --git a/web/app/components/workflow/nodes/question-classifier/types.ts b/web/app/components/workflow/nodes/question-classifier/types.ts
index ddc16b4501..3f11299aeb 100644
--- a/web/app/components/workflow/nodes/question-classifier/types.ts
+++ b/web/app/components/workflow/nodes/question-classifier/types.ts
@@ -3,6 +3,7 @@ import type { CommonNodeType, Memory, ModelConfig, ValueSelector, VisionSetting
 export type Topic = {
   id: string
   name: string
+  label?: string
 }
 
 export type QuestionClassifierNodeType = CommonNodeType & {
diff --git a/web/app/components/workflow/nodes/question-classifier/use-config.ts b/web/app/components/workflow/nodes/question-classifier/use-config.ts
index 5a46897de5..9200b1bb3f 100644
--- a/web/app/components/workflow/nodes/question-classifier/use-config.ts
+++ b/web/app/components/workflow/nodes/question-classifier/use-config.ts
@@ -1,7 +1,7 @@
 import type { Memory, ValueSelector, Var } from '../../types'
 import type { QuestionClassifierNodeType, Topic } from './types'
 import { produce } from 'immer'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { startTransition, useCallback, useEffect, useRef } from 'react'
 import { useUpdateNodeInternals } from 'reactflow'
 import { checkHasQueryBlock } from '@/app/components/base/prompt-editor/constants'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
@@ -26,13 +26,17 @@ const useConfig = (id: string, payload: QuestionClassifierNodeType) => {
   const { getBeforeNodesInSameBranch } = useWorkflow()
   const startNode = getBeforeNodesInSameBranch(id).find(node => node.data.type === BlockEnum.Start)
   const startNodeId = startNode?.id
-  const { inputs, setInputs } = useNodeCrud<QuestionClassifierNodeType>(id, payload)
+  const { inputs, setInputs: doSetInputs } = useNodeCrud<QuestionClassifierNodeType>(id, payload)
   const inputRef = useRef(inputs)
+  const setInputs = useCallback((newInputs: QuestionClassifierNodeType) => {
+    doSetInputs(newInputs)
+    inputRef.current = newInputs
+  }, [doSetInputs])
   useEffect(() => {
     inputRef.current = inputs
   }, [inputs])
 
-  const [modelChanged, setModelChanged] = useState(false)
+  const isHandlingModelChangeRef = useRef(false)
   const {
     currentProvider,
     currentModel,
@@ -42,6 +46,13 @@ const useConfig = (id: string, payload: QuestionClassifierNodeType) => {
   const modelMode = inputs.model?.mode
   const isChatModel = modelMode === AppModeEnum.CHAT
 
+  const handleVisionChange = useCallback((newPayload: QuestionClassifierNodeType['vision']) => {
+    const newInputs = produce(inputRef.current, (draft) => {
+      draft.vision = newPayload
+    })
+    setInputs(newInputs)
+  }, [setInputs])
+
   const {
     isVisionModel,
     handleVisionResolutionEnabledChange,
@@ -49,12 +60,7 @@ const useConfig = (id: string, payload: QuestionClassifierNodeType) => {
     handleModelChanged: handleVisionConfigAfterModelChanged,
   } = useConfigVision(model, {
     payload: inputs.vision,
-    onChange: (newPayload) => {
-      const newInputs = produce(inputs, (draft) => {
-        draft.vision = newPayload
-      })
-      setInputs(newInputs)
-    },
+    onChange: handleVisionChange,
   })
 
   const handleModelChanged = useCallback((model: { provider: string, modelId: string, mode?: string }) => {
@@ -63,21 +69,23 @@ const useConfig = (id: string, payload: QuestionClassifierNodeType) => {
       draft.model.name = model.modelId
       draft.model.mode = model.mode!
     })
+    isHandlingModelChangeRef.current = true
     setInputs(newInputs)
-    setModelChanged(true)
   }, [setInputs])
 
   useEffect(() => {
     if (currentProvider?.provider && currentModel?.model && !model.provider) {
-      handleModelChanged({
-        provider: currentProvider?.provider,
-        modelId: currentModel?.model,
-        mode: currentModel?.model_properties?.mode as string,
+      startTransition(() => {
+        handleModelChanged({
+          provider: currentProvider?.provider,
+          modelId: currentModel?.model,
+          mode: currentModel?.model_properties?.mode as string | undefined,
+        })
       })
     }
   }, [model.provider, currentProvider, currentModel, handleModelChanged])
 
-  const handleCompletionParamsChange = useCallback((newParams: Record<string, any>) => {
+  const handleCompletionParamsChange = useCallback((newParams: Record<string, unknown>) => {
     const newInputs = produce(inputs, (draft) => {
       draft.model.completion_params = newParams
     })
@@ -86,11 +94,13 @@ const useConfig = (id: string, payload: QuestionClassifierNodeType) => {
 
   // change to vision model to set vision enabled, else disabled
   useEffect(() => {
-    if (!modelChanged)
+    if (!isHandlingModelChangeRef.current)
       return
-    setModelChanged(false)
-    handleVisionConfigAfterModelChanged()
-  }, [isVisionModel, modelChanged])
+    isHandlingModelChangeRef.current = false
+    startTransition(() => {
+      handleVisionConfigAfterModelChanged()
+    })
+  }, [handleVisionConfigAfterModelChanged, isVisionModel])
 
   const handleQueryVarChange = useCallback((newVar: ValueSelector | string) => {
     const newInputs = produce(inputs, (draft) => {
@@ -101,22 +111,58 @@ const useConfig = (id: string, payload: QuestionClassifierNodeType) => {
 
   useEffect(() => {
     const isReady = defaultConfig && Object.keys(defaultConfig).length > 0
-    if (isReady) {
-      let query_variable_selector: ValueSelector = []
-      if (isChatMode && inputs.query_variable_selector.length === 0 && startNodeId)
-        query_variable_selector = [startNodeId, 'sys.query']
-      setInputs({
-        ...inputs,
-        ...defaultConfig,
-        query_variable_selector: inputs.query_variable_selector.length > 0 ? inputs.query_variable_selector : query_variable_selector,
-      })
-    }
-  }, [defaultConfig])
+    if (!isReady)
+      return
 
-  const handleClassesChange = useCallback((newClasses: any) => {
+    const currentInputs = inputRef.current
+    let shouldUpdate = false
+
+    const nextInputs = produce(currentInputs, (draft) => {
+      if (!draft.model)
+        draft.model = defaultConfig.model
+
+      if (!draft.classes)
+        draft.classes = defaultConfig.classes
+
+      if (!draft._targetBranches)
+        draft._targetBranches = defaultConfig._targetBranches
+
+      if (!draft.vision)
+        draft.vision = defaultConfig.vision
+
+      if (draft.query_variable_selector.length === 0 && isChatMode && startNodeId) {
+        draft.query_variable_selector = [startNodeId, 'sys.query']
+        shouldUpdate = true
+      }
+
+      if (!currentInputs.model && defaultConfig.model)
+        shouldUpdate = true
+
+      if (!currentInputs.classes && defaultConfig.classes)
+        shouldUpdate = true
+
+      if (!currentInputs._targetBranches && defaultConfig._targetBranches)
+        shouldUpdate = true
+
+      if (!currentInputs.vision && defaultConfig.vision)
+        shouldUpdate = true
+    })
+
+    if (!shouldUpdate)
+      return
+
+    startTransition(() => {
+      setInputs(nextInputs)
+    })
+  }, [defaultConfig, isChatMode, setInputs, startNodeId])
+
+  const handleClassesChange = useCallback((newClasses: Topic[]) => {
     const newInputs = produce(inputs, (draft) => {
       draft.classes = newClasses
-      draft._targetBranches = newClasses
+      draft._targetBranches = newClasses.map((item: Topic) => ({
+        id: item.id,
+        name: item.name,
+      }))
     })
     setInputs(newInputs)
   }, [inputs, setInputs])
@@ -170,7 +216,13 @@ const useConfig = (id: string, payload: QuestionClassifierNodeType) => {
 
   const handleSortTopic = useCallback((newTopics: (Topic & { id: string })[]) => {
     const newInputs = produce(inputs, (draft) => {
-      draft.classes = newTopics.filter(Boolean).map(item => ({
+      const sortedTopics = newTopics.filter(Boolean)
+      draft.classes = sortedTopics.map(item => ({
+        id: item.id,
+        name: item.name,
+        label: item.label,
+      }))
+      draft._targetBranches = sortedTopics.map(item => ({
         id: item.id,
         name: item.name,
       }))
diff --git a/web/app/components/workflow/workflow-preview/components/nodes/question-classifier/__tests__/node.spec.tsx b/web/app/components/workflow/workflow-preview/components/nodes/question-classifier/__tests__/node.spec.tsx
index 82cede1d85..463c4dd43d 100644
--- a/web/app/components/workflow/workflow-preview/components/nodes/question-classifier/__tests__/node.spec.tsx
+++ b/web/app/components/workflow/workflow-preview/components/nodes/question-classifier/__tests__/node.spec.tsx
@@ -28,7 +28,7 @@ describe('workflow preview question classifier node', () => {
         title: 'Classifier',
         desc: '',
         classes: [
-          { id: 'class-1', name: 'Billing' },
+          { id: 'class-1', name: 'Billing', label: 'Billing label' },
           { id: 'class-2', name: 'Support' },
         ],
       } as never,
@@ -38,7 +38,8 @@ describe('workflow preview question classifier node', () => {
       <Node {...props} />,
     )
 
-    expect(getByText('workflow.nodes.questionClassifiers.class 1')).toBeInTheDocument()
+    expect(getByText('Billing label')).toBeInTheDocument()
+    expect(getByText('CLASS 2')).toBeInTheDocument()
     expect(container.querySelector('[data-handleid="class-1"]')).toBeInTheDocument()
     expect(container.querySelector('[data-handleid="class-2"]')).toBeInTheDocument()
   })
diff --git a/web/app/components/workflow/workflow-preview/components/nodes/question-classifier/node.tsx b/web/app/components/workflow/workflow-preview/components/nodes/question-classifier/node.tsx
index d0e23f7823..9884990309 100644
--- a/web/app/components/workflow/workflow-preview/components/nodes/question-classifier/node.tsx
+++ b/web/app/components/workflow/workflow-preview/components/nodes/question-classifier/node.tsx
@@ -4,10 +4,9 @@ import type { QuestionClassifierNodeType } from '@/app/components/workflow/nodes
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import InfoPanel from '@/app/components/workflow/nodes/_base/components/info-panel'
+import { getDisplayClassLabel } from '@/app/components/workflow/nodes/question-classifier/components/class-label-utils'
 import { NodeSourceHandle } from '../../node-handle'
 
-const i18nPrefix = 'nodes.questionClassifiers'
-
 const Node: FC<NodeProps<QuestionClassifierNodeType>> = (props) => {
   const { t } = useTranslation()
   const { data } = props
@@ -24,7 +23,7 @@ const Node: FC<NodeProps<QuestionClassifierNodeType>> = (props) => {
                 className="relative"
               >
                 <InfoPanel
-                  title={`${t(`${i18nPrefix}.class`, { ns: 'workflow' })} ${index + 1}`}
+                  title={getDisplayClassLabel(topic.label, index + 1, t)}
                   content=""
                 />
                 <NodeSourceHandle
diff --git a/web/i18n/en-US/workflow.json b/web/i18n/en-US/workflow.json
index 3bb285d501..7b1ad1605a 100644
--- a/web/i18n/en-US/workflow.json
+++ b/web/i18n/en-US/workflow.json
@@ -897,13 +897,17 @@
   "nodes.questionClassifiers.advancedSetting": "Advanced Setting",
   "nodes.questionClassifiers.class": "Class",
   "nodes.questionClassifiers.classNamePlaceholder": "Write your class name",
+  "nodes.questionClassifiers.defaultLabel": "CLASS {{index}}",
   "nodes.questionClassifiers.inputVars": "Input Variables",
   "nodes.questionClassifiers.instruction": "Instruction",
   "nodes.questionClassifiers.instructionPlaceholder": "Write your instruction",
   "nodes.questionClassifiers.instructionTip": "Input additional instructions to help the question classifier better understand how to categorize questions.",
+  "nodes.questionClassifiers.labelEditorAriaLabel": "Class label editor",
   "nodes.questionClassifiers.model": "model",
+  "nodes.questionClassifiers.outputVars.classLabel": "Class Label",
   "nodes.questionClassifiers.outputVars.className": "Class Name",
   "nodes.questionClassifiers.outputVars.usage": "Model Usage Information",
+  "nodes.questionClassifiers.renameHint": "Double-click class title to rename",
   "nodes.questionClassifiers.topicName": "Topic Name",
   "nodes.questionClassifiers.topicPlaceholder": "Write your topic name",
   "nodes.start.builtInVar": "Built-in Variables",
diff --git a/web/i18n/ja-JP/workflow.json b/web/i18n/ja-JP/workflow.json
index 1154a5baba..f00d49f6bf 100644
--- a/web/i18n/ja-JP/workflow.json
+++ b/web/i18n/ja-JP/workflow.json
@@ -897,13 +897,17 @@
   "nodes.questionClassifiers.advancedSetting": "高度な設定",
   "nodes.questionClassifiers.class": "クラス",
   "nodes.questionClassifiers.classNamePlaceholder": "クラス名を入力してください",
+  "nodes.questionClassifiers.defaultLabel": "クラス {{index}}",
   "nodes.questionClassifiers.inputVars": "入力変数",
   "nodes.questionClassifiers.instruction": "指示",
   "nodes.questionClassifiers.instructionPlaceholder": "指示を入力してください",
   "nodes.questionClassifiers.instructionTip": "質問分類器が質問をどのように分類するかをよりよく理解するための追加の指示を入力します。",
+  "nodes.questionClassifiers.labelEditorAriaLabel": "クラスラベルエディター",
   "nodes.questionClassifiers.model": "モデル",
+  "nodes.questionClassifiers.outputVars.classLabel": "クラスラベル",
   "nodes.questionClassifiers.outputVars.className": "クラス名",
   "nodes.questionClassifiers.outputVars.usage": "モデル使用量",
+  "nodes.questionClassifiers.renameHint": "クラスタイトルをダブルクリックして名前を変更",
   "nodes.questionClassifiers.topicName": "トピック名",
   "nodes.questionClassifiers.topicPlaceholder": "トピック名を入力してください",
   "nodes.start.builtInVar": "組み込み変数",
diff --git a/web/i18n/zh-Hans/workflow.json b/web/i18n/zh-Hans/workflow.json
index ac3a27af11..6536f5ccdc 100644
--- a/web/i18n/zh-Hans/workflow.json
+++ b/web/i18n/zh-Hans/workflow.json
@@ -897,13 +897,17 @@
   "nodes.questionClassifiers.advancedSetting": "高级设置",
   "nodes.questionClassifiers.class": "分类",
   "nodes.questionClassifiers.classNamePlaceholder": "输入你的分类名称",
+  "nodes.questionClassifiers.defaultLabel": "分类 {{index}}",
   "nodes.questionClassifiers.inputVars": "输入变量",
   "nodes.questionClassifiers.instruction": "指令",
   "nodes.questionClassifiers.instructionPlaceholder": "在这里输入你的指令",
   "nodes.questionClassifiers.instructionTip": "你可以输入额外的附加指令，帮助问题分类器更好的理解如何分类",
+  "nodes.questionClassifiers.labelEditorAriaLabel": "分类标签编辑器",
   "nodes.questionClassifiers.model": "模型",
+  "nodes.questionClassifiers.outputVars.classLabel": "分类标签",
   "nodes.questionClassifiers.outputVars.className": "分类名称",
   "nodes.questionClassifiers.outputVars.usage": "模型用量信息",
+  "nodes.questionClassifiers.renameHint": "双击分类标题以重命名",
   "nodes.questionClassifiers.topicName": "主题内容",
   "nodes.questionClassifiers.topicPlaceholder": "在这里输入你的主题内容",
   "nodes.start.builtInVar": "内置变量",
diff --git a/web/i18n/zh-Hant/workflow.json b/web/i18n/zh-Hant/workflow.json
index 9d296250db..9544a4ba2e 100644
--- a/web/i18n/zh-Hant/workflow.json
+++ b/web/i18n/zh-Hant/workflow.json
@@ -897,13 +897,17 @@
   "nodes.questionClassifiers.advancedSetting": "高級設置",
   "nodes.questionClassifiers.class": "分類",
   "nodes.questionClassifiers.classNamePlaceholder": "輸入你的分類名稱",
+  "nodes.questionClassifiers.defaultLabel": "分類 {{index}}",
   "nodes.questionClassifiers.inputVars": "輸入變數",
   "nodes.questionClassifiers.instruction": "指令",
   "nodes.questionClassifiers.instructionPlaceholder": "在這裡輸入你的指令",
   "nodes.questionClassifiers.instructionTip": "你可以輸入額外的附加指令，幫助問題分類器更好的理解如何分類",
+  "nodes.questionClassifiers.labelEditorAriaLabel": "分類標籤編輯器",
   "nodes.questionClassifiers.model": "模型",
+  "nodes.questionClassifiers.outputVars.classLabel": "分類標籤",
   "nodes.questionClassifiers.outputVars.className": "分類名稱",
   "nodes.questionClassifiers.outputVars.usage": "模型用量信息",
+  "nodes.questionClassifiers.renameHint": "雙擊分類標題以重新命名",
   "nodes.questionClassifiers.topicName": "主題內容",
   "nodes.questionClassifiers.topicPlaceholder": "在這裡輸入你的主題內容",
   "nodes.start.builtInVar": "內置變數",

From 9a2bea9287af34e62a78fe9582a96ce7131bf508 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 10 May 2026 21:23:31 +0800
Subject: [PATCH 12/13] chore(i18n): sync translations with en-US (#35994)

Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com>
---
 web/i18n/ar-TN/workflow.json | 4 ++++
 web/i18n/de-DE/workflow.json | 4 ++++
 web/i18n/es-ES/workflow.json | 4 ++++
 web/i18n/fa-IR/workflow.json | 4 ++++
 web/i18n/fr-FR/workflow.json | 4 ++++
 web/i18n/hi-IN/workflow.json | 4 ++++
 web/i18n/id-ID/workflow.json | 4 ++++
 web/i18n/it-IT/workflow.json | 4 ++++
 web/i18n/ko-KR/workflow.json | 4 ++++
 web/i18n/nl-NL/workflow.json | 4 ++++
 web/i18n/pl-PL/workflow.json | 4 ++++
 web/i18n/pt-BR/workflow.json | 4 ++++
 web/i18n/ro-RO/workflow.json | 4 ++++
 web/i18n/ru-RU/workflow.json | 4 ++++
 web/i18n/sl-SI/workflow.json | 4 ++++
 web/i18n/th-TH/workflow.json | 4 ++++
 web/i18n/tr-TR/workflow.json | 4 ++++
 web/i18n/uk-UA/workflow.json | 4 ++++
 web/i18n/vi-VN/workflow.json | 4 ++++
 19 files changed, 76 insertions(+)

diff --git a/web/i18n/ar-TN/workflow.json b/web/i18n/ar-TN/workflow.json
index cc6c533ca1..4df2de3173 100644
--- a/web/i18n/ar-TN/workflow.json
+++ b/web/i18n/ar-TN/workflow.json
@@ -897,13 +897,17 @@
   "nodes.questionClassifiers.advancedSetting": "إعدادات متقدمة",
   "nodes.questionClassifiers.class": "فئة",
   "nodes.questionClassifiers.classNamePlaceholder": "اكتب اسم الفئة الخاصة بك",
+  "nodes.questionClassifiers.defaultLabel": "الفئة {{index}}",
   "nodes.questionClassifiers.inputVars": "متغيرات الإدخال",
   "nodes.questionClassifiers.instruction": "تعليمات",
   "nodes.questionClassifiers.instructionPlaceholder": "اكتب تعليماتك",
   "nodes.questionClassifiers.instructionTip": "أدخل تعليمات إضافية لمساعدة مصنف الأسئلة على فهم كيفية تصنيف الأسئلة بشكل أفضل.",
+  "nodes.questionClassifiers.labelEditorAriaLabel": "محرر تسمية الفئة",
   "nodes.questionClassifiers.model": "النموذج",
+  "nodes.questionClassifiers.outputVars.classLabel": "تسمية الفئة",
   "nodes.questionClassifiers.outputVars.className": "اسم الفئة",
   "nodes.questionClassifiers.outputVars.usage": "معلومات استخدام النموذج",
+  "nodes.questionClassifiers.renameHint": "انقر نقراً مزدوجاً على عنوان الفئة لإعادة التسمية",
   "nodes.questionClassifiers.topicName": "اسم الموضوع",
   "nodes.questionClassifiers.topicPlaceholder": "اكتب اسم الموضوع الخاص بك",
   "nodes.start.builtInVar": "المتغيرات المدمجة",
diff --git a/web/i18n/de-DE/workflow.json b/web/i18n/de-DE/workflow.json
index 426c023259..e00d300f01 100644
--- a/web/i18n/de-DE/workflow.json
+++ b/web/i18n/de-DE/workflow.json
@@ -897,13 +897,17 @@
   "nodes.questionClassifiers.advancedSetting": "Erweiterte Einstellung",
   "nodes.questionClassifiers.class": "Klasse",
   "nodes.questionClassifiers.classNamePlaceholder": "Geben Sie Ihren Klassennamen ein",
+  "nodes.questionClassifiers.defaultLabel": "KLASSE {{index}}",
   "nodes.questionClassifiers.inputVars": "Eingabevariablen",
   "nodes.questionClassifiers.instruction": "Anweisung",
   "nodes.questionClassifiers.instructionPlaceholder": "Geben Sie Ihre Anweisung ein",
   "nodes.questionClassifiers.instructionTip": "Geben Sie zusätzliche Anweisungen ein, um dem Fragenklassifizierer zu helfen, besser zu verstehen, wie Fragen kategorisiert werden sollen.",
+  "nodes.questionClassifiers.labelEditorAriaLabel": "Klassenbeschriftungseditor",
   "nodes.questionClassifiers.model": "Modell",
+  "nodes.questionClassifiers.outputVars.classLabel": "Klassenbezeichnung",
   "nodes.questionClassifiers.outputVars.className": "Klassennamen",
   "nodes.questionClassifiers.outputVars.usage": "Nutzungsinformationen des Modells",
+  "nodes.questionClassifiers.renameHint": "Doppelklicken Sie auf den Klassentitel, um ihn umzubenennen",
   "nodes.questionClassifiers.topicName": "Themenname",
   "nodes.questionClassifiers.topicPlaceholder": "Geben Sie Ihren Themennamen ein",
   "nodes.start.builtInVar": "Eingebaute Variablen",
diff --git a/web/i18n/es-ES/workflow.json b/web/i18n/es-ES/workflow.json
index c55ffdfc1e..c12a6f5cdd 100644
--- a/web/i18n/es-ES/workflow.json
+++ b/web/i18n/es-ES/workflow.json
@@ -897,13 +897,17 @@
   "nodes.questionClassifiers.advancedSetting": "Configuración avanzada",
   "nodes.questionClassifiers.class": "Clase",
   "nodes.questionClassifiers.classNamePlaceholder": "Escribe el nombre de tu clase",
+  "nodes.questionClassifiers.defaultLabel": "CLASE {{index}}",
   "nodes.questionClassifiers.inputVars": "Variables de entrada",
   "nodes.questionClassifiers.instruction": "Instrucción",
   "nodes.questionClassifiers.instructionPlaceholder": "Write your instruction",
   "nodes.questionClassifiers.instructionTip": "Input additional instructions to help the question classifier better understand how to categorize questions.",
+  "nodes.questionClassifiers.labelEditorAriaLabel": "Editor de etiqueta de clase",
   "nodes.questionClassifiers.model": "modelo",
+  "nodes.questionClassifiers.outputVars.classLabel": "Etiqueta de clase",
   "nodes.questionClassifiers.outputVars.className": "Nombre de la clase",
   "nodes.questionClassifiers.outputVars.usage": "Información de uso del modelo",
+  "nodes.questionClassifiers.renameHint": "Haz doble clic en el título de la clase para renombrar",
   "nodes.questionClassifiers.topicName": "Nombre del tema",
   "nodes.questionClassifiers.topicPlaceholder": "Escribe el nombre de tu tema",
   "nodes.start.builtInVar": "Variables incorporadas",
diff --git a/web/i18n/fa-IR/workflow.json b/web/i18n/fa-IR/workflow.json
index c23c781a04..d9cb4c2c40 100644
--- a/web/i18n/fa-IR/workflow.json
+++ b/web/i18n/fa-IR/workflow.json
@@ -897,13 +897,17 @@
   "nodes.questionClassifiers.advancedSetting": "تنظیمات پیشرفته",
   "nodes.questionClassifiers.class": "کلاس",
   "nodes.questionClassifiers.classNamePlaceholder": "نام کلاس را بنویسید",
+  "nodes.questionClassifiers.defaultLabel": "کلاس {{index}}",
   "nodes.questionClassifiers.inputVars": "متغیرهای ورودی",
   "nodes.questionClassifiers.instruction": "دستورالعمل",
   "nodes.questionClassifiers.instructionPlaceholder": "دستورالعمل خود را بنویسید",
   "nodes.questionClassifiers.instructionTip": "دستورالعمل اضافی برای کمک به مدل در دسته‌بندی دقیق‌تر سؤالات.",
+  "nodes.questionClassifiers.labelEditorAriaLabel": "ویرایشگر برچسب کلاس",
   "nodes.questionClassifiers.model": "مدل",
+  "nodes.questionClassifiers.outputVars.classLabel": "برچسب کلاس",
   "nodes.questionClassifiers.outputVars.className": "نام کلاس",
   "nodes.questionClassifiers.outputVars.usage": "اطلاعات مصرف مدل",
+  "nodes.questionClassifiers.renameHint": "برای تغییر نام، دوبار روی عنوان کلاس کلیک کنید",
   "nodes.questionClassifiers.topicName": "نام موضوع",
   "nodes.questionClassifiers.topicPlaceholder": "نام موضوع را بنویسید",
   "nodes.start.builtInVar": "متغیرهای داخلی",
diff --git a/web/i18n/fr-FR/workflow.json b/web/i18n/fr-FR/workflow.json
index 727c3a91e6..cabed62c22 100644
--- a/web/i18n/fr-FR/workflow.json
+++ b/web/i18n/fr-FR/workflow.json
@@ -897,13 +897,17 @@
   "nodes.questionClassifiers.advancedSetting": "Paramètre avancé",
   "nodes.questionClassifiers.class": "Classe",
   "nodes.questionClassifiers.classNamePlaceholder": "Écrivez le nom de votre classe",
+  "nodes.questionClassifiers.defaultLabel": "CLASSE {{index}}",
   "nodes.questionClassifiers.inputVars": "Variables de saisie",
   "nodes.questionClassifiers.instruction": "Instruction",
   "nodes.questionClassifiers.instructionPlaceholder": "Écrivez votre instruction",
   "nodes.questionClassifiers.instructionTip": "Entrez des instructions supplémentaires pour aider le classificateur de questions à mieux comprendre comment catégoriser les questions.",
+  "nodes.questionClassifiers.labelEditorAriaLabel": "Éditeur de libellé de classe",
   "nodes.questionClassifiers.model": "modèle",
+  "nodes.questionClassifiers.outputVars.classLabel": "Libellé de classe",
   "nodes.questionClassifiers.outputVars.className": "Nom de la classe",
   "nodes.questionClassifiers.outputVars.usage": "Informations sur l'utilisation du modèle",
+  "nodes.questionClassifiers.renameHint": "Double-cliquez sur le titre de la classe pour renommer",
   "nodes.questionClassifiers.topicName": "Nom du sujet",
   "nodes.questionClassifiers.topicPlaceholder": "Écrivez le nom de votre sujet",
   "nodes.start.builtInVar": "Variables intégrées",
diff --git a/web/i18n/hi-IN/workflow.json b/web/i18n/hi-IN/workflow.json
index 8b5ea73535..d16b9d0274 100644
--- a/web/i18n/hi-IN/workflow.json
+++ b/web/i18n/hi-IN/workflow.json
@@ -897,13 +897,17 @@
   "nodes.questionClassifiers.advancedSetting": "उन्नत सेटिंग",
   "nodes.questionClassifiers.class": "क्लास",
   "nodes.questionClassifiers.classNamePlaceholder": "अपना क्लास नाम लिखें",
+  "nodes.questionClassifiers.defaultLabel": "क्लास {{index}}",
   "nodes.questionClassifiers.inputVars": "इनपुट वेरिएबल्स",
   "nodes.questionClassifiers.instruction": "निर्देश",
   "nodes.questionClassifiers.instructionPlaceholder": "अपना निर्देश लिखें",
   "nodes.questionClassifiers.instructionTip": "प्रश्न वर्गीकरणकर्ता को प्रश्नों को वर्गीकृत करने के तरीके को समझने में मदद करने के लिए अतिरिक्त निर्देश दें।",
+  "nodes.questionClassifiers.labelEditorAriaLabel": "क्लास लेबल संपादक",
   "nodes.questionClassifiers.model": "मॉडल",
+  "nodes.questionClassifiers.outputVars.classLabel": "क्लास लेबल",
   "nodes.questionClassifiers.outputVars.className": "क्लास नाम",
   "nodes.questionClassifiers.outputVars.usage": "मॉडल उपयोग जानकारी",
+  "nodes.questionClassifiers.renameHint": "नाम बदलने के लिए क्लास शीर्षक पर डबल-क्लिक करें",
   "nodes.questionClassifiers.topicName": "विषय नाम",
   "nodes.questionClassifiers.topicPlaceholder": "अपना विषय नाम लिखें",
   "nodes.start.builtInVar": "निर्मित वेरिएबल्स",
diff --git a/web/i18n/id-ID/workflow.json b/web/i18n/id-ID/workflow.json
index 058c15334b..dffc4ac5bf 100644
--- a/web/i18n/id-ID/workflow.json
+++ b/web/i18n/id-ID/workflow.json
@@ -897,13 +897,17 @@
   "nodes.questionClassifiers.advancedSetting": "Pengaturan Lanjutan",
   "nodes.questionClassifiers.class": "Kelas",
   "nodes.questionClassifiers.classNamePlaceholder": "Tulis nama kelas Anda",
+  "nodes.questionClassifiers.defaultLabel": "KELAS {{index}}",
   "nodes.questionClassifiers.inputVars": "Variabel Masukan",
   "nodes.questionClassifiers.instruction": "Ajaran",
   "nodes.questionClassifiers.instructionPlaceholder": "Tulis instruksi Anda",
   "nodes.questionClassifiers.instructionTip": "Masukkan instruksi tambahan untuk membantu pengklasifikasi pertanyaan lebih memahami cara mengkategorikan pertanyaan.",
+  "nodes.questionClassifiers.labelEditorAriaLabel": "Editor label kelas",
   "nodes.questionClassifiers.model": "pola",
+  "nodes.questionClassifiers.outputVars.classLabel": "Label Kelas",
   "nodes.questionClassifiers.outputVars.className": "Nama Kelas",
   "nodes.questionClassifiers.outputVars.usage": "Informasi Penggunaan Model",
+  "nodes.questionClassifiers.renameHint": "Klik dua kali judul kelas untuk mengganti nama",
   "nodes.questionClassifiers.topicName": "Nama Topik",
   "nodes.questionClassifiers.topicPlaceholder": "Tulis nama topik Anda",
   "nodes.start.builtInVar": "Variabel bawaan",
diff --git a/web/i18n/it-IT/workflow.json b/web/i18n/it-IT/workflow.json
index fbd3041fb9..fc86bf1b2f 100644
--- a/web/i18n/it-IT/workflow.json
+++ b/web/i18n/it-IT/workflow.json
@@ -897,13 +897,17 @@
   "nodes.questionClassifiers.advancedSetting": "Impostazione Avanzata",
   "nodes.questionClassifiers.class": "Classe",
   "nodes.questionClassifiers.classNamePlaceholder": "Scrivi il nome della tua classe",
+  "nodes.questionClassifiers.defaultLabel": "CLASSE {{index}}",
   "nodes.questionClassifiers.inputVars": "Variabili di Input",
   "nodes.questionClassifiers.instruction": "Istruzione",
   "nodes.questionClassifiers.instructionPlaceholder": "Scrivi la tua istruzione",
   "nodes.questionClassifiers.instructionTip": "Inserisci istruzioni aggiuntive per aiutare il classificatore di domande a capire meglio come categorizzare le domande.",
+  "nodes.questionClassifiers.labelEditorAriaLabel": "Editor etichetta classe",
   "nodes.questionClassifiers.model": "modello",
+  "nodes.questionClassifiers.outputVars.classLabel": "Etichetta classe",
   "nodes.questionClassifiers.outputVars.className": "Nome Classe",
   "nodes.questionClassifiers.outputVars.usage": "Informazioni sull'utilizzo del modello",
+  "nodes.questionClassifiers.renameHint": "Fai doppio clic sul titolo della classe per rinominare",
   "nodes.questionClassifiers.topicName": "Nome Argomento",
   "nodes.questionClassifiers.topicPlaceholder": "Scrivi il nome del tuo argomento",
   "nodes.start.builtInVar": "Variabili Integrate",
diff --git a/web/i18n/ko-KR/workflow.json b/web/i18n/ko-KR/workflow.json
index a80c34b294..06225bb1a1 100644
--- a/web/i18n/ko-KR/workflow.json
+++ b/web/i18n/ko-KR/workflow.json
@@ -897,13 +897,17 @@
   "nodes.questionClassifiers.advancedSetting": "고급 설정",
   "nodes.questionClassifiers.class": "클래스",
   "nodes.questionClassifiers.classNamePlaceholder": "클래스 이름을 작성하세요",
+  "nodes.questionClassifiers.defaultLabel": "클래스 {{index}}",
   "nodes.questionClassifiers.inputVars": "입력 변수",
   "nodes.questionClassifiers.instruction": "지시",
   "nodes.questionClassifiers.instructionPlaceholder": "지시를 작성하세요",
   "nodes.questionClassifiers.instructionTip": "질문 분류기가 질문을 더 잘 분류할 수 있도록 추가 지시를 입력하세요.",
+  "nodes.questionClassifiers.labelEditorAriaLabel": "클래스 레이블 편집기",
   "nodes.questionClassifiers.model": "모델",
+  "nodes.questionClassifiers.outputVars.classLabel": "클래스 레이블",
   "nodes.questionClassifiers.outputVars.className": "클래스 이름",
   "nodes.questionClassifiers.outputVars.usage": "모델 사용 정보",
+  "nodes.questionClassifiers.renameHint": "클래스 제목을 더블 클릭하여 이름 변경",
   "nodes.questionClassifiers.topicName": "주제 이름",
   "nodes.questionClassifiers.topicPlaceholder": "주제 이름을 작성하세요",
   "nodes.start.builtInVar": "내장 변수",
diff --git a/web/i18n/nl-NL/workflow.json b/web/i18n/nl-NL/workflow.json
index c8e8753eb4..86b6b89ea5 100644
--- a/web/i18n/nl-NL/workflow.json
+++ b/web/i18n/nl-NL/workflow.json
@@ -897,13 +897,17 @@
   "nodes.questionClassifiers.advancedSetting": "Advanced Setting",
   "nodes.questionClassifiers.class": "Class",
   "nodes.questionClassifiers.classNamePlaceholder": "Write your class name",
+  "nodes.questionClassifiers.defaultLabel": "KLASSE {{index}}",
   "nodes.questionClassifiers.inputVars": "Input Variables",
   "nodes.questionClassifiers.instruction": "Instruction",
   "nodes.questionClassifiers.instructionPlaceholder": "Write your instruction",
   "nodes.questionClassifiers.instructionTip": "Input additional instructions to help the question classifier better understand how to categorize questions.",
+  "nodes.questionClassifiers.labelEditorAriaLabel": "Klasse-labeleditor",
   "nodes.questionClassifiers.model": "model",
+  "nodes.questionClassifiers.outputVars.classLabel": "Klassenlabel",
   "nodes.questionClassifiers.outputVars.className": "Class Name",
   "nodes.questionClassifiers.outputVars.usage": "Model Usage Information",
+  "nodes.questionClassifiers.renameHint": "Dubbelklik op de klassentitel om de naam te wijzigen",
   "nodes.questionClassifiers.topicName": "Topic Name",
   "nodes.questionClassifiers.topicPlaceholder": "Write your topic name",
   "nodes.start.builtInVar": "Built-in Variables",
diff --git a/web/i18n/pl-PL/workflow.json b/web/i18n/pl-PL/workflow.json
index 805960a851..1d4ac0ec8a 100644
--- a/web/i18n/pl-PL/workflow.json
+++ b/web/i18n/pl-PL/workflow.json
@@ -897,13 +897,17 @@
   "nodes.questionClassifiers.advancedSetting": "Zaawansowane ustawienia",
   "nodes.questionClassifiers.class": "Klasa",
   "nodes.questionClassifiers.classNamePlaceholder": "Napisz nazwę swojej klasy",
+  "nodes.questionClassifiers.defaultLabel": "KLASA {{index}}",
   "nodes.questionClassifiers.inputVars": "Zmienne wejściowe",
   "nodes.questionClassifiers.instruction": "Instrukcja",
   "nodes.questionClassifiers.instructionPlaceholder": "Napisz swoją instrukcję",
   "nodes.questionClassifiers.instructionTip": "Wprowadź dodatkowe instrukcje, aby pomóc klasyfikatorowi pytań lepiej zrozumieć, jak kategoryzować pytania.",
+  "nodes.questionClassifiers.labelEditorAriaLabel": "Edytor etykiety klasy",
   "nodes.questionClassifiers.model": "model",
+  "nodes.questionClassifiers.outputVars.classLabel": "Etykieta klasy",
   "nodes.questionClassifiers.outputVars.className": "Nazwa klasy",
   "nodes.questionClassifiers.outputVars.usage": "Informacje o użyciu modelu",
+  "nodes.questionClassifiers.renameHint": "Kliknij dwukrotnie tytuł klasy, aby zmienić nazwę",
   "nodes.questionClassifiers.topicName": "Nazwa tematu",
   "nodes.questionClassifiers.topicPlaceholder": "Napisz nazwę swojego tematu",
   "nodes.start.builtInVar": "Wbudowane zmienne",
diff --git a/web/i18n/pt-BR/workflow.json b/web/i18n/pt-BR/workflow.json
index de6c882e0c..77209ffaf1 100644
--- a/web/i18n/pt-BR/workflow.json
+++ b/web/i18n/pt-BR/workflow.json
@@ -897,13 +897,17 @@
   "nodes.questionClassifiers.advancedSetting": "Configuração avançada",
   "nodes.questionClassifiers.class": "Classe",
   "nodes.questionClassifiers.classNamePlaceholder": "Escreva o nome da sua classe",
+  "nodes.questionClassifiers.defaultLabel": "CLASSE {{index}}",
   "nodes.questionClassifiers.inputVars": "Variáveis de entrada",
   "nodes.questionClassifiers.instruction": "Instrução",
   "nodes.questionClassifiers.instructionPlaceholder": "Escreva sua instrução",
   "nodes.questionClassifiers.instructionTip": "Insira instruções adicionais para ajudar o classificador de perguntas a entender melhor como categorizar perguntas.",
+  "nodes.questionClassifiers.labelEditorAriaLabel": "Editor de rótulo de classe",
   "nodes.questionClassifiers.model": "modelo",
+  "nodes.questionClassifiers.outputVars.classLabel": "Rótulo da classe",
   "nodes.questionClassifiers.outputVars.className": "Nome da classe",
   "nodes.questionClassifiers.outputVars.usage": "Informações de uso do modelo",
+  "nodes.questionClassifiers.renameHint": "Clique duas vezes no título da classe para renomear",
   "nodes.questionClassifiers.topicName": "Nome do tópico",
   "nodes.questionClassifiers.topicPlaceholder": "Escreva o nome do seu tópico",
   "nodes.start.builtInVar": "Variáveis integradas",
diff --git a/web/i18n/ro-RO/workflow.json b/web/i18n/ro-RO/workflow.json
index 7b551294e8..2151236135 100644
--- a/web/i18n/ro-RO/workflow.json
+++ b/web/i18n/ro-RO/workflow.json
@@ -897,13 +897,17 @@
   "nodes.questionClassifiers.advancedSetting": "Setare avansată",
   "nodes.questionClassifiers.class": "Clasă",
   "nodes.questionClassifiers.classNamePlaceholder": "Scrieți numele clasei",
+  "nodes.questionClassifiers.defaultLabel": "CLASĂ {{index}}",
   "nodes.questionClassifiers.inputVars": "Variabile de intrare",
   "nodes.questionClassifiers.instruction": "Instrucțiune",
   "nodes.questionClassifiers.instructionPlaceholder": "Scrieți instrucțiunea",
   "nodes.questionClassifiers.instructionTip": "Introduceți instrucțiuni suplimentare pentru a ajuta clasificatorul de întrebări să înțeleagă mai bine cum să categorizeze întrebările.",
+  "nodes.questionClassifiers.labelEditorAriaLabel": "Editor etichete clasă",
   "nodes.questionClassifiers.model": "model",
+  "nodes.questionClassifiers.outputVars.classLabel": "Etichetă clasă",
   "nodes.questionClassifiers.outputVars.className": "Nume clasă",
   "nodes.questionClassifiers.outputVars.usage": "Informații de utilizare a modelului",
+  "nodes.questionClassifiers.renameHint": "Faceți dublu clic pe titlul clasei pentru redenumire",
   "nodes.questionClassifiers.topicName": "Nume subiect",
   "nodes.questionClassifiers.topicPlaceholder": "Scrieți numele subiectului",
   "nodes.start.builtInVar": "Variabile integrate",
diff --git a/web/i18n/ru-RU/workflow.json b/web/i18n/ru-RU/workflow.json
index aa5292f1cc..195f8ef988 100644
--- a/web/i18n/ru-RU/workflow.json
+++ b/web/i18n/ru-RU/workflow.json
@@ -897,13 +897,17 @@
   "nodes.questionClassifiers.advancedSetting": "Расширенные настройки",
   "nodes.questionClassifiers.class": "Класс",
   "nodes.questionClassifiers.classNamePlaceholder": "Введите имя вашего класса",
+  "nodes.questionClassifiers.defaultLabel": "КЛАСС {{index}}",
   "nodes.questionClassifiers.inputVars": "Входные переменные",
   "nodes.questionClassifiers.instruction": "Инструкция",
   "nodes.questionClassifiers.instructionPlaceholder": "Введите вашу инструкцию",
   "nodes.questionClassifiers.instructionTip": "Введите дополнительные инструкции, чтобы помочь классификатору вопросов лучше понять, как классифицировать вопросы.",
+  "nodes.questionClassifiers.labelEditorAriaLabel": "Редактор метки класса",
   "nodes.questionClassifiers.model": "модель",
+  "nodes.questionClassifiers.outputVars.classLabel": "Метка класса",
   "nodes.questionClassifiers.outputVars.className": "Имя класса",
   "nodes.questionClassifiers.outputVars.usage": "Информация об использовании модели",
+  "nodes.questionClassifiers.renameHint": "Дважды щёлкните по заголовку класса для переименования",
   "nodes.questionClassifiers.topicName": "Название темы",
   "nodes.questionClassifiers.topicPlaceholder": "Введите название вашей темы",
   "nodes.start.builtInVar": "Встроенные переменные",
diff --git a/web/i18n/sl-SI/workflow.json b/web/i18n/sl-SI/workflow.json
index a7c2914626..3c3f4667f6 100644
--- a/web/i18n/sl-SI/workflow.json
+++ b/web/i18n/sl-SI/workflow.json
@@ -897,13 +897,17 @@
   "nodes.questionClassifiers.advancedSetting": "Napredno nastavitev",
   "nodes.questionClassifiers.class": "Razred",
   "nodes.questionClassifiers.classNamePlaceholder": "Napiši ime svoje razredi",
+  "nodes.questionClassifiers.defaultLabel": "RAZRED {{index}}",
   "nodes.questionClassifiers.inputVars": "Vhodne spremenljivke",
   "nodes.questionClassifiers.instruction": "Navodilo",
   "nodes.questionClassifiers.instructionPlaceholder": "Napišite svoje navodilo",
   "nodes.questionClassifiers.instructionTip": "Vnesite dodatna navodila, ki bodo pomagala klasifikatorju vprašanj bolje razumeti, kako kategorizirati vprašanja.",
+  "nodes.questionClassifiers.labelEditorAriaLabel": "Urejevalnik oznak razreda",
   "nodes.questionClassifiers.model": "model",
+  "nodes.questionClassifiers.outputVars.classLabel": "Oznaka razreda",
   "nodes.questionClassifiers.outputVars.className": "Ime razreda",
   "nodes.questionClassifiers.outputVars.usage": "Informacije o uporabi modela",
+  "nodes.questionClassifiers.renameHint": "Dvokliknite naslov razreda za preimenovanje",
   "nodes.questionClassifiers.topicName": "Ime teme",
   "nodes.questionClassifiers.topicPlaceholder": "Napišite ime svoje teme",
   "nodes.start.builtInVar": "Vgrajene spremenljivke",
diff --git a/web/i18n/th-TH/workflow.json b/web/i18n/th-TH/workflow.json
index d8a9b53f2a..ecf8a1277f 100644
--- a/web/i18n/th-TH/workflow.json
+++ b/web/i18n/th-TH/workflow.json
@@ -897,13 +897,17 @@
   "nodes.questionClassifiers.advancedSetting": "การตั้งค่าขั้นสูง",
   "nodes.questionClassifiers.class": "ประเภท",
   "nodes.questionClassifiers.classNamePlaceholder": "เขียนชื่อชั้นเรียนของคุณ",
+  "nodes.questionClassifiers.defaultLabel": "ชั้นเรียน {{index}}",
   "nodes.questionClassifiers.inputVars": "ตัวแปรอินพุต",
   "nodes.questionClassifiers.instruction": "การสอน",
   "nodes.questionClassifiers.instructionPlaceholder": "เขียนคําแนะนําของคุณ",
   "nodes.questionClassifiers.instructionTip": "ป้อนคําแนะนําเพิ่มเติมเพื่อช่วยให้ตัวจําแนกคําถามเข้าใจวิธีจัดหมวดหมู่คําถามได้ดียิ่งขึ้น",
+  "nodes.questionClassifiers.labelEditorAriaLabel": "โปรแกรมแก้ไขป้ายชั้นเรียน",
   "nodes.questionClassifiers.model": "แบบ",
+  "nodes.questionClassifiers.outputVars.classLabel": "ป้ายชั้นเรียน",
   "nodes.questionClassifiers.outputVars.className": "ชื่อคลาส",
   "nodes.questionClassifiers.outputVars.usage": "ข้อมูลการใช้งานรุ่น",
+  "nodes.questionClassifiers.renameHint": "ดับเบิลคลิกที่ชื่อชั้นเรียนเพื่อเปลี่ยนชื่อ",
   "nodes.questionClassifiers.topicName": "ชื่อหัวข้อ",
   "nodes.questionClassifiers.topicPlaceholder": "เขียนชื่อหัวข้อของคุณ",
   "nodes.start.builtInVar": "ตัวแปรในตัว",
diff --git a/web/i18n/tr-TR/workflow.json b/web/i18n/tr-TR/workflow.json
index af30ebf4ac..018c5a6077 100644
--- a/web/i18n/tr-TR/workflow.json
+++ b/web/i18n/tr-TR/workflow.json
@@ -897,13 +897,17 @@
   "nodes.questionClassifiers.advancedSetting": "Gelişmiş Ayarlar",
   "nodes.questionClassifiers.class": "Sınıf",
   "nodes.questionClassifiers.classNamePlaceholder": "Sınıf adınızı yazın",
+  "nodes.questionClassifiers.defaultLabel": "SINIF {{index}}",
   "nodes.questionClassifiers.inputVars": "Giriş Değişkenleri",
   "nodes.questionClassifiers.instruction": "Talimat",
   "nodes.questionClassifiers.instructionPlaceholder": "Talimatınızı yazın",
   "nodes.questionClassifiers.instructionTip": "Soru sınıflandırıcının soruları nasıl kategorize edeceğini daha iyi anlamasına yardımcı olmak için ek talimatlar girin.",
+  "nodes.questionClassifiers.labelEditorAriaLabel": "Sınıf etiketi düzenleyicisi",
   "nodes.questionClassifiers.model": "model",
+  "nodes.questionClassifiers.outputVars.classLabel": "Sınıf Etiketi",
   "nodes.questionClassifiers.outputVars.className": "Sınıf Adı",
   "nodes.questionClassifiers.outputVars.usage": "Model Kullanım Bilgileri",
+  "nodes.questionClassifiers.renameHint": "Yeniden adlandırmak için sınıf başlığına çift tıklayın",
   "nodes.questionClassifiers.topicName": "Konu Adı",
   "nodes.questionClassifiers.topicPlaceholder": "Konu adınızı yazın",
   "nodes.start.builtInVar": "Yerleşik Değişkenler",
diff --git a/web/i18n/uk-UA/workflow.json b/web/i18n/uk-UA/workflow.json
index 44d527618e..a7687edcc8 100644
--- a/web/i18n/uk-UA/workflow.json
+++ b/web/i18n/uk-UA/workflow.json
@@ -897,13 +897,17 @@
   "nodes.questionClassifiers.advancedSetting": "Розширене налаштування",
   "nodes.questionClassifiers.class": "Клас",
   "nodes.questionClassifiers.classNamePlaceholder": "Напишіть назву вашого класу",
+  "nodes.questionClassifiers.defaultLabel": "КЛАС {{index}}",
   "nodes.questionClassifiers.inputVars": "Вхідні змінні",
   "nodes.questionClassifiers.instruction": "Інструкція",
   "nodes.questionClassifiers.instructionPlaceholder": "Напишіть вашу інструкцію",
   "nodes.questionClassifiers.instructionTip": "Введіть додаткові інструкції, щоб допомогти класифікатору запитань краще зрозуміти, як категоризувати запитання.",
+  "nodes.questionClassifiers.labelEditorAriaLabel": "Редактор мітки класу",
   "nodes.questionClassifiers.model": "модель",
+  "nodes.questionClassifiers.outputVars.classLabel": "Мітка класу",
   "nodes.questionClassifiers.outputVars.className": "Назва класу",
   "nodes.questionClassifiers.outputVars.usage": "Інформація про використання моделі",
+  "nodes.questionClassifiers.renameHint": "Двічі клацніть заголовок класу, щоб перейменувати",
   "nodes.questionClassifiers.topicName": "Назва теми",
   "nodes.questionClassifiers.topicPlaceholder": "Напишіть назву вашої теми",
   "nodes.start.builtInVar": "Вбудовані змінні",
diff --git a/web/i18n/vi-VN/workflow.json b/web/i18n/vi-VN/workflow.json
index 231c01bc82..db9d484b23 100644
--- a/web/i18n/vi-VN/workflow.json
+++ b/web/i18n/vi-VN/workflow.json
@@ -897,13 +897,17 @@
   "nodes.questionClassifiers.advancedSetting": "Cài đặt nâng cao",
   "nodes.questionClassifiers.class": "Lớp",
   "nodes.questionClassifiers.classNamePlaceholder": "Viết tên lớp của bạn",
+  "nodes.questionClassifiers.defaultLabel": "LỚP {{index}}",
   "nodes.questionClassifiers.inputVars": "Biến đầu vào",
   "nodes.questionClassifiers.instruction": "Hướng dẫn",
   "nodes.questionClassifiers.instructionPlaceholder": "Viết hướng dẫn của bạn",
   "nodes.questionClassifiers.instructionTip": "Nhập hướng dẫn bổ sung để giúp trình phân loại câu hỏi hiểu rõ hơn về cách phân loại câu hỏi.",
+  "nodes.questionClassifiers.labelEditorAriaLabel": "Trình chỉnh sửa nhãn lớp",
   "nodes.questionClassifiers.model": "mô hình",
+  "nodes.questionClassifiers.outputVars.classLabel": "Nhãn lớp",
   "nodes.questionClassifiers.outputVars.className": "Tên lớp",
   "nodes.questionClassifiers.outputVars.usage": "Thông tin sử dụng mô hình",
+  "nodes.questionClassifiers.renameHint": "Nhấp đúp vào tiêu đề lớp để đổi tên",
   "nodes.questionClassifiers.topicName": "Tên chủ đề",
   "nodes.questionClassifiers.topicPlaceholder": "Viết tên chủ đề của bạn",
   "nodes.start.builtInVar": "Biến tích hợp sẵn",

From e8dc7064144ec3bade3127776319d8e560fed520 Mon Sep 17 00:00:00 2001
From: L1nSn0w <l1nsn0w@qq.com>
Date: Mon, 11 May 2026 09:57:56 +0800
Subject: [PATCH 13/13] fix(api): "File validation failed" on Chatflow
 follow-up with custom file type + memory (#35891)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 api/core/agent/base_agent_runner.py           |   1 -
 api/core/memory/token_buffer_memory.py        |   2 -
 api/factories/file_factory/message_files.py   |  15 +-
 api/factories/file_factory/validation.py      |  43 ++++-
 .../core/memory/test_token_buffer_memory.py   |  42 +++++
 .../factories/test_file_validation.py         | 159 ++++++++++++++++++
 6 files changed, 244 insertions(+), 18 deletions(-)
 create mode 100644 api/tests/unit_tests/factories/test_file_validation.py

diff --git a/api/core/agent/base_agent_runner.py b/api/core/agent/base_agent_runner.py
index c22102c2ba..cba4659483 100644
--- a/api/core/agent/base_agent_runner.py
+++ b/api/core/agent/base_agent_runner.py
@@ -532,7 +532,6 @@ class BaseAgentRunner(AppRunner):
         file_objs = file_factory.build_from_message_files(
             message_files=files,
             tenant_id=self.tenant_id,
-            config=file_extra_config,
             access_controller=_file_access_controller,
         )
         if not file_objs:
diff --git a/api/core/memory/token_buffer_memory.py b/api/core/memory/token_buffer_memory.py
index d840ee213c..c41c175cca 100644
--- a/api/core/memory/token_buffer_memory.py
+++ b/api/core/memory/token_buffer_memory.py
@@ -86,12 +86,10 @@ class TokenBufferMemory:
 
         detail = ImagePromptMessageContent.DETAIL.HIGH
         if file_extra_config and app_record:
-            # Build files directly without filtering by belongs_to
             file_objs = [
                 file_factory.build_from_message_file(
                     message_file=message_file,
                     tenant_id=app_record.tenant_id,
-                    config=file_extra_config,
                     access_controller=_file_access_controller,
                 )
                 for message_file in message_files
diff --git a/api/factories/file_factory/message_files.py b/api/factories/file_factory/message_files.py
index 4b3d514238..27441bdcc1 100644
--- a/api/factories/file_factory/message_files.py
+++ b/api/factories/file_factory/message_files.py
@@ -1,11 +1,18 @@
-"""Adapters from persisted message files to graph-layer file values."""
+"""Adapters from persisted message files to graph-layer file values.
+
+Replay paths only: files in conversation history were validated at upload time,
+so these helpers deliberately do not accept (or forward) a ``FileUploadConfig`` —
+re-validation here would break replays whenever workflow ``file_upload`` config
+drifts between rounds. Mirrors ``build_file_from_stored_mapping`` in
+``models/utils/file_input_compat.py``.
+"""
 
 from __future__ import annotations
 
 from collections.abc import Sequence
 
 from core.app.file_access import FileAccessControllerProtocol
-from graphon.file import File, FileBelongsTo, FileTransferMethod, FileUploadConfig
+from graphon.file import File, FileBelongsTo, FileTransferMethod
 from models import MessageFile
 
 from .builders import build_from_mapping
@@ -15,14 +22,12 @@ def build_from_message_files(
     *,
     message_files: Sequence[MessageFile],
     tenant_id: str,
-    config: FileUploadConfig | None = None,
     access_controller: FileAccessControllerProtocol,
 ) -> Sequence[File]:
     return [
         build_from_message_file(
             message_file=message_file,
             tenant_id=tenant_id,
-            config=config,
             access_controller=access_controller,
         )
         for message_file in message_files
@@ -34,7 +39,6 @@ def build_from_message_file(
     *,
     message_file: MessageFile,
     tenant_id: str,
-    config: FileUploadConfig | None,
     access_controller: FileAccessControllerProtocol,
 ) -> File:
     mapping = {
@@ -54,6 +58,5 @@ def build_from_message_file(
     return build_from_mapping(
         mapping=mapping,
         tenant_id=tenant_id,
-        config=config,
         access_controller=access_controller,
     )
diff --git a/api/factories/file_factory/validation.py b/api/factories/file_factory/validation.py
index 4c4f6150e4..8c4e7ef1d4 100644
--- a/api/factories/file_factory/validation.py
+++ b/api/factories/file_factory/validation.py
@@ -2,9 +2,25 @@
 
 from __future__ import annotations
 
+from collections.abc import Iterable
+
 from graphon.file import FileTransferMethod, FileType, FileUploadConfig
 
 
+def _normalize_extension(extension: str) -> str:
+    s = extension.strip().lower()
+    if not s:
+        return ""
+    return s if s.startswith(".") else "." + s
+
+
+def _extension_matches(extension: str, whitelist: Iterable[str]) -> bool:
+    normalized = _normalize_extension(extension)
+    if not normalized:
+        return False
+    return normalized in {_normalize_extension(e) for e in whitelist}
+
+
 def is_file_valid_with_config(
     *,
     input_file_type: str,
@@ -12,22 +28,31 @@ def is_file_valid_with_config(
     file_transfer_method: FileTransferMethod,
     config: FileUploadConfig,
 ) -> bool:
-    # FIXME(QIN2DIM): Always allow tool files (files generated by the assistant/model)
-    # These are internally generated and should bypass user upload restrictions
+    """Return whether the file is allowed by the upload config.
+
+    ``allowed_file_types`` lists the buckets a file may fall into; ``CUSTOM`` is
+    a fallback bucket gated by ``allowed_file_extensions`` (case- and
+    dot-insensitive). Tool-generated files bypass user-facing config.
+    """
     if file_transfer_method == FileTransferMethod.TOOL_FILE:
         return True
 
-    if (
-        config.allowed_file_types
-        and input_file_type not in config.allowed_file_types
-        and input_file_type != FileType.CUSTOM
-    ):
+    allowed_types = config.allowed_file_types or []
+    custom_allowed = FileType.CUSTOM in allowed_types
+    type_allowed = not allowed_types or input_file_type in allowed_types
+
+    if not type_allowed and not custom_allowed:
         return False
 
+    # When the file is in the CUSTOM bucket, the extension whitelist is authoritative.
+    # An explicitly set whitelist (including the empty list) is enforced; empty == deny —
+    # the UI never submits an empty list, so this guards against DSL/API paths that
+    # bypass the UI from accidentally widening the allowlist.
+    in_custom_bucket = input_file_type == FileType.CUSTOM or not type_allowed
     if (
-        input_file_type == FileType.CUSTOM
+        in_custom_bucket
         and config.allowed_file_extensions is not None
-        and file_extension not in config.allowed_file_extensions
+        and not _extension_matches(file_extension, config.allowed_file_extensions)
     ):
         return False
 
diff --git a/api/tests/unit_tests/core/memory/test_token_buffer_memory.py b/api/tests/unit_tests/core/memory/test_token_buffer_memory.py
index f459250b8e..72c24bda96 100644
--- a/api/tests/unit_tests/core/memory/test_token_buffer_memory.py
+++ b/api/tests/unit_tests/core/memory/test_token_buffer_memory.py
@@ -198,6 +198,48 @@ class TestBuildPromptMessageWithFiles:
         assert isinstance(result.content[-1], TextPromptMessageContent)
         assert result.content[-1].data == "user text"
 
+    def test_replay_does_not_pass_config_to_file_factory(self):
+        """Replay contract: history files were validated on upload, so this
+        path must not forward a FileUploadConfig. The factory's signature
+        no longer accepts ``config``; this test guards against a future
+        regression that re-introduces it."""
+        conv = _make_conversation(AppMode.CHAT)
+        mem = TokenBufferMemory(conversation=conv, model_instance=_make_model_instance())
+
+        mock_file_extra_config = MagicMock()
+        mock_file_extra_config.image_config = None
+
+        real_image_content = ImagePromptMessageContent(
+            url="http://example.com/img.png", format="png", mime_type="image/png"
+        )
+        mock_app_record = MagicMock()
+        mock_app_record.tenant_id = "tenant-1"
+
+        with (
+            patch(
+                "core.memory.token_buffer_memory.FileUploadConfigManager.convert",
+                return_value=mock_file_extra_config,
+            ),
+            patch(
+                "core.memory.token_buffer_memory.file_factory.build_from_message_file",
+                return_value=MagicMock(),
+            ) as mock_build,
+            patch(
+                "core.memory.token_buffer_memory.file_manager.to_prompt_message_content",
+                return_value=real_image_content,
+            ),
+        ):
+            mem._build_prompt_message_with_files(
+                message_files=[MagicMock()],
+                text_content="user text",
+                message=_make_message(),
+                app_record=mock_app_record,
+                is_user_message=True,
+            )
+
+        mock_build.assert_called_once()
+        assert "config" not in mock_build.call_args.kwargs
+
     @pytest.mark.parametrize("mode", [AppMode.CHAT, AppMode.AGENT_CHAT, AppMode.COMPLETION])
     def test_chat_mode_with_files_assistant_message(self, mode):
         """When files are present, returns AssistantPromptMessage with list content."""
diff --git a/api/tests/unit_tests/factories/test_file_validation.py b/api/tests/unit_tests/factories/test_file_validation.py
new file mode 100644
index 0000000000..61337fcf10
--- /dev/null
+++ b/api/tests/unit_tests/factories/test_file_validation.py
@@ -0,0 +1,159 @@
+"""Unit tests for is_file_valid_with_config."""
+
+from __future__ import annotations
+
+import pytest
+
+from factories.file_factory.validation import is_file_valid_with_config
+from graphon.file import FileTransferMethod, FileType, FileUploadConfig
+
+
+def _validate(
+    *,
+    input_file_type: str,
+    file_extension: str = ".png",
+    file_transfer_method: FileTransferMethod = FileTransferMethod.LOCAL_FILE,
+    config: FileUploadConfig,
+) -> bool:
+    return is_file_valid_with_config(
+        input_file_type=input_file_type,
+        file_extension=file_extension,
+        file_transfer_method=file_transfer_method,
+        config=config,
+    )
+
+
+@pytest.mark.parametrize(
+    ("input_file_type", "file_extension", "allowed_file_types", "allowed_file_extensions", "expected"),
+    [
+        # round-1 happy path: literal "custom" mapping, ext whitelisted
+        ("custom", ".png", [FileType.CUSTOM], [".png"], True),
+        # round-2 replay: MessageFile.type is the resolved type, but config still allows CUSTOM
+        ("image", ".png", [FileType.CUSTOM], [".png"], True),
+        ("document", ".pdf", [FileType.CUSTOM], [".pdf"], True),
+        # mixed bucket [IMAGE, CUSTOM]: document falls into CUSTOM bucket via extension
+        ("document", ".pdf", [FileType.IMAGE, FileType.CUSTOM], [".pdf"], True),
+        ("document", ".exe", [FileType.IMAGE, FileType.CUSTOM], [".pdf"], False),
+        ("image", ".jpg", [FileType.IMAGE], [], True),
+        ("video", ".mp4", [FileType.IMAGE, FileType.DOCUMENT], [], False),
+        ("custom", ".exe", [FileType.CUSTOM], [".png"], False),
+        # empty allowed_file_types == no type restriction
+        ("video", ".mp4", [], [], True),
+    ],
+)
+def test_bucket_semantics(input_file_type, file_extension, allowed_file_types, allowed_file_extensions, expected):
+    config = FileUploadConfig(
+        allowed_file_types=allowed_file_types,
+        allowed_file_extensions=allowed_file_extensions,
+    )
+    assert _validate(input_file_type=input_file_type, file_extension=file_extension, config=config) is expected
+
+
+@pytest.mark.parametrize("whitelist_entry", [".png", ".PNG", "png", "PNG", " .Png ", "PnG"])
+def test_extension_match_is_case_and_dot_insensitive(whitelist_entry):
+    config = FileUploadConfig(
+        allowed_file_types=[FileType.CUSTOM],
+        allowed_file_extensions=[whitelist_entry],
+    )
+    assert _validate(input_file_type="custom", file_extension=".png", config=config) is True
+
+
+def test_extension_mismatch_still_rejected_after_normalization():
+    config = FileUploadConfig(
+        allowed_file_types=[FileType.CUSTOM],
+        allowed_file_extensions=[".png", ".jpg"],
+    )
+    assert _validate(input_file_type="custom", file_extension=".pdf", config=config) is False
+
+
+def test_mixed_case_whitelist_replicating_real_user_config():
+    config = FileUploadConfig(
+        allowed_file_types=[FileType.CUSTOM],
+        allowed_file_extensions=[".PNG", "png", "JPG", ".WEBP", "SVG", "GIF"],
+    )
+    for ext in (".png", ".jpg", ".webp", ".svg", ".gif"):
+        assert _validate(input_file_type="custom", file_extension=ext, config=config) is True
+
+
+def test_tool_file_always_passes():
+    config = FileUploadConfig(allowed_file_types=[FileType.CUSTOM], allowed_file_extensions=[".pdf"])
+    assert (
+        _validate(
+            input_file_type="image",
+            file_extension=".png",
+            file_transfer_method=FileTransferMethod.TOOL_FILE,
+            config=config,
+        )
+        is True
+    )
+
+
+def test_transfer_method_gate_for_non_image():
+    config = FileUploadConfig(
+        allowed_file_types=[FileType.DOCUMENT],
+        allowed_file_upload_methods=[FileTransferMethod.LOCAL_FILE],
+    )
+    assert (
+        _validate(
+            input_file_type="document",
+            file_extension=".pdf",
+            file_transfer_method=FileTransferMethod.LOCAL_FILE,
+            config=config,
+        )
+        is True
+    )
+    assert (
+        _validate(
+            input_file_type="document",
+            file_extension=".pdf",
+            file_transfer_method=FileTransferMethod.REMOTE_URL,
+            config=config,
+        )
+        is False
+    )
+
+
+def test_history_replay_matches_round_1_outcome_under_unchanged_config():
+    """A file that passes round 1 must pass history replay when config is unchanged."""
+    config = FileUploadConfig(
+        allowed_file_types=[FileType.CUSTOM],
+        allowed_file_extensions=[".png"],
+    )
+    assert _validate(input_file_type="custom", file_extension=".png", config=config) is True
+    assert _validate(input_file_type="image", file_extension=".png", config=config) is True
+
+
+def test_empty_whitelist_in_custom_bucket_denies_by_default():
+    """Defensive: when a file lands in the CUSTOM bucket, an empty
+    allowed_file_extensions list rejects. The UI never submits empty;
+    this guards DSL / API paths that bypass the UI from accidentally
+    widening what's accepted."""
+    config = FileUploadConfig(
+        allowed_file_types=[FileType.CUSTOM],
+        allowed_file_extensions=[],
+    )
+    assert _validate(input_file_type="custom", file_extension=".png", config=config) is False
+    assert _validate(input_file_type="image", file_extension=".png", config=config) is False
+
+
+def test_normalize_handles_whitespace_and_empty_consistently():
+    """Whitespace-only or empty entries in the whitelist must not match real
+    extensions (regression guard for _normalize_extension edge cases)."""
+    for noisy_entry in ("", "   ", "\t"):
+        config = FileUploadConfig(
+            allowed_file_types=[FileType.CUSTOM],
+            allowed_file_extensions=[noisy_entry],
+        )
+        assert _validate(input_file_type="custom", file_extension=".png", config=config) is False
+
+
+def test_empty_extension_does_not_spuriously_match_empty_whitelist_entry():
+    """Defensive: even if the whitelist contains an empty / whitespace entry
+    (e.g., a stray comma in DSL), an extensionless file must not pass via
+    a both-sides-empty match. Real entries in the same whitelist still match."""
+    config = FileUploadConfig(
+        allowed_file_types=[FileType.CUSTOM],
+        allowed_file_extensions=["", ".png"],
+    )
+    assert _validate(input_file_type="custom", file_extension=".png", config=config) is True
+    assert _validate(input_file_type="custom", file_extension="", config=config) is False