{text},
+ tools: { Fallback: ToolCallRenderer },
+ ToolGroup: ToolGroup,
+ }}
/>`,
};
},
diff --git a/apps/docs/components/playground/controls-panel.tsx b/apps/docs/components/playground/controls-panel.tsx
index 0391843..bfefde9 100644
--- a/apps/docs/components/playground/controls-panel.tsx
+++ b/apps/docs/components/playground/controls-panel.tsx
@@ -15,6 +15,7 @@ import { ScrollToBottomControls } from "./controls/scroll-to-bottom-controls";
import { ReasoningAccordionControls } from "./controls/reasoning-accordion-controls";
import { FeedbackButtonsControls } from "./controls/feedback-buttons-controls";
import { ThreadListControls } from "./controls/thread-list-controls";
+import { ToolGroupControls } from "./controls/tool-group-controls";
type ControlsPanelProps = {
chordId: ChordId;
@@ -39,6 +40,7 @@ const controlsMap: Partial<
"reasoning-accordion": ReasoningAccordionControls,
"feedback-buttons": FeedbackButtonsControls,
"thread-list": ThreadListControls,
+ "tool-group": ToolGroupControls,
};
export function ControlsPanel({ chordId, config, onChange }: ControlsPanelProps) {
diff --git a/apps/docs/components/playground/controls/tool-group-controls.tsx b/apps/docs/components/playground/controls/tool-group-controls.tsx
new file mode 100644
index 0000000..527aaa1
--- /dev/null
+++ b/apps/docs/components/playground/controls/tool-group-controls.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import type { ChordConfig } from "@/lib/playground/types";
+import { StyleBuilder, CheckboxInput } from "./shared";
+
+export function ToolGroupControls({
+ config,
+ onChange,
+}: {
+ config: ChordConfig;
+ onChange: (c: ChordConfig) => void;
+}) {
+ return (
+
+ onChange({ ...config, defaultOpen: v })}
+ />
+ onChange({ ...config, className: v || undefined })}
+ controls={["bg", "rounded", "p"]}
+ />
+
+ onChange({ ...config, triggerClassName: v || undefined })
+ }
+ controls={["bg", "text"]}
+ />
+
+ onChange({ ...config, contentClassName: v || undefined })
+ }
+ controls={["bg", "text"]}
+ />
+
+ );
+}
diff --git a/apps/docs/components/playground/preview-panel.tsx b/apps/docs/components/playground/preview-panel.tsx
index 6aacf47..79d52b9 100644
--- a/apps/docs/components/playground/preview-panel.tsx
+++ b/apps/docs/components/playground/preview-panel.tsx
@@ -20,6 +20,7 @@ import { ScrollToBottomPreview } from "./previews/scroll-to-bottom-preview";
import { ReasoningAccordionPreview } from "./previews/reasoning-accordion-preview";
import { FeedbackButtonsPreview } from "./previews/feedback-buttons-preview";
import { ThreadListPreview } from "./previews/thread-list-preview";
+import { ToolGroupPreview } from "./previews/tool-group-preview";
type PreviewPanelProps = {
chordId: ChordId;
@@ -42,6 +43,7 @@ const previewMap: Record> = {
"reasoning-accordion": ReasoningAccordionPreview,
"feedback-buttons": FeedbackButtonsPreview,
"thread-list": ThreadListPreview,
+ "tool-group": ToolGroupPreview,
};
export function PreviewPanel({ chordId, config }: PreviewPanelProps) {
diff --git a/apps/docs/components/playground/previews/tool-group-preview.tsx b/apps/docs/components/playground/previews/tool-group-preview.tsx
new file mode 100644
index 0000000..7e122c5
--- /dev/null
+++ b/apps/docs/components/playground/previews/tool-group-preview.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import {
+ AssistantRuntimeProvider,
+ ThreadPrimitive,
+ MessagePrimitive,
+ ComposerPrimitive,
+ useLocalRuntime,
+} from "@assistant-ui/react";
+import {
+ ToolCallRenderer,
+ ToolGroup,
+ ComposerActionStatus,
+} from "@assistant-ui/chords";
+import type { ChordConfig } from "@/lib/playground/types";
+import type { ChatModelAdapter } from "@assistant-ui/react";
+import { useRef } from "react";
+
+const toolAdapter: ChatModelAdapter = {
+ async *run({ abortSignal }) {
+ const id1 = `call_${Date.now()}_1`;
+ const id2 = `call_${Date.now()}_2`;
+
+ const tc1 = {
+ type: "tool-call" as const,
+ toolCallId: id1,
+ toolName: "search",
+ args: { query: "hello" },
+ argsText: JSON.stringify({ query: "hello" }),
+ };
+ const tc2 = {
+ type: "tool-call" as const,
+ toolCallId: id2,
+ toolName: "fetch",
+ args: { url: "https://example.com" },
+ argsText: JSON.stringify({ url: "https://example.com" }),
+ };
+
+ yield { content: [tc1] };
+ yield { content: [tc1, tc2] };
+
+ await new Promise((r) => setTimeout(r, 1200));
+ if (abortSignal.aborted) return;
+
+ yield {
+ content: [
+ { ...tc1, result: { hits: 42 } },
+ { ...tc2, result: { status: 200 } },
+ {
+ type: "text" as const,
+ text: "Found 42 results. The page returned status 200.",
+ },
+ ],
+ };
+ },
+};
+
+export function ToolGroupPreview({ config }: { config: ChordConfig }) {
+ const adapter = useRef(toolAdapter);
+ const runtime = useLocalRuntime(adapter.current);
+
+ return (
+
+
+
+
+
+ (
+
+
+
+
+
+ ),
+ AssistantMessage: () => (
+
+
+ A
+
+
+ {text},
+ tools: { Fallback: ToolCallRenderer },
+ ToolGroup: (props) => (
+
+ ),
+ }}
+ />
+
+
+ ),
+ }}
+ />
+
+
+
+
+ Run tool calls
+
+
+
+
+
+
+ {open && (
+
+ )}
+
tool 1
+ tool 2
+ ,
+ );
+ expect(container.firstChild).toHaveClass(
+ ...DEFAULT_ROOT_CLASSNAME.split(" "),
+ );
+ });
+
+ it("renders with custom class", () => {
+ const { container } = render(
+
+ tool
+ ,
+ );
+ expect(container.firstChild).toHaveClass("custom");
+ });
+
+ it("shows correct count label for multiple tools", () => {
+ render(
+
+ tool
+ ,
+ );
+ expect(screen.getByRole("button")).toHaveTextContent("3 tool calls");
+ });
+
+ it("shows correct count label for single tool", () => {
+ render(
+
+ tool
+ ,
+ );
+ expect(screen.getByRole("button")).toHaveTextContent("1 tool call");
+ });
+
+ it("uses custom label function", () => {
+ render(
+ `${n} functions`}
+ >
+ tool
+ ,
+ );
+ expect(screen.getByRole("button")).toHaveTextContent("2 functions");
+ });
+
+ it("children hidden by default", () => {
+ render(
+
+ tool
+ ,
+ );
+ expect(screen.queryByTestId("child")).not.toBeInTheDocument();
+ });
+
+ it("children visible when defaultOpen", () => {
+ render(
+
+ tool
+ ,
+ );
+ expect(screen.getByTestId("child")).toBeInTheDocument();
+ });
+
+ it("toggles on click", () => {
+ render(
+
+ tool
+ ,
+ );
+ expect(screen.queryByTestId("child")).not.toBeInTheDocument();
+ fireEvent.click(screen.getByRole("button"));
+ expect(screen.getByTestId("child")).toBeInTheDocument();
+ fireEvent.click(screen.getByRole("button"));
+ expect(screen.queryByTestId("child")).not.toBeInTheDocument();
+ });
+
+ it("has aria-expanded attribute", () => {
+ render(
+
+ tool
+ ,
+ );
+ const btn = screen.getByRole("button");
+ expect(btn).toHaveAttribute("aria-expanded", "false");
+ fireEvent.click(btn);
+ expect(btn).toHaveAttribute("aria-expanded", "true");
+ });
+
+ it("uses default trigger class", () => {
+ render(
+
+ tool
+ ,
+ );
+ expect(screen.getByRole("button")).toHaveClass(
+ ...DEFAULT_TRIGGER_CLASSNAME.split(" "),
+ );
+ });
+
+ it("renders custom trigger via renderTrigger", () => {
+ render(
+ (
+ {count} tools
+ )}
+ >
+ tool
+ ,
+ );
+ expect(screen.getByTestId("custom-trigger")).toHaveTextContent("2 tools");
+ });
+
+ it("uses custom triggerClassName", () => {
+ render(
+
+ tool
+ ,
+ );
+ expect(screen.getByRole("button")).toHaveClass("custom-trigger");
+ });
+
+ it("uses custom contentClassName", () => {
+ render(
+
+ tool
+ ,
+ );
+ // content div wraps an inner flex container that holds children
+ const content = screen.getByTestId("child").parentElement!.parentElement;
+ expect(content).toHaveClass("custom-content");
+ });
+
+ it("uses default content class when open", () => {
+ render(
+
+ tool
+ ,
+ );
+ const content = screen.getByTestId("child").parentElement!.parentElement;
+ expect(content).toHaveClass(...DEFAULT_CONTENT_CLASSNAME.split(" "));
+ });
+
+ it("renders chevron icon", () => {
+ render(
+
+ tool
+ ,
+ );
+ const btn = screen.getByRole("button");
+ expect(btn.querySelector("svg")).toBeInTheDocument();
+ });
+});
diff --git a/packages/core/src/primitives/tool-group/defaults.ts b/packages/core/src/primitives/tool-group/defaults.ts
new file mode 100644
index 0000000..3d4fddb
--- /dev/null
+++ b/packages/core/src/primitives/tool-group/defaults.ts
@@ -0,0 +1,13 @@
+export const DEFAULT_ROOT_CLASSNAME =
+ "w-full rounded-lg border border-zinc-200 dark:border-zinc-800";
+
+export const DEFAULT_TRIGGER_CLASSNAME =
+ "flex w-full items-center gap-2 px-4 py-3 text-sm font-medium transition-colors";
+
+export const DEFAULT_CONTENT_CLASSNAME =
+ "border-t border-zinc-200 px-4 pt-3 pb-3 dark:border-zinc-800";
+
+export const DEFAULT_CHEVRON_CLASSNAME =
+ "size-4 shrink-0 transition-transform duration-200 ease-out";
+
+export const DEFAULT_SPINNER_CLASSNAME = "size-4 shrink-0 animate-spin";
diff --git a/packages/core/src/primitives/tool-group/index.ts b/packages/core/src/primitives/tool-group/index.ts
new file mode 100644
index 0000000..0145775
--- /dev/null
+++ b/packages/core/src/primitives/tool-group/index.ts
@@ -0,0 +1 @@
+export { ToolGroup, type ToolGroupProps } from "./ToolGroup";