ToolGroup

ToolGroup 用于将连续的多个工具调用打包展示，支持折叠展开和动画效果。

引入

import {
  ToolGroup,
  ToolGroupRoot,
  ToolGroupTrigger,
  ToolGroupContent,
  toolGroupVariants,
} from "aui-components";

基本用法

组合用法（Thread 内部使用的模式）：

<ToolGroupRoot variant="ghost">
  <ToolGroupTrigger
    count={3} // 工具调用数量
    active={false} // 是否在执行中
  />
  <ToolGroupContent>
    {/* 工具调用子组件 */}
    <ToolFallback toolName="search" status={{ type: "complete" }} />
    <ToolFallback toolName="read_file" status={{ type: "complete" }} />
    <ToolFallback toolName="analyze" status={{ type: "running" }} />
  </ToolGroupContent>
</ToolGroupRoot>

在 GroupedParts 中使用：

<MessagePrimitive.GroupedParts
  groupBy={groupPartByType({
    "tool-call": ["group-chainOfThought", "group-tool"],
  })}
>
  {({ part, children }) => {
    switch (part.type) {
      case "group-tool":
        return (
          <ToolGroupRoot variant="ghost">
            <ToolGroupTrigger
              count={part.indices.length}
              active={part.status.type === "running"}
            />
            <ToolGroupContent>{children}</ToolGroupContent>
          </ToolGroupRoot>
        );
    }
  }}
</MessagePrimitive.GroupedParts>

ToolGroupRoot Props

该组件没有公开的 Props。

export type ToolGroupRootProps = {
  /** 控制展开状态（受控模式） */
  open?: boolean;
  /** 展开状态变化回调 */
  onOpenChange?: (open: boolean) => void;
  /** 默认展开状态 */
  defaultOpen?: boolean;
  /** 视觉变体 */
  variant?: "outline" | "ghost" | "muted";
};

变体

toolGroupVariants

变体	样式	适用场景
`outline`	`rounded-lg border py-3`	默认，有边框和间距
`ghost`	无边框和背景	简洁的列表式展示
`muted`	`border-muted-foreground/30 bg-muted/30 rounded-lg border py-3`	柔和背景

<ToolGroupRoot variant="outline">...</ToolGroupRoot>
<ToolGroupRoot variant="ghost">...</ToolGroupRoot>
<ToolGroupRoot variant="muted">...</ToolGroupRoot>

ToolGroupTrigger

<ToolGroupTrigger
  count={3} // 工具调用数量，显示为 "3 tool calls"
  active={false} // 是否执行中，显示 LoaderIcon 动画
/>

count={1} 显示 "1 tool call"，复数显示 "X tool calls"
active={true} 时显示旋转 Loader 图标 + Shimmer 闪烁效果
ChevronDownIcon 展开状态自动旋转

ToolGroupContent

内容容器，包含动画效果：

打开动画：animate-collapsible-down + fade-in + blur-in + slide-in-from-top-1
关闭动画：animate-collapsible-up + fade-out + blur-out + slide-out-to-top-1
子元素交错延迟动画：第 2 个 40ms，第 3 个 80ms，第 4 个 120ms，第 5+ 个 160ms
动画时长：200ms（--animation-duration CSS 变量）

ToolGroup 复合组件（已废弃）

// 旧用法（不推荐）
<MessagePrimitive.Parts
  components={{ ToolGroup: ... }}
/>

// 新用法（推荐）
<MessagePrimitive.GroupedParts groupBy={...}>
  {({ part, children }) => {
    // 手动组合 ToolGroupRoot + ToolGroupTrigger + ToolGroupContent
  }}
</MessagePrimitive.GroupedParts>

ToolGroup

引入

基本用法

ToolGroupRoot Props

变体

toolGroupVariants

ToolGroupTrigger

ToolGroupContent

ToolGroup 复合组件（已废弃）

相关链接

On this page