remove

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

api/controllers/console/app/workflow_draft_variable.py

@@ -193,7 +193,7 @@ workflow_draft_variable_list_model = console_ns.model(
 )
 
 
-def _api_prerequisite(f: Callable[..., Any]) -> Callable[..., Any]:
+def _api_prerequisite[**P, R](f: Callable[P, R]) -> Callable[P, R | Response]:
     """Common prerequisites for all draft workflow variable APIs.
 
     It ensures the following conditions are satisfied:
@@ -210,7 +210,7 @@ def _api_prerequisite(f: Callable[..., Any]) -> Callable[..., Any]:
     @edit_permission_required
     @get_app_model(mode=[AppMode.ADVANCED_CHAT, AppMode.WORKFLOW])
     @wraps(f)
-    def wrapper(*args: Any, **kwargs: Any):
+    def wrapper(*args: P.args, **kwargs: P.kwargs) -> R | Response:
         return f(*args, **kwargs)
 
     return wrapper

api/controllers/console/app/wraps.py

@@ -1,6 +1,6 @@
 from collections.abc import Callable
 from functools import wraps
-from typing import Any
+from typing import overload
 
 from sqlalchemy import select
 
@@ -23,14 +23,30 @@ def _load_app_model_with_trial(app_id: str) -> App | None:
     return app_model
 
 
-def get_app_model(
-    view: Callable[..., Any] | None = None,
+@overload
+def get_app_model[**P, R](
+    view: Callable[P, R],
     *,
     mode: AppMode | list[AppMode] | None = None,
-) -> Callable[..., Any] | Callable[[Callable[..., Any]], Callable[..., Any]]:
-    def decorator(view_func: Callable[..., Any]) -> Callable[..., Any]:
+) -> Callable[P, R]: ...
+
+
+@overload
+def get_app_model[**P, R](
+    view: None = None,
+    *,
+    mode: AppMode | list[AppMode] | None = None,
+) -> Callable[[Callable[P, R]], Callable[P, R]]: ...
+
+
+def get_app_model[**P, R](
+    view: Callable[P, R] | None = None,
+    *,
+    mode: AppMode | list[AppMode] | None = None,
+) -> Callable[P, R] | Callable[[Callable[P, R]], Callable[P, R]]:
+    def decorator(view_func: Callable[P, R]) -> Callable[P, R]:
         @wraps(view_func)
-        def decorated_view(*args: Any, **kwargs: Any):
+        def decorated_view(*args: P.args, **kwargs: P.kwargs) -> R:
             if not kwargs.get("app_id"):
                 raise ValueError("missing app_id in path parameters")
 
@@ -68,14 +84,30 @@ def get_app_model(
         return decorator(view)
 
 
-def get_app_model_with_trial(
-    view: Callable[..., Any] | None = None,
+@overload
+def get_app_model_with_trial[**P, R](
+    view: Callable[P, R],
     *,
     mode: AppMode | list[AppMode] | None = None,
-) -> Callable[..., Any] | Callable[[Callable[..., Any]], Callable[..., Any]]:
-    def decorator(view_func: Callable[..., Any]) -> Callable[..., Any]:
+) -> Callable[P, R]: ...
+
+
+@overload
+def get_app_model_with_trial[**P, R](
+    view: None = None,
+    *,
+    mode: AppMode | list[AppMode] | None = None,
+) -> Callable[[Callable[P, R]], Callable[P, R]]: ...
+
+
+def get_app_model_with_trial[**P, R](
+    view: Callable[P, R] | None = None,
+    *,
+    mode: AppMode | list[AppMode] | None = None,
+) -> Callable[P, R] | Callable[[Callable[P, R]], Callable[P, R]]:
+    def decorator(view_func: Callable[P, R]) -> Callable[P, R]:
         @wraps(view_func)
-        def decorated_view(*args: Any, **kwargs: Any):
+        def decorated_view(*args: P.args, **kwargs: P.kwargs) -> R:
             if not kwargs.get("app_id"):
                 raise ValueError("missing app_id in path parameters")
 

api/controllers/console/datasets/rag_pipeline/rag_pipeline_draft_variable.py

@@ -1,4 +1,5 @@
 import logging
+from collections.abc import Callable
 from typing import Any, NoReturn
 
 from flask import Response, request
@@ -55,7 +56,7 @@ class WorkflowDraftVariablePatchPayload(BaseModel):
 register_schema_models(console_ns, WorkflowDraftVariablePatchPayload)
 
 
-def _api_prerequisite(f):
+def _api_prerequisite[**P, R](f: Callable[P, R]) -> Callable[P, R | Response]:
     """Common prerequisites for all draft workflow variable APIs.
 
     It ensures the following conditions are satisfied:
@@ -70,7 +71,7 @@ def _api_prerequisite(f):
     @login_required
     @account_initialization_required
     @get_rag_pipeline
-    def wrapper(*args, **kwargs):
+    def wrapper(*args: P.args, **kwargs: P.kwargs) -> R | Response:
         if not isinstance(current_user, Account) or not current_user.has_edit_permission:
             raise Forbidden()
         return f(*args, **kwargs)

api/controllers/service_api/wraps.py

@@ -1,9 +1,10 @@
+import inspect
 import logging
 import time
 from collections.abc import Callable
 from enum import StrEnum, auto
 from functools import wraps
-from typing import Any, cast, overload
+from typing import cast, overload
 
 from flask import current_app, request
 from flask_login import user_logged_in
@@ -230,94 +231,73 @@ def cloud_edition_billing_rate_limit_check[**P, R](
     return interceptor
 
 
-def validate_dataset_token(
-    view: Callable[..., Any] | None = None,
-) -> Callable[..., Any] | Callable[[Callable[..., Any]], Callable[..., Any]]:
-    def decorator(view_func: Callable[..., Any]) -> Callable[..., Any]:
-        @wraps(view_func)
-        def decorated(*args: Any, **kwargs: Any) -> Any:
-            api_token = validate_and_get_api_token("dataset")
+def validate_dataset_token[R](view: Callable[..., R]) -> Callable[..., R]:
+    positional_parameters = [
+        parameter
+        for parameter in inspect.signature(view).parameters.values()
+        if parameter.kind in (inspect.Parameter.POSITIONAL_ONLY, inspect.Parameter.POSITIONAL_OR_KEYWORD)
+    ]
+    expects_bound_instance = bool(positional_parameters and positional_parameters[0].name in {"self", "cls"})
 
-            # get url path dataset_id from positional args or kwargs
-            # Flask passes URL path parameters as positional arguments
-            dataset_id = None
+    @wraps(view)
+    def decorated(*args: object, **kwargs: object) -> R:
+        api_token = validate_and_get_api_token("dataset")
 
-            # First try to get from kwargs (explicit parameter)
-            dataset_id = kwargs.get("dataset_id")
+        # Flask may pass URL path parameters positionally, so inspect both kwargs and args.
+        dataset_id = kwargs.get("dataset_id")
 
-            # If not in kwargs, try to extract from positional args
-            if not dataset_id and args:
-                # For class methods: args[0] is self, args[1] is dataset_id (if exists)
-                # Check if first arg is likely a class instance (has __dict__ or __class__)
-                if len(args) > 1 and hasattr(args[0], "__dict__"):
-                    # This is a class method, dataset_id should be in args[1]
-                    potential_id = args[1]
-                    # Validate it's a string-like UUID, not another object
-                    try:
-                        # Try to convert to string and check if it's a valid UUID format
-                        str_id = str(potential_id)
-                        # Basic check: UUIDs are 36 chars with hyphens
-                        if len(str_id) == 36 and str_id.count("-") == 4:
-                            dataset_id = str_id
-                    except Exception:
-                        logger.exception("Failed to parse dataset_id from class method args")
-                elif len(args) > 0:
-                    # Not a class method, check if args[0] looks like a UUID
-                    potential_id = args[0]
-                    try:
-                        str_id = str(potential_id)
-                        if len(str_id) == 36 and str_id.count("-") == 4:
-                            dataset_id = str_id
-                    except Exception:
-                        logger.exception("Failed to parse dataset_id from positional args")
+        if not dataset_id and args:
+            potential_id = args[0]
+            try:
+                str_id = str(potential_id)
+                if len(str_id) == 36 and str_id.count("-") == 4:
+                    dataset_id = str_id
+            except Exception:
+                logger.exception("Failed to parse dataset_id from positional args")
 
-            # Validate dataset if dataset_id is provided
-            if dataset_id:
-                dataset_id = str(dataset_id)
-                dataset = db.session.scalar(
-                    select(Dataset)
-                    .where(
-                        Dataset.id == dataset_id,
-                        Dataset.tenant_id == api_token.tenant_id,
-                    )
-                    .limit(1)
+        if dataset_id:
+            dataset_id = str(dataset_id)
+            dataset = db.session.scalar(
+                select(Dataset)
+                .where(
+                    Dataset.id == dataset_id,
+                    Dataset.tenant_id == api_token.tenant_id,
                 )
-                if not dataset:
-                    raise NotFound("Dataset not found.")
-                if not dataset.enable_api:
-                    raise Forbidden("Dataset api access is not enabled.")
-            tenant_account_join = db.session.execute(
-                select(Tenant, TenantAccountJoin)
-                .where(Tenant.id == api_token.tenant_id)
-                .where(TenantAccountJoin.tenant_id == Tenant.id)
-                .where(TenantAccountJoin.role.in_(["owner"]))
-                .where(Tenant.status == TenantStatus.NORMAL)
-            ).one_or_none()  # TODO: only owner information is required, so only one is returned.
-            if tenant_account_join:
-                tenant, ta = tenant_account_join
-                account = db.session.get(Account, ta.account_id)
-                # Login admin
-                if account:
-                    account.current_tenant = tenant
-                    current_app.login_manager._update_request_context_with_user(account)  # type: ignore
-                    user_logged_in.send(current_app._get_current_object(), user=current_user)  # type: ignore
-                else:
-                    raise Unauthorized("Tenant owner account does not exist.")
+                .limit(1)
+            )
+            if not dataset:
+                raise NotFound("Dataset not found.")
+            if not dataset.enable_api:
+                raise Forbidden("Dataset api access is not enabled.")
+
+        tenant_account_join = db.session.execute(
+            select(Tenant, TenantAccountJoin)
+            .where(Tenant.id == api_token.tenant_id)
+            .where(TenantAccountJoin.tenant_id == Tenant.id)
+            .where(TenantAccountJoin.role.in_(["owner"]))
+            .where(Tenant.status == TenantStatus.NORMAL)
+        ).one_or_none()  # TODO: only owner information is required, so only one is returned.
+        if tenant_account_join:
+            tenant, ta = tenant_account_join
+            account = db.session.get(Account, ta.account_id)
+            # Login admin
+            if account:
+                account.current_tenant = tenant
+                current_app.login_manager._update_request_context_with_user(account)  # type: ignore
+                user_logged_in.send(current_app._get_current_object(), user=current_user)  # type: ignore
             else:
-                raise Unauthorized("Tenant does not exist.")
-            if args and isinstance(args[0], Resource):
-                return view_func(args[0], api_token.tenant_id, *args[1:], **kwargs)
+                raise Unauthorized("Tenant owner account does not exist.")
+        else:
+            raise Unauthorized("Tenant does not exist.")
 
-            return view_func(api_token.tenant_id, *args, **kwargs)
+        if expects_bound_instance:
+            if not args:
+                raise TypeError("validate_dataset_token expected a bound resource instance.")
+            return view(args[0], api_token.tenant_id, *args[1:], **kwargs)
 
-        return decorated
+        return view(api_token.tenant_id, *args, **kwargs)
 
-    if view:
-        return decorator(view)
-
-    # if view is None, it means that the decorator is used without parentheses
-    # use the decorator as a function for method_decorators
-    return decorator
+    return decorated
 
 
 def validate_and_get_api_token(scope: str | None = None):

api/dify_app.py

@@ -1,5 +1,14 @@
+from __future__ import annotations
+
+from typing import TYPE_CHECKING
+
 from flask import Flask
 
+if TYPE_CHECKING:
+    from extensions.ext_login import DifyLoginManager
+
 
 class DifyApp(Flask):
-    pass
+    """Flask application type with Dify-specific extension attributes."""
+
+    login_manager: DifyLoginManager

api/extensions/ext_login.py

@@ -1,7 +1,8 @@
 import json
+from typing import cast
 
 import flask_login
-from flask import Response, request
+from flask import Request, Response, request
 from flask_login import user_loaded_from_request, user_logged_in
 from sqlalchemy import select
 from werkzeug.exceptions import NotFound, Unauthorized
@@ -16,13 +17,35 @@ from models import Account, Tenant, TenantAccountJoin
 from models.model import AppMCPServer, EndUser
 from services.account_service import AccountService
 
-login_manager = flask_login.LoginManager()
+type LoginUser = Account | EndUser
+
+
+class DifyLoginManager(flask_login.LoginManager):
+    """Project-specific Flask-Login manager with a stable unauthorized contract.
+
+    Dify registers `unauthorized_handler` below to always return a JSON `Response`.
+    Overriding this method lets callers rely on that narrower return type instead of
+    Flask-Login's broader callback contract.
+    """
+
+    def unauthorized(self) -> Response:
+        """Return the registered unauthorized handler result as a Flask `Response`."""
+        return cast(Response, super().unauthorized())
+
+    def load_user_from_request_context(self) -> None:
+        """Populate Flask-Login's request-local user cache for the current request."""
+        self._load_user()
+
+
+login_manager = DifyLoginManager()
 
 
 # Flask-Login configuration
 @login_manager.request_loader
-def load_user_from_request(request_from_flask_login):
+def load_user_from_request(request_from_flask_login: Request) -> LoginUser | None:
     """Load user based on the request."""
+    del request_from_flask_login
+
     # Skip authentication for documentation endpoints
     if dify_config.SWAGGER_UI_ENABLED and request.path.endswith((dify_config.SWAGGER_UI_PATH, "/swagger.json")):
         return None
@@ -100,10 +123,12 @@ def load_user_from_request(request_from_flask_login):
             raise NotFound("End user not found.")
         return end_user
 
+    return None
+
 
 @user_logged_in.connect
 @user_loaded_from_request.connect
-def on_user_logged_in(_sender, user):
+def on_user_logged_in(_sender: object, user: LoginUser) -> None:
     """Called when a user logged in.
 
     Note: AccountService.load_logged_in_account will populate user.current_tenant_id
@@ -114,8 +139,10 @@ def on_user_logged_in(_sender, user):
 
 
 @login_manager.unauthorized_handler
-def unauthorized_handler():
+def unauthorized_handler() -> Response:
     """Handle unauthorized requests."""
+    # Keep this as a concrete `Response`; `DifyLoginManager.unauthorized()` narrows
+    # Flask-Login's callback contract based on this override.
     return Response(
         json.dumps({"code": "unauthorized", "message": "Unauthorized."}),
         status=401,
@@ -123,5 +150,5 @@ def unauthorized_handler():
     )
 
 
-def init_app(app: DifyApp):
+def init_app(app: DifyApp) -> None:
     login_manager.init_app(app)

api/libs/login.py

@@ -2,19 +2,19 @@ from __future__ import annotations
 
 from collections.abc import Callable
 from functools import wraps
-from typing import TYPE_CHECKING, Any
+from typing import TYPE_CHECKING, Any, cast
 
-from flask import current_app, g, has_request_context, request
+from flask import Response, current_app, g, has_request_context, request
 from flask_login.config import EXEMPT_METHODS
 from werkzeug.local import LocalProxy
 
 from configs import dify_config
+from dify_app import DifyApp
+from extensions.ext_login import DifyLoginManager
 from libs.token import check_csrf_token
 from models import Account
 
 if TYPE_CHECKING:
-    from flask.typing import ResponseReturnValue
-
     from models.model import EndUser
 
 
@@ -29,7 +29,13 @@ def _resolve_current_user() -> EndUser | Account | None:
     return get_current_object() if callable(get_current_object) else user_proxy  # type: ignore
 
 
-def current_account_with_tenant():
+def _get_login_manager() -> DifyLoginManager:
+    """Return the project login manager with Dify's narrowed unauthorized contract."""
+    app = cast(DifyApp, current_app)
+    return app.login_manager
+
+
+def current_account_with_tenant() -> tuple[Account, str]:
     """
     Resolve the underlying account for the current user proxy and ensure tenant context exists.
     Allows tests to supply plain Account mocks without the LocalProxy helper.
@@ -42,7 +48,7 @@ def current_account_with_tenant():
     return user, user.current_tenant_id
 
 
-def login_required[**P, R](func: Callable[P, R]) -> Callable[P, R | ResponseReturnValue]:
+def login_required[**P, R](func: Callable[P, R]) -> Callable[P, R | Response]:
     """
     If you decorate a view with this, it will ensure that the current user is
     logged in and authenticated before calling the actual view. (If they are
@@ -77,13 +83,16 @@ def login_required[**P, R](func: Callable[P, R]) -> Callable[P, R | ResponseRetu
     """
 
     @wraps(func)
-    def decorated_view(*args: P.args, **kwargs: P.kwargs) -> R | ResponseReturnValue:
+    def decorated_view(*args: P.args, **kwargs: P.kwargs) -> R | Response:
         if request.method in EXEMPT_METHODS or dify_config.LOGIN_DISABLED:
             return current_app.ensure_sync(func)(*args, **kwargs)
 
         user = _resolve_current_user()
         if user is None or not user.is_authenticated:
-            return current_app.login_manager.unauthorized()  # type: ignore
+            # `DifyLoginManager` guarantees that the registered unauthorized handler
+            # is surfaced here as a concrete Flask `Response`.
+            unauthorized_response: Response = _get_login_manager().unauthorized()
+            return unauthorized_response
         g._login_user = user
         # we put csrf validation here for less conflicts
         # TODO: maybe find a better place for it.
@@ -96,7 +105,7 @@ def login_required[**P, R](func: Callable[P, R]) -> Callable[P, R | ResponseRetu
 def _get_user() -> EndUser | Account | None:
     if has_request_context():
         if "_login_user" not in g:
-            current_app.login_manager._load_user()  # type: ignore
+            _get_login_manager().load_user_from_request_context()
 
         return g._login_user
 

api/pyproject.toml

@@ -171,7 +171,7 @@ dev = [
     "sseclient-py>=1.8.0",
     "pytest-timeout>=2.4.0",
     "pytest-xdist>=3.8.0",
-    "pyrefly>=0.57.1",
+    "pyrefly>=0.59.1",
 ]
 
 ############################################################

api/tests/unit_tests/controllers/console/test_workspace_account.py

@@ -20,7 +20,7 @@ def app():
     app = Flask(__name__)
     app.config["TESTING"] = True
     app.config["RESTX_MASK_HEADER"] = "X-Fields"
-    app.login_manager = SimpleNamespace(_load_user=lambda: None)
+    app.login_manager = SimpleNamespace(load_user_from_request_context=lambda: None)
     return app
 
 

api/tests/unit_tests/controllers/console/test_workspace_members.py

@@ -12,7 +12,7 @@ from models.account import Account, TenantAccountRole
 def app():
     flask_app = Flask(__name__)
     flask_app.config["TESTING"] = True
-    flask_app.login_manager = SimpleNamespace(_load_user=lambda: None)
+    flask_app.login_manager = SimpleNamespace(load_user_from_request_context=lambda: None)
     return flask_app
 
 

api/tests/unit_tests/extensions/test_ext_login.py

@@ -0,0 +1,17 @@
+import json
+
+from flask import Response
+
+from extensions.ext_login import unauthorized_handler
+
+
+def test_unauthorized_handler_returns_json_response() -> None:
+    response = unauthorized_handler()
+
+    assert isinstance(response, Response)
+    assert response.status_code == 401
+    assert response.content_type == "application/json"
+    assert json.loads(response.get_data(as_text=True)) == {
+        "code": "unauthorized",
+        "message": "Unauthorized.",
+    }

api/tests/unit_tests/libs/test_login.py

@@ -2,11 +2,12 @@ from types import SimpleNamespace
 from unittest.mock import MagicMock
 
 import pytest
-from flask import Flask, g
-from flask_login import LoginManager, UserMixin
+from flask import Flask, Response, g
+from flask_login import UserMixin
 from pytest_mock import MockerFixture
 
 import libs.login as login_module
+from extensions.ext_login import DifyLoginManager
 from libs.login import current_user
 from models.account import Account
 
@@ -39,9 +40,12 @@ def login_app(mocker: MockerFixture) -> Flask:
     app = Flask(__name__)
     app.config["TESTING"] = True
 
-    login_manager = LoginManager()
+    login_manager = DifyLoginManager()
     login_manager.init_app(app)
-    login_manager.unauthorized = mocker.Mock(name="unauthorized", return_value="Unauthorized")
+    login_manager.unauthorized = mocker.Mock(
+        name="unauthorized",
+        return_value=Response("Unauthorized", status=401, content_type="application/json"),
+    )
 
     @login_manager.user_loader
     def load_user(_user_id: str):
@@ -109,18 +113,43 @@ class TestLoginRequired:
         resolved_user: MockUser | None,
         description: str,
     ):
-        """Test that missing or unauthenticated users are redirected."""
+        """Test that missing or unauthenticated users return the manager response."""
 
         resolve_user = resolve_current_user(resolved_user)
 
         with login_app.test_request_context():
             result = protected_view()
 
-        assert result == "Unauthorized", description
+        assert result is login_app.login_manager.unauthorized.return_value, description
+        assert isinstance(result, Response)
+        assert result.status_code == 401
         resolve_user.assert_called_once_with()
         login_app.login_manager.unauthorized.assert_called_once_with()
         csrf_check.assert_not_called()
 
+    def test_unauthorized_access_propagates_response_object(
+        self,
+        login_app: Flask,
+        protected_view,
+        csrf_check: MagicMock,
+        resolve_current_user,
+        mocker: MockerFixture,
+    ) -> None:
+        """Test that unauthorized responses are propagated as Flask Response objects."""
+        resolve_user = resolve_current_user(None)
+        response = Response("Unauthorized", status=401, content_type="application/json")
+        mocker.patch.object(
+            login_module, "_get_login_manager", return_value=SimpleNamespace(unauthorized=lambda: response)
+        )
+
+        with login_app.test_request_context():
+            result = protected_view()
+
+        assert result is response
+        assert isinstance(result, Response)
+        resolve_user.assert_called_once_with()
+        csrf_check.assert_not_called()
+
     @pytest.mark.parametrize(
         ("method", "login_disabled"),
         [
@@ -168,10 +197,14 @@ class TestGetUser:
         """Test that _get_user loads user if not already in g."""
         mock_user = MockUser("test_user")
 
-        def _load_user() -> None:
+        def load_user_from_request_context() -> None:
             g._login_user = mock_user
 
-        load_user = mocker.patch.object(login_app.login_manager, "_load_user", side_effect=_load_user)
+        load_user = mocker.patch.object(
+            login_app.login_manager,
+            "load_user_from_request_context",
+            side_effect=load_user_from_request_context,
+        )
 
         with login_app.test_request_context():
             user = login_module._get_user()

api/uv.lock

@@ -53,23 +53,6 @@ dependencies = [
 ]
 sdist = { url = "https://files.pythonhosted.org/packages/45/4a/064321452809dae953c1ed6e017504e72551a26b6f5708a5a80e4bf556ff/aiohttp-3.13.4.tar.gz", hash = "sha256:d97a6d09c66087890c2ab5d49069e1e570583f7ac0314ecf98294c1b6aaebd38", size = 7859748, upload-time = "2026-03-28T17:19:40.6Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/d4/7e/cb94129302d78c46662b47f9897d642fd0b33bdfef4b73b20c6ced35aa4c/aiohttp-3.13.4-cp311-cp311-macosx_10_9_universal2.whl", hash = "sha256:8ea0c64d1bcbf201b285c2246c51a0c035ba3bbd306640007bc5844a3b4658c1", size = 760027, upload-time = "2026-03-28T17:15:33.022Z" },
-    { url = "https://files.pythonhosted.org/packages/5e/cd/2db3c9397c3bd24216b203dd739945b04f8b87bb036c640da7ddb63c75ef/aiohttp-3.13.4-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:6f742e1fa45c0ed522b00ede565e18f97e4cf8d1883a712ac42d0339dfb0cce7", size = 508325, upload-time = "2026-03-28T17:15:34.714Z" },
-    { url = "https://files.pythonhosted.org/packages/36/a3/d28b2722ec13107f2e37a86b8a169897308bab6a3b9e071ecead9d67bd9b/aiohttp-3.13.4-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:6dcfb50ee25b3b7a1222a9123be1f9f89e56e67636b561441f0b304e25aaef8f", size = 502402, upload-time = "2026-03-28T17:15:36.409Z" },
-    { url = "https://files.pythonhosted.org/packages/fa/d6/acd47b5f17c4430e555590990a4746efbcb2079909bb865516892bf85f37/aiohttp-3.13.4-cp311-cp311-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:3262386c4ff370849863ea93b9ea60fd59c6cf56bf8f93beac625cf4d677c04d", size = 1771224, upload-time = "2026-03-28T17:15:38.223Z" },
-    { url = "https://files.pythonhosted.org/packages/98/af/af6e20113ba6a48fd1cd9e5832c4851e7613ef50c7619acdaee6ec5f1aff/aiohttp-3.13.4-cp311-cp311-manylinux2014_armv7l.manylinux_2_17_armv7l.manylinux_2_31_armv7l.whl", hash = "sha256:473bb5aa4218dd254e9ae4834f20e31f5a0083064ac0136a01a62ddbae2eaa42", size = 1731530, upload-time = "2026-03-28T17:15:39.988Z" },
-    { url = "https://files.pythonhosted.org/packages/81/16/78a2f5d9c124ad05d5ce59a9af94214b6466c3491a25fb70760e98e9f762/aiohttp-3.13.4-cp311-cp311-manylinux2014_ppc64le.manylinux_2_17_ppc64le.manylinux_2_28_ppc64le.whl", hash = "sha256:e56423766399b4c77b965f6aaab6c9546617b8994a956821cc507d00b91d978c", size = 1827925, upload-time = "2026-03-28T17:15:41.944Z" },
-    { url = "https://files.pythonhosted.org/packages/2a/1f/79acf0974ced805e0e70027389fccbb7d728e6f30fcac725fb1071e63075/aiohttp-3.13.4-cp311-cp311-manylinux2014_s390x.manylinux_2_17_s390x.manylinux_2_28_s390x.whl", hash = "sha256:8af249343fafd5ad90366a16d230fc265cf1149f26075dc9fe93cfd7c7173942", size = 1923579, upload-time = "2026-03-28T17:15:44.071Z" },
-    { url = "https://files.pythonhosted.org/packages/af/53/29f9e2054ea6900413f3b4c3eb9d8331f60678ec855f13ba8714c47fd48d/aiohttp-3.13.4-cp311-cp311-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:0bc0a5cf4f10ef5a2c94fdde488734b582a3a7a000b131263e27c9295bd682d9", size = 1767655, upload-time = "2026-03-28T17:15:45.911Z" },
-    { url = "https://files.pythonhosted.org/packages/f3/57/462fe1d3da08109ba4aa8590e7aed57c059af2a7e80ec21f4bac5cfe1094/aiohttp-3.13.4-cp311-cp311-manylinux_2_31_riscv64.manylinux_2_39_riscv64.whl", hash = "sha256:5c7ff1028e3c9fc5123a865ce17df1cb6424d180c503b8517afbe89aa566e6be", size = 1630439, upload-time = "2026-03-28T17:15:48.11Z" },
-    { url = "https://files.pythonhosted.org/packages/d7/4b/4813344aacdb8127263e3eec343d24e973421143826364fa9fc847f6283f/aiohttp-3.13.4-cp311-cp311-musllinux_1_2_aarch64.whl", hash = "sha256:ba5cf98b5dcb9bddd857da6713a503fa6d341043258ca823f0f5ab7ab4a94ee8", size = 1745557, upload-time = "2026-03-28T17:15:50.13Z" },
-    { url = "https://files.pythonhosted.org/packages/d4/01/1ef1adae1454341ec50a789f03cfafe4c4ac9c003f6a64515ecd32fe4210/aiohttp-3.13.4-cp311-cp311-musllinux_1_2_armv7l.whl", hash = "sha256:d85965d3ba21ee4999e83e992fecb86c4614d6920e40705501c0a1f80a583c12", size = 1741796, upload-time = "2026-03-28T17:15:52.351Z" },
-    { url = "https://files.pythonhosted.org/packages/22/04/8cdd99af988d2aa6922714d957d21383c559835cbd43fbf5a47ddf2e0f05/aiohttp-3.13.4-cp311-cp311-musllinux_1_2_ppc64le.whl", hash = "sha256:49f0b18a9b05d79f6f37ddd567695943fcefb834ef480f17a4211987302b2dc7", size = 1805312, upload-time = "2026-03-28T17:15:54.407Z" },
-    { url = "https://files.pythonhosted.org/packages/fb/7f/b48d5577338d4b25bbdbae35c75dbfd0493cb8886dc586fbfb2e90862239/aiohttp-3.13.4-cp311-cp311-musllinux_1_2_riscv64.whl", hash = "sha256:7f78cb080c86fbf765920e5f1ef35af3f24ec4314d6675d0a21eaf41f6f2679c", size = 1621751, upload-time = "2026-03-28T17:15:56.564Z" },
-    { url = "https://files.pythonhosted.org/packages/bc/89/4eecad8c1858e6d0893c05929e22343e0ebe3aec29a8a399c65c3cc38311/aiohttp-3.13.4-cp311-cp311-musllinux_1_2_s390x.whl", hash = "sha256:67a3ec705534a614b68bbf1c70efa777a21c3da3895d1c44510a41f5a7ae0453", size = 1826073, upload-time = "2026-03-28T17:15:58.489Z" },
-    { url = "https://files.pythonhosted.org/packages/f5/5c/9dc8293ed31b46c39c9c513ac7ca152b3c3d38e0ea111a530ad12001b827/aiohttp-3.13.4-cp311-cp311-musllinux_1_2_x86_64.whl", hash = "sha256:d6630ec917e85c5356b2295744c8a97d40f007f96a1c76bf1928dc2e27465393", size = 1760083, upload-time = "2026-03-28T17:16:00.677Z" },
-    { url = "https://files.pythonhosted.org/packages/1e/19/8bbf6a4994205d96831f97b7d21a0feed120136e6267b5b22d229c6dc4dc/aiohttp-3.13.4-cp311-cp311-win32.whl", hash = "sha256:54049021bc626f53a5394c29e8c444f726ee5a14b6e89e0ad118315b1f90f5e3", size = 439690, upload-time = "2026-03-28T17:16:02.902Z" },
-    { url = "https://files.pythonhosted.org/packages/0c/f5/ac409ecd1007528d15c3e8c3a57d34f334c70d76cfb7128a28cffdebd4c1/aiohttp-3.13.4-cp311-cp311-win_amd64.whl", hash = "sha256:c033f2bc964156030772d31cbf7e5defea181238ce1f87b9455b786de7d30145", size = 463824, upload-time = "2026-03-28T17:16:05.058Z" },
     { url = "https://files.pythonhosted.org/packages/1e/bd/ede278648914cabbabfdf95e436679b5d4156e417896a9b9f4587169e376/aiohttp-3.13.4-cp312-cp312-macosx_10_13_universal2.whl", hash = "sha256:ee62d4471ce86b108b19c3364db4b91180d13fe3510144872d6bad5401957360", size = 752158, upload-time = "2026-03-28T17:16:06.901Z" },
     { url = "https://files.pythonhosted.org/packages/90/de/581c053253c07b480b03785196ca5335e3c606a37dc73e95f6527f1591fe/aiohttp-3.13.4-cp312-cp312-macosx_10_13_x86_64.whl", hash = "sha256:c0fd8f41b54b58636402eb493afd512c23580456f022c1ba2db0f810c959ed0d", size = 501037, upload-time = "2026-03-28T17:16:08.82Z" },
     { url = "https://files.pythonhosted.org/packages/fa/f9/a5ede193c08f13cc42c0a5b50d1e246ecee9115e4cf6e900d8dbd8fd6acb/aiohttp-3.13.4-cp312-cp312-macosx_11_0_arm64.whl", hash = "sha256:4baa48ce49efd82d6b1a0be12d6a36b35e5594d1dd42f8bfba96ea9f8678b88c", size = 501556, upload-time = "2026-03-28T17:16:10.63Z" },
@@ -1586,7 +1569,7 @@ dev = [
     { name = "lxml-stubs", specifier = "~=0.5.1" },
     { name = "mypy", specifier = "~=1.19.1" },
     { name = "pandas-stubs", specifier = "~=3.0.0" },
-    { name = "pyrefly", specifier = ">=0.57.1" },
+    { name = "pyrefly", specifier = ">=0.59.1" },
     { name = "pytest", specifier = "~=9.0.2" },
     { name = "pytest-benchmark", specifier = "~=5.2.3" },
     { name = "pytest-cov", specifier = "~=7.1.0" },
@@ -4839,18 +4822,19 @@ wheels = [
 
 [[package]]
 name = "pyrefly"
-version = "0.57.1"
+version = "0.59.1"
 source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/c9/c1/c17211e5bbd2b90a24447484713da7cc2cee4e9455e57b87016ffc69d426/pyrefly-0.57.1.tar.gz", hash = "sha256:b05f6f5ee3a6a5d502ca19d84cb9ab62d67f05083819964a48c1510f2993efc6", size = 5310800, upload-time = "2026-03-18T18:42:35.614Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/d5/ce/7882c2af92b2ff6505fcd3430eff8048ece6c6254cc90bdc76ecee12dfab/pyrefly-0.59.1.tar.gz", hash = "sha256:bf1675b0c38d45df2c8f8618cbdfa261a1b92430d9d31eba16e0282b551e210f", size = 5475432, upload-time = "2026-04-01T22:04:04.11Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/b7/58/8af37856c8d45b365ece635a6728a14b0356b08d1ff1ac601d7120def1e0/pyrefly-0.57.1-py3-none-macosx_10_12_x86_64.whl", hash = "sha256:91974bfbe951eebf5a7bc959c1f3921f0371c789cad84761511d695e9ab2265f", size = 12681847, upload-time = "2026-03-18T18:42:10.963Z" },
-    { url = "https://files.pythonhosted.org/packages/5f/d7/fae6dd9d0355fc5b8df7793f1423b7433ca8e10b698ea934c35f0e4e6522/pyrefly-0.57.1-py3-none-macosx_11_0_arm64.whl", hash = "sha256:808087298537c70f5e7cdccb5bbaad482e7e056e947c0adf00fb612cbace9fdc", size = 12219634, upload-time = "2026-03-18T18:42:13.469Z" },
-    { url = "https://files.pythonhosted.org/packages/29/8f/9511ae460f0690e837b9ba0f7e5e192079e16ff9a9ba8a272450e81f11f8/pyrefly-0.57.1-py3-none-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:0b01f454fa5539e070c0cba17ddec46b3d2107d571d519bd8eca8f3142ba02a6", size = 34947757, upload-time = "2026-03-18T18:42:17.152Z" },
-    { url = "https://files.pythonhosted.org/packages/07/43/f053bf9c65218f70e6a49561e9942c7233f8c3e4da8d42e5fe2aae50b3d2/pyrefly-0.57.1-py3-none-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:02ad59ea722191f51635f23e37574662116b82ca9d814529f7cb5528f041f381", size = 37621018, upload-time = "2026-03-18T18:42:20.79Z" },
-    { url = "https://files.pythonhosted.org/packages/0e/76/9cea46de01665bbc125e4f215340c9365c8d56cda6198ff238a563ea8e75/pyrefly-0.57.1-py3-none-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:54bc0afe56776145e37733ff763e7e9679ee8a76c467b617dc3f227d4124a9e2", size = 40203649, upload-time = "2026-03-18T18:42:24.519Z" },
-    { url = "https://files.pythonhosted.org/packages/fd/8b/2fb4a96d75e2a57df698a43e2970e441ba2704e3906cdc0386a055daa05a/pyrefly-0.57.1-py3-none-win32.whl", hash = "sha256:468e5839144b25bb0dce839bfc5fd879c9f38e68ebf5de561f30bed9ae19d8ca", size = 11732953, upload-time = "2026-03-18T18:42:27.379Z" },
-    { url = "https://files.pythonhosted.org/packages/13/5a/4a197910fe2e9b102b15ae5e7687c45b7b5981275a11a564b41e185dd907/pyrefly-0.57.1-py3-none-win_amd64.whl", hash = "sha256:46db9c97093673c4fb7fab96d610e74d140661d54688a92d8e75ad885a56c141", size = 12537319, upload-time = "2026-03-18T18:42:30.196Z" },
-    { url = "https://files.pythonhosted.org/packages/b5/c6/bc442874be1d9b63da1f9debb4f04b7d0c590a8dc4091921f3c288207242/pyrefly-0.57.1-py3-none-win_arm64.whl", hash = "sha256:feb1bbe3b0d8d5a70121dcdf1476e6a99cc056a26a49379a156f040729244dcb", size = 12013455, upload-time = "2026-03-18T18:42:32.928Z" },
+    { url = "https://files.pythonhosted.org/packages/d0/10/04a0e05b08fc855b6fe38c3df549925fc3c2c6e750506870de7335d3e1f7/pyrefly-0.59.1-py3-none-macosx_10_12_x86_64.whl", hash = "sha256:390db3cd14aa7e0268e847b60cd9ee18b04273eddfa38cf341ed3bb43f3fef2a", size = 12868133, upload-time = "2026-04-01T22:03:39.436Z" },
+    { url = "https://files.pythonhosted.org/packages/c7/78/fa7be227c3e3fcacee501c1562278dd026186ffd1b5b5beb51d3941a3aed/pyrefly-0.59.1-py3-none-macosx_11_0_arm64.whl", hash = "sha256:d246d417b6187c1650d7f855f61c68fbfd6d6155dc846d4e4d273a3e6b5175cb", size = 12379325, upload-time = "2026-04-01T22:03:42.046Z" },
+    { url = "https://files.pythonhosted.org/packages/bb/13/6828ce1c98171b5f8388f33c4b0b9ea2ab8c49abe0ef8d793c31e30a05cb/pyrefly-0.59.1-py3-none-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:575ac67b04412dc651a7143d27e38a40fbdd3c831c714d5520d0e9d4c8631ab4", size = 35826408, upload-time = "2026-04-01T22:03:45.067Z" },
+    { url = "https://files.pythonhosted.org/packages/23/56/79ed8ece9a7ecad0113c394a06a084107db3ad8f1fefe19e7ded43c51245/pyrefly-0.59.1-py3-none-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:062e6262ce1064d59dcad81ac0499bb7a3ad501e9bc8a677a50dc630ff0bf862", size = 38532699, upload-time = "2026-04-01T22:03:48.376Z" },
+    { url = "https://files.pythonhosted.org/packages/18/7d/ecc025e0f0e3f295b497f523cc19cefaa39e57abede8fc353d29445d174b/pyrefly-0.59.1-py3-none-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:43ef4247f9e6f734feb93e1f2b75335b943629956e509f545cc9cdcccd76dd20", size = 36743570, upload-time = "2026-04-01T22:03:51.362Z" },
+    { url = "https://files.pythonhosted.org/packages/2f/03/b1ce882ebcb87c673165c00451fbe4df17bf96ccfde18c75880dc87c5f5e/pyrefly-0.59.1-py3-none-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:59a2d01723b84d042f4fa6ec871ffd52d0a7e83b0ea791c2e0bb0ff750abce56", size = 41236246, upload-time = "2026-04-01T22:03:54.361Z" },
+    { url = "https://files.pythonhosted.org/packages/17/af/5e9c7afd510e7dd64a2204be0ed39e804089cbc4338675a28615c7176acb/pyrefly-0.59.1-py3-none-win32.whl", hash = "sha256:4ea70c780848f8376411e787643ae5d2d09da8a829362332b7b26d15ebcbaf56", size = 11884747, upload-time = "2026-04-01T22:03:56.776Z" },
+    { url = "https://files.pythonhosted.org/packages/aa/c1/7db1077627453fd1068f0761f059a9512645c00c4c20acfb9f0c24ac02ec/pyrefly-0.59.1-py3-none-win_amd64.whl", hash = "sha256:67e6a08cfd129a0d2788d5e40a627f9860e0fe91a876238d93d5c63ff4af68ae", size = 12720608, upload-time = "2026-04-01T22:03:59.252Z" },
+    { url = "https://files.pythonhosted.org/packages/07/16/4bb6e5fce5a9cf0992932d9435d964c33e507aaaf96fdfbb1be493078a4a/pyrefly-0.59.1-py3-none-win_arm64.whl", hash = "sha256:01179cb215cf079e8223a064f61a074f7079aa97ea705cbbc68af3d6713afd15", size = 12223158, upload-time = "2026-04-01T22:04:01.869Z" },
 ]
 
 [[package]]

packages/dify-ui/.gitignore

@@ -0,0 +1,2 @@
+dist/
+node_modules/

packages/dify-ui/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@langgenius/dify-ui",
+  "private": true,
+  "version": "0.0.0-private",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    "./context-menu": {
+      "types": "./dist/context-menu/index.d.ts",
+      "import": "./dist/context-menu/index.js",
+      "default": "./dist/context-menu/index.js"
+    },
+    "./dropdown-menu": {
+      "types": "./dist/dropdown-menu/index.d.ts",
+      "import": "./dist/dropdown-menu/index.js",
+      "default": "./dist/dropdown-menu/index.js"
+    },
+    "./tailwind-preset": {
+      "types": "./dist/tailwind-preset.d.ts",
+      "import": "./dist/tailwind-preset.js",
+      "default": "./dist/tailwind-preset.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./markdown.css": "./dist/markdown.css",
+    "./themes/light.css": "./dist/themes/light.css",
+    "./themes/dark.css": "./dist/themes/dark.css",
+    "./themes/manual-light.css": "./dist/themes/manual-light.css",
+    "./themes/manual-dark.css": "./dist/themes/manual-dark.css",
+    "./themes/markdown-light.css": "./dist/themes/markdown-light.css",
+    "./themes/markdown-dark.css": "./dist/themes/markdown-dark.css",
+    "./tokens/tailwind-theme-var-define": {
+      "types": "./dist/tokens/tailwind-theme-var-define.d.ts",
+      "import": "./dist/tokens/tailwind-theme-var-define.js",
+      "default": "./dist/tokens/tailwind-theme-var-define.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "node ./scripts/build.mjs",
+    "prepack": "pnpm build",
+    "test": "vp test",
+    "test:watch": "vp test --watch",
+    "type-check": "tsc -p tsconfig.json --noEmit"
+  },
+  "peerDependencies": {
+    "react": "catalog:",
+    "react-dom": "catalog:"
+  },
+  "dependencies": {
+    "@base-ui/react": "catalog:",
+    "@dify/iconify-collections": "workspace:*",
+    "@egoist/tailwindcss-icons": "catalog:",
+    "@iconify-json/heroicons": "catalog:",
+    "@iconify-json/ri": "catalog:",
+    "@remixicon/react": "catalog:",
+    "@tailwindcss/typography": "catalog:",
+    "clsx": "catalog:",
+    "tailwind-merge": "catalog:"
+  },
+  "devDependencies": {
+    "@storybook/react": "catalog:",
+    "@testing-library/jest-dom": "catalog:",
+    "@testing-library/react": "catalog:",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@vitejs/plugin-react": "catalog:",
+    "happy-dom": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "tailwindcss": "catalog:",
+    "typescript": "catalog:",
+    "vite": "catalog:",
+    "vite-plus": "catalog:",
+    "vitest": "catalog:"
+  }
+}

packages/dify-ui/scripts/build.mjs

@@ -0,0 +1,31 @@
+import { cp, mkdir, rm } from 'node:fs/promises'
+import { spawnSync } from 'node:child_process'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..')
+const distDir = resolve(packageRoot, 'dist')
+
+await rm(distDir, { recursive: true, force: true })
+
+const tsc = spawnSync('pnpm', ['exec', 'tsc', '-p', 'tsconfig.build.json'], {
+  cwd: packageRoot,
+  stdio: 'inherit',
+})
+
+if (tsc.status !== 0)
+  process.exit(tsc.status ?? 1)
+
+await mkdir(distDir, { recursive: true })
+
+await cp(resolve(packageRoot, 'src/styles.css'), resolve(packageRoot, 'dist/styles.css'))
+await cp(resolve(packageRoot, 'src/markdown.css'), resolve(packageRoot, 'dist/markdown.css'))
+await cp(resolve(packageRoot, 'src/styles'), resolve(packageRoot, 'dist/styles'), {
+  force: true,
+  recursive: true,
+})
+
+await cp(resolve(packageRoot, 'src/themes'), resolve(packageRoot, 'dist/themes'), {
+  force: true,
+  recursive: true,
+})

packages/dify-ui/src/context-menu/index.stories.tsx

@@ -1,4 +1,10 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  RiDeleteBinLine,
+  RiFileCopyLine,
+  RiPencilLine,
+  RiShareLine,
+} from '@remixicon/react'
 import { useState } from 'react'
 import {
   ContextMenu,
@@ -17,7 +23,7 @@ import {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
-} from '.'
+} from './index'
 
 const TriggerArea = ({ label = 'Right-click inside this area' }: { label?: string }) => (
   <ContextMenuTrigger
@@ -185,17 +191,17 @@ export const Complex: Story = {
       <TriggerArea label="Right-click to inspect all menu capabilities" />
       <ContextMenuContent>
         <ContextMenuItem>
-          <span aria-hidden className="i-ri-pencil-line size-4 shrink-0 text-text-tertiary" />
+          <RiPencilLine aria-hidden className="size-4 shrink-0 text-text-tertiary" />
           Rename
         </ContextMenuItem>
         <ContextMenuItem>
-          <span aria-hidden className="i-ri-file-copy-line size-4 shrink-0 text-text-tertiary" />
+          <RiFileCopyLine aria-hidden className="size-4 shrink-0 text-text-tertiary" />
           Duplicate
         </ContextMenuItem>
         <ContextMenuSeparator />
         <ContextMenuSub>
           <ContextMenuSubTrigger>
-            <span aria-hidden className="i-ri-share-line size-4 shrink-0 text-text-tertiary" />
+            <RiShareLine aria-hidden className="size-4 shrink-0 text-text-tertiary" />
             Share
           </ContextMenuSubTrigger>
           <ContextMenuSubContent>
@@ -206,7 +212,7 @@ export const Complex: Story = {
         </ContextMenuSub>
         <ContextMenuSeparator />
         <ContextMenuItem destructive>
-          <span aria-hidden className="i-ri-delete-bin-line size-4 shrink-0" />
+          <RiDeleteBinLine aria-hidden className="size-4 shrink-0" />
           Delete
         </ContextMenuItem>
       </ContextMenuContent>

packages/dify-ui/src/context-menu/index.tsx

@@ -1,8 +1,10 @@
 'use client'
 
-import type { Placement } from '@/app/components/base/ui/placement'
+import type { Placement } from '../internal/placement.js'
 import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu'
+import { RiArrowRightSLine, RiCheckLine } from '@remixicon/react'
 import * as React from 'react'
+import { cn } from '../internal/cn.js'
 import {
   menuBackdropClassName,
   menuGroupLabelClassName,
@@ -11,9 +13,8 @@ import {
   menuPopupBaseClassName,
   menuRowClassName,
   menuSeparatorClassName,
-} from '@/app/components/base/ui/menu-shared'
-import { parsePlacement } from '@/app/components/base/ui/placement'
-import { cn } from '@/utils/classnames'
+} from '../internal/menu-shared.js'
+import { parsePlacement } from '../internal/placement.js'
 
 export const ContextMenu = BaseContextMenu.Root
 export const ContextMenuTrigger = BaseContextMenu.Trigger
@@ -44,11 +45,11 @@ type ContextMenuPopupRenderProps = Required<Pick<ContextMenuContentProps, 'child
   placement: Placement
   sideOffset: number
   alignOffset: number
-  className?: string
-  popupClassName?: string
-  positionerProps?: ContextMenuContentProps['positionerProps']
-  popupProps?: ContextMenuContentProps['popupProps']
-  withBackdrop?: boolean
+  className?: string | undefined
+  popupClassName?: string | undefined
+  positionerProps?: ContextMenuContentProps['positionerProps'] | undefined
+  popupProps?: ContextMenuContentProps['popupProps'] | undefined
+  withBackdrop?: boolean | undefined
 }
 
 function renderContextMenuPopup({
@@ -190,7 +191,7 @@ export function ContextMenuItemIndicator({
       className={cn(menuIndicatorClassName, className)}
       {...props}
     >
-      {children ?? <span aria-hidden className="i-ri-check-line h-4 w-4" />}
+      {children ?? <RiCheckLine aria-hidden className="h-4 w-4" />}
     </span>
   )
 }
@@ -204,7 +205,7 @@ export function ContextMenuCheckboxItemIndicator({
       className={cn(menuIndicatorClassName, className)}
       {...props}
     >
-      <span aria-hidden className="i-ri-check-line h-4 w-4" />
+      <RiCheckLine aria-hidden className="h-4 w-4" />
     </BaseContextMenu.CheckboxItemIndicator>
   )
 }
@@ -218,7 +219,7 @@ export function ContextMenuRadioItemIndicator({
       className={cn(menuIndicatorClassName, className)}
       {...props}
     >
-      <span aria-hidden className="i-ri-check-line h-4 w-4" />
+      <RiCheckLine aria-hidden className="h-4 w-4" />
     </BaseContextMenu.RadioItemIndicator>
   )
 }
@@ -239,20 +240,20 @@ export function ContextMenuSubTrigger({
       {...props}
     >
       {children}
-      <span aria-hidden className="i-ri-arrow-right-s-line ml-auto size-4 shrink-0 text-text-tertiary" />
+      <RiArrowRightSLine aria-hidden className="ml-auto size-4 shrink-0 text-text-tertiary" />
     </BaseContextMenu.SubmenuTrigger>
   )
 }
 
 type ContextMenuSubContentProps = {
   children: React.ReactNode
-  placement?: Placement
-  sideOffset?: number
-  alignOffset?: number
-  className?: string
-  popupClassName?: string
-  positionerProps?: ContextMenuContentProps['positionerProps']
-  popupProps?: ContextMenuContentProps['popupProps']
+  placement?: Placement | undefined
+  sideOffset?: number | undefined
+  alignOffset?: number | undefined
+  className?: string | undefined
+  popupClassName?: string | undefined
+  positionerProps?: ContextMenuContentProps['positionerProps'] | undefined
+  popupProps?: ContextMenuContentProps['popupProps'] | undefined
 }
 
 export function ContextMenuSubContent({
@@ -300,3 +301,5 @@ export function ContextMenuSeparator({
     />
   )
 }
+
+export type { Placement }

packages/dify-ui/src/dropdown-menu/__tests__/index.spec.tsx

@@ -1,7 +1,6 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react'
 import { fireEvent, render, screen, within } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
-import Link from '@/next/link'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -14,20 +13,20 @@ import {
   DropdownMenuTrigger,
 } from '../index'
 
-vi.mock('@/next/link', () => ({
-  default: ({
-    href,
-    children,
-    ...props
-  }: {
-    href: string
-    children?: ReactNode
-  } & Omit<ComponentPropsWithoutRef<'a'>, 'href'>) => (
+function MockLink({
+  href,
+  children,
+  ...props
+}: {
+  href: string
+  children?: ReactNode
+} & Omit<ComponentPropsWithoutRef<'a'>, 'href'>) {
+  return (
     <a href={href} {...props}>
       {children}
     </a>
-  ),
-}))
+  )
+}
 
 describe('dropdown-menu wrapper', () => {
   describe('DropdownMenuContent', () => {
@@ -301,7 +300,7 @@ describe('dropdown-menu wrapper', () => {
           <DropdownMenuTrigger aria-label="menu trigger">Open</DropdownMenuTrigger>
           <DropdownMenuContent>
             <DropdownMenuLinkItem
-              render={<Link href="/account" />}
+              render={<MockLink href="/account" />}
               aria-label="account link"
             >
               Account settings

packages/dify-ui/src/dropdown-menu/index.stories.tsx

@@ -1,4 +1,15 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  RiArchiveLine,
+  RiChat1Line,
+  RiDeleteBinLine,
+  RiFileCopyLine,
+  RiLink,
+  RiLockLine,
+  RiMailLine,
+  RiPencilLine,
+  RiShareLine,
+} from '@remixicon/react'
 import { useState } from 'react'
 import {
   DropdownMenu,
@@ -17,7 +28,7 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-} from '.'
+} from './index'
 
 const TriggerButton = ({ label = 'Open Menu' }: { label?: string }) => (
   <DropdownMenuTrigger
@@ -214,20 +225,20 @@ export const WithIcons: Story = {
       <TriggerButton />
       <DropdownMenuContent>
         <DropdownMenuItem>
-          <span aria-hidden className="i-ri-pencil-line size-4 shrink-0 text-text-tertiary" />
+          <RiPencilLine aria-hidden className="size-4 shrink-0 text-text-tertiary" />
           Edit
         </DropdownMenuItem>
         <DropdownMenuItem>
-          <span aria-hidden className="i-ri-file-copy-line size-4 shrink-0 text-text-tertiary" />
+          <RiFileCopyLine aria-hidden className="size-4 shrink-0 text-text-tertiary" />
           Duplicate
         </DropdownMenuItem>
         <DropdownMenuItem>
-          <span aria-hidden className="i-ri-archive-line size-4 shrink-0 text-text-tertiary" />
+          <RiArchiveLine aria-hidden className="size-4 shrink-0 text-text-tertiary" />
           Archive
         </DropdownMenuItem>
         <DropdownMenuSeparator />
         <DropdownMenuItem destructive>
-          <span aria-hidden className="i-ri-delete-bin-line size-4 shrink-0" />
+          <RiDeleteBinLine aria-hidden className="size-4 shrink-0" />
           Delete
         </DropdownMenuItem>
       </DropdownMenuContent>
@@ -262,35 +273,35 @@ const ComplexDemo = () => {
         <DropdownMenuGroup>
           <DropdownMenuGroupLabel>Edit</DropdownMenuGroupLabel>
           <DropdownMenuItem>
-            <span aria-hidden className="i-ri-pencil-line size-4 shrink-0 text-text-tertiary" />
+            <RiPencilLine aria-hidden className="size-4 shrink-0 text-text-tertiary" />
             Rename
           </DropdownMenuItem>
           <DropdownMenuItem>
-            <span aria-hidden className="i-ri-file-copy-line size-4 shrink-0 text-text-tertiary" />
+            <RiFileCopyLine aria-hidden className="size-4 shrink-0 text-text-tertiary" />
             Duplicate
           </DropdownMenuItem>
           <DropdownMenuItem disabled>
-            <span aria-hidden className="i-ri-lock-line size-4 shrink-0 text-text-tertiary" />
+            <RiLockLine aria-hidden className="size-4 shrink-0 text-text-tertiary" />
             Move to Workspace
           </DropdownMenuItem>
         </DropdownMenuGroup>
         <DropdownMenuSeparator />
         <DropdownMenuSub>
           <DropdownMenuSubTrigger>
-            <span aria-hidden className="i-ri-share-line size-4 shrink-0 text-text-tertiary" />
+            <RiShareLine aria-hidden className="size-4 shrink-0 text-text-tertiary" />
             Share
           </DropdownMenuSubTrigger>
           <DropdownMenuSubContent>
             <DropdownMenuItem>
-              <span aria-hidden className="i-ri-mail-line size-4 shrink-0 text-text-tertiary" />
+              <RiMailLine aria-hidden className="size-4 shrink-0 text-text-tertiary" />
               Email
             </DropdownMenuItem>
             <DropdownMenuItem>
-              <span aria-hidden className="i-ri-chat-1-line size-4 shrink-0 text-text-tertiary" />
+              <RiChat1Line aria-hidden className="size-4 shrink-0 text-text-tertiary" />
               Slack
             </DropdownMenuItem>
             <DropdownMenuItem>
-              <span aria-hidden className="i-ri-link size-4 shrink-0 text-text-tertiary" />
+              <RiLink aria-hidden className="size-4 shrink-0 text-text-tertiary" />
               Copy Link
             </DropdownMenuItem>
           </DropdownMenuSubContent>
@@ -315,13 +326,13 @@ const ComplexDemo = () => {
         </DropdownMenuGroup>
         <DropdownMenuSeparator />
         <DropdownMenuCheckboxItem checked={showArchived} onCheckedChange={setShowArchived}>
-          <span aria-hidden className="i-ri-archive-line size-4 shrink-0 text-text-tertiary" />
+          <RiArchiveLine aria-hidden className="size-4 shrink-0 text-text-tertiary" />
           Show Archived
           <DropdownMenuCheckboxItemIndicator />
         </DropdownMenuCheckboxItem>
         <DropdownMenuSeparator />
         <DropdownMenuItem destructive>
-          <span aria-hidden className="i-ri-delete-bin-line size-4 shrink-0" />
+          <RiDeleteBinLine aria-hidden className="size-4 shrink-0" />
           Delete
         </DropdownMenuItem>
       </DropdownMenuContent>

packages/dify-ui/src/dropdown-menu/index.tsx

@@ -1,8 +1,10 @@
 'use client'
 
-import type { Placement } from '@/app/components/base/ui/placement'
+import type { Placement } from '../internal/placement.js'
 import { Menu } from '@base-ui/react/menu'
+import { RiArrowRightSLine, RiCheckLine } from '@remixicon/react'
 import * as React from 'react'
+import { cn } from '../internal/cn.js'
 import {
   menuGroupLabelClassName,
   menuIndicatorClassName,
@@ -10,9 +12,8 @@ import {
   menuPopupBaseClassName,
   menuRowClassName,
   menuSeparatorClassName,
-} from '@/app/components/base/ui/menu-shared'
-import { parsePlacement } from '@/app/components/base/ui/placement'
-import { cn } from '@/utils/classnames'
+} from '../internal/menu-shared.js'
+import { parsePlacement } from '../internal/placement.js'
 
 export const DropdownMenu = Menu.Root
 export const DropdownMenuPortal = Menu.Portal
@@ -42,7 +43,7 @@ export function DropdownMenuRadioItemIndicator({
       className={cn(menuIndicatorClassName, className)}
       {...props}
     >
-      <span aria-hidden className="i-ri-check-line h-4 w-4" />
+      <RiCheckLine aria-hidden className="h-4 w-4" />
     </Menu.RadioItemIndicator>
   )
 }
@@ -68,7 +69,7 @@ export function DropdownMenuCheckboxItemIndicator({
       className={cn(menuIndicatorClassName, className)}
       {...props}
     >
-      <span aria-hidden className="i-ri-check-line h-4 w-4" />
+      <RiCheckLine aria-hidden className="h-4 w-4" />
     </Menu.CheckboxItemIndicator>
   )
 }
@@ -106,10 +107,10 @@ type DropdownMenuPopupRenderProps = Required<Pick<DropdownMenuContentProps, 'chi
   placement: Placement
   sideOffset: number
   alignOffset: number
-  className?: string
-  popupClassName?: string
-  positionerProps?: DropdownMenuContentProps['positionerProps']
-  popupProps?: DropdownMenuContentProps['popupProps']
+  className?: string | undefined
+  popupClassName?: string | undefined
+  positionerProps?: DropdownMenuContentProps['positionerProps'] | undefined
+  popupProps?: DropdownMenuContentProps['popupProps'] | undefined
 }
 
 function renderDropdownMenuPopup({
@@ -187,20 +188,20 @@ export function DropdownMenuSubTrigger({
       {...props}
     >
       {children}
-      <span aria-hidden className="i-ri-arrow-right-s-line ml-auto size-4 shrink-0 text-text-tertiary" />
+      <RiArrowRightSLine aria-hidden className="ml-auto size-4 shrink-0 text-text-tertiary" />
     </Menu.SubmenuTrigger>
   )
 }
 
 type DropdownMenuSubContentProps = {
   children: React.ReactNode
-  placement?: Placement
-  sideOffset?: number
-  alignOffset?: number
-  className?: string
-  popupClassName?: string
-  positionerProps?: DropdownMenuContentProps['positionerProps']
-  popupProps?: DropdownMenuContentProps['popupProps']
+  placement?: Placement | undefined
+  sideOffset?: number | undefined
+  alignOffset?: number | undefined
+  className?: string | undefined
+  popupClassName?: string | undefined
+  positionerProps?: DropdownMenuContentProps['positionerProps'] | undefined
+  popupProps?: DropdownMenuContentProps['popupProps'] | undefined
 }
 
 export function DropdownMenuSubContent({
@@ -272,3 +273,5 @@ export function DropdownMenuSeparator({
     />
   )
 }
+
+export type { Placement }

packages/dify-ui/src/internal/cn.ts

@@ -0,0 +1,7 @@
+import type { ClassValue } from 'clsx'
+import { clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

packages/dify-ui/src/internal/placement.ts

@@ -0,0 +1,25 @@
+type Side = 'top' | 'bottom' | 'left' | 'right'
+type Align = 'start' | 'center' | 'end'
+
+export type Placement
+  = 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end'
+
+export function parsePlacement(placement: Placement): { side: Side, align: Align } {
+  const [side, align] = placement.split('-') as [Side, Align | undefined]
+
+  return {
+    side,
+    align: align ?? 'center',
+  }
+}

packages/dify-ui/src/markdown.css

@@ -0,0 +1,2 @@
+@import './themes/markdown-light.css';
+@import './themes/markdown-dark.css';

packages/dify-ui/src/styles.css

@@ -0,0 +1,7 @@
+@import './themes/light.css' layer(base);
+@import './themes/dark.css' layer(base);
+@import './themes/manual-light.css' layer(base);
+@import './themes/manual-dark.css' layer(base);
+@import './styles/tokens.css';
+
+@source './**/*.{js,mjs}';

packages/dify-ui/src/styles/tokens.css

@@ -0,0 +1,713 @@
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+@utility system-kbd {
+  /* font define start */
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+
+  /* border radius end */
+}
+
+@utility system-2xs-regular-uppercase {
+  font-size: 10px;
+  font-weight: 400;
+  text-transform: uppercase;
+  line-height: 12px;
+
+  /* border radius end */
+}
+
+@utility system-2xs-regular {
+  font-size: 10px;
+  font-weight: 400;
+  line-height: 12px;
+
+  /* border radius end */
+}
+
+@utility system-2xs-medium {
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 12px;
+
+  /* border radius end */
+}
+
+@utility system-2xs-medium-uppercase {
+  font-size: 10px;
+  font-weight: 500;
+  text-transform: uppercase;
+  line-height: 12px;
+
+  /* border radius end */
+}
+
+@utility system-2xs-semibold-uppercase {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  line-height: 12px;
+
+  /* border radius end */
+}
+
+@utility system-xs-regular {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+
+  /* border radius end */
+}
+
+@utility system-xs-regular-uppercase {
+  font-size: 12px;
+  font-weight: 400;
+  text-transform: uppercase;
+  line-height: 16px;
+
+  /* border radius end */
+}
+
+@utility system-xs-medium {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+
+  /* border radius end */
+}
+
+@utility system-xs-medium-uppercase {
+  font-size: 12px;
+  font-weight: 500;
+  text-transform: uppercase;
+  line-height: 16px;
+
+  /* border radius end */
+}
+
+@utility system-xs-semibold {
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+
+  /* border radius end */
+}
+
+@utility system-xs-semibold-uppercase {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  line-height: 16px;
+
+  /* border radius end */
+}
+
+@utility system-sm-regular {
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 16px;
+
+  /* border radius end */
+}
+
+@utility system-sm-medium {
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 16px;
+
+  /* border radius end */
+}
+
+@utility system-sm-medium-uppercase {
+  font-size: 13px;
+  font-weight: 500;
+  text-transform: uppercase;
+  line-height: 16px;
+
+  /* border radius end */
+}
+
+@utility system-sm-semibold {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 16px;
+
+  /* border radius end */
+}
+
+@utility system-sm-semibold-uppercase {
+  font-size: 13px;
+  font-weight: 600;
+  text-transform: uppercase;
+  line-height: 16px;
+
+  /* border radius end */
+}
+
+@utility system-md-regular {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+
+  /* border radius end */
+}
+
+@utility system-md-medium {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+
+  /* border radius end */
+}
+
+@utility system-md-semibold {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+
+  /* border radius end */
+}
+
+@utility system-md-semibold-uppercase {
+  font-size: 14px;
+  font-weight: 600;
+  text-transform: uppercase;
+  line-height: 20px;
+
+  /* border radius end */
+}
+
+@utility system-xl-regular {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+
+  /* border radius end */
+}
+
+@utility system-xl-medium {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+
+  /* border radius end */
+}
+
+@utility system-xl-semibold {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+
+  /* border radius end */
+}
+
+@utility code-xs-regular {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.5;
+
+  /* border radius end */
+}
+
+@utility code-xs-semibold {
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.5;
+
+  /* border radius end */
+}
+
+@utility code-sm-regular {
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.5;
+
+  /* border radius end */
+}
+
+@utility code-sm-semibold {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.5;
+
+  /* border radius end */
+}
+
+@utility code-md-regular {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.5;
+
+  /* border radius end */
+}
+
+@utility code-md-semibold {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.5;
+
+  /* border radius end */
+}
+
+@utility body-xs-light {
+  font-size: 12px;
+  font-weight: 300;
+  line-height: 16px;
+
+  /* border radius end */
+}
+
+@utility body-xs-regular {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+
+  /* border radius end */
+}
+
+@utility body-xs-medium {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+
+  /* border radius end */
+}
+
+@utility body-sm-light {
+  font-size: 13px;
+  font-weight: 300;
+  line-height: 16px;
+
+  /* border radius end */
+}
+
+@utility body-sm-regular {
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 16px;
+
+  /* border radius end */
+}
+
+@utility body-sm-medium {
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 16px;
+
+  /* border radius end */
+}
+
+@utility body-md-light {
+  font-size: 14px;
+  font-weight: 300;
+  line-height: 20px;
+
+  /* border radius end */
+}
+
+@utility body-md-regular {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+
+  /* border radius end */
+}
+
+@utility body-md-medium {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+
+  /* border radius end */
+}
+
+@utility body-lg-light {
+  font-size: 15px;
+  font-weight: 300;
+  line-height: 20px;
+
+  /* border radius end */
+}
+
+@utility body-lg-regular {
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 20px;
+
+  /* border radius end */
+}
+
+@utility body-lg-medium {
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 20px;
+
+  /* border radius end */
+}
+
+@utility body-xl-regular {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+
+  /* border radius end */
+}
+
+@utility body-xl-medium {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+
+  /* border radius end */
+}
+
+@utility body-xl-light {
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 24px;
+
+  /* border radius end */
+}
+
+@utility body-2xl-light {
+  font-size: 18px;
+  font-weight: 300;
+  line-height: 1.5;
+
+  /* border radius end */
+}
+
+@utility body-2xl-regular {
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 1.5;
+
+  /* border radius end */
+}
+
+@utility body-2xl-medium {
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 1.5;
+
+  /* border radius end */
+}
+
+@utility title-xs-semi-bold {
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+
+  /* border radius end */
+}
+
+@utility title-xs-bold {
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 16px;
+
+  /* border radius end */
+}
+
+@utility title-sm-semi-bold {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 16px;
+
+  /* border radius end */
+}
+
+@utility title-sm-bold {
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 16px;
+
+  /* border radius end */
+}
+
+@utility title-md-semi-bold {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+
+  /* border radius end */
+}
+
+@utility title-md-bold {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 20px;
+
+  /* border radius end */
+}
+
+@utility title-lg-semi-bold {
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.2;
+
+  /* border radius end */
+}
+
+@utility title-lg-bold {
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.2;
+
+  /* border radius end */
+}
+
+@utility title-xl-semi-bold {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.2;
+
+  /* border radius end */
+}
+
+@utility title-xl-bold {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.2;
+
+  /* border radius end */
+}
+
+@utility title-2xl-semi-bold {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.2;
+
+  /* border radius end */
+}
+
+@utility title-2xl-bold {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1.2;
+
+  /* border radius end */
+}
+
+@utility title-3xl-semi-bold {
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.2;
+
+  /* border radius end */
+}
+
+@utility title-3xl-bold {
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.2;
+
+  /* border radius end */
+}
+
+@utility title-4xl-semi-bold {
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 1.2;
+
+  /* border radius end */
+}
+
+@utility title-4xl-bold {
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1.2;
+
+  /* border radius end */
+}
+
+@utility title-5xl-semi-bold {
+  font-size: 30px;
+  font-weight: 600;
+  line-height: 1.2;
+
+  /* border radius end */
+}
+
+@utility title-5xl-bold {
+  font-size: 30px;
+  font-weight: 700;
+  line-height: 1.2;
+
+  /* border radius end */
+}
+
+@utility title-6xl-semi-bold {
+  font-size: 36px;
+  font-weight: 600;
+  line-height: 1.2;
+
+  /* border radius end */
+}
+
+@utility title-6xl-bold {
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 1.2;
+
+  /* border radius end */
+}
+
+@utility title-7xl-semi-bold {
+  font-size: 48px;
+  font-weight: 600;
+  line-height: 1.2;
+
+  /* border radius end */
+}
+
+@utility title-7xl-bold {
+  font-size: 48px;
+  font-weight: 700;
+  line-height: 1.2;
+
+  /* border radius end */
+}
+
+@utility title-8xl-semi-bold {
+  font-size: 60px;
+  font-weight: 600;
+  line-height: 1.2;
+
+  /* border radius end */
+}
+
+@utility title-8xl-bold {
+  font-size: 60px;
+  font-weight: 700;
+  line-height: 1.2;
+
+  /* border radius end */
+}
+
+@utility radius-2xs {
+  /* font define end */
+
+  /* border radius start */
+  border-radius: 2px;
+
+  /* border radius end */
+}
+
+@utility radius-xs {
+  border-radius: 4px;
+
+  /* border radius end */
+}
+
+@utility radius-sm {
+  border-radius: 6px;
+
+  /* border radius end */
+}
+
+@utility radius-md {
+  border-radius: 8px;
+
+  /* border radius end */
+}
+
+@utility radius-lg {
+  border-radius: 10px;
+
+  /* border radius end */
+}
+
+@utility radius-xl {
+  border-radius: 12px;
+
+  /* border radius end */
+}
+
+@utility radius-2xl {
+  border-radius: 16px;
+
+  /* border radius end */
+}
+
+@utility radius-3xl {
+  border-radius: 20px;
+
+  /* border radius end */
+}
+
+@utility radius-4xl {
+  border-radius: 24px;
+
+  /* border radius end */
+}
+
+@utility radius-5xl {
+  border-radius: 24px;
+
+  /* border radius end */
+}
+
+@utility radius-6xl {
+  border-radius: 28px;
+
+  /* border radius end */
+}
+
+@utility radius-7xl {
+  border-radius: 32px;
+
+  /* border radius end */
+}
+
+@utility radius-8xl {
+  border-radius: 40px;
+
+  /* border radius end */
+}
+
+@utility radius-9xl {
+  border-radius: 48px;
+
+  /* border radius end */
+}
+
+@utility radius-full {
+  border-radius: 64px;
+
+  /* border radius end */
+}
+
+@utility no-scrollbar {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+@utility no-spinner {
+  /* Hide arrows from number input */
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  -moz-appearance: textfield;
+}
+

packages/dify-ui/src/tailwind-preset.ts

@@ -1,8 +1,10 @@
 import { icons as customPublicIcons } from '@dify/iconify-collections/custom-public'
 import { icons as customVenderIcons } from '@dify/iconify-collections/custom-vender'
-import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons'
+import { icons as heroicons } from '@iconify-json/heroicons'
+import { icons as remixIcons } from '@iconify-json/ri'
+import { iconsPlugin } from '@egoist/tailwindcss-icons'
 import tailwindTypography from '@tailwindcss/typography'
-import tailwindThemeVarDefine from './themes/tailwind-theme-var-define'
+import tailwindThemeVarDefine from './tokens/tailwind-theme-var-define.js'
 import typography from './typography.js'
 
 const config = {
@@ -151,7 +153,8 @@ const config = {
     tailwindTypography,
     iconsPlugin({
       collections: {
-        ...getIconCollections(['heroicons', 'ri']),
+        heroicons,
+        ri: remixIcons,
         'custom-public': customPublicIcons,
         'custom-vender': customVenderIcons,
       },

packages/dify-ui/src/typography.d.ts

@@ -0,0 +1,3 @@
+declare const typography: (helpers: { theme: (path: string) => unknown }) => Record<string, unknown>
+
+export default typography

packages/dify-ui/tailwind.config.ts

@@ -0,0 +1,8 @@
+import difyUiTailwindPreset from './src/tailwind-preset'
+
+const config = {
+  content: [],
+  ...difyUiTailwindPreset,
+}
+
+export default config

packages/dify-ui/tsconfig.build.json

@@ -0,0 +1,21 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "noEmit": false,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.js"
+  ],
+  "exclude": [
+    "src/**/*.stories.tsx",
+    "src/**/__tests__/**"
+  ]
+}

packages/dify-ui/tsconfig.json

@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "jsx": "react-jsx",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "es2022"
+    ],
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "moduleDetection": "force",
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "skipLibCheck": true,
+    "types": [
+      "node",
+      "vitest/globals",
+      "@testing-library/jest-dom"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.js",
+    "scripts/**/*.mjs",
+    "vite.config.ts",
+    "vitest.setup.ts"
+  ]
+}

packages/dify-ui/vite.config.ts

@@ -0,0 +1,11 @@
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite-plus'
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'happy-dom',
+    globals: true,
+    setupFiles: ['./vitest.setup.ts'],
+  },
+})

packages/dify-ui/vitest.setup.ts

@@ -0,0 +1,39 @@
+import { cleanup } from '@testing-library/react'
+import '@testing-library/jest-dom/vitest'
+import { afterEach } from 'vitest'
+
+if (typeof globalThis.ResizeObserver === 'undefined') {
+  globalThis.ResizeObserver = class {
+    observe() {
+      return undefined
+    }
+
+    unobserve() {
+      return undefined
+    }
+
+    disconnect() {
+      return undefined
+    }
+  }
+}
+
+if (typeof globalThis.IntersectionObserver === 'undefined') {
+  globalThis.IntersectionObserver = class {
+    readonly root: Element | Document | null = null
+    readonly rootMargin = ''
+    readonly scrollMargin = ''
+    readonly thresholds: ReadonlyArray<number> = []
+    constructor(_callback: IntersectionObserverCallback, _options?: IntersectionObserverInit) {}
+    observe(_target: Element) {}
+    unobserve(_target: Element) {}
+    disconnect() {}
+    takeRecords(): IntersectionObserverEntry[] {
+      return []
+    }
+  }
+}
+
+afterEach(() => {
+  cleanup()
+})

pnpm-lock.yaml

@@ -640,6 +640,82 @@ importers:
         specifier: 'catalog:'
         version: 0.1.14(@types/node@25.5.0)(esbuild@0.27.2)(happy-dom@20.8.9)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@5.9.3)(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@25.5.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(yaml@2.8.3)
 
+  packages/dify-ui:
+    dependencies:
+      '@base-ui/react':
+        specifier: 'catalog:'
+        version: 1.3.0(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@dify/iconify-collections':
+        specifier: workspace:*
+        version: link:../iconify-collections
+      '@egoist/tailwindcss-icons':
+        specifier: 'catalog:'
+        version: 1.9.2(tailwindcss@4.2.2)
+      '@iconify-json/heroicons':
+        specifier: 'catalog:'
+        version: 1.2.3
+      '@iconify-json/ri':
+        specifier: 'catalog:'
+        version: 1.2.10
+      '@remixicon/react':
+        specifier: 'catalog:'
+        version: 4.9.0(react@19.2.4)
+      '@tailwindcss/typography':
+        specifier: 'catalog:'
+        version: 0.5.19(tailwindcss@4.2.2)
+      clsx:
+        specifier: 'catalog:'
+        version: 2.1.1
+      tailwind-merge:
+        specifier: 'catalog:'
+        version: 3.5.0
+    devDependencies:
+      '@storybook/react':
+        specifier: 'catalog:'
+        version: 10.3.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@10.3.3(@testing-library/dom@10.4.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
+      '@testing-library/jest-dom':
+        specifier: 'catalog:'
+        version: 6.9.1
+      '@testing-library/react':
+        specifier: 'catalog:'
+        version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@types/node':
+        specifier: 'catalog:'
+        version: 25.5.0
+      '@types/react':
+        specifier: 'catalog:'
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: 'catalog:'
+        version: 19.2.3(@types/react@19.2.14)
+      '@vitejs/plugin-react':
+        specifier: 'catalog:'
+        version: 6.0.1(@voidzero-dev/vite-plus-core@0.1.14(@types/node@25.5.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3))
+      happy-dom:
+        specifier: 'catalog:'
+        version: 20.8.9
+      react:
+        specifier: 'catalog:'
+        version: 19.2.4
+      react-dom:
+        specifier: 'catalog:'
+        version: 19.2.4(react@19.2.4)
+      tailwindcss:
+        specifier: 'catalog:'
+        version: 4.2.2
+      typescript:
+        specifier: 'catalog:'
+        version: 5.9.3
+      vite:
+        specifier: npm:@voidzero-dev/vite-plus-core@0.1.14
+        version: '@voidzero-dev/vite-plus-core@0.1.14(@types/node@25.5.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)'
+      vite-plus:
+        specifier: 'catalog:'
+        version: 0.1.14(@types/node@25.5.0)(@voidzero-dev/vite-plus-core@0.1.14(@types/node@25.5.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.8.9)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
+      vitest:
+        specifier: npm:@voidzero-dev/vite-plus-test@0.1.14
+        version: '@voidzero-dev/vite-plus-test@0.1.14(@types/node@25.5.0)(@voidzero-dev/vite-plus-core@0.1.14(@types/node@25.5.0)(esbuild@0.27.2)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3))(esbuild@0.27.2)(happy-dom@20.8.9)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)'
+
   packages/iconify-collections:
     devDependencies:
       iconify-import-svg:
@@ -702,6 +778,9 @@ importers:
       '@heroicons/react':
         specifier: 'catalog:'
         version: 2.2.0(react@19.2.4)
+      '@langgenius/dify-ui':
+        specifier: workspace:*
+        version: link:../packages/dify-ui
       '@lexical/code':
         specifier: npm:lexical-code-no-prism@0.41.0
         version: lexical-code-no-prism@0.41.0(@lexical/utils@0.42.0)(lexical@0.42.0)

web/.storybook/main.ts

@@ -1,7 +1,10 @@
 import type { StorybookConfig } from '@storybook/nextjs-vite'
 
 const config: StorybookConfig = {
-  stories: ['../app/components/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: [
+    '../app/components/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    '../../packages/dify-ui/src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
   addons: [
     // Not working with Storybook Vite framework
     // '@storybook/addon-onboarding',

web/app/(commonLayout)/datasets/layout.spec.tsx

@@ -55,7 +55,7 @@ describe('DatasetsLayout', () => {
     setAppContext()
   })
 
-  it('should keep rendering children when workspace is still loading', () => {
+  it('should render loading when workspace is still loading', () => {
     setAppContext({
       isLoadingCurrentWorkspace: true,
       currentWorkspace: { id: '' },
@@ -67,7 +67,8 @@ describe('DatasetsLayout', () => {
       </DatasetsLayout>
     ))
 
-    expect(screen.getByTestId('datasets-content')).toBeInTheDocument()
+    expect(screen.getByRole('status')).toBeInTheDocument()
+    expect(screen.queryByTestId('datasets-content')).not.toBeInTheDocument()
     expect(mockReplace).not.toHaveBeenCalled()
   })
 

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

@@ -1,18 +1,29 @@
 'use client'
 
+import { useEffect } from 'react'
+import Loading from '@/app/components/base/loading'
 import { useAppContext } from '@/context/app-context'
 import { ExternalApiPanelProvider } from '@/context/external-api-panel-context'
 import { ExternalKnowledgeApiProvider } from '@/context/external-knowledge-api-context'
-import { redirect } from '@/next/navigation'
+import { useRouter } from '@/next/navigation'
 
 export default function DatasetsLayout({ children }: { children: React.ReactNode }) {
   const { isCurrentWorkspaceEditor, isCurrentWorkspaceDatasetOperator, currentWorkspace, isLoadingCurrentWorkspace } = useAppContext()
+  const router = useRouter()
   const shouldRedirect = !isLoadingCurrentWorkspace
     && currentWorkspace.id
     && !(isCurrentWorkspaceEditor || isCurrentWorkspaceDatasetOperator)
 
+  useEffect(() => {
+    if (shouldRedirect)
+      router.replace('/apps')
+  }, [shouldRedirect, router])
+
+  if (isLoadingCurrentWorkspace || !currentWorkspace.id)
+    return <Loading type="app" />
+
   if (shouldRedirect) {
-    return redirect('/apps')
+    return null
   }
 
   return (

web/app/(commonLayout)/layout.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react'
+import * as React from 'react'
 import { AppInitializer } from '@/app/components/app-initializer'
 import InSiteMessageNotification from '@/app/components/app/in-site-message/notification'
 import AmplitudeProvider from '@/app/components/base/amplitude'
@@ -13,6 +14,7 @@ import { EventEmitterContextProvider } from '@/context/event-emitter-provider'
 import { ModalContextProvider } from '@/context/modal-context-provider'
 import { ProviderContextProvider } from '@/context/provider-context-provider'
 import PartnerStack from '../components/billing/partner-stack'
+import Splash from '../components/splash'
 import RoleRouteGuard from './role-route-guard'
 
 const Layout = ({ children }: { children: ReactNode }) => {
@@ -35,6 +37,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
                 <PartnerStack />
                 <ReadmePanel />
                 <GotoAnything />
+                <Splash />
               </ModalContextProvider>
             </ProviderContextProvider>
           </EventEmitterContextProvider>

web/app/(commonLayout)/role-route-guard.spec.tsx

@@ -41,7 +41,7 @@ describe('RoleRouteGuard', () => {
     setAppContext()
   })
 
-  it('should hide guarded content while workspace is loading', () => {
+  it('should render loading while workspace is loading', () => {
     setAppContext({
       isLoadingCurrentWorkspace: true,
     })
@@ -52,6 +52,7 @@ describe('RoleRouteGuard', () => {
       </RoleRouteGuard>
     ))
 
+    expect(screen.getByRole('status')).toBeInTheDocument()
     expect(screen.queryByTestId('guarded-content')).not.toBeInTheDocument()
     expect(mockReplace).not.toHaveBeenCalled()
   })

web/app/(commonLayout)/role-route-guard.tsx

@@ -1,8 +1,10 @@
 'use client'
 
 import type { ReactNode } from 'react'
+import { useEffect } from 'react'
+import Loading from '@/app/components/base/loading'
 import { useAppContext } from '@/context/app-context'
-import { redirect, usePathname } from '@/next/navigation'
+import { usePathname, useRouter } from '@/next/navigation'
 
 const datasetOperatorRedirectRoutes = ['/apps', '/app', '/explore', '/tools'] as const
 
@@ -11,11 +13,21 @@ const isPathUnderRoute = (pathname: string, route: string) => pathname === route
 export default function RoleRouteGuard({ children }: { children: ReactNode }) {
   const { isCurrentWorkspaceDatasetOperator, isLoadingCurrentWorkspace } = useAppContext()
   const pathname = usePathname()
+  const router = useRouter()
   const shouldGuardRoute = datasetOperatorRedirectRoutes.some(route => isPathUnderRoute(pathname, route))
   const shouldRedirect = shouldGuardRoute && !isLoadingCurrentWorkspace && isCurrentWorkspaceDatasetOperator
 
+  useEffect(() => {
+    if (shouldRedirect)
+      router.replace('/datasets')
+  }, [shouldRedirect, router])
+
+  // Block rendering only for guarded routes to avoid permission flicker.
+  if (shouldGuardRoute && isLoadingCurrentWorkspace)
+    return <Loading type="app" />
+
   if (shouldRedirect)
-    return redirect('/datasets')
+    return null
 
   return <>{children}</>
 }

web/app/(shareLayout)/components/__tests__/authenticated-layout.spec.tsx

@@ -1,158 +0,0 @@
-import type { Mock } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import { useWebAppStore } from '@/context/web-app-context'
-import { useGetUserCanAccessApp } from '@/service/access-control'
-import { useGetWebAppInfo, useGetWebAppMeta, useGetWebAppParams } from '@/service/use-share'
-import AuthenticatedLayout from '../authenticated-layout'
-
-const mockReplace = vi.fn()
-const mockShareCode = 'share-code'
-const mockUpdateAppInfo = vi.fn()
-const mockUpdateAppParams = vi.fn()
-const mockUpdateWebAppMeta = vi.fn()
-const mockUpdateUserCanAccessApp = vi.fn()
-
-const mockAppInfo = {
-  app_id: 'app-123',
-}
-
-vi.mock('@/next/navigation', () => ({
-  useRouter: () => ({
-    replace: mockReplace,
-  }),
-  usePathname: () => '/chat/test-share-code',
-  useSearchParams: () => new URLSearchParams(),
-}))
-
-vi.mock('@/context/web-app-context', () => ({
-  useWebAppStore: vi.fn(),
-}))
-
-vi.mock('@/service/access-control', () => ({
-  useGetUserCanAccessApp: vi.fn(),
-}))
-
-vi.mock('@/service/use-share', () => ({
-  useGetWebAppInfo: vi.fn(),
-  useGetWebAppParams: vi.fn(),
-  useGetWebAppMeta: vi.fn(),
-}))
-
-vi.mock('@/service/webapp-auth', () => ({
-  webAppLogout: vi.fn(),
-}))
-
-describe('AuthenticatedLayout', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-
-    ;(useWebAppStore as unknown as Mock).mockImplementation((selector: (state: Record<string, unknown>) => unknown) => {
-      const state = {
-        shareCode: mockShareCode,
-        updateAppInfo: mockUpdateAppInfo,
-        updateAppParams: mockUpdateAppParams,
-        updateWebAppMeta: mockUpdateWebAppMeta,
-        updateUserCanAccessApp: mockUpdateUserCanAccessApp,
-      }
-      return selector(state)
-    })
-
-    ;(useGetWebAppInfo as Mock).mockReturnValue({
-      data: mockAppInfo,
-      error: null,
-      isPending: false,
-    })
-
-    ;(useGetWebAppParams as Mock).mockReturnValue({
-      data: { user_input_form: [] },
-      error: null,
-      isPending: false,
-    })
-
-    ;(useGetWebAppMeta as Mock).mockReturnValue({
-      data: { tool_icons: {} },
-      error: null,
-      isPending: false,
-    })
-
-    ;(useGetUserCanAccessApp as Mock).mockReturnValue({
-      data: { result: true },
-      error: null,
-      isPending: false,
-    })
-  })
-
-  describe('Permission Gating', () => {
-    it('should not render children while the app info needed for permission is still pending', () => {
-      ;(useGetWebAppInfo as Mock).mockReturnValue({
-        data: undefined,
-        error: null,
-        isPending: true,
-      })
-
-      render(
-        <AuthenticatedLayout>
-          <div>protected child</div>
-        </AuthenticatedLayout>,
-      )
-
-      expect(screen.queryByText('protected child')).not.toBeInTheDocument()
-    })
-
-    it('should not render children while the access check is still pending', () => {
-      ;(useGetUserCanAccessApp as Mock).mockReturnValue({
-        data: undefined,
-        error: null,
-        isPending: true,
-      })
-
-      render(
-        <AuthenticatedLayout>
-          <div>protected child</div>
-        </AuthenticatedLayout>,
-      )
-
-      expect(screen.queryByText('protected child')).not.toBeInTheDocument()
-    })
-
-    it('should render children once access is allowed even if metadata queries are still pending', () => {
-      ;(useGetWebAppParams as Mock).mockReturnValue({
-        data: undefined,
-        error: null,
-        isPending: true,
-      })
-
-      ;(useGetWebAppMeta as Mock).mockReturnValue({
-        data: undefined,
-        error: null,
-        isPending: true,
-      })
-
-      render(
-        <AuthenticatedLayout>
-          <div>protected child</div>
-        </AuthenticatedLayout>,
-      )
-
-      expect(screen.getByText('protected child')).toBeInTheDocument()
-    })
-
-    it('should render the no permission state when access is denied', () => {
-      ;(useGetUserCanAccessApp as Mock).mockReturnValue({
-        data: { result: false },
-        error: null,
-        isPending: false,
-      })
-
-      render(
-        <AuthenticatedLayout>
-          <div>protected child</div>
-        </AuthenticatedLayout>,
-      )
-
-      expect(screen.queryByText('protected child')).not.toBeInTheDocument()
-      expect(screen.getByText(/403/)).toBeInTheDocument()
-      expect(screen.getByText(/no permission/i)).toBeInTheDocument()
-    })
-  })
-})

web/app/(shareLayout)/components/__tests__/splash.spec.tsx

@@ -1,123 +0,0 @@
-import { render, screen, waitFor } from '@testing-library/react'
-import Splash from '../splash'
-
-const mockReplace = vi.fn()
-const mockWebAppLoginStatus = vi.fn()
-const mockFetchAccessToken = vi.fn()
-const mockSetWebAppAccessToken = vi.fn()
-const mockSetWebAppPassport = vi.fn()
-const mockWebAppLogout = vi.fn()
-
-let mockShareCode: string | null = null
-let mockEmbeddedUserId: string | null = null
-let mockMessage: string | null = null
-let mockRedirectUrl: string | null = '/chat/test-share-code'
-let mockCode: string | null = null
-let mockTokenFromUrl: string | null = null
-
-vi.mock('@/context/web-app-context', () => ({
-  useWebAppStore: (selector: (state: { shareCode: string | null, embeddedUserId: string | null }) => unknown) =>
-    selector({
-      shareCode: mockShareCode,
-      embeddedUserId: mockEmbeddedUserId,
-    }),
-}))
-
-vi.mock('@/next/navigation', () => ({
-  useRouter: () => ({
-    replace: mockReplace,
-  }),
-  useSearchParams: () => ({
-    get: (key: string) => {
-      if (key === 'redirect_url')
-        return mockRedirectUrl
-      if (key === 'message')
-        return mockMessage
-      if (key === 'code')
-        return mockCode
-      if (key === 'web_sso_token')
-        return mockTokenFromUrl
-      return null
-    },
-    toString: () => {
-      const params = new URLSearchParams()
-      if (mockRedirectUrl)
-        params.set('redirect_url', mockRedirectUrl)
-      if (mockMessage)
-        params.set('message', mockMessage)
-      if (mockCode)
-        params.set('code', mockCode)
-      if (mockTokenFromUrl)
-        params.set('web_sso_token', mockTokenFromUrl)
-      return params.toString()
-    },
-    * [Symbol.iterator]() {
-      const params = new URLSearchParams(this.toString())
-      yield* params.entries()
-    },
-  }),
-}))
-
-vi.mock('@/service/share', () => ({
-  fetchAccessToken: (...args: unknown[]) => mockFetchAccessToken(...args),
-}))
-
-vi.mock('@/service/webapp-auth', () => ({
-  setWebAppAccessToken: (...args: unknown[]) => mockSetWebAppAccessToken(...args),
-  setWebAppPassport: (...args: unknown[]) => mockSetWebAppPassport(...args),
-  webAppLoginStatus: (...args: unknown[]) => mockWebAppLoginStatus(...args),
-  webAppLogout: (...args: unknown[]) => mockWebAppLogout(...args),
-}))
-
-describe('Share Splash', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockShareCode = null
-    mockEmbeddedUserId = null
-    mockMessage = null
-    mockRedirectUrl = '/chat/test-share-code'
-    mockCode = null
-    mockTokenFromUrl = null
-    mockWebAppLoginStatus.mockResolvedValue({
-      userLoggedIn: true,
-      appLoggedIn: true,
-    })
-    mockFetchAccessToken.mockResolvedValue({ access_token: 'token' })
-  })
-
-  describe('Share Code Guard', () => {
-    it('should skip login-status checks until the share code is available', async () => {
-      render(
-        <Splash>
-          <div>share child</div>
-        </Splash>,
-      )
-
-      expect(screen.getByText('share child')).toBeInTheDocument()
-      await waitFor(() => {
-        expect(mockWebAppLoginStatus).not.toHaveBeenCalled()
-      })
-      expect(mockFetchAccessToken).not.toHaveBeenCalled()
-    })
-
-    it('should resume the auth flow after the share code becomes available', async () => {
-      const { rerender } = render(
-        <Splash>
-          <div>share child</div>
-        </Splash>,
-      )
-
-      mockShareCode = 'share-code'
-      rerender(
-        <Splash>
-          <div>share child</div>
-        </Splash>,
-      )
-
-      await waitFor(() => {
-        expect(mockWebAppLoginStatus).toHaveBeenCalledWith('share-code', undefined)
-      })
-      expect(mockReplace).toHaveBeenCalledWith('/chat/test-share-code')
-    })
-  })
-})

web/app/(shareLayout)/components/authenticated-layout.tsx

@@ -4,6 +4,7 @@ import * as React from 'react'
 import { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppUnavailable from '@/app/components/base/app-unavailable'
+import Loading from '@/app/components/base/loading'
 import { useWebAppStore } from '@/context/web-app-context'
 import { usePathname, useRouter, useSearchParams } from '@/next/navigation'
 import { useGetUserCanAccessApp } from '@/service/access-control'
@@ -17,9 +18,9 @@ const AuthenticatedLayout = ({ children }: { children: React.ReactNode }) => {
   const updateAppParams = useWebAppStore(s => s.updateAppParams)
   const updateWebAppMeta = useWebAppStore(s => s.updateWebAppMeta)
   const updateUserCanAccessApp = useWebAppStore(s => s.updateUserCanAccessApp)
-  const { data: appParams, error: appParamsError } = useGetWebAppParams()
-  const { data: appInfo, error: appInfoError } = useGetWebAppInfo()
-  const { data: appMeta, error: appMetaError } = useGetWebAppMeta()
+  const { isFetching: isFetchingAppParams, data: appParams, error: appParamsError } = useGetWebAppParams()
+  const { isFetching: isFetchingAppInfo, data: appInfo, error: appInfoError } = useGetWebAppInfo()
+  const { isFetching: isFetchingAppMeta, data: appMeta, error: appMetaError } = useGetWebAppMeta()
   const { data: userCanAccessApp, error: useCanAccessAppError } = useGetUserCanAccessApp({ appId: appInfo?.app_id, isInstalledApp: false })
 
   useEffect(() => {
@@ -80,11 +81,17 @@ const AuthenticatedLayout = ({ children }: { children: React.ReactNode }) => {
     return (
       <div className="flex h-full flex-col items-center justify-center gap-y-2">
         <AppUnavailable className="h-auto w-auto" code={403} unknownReason="no permission." />
-        <span className="cursor-pointer system-sm-regular text-text-tertiary" onClick={backToHome}>{t('userProfile.logout', { ns: 'common' })}</span>
+        <span className="system-sm-regular cursor-pointer text-text-tertiary" onClick={backToHome}>{t('userProfile.logout', { ns: 'common' })}</span>
+      </div>
+    )
+  }
+  if (isFetchingAppInfo || isFetchingAppParams || isFetchingAppMeta) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <Loading />
       </div>
     )
   }
-
   return <>{children}</>
 }
 

web/app/(shareLayout)/components/splash.tsx

@@ -1,8 +1,9 @@
 'use client'
 import type { FC, PropsWithChildren } from 'react'
-import { useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppUnavailable from '@/app/components/base/app-unavailable'
+import Loading from '@/app/components/base/loading'
 import { useWebAppStore } from '@/context/web-app-context'
 import { useRouter, useSearchParams } from '@/next/navigation'
 import { fetchAccessToken } from '@/service/share'
@@ -31,8 +32,11 @@ const Splash: FC<PropsWithChildren> = ({ children }) => {
     const url = getSigninUrl()
     router.replace(url)
   }, [getSigninUrl, router, shareCode])
+
+  const [isLoading, setIsLoading] = useState(true)
   useEffect(() => {
     if (message) {
+      setIsLoading(false)
       return
     }
 
@@ -42,6 +46,12 @@ const Splash: FC<PropsWithChildren> = ({ children }) => {
     const redirectOrFinish = () => {
       if (redirectUrl)
         router.replace(decodeURIComponent(redirectUrl))
+      else
+        setIsLoading(false)
+    }
+
+    const proceedToAuth = () => {
+      setIsLoading(false)
     }
 
     (async () => {
@@ -50,6 +60,9 @@ const Splash: FC<PropsWithChildren> = ({ children }) => {
       if (userLoggedIn && appLoggedIn) {
         redirectOrFinish()
       }
+      else if (!userLoggedIn && !appLoggedIn) {
+        proceedToAuth()
+      }
       else if (!userLoggedIn && appLoggedIn) {
         redirectOrFinish()
       }
@@ -64,6 +77,7 @@ const Splash: FC<PropsWithChildren> = ({ children }) => {
         }
         catch {
           await webAppLogout(shareCode!)
+          proceedToAuth()
         }
       }
     })()
@@ -81,11 +95,18 @@ const Splash: FC<PropsWithChildren> = ({ children }) => {
     return (
       <div className="flex h-full flex-col items-center justify-center gap-y-4">
         <AppUnavailable className="h-auto w-auto" code={code || t('common.appUnavailable', { ns: 'share' })} unknownReason={message} />
-        <span className="cursor-pointer system-sm-regular text-text-tertiary" onClick={backToHome}>{code === '403' ? t('userProfile.logout', { ns: 'common' }) : t('login.backToHome', { ns: 'share' })}</span>
+        <span className="system-sm-regular cursor-pointer text-text-tertiary" onClick={backToHome}>{code === '403' ? t('userProfile.logout', { ns: 'common' }) : t('login.backToHome', { ns: 'share' })}</span>
       </div>
     )
   }
 
+  if (isLoading) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <Loading />
+      </div>
+    )
+  }
   return <>{children}</>
 }
 

web/app/(shareLayout)/webapp-signin/__tests__/page.spec.tsx

@@ -1,75 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { AccessMode } from '@/models/access-control'
-import WebSSOForm from '../page'
-
-const mockReplace = vi.fn()
-let mockRedirectUrl = '/share/test-share-code'
-let mockWebAppAccessMode: AccessMode | null = null
-let mockSystemFeaturesEnabled = true
-
-vi.mock('@/next/navigation', () => ({
-  useRouter: () => ({
-    replace: mockReplace,
-  }),
-  useSearchParams: () => ({
-    get: (key: string) => key === 'redirect_url' ? mockRedirectUrl : null,
-  }),
-}))
-
-vi.mock('@/context/global-public-context', () => ({
-  useGlobalPublicStore: (selector: (state: { systemFeatures: { webapp_auth: { enabled: boolean } } }) => unknown) =>
-    selector({
-      systemFeatures: {
-        webapp_auth: {
-          enabled: mockSystemFeaturesEnabled,
-        },
-      },
-    }),
-}))
-
-vi.mock('@/context/web-app-context', () => ({
-  useWebAppStore: (selector: (state: { webAppAccessMode: AccessMode | null, shareCode: string | null }) => unknown) =>
-    selector({
-      webAppAccessMode: mockWebAppAccessMode,
-      shareCode: 'test-share-code',
-    }),
-}))
-
-vi.mock('@/service/webapp-auth', () => ({
-  webAppLogout: vi.fn(),
-}))
-
-vi.mock('../normalForm', () => ({
-  default: () => <div data-testid="normal-form" />,
-}))
-
-vi.mock('../components/external-member-sso-auth', () => ({
-  default: () => <div data-testid="external-member-sso-auth" />,
-}))
-
-describe('WebSSOForm', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockRedirectUrl = '/share/test-share-code'
-    mockWebAppAccessMode = null
-    mockSystemFeaturesEnabled = true
-  })
-
-  describe('Access Mode Resolution', () => {
-    it('should avoid rendering auth variants before the access mode query resolves', () => {
-      render(<WebSSOForm />)
-
-      expect(screen.queryByTestId('normal-form')).not.toBeInTheDocument()
-      expect(screen.queryByTestId('external-member-sso-auth')).not.toBeInTheDocument()
-      expect(screen.queryByText('share.login.backToHome')).not.toBeInTheDocument()
-    })
-
-    it('should render the normal form for organization-backed access modes', () => {
-      mockWebAppAccessMode = AccessMode.ORGANIZATION
-
-      render(<WebSSOForm />)
-
-      expect(screen.getByTestId('normal-form')).toBeInTheDocument()
-    })
-  })
-})

web/app/(shareLayout)/webapp-signin/page.tsx

@@ -63,7 +63,7 @@ const WebSSOForm: FC = () => {
   return (
     <div className="flex h-full flex-col items-center justify-center gap-y-4">
       <AppUnavailable className="h-auto w-auto" isUnknownReason={true} />
-      <span className="cursor-pointer system-sm-regular text-text-tertiary" onClick={backToHome}>{t('login.backToHome', { ns: 'share' })}</span>
+      <span className="system-sm-regular cursor-pointer text-text-tertiary" onClick={backToHome}>{t('login.backToHome', { ns: 'share' })}</span>
     </div>
   )
 }

web/app/account/oauth/authorize/layout.tsx

@@ -1,4 +1,6 @@
 'use client'
+import Loading from '@/app/components/base/loading'
+
 import Header from '@/app/signin/_header'
 import { AppContextProvider } from '@/context/app-context-provider'
 import { useGlobalPublicStore } from '@/context/global-public-context'
@@ -9,8 +11,16 @@ import { cn } from '@/utils/classnames'
 export default function SignInLayout({ children }: any) {
   const { systemFeatures } = useGlobalPublicStore()
   useDocumentTitle('')
-  const { data: loginData } = useIsLogin()
+  const { isLoading, data: loginData } = useIsLogin()
   const isLoggedIn = loginData?.logged_in
+
+  if (isLoading) {
+    return (
+      <div className="flex min-h-screen w-full justify-center bg-background-default-burn">
+        <Loading />
+      </div>
+    )
+  }
   return (
     <>
       <div className={cn('flex min-h-screen w-full justify-center bg-background-default-burn p-6')}>

web/app/account/oauth/authorize/page.tsx

@@ -12,6 +12,7 @@ import { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Avatar } from '@/app/components/base/avatar'
 import Button from '@/app/components/base/button'
+import Loading from '@/app/components/base/loading'
 import { toast } from '@/app/components/base/ui/toast'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { setPostLoginRedirect } from '@/app/signin/utils/post-login-redirect'
@@ -70,8 +71,6 @@ export default function OAuthAuthorize() {
   const isLoggedIn = loginData?.logged_in
   const isLoading = isOAuthLoading || isIsLoginLoading
   const onLoginSwitchClick = () => {
-    if (isLoading)
-      return
     try {
       const returnUrl = buildReturnUrl('/account/oauth/authorize', `?client_id=${encodeURIComponent(client_id)}&redirect_uri=${encodeURIComponent(redirect_uri)}`)
       setPostLoginRedirect(returnUrl)
@@ -107,6 +106,14 @@ export default function OAuthAuthorize() {
     }
   }, [client_id, redirect_uri, isError])
 
+  if (isLoading) {
+    return (
+      <div className="bg-background-default-subtle">
+        <Loading type="app" />
+      </div>
+    )
+  }
+
   return (
     <div className="bg-background-default-subtle">
       {authAppInfo?.app_icon && (
@@ -115,13 +122,13 @@ export default function OAuthAuthorize() {
         </div>
       )}
 
-      <div className={`mt-5 mb-4 flex flex-col gap-2 ${isLoggedIn ? 'pb-2' : ''}`}>
+      <div className={`mb-4 mt-5 flex flex-col gap-2 ${isLoggedIn ? 'pb-2' : ''}`}>
         <div className="title-4xl-semi-bold">
           {isLoggedIn && <div className="text-text-primary">{t('connect', { ns: 'oauth' })}</div>}
           <div className="text-(--color-saas-dify-blue-inverted)">{authAppInfo?.app_label[language] || authAppInfo?.app_label?.en_US || t('unknownApp', { ns: 'oauth' })}</div>
           {!isLoggedIn && <div className="text-text-primary">{t('tips.notLoggedIn', { ns: 'oauth' })}</div>}
         </div>
-        <div className="body-md-regular text-text-secondary">{isLoggedIn ? `${authAppInfo?.app_label[language] || authAppInfo?.app_label?.en_US || t('unknownApp', { ns: 'oauth' })} ${t('tips.loggedIn', { ns: 'oauth' })}` : t('tips.needLogin', { ns: 'oauth' })}</div>
+        <div className="text-text-secondary body-md-regular">{isLoggedIn ? `${authAppInfo?.app_label[language] || authAppInfo?.app_label?.en_US || t('unknownApp', { ns: 'oauth' })} ${t('tips.loggedIn', { ns: 'oauth' })}` : t('tips.needLogin', { ns: 'oauth' })}</div>
       </div>
 
       {isLoggedIn && userProfile && (
@@ -130,7 +137,7 @@ export default function OAuthAuthorize() {
             <Avatar avatar={userProfile.avatar_url} name={userProfile.name} size="lg" />
             <div>
               <div className="system-md-semi-bold text-text-secondary">{userProfile.name}</div>
-              <div className="system-xs-regular text-text-tertiary">{userProfile.email}</div>
+              <div className="text-text-tertiary system-xs-regular">{userProfile.email}</div>
             </div>
           </div>
           <Button variant="tertiary" size="small" onClick={onLoginSwitchClick}>{t('switchAccount', { ns: 'oauth' })}</Button>
@@ -142,7 +149,7 @@ export default function OAuthAuthorize() {
           {authAppInfo!.scope.split(/\s+/).filter(Boolean).map((scope: string) => {
             const Icon = SCOPE_INFO_MAP[scope]
             return (
-              <div key={scope} className="flex items-center gap-2 body-sm-medium text-text-secondary">
+              <div key={scope} className="flex items-center gap-2 text-text-secondary body-sm-medium">
                 {Icon ? <Icon.icon className="h-4 w-4" /> : <RiAccountCircleLine className="h-4 w-4" />}
                 {Icon.label}
               </div>
@@ -175,7 +182,7 @@ export default function OAuthAuthorize() {
           </defs>
         </svg>
       </div>
-      <div className="mt-3 system-xs-regular text-text-tertiary">{t('tips.common', { ns: 'oauth' })}</div>
+      <div className="mt-3 text-text-tertiary system-xs-regular">{t('tips.common', { ns: 'oauth' })}</div>
     </div>
   )
 }

web/app/components/app-initializer.tsx

@@ -3,7 +3,7 @@
 import type { ReactNode } from 'react'
 import Cookies from 'js-cookie'
 import { parseAsBoolean, useQueryState } from 'nuqs'
-import { useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import {
   EDUCATION_VERIFY_URL_SEARCHPARAMS_ACTION,
   EDUCATION_VERIFYING_LOCALSTORAGE_ITEM,
@@ -25,6 +25,7 @@ export const AppInitializer = ({
   const searchParams = useSearchParams()
   // Tokens are now stored in cookies, no need to check localStorage
   const pathname = usePathname()
+  const [init, setInit] = useState(false)
   const [oauthNewUser] = useQueryState(
     'oauth_new_user',
     parseAsBoolean.withOptions({ history: 'replace' }),
@@ -86,7 +87,10 @@ export const AppInitializer = ({
         const redirectUrl = resolvePostLoginRedirect()
         if (redirectUrl) {
           location.replace(redirectUrl)
+          return
         }
+
+        setInit(true)
       }
       catch {
         router.replace('/signin')
@@ -94,5 +98,5 @@ export const AppInitializer = ({
     })()
   }, [isSetupFinished, router, pathname, searchParams, oauthNewUser])
 
-  return children
+  return init ? children : null
 }

web/app/components/base/portal-to-follow-elem/index.tsx

@@ -6,7 +6,7 @@
  *
  * Migration guide:
  * - Tooltip → `@/app/components/base/ui/tooltip`
- * - Menu/Dropdown → `@/app/components/base/ui/dropdown-menu`
+ * - Menu/Dropdown → `@langgenius/dify-ui/dropdown-menu`
  * - Popover → `@/app/components/base/ui/popover`
  * - Dialog/Modal → `@/app/components/base/ui/dialog`
  * - Select → `@/app/components/base/ui/select`

web/app/components/billing/partner-stack/use-ps-info.ts

@@ -24,7 +24,7 @@ const usePSInfo = () => {
   }] = useBoolean(false)
   const { mutateAsync } = useBindPartnerStackInfo()
   // Save to top domain. cloud.dify.ai => .dify.ai
-  const domain = globalThis.location?.hostname?.replace('cloud', '')
+  const domain = globalThis.location?.hostname.replace('cloud', '')
 
   const saveOrUpdate = useCallback(() => {
     if (!psPartnerKey || !psClickId)
@@ -37,7 +37,7 @@ const usePSInfo = () => {
     }), {
       expires: PARTNER_STACK_CONFIG.saveCookieDays,
       path: '/',
-      ...(domain ? { domain } : {}),
+      domain,
     })
   }, [psPartnerKey, psClickId, isPSChanged, domain])
 
@@ -55,12 +55,8 @@ const usePSInfo = () => {
         if ((error as { status: number })?.status === 400)
           shouldRemoveCookie = true
       }
-      if (shouldRemoveCookie) {
-        Cookies.remove(PARTNER_STACK_CONFIG.cookieName, {
-          path: '/',
-          ...(domain ? { domain } : {}),
-        })
-      }
+      if (shouldRemoveCookie)
+        Cookies.remove(PARTNER_STACK_CONFIG.cookieName, { path: '/', domain })
       setBind()
     }
   }, [psPartnerKey, psClickId, hasBind, domain, setBind, mutateAsync])

web/app/components/header/account-dropdown/__tests__/compliance.spec.tsx

@@ -1,7 +1,7 @@
 import type { ModalContextState } from '@/context/modal-context'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@langgenius/dify-ui/dropdown-menu'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/app/components/base/ui/dropdown-menu'
 import { toast } from '@/app/components/base/ui/toast'
 import { Plan } from '@/app/components/billing/type'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'

web/app/components/header/account-dropdown/__tests__/support.spec.tsx

@@ -1,7 +1,7 @@
 import type { AppContextValue } from '@/context/app-context'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@langgenius/dify-ui/dropdown-menu'
 
-import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/app/components/base/ui/dropdown-menu'
+import { fireEvent, render, screen } from '@testing-library/react'
 import { Plan } from '@/app/components/billing/type'
 import { useAppContext } from '@/context/app-context'
 import { baseProviderContextValue, useProviderContext } from '@/context/provider-context'

web/app/components/header/account-dropdown/compliance.tsx

@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react'
+import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger } from '@langgenius/dify-ui/dropdown-menu'
 import { useMutation } from '@tanstack/react-query'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger } from '@/app/components/base/ui/dropdown-menu'
 import { toast } from '@/app/components/base/ui/toast'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { Plan } from '@/app/components/billing/type'

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

@@ -1,13 +1,13 @@
 'use client'
 
 import type { MouseEventHandler, ReactNode } from 'react'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLinkItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@langgenius/dify-ui/dropdown-menu'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { resetUser } from '@/app/components/base/amplitude/utils'
 import { Avatar } from '@/app/components/base/avatar'
 import PremiumBadge from '@/app/components/base/premium-badge'
 import ThemeSwitcher from '@/app/components/base/theme-switcher'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLinkItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/app/components/base/ui/dropdown-menu'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { IS_CLOUD_EDITION } from '@/config'
 import { useAppContext } from '@/context/app-context'

web/app/components/header/account-dropdown/support.tsx

@@ -1,5 +1,5 @@
+import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuLinkItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger } from '@langgenius/dify-ui/dropdown-menu'
 import { useTranslation } from 'react-i18next'
-import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuLinkItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger } from '@/app/components/base/ui/dropdown-menu'
 import { toggleZendeskWindow } from '@/app/components/base/zendesk/utils'
 import { Plan } from '@/app/components/billing/type'
 import { SUPPORT_EMAIL_ADDRESS, ZENDESK_WIDGET_KEY } from '@/config'

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

@@ -1,15 +1,10 @@
 import type { ReactNode } from 'react'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@langgenius/dify-ui/dropdown-menu'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import { Brush01 } from '@/app/components/base/icons/src/vender/solid/editor'
 import { Scales02 } from '@/app/components/base/icons/src/vender/solid/FinanceAndECommerce'
 import { Target04 } from '@/app/components/base/icons/src/vender/solid/general'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
 import { TONE_LIST } from '@/config'
 
 const toneI18nKeyMap = {

web/app/components/header/header-wrapper.tsx

@@ -10,8 +10,6 @@ type HeaderWrapperProps = {
   children: React.ReactNode
 }
 
-const getWorkflowCanvasMaximize = () => globalThis.localStorage?.getItem('workflow-canvas-maximize') === 'true'
-
 const HeaderWrapper = ({
   children,
 }: HeaderWrapperProps) => {
@@ -20,7 +18,8 @@ const HeaderWrapper = ({
   // Check if the current path is a workflow canvas & fullscreen
   const inWorkflowCanvas = pathname.endsWith('/workflow')
   const isPipelineCanvas = pathname.endsWith('/pipeline')
-  const [hideHeader, setHideHeader] = useState(getWorkflowCanvasMaximize)
+  const workflowCanvasMaximize = localStorage.getItem('workflow-canvas-maximize') === 'true'
+  const [hideHeader, setHideHeader] = useState(workflowCanvasMaximize)
   const { eventEmitter } = useEventEmitterContextContext()
 
   eventEmitter?.useSubscription((v: any) => {

web/app/components/header/maintenance-notice.tsx

@@ -3,19 +3,16 @@ import { X } from '@/app/components/base/icons/src/vender/line/general'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { NOTICE_I18N } from '@/i18n-config/language'
 
-const getShowNotice = () => globalThis.localStorage?.getItem('hide-maintenance-notice') !== '1'
-
 const MaintenanceNotice = () => {
   const locale = useLanguage()
 
-  const [showNotice, setShowNotice] = useState(getShowNotice)
-
+  const [showNotice, setShowNotice] = useState(() => localStorage.getItem('hide-maintenance-notice') !== '1')
   const handleJumpNotice = () => {
     window.open(NOTICE_I18N.href, '_blank')
   }
 
   const handleCloseNotice = () => {
-    globalThis.localStorage?.setItem('hide-maintenance-notice', '1')
+    localStorage.setItem('hide-maintenance-notice', '1')
     setShowNotice(false)
   }
 

web/app/components/plugins/plugin-detail-panel/__tests__/operation-dropdown.spec.tsx

@@ -14,7 +14,7 @@ vi.mock('@/utils/classnames', () => ({
   cn: (...args: (string | undefined | false | null)[]) => args.filter(Boolean).join(' '),
 }))
 
-vi.mock('@/app/components/base/ui/dropdown-menu', () => ({
+vi.mock('@langgenius/dify-ui/dropdown-menu', () => ({
   DropdownMenu: ({ children, open }: { children: ReactNode, open: boolean }) => (
     <div data-testid="dropdown-menu" data-open={open}>{children}</div>
   ),

web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx

@@ -1,15 +1,9 @@
 'use client'
+import type { Placement } from '@langgenius/dify-ui/dropdown-menu'
 import type { FC } from 'react'
-import type { Placement } from '@/app/components/base/ui/placement'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@langgenius/dify-ui/dropdown-menu'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/app/components/base/ui/dropdown-menu'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { cn } from '@/utils/classnames'
 import { PluginSource } from '../types'

web/app/components/share/text-generation/__tests__/menu-dropdown.spec.tsx

@@ -1,12 +1,10 @@
 import type { SiteInfo } from '@/models/share'
 import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { AccessMode } from '@/models/access-control'
 import MenuDropdown from '../menu-dropdown'
 
 const mockReplace = vi.fn()
 const mockPathname = '/test-path'
-let mockWebAppAccessMode: AccessMode | null = AccessMode.SPECIFIC_GROUPS_MEMBERS
 vi.mock('@/next/navigation', () => ({
   useRouter: () => ({
     replace: mockReplace,
@@ -18,7 +16,7 @@ const mockShareCode = 'test-share-code'
 vi.mock('@/context/web-app-context', () => ({
   useWebAppStore: (selector: (state: Record<string, unknown>) => unknown) => {
     const state = {
-      webAppAccessMode: mockWebAppAccessMode,
+      webAppAccessMode: 'code',
       shareCode: mockShareCode,
     }
     return selector(state)
@@ -43,7 +41,6 @@ describe('MenuDropdown', () => {
 
   beforeEach(() => {
     vi.clearAllMocks()
-    mockWebAppAccessMode = AccessMode.SPECIFIC_GROUPS_MEMBERS
   })
 
   describe('rendering', () => {
@@ -154,19 +151,6 @@ describe('MenuDropdown', () => {
       })
     })
 
-    it('should hide logout option when access mode is unknown', async () => {
-      mockWebAppAccessMode = null
-
-      render(<MenuDropdown data={baseSiteInfo} hideLogout={false} />)
-
-      const triggerButton = screen.getByRole('button')
-      fireEvent.click(triggerButton)
-
-      await waitFor(() => {
-        expect(screen.queryByText('common.userProfile.logout')).not.toBeInTheDocument()
-      })
-    })
-
     it('should call webAppLogout and redirect when logout is clicked', async () => {
       render(<MenuDropdown data={baseSiteInfo} hideLogout={false} />)
 

web/app/components/share/text-generation/hooks/__tests__/use-text-generation-app-state.spec.ts

@@ -1,5 +1,4 @@
 import { act, renderHook, waitFor } from '@testing-library/react'
-import { AccessMode } from '@/models/access-control'
 import { AppSourceType } from '@/service/share'
 import { useTextGenerationAppState } from '../use-text-generation-app-state'
 
@@ -125,13 +124,13 @@ const defaultAppParams = {
 type MockWebAppState = {
   appInfo: MockAppInfo | null
   appParams: typeof defaultAppParams | null
-  webAppAccessMode: AccessMode | null
+  webAppAccessMode: string
 }
 
 const mockWebAppState: MockWebAppState = {
   appInfo: defaultAppInfo,
   appParams: defaultAppParams,
-  webAppAccessMode: AccessMode.PUBLIC,
+  webAppAccessMode: 'public',
 }
 
 const resetMockWebAppState = () => {
@@ -161,7 +160,7 @@ const resetMockWebAppState = () => {
       image_file_size_limit: 10,
     },
   }
-  mockWebAppState.webAppAccessMode = AccessMode.PUBLIC
+  mockWebAppState.webAppAccessMode = 'public'
 }
 
 vi.mock('@/context/global-public-context', () => ({

web/app/components/share/text-generation/menu-dropdown.tsx

@@ -58,7 +58,6 @@ const MenuDropdown: FC<Props> = ({
   }, [router, pathname, webAppLogout, shareCode])
 
   const [show, setShow] = useState(false)
-  const showLogout = !hideLogout && webAppAccessMode !== null && webAppAccessMode !== AccessMode.EXTERNAL_MEMBERS && webAppAccessMode !== AccessMode.PUBLIC
 
   useEffect(() => {
     if (forceClose)
@@ -86,7 +85,7 @@ const MenuDropdown: FC<Props> = ({
         <PortalToFollowElemContent className="z-50">
           <div className="w-[224px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-xs">
             <div className="p-1">
-              <div className={cn('flex cursor-pointer items-center rounded-lg py-1.5 pl-3 pr-2 text-text-secondary system-md-regular')}>
+              <div className={cn('system-md-regular flex cursor-pointer items-center rounded-lg py-1.5 pl-3 pr-2 text-text-secondary')}>
                 <div className="grow">{t('theme.theme', { ns: 'common' })}</div>
                 <ThemeSwitcher />
               </div>
@@ -94,7 +93,7 @@ const MenuDropdown: FC<Props> = ({
             <Divider type="horizontal" className="my-0" />
             <div className="p-1">
               {data?.privacy_policy && (
-                <a href={data.privacy_policy} target="_blank" rel="noopener noreferrer" className="flex cursor-pointer items-center rounded-lg px-3 py-1.5 text-text-secondary system-md-regular hover:bg-state-base-hover">
+                <a href={data.privacy_policy} target="_blank" className="system-md-regular flex cursor-pointer items-center rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover">
                   <span className="grow">{t('chat.privacyPolicyMiddle', { ns: 'share' })}</span>
                 </a>
               )}
@@ -103,16 +102,16 @@ const MenuDropdown: FC<Props> = ({
                   handleTrigger()
                   setShow(true)
                 }}
-                className="cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary system-md-regular hover:bg-state-base-hover"
+                className="system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover"
               >
                 {t('userProfile.about', { ns: 'common' })}
               </div>
             </div>
-            {showLogout && (
+            {!(hideLogout || webAppAccessMode === AccessMode.EXTERNAL_MEMBERS || webAppAccessMode === AccessMode.PUBLIC) && (
               <div className="p-1">
                 <div
                   onClick={handleLogout}
-                  className="cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary system-md-regular hover:bg-state-base-hover"
+                  className="system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover"
                 >
                   {t('userProfile.logout', { ns: 'common' })}
                 </div>

web/app/components/share/text-generation/text-generation-sidebar.tsx

@@ -18,7 +18,7 @@ import RunBatch from './run-batch'
 import RunOnce from './run-once'
 
 type TextGenerationSidebarProps = {
-  accessMode: AccessMode | null
+  accessMode: AccessMode
   allTasksRun: boolean
   currentTab: string
   customConfig: TextGenerationCustomConfig | null

web/app/components/splash.tsx

@@ -0,0 +1,21 @@
+'use client'
+import type { FC, PropsWithChildren } from 'react'
+import * as React from 'react'
+import { useIsLogin } from '@/service/use-common'
+import Loading from './base/loading'
+
+const Splash: FC<PropsWithChildren> = () => {
+  // would auto redirect to signin page if not logged in
+  const { isLoading, data: loginData } = useIsLogin()
+  const isLoggedIn = loginData?.logged_in
+
+  if (isLoading || !isLoggedIn) {
+    return (
+      <div className="fixed inset-0 z-9999999 flex h-full items-center justify-center bg-background-body">
+        <Loading />
+      </div>
+    )
+  }
+  return null
+}
+export default React.memo(Splash)

web/app/components/workflow/edge-contextmenu.tsx

@@ -1,14 +1,14 @@
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+} from '@langgenius/dify-ui/context-menu'
 import {
   memo,
   useMemo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useEdges } from 'reactflow'
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-} from '@/app/components/base/ui/context-menu'
 import { useEdgesInteractions, usePanelInteractions } from './hooks'
 import ShortcutsName from './shortcuts-name'
 import { useStore } from './store'

web/app/components/workflow/selection-contextmenu.tsx

@@ -1,4 +1,12 @@
 import type { Node } from './types'
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuGroupLabel,
+  ContextMenuItem,
+  ContextMenuSeparator,
+} from '@langgenius/dify-ui/context-menu'
 import { produce } from 'immer'
 import {
   memo,
@@ -8,14 +16,6 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore as useReactFlowStore, useStoreApi } from 'reactflow'
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuGroup,
-  ContextMenuGroupLabel,
-  ContextMenuItem,
-  ContextMenuSeparator,
-} from '@/app/components/base/ui/context-menu'
 import { useNodesInteractions, useNodesReadOnly, useNodesSyncDraft } from './hooks'
 import { useSelectionInteractions } from './hooks/use-selection-interactions'
 import { useWorkflowHistory, WorkflowHistoryEvent } from './hooks/use-workflow-history'

web/app/education-apply/education-apply-page.tsx

@@ -46,7 +46,7 @@ const EducationApplyAge = () => {
     setShowModal(undefined)
     onPlanInfoChanged()
     updateEducationStatus()
-    globalThis.localStorage?.removeItem(EDUCATION_VERIFYING_LOCALSTORAGE_ITEM)
+    localStorage.removeItem(EDUCATION_VERIFYING_LOCALSTORAGE_ITEM)
     router.replace('/')
   }
 

web/app/education-apply/hooks.ts

@@ -133,7 +133,7 @@ const useEducationReverifyNotice = ({
 export const useEducationInit = () => {
   const setShowAccountSettingModal = useModalContextSelector(s => s.setShowAccountSettingModal)
   const setShowEducationExpireNoticeModal = useModalContextSelector(s => s.setShowEducationExpireNoticeModal)
-  const educationVerifying = globalThis.localStorage?.getItem(EDUCATION_VERIFYING_LOCALSTORAGE_ITEM)
+  const educationVerifying = localStorage.getItem(EDUCATION_VERIFYING_LOCALSTORAGE_ITEM)
   const searchParams = useSearchParams()
   const educationVerifyAction = searchParams.get('action')
 
@@ -156,7 +156,7 @@ export const useEducationInit = () => {
       setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.BILLING })
 
       if (educationVerifyAction === EDUCATION_VERIFY_URL_SEARCHPARAMS_ACTION)
-        globalThis.localStorage?.setItem(EDUCATION_VERIFYING_LOCALSTORAGE_ITEM, 'yes')
+        localStorage.setItem(EDUCATION_VERIFYING_LOCALSTORAGE_ITEM, 'yes')
     }
     if (educationVerifyAction === EDUCATION_RE_VERIFY_ACTION)
       handleVerify()

web/app/page.tsx

@@ -1,5 +1,18 @@
-import { redirect } from '@/next/navigation'
+import Loading from '@/app/components/base/loading'
+import Link from '@/next/link'
 
-export default async function Home() {
-  redirect('/apps')
+const Home = async () => {
+  return (
+    <div className="flex min-h-screen flex-col justify-center py-12 sm:px-6 lg:px-8">
+
+      <div className="sm:mx-auto sm:w-full sm:max-w-md">
+        <Loading type="area" />
+        <div className="mt-10 text-center">
+          <Link href="/apps">🚀</Link>
+        </div>
+      </div>
+    </div>
+  )
 }
+
+export default Home

web/app/signin/invite-settings/__tests__/page.spec.tsx

@@ -1,111 +0,0 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import InviteSettingsPage from '../page'
-
-const mockReplace = vi.fn()
-const mockRefetch = vi.fn()
-const mockActivateMember = vi.fn()
-const mockSetLocaleOnClient = vi.fn()
-const mockResolvePostLoginRedirect = vi.fn()
-
-let mockInviteToken = 'invite-token'
-let mockCheckRes: {
-  is_valid: boolean
-  data: {
-    workspace_name: string
-    email: string
-    workspace_id: string
-  }
-} | undefined
-
-vi.mock('@/next/navigation', () => ({
-  useRouter: () => ({
-    replace: mockReplace,
-  }),
-  useSearchParams: () => ({
-    get: (key: string) => key === 'invite_token' ? mockInviteToken : null,
-  }),
-}))
-
-vi.mock('@/context/global-public-context', () => ({
-  useGlobalPublicStore: (selector: (state: { systemFeatures: { branding: { enabled: boolean } } }) => unknown) =>
-    selector({
-      systemFeatures: {
-        branding: {
-          enabled: true,
-        },
-      },
-    }),
-}))
-
-vi.mock('@/service/use-common', () => ({
-  useInvitationCheck: () => ({
-    data: mockCheckRes,
-    refetch: mockRefetch,
-  }),
-}))
-
-vi.mock('@/service/common', () => ({
-  activateMember: (...args: unknown[]) => mockActivateMember(...args),
-}))
-
-vi.mock('@/i18n-config', () => ({
-  setLocaleOnClient: (...args: unknown[]) => mockSetLocaleOnClient(...args),
-}))
-
-vi.mock('../../utils/post-login-redirect', () => ({
-  resolvePostLoginRedirect: () => mockResolvePostLoginRedirect(),
-}))
-
-describe('InviteSettingsPage', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockInviteToken = 'invite-token'
-    mockCheckRes = undefined
-    mockActivateMember.mockResolvedValue({ result: 'success' })
-    mockSetLocaleOnClient.mockResolvedValue(undefined)
-    mockResolvePostLoginRedirect.mockReturnValue('/apps')
-  })
-
-  describe('Activation Gating', () => {
-    it('should not activate when invitation validation is still pending and Enter is pressed', () => {
-      render(<InviteSettingsPage />)
-
-      const nameInput = screen.getByLabelText('login.name')
-      fireEvent.change(nameInput, { target: { value: 'Alice' } })
-      fireEvent.keyDown(nameInput, { key: 'Enter', code: 'Enter', charCode: 13 })
-
-      expect(mockActivateMember).not.toHaveBeenCalled()
-    })
-
-    it('should activate when invitation validation has succeeded', async () => {
-      mockCheckRes = {
-        is_valid: true,
-        data: {
-          workspace_name: 'Demo Workspace',
-          email: 'alice@example.com',
-          workspace_id: 'workspace-1',
-        },
-      }
-
-      render(<InviteSettingsPage />)
-
-      const nameInput = screen.getByLabelText('login.name')
-      fireEvent.change(nameInput, { target: { value: 'Alice' } })
-      fireEvent.keyDown(nameInput, { key: 'Enter', code: 'Enter', charCode: 13 })
-
-      await waitFor(() => {
-        expect(mockActivateMember).toHaveBeenCalledWith({
-          url: '/activate',
-          body: {
-            token: 'invite-token',
-            name: 'Alice',
-            interface_language: 'en-US',
-            timezone: expect.any(String),
-          },
-        })
-      })
-      expect(mockSetLocaleOnClient).toHaveBeenCalledWith('en-US', false)
-      expect(mockReplace).toHaveBeenCalledWith('/apps')
-    })
-  })
-})

web/app/signin/invite-settings/page.tsx

@@ -6,6 +6,7 @@ import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import Loading from '@/app/components/base/loading'
 import { SimpleSelect } from '@/app/components/base/select'
 import { toast } from '@/app/components/base/ui/toast'
 import { LICENSE_LINK } from '@/constants/link'
@@ -36,12 +37,9 @@ export default function InviteSettingsPage() {
     },
   }
   const { data: checkRes, refetch: recheck } = useInvitationCheck(checkParams.params, !!token)
-  const canActivate = checkRes?.is_valid === true
 
   const handleActivate = useCallback(async () => {
     try {
-      if (!canActivate)
-        return
       if (!name) {
         toast.error(t('enterYourName', { ns: 'login' }))
         return
@@ -65,9 +63,11 @@ export default function InviteSettingsPage() {
     catch {
       recheck()
     }
-  }, [canActivate, language, name, recheck, timezone, token, router, t])
+  }, [language, name, recheck, timezone, token, router, t])
 
-  if (checkRes?.is_valid === false) {
+  if (!checkRes)
+    return <Loading />
+  if (!checkRes.is_valid) {
     return (
       <div className="flex flex-col md:w-[400px]">
         <div className="mx-auto w-full">
@@ -107,8 +107,7 @@ export default function InviteSettingsPage() {
                 if (e.key === 'Enter') {
                   e.preventDefault()
                   e.stopPropagation()
-                  if (canActivate)
-                    handleActivate()
+                  handleActivate()
                 }
               }}
             />
@@ -148,9 +147,8 @@ export default function InviteSettingsPage() {
             variant="primary"
             className="w-full"
             onClick={handleActivate}
-            disabled={!canActivate}
           >
-            {`${t('join', { ns: 'login' })} ${checkRes?.data?.workspace_name ?? ''}`}
+            {`${t('join', { ns: 'login' })} ${checkRes?.data?.workspace_name}`}
           </Button>
         </div>
       </form>

web/app/styles/globals.css

@@ -1,9 +1,5 @@
 @import './preflight.css' layer(base);
-
-@import '../../themes/light.css' layer(base);
-@import '../../themes/dark.css' layer(base);
-@import '../../themes/manual-light.css' layer(base);
-@import '../../themes/manual-dark.css' layer(base);
+@import '@langgenius/dify-ui/styles.css';
 @import './monaco-sticky-fix.css' layer(base);
 
 @import '../components/base/action-button/index.css';
@@ -17,727 +13,6 @@
 
 @config '../../tailwind.config.ts';
 
-/*
-  The default border color has changed to `currentcolor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentcolor);
-  }
-}
-
-@utility system-kbd {
-  /* font define start */
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility system-2xs-regular-uppercase {
-  font-size: 10px;
-  font-weight: 400;
-  text-transform: uppercase;
-  line-height: 12px;
-
-  /* border radius end */
-}
-
-@utility system-2xs-regular {
-  font-size: 10px;
-  font-weight: 400;
-  line-height: 12px;
-
-  /* border radius end */
-}
-
-@utility system-2xs-medium {
-  font-size: 10px;
-  font-weight: 500;
-  line-height: 12px;
-
-  /* border radius end */
-}
-
-@utility system-2xs-medium-uppercase {
-  font-size: 10px;
-  font-weight: 500;
-  text-transform: uppercase;
-  line-height: 12px;
-
-  /* border radius end */
-}
-
-@utility system-2xs-semibold-uppercase {
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  line-height: 12px;
-
-  /* border radius end */
-}
-
-@utility system-xs-regular {
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility system-xs-regular-uppercase {
-  font-size: 12px;
-  font-weight: 400;
-  text-transform: uppercase;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility system-xs-medium {
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility system-xs-medium-uppercase {
-  font-size: 12px;
-  font-weight: 500;
-  text-transform: uppercase;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility system-xs-semibold {
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility system-xs-semibold-uppercase {
-  font-size: 12px;
-  font-weight: 600;
-  text-transform: uppercase;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility system-sm-regular {
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility system-sm-medium {
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility system-sm-medium-uppercase {
-  font-size: 13px;
-  font-weight: 500;
-  text-transform: uppercase;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility system-sm-semibold {
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility system-sm-semibold-uppercase {
-  font-size: 13px;
-  font-weight: 600;
-  text-transform: uppercase;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility system-md-regular {
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 20px;
-
-  /* border radius end */
-}
-
-@utility system-md-medium {
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-
-  /* border radius end */
-}
-
-@utility system-md-semibold {
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 20px;
-
-  /* border radius end */
-}
-
-@utility system-md-semibold-uppercase {
-  font-size: 14px;
-  font-weight: 600;
-  text-transform: uppercase;
-  line-height: 20px;
-
-  /* border radius end */
-}
-
-@utility system-xl-regular {
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 24px;
-
-  /* border radius end */
-}
-
-@utility system-xl-medium {
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 24px;
-
-  /* border radius end */
-}
-
-@utility system-xl-semibold {
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 24px;
-
-  /* border radius end */
-}
-
-@utility code-xs-regular {
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 1.5;
-
-  /* border radius end */
-}
-
-@utility code-xs-semibold {
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 1.5;
-
-  /* border radius end */
-}
-
-@utility code-sm-regular {
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 1.5;
-
-  /* border radius end */
-}
-
-@utility code-sm-semibold {
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 1.5;
-
-  /* border radius end */
-}
-
-@utility code-md-regular {
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 1.5;
-
-  /* border radius end */
-}
-
-@utility code-md-semibold {
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 1.5;
-
-  /* border radius end */
-}
-
-@utility body-xs-light {
-  font-size: 12px;
-  font-weight: 300;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility body-xs-regular {
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility body-xs-medium {
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility body-sm-light {
-  font-size: 13px;
-  font-weight: 300;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility body-sm-regular {
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility body-sm-medium {
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility body-md-light {
-  font-size: 14px;
-  font-weight: 300;
-  line-height: 20px;
-
-  /* border radius end */
-}
-
-@utility body-md-regular {
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 20px;
-
-  /* border radius end */
-}
-
-@utility body-md-medium {
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-
-  /* border radius end */
-}
-
-@utility body-lg-light {
-  font-size: 15px;
-  font-weight: 300;
-  line-height: 20px;
-
-  /* border radius end */
-}
-
-@utility body-lg-regular {
-  font-size: 15px;
-  font-weight: 400;
-  line-height: 20px;
-
-  /* border radius end */
-}
-
-@utility body-lg-medium {
-  font-size: 15px;
-  font-weight: 500;
-  line-height: 20px;
-
-  /* border radius end */
-}
-
-@utility body-xl-regular {
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 24px;
-
-  /* border radius end */
-}
-
-@utility body-xl-medium {
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 24px;
-
-  /* border radius end */
-}
-
-@utility body-xl-light {
-  font-size: 16px;
-  font-weight: 300;
-  line-height: 24px;
-
-  /* border radius end */
-}
-
-@utility body-2xl-light {
-  font-size: 18px;
-  font-weight: 300;
-  line-height: 1.5;
-
-  /* border radius end */
-}
-
-@utility body-2xl-regular {
-  font-size: 18px;
-  font-weight: 400;
-  line-height: 1.5;
-
-  /* border radius end */
-}
-
-@utility body-2xl-medium {
-  font-size: 18px;
-  font-weight: 500;
-  line-height: 1.5;
-
-  /* border radius end */
-}
-
-@utility title-xs-semi-bold {
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility title-xs-bold {
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility title-sm-semi-bold {
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility title-sm-bold {
-  font-size: 13px;
-  font-weight: 700;
-  line-height: 16px;
-
-  /* border radius end */
-}
-
-@utility title-md-semi-bold {
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 20px;
-
-  /* border radius end */
-}
-
-@utility title-md-bold {
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 20px;
-
-  /* border radius end */
-}
-
-@utility title-lg-semi-bold {
-  font-size: 15px;
-  font-weight: 600;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-lg-bold {
-  font-size: 15px;
-  font-weight: 700;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-xl-semi-bold {
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-xl-bold {
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-2xl-semi-bold {
-  font-size: 18px;
-  font-weight: 600;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-2xl-bold {
-  font-size: 18px;
-  font-weight: 700;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-3xl-semi-bold {
-  font-size: 20px;
-  font-weight: 600;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-3xl-bold {
-  font-size: 20px;
-  font-weight: 700;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-4xl-semi-bold {
-  font-size: 24px;
-  font-weight: 600;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-4xl-bold {
-  font-size: 24px;
-  font-weight: 700;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-5xl-semi-bold {
-  font-size: 30px;
-  font-weight: 600;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-5xl-bold {
-  font-size: 30px;
-  font-weight: 700;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-6xl-semi-bold {
-  font-size: 36px;
-  font-weight: 600;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-6xl-bold {
-  font-size: 36px;
-  font-weight: 700;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-7xl-semi-bold {
-  font-size: 48px;
-  font-weight: 600;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-7xl-bold {
-  font-size: 48px;
-  font-weight: 700;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-8xl-semi-bold {
-  font-size: 60px;
-  font-weight: 600;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility title-8xl-bold {
-  font-size: 60px;
-  font-weight: 700;
-  line-height: 1.2;
-
-  /* border radius end */
-}
-
-@utility radius-2xs {
-  /* font define end */
-
-  /* border radius start */
-  border-radius: 2px;
-
-  /* border radius end */
-}
-
-@utility radius-xs {
-  border-radius: 4px;
-
-  /* border radius end */
-}
-
-@utility radius-sm {
-  border-radius: 6px;
-
-  /* border radius end */
-}
-
-@utility radius-md {
-  border-radius: 8px;
-
-  /* border radius end */
-}
-
-@utility radius-lg {
-  border-radius: 10px;
-
-  /* border radius end */
-}
-
-@utility radius-xl {
-  border-radius: 12px;
-
-  /* border radius end */
-}
-
-@utility radius-2xl {
-  border-radius: 16px;
-
-  /* border radius end */
-}
-
-@utility radius-3xl {
-  border-radius: 20px;
-
-  /* border radius end */
-}
-
-@utility radius-4xl {
-  border-radius: 24px;
-
-  /* border radius end */
-}
-
-@utility radius-5xl {
-  border-radius: 24px;
-
-  /* border radius end */
-}
-
-@utility radius-6xl {
-  border-radius: 28px;
-
-  /* border radius end */
-}
-
-@utility radius-7xl {
-  border-radius: 32px;
-
-  /* border radius end */
-}
-
-@utility radius-8xl {
-  border-radius: 40px;
-
-  /* border radius end */
-}
-
-@utility radius-9xl {
-  border-radius: 48px;
-
-  /* border radius end */
-}
-
-@utility radius-full {
-  border-radius: 64px;
-
-  /* border radius end */
-}
-
-@utility no-scrollbar {
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  /* Hide scrollbar for IE, Edge and Firefox */
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-@utility no-spinner {
-  /* Hide arrows from number input */
-  &::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-  -moz-appearance: textfield;
-}
-
 @layer components {
   html {
     color-scheme: light;
@@ -794,35 +69,6 @@
     --card-border-rgb: 131, 134, 135;
   }
 
-  /* @media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-
-    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
-    --secondary-glow: linear-gradient(to bottom right,
-        rgba(1, 65, 255, 0),
-        rgba(1, 65, 255, 0),
-        rgba(1, 65, 255, 0.3));
-
-    --tile-start-rgb: 2, 13, 46;
-    --tile-end-rgb: 2, 5, 19;
-    --tile-border: conic-gradient(#ffffff80,
-        #ffffff40,
-        #ffffff30,
-        #ffffff20,
-        #ffffff10,
-        #ffffff10,
-        #ffffff80);
-
-    --callout-rgb: 20, 20, 20;
-    --callout-border-rgb: 108, 108, 108;
-    --card-rgb: 100, 100, 100;
-    --card-border-rgb: 200, 200, 200;
-  }
-} */
-
   * {
     box-sizing: border-box;
     padding: 0;
@@ -838,12 +84,6 @@
   body {
     color: rgb(var(--foreground-rgb));
     user-select: none;
-    /* background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb)); */
   }
 
   a {
@@ -852,13 +92,6 @@
     outline: none;
   }
 
-  /* @media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-} */
-
-  /* CSS Utils */
   .h1 {
     padding-bottom: 1.5rem;
     line-height: 1.5;
@@ -880,7 +113,7 @@
 
 @layer components {
   .link {
-    @apply text-blue-600 cursor-pointer hover:opacity-80 transition-opacity duration-200 ease-in-out;
+    @apply cursor-pointer text-blue-600 transition-opacity duration-200 ease-in-out hover:opacity-80;
   }
 
   .text-gradient {
@@ -891,13 +124,11 @@
     text-fill-color: transparent;
   }
 
-  /* overwrite paging active dark model style  */
   [class*='style_paginatio'] li .text-primary-600 {
     color: rgb(28 100 242);
     background-color: rgb(235 245 255);
   }
 
-  /* support safari 14 and below */
   .inset-0 {
     left: 0;
     right: 0;

web/app/styles/markdown.css

@@ -1,5 +1,4 @@
-@import '../../themes/markdown-light.css';
-@import '../../themes/markdown-dark.css';
+@import '@langgenius/dify-ui/markdown.css';
 @reference "./globals.css";
 
 .markdown-body {

web/context/__tests__/global-public-context.spec.tsx

@@ -1,74 +0,0 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { render, screen, waitFor } from '@testing-library/react'
-import GlobalPublicStoreProvider, { useGlobalPublicStore } from '@/context/global-public-context'
-import { defaultSystemFeatures } from '@/types/feature'
-
-const mockSystemFeatures = vi.fn()
-const mockFetchSetupStatusWithCache = vi.fn()
-
-vi.mock('@/service/client', () => ({
-  consoleClient: {
-    systemFeatures: () => mockSystemFeatures(),
-  },
-}))
-
-vi.mock('@/utils/setup-status', () => ({
-  fetchSetupStatusWithCache: () => mockFetchSetupStatusWithCache(),
-}))
-
-const createQueryClient = () => new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: false,
-    },
-  },
-})
-
-const renderProvider = () => {
-  const queryClient = createQueryClient()
-
-  return render(
-    <QueryClientProvider client={queryClient}>
-      <GlobalPublicStoreProvider>
-        <div>provider child</div>
-      </GlobalPublicStoreProvider>
-    </QueryClientProvider>,
-  )
-}
-
-describe('GlobalPublicStoreProvider', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    useGlobalPublicStore.setState({ systemFeatures: defaultSystemFeatures })
-    mockFetchSetupStatusWithCache.mockResolvedValue({ setup_status: 'finished' })
-  })
-
-  describe('Rendering', () => {
-    it('should render children when system features are still loading', async () => {
-      mockSystemFeatures.mockReturnValue(new Promise(() => {}))
-
-      renderProvider()
-
-      expect(screen.getByText('provider child')).toBeInTheDocument()
-      await waitFor(() => {
-        expect(mockSystemFeatures).toHaveBeenCalledTimes(1)
-      })
-    })
-  })
-
-  describe('State Updates', () => {
-    it('should update the public store when system features query succeeds', async () => {
-      mockSystemFeatures.mockResolvedValue({
-        ...defaultSystemFeatures,
-        enable_marketplace: true,
-      })
-
-      renderProvider()
-
-      await waitFor(() => {
-        expect(useGlobalPublicStore.getState().systemFeatures.enable_marketplace).toBe(true)
-      })
-      expect(mockFetchSetupStatusWithCache).toHaveBeenCalledTimes(1)
-    })
-  })
-})

web/context/__tests__/web-app-context.spec.tsx

@@ -1,108 +0,0 @@
-import { render, screen, waitFor } from '@testing-library/react'
-import WebAppStoreProvider, { useWebAppStore } from '@/context/web-app-context'
-import { AccessMode } from '@/models/access-control'
-
-let mockPathname = '/share/test-share-code'
-let mockRedirectUrl: string | null = null
-let mockAccessModeResult: { accessMode: AccessMode } | undefined
-
-vi.mock('@/next/navigation', () => ({
-  usePathname: () => mockPathname,
-  useSearchParams: () => ({
-    get: (key: string) => key === 'redirect_url' ? mockRedirectUrl : null,
-    toString: () => {
-      const params = new URLSearchParams()
-      if (mockRedirectUrl)
-        params.set('redirect_url', mockRedirectUrl)
-      return params.toString()
-    },
-  }),
-}))
-
-vi.mock('@/app/components/base/chat/utils', () => ({
-  getProcessedSystemVariablesFromUrlParams: vi.fn().mockResolvedValue({}),
-}))
-
-vi.mock('@/service/use-share', () => ({
-  useGetWebAppAccessModeByCode: vi.fn(() => ({
-    data: mockAccessModeResult,
-  })),
-}))
-
-const StoreSnapshot = () => {
-  const shareCode = useWebAppStore(s => s.shareCode)
-  const accessMode = useWebAppStore(s => s.webAppAccessMode)
-
-  return (
-    <div>
-      <span data-testid="share-code">{shareCode ?? 'none'}</span>
-      <span data-testid="access-mode">{accessMode ?? 'unknown'}</span>
-    </div>
-  )
-}
-
-describe('WebAppStoreProvider', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockPathname = '/share/test-share-code'
-    mockRedirectUrl = null
-    mockAccessModeResult = undefined
-    useWebAppStore.setState({
-      shareCode: null,
-      appInfo: null,
-      appParams: null,
-      webAppAccessMode: null,
-      appMeta: null,
-      userCanAccessApp: false,
-      embeddedUserId: null,
-      embeddedConversationId: null,
-    })
-  })
-
-  describe('Access Mode State', () => {
-    it('should keep the access mode unknown until the query resolves', async () => {
-      render(
-        <WebAppStoreProvider>
-          <StoreSnapshot />
-        </WebAppStoreProvider>,
-      )
-
-      await waitFor(() => {
-        expect(screen.getByTestId('share-code')).toHaveTextContent('test-share-code')
-      })
-      expect(screen.getByTestId('access-mode')).toHaveTextContent('unknown')
-    })
-
-    it('should reset the access mode when the share code changes before the next result arrives', async () => {
-      const { rerender } = render(
-        <WebAppStoreProvider>
-          <StoreSnapshot />
-        </WebAppStoreProvider>,
-      )
-
-      mockAccessModeResult = { accessMode: AccessMode.PUBLIC }
-      rerender(
-        <WebAppStoreProvider>
-          <StoreSnapshot />
-        </WebAppStoreProvider>,
-      )
-
-      await waitFor(() => {
-        expect(screen.getByTestId('access-mode')).toHaveTextContent(AccessMode.PUBLIC)
-      })
-
-      mockPathname = '/share/next-share-code'
-      mockAccessModeResult = undefined
-      rerender(
-        <WebAppStoreProvider>
-          <StoreSnapshot />
-        </WebAppStoreProvider>,
-      )
-
-      await waitFor(() => {
-        expect(screen.getByTestId('share-code')).toHaveTextContent('next-share-code')
-      })
-      expect(screen.getByTestId('access-mode')).toHaveTextContent('unknown')
-    })
-  })
-})

web/context/global-public-context.tsx

@@ -3,6 +3,7 @@ import type { FC, PropsWithChildren } from 'react'
 import type { SystemFeatures } from '@/types/feature'
 import { useQuery } from '@tanstack/react-query'
 import { create } from 'zustand'
+import Loading from '@/app/components/base/loading'
 import { consoleClient } from '@/service/client'
 import { defaultSystemFeatures } from '@/types/feature'
 import { fetchSetupStatusWithCache } from '@/utils/setup-status'
@@ -52,11 +53,13 @@ const GlobalPublicStoreProvider: FC<PropsWithChildren> = ({
 }) => {
   // Fetch systemFeatures and setupStatus in parallel to reduce waterfall.
   // setupStatus is prefetched here and cached in localStorage for AppInitializer.
-  useSystemFeaturesQuery()
+  const { isPending } = useSystemFeaturesQuery()
 
   // Prefetch setupStatus for AppInitializer (result not needed here)
   useSetupStatusQuery()
 
+  if (isPending)
+    return <div className="flex h-screen w-screen items-center justify-center"><Loading /></div>
   return <>{children}</>
 }
 export default GlobalPublicStoreProvider

web/context/modal-context-provider.tsx

@@ -106,10 +106,10 @@ export const ModalContextProvider = ({
 
   const [showAnnotationFullModal, setShowAnnotationFullModal] = useState(false)
   const handleCancelAccountSettingModal = () => {
-    const educationVerifying = globalThis.localStorage?.getItem(EDUCATION_VERIFYING_LOCALSTORAGE_ITEM)
+    const educationVerifying = localStorage.getItem(EDUCATION_VERIFYING_LOCALSTORAGE_ITEM)
 
     if (educationVerifying === 'yes')
-      globalThis.localStorage?.removeItem(EDUCATION_VERIFYING_LOCALSTORAGE_ITEM)
+      localStorage.removeItem(EDUCATION_VERIFYING_LOCALSTORAGE_ITEM)
 
     accountSettingCallbacksRef.current?.onCancelCallback?.()
     accountSettingCallbacksRef.current = null

web/context/web-app-context.tsx

@@ -2,13 +2,15 @@
 
 import type { FC, PropsWithChildren } from 'react'
 import type { ChatConfig } from '@/app/components/base/chat/types'
-import type { AccessMode } from '@/models/access-control'
 import type { AppData, AppMeta } from '@/models/share'
 import { useEffect } from 'react'
 import { create } from 'zustand'
 import { getProcessedSystemVariablesFromUrlParams } from '@/app/components/base/chat/utils'
+import Loading from '@/app/components/base/loading'
+import { AccessMode } from '@/models/access-control'
 import { usePathname, useSearchParams } from '@/next/navigation'
 import { useGetWebAppAccessModeByCode } from '@/service/use-share'
+import { useIsSystemFeaturesPending } from './global-public-context'
 
 type WebAppStore = {
   shareCode: string | null
@@ -17,8 +19,8 @@ type WebAppStore = {
   updateAppInfo: (appInfo: AppData | null) => void
   appParams: ChatConfig | null
   updateAppParams: (appParams: ChatConfig | null) => void
-  webAppAccessMode: AccessMode | null
-  updateWebAppAccessMode: (accessMode: AccessMode | null) => void
+  webAppAccessMode: AccessMode
+  updateWebAppAccessMode: (accessMode: AccessMode) => void
   appMeta: AppMeta | null
   updateWebAppMeta: (appMeta: AppMeta | null) => void
   userCanAccessApp: boolean
@@ -36,8 +38,8 @@ export const useWebAppStore = create<WebAppStore>(set => ({
   updateAppInfo: (appInfo: AppData | null) => set(() => ({ appInfo })),
   appParams: null,
   updateAppParams: (appParams: ChatConfig | null) => set(() => ({ appParams })),
-  webAppAccessMode: null,
-  updateWebAppAccessMode: (accessMode: AccessMode | null) => set(() => ({ webAppAccessMode: accessMode })),
+  webAppAccessMode: AccessMode.SPECIFIC_GROUPS_MEMBERS,
+  updateWebAppAccessMode: (accessMode: AccessMode) => set(() => ({ webAppAccessMode: accessMode })),
   appMeta: null,
   updateWebAppMeta: (appMeta: AppMeta | null) => set(() => ({ appMeta })),
   userCanAccessApp: false,
@@ -63,6 +65,7 @@ const getShareCodeFromPathname = (pathname: string): string | null => {
 }
 
 const WebAppStoreProvider: FC<PropsWithChildren> = ({ children }) => {
+  const isGlobalPending = useIsSystemFeaturesPending()
   const updateWebAppAccessMode = useWebAppStore(state => state.updateWebAppAccessMode)
   const updateShareCode = useWebAppStore(state => state.updateShareCode)
   const updateEmbeddedUserId = useWebAppStore(state => state.updateEmbeddedUserId)
@@ -101,13 +104,24 @@ const WebAppStoreProvider: FC<PropsWithChildren> = ({ children }) => {
     }
   }, [searchParamsString, updateEmbeddedUserId, updateEmbeddedConversationId])
 
-  const { data: accessModeResult } = useGetWebAppAccessModeByCode(shareCode)
+  const { isLoading, data: accessModeResult } = useGetWebAppAccessModeByCode(shareCode)
 
   useEffect(() => {
     if (accessModeResult?.accessMode)
       updateWebAppAccessMode(accessModeResult.accessMode)
   }, [accessModeResult, updateWebAppAccessMode, shareCode])
 
-  return <>{children}</>
+  if (isGlobalPending || isLoading) {
+    return (
+      <div className="flex h-full w-full items-center justify-center">
+        <Loading />
+      </div>
+    )
+  }
+  return (
+    <>
+      {children}
+    </>
+  )
 }
 export default WebAppStoreProvider

web/docs/overlay-migration.md

@@ -16,8 +16,8 @@ This document tracks the migration away from legacy overlay APIs.
   - `@/app/components/base/toast` (including `context`)
 - Replacement primitives:
   - `@/app/components/base/ui/tooltip`
-  - `@/app/components/base/ui/dropdown-menu`
-  - `@/app/components/base/ui/context-menu`
+  - `@langgenius/dify-ui/dropdown-menu`
+  - `@langgenius/dify-ui/context-menu`
   - `@/app/components/base/ui/popover`
   - `@/app/components/base/ui/dialog`
   - `@/app/components/base/ui/alert-dialog`

web/docs/test.md

@@ -10,7 +10,7 @@ When I ask you to write/refactor/fix tests, follow these rules by default.
 - **Testing Tools**: Vitest 4.0.16 + React Testing Library 16.0
 - **Test Environment**: happy-dom
 - **File Naming**: `ComponentName.spec.tsx` inside a same-level `__tests__/` directory
-- **Placement Rule**: Component, hook, and utility tests must live in a sibling `__tests__/` folder at the same level as the source under test. For example, `foo/index.tsx` maps to `foo/__tests__/index.spec.tsx`, and `foo/bar.ts` maps to `foo/__tests__/bar.spec.ts`.
+- **Placement Rule**: Component, hook, and utility tests must live in a sibling `__tests__/` folder at the same level as the source under test. For example, `foo/index.tsx` maps to `foo/__tests__/index.spec.tsx`, and `foo/bar.ts` maps to `foo/__tests__/bar.spec.ts`. This rule also applies to workspace packages under `packages/`.
 
 ## Running Tests
 

web/eslint-suppressions.json

@@ -169,6 +169,19 @@
       "count": 9
     }
   },
+  "app/(shareLayout)/components/authenticated-layout.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/(shareLayout)/components/splash.tsx": {
+    "react/set-state-in-effect": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
   "app/(shareLayout)/webapp-reset-password/check-code/page.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 4
@@ -220,6 +233,11 @@
       "count": 13
     }
   },
+  "app/(shareLayout)/webapp-signin/page.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
   "app/account/(commonLayout)/account-page/AvatarWithEdit.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -289,6 +307,9 @@
     }
   },
   "app/account/oauth/authorize/page.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 5
+    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -7891,6 +7912,9 @@
     },
     "react/set-state-in-effect": {
       "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 4
     }
   },
   "app/components/share/text-generation/no-data/index.tsx": {
@@ -7969,6 +7993,11 @@
       "count": 1
     }
   },
+  "app/components/splash.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
   "app/components/tools/edit-custom-collection-modal/config-credentials.tsx": {
     "no-restricted-imports": {
       "count": 1

web/eslint.constants.mjs

@@ -71,7 +71,7 @@ export const OVERLAY_RESTRICTED_IMPORT_PATTERNS = [
       '**/base/dropdown',
       '**/base/dropdown/index',
     ],
-    message: 'Deprecated: use @/app/components/base/ui/dropdown-menu instead. See issue #32767.',
+    message: 'Deprecated: use @langgenius/dify-ui/dropdown-menu instead. See issue #32767.',
   },
   {
     group: [

web/next.config.ts

@@ -21,6 +21,15 @@ const nextConfig: NextConfig = {
     // https://nextjs.org/docs/api-reference/next.config.js/ignoring-typescript-errors
     ignoreBuildErrors: true,
   },
+  async redirects() {
+    return [
+      {
+        source: '/',
+        destination: '/apps',
+        permanent: false,
+      },
+    ]
+  },
   output: 'standalone',
   compiler: {
     removeConsole: isDev ? false : { exclude: ['warn', 'error'] },

web/next/navigation.ts

@@ -1,5 +1,4 @@
 export {
-  redirect,
   useParams,
   usePathname,
   useRouter,

web/package.json

@@ -25,6 +25,7 @@
     "analyze": "next experimental-analyze",
     "analyze-component": "node ./scripts/analyze-component.js",
     "build": "next build",
+    "build:dify-ui": "pnpm --filter @langgenius/dify-ui build",
     "build:vinext": "vinext build",
     "dev": "next dev",
     "dev:inspect": "next dev --inspect",
@@ -40,6 +41,16 @@
     "lint:quiet": "vp run lint --quiet",
     "lint:tss": "tsslint --project tsconfig.json",
     "preinstall": "npx only-allow pnpm",
+    "prebuild": "pnpm run build:dify-ui",
+    "prebuild:vinext": "pnpm run build:dify-ui",
+    "predev": "pnpm run build:dify-ui",
+    "predev:vinext": "pnpm run build:dify-ui",
+    "prestorybook": "pnpm run build:dify-ui",
+    "prestorybook:build": "pnpm run build:dify-ui",
+    "pretest": "pnpm run build:dify-ui",
+    "pretest:watch": "pnpm run build:dify-ui",
+    "pretype-check": "pnpm run build:dify-ui",
+    "pretype-check:tsgo": "pnpm run build:dify-ui",
     "refactor-component": "node ./scripts/refactor-component.js",
     "start": "node ./scripts/copy-and-start.mjs",
     "start:vinext": "vinext start",
@@ -61,6 +72,7 @@
     "@formatjs/intl-localematcher": "catalog:",
     "@headlessui/react": "catalog:",
     "@heroicons/react": "catalog:",
+    "@langgenius/dify-ui": "workspace:*",
     "@lexical/code": "catalog:",
     "@lexical/link": "catalog:",
     "@lexical/list": "catalog:",

web/tailwind.config.ts

@@ -1,5 +1,5 @@
 import type { Config } from 'tailwindcss'
-import commonConfig from './tailwind-common-config'
+import difyUiTailwindPreset from '@langgenius/dify-ui/tailwind-preset'
 
 const config: Config = {
   content: [
@@ -10,7 +10,7 @@ const config: Config = {
     './node_modules/@streamdown/math/dist/*.js',
     '!./**/*.{spec,test}.{js,ts,jsx,tsx}',
   ],
-  ...commonConfig,
+  ...difyUiTailwindPreset,
 }
 
 export default config

web/vite.config.ts

@@ -75,28 +75,6 @@ export default defineConfig(({ mode }) => {
             // SyntaxError: Named export not found. The requested module is a CommonJS module, which may not support all module.exports as named exports
             noExternal: ['emoji-mart'],
           },
-          environments: {
-            rsc: {
-              optimizeDeps: {
-                include: [
-                  'lamejs',
-                  'lamejs/src/js/BitStream',
-                  'lamejs/src/js/Lame',
-                  'lamejs/src/js/MPEGMode',
-                ],
-              },
-            },
-            ssr: {
-              optimizeDeps: {
-                include: [
-                  'lamejs',
-                  'lamejs/src/js/BitStream',
-                  'lamejs/src/js/Lame',
-                  'lamejs/src/js/MPEGMode',
-                ],
-              },
-            },
-          },
         }
       : {}),