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

package/cloud-os/README.md

@@ -57,8 +57,8 @@ pnpm dev:cloud-os        # http://localhost:9992
 
 - `update_plan` 是**整份快照覆盖**,不是增量事件。整条会话只保留最后一份计划快照
   (`dropSupersededPlans`),否则同一份计划会被画上四遍。
-- `ask_user` 的「已回答」取的是**这条消息之后的第一条用户直答**,不是工具 output ——
-  后者往往只是 `{ asked: true }` 之类的回执。
+- `ask_user` 的「已回答」只取该 Tool Part 的 `output.answers[]`;
+  不扫描后续用户消息,问题与答案按数组下标一一对应。
 - `approval-requested` 的工具是否渲染成原位授权卡,由宿主的 `approvalIdOf` 决定;
   返回 `undefined` 就退回普通工具行(本仓的持久化审批走输入框上方那条队列)。
 

package/cloud-os/chat/cloud-os-chat-messages.tsx

@@ -154,7 +154,10 @@ function UserBubble({
           {entry.attachments.map((attachment, index) => (
             <Fragment key={`${attachment.url}:${index}`}>
               {renderFileView(renderFile, {
-                file: attachment,
+                file: {
+                  ...attachment,
+                  url: resolveUrl?.(attachment.url) ?? attachment.url,
+                },
                 placement: "user-message",
               })}
             </Fragment>

package/cloud-os/chat/rich-blocks.tsx

@@ -1,4 +1,6 @@
 import {
+  ArrowLeft,
+  ArrowRight,
   Bell,
   CaretRight,
   Check,
@@ -9,7 +11,7 @@ import {
   UsersThree,
   WarningCircle,
 } from "@phosphor-icons/react";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { Tooltip } from "../primitives/tooltip";
 import { WorkshopButton } from "../primitives/workshop-controls";
 import { MarkdownMessage } from "./markdown-message";
@@ -124,33 +126,32 @@ interface AskQuestion {
   prompt: string;
   options: string[];
   multi: boolean;
+  allowCustom: boolean;
 }
 
 function questionsOf(input: Record<string, unknown>): AskQuestion[] {
-  if (Array.isArray(input.questions)) {
-    return input.questions.map((item) => {
-      const question = (item ?? {}) as Record<string, unknown>;
-      return {
-        prompt: String(question.prompt ?? question.question ?? "Choose an option"),
-        options: Array.isArray(question.options)
-          ? question.options.filter((o): o is string => typeof o === "string")
-          : [],
-        multi: question.kind === "multi" || question.multiSelect === true,
-      };
-    });
-  }
-  if (typeof input.question === "string") {
-    return [
-      {
-        prompt: input.question,
-        options: Array.isArray(input.options)
-          ? input.options.filter((o): o is string => typeof o === "string")
-          : [],
-        multi: input.multiSelect === true,
-      },
-    ];
-  }
-  return [];
+  if (!Array.isArray(input.questions)) return [];
+  return input.questions.map((item) => {
+    const question = (item ?? {}) as Record<string, unknown>;
+    const options = Array.isArray(question.options)
+      ? question.options.filter((option): option is string =>
+        typeof option === "string"
+      )
+      : [];
+    return {
+      prompt: typeof question.question === "string"
+        ? question.question
+        : "Choose an option",
+      options,
+      multi: question.multiSelect === true,
+      allowCustom: question.allowCustom === true || options.length === 0,
+    };
+  });
+}
+
+interface DraftAnswer {
+  selections: string[];
+  text: string;
 }
 
 export function AskUserBlock({
@@ -162,37 +163,54 @@ export function AskUserBlock({
   onRespond?: (toolCallId: string, response: unknown) => Promise<boolean>;
 }) {
   const questions = questionsOf(call.input);
-  // 不能用 `useState(() => questions.map(() => []))` 初始化:工具入参是**流式**到达的,
-  // 首帧 questions 往往还是空数组,那之后每次 setSelections 都在空数组上 map,
+  // 不能用 `useState(() => questions.map(...))` 初始化:工具入参是**流式**到达的,
+  // 首帧 questions 往往还是空数组,那之后每次 setAnswers 都在空数组上 map,
   // 选择永远存不进去 → Submit 永久禁用。改成稀疏存 + 按当前 questions 补齐。
-  const [selections, setSelections] = useState<string[][]>([]);
-  const selectionAt = (index: number) => selections[index] ?? [];
+  const [answers, setAnswers] = useState<DraftAnswer[]>([]);
+  const [current, setCurrent] = useState(0);
+  const direction = useRef<"back" | "forward">("forward");
+  const answerAt = (index: number): DraftAnswer =>
+    answers[index] ?? { selections: [], text: "" };
   const toggle = (questionIndex: number, option: string, multi: boolean) =>
-    setSelections((current) => {
-      const next = questions.map((_, index) => current[index] ?? []);
-      const values = next[questionIndex] ?? [];
-      next[questionIndex] = !multi
-        ? [option]
-        : 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;
+    });
+  const setText = (questionIndex: number, text: string) =>
+    setAnswers((current) => {
+      const next = questions.map((_, index) =>
+        current[index] ?? { selections: [], text: "" }
+      );
+      next[questionIndex] = { ...next[questionIndex]!, text };
       return next;
     });
   // 在途只用于按钮转圈；权威状态永远是 part 的 state。
   const [inFlight, setInFlight] = useState(false);
   const outcome = askUserOutcome(call);
-  const answer = outcome.kind === "answered" ? outcome : null;
-  const answeredSelections = new Set(answer?.selections ?? []);
-  const answeredText = [
-    ...(answer?.selections ?? []),
-    ...(answer?.text.trim() ? [answer.text.trim()] : []),
-  ].join(" / ");
+  const settledAnswers = outcome.kind === "answered" ? outcome.answers : [];
   // 服务端已经结算 = 这张卡永久不可操作，不管结算成什么。
   const resolved = outcome.kind !== "pending" || inFlight;
   const valid = questions.length > 0 && questions.every(
-    (question, index) =>
-      question.options.length === 0 || selectionAt(index).length > 0,
+    (_question, index) =>
+      answerAt(index).selections.length > 0 || answerAt(index).text.trim(),
   );
+  const currentIndex = Math.min(current, Math.max(questions.length - 1, 0));
+  const currentQuestion = questions[currentIndex];
+  const currentAnswer = answerAt(currentIndex);
+  const currentValid = currentAnswer.selections.length > 0 ||
+    Boolean(currentAnswer.text.trim());
+  const isLast = currentIndex === questions.length - 1;
   const buttonLabel = outcome.kind === "answered"
     ? "Submitted"
     : outcome.kind === "closed"
@@ -200,32 +218,30 @@ export function AskUserBlock({
       : inFlight
         ? "Submitting…"
         : "Submit";
-  const footnote = outcome.kind === "answered"
-    ? answeredText && `Answered: ${answeredText}`
-    : outcome.kind === "closed"
+  const footnote = outcome.kind === "closed"
       ? outcome.reason === "user_replied_freeform"
         ? "Answered in the chat instead."
         : "Closed without an answer."
       : "";
 
-  // 提交按钮固定在卡片右下角,和脚注同一行 —— 脚注不再单独占一行,多问题时
-  // 按钮也不会卡在某一题的选项中间。选项没到(流式首帧 questions 为空)时这行
-  // 照样渲染,否则用户看到的是一张空卡。
-  const submit = (
+  const submit = () => {
+    if (!onRespond) return;
+    setInFlight(true);
+    // 失败就把按钮放回可点：权威状态由 part 决定，这里只管别把用户锁死。
+    void onRespond(call.toolCallId, {
+      answers: questions.map((_, index) => ({
+        selections: answerAt(index).selections,
+        text: answerAt(index).text.trim(),
+      })),
+    }).then((ok) => {
+      if (!ok) setInFlight(false);
+    }, () => setInFlight(false));
+  };
+
+  const settledButton = (
     <WorkshopButton
       tone="primary"
-      disabled={resolved || !valid || !onRespond}
-      onClick={() => {
-        if (!onRespond) return;
-        setInFlight(true);
-        // 失败就把按钮放回可点：权威状态由 part 决定，这里只管别把用户锁死。
-        void onRespond(call.toolCallId, {
-          selections: questions.flatMap((_, index) => selectionAt(index)),
-          text: "",
-        }).then((ok) => {
-          if (!ok) setInFlight(false);
-        });
-      }}
+      disabled
       className="ml-auto !h-7 flex-shrink-0 gap-1 !rounded-lg px-2.5 text-[12px]"
     >
       {buttonLabel}
@@ -234,52 +250,193 @@ export function AskUserBlock({
 
   return (
     // 收成 w-fit：短问题不该撑成一条横贯全栏的长条,长问题到 560px 再换行。
-    <div className="w-fit min-w-[15rem] max-w-[560px]">
-      {/* 组内(问题↔选项)10px、组间(题与题、题与按钮行)12px —— 组间必须比组内
-          松,否则多问题时上一题的选项会看起来像下一题的。
-          用 flex+gap 而不是 space-y-*:Tailwind v4 的 space-y 选择器裹在
-          `:where()` 里,特异性被抹平,会被子元素自己的 `m-0` 压掉 → 不生效。 */}
+    <div
+      className="w-fit min-w-[15rem] max-w-[560px]"
+      data-part-type="ask_user"
+      data-state={outcome.kind === "answered" ? "submitted" : outcome.kind}
+    >
       <div className="flex flex-col gap-3 rounded-xl border border-kumo-line bg-kumo-base px-3 py-2.5">
-        {questions.map((question, questionIndex) => (
-          <div
-            key={`${question.prompt}:${questionIndex}`}
-            className="flex flex-col gap-2.5"
-          >
-            <p className="m-0 text-[13px] leading-[18px] font-medium tracking-[-0.25px] text-kumo-default">
-              {question.prompt}
-            </p>
-            <div className="flex flex-wrap items-center gap-1.5">
-              {question.options.map((option) => {
-                const selected = answer
-                  ? answeredSelections.has(option)
-                  : selectionAt(questionIndex).includes(option);
-                return (
-                  <button
-                    key={option}
-                    type="button"
-                    disabled={resolved || !onRespond}
-                    onClick={() => toggle(questionIndex, option, question.multi)}
-                    className={`inline-flex h-7 cursor-pointer items-center rounded-lg border px-2.5 text-[13px] leading-none tracking-[-0.25px] transition-colors duration-150 ease-out disabled:cursor-default ${
-                      selected
-                        ? "border-kumo-brand/45 bg-kumo-brand/10 text-kumo-default"
-                        : "border-kumo-line bg-kumo-base text-kumo-subtle hover:bg-kumo-tint hover:text-kumo-default"
-                    }`}
-                  >
-                    {option}
-                  </button>
-                );
-              })}
+        {outcome.kind === "pending" ? (
+          <>
+            {questions.length > 1 && (
+              <div className="flex flex-col gap-2">
+                <div className="flex items-center justify-between text-[11px] font-medium leading-4 text-kumo-inactive">
+                  <span>Clarifying questions</span>
+                  <span className="tabular-nums">
+                    {currentIndex + 1}/{questions.length}
+                  </span>
+                </div>
+                <div className="flex gap-1" aria-hidden="true">
+                  {questions.map((question, index) => (
+                    <span
+                      key={`${question.prompt}:${index}`}
+                      className={`h-1 flex-1 rounded-full ${
+                        index < currentIndex
+                          ? "bg-kumo-brand"
+                          : index === currentIndex
+                            ? "bg-kumo-brand/60"
+                            : "bg-kumo-fill"
+                      }`}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+            {currentQuestion && (
+              <div className="overflow-hidden">
+                <div
+                  key={currentIndex}
+                  className="cos-ask-user-question flex flex-col gap-2.5"
+                  data-direction={direction.current}
+                >
+                  <p className="m-0 text-[13px] leading-[18px] font-medium tracking-[-0.25px] text-kumo-default">
+                    {currentQuestion.prompt}
+                  </p>
+                  {currentQuestion.options.length > 0 && (
+                    <ul className="m-0 flex list-none flex-col gap-1.5 p-0">
+                      {currentQuestion.options.map((option) => {
+                        const selected = currentAnswer.selections.includes(
+                          option,
+                        );
+                        return (
+                          <li key={option} className="m-0 p-0">
+                            <label
+                              className={`flex min-h-8 items-center gap-2 rounded-lg border px-2.5 py-1.5 text-[13px] leading-[18px] tracking-[-0.25px] transition-colors duration-150 ease-out ${
+                                resolved || !onRespond
+                                  ? "cursor-default text-kumo-inactive"
+                                  : "cursor-pointer text-kumo-subtle hover:bg-kumo-tint hover:text-kumo-default"
+                              } ${
+                                selected
+                                  ? "border-kumo-brand/45 bg-kumo-brand/10 text-kumo-default"
+                                  : "border-kumo-line bg-kumo-base"
+                              }`}
+                            >
+                              <input
+                                type={currentQuestion.multi
+                                  ? "checkbox"
+                                  : "radio"}
+                                name={`${call.toolCallId}-${currentIndex}`}
+                                checked={selected}
+                                disabled={resolved || !onRespond}
+                                onChange={() =>
+                                  toggle(
+                                    currentIndex,
+                                    option,
+                                    currentQuestion.multi,
+                                  )}
+                                className="h-4 w-4 shrink-0 accent-[var(--color-kumo-brand)]"
+                              />
+                              <span>{option}</span>
+                            </label>
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  )}
+                  {currentQuestion.allowCustom && (
+                    <label className="flex flex-col gap-1 text-[12px] leading-4 text-kumo-subtle">
+                      <span>
+                        {currentQuestion.options.length > 0 ? "Other" : "Answer"}
+                      </span>
+                      <input
+                        type="text"
+                        value={currentAnswer.text}
+                        maxLength={2_000}
+                        disabled={resolved || !onRespond}
+                        aria-label={`自定义回答：${currentQuestion.prompt}`}
+                        placeholder={currentQuestion.options.length > 0
+                          ? "Add a custom answer"
+                          : "Type your answer"}
+                        onChange={(event) =>
+                          setText(currentIndex, event.currentTarget.value)}
+                        className="h-8 rounded-lg border border-kumo-line bg-kumo-base px-2.5 text-[13px] text-kumo-default outline-none placeholder:text-kumo-inactive focus:border-kumo-brand focus:ring-2 focus:ring-kumo-brand/20 disabled:cursor-default"
+                      />
+                    </label>
+                  )}
+                </div>
+              </div>
+            )}
+            <div className="flex items-center gap-2">
+              {questions.length > 1 && (
+                <WorkshopButton
+                  disabled={currentIndex === 0 || resolved}
+                  onClick={() => {
+                    direction.current = "back";
+                    setCurrent((index) => Math.max(0, index - 1));
+                  }}
+                  className="!h-7 gap-1 !rounded-lg px-2.5 text-[12px]"
+                >
+                  <ArrowLeft size={13} weight="bold" />
+                  Back
+                </WorkshopButton>
+              )}
+              <WorkshopButton
+                tone="primary"
+                disabled={
+                  resolved || !onRespond ||
+                  (questions.length > 1 && !isLast ? !currentValid : !valid)
+                }
+                onClick={() => {
+                  if (questions.length > 1 && !isLast) {
+                    direction.current = "forward";
+                    setCurrent((index) =>
+                      Math.min(questions.length - 1, index + 1)
+                    );
+                    return;
+                  }
+                  submit();
+                }}
+                className="ml-auto !h-7 gap-1 !rounded-lg px-2.5 text-[12px]"
+              >
+                {questions.length > 1 && !isLast ? (
+                  <>
+                    Next
+                    <ArrowRight size={13} weight="bold" />
+                  </>
+                ) : buttonLabel}
+              </WorkshopButton>
             </div>
-          </div>
-        ))}
-        <div className="flex items-center gap-3">
-          {footnote && (
-            <p className="m-0 min-w-0 text-[12px] leading-4 text-kumo-inactive">
-              {footnote}
-            </p>
-          )}
-          {submit}
-        </div>
+          </>
+        ) : (
+          <>
+            {outcome.kind === "answered" &&
+              questions.map((question, questionIndex) => (
+                <div
+                  key={`${question.prompt}:${questionIndex}`}
+                  className="flex flex-col gap-1.5"
+                >
+                  <p className="m-0 text-[13px] leading-[18px] font-medium tracking-[-0.25px] text-kumo-default">
+                    {question.prompt}
+                  </p>
+                  {settledAnswers[questionIndex] && (
+                    <div className="flex flex-col gap-1 text-[12px] leading-4 text-kumo-inactive">
+                      {settledAnswers[questionIndex]!.selections.length > 0 && (
+                        <p className="m-0">
+                          Answered: {settledAnswers[questionIndex]!.selections
+                            .join(" / ")}
+                        </p>
+                      )}
+                      {settledAnswers[questionIndex]!.text.trim() && (
+                        <p className="m-0">
+                          {settledAnswers[questionIndex]!.selections.length > 0
+                            ? `补充：${settledAnswers[questionIndex]!.text.trim()}`
+                            : `Answered: ${settledAnswers[questionIndex]!.text.trim()}`}
+                        </p>
+                      )}
+                    </div>
+                  )}
+                </div>
+              ))}
+            <div className="flex items-center gap-3">
+              {footnote && (
+                <p className="m-0 min-w-0 text-[12px] leading-4 text-kumo-inactive">
+                  {footnote}
+                </p>
+              )}
+              {settledButton}
+            </div>
+          </>
+        )}
       </div>
     </div>
   );

package/cloud-os/chat/tool-presentation.ts

@@ -498,7 +498,7 @@ export function toCloudOsToolCall(
  *
  * - `pending`:还等着用户操作,选项可点。**只有 input 态才算 pending** ——
  *   服务端一旦结算,这次 interaction 就不再接受响应。
- * - `answered`:`ask_user` 的 settle 写了 `{ selections, text }`。
+ * - `answered`:`ask_user` 的 settle 写了按问题对应的 `{ answers }`。
  * - `closed`:被结算掉了但不是一个答案 —— 用户改成直接发言(`{ cancelled: true }`)、
  *   Turn 提前结束、或工具出错。必须和 pending 分开,否则卡片会留一个点了拿
  *   `{ ok: false }` 的假 Submit,读起来就是「点了没反应」。
@@ -508,7 +508,14 @@ export function toCloudOsToolCall(
  */
 export type AskUserOutcome =
   | { kind: "pending" }
-  | { kind: "answered"; selections: string[]; text: string }
+  | {
+      kind: "answered";
+      answers: Array<{
+        question: string;
+        selections: string[];
+        text: string;
+      }>;
+    }
   | { kind: "closed"; reason: "user_replied_freeform" | "other" };
 
 export function askUserOutcome(call: CloudOsToolCall): AskUserOutcome {
@@ -516,14 +523,23 @@ export function askUserOutcome(call: CloudOsToolCall): AskUserOutcome {
     return { kind: "pending" };
   }
   const record = recordOf(call.output);
-  if (Array.isArray(record.selections)) {
-    return {
-      kind: "answered",
-      selections: record.selections.filter(
-        (value): value is string => typeof value === "string",
-      ),
-      text: typeof record.text === "string" ? record.text : "",
-    };
+  if (Array.isArray(record.answers) && record.answers.length > 0) {
+    const answers = record.answers.map(recordOf);
+    if (answers.every((answer) =>
+      typeof answer.question === "string" &&
+      Array.isArray(answer.selections) &&
+      answer.selections.every((value) => typeof value === "string") &&
+      (answer.text === undefined || typeof answer.text === "string")
+    )) {
+      return {
+        kind: "answered",
+        answers: answers.map((answer) => ({
+          question: answer.question as string,
+          selections: answer.selections as string[],
+          text: typeof answer.text === "string" ? answer.text : "",
+        })),
+      };
+    }
   }
   return {
     kind: "closed",

package/cloud-os/styles/cloud-os.css

@@ -535,6 +535,35 @@
   }
 }
 
+/* ── 原位提问:逐题横向切换 ─────────────────────────────────────────────── */
+.cos-ask-user-question[data-direction="forward"] {
+  animation: cos-ask-user-forward 180ms ease-out;
+}
+
+.cos-ask-user-question[data-direction="back"] {
+  animation: cos-ask-user-back 180ms ease-out;
+}
+
+@keyframes cos-ask-user-forward {
+  from {
+    opacity: 0;
+    transform: translateX(24px);
+  }
+}
+
+@keyframes cos-ask-user-back {
+  from {
+    opacity: 0;
+    transform: translateX(-24px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cos-ask-user-question {
+    animation: none !important;
+  }
+}
+
 /* ── 观察类 markdown(行内、紧凑)────────────────────────────────────────── */
 .cos-observation-markdown {
   line-height: 1.5;

package/demo/camel-chat-showcase.tsx

@@ -15,11 +15,13 @@ import {
 import {
   commands as sharedCommands,
   defaultPrompt,
+  demoAskUserResponse,
   demoModels,
   finalToolNames,
   flowSteps,
   messagesForScenario,
   scenarios,
+  type DemoAskUserResponse,
   type DemoScenario,
   type DemoScenarioMeta,
 } from "./chat-scenarios";
@@ -42,7 +44,7 @@ export function CamelChatShowcase() {
   const [theme, setTheme] = useState<"light" | "dark">("dark");
   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>(demoModels[0].value);
   const [value, setValue] = useState("");
   const [attachments, setAttachments] =
@@ -274,20 +276,17 @@ export function CamelChatShowcase() {
             onAnswer={(payload) => {
               const data =
                 payload && typeof payload === "object"
-                  ? (payload as {
-                      selections?: string[][];
-                      text?: string;
-                    })
-                  : {};
-              const answer = [
-                ...(data.selections?.flat() ?? []),
-                data.text?.trim() ?? "",
-              ]
+                  ? (payload 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}`);
             }}
             getToolApproval={approvalView}
           />