可视化组件多 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。

更多自定义样式和业务逻辑可根据需求自行调整。

可视化组件多 Agent 示例

新建 Agent 列表​

修改区块配置​

添加下拉单选组件​

引用组件​

修改配置​

绑定事件​

拓展/优化​

样式优化​

动态数据​

总结​