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

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,9 +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;
+  recoveryStatusLabel?: string;
   hasPendingSteer?: boolean;
   startedWithPending?: boolean;
   error?: unknown;
@@ -163,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,
@@ -403,16 +423,21 @@ function CamelToolRow({
   onApprove: (approvalId: string, decision: ToolApprovalDecision) => void;
   getToolApproval?: (part: unknown) => ToolApprovalView | undefined;
 }) {
-  const [open, setOpen] = useState(false);
   const approval = getToolApproval?.(part) ?? toolApprovalOf(part);
   const pendingApproval = approval && approval.approved === undefined;
   const presentation = getCamelToolPresentation(part, isActive);
+  const autoOpen = presentation.running && (
+    presentation.isSubAgent ||
+    presentation.kind === "write" ||
+    presentation.kind === "edit"
+  );
+  const [open, setOpen] = useState(autoOpen);
   const hasDetails = children != null || presentation.hasDetails;
   const title = presentation.summary;
 
   useEffect(() => {
-    if (presentation.isSubAgent && presentation.running) setOpen(true);
-  }, [presentation.isSubAgent, presentation.running]);
+    if (autoOpen) setOpen(true);
+  }, [autoOpen]);
 
   return (
     <div data-part-type={normalizedPartType(part)}>
@@ -1145,6 +1170,7 @@ function RenderAssistantPart({
 function AssistantTurn({
   turn,
   isActive,
+  keepTraceExpanded,
   hasPendingSteer,
   hasPendingApproval,
   onFork,
@@ -1156,6 +1182,7 @@ function AssistantTurn({
 }: {
   turn: CamelAssistantTurn;
   isActive: boolean;
+  keepTraceExpanded: boolean;
   hasPendingSteer: boolean;
   hasPendingApproval: boolean;
   onFork?: (messageId: string) => void | Promise<void>;
@@ -1179,7 +1206,10 @@ function AssistantTurn({
     />
   );
   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 =
@@ -1189,6 +1219,11 @@ function AssistantTurn({
   const thinkingActivity = deriveThinkingActivity(
     turn.traceParts.at(-1)?.part ?? turn.finalParts.at(-1)?.part,
   );
+  const hasRunningTool = turn.traceParts.some(
+    ({ part }) =>
+      toolNameOfPart(part) !== null &&
+      getCamelToolPresentation(part, isActive).running,
+  );
   const activeActivity = hasPendingSteer
     ? pendingSteerActivity
     : thinkingActivity;
@@ -1269,7 +1304,7 @@ function AssistantTurn({
             {turn.copyText && <ClipboardAction text={turn.copyText} />}
           </div>
         )}
-        {isActive && turn.finalParts.length === 0 && (
+        {isActive && turn.finalParts.length === 0 && !hasRunningTool && (
           <ThinkingIndicator {...activeActivity} />
         )}
       </div>
@@ -1283,8 +1318,7 @@ export function CamelChatMessages({
   finalToolNames,
   isHydrating = false,
   isRecovering = false,
-  isServerStreaming = false,
-  showActivityStatus = false,
+  recoveryStatusLabel,
   hasPendingSteer = false,
   startedWithPending = false,
   error,
@@ -1316,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;
@@ -1329,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
@@ -1339,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" />
-          {isRecovering ? "Recovering…" : "Running…"}
-        </div>
-      )}
       <div
         ref={scrollRef}
         onScroll={syncScrollButton}
@@ -1368,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 =
@@ -1386,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-turn.ts

@@ -169,11 +169,20 @@ function isTraceWork(
   if (isVisibleReasoning(part)) return true;
   const kind = resolvePartKind(part);
   if (kind === "plan") return false;
-  const toolName = toolNameOfPart(part);
-  if (toolName !== null && finalToolNames.includes(toolName)) return false;
+  if (isFinalOutputTool(part, finalToolNames)) return false;
   return TRACE_PART_KINDS.has(kind ?? "");
 }
 
+function isFinalOutputTool(
+  part: CamelPart,
+  finalToolNames: readonly string[],
+): boolean {
+  const toolName = toolNameOfPart(part);
+  return toolName !== null &&
+    (finalToolNames.includes(toolName) ||
+      resolvePartKind(part) === "suggestions");
+}
+
 function isTraceBoundary(
   part: CamelPart,
   finalToolNames: readonly string[],
@@ -226,8 +235,17 @@ export function projectCamelAssistantTurn(
     partIndex,
     part,
   }));
-  let lastTraceBoundary = -1;
+  let finalOutputBoundary = parts.length;
   for (let index = parts.length - 1; index >= 0; index -= 1) {
+    if (isFinalOutputTool(parts[index].part, finalToolNames)) {
+      finalOutputBoundary = index;
+      break;
+    }
+  }
+  let lastTraceBoundary = -1;
+  // Provider cleanup steps after final output must not pull the answer back
+  // into the collapsible work trace.
+  for (let index = finalOutputBoundary - 1; index >= 0; index -= 1) {
     if (isTraceBoundary(parts[index].part, finalToolNames)) {
       lastTraceBoundary = index;
       break;

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/message.tsx

@@ -85,13 +85,6 @@ export const MessageAction = forwardRef<HTMLButtonElement, MessageActionProps>(
 MessageAction.displayName = "MessageAction";
 
 const streamdownPlugins = { cjk, code, math, mermaid };
-const streamAnimation = {
-  animation: "fadeIn",
-  sep: "word",
-  duration: 260,
-  stagger: 14,
-} as const;
-
 export type MessageResponseProps = StreamdownProps & {
   streaming?: boolean;
   resolveUrl?: MessageUrlResolver;
@@ -146,7 +139,6 @@ export const MessageResponse = memo(
         ? {
             mode: "streaming" as const,
             isAnimating: true,
-            animated: streamAnimation,
           }
         : { mode: "static" as const })}
       {...props}

package/src/parts/plan.ts

@@ -26,8 +26,9 @@ export function planStepsOfPart(part: unknown): PlanStep[] {
     const value = recordOf(step);
     const text = typeof value.text === "string" ? value.text.trim() : "";
     if (!text) return [];
-    const status =
-      value.status === "in_progress" || value.status === "done"
+    const status = value.status === "completed"
+      ? "done"
+      : value.status === "in_progress" || value.status === "done"
         ? value.status
         : "pending";
     return [{ text, status }];

package/src/styles/index.css

@@ -2128,7 +2128,10 @@
   min-height: 120px;
   gap: 0;
   border-radius: 16px;
-  background: #1c1c1a;
+  /* 这里曾写死 #1c1c1a,于是 light 档下输入框还是近黑的。
+     表面色一律走 token:--mp-card → --card(light #fff / dark #1c1c1c)。
+     本节其余几个写死色是状态/图标强调色(琥珀、蓝),两档背景上都读得出来,不在此列。 */
+  background: var(--mp-card);
   box-shadow: none;
 }