@springbrand/message-panel 0.1.3-alpha.3 → 0.1.3-alpha.30

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

@@ -13,6 +13,7 @@ import {
   CloudOsRoot,
   CloudOsWorkspacePanel,
   CloudOsWorkspaceSplit,
+  ScheduleConfirmation,
   WorkshopIconButton,
   buildCloudOsEntries,
   type CloudOsAttachmentView,
@@ -20,17 +21,19 @@ import {
 } from "../cloud-os";
 import {
   defaultPrompt,
+  demoAskUserResponse,
   demoModels,
   flowSteps,
   messagesForScenario,
   scenarios,
   type DemoScenario,
+  type DemoAskUserResponse,
   type DemoScenarioMeta,
 } from "./chat-scenarios";
 
 /**
  * cloud-os 版快速预览。场景表和 camel-chat-showcase 共用 `chat-scenarios.ts`,
- * 所以两边的状态逐条对齐(同样 22 个场景、同样的 7 步流程条、同样的初始 URL 参数)。
+ * 所以两边的状态逐条对齐(同样 23 个场景、同样的 7 步流程条、同样的初始 URL 参数)。
  * 差别只在外壳:这里是 cloudflare-os 的左聊天 / 右工作区双栏。
  */
 
@@ -122,7 +125,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[]>([]);
@@ -153,7 +156,8 @@ export function CloudOsChatShowcase() {
         ? (part as { type?: unknown; state?: unknown })
         : {};
     return (record.type === "tool-write_file" ||
-      record.type === "tool-cancel_schedule") &&
+      record.type === "tool-cancel_schedule" ||
+      record.type === "tool-schedule") &&
       record.state === "approval-requested"
       ? "cloud-os-demo-approval"
       : undefined;
@@ -283,7 +287,7 @@ export function CloudOsChatShowcase() {
 
       <CloudOsWorkspaceSplit
         workspaceOpen={workspaceOpen}
-        isAgentActive={status === "submitted" || status === "streaming"}
+        isLoading={scenario === "hydrating"}
         chat={
           <div className="flex h-full min-h-0 flex-col bg-kumo-base">
             <aside
@@ -348,11 +352,40 @@ export function CloudOsChatShowcase() {
             <CloudOsChatMessages
               messages={messages}
               status={status}
-              isHydrating={scenario === "hydrating"}
+              turnActive={
+                status === "submitted" ||
+                status === "streaming" ||
+                scenario === "ask" ||
+                scenario === "schedule_create" ||
+                ((scenario === "approval" || scenario === "schedule_cancel") &&
+                  approval === undefined)
+              }
               isRecovering={scenario === "recovering"}
-              recoveryStatusLabel="模型响应暂时中断,正在重试…"
+              recoveryStatusLabel="Model response interrupted. Retrying…"
+              awaitingApproval={
+                (scenario === "approval" ||
+                  scenario === "schedule_cancel" ||
+                  scenario === "schedule_create") &&
+                approval === undefined
+              }
               showThinkingTraces={showThinkingTraces}
               approvalIdOf={approvalIdOf}
+              renderApproval={({ toolName, input }) =>
+                toolName === "schedule"
+                  ? (
+                      <ScheduleConfirmation
+                        input={input}
+                        onCancel={() => {
+                          selectScenario("submitted");
+                          setLastEvent("Schedule creation cancelled");
+                        }}
+                        onConfirm={() => {
+                          selectScenario("schedule");
+                          setLastEvent("Scheduled task created");
+                        }}
+                      />
+                    )
+                  : undefined}
               error={statusError}
               constrainWidth={!workspaceOpen}
               onRetry={() => {
@@ -379,17 +412,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.3",
+  "version": "0.1.3-alpha.30",
   "type": "module",
   "files": [
     "src",
@@ -31,11 +31,10 @@
     "@streamdown/math": "^1.0.2",
     "@streamdown/mermaid": "^1.0.2",
     "lucide-react": "^1.24.0",
+    "motion": "^13.1.0",
     "radix-ui": "^1.6.2",
-    "react-markdown": "^10.1.0",
-    "remark-gfm": "^4.0.1",
     "streamdown": "^2.5.0",
-    "thinking-orbs": "0.1.1",
+    "thinking-orbs": "0.2.0",
     "use-stick-to-bottom": "^1.1.6"
   },
   "devDependencies": {

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

@@ -167,7 +167,7 @@ export function CamelChatError({
 }
 
 export function CamelChatRecovery({
-  label = "模型响应暂时中断，正在重试…",
+  label = "The model response was interrupted. Retrying…",
 }: {
   label?: string;
 }) {
@@ -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(
@@ -387,7 +383,7 @@ function summaryFor(
         complete: "Edited",
       });
     case "bash": {
-      const command = stringField(input, "command", "cmd");
+      const command = stringField(input, "script", "command", "cmd");
       const description = stringField(input, "description");
       const label = description || truncate(command || "command", 30);
       return running
@@ -822,7 +818,7 @@ function EditDetails({ presentation }: CamelToolDetailsProps) {
 
 function BashDetails({ presentation }: CamelToolDetailsProps) {
   const { input, output, outputText } = presentation;
-  const command = stringField(input, "command", "cmd");
+  const command = stringField(input, "script", "command", "cmd");
   const outputRecord = recordOf(output);
   const parsedFromText = (() => {
     if (!outputText.trim().startsWith("{")) return {};
@@ -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/composer/composer-attachments.tsx

@@ -59,7 +59,7 @@ export const AttachmentPreview = forwardRef<
     attachment.status === "uploading"
       ? "上传中…"
       : attachment.status === "error"
-        ? "上传失败"
+        ? "Upload failed"
         : [attachment.note, formatSize(attachment.size)].filter(Boolean).join(" · ");
   return (
     <div

package/src/composer/composer-trigger-popover.tsx

@@ -156,7 +156,7 @@ function Items({
                     {item.label}
                   </span>
                   {item.description && (
-                    <span className="ms-5.5 text-xs leading-tight text-muted-foreground">
+                    <span className="ms-5.5 w-full truncate text-xs leading-tight text-muted-foreground">
                       {item.description}
                     </span>
                   )}

package/src/composer/composer.tsx

@@ -211,10 +211,10 @@ function ComposerInner<TAttachment>(
       );
       const invalid = selected.filter((file) => !valid.includes(file));
       if (all.length > selected.length) {
-        onValidationError?.(`最多只能添加 ${maxFiles ?? 1} 个附件`, all);
+        onValidationError?.(`You can add up to ${maxFiles ?? 1} attachments`, all);
       }
       if (invalid.length) {
-        onValidationError?.("存在不支持或超过大小限制的文件", invalid);
+        onValidationError?.("Some files are unsupported or exceed the size limit", invalid);
       }
       if (valid.length) void onFilesAdded?.(valid);
     },

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;