tool call grouping

web/src/components/chat/ToolCallsGroup.tsx

@@ -1,51 +1,98 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
-import { LuChevronDown, LuChevronRight } from "react-icons/lu";
-import { ToolCallBubble } from "@/components/chat/ToolCallBubble";
+import { LuChevronsUpDown } from "react-icons/lu";
 import type { ToolCall } from "@/types/chat";
 
 type ToolCallsGroupProps = {
   toolCalls: ToolCall[];
 };
 
+function normalizeName(name: string): string {
+  return name
+    .replace(/_/g, " ")
+    .split(" ")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join(" ");
+}
+
 export function ToolCallsGroup({ toolCalls }: ToolCallsGroupProps) {
-  const { t } = useTranslation(["views/chat"]);
-  const [open, setOpen] = useState(false);
+  const grouped = useMemo(() => {
+    const map = new Map<string, ToolCall[]>();
+    for (const tc of toolCalls) {
+      const existing = map.get(tc.name);
+      if (existing) {
+        existing.push(tc);
+      } else {
+        map.set(tc.name, [tc]);
+      }
+    }
+    return map;
+  }, [toolCalls]);
 
   if (toolCalls.length === 0) return null;
 
+  return (
+    <div className="flex flex-col items-start gap-2">
+      {[...grouped.entries()].map(([name, calls]) => (
+        <ToolCallRow key={name} name={name} calls={calls} />
+      ))}
+    </div>
+  );
+}
+
+type ToolCallRowProps = {
+  name: string;
+  calls: ToolCall[];
+};
+
+function ToolCallRow({ name, calls }: ToolCallRowProps) {
+  const { t } = useTranslation(["views/chat"]);
+  const [open, setOpen] = useState(false);
+  const displayName = normalizeName(name);
+  const label =
+    calls.length > 1 ? `${displayName} (\u00d7${calls.length})` : displayName;
+
   return (
     <Collapsible open={open} onOpenChange={setOpen}>
-      <CollapsibleTrigger className="flex items-center gap-1 rounded-md px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-muted/50">
-        {open ? (
-          <LuChevronDown className="size-3" />
-        ) : (
-          <LuChevronRight className="size-3" />
-        )}
-        <span>
-          {open ? t("hideTools") : t("showTools", { count: toolCalls.length })}
-        </span>
+      <CollapsibleTrigger className="flex items-center gap-3 rounded-xl bg-muted px-4 py-3 text-sm text-secondary-foreground transition-colors hover:bg-muted/80">
+        <span className="font-medium">{label}</span>
+        <LuChevronsUpDown className="size-4 shrink-0 text-muted-foreground" />
       </CollapsibleTrigger>
       <CollapsibleContent>
-        <div className="mt-1 flex flex-col gap-2">
-          {toolCalls.map((tc, tcIdx) => (
-            <div key={tcIdx} className="flex flex-col gap-2">
-              <ToolCallBubble
-                name={tc.name}
-                arguments={tc.arguments}
-                side="left"
-              />
-              {tc.response && (
-                <ToolCallBubble
-                  name={tc.name}
-                  response={tc.response}
-                  side="right"
-                />
+        <div className="mt-1 space-y-3 rounded-xl bg-muted/40 px-4 py-3">
+          {calls.map((tc, idx) => (
+            <div
+              key={idx}
+              className={
+                calls.length > 1
+                  ? "space-y-1 border-l-2 border-border pl-3"
+                  : "space-y-1"
+              }
+            >
+              {tc.arguments && Object.keys(tc.arguments).length > 0 && (
+                <div className="text-xs">
+                  <div className="font-medium text-muted-foreground">
+                    {t("arguments")}
+                  </div>
+                  <pre className="scrollbar-container mt-1 max-h-32 overflow-auto whitespace-pre-wrap break-words rounded bg-background/50 p-2 text-[10px]">
+                    {JSON.stringify(tc.arguments, null, 2)}
+                  </pre>
+                </div>
+              )}
+              {tc.response && tc.response !== "" && (
+                <div className="text-xs">
+                  <div className="font-medium text-muted-foreground">
+                    {t("response")}
+                  </div>
+                  <pre className="scrollbar-container mt-1 max-h-32 overflow-auto whitespace-pre-wrap break-words rounded bg-background/50 p-2 text-[10px]">
+                    {tc.response}
+                  </pre>
+                </div>
               )}
             </div>
           ))}