---
tagName: ai-portal.action-buttons
displayName: WrappedAiPortalActionButtons
description: 动作按钮组，支持选中状态切换，用于聊天框的功能入口。
category: ai-portal
source: "@next-bricks/ai-portal"
---

# WrappedAiPortalActionButtons

> 动作按钮组，支持选中状态切换，用于聊天框的功能入口。

## 导入

```tsx
import { WrappedAiPortalActionButtons } from "@easyops/wrapped-components";
```

## Props

| 属性      | 类型                          | 必填 | 默认值 | 说明                                                       |
| --------- | ----------------------------- | ---- | ------ | ---------------------------------------------------------- |
| items     | `ActionItem[] \| undefined`   | 否   | -      | 按钮列表配置，每项包含文本、唯一键值及可选图标             |
| activeKey | `string \| null \| undefined` | 否   | -      | 当前选中按钮的键值，选中后显示删除图标，再次点击可取消选中 |

## Events

| 事件     | detail                                                                                                                          | 说明                         |
| -------- | ------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
| onChange | `ActionItem \| null` — { key: 按钮键值, text: 按钮文本, icon: 按钮图标 } \| null — 选中时为选中的 ActionItem，取消选中时为 null | 选中或取消选中动作按钮时触发 |

## Examples

### Basic

展示动作按钮组的基本用法，点击按钮切换选中状态。

```tsx
<WrappedAiPortalChatBox>
  <WrappedAiPortalActionButtons
    slot="actions"
    items={[
      {
        key: "think",
        text: "深度思考",
        icon: { lib: "antd", theme: "outlined", icon: "reddit" },
      },
      {
        key: "networking",
        text: "联网搜索",
        icon: { lib: "antd", theme: "outlined", icon: "global" },
      },
    ]}
    onChange={(e) => console.log(e.detail)}
  />
</WrappedAiPortalChatBox>
```

### With activeKey

通过 `activeKey` 属性预设选中的按钮。

```tsx
<WrappedAiPortalActionButtons
  activeKey="think"
  items={[
    {
      key: "think",
      text: "深度思考",
      icon: { lib: "antd", theme: "outlined", icon: "reddit" },
    },
    {
      key: "networking",
      text: "联网搜索",
      icon: { lib: "antd", theme: "outlined", icon: "global" },
    },
  ]}
  onChange={(e) => console.log(e.detail)}
/>
```