step run of human input

.github/workflows/build-push.yml

@@ -8,6 +8,7 @@ on:
       - "build/**"
       - "release/e-*"
       - "hotfix/**"
+      - "feat/hitl-frontend"
     tags:
       - "*"
 

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

@@ -1,4 +1,4 @@
-name: Deploy Agent Dev
+name: Deploy Trigger Dev
 
 permissions:
   contents: read
@@ -7,7 +7,7 @@ on:
   workflow_run:
     workflows: ["Build and Push API & Web"]
     branches:
-      - "deploy/agent-dev"
+      - "deploy/trigger-dev"
     types:
       - completed
 
@@ -16,12 +16,12 @@ jobs:
     runs-on: ubuntu-latest
     if: |
       github.event.workflow_run.conclusion == 'success' &&
-      github.event.workflow_run.head_branch == 'deploy/agent-dev'
+      github.event.workflow_run.head_branch == 'deploy/trigger-dev'
     steps:
       - name: Deploy to server
         uses: appleboy/ssh-action@v0.1.8
         with:
-          host: ${{ secrets.AGENT_DEV_SSH_HOST }}
+          host: ${{ secrets.TRIGGER_SSH_HOST }}
           username: ${{ secrets.SSH_USER }}
           key: ${{ secrets.SSH_PRIVATE_KEY }}
           script: |

api/core/app/app_config/entities.py

@@ -1,3 +1,4 @@
+import json
 from collections.abc import Sequence
 from enum import StrEnum, auto
 from typing import Any, Literal
@@ -120,7 +121,7 @@ class VariableEntity(BaseModel):
     allowed_file_types: Sequence[FileType] | None = Field(default_factory=list)
     allowed_file_extensions: Sequence[str] | None = Field(default_factory=list)
     allowed_file_upload_methods: Sequence[FileTransferMethod] | None = Field(default_factory=list)
-    json_schema: dict | None = Field(default=None)
+    json_schema: str | None = Field(default=None)
 
     @field_validator("description", mode="before")
     @classmethod
@@ -134,11 +135,17 @@ class VariableEntity(BaseModel):
 
     @field_validator("json_schema")
     @classmethod
-    def validate_json_schema(cls, schema: dict | None) -> dict | None:
+    def validate_json_schema(cls, schema: str | None) -> str | None:
         if schema is None:
             return None
+
         try:
-            Draft7Validator.check_schema(schema)
+            json_schema = json.loads(schema)
+        except json.JSONDecodeError:
+            raise ValueError(f"invalid json_schema value {schema}")
+
+        try:
+            Draft7Validator.check_schema(json_schema)
         except SchemaError as e:
             raise ValueError(f"Invalid JSON schema: {e.message}")
         return schema

api/core/app/apps/advanced_chat/app_config_manager.py

@@ -26,6 +26,7 @@ class AdvancedChatAppConfigManager(BaseAppConfigManager):
     @classmethod
     def get_app_config(cls, app_model: App, workflow: Workflow) -> AdvancedChatAppConfig:
         features_dict = workflow.features_dict
+
         app_mode = AppMode.value_of(app_model.mode)
         app_config = AdvancedChatAppConfig(
             tenant_id=app_model.tenant_id,

api/core/app/apps/advanced_chat/generate_task_pipeline.py

@@ -358,6 +358,25 @@ class AdvancedChatAppGenerateTaskPipeline(GraphRuntimeStateSupport):
         if node_finish_resp:
             yield node_finish_resp
 
+        # For ANSWER nodes, check if we need to send a message_replace event
+        # Only send if the final output differs from the accumulated task_state.answer
+        # This happens when variables were updated by variable_assigner during workflow execution
+        if event.node_type == NodeType.ANSWER and event.outputs:
+            final_answer = event.outputs.get("answer")
+            if final_answer is not None and final_answer != self._task_state.answer:
+                logger.info(
+                    "ANSWER node final output '%s' differs from accumulated answer '%s', sending message_replace event",
+                    final_answer,
+                    self._task_state.answer,
+                )
+                # Update the task state answer
+                self._task_state.answer = str(final_answer)
+                # Send message_replace event to update the UI
+                yield self._message_cycle_manager.message_replace_to_stream_response(
+                    answer=str(final_answer),
+                    reason="variable_update",
+                )
+
     def _handle_node_failed_events(
         self,
         event: Union[QueueNodeFailedEvent, QueueNodeExceptionEvent],

api/core/app/apps/base_app_generator.py

@@ -1,3 +1,4 @@
+import json
 from collections.abc import Generator, Mapping, Sequence
 from typing import TYPE_CHECKING, Any, Union, final
 
@@ -75,24 +76,12 @@ class BaseAppGenerator:
         user_inputs = {**user_inputs, **files_inputs, **file_list_inputs}
 
         # Check if all files are converted to File
-        invalid_dict_keys = [
-            k
-            for k, v in user_inputs.items()
-            if isinstance(v, dict)
-            and entity_dictionary[k].type not in {VariableEntityType.FILE, VariableEntityType.JSON_OBJECT}
-        ]
-        if invalid_dict_keys:
-            raise ValueError(f"Invalid input type for {invalid_dict_keys}")
-
-        invalid_list_dict_keys = [
-            k
-            for k, v in user_inputs.items()
-            if isinstance(v, list)
-            and any(isinstance(item, dict) for item in v)
-            and entity_dictionary[k].type != VariableEntityType.FILE_LIST
-        ]
-        if invalid_list_dict_keys:
-            raise ValueError(f"Invalid input type for {invalid_list_dict_keys}")
+        if any(filter(lambda v: isinstance(v, dict), user_inputs.values())):
+            raise ValueError("Invalid input type")
+        if any(
+            filter(lambda v: isinstance(v, dict), filter(lambda item: isinstance(item, list), user_inputs.values()))
+        ):
+            raise ValueError("Invalid input type")
 
         return user_inputs
 
@@ -189,8 +178,12 @@ class BaseAppGenerator:
                     elif value == 0:
                         value = False
             case VariableEntityType.JSON_OBJECT:
-                if not isinstance(value, dict):
-                    raise ValueError(f"{variable_entity.variable} in input form must be a dict")
+                if not isinstance(value, str):
+                    raise ValueError(f"{variable_entity.variable} in input form must be a string")
+                try:
+                    json.loads(value)
+                except json.JSONDecodeError:
+                    raise ValueError(f"{variable_entity.variable} in input form must be a valid JSON object")
             case _:
                 raise AssertionError("this statement should be unreachable.")
 

api/core/workflow/nodes/start/start_node.py

@@ -1,3 +1,4 @@
+import json
 from typing import Any
 
 from jsonschema import Draft7Validator, ValidationError
@@ -42,22 +43,25 @@ class StartNode(Node[StartNodeData]):
             if value is None and variable.required:
                 raise ValueError(f"{key} is required in input form")
 
-            # If no value provided, skip further processing for this key
-            if not value:
-                continue
-
-            if not isinstance(value, dict):
-                raise ValueError(f"JSON object for '{key}' must be an object")
-
-            # Overwrite with normalized dict to ensure downstream consistency
-            node_inputs[key] = value
-
-            # If schema exists, then validate against it
             schema = variable.json_schema
             if not schema:
                 continue
 
+            if not value:
+                continue
+
             try:
-                Draft7Validator(schema).validate(value)
+                json_schema = json.loads(schema)
+            except json.JSONDecodeError as e:
+                raise ValueError(f"{schema} must be a valid JSON object")
+
+            try:
+                json_value = json.loads(value)
+            except json.JSONDecodeError as e:
+                raise ValueError(f"{value} must be a valid JSON object")
+
+            try:
+                Draft7Validator(json_schema).validate(json_value)
             except ValidationError as e:
                 raise ValueError(f"JSON object for '{key}' does not match schema: {e.message}")
+            node_inputs[key] = json_value

api/tests/unit_tests/core/app/apps/advanced_chat/test_generate_task_pipeline_answer_node.py

@@ -0,0 +1,390 @@
+"""
+Tests for AdvancedChatAppGenerateTaskPipeline._handle_node_succeeded_event method,
+specifically testing the ANSWER node message_replace logic.
+"""
+
+from datetime import datetime
+from types import SimpleNamespace
+from unittest.mock import MagicMock, Mock, patch
+
+import pytest
+
+from core.app.entities.app_invoke_entities import AdvancedChatAppGenerateEntity
+from core.app.entities.queue_entities import QueueNodeSucceededEvent
+from core.workflow.enums import NodeType
+from models import EndUser
+from models.model import AppMode
+
+
+class TestAnswerNodeMessageReplace:
+    """Test cases for ANSWER node message_replace event logic."""
+
+    @pytest.fixture
+    def mock_application_generate_entity(self):
+        """Create a mock application generate entity."""
+        entity = Mock(spec=AdvancedChatAppGenerateEntity)
+        entity.task_id = "test-task-id"
+        entity.app_id = "test-app-id"
+        entity.workflow_run_id = "test-workflow-run-id"
+        # minimal app_config used by pipeline internals
+        entity.app_config = SimpleNamespace(
+            tenant_id="test-tenant-id",
+            app_id="test-app-id",
+            app_mode=AppMode.ADVANCED_CHAT,
+            app_model_config_dict={},
+            additional_features=None,
+            sensitive_word_avoidance=None,
+        )
+        entity.query = "test query"
+        entity.files = []
+        entity.extras = {}
+        entity.trace_manager = None
+        entity.inputs = {}
+        entity.invoke_from = "debugger"
+        return entity
+
+    @pytest.fixture
+    def mock_workflow(self):
+        """Create a mock workflow."""
+        workflow = Mock()
+        workflow.id = "test-workflow-id"
+        workflow.features_dict = {}
+        return workflow
+
+    @pytest.fixture
+    def mock_queue_manager(self):
+        """Create a mock queue manager."""
+        manager = Mock()
+        manager.listen.return_value = []
+        manager.graph_runtime_state = None
+        return manager
+
+    @pytest.fixture
+    def mock_conversation(self):
+        """Create a mock conversation."""
+        conversation = Mock()
+        conversation.id = "test-conversation-id"
+        conversation.mode = "advanced_chat"
+        return conversation
+
+    @pytest.fixture
+    def mock_message(self):
+        """Create a mock message."""
+        message = Mock()
+        message.id = "test-message-id"
+        message.query = "test query"
+        message.created_at = Mock()
+        message.created_at.timestamp.return_value = 1234567890
+        return message
+
+    @pytest.fixture
+    def mock_user(self):
+        """Create a mock end user."""
+        user = MagicMock(spec=EndUser)
+        user.id = "test-user-id"
+        user.session_id = "test-session-id"
+        return user
+
+    @pytest.fixture
+    def mock_draft_var_saver_factory(self):
+        """Create a mock draft variable saver factory."""
+        return Mock()
+
+    @pytest.fixture
+    def pipeline(
+        self,
+        mock_application_generate_entity,
+        mock_workflow,
+        mock_queue_manager,
+        mock_conversation,
+        mock_message,
+        mock_user,
+        mock_draft_var_saver_factory,
+    ):
+        """Create an AdvancedChatAppGenerateTaskPipeline instance with mocked dependencies."""
+        from core.app.apps.advanced_chat.generate_task_pipeline import AdvancedChatAppGenerateTaskPipeline
+
+        with patch("core.app.apps.advanced_chat.generate_task_pipeline.db"):
+            pipeline = AdvancedChatAppGenerateTaskPipeline(
+                application_generate_entity=mock_application_generate_entity,
+                workflow=mock_workflow,
+                queue_manager=mock_queue_manager,
+                conversation=mock_conversation,
+                message=mock_message,
+                user=mock_user,
+                stream=True,
+                dialogue_count=1,
+                draft_var_saver_factory=mock_draft_var_saver_factory,
+            )
+            # Initialize workflow run id to avoid validation errors
+            pipeline._workflow_run_id = "test-workflow-run-id"
+            # Mock the message cycle manager methods we need to track
+            pipeline._message_cycle_manager.message_replace_to_stream_response = Mock()
+            return pipeline
+
+    def test_answer_node_with_different_output_sends_message_replace(self, pipeline, mock_application_generate_entity):
+        """
+        Test that when an ANSWER node's final output differs from accumulated answer,
+        a message_replace event is sent.
+        """
+        # Arrange: Set initial accumulated answer
+        pipeline._task_state.answer = "initial answer"
+
+        # Create ANSWER node succeeded event with different final output
+        event = QueueNodeSucceededEvent(
+            node_execution_id="test-node-execution-id",
+            node_id="test-answer-node",
+            node_type=NodeType.ANSWER,
+            start_at=datetime.now(),
+            outputs={"answer": "updated final answer"},
+        )
+
+        # Mock the workflow response converter to avoid extra processing
+        pipeline._workflow_response_converter.workflow_node_finish_to_stream_response = Mock(return_value=None)
+        pipeline._save_output_for_event = Mock()
+
+        # Act
+        responses = list(pipeline._handle_node_succeeded_event(event))
+
+        # Assert
+        assert pipeline._task_state.answer == "updated final answer"
+        # Verify message_replace was called
+        pipeline._message_cycle_manager.message_replace_to_stream_response.assert_called_once_with(
+            answer="updated final answer", reason="variable_update"
+        )
+
+    def test_answer_node_with_same_output_does_not_send_message_replace(self, pipeline):
+        """
+        Test that when an ANSWER node's final output is the same as accumulated answer,
+        no message_replace event is sent.
+        """
+        # Arrange: Set initial accumulated answer
+        pipeline._task_state.answer = "same answer"
+
+        # Create ANSWER node succeeded event with same output
+        event = QueueNodeSucceededEvent(
+            node_execution_id="test-node-execution-id",
+            node_id="test-answer-node",
+            node_type=NodeType.ANSWER,
+            start_at=datetime.now(),
+            outputs={"answer": "same answer"},
+        )
+
+        # Mock the workflow response converter
+        pipeline._workflow_response_converter.workflow_node_finish_to_stream_response = Mock(return_value=None)
+        pipeline._save_output_for_event = Mock()
+
+        # Act
+        list(pipeline._handle_node_succeeded_event(event))
+
+        # Assert: answer should remain unchanged
+        assert pipeline._task_state.answer == "same answer"
+        # Verify message_replace was NOT called
+        pipeline._message_cycle_manager.message_replace_to_stream_response.assert_not_called()
+
+    def test_answer_node_with_none_output_does_not_send_message_replace(self, pipeline):
+        """
+        Test that when an ANSWER node's output is None or missing 'answer' key,
+        no message_replace event is sent.
+        """
+        # Arrange: Set initial accumulated answer
+        pipeline._task_state.answer = "existing answer"
+
+        # Create ANSWER node succeeded event with None output
+        event = QueueNodeSucceededEvent(
+            node_execution_id="test-node-execution-id",
+            node_id="test-answer-node",
+            node_type=NodeType.ANSWER,
+            start_at=datetime.now(),
+            outputs={"answer": None},
+        )
+
+        # Mock the workflow response converter
+        pipeline._workflow_response_converter.workflow_node_finish_to_stream_response = Mock(return_value=None)
+        pipeline._save_output_for_event = Mock()
+
+        # Act
+        list(pipeline._handle_node_succeeded_event(event))
+
+        # Assert: answer should remain unchanged
+        assert pipeline._task_state.answer == "existing answer"
+        # Verify message_replace was NOT called
+        pipeline._message_cycle_manager.message_replace_to_stream_response.assert_not_called()
+
+    def test_answer_node_with_empty_outputs_does_not_send_message_replace(self, pipeline):
+        """
+        Test that when an ANSWER node has empty outputs dict,
+        no message_replace event is sent.
+        """
+        # Arrange: Set initial accumulated answer
+        pipeline._task_state.answer = "existing answer"
+
+        # Create ANSWER node succeeded event with empty outputs
+        event = QueueNodeSucceededEvent(
+            node_execution_id="test-node-execution-id",
+            node_id="test-answer-node",
+            node_type=NodeType.ANSWER,
+            start_at=datetime.now(),
+            outputs={},
+        )
+
+        # Mock the workflow response converter
+        pipeline._workflow_response_converter.workflow_node_finish_to_stream_response = Mock(return_value=None)
+        pipeline._save_output_for_event = Mock()
+
+        # Act
+        list(pipeline._handle_node_succeeded_event(event))
+
+        # Assert: answer should remain unchanged
+        assert pipeline._task_state.answer == "existing answer"
+        # Verify message_replace was NOT called
+        pipeline._message_cycle_manager.message_replace_to_stream_response.assert_not_called()
+
+    def test_answer_node_with_no_answer_key_in_outputs(self, pipeline):
+        """
+        Test that when an ANSWER node's outputs don't contain 'answer' key,
+        no message_replace event is sent.
+        """
+        # Arrange: Set initial accumulated answer
+        pipeline._task_state.answer = "existing answer"
+
+        # Create ANSWER node succeeded event without 'answer' key in outputs
+        event = QueueNodeSucceededEvent(
+            node_execution_id="test-node-execution-id",
+            node_id="test-answer-node",
+            node_type=NodeType.ANSWER,
+            start_at=datetime.now(),
+            outputs={"other_key": "some value"},
+        )
+
+        # Mock the workflow response converter
+        pipeline._workflow_response_converter.workflow_node_finish_to_stream_response = Mock(return_value=None)
+        pipeline._save_output_for_event = Mock()
+
+        # Act
+        list(pipeline._handle_node_succeeded_event(event))
+
+        # Assert: answer should remain unchanged
+        assert pipeline._task_state.answer == "existing answer"
+        # Verify message_replace was NOT called
+        pipeline._message_cycle_manager.message_replace_to_stream_response.assert_not_called()
+
+    def test_non_answer_node_does_not_send_message_replace(self, pipeline):
+        """
+        Test that non-ANSWER nodes (e.g., LLM, END) don't trigger message_replace events.
+        """
+        # Arrange: Set initial accumulated answer
+        pipeline._task_state.answer = "existing answer"
+
+        # Test with LLM node
+        llm_event = QueueNodeSucceededEvent(
+            node_execution_id="test-llm-execution-id",
+            node_id="test-llm-node",
+            node_type=NodeType.LLM,
+            start_at=datetime.now(),
+            outputs={"answer": "different answer"},
+        )
+
+        # Mock the workflow response converter
+        pipeline._workflow_response_converter.workflow_node_finish_to_stream_response = Mock(return_value=None)
+        pipeline._save_output_for_event = Mock()
+
+        # Act
+        list(pipeline._handle_node_succeeded_event(llm_event))
+
+        # Assert: answer should remain unchanged
+        assert pipeline._task_state.answer == "existing answer"
+        # Verify message_replace was NOT called
+        pipeline._message_cycle_manager.message_replace_to_stream_response.assert_not_called()
+
+    def test_end_node_does_not_send_message_replace(self, pipeline):
+        """
+        Test that END nodes don't trigger message_replace events even with 'answer' output.
+        """
+        # Arrange: Set initial accumulated answer
+        pipeline._task_state.answer = "existing answer"
+
+        # Create END node succeeded event with answer output
+        event = QueueNodeSucceededEvent(
+            node_execution_id="test-end-execution-id",
+            node_id="test-end-node",
+            node_type=NodeType.END,
+            start_at=datetime.now(),
+            outputs={"answer": "different answer"},
+        )
+
+        # Mock the workflow response converter
+        pipeline._workflow_response_converter.workflow_node_finish_to_stream_response = Mock(return_value=None)
+        pipeline._save_output_for_event = Mock()
+
+        # Act
+        list(pipeline._handle_node_succeeded_event(event))
+
+        # Assert: answer should remain unchanged
+        assert pipeline._task_state.answer == "existing answer"
+        # Verify message_replace was NOT called
+        pipeline._message_cycle_manager.message_replace_to_stream_response.assert_not_called()
+
+    def test_answer_node_with_numeric_output_converts_to_string(self, pipeline):
+        """
+        Test that when an ANSWER node's final output is numeric,
+        it gets converted to string properly.
+        """
+        # Arrange: Set initial accumulated answer
+        pipeline._task_state.answer = "text answer"
+
+        # Create ANSWER node succeeded event with numeric output
+        event = QueueNodeSucceededEvent(
+            node_execution_id="test-node-execution-id",
+            node_id="test-answer-node",
+            node_type=NodeType.ANSWER,
+            start_at=datetime.now(),
+            outputs={"answer": 12345},
+        )
+
+        # Mock the workflow response converter
+        pipeline._workflow_response_converter.workflow_node_finish_to_stream_response = Mock(return_value=None)
+        pipeline._save_output_for_event = Mock()
+
+        # Act
+        list(pipeline._handle_node_succeeded_event(event))
+
+        # Assert: answer should be converted to string
+        assert pipeline._task_state.answer == "12345"
+        # Verify message_replace was called with string
+        pipeline._message_cycle_manager.message_replace_to_stream_response.assert_called_once_with(
+            answer="12345", reason="variable_update"
+        )
+
+    def test_answer_node_files_are_recorded(self, pipeline):
+        """
+        Test that ANSWER nodes properly record files from outputs.
+        """
+        # Arrange
+        pipeline._task_state.answer = "existing answer"
+
+        # Create ANSWER node succeeded event with files
+        event = QueueNodeSucceededEvent(
+            node_execution_id="test-node-execution-id",
+            node_id="test-answer-node",
+            node_type=NodeType.ANSWER,
+            start_at=datetime.now(),
+            outputs={
+                "answer": "same answer",
+                "files": [
+                    {"type": "image", "transfer_method": "remote_url", "remote_url": "http://example.com/img.png"}
+                ],
+            },
+        )
+
+        # Mock the workflow response converter
+        pipeline._workflow_response_converter.fetch_files_from_node_outputs = Mock(return_value=event.outputs["files"])
+        pipeline._workflow_response_converter.workflow_node_finish_to_stream_response = Mock(return_value=None)
+        pipeline._save_output_for_event = Mock()
+
+        # Act
+        list(pipeline._handle_node_succeeded_event(event))
+
+        # Assert: files should be recorded
+        assert len(pipeline._recorded_files) == 1
+        assert pipeline._recorded_files[0] == event.outputs["files"][0]

api/tests/unit_tests/core/workflow/nodes/test_start_node_json_object.py

@@ -58,8 +58,6 @@ def test_json_object_valid_schema():
         }
     )
 
-    schema = json.loads(schema)
-
     variables = [
         VariableEntity(
             variable="profile",
@@ -70,7 +68,7 @@ def test_json_object_valid_schema():
         )
     ]
 
-    user_inputs = {"profile": {"age": 20, "name": "Tom"}}
+    user_inputs = {"profile": json.dumps({"age": 20, "name": "Tom"})}
 
     node = make_start_node(user_inputs, variables)
     result = node._run()
@@ -89,8 +87,6 @@ def test_json_object_invalid_json_string():
             "required": ["age", "name"],
         }
     )
-
-    schema = json.loads(schema)
     variables = [
         VariableEntity(
             variable="profile",
@@ -101,12 +97,12 @@ def test_json_object_invalid_json_string():
         )
     ]
 
-    # Providing a string instead of an object should raise a type error
+    # Missing closing brace makes this invalid JSON
     user_inputs = {"profile": '{"age": 20, "name": "Tom"'}
 
     node = make_start_node(user_inputs, variables)
 
-    with pytest.raises(ValueError, match="JSON object for 'profile' must be an object"):
+    with pytest.raises(ValueError, match='{"age": 20, "name": "Tom" must be a valid JSON object'):
         node._run()
 
 
@@ -122,8 +118,6 @@ def test_json_object_does_not_match_schema():
         }
     )
 
-    schema = json.loads(schema)
-
     variables = [
         VariableEntity(
             variable="profile",
@@ -135,7 +129,7 @@ def test_json_object_does_not_match_schema():
     ]
 
     # age is a string, which violates the schema (expects number)
-    user_inputs = {"profile": {"age": "twenty", "name": "Tom"}}
+    user_inputs = {"profile": json.dumps({"age": "twenty", "name": "Tom"})}
 
     node = make_start_node(user_inputs, variables)
 
@@ -155,8 +149,6 @@ def test_json_object_missing_required_schema_field():
         }
     )
 
-    schema = json.loads(schema)
-
     variables = [
         VariableEntity(
             variable="profile",
@@ -168,7 +160,7 @@ def test_json_object_missing_required_schema_field():
     ]
 
     # Missing required field "name"
-    user_inputs = {"profile": {"age": 20}}
+    user_inputs = {"profile": json.dumps({"age": 20})}
 
     node = make_start_node(user_inputs, variables)
 

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) => {

web/app/(commonLayout)/plugins/page.tsx

@@ -2,11 +2,11 @@ import Marketplace from '@/app/components/plugins/marketplace'
 import PluginPage from '@/app/components/plugins/plugin-page'
 import PluginsPanel from '@/app/components/plugins/plugin-page/plugins-panel'
 
-const PluginList = () => {
+const PluginList = async () => {
   return (
     <PluginPage
       plugins={<PluginsPanel />}
-      marketplace={<Marketplace pluginTypeSwitchClassName="top-[60px]" />}
+      marketplace={<Marketplace pluginTypeSwitchClassName="top-[60px]" showSearchParams={false} />}
     />
   )
 }

web/app/(humanInputLayout)/form/[token]/form.tsx

@@ -0,0 +1,268 @@
+'use client'
+import type { FormInputItem, UserAction } from '@/app/components/workflow/nodes/human-input/types'
+import {
+  RiCheckboxCircleFill,
+  RiInformation2Fill,
+} from '@remixicon/react'
+import { useParams } from 'next/navigation'
+import * as React from 'react'
+import { useEffect, 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 Loading from '@/app/components/base/loading'
+import DifyLogo from '@/app/components/base/logo/dify-logo'
+import { UserActionButtonType } from '@/app/components/workflow/nodes/human-input/types'
+import useDocumentTitle from '@/hooks/use-document-title'
+import { getHumanInputForm, submitHumanInputForm } from '@/service/share'
+import { asyncRunSafe } from '@/utils'
+import { cn } from '@/utils/classnames'
+
+export type FormData = {
+  site: any
+  form_content: string
+  inputs: FormInputItem[]
+  user_actions: UserAction[]
+  expiration_time: number
+}
+
+const FormContent = () => {
+  const { t } = useTranslation()
+
+  const { token } = useParams<{ token: string }>()
+  useDocumentTitle('')
+
+  const [isLoading, setIsLoading] = useState(false)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [formData, setFormData] = useState<FormData>()
+  const [contentList, setContentList] = useState<string[]>([])
+  const [inputs, setInputs] = useState({})
+  const [success, setSuccess] = useState(false)
+  const [expired, setExpired] = useState(false)
+  const [submitted, setSubmitted] = useState(false)
+
+  const site = formData?.site.site
+
+  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'
+  }
+
+  const splitByOutputVar = (content: string): string[] => {
+    const outputVarRegex = /(\{\{#\$output\.[^#]+#\}\})/g
+    const parts = content.split(outputVarRegex)
+    return parts.filter(part => part.length > 0)
+  }
+
+  const initializeInputs = (formInputs: FormInputItem[]) => {
+    const initialInputs: Record<string, any> = {}
+    formInputs.forEach((item) => {
+      if (item.type === 'text-input' || item.type === 'paragraph')
+        initialInputs[item.output_variable_name] = ''
+      else
+        initialInputs[item.output_variable_name] = undefined
+    })
+    setInputs(initialInputs)
+  }
+
+  const initializeContentList = (formContent: string) => {
+    const parts = splitByOutputVar(formContent)
+    setContentList(parts)
+  }
+
+  // use immer
+  const handleInputsChange = (name: string, value: any) => {
+    setInputs(prev => ({
+      ...prev,
+      [name]: value,
+    }))
+  }
+
+  const getForm = async (token: string) => {
+    try {
+      const data = await getHumanInputForm(token)
+      setFormData(data)
+      initializeInputs(data.inputs)
+      initializeContentList(data.form_content)
+      setIsLoading(false)
+    }
+    catch (error) {
+      console.error(error)
+    }
+  }
+
+  const submit = async (actionID: string) => {
+    setIsSubmitting(true)
+    try {
+      await submitHumanInputForm(token, { inputs, action: actionID })
+      setSuccess(true)
+    }
+    catch (e: any) {
+      if (e.status === 400) {
+        const [, errRespData] = await asyncRunSafe<{ error_code: string }>(e.json())
+        const { error_code } = errRespData || {}
+        if (error_code === 'human_input_form_expired')
+          setExpired(true)
+        if (error_code === 'human_input_form_submitted')
+          setSubmitted(true)
+      }
+    }
+    finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  useEffect(() => {
+    getForm(token)
+  }, [token])
+
+  if (isLoading || !formData) {
+    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="h-[56px] w-[56px] shrink-0 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="h-[56px] w-[56px] shrink-0 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>
+    )
+  }
+
+  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 as any}
+          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: any) => (
+              <Button
+                key={action.id}
+                disabled={isSubmitting}
+                variant={getButtonStyle(action.button_style) as any}
+                onClick={() => submit(action.id)}
+              >
+                {action.title}
+              </Button>
+            ))}
+          </div>
+          <ExpirationTime expirationTime={formData.expiration_time} />
+        </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)

web/app/(humanInputLayout)/form/[token]/mock.ts

@@ -0,0 +1,107 @@
+import { UserActionButtonType } from '@/app/components/workflow/nodes/human-input/types'
+import { InputVarType } from '@/app/components/workflow/types'
+
+export const MOCK_DATA = {
+  site: {
+    app_id: 'e9823576-d836-4f2b-b46f-bd4df1d82230',
+    end_user_id: 'b7aa295d-1560-4d87-a828-77b3f39b30d0',
+    enable_site: true,
+    site: {
+      title: 'wf',
+      chat_color_theme: null,
+      chat_color_theme_inverted: false,
+      icon_type: 'emoji',
+      icon: '\uD83E\uDD16',
+      icon_background: '#FFEAD5',
+      icon_url: null,
+      description: null,
+      copyright: null,
+      privacy_policy: null,
+      custom_disclaimer: '',
+      default_language: 'en-US',
+      prompt_public: false,
+      show_workflow_steps: true,
+      use_icon_as_answer_icon: false,
+    },
+    model_config: null,
+    plan: 'basic',
+    can_replace_logo: false,
+    custom_config: null,
+  },
+  // 采用与上方 form editor 相同的数据结构，唯一不同的就是
+  // 对于 Text 类型，其文本已完成了变量替换（即，所有使用
+  // {{#node_name.var_name#}} 格式引用其他变量的位置，都
+  // 被替换成了对应的变量的值）
+  //
+  // 参考 FormContent
+  form_content: `
+    # Experiencing the Four Seasons
+    ![Four seasons landscape]({{#nodename.image#}})
+
+    ## My Seasonal Guide
+    Name: {{#noddename.name#}}
+    Location: {{#nodename.location#}}
+    Favorite Season: {{#nodename.season#}}
+
+    The four seasons throughout the year:
+    - Spring: Cherry blossoms, returning birds
+    - Summer: Long sunny days, thunderstorms, beach adventures
+    - Autumn: Red and gold foliage, harvest festivals, apple picking
+    - Winter: Snowfall, frozen lakes, holiday celebrations
+    ## Notes
+
+    {{#$output.content#}}
+  `,
+  // 对每一个字段的描述，参考上方 FormInput 的定义。
+  inputs: [
+    {
+      output_variable_name: 'content',
+      type: InputVarType.paragraph,
+      label: 'Name',
+      options: [],
+      max_length: 4096,
+      placeholder: 'Enter your name',
+    },
+    {
+      output_variable_name: 'location',
+      type: InputVarType.textInput,
+      label: 'Location',
+      // placeholder: 'Enter your location',
+      options: [],
+      max_length: 4096,
+    },
+    {
+      output_variable_name: 'season',
+      type: InputVarType.textInput,
+      label: 'Favorite Season',
+      // placeholder: 'Enter your favorite season',
+      options: [],
+      max_length: 4096,
+    },
+  ],
+  // 用户对这个表单可采取的操作，参考上方 UserAction 的定义。
+  user_actions: [
+    {
+      id: 'approve-action',
+      title: 'Post to X',
+      button_style: UserActionButtonType.Primary,
+    },
+    {
+      id: 'regenerate-action',
+      title: 'regenerate',
+      button_style: UserActionButtonType.Default,
+    },
+    {
+      id: 'thinking-action',
+      title: 'thinking',
+      button_style: UserActionButtonType.Accent,
+    },
+    {
+      id: 'cancel-action',
+      title: 'cancel',
+      button_style: UserActionButtonType.Ghost,
+    },
+  ],
+  timeout: 3,
+  timeout_unit: 'day',
+}

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)

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 (

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(() => {

web/app/components/app-initializer.tsx

@@ -9,8 +9,8 @@ import {
   EDUCATION_VERIFY_URL_SEARCHPARAMS_ACTION,
   EDUCATION_VERIFYING_LOCALSTORAGE_ITEM,
 } from '@/app/education-apply/constants'
+import { fetchSetupStatus } from '@/service/common'
 import { sendGAEvent } from '@/utils/gtag'
-import { fetchSetupStatusWithCache } from '@/utils/setup-status'
 import { resolvePostLoginRedirect } from '../signin/utils/post-login-redirect'
 import { trackEvent } from './base/amplitude'
 
@@ -33,8 +33,15 @@ export const AppInitializer = ({
 
   const isSetupFinished = useCallback(async () => {
     try {
-      const setUpStatus = await fetchSetupStatusWithCache()
-      return setUpStatus.step === 'finished'
+      if (localStorage.getItem('setup_status') === 'finished')
+        return true
+      const setUpStatus = await fetchSetupStatus()
+      if (setUpStatus.step !== 'finished') {
+        localStorage.removeItem('setup_status')
+        return false
+      }
+      localStorage.setItem('setup_status', 'finished')
+      return true
     }
     catch (error) {
       console.error(error)

web/app/components/app-sidebar/app-info.tsx

@@ -26,7 +26,6 @@ import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
 import { copyApp, deleteApp, exportAppConfig, updateAppInfo } from '@/service/apps'
-import { useInvalidateAppList } from '@/service/use-apps'
 import { fetchWorkflowDraft } from '@/service/workflow'
 import { AppModeEnum } from '@/types/app'
 import { getRedirection } from '@/utils/app-redirection'
@@ -67,7 +66,6 @@ const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailEx
   const { onPlanInfoChanged } = useProviderContext()
   const appDetail = useAppStore(state => state.appDetail)
   const setAppDetail = useAppStore(state => state.setAppDetail)
-  const invalidateAppList = useInvalidateAppList()
   const [open, setOpen] = useState(openState)
   const [showEditModal, setShowEditModal] = useState(false)
   const [showDuplicateModal, setShowDuplicateModal] = useState(false)
@@ -193,7 +191,6 @@ const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailEx
     try {
       await deleteApp(appDetail.id)
       notify({ type: 'success', message: t('appDeleted', { ns: 'app' }) })
-      invalidateAppList()
       onPlanInfoChanged()
       setAppDetail()
       replace('/apps')
@@ -205,7 +202,7 @@ const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailEx
       })
     }
     setShowConfirmDelete(false)
-  }, [appDetail, invalidateAppList, notify, onPlanInfoChanged, replace, setAppDetail, t])
+  }, [appDetail, notify, onPlanInfoChanged, replace, setAppDetail, t])
 
   const { isCurrentWorkspaceEditor } = useAppContext()
 

web/app/components/app/configuration/config-var/config-modal/index.tsx

@@ -83,7 +83,7 @@ const ConfigModal: FC<IConfigModalProps> = ({
     if (!isJsonObject || !tempPayload.json_schema)
       return ''
     try {
-      return tempPayload.json_schema
+      return JSON.stringify(JSON.parse(tempPayload.json_schema), null, 2)
     }
     catch {
       return ''

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

@@ -88,7 +88,16 @@ const HandThumbIconWithCount: FC<{ count: number, iconType: 'up' | 'down' }> = (
   )
 }
 
-const statusTdRender = (statusCount: StatusCount) => {
+const statusTdRender = (status: 'normal' | 'finished' | 'paused', statusCount: StatusCount) => {
+  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 (!statusCount)
     return null
 
@@ -410,7 +419,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)
 
@@ -1029,7 +1038,7 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
                 <td className="p-3 pr-2">{renderTdValue(endUser || defaultValue, !endUser)}</td>
                 {isChatflow && (
                   <td className="w-[160px] p-3 pr-2" style={{ maxWidth: isChatMode ? 300 : 200 }}>
-                    {statusTdRender(log.status_count)}
+                    {statusTdRender(log.status, log.status_count)}
                   </td>
                 )}
                 <td className="p-3 pr-2" style={{ maxWidth: isChatMode ? 100 : 200 }}>

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 { fetchMoreLikeThis, updateFeedback } from '@/service/share'
+import { fetchMoreLikeThis, submitHumanInputForm, updateFeedback } from '@/service/share'
+import { submitHumanInputForm as submitHumanInputFormService } from '@/service/workflow'
 import { cn } from '@/utils/classnames'
 import ResultTab from './result-tab'
 
@@ -120,7 +123,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,
@@ -201,16 +204,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: any) => {
+    if (isInstalledApp)
+      await submitHumanInputFormService(formToken, formData)
+    else
+      await submitHumanInputForm(formToken, formData)
+  }, [isInstalledApp])
 
   return (
     <>
@@ -274,7 +283,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} />
+                    </>
                   )}
                 </>
               )}
@@ -347,7 +373,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 && (

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">

web/app/components/apps/list.spec.tsx

@@ -10,7 +10,6 @@ const mockReplace = vi.fn()
 const mockRouter = { replace: mockReplace }
 vi.mock('next/navigation', () => ({
   useRouter: () => mockRouter,
-  useSearchParams: () => new URLSearchParams(''),
 }))
 
 // Mock app context

web/app/components/apps/list.tsx

@@ -12,7 +12,6 @@ import { useDebounceFn } from 'ahooks'
 import dynamic from 'next/dynamic'
 import {
   useRouter,
-  useSearchParams,
 } from 'next/navigation'
 import { parseAsString, useQueryState } from 'nuqs'
 import { useCallback, useEffect, useRef, useState } from 'react'
@@ -37,16 +36,6 @@ import useAppsQueryState from './hooks/use-apps-query-state'
 import { useDSLDragDrop } from './hooks/use-dsl-drag-drop'
 import NewAppCard from './new-app-card'
 
-// Define valid tabs at module scope to avoid re-creation on each render and stale closures
-const validTabs = new Set<string | AppModeEnum>([
-  'all',
-  AppModeEnum.WORKFLOW,
-  AppModeEnum.ADVANCED_CHAT,
-  AppModeEnum.CHAT,
-  AppModeEnum.AGENT_CHAT,
-  AppModeEnum.COMPLETION,
-])
-
 const TagManagementModal = dynamic(() => import('@/app/components/base/tag-management'), {
   ssr: false,
 })
@@ -58,41 +47,12 @@ const List = () => {
   const { t } = useTranslation()
   const { systemFeatures } = useGlobalPublicStore()
   const router = useRouter()
-  const searchParams = useSearchParams()
   const { isCurrentWorkspaceEditor, isCurrentWorkspaceDatasetOperator, isLoadingCurrentWorkspace } = useAppContext()
   const showTagManagementModal = useTagStore(s => s.showTagManagementModal)
   const [activeTab, setActiveTab] = useQueryState(
     'category',
     parseAsString.withDefault('all').withOptions({ history: 'push' }),
   )
-
-  // valid tabs for apps list; anything else should fallback to 'all'
-
-  // 1) Normalize legacy/incorrect query params like ?mode=discover -> ?category=all
-  useEffect(() => {
-    // avoid running on server
-    if (typeof window === 'undefined')
-      return
-    const mode = searchParams.get('mode')
-    if (!mode)
-      return
-    const url = new URL(window.location.href)
-    url.searchParams.delete('mode')
-    if (validTabs.has(mode)) {
-      // migrate to category key
-      url.searchParams.set('category', mode)
-    }
-    else {
-      url.searchParams.set('category', 'all')
-    }
-    router.replace(url.pathname + url.search)
-  }, [router, searchParams])
-
-  // 2) If category has an invalid value (e.g., 'discover'), reset to 'all'
-  useEffect(() => {
-    if (!validTabs.has(activeTab))
-      setActiveTab('all')
-  }, [activeTab, setActiveTab])
   const { query: { tagIDs = [], keywords = '', isCreatedByMe: queryIsCreatedByMe = false }, setQuery } = useAppsQueryState()
   const [isCreatedByMe, setIsCreatedByMe] = useState(queryIsCreatedByMe)
   const [tagFilterValue, setTagFilterValue] = useState<string[]>(tagIDs)

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
     }

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',

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

@@ -2,9 +2,10 @@ import type { FileEntity } from '../../file-uploader/types'
 import type {
   ChatConfig,
   ChatItem,
+  ChatItemInTree,
   OnSend,
 } from '../types'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import AnswerIcon from '@/app/components/base/answer-icon'
 import AppIcon from '@/app/components/base/app-icon'
 import InputsForm from '@/app/components/base/chat/chat-with-history/inputs-form'
@@ -15,7 +16,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'
@@ -70,6 +73,7 @@ const ChatWrapper = () => {
     setTargetMessageId,
     handleSend,
     handleStop,
+    handleResume,
     isResponding: respondingState,
     suggestedQuestions,
   } = useChat(
@@ -116,8 +120,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)
@@ -128,6 +135,36 @@ const ChatWrapper = () => {
     setIsResponding(respondingState)
   }, [respondingState, setIsResponding])
 
+  // Resume paused workflows when chat history is loaded
+  const resumedWorkflowsRef = useRef<Set<string>>(new Set())
+  useEffect(() => {
+    if (!appPrevChatTree || appPrevChatTree.length === 0)
+      return
+
+    // Find all answer items with workflow_run_id that need resumption
+    const checkForPausedWorkflows = (nodes: ChatItemInTree[]) => {
+      nodes.forEach((node) => {
+        if (node.isAnswer && node.workflow_run_id && node.humanInputFormDataList && node.humanInputFormDataList.length > 0) {
+          // This is a paused workflow waiting for human input
+          const workflowKey = `${node.workflow_run_id}-${node.id}`
+          if (!resumedWorkflowsRef.current.has(workflowKey)) {
+            resumedWorkflowsRef.current.add(workflowKey)
+            // Re-subscribe to workflow events
+            handleResume(
+              node.id,
+              node.workflow_run_id,
+              !isInstalledApp,
+            )
+          }
+        }
+        if (node.children && node.children.length > 0)
+          checkForPausedWorkflows(node.children)
+      })
+    }
+
+    checkForPausedWorkflows(appPrevChatTree)
+  }, [])
+
   const doSend: OnSend = useCallback((message, files, isRegenerate = false, parentAnswer: ChatItem | null = null) => {
     const data: any = {
       query: message,
@@ -146,7 +183,7 @@ const ChatWrapper = () => {
         isPublicAPI: !isInstalledApp,
       },
     )
-  }, [chatList, handleNewConversationCompleted, handleSend, currentConversationId, currentConversationInputs, newConversationInputs, isInstalledApp, appId])
+  }, [inputsForms, currentConversationId, currentConversationInputs, newConversationInputs, chatList, handleSend, isInstalledApp, appId, handleNewConversationCompleted])
 
   const doRegenerate = useCallback((chatItem: ChatItem, editedQuestion?: { message: string, files?: FileEntity[] }) => {
     const question = editedQuestion ? chatItem : chatList.find(item => item.id === chatItem.parentMessageId)!
@@ -159,7 +196,14 @@ const ChatWrapper = () => {
       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)
 
@@ -268,6 +312,7 @@ const ChatWrapper = () => {
         inputsForm={inputsForms}
         onRegenerate={doRegenerate}
         onStopResponding={handleStop}
+        onHumanInputFormSubmit={handleSubmitHumanInputForm}
         chatNode={(
           <>
             {chatNode}

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'
@@ -56,6 +58,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: item.answer,
@@ -65,6 +85,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

web/app/components/base/chat/chat/answer/human-input-content/content-item.tsx

@@ -0,0 +1,64 @@
+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,
+  resolvedPlaceholderValues,
+  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])
+
+  const placeholder = useMemo(() => {
+    if (!formInputField)
+      return ''
+    return formInputField.placeholder.type === 'variable'
+      ? resolvedPlaceholderValues?.[fieldName] || ''
+      : formInputField.placeholder.value
+  }, [formInputField, resolvedPlaceholderValues, 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"
+          placeholder={placeholder}
+          value={inputs[fieldName]}
+          onChange={(e) => { onInputChange(fieldName, e.target.value) }}
+        />
+      )}
+    </div>
+  )
+}
+
+export default React.memo(ContentItem)

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

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.title }}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default memo(ExecutedAction)

web/app/components/base/chat/chat/answer/human-input-content/expiration-time.tsx

@@ -0,0 +1,24 @@
+'use client'
+import { useTranslation } from 'react-i18next'
+import { useLocale } from '@/context/i18n'
+import { formatRelativeTimeInZone } from './utils'
+
+type ExpirationTimeProps = {
+  expirationTime: number
+}
+
+const ExpirationTime = ({
+  expirationTime,
+}: ExpirationTimeProps) => {
+  const { t } = useTranslation()
+  const locale = useLocale()
+  const relativeTime = formatRelativeTimeInZone(expirationTime, locale)
+
+  return (
+    <div className="system-xs-regular mt-1 text-text-tertiary">
+      {t('humanInput.expirationTime', { relativeTime, ns: 'share' })}
+    </div>
+  )
+}
+
+export default ExpirationTime

web/app/components/base/chat/chat/answer/human-input-content/human-input-form.tsx

@@ -0,0 +1,60 @@
+'use client'
+import type { HumanInputFormProps } from './type'
+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)
+  const contentList = splitByOutputVar(formData.form_content)
+  const [inputs, setInputs] = useState(defaultInputs)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const handleInputsChange = useCallback((name: string, value: any) => {
+    setInputs(prev => ({
+      ...prev,
+      [name]: value,
+    }))
+  }, [])
+
+  const submit = async (formToken: string, actionID: string, inputs: Record<string, any>) => {
+    setIsSubmitting(true)
+    await onSubmit?.(formToken, { inputs, action: actionID })
+    setIsSubmitting(false)
+  }
+
+  return (
+    <>
+      {contentList.map((content, index) => (
+        <ContentItem
+          key={index}
+          content={content}
+          formInputFields={formData.inputs}
+          resolvedPlaceholderValues={formData.resolved_placeholder_values || {}}
+          inputs={inputs}
+          onInputChange={handleInputsChange}
+        />
+      ))}
+      <div className="flex flex-wrap gap-1 py-1">
+        {formData.actions.map((action: any) => (
+          <Button
+            key={action.id}
+            disabled={isSubmitting}
+            variant={getButtonStyle(action.button_style) as any}
+            onClick={() => submit(formToken, action.id, inputs)}
+          >
+            {action.title}
+          </Button>
+        ))}
+      </div>
+    </>
+  )
+}
+
+export default React.memo(HumanInputForm)

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)

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} />
+    </>
+  )
+}

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)

web/app/components/base/chat/chat/answer/human-input-content/type.ts

@@ -0,0 +1,34 @@
+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
+  showTimeout?: boolean
+  expirationTime?: number
+  onSubmit?: (formToken: string, data: any) => Promise<void>
+}
+
+export type SubmittedHumanInputContentProps = {
+  formData: HumanInputFilledFormData
+}
+
+export type HumanInputFormProps = {
+  formData: HumanInputFormData
+  onSubmit?: (formToken: string, data: any) => Promise<void>
+}
+
+export type ContentItemProps = {
+  content: string
+  formInputFields: FormInputItem[]
+  inputs: Record<string, string>
+  resolvedPlaceholderValues?: Record<string, string>
+  onInputChange: (name: string, value: any) => void
+}

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,
+  showTimeout = false,
+  expirationTime,
+  onSubmit,
+}: UnsubmittedHumanInputContentProps) => {
+  return (
+    <>
+      {/* Form */}
+      <HumanInputForm
+        formData={formData}
+        onSubmit={onSubmit}
+      />
+      {/* Tips */}
+      {(showEmailTip || showDebugModeTip) && (
+        <Tips
+          showEmailTip={showEmailTip}
+          isEmailDebugMode={isEmailDebugMode}
+          showDebugModeTip={showDebugModeTip}
+        />
+      )}
+      {/* Timeout */}
+      {showTimeout && typeof expirationTime === 'number' && (
+        <ExpirationTime expirationTime={expirationTime} />
+      )}
+    </>
+  )
+}

web/app/components/base/chat/chat/answer/human-input-content/utils.ts

@@ -0,0 +1,58 @@
+import type { FormInputItem } from '@/app/components/workflow/nodes/human-input/types'
+import type { Locale } from '@/i18n-config'
+import dayjs from 'dayjs'
+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)
+
+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[]) => {
+  const initialInputs: Record<string, any> = {}
+  formInputs.forEach((item) => {
+    if (item.type === 'text-input' || item.type === 'paragraph')
+      initialInputs[item.output_variable_name] = ''
+    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 formatRelativeTimeInZone = (
+  utcTimestamp: string | number,
+  locale: Locale = 'en-US',
+) => {
+  const dayjsLocale = localeMap[locale] ?? 'en'
+
+  return dayjs
+    .utc(utcTimestamp)
+    .locale(dayjsLocale)
+    .fromNow()
+}

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

web/app/components/base/chat/chat/answer/human-input-form-list.tsx

@@ -0,0 +1,71 @@
+import type { DeliveryMethod } from '@/app/components/workflow/nodes/human-input/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: any) => Promise<void>
+  getHumanInputNodeData?: (nodeID: string) => any
+}
+
+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 = useMemo(() => {
+    return humanInputFormDataList.filter(formData => formData.display_in_ui)
+  }, [humanInputFormDataList])
+
+  return (
+    <div className="mt-2 flex flex-col gap-y-2">
+      {
+        filteredHumanInputFormDataList.map(formData => (
+          <ContentWrapper
+            key={formData.node_id}
+            nodeTitle={formData.node_title}
+          >
+            <UnsubmittedHumanInputContent
+              key={formData.node_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

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

@@ -16,8 +16,11 @@ 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 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'
@@ -36,6 +39,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,
@@ -50,6 +55,8 @@ const Answer: FC<AnswerProps> = ({
   appData,
   noChatInput,
   switchSibling,
+  hideAvatar,
+  onHumanInputFormSubmit,
 }) => {
   const { t } = useTranslation()
   const {
@@ -61,14 +68,21 @@ const Answer: FC<AnswerProps> = ({
     workflowProcess,
     allFiles,
     message_files,
+    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 containerRef = useRef<HTMLDivElement>(null)
   const contentRef = useRef<HTMLDivElement>(null)
 
+  const {
+    getHumanInputNodeData,
+  } = useChatContext()
+
   const getContainerWidth = () => {
     if (containerRef.current)
       setContainerWidth(containerRef.current?.clientWidth + 16)
@@ -115,115 +129,251 @@ 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
+              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 || hasHumanInputs) && 'w-full')}
+            >
+              {/** 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}
+                  />
+                )
+              }
+            </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}
-                />
-              )
-            }
-            {
-              responding && contentIsEmpty && !hasAgentThoughts && (
-                <div className="flex h-5 w-6 items-center justify-center">
-                  <LoadingAnim type="text" />
-                </div>
-              )
-            }
-            {
-              !contentIsEmpty && !hasAgentThoughts && (
-                <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) && (
+          <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 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}
+                  />
+                )
+              }
+              {
+                responding && contentIsEmpty && !hasAgentThoughts && (
+                  <div className="flex h-5 w-6 items-center justify-center">
+                    <LoadingAnim type="text" />
+                  </div>
+                )
+              }
+              {
+                !contentIsEmpty && !hasAgentThoughts && (
+                  <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}
+                  />
+                )
+              }
+            </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}
+                  />
+                )
+              }
+              {
+                responding && contentIsEmpty && !hasAgentThoughts && (
+                  <div className="flex h-5 w-6 items-center justify-center">
+                    <LoadingAnim type="text" />
+                  </div>
+                )
+              }
+              {
+                !contentIsEmpty && !hasAgentThoughts && (
+                  <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}
+                  />
+                )
+              }
+            </div>
+          </div>
+        )}
         <More more={more} />
       </div>
     </div>

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)
@@ -303,7 +304,7 @@ const Operation: FC<OperationProps> = ({
             <Log logItem={item} />
           </div>
         )}
-        {!isOpeningStatement && (
+        {!isOpeningStatement && !humanInputFormDataList?.length && (
           <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) && (
               <NewAudioButton

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>

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

@@ -15,7 +15,8 @@ export type ChatContextValue = Pick<ChatProps, 'config'
   | 'onAnnotationEdited'
   | 'onAnnotationAdded'
   | 'onAnnotationRemoved'
-  | 'onFeedback'>
+  | 'onFeedback'
+  | 'getHumanInputNodeData'>
 
 const ChatContext = createContext<ChatContextValue>({
   chatList: [],
@@ -39,6 +40,7 @@ export const ChatContextProvider = ({
   onAnnotationAdded,
   onAnnotationRemoved,
   onFeedback,
+  getHumanInputNodeData,
 }: ChatContextProviderProps) => {
   return (
     <ChatContext.Provider value={{
@@ -54,6 +56,7 @@ export const ChatContextProvider = ({
       onAnnotationAdded,
       onAnnotationRemoved,
       onFeedback,
+      getHumanInputNodeData,
     }}
     >
       {children}

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

@@ -72,6 +72,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> = ({
@@ -110,6 +113,9 @@ const Chat: FC<ChatProps> = ({
   noSpacing,
   inputDisabled,
   sidebarCollapseState,
+  hideAvatar,
+  onHumanInputFormSubmit,
+  getHumanInputNodeData,
 }) => {
   const { t } = useTranslation()
   const { currentLogItem, setCurrentLogItem, showPromptLogModal, setShowPromptLogModal, showAgentLogModal, setShowAgentLogModal } = useAppStore(useShallow(state => ({
@@ -257,6 +263,7 @@ const Chat: FC<ChatProps> = ({
       onAnnotationEdited={onAnnotationEdited}
       onAnnotationRemoved={onAnnotationRemoved}
       onFeedback={onFeedback}
+      getHumanInputNodeData={getHumanInputNodeData}
     >
       <div className="relative h-full">
         <div
@@ -287,6 +294,8 @@ const Chat: FC<ChatProps> = ({
                       hideProcessDetail={hideProcessDetail}
                       noChatInput={noChatInput}
                       switchSibling={switchSibling}
+                      hideAvatar={hideAvatar}
+                      onHumanInputFormSubmit={onHumanInputFormSubmit}
                     />
                   )
                 }
@@ -298,6 +307,7 @@ const Chat: FC<ChatProps> = ({
                     theme={themeBuilder?.theme}
                     enableEdit={config?.questionEditEnable}
                     switchSibling={switchSibling}
+                    hideAvatar={hideAvatar}
                   />
                 )
               })

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>
   )
 }

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

@@ -2,7 +2,11 @@ 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 } from '@/types/workflow'
+import type {
+  FileResponse,
+  HumanInputFilledFormData,
+  HumanInputFormData,
+} from '@/types/workflow'
 
 export type MessageMore = {
   time: string
@@ -64,6 +68,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
@@ -104,6 +121,10 @@ export type IChatItem = {
   siblingIndex?: number
   prevSibling?: string
   nextSibling?: string
+  // for human input
+  humanInputFormDataList?: HumanInputFormData[]
+  humanInputFilledFormDataList?: HumanInputFilledFormData[]
+  extra_contents?: ExtraContent[]
 }
 
 export type Metadata = {

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

@@ -37,7 +37,7 @@ export const getProcessedInputs = (inputs: Record<string, any>, inputsForm: Inpu
       return
     }
 
-    if (inputValue == null)
+    if (!inputValue)
       return
 
     if (item.type === InputVarType.singleFile) {
@@ -52,20 +52,6 @@ export const getProcessedInputs = (inputs: Record<string, any>, inputsForm: Inpu
       else
         processedInputs[item.variable] = getProcessedFiles(inputValue)
     }
-    else if (item.type === InputVarType.jsonObject) {
-      // Prefer sending an object if the user entered valid JSON; otherwise keep the raw string.
-      try {
-        const v = typeof inputValue === 'string' ? JSON.parse(inputValue) : inputValue
-        if (v && typeof v === 'object' && !Array.isArray(v))
-          processedInputs[item.variable] = v
-        else
-          processedInputs[item.variable] = inputValue
-      }
-      catch {
-        // keep original string; backend will parse/validate
-        processedInputs[item.variable] = inputValue
-      }
-    }
   })
 
   return processedInputs

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

@@ -16,7 +16,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'
@@ -174,6 +176,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)
@@ -217,7 +226,7 @@ const ChatWrapper = () => {
         </div>
       </div>
     )
-  }, [appData?.site.icon, appData?.site.icon_background, appData?.site.icon_type, appData?.site.icon_url, chatList, collapsed, currentConversationId, inputsForms.length, respondingState, allInputsHidden])
+  }, [chatList, respondingState, currentConversationId, collapsed, inputsForms.length, allInputsHidden, isMobile, appData?.site.icon_type, appData?.site.icon, appData?.site.icon_background, appData?.site.icon_url])
 
   const answerIcon = isDify()
     ? <LogoAvatar className="relative shrink-0" />
@@ -246,6 +255,7 @@ const ChatWrapper = () => {
       inputsForm={inputsForms}
       onRegenerate={doRegenerate}
       onStopResponding={handleStop}
+      onHumanInputFormSubmit={handleSubmitHumanInputForm}
       chatNode={(
         <>
           {chatNode}

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 & {

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>

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>

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>

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"
+}

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

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"
+}

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

web/app/components/base/icons/src/public/other/index.ts

@@ -2,3 +2,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'

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"
+}

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

web/app/components/base/icons/src/vender/workflow/index.ts

@@ -10,6 +10,7 @@ export { default as DocsExtractor } from './DocsExtractor'
 export { default as End } from './End'
 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'

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>
   )
 }

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 || [])]}

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]

web/app/components/base/prompt-editor/index.tsx

@@ -2,16 +2,20 @@
 
 import type {
   EditorState,
+  LexicalCommand,
 } from 'lexical'
 import type { FC } from 'react'
+import type { Hotkey } from './plugins/shortcuts-popup-plugin'
 import type {
   ContextBlockType,
   CurrentBlockType,
   ErrorMessageBlockType,
   ExternalToolBlockType,
   HistoryBlockType,
+  HITLInputBlockType,
   LastRunBlockType,
   QueryBlockType,
+  RequestURLBlockType,
   VariableBlockType,
   WorkflowVariableBlockType,
 } from './types'
@@ -27,7 +31,7 @@ import {
   TextNode,
 } from 'lexical'
 import * as React from 'react'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { cn } from '@/utils/classnames'
 import {
@@ -46,17 +50,23 @@ import {
   CurrentBlockReplacementBlock,
 } from './plugins/current-block'
 import { CustomTextNode } from './plugins/custom-text/node'
+import DraggableBlockPlugin from './plugins/draggable-plugin'
 import {
   ErrorMessageBlock,
   ErrorMessageBlockNode,
   ErrorMessageBlockReplacementBlock,
 } from './plugins/error-message-block'
-
 import {
   HistoryBlock,
   HistoryBlockNode,
   HistoryBlockReplacementBlock,
 } from './plugins/history-block'
+
+import {
+  HITLInputBlock,
+  HITLInputBlockReplacementBlock,
+  HITLInputNode,
+} from './plugins/hitl-input-block'
 import {
   LastRunBlock,
   LastRunBlockNode,
@@ -70,6 +80,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'
@@ -96,14 +112,17 @@ export type PromptEditorProps = {
   onFocus?: () => void
   contextBlock?: ContextBlockType
   queryBlock?: QueryBlockType
+  requestURLBlock?: RequestURLBlockType
   historyBlock?: HistoryBlockType
   variableBlock?: VariableBlockType
   externalToolBlock?: ExternalToolBlockType
   workflowVariableBlock?: WorkflowVariableBlockType
+  hitlInputBlock?: HITLInputBlockType
   currentBlock?: CurrentBlockType
   errorMessageBlock?: ErrorMessageBlockType
   lastRunBlock?: LastRunBlockType
   isSupportFileVar?: boolean
+  shortcutPopups?: Array<{ hotkey: Hotkey, Popup: React.ComponentType<{ onClose: () => void, onInsert: (command: LexicalCommand<unknown>, params: any[]) => void }> }>
 }
 
 const PromptEditor: FC<PromptEditorProps> = ({
@@ -121,14 +140,17 @@ const PromptEditor: FC<PromptEditorProps> = ({
   onFocus,
   contextBlock,
   queryBlock,
+  requestURLBlock,
   historyBlock,
   variableBlock,
   externalToolBlock,
   workflowVariableBlock,
+  hitlInputBlock,
   currentBlock,
   errorMessageBlock,
   lastRunBlock,
   isSupportFileVar,
+  shortcutPopups = [],
 }) => {
   const { eventEmitter } = useEventEmitterContextContext()
   const initialConfig = {
@@ -143,8 +165,10 @@ const PromptEditor: FC<PromptEditorProps> = ({
       ContextBlockNode,
       HistoryBlockNode,
       QueryBlockNode,
+      RequestURLBlockNode,
       WorkflowVariableBlockNode,
       VariableValueBlockNode,
+      HITLInputNode,
       CurrentBlockNode,
       ErrorMessageBlockNode,
       LastRunBlockNode, // LastRunBlockNode is used for error message block replacement
@@ -176,9 +200,16 @@ const PromptEditor: FC<PromptEditorProps> = ({
     } as any)
   }, [eventEmitter, historyBlock?.history])
 
+  const [floatingAnchorElem, setFloatingAnchorElem] = useState(null)
+
+  const onRef = (_floatingAnchorElem: any) => {
+    if (_floatingAnchorElem !== null)
+      setFloatingAnchorElem(_floatingAnchorElem)
+  }
+
   return (
     <LexicalComposer initialConfig={{ ...initialConfig, editable }}>
-      <div className={cn('relative', wrapperClassName)}>
+      <div className={cn('relative', wrapperClassName)} ref={onRef}>
         <RichTextPlugin
           contentEditable={(
             <ContentEditable
@@ -199,11 +230,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}
@@ -217,6 +254,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
           contextBlock={contextBlock}
           historyBlock={historyBlock}
           queryBlock={queryBlock}
+          requestURLBlock={requestURLBlock}
           variableBlock={variableBlock}
           externalToolBlock={externalToolBlock}
           workflowVariableBlock={workflowVariableBlock}
@@ -265,6 +303,14 @@ const PromptEditor: FC<PromptEditorProps> = ({
             </>
           )
         }
+        {
+          hitlInputBlock?.show && (
+            <>
+              <HITLInputBlock {...hitlInputBlock} />
+              <HITLInputBlockReplacementBlock {...hitlInputBlock} />
+            </>
+          )
+        }
         {
           currentBlock?.show && (
             <>
@@ -273,6 +319,14 @@ const PromptEditor: FC<PromptEditorProps> = ({
             </>
           )
         }
+        {
+          requestURLBlock?.show && (
+            <>
+              <RequestURLBlock {...requestURLBlock} />
+              <RequestURLBlockReplacementBlock {...requestURLBlock} />
+            </>
+          )
+        }
         {
           errorMessageBlock?.show && (
             <>
@@ -298,6 +352,9 @@ const PromptEditor: FC<PromptEditorProps> = ({
         <OnBlurBlock onBlur={onBlur} onFocus={onFocus} />
         <UpdateBlock instanceId={instanceId} />
         <HistoryPlugin />
+        {floatingAnchorElem && (
+          <DraggableBlockPlugin anchorElem={floatingAnchorElem} />
+        )}
         {/* <TreeView /> */}
       </div>
     </LexicalComposer>

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'
@@ -36,6 +39,7 @@ export const usePromptOptions = (
   contextBlock?: ContextBlockType,
   queryBlock?: QueryBlockType,
   historyBlock?: HistoryBlockType,
+  requestURLBlock?: RequestURLBlockType,
 ) => {
   const { t } = useTranslation()
   const [editor] = useLexicalComposerContext()
@@ -91,6 +95,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({
@@ -272,12 +300,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)
 

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

@@ -8,6 +8,7 @@ import type {
   HistoryBlockType,
   LastRunBlockType,
   QueryBlockType,
+  RequestURLBlockType,
   VariableBlockType,
   WorkflowVariableBlockType,
 } from '../../types'
@@ -44,6 +45,7 @@ type ComponentPickerProps = {
   triggerString: string
   contextBlock?: ContextBlockType
   queryBlock?: QueryBlockType
+  requestURLBlock?: RequestURLBlockType
   historyBlock?: HistoryBlockType
   variableBlock?: VariableBlockType
   externalToolBlock?: ExternalToolBlockType
@@ -57,6 +59,7 @@ const ComponentPicker = ({
   triggerString,
   contextBlock,
   queryBlock,
+  requestURLBlock,
   historyBlock,
   variableBlock,
   externalToolBlock,
@@ -100,6 +103,7 @@ const ComponentPicker = ({
     variableBlock,
     externalToolBlock,
     workflowVariableBlock,
+    requestURLBlock,
     currentBlock,
     errorMessageBlock,
     lastRunBlock,

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-[24px] top-[16px] 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 left-0 right-[-40px] top-0 h-[2px] bg-text-accent-secondary"
+          >
+          </div>
+        </div>
+      )}
+      isOnMenu={isOnMenu}
+      onElementChanged={setDraggableElement}
+    />
+  )
+}

web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx

@@ -0,0 +1,162 @@
+'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
+}
+
+const HITLInputComponentUI: FC<HITLInputComponentUIProps> = ({
+  nodeId,
+  varName,
+  formInput = {
+    type: InputVarType.paragraph,
+    output_variable_name: varName,
+    placeholder: {
+      type: 'constant',
+      selector: [],
+      value: '',
+    },
+  },
+  onChange,
+  onRename,
+  onRemove,
+  workflowNodesMap = {},
+  getVarType,
+  environmentVariables,
+  conversationVariables,
+  ragVariables,
+}) => {
+  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)
+    }
+  }, [])
+
+  const removeBtnRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    const removeBtn = removeBtnRef.current
+    if (removeBtn)
+      removeBtn.addEventListener('click', () => onRemove(varName))
+
+    return () => {
+      if (removeBtn)
+        removeBtn.removeEventListener('click', () => onRemove(varName))
+    }
+  }, [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 isPlaceholderVariable = useMemo(() => {
+    return formInput.placeholder.type === 'variable'
+  }, [formInput.placeholder.type])
+
+  return (
+    <div
+      className="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 justify-between">
+        {/* Placeholder Info */}
+        {isPlaceholderVariable && (
+          <VariableBlock
+            variables={formInput.placeholder.selector}
+            workflowNodesMap={workflowNodesMap}
+            getVarType={getVarType}
+            environmentVariables={environmentVariables}
+            conversationVariables={conversationVariables}
+            ragVariables={ragVariables}
+          />
+        )}
+        {!isPlaceholderVariable && (
+          <div className="system-xs-medium text-text-quaternary">{formInput.placeholder.value}</div>
+        )}
+
+        {/* Actions */}
+        <div className="flex h-full items-center space-x-1 pr-[24px]">
+          <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)

web/app/components/base/prompt-editor/plugins/hitl-input-block/component.tsx

@@ -0,0 +1,83 @@
+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
+}
+
+const HITLInputComponent: FC<HITLInputComponentProps> = ({
+  nodeKey,
+  nodeId,
+  varName,
+  formInputs = [],
+  onChange,
+  onRename,
+  onRemove,
+  workflowNodesMap = {},
+  getVarType,
+  environmentVariables,
+  conversationVariables,
+  ragVariables,
+}) => {
+  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}
+      />
+    </div>
+  )
+}
+
+export default HITLInputComponent

web/app/components/base/prompt-editor/plugins/hitl-input-block/hitl-input-block-replacement-block.tsx

@@ -0,0 +1,87 @@
+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,
+}: 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,
+    ))
+  }, [nodeId, formInputs, onFormInputsChange, onFormInputItemRename, onFormInputItemRemove, workflowNodesMap, getVarType, environmentVariables, conversationVariables, ragVariables])
+
+  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)

web/app/components/base/prompt-editor/plugins/hitl-input-block/index.tsx

@@ -0,0 +1,98 @@
+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 {
+  $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,
+}: 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,
+          )
+
+          $insertNodes([currentHITLNode])
+
+          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'

web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx

@@ -0,0 +1,117 @@
+import type { FormInputItem, FormInputItemPlaceholder } from '@/app/components/workflow/nodes/human-input/types'
+import { produce } from 'immer'
+import * as React from 'react'
+import { useCallback, 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 PromptEditor from '@/app/components/base/prompt-editor'
+// import TagLabel from './tag-label'
+import Button from '../../../button'
+import PrePopulate from './pre-populate'
+
+const i18nPrefix = 'nodes.humanInput.insertInputField'
+
+type Props = {
+  nodeId: string
+  isEdit: boolean
+  payload?: FormInputItem
+  onChange: (newPayload: FormInputItem) => void
+  onCancel: () => void
+}
+const defaultPayload: FormInputItem = {
+  type: InputVarType.paragraph,
+  output_variable_name: '',
+  placeholder: { type: 'constant', selector: [], value: '' },
+}
+const InputField: React.FC<Props> = ({
+  nodeId,
+  isEdit,
+  payload,
+  onChange,
+  onCancel,
+}) => {
+  const { t } = useTranslation()
+  const [tempPayload, setTempPayload] = useState(payload || defaultPayload)
+  const handleSave = useCallback(() => {
+    onChange(tempPayload)
+  }, [tempPayload])
+  const placeholderConfig = tempPayload.placeholder
+  const handlePlaceholderChange = useCallback((key: keyof FormInputItemPlaceholder) => {
+    return (value: any) => {
+      const nextValue = produce(tempPayload, (draft) => {
+        if (!draft.placeholder)
+          draft.placeholder = { type: 'constant', selector: [], value: '' }
+        draft.placeholder[key] = value
+        if (key === 'selector')
+          draft.placeholder.type = 'variable'
+        else if (key === 'value')
+          draft.placeholder.type = 'constant'
+      })
+      setTempPayload(nextValue)
+    }
+  }, [tempPayload])
+  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
+        />
+      </div>
+      <div className="mt-4">
+        <div className="system-xs-medium mb-1.5 text-text-secondary">
+          {t(`${i18nPrefix}.prePopulateField`, { ns: 'workflow' })}
+        </div>
+        <PrePopulate
+          isVariable={placeholderConfig?.type === 'variable'}
+          onIsVariableChange={(isVariable) => {
+            handlePlaceholderChange('type')(isVariable ? 'variable' : 'constant')
+          }}
+          nodeId={nodeId}
+          valueSelector={placeholderConfig?.selector}
+          onValueSelectorChange={handlePlaceholderChange('selector')}
+          value={placeholderConfig?.value}
+          onValueChange={handlePlaceholderChange('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}
+              >
+                {t('operation.save', { ns: 'common' })}
+              </Button>
+            )
+          : (
+              <Button
+                className="flex"
+                variant="primary"
+                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

web/app/components/base/prompt-editor/plugins/hitl-input-block/node.tsx

@@ -0,0 +1,257 @@
+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[]
+}
+
+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[]
+
+  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 || []
+  }
+
+  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.__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[],
+    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
+  }
+
+  createDOM(): HTMLElement {
+    const div = document.createElement('div')
+    div.classList.add('flex', '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()}
+      />
+    )
+  }
+
+  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,
+    )
+
+    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(),
+    }
+  }
+
+  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[],
+): HITLInputNode {
+  return new HITLInputNode(
+    variableName,
+    nodeId,
+    formInputs,
+    onFormInputsChange,
+    onFormInputItemRename,
+    onFormInputItemRemove,
+    workflowNodesMap,
+    getVarType,
+    environmentVariables,
+    conversationVariables,
+    ragVariables,
+  )
+}
+
+export function $isHITLInputNode(
+  node: HITLInputNode | LexicalNode | null | undefined,
+): node is HITLInputNode {
+  return node instanceof HITLInputNode
+}

web/app/components/base/prompt-editor/plugins/hitl-input-block/pre-populate.tsx

@@ -0,0 +1,125 @@
+'use client'
+import type { FC } from 'react'
+import type { ValueSelector, Var } from '@/app/components/workflow/types'
+import * as React from 'react'
+import { useCallback, 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: any
+  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)
+  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)}
+      />
+      <TypeSwitch
+        className="absolute bottom-1 left-1.5"
+        isVariable={isVariable}
+        onIsVariableChange={handleTypeChange}
+      />
+    </div>
+  )
+}
+export default React.memo(PrePopulate)

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)

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)

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)

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

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'

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
+}

web/app/components/base/prompt-editor/plugins/request-url-block/request-url-block-replacement-block.tsx

@@ -0,0 +1,60 @@
+import type { RequestURLBlockType } from '../../types'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { mergeRegister } from '@lexical/utils'
+import { $applyNodeReplacement } from 'lexical'
+import {
+  memo,
+  useCallback,
+  useEffect,
+} from 'react'
+import { REQUEST_URL_PLACEHOLDER_TEXT } from '../../constants'
+import { decoratorTransform } from '../../utils'
+import { CustomTextNode } from '../custom-text/node'
+import {
+  $createRequestURLBlockNode,
+  RequestURLBlockNode,
+} from '../request-url-block/node'
+
+const REGEX = new RegExp(REQUEST_URL_PLACEHOLDER_TEXT)
+
+const RequestURLBlockReplacementBlock = ({
+  onInsert,
+}: RequestURLBlockType) => {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    if (!editor.hasNodes([RequestURLBlockNode]))
+      throw new Error('RequestURLBlockNodePlugin: RequestURLBlockNode not registered on editor')
+  }, [editor])
+
+  const createRequestURLBlockNode = useCallback((): RequestURLBlockNode => {
+    if (onInsert)
+      onInsert()
+    return $applyNodeReplacement($createRequestURLBlockNode())
+  }, [onInsert])
+
+  const getMatch = useCallback((text: string) => {
+    const matchArr = REGEX.exec(text)
+
+    if (matchArr === null)
+      return null
+
+    const startOffset = matchArr.index
+    const endOffset = startOffset + REQUEST_URL_PLACEHOLDER_TEXT.length
+    return {
+      end: endOffset,
+      start: startOffset,
+    }
+  }, [])
+
+  useEffect(() => {
+    REGEX.lastIndex = 0
+    return mergeRegister(
+      editor.registerNodeTransform(CustomTextNode, textNode => decoratorTransform(textNode, getMatch, createRequestURLBlockNode)),
+    )
+  }, [])
+
+  return null
+}
+
+export default memo(RequestURLBlockReplacementBlock)

web/app/components/base/prompt-editor/plugins/shortcuts-popup-plugin/index.spec.tsx

@@ -0,0 +1,108 @@
+import { LexicalComposer } from '@lexical/react/LexicalComposer'
+import { ContentEditable } from '@lexical/react/LexicalContentEditable'
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary'
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import * as React from 'react'
+import { useState } from 'react'
+import ShortcutsPopupPlugin, { SHORTCUTS_EMPTY_CONTENT } from './index'
+import '@testing-library/jest-dom'
+
+const CONTAINER_ID = 'host'
+const CONTENT_EDITABLE_ID = 'ce'
+
+const MinimalEditor: React.FC<{
+  withContainer?: boolean
+}> = ({ withContainer = true }) => {
+  const initialConfig = {
+    namespace: 'shortcuts-popup-plugin-test',
+    onError: (e: Error) => {
+      throw e
+    },
+  }
+  const [containerEl, setContainerEl] = useState<HTMLDivElement | null>(null)
+
+  return (
+    <LexicalComposer initialConfig={initialConfig}>
+      <div data-testid={CONTAINER_ID} className="relative" ref={withContainer ? setContainerEl : undefined}>
+        <RichTextPlugin
+          contentEditable={<ContentEditable data-testid={CONTENT_EDITABLE_ID} />}
+          placeholder={null}
+          ErrorBoundary={LexicalErrorBoundary}
+        />
+        <ShortcutsPopupPlugin
+          container={withContainer ? containerEl : undefined}
+        />
+      </div>
+    </LexicalComposer>
+  )
+}
+
+describe('ShortcutsPopupPlugin', () => {
+  it('opens on hotkey when editor is focused', async () => {
+    render(<MinimalEditor />)
+    const ce = screen.getByTestId(CONTENT_EDITABLE_ID)
+    ce.focus()
+
+    fireEvent.keyDown(document, { key: '/', ctrlKey: true }) // 模拟 Ctrl+/
+    expect(await screen.findByText(SHORTCUTS_EMPTY_CONTENT)).toBeInTheDocument()
+  })
+
+  it('does not open when editor is not focused', async () => {
+    render(<MinimalEditor />)
+    // 未聚焦
+    fireEvent.keyDown(document, { key: '/', ctrlKey: true })
+    await waitFor(() => {
+      expect(screen.queryByText(SHORTCUTS_EMPTY_CONTENT)).not.toBeInTheDocument()
+    })
+  })
+
+  it('closes on Escape', async () => {
+    render(<MinimalEditor />)
+    const ce = screen.getByTestId(CONTENT_EDITABLE_ID)
+    ce.focus()
+
+    fireEvent.keyDown(document, { key: '/', ctrlKey: true })
+    expect(await screen.findByText(SHORTCUTS_EMPTY_CONTENT)).toBeInTheDocument()
+
+    fireEvent.keyDown(document, { key: 'Escape' })
+    await waitFor(() => {
+      expect(screen.queryByText(SHORTCUTS_EMPTY_CONTENT)).not.toBeInTheDocument()
+    })
+  })
+
+  it('closes on click outside', async () => {
+    render(<MinimalEditor />)
+    const ce = screen.getByTestId(CONTENT_EDITABLE_ID)
+    ce.focus()
+
+    fireEvent.keyDown(document, { key: '/', ctrlKey: true })
+    expect(await screen.findByText(SHORTCUTS_EMPTY_CONTENT)).toBeInTheDocument()
+
+    fireEvent.mouseDown(ce)
+    await waitFor(() => {
+      expect(screen.queryByText(SHORTCUTS_EMPTY_CONTENT)).not.toBeInTheDocument()
+    })
+  })
+
+  it('portals into provided container when container is set', async () => {
+    render(<MinimalEditor withContainer />)
+    const ce = screen.getByTestId(CONTENT_EDITABLE_ID)
+    const host = screen.getByTestId(CONTAINER_ID)
+    ce.focus()
+
+    fireEvent.keyDown(document, { key: '/', ctrlKey: true })
+    const portalContent = await screen.findByText(SHORTCUTS_EMPTY_CONTENT)
+    expect(host).toContainElement(portalContent)
+  })
+
+  it('falls back to document.body when container is not provided', async () => {
+    render(<MinimalEditor withContainer={false} />)
+    const ce = screen.getByTestId(CONTENT_EDITABLE_ID)
+    ce.focus()
+
+    fireEvent.keyDown(document, { key: '/', ctrlKey: true })
+    const portalContent = await screen.findByText(SHORTCUTS_EMPTY_CONTENT)
+    expect(document.body).toContainElement(portalContent)
+  })
+})

web/app/components/base/prompt-editor/plugins/shortcuts-popup-plugin/index.tsx

@@ -0,0 +1,305 @@
+import type { LexicalCommand } from 'lexical'
+import {
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  size,
+  useFloating,
+} from '@floating-ui/react'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import {
+  $getSelection,
+  $isRangeSelection,
+} from 'lexical'
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { createPortal } from 'react-dom'
+import { cn } from '@/utils/classnames'
+
+export const SHORTCUTS_EMPTY_CONTENT = 'shortcuts_empty_content'
+
+// Hotkey can be:
+// - string: 'mod+/'
+// - string[]: ['mod', '/']
+// - string[][]: [['mod', '/'], ['mod', 'shift', '/']] (any combo matches)
+// - function: custom matcher
+export type Hotkey = string | string[] | string[][] | ((e: KeyboardEvent) => boolean)
+
+type ShortcutPopupPluginProps = {
+  hotkey?: Hotkey
+  children?: React.ReactNode | ((close: () => void, onInsert: (command: LexicalCommand<unknown>, params: any[]) => void) => React.ReactNode)
+  className?: string
+  container?: Element | null
+  onOpen?: () => void
+  onClose?: () => void
+}
+
+const META_ALIASES = new Set(['meta', 'cmd', 'command'])
+const CTRL_ALIASES = new Set(['ctrl'])
+const ALT_ALIASES = new Set(['alt', 'option'])
+const SHIFT_ALIASES = new Set(['shift'])
+
+function matchHotkey(event: KeyboardEvent, hotkey?: Hotkey) {
+  if (!hotkey)
+    return false
+
+  if (typeof hotkey === 'function')
+    return hotkey(event)
+
+  const matchCombo = (tokens: string[]) => {
+    const parts = tokens.map(t => t.toLowerCase().trim()).filter(Boolean)
+    let expectedKey: string | null = null
+
+    let needMod = false
+    let needCtrl = false
+    let needMeta = false
+    let needAlt = false
+    let needShift = false
+
+    for (const p of parts) {
+      if (p === 'mod') {
+        needMod = true
+        continue
+      }
+      if (CTRL_ALIASES.has(p)) {
+        needCtrl = true
+        continue
+      }
+      if (META_ALIASES.has(p)) {
+        needMeta = true
+        continue
+      }
+      if (ALT_ALIASES.has(p)) {
+        needAlt = true
+        continue
+      }
+      if (SHIFT_ALIASES.has(p)) {
+        needShift = true
+        continue
+      }
+      expectedKey = p
+    }
+
+    if (needMod && !(event.metaKey || event.ctrlKey))
+      return false
+    if (needCtrl && !event.ctrlKey)
+      return false
+    if (needMeta && !event.metaKey)
+      return false
+    if (needAlt && !event.altKey)
+      return false
+    if (needShift && !event.shiftKey)
+      return false
+
+    if (expectedKey) {
+      const k = event.key.toLowerCase()
+      const normalized = k === ' ' ? 'space' : k
+      if (normalized !== expectedKey)
+        return false
+    }
+
+    return true
+  }
+
+  if (Array.isArray(hotkey)) {
+    const isNested = hotkey.length > 0 && Array.isArray((hotkey as unknown[])[0])
+    if (isNested) {
+      const combos = hotkey as string[][]
+      return combos.some(tokens => matchCombo(tokens))
+    }
+    else {
+      const tokens = hotkey as string[]
+      return matchCombo(tokens)
+    }
+  }
+
+  const tokensFromString = hotkey
+    .toLowerCase()
+    .split('+')
+    .map(t => t.trim())
+    .filter(Boolean)
+  return matchCombo(tokensFromString)
+}
+
+export default function ShortcutsPopupPlugin({
+  hotkey = 'mod+/',
+  children,
+  className,
+  container,
+  onOpen,
+  onClose,
+}: ShortcutPopupPluginProps): React.ReactPortal | null {
+  const [editor] = useLexicalComposerContext()
+  const [open, setOpen] = useState(false)
+  const portalRef = useRef<HTMLDivElement | null>(null)
+  const lastSelectionRef = useRef<Range | null>(null)
+
+  const containerEl = useMemo(() => container ?? (typeof document !== 'undefined' ? document.body : null), [container])
+  const useContainer = !!containerEl && containerEl !== document.body
+
+  const { refs, floatingStyles, isPositioned } = useFloating({
+    placement: 'bottom-start',
+    middleware: [
+      offset(0), // fix hide cursor
+      shift({
+        padding: 8,
+        altBoundary: true,
+      }),
+      flip(),
+      size({
+        apply({ availableWidth, availableHeight, elements }) {
+          Object.assign(elements.floating.style, {
+            maxWidth: `${Math.min(400, availableWidth)}px`,
+            maxHeight: `${Math.min(300, availableHeight)}px`,
+            overflow: 'auto',
+          })
+        },
+        padding: 8,
+      }),
+    ],
+    whileElementsMounted: autoUpdate,
+  })
+
+  useEffect(() => {
+    return editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        const selection = $getSelection()
+        if ($isRangeSelection(selection)) {
+          const domSelection = window.getSelection()
+          if (domSelection && domSelection.rangeCount > 0)
+            lastSelectionRef.current = domSelection.getRangeAt(0).cloneRange()
+        }
+      })
+    })
+  }, [editor])
+
+  const isEditorFocused = useCallback(() => {
+    const root = editor.getRootElement()
+    if (!root)
+      return false
+    return root.contains(document.activeElement)
+  }, [editor])
+
+  const openPortal = useCallback(() => {
+    const domSelection = window.getSelection()
+    let range: Range | null = null
+    if (domSelection && domSelection.rangeCount > 0)
+      range = domSelection.getRangeAt(0).cloneRange()
+    else
+      range = lastSelectionRef.current
+
+    if (range) {
+      const rects = range.getClientRects()
+      let rect: DOMRect | null = null
+
+      if (rects && rects.length)
+        rect = rects[rects.length - 1]
+
+      else
+        rect = range.getBoundingClientRect()
+
+      if (rect.width === 0 && rect.height === 0) {
+        const root = editor.getRootElement()
+        if (root) {
+          const sc = range.startContainer
+          const node = sc.nodeType === Node.ELEMENT_NODE
+            ? sc as Element
+            : (sc.parentElement || root)
+
+          rect = node.getBoundingClientRect()
+
+          if (rect.width === 0 && rect.height === 0)
+            rect = root.getBoundingClientRect()
+        }
+      }
+
+      if (rect && !(rect.top === 0 && rect.left === 0 && rect.width === 0 && rect.height === 0)) {
+        const virtualEl = {
+          getBoundingClientRect() {
+            return rect!
+          },
+        }
+        refs.setReference(virtualEl as Element)
+      }
+    }
+
+    setOpen(true)
+    onOpen?.()
+  }, [onOpen])
+
+  const closePortal = useCallback(() => {
+    setOpen(false)
+    onClose?.()
+  }, [onClose])
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (open && event.key === 'Escape') {
+        event.stopPropagation()
+        event.preventDefault()
+        closePortal()
+        return
+      }
+
+      if (!isEditorFocused())
+        return
+
+      if (matchHotkey(event, hotkey)) {
+        event.preventDefault()
+        openPortal()
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown, true)
+    return () => document.removeEventListener('keydown', handleKeyDown, true)
+  }, [hotkey, open, isEditorFocused, openPortal, closePortal])
+
+  useEffect(() => {
+    if (!open)
+      return
+
+    const onMouseDown = (e: MouseEvent) => {
+      if (!portalRef.current)
+        return
+      if (!portalRef.current.contains(e.target as Node))
+        closePortal()
+    }
+    document.addEventListener('mousedown', onMouseDown, false)
+    return () => document.removeEventListener('mousedown', onMouseDown, false)
+  }, [open, closePortal])
+
+  const handleInsert = useCallback((command: LexicalCommand<unknown>, params: any) => {
+    editor.dispatchCommand(command, params)
+    closePortal()
+  }, [editor, closePortal])
+
+  if (!open || !containerEl)
+    return null
+
+  return createPortal(
+    <div
+      ref={(node) => {
+        portalRef.current = node
+        refs.setFloating(node)
+      }}
+      className={cn(
+        useContainer ? '' : 'z-[999999]',
+        'absolute rounded-md bg-slate-50 shadow-lg',
+        className,
+      )}
+      style={{
+        ...floatingStyles,
+        visibility: isPositioned ? 'visible' : 'hidden',
+      }}
+    >
+      {typeof children === 'function' ? children(closePortal, handleInsert) : (children ?? SHORTCUTS_EMPTY_CONTENT)}
+    </div>,
+    containerEl,
+  )
+}

web/app/components/base/prompt-editor/plugins/workflow-variable-block/workflow-variable-block-replacement-block.tsx

@@ -40,7 +40,7 @@ const WorkflowVariableBlockReplacementBlock = ({
 
     const nodePathString = textNode.getTextContent().slice(3, -3)
     return $applyNodeReplacement($createWorkflowVariableBlockNode(nodePathString.split('.'), workflowNodesMap, getVarType, variables?.find(o => o.nodeId === 'env')?.vars || [], variables?.find(o => o.nodeId === 'conversation')?.vars || [], ragVariables))
-  }, [onInsert, workflowNodesMap, getVarType, variables])
+  }, [onInsert, workflowNodesMap, getVarType, variables, ragVariables])
 
   const getMatch = useCallback((text: string) => {
     const matchArr = REGEX.exec(text)

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

@@ -1,4 +1,5 @@
 import type { GeneratorType } from '../../app/configuration/config/automatic/types'
+import type { FormInputItem } from '../../workflow/nodes/human-input/types'
 import type { Type } from '../../workflow/nodes/llm/types'
 import type { Dataset } from './plugins/context-block'
 import type { RoleName } from './plugins/history-block'
@@ -46,6 +47,13 @@ export type HistoryBlockType = {
   onEditRole?: () => void
 }
 
+export type RequestURLBlockType = {
+  show?: boolean
+  selectable?: boolean
+  onInsert?: () => void
+  onDelete?: () => void
+}
+
 export type VariableBlockType = {
   show?: boolean
   variables?: Option[]
@@ -73,6 +81,20 @@ export type WorkflowVariableBlockType = {
   onManageInputField?: () => void
 }
 
+export type HITLInputBlockType = {
+  show?: boolean
+  nodeId: string
+  formInputs?: FormInputItem[]
+  variables?: NodeOutPutVar[]
+  workflowNodesMap?: Record<string, Pick<Node['data'], 'title' | 'type' | 'height' | 'width' | 'position'>>
+  getVarType?: GetVarType
+  onFormInputsChange?: (inputs: FormInputItem[]) => void
+  onFormInputItemRemove: (varName: string) => void
+  onFormInputItemRename: (payload: FormInputItem, oldName: string) => void
+  onInsert?: () => void
+  onDelete?: () => void
+}
+
 export type MenuTextMatch = {
   leadOffset: number
   matchingString: string

web/app/components/plugins/marketplace/atoms.ts

@@ -1,81 +0,0 @@
-import type { ActivePluginType } from './constants'
-import type { PluginsSort, SearchParamsFromCollection } from './types'
-import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai'
-import { useQueryState } from 'nuqs'
-import { useCallback } from 'react'
-import { DEFAULT_SORT, PLUGIN_CATEGORY_WITH_COLLECTIONS } from './constants'
-import { marketplaceSearchParamsParsers } from './search-params'
-
-const marketplaceSortAtom = atom<PluginsSort>(DEFAULT_SORT)
-export function useMarketplaceSort() {
-  return useAtom(marketplaceSortAtom)
-}
-export function useMarketplaceSortValue() {
-  return useAtomValue(marketplaceSortAtom)
-}
-export function useSetMarketplaceSort() {
-  return useSetAtom(marketplaceSortAtom)
-}
-
-/**
- * Preserve the state for marketplace
- */
-export const preserveSearchStateInQueryAtom = atom<boolean>(false)
-
-const searchPluginTextAtom = atom<string>('')
-const activePluginTypeAtom = atom<ActivePluginType>('all')
-const filterPluginTagsAtom = atom<string[]>([])
-
-export function useSearchPluginText() {
-  const preserveSearchStateInQuery = useAtomValue(preserveSearchStateInQueryAtom)
-  const queryState = useQueryState('q', marketplaceSearchParamsParsers.q)
-  const atomState = useAtom(searchPluginTextAtom)
-  return preserveSearchStateInQuery ? queryState : atomState
-}
-export function useActivePluginType() {
-  const preserveSearchStateInQuery = useAtomValue(preserveSearchStateInQueryAtom)
-  const queryState = useQueryState('category', marketplaceSearchParamsParsers.category)
-  const atomState = useAtom(activePluginTypeAtom)
-  return preserveSearchStateInQuery ? queryState : atomState
-}
-export function useFilterPluginTags() {
-  const preserveSearchStateInQuery = useAtomValue(preserveSearchStateInQueryAtom)
-  const queryState = useQueryState('tags', marketplaceSearchParamsParsers.tags)
-  const atomState = useAtom(filterPluginTagsAtom)
-  return preserveSearchStateInQuery ? queryState : atomState
-}
-
-/**
- * Not all categories have collections, so we need to
- * force the search mode for those categories.
- */
-export const searchModeAtom = atom<true | null>(null)
-
-export function useMarketplaceSearchMode() {
-  const [searchPluginText] = useSearchPluginText()
-  const [filterPluginTags] = useFilterPluginTags()
-  const [activePluginType] = useActivePluginType()
-
-  const searchMode = useAtomValue(searchModeAtom)
-  const isSearchMode = !!searchPluginText
-    || filterPluginTags.length > 0
-    || (searchMode ?? (!PLUGIN_CATEGORY_WITH_COLLECTIONS.has(activePluginType)))
-  return isSearchMode
-}
-
-export function useMarketplaceMoreClick() {
-  const [,setQ] = useSearchPluginText()
-  const setSort = useSetAtom(marketplaceSortAtom)
-  const setSearchMode = useSetAtom(searchModeAtom)
-
-  return useCallback((searchParams?: SearchParamsFromCollection) => {
-    if (!searchParams)
-      return
-    setQ(searchParams?.query || '')
-    setSort({
-      sortBy: searchParams?.sort_by || DEFAULT_SORT.sortBy,
-      sortOrder: searchParams?.sort_order || DEFAULT_SORT.sortOrder,
-    })
-    setSearchMode(true)
-  }, [setQ, setSort, setSearchMode])
-}

web/app/components/plugins/marketplace/constants.ts

@@ -1,30 +1,6 @@
-import { PluginCategoryEnum } from '../types'
-
 export const DEFAULT_SORT = {
   sortBy: 'install_count',
   sortOrder: 'DESC',
 }
 
 export const SCROLL_BOTTOM_THRESHOLD = 100
-
-export const PLUGIN_TYPE_SEARCH_MAP = {
-  all: 'all',
-  model: PluginCategoryEnum.model,
-  tool: PluginCategoryEnum.tool,
-  agent: PluginCategoryEnum.agent,
-  extension: PluginCategoryEnum.extension,
-  datasource: PluginCategoryEnum.datasource,
-  trigger: PluginCategoryEnum.trigger,
-  bundle: 'bundle',
-} as const
-
-type ValueOf<T> = T[keyof T]
-
-export type ActivePluginType = ValueOf<typeof PLUGIN_TYPE_SEARCH_MAP>
-
-export const PLUGIN_CATEGORY_WITH_COLLECTIONS = new Set<ActivePluginType>(
-  [
-    PLUGIN_TYPE_SEARCH_MAP.all,
-    PLUGIN_TYPE_SEARCH_MAP.tool,
-  ],
-)

web/app/components/plugins/marketplace/context.tsx

@@ -0,0 +1,332 @@
+'use client'
+
+import type {
+  ReactNode,
+} from 'react'
+import type { TagKey } from '../constants'
+import type { Plugin } from '../types'
+import type {
+  MarketplaceCollection,
+  PluginsSort,
+  SearchParams,
+  SearchParamsFromCollection,
+} from './types'
+import { debounce } from 'es-toolkit/compat'
+import { noop } from 'es-toolkit/function'
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import {
+  createContext,
+  useContextSelector,
+} from 'use-context-selector'
+import { useMarketplaceFilters } from '@/hooks/use-query-params'
+import { useInstalledPluginList } from '@/service/use-plugins'
+import {
+  getValidCategoryKeys,
+  getValidTagKeys,
+} from '../utils'
+import { DEFAULT_SORT } from './constants'
+import {
+  useMarketplaceCollectionsAndPlugins,
+  useMarketplaceContainerScroll,
+  useMarketplacePlugins,
+} from './hooks'
+import { PLUGIN_TYPE_SEARCH_MAP } from './plugin-type-switch'
+import {
+  getMarketplaceListCondition,
+  getMarketplaceListFilterType,
+} from './utils'
+
+export type MarketplaceContextValue = {
+  searchPluginText: string
+  handleSearchPluginTextChange: (text: string) => void
+  filterPluginTags: string[]
+  handleFilterPluginTagsChange: (tags: string[]) => void
+  activePluginType: string
+  handleActivePluginTypeChange: (type: string) => void
+  page: number
+  handlePageChange: () => void
+  plugins?: Plugin[]
+  pluginsTotal?: number
+  resetPlugins: () => void
+  sort: PluginsSort
+  handleSortChange: (sort: PluginsSort) => void
+  handleQueryPlugins: () => void
+  handleMoreClick: (searchParams: SearchParamsFromCollection) => void
+  marketplaceCollectionsFromClient?: MarketplaceCollection[]
+  setMarketplaceCollectionsFromClient: (collections: MarketplaceCollection[]) => void
+  marketplaceCollectionPluginsMapFromClient?: Record<string, Plugin[]>
+  setMarketplaceCollectionPluginsMapFromClient: (map: Record<string, Plugin[]>) => void
+  isLoading: boolean
+  isSuccessCollections: boolean
+}
+
+export const MarketplaceContext = createContext<MarketplaceContextValue>({
+  searchPluginText: '',
+  handleSearchPluginTextChange: noop,
+  filterPluginTags: [],
+  handleFilterPluginTagsChange: noop,
+  activePluginType: 'all',
+  handleActivePluginTypeChange: noop,
+  page: 1,
+  handlePageChange: noop,
+  plugins: undefined,
+  pluginsTotal: 0,
+  resetPlugins: noop,
+  sort: DEFAULT_SORT,
+  handleSortChange: noop,
+  handleQueryPlugins: noop,
+  handleMoreClick: noop,
+  marketplaceCollectionsFromClient: [],
+  setMarketplaceCollectionsFromClient: noop,
+  marketplaceCollectionPluginsMapFromClient: {},
+  setMarketplaceCollectionPluginsMapFromClient: noop,
+  isLoading: false,
+  isSuccessCollections: false,
+})
+
+type MarketplaceContextProviderProps = {
+  children: ReactNode
+  searchParams?: SearchParams
+  shouldExclude?: boolean
+  scrollContainerId?: string
+  showSearchParams?: boolean
+}
+
+export function useMarketplaceContext(selector: (value: MarketplaceContextValue) => any) {
+  return useContextSelector(MarketplaceContext, selector)
+}
+
+export const MarketplaceContextProvider = ({
+  children,
+  searchParams,
+  shouldExclude,
+  scrollContainerId,
+  showSearchParams,
+}: MarketplaceContextProviderProps) => {
+  // Use nuqs hook for URL-based filter state
+  const [urlFilters, setUrlFilters] = useMarketplaceFilters()
+
+  const { data, isSuccess } = useInstalledPluginList(!shouldExclude)
+  const exclude = useMemo(() => {
+    if (shouldExclude)
+      return data?.plugins.map(plugin => plugin.plugin_id)
+  }, [data?.plugins, shouldExclude])
+
+  // Initialize from URL params (legacy support) or use nuqs state
+  const queryFromSearchParams = searchParams?.q || urlFilters.q
+  const tagsFromSearchParams = getValidTagKeys(urlFilters.tags as TagKey[])
+  const hasValidTags = !!tagsFromSearchParams.length
+  const hasValidCategory = getValidCategoryKeys(urlFilters.category)
+  const categoryFromSearchParams = hasValidCategory || PLUGIN_TYPE_SEARCH_MAP.all
+
+  const [searchPluginText, setSearchPluginText] = useState(queryFromSearchParams)
+  const searchPluginTextRef = useRef(searchPluginText)
+  const [filterPluginTags, setFilterPluginTags] = useState<string[]>(tagsFromSearchParams)
+  const filterPluginTagsRef = useRef(filterPluginTags)
+  const [activePluginType, setActivePluginType] = useState(categoryFromSearchParams)
+  const activePluginTypeRef = useRef(activePluginType)
+  const [sort, setSort] = useState(DEFAULT_SORT)
+  const sortRef = useRef(sort)
+  const {
+    marketplaceCollections: marketplaceCollectionsFromClient,
+    setMarketplaceCollections: setMarketplaceCollectionsFromClient,
+    marketplaceCollectionPluginsMap: marketplaceCollectionPluginsMapFromClient,
+    setMarketplaceCollectionPluginsMap: setMarketplaceCollectionPluginsMapFromClient,
+    queryMarketplaceCollectionsAndPlugins,
+    isLoading,
+    isSuccess: isSuccessCollections,
+  } = useMarketplaceCollectionsAndPlugins()
+  const {
+    plugins,
+    total: pluginsTotal,
+    resetPlugins,
+    queryPlugins,
+    queryPluginsWithDebounced,
+    cancelQueryPluginsWithDebounced,
+    isLoading: isPluginsLoading,
+    fetchNextPage: fetchNextPluginsPage,
+    hasNextPage: hasNextPluginsPage,
+    page: pluginsPage,
+  } = useMarketplacePlugins()
+  const page = Math.max(pluginsPage || 0, 1)
+
+  useEffect(() => {
+    if (queryFromSearchParams || hasValidTags || hasValidCategory) {
+      queryPlugins({
+        query: queryFromSearchParams,
+        category: hasValidCategory,
+        tags: hasValidTags ? tagsFromSearchParams : [],
+        sortBy: sortRef.current.sortBy,
+        sortOrder: sortRef.current.sortOrder,
+        type: getMarketplaceListFilterType(activePluginTypeRef.current),
+      })
+    }
+    else {
+      if (shouldExclude && isSuccess) {
+        queryMarketplaceCollectionsAndPlugins({
+          exclude,
+          type: getMarketplaceListFilterType(activePluginTypeRef.current),
+        })
+      }
+    }
+  }, [queryPlugins, queryMarketplaceCollectionsAndPlugins, isSuccess, exclude])
+
+  const handleQueryMarketplaceCollectionsAndPlugins = useCallback(() => {
+    queryMarketplaceCollectionsAndPlugins({
+      category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
+      condition: getMarketplaceListCondition(activePluginTypeRef.current),
+      exclude,
+      type: getMarketplaceListFilterType(activePluginTypeRef.current),
+    })
+    resetPlugins()
+  }, [exclude, queryMarketplaceCollectionsAndPlugins, resetPlugins])
+
+  const applyUrlFilters = useCallback(() => {
+    if (!showSearchParams)
+      return
+    const nextFilters = {
+      q: searchPluginTextRef.current,
+      category: activePluginTypeRef.current,
+      tags: filterPluginTagsRef.current,
+    }
+    const categoryChanged = urlFilters.category !== nextFilters.category
+    setUrlFilters(nextFilters, {
+      history: categoryChanged ? 'push' : 'replace',
+    })
+  }, [setUrlFilters, showSearchParams, urlFilters.category])
+
+  const debouncedUpdateSearchParams = useMemo(() => debounce(() => {
+    applyUrlFilters()
+  }, 500), [applyUrlFilters])
+
+  const handleUpdateSearchParams = useCallback((debounced?: boolean) => {
+    if (debounced) {
+      debouncedUpdateSearchParams()
+    }
+    else {
+      applyUrlFilters()
+    }
+  }, [applyUrlFilters, debouncedUpdateSearchParams])
+
+  const handleQueryPlugins = useCallback((debounced?: boolean) => {
+    handleUpdateSearchParams(debounced)
+    if (debounced) {
+      queryPluginsWithDebounced({
+        query: searchPluginTextRef.current,
+        category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
+        tags: filterPluginTagsRef.current,
+        sortBy: sortRef.current.sortBy,
+        sortOrder: sortRef.current.sortOrder,
+        exclude,
+        type: getMarketplaceListFilterType(activePluginTypeRef.current),
+      })
+    }
+    else {
+      queryPlugins({
+        query: searchPluginTextRef.current,
+        category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
+        tags: filterPluginTagsRef.current,
+        sortBy: sortRef.current.sortBy,
+        sortOrder: sortRef.current.sortOrder,
+        exclude,
+        type: getMarketplaceListFilterType(activePluginTypeRef.current),
+      })
+    }
+  }, [exclude, queryPluginsWithDebounced, queryPlugins, handleUpdateSearchParams])
+
+  const handleQuery = useCallback((debounced?: boolean) => {
+    if (!searchPluginTextRef.current && !filterPluginTagsRef.current.length) {
+      handleUpdateSearchParams(debounced)
+      cancelQueryPluginsWithDebounced()
+      handleQueryMarketplaceCollectionsAndPlugins()
+      return
+    }
+
+    handleQueryPlugins(debounced)
+  }, [handleQueryMarketplaceCollectionsAndPlugins, handleQueryPlugins, cancelQueryPluginsWithDebounced, handleUpdateSearchParams])
+
+  const handleSearchPluginTextChange = useCallback((text: string) => {
+    setSearchPluginText(text)
+    searchPluginTextRef.current = text
+
+    handleQuery(true)
+  }, [handleQuery])
+
+  const handleFilterPluginTagsChange = useCallback((tags: string[]) => {
+    setFilterPluginTags(tags)
+    filterPluginTagsRef.current = tags
+
+    handleQuery()
+  }, [handleQuery])
+
+  const handleActivePluginTypeChange = useCallback((type: string) => {
+    setActivePluginType(type)
+    activePluginTypeRef.current = type
+
+    handleQuery()
+  }, [handleQuery])
+
+  const handleSortChange = useCallback((sort: PluginsSort) => {
+    setSort(sort)
+    sortRef.current = sort
+
+    handleQueryPlugins()
+  }, [handleQueryPlugins])
+
+  const handlePageChange = useCallback(() => {
+    if (hasNextPluginsPage)
+      fetchNextPluginsPage()
+  }, [fetchNextPluginsPage, hasNextPluginsPage])
+
+  const handleMoreClick = useCallback((searchParams: SearchParamsFromCollection) => {
+    setSearchPluginText(searchParams?.query || '')
+    searchPluginTextRef.current = searchParams?.query || ''
+    setSort({
+      sortBy: searchParams?.sort_by || DEFAULT_SORT.sortBy,
+      sortOrder: searchParams?.sort_order || DEFAULT_SORT.sortOrder,
+    })
+    sortRef.current = {
+      sortBy: searchParams?.sort_by || DEFAULT_SORT.sortBy,
+      sortOrder: searchParams?.sort_order || DEFAULT_SORT.sortOrder,
+    }
+    handleQueryPlugins()
+  }, [handleQueryPlugins])
+
+  useMarketplaceContainerScroll(handlePageChange, scrollContainerId)
+
+  return (
+    <MarketplaceContext.Provider
+      value={{
+        searchPluginText,
+        handleSearchPluginTextChange,
+        filterPluginTags,
+        handleFilterPluginTagsChange,
+        activePluginType,
+        handleActivePluginTypeChange,
+        page,
+        handlePageChange,
+        plugins,
+        pluginsTotal,
+        resetPlugins,
+        sort,
+        handleSortChange,
+        handleQueryPlugins,
+        handleMoreClick,
+        marketplaceCollectionsFromClient,
+        setMarketplaceCollectionsFromClient,
+        marketplaceCollectionPluginsMapFromClient,
+        setMarketplaceCollectionPluginsMapFromClient,
+        isLoading: isLoading || isPluginsLoading,
+        isSuccessCollections,
+      }}
+    >
+      {children}
+    </MarketplaceContext.Provider>
+  )
+}

web/app/components/plugins/marketplace/hooks.ts

@@ -26,9 +26,6 @@ import {
   getMarketplacePluginsByCollectionId,
 } from './utils'
 
-/**
- * @deprecated Use useMarketplaceCollectionsAndPlugins from query.ts instead
- */
 export const useMarketplaceCollectionsAndPlugins = () => {
   const [queryParams, setQueryParams] = useState<CollectionsAndPluginsSearchParams>()
   const [marketplaceCollectionsOverride, setMarketplaceCollections] = useState<MarketplaceCollection[]>()
@@ -92,9 +89,7 @@ export const useMarketplacePluginsByCollectionId = (
     isSuccess,
   }
 }
-/**
- * @deprecated Use useMarketplacePlugins from query.ts instead
- */
+
 export const useMarketplacePlugins = () => {
   const queryClient = useQueryClient()
   const [queryParams, setQueryParams] = useState<PluginsSearchParams>()

web/app/components/plugins/marketplace/hydration-client.tsx

@@ -1,15 +0,0 @@
-'use client'
-
-import { useHydrateAtoms } from 'jotai/utils'
-import { preserveSearchStateInQueryAtom } from './atoms'
-
-export function HydrateMarketplaceAtoms({
-  preserveSearchStateInQuery,
-  children,
-}: {
-  preserveSearchStateInQuery: boolean
-  children: React.ReactNode
-}) {
-  useHydrateAtoms([[preserveSearchStateInQueryAtom, preserveSearchStateInQuery]])
-  return <>{children}</>
-}

web/app/components/plugins/marketplace/hydration-server.tsx

@@ -1,45 +0,0 @@
-import type { SearchParams } from 'nuqs'
-import { dehydrate, HydrationBoundary } from '@tanstack/react-query'
-import { createLoader } from 'nuqs/server'
-import { getQueryClientServer } from '@/context/query-client-server'
-import { PLUGIN_CATEGORY_WITH_COLLECTIONS } from './constants'
-import { marketplaceKeys } from './query'
-import { marketplaceSearchParamsParsers } from './search-params'
-import { getCollectionsParams, getMarketplaceCollectionsAndPlugins } from './utils'
-
-// The server side logic should move to marketplace's codebase so that we can get rid of Next.js
-
-async function getDehydratedState(searchParams?: Promise<SearchParams>) {
-  if (!searchParams) {
-    return
-  }
-  const loadSearchParams = createLoader(marketplaceSearchParamsParsers)
-  const params = await loadSearchParams(searchParams)
-
-  if (!PLUGIN_CATEGORY_WITH_COLLECTIONS.has(params.category)) {
-    return
-  }
-
-  const queryClient = getQueryClientServer()
-
-  await queryClient.prefetchQuery({
-    queryKey: marketplaceKeys.collections(getCollectionsParams(params.category)),
-    queryFn: () => getMarketplaceCollectionsAndPlugins(getCollectionsParams(params.category)),
-  })
-  return dehydrate(queryClient)
-}
-
-export async function HydrateQueryClient({
-  searchParams,
-  children,
-}: {
-  searchParams: Promise<SearchParams> | undefined
-  children: React.ReactNode
-}) {
-  const dehydratedState = await getDehydratedState(searchParams)
-  return (
-    <HydrationBoundary state={dehydratedState}>
-      {children}
-    </HydrationBoundary>
-  )
-}

web/app/components/plugins/marketplace/index.tsx

@@ -1,39 +1,55 @@
-import type { SearchParams } from 'nuqs'
+import type { MarketplaceCollection, SearchParams } from './types'
+import type { Plugin } from '@/app/components/plugins/types'
 import { TanstackQueryInitializer } from '@/context/query-client'
+import { MarketplaceContextProvider } from './context'
 import Description from './description'
-import { HydrateMarketplaceAtoms } from './hydration-client'
-import { HydrateQueryClient } from './hydration-server'
 import ListWrapper from './list/list-wrapper'
 import StickySearchAndSwitchWrapper from './sticky-search-and-switch-wrapper'
+import { getMarketplaceCollectionsAndPlugins } from './utils'
 
 type MarketplaceProps = {
   showInstallButton?: boolean
+  shouldExclude?: boolean
+  searchParams?: SearchParams
   pluginTypeSwitchClassName?: string
-  /**
-   * Pass the search params from the request to prefetch data on the server
-   * and preserve the search params in the URL.
-   */
-  searchParams?: Promise<SearchParams>
+  scrollContainerId?: string
+  showSearchParams?: boolean
 }
-
 const Marketplace = async ({
   showInstallButton = true,
-  pluginTypeSwitchClassName,
+  shouldExclude,
   searchParams,
+  pluginTypeSwitchClassName,
+  scrollContainerId,
+  showSearchParams = true,
 }: MarketplaceProps) => {
+  let marketplaceCollections: MarketplaceCollection[] = []
+  let marketplaceCollectionPluginsMap: Record<string, Plugin[]> = {}
+  if (!shouldExclude) {
+    const marketplaceCollectionsAndPluginsData = await getMarketplaceCollectionsAndPlugins()
+    marketplaceCollections = marketplaceCollectionsAndPluginsData.marketplaceCollections
+    marketplaceCollectionPluginsMap = marketplaceCollectionsAndPluginsData.marketplaceCollectionPluginsMap
+  }
+
   return (
     <TanstackQueryInitializer>
-      <HydrateQueryClient searchParams={searchParams}>
-        <HydrateMarketplaceAtoms preserveSearchStateInQuery={!!searchParams}>
-          <Description />
-          <StickySearchAndSwitchWrapper
-            pluginTypeSwitchClassName={pluginTypeSwitchClassName}
-          />
-          <ListWrapper
-            showInstallButton={showInstallButton}
-          />
-        </HydrateMarketplaceAtoms>
-      </HydrateQueryClient>
+      <MarketplaceContextProvider
+        searchParams={searchParams}
+        shouldExclude={shouldExclude}
+        scrollContainerId={scrollContainerId}
+        showSearchParams={showSearchParams}
+      >
+        <Description />
+        <StickySearchAndSwitchWrapper
+          pluginTypeSwitchClassName={pluginTypeSwitchClassName}
+          showSearchParams={showSearchParams}
+        />
+        <ListWrapper
+          marketplaceCollections={marketplaceCollections}
+          marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
+          showInstallButton={showInstallButton}
+        />
+      </MarketplaceContextProvider>
     </TanstackQueryInitializer>
   )
 }

web/app/components/plugins/marketplace/list/index.spec.tsx

@@ -1,6 +1,6 @@
 import type { MarketplaceCollection, SearchParamsFromCollection } from '../types'
 import type { Plugin } from '@/app/components/plugins/types'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { PluginCategoryEnum } from '@/app/components/plugins/types'
 import List from './index'
@@ -30,27 +30,23 @@ vi.mock('#i18n', () => ({
   useLocale: () => 'en-US',
 }))
 
-// Mock marketplace state hooks with controllable values
-const { mockMarketplaceData, mockMoreClick } = vi.hoisted(() => {
-  return {
-    mockMarketplaceData: {
-      plugins: undefined as Plugin[] | undefined,
-      pluginsTotal: 0,
-      marketplaceCollections: undefined as MarketplaceCollection[] | undefined,
-      marketplaceCollectionPluginsMap: undefined as Record<string, Plugin[]> | undefined,
-      isLoading: false,
-      page: 1,
-    },
-    mockMoreClick: vi.fn(),
-  }
-})
+// Mock useMarketplaceContext with controllable values
+const mockContextValues = {
+  plugins: undefined as Plugin[] | undefined,
+  pluginsTotal: 0,
+  marketplaceCollectionsFromClient: undefined as MarketplaceCollection[] | undefined,
+  marketplaceCollectionPluginsMapFromClient: undefined as Record<string, Plugin[]> | undefined,
+  isLoading: false,
+  isSuccessCollections: false,
+  handleQueryPlugins: vi.fn(),
+  searchPluginText: '',
+  filterPluginTags: [] as string[],
+  page: 1,
+  handleMoreClick: vi.fn(),
+}
 
-vi.mock('../state', () => ({
-  useMarketplaceData: () => mockMarketplaceData,
-}))
-
-vi.mock('../atoms', () => ({
-  useMarketplaceMoreClick: () => mockMoreClick,
+vi.mock('../context', () => ({
+  useMarketplaceContext: (selector: (v: typeof mockContextValues) => unknown) => selector(mockContextValues),
 }))
 
 // Mock useLocale context
@@ -582,7 +578,7 @@ describe('ListWithCollection', () => {
   // View More Button Tests
   // ================================
   describe('View More Button', () => {
-    it('should render View More button when collection is searchable', () => {
+    it('should render View More button when collection is searchable and onMoreClick is provided', () => {
       const collections = [createMockCollection({
         name: 'collection-0',
         searchable: true,
@@ -591,12 +587,14 @@ describe('ListWithCollection', () => {
       const pluginsMap: Record<string, Plugin[]> = {
         'collection-0': createMockPluginList(1),
       }
+      const onMoreClick = vi.fn()
 
       render(
         <ListWithCollection
           {...defaultProps}
           marketplaceCollections={collections}
           marketplaceCollectionPluginsMap={pluginsMap}
+          onMoreClick={onMoreClick}
         />,
       )
 
@@ -611,24 +609,24 @@ describe('ListWithCollection', () => {
       const pluginsMap: Record<string, Plugin[]> = {
         'collection-0': createMockPluginList(1),
       }
+      const onMoreClick = vi.fn()
 
       render(
         <ListWithCollection
           {...defaultProps}
           marketplaceCollections={collections}
           marketplaceCollectionPluginsMap={pluginsMap}
+          onMoreClick={onMoreClick}
         />,
       )
 
       expect(screen.queryByText('View More')).not.toBeInTheDocument()
     })
 
-    it('should call moreClick hook with search_params when View More is clicked', () => {
-      const searchParams: SearchParamsFromCollection = { query: 'test-query', sort_by: 'install_count' }
+    it('should not render View More button when onMoreClick is not provided', () => {
       const collections = [createMockCollection({
         name: 'collection-0',
         searchable: true,
-        search_params: searchParams,
       })]
       const pluginsMap: Record<string, Plugin[]> = {
         'collection-0': createMockPluginList(1),
@@ -639,13 +637,38 @@ describe('ListWithCollection', () => {
           {...defaultProps}
           marketplaceCollections={collections}
           marketplaceCollectionPluginsMap={pluginsMap}
+          onMoreClick={undefined}
+        />,
+      )
+
+      expect(screen.queryByText('View More')).not.toBeInTheDocument()
+    })
+
+    it('should call onMoreClick with search_params when View More is clicked', () => {
+      const searchParams: SearchParamsFromCollection = { query: 'test-query', sort_by: 'install_count' }
+      const collections = [createMockCollection({
+        name: 'collection-0',
+        searchable: true,
+        search_params: searchParams,
+      })]
+      const pluginsMap: Record<string, Plugin[]> = {
+        'collection-0': createMockPluginList(1),
+      }
+      const onMoreClick = vi.fn()
+
+      render(
+        <ListWithCollection
+          {...defaultProps}
+          marketplaceCollections={collections}
+          marketplaceCollectionPluginsMap={pluginsMap}
+          onMoreClick={onMoreClick}
         />,
       )
 
       fireEvent.click(screen.getByText('View More'))
 
-      expect(mockMoreClick).toHaveBeenCalledTimes(1)
-      expect(mockMoreClick).toHaveBeenCalledWith(searchParams)
+      expect(onMoreClick).toHaveBeenCalledTimes(1)
+      expect(onMoreClick).toHaveBeenCalledWith(searchParams)
     })
   })
 
@@ -779,15 +802,24 @@ describe('ListWithCollection', () => {
 // ListWrapper Component Tests
 // ================================
 describe('ListWrapper', () => {
+  const defaultProps = {
+    marketplaceCollections: [] as MarketplaceCollection[],
+    marketplaceCollectionPluginsMap: {} as Record<string, Plugin[]>,
+    showInstallButton: false,
+  }
+
   beforeEach(() => {
     vi.clearAllMocks()
-    // Reset mock data
-    mockMarketplaceData.plugins = undefined
-    mockMarketplaceData.pluginsTotal = 0
-    mockMarketplaceData.marketplaceCollections = undefined
-    mockMarketplaceData.marketplaceCollectionPluginsMap = undefined
-    mockMarketplaceData.isLoading = false
-    mockMarketplaceData.page = 1
+    // Reset context values
+    mockContextValues.plugins = undefined
+    mockContextValues.pluginsTotal = 0
+    mockContextValues.marketplaceCollectionsFromClient = undefined
+    mockContextValues.marketplaceCollectionPluginsMapFromClient = undefined
+    mockContextValues.isLoading = false
+    mockContextValues.isSuccessCollections = false
+    mockContextValues.searchPluginText = ''
+    mockContextValues.filterPluginTags = []
+    mockContextValues.page = 1
   })
 
   // ================================
@@ -795,32 +827,32 @@ describe('ListWrapper', () => {
   // ================================
   describe('Rendering', () => {
     it('should render without crashing', () => {
-      render(<ListWrapper />)
+      render(<ListWrapper {...defaultProps} />)
 
       expect(document.body).toBeInTheDocument()
     })
 
     it('should render with scrollbarGutter style', () => {
-      const { container } = render(<ListWrapper />)
+      const { container } = render(<ListWrapper {...defaultProps} />)
 
       const wrapper = container.firstChild as HTMLElement
       expect(wrapper).toHaveStyle({ scrollbarGutter: 'stable' })
     })
 
     it('should render Loading component when isLoading is true and page is 1', () => {
-      mockMarketplaceData.isLoading = true
-      mockMarketplaceData.page = 1
+      mockContextValues.isLoading = true
+      mockContextValues.page = 1
 
-      render(<ListWrapper />)
+      render(<ListWrapper {...defaultProps} />)
 
       expect(screen.getByTestId('loading-component')).toBeInTheDocument()
     })
 
     it('should not render Loading component when page > 1', () => {
-      mockMarketplaceData.isLoading = true
-      mockMarketplaceData.page = 2
+      mockContextValues.isLoading = true
+      mockContextValues.page = 2
 
-      render(<ListWrapper />)
+      render(<ListWrapper {...defaultProps} />)
 
       expect(screen.queryByTestId('loading-component')).not.toBeInTheDocument()
     })
@@ -831,26 +863,26 @@ describe('ListWrapper', () => {
   // ================================
   describe('Plugins Header', () => {
     it('should render plugins result count when plugins are present', () => {
-      mockMarketplaceData.plugins = createMockPluginList(5)
-      mockMarketplaceData.pluginsTotal = 5
+      mockContextValues.plugins = createMockPluginList(5)
+      mockContextValues.pluginsTotal = 5
 
-      render(<ListWrapper />)
+      render(<ListWrapper {...defaultProps} />)
 
       expect(screen.getByText('5 plugins found')).toBeInTheDocument()
     })
 
     it('should render SortDropdown when plugins are present', () => {
-      mockMarketplaceData.plugins = createMockPluginList(1)
+      mockContextValues.plugins = createMockPluginList(1)
 
-      render(<ListWrapper />)
+      render(<ListWrapper {...defaultProps} />)
 
       expect(screen.getByTestId('sort-dropdown')).toBeInTheDocument()
     })
 
     it('should not render plugins header when plugins is undefined', () => {
-      mockMarketplaceData.plugins = undefined
+      mockContextValues.plugins = undefined
 
-      render(<ListWrapper />)
+      render(<ListWrapper {...defaultProps} />)
 
       expect(screen.queryByTestId('sort-dropdown')).not.toBeInTheDocument()
     })
@@ -860,60 +892,197 @@ describe('ListWrapper', () => {
   // List Rendering Logic Tests
   // ================================
   describe('List Rendering Logic', () => {
-    it('should render collections when not loading', () => {
-      mockMarketplaceData.isLoading = false
-      mockMarketplaceData.marketplaceCollections = createMockCollectionList(1)
-      mockMarketplaceData.marketplaceCollectionPluginsMap = {
+    it('should render List when not loading', () => {
+      mockContextValues.isLoading = false
+      const collections = createMockCollectionList(1)
+      const pluginsMap: Record<string, Plugin[]> = {
         'collection-0': createMockPluginList(1),
       }
 
-      render(<ListWrapper />)
+      render(
+        <ListWrapper
+          {...defaultProps}
+          marketplaceCollections={collections}
+          marketplaceCollectionPluginsMap={pluginsMap}
+        />,
+      )
 
       expect(screen.getByText('Collection 0')).toBeInTheDocument()
     })
 
     it('should render List when loading but page > 1', () => {
-      mockMarketplaceData.isLoading = true
-      mockMarketplaceData.page = 2
-      mockMarketplaceData.marketplaceCollections = createMockCollectionList(1)
-      mockMarketplaceData.marketplaceCollectionPluginsMap = {
+      mockContextValues.isLoading = true
+      mockContextValues.page = 2
+      const collections = createMockCollectionList(1)
+      const pluginsMap: Record<string, Plugin[]> = {
         'collection-0': createMockPluginList(1),
       }
 
-      render(<ListWrapper />)
+      render(
+        <ListWrapper
+          {...defaultProps}
+          marketplaceCollections={collections}
+          marketplaceCollectionPluginsMap={pluginsMap}
+        />,
+      )
 
       expect(screen.getByText('Collection 0')).toBeInTheDocument()
     })
+
+    it('should use client collections when available', () => {
+      const serverCollections = createMockCollectionList(1)
+      serverCollections[0].label = { 'en-US': 'Server Collection' }
+      const clientCollections = createMockCollectionList(1)
+      clientCollections[0].label = { 'en-US': 'Client Collection' }
+
+      const serverPluginsMap: Record<string, Plugin[]> = {
+        'collection-0': createMockPluginList(1),
+      }
+      const clientPluginsMap: Record<string, Plugin[]> = {
+        'collection-0': createMockPluginList(1),
+      }
+
+      mockContextValues.marketplaceCollectionsFromClient = clientCollections
+      mockContextValues.marketplaceCollectionPluginsMapFromClient = clientPluginsMap
+
+      render(
+        <ListWrapper
+          {...defaultProps}
+          marketplaceCollections={serverCollections}
+          marketplaceCollectionPluginsMap={serverPluginsMap}
+        />,
+      )
+
+      expect(screen.getByText('Client Collection')).toBeInTheDocument()
+      expect(screen.queryByText('Server Collection')).not.toBeInTheDocument()
+    })
+
+    it('should use server collections when client collections are not available', () => {
+      const serverCollections = createMockCollectionList(1)
+      serverCollections[0].label = { 'en-US': 'Server Collection' }
+      const serverPluginsMap: Record<string, Plugin[]> = {
+        'collection-0': createMockPluginList(1),
+      }
+
+      mockContextValues.marketplaceCollectionsFromClient = undefined
+      mockContextValues.marketplaceCollectionPluginsMapFromClient = undefined
+
+      render(
+        <ListWrapper
+          {...defaultProps}
+          marketplaceCollections={serverCollections}
+          marketplaceCollectionPluginsMap={serverPluginsMap}
+        />,
+      )
+
+      expect(screen.getByText('Server Collection')).toBeInTheDocument()
+    })
   })
 
   // ================================
-  // Data Integration Tests
+  // Context Integration Tests
   // ================================
-  describe('Data Integration', () => {
-    it('should pass plugins from state to List', () => {
-      mockMarketplaceData.plugins = createMockPluginList(2)
+  describe('Context Integration', () => {
+    it('should pass plugins from context to List', () => {
+      const plugins = createMockPluginList(2)
+      mockContextValues.plugins = plugins
 
-      render(<ListWrapper />)
+      render(<ListWrapper {...defaultProps} />)
 
       expect(screen.getByTestId('card-plugin-0')).toBeInTheDocument()
       expect(screen.getByTestId('card-plugin-1')).toBeInTheDocument()
     })
 
-    it('should show View More button and call moreClick hook', () => {
-      mockMarketplaceData.marketplaceCollections = [createMockCollection({
+    it('should pass handleMoreClick from context to List', () => {
+      const mockHandleMoreClick = vi.fn()
+      mockContextValues.handleMoreClick = mockHandleMoreClick
+
+      const collections = [createMockCollection({
         name: 'collection-0',
         searchable: true,
         search_params: { query: 'test' },
       })]
-      mockMarketplaceData.marketplaceCollectionPluginsMap = {
+      const pluginsMap: Record<string, Plugin[]> = {
         'collection-0': createMockPluginList(1),
       }
 
-      render(<ListWrapper />)
+      render(
+        <ListWrapper
+          {...defaultProps}
+          marketplaceCollections={collections}
+          marketplaceCollectionPluginsMap={pluginsMap}
+        />,
+      )
 
       fireEvent.click(screen.getByText('View More'))
 
-      expect(mockMoreClick).toHaveBeenCalled()
+      expect(mockHandleMoreClick).toHaveBeenCalled()
+    })
+  })
+
+  // ================================
+  // Effect Tests (handleQueryPlugins)
+  // ================================
+  describe('handleQueryPlugins Effect', () => {
+    it('should call handleQueryPlugins when conditions are met', async () => {
+      const mockHandleQueryPlugins = vi.fn()
+      mockContextValues.handleQueryPlugins = mockHandleQueryPlugins
+      mockContextValues.isSuccessCollections = true
+      mockContextValues.marketplaceCollectionsFromClient = undefined
+      mockContextValues.searchPluginText = ''
+      mockContextValues.filterPluginTags = []
+
+      render(<ListWrapper {...defaultProps} />)
+
+      await waitFor(() => {
+        expect(mockHandleQueryPlugins).toHaveBeenCalled()
+      })
+    })
+
+    it('should not call handleQueryPlugins when client collections exist', async () => {
+      const mockHandleQueryPlugins = vi.fn()
+      mockContextValues.handleQueryPlugins = mockHandleQueryPlugins
+      mockContextValues.isSuccessCollections = true
+      mockContextValues.marketplaceCollectionsFromClient = createMockCollectionList(1)
+      mockContextValues.searchPluginText = ''
+      mockContextValues.filterPluginTags = []
+
+      render(<ListWrapper {...defaultProps} />)
+
+      // Give time for effect to run
+      await waitFor(() => {
+        expect(mockHandleQueryPlugins).not.toHaveBeenCalled()
+      })
+    })
+
+    it('should not call handleQueryPlugins when search text exists', async () => {
+      const mockHandleQueryPlugins = vi.fn()
+      mockContextValues.handleQueryPlugins = mockHandleQueryPlugins
+      mockContextValues.isSuccessCollections = true
+      mockContextValues.marketplaceCollectionsFromClient = undefined
+      mockContextValues.searchPluginText = 'search text'
+      mockContextValues.filterPluginTags = []
+
+      render(<ListWrapper {...defaultProps} />)
+
+      await waitFor(() => {
+        expect(mockHandleQueryPlugins).not.toHaveBeenCalled()
+      })
+    })
+
+    it('should not call handleQueryPlugins when filter tags exist', async () => {
+      const mockHandleQueryPlugins = vi.fn()
+      mockContextValues.handleQueryPlugins = mockHandleQueryPlugins
+      mockContextValues.isSuccessCollections = true
+      mockContextValues.marketplaceCollectionsFromClient = undefined
+      mockContextValues.searchPluginText = ''
+      mockContextValues.filterPluginTags = ['tag1']
+
+      render(<ListWrapper {...defaultProps} />)
+
+      await waitFor(() => {
+        expect(mockHandleQueryPlugins).not.toHaveBeenCalled()
+      })
     })
   })
 
@@ -921,32 +1090,32 @@ describe('ListWrapper', () => {
   // Edge Cases Tests
   // ================================
   describe('Edge Cases', () => {
-    it('should handle empty plugins array', () => {
-      mockMarketplaceData.plugins = []
-      mockMarketplaceData.pluginsTotal = 0
+    it('should handle empty plugins array from context', () => {
+      mockContextValues.plugins = []
+      mockContextValues.pluginsTotal = 0
 
-      render(<ListWrapper />)
+      render(<ListWrapper {...defaultProps} />)
 
       expect(screen.getByText('0 plugins found')).toBeInTheDocument()
       expect(screen.getByTestId('empty-component')).toBeInTheDocument()
     })
 
     it('should handle large pluginsTotal', () => {
-      mockMarketplaceData.plugins = createMockPluginList(10)
-      mockMarketplaceData.pluginsTotal = 10000
+      mockContextValues.plugins = createMockPluginList(10)
+      mockContextValues.pluginsTotal = 10000
 
-      render(<ListWrapper />)
+      render(<ListWrapper {...defaultProps} />)
 
       expect(screen.getByText('10000 plugins found')).toBeInTheDocument()
     })
 
     it('should handle both loading and has plugins', () => {
-      mockMarketplaceData.isLoading = true
-      mockMarketplaceData.page = 2
-      mockMarketplaceData.plugins = createMockPluginList(5)
-      mockMarketplaceData.pluginsTotal = 50
+      mockContextValues.isLoading = true
+      mockContextValues.page = 2
+      mockContextValues.plugins = createMockPluginList(5)
+      mockContextValues.pluginsTotal = 50
 
-      render(<ListWrapper />)
+      render(<ListWrapper {...defaultProps} />)
 
       // Should show plugins header and list
       expect(screen.getByText('50 plugins found')).toBeInTheDocument()
@@ -1259,72 +1428,106 @@ describe('CardWrapper (via List integration)', () => {
 describe('Combined Workflows', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    mockMarketplaceData.plugins = undefined
-    mockMarketplaceData.pluginsTotal = 0
-    mockMarketplaceData.isLoading = false
-    mockMarketplaceData.page = 1
-    mockMarketplaceData.marketplaceCollections = undefined
-    mockMarketplaceData.marketplaceCollectionPluginsMap = undefined
+    mockContextValues.plugins = undefined
+    mockContextValues.pluginsTotal = 0
+    mockContextValues.isLoading = false
+    mockContextValues.page = 1
+    mockContextValues.marketplaceCollectionsFromClient = undefined
+    mockContextValues.marketplaceCollectionPluginsMapFromClient = undefined
   })
 
   it('should transition from loading to showing collections', async () => {
-    mockMarketplaceData.isLoading = true
-    mockMarketplaceData.page = 1
+    mockContextValues.isLoading = true
+    mockContextValues.page = 1
 
-    const { rerender } = render(<ListWrapper />)
+    const { rerender } = render(
+      <ListWrapper
+        marketplaceCollections={[]}
+        marketplaceCollectionPluginsMap={{}}
+      />,
+    )
 
     expect(screen.getByTestId('loading-component')).toBeInTheDocument()
 
     // Simulate loading complete
-    mockMarketplaceData.isLoading = false
-    mockMarketplaceData.marketplaceCollections = createMockCollectionList(1)
-    mockMarketplaceData.marketplaceCollectionPluginsMap = {
+    mockContextValues.isLoading = false
+    const collections = createMockCollectionList(1)
+    const pluginsMap: Record<string, Plugin[]> = {
       'collection-0': createMockPluginList(1),
     }
+    mockContextValues.marketplaceCollectionsFromClient = collections
+    mockContextValues.marketplaceCollectionPluginsMapFromClient = pluginsMap
 
-    rerender(<ListWrapper />)
+    rerender(
+      <ListWrapper
+        marketplaceCollections={[]}
+        marketplaceCollectionPluginsMap={{}}
+      />,
+    )
 
     expect(screen.queryByTestId('loading-component')).not.toBeInTheDocument()
     expect(screen.getByText('Collection 0')).toBeInTheDocument()
   })
 
   it('should transition from collections to search results', async () => {
-    mockMarketplaceData.marketplaceCollections = createMockCollectionList(1)
-    mockMarketplaceData.marketplaceCollectionPluginsMap = {
+    const collections = createMockCollectionList(1)
+    const pluginsMap: Record<string, Plugin[]> = {
       'collection-0': createMockPluginList(1),
     }
+    mockContextValues.marketplaceCollectionsFromClient = collections
+    mockContextValues.marketplaceCollectionPluginsMapFromClient = pluginsMap
 
-    const { rerender } = render(<ListWrapper />)
+    const { rerender } = render(
+      <ListWrapper
+        marketplaceCollections={[]}
+        marketplaceCollectionPluginsMap={{}}
+      />,
+    )
 
     expect(screen.getByText('Collection 0')).toBeInTheDocument()
 
     // Simulate search results
-    mockMarketplaceData.plugins = createMockPluginList(5)
-    mockMarketplaceData.pluginsTotal = 5
+    mockContextValues.plugins = createMockPluginList(5)
+    mockContextValues.pluginsTotal = 5
 
-    rerender(<ListWrapper />)
+    rerender(
+      <ListWrapper
+        marketplaceCollections={[]}
+        marketplaceCollectionPluginsMap={{}}
+      />,
+    )
 
     expect(screen.queryByText('Collection 0')).not.toBeInTheDocument()
     expect(screen.getByText('5 plugins found')).toBeInTheDocument()
   })
 
   it('should handle empty search results', () => {
-    mockMarketplaceData.plugins = []
-    mockMarketplaceData.pluginsTotal = 0
+    mockContextValues.plugins = []
+    mockContextValues.pluginsTotal = 0
 
-    render(<ListWrapper />)
+    render(
+      <ListWrapper
+        marketplaceCollections={[]}
+        marketplaceCollectionPluginsMap={{}}
+      />,
+    )
 
     expect(screen.getByTestId('empty-component')).toBeInTheDocument()
     expect(screen.getByText('0 plugins found')).toBeInTheDocument()
   })
 
   it('should support pagination (page > 1)', () => {
-    mockMarketplaceData.plugins = createMockPluginList(40)
-    mockMarketplaceData.pluginsTotal = 80
-    mockMarketplaceData.isLoading = true
-    mockMarketplaceData.page = 2
+    mockContextValues.plugins = createMockPluginList(40)
+    mockContextValues.pluginsTotal = 80
+    mockContextValues.isLoading = true
+    mockContextValues.page = 2
 
-    render(<ListWrapper />)
+    render(
+      <ListWrapper
+        marketplaceCollections={[]}
+        marketplaceCollectionPluginsMap={{}}
+      />,
+    )
 
     // Should show existing results while loading more
     expect(screen.getByText('80 plugins found')).toBeInTheDocument()
@@ -1339,9 +1542,9 @@ describe('Combined Workflows', () => {
 describe('Accessibility', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    mockMarketplaceData.plugins = undefined
-    mockMarketplaceData.isLoading = false
-    mockMarketplaceData.page = 1
+    mockContextValues.plugins = undefined
+    mockContextValues.isLoading = false
+    mockContextValues.page = 1
   })
 
   it('should have semantic structure with collections', () => {
@@ -1370,11 +1573,13 @@ describe('Accessibility', () => {
     const pluginsMap: Record<string, Plugin[]> = {
       'collection-0': createMockPluginList(1),
     }
+    const onMoreClick = vi.fn()
 
     render(
       <ListWithCollection
         marketplaceCollections={collections}
         marketplaceCollectionPluginsMap={pluginsMap}
+        onMoreClick={onMoreClick}
       />,
     )
 

web/app/components/plugins/marketplace/list/index.tsx

@@ -13,6 +13,7 @@ type ListProps = {
   showInstallButton?: boolean
   cardContainerClassName?: string
   cardRender?: (plugin: Plugin) => React.JSX.Element | null
+  onMoreClick?: () => void
   emptyClassName?: string
 }
 const List = ({
@@ -22,6 +23,7 @@ const List = ({
   showInstallButton,
   cardContainerClassName,
   cardRender,
+  onMoreClick,
   emptyClassName,
 }: ListProps) => {
   return (
@@ -34,6 +36,7 @@ const List = ({
             showInstallButton={showInstallButton}
             cardContainerClassName={cardContainerClassName}
             cardRender={cardRender}
+            onMoreClick={onMoreClick}
           />
         )
       }

web/app/components/plugins/marketplace/list/list-with-collection.tsx

@@ -1,12 +1,12 @@
 'use client'
 
 import type { MarketplaceCollection } from '../types'
+import type { SearchParamsFromCollection } from '@/app/components/plugins/marketplace/types'
 import type { Plugin } from '@/app/components/plugins/types'
 import { useLocale, useTranslation } from '#i18n'
 import { RiArrowRightSLine } from '@remixicon/react'
 import { getLanguage } from '@/i18n-config/language'
 import { cn } from '@/utils/classnames'
-import { useMarketplaceMoreClick } from '../atoms'
 import CardWrapper from './card-wrapper'
 
 type ListWithCollectionProps = {
@@ -15,6 +15,7 @@ type ListWithCollectionProps = {
   showInstallButton?: boolean
   cardContainerClassName?: string
   cardRender?: (plugin: Plugin) => React.JSX.Element | null
+  onMoreClick?: (searchParams?: SearchParamsFromCollection) => void
 }
 const ListWithCollection = ({
   marketplaceCollections,
@@ -22,10 +23,10 @@ const ListWithCollection = ({
   showInstallButton,
   cardContainerClassName,
   cardRender,
+  onMoreClick,
 }: ListWithCollectionProps) => {
   const { t } = useTranslation()
   const locale = useLocale()
-  const onMoreClick = useMarketplaceMoreClick()
 
   return (
     <>
@@ -43,10 +44,10 @@ const ListWithCollection = ({
                 <div className="system-xs-regular text-text-tertiary">{collection.description[getLanguage(locale)]}</div>
               </div>
               {
-                collection.searchable && (
+                collection.searchable && onMoreClick && (
                   <div
                     className="system-xs-medium flex cursor-pointer items-center text-text-accent "
-                    onClick={() => onMoreClick(collection.search_params)}
+                    onClick={() => onMoreClick?.(collection.search_params)}
                   >
                     {t('marketplace.viewMore', { ns: 'plugin' })}
                     <RiArrowRightSLine className="h-4 w-4" />

web/app/components/plugins/marketplace/list/list-wrapper.tsx

@@ -1,26 +1,46 @@
 'use client'
+import type { Plugin } from '../../types'
+import type { MarketplaceCollection } from '../types'
 import { useTranslation } from '#i18n'
+import { useEffect } from 'react'
 import Loading from '@/app/components/base/loading'
+import { useMarketplaceContext } from '../context'
 import SortDropdown from '../sort-dropdown'
-import { useMarketplaceData } from '../state'
 import List from './index'
 
 type ListWrapperProps = {
+  marketplaceCollections: MarketplaceCollection[]
+  marketplaceCollectionPluginsMap: Record<string, Plugin[]>
   showInstallButton?: boolean
 }
 const ListWrapper = ({
+  marketplaceCollections,
+  marketplaceCollectionPluginsMap,
   showInstallButton,
 }: ListWrapperProps) => {
   const { t } = useTranslation()
+  const plugins = useMarketplaceContext(v => v.plugins)
+  const pluginsTotal = useMarketplaceContext(v => v.pluginsTotal)
+  const marketplaceCollectionsFromClient = useMarketplaceContext(v => v.marketplaceCollectionsFromClient)
+  const marketplaceCollectionPluginsMapFromClient = useMarketplaceContext(v => v.marketplaceCollectionPluginsMapFromClient)
+  const isLoading = useMarketplaceContext(v => v.isLoading)
+  const isSuccessCollections = useMarketplaceContext(v => v.isSuccessCollections)
+  const handleQueryPlugins = useMarketplaceContext(v => v.handleQueryPlugins)
+  const searchPluginText = useMarketplaceContext(v => v.searchPluginText)
+  const filterPluginTags = useMarketplaceContext(v => v.filterPluginTags)
+  const page = useMarketplaceContext(v => v.page)
+  const handleMoreClick = useMarketplaceContext(v => v.handleMoreClick)
 
-  const {
-    plugins,
-    pluginsTotal,
-    marketplaceCollections,
-    marketplaceCollectionPluginsMap,
-    isLoading,
-    page,
-  } = useMarketplaceData()
+  useEffect(() => {
+    if (
+      !marketplaceCollectionsFromClient?.length
+      && isSuccessCollections
+      && !searchPluginText
+      && !filterPluginTags.length
+    ) {
+      handleQueryPlugins()
+    }
+  }, [handleQueryPlugins, marketplaceCollections, marketplaceCollectionsFromClient, isSuccessCollections, searchPluginText, filterPluginTags])
 
   return (
     <div
@@ -46,10 +66,11 @@ const ListWrapper = ({
       {
         (!isLoading || page > 1) && (
           <List
-            marketplaceCollections={marketplaceCollections || []}
-            marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap || {}}
+            marketplaceCollections={marketplaceCollectionsFromClient || marketplaceCollections}
+            marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMapFromClient || marketplaceCollectionPluginsMap}
             plugins={plugins}
             showInstallButton={showInstallButton}
+            onMoreClick={handleMoreClick}
           />
         )
       }