Merge remote-tracking branch 'origin/feat/support-agent-sandbox' into pre-align-hitl-frontend

Merge remote-tracking branch 'origin/main' into pre-align-hitl-frontend
update
2026-02-07 16:43:57 +00:00 · 2026-02-07 21:44:39 +08:00 · 2026-02-07 21:44:27 +08:00 · 2026-02-07 13:28:21 +08:00 · 2026-02-07 13:24:33 +08:00 · 2026-02-07 13:23:01 +08:00
300 changed files with 15704 additions and 2145 deletions
--- a/.github/workflows/deploy-hitl.yml
+++ b/.github/workflows/deploy-hitl.yml
@@ -4,7 +4,7 @@ on:
  workflow_run:
    workflows: ["Build and Push API & Web"]
    branches:
-      - "feat/hitl"
+      - "build/feat/hitl"
    types:
      - completed

@@ -13,7 +13,7 @@ jobs:
    runs-on: ubuntu-latest
    if: |
      github.event.workflow_run.conclusion == 'success' &&
-      github.event.workflow_run.head_branch == 'feat/hitl'
+      github.event.workflow_run.head_branch == 'build/feat/hitl'
    steps:
      - name: Deploy to server
        uses: appleboy/ssh-action@v1
--- a/MERGE_NOTES_HITL_WEB_SYNC.md
+++ b/MERGE_NOTES_HITL_WEB_SYNC.md
@@ -0,0 +1,229 @@
+# HITL Web Integration Merge Notes
+
+Date: 2026-02-06  
+Scope: Frontend (`web/`) integration between `origin/build/feat/hitl` and `origin/feat/support-agent-sandbox`
+
+## 1. Context and Goal
+
+This merge effort combines two large frontend change streams:
+
+- `origin/build/feat/hitl`: Human-in-the-Loop (HITL) capabilities, workflow pause/resume, human input forms, related UI/events/types.
+- `origin/feat/support-agent-sandbox`: Sandbox and frontend refactors, including structural changes in workflow debug/preview hooks and shared runtime paths.
+
+Primary objective:
+
+- Integrate `web/` safely without HITL regression.
+- Keep backend/API conflict handling isolated from product branches where possible.
+- Preserve both branches’ effective frontend logic, especially around streaming events and workflow state transitions.
+
+## 2. Current Integration Snapshot
+
+Current integration branch: `wip/hitl-merge-web-conflicts-20260206-175434`
+
+Current `web/` merge footprint:
+
+- Total changed files in index: `266`
+- Added: `79`
+- Modified: `183`
+- Deleted: `4`
+- Files modified by both branches (overlap hotspot): `81`
+
+High-level distribution (approximate by path category):
+
+- `i18n`: `66`
+- `workflow/nodes/human-input`: `28`
+- `workflow` other files: `46`
+- `workflow/hooks/use-workflow-run-event`: `9`
+- `base/chat`: `26`
+- `base/prompt-editor`: `23`
+- `workflow/panel/debug-and-preview`: `7`
+- `service`: `8`
+- `icons`: `11`
+- `eslint-suppressions.json`: `1`
+
+## 3. What This Merge Contains (Functional Context)
+
+Core merge content across frontend:
+
+- New HITL workflow node surface:
+  - New Human Input node implementation and panel components.
+  - Delivery methods (WebApp/Email and related UI configuration paths).
+- Workflow run event pipeline:
+  - Added handling for `human_input_required`, `human_input_form_filled`, `human_input_form_timeout`, `workflow_paused`.
+  - Added/updated run-event hooks and workflow state propagation.
+- Debug/preview refactor integration:
+  - Existing refactor into smaller hooks was retained.
+  - Incoming HITL logic from the other branch was migrated into the new structure.
+- Chat rendering and interaction:
+  - Human input form list and submitted-form list rendering in result views.
+  - Pause-aware behavior in workflow/chat result components.
+- Prompt editor support:
+  - HITL input block support and request URL block integration.
+- Service/runtime updates:
+  - Stream parser and callback type expansion in `web/service/base.ts`.
+  - HITL form submission service endpoints in `web/service/workflow.ts`.
+- Supporting assets:
+  - HITL icon assets and references.
+  - Multi-locale translation updates for workflow/common/share strings.
+
+## 4. Hardening Patches Added After Review
+
+After conflict resolution, additional safety fixes were applied to avoid HITL degradation:
+
+1. Guard `findIndex` before `splice` in form-filled handlers  
+   - Prevent accidental `splice(-1, 1)` that could remove the wrong form.
+   - Files:
+     - `web/app/components/workflow/hooks/use-workflow-run-event/use-workflow-node-human-input-form-filled.ts`
+     - `web/app/components/base/chat/chat/hooks.ts`
+
+2. Guard `findIndex` before timeout field update  
+   - Prevent out-of-bounds access when timeout event arrives for non-existing local entry.
+   - Files:
+     - `web/app/components/workflow/hooks/use-workflow-run-event/use-workflow-node-human-input-form-timeout.ts`
+     - `web/app/components/base/chat/chat/hooks.ts`
+
+3. Fix tracing index condition for node-started event  
+   - Correct handling when `currentIndex === 0` to avoid duplicated tracing entries.
+   - File:
+     - `web/app/components/workflow/hooks/use-workflow-run-event/use-workflow-node-started.ts`
+
+4. Fix trigger-run-all input validation  
+   - Correct empty-array guard for `TriggerType.All`.
+   - File:
+     - `web/app/components/workflow-app/hooks/use-workflow-run.ts`
+
+These are behavior-preserving safeguards: they do not change intended flow, only remove edge-case breakage.
+
+## 5. Recommended Merge Strategy (Relay Branch Model)
+
+This strategy is feasible and stable for this responsibility.
+
+Core principle:
+
+- Treat integration as a dedicated frontend relay branch.
+- Do not directly merge this integration branch back into `feat/support-agent-sandbox`.
+
+### Step-by-step process
+
+1. Create and keep a fixed relay branch (example: `int/hitl-web-sync`).
+2. On relay branch, repeat:
+   - Merge `origin/build/feat/hitl`.
+   - Merge `origin/feat/support-agent-sandbox`.
+   - Resolve only `web/` conflicts as the business target.
+   - Avoid carrying backend conflict resolutions into product branches.
+3. Commit every loop iteration so the relay branch is always checkout-able and buildable.
+4. Before exporting result, merge latest `feat/support-agent-sandbox` into relay one more time to avoid rollback of recent sandbox frontend changes.
+5. Export only `web/` back to sandbox branch:
+   - `git checkout int/hitl-web-sync -- web`
+   - or `git restore --source=int/hitl-web-sync --staged --worktree web`
+   - create one alignment commit in `feat/support-agent-sandbox`.
+
+## 6. Why This Strategy Works
+
+- Backend conflicts stay isolated in relay workflow and do not block sandbox branch progress.
+- Future merge to `main` should mostly contain incremental conflicts instead of re-opening this large web integration.
+- Squash merge on HITL branch is acceptable; Git merge correctness is content-based, not commit-lineage-based.
+
+## 7. Validation Gates Per Iteration
+
+Run these checks in each relay cycle:
+
+1. Conflict sanity:
+   - `git diff --name-only --diff-filter=U -- web`
+   - `rg "^(<<<<<<<|=======|>>>>>>>)" web`
+
+2. Type/lint sanity:
+   - `cd web && pnpm type-check:tsgo`
+   - `cd web && pnpm eslint <targeted-hitl-files> --cache --concurrency=auto`
+
+3. Targeted tests (at minimum):
+   - Prompt editor shortcuts plugin tests.
+   - Workflow/rag pipeline tests impacted by this merge.
+   - HITL-specific unit tests once stabilized.
+
+4. Functional smoke focus:
+   - Workflow pause/resume event chain.
+   - Human input required -> submit -> continue path.
+   - Human input timeout rendering/update path.
+   - Debug-and-preview flow plus chat-with-history/embedded-chat wrappers.
+
+## 8. Open Follow-ups
+
+1. Add explicit unit tests for index-guard behavior in HITL handlers:
+   - form filled when node id is missing.
+   - form timeout when node id is missing.
+   - node-started update when tracing index is `0`.
+
+2. Resolve existing repository-level type-check blocker unrelated to this patch:
+   - `web/app/components/base/chat/chat/hooks.hitl.spec.tsx` currently reports argument-count mismatch.
+
+3. Keep translation synchronization process clear:
+   - English keys are the source of truth.
+   - Non-English locale completion can follow in separate localization pass.
+
+4. If `web/eslint-suppressions.json` grows during conflict loops, regenerate in a dedicated cleanup commit.
+
+## 9. Final Promotion Plan to Mainline
+
+When HITL is finalized:
+
+1. Refresh relay branch from latest sandbox and latest HITL source.
+2. Re-run the validation gates.
+3. Export `web/` only to `feat/support-agent-sandbox` in one commit.
+4. Merge sandbox branch to `main` with normal review.
+5. Handle only net-new conflicts introduced after this integration window.
+
+## 10. Operational Rule Summary
+
+- Use `int/hitl-web-sync` as the long-lived integration relay.
+- Keep merges frequent and small.
+- Keep commits incremental and reproducible.
+- Keep HITL event/data flow as non-regression priority.
+- Export frontend result as content-only alignment (`web/`) to sandbox branch.
+
+## 11. Mainline Merge Replay Risk and Web Preservation Procedure (2026-02-07)
+
+### Verified conclusion
+
+Even if `web/` content is already aligned, Git can still replay frontend conflicts in a later merge to `main` if the branch only copied files but did not record merge ancestry with HITL.
+
+Observed in local probes:
+
+1. `origin/feat/support-agent-sandbox` + merge `origin/build/feat/hitl`:
+   - `web` conflicts: `24`
+2. `pre-align-hitl-frontend` + merge `origin/build/feat/hitl`:
+   - `web` conflicts: `0`
+3. Sandbox branch with one `web` alignment commit (`git checkout pre-align-hitl-frontend -- web`) + merge `origin/build/feat/hitl`:
+   - `web` conflicts: `31`
+
+Interpretation:
+
+- File-content alignment commit is not equivalent to merge-lineage alignment.
+- `git checkout --ours -- web` resolves conflicting paths only, but does not revert auto-merged non-conflict web changes.
+
+### Recommended operational flow when backend later merges `main`
+
+Preconditions:
+
+1. Freeze a stable window: no new commits on `main` and sandbox during operation.
+2. Update `pre-align-hitl-frontend` by merging latest `main` and latest sandbox first.
+3. Export `web/` from `pre-align-hitl-frontend` to sandbox and commit one explicit alignment commit.
+
+When backend branch performs `git merge origin/main`:
+
+1. If the decision is to keep current branch's frontend completely, restore `web/` to pre-merge `HEAD`:
+   - `git restore --source=HEAD --staged --worktree -- web`
+2. If restore is blocked by unmerged `modify/delete` entries, use fallback:
+   - `git checkout HEAD -- web`
+   - resolve remaining unmerged web paths to ours (for delete-on-ours case: `git rm <path>`)
+   - `git restore --source=HEAD --staged --worktree --no-overlay -- web`
+3. Confirm `web/` is fully unchanged in merge state:
+   - `git status --short -- web` should be empty
+   - `git diff --name-only --diff-filter=U -- web` should be empty
+   - `git diff --cached --name-only -- web` should be empty
+   - `git diff --name-only -- web` should be empty
+4. Continue resolving only non-web conflicts and finish merge commit.
+
+### Practical rule
+
+If the intent is "this merge should not change frontend", enforce it with `restore` to `HEAD` on `web/` rather than relying only on `checkout --ours -- web`.
--- a/api/.importlinter
+++ b/api/.importlinter
@@ -102,8 +102,6 @@ forbidden_modules =
    core.trigger
    core.variables
 ignore_imports =
-    core.workflow.nodes.agent.agent_node -> core.db.session_factory
-    core.workflow.nodes.agent.agent_node -> models.tools
    core.workflow.nodes.loop.loop_node -> core.app.workflow.node_factory
    core.workflow.graph_engine.command_channels.redis_channel -> extensions.ext_redis
    core.workflow.workflow_entry -> core.app.workflow.layers.observability
--- a/api/README.md
+++ b/api/README.md
@@ -122,7 +122,7 @@ These commands assume you start from the repository root.

   ```bash
   cd api
-   uv run celery -A app.celery worker -P threads -c 2 --loglevel INFO -Q dataset,priority_dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_executor,retention
+   uv run celery -A app.celery worker -P threads -c 2 --loglevel INFO -Q api_token,dataset,priority_dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_executor,retention
   ```

 1. Optional: start Celery Beat (scheduled tasks, in a new terminal).
--- a/api/configs/feature/init.py
+++ b/api/configs/feature/init.py
@@ -1166,6 +1166,16 @@ class CeleryScheduleTasksConfig(BaseSettings):
        default=0,
    )

+    # API token last_used_at batch update
+    ENABLE_API_TOKEN_LAST_USED_UPDATE_TASK: bool = Field(
+        description="Enable periodic batch update of API token last_used_at timestamps",
+        default=True,
+    )
+    API_TOKEN_LAST_USED_UPDATE_INTERVAL: int = Field(
+        description="Interval in minutes for batch updating API token last_used_at (default 30)",
+        default=30,
+    )
+
    # Trigger provider refresh (simple version)
    ENABLE_TRIGGER_PROVIDER_REFRESH_TASK: bool = Field(
        description="Enable trigger provider refresh poller",
--- a/api/controllers/console/apikey.py
+++ b/api/controllers/console/apikey.py
@@ -10,6 +10,7 @@ from libs.helper import TimestampField
 from libs.login import current_account_with_tenant, login_required
 from models.dataset import Dataset
 from models.model import ApiToken, App
+from services.api_token_service import ApiTokenCache

 from . import console_ns
 from .wraps import account_initialization_required, edit_permission_required, setup_required
@@ -131,6 +132,11 @@ class BaseApiKeyResource(Resource):
        if key is None:
            flask_restx.abort(HTTPStatus.NOT_FOUND, message="API key not found")

+        # Invalidate cache before deleting from database
+        # Type assertion: key is guaranteed to be non-None here because abort() raises
+        assert key is not None  # nosec - for type checker only
+        ApiTokenCache.delete(key.token, key.type)
+
        db.session.query(ApiToken).where(ApiToken.id == api_key_id).delete()
        db.session.commit()

--- a/api/controllers/console/datasets/datasets.py
+++ b/api/controllers/console/datasets/datasets.py
@@ -55,6 +55,7 @@ from libs.login import current_account_with_tenant, login_required
 from models import ApiToken, Dataset, Document, DocumentSegment, UploadFile
 from models.dataset import DatasetPermissionEnum
 from models.provider_ids import ModelProviderID
+from services.api_token_service import ApiTokenCache
 from services.dataset_service import DatasetPermissionService, DatasetService, DocumentService

 # Register models for flask_restx to avoid dict type issues in Swagger
@@ -820,6 +821,11 @@ class DatasetApiDeleteApi(Resource):
        if key is None:
            console_ns.abort(404, message="API key not found")

+        # Invalidate cache before deleting from database
+        # Type assertion: key is guaranteed to be non-None here because abort() raises
+        assert key is not None  # nosec - for type checker only
+        ApiTokenCache.delete(key.token, key.type)
+
        db.session.query(ApiToken).where(ApiToken.id == api_key_id).delete()
        db.session.commit()

--- a/api/controllers/console/tag/tags.py
+++ b/api/controllers/console/tag/tags.py
@@ -120,7 +120,7 @@ class TagUpdateDeleteApi(Resource):

        TagService.delete_tag(tag_id)

-        return 204
+        return "", 204


@console_ns.route("/tag-bindings/create")
--- a/api/controllers/service_api/dataset/dataset.py
+++ b/api/controllers/service_api/dataset/dataset.py
@@ -396,7 +396,7 @@ class DatasetApi(DatasetApiResource):
        try:
            if DatasetService.delete_dataset(dataset_id_str, current_user):
                DatasetPermissionService.clear_partial_member_list(dataset_id_str)
-                return 204
+                return "", 204
            else:
                raise NotFound("Dataset not found.")
        except services.errors.dataset.DatasetInUseError:
@@ -557,7 +557,7 @@ class DatasetTagsApi(DatasetApiResource):
        payload = TagDeletePayload.model_validate(service_api_ns.payload or {})
        TagService.delete_tag(payload.tag_id)

-        return 204
+        return "", 204


@service_api_ns.route("/datasets/tags/binding")
@@ -581,7 +581,7 @@ class DatasetTagBindingApi(DatasetApiResource):
        payload = TagBindingPayload.model_validate(service_api_ns.payload or {})
        TagService.save_tag_binding({"tag_ids": payload.tag_ids, "target_id": payload.target_id, "type": "knowledge"})

-        return 204
+        return "", 204


@service_api_ns.route("/datasets/tags/unbinding")
@@ -605,7 +605,7 @@ class DatasetTagUnbindingApi(DatasetApiResource):
        payload = TagUnbindingPayload.model_validate(service_api_ns.payload or {})
        TagService.delete_tag_binding({"tag_id": payload.tag_id, "target_id": payload.target_id, "type": "knowledge"})

-        return 204
+        return "", 204


@service_api_ns.route("/datasets/<uuid:dataset_id>/tags")
--- a/api/controllers/service_api/dataset/document.py
+++ b/api/controllers/service_api/dataset/document.py
@@ -746,4 +746,4 @@ class DocumentApi(DatasetApiResource):
        except services.errors.document.DocumentIndexingError:
            raise DocumentIndexingError("Cannot delete document during indexing.")

-        return 204
+        return "", 204
--- a/api/controllers/service_api/dataset/metadata.py
+++ b/api/controllers/service_api/dataset/metadata.py
@@ -128,7 +128,7 @@ class DatasetMetadataServiceApi(DatasetApiResource):
        DatasetService.check_dataset_permission(dataset, current_user)

        MetadataService.delete_metadata(dataset_id_str, metadata_id_str)
-        return 204
+        return "", 204


@service_api_ns.route("/datasets/<uuid:dataset_id>/metadata/built-in")
--- a/api/controllers/service_api/dataset/segment.py
+++ b/api/controllers/service_api/dataset/segment.py
@@ -233,7 +233,7 @@ class DatasetSegmentApi(DatasetApiResource):
        if not segment:
            raise NotFound("Segment not found.")
        SegmentService.delete_segment(segment, document, dataset)
-        return 204
+        return "", 204

    @service_api_ns.expect(service_api_ns.models[SegmentUpdatePayload.__name__])
    @service_api_ns.doc("update_segment")
@@ -499,7 +499,7 @@ class DatasetChildChunkApi(DatasetApiResource):
        except ChildChunkDeleteIndexServiceError as e:
            raise ChildChunkDeleteIndexError(str(e))

-        return 204
+        return "", 204

    @service_api_ns.expect(service_api_ns.models[ChildChunkUpdatePayload.__name__])
    @service_api_ns.doc("update_child_chunk")
--- a/api/controllers/service_api/wraps.py
+++ b/api/controllers/service_api/wraps.py
@@ -1,27 +1,24 @@
 import logging
 import time
 from collections.abc import Callable
-from datetime import timedelta
 from enum import StrEnum, auto
 from functools import wraps
-from typing import Concatenate, ParamSpec, TypeVar
+from typing import Concatenate, ParamSpec, TypeVar, cast

 from flask import current_app, request
 from flask_login import user_logged_in
 from flask_restx import Resource
 from pydantic import BaseModel
-from sqlalchemy import select, update
-from sqlalchemy.orm import Session
 from werkzeug.exceptions import Forbidden, NotFound, Unauthorized

 from enums.cloud_plan import CloudPlan
 from extensions.ext_database import db
 from extensions.ext_redis import redis_client
-from libs.datetime_utils import naive_utc_now
 from libs.login import current_user
 from models import Account, Tenant, TenantAccountJoin, TenantStatus
 from models.dataset import Dataset, RateLimitLog
 from models.model import ApiToken, App
+from services.api_token_service import ApiTokenCache, fetch_token_with_single_flight, record_token_usage
 from services.end_user_service import EndUserService
 from services.feature_service import FeatureService

@@ -296,7 +293,14 @@ def validate_dataset_token(view: Callable[Concatenate[T, P], R] | None = None):

 def validate_and_get_api_token(scope: str | None = None):
    """
-    Validate and get API token.
+    Validate and get API token with Redis caching.
+
+    This function uses a two-tier approach:
+    1. First checks Redis cache for the token
+    2. If not cached, queries database and caches the result
+
+    The last_used_at field is updated asynchronously via Celery task
+    to avoid blocking the request.
    """
    auth_header = request.headers.get("Authorization")
    if auth_header is None or " " not in auth_header:
@@ -308,29 +312,18 @@ def validate_and_get_api_token(scope: str | None = None):
    if auth_scheme != "bearer":
        raise Unauthorized("Authorization scheme must be 'Bearer'")

-    current_time = naive_utc_now()
-    cutoff_time = current_time - timedelta(minutes=1)
-    with Session(db.engine, expire_on_commit=False) as session:
-        update_stmt = (
-            update(ApiToken)
-            .where(
-                ApiToken.token == auth_token,
-                (ApiToken.last_used_at.is_(None) | (ApiToken.last_used_at < cutoff_time)),
-                ApiToken.type == scope,
-            )
-            .values(last_used_at=current_time)
-        )
-        stmt = select(ApiToken).where(ApiToken.token == auth_token, ApiToken.type == scope)
-        result = session.execute(update_stmt)
-        api_token = session.scalar(stmt)
+    # Try to get token from cache first
+    # Returns a CachedApiToken (plain Python object), not a SQLAlchemy model
+    cached_token = ApiTokenCache.get(auth_token, scope)
+    if cached_token is not None:
+        logger.debug("Token validation served from cache for scope: %s", scope)
+        # Record usage in Redis for later batch update (no Celery task per request)
+        record_token_usage(auth_token, scope)
+        return cast(ApiToken, cached_token)

-        if hasattr(result, "rowcount") and result.rowcount > 0:
-            session.commit()
-
-        if not api_token:
-            raise Unauthorized("Access token is invalid")
-
-    return api_token
+    # Cache miss - use Redis lock for single-flight mode
+    # This ensures only one request queries DB for the same token concurrently
+    return fetch_token_with_single_flight(auth_token, scope)


 class DatasetApiResource(Resource):
--- a/api/core/workflow/nodes/agent/agent_node.py
+++ b/api/core/workflow/nodes/agent/agent_node.py
@@ -2,7 +2,7 @@ from __future__ import annotations

 import json
 from collections.abc import Generator, Mapping, Sequence
-from typing import TYPE_CHECKING, Any, Union, cast
+from typing import TYPE_CHECKING, Any, cast

 from packaging.version import Version
 from pydantic import ValidationError
@@ -11,7 +11,6 @@ from sqlalchemy.orm import Session

 from core.agent.entities import AgentToolEntity
 from core.agent.plugin_entities import AgentStrategyParameter
-from core.db.session_factory import session_factory
 from core.file import File, FileTransferMethod
 from core.memory.base import BaseMemory
 from core.memory.node_token_buffer_memory import NodeTokenBufferMemory
@@ -59,12 +58,6 @@ from factories import file_factory
 from factories.agent_factory import get_plugin_agent_strategy
 from models import ToolFile
 from models.model import Conversation
-from models.tools import (
-    ApiToolProvider,
-    BuiltinToolProvider,
-    MCPToolProvider,
-    WorkflowToolProvider,
-)
 from services.tools.builtin_tools_manage_service import BuiltinToolManageService

 from .exc import (
@@ -279,7 +272,7 @@ class AgentNode(Node[AgentNodeData]):
                    value = cast(list[dict[str, Any]], value)
                    tool_value = []
                    for tool in value:
-                        provider_type = self._infer_tool_provider_type(tool, self.tenant_id)
+                        provider_type = ToolProviderType(tool.get("type", ToolProviderType.BUILT_IN))
                        setting_params = tool.get("settings", {})
                        parameters = tool.get("parameters", {})
                        manual_input_params = [key for key, value in parameters.items() if value is not None]
@@ -928,34 +921,3 @@ class AgentNode(Node[AgentNodeData]):
                llm_usage=llm_usage,
            )
        )
-
-    @staticmethod
-    def _infer_tool_provider_type(tool_config: dict[str, Any], tenant_id: str) -> ToolProviderType:
-        provider_type_str = tool_config.get("type")
-        if provider_type_str:
-            return ToolProviderType(provider_type_str)
-
-        provider_id = tool_config.get("provider_name")
-        if not provider_id:
-            return ToolProviderType.BUILT_IN
-
-        with session_factory.create_session() as session:
-            provider_map: dict[
-                type[Union[WorkflowToolProvider, MCPToolProvider, ApiToolProvider, BuiltinToolProvider]],
-                ToolProviderType,
-            ] = {
-                WorkflowToolProvider: ToolProviderType.WORKFLOW,
-                MCPToolProvider: ToolProviderType.MCP,
-                ApiToolProvider: ToolProviderType.API,
-                BuiltinToolProvider: ToolProviderType.BUILT_IN,
-            }
-
-            for provider_model, provider_type in provider_map.items():
-                stmt = select(provider_model).where(
-                    provider_model.id == provider_id,
-                    provider_model.tenant_id == tenant_id,
-                )
-                if session.scalar(stmt):
-                    return provider_type
-
-        raise AgentNodeError(f"Tool provider with ID '{provider_id}' not found.")
--- a/api/docker/entrypoint.sh
+++ b/api/docker/entrypoint.sh
@@ -35,10 +35,10 @@ if [[ "${MODE}" == "worker" ]]; then
  if [[ -z "${CELERY_QUEUES}" ]]; then
    if [[ "${EDITION}" == "CLOUD" ]]; then
      # Cloud edition: separate queues for dataset and trigger tasks
-      DEFAULT_QUEUES="dataset,priority_dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow_professional,workflow_team,workflow_sandbox,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_executor,retention"
+      DEFAULT_QUEUES="api_token,dataset,priority_dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow_professional,workflow_team,workflow_sandbox,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_executor,retention"
    else
      # Community edition (SELF_HOSTED): dataset, pipeline and workflow have separate queues
-      DEFAULT_QUEUES="dataset,priority_dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_executor,retention"
+      DEFAULT_QUEUES="api_token,dataset,priority_dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_executor,retention"
    fi
  else
    DEFAULT_QUEUES="${CELERY_QUEUES}"
--- a/api/extensions/ext_celery.py
+++ b/api/extensions/ext_celery.py
@@ -184,6 +184,14 @@ def init_app(app: DifyApp) -> Celery:
            "task": "schedule.trigger_provider_refresh_task.trigger_provider_refresh",
            "schedule": timedelta(minutes=dify_config.TRIGGER_PROVIDER_REFRESH_INTERVAL),
        }
+
+    if dify_config.ENABLE_API_TOKEN_LAST_USED_UPDATE_TASK:
+        imports.append("schedule.update_api_token_last_used_task")
+        beat_schedule["batch_update_api_token_last_used"] = {
+            "task": "schedule.update_api_token_last_used_task.batch_update_api_token_last_used",
+            "schedule": timedelta(minutes=dify_config.API_TOKEN_LAST_USED_UPDATE_INTERVAL),
+        }
+
    celery_app.conf.update(beat_schedule=beat_schedule, imports=imports)

    return celery_app
--- a/api/schedule/update_api_token_last_used_task.py
+++ b/api/schedule/update_api_token_last_used_task.py
@@ -0,0 +1,114 @@
+"""
+Scheduled task to batch-update API token last_used_at timestamps.
+
+Instead of updating the database on every request, token usage is recorded
+in Redis as lightweight SET keys (api_token_active:{scope}:{token}).
+This task runs periodically (default every 30 minutes) to flush those
+records into the database in a single batch operation.
+"""
+
+import logging
+import time
+from datetime import datetime
+
+import click
+from sqlalchemy import update
+from sqlalchemy.orm import Session
+
+import app
+from extensions.ext_database import db
+from extensions.ext_redis import redis_client
+from models.model import ApiToken
+from services.api_token_service import ACTIVE_TOKEN_KEY_PREFIX
+
+logger = logging.getLogger(__name__)
+
+
+@app.celery.task(queue="api_token")
+def batch_update_api_token_last_used():
+    """
+    Batch update last_used_at for all recently active API tokens.
+
+    Scans Redis for api_token_active:* keys, parses the token and scope
+    from each key, and performs a batch database update.
+    """
+    click.echo(click.style("batch_update_api_token_last_used: start.", fg="green"))
+    start_at = time.perf_counter()
+
+    updated_count = 0
+    scanned_count = 0
+
+    try:
+        # Collect all active token keys and their values (the actual usage timestamps)
+        token_entries: list[tuple[str, str | None, datetime]] = []  # (token, scope, usage_time)
+        keys_to_delete: list[str | bytes] = []
+
+        for key in redis_client.scan_iter(match=f"{ACTIVE_TOKEN_KEY_PREFIX}*", count=200):
+            if isinstance(key, bytes):
+                key = key.decode("utf-8")
+            scanned_count += 1
+
+            # Read the value (ISO timestamp recorded at actual request time)
+            value = redis_client.get(key)
+            if not value:
+                keys_to_delete.append(key)
+                continue
+
+            if isinstance(value, bytes):
+                value = value.decode("utf-8")
+
+            try:
+                usage_time = datetime.fromisoformat(value)
+            except (ValueError, TypeError):
+                logger.warning("Invalid timestamp in key %s: %s", key, value)
+                keys_to_delete.append(key)
+                continue
+
+            # Parse token info from key: api_token_active:{scope}:{token}
+            suffix = key[len(ACTIVE_TOKEN_KEY_PREFIX) :]
+            parts = suffix.split(":", 1)
+            if len(parts) == 2:
+                scope_str, token = parts
+                scope = None if scope_str == "None" else scope_str
+                token_entries.append((token, scope, usage_time))
+            keys_to_delete.append(key)
+
+        if not token_entries:
+            click.echo(click.style("batch_update_api_token_last_used: no active tokens found.", fg="yellow"))
+            # Still clean up any invalid keys
+            if keys_to_delete:
+                redis_client.delete(*keys_to_delete)
+            return
+
+        # Update each token in its own short transaction to avoid long transactions
+        for token, scope, usage_time in token_entries:
+            with Session(db.engine, expire_on_commit=False) as session, session.begin():
+                stmt = (
+                    update(ApiToken)
+                    .where(
+                        ApiToken.token == token,
+                        ApiToken.type == scope,
+                        (ApiToken.last_used_at.is_(None) | (ApiToken.last_used_at < usage_time)),
+                    )
+                    .values(last_used_at=usage_time)
+                )
+                result = session.execute(stmt)
+                rowcount = getattr(result, "rowcount", 0)
+                if rowcount > 0:
+                    updated_count += 1
+
+        # Delete processed keys from Redis
+        if keys_to_delete:
+            redis_client.delete(*keys_to_delete)
+
+    except Exception:
+        logger.exception("batch_update_api_token_last_used failed")
+
+    elapsed = time.perf_counter() - start_at
+    click.echo(
+        click.style(
+            f"batch_update_api_token_last_used: done. "
+            f"scanned={scanned_count}, updated={updated_count}, elapsed={elapsed:.2f}s",
+            fg="green",
+        )
+    )
--- a/api/services/api_token_service.py
+++ b/api/services/api_token_service.py
@@ -0,0 +1,330 @@
+"""
+API Token Service
+
+Handles all API token caching, validation, and usage recording.
+Includes Redis cache operations, database queries, and single-flight concurrency control.
+"""
+
+import logging
+from datetime import datetime
+from typing import Any
+
+from pydantic import BaseModel
+from sqlalchemy import select
+from sqlalchemy.orm import Session
+from werkzeug.exceptions import Unauthorized
+
+from extensions.ext_database import db
+from extensions.ext_redis import redis_client, redis_fallback
+from libs.datetime_utils import naive_utc_now
+from models.model import ApiToken
+
+logger = logging.getLogger(__name__)
+
+
+# ---------------------------------------------------------------------
+# Pydantic DTO
+# ---------------------------------------------------------------------
+
+
+class CachedApiToken(BaseModel):
+    """
+    Pydantic model for cached API token data.
+
+    This is NOT a SQLAlchemy model instance, but a plain Pydantic model
+    that mimics the ApiToken model interface for read-only access.
+    """
+
+    id: str
+    app_id: str | None
+    tenant_id: str | None
+    type: str
+    token: str
+    last_used_at: datetime | None
+    created_at: datetime | None
+
+    def __repr__(self) -> str:
+        return f"<CachedApiToken id={self.id} type={self.type}>"
+
+
+# ---------------------------------------------------------------------
+# Cache configuration
+# ---------------------------------------------------------------------
+
+CACHE_KEY_PREFIX = "api_token"
+CACHE_TTL_SECONDS = 600  # 10 minutes
+CACHE_NULL_TTL_SECONDS = 60  # 1 minute for non-existent tokens
+ACTIVE_TOKEN_KEY_PREFIX = "api_token_active:"
+
+
+# ---------------------------------------------------------------------
+# Cache class
+# ---------------------------------------------------------------------
+
+
+class ApiTokenCache:
+    """
+    Redis cache wrapper for API tokens.
+    Handles serialization, deserialization, and cache invalidation.
+    """
+
+    @staticmethod
+    def make_active_key(token: str, scope: str | None = None) -> str:
+        """Generate Redis key for recording token usage."""
+        return f"{ACTIVE_TOKEN_KEY_PREFIX}{scope}:{token}"
+
+    @staticmethod
+    def _make_tenant_index_key(tenant_id: str) -> str:
+        """Generate Redis key for tenant token index."""
+        return f"tenant_tokens:{tenant_id}"
+
+    @staticmethod
+    def _make_cache_key(token: str, scope: str | None = None) -> str:
+        """Generate cache key for the given token and scope."""
+        scope_str = scope or "any"
+        return f"{CACHE_KEY_PREFIX}:{scope_str}:{token}"
+
+    @staticmethod
+    def _serialize_token(api_token: Any) -> bytes:
+        """Serialize ApiToken object to JSON bytes."""
+        if isinstance(api_token, CachedApiToken):
+            return api_token.model_dump_json().encode("utf-8")
+
+        cached = CachedApiToken(
+            id=str(api_token.id),
+            app_id=str(api_token.app_id) if api_token.app_id else None,
+            tenant_id=str(api_token.tenant_id) if api_token.tenant_id else None,
+            type=api_token.type,
+            token=api_token.token,
+            last_used_at=api_token.last_used_at,
+            created_at=api_token.created_at,
+        )
+        return cached.model_dump_json().encode("utf-8")
+
+    @staticmethod
+    def _deserialize_token(cached_data: bytes | str) -> Any:
+        """Deserialize JSON bytes/string back to a CachedApiToken Pydantic model."""
+        if cached_data in {b"null", "null"}:
+            return None
+
+        try:
+            if isinstance(cached_data, bytes):
+                cached_data = cached_data.decode("utf-8")
+            return CachedApiToken.model_validate_json(cached_data)
+        except (ValueError, Exception) as e:
+            logger.warning("Failed to deserialize token from cache: %s", e)
+            return None
+
+    @staticmethod
+    @redis_fallback(default_return=None)
+    def get(token: str, scope: str | None) -> Any | None:
+        """Get API token from cache."""
+        cache_key = ApiTokenCache._make_cache_key(token, scope)
+        cached_data = redis_client.get(cache_key)
+
+        if cached_data is None:
+            logger.debug("Cache miss for token key: %s", cache_key)
+            return None
+
+        logger.debug("Cache hit for token key: %s", cache_key)
+        return ApiTokenCache._deserialize_token(cached_data)
+
+    @staticmethod
+    def _add_to_tenant_index(tenant_id: str | None, cache_key: str) -> None:
+        """Add cache key to tenant index for efficient invalidation."""
+        if not tenant_id:
+            return
+
+        try:
+            index_key = ApiTokenCache._make_tenant_index_key(tenant_id)
+            redis_client.sadd(index_key, cache_key)
+            redis_client.expire(index_key, CACHE_TTL_SECONDS + 60)
+        except Exception as e:
+            logger.warning("Failed to update tenant index: %s", e)
+
+    @staticmethod
+    def _remove_from_tenant_index(tenant_id: str | None, cache_key: str) -> None:
+        """Remove cache key from tenant index."""
+        if not tenant_id:
+            return
+
+        try:
+            index_key = ApiTokenCache._make_tenant_index_key(tenant_id)
+            redis_client.srem(index_key, cache_key)
+        except Exception as e:
+            logger.warning("Failed to remove from tenant index: %s", e)
+
+    @staticmethod
+    @redis_fallback(default_return=False)
+    def set(token: str, scope: str | None, api_token: Any | None, ttl: int = CACHE_TTL_SECONDS) -> bool:
+        """Set API token in cache."""
+        cache_key = ApiTokenCache._make_cache_key(token, scope)
+
+        if api_token is None:
+            cached_value = b"null"
+            ttl = CACHE_NULL_TTL_SECONDS
+        else:
+            cached_value = ApiTokenCache._serialize_token(api_token)
+
+        try:
+            redis_client.setex(cache_key, ttl, cached_value)
+
+            if api_token is not None and hasattr(api_token, "tenant_id"):
+                ApiTokenCache._add_to_tenant_index(api_token.tenant_id, cache_key)
+
+            logger.debug("Cached token with key: %s, ttl: %ss", cache_key, ttl)
+            return True
+        except Exception as e:
+            logger.warning("Failed to cache token: %s", e)
+            return False
+
+    @staticmethod
+    @redis_fallback(default_return=False)
+    def delete(token: str, scope: str | None = None) -> bool:
+        """Delete API token from cache."""
+        if scope is None:
+            pattern = f"{CACHE_KEY_PREFIX}:*:{token}"
+            try:
+                keys_to_delete = list(redis_client.scan_iter(match=pattern))
+                if keys_to_delete:
+                    redis_client.delete(*keys_to_delete)
+                    logger.info("Deleted %d cache entries for token", len(keys_to_delete))
+                return True
+            except Exception as e:
+                logger.warning("Failed to delete token cache with pattern: %s", e)
+                return False
+        else:
+            cache_key = ApiTokenCache._make_cache_key(token, scope)
+            try:
+                tenant_id = None
+                try:
+                    cached_data = redis_client.get(cache_key)
+                    if cached_data and cached_data != b"null":
+                        cached_token = ApiTokenCache._deserialize_token(cached_data)
+                        if cached_token:
+                            tenant_id = cached_token.tenant_id
+                except Exception as e:
+                    logger.debug("Failed to get tenant_id for cache cleanup: %s", e)
+
+                redis_client.delete(cache_key)
+
+                if tenant_id:
+                    ApiTokenCache._remove_from_tenant_index(tenant_id, cache_key)
+
+                logger.info("Deleted cache for key: %s", cache_key)
+                return True
+            except Exception as e:
+                logger.warning("Failed to delete token cache: %s", e)
+                return False
+
+    @staticmethod
+    @redis_fallback(default_return=False)
+    def invalidate_by_tenant(tenant_id: str) -> bool:
+        """Invalidate all API token caches for a specific tenant via tenant index."""
+        try:
+            index_key = ApiTokenCache._make_tenant_index_key(tenant_id)
+            cache_keys = redis_client.smembers(index_key)
+
+            if cache_keys:
+                deleted_count = 0
+                for cache_key in cache_keys:
+                    if isinstance(cache_key, bytes):
+                        cache_key = cache_key.decode("utf-8")
+                    redis_client.delete(cache_key)
+                    deleted_count += 1
+
+                redis_client.delete(index_key)
+
+                logger.info(
+                    "Invalidated %d token cache entries for tenant: %s",
+                    deleted_count,
+                    tenant_id,
+                )
+            else:
+                logger.info(
+                    "No tenant index found for %s, relying on TTL expiration",
+                    tenant_id,
+                )
+
+            return True
+
+        except Exception as e:
+            logger.warning("Failed to invalidate tenant token cache: %s", e)
+            return False
+
+
+# ---------------------------------------------------------------------
+# Token usage recording (for batch update)
+# ---------------------------------------------------------------------
+
+
+def record_token_usage(auth_token: str, scope: str | None) -> None:
+    """
+    Record token usage in Redis for later batch update by a scheduled job.
+
+    Instead of dispatching a Celery task per request, we simply SET a key in Redis.
+    A Celery Beat scheduled task will periodically scan these keys and batch-update
+    last_used_at in the database.
+    """
+    try:
+        key = ApiTokenCache.make_active_key(auth_token, scope)
+        redis_client.set(key, naive_utc_now().isoformat(), ex=3600)
+    except Exception as e:
+        logger.warning("Failed to record token usage: %s", e)
+
+
+# ---------------------------------------------------------------------
+# Database query + single-flight
+# ---------------------------------------------------------------------
+
+
+def query_token_from_db(auth_token: str, scope: str | None) -> ApiToken:
+    """
+    Query API token from database and cache the result.
+
+    Raises Unauthorized if token is invalid.
+    """
+    with Session(db.engine, expire_on_commit=False) as session:
+        stmt = select(ApiToken).where(ApiToken.token == auth_token, ApiToken.type == scope)
+        api_token = session.scalar(stmt)
+
+        if not api_token:
+            ApiTokenCache.set(auth_token, scope, None)
+            raise Unauthorized("Access token is invalid")
+
+        ApiTokenCache.set(auth_token, scope, api_token)
+        record_token_usage(auth_token, scope)
+        return api_token
+
+
+def fetch_token_with_single_flight(auth_token: str, scope: str | None) -> ApiToken | Any:
+    """
+    Fetch token from DB with single-flight pattern using Redis lock.
+
+    Ensures only one concurrent request queries the database for the same token.
+    Falls back to direct query if lock acquisition fails.
+    """
+    logger.debug("Token cache miss, attempting to acquire query lock for scope: %s", scope)
+
+    lock_key = f"api_token_query_lock:{scope}:{auth_token}"
+    lock = redis_client.lock(lock_key, timeout=10, blocking_timeout=5)
+
+    try:
+        if lock.acquire(blocking=True):
+            try:
+                cached_token = ApiTokenCache.get(auth_token, scope)
+                if cached_token is not None:
+                    logger.debug("Token cached by concurrent request, using cached version")
+                    return cached_token
+
+                return query_token_from_db(auth_token, scope)
+            finally:
+                lock.release()
+        else:
+            logger.warning("Lock timeout for token: %s, proceeding with direct query", auth_token[:10])
+            return query_token_from_db(auth_token, scope)
+    except Unauthorized:
+        raise
+    except Exception as e:
+        logger.warning("Redis lock failed for token query: %s, proceeding anyway", e)
+        return query_token_from_db(auth_token, scope)
--- a/api/services/dataset_service.py
+++ b/api/services/dataset_service.py
@@ -1696,13 +1696,18 @@ class DocumentService:
            for document in documents
            if document.data_source_type == "upload_file" and document.data_source_info_dict
        ]
-        if dataset.doc_form is not None:
-            batch_clean_document_task.delay(document_ids, dataset.id, dataset.doc_form, file_ids)

+        # Delete documents first, then dispatch cleanup task after commit
+        # to avoid deadlock between main transaction and async task
        for document in documents:
            db.session.delete(document)
        db.session.commit()

+        # Dispatch cleanup task after commit to avoid lock contention
+        # Task cleans up segments, files, and vector indexes
+        if dataset.doc_form is not None:
+            batch_clean_document_task.delay(document_ids, dataset.id, dataset.doc_form, file_ids)
+
    @staticmethod
    def rename_document(dataset_id: str, document_id: str, name: str) -> Document:
        assert isinstance(current_user, Account)
--- a/api/tasks/batch_clean_document_task.py
+++ b/api/tasks/batch_clean_document_task.py
@@ -14,6 +14,9 @@ from models.model import UploadFile

 logger = logging.getLogger(__name__)

+# Batch size for database operations to keep transactions short
+BATCH_SIZE = 1000
+

@shared_task(queue="dataset")
 def batch_clean_document_task(document_ids: list[str], dataset_id: str, doc_form: str | None, file_ids: list[str]):
@@ -31,63 +34,179 @@ def batch_clean_document_task(document_ids: list[str], dataset_id: str, doc_form
    if not doc_form:
        raise ValueError("doc_form is required")

-    with session_factory.create_session() as session:
-        try:
-            dataset = session.query(Dataset).where(Dataset.id == dataset_id).first()
-
-            if not dataset:
-                raise Exception("Document has no dataset")
-
-            session.query(DatasetMetadataBinding).where(
-                DatasetMetadataBinding.dataset_id == dataset_id,
-                DatasetMetadataBinding.document_id.in_(document_ids),
-            ).delete(synchronize_session=False)
+    storage_keys_to_delete: list[str] = []
+    index_node_ids: list[str] = []
+    segment_ids: list[str] = []
+    total_image_upload_file_ids: list[str] = []

+    try:
+        # ============ Step 1: Query segment and file data (short read-only transaction) ============
+        with session_factory.create_session() as session:
+            # Get segments info
            segments = session.scalars(
                select(DocumentSegment).where(DocumentSegment.document_id.in_(document_ids))
            ).all()
-            # check segment is exist
+
            if segments:
                index_node_ids = [segment.index_node_id for segment in segments]
-                index_processor = IndexProcessorFactory(doc_form).init_index_processor()
-                index_processor.clean(
-                    dataset, index_node_ids, with_keywords=True, delete_child_chunks=True, delete_summaries=True
-                )
+                segment_ids = [segment.id for segment in segments]

+                # Collect image file IDs from segment content
                for segment in segments:
                    image_upload_file_ids = get_image_upload_file_ids(segment.content)
-                    image_files = session.query(UploadFile).where(UploadFile.id.in_(image_upload_file_ids)).all()
-                    for image_file in image_files:
-                        try:
-                            if image_file and image_file.key:
-                                storage.delete(image_file.key)
-                        except Exception:
-                            logger.exception(
-                                "Delete image_files failed when storage deleted, \
-                                              image_upload_file_is: %s",
-                                image_file.id,
-                            )
-                    stmt = delete(UploadFile).where(UploadFile.id.in_(image_upload_file_ids))
-                    session.execute(stmt)
-                    session.delete(segment)
+                    total_image_upload_file_ids.extend(image_upload_file_ids)
+
+            # Query storage keys for image files
+            if total_image_upload_file_ids:
+                image_files = session.scalars(
+                    select(UploadFile).where(UploadFile.id.in_(total_image_upload_file_ids))
+                ).all()
+                storage_keys_to_delete.extend([f.key for f in image_files if f and f.key])
+
+            # Query storage keys for document files
            if file_ids:
                files = session.scalars(select(UploadFile).where(UploadFile.id.in_(file_ids))).all()
-                for file in files:
-                    try:
-                        storage.delete(file.key)
-                    except Exception:
-                        logger.exception("Delete file failed when document deleted, file_id: %s", file.id)
-                stmt = delete(UploadFile).where(UploadFile.id.in_(file_ids))
-                session.execute(stmt)
+                storage_keys_to_delete.extend([f.key for f in files if f and f.key])

-            session.commit()
-
-            end_at = time.perf_counter()
-            logger.info(
-                click.style(
-                    f"Cleaned documents when documents deleted latency: {end_at - start_at}",
-                    fg="green",
+        # ============ Step 2: Clean vector index (external service, fresh session for dataset) ============
+        if index_node_ids:
+            try:
+                # Fetch dataset in a fresh session to avoid DetachedInstanceError
+                with session_factory.create_session() as session:
+                    dataset = session.query(Dataset).where(Dataset.id == dataset_id).first()
+                    if not dataset:
+                        logger.warning("Dataset not found for vector index cleanup, dataset_id: %s", dataset_id)
+                    else:
+                        index_processor = IndexProcessorFactory(doc_form).init_index_processor()
+                        index_processor.clean(
+                            dataset, index_node_ids, with_keywords=True, delete_child_chunks=True, delete_summaries=True
+                        )
+            except Exception:
+                logger.exception(
+                    "Failed to clean vector index for dataset_id: %s, document_ids: %s, index_node_ids count: %d",
+                    dataset_id,
+                    document_ids,
+                    len(index_node_ids),
                )
-            )
+
+        # ============ Step 3: Delete metadata binding (separate short transaction) ============
+        try:
+            with session_factory.create_session() as session:
+                deleted_count = (
+                    session.query(DatasetMetadataBinding)
+                    .where(
+                        DatasetMetadataBinding.dataset_id == dataset_id,
+                        DatasetMetadataBinding.document_id.in_(document_ids),
+                    )
+                    .delete(synchronize_session=False)
+                )
+                session.commit()
+                logger.debug("Deleted %d metadata bindings for dataset_id: %s", deleted_count, dataset_id)
        except Exception:
-            logger.exception("Cleaned documents when documents deleted failed")
+            logger.exception(
+                "Failed to delete metadata bindings for dataset_id: %s, document_ids: %s",
+                dataset_id,
+                document_ids,
+            )
+
+        # ============ Step 4: Batch delete UploadFile records (multiple short transactions) ============
+        if total_image_upload_file_ids:
+            failed_batches = 0
+            total_batches = (len(total_image_upload_file_ids) + BATCH_SIZE - 1) // BATCH_SIZE
+            for i in range(0, len(total_image_upload_file_ids), BATCH_SIZE):
+                batch = total_image_upload_file_ids[i : i + BATCH_SIZE]
+                try:
+                    with session_factory.create_session() as session:
+                        stmt = delete(UploadFile).where(UploadFile.id.in_(batch))
+                        session.execute(stmt)
+                        session.commit()
+                except Exception:
+                    failed_batches += 1
+                    logger.exception(
+                        "Failed to delete image UploadFile batch %d-%d for dataset_id: %s",
+                        i,
+                        i + len(batch),
+                        dataset_id,
+                    )
+            if failed_batches > 0:
+                logger.warning(
+                    "Image UploadFile deletion: %d/%d batches failed for dataset_id: %s",
+                    failed_batches,
+                    total_batches,
+                    dataset_id,
+                )
+
+        # ============ Step 5: Batch delete DocumentSegment records (multiple short transactions) ============
+        if segment_ids:
+            failed_batches = 0
+            total_batches = (len(segment_ids) + BATCH_SIZE - 1) // BATCH_SIZE
+            for i in range(0, len(segment_ids), BATCH_SIZE):
+                batch = segment_ids[i : i + BATCH_SIZE]
+                try:
+                    with session_factory.create_session() as session:
+                        segment_delete_stmt = delete(DocumentSegment).where(DocumentSegment.id.in_(batch))
+                        session.execute(segment_delete_stmt)
+                        session.commit()
+                except Exception:
+                    failed_batches += 1
+                    logger.exception(
+                        "Failed to delete DocumentSegment batch %d-%d for dataset_id: %s, document_ids: %s",
+                        i,
+                        i + len(batch),
+                        dataset_id,
+                        document_ids,
+                    )
+            if failed_batches > 0:
+                logger.warning(
+                    "DocumentSegment deletion: %d/%d batches failed, document_ids: %s",
+                    failed_batches,
+                    total_batches,
+                    document_ids,
+                )
+
+        # ============ Step 6: Delete document-associated files (separate short transaction) ============
+        if file_ids:
+            try:
+                with session_factory.create_session() as session:
+                    stmt = delete(UploadFile).where(UploadFile.id.in_(file_ids))
+                    session.execute(stmt)
+                    session.commit()
+            except Exception:
+                logger.exception(
+                    "Failed to delete document UploadFile records for dataset_id: %s, file_ids: %s",
+                    dataset_id,
+                    file_ids,
+                )
+
+        # ============ Step 7: Delete storage files (I/O operations, no DB transaction) ============
+        storage_delete_failures = 0
+        for storage_key in storage_keys_to_delete:
+            try:
+                storage.delete(storage_key)
+            except Exception:
+                storage_delete_failures += 1
+                logger.exception("Failed to delete file from storage, key: %s", storage_key)
+        if storage_delete_failures > 0:
+            logger.warning(
+                "Storage file deletion completed with %d failures out of %d total files for dataset_id: %s",
+                storage_delete_failures,
+                len(storage_keys_to_delete),
+                dataset_id,
+            )
+
+        end_at = time.perf_counter()
+        logger.info(
+            click.style(
+                f"Cleaned documents when documents deleted latency: {end_at - start_at:.2f}s, "
+                f"dataset_id: {dataset_id}, document_ids: {document_ids}, "
+                f"segments: {len(segment_ids)}, image_files: {len(total_image_upload_file_ids)}, "
+                f"storage_files: {len(storage_keys_to_delete)}",
+                fg="green",
+            )
+        )
+    except Exception:
+        logger.exception(
+            "Batch clean documents failed for dataset_id: %s, document_ids: %s",
+            dataset_id,
+            document_ids,
+        )
--- a/api/tasks/delete_segment_from_index_task.py
+++ b/api/tasks/delete_segment_from_index_task.py
@@ -3,6 +3,7 @@ import time

 import click
 from celery import shared_task
+from sqlalchemy import delete

 from core.db.session_factory import session_factory
 from core.rag.index_processor.index_processor_factory import IndexProcessorFactory
@@ -67,8 +68,14 @@ def delete_segment_from_index_task(
                if segment_attachment_bindings:
                    attachment_ids = [binding.attachment_id for binding in segment_attachment_bindings]
                    index_processor.clean(dataset=dataset, node_ids=attachment_ids, with_keywords=False)
-                    for binding in segment_attachment_bindings:
-                        session.delete(binding)
+                    segment_attachment_bind_ids = [i.id for i in segment_attachment_bindings]
+
+                    for i in range(0, len(segment_attachment_bind_ids), 1000):
+                        segment_attachment_bind_delete_stmt = delete(SegmentAttachmentBinding).where(
+                            SegmentAttachmentBinding.id.in_(segment_attachment_bind_ids[i : i + 1000])
+                        )
+                        session.execute(segment_attachment_bind_delete_stmt)
+
                    # delete upload file
                    session.query(UploadFile).where(UploadFile.id.in_(attachment_ids)).delete(synchronize_session=False)
                    session.commit()
--- a/api/tasks/document_indexing_sync_task.py
+++ b/api/tasks/document_indexing_sync_task.py
@@ -28,7 +28,7 @@ def document_indexing_sync_task(dataset_id: str, document_id: str):
    logger.info(click.style(f"Start sync document: {document_id}", fg="green"))
    start_at = time.perf_counter()

-    with session_factory.create_session() as session:
+    with session_factory.create_session() as session, session.begin():
        document = session.query(Document).where(Document.id == document_id, Document.dataset_id == dataset_id).first()

        if not document:
@@ -68,7 +68,6 @@ def document_indexing_sync_task(dataset_id: str, document_id: str):
                document.indexing_status = "error"
                document.error = "Datasource credential not found. Please reconnect your Notion workspace."
                document.stopped_at = naive_utc_now()
-                session.commit()
                return

            loader = NotionExtractor(
@@ -85,7 +84,6 @@ def document_indexing_sync_task(dataset_id: str, document_id: str):
            if last_edited_time != page_edited_time:
                document.indexing_status = "parsing"
                document.processing_started_at = naive_utc_now()
-                session.commit()

                # delete all document segment and index
                try:
--- a/api/tasks/remove_app_and_related_data_task.py
+++ b/api/tasks/remove_app_and_related_data_task.py
@@ -48,6 +48,7 @@ from models.workflow import (
    WorkflowArchiveLog,
 )
 from repositories.factory import DifyAPIRepositoryFactory
+from services.api_token_service import ApiTokenCache

 logger = logging.getLogger(__name__)

@@ -134,6 +135,12 @@ def _delete_app_mcp_servers(tenant_id: str, app_id: str):

 def _delete_app_api_tokens(tenant_id: str, app_id: str):
    def del_api_token(session, api_token_id: str):
+        # Fetch token details for cache invalidation
+        token_obj = session.query(ApiToken).where(ApiToken.id == api_token_id).first()
+        if token_obj:
+            # Invalidate cache before deletion
+            ApiTokenCache.delete(token_obj.token, token_obj.type)
+
        session.query(ApiToken).where(ApiToken.id == api_token_id).delete(synchronize_session=False)

    _delete_records(
--- a/api/tests/integration_tests/libs/test_api_token_cache_integration.py
+++ b/api/tests/integration_tests/libs/test_api_token_cache_integration.py
@@ -0,0 +1,375 @@
+"""
+Integration tests for API Token Cache with Redis.
+
+These tests require:
+- Redis server running
+- Test database configured
+"""
+
+import time
+from datetime import datetime, timedelta
+from unittest.mock import patch
+
+import pytest
+
+from extensions.ext_redis import redis_client
+from models.model import ApiToken
+from services.api_token_service import ApiTokenCache, CachedApiToken
+
+
+class TestApiTokenCacheRedisIntegration:
+    """Integration tests with real Redis."""
+
+    def setup_method(self):
+        """Setup test fixtures and clean Redis."""
+        self.test_token = "test-integration-token-123"
+        self.test_scope = "app"
+        self.cache_key = f"api_token:{self.test_scope}:{self.test_token}"
+
+        # Clean up any existing test data
+        self._cleanup()
+
+    def teardown_method(self):
+        """Cleanup test data from Redis."""
+        self._cleanup()
+
+    def _cleanup(self):
+        """Remove test data from Redis."""
+        try:
+            redis_client.delete(self.cache_key)
+            redis_client.delete(ApiTokenCache._make_tenant_index_key("test-tenant-id"))
+            redis_client.delete(ApiTokenCache.make_active_key(self.test_token, self.test_scope))
+        except Exception:
+            pass  # Ignore cleanup errors
+
+    def test_cache_set_and_get_with_real_redis(self):
+        """Test cache set and get operations with real Redis."""
+        from unittest.mock import MagicMock
+
+        mock_token = MagicMock()
+        mock_token.id = "test-id-123"
+        mock_token.app_id = "test-app-456"
+        mock_token.tenant_id = "test-tenant-789"
+        mock_token.type = "app"
+        mock_token.token = self.test_token
+        mock_token.last_used_at = datetime.now()
+        mock_token.created_at = datetime.now() - timedelta(days=30)
+
+        # Set in cache
+        result = ApiTokenCache.set(self.test_token, self.test_scope, mock_token)
+        assert result is True
+
+        # Verify in Redis
+        cached_data = redis_client.get(self.cache_key)
+        assert cached_data is not None
+
+        # Get from cache
+        cached_token = ApiTokenCache.get(self.test_token, self.test_scope)
+        assert cached_token is not None
+        assert isinstance(cached_token, CachedApiToken)
+        assert cached_token.id == "test-id-123"
+        assert cached_token.app_id == "test-app-456"
+        assert cached_token.tenant_id == "test-tenant-789"
+        assert cached_token.type == "app"
+        assert cached_token.token == self.test_token
+
+    def test_cache_ttl_with_real_redis(self):
+        """Test cache TTL is set correctly."""
+        from unittest.mock import MagicMock
+
+        mock_token = MagicMock()
+        mock_token.id = "test-id"
+        mock_token.app_id = "test-app"
+        mock_token.tenant_id = "test-tenant"
+        mock_token.type = "app"
+        mock_token.token = self.test_token
+        mock_token.last_used_at = None
+        mock_token.created_at = datetime.now()
+
+        ApiTokenCache.set(self.test_token, self.test_scope, mock_token)
+
+        ttl = redis_client.ttl(self.cache_key)
+        assert 595 <= ttl <= 600  # Should be around 600 seconds (10 minutes)
+
+    def test_cache_null_value_for_invalid_token(self):
+        """Test caching null value for invalid tokens."""
+        result = ApiTokenCache.set(self.test_token, self.test_scope, None)
+        assert result is True
+
+        cached_data = redis_client.get(self.cache_key)
+        assert cached_data == b"null"
+
+        cached_token = ApiTokenCache.get(self.test_token, self.test_scope)
+        assert cached_token is None
+
+        ttl = redis_client.ttl(self.cache_key)
+        assert 55 <= ttl <= 60
+
+    def test_cache_delete_with_real_redis(self):
+        """Test cache deletion with real Redis."""
+        from unittest.mock import MagicMock
+
+        mock_token = MagicMock()
+        mock_token.id = "test-id"
+        mock_token.app_id = "test-app"
+        mock_token.tenant_id = "test-tenant"
+        mock_token.type = "app"
+        mock_token.token = self.test_token
+        mock_token.last_used_at = None
+        mock_token.created_at = datetime.now()
+
+        ApiTokenCache.set(self.test_token, self.test_scope, mock_token)
+        assert redis_client.exists(self.cache_key) == 1
+
+        result = ApiTokenCache.delete(self.test_token, self.test_scope)
+        assert result is True
+        assert redis_client.exists(self.cache_key) == 0
+
+    def test_tenant_index_creation(self):
+        """Test tenant index is created when caching token."""
+        from unittest.mock import MagicMock
+
+        tenant_id = "test-tenant-id"
+        mock_token = MagicMock()
+        mock_token.id = "test-id"
+        mock_token.app_id = "test-app"
+        mock_token.tenant_id = tenant_id
+        mock_token.type = "app"
+        mock_token.token = self.test_token
+        mock_token.last_used_at = None
+        mock_token.created_at = datetime.now()
+
+        ApiTokenCache.set(self.test_token, self.test_scope, mock_token)
+
+        index_key = ApiTokenCache._make_tenant_index_key(tenant_id)
+        assert redis_client.exists(index_key) == 1
+
+        members = redis_client.smembers(index_key)
+        cache_keys = [m.decode("utf-8") if isinstance(m, bytes) else m for m in members]
+        assert self.cache_key in cache_keys
+
+    def test_invalidate_by_tenant_via_index(self):
+        """Test tenant-wide cache invalidation using index (fast path)."""
+        from unittest.mock import MagicMock
+
+        tenant_id = "test-tenant-id"
+
+        for i in range(3):
+            token_value = f"test-token-{i}"
+            mock_token = MagicMock()
+            mock_token.id = f"test-id-{i}"
+            mock_token.app_id = "test-app"
+            mock_token.tenant_id = tenant_id
+            mock_token.type = "app"
+            mock_token.token = token_value
+            mock_token.last_used_at = None
+            mock_token.created_at = datetime.now()
+
+            ApiTokenCache.set(token_value, "app", mock_token)
+
+        for i in range(3):
+            key = f"api_token:app:test-token-{i}"
+            assert redis_client.exists(key) == 1
+
+        result = ApiTokenCache.invalidate_by_tenant(tenant_id)
+        assert result is True
+
+        for i in range(3):
+            key = f"api_token:app:test-token-{i}"
+            assert redis_client.exists(key) == 0
+
+        assert redis_client.exists(ApiTokenCache._make_tenant_index_key(tenant_id)) == 0
+
+    def test_concurrent_cache_access(self):
+        """Test concurrent cache access doesn't cause issues."""
+        import concurrent.futures
+        from unittest.mock import MagicMock
+
+        mock_token = MagicMock()
+        mock_token.id = "test-id"
+        mock_token.app_id = "test-app"
+        mock_token.tenant_id = "test-tenant"
+        mock_token.type = "app"
+        mock_token.token = self.test_token
+        mock_token.last_used_at = None
+        mock_token.created_at = datetime.now()
+
+        ApiTokenCache.set(self.test_token, self.test_scope, mock_token)
+
+        def get_from_cache():
+            return ApiTokenCache.get(self.test_token, self.test_scope)
+
+        with concurrent.futures.ThreadPoolExecutor(max_workers=10) as executor:
+            futures = [executor.submit(get_from_cache) for _ in range(50)]
+            results = [f.result() for f in concurrent.futures.as_completed(futures)]
+
+        assert len(results) == 50
+        assert all(r is not None for r in results)
+        assert all(isinstance(r, CachedApiToken) for r in results)
+
+
+class TestTokenUsageRecording:
+    """Tests for recording token usage in Redis (batch update approach)."""
+
+    def setup_method(self):
+        self.test_token = "test-usage-token"
+        self.test_scope = "app"
+        self.active_key = ApiTokenCache.make_active_key(self.test_token, self.test_scope)
+
+    def teardown_method(self):
+        try:
+            redis_client.delete(self.active_key)
+        except Exception:
+            pass
+
+    def test_record_token_usage_sets_redis_key(self):
+        """Test that record_token_usage writes an active key to Redis."""
+        from services.api_token_service import record_token_usage
+
+        record_token_usage(self.test_token, self.test_scope)
+
+        # Key should exist
+        assert redis_client.exists(self.active_key) == 1
+
+        # Value should be an ISO timestamp
+        value = redis_client.get(self.active_key)
+        if isinstance(value, bytes):
+            value = value.decode("utf-8")
+        datetime.fromisoformat(value)  # Should not raise
+
+    def test_record_token_usage_has_ttl(self):
+        """Test that active keys have a TTL as safety net."""
+        from services.api_token_service import record_token_usage
+
+        record_token_usage(self.test_token, self.test_scope)
+
+        ttl = redis_client.ttl(self.active_key)
+        assert 3595 <= ttl <= 3600  # ~1 hour
+
+    def test_record_token_usage_overwrites(self):
+        """Test that repeated calls overwrite the same key (no accumulation)."""
+        from services.api_token_service import record_token_usage
+
+        record_token_usage(self.test_token, self.test_scope)
+        first_value = redis_client.get(self.active_key)
+
+        time.sleep(0.01)  # Tiny delay so timestamp differs
+
+        record_token_usage(self.test_token, self.test_scope)
+        second_value = redis_client.get(self.active_key)
+
+        # Key count should still be 1 (overwritten, not accumulated)
+        assert redis_client.exists(self.active_key) == 1
+
+
+class TestEndToEndCacheFlow:
+    """End-to-end integration test for complete cache flow."""
+
+    @pytest.mark.usefixtures("db_session")
+    def test_complete_flow_cache_miss_then_hit(self, db_session):
+        """
+        Test complete flow:
+        1. First request (cache miss) -> query DB -> cache result
+        2. Second request (cache hit) -> return from cache
+        3. Verify Redis state
+        """
+        test_token_value = "test-e2e-token"
+        test_scope = "app"
+
+        test_token = ApiToken()
+        test_token.id = "test-e2e-id"
+        test_token.token = test_token_value
+        test_token.type = test_scope
+        test_token.app_id = "test-app"
+        test_token.tenant_id = "test-tenant"
+        test_token.last_used_at = None
+        test_token.created_at = datetime.now()
+
+        db_session.add(test_token)
+        db_session.commit()
+
+        try:
+            # Step 1: Cache miss - set token in cache
+            ApiTokenCache.set(test_token_value, test_scope, test_token)
+
+            cache_key = f"api_token:{test_scope}:{test_token_value}"
+            assert redis_client.exists(cache_key) == 1
+
+            # Step 2: Cache hit - get from cache
+            cached_token = ApiTokenCache.get(test_token_value, test_scope)
+            assert cached_token is not None
+            assert cached_token.id == test_token.id
+            assert cached_token.token == test_token_value
+
+            # Step 3: Verify tenant index
+            index_key = ApiTokenCache._make_tenant_index_key(test_token.tenant_id)
+            assert redis_client.exists(index_key) == 1
+            assert cache_key.encode() in redis_client.smembers(index_key)
+
+            # Step 4: Delete and verify cleanup
+            ApiTokenCache.delete(test_token_value, test_scope)
+            assert redis_client.exists(cache_key) == 0
+            assert cache_key.encode() not in redis_client.smembers(index_key)
+
+        finally:
+            db_session.delete(test_token)
+            db_session.commit()
+            redis_client.delete(f"api_token:{test_scope}:{test_token_value}")
+            redis_client.delete(ApiTokenCache._make_tenant_index_key(test_token.tenant_id))
+
+    def test_high_concurrency_simulation(self):
+        """Simulate high concurrency access to cache."""
+        import concurrent.futures
+        from unittest.mock import MagicMock
+
+        test_token_value = "test-concurrent-token"
+        test_scope = "app"
+
+        mock_token = MagicMock()
+        mock_token.id = "concurrent-id"
+        mock_token.app_id = "test-app"
+        mock_token.tenant_id = "test-tenant"
+        mock_token.type = test_scope
+        mock_token.token = test_token_value
+        mock_token.last_used_at = datetime.now()
+        mock_token.created_at = datetime.now()
+
+        ApiTokenCache.set(test_token_value, test_scope, mock_token)
+
+        try:
+
+            def read_cache():
+                return ApiTokenCache.get(test_token_value, test_scope)
+
+            start_time = time.time()
+            with concurrent.futures.ThreadPoolExecutor(max_workers=20) as executor:
+                futures = [executor.submit(read_cache) for _ in range(100)]
+                results = [f.result() for f in concurrent.futures.as_completed(futures)]
+            elapsed = time.time() - start_time
+
+            assert len(results) == 100
+            assert all(r is not None for r in results)
+
+            assert elapsed < 1.0, f"Too slow: {elapsed}s for 100 cache reads"
+
+        finally:
+            ApiTokenCache.delete(test_token_value, test_scope)
+            redis_client.delete(ApiTokenCache._make_tenant_index_key(mock_token.tenant_id))
+
+
+class TestRedisFailover:
+    """Test behavior when Redis is unavailable."""
+
+    @patch("services.api_token_service.redis_client")
+    def test_graceful_degradation_when_redis_fails(self, mock_redis):
+        """Test system degrades gracefully when Redis is unavailable."""
+        from redis import RedisError
+
+        mock_redis.get.side_effect = RedisError("Connection failed")
+        mock_redis.setex.side_effect = RedisError("Connection failed")
+
+        result_get = ApiTokenCache.get("test-token", "app")
+        assert result_get is None
+
+        result_set = ApiTokenCache.set("test-token", "app", None)
+        assert result_set is False
--- a/api/tests/unit_tests/core/workflow/nodes/agent/test_agent_node.py
+++ b/api/tests/unit_tests/core/workflow/nodes/agent/test_agent_node.py
@@ -1,197 +0,0 @@
-from unittest.mock import MagicMock, patch
-
-import pytest
-
-from core.tools.entities.tool_entities import ToolProviderType
-from core.workflow.nodes.agent.agent_node import AgentNode
-
-
-class TestInferToolProviderType:
-    """Test cases for AgentNode._infer_tool_provider_type method."""
-
-    def test_infer_type_from_config_workflow(self):
-        """Test inferring workflow provider type from config."""
-        tool_config = {
-            "type": "workflow",
-            "provider_name": "workflow-provider-id",
-        }
-        tenant_id = "test-tenant"
-
-        result = AgentNode._infer_tool_provider_type(tool_config, tenant_id)
-
-        assert result == ToolProviderType.WORKFLOW
-
-    def test_infer_type_from_config_builtin(self):
-        """Test inferring builtin provider type from config."""
-        tool_config = {
-            "type": "builtin",
-            "provider_name": "builtin-provider-id",
-        }
-        tenant_id = "test-tenant"
-
-        result = AgentNode._infer_tool_provider_type(tool_config, tenant_id)
-
-        assert result == ToolProviderType.BUILT_IN
-
-    def test_infer_type_from_config_api(self):
-        """Test inferring API provider type from config."""
-        tool_config = {
-            "type": "api",
-            "provider_name": "api-provider-id",
-        }
-        tenant_id = "test-tenant"
-
-        result = AgentNode._infer_tool_provider_type(tool_config, tenant_id)
-
-        assert result == ToolProviderType.API
-
-    def test_infer_type_from_config_mcp(self):
-        """Test inferring MCP provider type from config."""
-        tool_config = {
-            "type": "mcp",
-            "provider_name": "mcp-provider-id",
-        }
-        tenant_id = "test-tenant"
-
-        result = AgentNode._infer_tool_provider_type(tool_config, tenant_id)
-
-        assert result == ToolProviderType.MCP
-
-    def test_infer_type_invalid_config_value_raises_error(self):
-        """Test that invalid type value in config raises ValueError."""
-        tool_config = {
-            "type": "invalid-type",
-            "provider_name": "workflow-provider-id",
-        }
-        tenant_id = "test-tenant"
-
-        with pytest.raises(ValueError):
-            AgentNode._infer_tool_provider_type(tool_config, tenant_id)
-
-    def test_infer_workflow_type_from_database(self):
-        """Test inferring workflow provider type from database."""
-        tool_config = {
-            "provider_name": "workflow-provider-id",
-        }
-        tenant_id = "test-tenant"
-
-        with patch("core.db.session_factory.session_factory.create_session") as mock_create_session:
-            mock_session = MagicMock()
-            mock_create_session.return_value.__enter__.return_value = mock_session
-
-            # First query (WorkflowToolProvider) returns a result
-            mock_session.scalar.return_value = True
-
-            result = AgentNode._infer_tool_provider_type(tool_config, tenant_id)
-
-            assert result == ToolProviderType.WORKFLOW
-            # Should only query once (after finding WorkflowToolProvider)
-            assert mock_session.scalar.call_count == 1
-
-    def test_infer_mcp_type_from_database(self):
-        """Test inferring MCP provider type from database."""
-        tool_config = {
-            "provider_name": "mcp-provider-id",
-        }
-        tenant_id = "test-tenant"
-
-        with patch("core.db.session_factory.session_factory.create_session") as mock_create_session:
-            mock_session = MagicMock()
-            mock_create_session.return_value.__enter__.return_value = mock_session
-
-            # First query (WorkflowToolProvider) returns None
-            # Second query (MCPToolProvider) returns a result
-            mock_session.scalar.side_effect = [None, True]
-
-            result = AgentNode._infer_tool_provider_type(tool_config, tenant_id)
-
-            assert result == ToolProviderType.MCP
-            assert mock_session.scalar.call_count == 2
-
-    def test_infer_api_type_from_database(self):
-        """Test inferring API provider type from database."""
-        tool_config = {
-            "provider_name": "api-provider-id",
-        }
-        tenant_id = "test-tenant"
-
-        with patch("core.db.session_factory.session_factory.create_session") as mock_create_session:
-            mock_session = MagicMock()
-            mock_create_session.return_value.__enter__.return_value = mock_session
-
-            # First query (WorkflowToolProvider) returns None
-            # Second query (MCPToolProvider) returns None
-            # Third query (ApiToolProvider) returns a result
-            mock_session.scalar.side_effect = [None, None, True]
-
-            result = AgentNode._infer_tool_provider_type(tool_config, tenant_id)
-
-            assert result == ToolProviderType.API
-            assert mock_session.scalar.call_count == 3
-
-    def test_infer_builtin_type_from_database(self):
-        """Test inferring builtin provider type from database."""
-        tool_config = {
-            "provider_name": "builtin-provider-id",
-        }
-        tenant_id = "test-tenant"
-
-        with patch("core.db.session_factory.session_factory.create_session") as mock_create_session:
-            mock_session = MagicMock()
-            mock_create_session.return_value.__enter__.return_value = mock_session
-
-            # First three queries return None
-            # Fourth query (BuiltinToolProvider) returns a result
-            mock_session.scalar.side_effect = [None, None, None, True]
-
-            result = AgentNode._infer_tool_provider_type(tool_config, tenant_id)
-
-            assert result == ToolProviderType.BUILT_IN
-            assert mock_session.scalar.call_count == 4
-
-    def test_infer_type_default_when_not_found(self):
-        """Test raising AgentNodeError when provider is not found in database."""
-        tool_config = {
-            "provider_name": "unknown-provider-id",
-        }
-        tenant_id = "test-tenant"
-
-        with patch("core.db.session_factory.session_factory.create_session") as mock_create_session:
-            mock_session = MagicMock()
-            mock_create_session.return_value.__enter__.return_value = mock_session
-
-            # All queries return None
-            mock_session.scalar.return_value = None
-
-            # Current implementation raises AgentNodeError when provider not found
-            from core.workflow.nodes.agent.exc import AgentNodeError
-
-            with pytest.raises(AgentNodeError, match="Tool provider with ID 'unknown-provider-id' not found"):
-                AgentNode._infer_tool_provider_type(tool_config, tenant_id)
-
-    def test_infer_type_default_when_no_provider_name(self):
-        """Test defaulting to BUILT_IN when provider_name is missing."""
-        tool_config = {}
-        tenant_id = "test-tenant"
-
-        result = AgentNode._infer_tool_provider_type(tool_config, tenant_id)
-
-        assert result == ToolProviderType.BUILT_IN
-
-    def test_infer_type_database_exception_propagates(self):
-        """Test that database exception propagates (current implementation doesn't catch it)."""
-        tool_config = {
-            "provider_name": "provider-id",
-        }
-        tenant_id = "test-tenant"
-
-        with patch("core.db.session_factory.session_factory.create_session") as mock_create_session:
-            mock_session = MagicMock()
-            mock_create_session.return_value.__enter__.return_value = mock_session
-
-            # Database query raises exception
-            mock_session.scalar.side_effect = Exception("Database error")
-
-            # Current implementation doesn't catch exceptions, so it propagates
-            with pytest.raises(Exception, match="Database error"):
-                AgentNode._infer_tool_provider_type(tool_config, tenant_id)
--- a/api/tests/unit_tests/extensions/test_celery_ssl.py
+++ b/api/tests/unit_tests/extensions/test_celery_ssl.py
@@ -132,6 +132,8 @@ class TestCelerySSLConfiguration:
        mock_config.WORKFLOW_SCHEDULE_MAX_DISPATCH_PER_TICK = 0
        mock_config.ENABLE_TRIGGER_PROVIDER_REFRESH_TASK = False
        mock_config.TRIGGER_PROVIDER_REFRESH_INTERVAL = 15
+        mock_config.ENABLE_API_TOKEN_LAST_USED_UPDATE_TASK = False
+        mock_config.API_TOKEN_LAST_USED_UPDATE_INTERVAL = 30

        with patch("extensions.ext_celery.dify_config", mock_config):
            from dify_app import DifyApp
--- a/api/tests/unit_tests/libs/test_api_token_cache.py
+++ b/api/tests/unit_tests/libs/test_api_token_cache.py
@@ -0,0 +1,250 @@
+"""
+Unit tests for API Token Cache module.
+"""
+
+import json
+from datetime import datetime
+from unittest.mock import MagicMock, patch
+
+from services.api_token_service import (
+    CACHE_KEY_PREFIX,
+    CACHE_NULL_TTL_SECONDS,
+    CACHE_TTL_SECONDS,
+    ApiTokenCache,
+    CachedApiToken,
+)
+
+
+class TestApiTokenCache:
+    """Test cases for ApiTokenCache class."""
+
+    def setup_method(self):
+        """Setup test fixtures."""
+        self.mock_token = MagicMock()
+        self.mock_token.id = "test-token-id-123"
+        self.mock_token.app_id = "test-app-id-456"
+        self.mock_token.tenant_id = "test-tenant-id-789"
+        self.mock_token.type = "app"
+        self.mock_token.token = "test-token-value-abc"
+        self.mock_token.last_used_at = datetime(2026, 2, 3, 10, 0, 0)
+        self.mock_token.created_at = datetime(2026, 1, 1, 0, 0, 0)
+
+    def test_make_cache_key(self):
+        """Test cache key generation."""
+        # Test with scope
+        key = ApiTokenCache._make_cache_key("my-token", "app")
+        assert key == f"{CACHE_KEY_PREFIX}:app:my-token"
+
+        # Test without scope
+        key = ApiTokenCache._make_cache_key("my-token", None)
+        assert key == f"{CACHE_KEY_PREFIX}:any:my-token"
+
+    def test_serialize_token(self):
+        """Test token serialization."""
+        serialized = ApiTokenCache._serialize_token(self.mock_token)
+        data = json.loads(serialized)
+
+        assert data["id"] == "test-token-id-123"
+        assert data["app_id"] == "test-app-id-456"
+        assert data["tenant_id"] == "test-tenant-id-789"
+        assert data["type"] == "app"
+        assert data["token"] == "test-token-value-abc"
+        assert data["last_used_at"] == "2026-02-03T10:00:00"
+        assert data["created_at"] == "2026-01-01T00:00:00"
+
+    def test_serialize_token_with_nulls(self):
+        """Test token serialization with None values."""
+        mock_token = MagicMock()
+        mock_token.id = "test-id"
+        mock_token.app_id = None
+        mock_token.tenant_id = None
+        mock_token.type = "dataset"
+        mock_token.token = "test-token"
+        mock_token.last_used_at = None
+        mock_token.created_at = datetime(2026, 1, 1, 0, 0, 0)
+
+        serialized = ApiTokenCache._serialize_token(mock_token)
+        data = json.loads(serialized)
+
+        assert data["app_id"] is None
+        assert data["tenant_id"] is None
+        assert data["last_used_at"] is None
+
+    def test_deserialize_token(self):
+        """Test token deserialization."""
+        cached_data = json.dumps(
+            {
+                "id": "test-id",
+                "app_id": "test-app",
+                "tenant_id": "test-tenant",
+                "type": "app",
+                "token": "test-token",
+                "last_used_at": "2026-02-03T10:00:00",
+                "created_at": "2026-01-01T00:00:00",
+            }
+        )
+
+        result = ApiTokenCache._deserialize_token(cached_data)
+
+        assert isinstance(result, CachedApiToken)
+        assert result.id == "test-id"
+        assert result.app_id == "test-app"
+        assert result.tenant_id == "test-tenant"
+        assert result.type == "app"
+        assert result.token == "test-token"
+        assert result.last_used_at == datetime(2026, 2, 3, 10, 0, 0)
+        assert result.created_at == datetime(2026, 1, 1, 0, 0, 0)
+
+    def test_deserialize_null_token(self):
+        """Test deserialization of null token (cached miss)."""
+        result = ApiTokenCache._deserialize_token("null")
+        assert result is None
+
+    def test_deserialize_invalid_json(self):
+        """Test deserialization with invalid JSON."""
+        result = ApiTokenCache._deserialize_token("invalid-json{")
+        assert result is None
+
+    @patch("services.api_token_service.redis_client")
+    def test_get_cache_hit(self, mock_redis):
+        """Test cache hit scenario."""
+        cached_data = json.dumps(
+            {
+                "id": "test-id",
+                "app_id": "test-app",
+                "tenant_id": "test-tenant",
+                "type": "app",
+                "token": "test-token",
+                "last_used_at": "2026-02-03T10:00:00",
+                "created_at": "2026-01-01T00:00:00",
+            }
+        ).encode("utf-8")
+        mock_redis.get.return_value = cached_data
+
+        result = ApiTokenCache.get("test-token", "app")
+
+        assert result is not None
+        assert isinstance(result, CachedApiToken)
+        assert result.app_id == "test-app"
+        mock_redis.get.assert_called_once_with(f"{CACHE_KEY_PREFIX}:app:test-token")
+
+    @patch("services.api_token_service.redis_client")
+    def test_get_cache_miss(self, mock_redis):
+        """Test cache miss scenario."""
+        mock_redis.get.return_value = None
+
+        result = ApiTokenCache.get("test-token", "app")
+
+        assert result is None
+        mock_redis.get.assert_called_once()
+
+    @patch("services.api_token_service.redis_client")
+    def test_set_valid_token(self, mock_redis):
+        """Test setting a valid token in cache."""
+        result = ApiTokenCache.set("test-token", "app", self.mock_token)
+
+        assert result is True
+        mock_redis.setex.assert_called_once()
+        args = mock_redis.setex.call_args[0]
+        assert args[0] == f"{CACHE_KEY_PREFIX}:app:test-token"
+        assert args[1] == CACHE_TTL_SECONDS
+
+    @patch("services.api_token_service.redis_client")
+    def test_set_null_token(self, mock_redis):
+        """Test setting a null token (cache penetration prevention)."""
+        result = ApiTokenCache.set("invalid-token", "app", None)
+
+        assert result is True
+        mock_redis.setex.assert_called_once()
+        args = mock_redis.setex.call_args[0]
+        assert args[0] == f"{CACHE_KEY_PREFIX}:app:invalid-token"
+        assert args[1] == CACHE_NULL_TTL_SECONDS
+        assert args[2] == b"null"
+
+    @patch("services.api_token_service.redis_client")
+    def test_delete_with_scope(self, mock_redis):
+        """Test deleting token cache with specific scope."""
+        result = ApiTokenCache.delete("test-token", "app")
+
+        assert result is True
+        mock_redis.delete.assert_called_once_with(f"{CACHE_KEY_PREFIX}:app:test-token")
+
+    @patch("services.api_token_service.redis_client")
+    def test_delete_without_scope(self, mock_redis):
+        """Test deleting token cache without scope (delete all)."""
+        # Mock scan_iter to return an iterator of keys
+        mock_redis.scan_iter.return_value = iter(
+            [
+                b"api_token:app:test-token",
+                b"api_token:dataset:test-token",
+            ]
+        )
+
+        result = ApiTokenCache.delete("test-token", None)
+
+        assert result is True
+        # Verify scan_iter was called with the correct pattern
+        mock_redis.scan_iter.assert_called_once()
+        call_args = mock_redis.scan_iter.call_args
+        assert call_args[1]["match"] == f"{CACHE_KEY_PREFIX}:*:test-token"
+
+        # Verify delete was called with all matched keys
+        mock_redis.delete.assert_called_once_with(
+            b"api_token:app:test-token",
+            b"api_token:dataset:test-token",
+        )
+
+    @patch("services.api_token_service.redis_client")
+    def test_redis_fallback_on_exception(self, mock_redis):
+        """Test Redis fallback when Redis is unavailable."""
+        from redis import RedisError
+
+        mock_redis.get.side_effect = RedisError("Connection failed")
+
+        result = ApiTokenCache.get("test-token", "app")
+
+        # Should return None (fallback) instead of raising exception
+        assert result is None
+
+
+class TestApiTokenCacheIntegration:
+    """Integration test scenarios."""
+
+    @patch("services.api_token_service.redis_client")
+    def test_full_cache_lifecycle(self, mock_redis):
+        """Test complete cache lifecycle: set -> get -> delete."""
+        # Setup mock token
+        mock_token = MagicMock()
+        mock_token.id = "id-123"
+        mock_token.app_id = "app-456"
+        mock_token.tenant_id = "tenant-789"
+        mock_token.type = "app"
+        mock_token.token = "token-abc"
+        mock_token.last_used_at = datetime(2026, 2, 3, 10, 0, 0)
+        mock_token.created_at = datetime(2026, 1, 1, 0, 0, 0)
+
+        # 1. Set token in cache
+        ApiTokenCache.set("token-abc", "app", mock_token)
+        assert mock_redis.setex.called
+
+        # 2. Simulate cache hit
+        cached_data = ApiTokenCache._serialize_token(mock_token)
+        mock_redis.get.return_value = cached_data  # bytes from model_dump_json().encode()
+
+        retrieved = ApiTokenCache.get("token-abc", "app")
+        assert retrieved is not None
+        assert isinstance(retrieved, CachedApiToken)
+
+        # 3. Delete from cache
+        ApiTokenCache.delete("token-abc", "app")
+        assert mock_redis.delete.called
+
+    @patch("services.api_token_service.redis_client")
+    def test_cache_penetration_prevention(self, mock_redis):
+        """Test that non-existent tokens are cached as null."""
+        # Set null token (cache miss)
+        ApiTokenCache.set("non-existent-token", "app", None)
+
+        args = mock_redis.setex.call_args[0]
+        assert args[2] == b"null"
+        assert args[1] == CACHE_NULL_TTL_SECONDS  # Shorter TTL for null values
--- a/api/tests/unit_tests/tasks/test_document_indexing_sync_task.py
+++ b/api/tests/unit_tests/tasks/test_document_indexing_sync_task.py
@@ -114,6 +114,21 @@ def mock_db_session():
        session = MagicMock()
        # Ensure tests can observe session.close() via context manager teardown
        session.close = MagicMock()
+        session.commit = MagicMock()
+
+        # Mock session.begin() context manager to auto-commit on exit
+        begin_cm = MagicMock()
+        begin_cm.__enter__.return_value = session
+
+        def _begin_exit_side_effect(*args, **kwargs):
+            # session.begin().__exit__() should commit if no exception
+            if args[0] is None:  # No exception
+                session.commit()
+
+        begin_cm.__exit__.side_effect = _begin_exit_side_effect
+        session.begin.return_value = begin_cm
+
+        # Mock create_session() context manager
        cm = MagicMock()
        cm.__enter__.return_value = session

--- a/web/mocks/provider-context.ts
+++ b/web/mocks/provider-context.ts
@@ -35,6 +35,7 @@ export const baseProviderContextValue: ProviderContextState = {
  refreshLicenseLimit: noop,
  isAllowTransferWorkspace: false,
  isAllowPublishAsCustomKnowledgePipelineTemplate: false,
+  humanInputEmailDeliveryEnabled: false,
 }

 export const createMockProviderContextValue = (overrides: Partial<ProviderContextState> = {}): ProviderContextState => {
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tests/svg-attribute-error-reproduction.spec.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tests/svg-attribute-error-reproduction.spec.tsx
@@ -8,7 +8,6 @@ describe('SVG Attribute Error Reproduction', () => {
  // Capture console errors
  const originalError = console.error
  let errorMessages: string[] = []
-
  beforeEach(() => {
    errorMessages = []
    console.error = vi.fn((message) => {
--- a/web/app/(humanInputLayout)/form/[token]/form.tsx
+++ b/web/app/(humanInputLayout)/form/[token]/form.tsx
@@ -0,0 +1,289 @@
+'use client'
+import type { ButtonProps } from '@/app/components/base/button'
+import type { FormInputItem, UserAction } from '@/app/components/workflow/nodes/human-input/types'
+import type { SiteInfo } from '@/models/share'
+import type { HumanInputFormError } from '@/service/use-share'
+import {
+  RiCheckboxCircleFill,
+  RiErrorWarningFill,
+  RiInformation2Fill,
+} from '@remixicon/react'
+import { produce } from 'immer'
+import { useParams } from 'next/navigation'
+import * as React from 'react'
+import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import AppIcon from '@/app/components/base/app-icon'
+import Button from '@/app/components/base/button'
+import ContentItem from '@/app/components/base/chat/chat/answer/human-input-content/content-item'
+import ExpirationTime from '@/app/components/base/chat/chat/answer/human-input-content/expiration-time'
+import { getButtonStyle } from '@/app/components/base/chat/chat/answer/human-input-content/utils'
+import Loading from '@/app/components/base/loading'
+import DifyLogo from '@/app/components/base/logo/dify-logo'
+import useDocumentTitle from '@/hooks/use-document-title'
+import { useGetHumanInputForm, useSubmitHumanInputForm } from '@/service/use-share'
+import { cn } from '@/utils/classnames'
+
+export type FormData = {
+  site: { site: SiteInfo }
+  form_content: string
+  inputs: FormInputItem[]
+  resolved_default_values: Record<string, string>
+  user_actions: UserAction[]
+  expiration_time: number
+}
+
+const FormContent = () => {
+  const { t } = useTranslation()
+
+  const { token } = useParams<{ token: string }>()
+  useDocumentTitle('')
+
+  const [inputs, setInputs] = useState<Record<string, string>>({})
+  const [success, setSuccess] = useState(false)
+
+  const { mutate: submitForm, isPending: isSubmitting } = useSubmitHumanInputForm()
+
+  const { data: formData, isLoading, error } = useGetHumanInputForm(token)
+
+  const expired = (error as HumanInputFormError | null)?.code === 'human_input_form_expired'
+  const submitted = (error as HumanInputFormError | null)?.code === 'human_input_form_submitted'
+  const rateLimitExceeded = (error as HumanInputFormError | null)?.code === 'web_form_rate_limit_exceeded'
+
+  const splitByOutputVar = (content: string): string[] => {
+    const outputVarRegex = /(\{\{#\$output\.[^#]+#\}\})/g
+    const parts = content.split(outputVarRegex)
+    return parts.filter(part => part.length > 0)
+  }
+
+  const contentList = useMemo(() => {
+    if (!formData?.form_content)
+      return []
+    return splitByOutputVar(formData.form_content)
+  }, [formData?.form_content])
+
+  useEffect(() => {
+    if (!formData?.inputs)
+      return
+    const initialInputs: Record<string, string> = {}
+    formData.inputs.forEach((item) => {
+      initialInputs[item.output_variable_name] = item.default.type === 'variable' ? formData.resolved_default_values[item.output_variable_name] || '' : item.default.value
+    })
+    setInputs(initialInputs)
+  }, [formData?.inputs, formData?.resolved_default_values])
+
+  // use immer
+  const handleInputsChange = (name: string, value: string) => {
+    const newInputs = produce(inputs, (draft) => {
+      draft[name] = value
+    })
+    setInputs(newInputs)
+  }
+
+  const submit = (actionID: string) => {
+    submitForm(
+      { token, data: { inputs, action: actionID } },
+      {
+        onSuccess: () => {
+          setSuccess(true)
+        },
+      },
+    )
+  }
+
+  if (isLoading) {
+    return (
+      <Loading type="app" />
+    )
+  }
+
+  if (success) {
+    return (
+      <div className={cn('flex h-full w-full flex-col items-center justify-center')}>
+        <div className="min-w-[480px] max-w-[640px]">
+          <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 rounded-[20px] border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-sm">
+            <div className="h-[56px] w-[56px] shrink-0 rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
+              <RiCheckboxCircleFill className="h-8 w-8 text-text-success" />
+            </div>
+            <div className="grow">
+              <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.thanks', { ns: 'share' })}</div>
+              <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.recorded', { ns: 'share' })}</div>
+            </div>
+            <div className="system-2xs-regular-uppercase shrink-0 text-text-tertiary">{t('humanInput.submissionID', { id: token, ns: 'share' })}</div>
+          </div>
+          <div className="flex flex-row-reverse px-2 py-3">
+            <div className={cn(
+              'flex shrink-0 items-center gap-1.5 px-1',
+            )}
+            >
+              <div className="system-2xs-medium-uppercase text-text-tertiary">{t('chat.poweredBy', { ns: 'share' })}</div>
+              <DifyLogo size="small" />
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (expired) {
+    return (
+      <div className={cn('flex h-full w-full flex-col items-center justify-center')}>
+        <div className="min-w-[480px] max-w-[640px]">
+          <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 rounded-[20px] border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-sm">
+            <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
+              <RiInformation2Fill className="h-8 w-8 text-text-accent" />
+            </div>
+            <div className="grow">
+              <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.sorry', { ns: 'share' })}</div>
+              <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.expired', { ns: 'share' })}</div>
+            </div>
+            <div className="system-2xs-regular-uppercase shrink-0 text-text-tertiary">{t('humanInput.submissionID', { id: token, ns: 'share' })}</div>
+          </div>
+          <div className="flex flex-row-reverse px-2 py-3">
+            <div className={cn(
+              'flex shrink-0 items-center gap-1.5 px-1',
+            )}
+            >
+              <div className="system-2xs-medium-uppercase text-text-tertiary">{t('chat.poweredBy', { ns: 'share' })}</div>
+              <DifyLogo size="small" />
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (submitted) {
+    return (
+      <div className={cn('flex h-full w-full flex-col items-center justify-center')}>
+        <div className="min-w-[480px] max-w-[640px]">
+          <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 rounded-[20px] border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-sm">
+            <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
+              <RiInformation2Fill className="h-8 w-8 text-text-accent" />
+            </div>
+            <div className="grow">
+              <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.sorry', { ns: 'share' })}</div>
+              <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.completed', { ns: 'share' })}</div>
+            </div>
+            <div className="system-2xs-regular-uppercase shrink-0 text-text-tertiary">{t('humanInput.submissionID', { id: token, ns: 'share' })}</div>
+          </div>
+          <div className="flex flex-row-reverse px-2 py-3">
+            <div className={cn(
+              'flex shrink-0 items-center gap-1.5 px-1',
+            )}
+            >
+              <div className="system-2xs-medium-uppercase text-text-tertiary">{t('chat.poweredBy', { ns: 'share' })}</div>
+              <DifyLogo size="small" />
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (rateLimitExceeded) {
+    return (
+      <div className={cn('flex h-full w-full flex-col items-center justify-center')}>
+        <div className="min-w-[480px] max-w-[640px]">
+          <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 rounded-[20px] border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-sm">
+            <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
+              <RiErrorWarningFill className="h-8 w-8 text-text-destructive" />
+            </div>
+            <div className="grow">
+              <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.rateLimitExceeded', { ns: 'share' })}</div>
+            </div>
+          </div>
+          <div className="flex flex-row-reverse px-2 py-3">
+            <div className={cn(
+              'flex shrink-0 items-center gap-1.5 px-1',
+            )}
+            >
+              <div className="system-2xs-medium-uppercase text-text-tertiary">{t('chat.poweredBy', { ns: 'share' })}</div>
+              <DifyLogo size="small" />
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (!formData) {
+    return (
+      <div className={cn('flex h-full w-full flex-col items-center justify-center')}>
+        <div className="min-w-[480px] max-w-[640px]">
+          <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 rounded-[20px] border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-sm">
+            <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
+              <RiErrorWarningFill className="h-8 w-8 text-text-destructive" />
+            </div>
+            <div className="grow">
+              <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.formNotFound', { ns: 'share' })}</div>
+            </div>
+          </div>
+          <div className="flex flex-row-reverse px-2 py-3">
+            <div className={cn(
+              'flex shrink-0 items-center gap-1.5 px-1',
+            )}
+            >
+              <div className="system-2xs-medium-uppercase text-text-tertiary">{t('chat.poweredBy', { ns: 'share' })}</div>
+              <DifyLogo size="small" />
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  const site = formData.site.site
+
+  return (
+    <div className={cn('mx-auto flex h-full w-full max-w-[720px] flex-col items-center')}>
+      <div className="mt-4 flex w-full shrink-0 items-center gap-3 py-3">
+        <AppIcon
+          size="large"
+          iconType={site.icon_type}
+          icon={site.icon}
+          background={site.icon_background}
+          imageUrl={site.icon_url}
+        />
+        <div className="system-xl-semibold grow text-text-primary">{site.title}</div>
+      </div>
+      <div className="h-0 w-full grow overflow-y-auto">
+        <div className="border-components-divider-subtle rounded-[20px] border bg-chat-bubble-bg p-4 shadow-lg backdrop-blur-sm">
+          {contentList.map((content, index) => (
+            <ContentItem
+              key={index}
+              content={content}
+              formInputFields={formData.inputs}
+              inputs={inputs}
+              onInputChange={handleInputsChange}
+            />
+          ))}
+          <div className="flex flex-wrap gap-1 py-1">
+            {formData.user_actions.map((action: UserAction) => (
+              <Button
+                key={action.id}
+                disabled={isSubmitting}
+                variant={getButtonStyle(action.button_style) as ButtonProps['variant']}
+                onClick={() => submit(action.id)}
+              >
+                {action.title}
+              </Button>
+            ))}
+          </div>
+          <ExpirationTime expirationTime={formData.expiration_time * 1000} />
+        </div>
+        <div className="flex flex-row-reverse px-2 py-3">
+          <div className={cn(
+            'flex shrink-0 items-center gap-1.5 px-1',
+          )}
+          >
+            <div className="system-2xs-medium-uppercase text-text-tertiary">{t('chat.poweredBy', { ns: 'share' })}</div>
+            <DifyLogo size="small" />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(FormContent)
--- a/web/app/(humanInputLayout)/form/[token]/page.tsx
+++ b/web/app/(humanInputLayout)/form/[token]/page.tsx
@@ -0,0 +1,13 @@
+'use client'
+import * as React from 'react'
+import FormContent from './form'
+
+const FormPage = () => {
+  return (
+    <div className="h-full min-w-[300px] bg-chatbot-bg pb-[env(safe-area-inset-bottom)]">
+      <FormContent />
+    </div>
+  )
+}
+
+export default React.memo(FormPage)
--- a/web/app/(shareLayout)/components/authenticated-layout.tsx
+++ b/web/app/(shareLayout)/components/authenticated-layout.tsx
@@ -47,7 +47,7 @@ const AuthenticatedLayout = ({ children }: { children: React.ReactNode }) => {
    await webAppLogout(shareCode!)
    const url = getSigninUrl()
    router.replace(url)
-  }, [getSigninUrl, router, webAppLogout, shareCode])
+  }, [getSigninUrl, router, shareCode])

  if (appInfoError) {
    return (
--- a/web/app/(shareLayout)/components/splash.tsx
+++ b/web/app/(shareLayout)/components/splash.tsx
@@ -31,7 +31,7 @@ const Splash: FC<PropsWithChildren> = ({ children }) => {
    await webAppLogout(shareCode!)
    const url = getSigninUrl()
    router.replace(url)
-  }, [getSigninUrl, router, webAppLogout, shareCode])
+  }, [getSigninUrl, router, shareCode])

  const [isLoading, setIsLoading] = useState(true)
  useEffect(() => {
--- a/web/app/components/app/app-publisher/index.tsx
+++ b/web/app/components/app/app-publisher/index.tsx
@@ -128,6 +128,7 @@ export type AppPublisherProps = {
  hasTriggerNode?: boolean // Whether workflow currently contains any trigger nodes (used to hide missing-start CTA when triggers exist).
  startNodeLimitExceeded?: boolean
  publishLoading?: boolean
+  hasHumanInputNode?: boolean
 }

 const PUBLISH_SHORTCUT = ['ctrl', '⇧', 'P']
@@ -152,13 +153,14 @@ const AppPublisher = ({
  hasTriggerNode = false,
  startNodeLimitExceeded = false,
  publishLoading = false,
+  hasHumanInputNode = false,
 }: AppPublisherProps) => {
  const { t } = useTranslation()

  const [published, setPublished] = useState(false)
  const [open, setOpen] = useState(false)
  const [showAppAccessControl, setShowAppAccessControl] = useState(false)
-  const [isAppAccessSet, setIsAppAccessSet] = useState(true)
+
  const [embeddingModalOpen, setEmbeddingModalOpen] = useState(false)

  const workflowStore = useContext(WorkflowContext)
@@ -177,6 +179,13 @@ const AppPublisher = ({
  const invalidateAppWorkflow = useInvalidateAppWorkflow()
  const openAsyncWindow = useAsyncWindowOpen()

+  const isAppAccessSet = useMemo(() => {
+    if (appDetail && appAccessSubjects) {
+      return !(appDetail.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS && appAccessSubjects.groups?.length === 0 && appAccessSubjects.members?.length === 0)
+    }
+    return true
+  }, [appAccessSubjects, appDetail])
+
  const noAccessPermission = useMemo(() => systemFeatures.webapp_auth.enabled && appDetail && appDetail.access_mode !== AccessMode.EXTERNAL_MEMBERS && !userCanAccessApp?.result, [systemFeatures, appDetail, userCanAccessApp])
  const disabledFunctionButton = useMemo(() => (!publishedAt || missingStartNode || noAccessPermission), [publishedAt, missingStartNode, noAccessPermission])

@@ -187,25 +196,13 @@ const AppPublisher = ({
      return t('noUserInputNode', { ns: 'app' })
    if (noAccessPermission)
      return t('noAccessPermission', { ns: 'app' })
-  }, [missingStartNode, noAccessPermission, publishedAt])
+  }, [missingStartNode, noAccessPermission, publishedAt, t])

  useEffect(() => {
    if (systemFeatures.webapp_auth.enabled && open && appDetail)
      refetch()
  }, [open, appDetail, refetch, systemFeatures])

-  useEffect(() => {
-    if (appDetail && appAccessSubjects) {
-      if (appDetail.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS && appAccessSubjects.groups?.length === 0 && appAccessSubjects.members?.length === 0)
-        setIsAppAccessSet(false)
-      else
-        setIsAppAccessSet(true)
-    }
-    else {
-      setIsAppAccessSet(true)
-    }
-  }, [appAccessSubjects, appDetail])
-
  const handlePublish = useCallback(async (params?: ModelAndParameter | PublishWorkflowParams) => {
    try {
      await onPublish?.(params)
@@ -528,7 +525,7 @@ const AppPublisher = ({
                              {t('common.accessAPIReference', { ns: 'workflow' })}
                            </SuggestedAction>
                          </Tooltip>
-                          {appDetail?.mode === AppModeEnum.WORKFLOW && (
+                          {appDetail?.mode === AppModeEnum.WORKFLOW && !hasHumanInputNode && (
                            <WorkflowToolConfigureButton
                              disabled={workflowToolDisabled}
                              published={!!toolPublished}
--- a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
@@ -109,6 +109,7 @@ const AgentTools: FC = () => {
      tool_parameters: paramsWithDefaultValue,
      notAuthor: !tool.is_team_authorization,
      enabled: true,
+      type: tool.provider_type as CollectionType,
    }
  }
  const handleSelectTool = (tool: ToolDefaultValue) => {
--- a/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
@@ -194,11 +194,11 @@ const ConfigContent: FC<Props> = ({
      </div>
      {type === RETRIEVE_TYPE.multiWay && (
        <>
-          <div className="my-2 flex h-6 items-center py-1">
-            <div className="system-xs-semibold-uppercase mr-2 shrink-0 text-text-secondary">
+          <div className="my-2 flex flex-col items-center py-1">
+            <div className="system-xs-semibold-uppercase mb-2 mr-2 shrink-0 text-text-secondary">
              {t('rerankSettings', { ns: 'dataset' })}
            </div>
-            <Divider bgStyle="gradient" className="mx-0 !h-px" />
+            <Divider bgStyle="gradient" className="m-0 !h-px" />
          </div>
          {
            selectedDatasetsMode.inconsistentEmbeddingModel
--- a/web/app/components/app/log/list.tsx
+++ b/web/app/components/app/log/list.tsx
@@ -68,6 +68,7 @@ type IDrawerContext = {
 }

 type StatusCount = {
+  paused: number
  success: number
  failed: number
  partial_success: number
@@ -93,7 +94,15 @@ const statusTdRender = (statusCount: StatusCount) => {
  if (!statusCount)
    return null

-  if (statusCount.partial_success + statusCount.failed === 0) {
+  if (statusCount.paused > 0) {
+    return (
+      <div className="system-xs-semibold-uppercase inline-flex items-center gap-1">
+        <Indicator color="yellow" />
+        <span className="text-util-colors-warning-warning-600">Pending</span>
+      </div>
+    )
+  }
+  else if (statusCount.partial_success + statusCount.failed === 0) {
    return (
      <div className="system-xs-semibold-uppercase inline-flex items-center gap-1">
        <Indicator color="green" />
@@ -296,7 +305,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
      if (abortControllerRef.current === controller)
        abortControllerRef.current = null
    }
-  }, [detail.id, hasMore, timezone, t, appDetail, detail?.model_config?.configs?.introduction])
+  }, [detail.id, hasMore, timezone, t, appDetail])

  // Derive chatItemTree, threadChatItems, and oldestAnswerIdRef from allChatItems
  useEffect(() => {
@@ -411,7 +420,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
      notify({ type: 'error', message: t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }) })
      return false
    }
-  }, [allChatItems, appDetail?.id, t])
+  }, [allChatItems, appDetail?.id, notify, t])

  const fetchInitiated = useRef(false)

@@ -504,7 +513,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
    finally {
      setIsLoading(false)
    }
-  }, [detail.id, hasMore, isLoading, timezone, t, appDetail, detail?.model_config?.configs?.introduction])
+  }, [detail.id, hasMore, isLoading, timezone, t, appDetail])

  const handleScroll = useCallback(() => {
    const scrollableDiv = document.getElementById('scrollableDiv')
--- a/web/app/components/app/overview/apikey-info-panel/apikey-info-panel.test-utils.tsx
+++ b/web/app/components/app/overview/apikey-info-panel/apikey-info-panel.test-utils.tsx
@@ -53,6 +53,7 @@ const defaultProviderContext = {
  refreshLicenseLimit: noop,
  isAllowTransferWorkspace: false,
  isAllowPublishAsCustomKnowledgePipelineTemplate: false,
+  humanInputEmailDeliveryEnabled: false,
 }

 const defaultModalContext: ModalContextState = {
--- a/web/app/components/app/text-generate/item/index.tsx
+++ b/web/app/components/app/text-generate/item/index.tsx
@@ -8,7 +8,7 @@ import {
  RiClipboardLine,
  RiFileList3Line,
  RiPlayList2Line,
-  RiReplay15Line,
+  RiResetLeftLine,
  RiSparklingFill,
  RiSparklingLine,
  RiThumbDownLine,
@@ -18,10 +18,12 @@ import { useBoolean } from 'ahooks'
 import copy from 'copy-to-clipboard'
 import { useParams } from 'next/navigation'
 import * as React from 'react'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
+import HumanInputFilledFormList from '@/app/components/base/chat/chat/answer/human-input-filled-form-list'
+import HumanInputFormList from '@/app/components/base/chat/chat/answer/human-input-form-list'
 import WorkflowProcessItem from '@/app/components/base/chat/chat/answer/workflow-process'
 import { useChatContext } from '@/app/components/base/chat/chat/context'
 import Loading from '@/app/components/base/loading'
@@ -29,7 +31,8 @@ import { Markdown } from '@/app/components/base/markdown'
 import NewAudioButton from '@/app/components/base/new-audio-button'
 import Toast from '@/app/components/base/toast'
 import { fetchTextGenerationMessage } from '@/service/debug'
-import { AppSourceType, fetchMoreLikeThis, updateFeedback } from '@/service/share'
+import { AppSourceType, fetchMoreLikeThis, submitHumanInputForm, updateFeedback } from '@/service/share'
+import { submitHumanInputForm as submitHumanInputFormService } from '@/service/workflow'
 import { cn } from '@/utils/classnames'
 import ResultTab from './result-tab'

@@ -121,7 +124,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
  const [isQuerying, { setTrue: startQuerying, setFalse: stopQuerying }] = useBoolean(false)

  const childProps = {
-    isInWebApp: true,
+    isInWebApp,
    content: completionRes,
    messageId: childMessageId,
    depth: depth + 1,
@@ -204,16 +207,22 @@ const GenerationItem: FC<IGenerationItemProps> = ({
  }

  const [currentTab, setCurrentTab] = useState<string>('DETAIL')
-  const showResultTabs = !!workflowProcessData?.resultText || !!workflowProcessData?.files?.length
+  const showResultTabs = !!workflowProcessData?.resultText || !!workflowProcessData?.files?.length || (workflowProcessData?.humanInputFormDataList && workflowProcessData?.humanInputFormDataList.length > 0) || (workflowProcessData?.humanInputFilledFormDataList && workflowProcessData?.humanInputFilledFormDataList.length > 0)
  const switchTab = async (tab: string) => {
    setCurrentTab(tab)
  }
  useEffect(() => {
-    if (workflowProcessData?.resultText || !!workflowProcessData?.files?.length)
+    if (workflowProcessData?.resultText || !!workflowProcessData?.files?.length || (workflowProcessData?.humanInputFormDataList && workflowProcessData?.humanInputFormDataList.length > 0) || (workflowProcessData?.humanInputFilledFormDataList && workflowProcessData?.humanInputFilledFormDataList.length > 0))
      switchTab('RESULT')
    else
      switchTab('DETAIL')
-  }, [workflowProcessData?.files?.length, workflowProcessData?.resultText])
+  }, [workflowProcessData?.files?.length, workflowProcessData?.resultText, workflowProcessData?.humanInputFormDataList, workflowProcessData?.humanInputFilledFormDataList])
+  const handleSubmitHumanInputForm = useCallback(async (formToken: string, formData: { inputs: Record<string, string>, action: string }) => {
+    if (appSourceType === AppSourceType.installedApp)
+      await submitHumanInputFormService(formToken, formData)
+    else
+      await submitHumanInputForm(formToken, formData)
+  }, [appSourceType])

  return (
    <>
@@ -277,7 +286,24 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                    )}
                  </div>
                  {!isError && (
-                    <ResultTab data={workflowProcessData} content={content} currentTab={currentTab} />
+                    <>
+                      {currentTab === 'RESULT' && workflowProcessData.humanInputFormDataList && workflowProcessData.humanInputFormDataList.length > 0 && (
+                        <div className="px-4 pt-4">
+                          <HumanInputFormList
+                            humanInputFormDataList={workflowProcessData.humanInputFormDataList}
+                            onHumanInputFormSubmit={handleSubmitHumanInputForm}
+                          />
+                        </div>
+                      )}
+                      {currentTab === 'RESULT' && workflowProcessData.humanInputFilledFormDataList && workflowProcessData.humanInputFilledFormDataList.length > 0 && (
+                        <div className="px-4 pt-4">
+                          <HumanInputFilledFormList
+                            humanInputFilledFormDataList={workflowProcessData.humanInputFilledFormDataList}
+                          />
+                        </div>
+                      )}
+                      <ResultTab data={workflowProcessData} content={content} currentTab={currentTab} />
+                    </>
                  )}
                </>
              )}
@@ -350,7 +376,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                  )}
                  {isInWebApp && isError && (
                    <ActionButton onClick={onRetry}>
-                      <RiReplay15Line className="h-4 w-4" />
+                      <RiResetLeftLine className="h-4 w-4" />
                    </ActionButton>
                  )}
                  {isInWebApp && !isWorkflow && !isTryApp && (
--- a/web/app/components/app/workflow-log/list.tsx
+++ b/web/app/components/app/workflow-log/list.tsx
@@ -81,6 +81,14 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
        </div>
      )
    }
+    if (status === 'paused') {
+      return (
+        <div className="system-xs-semibold-uppercase inline-flex items-center gap-1">
+          <Indicator color="yellow" />
+          <span className="text-util-colors-warning-warning-600">Pending</span>
+        </div>
+      )
+    }
    if (status === 'running') {
      return (
        <div className="system-xs-semibold-uppercase inline-flex items-center gap-1">
--- a/web/app/components/base/action-button/index.css
+++ b/web/app/components/base/action-button/index.css
@@ -26,6 +26,10 @@
        @apply p-0.5 w-6 h-6 rounded-lg
    }

+    .action-btn-s {
+        @apply w-5 h-5 rounded-[6px]
+    }
+
    .action-btn-xs {
        @apply p-0 w-4 h-4 rounded
    }
--- a/web/app/components/base/action-button/index.tsx
+++ b/web/app/components/base/action-button/index.tsx
@@ -18,6 +18,7 @@ const actionButtonVariants = cva(
    variants: {
      size: {
        xs: 'action-btn-xs',
+        s: 'action-btn-s',
        m: 'action-btn-m',
        l: 'action-btn-l',
        xl: 'action-btn-xl',
--- a/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
+++ b/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
@@ -2,6 +2,7 @@ import type { FileEntity } from '../../file-uploader/types'
 import type {
  ChatConfig,
  ChatItem,
+  ChatItemInTree,
  OnSend,
 } from '../types'
 import { useCallback, useEffect, useMemo, useState } from 'react'
@@ -16,7 +17,9 @@ import {
  fetchSuggestedQuestions,
  getUrl,
  stopChatMessageResponding,
+  submitHumanInputForm,
 } from '@/service/share'
+import { submitHumanInputForm as submitHumanInputFormService } from '@/service/workflow'
 import { TransferMethod } from '@/types/app'
 import { cn } from '@/utils/classnames'
 import { formatBooleanInputs } from '@/utils/model-config'
@@ -73,9 +76,9 @@ const ChatWrapper = () => {
  }, [appParams, currentConversationItem?.introduction])
  const {
    chatList,
-    setTargetMessageId,
    handleSend,
    handleStop,
+    handleSwitchSibling,
    isResponding: respondingState,
    suggestedQuestions,
  } = useChat(
@@ -122,8 +125,11 @@ const ChatWrapper = () => {

    if (fileIsUploading)
      return true
+
+    if (chatList.some(item => item.isAnswer && item.humanInputFormDataList && item.humanInputFormDataList.length > 0))
+      return true
    return false
-  }, [inputsFormValue, inputsForms, allInputsHidden])
+  }, [allInputsHidden, inputsForms, chatList, inputsFormValue])

  useEffect(() => {
    if (currentChatInstanceRef.current)
@@ -134,6 +140,40 @@ const ChatWrapper = () => {
    setIsResponding(respondingState)
  }, [respondingState, setIsResponding])

+  // Resume paused workflows when chat history is loaded
+  useEffect(() => {
+    if (!appPrevChatTree || appPrevChatTree.length === 0)
+      return
+
+    // Find the last answer item with workflow_run_id that needs resumption (DFS - find deepest first)
+    let lastPausedNode: ChatItemInTree | undefined
+    const findLastPausedWorkflow = (nodes: ChatItemInTree[]) => {
+      nodes.forEach((node) => {
+        // DFS: recurse to children first
+        if (node.children && node.children.length > 0)
+          findLastPausedWorkflow(node.children)
+
+        // Track the last node with humanInputFormDataList
+        if (node.isAnswer && node.workflow_run_id && node.humanInputFormDataList && node.humanInputFormDataList.length > 0)
+          lastPausedNode = node
+      })
+    }
+
+    findLastPausedWorkflow(appPrevChatTree)
+
+    // Only resume the last paused workflow
+    if (lastPausedNode) {
+      handleSwitchSibling(
+        lastPausedNode.id,
+        {
+          onGetSuggestedQuestions: responseItemId => fetchSuggestedQuestions(responseItemId, appSourceType, appId),
+          onConversationComplete: currentConversationId ? undefined : handleNewConversationCompleted,
+          isPublicAPI: appSourceType === AppSourceType.webApp,
+        },
+      )
+    }
+  }, [])
+
  const doSend: OnSend = useCallback((message, files, isRegenerate = false, parentAnswer: ChatItem | null = null) => {
    const data: any = {
      query: message,
@@ -149,10 +189,10 @@ const ChatWrapper = () => {
      {
        onGetSuggestedQuestions: responseItemId => fetchSuggestedQuestions(responseItemId, appSourceType, appId),
        onConversationComplete: isHistoryConversation ? undefined : handleNewConversationCompleted,
-        isPublicAPI: !isInstalledApp,
+        isPublicAPI: appSourceType === AppSourceType.webApp,
      },
    )
-  }, [chatList, handleNewConversationCompleted, handleSend, currentConversationId, currentConversationInputs, newConversationInputs, isInstalledApp, appId])
+  }, [inputsForms, currentConversationId, currentConversationInputs, newConversationInputs, chatList, handleSend, appSourceType, appId, isHistoryConversation, handleNewConversationCompleted])

  const doRegenerate = useCallback((chatItem: ChatItem, editedQuestion?: { message: string, files?: FileEntity[] }) => {
    const question = editedQuestion ? chatItem : chatList.find(item => item.id === chatItem.parentMessageId)!
@@ -160,12 +200,27 @@ const ChatWrapper = () => {
    doSend(editedQuestion ? editedQuestion.message : question.content, editedQuestion ? editedQuestion.files : question.message_files, true, isValidGeneratedAnswer(parentAnswer) ? parentAnswer : null)
  }, [chatList, doSend])

+  const doSwitchSibling = useCallback((siblingMessageId: string) => {
+    handleSwitchSibling(siblingMessageId, {
+      onGetSuggestedQuestions: responseItemId => fetchSuggestedQuestions(responseItemId, appSourceType, appId),
+      onConversationComplete: currentConversationId ? undefined : handleNewConversationCompleted,
+      isPublicAPI: appSourceType === AppSourceType.webApp,
+    })
+  }, [handleSwitchSibling, currentConversationId, handleNewConversationCompleted, appSourceType, appId])
+
  const messageList = useMemo(() => {
    if (currentConversationId || chatList.length > 1)
      return chatList
    // Without messages we are in the welcome screen, so hide the opening statement from chatlist
    return chatList.filter(item => !item.isOpeningStatement)
-  }, [chatList])
+  }, [chatList, currentConversationId])
+
+  const handleSubmitHumanInputForm = useCallback(async (formToken: string, formData: any) => {
+    if (isInstalledApp)
+      await submitHumanInputFormService(formToken, formData)
+    else
+      await submitHumanInputForm(formToken, formData)
+  }, [isInstalledApp])

  const [collapsed, setCollapsed] = useState(!!currentConversationId)

@@ -274,6 +329,7 @@ const ChatWrapper = () => {
        inputsForm={inputsForms}
        onRegenerate={doRegenerate}
        onStopResponding={handleStop}
+        onHumanInputFormSubmit={handleSubmitHumanInputForm}
        chatNode={(
          <>
            {chatNode}
@@ -286,7 +342,7 @@ const ChatWrapper = () => {
        answerIcon={answerIcon}
        hideProcessDetail
        themeBuilder={themeBuilder}
-        switchSibling={siblingMessageId => setTargetMessageId(siblingMessageId)}
+        switchSibling={doSwitchSibling}
        inputDisabled={inputDisabled}
        sidebarCollapseState={sidebarCollapseState}
        questionIcon={
--- a/web/app/components/base/chat/chat-with-history/hooks.tsx
+++ b/web/app/components/base/chat/chat-with-history/hooks.tsx
@@ -1,3 +1,4 @@
+import type { ExtraContent } from '../chat/type'
 import type {
  Callback,
  ChatConfig,
@@ -9,6 +10,7 @@ import type {
  AppData,
  ConversationItem,
 } from '@/models/share'
+import type { HumanInputFilledFormData, HumanInputFormData } from '@/types/workflow'
 import { useLocalStorageState } from 'ahooks'
 import { noop } from 'es-toolkit/function'
 import { produce } from 'immer'
@@ -57,6 +59,24 @@ function getFormattedChatList(messages: any[]) {
      parentMessageId: item.parent_message_id || undefined,
    })
    const answerFiles = item.message_files?.filter((file: any) => file.belongs_to === 'assistant') || []
+    const humanInputFormDataList: HumanInputFormData[] = []
+    const humanInputFilledFormDataList: HumanInputFilledFormData[] = []
+    let workflowRunId = ''
+    if (item.status === 'paused') {
+      item.extra_contents?.forEach((content: ExtraContent) => {
+        if (content.type === 'human_input' && !content.submitted) {
+          humanInputFormDataList.push(content.form_definition)
+          workflowRunId = content.workflow_run_id
+        }
+      })
+    }
+    else if (item.status === 'normal') {
+      item.extra_contents?.forEach((content: ExtraContent) => {
+        if (content.type === 'human_input' && content.submitted) {
+          humanInputFilledFormDataList.push(content.form_submission_data)
+        }
+      })
+    }
    newChatList.push({
      id: item.id,
      content: buildLLMGenerationItemsFromHistorySequence(item).message,
@@ -67,6 +87,9 @@ function getFormattedChatList(messages: any[]) {
      citation: item.retriever_resources,
      message_files: getProcessedFilesFromResponse(answerFiles.map((item: any) => ({ ...item, related_id: item.id, upload_file_id: item.upload_file_id }))),
      parentMessageId: `question-${item.id}`,
+      humanInputFormDataList,
+      humanInputFilledFormDataList,
+      workflow_run_id: workflowRunId,
    })
  })
  return newChatList
--- a/web/app/components/base/chat/chat/answer/human-input-content/content-item.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/content-item.tsx
@@ -0,0 +1,54 @@
+import type { ContentItemProps } from './type'
+import * as React from 'react'
+import { useMemo } from 'react'
+import { Markdown } from '@/app/components/base/markdown'
+import Textarea from '@/app/components/base/textarea'
+
+const ContentItem = ({
+  content,
+  formInputFields,
+  inputs,
+  onInputChange,
+}: ContentItemProps) => {
+  const isInputField = (field: string) => {
+    const outputVarRegex = /\{\{#\$output\.[^#]+#\}\}/
+    return outputVarRegex.test(field)
+  }
+
+  const extractFieldName = (str: string): string => {
+    const outputVarRegex = /\{\{#\$output\.([^#]+)#\}\}/
+    const match = str.match(outputVarRegex)
+    return match ? match[1] : ''
+  }
+
+  const fieldName = useMemo(() => {
+    return extractFieldName(content)
+  }, [content])
+
+  const formInputField = useMemo(() => {
+    return formInputFields.find(field => field.output_variable_name === fieldName)
+  }, [formInputFields, fieldName])
+
+  if (!isInputField(content)) {
+    return (
+      <Markdown content={content} />
+    )
+  }
+
+  if (!formInputField)
+    return null
+
+  return (
+    <div className="py-3">
+      {formInputField.type === 'paragraph' && (
+        <Textarea
+          className="h-[104px] sm:text-xs"
+          value={inputs[fieldName]}
+          onChange={(e) => { onInputChange(fieldName, e.target.value) }}
+        />
+      )}
+    </div>
+  )
+}
+
+export default React.memo(ContentItem)
--- a/web/app/components/base/chat/chat/answer/human-input-content/content-wrapper.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/content-wrapper.tsx
@@ -0,0 +1,64 @@
+import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
+import { useCallback, useState } from 'react'
+import BlockIcon from '@/app/components/workflow/block-icon'
+import { BlockEnum } from '@/app/components/workflow/types'
+import { cn } from '@/utils/classnames'
+
+type ContentWrapperProps = {
+  nodeTitle: string
+  children: React.ReactNode
+  showExpandIcon?: boolean
+  className?: string
+  expanded?: boolean
+}
+
+const ContentWrapper = ({
+  nodeTitle,
+  children,
+  showExpandIcon = false,
+  className,
+  expanded = false,
+}: ContentWrapperProps) => {
+  const [isExpanded, setIsExpanded] = useState(expanded)
+
+  const handleToggleExpand = useCallback(() => {
+    setIsExpanded(!isExpanded)
+  }, [isExpanded])
+
+  return (
+    <div className={cn('rounded-2xl border-[0.5px] border-components-panel-border bg-background-section p-2 shadow-md', className)}>
+      <div className="flex items-center gap-2 p-2">
+        {/* node icon */}
+        <BlockIcon type={BlockEnum.HumanInput} className="shrink-0" />
+        {/* node name */}
+        <div
+          className="system-sm-semibold-uppercase grow truncate text-text-primary"
+          title={nodeTitle}
+        >
+          {nodeTitle}
+        </div>
+        {showExpandIcon && (
+          <div className="shrink-0 cursor-pointer" onClick={handleToggleExpand}>
+            {
+              isExpanded
+                ? (
+                    <RiArrowDownSLine className="size-4" />
+                  )
+                : (
+                    <RiArrowRightSLine className="size-4" />
+                  )
+            }
+          </div>
+        )}
+      </div>
+      {(!showExpandIcon || isExpanded) && (
+        <div className="px-2 py-1">
+          {/* human input form content */}
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ContentWrapper
--- a/web/app/components/base/chat/chat/answer/human-input-content/executed-action.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/executed-action.tsx
@@ -0,0 +1,30 @@
+import type { ExecutedAction as ExecutedActionType } from './type'
+import { memo } from 'react'
+import { Trans } from 'react-i18next'
+import Divider from '@/app/components/base/divider'
+import { TriggerAll } from '@/app/components/base/icons/src/vender/workflow'
+
+type ExecutedActionProps = {
+  executedAction: ExecutedActionType
+}
+
+const ExecutedAction = ({
+  executedAction,
+}: ExecutedActionProps) => {
+  return (
+    <div className="flex flex-col gap-y-1 py-1">
+      <Divider className="mb-2 mt-1 w-[30px]" />
+      <div className="system-xs-regular flex items-center gap-x-1 text-text-tertiary">
+        <TriggerAll className="size-3.5 shrink-0" />
+        <Trans
+          i18nKey="nodes.humanInput.userActions.triggered"
+          ns="workflow"
+          components={{ strong: <span className="system-xs-medium text-text-secondary"></span> }}
+          values={{ actionName: executedAction.id }}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default memo(ExecutedAction)
--- a/web/app/components/base/chat/chat/answer/human-input-content/expiration-time.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/expiration-time.tsx
@@ -0,0 +1,46 @@
+'use client'
+import { RiAlertFill, RiTimeLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useLocale } from '@/context/i18n'
+import { cn } from '@/utils/classnames'
+import { getRelativeTime, isRelativeTimeSameOrAfter } from './utils'
+
+type ExpirationTimeProps = {
+  expirationTime: number
+}
+
+const ExpirationTime = ({
+  expirationTime,
+}: ExpirationTimeProps) => {
+  const { t } = useTranslation()
+  const locale = useLocale()
+  const relativeTime = getRelativeTime(expirationTime, locale)
+  const isSameOrAfter = isRelativeTimeSameOrAfter(expirationTime)
+
+  return (
+    <div
+      className={cn(
+        'system-xs-regular mt-1 flex items-center gap-x-1 text-text-tertiary',
+        !isSameOrAfter && 'text-text-warning',
+      )}
+    >
+      {
+        isSameOrAfter
+          ? (
+              <>
+                <RiTimeLine className="size-3.5" />
+                <span>{t('humanInput.expirationTimeNowOrFuture', { relativeTime, ns: 'share' })}</span>
+              </>
+            )
+          : (
+              <>
+                <RiAlertFill className="size-3.5" />
+                <span>{t('humanInput.expiredTip', { ns: 'share' })}</span>
+              </>
+            )
+      }
+    </div>
+  )
+}
+
+export default ExpirationTime
--- a/web/app/components/base/chat/chat/answer/human-input-content/human-input-form.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/human-input-form.tsx
@@ -0,0 +1,61 @@
+'use client'
+import type { HumanInputFormProps } from './type'
+import type { ButtonProps } from '@/app/components/base/button'
+import type { UserAction } from '@/app/components/workflow/nodes/human-input/types'
+import * as React from 'react'
+import { useCallback, useState } from 'react'
+import Button from '@/app/components/base/button'
+import ContentItem from './content-item'
+import { getButtonStyle, initializeInputs, splitByOutputVar } from './utils'
+
+const HumanInputForm = ({
+  formData,
+  onSubmit,
+}: HumanInputFormProps) => {
+  const formToken = formData.form_token
+  const defaultInputs = initializeInputs(formData.inputs, formData.resolved_default_values || {})
+  const contentList = splitByOutputVar(formData.form_content)
+  const [inputs, setInputs] = useState(defaultInputs)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const handleInputsChange = useCallback((name: string, value: string) => {
+    setInputs(prev => ({
+      ...prev,
+      [name]: value,
+    }))
+  }, [])
+
+  const submit = async (formToken: string, actionID: string, inputs: Record<string, string>) => {
+    setIsSubmitting(true)
+    await onSubmit?.(formToken, { inputs, action: actionID })
+    setIsSubmitting(false)
+  }
+
+  return (
+    <>
+      {contentList.map((content, index) => (
+        <ContentItem
+          key={index}
+          content={content}
+          formInputFields={formData.inputs}
+          inputs={inputs}
+          onInputChange={handleInputsChange}
+        />
+      ))}
+      <div className="flex flex-wrap gap-1 py-1">
+        {formData.actions.map((action: UserAction) => (
+          <Button
+            key={action.id}
+            disabled={isSubmitting}
+            variant={getButtonStyle(action.button_style) as ButtonProps['variant']}
+            onClick={() => submit(formToken, action.id, inputs)}
+          >
+            {action.title}
+          </Button>
+        ))}
+      </div>
+    </>
+  )
+}
+
+export default React.memo(HumanInputForm)
--- a/web/app/components/base/chat/chat/answer/human-input-content/submitted-content.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/submitted-content.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react'
+import { Markdown } from '@/app/components/base/markdown'
+
+type SubmittedContentProps = {
+  content: string
+}
+
+const SubmittedContent = ({
+  content,
+}: SubmittedContentProps) => {
+  return (
+    <Markdown content={content} />
+  )
+}
+
+export default React.memo(SubmittedContent)
--- a/web/app/components/base/chat/chat/answer/human-input-content/submitted.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/submitted.tsx
@@ -0,0 +1,25 @@
+import type { SubmittedHumanInputContentProps } from './type'
+import { useMemo } from 'react'
+import ExecutedAction from './executed-action'
+import SubmittedContent from './submitted-content'
+
+export const SubmittedHumanInputContent = ({
+  formData,
+}: SubmittedHumanInputContentProps) => {
+  const { rendered_content, action_id, action_text } = formData
+
+  const executedAction = useMemo(() => {
+    return {
+      id: action_id,
+      title: action_text,
+    }
+  }, [action_id, action_text])
+
+  return (
+    <>
+      <SubmittedContent content={rendered_content} />
+      {/* Executed Action */}
+      <ExecutedAction executedAction={executedAction} />
+    </>
+  )
+}
--- a/web/app/components/base/chat/chat/answer/human-input-content/tips.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/tips.tsx
@@ -0,0 +1,43 @@
+import { memo } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+import Divider from '@/app/components/base/divider'
+import { useSelector as useAppSelector } from '@/context/app-context'
+
+type TipsProps = {
+  showEmailTip: boolean
+  isEmailDebugMode: boolean
+  showDebugModeTip: boolean
+}
+
+const Tips = ({
+  showEmailTip,
+  isEmailDebugMode,
+  showDebugModeTip,
+}: TipsProps) => {
+  const { t } = useTranslation()
+  const email = useAppSelector(s => s.userProfile.email)
+
+  return (
+    <>
+      <Divider className="!my-2 w-[30px]" />
+      <div className="space-y-1 pt-1">
+        {showEmailTip && !isEmailDebugMode && (
+          <div className="system-xs-regular text-text-secondary">{t('common.humanInputEmailTip', { ns: 'workflow' })}</div>
+        )}
+        {showEmailTip && isEmailDebugMode && (
+          <div className="system-xs-regular text-text-secondary">
+            <Trans
+              i18nKey="common.humanInputEmailTipInDebugMode"
+              ns="workflow"
+              components={{ email: <span className="system-xs-semibold"></span> }}
+              values={{ email }}
+            />
+          </div>
+        )}
+        {showDebugModeTip && <div className="system-xs-medium text-text-warning">{t('common.humanInputWebappTip', { ns: 'workflow' })}</div>}
+      </div>
+    </>
+  )
+}
+
+export default memo(Tips)
--- a/web/app/components/base/chat/chat/answer/human-input-content/type.ts
+++ b/web/app/components/base/chat/chat/answer/human-input-content/type.ts
@@ -0,0 +1,31 @@
+import type { FormInputItem } from '@/app/components/workflow/nodes/human-input/types'
+import type { HumanInputFilledFormData, HumanInputFormData } from '@/types/workflow'
+
+export type ExecutedAction = {
+  id: string
+  title: string
+}
+
+export type UnsubmittedHumanInputContentProps = {
+  formData: HumanInputFormData
+  showEmailTip?: boolean
+  isEmailDebugMode?: boolean
+  showDebugModeTip?: boolean
+  onSubmit?: (formToken: string, data: { inputs: Record<string, string>, action: string }) => Promise<void>
+}
+
+export type SubmittedHumanInputContentProps = {
+  formData: HumanInputFilledFormData
+}
+
+export type HumanInputFormProps = {
+  formData: HumanInputFormData
+  onSubmit?: (formToken: string, data: { inputs: Record<string, string>, action: string }) => Promise<void>
+}
+
+export type ContentItemProps = {
+  content: string
+  formInputFields: FormInputItem[]
+  inputs: Record<string, string>
+  onInputChange: (name: string, value: string) => void
+}
--- a/web/app/components/base/chat/chat/answer/human-input-content/unsubmitted.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/unsubmitted.tsx
@@ -0,0 +1,36 @@
+import type { UnsubmittedHumanInputContentProps } from './type'
+import ExpirationTime from './expiration-time'
+import HumanInputForm from './human-input-form'
+import Tips from './tips'
+
+export const UnsubmittedHumanInputContent = ({
+  formData,
+  showEmailTip = false,
+  isEmailDebugMode = false,
+  showDebugModeTip = false,
+  onSubmit,
+}: UnsubmittedHumanInputContentProps) => {
+  const { expiration_time } = formData
+
+  return (
+    <>
+      {/* Form */}
+      <HumanInputForm
+        formData={formData}
+        onSubmit={onSubmit}
+      />
+      {/* Tips */}
+      {(showEmailTip || showDebugModeTip) && (
+        <Tips
+          showEmailTip={showEmailTip}
+          isEmailDebugMode={isEmailDebugMode}
+          showDebugModeTip={showDebugModeTip}
+        />
+      )}
+      {/* Expiration Time */}
+      {typeof expiration_time === 'number' && (
+        <ExpirationTime expirationTime={expiration_time * 1000} />
+      )}
+    </>
+  )
+}
--- a/web/app/components/base/chat/chat/answer/human-input-content/utils.ts
+++ b/web/app/components/base/chat/chat/answer/human-input-content/utils.ts
@@ -0,0 +1,64 @@
+import type { FormInputItem } from '@/app/components/workflow/nodes/human-input/types'
+import type { Locale } from '@/i18n-config'
+import dayjs from 'dayjs'
+import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import utc from 'dayjs/plugin/utc'
+import { UserActionButtonType } from '@/app/components/workflow/nodes/human-input/types'
+import 'dayjs/locale/en'
+import 'dayjs/locale/zh-cn'
+import 'dayjs/locale/ja'
+
+dayjs.extend(utc)
+dayjs.extend(relativeTime)
+dayjs.extend(isSameOrAfter)
+
+export const getButtonStyle = (style: UserActionButtonType) => {
+  if (style === UserActionButtonType.Primary)
+    return 'primary'
+  if (style === UserActionButtonType.Default)
+    return 'secondary'
+  if (style === UserActionButtonType.Accent)
+    return 'secondary-accent'
+  if (style === UserActionButtonType.Ghost)
+    return 'ghost'
+}
+
+export const splitByOutputVar = (content: string): string[] => {
+  const outputVarRegex = /(\{\{#\$output\.[^#]+#\}\})/g
+  const parts = content.split(outputVarRegex)
+  return parts.filter(part => part.length > 0)
+}
+
+export const initializeInputs = (formInputs: FormInputItem[], defaultValues: Record<string, string> = {}) => {
+  const initialInputs: Record<string, any> = {}
+  formInputs.forEach((item) => {
+    if (item.type === 'text-input' || item.type === 'paragraph')
+      initialInputs[item.output_variable_name] = item.default.type === 'variable' ? defaultValues[item.output_variable_name] || '' : item.default.value
+    else
+      initialInputs[item.output_variable_name] = undefined
+  })
+  return initialInputs
+}
+
+const localeMap: Record<string, string> = {
+  'en-US': 'en',
+  'zh-Hans': 'zh-cn',
+  'ja-JP': 'ja',
+}
+
+export const getRelativeTime = (
+  utcTimestamp: string | number,
+  locale: Locale = 'en-US',
+) => {
+  const dayjsLocale = localeMap[locale] ?? 'en'
+
+  return dayjs
+    .utc(utcTimestamp)
+    .locale(dayjsLocale)
+    .fromNow()
+}
+
+export const isRelativeTimeSameOrAfter = (utcTimestamp: string | number) => {
+  return dayjs.utc(utcTimestamp).isSameOrAfter(dayjs())
+}
--- a/web/app/components/base/chat/chat/answer/human-input-filled-form-list.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-filled-form-list.tsx
@@ -0,0 +1,32 @@
+import type { HumanInputFilledFormData } from '@/types/workflow'
+import ContentWrapper from './human-input-content/content-wrapper'
+import { SubmittedHumanInputContent } from './human-input-content/submitted'
+
+type HumanInputFilledFormListProps = {
+  humanInputFilledFormDataList: HumanInputFilledFormData[]
+}
+
+const HumanInputFilledFormList = ({
+  humanInputFilledFormDataList,
+}: HumanInputFilledFormListProps) => {
+  return (
+    <div className="mt-2 flex flex-col gap-y-2">
+      {
+        humanInputFilledFormDataList.map(formData => (
+          <ContentWrapper
+            key={formData.node_id}
+            nodeTitle={formData.node_title}
+            showExpandIcon
+          >
+            <SubmittedHumanInputContent
+              key={formData.node_id}
+              formData={formData}
+            />
+          </ContentWrapper>
+        ))
+      }
+    </div>
+  )
+}
+
+export default HumanInputFilledFormList
--- a/web/app/components/base/chat/chat/answer/human-input-form-list.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-form-list.tsx
@@ -0,0 +1,70 @@
+import type { DeliveryMethod, HumanInputNodeType } from '@/app/components/workflow/nodes/human-input/types'
+import type { Node } from '@/app/components/workflow/types'
+import type { HumanInputFormData } from '@/types/workflow'
+import { useMemo } from 'react'
+import { DeliveryMethodType } from '@/app/components/workflow/nodes/human-input/types'
+import ContentWrapper from './human-input-content/content-wrapper'
+import { UnsubmittedHumanInputContent } from './human-input-content/unsubmitted'
+
+type HumanInputFormListProps = {
+  humanInputFormDataList: HumanInputFormData[]
+  onHumanInputFormSubmit?: (formToken: string, formData: { inputs: Record<string, string>, action: string }) => Promise<void>
+  getHumanInputNodeData?: (nodeID: string) => Node<HumanInputNodeType> | undefined
+}
+
+const HumanInputFormList = ({
+  humanInputFormDataList,
+  onHumanInputFormSubmit,
+  getHumanInputNodeData,
+}: HumanInputFormListProps) => {
+  const deliveryMethodsConfig = useMemo((): Record<string, { showEmailTip: boolean, isEmailDebugMode: boolean, showDebugModeTip: boolean }> => {
+    if (!humanInputFormDataList.length)
+      return {}
+    return humanInputFormDataList.reduce((acc, formData) => {
+      const deliveryMethodsConfig = getHumanInputNodeData?.(formData.node_id)?.data.delivery_methods || []
+      if (!deliveryMethodsConfig.length) {
+        acc[formData.node_id] = {
+          showEmailTip: false,
+          isEmailDebugMode: false,
+          showDebugModeTip: false,
+        }
+        return acc
+      }
+      const isWebappEnabled = deliveryMethodsConfig.some((method: DeliveryMethod) => method.type === DeliveryMethodType.WebApp && method.enabled)
+      const isEmailEnabled = deliveryMethodsConfig.some((method: DeliveryMethod) => method.type === DeliveryMethodType.Email && method.enabled)
+      const isEmailDebugMode = deliveryMethodsConfig.some((method: DeliveryMethod) => method.type === DeliveryMethodType.Email && method.config?.debug_mode)
+      acc[formData.node_id] = {
+        showEmailTip: isEmailEnabled,
+        isEmailDebugMode,
+        showDebugModeTip: !isWebappEnabled,
+      }
+      return acc
+    }, {} as Record<string, { showEmailTip: boolean, isEmailDebugMode: boolean, showDebugModeTip: boolean }>)
+  }, [getHumanInputNodeData, humanInputFormDataList])
+
+  const filteredHumanInputFormDataList = humanInputFormDataList.filter(formData => formData.display_in_ui)
+
+  return (
+    <div className="mt-2 flex flex-col gap-y-2">
+      {
+        filteredHumanInputFormDataList.map(formData => (
+          <ContentWrapper
+            key={formData.form_id}
+            nodeTitle={formData.node_title}
+          >
+            <UnsubmittedHumanInputContent
+              key={formData.form_id}
+              formData={formData}
+              showEmailTip={!!deliveryMethodsConfig[formData.node_id]?.showEmailTip}
+              isEmailDebugMode={!!deliveryMethodsConfig[formData.node_id]?.isEmailDebugMode}
+              showDebugModeTip={!!deliveryMethodsConfig[formData.node_id]?.showDebugModeTip}
+              onSubmit={onHumanInputFormSubmit}
+            />
+          </ContentWrapper>
+        ))
+      }
+    </div>
+  )
+}
+
+export default HumanInputFormList
--- a/web/app/components/base/chat/chat/answer/index.tsx
+++ b/web/app/components/base/chat/chat/answer/index.tsx
@@ -16,9 +16,12 @@ import LoadingAnim from '@/app/components/base/chat/chat/loading-anim'
 import { FileList } from '@/app/components/base/file-uploader'
 import { cn } from '@/utils/classnames'
 import ContentSwitch from '../content-switch'
+import { useChatContext } from '../context'
 import AgentContent from './agent-content'
 import BasicContent from './basic-content'
 import GenerationContent from './generation-content'
+import HumanInputFilledFormList from './human-input-filled-form-list'
+import HumanInputFormList from './human-input-form-list'
 import More from './more'
 import Operation from './operation'
 import SuggestedQuestions from './suggested-questions'
@@ -37,6 +40,8 @@ type AnswerProps = {
  appData?: AppData
  noChatInput?: boolean
  switchSibling?: (siblingMessageId: string) => void
+  hideAvatar?: boolean
+  onHumanInputFormSubmit?: (formToken: string, formData: any) => Promise<void>
 }
 const Answer: FC<AnswerProps> = ({
  item,
@@ -51,6 +56,8 @@ const Answer: FC<AnswerProps> = ({
  appData,
  noChatInput,
  switchSibling,
+  hideAvatar,
+  onHumanInputFormSubmit,
 }) => {
  const { t } = useTranslation()
  const {
@@ -63,13 +70,22 @@ const Answer: FC<AnswerProps> = ({
    allFiles,
    message_files,
    llmGenerationItems,
+    humanInputFormDataList,
+    humanInputFilledFormDataList,
  } = item
  const hasAgentThoughts = !!agent_thoughts?.length
+  const hasHumanInputs = !!humanInputFormDataList?.length || !!humanInputFilledFormDataList?.length

  const [containerWidth, setContainerWidth] = useState(0)
  const [contentWidth, setContentWidth] = useState(0)
+  const [humanInputFormContainerWidth, setHumanInputFormContainerWidth] = useState(0)
  const containerRef = useRef<HTMLDivElement>(null)
  const contentRef = useRef<HTMLDivElement>(null)
+  const humanInputFormContainerRef = useRef<HTMLDivElement>(null)
+
+  const {
+    getHumanInputNodeData,
+  } = useChatContext()

  const getContainerWidth = () => {
    if (containerRef.current)
@@ -89,12 +105,23 @@ const Answer: FC<AnswerProps> = ({
      getContentWidth()
  }, [responding])

+  const getHumanInputFormContainerWidth = () => {
+    if (humanInputFormContainerRef.current)
+      setHumanInputFormContainerWidth(humanInputFormContainerRef.current?.clientWidth)
+  }
+
+  useEffect(() => {
+    if (hasHumanInputs)
+      getHumanInputFormContainerWidth()
+  }, [hasHumanInputs])
+
  // Recalculate contentWidth when content changes (e.g., SVG preview/source toggle)
  useEffect(() => {
    if (!containerRef.current)
      return
    const resizeObserver = new ResizeObserver(() => {
      getContentWidth()
+      getHumanInputFormContainerWidth()
    })
    resizeObserver.observe(containerRef.current)
    return () => {
@@ -120,120 +147,294 @@ const Answer: FC<AnswerProps> = ({

  return (
    <div className="mb-2 flex last:mb-0">
-      <div className="relative h-10 w-10 shrink-0">
-        {answerIcon || <AnswerIcon />}
-        {responding && (
-          <div className="absolute left-[-3px] top-[-3px] flex h-4 w-4 items-center rounded-full border-[0.5px] border-divider-subtle bg-background-section-burn pl-[6px] shadow-xs">
-            <LoadingAnim type="avatar" />
+      {!hideAvatar && (
+        <div className="relative h-10 w-10 shrink-0">
+          {answerIcon || <AnswerIcon />}
+          {responding && (
+            <div className="absolute left-[-3px] top-[-3px] flex h-4 w-4 items-center rounded-full border-[0.5px] border-divider-subtle bg-background-section-burn pl-[6px] shadow-xs">
+              <LoadingAnim type="avatar" />
+            </div>
+          )}
+        </div>
+      )}
+      <div className="chat-answer-container group ml-4 w-0 grow pb-4" ref={containerRef}>
+        {/* Block 1: Workflow Process + Human Input Forms */}
+        {hasHumanInputs && (
+          <div className={cn('group relative pr-10', chatAnswerContainerInner)}>
+            <div
+              ref={humanInputFormContainerRef}
+              className={cn('body-lg-regular relative inline-block w-full max-w-full rounded-2xl bg-chat-bubble-bg px-4 py-3 text-text-primary')}
+            >
+              {
+                !responding && contentIsEmpty && !hasAgentThoughts && (
+                  <Operation
+                    hasWorkflowProcess={!!workflowProcess}
+                    maxSize={containerWidth - humanInputFormContainerWidth - 4}
+                    contentWidth={humanInputFormContainerWidth}
+                    item={item}
+                    question={question}
+                    index={index}
+                    showPromptLog={showPromptLog}
+                    noChatInput={noChatInput}
+                  />
+                )
+              }
+              {/** Render workflow process */}
+              {
+                workflowProcess && (
+                  <WorkflowProcessItem
+                    data={workflowProcess}
+                    item={item}
+                    hideProcessDetail={hideProcessDetail}
+                    readonly={hideProcessDetail && appData ? !appData.site?.show_workflow_steps : undefined}
+                  />
+                )
+              }
+              {
+                humanInputFormDataList && humanInputFormDataList.length > 0 && (
+                  <HumanInputFormList
+                    humanInputFormDataList={humanInputFormDataList}
+                    onHumanInputFormSubmit={onHumanInputFormSubmit}
+                    getHumanInputNodeData={getHumanInputNodeData}
+                  />
+                )
+              }
+              {
+                humanInputFilledFormDataList && humanInputFilledFormDataList.length > 0 && (
+                  <HumanInputFilledFormList
+                    humanInputFilledFormDataList={humanInputFilledFormDataList}
+                  />
+                )
+              }
+              {
+                typeof item.siblingCount === 'number'
+                && item.siblingCount > 1
+                && !responding
+                && contentIsEmpty
+                && !hasAgentThoughts
+                && (
+                  <ContentSwitch
+                    count={item.siblingCount}
+                    currentIndex={item.siblingIndex}
+                    prevDisabled={!item.prevSibling}
+                    nextDisabled={!item.nextSibling}
+                    switchSibling={handleSwitchSibling}
+                  />
+                )
+              }
+            </div>
          </div>
        )}
-      </div>
-      <div className="chat-answer-container group ml-4 w-0 grow pb-4" ref={containerRef}>
-        <div className={cn('group relative pr-10', chatAnswerContainerInner)}>
-          <div
-            ref={contentRef}
-            className={cn('body-lg-regular relative inline-block max-w-full rounded-2xl bg-chat-bubble-bg px-4 py-3 text-text-primary', workflowProcess && 'w-full')}
-          >
-            {
-              !responding && (
-                <Operation
-                  hasWorkflowProcess={!!workflowProcess}
-                  maxSize={containerWidth - contentWidth - 4}
-                  contentWidth={contentWidth}
-                  item={item}
-                  question={question}
-                  index={index}
-                  showPromptLog={showPromptLog}
-                  noChatInput={noChatInput}
-                />
-              )
-            }
-            {/** Render workflow process */}
-            {
-              workflowProcess && (
-                <WorkflowProcessItem
-                  data={workflowProcess}
-                  item={item}
-                  hideProcessDetail={hideProcessDetail}
-                  readonly={hideProcessDetail && appData ? !appData.site?.show_workflow_steps : undefined}
-                />
-              )
-            }
-            {
-              generationContentRenderIsUsed && (
-                <GenerationContent llmGenerationItems={llmGenerationItems} />
-              )
-            }
-            {
-              responding && contentIsEmpty && !hasAgentThoughts && (
-                <div className="flex h-5 w-6 items-center justify-center">
-                  <LoadingAnim type="text" />
-                </div>
-              )
-            }
-            {
-              !contentIsEmpty && !hasAgentThoughts && !generationContentRenderIsUsed && (
-                <BasicContent item={item} />
-              )
-            }
-            {
-              (hasAgentThoughts) && (
-                <AgentContent
-                  item={item}
-                  responding={responding}
-                  content={content}
-                />
-              )
-            }
-            {
-              !!allFiles?.length && (
-                <FileList
-                  className="my-1"
-                  files={allFiles}
-                  showDeleteAction={false}
-                  showDownloadAction
-                  canPreview
-                />
-              )
-            }
-            {
-              !!message_files?.length && (
-                <FileList
-                  className="my-1"
-                  files={message_files}
-                  showDeleteAction={false}
-                  showDownloadAction
-                  canPreview
-                />
-              )
-            }
-            {
-              annotation?.id && annotation.authorName && (
-                <EditTitle
-                  className="mt-1"
-                  title={t('editBy', { ns: 'appAnnotation', author: annotation.authorName })}
-                />
-              )
-            }
-            <SuggestedQuestions item={item} />
-            {
-              !!citation?.length && !responding && (
-                <Citation data={citation} showHitInfo={config?.supportCitationHitInfo} />
-              )
-            }
-            {
-              !!(item.siblingCount && item.siblingCount > 1 && item.siblingIndex !== undefined) && (
-                <ContentSwitch
-                  count={item.siblingCount}
-                  currentIndex={item.siblingIndex}
-                  prevDisabled={!item.prevSibling}
-                  nextDisabled={!item.nextSibling}
-                  switchSibling={handleSwitchSibling}
-                />
-              )
-            }
+        {/* Block 2: Response Content (when human inputs exist) */}
+        {hasHumanInputs && (responding || !contentIsEmpty || hasAgentThoughts || generationContentRenderIsUsed) && (
+          <div className={cn('group relative mt-2 pr-10', chatAnswerContainerInner)}>
+            <div className="absolute -top-2 left-6 h-3 w-0.5 bg-chat-answer-human-input-form-divider-bg" />
+            <div
+              ref={contentRef}
+              className="body-lg-regular relative inline-block w-full max-w-full rounded-2xl bg-chat-bubble-bg px-4 py-3 text-text-primary"
+            >
+              {
+                !responding && (
+                  <Operation
+                    hasWorkflowProcess={!!workflowProcess}
+                    maxSize={containerWidth - contentWidth - 4}
+                    contentWidth={contentWidth}
+                    item={item}
+                    question={question}
+                    index={index}
+                    showPromptLog={showPromptLog}
+                    noChatInput={noChatInput}
+                  />
+                )
+              }
+              {
+                generationContentRenderIsUsed && (
+                  <GenerationContent llmGenerationItems={llmGenerationItems} />
+                )
+              }
+              {
+                responding && contentIsEmpty && !hasAgentThoughts && (
+                  <div className="flex h-5 w-6 items-center justify-center">
+                    <LoadingAnim type="text" />
+                  </div>
+                )
+              }
+              {
+                !contentIsEmpty && !hasAgentThoughts && !generationContentRenderIsUsed && (
+                  <BasicContent item={item} />
+                )
+              }
+              {
+                hasAgentThoughts && (
+                  <AgentContent
+                    item={item}
+                    responding={responding}
+                    content={content}
+                  />
+                )
+              }
+              {
+                !!allFiles?.length && (
+                  <FileList
+                    className="my-1"
+                    files={allFiles}
+                    showDeleteAction={false}
+                    showDownloadAction
+                    canPreview
+                  />
+                )
+              }
+              {
+                !!message_files?.length && (
+                  <FileList
+                    className="my-1"
+                    files={message_files}
+                    showDeleteAction={false}
+                    showDownloadAction
+                    canPreview
+                  />
+                )
+              }
+              {
+                annotation?.id && annotation.authorName && (
+                  <EditTitle
+                    className="mt-1"
+                    title={t('editBy', { ns: 'appAnnotation', author: annotation.authorName })}
+                  />
+                )
+              }
+              <SuggestedQuestions item={item} />
+              {
+                !!citation?.length && !responding && (
+                  <Citation data={citation} showHitInfo={config?.supportCitationHitInfo} />
+                )
+              }
+              {
+                typeof item.siblingCount === 'number'
+                && item.siblingCount > 1
+                && (
+                  <ContentSwitch
+                    count={item.siblingCount}
+                    currentIndex={item.siblingIndex}
+                    prevDisabled={!item.prevSibling}
+                    nextDisabled={!item.nextSibling}
+                    switchSibling={handleSwitchSibling}
+                  />
+                )
+              }
+            </div>
          </div>
-        </div>
+        )}
+
+        {/* Original single block layout (when no human inputs) */}
+        {!hasHumanInputs && (
+          <div className={cn('group relative pr-10', chatAnswerContainerInner)}>
+            <div
+              ref={contentRef}
+              className={cn('body-lg-regular relative inline-block max-w-full rounded-2xl bg-chat-bubble-bg px-4 py-3 text-text-primary', workflowProcess && 'w-full')}
+            >
+              {
+                !responding && (
+                  <Operation
+                    hasWorkflowProcess={!!workflowProcess}
+                    maxSize={containerWidth - contentWidth - 4}
+                    contentWidth={contentWidth}
+                    item={item}
+                    question={question}
+                    index={index}
+                    showPromptLog={showPromptLog}
+                    noChatInput={noChatInput}
+                  />
+                )
+              }
+              {/** Render workflow process */}
+              {
+                workflowProcess && (
+                  <WorkflowProcessItem
+                    data={workflowProcess}
+                    item={item}
+                    hideProcessDetail={hideProcessDetail}
+                    readonly={hideProcessDetail && appData ? !appData.site?.show_workflow_steps : undefined}
+                  />
+                )
+              }
+              {
+                generationContentRenderIsUsed && (
+                  <GenerationContent llmGenerationItems={llmGenerationItems} />
+                )
+              }
+              {
+                responding && contentIsEmpty && !hasAgentThoughts && (
+                  <div className="flex h-5 w-6 items-center justify-center">
+                    <LoadingAnim type="text" />
+                  </div>
+                )
+              }
+              {
+                !contentIsEmpty && !hasAgentThoughts && !generationContentRenderIsUsed && (
+                  <BasicContent item={item} />
+                )
+              }
+              {
+                hasAgentThoughts && (
+                  <AgentContent
+                    item={item}
+                    responding={responding}
+                    content={content}
+                  />
+                )
+              }
+              {
+                !!allFiles?.length && (
+                  <FileList
+                    className="my-1"
+                    files={allFiles}
+                    showDeleteAction={false}
+                    showDownloadAction
+                    canPreview
+                  />
+                )
+              }
+              {
+                !!message_files?.length && (
+                  <FileList
+                    className="my-1"
+                    files={message_files}
+                    showDeleteAction={false}
+                    showDownloadAction
+                    canPreview
+                  />
+                )
+              }
+              {
+                annotation?.id && annotation.authorName && (
+                  <EditTitle
+                    className="mt-1"
+                    title={t('editBy', { ns: 'appAnnotation', author: annotation.authorName })}
+                  />
+                )
+              }
+              <SuggestedQuestions item={item} />
+              {
+                !!citation?.length && !responding && (
+                  <Citation data={citation} showHitInfo={config?.supportCitationHitInfo} />
+                )
+              }
+              {
+                typeof item.siblingCount === 'number'
+                && item.siblingCount > 1 && (
+                  <ContentSwitch
+                    count={item.siblingCount}
+                    currentIndex={item.siblingIndex}
+                    prevDisabled={!item.prevSibling}
+                    nextDisabled={!item.nextSibling}
+                    switchSibling={handleSwitchSibling}
+                  />
+                )
+              }
+            </div>
+          </div>
+        )}
        <More more={more} />
      </div>
    </div>
--- a/web/app/components/base/chat/chat/answer/operation.tsx
+++ b/web/app/components/base/chat/chat/answer/operation.tsx
@@ -69,6 +69,7 @@ const Operation: FC<OperationProps> = ({
    feedback,
    adminFeedback,
    agent_thoughts,
+    humanInputFormDataList,
  } = item
  const [userLocalFeedback, setUserLocalFeedback] = useState(feedback)
  const [adminLocalFeedback, setAdminLocalFeedback] = useState(adminFeedback)
@@ -186,7 +187,7 @@ const Operation: FC<OperationProps> = ({
        )}
        style={(!hasWorkflowProcess && positionRight) ? { left: contentWidth + 8 } : {}}
      >
-        {shouldShowUserFeedbackBar && (
+        {shouldShowUserFeedbackBar && !humanInputFormDataList?.length && (
          <div className={cn(
            'ml-1 items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm',
            hasUserFeedback ? 'flex' : 'hidden group-hover:flex',
@@ -226,7 +227,7 @@ const Operation: FC<OperationProps> = ({
                )}
          </div>
        )}
-        {shouldShowAdminFeedbackBar && (
+        {shouldShowAdminFeedbackBar && !humanInputFormDataList?.length && (
          <div className={cn(
            'ml-1 items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm',
            (hasAdminFeedback || hasUserFeedback) ? 'flex' : 'hidden group-hover:flex',
@@ -305,26 +306,28 @@ const Operation: FC<OperationProps> = ({
        )}
        {!isOpeningStatement && (
          <div className="ml-1 hidden items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm group-hover:flex">
-            {(config?.text_to_speech?.enabled) && (
+            {(config?.text_to_speech?.enabled && !humanInputFormDataList?.length) && (
              <NewAudioButton
                id={id}
                value={content}
                voice={config?.text_to_speech?.voice}
              />
            )}
-            <ActionButton onClick={() => {
-              copy(content)
-              Toast.notify({ type: 'success', message: t('actionMsg.copySuccessfully', { ns: 'common' }) })
-            }}
-            >
-              <RiClipboardLine className="h-4 w-4" />
-            </ActionButton>
+            {!humanInputFormDataList?.length && (
+              <ActionButton onClick={() => {
+                copy(content)
+                Toast.notify({ type: 'success', message: t('actionMsg.copySuccessfully', { ns: 'common' }) })
+              }}
+              >
+                <RiClipboardLine className="h-4 w-4" />
+              </ActionButton>
+            )}
            {!noChatInput && (
              <ActionButton onClick={() => onRegenerate?.(item)}>
                <RiResetLeftLine className="h-4 w-4" />
              </ActionButton>
            )}
-            {(config?.supportAnnotation && config.annotation_reply?.enabled) && (
+            {config?.supportAnnotation && config.annotation_reply?.enabled && !humanInputFormDataList?.length && (
              <AnnotationCtrlButton
                appId={config?.appId || ''}
                messageId={id}
--- a/web/app/components/base/chat/chat/answer/workflow-process.tsx
+++ b/web/app/components/base/chat/chat/answer/workflow-process.tsx
@@ -3,6 +3,7 @@ import {
  RiArrowRightSLine,
  RiErrorWarningFill,
  RiLoader2Line,
+  RiPauseCircleFill,
 } from '@remixicon/react'
 import {
  useEffect,
@@ -34,6 +35,8 @@ const WorkflowProcessItem = ({
  const running = data.status === WorkflowRunningStatus.Running
  const succeeded = data.status === WorkflowRunningStatus.Succeeded
  const failed = data.status === WorkflowRunningStatus.Failed || data.status === WorkflowRunningStatus.Stopped
+  const paused = data.status === WorkflowRunningStatus.Paused
+  const latestNode = data.tracing[data.tracing.length - 1]

  useEffect(() => {
    setCollapse(!expand)
@@ -50,7 +53,10 @@ const WorkflowProcessItem = ({
        running && !collapse && 'bg-background-section-burn',
        succeeded && !collapse && 'bg-state-success-hover',
        failed && !collapse && 'bg-state-destructive-hover',
-        collapse && 'bg-workflow-process-bg',
+        paused && !collapse && 'bg-state-warning-hover',
+        collapse && !failed && !paused && 'bg-workflow-process-bg',
+        collapse && paused && 'bg-workflow-process-paused-bg',
+        collapse && failed && 'bg-workflow-process-failed-bg',
      )}
    >
      <div
@@ -72,8 +78,13 @@ const WorkflowProcessItem = ({
            <RiErrorWarningFill className="mr-1 h-3.5 w-3.5 shrink-0 text-text-destructive" />
          )
        }
+        {
+          paused && (
+            <RiPauseCircleFill className="mr-1 h-3.5 w-3.5 shrink-0 text-text-warning-secondary" />
+          )
+        }
        <div className={cn('system-xs-medium text-text-secondary', !collapse && 'grow')}>
-          {t('common.workflowProcess', { ns: 'workflow' })}
+          {!collapse ? t('common.workflowProcess', { ns: 'workflow' }) : latestNode?.title}
        </div>
        <RiArrowRightSLine className={cn('ml-1 h-4 w-4 text-text-tertiary', !collapse && 'rotate-90')} />
      </div>
--- a/web/app/components/base/chat/chat/context.tsx
+++ b/web/app/components/base/chat/chat/context.tsx
@@ -16,7 +16,8 @@ export type ChatContextValue = Pick<ChatProps, 'config'
  | 'onAnnotationAdded'
  | 'onAnnotationRemoved'
  | 'disableFeedback'
-  | 'onFeedback'> & {
+  | 'onFeedback'
+  | 'getHumanInputNodeData'> & {
    readonly?: boolean
  }

@@ -45,6 +46,7 @@ export const ChatContextProvider = ({
  onAnnotationRemoved,
  disableFeedback,
  onFeedback,
+  getHumanInputNodeData,
 }: ChatContextProviderProps) => {
  return (
    <ChatContext.Provider value={{
@@ -62,6 +64,7 @@ export const ChatContextProvider = ({
      onAnnotationRemoved,
      disableFeedback,
      onFeedback,
+      getHumanInputNodeData,
    }}
    >
      {children}
--- a/web/app/components/base/chat/chat/hooks.hitl.spec.tsx
+++ b/web/app/components/base/chat/chat/hooks.hitl.spec.tsx
@@ -0,0 +1,141 @@
+import { act, renderHook } from '@testing-library/react'
+import { vi } from 'vitest'
+import { useChat } from './hooks'
+
+const { mockSseGet, mockSsePost } = vi.hoisted(() => ({
+  mockSseGet: vi.fn(),
+  mockSsePost: vi.fn(),
+}))
+
+vi.mock('next/navigation', () => ({
+  useParams: () => ({}),
+  usePathname: () => '/app/test',
+}))
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}))
+
+vi.mock('@/hooks/use-timestamp', () => ({
+  default: () => ({
+    formatTime: () => '12:00 PM',
+  }),
+}))
+
+vi.mock('@/app/components/base/toast', () => ({
+  useToastContext: () => ({
+    notify: vi.fn(),
+  }),
+}))
+
+vi.mock('@/app/components/base/audio-btn/audio.player.manager', () => ({
+  AudioPlayerManager: {
+    getInstance: () => ({
+      getAudioPlayer: vi.fn(),
+    }),
+  },
+}))
+
+vi.mock('@/app/components/base/file-uploader/utils', () => ({
+  getProcessedFiles: (files: unknown[]) => files,
+  getProcessedFilesFromResponse: (files: unknown[]) => files,
+}))
+
+vi.mock('@/service/base', () => ({
+  sseGet: (...args: unknown[]) => mockSseGet(...args),
+  ssePost: (...args: unknown[]) => mockSsePost(...args),
+}))
+
+type HitlTreeNode = {
+  id: string
+  content: string
+  isAnswer: boolean
+  workflow_run_id?: string
+  humanInputFormDataList?: Array<{ node_id: string }>
+  children?: HitlTreeNode[]
+}
+
+describe('useChat HITL regression', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should subscribe with include_state_snapshot when switching to sibling with pending human input', () => {
+    const prevChatTree: HitlTreeNode[] = [
+      {
+        id: 'question-1',
+        content: 'Q1',
+        isAnswer: false,
+        children: [
+          {
+            id: 'answer-1',
+            content: '',
+            isAnswer: true,
+            workflow_run_id: 'workflow-run-1',
+            humanInputFormDataList: [{ node_id: 'node-1' }],
+            children: [],
+          },
+        ],
+      },
+    ]
+
+    const { result } = renderHook(() => useChat(
+      undefined,
+      { inputs: {}, inputsForm: [] },
+      prevChatTree as unknown as NonNullable<Parameters<typeof useChat>[2]>,
+    ))
+
+    act(() => {
+      result.current.handleSwitchSibling('answer-1', {})
+    })
+
+    expect(mockSseGet).toHaveBeenCalledWith(
+      '/workflow/workflow-run-1/events?include_state_snapshot=true',
+      {},
+      expect.any(Object),
+    )
+  })
+
+  it('should open paused workflow event stream when workflow_paused event arrives in send flow', () => {
+    mockSsePost.mockImplementation((_, __, otherOptions: {
+      onWorkflowStarted?: (payload: { workflow_run_id: string, task_id: string, conversation_id?: string, message_id?: string }) => void
+      onWorkflowPaused?: (payload: { data: { workflow_run_id: string } }) => void
+    }) => {
+      otherOptions.onWorkflowStarted?.({
+        workflow_run_id: 'workflow-run-2',
+        task_id: 'task-1',
+        conversation_id: 'conversation-1',
+        message_id: 'message-1',
+      })
+      otherOptions.onWorkflowPaused?.({
+        data: {
+          workflow_run_id: 'workflow-run-2',
+        },
+      })
+    })
+
+    const { result } = renderHook(() => useChat(
+      undefined,
+      { inputs: {}, inputsForm: [] },
+      [],
+    ))
+
+    act(() => {
+      result.current.handleSend(
+        '/chat-messages',
+        {
+          query: 'hello',
+        },
+        {},
+      )
+    })
+
+    expect(mockSseGet).toHaveBeenCalledWith(
+      '/workflow/workflow-run-2/events',
+      {},
+      expect.any(Object),
+    )
+  })
+})
--- a/web/app/components/base/chat/chat/hooks.ts
+++ b/web/app/components/base/chat/chat/hooks.ts
--- a/web/app/components/base/chat/chat/index.tsx
+++ b/web/app/components/base/chat/chat/index.tsx
@@ -75,6 +75,9 @@ export type ChatProps = {
  noSpacing?: boolean
  inputDisabled?: boolean
  sidebarCollapseState?: boolean
+  hideAvatar?: boolean
+  onHumanInputFormSubmit?: (formToken: string, formData: any) => Promise<void>
+  getHumanInputNodeData?: (nodeID: string) => any
 }

 const Chat: FC<ChatProps> = ({
@@ -116,6 +119,9 @@ const Chat: FC<ChatProps> = ({
  noSpacing,
  inputDisabled,
  sidebarCollapseState,
+  hideAvatar,
+  onHumanInputFormSubmit,
+  getHumanInputNodeData,
 }) => {
  const { t } = useTranslation()
  const { currentLogItem, setCurrentLogItem, showPromptLogModal, setShowPromptLogModal, showAgentLogModal, setShowAgentLogModal } = useAppStore(useShallow(state => ({
@@ -265,6 +271,7 @@ const Chat: FC<ChatProps> = ({
      onAnnotationRemoved={onAnnotationRemoved}
      disableFeedback={disableFeedback}
      onFeedback={onFeedback}
+      getHumanInputNodeData={getHumanInputNodeData}
    >
      <div className={cn('relative h-full', isTryApp && 'flex flex-col')}>
        <div
@@ -295,6 +302,8 @@ const Chat: FC<ChatProps> = ({
                      hideProcessDetail={hideProcessDetail}
                      noChatInput={noChatInput}
                      switchSibling={switchSibling}
+                      hideAvatar={hideAvatar}
+                      onHumanInputFormSubmit={onHumanInputFormSubmit}
                    />
                  )
                }
@@ -306,6 +315,7 @@ const Chat: FC<ChatProps> = ({
                    theme={themeBuilder?.theme}
                    enableEdit={config?.questionEditEnable}
                    switchSibling={switchSibling}
+                    hideAvatar={hideAvatar}
                  />
                )
              })
--- a/web/app/components/base/chat/chat/question.tsx
+++ b/web/app/components/base/chat/chat/question.tsx
@@ -32,6 +32,7 @@ type QuestionProps = {
  theme: Theme | null | undefined
  enableEdit?: boolean
  switchSibling?: (siblingMessageId: string) => void
+  hideAvatar?: boolean
 }

 const Question: FC<QuestionProps> = ({
@@ -40,6 +41,7 @@ const Question: FC<QuestionProps> = ({
  theme,
  enableEdit = true,
  switchSibling,
+  hideAvatar,
 }) => {
  const { t } = useTranslation()

@@ -174,15 +176,17 @@ const Question: FC<QuestionProps> = ({
        </div>
        <div className="mt-1 h-[18px]" />
      </div>
-      <div className="h-10 w-10 shrink-0">
-        {
-          questionIcon || (
-            <div className="h-full w-full rounded-full border-[0.5px] border-black/5">
-              <User className="h-full w-full" />
-            </div>
-          )
-        }
-      </div>
+      {!hideAvatar && (
+        <div className="h-10 w-10 shrink-0">
+          {
+            questionIcon || (
+              <div className="h-full w-full rounded-full border-[0.5px] border-black/5">
+                <User className="h-full w-full" />
+              </div>
+            )
+          }
+        </div>
+      )}
    </div>
  )
 }
--- a/web/app/components/base/chat/chat/type.ts
+++ b/web/app/components/base/chat/chat/type.ts
@@ -2,7 +2,13 @@ import type { FileEntity } from '@/app/components/base/file-uploader/types'
 import type { TypeWithI18N } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { InputVarType } from '@/app/components/workflow/types'
 import type { Annotation, MessageRating } from '@/models/log'
-import type { FileResponse, IconObject, LLMGenerationItem } from '@/types/workflow'
+import type {
+  FileResponse,
+  HumanInputFilledFormData,
+  HumanInputFormData,
+  IconObject,
+  LLMGenerationItem,
+} from '@/types/workflow'

 export type MessageMore = {
  time: string
@@ -64,6 +70,19 @@ export type CitationItem = {
  word_count: number
 }

+export type ExtraContent
+  = {
+    type: 'human_input'
+    submitted: false
+    form_definition: HumanInputFormData
+    workflow_run_id: string
+  }
+  | {
+    type: 'human_input'
+    submitted: true
+    form_submission_data: HumanInputFilledFormData
+  }
+
 export type IChatItem = {
  id: string
  content: string
@@ -105,6 +124,10 @@ export type IChatItem = {
  prevSibling?: string
  nextSibling?: string
  llmGenerationItems?: LLMGenerationItem[]
+  // for human input
+  humanInputFormDataList?: HumanInputFormData[]
+  humanInputFilledFormDataList?: HumanInputFilledFormData[]
+  extra_contents?: ExtraContent[]
 }

 export type Metadata = {
--- a/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
@@ -2,6 +2,7 @@ import type { FileEntity } from '../../file-uploader/types'
 import type {
  ChatConfig,
  ChatItem,
+  ChatItemInTree,
  OnSend,
 } from '../types'
 import { useCallback, useEffect, useMemo, useState } from 'react'
@@ -17,7 +18,9 @@ import {
  fetchSuggestedQuestions,
  getUrl,
  stopChatMessageResponding,
+  submitHumanInputForm,
 } from '@/service/share'
+import { submitHumanInputForm as submitHumanInputFormService } from '@/service/workflow'
 import { TransferMethod } from '@/types/app'
 import { cn } from '@/utils/classnames'
 import Avatar from '../../avatar'
@@ -70,9 +73,9 @@ const ChatWrapper = () => {
  }, [appParams, currentConversationItem?.introduction])
  const {
    chatList,
-    setTargetMessageId,
    handleSend,
    handleStop,
+    handleSwitchSibling,
    isResponding: respondingState,
    suggestedQuestions,
  } = useChat(
@@ -130,6 +133,40 @@ const ChatWrapper = () => {
    setIsResponding(respondingState)
  }, [respondingState, setIsResponding])

+  // Resume paused workflows when chat history is loaded
+  useEffect(() => {
+    if (!appPrevChatList || appPrevChatList.length === 0)
+      return
+
+    // Find the last answer item with workflow_run_id that needs resumption (DFS - find deepest first)
+    let lastPausedNode: ChatItemInTree | undefined
+    const findLastPausedWorkflow = (nodes: ChatItemInTree[]) => {
+      nodes.forEach((node) => {
+        // DFS: recurse to children first
+        if (node.children && node.children.length > 0)
+          findLastPausedWorkflow(node.children)
+
+        // Track the last node with humanInputFormDataList
+        if (node.isAnswer && node.workflow_run_id && node.humanInputFormDataList && node.humanInputFormDataList.length > 0)
+          lastPausedNode = node
+      })
+    }
+
+    findLastPausedWorkflow(appPrevChatList)
+
+    // Only resume the last paused workflow
+    if (lastPausedNode) {
+      handleSwitchSibling(
+        lastPausedNode.id,
+        {
+          onGetSuggestedQuestions: responseItemId => fetchSuggestedQuestions(responseItemId, appSourceType, appId),
+          onConversationComplete: currentConversationId ? undefined : handleNewConversationCompleted,
+          isPublicAPI: appSourceType === AppSourceType.webApp,
+        },
+      )
+    }
+  }, [])
+
  const doSend: OnSend = useCallback((message, files, isRegenerate = false, parentAnswer: ChatItem | null = null) => {
    const data: any = {
      query: message,
@@ -147,7 +184,7 @@ const ChatWrapper = () => {
        isPublicAPI: appSourceType === AppSourceType.webApp,
      },
    )
-  }, [currentConversationId, currentConversationInputs, newConversationInputs, chatList, handleSend, isInstalledApp, appId, handleNewConversationCompleted])
+  }, [currentConversationId, currentConversationInputs, newConversationInputs, chatList, handleSend, appSourceType, appId, handleNewConversationCompleted])

  const doRegenerate = useCallback((chatItem: ChatItem, editedQuestion?: { message: string, files?: FileEntity[] }) => {
    const question = editedQuestion ? chatItem : chatList.find(item => item.id === chatItem.parentMessageId)!
@@ -155,6 +192,14 @@ const ChatWrapper = () => {
    doSend(editedQuestion ? editedQuestion.message : question.content, editedQuestion ? editedQuestion.files : question.message_files, true, isValidGeneratedAnswer(parentAnswer) ? parentAnswer : null)
  }, [chatList, doSend])

+  const doSwitchSibling = useCallback((siblingMessageId: string) => {
+    handleSwitchSibling(siblingMessageId, {
+      onGetSuggestedQuestions: responseItemId => fetchSuggestedQuestions(responseItemId, appSourceType, appId),
+      onConversationComplete: currentConversationId ? undefined : handleNewConversationCompleted,
+      isPublicAPI: appSourceType === AppSourceType.webApp,
+    })
+  }, [handleSwitchSibling, appSourceType, appId, currentConversationId, handleNewConversationCompleted])
+
  const messageList = useMemo(() => {
    if (currentConversationId || chatList.length > 1)
      return chatList
@@ -178,6 +223,13 @@ const ChatWrapper = () => {
    }
  }, [inputsForms.length, isMobile, currentConversationId, collapsed, allInputsHidden])

+  const handleSubmitHumanInputForm = useCallback(async (formToken: string, formData: any) => {
+    if (isInstalledApp)
+      await submitHumanInputFormService(formToken, formData)
+    else
+      await submitHumanInputForm(formToken, formData)
+  }, [isInstalledApp])
+
  const welcome = useMemo(() => {
    const welcomeMessage = chatList.find(item => item.isOpeningStatement)
    if (respondingState)
@@ -223,7 +275,7 @@ const ChatWrapper = () => {
        </div>
      </div>
    )
-  }, [appData?.site, chatList, collapsed, currentConversationId, inputsForms.length, respondingState, allInputsHidden])
+  }, [chatList, respondingState, currentConversationId, collapsed, inputsForms.length, allInputsHidden, appData?.site, isMobile])

  const answerIcon = isDify()
    ? <LogoAvatar className="relative shrink-0" />
@@ -253,6 +305,7 @@ const ChatWrapper = () => {
      inputsForm={inputsForms}
      onRegenerate={doRegenerate}
      onStopResponding={handleStop}
+      onHumanInputFormSubmit={handleSubmitHumanInputForm}
      chatNode={(
        <>
          {chatNode}
@@ -266,7 +319,7 @@ const ChatWrapper = () => {
      answerIcon={answerIcon}
      hideProcessDetail
      themeBuilder={themeBuilder}
-      switchSibling={siblingMessageId => setTargetMessageId(siblingMessageId)}
+      switchSibling={doSwitchSibling}
      inputDisabled={inputDisabled}
      questionIcon={
        initUserVariables?.avatar_url
--- a/web/app/components/base/chat/types.ts
+++ b/web/app/components/base/chat/types.ts
@@ -5,7 +5,7 @@ import type {
  ModelConfig,
  VisionSettings,
 } from '@/types/app'
-import type { NodeTracing } from '@/types/workflow'
+import type { HumanInputFilledFormData, HumanInputFormData, NodeTracing } from '@/types/workflow'

 export type {
  Inputs,
@@ -67,6 +67,8 @@ export type WorkflowProcess = {
  expand?: boolean // for UI
  resultText?: string
  files?: FileEntity[]
+  humanInputFormDataList?: HumanInputFormData[]
+  humanInputFilledFormDataList?: HumanInputFilledFormData[]
 }

 export type ChatItem = IChatItem & {
--- a/web/app/components/base/icons/assets/public/other/slack.svg
+++ b/web/app/components/base/icons/assets/public/other/slack.svg
@@ -0,0 +1,6 @@
+<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.625 0C9.27992 0.000320434 8.93828 0.0686147 8.6196 0.200983C8.30091 0.333351 8.01142 0.527199 7.76766 0.771458C7.5239 1.01572 7.33064 1.3056 7.19893 1.62456C7.06721 1.94351 6.99962 2.28529 7 2.63037C6.99968 2.97541 7.06732 3.31714 7.19907 3.63603C7.33081 3.95493 7.52408 4.24476 7.76783 4.48897C8.01159 4.73317 8.30105 4.92698 8.61971 5.05932C8.93836 5.19165 9.27996 5.25993 9.625 5.26025H12.25V2.63037C12.2504 2.28529 12.1828 1.94351 12.0511 1.62456C11.9194 1.3056 11.7261 1.01572 11.4823 0.771458C11.2386 0.527199 10.9491 0.333351 10.6304 0.200983C10.3117 0.0686147 9.97008 0.000320434 9.625 0ZM9.625 7.01416H2.625C2.27996 7.01448 1.93836 7.08276 1.61971 7.21509C1.30106 7.34743 1.01159 7.54124 0.767835 7.78544C0.524081 8.02965 0.330814 8.31948 0.199069 8.63838C0.0673241 8.95728 -0.000319124 9.299 1.63476e-06 9.64404C-0.000383292 9.98912 0.0672126 10.3309 0.198929 10.6499C0.330645 10.9688 0.523902 11.2587 0.767662 11.503C1.01142 11.7472 1.30091 11.9411 1.6196 12.0734C1.93828 12.2058 2.27992 12.2741 2.625 12.2744H9.625C9.97008 12.2741 10.3117 12.2058 10.6304 12.0734C10.9491 11.9411 11.2386 11.7472 11.4823 11.503C11.7261 11.2587 11.9194 10.9688 12.0511 10.6499C12.1828 10.3309 12.2504 9.98912 12.25 9.64404C12.2503 9.299 12.1827 8.95728 12.0509 8.63838C11.9192 8.31948 11.7259 8.02965 11.4822 7.78544C11.2384 7.54124 10.9489 7.34743 10.6303 7.21509C10.3116 7.08276 9.97004 7.01448 9.625 7.01416Z" fill="#44BEDF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.25 9.64404C26.2503 9.299 26.1827 8.95728 26.0509 8.63838C25.9192 8.31948 25.7259 8.02965 25.4822 7.78544C25.2384 7.54124 24.9489 7.34743 24.6303 7.21509C24.3116 7.08276 23.97 7.01448 23.625 7.01416C23.28 7.01448 22.9384 7.08276 22.6197 7.21509C22.3011 7.34743 22.0116 7.54124 21.7678 7.78544C21.5241 8.02965 21.3308 8.31948 21.1991 8.63838C21.0673 8.95728 20.9997 9.299 21 9.64404V12.2744H23.625C23.9701 12.2741 24.3117 12.2058 24.6304 12.0734C24.9491 11.9411 25.2386 11.7472 25.4823 11.503C25.7261 11.2587 25.9194 10.9688 26.0511 10.6499C26.1828 10.3309 26.2504 9.98912 26.25 9.64404ZM19.25 9.64404V2.63037C19.2504 2.28529 19.1828 1.94351 19.0511 1.62456C18.9194 1.3056 18.7261 1.01572 18.4823 0.771458C18.2386 0.527199 17.9491 0.333351 17.6304 0.200983C17.3117 0.0686147 16.9701 0.000320434 16.625 0C16.2799 0.000320434 15.9383 0.0686147 15.6196 0.200983C15.3009 0.333351 15.0114 0.527199 14.7677 0.771458C14.5239 1.01572 14.3306 1.3056 14.1989 1.62456C14.0672 1.94351 13.9996 2.28529 14 2.63037V9.64404C13.9996 9.98912 14.0672 10.3309 14.1989 10.6499C14.3306 10.9688 14.5239 11.2587 14.7677 11.503C15.0114 11.7472 15.3009 11.9411 15.6196 12.0734C15.9383 12.2058 16.2799 12.2741 16.625 12.2744C16.9701 12.2741 17.3117 12.2058 17.6304 12.0734C17.9491 11.9411 18.2386 11.7472 18.4823 11.503C18.7261 11.2587 18.9194 10.9688 19.0511 10.6499C19.1828 10.3309 19.2504 9.98912 19.25 9.64404Z" fill="#2EB67D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.625 26.302C16.9701 26.3017 17.3117 26.2334 17.6304 26.101C17.9491 25.9686 18.2386 25.7748 18.4823 25.5305C18.7261 25.2863 18.9194 24.9964 19.0511 24.6774C19.1828 24.3585 19.2504 24.0167 19.25 23.6716C19.2503 23.3266 19.1827 22.9849 19.0509 22.666C18.9192 22.3471 18.7259 22.0572 18.4822 21.813C18.2384 21.5688 17.9489 21.375 17.6303 21.2427C17.3116 21.1103 16.97 21.0421 16.625 21.0417H14V23.6716C13.9996 24.0167 14.0672 24.3585 14.1989 24.6774C14.3306 24.9964 14.5239 25.2863 14.7677 25.5305C15.0114 25.7748 15.3009 25.9686 15.6196 26.101C15.9383 26.2334 16.2799 26.3017 16.625 26.302ZM16.625 19.2878H23.625C23.97 19.2875 24.3116 19.2192 24.6303 19.0869C24.9489 18.9546 25.2384 18.7608 25.4822 18.5166C25.7259 18.2723 25.9192 17.9825 26.0509 17.6636C26.1827 17.3447 26.2503 17.003 26.25 16.658C26.2504 16.3129 26.1828 15.9711 26.0511 15.6521C25.9194 15.3332 25.7261 15.0433 25.4823 14.799C25.2386 14.5548 24.9491 14.3609 24.6304 14.2286C24.3117 14.0962 23.9701 14.0279 23.625 14.0276H16.625C16.2799 14.0279 15.9383 14.0962 15.6196 14.2286C15.3009 14.3609 15.0114 14.5548 14.7677 14.799C14.5239 15.0433 14.3306 15.3332 14.1989 15.6521C14.0672 15.9711 13.9996 16.3129 14 16.658C13.9997 17.003 14.0673 17.3447 14.1991 17.6636C14.3308 17.9825 14.5241 18.2723 14.7678 18.5166C15.0116 18.7608 15.3011 18.9546 15.6197 19.0869C15.9384 19.2192 16.28 19.2875 16.625 19.2878Z" fill="#ECB22E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.22485e-06 16.658C-0.000318534 17.003 0.0673247 17.3447 0.19907 17.6636C0.330815 17.9825 0.524081 18.2723 0.767835 18.5166C1.01159 18.7608 1.30106 18.9546 1.61971 19.0869C1.93836 19.2192 2.27996 19.2875 2.625 19.2878C2.97004 19.2875 3.31164 19.2192 3.63029 19.0869C3.94895 18.9546 4.23841 18.7608 4.48217 18.5166C4.72592 18.2723 4.91919 17.9825 5.05093 17.6636C5.18268 17.3447 5.25032 17.003 5.25 16.658V14.0276H2.625C2.27988 14.0279 1.9382 14.0962 1.61948 14.2286C1.30077 14.361 1.01126 14.5549 0.76749 14.7992C0.523723 15.0435 0.330477 15.3335 0.198789 15.6525C0.0671016 15.9715 -0.000446885 16.3128 2.22485e-06 16.658ZM7 16.658V23.6716C6.99962 24.0167 7.06721 24.3585 7.19893 24.6774C7.33064 24.9964 7.5239 25.2863 7.76766 25.5305C8.01142 25.7748 8.30091 25.9686 8.6196 26.101C8.93828 26.2334 9.27992 26.3017 9.625 26.302C9.97008 26.3017 10.3117 26.2334 10.6304 26.101C10.9491 25.9686 11.2386 25.7748 11.4823 25.5305C11.7261 25.2863 11.9194 24.9964 12.0511 24.6774C12.1828 24.3585 12.2504 24.0167 12.25 23.6716V16.6584C12.2504 16.3134 12.1828 15.9716 12.0511 15.6526C11.9194 15.3337 11.7261 15.0438 11.4823 14.7995C11.2386 14.5553 10.9491 14.3614 10.6304 14.2291C10.3117 14.0967 9.97008 14.0284 9.625 14.0281C9.27992 14.0284 8.93828 14.0967 8.6196 14.2291C8.30091 14.3614 8.01142 14.5553 7.76766 14.7995C7.5239 15.0438 7.33064 15.3337 7.19893 15.6526C7.06721 15.9716 6.99962 16.3129 7 16.658Z" fill="#E01E5A"/>
+</svg>
--- a/web/app/components/base/icons/assets/public/other/teams.svg
+++ b/web/app/components/base/icons/assets/public/other/teams.svg
@@ -0,0 +1,19 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_20307_29670)">
+<path opacity="0.1" d="M9.33332 11.8067V20.4167C9.33204 21.432 9.57619 22.4327 10.045 23.3333H15.8783C16.2912 23.305 16.6807 23.1312 16.9776 22.8428C17.2745 22.5545 17.4596 22.1702 17.5 21.7583V10.5H17.1733H10.64C10.2934 10.5 9.96108 10.6377 9.71603 10.8827C9.47098 11.1278 9.33332 11.4601 9.33332 11.8067Z" fill="black"/>
+<path opacity="0.1" d="M16.135 7H12.635C12.8805 7.78672 13.3726 8.47355 14.0386 8.9589C14.7047 9.44425 15.5093 9.70234 16.3333 9.695C16.7301 9.68885 17.1235 9.62197 17.5 9.49667V8.33C17.488 7.97504 17.3392 7.63847 17.0849 7.39061C16.8305 7.14276 16.4902 7.00281 16.135 7Z" fill="black"/>
+<path d="M26.6817 10.5H20.8484L19.2267 11.8183V18.34C19.2846 19.4628 19.7715 20.5204 20.5867 21.2946C21.4019 22.0689 22.4833 22.5005 23.6075 22.5005C24.7318 22.5005 25.8131 22.0689 26.6283 21.2946C27.4436 20.5204 27.9304 19.4628 27.9884 18.34V11.8183C27.9899 11.6458 27.9572 11.4746 27.8923 11.3147C27.8273 11.1548 27.7313 11.0094 27.6098 10.8868C27.4883 10.7643 27.3437 10.667 27.1844 10.6006C27.0251 10.5342 26.8543 10.5 26.6817 10.5Z" fill="#5059C9"/>
+<path d="M23.9167 9.33333C25.5275 9.33333 26.8333 8.0275 26.8333 6.41667C26.8333 4.80584 25.5275 3.5 23.9167 3.5C22.3058 3.5 21 4.80584 21 6.41667C21 8.0275 22.3058 9.33333 23.9167 9.33333Z" fill="#5059C9"/>
+<path d="M10.64 10.5H20.86C21.2065 10.5 21.5389 10.6377 21.7839 10.8827C22.029 11.1278 22.1666 11.4601 22.1666 11.8067V20.4167C22.1666 22.1185 21.4906 23.7506 20.2872 24.9539C19.0839 26.1573 17.4518 26.8333 15.75 26.8333C14.0482 26.8333 12.4161 26.1573 11.2127 24.9539C10.0094 23.7506 9.33331 22.1185 9.33331 20.4167V11.8067C9.33331 11.4601 9.47098 11.1278 9.71603 10.8827C9.96107 10.6377 10.2934 10.5 10.64 10.5Z" fill="#7B83EB"/>
+<path d="M16.3333 9.69477C18.4661 9.69477 20.195 7.96584 20.195 5.8331C20.195 3.70036 18.4661 1.97144 16.3333 1.97144C14.2006 1.97144 12.4717 3.70036 12.4717 5.8331C12.4717 7.96584 14.2006 9.69477 16.3333 9.69477Z" fill="#7B83EB"/>
+<path opacity="0.5" d="M9.33332 11.8067V20.4167C9.33204 21.432 9.57619 22.4327 10.045 23.3333H15.8783C16.2912 23.305 16.6807 23.1312 16.9776 22.8428C17.2745 22.5545 17.4596 22.1702 17.5 21.7583V10.5H17.1733H10.64C10.2934 10.5 9.96108 10.6377 9.71603 10.8827C9.47098 11.1278 9.33332 11.4601 9.33332 11.8067Z" fill="black"/>
+<path opacity="0.5" d="M16.135 7H12.635C12.8805 7.78672 13.3726 8.47355 14.0386 8.9589C14.7047 9.44425 15.5093 9.70234 16.3333 9.695C16.7301 9.68885 17.1235 9.62197 17.5 9.49667V8.33C17.488 7.97504 17.3392 7.63847 17.0849 7.39061C16.8305 7.14276 16.4902 7.00281 16.135 7Z" fill="black"/>
+<path d="M14.9683 5.83325H1.365C0.611131 5.83325 0 6.44438 0 7.19825V20.8016C0 21.5555 0.611131 22.1666 1.365 22.1666H14.9683C15.7222 22.1666 16.3333 21.5555 16.3333 20.8016V7.19825C16.3333 6.44438 15.7222 5.83325 14.9683 5.83325Z" fill="#4B53BC"/>
+<path d="M11.8767 11.1766H9.08833V18.6666H7.25666V11.1766H4.45667V9.33325H11.8767V11.1766Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_20307_29670">
+<rect width="28" height="28" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/web/app/components/base/icons/assets/vender/workflow/human-in-loop.svg
+++ b/web/app/components/base/icons/assets/vender/workflow/human-in-loop.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.66634 2.66675C3.66634 2.29856 3.36787 2.00008 2.99967 2.00008C2.63149 2.00008 2.33301 2.29855 2.33301 2.66675L3.66634 2.66675ZM2.99967 5.33341H2.33301C2.33301 5.51023 2.40325 5.6798 2.52827 5.80482C2.65329 5.92984 2.82286 6.00008 2.99967 6.00008V5.33341ZM5.66641 6.00008C6.03459 6.00008 6.33307 5.7016 6.33307 5.33341C6.33307 4.96523 6.03459 4.66675 5.66641 4.66675L5.66641 6.00008ZM2.41183 5.01659C2.23816 5.34125 2.36056 5.74523 2.68522 5.91889C3.00988 6.09256 3.41385 5.97016 3.58752 5.6455L2.41183 5.01659ZM3.03395 8.58915C2.99109 8.22348 2.6599 7.96175 2.29421 8.00461C1.92853 8.04748 1.66682 8.37868 1.70967 8.74435L3.03395 8.58915ZM12.0439 5.05931C12.2607 5.3569 12.6777 5.42238 12.9753 5.20557C13.2729 4.98876 13.3383 4.57176 13.1215 4.27417L12.0439 5.05931ZM5.02145 13.5907C5.34627 13.7641 5.75013 13.6413 5.92349 13.3165C6.09685 12.9917 5.97407 12.5878 5.64925 12.4145L5.02145 13.5907ZM2.33301 2.66675L2.33301 5.33341H3.66634L3.66634 2.66675L2.33301 2.66675ZM2.99967 6.00008L5.66641 6.00008L5.66641 4.66675H2.99967L2.99967 6.00008ZM3.58752 5.6455C4.43045 4.06972 6.09066 3.00008 7.99968 3.00008V1.66675C5.57951 1.66675 3.47747 3.02445 2.41183 5.01659L3.58752 5.6455ZM7.99968 3.00008C9.66128 3.00008 11.1336 3.80991 12.0439 5.05931L13.1215 4.27417C11.9711 2.69513 10.1055 1.66675 7.99968 1.66675V3.00008ZM5.64925 12.4145C4.23557 11.6599 3.22828 10.2474 3.03395 8.58915L1.70967 8.74435C1.95639 10.8495 3.23403 12.6367 5.02145 13.5907L5.64925 12.4145Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.1946 8.13826C12.9027 7.84637 12.4294 7.84638 12.1375 8.13829L9.11842 11.1574C9.01642 11.2594 8.95025 11.3917 8.92985 11.5345C8.92985 11.5345 8.92985 11.5345 8.92985 11.5345L8.78508 12.5479L9.79846 12.4031C9.94127 12.3827 10.0736 12.3165 10.1756 12.2145L13.1947 9.19548C13.4866 8.90359 13.4866 8.43027 13.1946 8.13826C13.1947 8.13827 13.1946 8.13825 13.1946 8.13826ZM11.1947 7.19548C12.0073 6.38286 13.3249 6.38286 14.1375 7.19548C14.95 8.00814 14.9501 9.32565 14.1375 10.1383L11.1184 13.1574C10.8124 13.4633 10.4154 13.6618 9.98703 13.723L8.09369 13.9935C7.88596 14.0232 7.67639 13.9533 7.52801 13.805C7.37963 13.6566 7.30977 13.447 7.33945 13.2393L7.60991 11.3459C7.67111 10.9175 7.86961 10.5205 8.17561 10.2145L11.1947 7.19548Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.528 10.8048L10.528 8.80482L11.4708 7.86201L13.4708 9.86201L12.528 10.8048Z" fill="white"/>
+</svg>
--- a/web/app/components/base/icons/src/public/other/Slack.json
+++ b/web/app/components/base/icons/src/public/other/Slack.json
@@ -0,0 +1,61 @@
+{
+  "icon": {
+    "type": "element",
+    "isRootNode": true,
+    "name": "svg",
+    "attributes": {
+      "width": "27",
+      "height": "27",
+      "viewBox": "0 0 27 27",
+      "fill": "none",
+      "xmlns": "http://www.w3.org/2000/svg"
+    },
+    "children": [
+      {
+        "type": "element",
+        "name": "path",
+        "attributes": {
+          "fill-rule": "evenodd",
+          "clip-rule": "evenodd",
+          "d": "M9.625 0C9.27992 0.000320434 8.93828 0.0686147 8.6196 0.200983C8.30091 0.333351 8.01142 0.527199 7.76766 0.771458C7.5239 1.01572 7.33064 1.3056 7.19893 1.62456C7.06721 1.94351 6.99962 2.28529 7 2.63037C6.99968 2.97541 7.06732 3.31714 7.19907 3.63603C7.33081 3.95493 7.52408 4.24476 7.76783 4.48897C8.01159 4.73317 8.30105 4.92698 8.61971 5.05932C8.93836 5.19165 9.27996 5.25993 9.625 5.26025H12.25V2.63037C12.2504 2.28529 12.1828 1.94351 12.0511 1.62456C11.9194 1.3056 11.7261 1.01572 11.4823 0.771458C11.2386 0.527199 10.9491 0.333351 10.6304 0.200983C10.3117 0.0686147 9.97008 0.000320434 9.625 0ZM9.625 7.01416H2.625C2.27996 7.01448 1.93836 7.08276 1.61971 7.21509C1.30106 7.34743 1.01159 7.54124 0.767835 7.78544C0.524081 8.02965 0.330814 8.31948 0.199069 8.63838C0.0673241 8.95728 -0.000319124 9.299 1.63476e-06 9.64404C-0.000383292 9.98912 0.0672126 10.3309 0.198929 10.6499C0.330645 10.9688 0.523902 11.2587 0.767662 11.503C1.01142 11.7472 1.30091 11.9411 1.6196 12.0734C1.93828 12.2058 2.27992 12.2741 2.625 12.2744H9.625C9.97008 12.2741 10.3117 12.2058 10.6304 12.0734C10.9491 11.9411 11.2386 11.7472 11.4823 11.503C11.7261 11.2587 11.9194 10.9688 12.0511 10.6499C12.1828 10.3309 12.2504 9.98912 12.25 9.64404C12.2503 9.299 12.1827 8.95728 12.0509 8.63838C11.9192 8.31948 11.7259 8.02965 11.4822 7.78544C11.2384 7.54124 10.9489 7.34743 10.6303 7.21509C10.3116 7.08276 9.97004 7.01448 9.625 7.01416Z",
+          "fill": "#44BEDF"
+        },
+        "children": []
+      },
+      {
+        "type": "element",
+        "name": "path",
+        "attributes": {
+          "fill-rule": "evenodd",
+          "clip-rule": "evenodd",
+          "d": "M26.25 9.64404C26.2503 9.299 26.1827 8.95728 26.0509 8.63838C25.9192 8.31948 25.7259 8.02965 25.4822 7.78544C25.2384 7.54124 24.9489 7.34743 24.6303 7.21509C24.3116 7.08276 23.97 7.01448 23.625 7.01416C23.28 7.01448 22.9384 7.08276 22.6197 7.21509C22.3011 7.34743 22.0116 7.54124 21.7678 7.78544C21.5241 8.02965 21.3308 8.31948 21.1991 8.63838C21.0673 8.95728 20.9997 9.299 21 9.64404V12.2744H23.625C23.9701 12.2741 24.3117 12.2058 24.6304 12.0734C24.9491 11.9411 25.2386 11.7472 25.4823 11.503C25.7261 11.2587 25.9194 10.9688 26.0511 10.6499C26.1828 10.3309 26.2504 9.98912 26.25 9.64404ZM19.25 9.64404V2.63037C19.2504 2.28529 19.1828 1.94351 19.0511 1.62456C18.9194 1.3056 18.7261 1.01572 18.4823 0.771458C18.2386 0.527199 17.9491 0.333351 17.6304 0.200983C17.3117 0.0686147 16.9701 0.000320434 16.625 0C16.2799 0.000320434 15.9383 0.0686147 15.6196 0.200983C15.3009 0.333351 15.0114 0.527199 14.7677 0.771458C14.5239 1.01572 14.3306 1.3056 14.1989 1.62456C14.0672 1.94351 13.9996 2.28529 14 2.63037V9.64404C13.9996 9.98912 14.0672 10.3309 14.1989 10.6499C14.3306 10.9688 14.5239 11.2587 14.7677 11.503C15.0114 11.7472 15.3009 11.9411 15.6196 12.0734C15.9383 12.2058 16.2799 12.2741 16.625 12.2744C16.9701 12.2741 17.3117 12.2058 17.6304 12.0734C17.9491 11.9411 18.2386 11.7472 18.4823 11.503C18.7261 11.2587 18.9194 10.9688 19.0511 10.6499C19.1828 10.3309 19.2504 9.98912 19.25 9.64404Z",
+          "fill": "#2EB67D"
+        },
+        "children": []
+      },
+      {
+        "type": "element",
+        "name": "path",
+        "attributes": {
+          "fill-rule": "evenodd",
+          "clip-rule": "evenodd",
+          "d": "M16.625 26.302C16.9701 26.3017 17.3117 26.2334 17.6304 26.101C17.9491 25.9686 18.2386 25.7748 18.4823 25.5305C18.7261 25.2863 18.9194 24.9964 19.0511 24.6774C19.1828 24.3585 19.2504 24.0167 19.25 23.6716C19.2503 23.3266 19.1827 22.9849 19.0509 22.666C18.9192 22.3471 18.7259 22.0572 18.4822 21.813C18.2384 21.5688 17.9489 21.375 17.6303 21.2427C17.3116 21.1103 16.97 21.0421 16.625 21.0417H14V23.6716C13.9996 24.0167 14.0672 24.3585 14.1989 24.6774C14.3306 24.9964 14.5239 25.2863 14.7677 25.5305C15.0114 25.7748 15.3009 25.9686 15.6196 26.101C15.9383 26.2334 16.2799 26.3017 16.625 26.302ZM16.625 19.2878H23.625C23.97 19.2875 24.3116 19.2192 24.6303 19.0869C24.9489 18.9546 25.2384 18.7608 25.4822 18.5166C25.7259 18.2723 25.9192 17.9825 26.0509 17.6636C26.1827 17.3447 26.2503 17.003 26.25 16.658C26.2504 16.3129 26.1828 15.9711 26.0511 15.6521C25.9194 15.3332 25.7261 15.0433 25.4823 14.799C25.2386 14.5548 24.9491 14.3609 24.6304 14.2286C24.3117 14.0962 23.9701 14.0279 23.625 14.0276H16.625C16.2799 14.0279 15.9383 14.0962 15.6196 14.2286C15.3009 14.3609 15.0114 14.5548 14.7677 14.799C14.5239 15.0433 14.3306 15.3332 14.1989 15.6521C14.0672 15.9711 13.9996 16.3129 14 16.658C13.9997 17.003 14.0673 17.3447 14.1991 17.6636C14.3308 17.9825 14.5241 18.2723 14.7678 18.5166C15.0116 18.7608 15.3011 18.9546 15.6197 19.0869C15.9384 19.2192 16.28 19.2875 16.625 19.2878Z",
+          "fill": "#ECB22E"
+        },
+        "children": []
+      },
+      {
+        "type": "element",
+        "name": "path",
+        "attributes": {
+          "fill-rule": "evenodd",
+          "clip-rule": "evenodd",
+          "d": "M2.22485e-06 16.658C-0.000318534 17.003 0.0673247 17.3447 0.19907 17.6636C0.330815 17.9825 0.524081 18.2723 0.767835 18.5166C1.01159 18.7608 1.30106 18.9546 1.61971 19.0869C1.93836 19.2192 2.27996 19.2875 2.625 19.2878C2.97004 19.2875 3.31164 19.2192 3.63029 19.0869C3.94895 18.9546 4.23841 18.7608 4.48217 18.5166C4.72592 18.2723 4.91919 17.9825 5.05093 17.6636C5.18268 17.3447 5.25032 17.003 5.25 16.658V14.0276H2.625C2.27988 14.0279 1.9382 14.0962 1.61948 14.2286C1.30077 14.361 1.01126 14.5549 0.76749 14.7992C0.523723 15.0435 0.330477 15.3335 0.198789 15.6525C0.0671016 15.9715 -0.000446885 16.3128 2.22485e-06 16.658ZM7 16.658V23.6716C6.99962 24.0167 7.06721 24.3585 7.19893 24.6774C7.33064 24.9964 7.5239 25.2863 7.76766 25.5305C8.01142 25.7748 8.30091 25.9686 8.6196 26.101C8.93828 26.2334 9.27992 26.3017 9.625 26.302C9.97008 26.3017 10.3117 26.2334 10.6304 26.101C10.9491 25.9686 11.2386 25.7748 11.4823 25.5305C11.7261 25.2863 11.9194 24.9964 12.0511 24.6774C12.1828 24.3585 12.2504 24.0167 12.25 23.6716V16.6584C12.2504 16.3134 12.1828 15.9716 12.0511 15.6526C11.9194 15.3337 11.7261 15.0438 11.4823 14.7995C11.2386 14.5553 10.9491 14.3614 10.6304 14.2291C10.3117 14.0967 9.97008 14.0284 9.625 14.0281C9.27992 14.0284 8.93828 14.0967 8.6196 14.2291C8.30091 14.3614 8.01142 14.5553 7.76766 14.7995C7.5239 15.0438 7.33064 15.3337 7.19893 15.6526C7.06721 15.9716 6.99962 16.3129 7 16.658Z",
+          "fill": "#E01E5A"
+        },
+        "children": []
+      }
+    ]
+  },
+  "name": "Slack"
+}
--- a/web/app/components/base/icons/src/public/other/Slack.tsx
+++ b/web/app/components/base/icons/src/public/other/Slack.tsx
@@ -0,0 +1,20 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import type { IconData } from '@/app/components/base/icons/IconBase'
+import * as React from 'react'
+import IconBase from '@/app/components/base/icons/IconBase'
+import data from './Slack.json'
+
+const Icon = (
+  {
+    ref,
+    ...props
+  }: React.SVGProps<SVGSVGElement> & {
+    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
+  },
+) => <IconBase {...props} ref={ref} data={data as IconData} />
+
+Icon.displayName = 'Slack'
+
+export default Icon
--- a/web/app/components/base/icons/src/public/other/Teams.json
+++ b/web/app/components/base/icons/src/public/other/Teams.json
@@ -0,0 +1,146 @@
+{
+  "icon": {
+    "type": "element",
+    "isRootNode": true,
+    "name": "svg",
+    "attributes": {
+      "width": "28",
+      "height": "28",
+      "viewBox": "0 0 28 28",
+      "fill": "none",
+      "xmlns": "http://www.w3.org/2000/svg"
+    },
+    "children": [
+      {
+        "type": "element",
+        "name": "g",
+        "attributes": {
+          "clip-path": "url(#clip0_20307_29670)"
+        },
+        "children": [
+          {
+            "type": "element",
+            "name": "path",
+            "attributes": {
+              "opacity": "0.1",
+              "d": "M9.33332 11.8067V20.4167C9.33204 21.432 9.57619 22.4327 10.045 23.3333H15.8783C16.2912 23.305 16.6807 23.1312 16.9776 22.8428C17.2745 22.5545 17.4596 22.1702 17.5 21.7583V10.5H17.1733H10.64C10.2934 10.5 9.96108 10.6377 9.71603 10.8827C9.47098 11.1278 9.33332 11.4601 9.33332 11.8067Z",
+              "fill": "black"
+            },
+            "children": []
+          },
+          {
+            "type": "element",
+            "name": "path",
+            "attributes": {
+              "opacity": "0.1",
+              "d": "M16.135 7H12.635C12.8805 7.78672 13.3726 8.47355 14.0386 8.9589C14.7047 9.44425 15.5093 9.70234 16.3333 9.695C16.7301 9.68885 17.1235 9.62197 17.5 9.49667V8.33C17.488 7.97504 17.3392 7.63847 17.0849 7.39061C16.8305 7.14276 16.4902 7.00281 16.135 7Z",
+              "fill": "black"
+            },
+            "children": []
+          },
+          {
+            "type": "element",
+            "name": "path",
+            "attributes": {
+              "d": "M26.6817 10.5H20.8484L19.2267 11.8183V18.34C19.2846 19.4628 19.7715 20.5204 20.5867 21.2946C21.4019 22.0689 22.4833 22.5005 23.6075 22.5005C24.7318 22.5005 25.8131 22.0689 26.6283 21.2946C27.4436 20.5204 27.9304 19.4628 27.9884 18.34V11.8183C27.9899 11.6458 27.9572 11.4746 27.8923 11.3147C27.8273 11.1548 27.7313 11.0094 27.6098 10.8868C27.4883 10.7643 27.3437 10.667 27.1844 10.6006C27.0251 10.5342 26.8543 10.5 26.6817 10.5Z",
+              "fill": "#5059C9"
+            },
+            "children": []
+          },
+          {
+            "type": "element",
+            "name": "path",
+            "attributes": {
+              "d": "M23.9167 9.33333C25.5275 9.33333 26.8333 8.0275 26.8333 6.41667C26.8333 4.80584 25.5275 3.5 23.9167 3.5C22.3058 3.5 21 4.80584 21 6.41667C21 8.0275 22.3058 9.33333 23.9167 9.33333Z",
+              "fill": "#5059C9"
+            },
+            "children": []
+          },
+          {
+            "type": "element",
+            "name": "path",
+            "attributes": {
+              "d": "M10.64 10.5H20.86C21.2065 10.5 21.5389 10.6377 21.7839 10.8827C22.029 11.1278 22.1666 11.4601 22.1666 11.8067V20.4167C22.1666 22.1185 21.4906 23.7506 20.2872 24.9539C19.0839 26.1573 17.4518 26.8333 15.75 26.8333C14.0482 26.8333 12.4161 26.1573 11.2127 24.9539C10.0094 23.7506 9.33331 22.1185 9.33331 20.4167V11.8067C9.33331 11.4601 9.47098 11.1278 9.71603 10.8827C9.96107 10.6377 10.2934 10.5 10.64 10.5Z",
+              "fill": "#7B83EB"
+            },
+            "children": []
+          },
+          {
+            "type": "element",
+            "name": "path",
+            "attributes": {
+              "d": "M16.3333 9.69477C18.4661 9.69477 20.195 7.96584 20.195 5.8331C20.195 3.70036 18.4661 1.97144 16.3333 1.97144C14.2006 1.97144 12.4717 3.70036 12.4717 5.8331C12.4717 7.96584 14.2006 9.69477 16.3333 9.69477Z",
+              "fill": "#7B83EB"
+            },
+            "children": []
+          },
+          {
+            "type": "element",
+            "name": "path",
+            "attributes": {
+              "opacity": "0.5",
+              "d": "M9.33332 11.8067V20.4167C9.33204 21.432 9.57619 22.4327 10.045 23.3333H15.8783C16.2912 23.305 16.6807 23.1312 16.9776 22.8428C17.2745 22.5545 17.4596 22.1702 17.5 21.7583V10.5H17.1733H10.64C10.2934 10.5 9.96108 10.6377 9.71603 10.8827C9.47098 11.1278 9.33332 11.4601 9.33332 11.8067Z",
+              "fill": "black"
+            },
+            "children": []
+          },
+          {
+            "type": "element",
+            "name": "path",
+            "attributes": {
+              "opacity": "0.5",
+              "d": "M16.135 7H12.635C12.8805 7.78672 13.3726 8.47355 14.0386 8.9589C14.7047 9.44425 15.5093 9.70234 16.3333 9.695C16.7301 9.68885 17.1235 9.62197 17.5 9.49667V8.33C17.488 7.97504 17.3392 7.63847 17.0849 7.39061C16.8305 7.14276 16.4902 7.00281 16.135 7Z",
+              "fill": "black"
+            },
+            "children": []
+          },
+          {
+            "type": "element",
+            "name": "path",
+            "attributes": {
+              "d": "M14.9683 5.83325H1.365C0.611131 5.83325 0 6.44438 0 7.19825V20.8016C0 21.5555 0.611131 22.1666 1.365 22.1666H14.9683C15.7222 22.1666 16.3333 21.5555 16.3333 20.8016V7.19825C16.3333 6.44438 15.7222 5.83325 14.9683 5.83325Z",
+              "fill": "#4B53BC"
+            },
+            "children": []
+          },
+          {
+            "type": "element",
+            "name": "path",
+            "attributes": {
+              "d": "M11.8767 11.1766H9.08833V18.6666H7.25666V11.1766H4.45667V9.33325H11.8767V11.1766Z",
+              "fill": "white"
+            },
+            "children": []
+          }
+        ]
+      },
+      {
+        "type": "element",
+        "name": "defs",
+        "attributes": {},
+        "children": [
+          {
+            "type": "element",
+            "name": "clipPath",
+            "attributes": {
+              "id": "clip0_20307_29670"
+            },
+            "children": [
+              {
+                "type": "element",
+                "name": "rect",
+                "attributes": {
+                  "width": "28",
+                  "height": "28",
+                  "fill": "white"
+                },
+                "children": []
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "name": "Teams"
+}
--- a/web/app/components/base/icons/src/public/other/Teams.tsx
+++ b/web/app/components/base/icons/src/public/other/Teams.tsx
@@ -0,0 +1,20 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import type { IconData } from '@/app/components/base/icons/IconBase'
+import * as React from 'react'
+import IconBase from '@/app/components/base/icons/IconBase'
+import data from './Teams.json'
+
+const Icon = (
+  {
+    ref,
+    ...props
+  }: React.SVGProps<SVGSVGElement> & {
+    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
+  },
+) => <IconBase {...props} ref={ref} data={data as IconData} />
+
+Icon.displayName = 'Teams'
+
+export default Icon
--- a/web/app/components/base/icons/src/public/other/index.ts
+++ b/web/app/components/base/icons/src/public/other/index.ts
@@ -3,3 +3,5 @@ export { default as DefaultToolIcon } from './DefaultToolIcon'
 export { default as Icon3Dots } from './Icon3Dots'
 export { default as Message3Fill } from './Message3Fill'
 export { default as RowStruct } from './RowStruct'
+export { default as Slack } from './Slack'
+export { default as Teams } from './Teams'
--- a/web/app/components/base/icons/src/vender/workflow/HumanInLoop.json
+++ b/web/app/components/base/icons/src/vender/workflow/HumanInLoop.json
@@ -0,0 +1,48 @@
+{
+  "icon": {
+    "type": "element",
+    "isRootNode": true,
+    "name": "svg",
+    "attributes": {
+      "width": "16",
+      "height": "16",
+      "viewBox": "0 0 16 16",
+      "fill": "none",
+      "xmlns": "http://www.w3.org/2000/svg"
+    },
+    "children": [
+      {
+        "type": "element",
+        "name": "path",
+        "attributes": {
+          "d": "M3.66634 2.66675C3.66634 2.29856 3.36787 2.00008 2.99967 2.00008C2.63149 2.00008 2.33301 2.29855 2.33301 2.66675L3.66634 2.66675ZM2.99967 5.33341H2.33301C2.33301 5.51023 2.40325 5.6798 2.52827 5.80482C2.65329 5.92984 2.82286 6.00008 2.99967 6.00008V5.33341ZM5.66641 6.00008C6.03459 6.00008 6.33307 5.7016 6.33307 5.33341C6.33307 4.96523 6.03459 4.66675 5.66641 4.66675L5.66641 6.00008ZM2.41183 5.01659C2.23816 5.34125 2.36056 5.74523 2.68522 5.91889C3.00988 6.09256 3.41385 5.97016 3.58752 5.6455L2.41183 5.01659ZM3.03395 8.58915C2.99109 8.22348 2.6599 7.96175 2.29421 8.00461C1.92853 8.04748 1.66682 8.37868 1.70967 8.74435L3.03395 8.58915ZM12.0439 5.05931C12.2607 5.3569 12.6777 5.42238 12.9753 5.20557C13.2729 4.98876 13.3383 4.57176 13.1215 4.27417L12.0439 5.05931ZM5.02145 13.5907C5.34627 13.7641 5.75013 13.6413 5.92349 13.3165C6.09685 12.9917 5.97407 12.5878 5.64925 12.4145L5.02145 13.5907ZM2.33301 2.66675L2.33301 5.33341H3.66634L3.66634 2.66675L2.33301 2.66675ZM2.99967 6.00008L5.66641 6.00008L5.66641 4.66675H2.99967L2.99967 6.00008ZM3.58752 5.6455C4.43045 4.06972 6.09066 3.00008 7.99968 3.00008V1.66675C5.57951 1.66675 3.47747 3.02445 2.41183 5.01659L3.58752 5.6455ZM7.99968 3.00008C9.66128 3.00008 11.1336 3.80991 12.0439 5.05931L13.1215 4.27417C11.9711 2.69513 10.1055 1.66675 7.99968 1.66675V3.00008ZM5.64925 12.4145C4.23557 11.6599 3.22828 10.2474 3.03395 8.58915L1.70967 8.74435C1.95639 10.8495 3.23403 12.6367 5.02145 13.5907L5.64925 12.4145Z",
+          "fill": "currentColor"
+        },
+        "children": []
+      },
+      {
+        "type": "element",
+        "name": "path",
+        "attributes": {
+          "fill-rule": "evenodd",
+          "clip-rule": "evenodd",
+          "d": "M13.1946 8.13826C12.9027 7.84637 12.4294 7.84638 12.1375 8.13829L9.11842 11.1574C9.01642 11.2594 8.95025 11.3917 8.92985 11.5345C8.92985 11.5345 8.92985 11.5345 8.92985 11.5345L8.78508 12.5479L9.79846 12.4031C9.94127 12.3827 10.0736 12.3165 10.1756 12.2145L13.1947 9.19548C13.4866 8.90359 13.4866 8.43027 13.1946 8.13826C13.1947 8.13827 13.1946 8.13825 13.1946 8.13826ZM11.1947 7.19548C12.0073 6.38286 13.3249 6.38286 14.1375 7.19548C14.95 8.00814 14.9501 9.32565 14.1375 10.1383L11.1184 13.1574C10.8124 13.4633 10.4154 13.6618 9.98703 13.723L8.09369 13.9935C7.88596 14.0232 7.67639 13.9533 7.52801 13.805C7.37963 13.6566 7.30977 13.447 7.33945 13.2393L7.60991 11.3459C7.67111 10.9175 7.86961 10.5205 8.17561 10.2145L11.1947 7.19548Z",
+          "fill": "currentColor"
+        },
+        "children": []
+      },
+      {
+        "type": "element",
+        "name": "path",
+        "attributes": {
+          "fill-rule": "evenodd",
+          "clip-rule": "evenodd",
+          "d": "M12.528 10.8048L10.528 8.80482L11.4708 7.86201L13.4708 9.86201L12.528 10.8048Z",
+          "fill": "currentColor"
+        },
+        "children": []
+      }
+    ]
+  },
+  "name": "HumanInLoop"
+}
--- a/web/app/components/base/icons/src/vender/workflow/HumanInLoop.tsx
+++ b/web/app/components/base/icons/src/vender/workflow/HumanInLoop.tsx
@@ -0,0 +1,20 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import type { IconData } from '@/app/components/base/icons/IconBase'
+import * as React from 'react'
+import IconBase from '@/app/components/base/icons/IconBase'
+import data from './HumanInLoop.json'
+
+const Icon = (
+  {
+    ref,
+    ...props
+  }: React.SVGProps<SVGSVGElement> & {
+    ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>
+  },
+) => <IconBase {...props} ref={ref} data={data as IconData} />
+
+Icon.displayName = 'HumanInLoop'
+
+export default Icon
--- a/web/app/components/base/icons/src/vender/workflow/index.ts
+++ b/web/app/components/base/icons/src/vender/workflow/index.ts
@@ -12,6 +12,7 @@ export { default as End } from './End'
 export { default as FolderSpark } from './FolderSpark'
 export { default as Home } from './Home'
 export { default as Http } from './Http'
+export { default as HumanInLoop } from './HumanInLoop'
 export { default as IfElse } from './IfElse'
 export { default as Iteration } from './Iteration'
 export { default as IterationStart } from './IterationStart'
--- a/web/app/components/base/markdown/index.tsx
+++ b/web/app/components/base/markdown/index.tsx
@@ -18,7 +18,7 @@ export type MarkdownProps = {
  content: string
  className?: string
  pluginInfo?: SimplePluginInfo
-} & Pick<ReactMarkdownWrapperProps, 'customComponents' | 'customDisallowedElements'>
+} & Pick<ReactMarkdownWrapperProps, 'customComponents' | 'customDisallowedElements' | 'rehypePlugins'>

 export const Markdown = (props: MarkdownProps) => {
  const { customComponents = {}, pluginInfo } = props
@@ -29,7 +29,13 @@ export const Markdown = (props: MarkdownProps) => {

  return (
    <div className={cn('markdown-body', '!text-text-primary', props.className)}>
-      <ReactMarkdown pluginInfo={pluginInfo} latexContent={latexContent} customComponents={customComponents} customDisallowedElements={props.customDisallowedElements} />
+      <ReactMarkdown
+        pluginInfo={pluginInfo}
+        latexContent={latexContent}
+        customComponents={customComponents}
+        customDisallowedElements={props.customDisallowedElements}
+        rehypePlugins={props.rehypePlugins}
+      />
    </div>
  )
 }
--- a/web/app/components/base/markdown/react-markdown-wrapper.tsx
+++ b/web/app/components/base/markdown/react-markdown-wrapper.tsx
@@ -22,6 +22,7 @@ export type ReactMarkdownWrapperProps = {
  customDisallowedElements?: string[]
  customComponents?: Record<string, React.ComponentType<any>>
  pluginInfo?: SimplePluginInfo
+  rehypePlugins?: any// js: PluggableList[]
 }

 export const ReactMarkdownWrapper: FC<ReactMarkdownWrapperProps> = (props) => {
@@ -55,6 +56,7 @@ export const ReactMarkdownWrapper: FC<ReactMarkdownWrapperProps> = (props) => {
            tree.children.forEach(iterate)
          }
        },
+        ...(props.rehypePlugins || []),
      ]}
      urlTransform={customUrlTransform}
      disallowedElements={['iframe', 'head', 'html', 'meta', 'link', 'style', 'body', ...(props.customDisallowedElements || [])]}
--- a/web/app/components/base/prompt-editor/constants.tsx
+++ b/web/app/components/base/prompt-editor/constants.tsx
@@ -4,6 +4,7 @@ import { SupportUploadFileTypes } from '../../workflow/types'
 export const CONTEXT_PLACEHOLDER_TEXT = '{{#context#}}'
 export const HISTORY_PLACEHOLDER_TEXT = '{{#histories#}}'
 export const QUERY_PLACEHOLDER_TEXT = '{{#query#}}'
+export const REQUEST_URL_PLACEHOLDER_TEXT = '{{#url#}}'
 export const CURRENT_PLACEHOLDER_TEXT = '{{#current#}}'
 export const ERROR_MESSAGE_PLACEHOLDER_TEXT = '{{#error_message#}}'
 export const LAST_RUN_PLACEHOLDER_TEXT = '{{#last_run#}}'
@@ -30,6 +31,12 @@ export const checkHasQueryBlock = (text: string) => {
  return text.includes(QUERY_PLACEHOLDER_TEXT)
 }

+export const checkHasRequestURLBlock = (text: string) => {
+  if (!text)
+    return false
+  return text.includes(REQUEST_URL_PLACEHOLDER_TEXT)
+}
+
 /*
 * {{#1711617514996.name#}} => [1711617514996, name]
 * {{#1711617514996.sys.query#}} => [sys, query]
--- a/web/app/components/base/prompt-editor/index.tsx
+++ b/web/app/components/base/prompt-editor/index.tsx
@@ -2,8 +2,10 @@

 import type {
  EditorState,
+  LexicalCommand,
 } from 'lexical'
 import type { FC } from 'react'
+import type { Hotkey } from './plugins/shortcuts-popup-plugin'
 import type {
  AgentBlockType,
  ContextBlockType,
@@ -11,8 +13,10 @@ import type {
  ErrorMessageBlockType,
  ExternalToolBlockType,
  HistoryBlockType,
+  HITLInputBlockType,
  LastRunBlockType,
  QueryBlockType,
+  RequestURLBlockType,
  VariableBlockType,
  WorkflowVariableBlockType,
 } from './types'
@@ -32,7 +36,7 @@ import {
  TextNode,
 } from 'lexical'
 import * as React from 'react'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { Trans } from 'react-i18next'
 import { FileReferenceNode } from '@/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/node'
 import { FilePreviewContextProvider } from '@/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/preview-context'
@@ -66,6 +70,7 @@ import {
  CurrentBlockReplacementBlock,
 } from './plugins/current-block'
 import { CustomTextNode } from './plugins/custom-text/node'
+import DraggableBlockPlugin from './plugins/draggable-plugin'
 import {
  ErrorMessageBlock,
  ErrorMessageBlockNode,
@@ -76,6 +81,11 @@ import {
  HistoryBlockNode,
  HistoryBlockReplacementBlock,
 } from './plugins/history-block'
+import {
+  HITLInputBlock,
+  HITLInputBlockReplacementBlock,
+  HITLInputNode,
+} from './plugins/hitl-input-block'
 import {
  LastRunBlock,
  LastRunBlockNode,
@@ -89,6 +99,12 @@ import {
  QueryBlockNode,
  QueryBlockReplacementBlock,
 } from './plugins/query-block'
+import {
+  RequestURLBlock,
+  RequestURLBlockNode,
+  RequestURLBlockReplacementBlock,
+} from './plugins/request-url-block'
+import ShortcutsPopupPlugin from './plugins/shortcuts-popup-plugin'
 import UpdateBlock from './plugins/update-block'
 import VariableBlock from './plugins/variable-block'
 import VariableValueBlock from './plugins/variable-value-block'
@@ -171,10 +187,12 @@ export type PromptEditorProps = {
  onToolMetadataChange?: (metadata: Record<string, unknown>) => void
  contextBlock?: ContextBlockType
  queryBlock?: QueryBlockType
+  requestURLBlock?: RequestURLBlockType
  historyBlock?: HistoryBlockType
  variableBlock?: VariableBlockType
  externalToolBlock?: ExternalToolBlockType
  workflowVariableBlock?: WorkflowVariableBlockType
+  hitlInputBlock?: HITLInputBlockType
  currentBlock?: CurrentBlockType
  errorMessageBlock?: ErrorMessageBlockType
  lastRunBlock?: LastRunBlockType
@@ -183,6 +201,7 @@ export type PromptEditorProps = {
  isSupportSandbox?: boolean
  disableToolBlocks?: boolean
  onEnter?: (event: KeyboardEvent) => void
+  shortcutPopups?: Array<{ hotkey: Hotkey, Popup: React.ComponentType<{ onClose: () => void, onInsert: (command: LexicalCommand<unknown>, params: unknown[]) => void }> }>
 }

 const PromptEditor: FC<PromptEditorProps> = ({
@@ -203,10 +222,12 @@ const PromptEditor: FC<PromptEditorProps> = ({
  onToolMetadataChange,
  contextBlock,
  queryBlock,
+  requestURLBlock,
  historyBlock,
  variableBlock,
  externalToolBlock,
  workflowVariableBlock,
+  hitlInputBlock,
  currentBlock,
  errorMessageBlock,
  lastRunBlock,
@@ -215,6 +236,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
  isSupportSandbox,
  disableToolBlocks,
  onEnter,
+  shortcutPopups = [],
 }) => {
  const { eventEmitter } = useEventEmitterContextContext()
  const initialConfig = {
@@ -230,8 +252,10 @@ const PromptEditor: FC<PromptEditorProps> = ({
      ContextBlockNode,
      HistoryBlockNode,
      QueryBlockNode,
+      RequestURLBlockNode,
      WorkflowVariableBlockNode,
      VariableValueBlockNode,
+      HITLInputNode,
      CurrentBlockNode,
      ErrorMessageBlockNode,
      LastRunBlockNode, // LastRunBlockNode is used for error message block replacement
@@ -327,6 +351,13 @@ const PromptEditor: FC<PromptEditorProps> = ({
    )
  }, [disableToolBlocks, isSupportSandbox])

+  const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLDivElement | null>(null)
+
+  const onRef = (floatingAnchorElement: HTMLDivElement | null) => {
+    if (floatingAnchorElement !== null)
+      setFloatingAnchorElem(floatingAnchorElement)
+  }
+
  return (
    <LexicalComposer initialConfig={{ ...initialConfig, editable }}>
      <ToolBlockContextProvider value={toolBlockContextValue}>
@@ -334,6 +365,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
          <div
            className={cn('relative', wrapperClassName)}
            data-skill-editor-root={isSupportSandbox ? 'true' : undefined}
+            ref={onRef}
          >
            <RichTextPlugin
              contentEditable={(
@@ -355,11 +387,17 @@ const PromptEditor: FC<PromptEditorProps> = ({
              )}
              ErrorBoundary={LexicalErrorBoundary}
            />
+            {shortcutPopups?.map(({ hotkey, Popup }, idx) => (
+              <ShortcutsPopupPlugin key={idx} hotkey={hotkey}>
+                {(closePortal, onInsert) => <Popup onClose={closePortal} onInsert={onInsert} />}
+              </ShortcutsPopupPlugin>
+            ))}
            <ComponentPickerBlock
              triggerString="/"
              contextBlock={contextBlock}
              historyBlock={historyBlock}
              queryBlock={queryBlock}
+              requestURLBlock={requestURLBlock}
              variableBlock={variableBlock}
              externalToolBlock={externalToolBlock}
              workflowVariableBlock={workflowVariableBlock}
@@ -398,6 +436,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
              contextBlock={contextBlock}
              historyBlock={historyBlock}
              queryBlock={queryBlock}
+              requestURLBlock={requestURLBlock}
              variableBlock={variableBlock}
              externalToolBlock={externalToolBlock}
              workflowVariableBlock={workflowVariableBlock}
@@ -447,6 +486,14 @@ const PromptEditor: FC<PromptEditorProps> = ({
                </>
              )
            }
+            {
+              hitlInputBlock?.show && (
+                <>
+                  <HITLInputBlock {...hitlInputBlock} />
+                  <HITLInputBlockReplacementBlock {...hitlInputBlock} />
+                </>
+              )
+            }
            {isSupportSandbox && <FileReferenceReplacementBlock />}
            {
              currentBlock?.show && (
@@ -456,6 +503,14 @@ const PromptEditor: FC<PromptEditorProps> = ({
                </>
              )
            }
+            {
+              requestURLBlock?.show && (
+                <>
+                  <RequestURLBlock {...requestURLBlock} />
+                  <RequestURLBlockReplacementBlock {...requestURLBlock} />
+                </>
+              )
+            }
            {
              errorMessageBlock?.show && (
                <>
@@ -483,6 +538,9 @@ const PromptEditor: FC<PromptEditorProps> = ({
            <OnBlurBlock onBlur={onBlur} onFocus={onFocus} />
            <UpdateBlock instanceId={instanceId} />
            <HistoryPlugin />
+            {floatingAnchorElem && (
+              <DraggableBlockPlugin anchorElem={floatingAnchorElem} />
+            )}
            {/* <TreeView /> */}
          </div>
        </FilePreviewContextProvider>
--- a/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx
+++ b/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx
@@ -6,10 +6,12 @@ import type {
  HistoryBlockType,
  LastRunBlockType,
  QueryBlockType,
+  RequestURLBlockType,
  VariableBlockType,
  WorkflowVariableBlockType,
 } from '../../types'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { RiGlobalLine } from '@remixicon/react'
 import { $insertNodes } from 'lexical'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -27,6 +29,7 @@ import { INSERT_CONTEXT_BLOCK_COMMAND } from '../context-block'
 import { $createCustomTextNode } from '../custom-text/node'
 import { INSERT_HISTORY_BLOCK_COMMAND } from '../history-block'
 import { INSERT_QUERY_BLOCK_COMMAND } from '../query-block'
+import { INSERT_REQUEST_URL_BLOCK_COMMAND } from '../request-url-block'
 import { INSERT_VARIABLE_VALUE_BLOCK_COMMAND } from '../variable-block'
 import { PickerBlockMenuOption } from './menu'
 import { PromptMenuItem } from './prompt-option'
@@ -38,6 +41,7 @@ export const usePromptOptions = (
  contextBlock?: ContextBlockType,
  queryBlock?: QueryBlockType,
  historyBlock?: HistoryBlockType,
+  requestURLBlock?: RequestURLBlockType,
 ) => {
  const { t } = useTranslation()
  const [editor] = useLexicalComposerContext()
@@ -93,6 +97,30 @@ export const usePromptOptions = (
    )
  }

+  if (requestURLBlock?.show) {
+    promptOptions.push(new PickerBlockMenuOption({
+      key: t('promptEditor.requestURL.item.title', { ns: 'common' }),
+      group: 'request URL',
+      render: ({ isSelected, onSelect, onSetHighlight }) => {
+        return (
+          <PromptMenuItem
+            title={t('promptEditor.requestURL.item.title', { ns: 'common' })}
+            icon={<RiGlobalLine className="h-4 w-4 text-util-colors-violet-violet-600" />}
+            disabled={!requestURLBlock.selectable}
+            isSelected={isSelected}
+            onClick={onSelect}
+            onMouseEnter={onSetHighlight}
+          />
+        )
+      },
+      onSelect: () => {
+        if (!requestURLBlock?.selectable)
+          return
+        editor.dispatchCommand(INSERT_REQUEST_URL_BLOCK_COMMAND, undefined)
+      },
+    }))
+  }
+
  if (historyBlock?.show) {
    promptOptions.push(
      new PickerBlockMenuOption({
@@ -274,12 +302,13 @@ export const useOptions = (
  variableBlock?: VariableBlockType,
  externalToolBlockType?: ExternalToolBlockType,
  workflowVariableBlockType?: WorkflowVariableBlockType,
+  requestURLBlock?: RequestURLBlockType,
  currentBlockType?: CurrentBlockType,
  errorMessageBlockType?: ErrorMessageBlockType,
  lastRunBlockType?: LastRunBlockType,
  queryString?: string,
 ) => {
-  const promptOptions = usePromptOptions(contextBlock, queryBlock, historyBlock)
+  const promptOptions = usePromptOptions(contextBlock, queryBlock, historyBlock, requestURLBlock)
  const variableOptions = useVariableOptions(variableBlock, queryString)
  const externalToolOptions = useExternalToolOptions(externalToolBlockType, queryString)

--- a/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
+++ b/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
@@ -9,6 +9,7 @@ import type {
  HistoryBlockType,
  LastRunBlockType,
  QueryBlockType,
+  RequestURLBlockType,
  VariableBlockType,
  WorkflowVariableBlockType,
 } from '../../types'
@@ -61,6 +62,7 @@ type ComponentPickerProps = {
  triggerString: string
  contextBlock?: ContextBlockType
  queryBlock?: QueryBlockType
+  requestURLBlock?: RequestURLBlockType
  historyBlock?: HistoryBlockType
  variableBlock?: VariableBlockType
  externalToolBlock?: ExternalToolBlockType
@@ -89,6 +91,7 @@ const ComponentPicker = ({
  triggerString,
  contextBlock,
  queryBlock,
+  requestURLBlock,
  historyBlock,
  variableBlock,
  externalToolBlock,
@@ -151,6 +154,7 @@ const ComponentPicker = ({
    variableBlock,
    externalToolBlock,
    workflowVariableBlock,
+    requestURLBlock,
    currentBlock,
    errorMessageBlock,
    lastRunBlock,
--- a/web/app/components/base/prompt-editor/plugins/draggable-plugin/index.tsx
+++ b/web/app/components/base/prompt-editor/plugins/draggable-plugin/index.tsx
@@ -0,0 +1,86 @@
+import type { JSX } from 'react'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { DraggableBlockPlugin_EXPERIMENTAL } from '@lexical/react/LexicalDraggableBlockPlugin'
+import { RiDraggable } from '@remixicon/react'
+import { useEffect, useRef, useState } from 'react'
+import { cn } from '@/utils/classnames'
+
+const DRAGGABLE_BLOCK_MENU_CLASSNAME = 'draggable-block-menu'
+
+function isOnMenu(element: HTMLElement): boolean {
+  return !!element.closest(`.${DRAGGABLE_BLOCK_MENU_CLASSNAME}`)
+}
+
+const SUPPORT_DRAG_CLASS = 'support-drag'
+function checkSupportDrag(element: Element | null): boolean {
+  if (!element)
+    return false
+
+  if (element.classList.contains(SUPPORT_DRAG_CLASS))
+    return true
+
+  if (element.querySelector(`.${SUPPORT_DRAG_CLASS}`))
+    return true
+
+  return !!(element.closest(`.${SUPPORT_DRAG_CLASS}`))
+}
+
+export default function DraggableBlockPlugin({
+  anchorElem = document.body,
+}: {
+  anchorElem?: HTMLElement
+}): JSX.Element {
+  const menuRef = useRef<HTMLDivElement>(null)
+  const targetLineRef = useRef<HTMLDivElement>(null)
+  const [, setDraggableElement] = useState<HTMLElement | null>(
+    null,
+  )
+  const [editor] = useLexicalComposerContext()
+
+  const [isSupportDrag, setIsSupportDrag] = useState(false)
+
+  useEffect(() => {
+    const root = editor.getRootElement()
+    if (!root)
+      return
+
+    const onMove = (e: MouseEvent) => {
+      const isSupportDrag = checkSupportDrag(e.target as Element)
+      setIsSupportDrag(isSupportDrag)
+    }
+
+    root.addEventListener('mousemove', onMove)
+    return () => root.removeEventListener('mousemove', onMove)
+  }, [editor])
+
+  return (
+    <DraggableBlockPlugin_EXPERIMENTAL
+      anchorElem={anchorElem}
+      menuRef={menuRef as any}
+      targetLineRef={targetLineRef as any}
+      menuComponent={
+        isSupportDrag
+          ? (
+              <div ref={menuRef} className={cn(DRAGGABLE_BLOCK_MENU_CLASSNAME, 'absolute right-2.5 top-4 cursor-grab opacity-0 will-change-transform active:cursor-move')}>
+                <RiDraggable className="size-3.5 text-text-tertiary" />
+              </div>
+            )
+          : null
+      }
+      targetLineComponent={(
+        <div
+          ref={targetLineRef}
+          className="pointer-events-none absolute left-[-21px] top-0 opacity-0 will-change-transform"
+          // style={{ width: 500 }} // width not worked here
+        >
+          <div
+            className="absolute -right-10 left-0 top-0 h-[2px] bg-text-accent-secondary"
+          >
+          </div>
+        </div>
+      )}
+      isOnMenu={isOnMenu}
+      onElementChanged={setDraggableElement}
+    />
+  )
+}
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx
@@ -0,0 +1,170 @@
+'use client'
+import type { FC } from 'react'
+import type { WorkflowNodesMap } from '../workflow-variable-block/node'
+import type { FormInputItem } from '@/app/components/workflow/nodes/human-input/types'
+import type { Type } from '@/app/components/workflow/nodes/llm/types'
+import type { ValueSelector, Var } from '@/app/components/workflow/types'
+import { RiDeleteBinLine, RiEditLine } from '@remixicon/react'
+import { useBoolean } from 'ahooks'
+import * as React from 'react'
+import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { InputVarType } from '@/app/components/workflow/types'
+import ActionButton from '../../../action-button'
+import { VariableX } from '../../../icons/src/vender/workflow'
+import Modal from '../../../modal'
+import InputField from './input-field'
+import VariableBlock from './variable-block'
+
+type HITLInputComponentUIProps = {
+  nodeId: string
+  varName: string
+  formInput?: FormInputItem
+  onChange: (input: FormInputItem) => void
+  onRename: (payload: FormInputItem, oldName: string) => void
+  onRemove: (varName: string) => void
+  workflowNodesMap: WorkflowNodesMap
+  environmentVariables?: Var[]
+  conversationVariables?: Var[]
+  ragVariables?: Var[]
+  getVarType?: (payload: {
+    nodeId: string
+    valueSelector: ValueSelector
+  }) => Type
+  readonly?: boolean
+}
+
+const HITLInputComponentUI: FC<HITLInputComponentUIProps> = ({
+  nodeId,
+  varName,
+  formInput = {
+    type: InputVarType.paragraph,
+    output_variable_name: varName,
+    default: {
+      type: 'constant',
+      selector: [],
+      value: '',
+    },
+  },
+  onChange,
+  onRename,
+  onRemove,
+  workflowNodesMap = {},
+  getVarType,
+  environmentVariables,
+  conversationVariables,
+  ragVariables,
+  readonly,
+}) => {
+  const [isShowEditModal, {
+    setTrue: showEditModal,
+    setFalse: hideEditModal,
+  }] = useBoolean(false)
+
+  // Lexical delegate the click make it unable to add click by the method of react
+  const editBtnRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    const editBtn = editBtnRef.current
+    if (editBtn)
+      editBtn.addEventListener('click', showEditModal)
+
+    return () => {
+      if (editBtn)
+        editBtn.removeEventListener('click', showEditModal)
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const removeBtnRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    const removeBtn = removeBtnRef.current
+    const removeHandler = () => onRemove(varName)
+    if (removeBtn)
+      removeBtn.addEventListener('click', removeHandler)
+
+    return () => {
+      if (removeBtn)
+        removeBtn.removeEventListener('click', removeHandler)
+    }
+  }, [onRemove, varName])
+
+  const handleChange = useCallback((newPayload: FormInputItem) => {
+    if (varName === newPayload.output_variable_name)
+      onChange(newPayload)
+    else
+      onRename(newPayload, varName)
+    hideEditModal()
+  }, [hideEditModal, onChange, onRename, varName])
+
+  const isDefaultValueVariable = useMemo(() => {
+    return formInput.default?.type === 'variable'
+  }, [formInput.default?.type])
+
+  return (
+    <div
+      className="group relative flex h-8 w-full select-none items-center rounded-[8px] border-[1.5px] border-components-input-border-active bg-background-default-hover pl-1.5 pr-0.5"
+    >
+      <div className="absolute left-2.5 top-[-12px]">
+        <div className="absolute bottom-1 h-[1.5px] w-full bg-background-default-subtle"></div>
+        <div className="relative flex items-center space-x-0.5 px-1 text-text-accent-light-mode-only">
+          <VariableX className="size-3" />
+          <div className="system-xs-medium">{varName}</div>
+        </div>
+      </div>
+
+      <div className="flex w-full items-center gap-x-0.5 pr-5">
+        <div className="min-w-0 grow">
+          {/* Default Value Info */}
+          {isDefaultValueVariable && (
+            <VariableBlock
+              variables={formInput.default?.selector}
+              workflowNodesMap={workflowNodesMap}
+              getVarType={getVarType}
+              environmentVariables={environmentVariables}
+              conversationVariables={conversationVariables}
+              ragVariables={ragVariables}
+            />
+          )}
+          {!isDefaultValueVariable && (
+            <div className="system-xs-medium max-w-full truncate text-components-input-text-filled">{formInput.default?.value}</div>
+          )}
+        </div>
+
+        {/* Actions */}
+        {!readonly && (
+          <div className="hidden h-full shrink-0 items-center space-x-1 group-hover:flex">
+            <div className="flex h-full items-center" ref={editBtnRef}>
+              <ActionButton size="s">
+                <RiEditLine className="size-4 text-text-tertiary" />
+              </ActionButton>
+            </div>
+
+            <div className="flex h-full items-center" ref={removeBtnRef}>
+              <ActionButton size="s">
+                <RiDeleteBinLine className="size-4 text-text-tertiary" />
+              </ActionButton>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {isShowEditModal && (
+        <Modal
+          isShow
+          onClose={hideEditModal}
+          wrapperClassName="z-[999]"
+          className="max-w-[372px] !p-0"
+        >
+          <InputField
+            nodeId={nodeId}
+            isEdit
+            payload={formInput}
+            onChange={handleChange}
+            onCancel={hideEditModal}
+          />
+        </Modal>
+      )}
+    </div>
+  )
+}
+
+export default React.memo(HITLInputComponentUI)
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/component.tsx
@@ -0,0 +1,86 @@
+import type { FC } from 'react'
+import type { WorkflowNodesMap } from '../workflow-variable-block/node'
+import type { FormInputItem } from '@/app/components/workflow/nodes/human-input/types'
+import type { Type } from '@/app/components/workflow/nodes/llm/types'
+import type { ValueSelector, Var } from '@/app/components/workflow/types'
+import { produce } from 'immer'
+import { useCallback } from 'react'
+import { useSelectOrDelete } from '../../hooks'
+import { DELETE_HITL_INPUT_BLOCK_COMMAND } from './'
+import ComponentUi from './component-ui'
+
+type HITLInputComponentProps = {
+  nodeKey: string
+  nodeId: string
+  varName: string
+  formInputs?: FormInputItem[]
+  onChange: (inputs: FormInputItem[]) => void
+  onRename: (payload: FormInputItem, oldName: string) => void
+  onRemove: (varName: string) => void
+  workflowNodesMap: WorkflowNodesMap
+  environmentVariables?: Var[]
+  conversationVariables?: Var[]
+  ragVariables?: Var[]
+  getVarType?: (payload: {
+    nodeId: string
+    valueSelector: ValueSelector
+  }) => Type
+  readonly?: boolean
+}
+
+const HITLInputComponent: FC<HITLInputComponentProps> = ({
+  nodeKey,
+  nodeId,
+  varName,
+  formInputs = [],
+  onChange,
+  onRename,
+  onRemove,
+  workflowNodesMap = {},
+  getVarType,
+  environmentVariables,
+  conversationVariables,
+  ragVariables,
+  readonly,
+}) => {
+  const [ref] = useSelectOrDelete(nodeKey, DELETE_HITL_INPUT_BLOCK_COMMAND)
+  const payload = formInputs.find(item => item.output_variable_name === varName)
+
+  const handleChange = useCallback((newPayload: FormInputItem) => {
+    if (!payload) {
+      onChange([...formInputs, newPayload])
+      return
+    }
+    if (payload?.output_variable_name !== newPayload.output_variable_name) {
+      onChange(produce(formInputs, (draft) => {
+        draft.splice(draft.findIndex(item => item.output_variable_name === payload?.output_variable_name), 1, newPayload)
+      }))
+      return
+    }
+    onChange(formInputs.map(item => item.output_variable_name === varName ? newPayload : item))
+  }, [formInputs, onChange, payload, varName])
+
+  return (
+    <div
+      ref={ref}
+      className="w-full pb-1 pt-3"
+    >
+      <ComponentUi
+        nodeId={nodeId}
+        varName={varName}
+        formInput={payload}
+        onChange={handleChange}
+        onRename={onRename}
+        onRemove={onRemove}
+        workflowNodesMap={workflowNodesMap}
+        getVarType={getVarType}
+        environmentVariables={environmentVariables}
+        conversationVariables={conversationVariables}
+        ragVariables={ragVariables}
+        readonly={readonly}
+      />
+    </div>
+  )
+}
+
+export default HITLInputComponent
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/hitl-input-block-replacement-block.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/hitl-input-block-replacement-block.tsx
@@ -0,0 +1,89 @@
+import type { TextNode } from 'lexical'
+import type { HITLInputBlockType } from '../../types'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { mergeRegister } from '@lexical/utils'
+import { $applyNodeReplacement } from 'lexical'
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+} from 'react'
+import { HITL_INPUT_REG } from '@/config'
+import { decoratorTransform } from '../../utils'
+import { CustomTextNode } from '../custom-text/node'
+import { $createHITLInputNode, HITLInputNode } from './node'
+
+const REGEX = new RegExp(HITL_INPUT_REG)
+
+const HITLInputReplacementBlock = ({
+  nodeId,
+  formInputs,
+  onFormInputsChange,
+  onFormInputItemRename,
+  onFormInputItemRemove,
+  workflowNodesMap,
+  getVarType,
+  variables,
+  readonly,
+}: HITLInputBlockType) => {
+  const [editor] = useLexicalComposerContext()
+
+  const environmentVariables = useMemo(() => variables?.find(o => o.nodeId === 'env')?.vars || [], [variables])
+  const conversationVariables = useMemo(() => variables?.find(o => o.nodeId === 'conversation')?.vars || [], [variables])
+  const ragVariables = useMemo(() => variables?.reduce<any[]>((acc, curr) => {
+    if (curr.nodeId === 'rag')
+      acc.push(...curr.vars)
+    else
+      acc.push(...curr.vars.filter(v => v.isRagVariable))
+    return acc
+  }, []), [variables])
+
+  useEffect(() => {
+    if (!editor.hasNodes([HITLInputNode]))
+      throw new Error('HITLInputNodePlugin: HITLInputNode not registered on editor')
+  }, [editor])
+
+  const createHITLInputBlockNode = useCallback((textNode: TextNode): HITLInputNode => {
+    const varName = textNode.getTextContent().split('.')[1].replace(/#\}\}$/, '')
+    return $applyNodeReplacement($createHITLInputNode(
+      varName,
+      nodeId,
+      formInputs || [],
+      onFormInputsChange!,
+      onFormInputItemRename,
+      onFormInputItemRemove!,
+      workflowNodesMap,
+      getVarType,
+      environmentVariables,
+      conversationVariables,
+      ragVariables,
+      readonly,
+    ))
+  }, [nodeId, formInputs, onFormInputsChange, onFormInputItemRename, onFormInputItemRemove, workflowNodesMap, getVarType, environmentVariables, conversationVariables, ragVariables, readonly])
+
+  const getMatch = useCallback((text: string) => {
+    const matchArr = REGEX.exec(text)
+
+    if (matchArr === null)
+      return null
+
+    const startOffset = matchArr.index
+    const endOffset = startOffset + matchArr[0].length
+    return {
+      end: endOffset,
+      start: startOffset,
+    }
+  }, [])
+
+  useEffect(() => {
+    REGEX.lastIndex = 0
+    return mergeRegister(
+      editor.registerNodeTransform(CustomTextNode, textNode => decoratorTransform(textNode, getMatch, createHITLInputBlockNode)),
+    )
+  }, [])
+
+  return null
+}
+
+export default memo(HITLInputReplacementBlock)
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/index.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/index.tsx
@@ -0,0 +1,106 @@
+import type { HITLInputBlockType } from '../../types'
+import type {
+  HITLNodeProps,
+} from './node'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { mergeRegister } from '@lexical/utils'
+import {
+  $insertNodes,
+  COMMAND_PRIORITY_EDITOR,
+  createCommand,
+} from 'lexical'
+import {
+  memo,
+  useEffect,
+} from 'react'
+import { CustomTextNode } from '../custom-text/node'
+import {
+  $createHITLInputNode,
+  HITLInputNode,
+} from './node'
+
+export const INSERT_HITL_INPUT_BLOCK_COMMAND = createCommand('INSERT_HITL_INPUT_BLOCK_COMMAND')
+export const DELETE_HITL_INPUT_BLOCK_COMMAND = createCommand('DELETE_HITL_INPUT_BLOCK_COMMAND')
+export const UPDATE_WORKFLOW_NODES_MAP = createCommand('UPDATE_WORKFLOW_NODES_MAP')
+
+export type HITLInputProps = {
+  onInsert?: () => void
+  onDelete?: () => void
+}
+const HITLInputBlock = memo(({
+  onInsert,
+  onDelete,
+  workflowNodesMap,
+  getVarType,
+  readonly,
+}: HITLInputBlockType) => {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    editor.update(() => {
+      editor.dispatchCommand(UPDATE_WORKFLOW_NODES_MAP, workflowNodesMap)
+    })
+  }, [editor, workflowNodesMap])
+
+  useEffect(() => {
+    if (!editor.hasNodes([HITLInputNode]))
+      throw new Error('HITLInputBlockPlugin: HITLInputBlock not registered on editor')
+    return mergeRegister(
+      editor.registerCommand(
+        INSERT_HITL_INPUT_BLOCK_COMMAND,
+        (nodeProps: HITLNodeProps) => {
+          const {
+            variableName,
+            nodeId,
+            formInputs,
+            onFormInputsChange,
+            onFormInputItemRename,
+            onFormInputItemRemove,
+          } = nodeProps
+          const currentHITLNode = $createHITLInputNode(
+            variableName,
+            nodeId,
+            formInputs,
+            onFormInputsChange,
+            onFormInputItemRename,
+            onFormInputItemRemove,
+            workflowNodesMap,
+            getVarType,
+            undefined,
+            undefined,
+            undefined,
+            readonly,
+          )
+          const prev = new CustomTextNode('\n')
+          $insertNodes([prev])
+          $insertNodes([currentHITLNode])
+          const next = new CustomTextNode('\n')
+          $insertNodes([next])
+          if (onInsert)
+            onInsert()
+
+          return true
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
+      editor.registerCommand(
+        DELETE_HITL_INPUT_BLOCK_COMMAND,
+        () => {
+          if (onDelete)
+            onDelete()
+
+          return true
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
+    )
+  }, [editor, onInsert, onDelete])
+
+  return null
+})
+
+HITLInputBlock.displayName = 'HITLInputBlock'
+
+export { HITLInputBlock }
+export { default as HITLInputBlockReplacementBlock } from './hitl-input-block-replacement-block'
+export { HITLInputNode } from './node'
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
@@ -0,0 +1,153 @@
+import type { FormInputItem, FormInputItemDefault } from '@/app/components/workflow/nodes/human-input/types'
+import type { ValueSelector } from '@/app/components/workflow/types'
+import { produce } from 'immer'
+import * as React from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Input from '@/app/components/base/input'
+import { InputVarType } from '@/app/components/workflow/types'
+import { getKeyboardKeyNameBySystem } from '@/app/components/workflow/utils'
+import Button from '../../../button'
+import PrePopulate from './pre-populate'
+
+const i18nPrefix = 'nodes.humanInput.insertInputField'
+
+type InputFieldProps = {
+  nodeId: string
+  isEdit: boolean
+  payload?: FormInputItem
+  onChange: (newPayload: FormInputItem) => void
+  onCancel: () => void
+}
+const defaultPayload: FormInputItem = {
+  type: InputVarType.paragraph,
+  output_variable_name: '',
+  default: { type: 'constant', selector: [], value: '' },
+}
+const InputField: React.FC<InputFieldProps> = ({
+  nodeId,
+  isEdit,
+  payload,
+  onChange,
+  onCancel,
+}) => {
+  const { t } = useTranslation()
+  const [tempPayload, setTempPayload] = useState(payload || defaultPayload)
+  const nameValid = useMemo(() => {
+    const name = tempPayload.output_variable_name.trim()
+    if (!name)
+      return false
+    if (name.includes(' '))
+      return false
+    return /^[a-z_]\w{0,29}$/.test(name)
+  }, [tempPayload.output_variable_name])
+  const handleSave = useCallback(() => {
+    if (!nameValid)
+      return
+    onChange(tempPayload)
+  }, [nameValid, onChange, tempPayload])
+  const defaultValueConfig = tempPayload.default
+  const handleDefaultValueChange = useCallback((key: keyof FormInputItemDefault) => {
+    return (value: ValueSelector | string) => {
+      const nextValue = produce(tempPayload, (draft) => {
+        if (!draft.default)
+          draft.default = { type: 'constant', selector: [], value: '' }
+        if (key === 'selector') {
+          draft.default.type = 'variable'
+          draft.default.selector = value as ValueSelector
+        }
+        else if (key === 'value') {
+          draft.default.type = 'constant'
+          draft.default.value = value as string
+        }
+        else if (key === 'type') {
+          draft.default.type = value as 'constant' | 'variable'
+        }
+      })
+      setTempPayload(nextValue)
+    }
+  }, [tempPayload])
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+        e.preventDefault()
+        handleSave()
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [handleSave])
+
+  return (
+    <div className="w-[372px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-3 shadow-lg backdrop-blur-[5px]">
+      <div className="system-md-semibold text-text-primary">{t(`${i18nPrefix}.title`, { ns: 'workflow' })}</div>
+      <div className="mt-3">
+        <div className="system-xs-medium text-text-secondary">
+          {t(`${i18nPrefix}.saveResponseAs`, { ns: 'workflow' })}
+          <span className="system-xs-regular relative text-text-destructive-secondary">*</span>
+        </div>
+        <Input
+          className="mt-1.5"
+          placeholder={t(`${i18nPrefix}.saveResponseAsPlaceholder`, { ns: 'workflow' })}
+          value={tempPayload.output_variable_name}
+          onChange={(e) => {
+            setTempPayload(prev => ({ ...prev, output_variable_name: e.target.value }))
+          }}
+          autoFocus
+        />
+        {tempPayload.output_variable_name && !nameValid && (
+          <div className="system-xs-regular mt-1 px-1 text-text-destructive-secondary">
+            {t(`${i18nPrefix}.variableNameInvalid`, { ns: 'workflow' })}
+          </div>
+        )}
+      </div>
+      <div className="mt-4">
+        <div className="system-xs-medium mb-1.5 text-text-secondary">
+          {t(`${i18nPrefix}.prePopulateField`, { ns: 'workflow' })}
+        </div>
+        <PrePopulate
+          isVariable={defaultValueConfig?.type === 'variable'}
+          onIsVariableChange={(isVariable) => {
+            handleDefaultValueChange('type')(isVariable ? 'variable' : 'constant')
+          }}
+          nodeId={nodeId}
+          valueSelector={defaultValueConfig?.selector}
+          onValueSelectorChange={handleDefaultValueChange('selector')}
+          value={defaultValueConfig?.value}
+          onValueChange={handleDefaultValueChange('value')}
+        />
+      </div>
+      <div className="mt-4 flex justify-end space-x-2">
+        <Button onClick={onCancel}>{t('operation.cancel', { ns: 'common' })}</Button>
+        {isEdit
+          ? (
+              <Button
+                variant="primary"
+                onClick={handleSave}
+                disabled={!nameValid}
+              >
+                {t('operation.save', { ns: 'common' })}
+              </Button>
+            )
+          : (
+              <Button
+                className="flex"
+                variant="primary"
+                disabled={!nameValid}
+                onClick={handleSave}
+              >
+                <span className="mr-1">{t(`${i18nPrefix}.insert`, { ns: 'workflow' })}</span>
+                <span className="system-kbd mr-0.5 flex h-4 items-center rounded-[4px] bg-components-kbd-bg-white px-1">{getKeyboardKeyNameBySystem('ctrl')}</span>
+                <span className="system-kbd flex h-4 items-center rounded-[4px] bg-components-kbd-bg-white px-1">↩︎</span>
+              </Button>
+            )}
+
+      </div>
+    </div>
+  )
+}
+
+export default InputField
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/node.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/node.tsx
@@ -0,0 +1,272 @@
+import type { LexicalNode, NodeKey, SerializedLexicalNode } from 'lexical'
+import type { GetVarType } from '../../types'
+import type { WorkflowNodesMap } from '../workflow-variable-block/node'
+import type { FormInputItem } from '@/app/components/workflow/nodes/human-input/types'
+import type { Var } from '@/app/components/workflow/types'
+import { DecoratorNode } from 'lexical'
+import HILTInputBlockComponent from './component'
+
+export type HITLNodeProps = {
+  variableName: string
+  nodeId: string
+  formInputs: FormInputItem[]
+  onFormInputsChange: (inputs: FormInputItem[]) => void
+  onFormInputItemRename: (payload: FormInputItem, oldName: string) => void
+  onFormInputItemRemove: (varName: string) => void
+  workflowNodesMap: WorkflowNodesMap
+  getVarType?: GetVarType
+  environmentVariables?: Var[]
+  conversationVariables?: Var[]
+  ragVariables?: Var[]
+  readonly?: boolean
+}
+
+export type SerializedNode = SerializedLexicalNode & HITLNodeProps
+
+export class HITLInputNode extends DecoratorNode<React.JSX.Element> {
+  __variableName: string
+  __nodeId: string
+  __formInputs?: FormInputItem[]
+  __onFormInputsChange: (inputs: FormInputItem[]) => void
+  __onFormInputItemRename: (payload: FormInputItem, oldName: string) => void
+  __onFormInputItemRemove: (varName: string) => void
+  __workflowNodesMap: WorkflowNodesMap
+  __getVarType?: GetVarType
+  __environmentVariables?: Var[]
+  __conversationVariables?: Var[]
+  __ragVariables?: Var[]
+  __readonly?: boolean
+
+  isIsolated(): boolean {
+    return true // This is necessary for drag-and-drop to work correctly
+  }
+
+  isTopLevel(): boolean {
+    return true // This is necessary for drag-and-drop to work correctly
+  }
+
+  static getType(): string {
+    return 'hitl-input-block'
+  }
+
+  getVariableName(): string {
+    const self = this.getLatest()
+    return self.__variableName
+  }
+
+  getNodeId(): string {
+    const self = this.getLatest()
+    return self.__nodeId
+  }
+
+  getFormInputs(): FormInputItem[] {
+    const self = this.getLatest()
+    return self.__formInputs || []
+  }
+
+  getOnFormInputsChange(): (inputs: FormInputItem[]) => void {
+    const self = this.getLatest()
+    return self.__onFormInputsChange
+  }
+
+  getOnFormInputItemRename(): (payload: FormInputItem, oldName: string) => void {
+    const self = this.getLatest()
+    return self.__onFormInputItemRename
+  }
+
+  getOnFormInputItemRemove(): (varName: string) => void {
+    const self = this.getLatest()
+    return self.__onFormInputItemRemove
+  }
+
+  getWorkflowNodesMap(): WorkflowNodesMap {
+    const self = this.getLatest()
+    return self.__workflowNodesMap
+  }
+
+  getGetVarType(): GetVarType | undefined {
+    const self = this.getLatest()
+    return self.__getVarType
+  }
+
+  getEnvironmentVariables(): Var[] {
+    const self = this.getLatest()
+    return self.__environmentVariables || []
+  }
+
+  getConversationVariables(): Var[] {
+    const self = this.getLatest()
+    return self.__conversationVariables || []
+  }
+
+  getRagVariables(): Var[] {
+    const self = this.getLatest()
+    return self.__ragVariables || []
+  }
+
+  getReadonly(): boolean {
+    const self = this.getLatest()
+    return self.__readonly || false
+  }
+
+  static clone(node: HITLInputNode): HITLInputNode {
+    return new HITLInputNode(
+      node.__variableName,
+      node.__nodeId,
+      node.__formInputs || [],
+      node.__onFormInputsChange,
+      node.__onFormInputItemRename,
+      node.__onFormInputItemRemove,
+      node.__workflowNodesMap,
+      node.__getVarType,
+      node.__environmentVariables,
+      node.__conversationVariables,
+      node.__ragVariables,
+      node.__readonly,
+      node.__key,
+    )
+  }
+
+  isInline(): boolean {
+    return true
+  }
+
+  constructor(
+    varName: string,
+    nodeId: string,
+    formInputs: FormInputItem[],
+    onFormInputsChange: (inputs: FormInputItem[]) => void,
+    onFormInputItemRename: (payload: FormInputItem, oldName: string) => void,
+    onFormInputItemRemove: (varName: string) => void,
+    workflowNodesMap: WorkflowNodesMap,
+    getVarType?: GetVarType,
+    environmentVariables?: Var[],
+    conversationVariables?: Var[],
+    ragVariables?: Var[],
+    readonly?: boolean,
+    key?: NodeKey,
+  ) {
+    super(key)
+
+    this.__variableName = varName
+    this.__nodeId = nodeId
+    this.__formInputs = formInputs
+    this.__onFormInputsChange = onFormInputsChange
+    this.__onFormInputItemRename = onFormInputItemRename
+    this.__onFormInputItemRemove = onFormInputItemRemove
+    this.__workflowNodesMap = workflowNodesMap
+    this.__getVarType = getVarType
+    this.__environmentVariables = environmentVariables
+    this.__conversationVariables = conversationVariables
+    this.__ragVariables = ragVariables
+    this.__readonly = readonly
+  }
+
+  createDOM(): HTMLElement {
+    const div = document.createElement('div')
+    div.classList.add('inline-flex', 'w-[calc(100%-1px)]', 'items-center', 'align-middle', 'support-drag')
+    return div
+  }
+
+  updateDOM(): false {
+    return false
+  }
+
+  decorate(): React.JSX.Element {
+    return (
+      <HILTInputBlockComponent
+        nodeKey={this.getKey()}
+        varName={this.getVariableName()}
+        nodeId={this.getNodeId()}
+        formInputs={this.getFormInputs()}
+        onChange={this.getOnFormInputsChange()}
+        onRename={this.getOnFormInputItemRename()}
+        onRemove={this.getOnFormInputItemRemove()}
+        workflowNodesMap={this.getWorkflowNodesMap()}
+        getVarType={this.getGetVarType()}
+        environmentVariables={this.getEnvironmentVariables()}
+        conversationVariables={this.getConversationVariables()}
+        ragVariables={this.getRagVariables()}
+        readonly={this.getReadonly()}
+      />
+    )
+  }
+
+  static importJSON(serializedNode: SerializedNode): HITLInputNode {
+    const node = $createHITLInputNode(
+      serializedNode.variableName,
+      serializedNode.nodeId,
+      serializedNode.formInputs,
+      serializedNode.onFormInputsChange,
+      serializedNode.onFormInputItemRename,
+      serializedNode.onFormInputItemRemove,
+      serializedNode.workflowNodesMap,
+      serializedNode.getVarType,
+      serializedNode.environmentVariables,
+      serializedNode.conversationVariables,
+      serializedNode.ragVariables,
+      serializedNode.readonly,
+    )
+
+    return node
+  }
+
+  exportJSON(): SerializedNode {
+    return {
+      type: 'hitl-input-block',
+      version: 1,
+      variableName: this.getVariableName(),
+      nodeId: this.getNodeId(),
+      formInputs: this.getFormInputs(),
+      onFormInputsChange: this.getOnFormInputsChange(),
+      onFormInputItemRename: this.getOnFormInputItemRename(),
+      onFormInputItemRemove: this.getOnFormInputItemRemove(),
+      workflowNodesMap: this.getWorkflowNodesMap(),
+      getVarType: this.getGetVarType(),
+      environmentVariables: this.getEnvironmentVariables(),
+      conversationVariables: this.getConversationVariables(),
+      ragVariables: this.getRagVariables(),
+      readonly: this.getReadonly(),
+    }
+  }
+
+  getTextContent(): string {
+    return `{{#$output.${this.getVariableName()}#}}`
+  }
+}
+
+export function $createHITLInputNode(
+  variableName: string,
+  nodeId: string,
+  formInputs: FormInputItem[],
+  onFormInputsChange: (inputs: FormInputItem[]) => void,
+  onFormInputItemRename: (payload: FormInputItem, oldName: string) => void,
+  onFormInputItemRemove: (varName: string) => void,
+  workflowNodesMap: WorkflowNodesMap,
+  getVarType?: GetVarType,
+  environmentVariables?: Var[],
+  conversationVariables?: Var[],
+  ragVariables?: Var[],
+  readonly?: boolean,
+): HITLInputNode {
+  return new HITLInputNode(
+    variableName,
+    nodeId,
+    formInputs,
+    onFormInputsChange,
+    onFormInputItemRename,
+    onFormInputItemRemove,
+    workflowNodesMap,
+    getVarType,
+    environmentVariables,
+    conversationVariables,
+    ragVariables,
+    readonly,
+  )
+}
+
+export function $isHITLInputNode(
+  node: HITLInputNode | LexicalNode | null | undefined,
+): node is HITLInputNode {
+  return node instanceof HITLInputNode
+}
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/pre-populate.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/pre-populate.tsx
@@ -0,0 +1,148 @@
+'use client'
+import type { FC } from 'react'
+import type { ValueSelector, Var } from '@/app/components/workflow/types'
+import * as React from 'react'
+import { useCallback, useEffect, useState } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
+import { VarType } from '@/app/components/workflow/types'
+import { cn } from '@/utils/classnames'
+import Textarea from '../../../textarea'
+import TagLabel from './tag-label'
+import TypeSwitch from './type-switch'
+
+type Props = {
+  isVariable?: boolean
+  onIsVariableChange?: (isVariable: boolean) => void
+  nodeId: string
+  valueSelector?: ValueSelector
+  onValueSelectorChange?: (valueSelector: ValueSelector | string) => void
+  value?: string
+  onValueChange?: (value: string) => void
+}
+
+const i18nPrefix = 'nodes.humanInput.insertInputField'
+
+type PlaceholderProps = {
+  varPickerProps: {
+    nodeId: string
+    value: ValueSelector
+    onChange: (valueSelector: ValueSelector | string) => void
+    readonly: boolean
+    zIndex: number
+    filterVar: (varPayload: Var) => boolean
+    isJustShowValue?: boolean
+  }
+  onTypeClick: (isVariable: boolean) => void
+}
+const Placeholder = ({
+  varPickerProps,
+  onTypeClick,
+}: PlaceholderProps) => {
+  const { t } = useTranslation()
+  return (
+    <div className="system-sm-regular mt-1 h-[80px] rounded-lg bg-components-input-bg-normal px-3 pt-2 text-text-tertiary">
+      <div className="flex flex-wrap items-center leading-5">
+        <Trans
+          i18nKey={`${i18nPrefix}.prePopulateFieldPlaceholder`}
+          ns="workflow"
+          components={{
+            staticContent: <TagLabel type="edit" className="mx-1" onClick={() => onTypeClick(false)}>{t(`${i18nPrefix}.staticContent`, { ns: 'workflow' })}</TagLabel>,
+            variable: (
+              <VarReferencePicker
+                {...varPickerProps}
+                trigger={
+                  <TagLabel type="variable" className="mx-1">{t(`${i18nPrefix}.variable`, { ns: 'workflow' })}</TagLabel>
+                }
+              />
+            ),
+          }}
+        />
+      </div>
+    </div>
+  )
+}
+
+const PrePopulate: FC<Props> = ({
+  isVariable = false,
+  onIsVariableChange,
+  nodeId,
+  valueSelector,
+  onValueSelectorChange,
+  value,
+  onValueChange,
+}) => {
+  const [onPlaceholderClicked, setOnPlaceholderClicked] = useState(false)
+  const handleTypeChange = useCallback((isVar: boolean) => {
+    setOnPlaceholderClicked(true)
+    onIsVariableChange?.(isVar)
+  }, [onIsVariableChange])
+
+  const [isFocus, setIsFocus] = useState(false)
+
+  const varPickerProps = {
+    nodeId,
+    value: valueSelector || [],
+    onChange: onValueSelectorChange!,
+    readonly: false,
+    zIndex: 1000000, // bigger than shortcut plugin popup
+    filterVar: (varPayload: Var) => {
+      return [VarType.string, VarType.number, VarType.secret].includes(varPayload.type)
+    },
+  }
+
+  const isShowPlaceholder = !onPlaceholderClicked && (isVariable ? (!valueSelector || valueSelector.length === 0) : !value)
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Tab' && !onPlaceholderClicked) {
+        e.preventDefault()
+        setOnPlaceholderClicked(true)
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [onPlaceholderClicked, setOnPlaceholderClicked])
+
+  if (isShowPlaceholder)
+    return <Placeholder varPickerProps={varPickerProps} onTypeClick={handleTypeChange} />
+
+  if (isVariable) {
+    return (
+      <div className="relative h-[80px] rounded-lg border border-transparent bg-components-input-bg-normal px-3 pt-2">
+        <VarReferencePicker
+          {...varPickerProps}
+          isJustShowValue
+        />
+        <TypeSwitch
+          className="absolute bottom-1 left-1.5"
+          isVariable={isVariable}
+          onIsVariableChange={handleTypeChange}
+        />
+      </div>
+    )
+  }
+  return (
+    <div className={cn('relative min-h-[80px] rounded-lg border border-transparent bg-components-input-bg-normal pb-1', isFocus && 'border-components-input-border-active bg-components-input-bg-active shadow-xs')}>
+      <Textarea
+        value={value || ''}
+        className="h-[43px] min-h-[43px] rounded-none border-none bg-transparent px-3 hover:bg-transparent focus:bg-transparent focus:shadow-none"
+        onChange={e => onValueChange?.(e.target.value)}
+        onFocus={() => {
+          setOnPlaceholderClicked(true)
+          setIsFocus(true)
+        }}
+        onBlur={() => setIsFocus(false)}
+        autoFocus
+      />
+      <TypeSwitch
+        className="absolute bottom-1 left-1.5"
+        isVariable={isVariable}
+        onIsVariableChange={handleTypeChange}
+      />
+    </div>
+  )
+}
+export default React.memo(PrePopulate)
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/tag-label.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/tag-label.tsx
@@ -0,0 +1,32 @@
+'use client'
+import type { FC } from 'react'
+import { RiEditLine } from '@remixicon/react'
+import * as React from 'react'
+import { cn } from '@/utils/classnames'
+import { Variable02 } from '../../../icons/src/vender/solid/development'
+
+type Props = {
+  type: 'edit' | 'variable'
+  children: string
+  className?: string
+  onClick?: () => void
+}
+
+const TagLabel: FC<Props> = ({
+  type,
+  children,
+  className,
+  onClick,
+}) => {
+  const Icon = type === 'edit' ? RiEditLine : Variable02
+  return (
+    <div
+      className={cn('inline-flex h-5 cursor-pointer items-center space-x-1 rounded-md bg-components-button-secondary-bg px-1 text-text-accent', className)}
+      onClick={onClick}
+    >
+      <Icon className="size-3.5" />
+      <div className="system-xs-medium">{children}</div>
+    </div>
+  )
+}
+export default React.memo(TagLabel)
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/type-switch.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/type-switch.tsx
@@ -0,0 +1,27 @@
+'use client'
+import type { FC } from 'react'
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import { cn } from '@/utils/classnames'
+import { Variable02 } from '../../../icons/src/vender/solid/development'
+
+type Props = {
+  className?: string
+  isVariable?: boolean
+  onIsVariableChange?: (isVariable: boolean) => void
+}
+
+const TypeSwitch: FC<Props> = ({
+  className,
+  isVariable,
+  onIsVariableChange,
+}) => {
+  const { t } = useTranslation()
+  return (
+    <div className={cn('inline-flex h-6 cursor-pointer select-none items-center space-x-1 rounded-md pl-1.5 pr-2 text-text-tertiary hover:bg-components-button-ghost-bg-hover', className)} onClick={() => onIsVariableChange?.(!isVariable)}>
+      <Variable02 className="size-3.5" />
+      <div className="system-xs-medium">{t(`nodes.humanInput.insertInputField.${isVariable ? 'useConstantInstead' : 'useVarInstead'}`, { ns: 'workflow' })}</div>
+    </div>
+  )
+}
+export default React.memo(TypeSwitch)
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/variable-block.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/variable-block.tsx
@@ -0,0 +1,148 @@
+import type { WorkflowNodesMap } from '../workflow-variable-block/node'
+import type { ValueSelector, Var } from '@/app/components/workflow/types'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { mergeRegister } from '@lexical/utils'
+import {
+  COMMAND_PRIORITY_EDITOR,
+} from 'lexical'
+import {
+  memo,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import Tooltip from '@/app/components/base/tooltip'
+import {
+  isConversationVar,
+  isENV,
+  isGlobalVar,
+  isRagVariableVar,
+  isSystemVar,
+} from '@/app/components/workflow/nodes/_base/components/variable/utils'
+import VarFullPathPanel from '@/app/components/workflow/nodes/_base/components/variable/var-full-path-panel'
+import {
+  VariableLabelInEditor,
+} from '@/app/components/workflow/nodes/_base/components/variable/variable-label'
+import { Type } from '@/app/components/workflow/nodes/llm/types'
+import { isExceptionVariable } from '@/app/components/workflow/utils'
+import { UPDATE_WORKFLOW_NODES_MAP } from '../workflow-variable-block'
+import { HITLInputNode } from './node'
+
+type HITLInputVariableBlockComponentProps = {
+  variables: string[]
+  workflowNodesMap: WorkflowNodesMap
+  environmentVariables?: Var[]
+  conversationVariables?: Var[]
+  ragVariables?: Var[]
+  getVarType?: (payload: {
+    nodeId: string
+    valueSelector: ValueSelector
+  }) => Type
+}
+
+const HITLInputVariableBlockComponent = ({
+  variables,
+  workflowNodesMap = {},
+  getVarType,
+  environmentVariables,
+  conversationVariables,
+  ragVariables,
+}: HITLInputVariableBlockComponentProps) => {
+  const { t } = useTranslation()
+  const [editor] = useLexicalComposerContext()
+  const variablesLength = variables.length
+  const isRagVar = isRagVariableVar(variables)
+  const isShowAPart = variablesLength > 2 && !isRagVar
+  const varName = (
+    () => {
+      const isSystem = isSystemVar(variables)
+      const varName = variables[variablesLength - 1]
+      return `${isSystem ? 'sys.' : ''}${varName}`
+    }
+  )()
+  const [localWorkflowNodesMap, setLocalWorkflowNodesMap] = useState<WorkflowNodesMap>(workflowNodesMap)
+  const node = localWorkflowNodesMap![variables[isRagVar ? 1 : 0]]
+
+  const isException = isExceptionVariable(varName, node?.type)
+  const variableValid = useMemo(() => {
+    let variableValid = true
+    const isEnv = isENV(variables)
+    const isChatVar = isConversationVar(variables)
+    const isGlobal = isGlobalVar(variables)
+    if (isGlobal)
+      return true
+
+    if (isEnv) {
+      if (environmentVariables)
+        variableValid = environmentVariables.some(v => v.variable === `${variables?.[0] ?? ''}.${variables?.[1] ?? ''}`)
+    }
+    else if (isChatVar) {
+      if (conversationVariables)
+        variableValid = conversationVariables.some(v => v.variable === `${variables?.[0] ?? ''}.${variables?.[1] ?? ''}`)
+    }
+    else if (isRagVar) {
+      if (ragVariables)
+        variableValid = ragVariables.some(v => v.variable === `${variables?.[0] ?? ''}.${variables?.[1] ?? ''}.${variables?.[2] ?? ''}`)
+    }
+    else {
+      variableValid = !!node
+    }
+    return variableValid
+  }, [variables, node, environmentVariables, conversationVariables, isRagVar, ragVariables])
+
+  useEffect(() => {
+    if (!editor.hasNodes([HITLInputNode]))
+      throw new Error('HITLInputNodePlugin: HITLInputNode not registered on editor')
+
+    return mergeRegister(
+      editor.registerCommand(
+        UPDATE_WORKFLOW_NODES_MAP,
+        (workflowNodesMap: WorkflowNodesMap) => {
+          setLocalWorkflowNodesMap(workflowNodesMap)
+
+          return true
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
+    )
+  }, [editor])
+
+  const Item = (
+    <VariableLabelInEditor
+      nodeType={node?.type}
+      nodeTitle={node?.title}
+      variables={variables}
+      isExceptionVariable={isException}
+      errorMsg={!variableValid ? t('errorMsg.invalidVariable', { ns: 'workflow' }) : undefined}
+      notShowFullPath={isShowAPart}
+    />
+  )
+
+  if (!node)
+    return Item
+
+  return (
+    <Tooltip
+      noDecoration
+      popupContent={(
+        <VarFullPathPanel
+          nodeName={node.title}
+          path={variables.slice(1)}
+          varType={getVarType
+            ? getVarType({
+                nodeId: variables[0],
+                valueSelector: variables,
+              })
+            : Type.string}
+          nodeType={node?.type}
+        />
+      )}
+      disabled={!isShowAPart}
+    >
+      <div>{Item}</div>
+    </Tooltip>
+  )
+}
+
+export default memo(HITLInputVariableBlockComponent)
--- a/web/app/components/base/prompt-editor/plugins/request-url-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/request-url-block/component.tsx
@@ -0,0 +1,33 @@
+import type { FC } from 'react'
+import { RiGlobalLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+
+import { cn } from '@/utils/classnames'
+import { useSelectOrDelete } from '../../hooks'
+import { DELETE_REQUEST_URL_BLOCK_COMMAND } from './index'
+
+type RequestURLBlockComponentProps = {
+  nodeKey: string
+}
+
+const RequestURLBlockComponent: FC<RequestURLBlockComponentProps> = ({
+  nodeKey,
+}) => {
+  const { t } = useTranslation()
+  const [ref, isSelected] = useSelectOrDelete(nodeKey, DELETE_REQUEST_URL_BLOCK_COMMAND)
+
+  return (
+    <div
+      className={cn(
+        'group/wrap relative mx-0.5 flex h-[18px] select-none items-center rounded-[5px] border border-components-panel-border-subtle bg-components-badge-white-to-dark px-1 hover:border-[#7839ee]',
+        isSelected && '!border-[#7839ee] hover:!border-[#7839ee]',
+      )}
+      ref={ref}
+    >
+      <RiGlobalLine className="mr-0.5 h-3.5 w-3.5 text-util-colors-violet-violet-600" />
+      <div className="system-xs-medium text-util-colors-violet-violet-600">{t('promptEditor.requestURL.item.title', { ns: 'common' })}</div>
+    </div>
+  )
+}
+
+export default RequestURLBlockComponent
--- a/web/app/components/base/prompt-editor/plugins/request-url-block/index.tsx
+++ b/web/app/components/base/prompt-editor/plugins/request-url-block/index.tsx
@@ -0,0 +1,64 @@
+import type { RequestURLBlockType } from '../../types'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { mergeRegister } from '@lexical/utils'
+import {
+  $insertNodes,
+  COMMAND_PRIORITY_EDITOR,
+  createCommand,
+} from 'lexical'
+import {
+  memo,
+  useEffect,
+} from 'react'
+import {
+  $createRequestURLBlockNode,
+  RequestURLBlockNode,
+} from './node'
+
+export const INSERT_REQUEST_URL_BLOCK_COMMAND = createCommand('INSERT_REQUEST_URL_BLOCK_COMMAND')
+export const DELETE_REQUEST_URL_BLOCK_COMMAND = createCommand('DELETE_REQUEST_URL_BLOCK_COMMAND')
+
+const RequestURLBlock = memo(({
+  onInsert,
+  onDelete,
+}: RequestURLBlockType) => {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    if (!editor.hasNodes([RequestURLBlockNode]))
+      throw new Error('RequestURLBlockPlugin: RequestURLBlock not registered on editor')
+
+    return mergeRegister(
+      editor.registerCommand(
+        INSERT_REQUEST_URL_BLOCK_COMMAND,
+        () => {
+          const contextBlockNode = $createRequestURLBlockNode()
+
+          $insertNodes([contextBlockNode])
+          if (onInsert)
+            onInsert()
+
+          return true
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
+      editor.registerCommand(
+        DELETE_REQUEST_URL_BLOCK_COMMAND,
+        () => {
+          if (onDelete)
+            onDelete()
+
+          return true
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
+    )
+  }, [editor, onInsert, onDelete])
+
+  return null
+})
+RequestURLBlock.displayName = 'RequestURLBlock'
+
+export { RequestURLBlock }
+export { RequestURLBlockNode } from './node'
+export { default as RequestURLBlockReplacementBlock } from './request-url-block-replacement-block'
--- a/web/app/components/base/prompt-editor/plugins/request-url-block/node.tsx
+++ b/web/app/components/base/prompt-editor/plugins/request-url-block/node.tsx
@@ -0,0 +1,59 @@
+import type { LexicalNode, SerializedLexicalNode } from 'lexical'
+import { DecoratorNode } from 'lexical'
+import RequestURLBlockComponent from './component'
+
+export type SerializedNode = SerializedLexicalNode
+
+export class RequestURLBlockNode extends DecoratorNode<React.JSX.Element> {
+  static getType(): string {
+    return 'request-url-block'
+  }
+
+  static clone(node: RequestURLBlockNode): RequestURLBlockNode {
+    return new RequestURLBlockNode(node.__key)
+  }
+
+  isInline(): boolean {
+    return true
+  }
+
+  createDOM(): HTMLElement {
+    const div = document.createElement('div')
+    div.classList.add('inline-flex', 'items-center', 'align-middle')
+    return div
+  }
+
+  updateDOM(): false {
+    return false
+  }
+
+  decorate(): React.JSX.Element {
+    return <RequestURLBlockComponent nodeKey={this.getKey()} />
+  }
+
+  static importJSON(): RequestURLBlockNode {
+    const node = $createRequestURLBlockNode()
+
+    return node
+  }
+
+  exportJSON(): SerializedNode {
+    return {
+      type: 'request-url-block',
+      version: 1,
+    }
+  }
+
+  getTextContent(): string {
+    return '{{#url#}}'
+  }
+}
+export function $createRequestURLBlockNode(): RequestURLBlockNode {
+  return new RequestURLBlockNode()
+}
+
+export function $isRequestURLBlockNode(
+  node: RequestURLBlockNode | LexicalNode | null | undefined,
+): node is RequestURLBlockNode {
+  return node instanceof RequestURLBlockNode
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
yyh	e28f42076f	Merge remote-tracking branch 'origin/feat/support-agent-sandbox' into pre-align-hitl-frontend	2026-02-07 21:44:39 +08:00
yyh	ad8491184b	Merge remote-tracking branch 'origin/main' into pre-align-hitl-frontend	2026-02-07 21:44:27 +08:00
yyh	b56fed338a	update	2026-02-07 13:28:21 +08:00
yyh	f60eb39e4c	update merge notes	2026-02-07 13:24:33 +08:00
Crazywoola	c185a51bad	fix: remove unexpected scrollbar in KB Retrieval settings (#32082 ) Some checks are pending autofix.ci / autofix (push) Waiting to run Details Build and Push API & Web / build (api, DIFY_API_IMAGE_NAME, linux/amd64, build-api-amd64) (push) Waiting to run Details Build and Push API & Web / build (api, DIFY_API_IMAGE_NAME, linux/arm64, build-api-arm64) (push) Waiting to run Details Build and Push API & Web / build (web, DIFY_WEB_IMAGE_NAME, linux/amd64, build-web-amd64) (push) Waiting to run Details Build and Push API & Web / build (web, DIFY_WEB_IMAGE_NAME, linux/arm64, build-web-arm64) (push) Waiting to run Details Build and Push API & Web / create-manifest (api, DIFY_API_IMAGE_NAME, merge-api-images) (push) Blocked by required conditions Details Build and Push API & Web / create-manifest (web, DIFY_WEB_IMAGE_NAME, merge-web-images) (push) Blocked by required conditions Details Main CI Pipeline / Check Changed Files (push) Waiting to run Details Main CI Pipeline / API Tests (push) Blocked by required conditions Details Main CI Pipeline / Web Tests (push) Blocked by required conditions Details Main CI Pipeline / Style Check (push) Waiting to run Details Main CI Pipeline / VDB Tests (push) Blocked by required conditions Details Main CI Pipeline / DB Migration Test (push) Blocked by required conditions Details	2026-02-07 13:23:01 +08:00
yyh	4c61b36233	Merge remote-tracking branch 'origin/feat/support-agent-sandbox' into pre-align-hitl-frontend	2026-02-07 12:45:03 +08:00
yyh	ccbbf9161c	Merge remote-tracking branch 'origin/main' into pre-align-hitl-frontend	2026-02-07 12:44:44 +08:00
yyh	39146f7b20	Merge remote-tracking branch 'origin/feat/support-agent-sandbox' into pre-align-hitl-frontend	2026-02-06 19:15:13 +08:00
yyh	16513a340c	add merge notes	2026-02-06 19:14:14 +08:00
yyh	30b9295156	Merge remote-tracking branch 'origin/build/feat/hitl' into wip/hitl-merge-web-conflicts-20260206-175434 # Conflicts: # api/.env.example # api/core/app/apps/advanced_chat/app_generator.py # api/core/app/apps/advanced_chat/app_runner.py # api/core/app/apps/advanced_chat/generate_task_pipeline.py # api/core/app/apps/workflow/app_generator.py # api/core/app/apps/workflow/app_runner.py # api/core/app/entities/queue_entities.py # api/core/workflow/node_events/__init__.py # api/core/workflow/runtime/graph_runtime_state.py # api/fields/message_fields.py # api/services/workflow_service.py # web/app/components/app/app-publisher/index.tsx # web/app/components/base/chat/chat/answer/index.tsx # web/app/components/base/chat/chat/hooks.ts # web/app/components/base/chat/chat/type.ts # web/app/components/base/prompt-editor/index.tsx # web/app/components/rag-pipeline/hooks/use-available-nodes-meta-data.ts # web/app/components/share/text-generation/result/header.tsx # web/app/components/workflow-app/components/workflow-header/features-trigger.tsx # web/app/components/workflow-app/hooks/use-workflow-run.ts # web/app/components/workflow/hooks/use-checklist.ts # web/app/components/workflow/hooks/use-fetch-workflow-inspect-vars.ts # web/app/components/workflow/hooks/use-workflow.ts # web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx # web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx # web/app/components/workflow/nodes/_base/node.tsx # web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/components/placeholder.tsx # web/app/components/workflow/panel/debug-and-preview/hooks.ts # web/app/components/workflow/panel/workflow-preview.tsx # web/app/components/workflow/store/workflow/workflow-slice.ts # web/eslint-suppressions.json # web/i18n/en-US/common.json # web/i18n/zh-Hans/common.json # web/i18n/zh-Hant/common.json # web/service/workflow.ts	2026-02-06 19:13:51 +08:00
Jyong	4430a1b3da	fix: batch delete document db session block (#32062 ) Some checks failed autofix.ci / autofix (push) Has been cancelled Details Build and Push API & Web / build (api, DIFY_API_IMAGE_NAME, linux/amd64, build-api-amd64) (push) Has been cancelled Details Build and Push API & Web / build (api, DIFY_API_IMAGE_NAME, linux/arm64, build-api-arm64) (push) Has been cancelled Details Build and Push API & Web / build (web, DIFY_WEB_IMAGE_NAME, linux/amd64, build-web-amd64) (push) Has been cancelled Details Build and Push API & Web / build (web, DIFY_WEB_IMAGE_NAME, linux/arm64, build-web-arm64) (push) Has been cancelled Details Build and Push API & Web / create-manifest (api, DIFY_API_IMAGE_NAME, merge-api-images) (push) Has been cancelled Details Build and Push API & Web / create-manifest (web, DIFY_WEB_IMAGE_NAME, merge-web-images) (push) Has been cancelled Details Main CI Pipeline / Check Changed Files (push) Has been cancelled Details Main CI Pipeline / API Tests (push) Has been cancelled Details Main CI Pipeline / Web Tests (push) Has been cancelled Details Main CI Pipeline / Style Check (push) Has been cancelled Details Main CI Pipeline / VDB Tests (push) Has been cancelled Details Main CI Pipeline / DB Migration Test (push) Has been cancelled Details	2026-02-06 18:02:14 +08:00
zyssyz123	2c9430313d	fix: redis for api token (#31861 ) Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Co-authored-by: hj24 <mambahj24@gmail.com>	2026-02-06 16:25:27 +08:00
QuantumGhost	552ee369b2	chore: update deploy branches for deploy-hitl.yaml (#32051 )	2026-02-06 16:14:05 +08:00
Stephen Zhou	d5b9a7b2f8	test: only remove text coverage in CI (#32043 )	2026-02-06 16:12:28 +08:00
NeatGuyCoding	c2a3f459c7	fix(api): return proper HTTP 204 status code in DELETE endpoints (#32012 ) Some checks failed autofix.ci / autofix (push) Has been cancelled Details Build and Push API & Web / build (api, DIFY_API_IMAGE_NAME, linux/amd64, build-api-amd64) (push) Has been cancelled Details Build and Push API & Web / build (api, DIFY_API_IMAGE_NAME, linux/arm64, build-api-arm64) (push) Has been cancelled Details Build and Push API & Web / build (web, DIFY_WEB_IMAGE_NAME, linux/amd64, build-web-amd64) (push) Has been cancelled Details Build and Push API & Web / build (web, DIFY_WEB_IMAGE_NAME, linux/arm64, build-web-arm64) (push) Has been cancelled Details Build and Push API & Web / create-manifest (api, DIFY_API_IMAGE_NAME, merge-api-images) (push) Has been cancelled Details Build and Push API & Web / create-manifest (web, DIFY_WEB_IMAGE_NAME, merge-web-images) (push) Has been cancelled Details Main CI Pipeline / Check Changed Files (push) Has been cancelled Details Main CI Pipeline / API Tests (push) Has been cancelled Details Main CI Pipeline / Web Tests (push) Has been cancelled Details Main CI Pipeline / Style Check (push) Has been cancelled Details Main CI Pipeline / VDB Tests (push) Has been cancelled Details Main CI Pipeline / DB Migration Test (push) Has been cancelled Details Signed-off-by: NeatGuyCoding <15627489+NeatGuyCoding@users.noreply.github.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>	2026-02-06 15:32:52 +08:00
QuantumGhost	4971e11734	perf: use batch delete method instead of single delete (#32036 ) Co-authored-by: fatelei <fatelei@gmail.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: FFXN <lizy@dify.ai>	2026-02-06 15:12:32 +08:00
QuantumGhost	3d0ff9463f	Merge branch 'fix/redis-pubsub-perf' into feat/hitl	2026-02-06 14:42:39 +08:00
QuantumGhost	b893d2df82	docs(api): add a short note about the `target_node` argument	2026-02-06 14:42:04 +08:00
wangxiaolei	a297b06aac	fix: fix tool type is miss (#32042 )	2026-02-06 14:38:15 +08:00
QuantumGhost	79b6117d80	fixup! fix(api): fix performance issue in ShardedRedisBroadcastChannel	2026-02-06 14:35:19 +08:00
WTW0313	d2ef434dec	Merge branch 'main' into feat/hitl	2026-02-06 13:58:24 +08:00
QuantumGhost	aaf83c2b4c	chore(api): fix linting issue	2026-02-05 16:15:32 +08:00
QuantumGhost	d898bcff90	feat(api): adjust timeout for get_message to 1s	2026-02-05 15:22:09 +08:00
twwu	b4cf146c85	Merge branch 'main' into feat/hitl	2026-02-05 14:56:02 +08:00
QuantumGhost	f21782a9a3	fix(api): fix performance issue in ShardedRedisBroadcastChannel	2026-02-05 13:28:39 +08:00
JzoNg	e4455987e7	fix: do not stop when workflow paused event recieved	2026-02-05 11:16:14 +08:00
twwu	b2ceb41dd6	Merge branch 'main' into feat/hitl	2026-02-05 11:13:40 +08:00
QuantumGhost	f614153f30	chore(api): fix circular import	2026-02-02 16:52:43 +08:00
QuantumGhost	8ca020e179	Revert "revert: revert human input relevant code (#31766 )" This reverts commit `90fe9abab7`.	2026-02-01 16:21:14 +08:00