跳到主要内容

可视化组件多 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 切换，流程主要分为两个步骤：

  1. 获取 Agent 列表。
  2. 切换 Agent 并更新区块的 Agent ID。

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