@springbrand/message-panel 0.1.3-alpha.10 → 0.1.3-alpha.12

package/demo/chat-scenarios.ts

@@ -239,35 +239,54 @@ function userMessage(prompt: string): UIMessage {
   } as UIMessage;
 }
 
-const askUserRequest = {
-  id: "camel-demo-ask-user",
-  role: "assistant",
-  parts: [
-    {
-      type: "tool-ask_user",
-      toolCallId: "camel-demo-ask-user-1",
-      state: "output-available",
-      input: {
-        question: "这份建议优先面向哪个读者？",
-        options: ["产品团队", "管理层", "设计团队"],
-        multiSelect: false,
-      },
-      output: { asked: true },
-    },
+export interface DemoAskUserResponse {
+  answers: Array<{ selections: string[]; text?: string }>;
+}
+
+export const demoAskUserResponse: DemoAskUserResponse = {
+  answers: [
+    { selections: ["管理层"], text: "" },
+    { selections: ["报告"], text: "" },
   ],
-} as unknown as UIMessage;
+};
+
+const askUserQuestions = [
+  {
+    question: "这份建议优先面向哪个读者？",
+    options: ["产品团队", "管理层", "设计团队"],
+  },
+  {
+    question: "需要哪些交付物？",
+    options: ["报告", "演示文稿", "执行清单"],
+    multiSelect: true,
+    allowCustom: true,
+  },
+];
 
-function humanReplyMessage(answer: string): UIMessage {
+function askUserRequest(response?: DemoAskUserResponse): UIMessage {
   return {
-    id: "camel-demo-human-reply",
-    role: "user",
-    metadata: {
-      authorDisplayName: "You",
-      createdAt: demoTurnStartedAt + 2_000,
-      messageSource: "Web",
-    },
-    parts: [{ type: "text", text: answer }],
-  } as UIMessage;
+    id: "camel-demo-ask-user",
+    role: "assistant",
+    parts: [
+      {
+        type: "tool-ask_user",
+        toolCallId: "camel-demo-ask-user-1",
+        state: response ? "output-available" : "input-available",
+        input: { questions: askUserQuestions },
+        ...(response
+          ? {
+              output: {
+                answers: response.answers.map((answer, index) => ({
+                  question: askUserQuestions[index]!.question,
+                  selections: answer.selections,
+                  text: answer.text?.trim() ?? "",
+                })),
+              },
+            }
+          : {}),
+      },
+    ],
+  } as unknown as UIMessage;
 }
 
 const planningWork = {
@@ -827,7 +846,7 @@ const failedWork = {
 export function messagesForScenario(
   scenario: DemoScenario,
   prompt: string,
-  humanAnswer: string,
+  humanAnswer: DemoAskUserResponse,
   approval: boolean | undefined,
 ): UIMessage[] {
   if (scenario === "empty") return [];
@@ -835,15 +854,13 @@ export function messagesForScenario(
     return [noticeMessage(scenario), ...commandMessages];
   }
   const conversation = [noticeMessage(scenario), userMessage(prompt)];
-  const answer = humanAnswer || "管理层";
   const decidedConversation = [
     ...conversation,
-    askUserRequest,
-    humanReplyMessage(answer),
+    askUserRequest(humanAnswer),
   ];
   if (scenario === "hydrating") return conversation;
   if (scenario === "submitted") return conversation;
-  if (scenario === "ask") return [...conversation, askUserRequest];
+  if (scenario === "ask") return [...conversation, askUserRequest()];
   if (scenario === "planning") {
     return [...decidedConversation, planningWork];
   }

package/demo/cloud-os-chat-showcase.tsx

@@ -20,11 +20,13 @@ import {
 } from "../cloud-os";
 import {
   defaultPrompt,
+  demoAskUserResponse,
   demoModels,
   flowSteps,
   messagesForScenario,
   scenarios,
   type DemoScenario,
+  type DemoAskUserResponse,
   type DemoScenarioMeta,
 } from "./chat-scenarios";
 
@@ -122,7 +124,7 @@ export function CloudOsChatShowcase() {
   const [mode, setMode] = useState<CloudOsMode>("light");
   const [scenario, setScenario] = useState<DemoScenario>(initialScenario);
   const [prompt, setPrompt] = useState(defaultPrompt);
-  const [humanAnswer, setHumanAnswer] = useState("管理层");
+  const [humanAnswer, setHumanAnswer] = useState(demoAskUserResponse);
   const [model, setModel] = useState<string | null>(cloudOsModels[0].id);
   const [value, setValue] = useState("");
   const [attachments, setAttachments] = useState<CloudOsAttachmentView[]>([]);
@@ -389,17 +391,17 @@ export function CloudOsChatShowcase() {
               onRespond={async (_toolCallId, response) => {
                 const data =
                   response && typeof response === "object"
-                    ? (response as { selections?: string[]; text?: string })
-                    : {};
-                const answer = [
-                  ...(data.selections ?? []),
-                  data.text?.trim() ?? "",
-                ]
+                    ? (response as DemoAskUserResponse)
+                    : { answers: [] };
+                const answer = data.answers.flatMap((item) => [
+                  ...item.selections,
+                  item.text?.trim() ?? "",
+                ])
                   .filter(Boolean)
                   .join(" / ");
-                if (answer) setHumanAnswer(answer);
+                if (data.answers.length > 0) setHumanAnswer(data);
                 selectScenario("planning");
-                setLastEvent(`已回答并继续：${answer || humanAnswer}`);
+                setLastEvent(`已回答并继续：${answer}`);
                 return true;
               }}
             />

package/demo/fixtures.ts

@@ -166,17 +166,16 @@ export const allPartsMessage: DemoMessage = {
       type: "ask_user",
       questions: [
         {
-          prompt: "报告通过什么渠道发送？",
-          kind: "single",
+          question: "报告通过什么渠道发送？",
           options: ["Email", "Slack", "Both"],
         },
         {
-          prompt: "需要包含哪些内容？",
-          kind: "multi",
+          question: "需要包含哪些内容？",
           options: ["定价", "功能", "动态"],
+          multiSelect: true,
+          allowCustom: true,
         },
       ],
-      freeTextPlaceholder: "补充竞争对手名称…",
     },
     {
       type: "suggestions",

package/demo/message-panel-gallery.tsx

@@ -220,6 +220,7 @@ function ComposerInteractionHarness() {
 
 export function MessagePanelGallery() {
   const [theme, setTheme] = useState<"light" | "dark">("dark");
+  const [askUserOutput, setAskUserOutput] = useState<unknown>();
   const rootClass = theme === "dark" ? "dark" : "";
   useEffect(() => {
     document.documentElement.classList.toggle("dark", theme === "dark");
@@ -309,12 +310,25 @@ export function MessagePanelGallery() {
         />
         <div style={{ height: 1100, overflow: "hidden", border: "1px solid var(--border)", borderRadius: 18 }}>
           <MessagePanel
-            messages={[basicMessages[0], allPartsMessage]}
+            messages={[
+              basicMessages[0],
+              {
+                ...allPartsMessage,
+                parts: allPartsMessage.parts.map((part) =>
+                  part.type === "ask_user" && askUserOutput
+                    ? { ...part, output: askUserOutput }
+                    : part
+                ),
+              },
+            ]}
             status="ready"
             adapter={demoMessageAdapter}
             actions={{
               onSuggestion: noOp,
-              onAnswer: noOp,
+              onAnswer: async (output) => {
+                await new Promise((resolve) => setTimeout(resolve, 250));
+                setAskUserOutput(output);
+              },
               onApprove: noOp,
               onPreview: noOp,
               onDownload: noOp,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@springbrand/message-panel",
-  "version": "0.1.3-alpha.10",
+  "version": "0.1.3-alpha.12",
   "type": "module",
   "files": [
     "src",

package/src/camel/camel-chat-messages.tsx

@@ -668,53 +668,30 @@ function CamelSchedule({
 
 function CamelAskUser({
   part,
-  submittedAnswer,
   onAnswer,
 }: {
   part: unknown;
-  submittedAnswer?: string;
   onAnswer: (payload: unknown) => void;
 }) {
   const record = recordOf(part);
   const data = dataOf(part);
-  const output = record.output;
   const questions = Array.isArray(data.questions)
     ? data.questions.map(recordOf)
-    : typeof data.question === "string"
-      ? [{
-          prompt: data.question,
-          kind: data.multiSelect === true ? "multi" : "single",
-          options: Array.isArray(data.options)
-            ? data.options.filter(
-                (option): option is string => typeof option === "string",
-              )
-            : [],
-        }]
-      : [];
-  const [selections, setSelections] = useState<string[][]>(() =>
-    questions.map(() => []),
-  );
-  const [text, setText] = useState("");
-  const [submitted, setSubmitted] = useState(false);
-  const outputRecord = recordOf(output);
-  const externalAnswer =
-    submittedAnswer?.trim() ||
-    (typeof output === "string"
-      ? output.trim()
-      : typeof outputRecord.text === "string"
-        ? outputRecord.text.trim()
-        : "");
-  const externalSelections = new Set(
-    externalAnswer
-      .split("、")
-      .map((value) => value.trim())
-      .filter(Boolean),
+    : [];
+  const output = recordOf(record.output);
+  const settledAnswers = Array.isArray(output.answers)
+    ? output.answers.map(recordOf)
+    : [];
+  const [answers, setAnswers] = useState<Array<{
+    selections: string[];
+    text: string;
+  }>>([]);
+  const answerAt = (index: number) =>
+    answers[index] ?? { selections: [], text: "" };
+  const resolvedSubmitted = settledAnswers.length > 0;
+  const valid = questions.length > 0 && questions.every((_, index) =>
+    answerAt(index).selections.length > 0 || answerAt(index).text.trim()
   );
-  const resolvedSubmitted = submitted || Boolean(externalAnswer);
-  const valid = questions.every((question, index) => {
-    const options = Array.isArray(question.options) ? question.options : [];
-    return options.length === 0 || (selections[index]?.length ?? 0) > 0;
-  });
 
   return (
     <section
@@ -723,21 +700,28 @@ function CamelAskUser({
       data-state={resolvedSubmitted ? "submitted" : "idle"}
     >
       {questions.map((question, questionIndex) => {
-        const prompt = String(question.prompt ?? "Choose an option");
+        const prompt = String(question.question ?? "Choose an option");
         const options = Array.isArray(question.options)
           ? question.options.filter(
               (option): option is string => typeof option === "string",
             )
           : [];
-        const multi = question.kind === "multi";
+        const multi = question.multiSelect === true;
+        const allowCustom = question.allowCustom === true || options.length === 0;
+        const settledAnswer = settledAnswers[questionIndex];
+        const settledSelections = Array.isArray(settledAnswer?.selections)
+          ? settledAnswer.selections.filter(
+              (value): value is string => typeof value === "string",
+            )
+          : [];
         return (
           <div className="space-y-2" key={`${prompt}:${questionIndex}`}>
             <p className="text-sm text-foreground">{prompt}</p>
             <div className="flex flex-wrap gap-2">
               {options.map((option) => {
-                const selected = externalAnswer
-                  ? externalSelections.has(option)
-                  : selections[questionIndex]?.includes(option);
+                const selected = settledAnswer
+                  ? settledSelections.includes(option)
+                  : answerAt(questionIndex).selections.includes(option);
                 return (
                   <Button
                     key={option}
@@ -746,15 +730,21 @@ function CamelAskUser({
                     variant={selected ? "default" : "outline"}
                     disabled={resolvedSubmitted}
                     onClick={() =>
-                      setSelections((current) =>
-                        current.map((values, index) => {
-                          if (index !== questionIndex) return values;
-                          if (!multi) return [option];
-                          return values.includes(option)
-                            ? values.filter((value) => value !== option)
-                            : [...values, option];
-                        }),
-                      )
+                      setAnswers((current) => {
+                        const next = questions.map((_, index) =>
+                          current[index] ?? { selections: [], text: "" }
+                        );
+                        const answer = next[questionIndex]!;
+                        next[questionIndex] = {
+                          ...answer,
+                          selections: !multi
+                            ? [option]
+                            : answer.selections.includes(option)
+                              ? answer.selections.filter((value) => value !== option)
+                              : [...answer.selections, option],
+                        };
+                        return next;
+                      })
                     }
                   >
                     {option}
@@ -762,34 +752,54 @@ function CamelAskUser({
                 );
               })}
             </div>
+            {!resolvedSubmitted && allowCustom && (
+              <input
+                value={answerAt(questionIndex).text}
+                maxLength={2_000}
+                aria-label={`Custom answer: ${prompt}`}
+                onChange={(event) =>
+                  setAnswers((current) => {
+                    const next = questions.map((_, index) =>
+                      current[index] ?? { selections: [], text: "" }
+                    );
+                    next[questionIndex] = {
+                      ...next[questionIndex]!,
+                      text: event.currentTarget.value,
+                    };
+                    return next;
+                  })}
+                placeholder={options.length > 0 ? "Other" : "Type your answer"}
+                className="h-8 w-full rounded-md border border-input bg-background px-3 text-sm outline-none focus:border-ring focus:ring-2 focus:ring-ring/30"
+              />
+            )}
+            {settledAnswer && (
+              <p className="text-xs text-muted-foreground">
+                Answered: {[
+                  ...settledSelections,
+                  ...(typeof settledAnswer.text === "string" && settledAnswer.text.trim()
+                    ? [settledAnswer.text.trim()]
+                    : []),
+                ].join(" / ")}
+              </p>
+            )}
           </div>
         );
       })}
-      {typeof data.freeTextPlaceholder === "string" && (
-        <input
-          value={text}
-          disabled={resolvedSubmitted}
-          onChange={(event) => setText(event.currentTarget.value)}
-          placeholder={data.freeTextPlaceholder}
-          className="h-8 w-full rounded-md border border-input bg-background px-3 text-sm outline-none focus:border-ring focus:ring-2 focus:ring-ring/30"
-        />
-      )}
       <Button
         type="button"
         size="sm"
         disabled={resolvedSubmitted || !valid}
         onClick={() => {
-          onAnswer({ selections, text });
-          setSubmitted(true);
+          onAnswer({
+            answers: questions.map((_, index) => ({
+              selections: answerAt(index).selections,
+              text: answerAt(index).text.trim(),
+            })),
+          });
         }}
       >
         {resolvedSubmitted ? "Submitted" : "Submit"}
       </Button>
-      {externalAnswer && (
-        <p className="text-xs text-muted-foreground">
-          已回答：{externalAnswer}
-        </p>
-      )}
     </section>
   );
 }
@@ -800,7 +810,6 @@ function CamelRichPart({
   onApprove,
   onSuggestion,
   onAnswer,
-  replyText,
   getToolApproval,
 }: {
   part: unknown;
@@ -808,7 +817,6 @@ function CamelRichPart({
   onApprove: (approvalId: string, decision: ToolApprovalDecision) => void;
   onSuggestion: (text: string) => void;
   onAnswer: (payload: unknown) => void;
-  replyText?: string;
   getToolApproval?: (part: unknown) => ToolApprovalView | undefined;
 }) {
   const kind = normalizedPartType(part);
@@ -824,7 +832,6 @@ function CamelRichPart({
     return (
       <CamelAskUser
         part={part}
-        submittedAnswer={replyText}
         onAnswer={onAnswer}
       />
     );
@@ -924,7 +931,6 @@ function AssistantPart({
   onApprove,
   onSuggestion,
   onAnswer,
-  replyText,
   getToolApproval,
   resolveUrl,
 }: {
@@ -933,7 +939,6 @@ function AssistantPart({
   onApprove: (approvalId: string, decision: ToolApprovalDecision) => void;
   onSuggestion: (text: string) => void;
   onAnswer: (payload: unknown) => void;
-  replyText?: string;
   getToolApproval?: (part: unknown) => ToolApprovalView | undefined;
   resolveUrl?: MessageUrlResolver;
 }) {
@@ -960,7 +965,6 @@ function AssistantPart({
       onApprove={onApprove}
       onSuggestion={onSuggestion}
       onAnswer={onAnswer}
-      replyText={replyText}
       getToolApproval={getToolApproval}
     />
   );
@@ -1137,7 +1141,6 @@ function RenderAssistantPart({
   onApprove,
   onSuggestion,
   onAnswer,
-  replyText,
   getToolApproval,
   resolveUrl,
 }: {
@@ -1146,7 +1149,6 @@ function RenderAssistantPart({
   onApprove: (approvalId: string, decision: ToolApprovalDecision) => void;
   onSuggestion: (text: string) => void;
   onAnswer: (payload: unknown) => void;
-  replyText?: string;
   getToolApproval?: (part: unknown) => ToolApprovalView | undefined;
   resolveUrl?: MessageUrlResolver;
 }) {
@@ -1160,7 +1162,6 @@ function RenderAssistantPart({
       onApprove={onApprove}
       onSuggestion={onSuggestion}
       onAnswer={onAnswer}
-      replyText={replyText}
       getToolApproval={getToolApproval}
       resolveUrl={resolveUrl}
     />
@@ -1200,7 +1201,6 @@ function AssistantTurn({
       onApprove={onApprove}
       onSuggestion={onSuggestion}
       onAnswer={onAnswer}
-      replyText={turn.replyText}
       getToolApproval={getToolApproval}
       resolveUrl={resolveUrl}
     />

package/src/camel/camel-tool-presentation.tsx

@@ -77,6 +77,12 @@ function stringField(record: UnknownRecord, ...keys: string[]): string {
   return "";
 }
 
+function stringArray(value: unknown): string[] {
+  return Array.isArray(value)
+    ? value.filter((item): item is string => typeof item === "string")
+    : [];
+}
+
 function numberField(record: UnknownRecord, ...keys: string[]): number | undefined {
   for (const key of keys) {
     const value = record[key];
@@ -342,17 +348,7 @@ function fileSummary(
 }
 
 function questionsOf(input: UnknownRecord): UnknownRecord[] {
-  if (Array.isArray(input.questions)) return input.questions.map(recordOf);
-  if (typeof input.question === "string") {
-    return [
-      {
-        question: input.question,
-        header: input.header,
-        options: input.options,
-      },
-    ];
-  }
-  return [];
+  return Array.isArray(input.questions) ? input.questions.map(recordOf) : [];
 }
 
 function summaryFor(
@@ -1113,7 +1109,10 @@ function SkillDetails({
 
 function AskUserDetails({ presentation }: CamelToolDetailsProps) {
   const questions = questionsOf(presentation.input);
-  const answer = presentation.outputText;
+  const output = recordOf(presentation.output);
+  const answers = Array.isArray(output.answers)
+    ? output.answers.map(recordOf)
+    : [];
   return (
     <div className="space-y-2">
       {questions.length > 0 ? (
@@ -1123,7 +1122,12 @@ function AskUserDetails({ presentation }: CamelToolDetailsProps) {
               {stringField(question, "question", "prompt") || "Question"}
             </p>
             <p className="text-muted-foreground/60">
-              {answer || "—"}
+              {[
+                ...stringArray(answers[index]?.selections),
+                ...(typeof answers[index]?.text === "string" && answers[index].text
+                  ? [answers[index].text]
+                  : []),
+              ].join(" / ") || "—"}
             </p>
           </div>
         ))

package/src/camel/camel-turn.ts

@@ -41,7 +41,6 @@ export interface CamelAssistantTurn {
   };
   stepCount: number;
   copyText: string;
-  replyText?: string;
   durationMs?: number;
   completedAt?: number;
 }
@@ -115,10 +114,6 @@ function standaloneKind(message: UIMessage): CamelStandaloneKind | null {
   return message.role === "user" ? "user" : null;
 }
 
-function isDirectUserMessage(message: UIMessage): boolean {
-  return message.role === "user" && standaloneKind(message) === "user";
-}
-
 export function camelMessageText(message: UIMessage): string {
   return message.parts
     .filter(isVisibleText)
@@ -228,7 +223,6 @@ function turnDuration(message: UIMessage): number | undefined {
 export function projectCamelAssistantTurn(
   message: UIMessage,
   finalToolNames: readonly string[] = [],
-  replyText?: string,
 ): CamelAssistantTurn {
   const parts = message.parts.map((part, partIndex) => ({
     messageId: message.id,
@@ -294,7 +288,6 @@ export function projectCamelAssistantTurn(
       parts.filter(({ part }) => part.type === "step-start").length,
     ),
     copyText: camelMessageText(message),
-    replyText,
     durationMs: turnDuration(message),
     completedAt: camelCompletedAt(message),
   };
@@ -309,16 +302,7 @@ export function projectCamelMessages(
     if (message.role === "system") return;
     const displayKind = standaloneKind(message);
     if (message.role === "assistant" && displayKind === null) {
-      const reply = messages
-        .slice(index + 1)
-        .find(isDirectUserMessage);
-      items.push(
-        projectCamelAssistantTurn(
-          message,
-          finalToolNames,
-          reply ? camelMessageText(reply).trim() || undefined : undefined,
-        ),
-      );
+      items.push(projectCamelAssistantTurn(message, finalToolNames));
       return;
     }
     if (displayKind !== null) {

package/src/contracts.ts

@@ -47,8 +47,6 @@ export interface PartRendererContext {
   activityId: string;
   isActive: boolean;
   isLatestOfKind: boolean;
-  /** First user message after the assistant message that owns this part. */
-  replyText?: string;
   approval?: ToolApprovalView;
   status: MessagePanelStatus;
   actions: MessagePanelActions;

package/src/message-panel.tsx

@@ -93,7 +93,6 @@ interface MessageRowProps<T> {
   slots: MessagePanelSlots;
   status: MessagePanelProps<T>["status"];
   latestActivityByKind: ReadonlyMap<string, string>;
-  replyText?: string;
 }
 
 function MessageRow<T>({
@@ -107,7 +106,6 @@ function MessageRow<T>({
   slots,
   status,
   latestActivityByKind,
-  replyText,
 }: MessageRowProps<T>) {
   const role = roleOf(adapter, message);
   const parts = adapter.getParts(message);
@@ -186,7 +184,6 @@ function MessageRow<T>({
                 isLatestOfKind:
                   key === undefined ||
                   latestActivityByKind.get(key) === activityId,
-                replyText,
                 approval: adapter.getToolApproval?.(part),
                 status,
                 actions,
@@ -255,25 +252,6 @@ function MessagePanelInner<T>(
     });
     return latest;
   }, [adapter, ids, messages]);
-  const replyTextByMessageId = useMemo(() => {
-    const replies = new Map<string, string>();
-    messages.forEach((message, messageIndex) => {
-      if (roleOf(adapter, message) !== "assistant") return;
-      for (
-        let replyIndex = messageIndex + 1;
-        replyIndex < messages.length;
-        replyIndex += 1
-      ) {
-        const reply = messages[replyIndex];
-        if (roleOf(adapter, reply) !== "user") continue;
-        const text = messageText(adapter, reply).trim();
-        if (text) replies.set(ids[messageIndex], text);
-        break;
-      }
-    });
-    return replies;
-  }, [adapter, ids, messages]);
-
   return (
     <div
       ref={ref}
@@ -332,7 +310,6 @@ function MessagePanelInner<T>(
               slots={slots}
               status={status}
               latestActivityByKind={latestActivityByKind}
-              replyText={replyTextByMessageId.get(ids[index])}
             />
           ))}
           {showPending && (