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

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

@@ -1,3 +1,8 @@
+// camel 是 dev-only 的展示变体(App.tsx 的 `/__camel-chat` 路由),没有接生产宿主。
+// 它的交互卡片仍用旧的 `onAnswer(payload)` 回调,**没有**迁到 client-settled tool 的
+// `onRespond(toolCallId, response)` —— 生产聊天面板走的是 cloud-os,已经迁完。
+// 哪天 camel 要上生产,这里必须一起改,否则卡片点了不会把答案回写给那次工具调用。
+
 import type { UIMessage } from "ai";
 import {
   ArrowDownIcon,
@@ -71,10 +76,7 @@ export interface CamelChatMessagesProps {
   finalToolNames?: readonly string[];
   isHydrating?: boolean;
   isRecovering?: boolean;
-  isServerStreaming?: boolean;
-  /** Show the opt-in activity bar for recovering or server-streaming states. */
-  showActivityStatus?: boolean;
-  activityStatusLabel?: string;
+  recoveryStatusLabel?: string;
   hasPendingSteer?: boolean;
   startedWithPending?: boolean;
   error?: unknown;
@@ -164,6 +166,23 @@ export function CamelChatError({
   );
 }
 
+export function CamelChatRecovery({
+  label = "模型响应暂时中断，正在重试…",
+}: {
+  label?: string;
+}) {
+  return (
+    <div
+      className="mt-4 flex items-center gap-2 rounded-lg border border-border/70 bg-muted/40 px-3 py-2 text-sm text-muted-foreground"
+      data-camel-chat-recovery=""
+      role="status"
+    >
+      <Loader2Icon className="size-4 shrink-0 animate-spin" aria-hidden="true" />
+      <span>{label}</span>
+    </div>
+  );
+}
+
 export function CamelApprovalPrompts({
   approvals,
   error,
@@ -649,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
@@ -704,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}
@@ -727,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}
@@ -743,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>
   );
 }
@@ -781,7 +810,6 @@ function CamelRichPart({
   onApprove,
   onSuggestion,
   onAnswer,
-  replyText,
   getToolApproval,
 }: {
   part: unknown;
@@ -789,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);
@@ -805,7 +832,6 @@ function CamelRichPart({
     return (
       <CamelAskUser
         part={part}
-        submittedAnswer={replyText}
         onAnswer={onAnswer}
       />
     );
@@ -905,7 +931,6 @@ function AssistantPart({
   onApprove,
   onSuggestion,
   onAnswer,
-  replyText,
   getToolApproval,
   resolveUrl,
 }: {
@@ -914,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;
 }) {
@@ -941,7 +965,6 @@ function AssistantPart({
       onApprove={onApprove}
       onSuggestion={onSuggestion}
       onAnswer={onAnswer}
-      replyText={replyText}
       getToolApproval={getToolApproval}
     />
   );
@@ -1118,7 +1141,6 @@ function RenderAssistantPart({
   onApprove,
   onSuggestion,
   onAnswer,
-  replyText,
   getToolApproval,
   resolveUrl,
 }: {
@@ -1127,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;
 }) {
@@ -1141,7 +1162,6 @@ function RenderAssistantPart({
       onApprove={onApprove}
       onSuggestion={onSuggestion}
       onAnswer={onAnswer}
-      replyText={replyText}
       getToolApproval={getToolApproval}
       resolveUrl={resolveUrl}
     />
@@ -1151,6 +1171,7 @@ function RenderAssistantPart({
 function AssistantTurn({
   turn,
   isActive,
+  keepTraceExpanded,
   hasPendingSteer,
   hasPendingApproval,
   onFork,
@@ -1162,6 +1183,7 @@ function AssistantTurn({
 }: {
   turn: CamelAssistantTurn;
   isActive: boolean;
+  keepTraceExpanded: boolean;
   hasPendingSteer: boolean;
   hasPendingApproval: boolean;
   onFork?: (messageId: string) => void | Promise<void>;
@@ -1179,13 +1201,15 @@ function AssistantTurn({
       onApprove={onApprove}
       onSuggestion={onSuggestion}
       onAnswer={onAnswer}
-      replyText={turn.replyText}
       getToolApproval={getToolApproval}
       resolveUrl={resolveUrl}
     />
   );
   const showWorkInPlace =
-    isActive || hasPendingApproval || turn.terminalState !== undefined;
+    isActive ||
+    keepTraceExpanded ||
+    hasPendingApproval ||
+    turn.terminalState !== undefined;
   const showSummary = !showWorkInPlace && turn.traceParts.length > 0;
   const completedAt = turn.completedAt ?? camelCompletedAt(turn.message);
   const messageTime =
@@ -1294,9 +1318,7 @@ export function CamelChatMessages({
   finalToolNames,
   isHydrating = false,
   isRecovering = false,
-  isServerStreaming = false,
-  showActivityStatus = false,
-  activityStatusLabel,
+  recoveryStatusLabel,
   hasPendingSteer = false,
   startedWithPending = false,
   error,
@@ -1328,6 +1350,10 @@ export function CamelChatMessages({
     isActive && lastItem?.kind === "assistant"
       ? lastItem.actionMessageId
       : null;
+  const recoveringAssistantMessageId =
+    isRecovering && lastItem?.kind === "assistant"
+      ? lastItem.actionMessageId
+      : null;
 
   const syncScrollButton = useCallback(() => {
     const element = scrollRef.current;
@@ -1341,7 +1367,7 @@ export function CamelChatMessages({
     const element = scrollRef.current;
     if (!element || showScrollButton) return;
     element.scrollTo({ top: element.scrollHeight });
-  }, [messages, status, showScrollButton]);
+  }, [isRecovering, messages, status, showScrollButton]);
 
   return (
     <div
@@ -1351,15 +1377,6 @@ export function CamelChatMessages({
       data-status={status}
       aria-busy={isActive || isHydrating}
     >
-      {showActivityStatus && (isRecovering || isServerStreaming) && (
-        <div
-          className="absolute inset-x-0 top-0 z-10 flex h-7 items-center justify-center gap-2 bg-background/85 text-xs text-muted-foreground backdrop-blur-sm"
-          role="status"
-        >
-          <span className="size-1.5 animate-pulse rounded-full bg-blue-500" />
-          {activityStatusLabel ?? (isRecovering ? "Recovering…" : "Running…")}
-        </div>
-      )}
       <div
         ref={scrollRef}
         onScroll={syncScrollButton}
@@ -1380,6 +1397,9 @@ export function CamelChatMessages({
                 key={item.key}
                 turn={item}
                 isActive={item.actionMessageId === activeAssistantMessageId}
+                keepTraceExpanded={
+                  item.actionMessageId === recoveringAssistantMessageId
+                }
                 hasPendingSteer={hasPendingSteer}
                 hasPendingApproval={item.parts.some((partRef) => {
                   const approval =
@@ -1398,6 +1418,9 @@ export function CamelChatMessages({
               <StandaloneMessage key={item.key} item={item} />
             ),
           )}
+          {isRecovering && (
+            <CamelChatRecovery label={recoveryStatusLabel} />
+          )}
           {error != null && <CamelChatError error={error} onRetry={onRetry} />}
           {isActive && activeAssistantMessageId === null && (
             <ThinkingIndicator

package/src/camel/camel-prompt-input.tsx

@@ -39,6 +39,7 @@ import {
   type ReactNode,
 } from "react";
 import { ComposerTriggerPopover } from "../composer/composer-trigger-popover";
+import { isComposingKeyEvent } from "../composer/key-rules";
 import type { ComposerCommand } from "../composer/types";
 import { cn } from "../internal/cn";
 
@@ -345,7 +346,7 @@ function CamelPromptInputContent({
     if (
       event.key === "Enter" &&
       !event.shiftKey &&
-      !event.nativeEvent.isComposing
+      !isComposingKeyEvent(event.nativeEvent)
     ) {
       event.preventDefault();
       submit();

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/chat-summary-panel.tsx

@@ -103,7 +103,7 @@ export function ChatSummaryPanel({
   return (
     <aside
       className={cn(
-        "w-[19rem] min-w-0 max-w-full overflow-hidden rounded-2xl border border-border bg-popover shadow-card",
+        "absolute right-3 top-11 z-30 w-[19rem] min-w-0 max-w-[calc(100%-1.5rem)] overflow-hidden rounded-2xl border border-border bg-popover shadow-card",
         "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200 motion-reduce:animate-none",
         className,
       )}

package/src/composer/chat-composer.tsx

@@ -10,6 +10,7 @@ import {
   type KeyboardEvent,
 } from "react";
 import { cn } from "../internal/cn";
+import { isComposingKeyEvent } from "./key-rules";
 import { Composer } from "./composer";
 import type {
   ChatComposerProps,
@@ -152,7 +153,7 @@ function ChatComposerInner<TAttachment>(
     if (
       (event.key === "Enter" &&
         !event.shiftKey &&
-        !event.nativeEvent.isComposing) ||
+        !isComposingKeyEvent(event.nativeEvent)) ||
       event.key === "Tab"
     ) {
       const command = filtered[active] ?? filtered[0];

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

@@ -26,6 +26,7 @@ import {
   Attachments,
 } from "./composer-attachments";
 import { useComposerDrop } from "./drop-controller";
+import { isComposingKeyEvent } from "./key-rules";
 import type {
   ComposerAttachmentView,
   ComposerProps,
@@ -247,7 +248,7 @@ function ComposerInner<TAttachment>(
     if (
       event.key === "Enter" &&
       !event.shiftKey &&
-      !event.nativeEvent.isComposing
+      !isComposingKeyEvent(event.nativeEvent)
     ) {
       event.preventDefault();
       if (canSend) void submit();

package/src/composer/index.ts

@@ -3,4 +3,5 @@ export * from "./composer-attachments";
 export * from "./composer-trigger-popover";
 export * from "./chat-composer";
 export * from "./drop-controller";
+export * from "./key-rules";
 export * from "./types";

package/src/composer/key-rules.ts

@@ -0,0 +1,12 @@
+/**
+ * Whether Enter belongs to an input method rather than to the Composer.
+ *
+ * Both signals are honoured on their own: some Chinese input methods report only the
+ * legacy `keyCode === 229`, and either one alone means a word is still being composed.
+ */
+export function isComposingKeyEvent(event: {
+  isComposing?: boolean;
+  keyCode?: number;
+}): boolean {
+  return event.isComposing === true || event.keyCode === 229;
+}

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