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

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

@@ -71,9 +71,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 +161,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 +418,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 +1165,7 @@ function RenderAssistantPart({
 function AssistantTurn({
   turn,
   isActive,
+  keepTraceExpanded,
   hasPendingSteer,
   hasPendingApproval,
   onFork,
@@ -1156,6 +1177,7 @@ function AssistantTurn({
 }: {
   turn: CamelAssistantTurn;
   isActive: boolean;
+  keepTraceExpanded: boolean;
   hasPendingSteer: boolean;
   hasPendingApproval: boolean;
   onFork?: (messageId: string) => void | Promise<void>;
@@ -1179,7 +1201,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 +1214,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 +1299,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 +1313,7 @@ export function CamelChatMessages({
   finalToolNames,
   isHydrating = false,
   isRecovering = false,
-  isServerStreaming = false,
-  showActivityStatus = false,
+  recoveryStatusLabel,
   hasPendingSteer = false,
   startedWithPending = false,
   error,
@@ -1316,6 +1345,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 +1362,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 +1372,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 +1392,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 +1413,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-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/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 }];