feat(copilot): collapse repeated tool calls and fix stream stuck on completion

autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatMessagesContainer/ChatMessagesContainer.tsx

@@ -5,15 +5,19 @@ import {
 } from "@/components/ai-elements/conversation";
 import { Message, MessageContent } from "@/components/ai-elements/message";
 import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
-import { FileUIPart, UIDataTypes, UIMessage, UITools } from "ai";
+import { FileUIPart, ToolUIPart, UIDataTypes, UIMessage, UITools } from "ai";
 import { TOOL_PART_PREFIX } from "../JobStatsBar/constants";
 import { TurnStatsBar } from "../JobStatsBar/TurnStatsBar";
 import { parseSpecialMarkers } from "./helpers";
 import { AssistantMessageActions } from "./components/AssistantMessageActions";
+import { CollapsedToolGroup } from "./components/CollapsedToolGroup";
 import { MessageAttachments } from "./components/MessageAttachments";
 import { MessagePartRenderer } from "./components/MessagePartRenderer";
+import { ReasoningCollapse } from "./components/ReasoningCollapse";
 import { ThinkingIndicator } from "./components/ThinkingIndicator";
 
+type MessagePart = UIMessage<unknown, UIDataTypes, UITools>["parts"][number];
+
 interface Props {
   messages: UIMessage<unknown, UIDataTypes, UITools>[];
   status: string;
@@ -23,6 +27,139 @@ interface Props {
   sessionID?: string | null;
 }
 
+function isCompletedToolPart(part: MessagePart): part is ToolUIPart {
+  return (
+    part.type.startsWith("tool-") &&
+    "state" in part &&
+    (part.state === "output-available" || part.state === "output-error")
+  );
+}
+
+type RenderSegment =
+  | { kind: "part"; part: MessagePart; index: number }
+  | { kind: "collapsed-group"; parts: ToolUIPart[] };
+
+// Tool types that have custom renderers and should NOT be collapsed
+const CUSTOM_TOOL_TYPES = new Set([
+  "tool-find_block",
+  "tool-find_agent",
+  "tool-find_library_agent",
+  "tool-search_docs",
+  "tool-get_doc_page",
+  "tool-run_block",
+  "tool-run_mcp_tool",
+  "tool-run_agent",
+  "tool-schedule_agent",
+  "tool-create_agent",
+  "tool-edit_agent",
+  "tool-view_agent_output",
+  "tool-search_feature_requests",
+  "tool-create_feature_request",
+]);
+
+/**
+ * Groups consecutive completed generic tool parts into collapsed segments.
+ * Non-generic tools (those with custom renderers) and active/streaming tools
+ * are left as individual parts.
+ */
+function buildRenderSegments(
+  parts: MessagePart[],
+  baseIndex = 0,
+): RenderSegment[] {
+  const segments: RenderSegment[] = [];
+  let pendingGroup: Array<{ part: ToolUIPart; index: number }> | null = null;
+
+  function flushGroup() {
+    if (!pendingGroup) return;
+    if (pendingGroup.length >= 2) {
+      segments.push({
+        kind: "collapsed-group",
+        parts: pendingGroup.map((p) => p.part),
+      });
+    } else {
+      for (const p of pendingGroup) {
+        segments.push({ kind: "part", part: p.part, index: p.index });
+      }
+    }
+    pendingGroup = null;
+  }
+
+  parts.forEach((part, i) => {
+    const absoluteIndex = baseIndex + i;
+    const isGenericCompletedTool =
+      isCompletedToolPart(part) && !CUSTOM_TOOL_TYPES.has(part.type);
+
+    if (isGenericCompletedTool) {
+      if (!pendingGroup) pendingGroup = [];
+      pendingGroup.push({ part: part as ToolUIPart, index: absoluteIndex });
+    } else {
+      flushGroup();
+      segments.push({ kind: "part", part, index: absoluteIndex });
+    }
+  });
+
+  flushGroup();
+  return segments;
+}
+
+/**
+ * For finalized assistant messages, split parts into "reasoning" (intermediate
+ * text + tools before the final response) and "response" (final text after the
+ * last tool). If there are no tools, everything is response.
+ */
+function splitReasoningAndResponse(parts: MessagePart[]): {
+  reasoning: MessagePart[];
+  response: MessagePart[];
+} {
+  // Find the index of the last tool part
+  let lastToolIndex = -1;
+  for (let i = parts.length - 1; i >= 0; i--) {
+    if (parts[i].type.startsWith("tool-")) {
+      lastToolIndex = i;
+      break;
+    }
+  }
+
+  // No tools → everything is response
+  if (lastToolIndex === -1) {
+    return { reasoning: [], response: parts };
+  }
+
+  // Check if there's any text after the last tool
+  const hasResponseAfterTools = parts
+    .slice(lastToolIndex + 1)
+    .some((p) => p.type === "text");
+
+  if (!hasResponseAfterTools) {
+    // No final text response → don't collapse anything
+    return { reasoning: [], response: parts };
+  }
+
+  return {
+    reasoning: parts.slice(0, lastToolIndex + 1),
+    response: parts.slice(lastToolIndex + 1),
+  };
+}
+
+function renderSegments(
+  segments: RenderSegment[],
+  messageID: string,
+): React.ReactNode[] {
+  return segments.map((seg, segIdx) => {
+    if (seg.kind === "collapsed-group") {
+      return <CollapsedToolGroup key={`group-${segIdx}`} parts={seg.parts} />;
+    }
+    return (
+      <MessagePartRenderer
+        key={`${messageID}-${seg.index}`}
+        part={seg.part}
+        messageID={messageID}
+        partIndex={seg.index}
+      />
+    );
+  });
+}
+
 /** Collect all messages belonging to a turn: the user message + every
  *  assistant message up to (but not including) the next user message. */
 function getTurnMessages(
@@ -119,6 +256,24 @@ export function ChatMessagesContainer({
             (p): p is FileUIPart => p.type === "file",
           );
 
+          // For finalized assistant messages, split into reasoning + response.
+          // During streaming, show everything normally with tool collapsing.
+          const isFinalized =
+            message.role === "assistant" && !isCurrentlyStreaming;
+          const { reasoning, response } = isFinalized
+            ? splitReasoningAndResponse(message.parts)
+            : { reasoning: [] as MessagePart[], response: message.parts };
+          const hasReasoning = reasoning.length > 0;
+
+          const responseStartIndex = message.parts.length - response.length;
+          const responseSegments =
+            message.role === "assistant"
+              ? buildRenderSegments(response, responseStartIndex)
+              : null;
+          const reasoningSegments = hasReasoning
+            ? buildRenderSegments(reasoning, 0)
+            : null;
+
           return (
             <Message from={message.role} key={message.id}>
               <MessageContent
@@ -128,14 +283,21 @@ export function ChatMessagesContainer({
                   "group-[.is-assistant]:bg-transparent group-[.is-assistant]:text-slate-900"
                 }
               >
-                {message.parts.map((part, i) => (
-                  <MessagePartRenderer
-                    key={`${message.id}-${i}`}
-                    part={part}
-                    messageID={message.id}
-                    partIndex={i}
-                  />
-                ))}
+                {hasReasoning && reasoningSegments && (
+                  <ReasoningCollapse>
+                    {renderSegments(reasoningSegments, message.id)}
+                  </ReasoningCollapse>
+                )}
+                {responseSegments
+                  ? renderSegments(responseSegments, message.id)
+                  : message.parts.map((part, i) => (
+                      <MessagePartRenderer
+                        key={`${message.id}-${i}`}
+                        part={part}
+                        messageID={message.id}
+                        partIndex={i}
+                      />
+                    ))}
                 {isLastInTurn && !isCurrentlyStreaming && (
                   <TurnStatsBar
                     turnMessages={getTurnMessages(messages, messageIndex)}

autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatMessagesContainer/components/CollapsedToolGroup.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { useId, useState } from "react";
+import {
+  ArrowsClockwiseIcon,
+  CaretRightIcon,
+  CheckCircleIcon,
+  FileIcon,
+  FilesIcon,
+  GearIcon,
+  GlobeIcon,
+  ListChecksIcon,
+  MagnifyingGlassIcon,
+  MonitorIcon,
+  PencilSimpleIcon,
+  TerminalIcon,
+  TrashIcon,
+  WarningDiamondIcon,
+} from "@phosphor-icons/react";
+import type { ToolUIPart } from "ai";
+import {
+  type ToolCategory,
+  extractToolName,
+  getAnimationText,
+  getToolCategory,
+} from "../../../tools/GenericTool/helpers";
+
+interface Props {
+  parts: ToolUIPart[];
+}
+
+/** Category icon matching GenericTool's ToolIcon for completed states. */
+function EntryIcon({
+  category,
+  isError,
+}: {
+  category: ToolCategory;
+  isError: boolean;
+}) {
+  if (isError) {
+    return (
+      <WarningDiamondIcon size={14} weight="regular" className="text-red-500" />
+    );
+  }
+
+  const iconClass = "text-green-500";
+  switch (category) {
+    case "bash":
+      return <TerminalIcon size={14} weight="regular" className={iconClass} />;
+    case "web":
+      return <GlobeIcon size={14} weight="regular" className={iconClass} />;
+    case "browser":
+      return <MonitorIcon size={14} weight="regular" className={iconClass} />;
+    case "file-read":
+    case "file-write":
+      return <FileIcon size={14} weight="regular" className={iconClass} />;
+    case "file-delete":
+      return <TrashIcon size={14} weight="regular" className={iconClass} />;
+    case "file-list":
+      return <FilesIcon size={14} weight="regular" className={iconClass} />;
+    case "search":
+      return (
+        <MagnifyingGlassIcon size={14} weight="regular" className={iconClass} />
+      );
+    case "edit":
+      return (
+        <PencilSimpleIcon size={14} weight="regular" className={iconClass} />
+      );
+    case "todo":
+      return (
+        <ListChecksIcon size={14} weight="regular" className={iconClass} />
+      );
+    case "compaction":
+      return (
+        <ArrowsClockwiseIcon size={14} weight="regular" className={iconClass} />
+      );
+    default:
+      return <GearIcon size={14} weight="regular" className={iconClass} />;
+  }
+}
+
+export function CollapsedToolGroup({ parts }: Props) {
+  const [expanded, setExpanded] = useState(false);
+  const panelId = useId();
+
+  const errorCount = parts.filter((p) => p.state === "output-error").length;
+  const label =
+    errorCount > 0
+      ? `${parts.length} tool calls (${errorCount} failed)`
+      : `${parts.length} tool calls completed`;
+
+  return (
+    <div className="py-1">
+      <button
+        type="button"
+        onClick={() => setExpanded(!expanded)}
+        aria-expanded={expanded}
+        aria-controls={panelId}
+        className="flex items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
+      >
+        <CaretRightIcon
+          size={12}
+          weight="bold"
+          className={
+            "transition-transform duration-150 " + (expanded ? "rotate-90" : "")
+          }
+        />
+        {errorCount > 0 ? (
+          <WarningDiamondIcon
+            size={14}
+            weight="regular"
+            className="text-red-500"
+          />
+        ) : (
+          <CheckCircleIcon
+            size={14}
+            weight="regular"
+            className="text-green-500"
+          />
+        )}
+        <span>{label}</span>
+      </button>
+
+      {expanded && (
+        <div
+          id={panelId}
+          className="ml-5 mt-1 space-y-0.5 border-l border-neutral-200 pl-3"
+        >
+          {parts.map((part) => {
+            const toolName = extractToolName(part);
+            const category = getToolCategory(toolName);
+            const text = getAnimationText(part, category);
+            const isError = part.state === "output-error";
+
+            return (
+              <div
+                key={part.toolCallId}
+                className={
+                  "flex items-center gap-1.5 text-xs " +
+                  (isError ? "text-red-500" : "text-muted-foreground")
+                }
+              >
+                <EntryIcon category={category} isError={isError} />
+                <span>{text}</span>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}