# agent-button

场景化button组件，支持开发者拉起智能体。

**起始版本：** 2.0.3

**属性：**

|名称|类型|必填|描述|
|:-------------------|:-------|:-|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------|
|agentId|string|是|Agent ID，Agent的唯一标识，[创建智能体](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-agent#section524618504324)时获取。智能体创建成功后，可在智能体配置页面的网址链接中获取。长度限制1~64位字符。|
|binderror|function|否|拉起智能体对话框发生错误时的回调，event.detail = { errCode, errMsg }。|
|bindAgentDialogState|function|否|智能体对话框打开或者关闭时的状态回调，event.detail = { code }。 - 当智能体对话框打开时，code值返回：'opened'； - 当智能体对话框关闭时，code值返回：'closed'。|
|options|Object|否|指定智能体的样式。详见[options说明](#options说明)。|

## options说明

|名称|类型|默认值|必填|描述|
|:---------|:-----|:---------------------------------------------------|:-|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|buttonType|string|title属性为空或不传时默认值为'circle'。 title属性不为空时默认值为'capsule'。|否|按钮的样式类型，有如下3种： -'circle'：圆形按钮； -'capsule'：胶囊按钮（圆角默认高度为一半）； -'icon_above_title'：图标与标题为上下结构的胶囊按钮。 **依赖关系：** HarmonyOS SDK版本≥6.0.1(21)且ROM版本≥6.0.1 在低于此版本上指定此类型时，按照'capsule'类型显示按钮。 **起始版本：** 2.0.3|
|title|string|-|否|agent-button组件的标题。buttonType按钮类型为'circle'时不体现，宽度超过8个中文字符会进行省略。|
|queryText|string|-|否|拉起智能体对话框的初始查询文本。|

**示例：**

hxml文件：

```html
<view>
  <!-- 圆形按钮 -->
  <agent-button
    agent-id="{{ agentId }}"
    binderror="onError"
    bindAgentDialogState="onDialogState"
    options="{{ circleButtonOptions }}">
  </agent-button>

  <!-- 胶囊按钮 -->
  <agent-button
    agent-id="{{ agentId }}"
    binderror="onError"
    bindAgentDialogState="onDialogState"
    options="{{ capsuleButtonOptions }}">
  </agent-button>

  <!-- 图标与标题为上下结构的胶囊按钮 -->
  <agent-button
    agent-id="{{ agentId }}"
    binderror="onError"
    bindAgentDialogState="onDialogState"
    options="{{ iconAboveTitleButtonOptions }}">
  </agent-button>
</view>
```

js文件：

```js
Page({
  data: {
    agentId: 'agent052deadb85b84255b68a3e2fa7ecb9f1', // 此处为样例，请开发者替换为可用的Agent ID
    circleButtonOptions: {
      buttonType: 'circle',
    },
    capsuleButtonOptions: {
      title: '智能助手'
    },
    iconAboveTitleButtonOptions: {
      buttonType: 'icon_above_title',
      title: '智能助手',
      queryText: '请帮我解决问题'
    }
  },
  onError(event) {
    console.error('onError callback triggered', event.detail);
  },
  onDialogState(event) {
    console.info('onDialogState callback triggered, dialog state is: ', event.detail);
  }
});
```