可视化组件多 Agent 示例
Agent UI 区块基础用法参见 Agent UI 微搭可视化组件。
下面示例如何基于 Agent UI 实现多 Agent 自由切换。
新建 Agent 列表
首先将 Agent UI 区块添加到当前页面。
在左下角代码区新建 agentList 变量，用以存储 Agent 列表。修改变量类型为数组，并输入默认值。默认值中的 id 和 name 替换为自己的 agent 信息，可根据需求调整数量。
修改区块配置
将区块的默认 Agent ID 修改为 $w.page.dataset.state.agentList[0].id，即默认使用第一个 Agent。
添加下拉单选组件
引用组件
删除原来的顶栏标题，在右侧 添加-组件 中找到下拉单选组件，添加到原来标题的位置。
修改配置
在左侧选中下拉单选组件，在右侧配置区绑定之前定义的 agentList 变量，修改 选项名称 和 选项值，并修改 选中值 为 $w.page.dataset.state.agentList[0].id，即默认选中第一个 agent。可根据需求调整其他配置，详细用法参见 下拉单选组件。
绑定事件
点击右下方 值改变，执行动作选择 JavaScript 代码。
输入下方代码，注意此处的 container22 需要改为自己的区块组件 ID，右键点击组件，可复制组件 ID。
({ event }) => {
// 此处 container22 需要改为你自己区块的组件 id
$w.container22.data.bot.botId = event.detail.value;
};
此时，点击下拉单选组件，即可选择不同 Agent 自由切换。
拓展/优化
样式优化
按照上面的步骤完成后，标题栏并未居中对齐。这是因为下拉单选组件使用了 input 标签渲染选项，而 input 标签不会根据内容自适应宽度，导致组件的实际宽度和文本宽度不一致。
该问题无法直接通过 width: auto 解决，需要用一个占位元素撑开父盒子的宽度，而后将下拉单选组件宽度设置 100%，并通过定位覆盖占位元素。可参考如下思路：
<div style="display: flex;">
<div style="position: relative;">
<!-- 占位元素 -->
<div style="visibility: hidden;">这是一段文本</div>
<!-- input -->
<input
style="position: absolute; top: 0; left: 0; width: 100%;"
value="这是一段文本"
/>
</div>
</div>
示例使用下拉选择进行 agent 切换，实际使用可根据需求改为其他形式，如菜单列表、侧边栏等。
动态数据
上面的示例中，agentList 及每一项的 id 和 name 是固定不变的，这意味着每次更新 Agent 名称后，都要手动修改变量。
要避免该问题，可以仅记录每个 Agent 的 ID，在每次进入页面后，手动查询 Agent 信息列表。
// 示例代码
async () => {
const ids = [
'botid-1',
'botid-2',
]
const agentList = await Promise.all(
ids.map((botId) => $w.app.ai.bot.get({ botId })),
)
if (agentList.some((item) => !!item.code)) {
console.log('获取失败', agentList)
return
}
console.log('获取成功', agentList)
}
同样的，如果想要在后台管理维护可用的 Agent 列表，可以通过自定义云函数获取。
异步获取数据的话，在请求完成之前，agentList 为空数组，此时 Agent UI 会报错缺少 Agent ID，要防止报错，可以给 Agent UI 添加条件渲染：
总结
要基于 Agent UI 实现多 Agent 切换，流程主要分为两个步骤：
- 获取 Agent 列表。
- 切换 Agent 并更新区块的 Agent ID。
更多自定义样式和业务逻辑可根据需求自行调整。