deer-flow/frontend/tests/unit/core/messages/human-input.test.ts
AnoobFeng 47b0f604f4
feat(frontend):enhance the ask_clarification interaction with visualized card (#3956)
* feat(frontend): add structured human input cards for ask_clarification

Implement a reusable Human Input Card flow for ask_clarification while keeping
the existing text fallback for older clients and IM channels.

Backend:
- Add structured ToolMessage.artifact.human_input payloads for clarification requests.
- Preserve ToolMessage.content as the readable Markdown/text fallback.
- Normalize clarification options from native lists, JSON strings, plain strings,
  mixed scalar values, None, and missing options.
- Derive input_mode as choice_with_other when options exist, otherwise free_text.
- Keep disable_clarification non-interactive behavior as a plain ToolMessage with
  no human_input artifact.
- Cover artifact persistence and Gateway message metadata preservation in tests.

Frontend:
- Add human input protocol types, runtime guards, extractors, response builders,
  and thread-state helpers.
- Add reusable HumanInputCard with option buttons, free-text input, pending,
  read-only, disabled, and answered states.
- Render structured clarification cards from artifact.human_input, with Markdown
  fallback for malformed or legacy tool messages.
- Preserve line breaks in structured question/context/option text.
- Hide submitted clarification bridge messages from the chat UI via
  additional_kwargs.hide_from_ui.
- Send structured human_input_response metadata through the fourth sendMessage
  options argument, preserving run context in the third argument.
- Wire submissions for normal chats, custom agent chats, agent bootstrap chats,
  and sidecar chats.
- Derive answered state from raw thread.messages so hidden replies still update
  the original card.
- Clear pending state when the hidden reply arrives, dispatch is dropped, or a
  later async stream failure appears on thread.error.

* perf(frontend): optimize HumanInputCard UI interactions

- Support Enter key to submit text input (Shift+Enter for newline)
- Render question and context fields as Markdown instead of plain text
- Replace deprecated FormEventHandler type with structural typing

* test(frontend): add unit test cover optimize HumanInputCard UI interactions

* feat(frontend): disabled chatbox when has new human-input-card

* fix(style): lint error fix

* fix: sanitize hidden human input replies

- Preserve IME composition safety for human input card Enter submits
- Treat hidden human input responses as genuine user messages for sanitization
- Keep hidden card replies in memory filtering while excluding malformed/internal hidden messages
- Add regression coverage for card IME handling and hidden reply sanitization

* fix: tighten human input response validation

- Reject empty hidden human input response values
- Remove invalid list ARIA role from human input card options
- Add backend coverage for empty response payloads

---------

Co-authored-by: Willem Jiang <willem.jiang@gmail.com>
2026-07-06 22:34:41 +08:00

224 lines
5.9 KiB
TypeScript

import type { Message } from "@langchain/langgraph-sdk";
import { expect, test } from "@rstest/core";
import {
buildHumanInputResponseText,
createHumanInputOptionResponse,
createHumanInputTextResponse,
deriveHumanInputThreadState,
extractHumanInputRequest,
extractHumanInputResponse,
hasOpenHumanInputRequest,
shouldClearPendingHumanInputOnThreadError,
} from "@/core/messages/human-input";
const requestPayload = {
version: 1,
kind: "human_input_request",
source: "ask_clarification",
request_id: "clarification:call-abc",
tool_call_id: "call-abc",
clarification_type: "approach_choice",
question: "Which environment should I deploy to?",
context: "Need the target environment.",
input_mode: "choice_with_other",
options: [
{ id: "option-1", label: "development", value: "development" },
{ id: "option-2", label: "staging", value: "staging" },
],
};
test("extractHumanInputRequest reads a valid tool artifact payload", () => {
const message = {
type: "tool",
name: "ask_clarification",
content: "fallback",
artifact: {
human_input: requestPayload,
},
} as unknown as Message;
expect(extractHumanInputRequest(message)).toEqual(requestPayload);
});
test("extractHumanInputRequest rejects malformed artifacts", () => {
const message = {
type: "tool",
name: "ask_clarification",
content: "fallback",
artifact: {
human_input: {
...requestPayload,
options: [{ id: "option-1", label: "missing value" }],
},
},
} as unknown as Message;
expect(extractHumanInputRequest(message)).toBeNull();
});
test("extractHumanInputResponse reads valid human message metadata", () => {
const response = {
version: 1,
kind: "human_input_response",
source: "ask_clarification",
request_id: "clarification:call-abc",
response_kind: "option",
option_id: "option-2",
value: "staging",
};
const message = {
type: "human",
content: "For your clarification, my answer is: staging",
additional_kwargs: {
hide_from_ui: true,
human_input_response: response,
},
} as unknown as Message;
expect(extractHumanInputResponse(message)).toEqual(response);
});
test("derives answered card state from hidden human input responses", () => {
const response = {
version: 1,
kind: "human_input_response",
source: "ask_clarification",
request_id: "clarification:call-abc",
response_kind: "option",
option_id: "option-2",
value: "staging",
};
const state = deriveHumanInputThreadState([
{
type: "tool",
name: "ask_clarification",
content: "fallback",
artifact: {
human_input: requestPayload,
},
} as unknown as Message,
{
type: "human",
content: "For your clarification, my answer is: staging",
additional_kwargs: {
hide_from_ui: true,
human_input_response: response,
},
} as unknown as Message,
]);
expect(state.answeredResponses.get("clarification:call-abc")).toEqual(
response,
);
expect(state.latestOpenRequestId).toBeNull();
});
test("detects whether a thread has an open human input request", () => {
const requestMessage = {
type: "tool",
name: "ask_clarification",
content: "fallback",
artifact: {
human_input: requestPayload,
},
} as unknown as Message;
const responseMessage = {
type: "human",
content: "For your clarification, my answer is: staging",
additional_kwargs: {
hide_from_ui: true,
human_input_response: {
version: 1,
kind: "human_input_response",
source: "ask_clarification",
request_id: "clarification:call-abc",
response_kind: "option",
option_id: "option-2",
value: "staging",
},
},
} as unknown as Message;
expect(hasOpenHumanInputRequest([requestMessage])).toBe(true);
expect(hasOpenHumanInputRequest([requestMessage, responseMessage])).toBe(
false,
);
});
test("detects new thread errors that should unlock pending human input cards", () => {
const previousError = new Error("old failure");
const currentError = new Error("stream failed");
expect(
shouldClearPendingHumanInputOnThreadError({
currentError,
pendingRequestCount: 1,
previousError: undefined,
}),
).toBe(true);
expect(
shouldClearPendingHumanInputOnThreadError({
currentError,
pendingRequestCount: 0,
previousError: undefined,
}),
).toBe(false);
expect(
shouldClearPendingHumanInputOnThreadError({
currentError: previousError,
pendingRequestCount: 1,
previousError,
}),
).toBe(false);
expect(
shouldClearPendingHumanInputOnThreadError({
currentError: undefined,
pendingRequestCount: 1,
previousError: currentError,
}),
).toBe(false);
});
test("creates option and text responses for a request", () => {
const request = extractHumanInputRequest({
type: "tool",
name: "ask_clarification",
content: "fallback",
artifact: {
human_input: requestPayload,
},
} as unknown as Message);
expect(request).not.toBeNull();
const optionResponse = createHumanInputOptionResponse(
request!,
request!.options![1]!,
);
const textResponse = createHumanInputTextResponse(
request!,
"Use blue-green deployment",
);
expect(optionResponse).toEqual({
version: 1,
kind: "human_input_response",
source: "ask_clarification",
request_id: "clarification:call-abc",
response_kind: "option",
option_id: "option-2",
value: "staging",
});
expect(textResponse).toEqual({
version: 1,
kind: "human_input_response",
source: "ask_clarification",
request_id: "clarification:call-abc",
response_kind: "text",
value: "Use blue-green deployment",
});
expect(buildHumanInputResponseText(request!, optionResponse)).toBe(
'For your clarification "Which environment should I deploy to?", my answer is: staging',
);
});