如何自定义Twilio Flex UI账户菜单并按工作者属性过滤活动状态

需求说明 #

原本Twilio Flex UI账户菜单中的所有活动（在线、离线等状态）对所有工作者可见，现需根据工作者的自定义属性（如角色、部门等），过滤出该工作者可查看和切换的活动选项。

实现步骤与代码示例 #

通过Flex插件自定义逻辑，拦截活动列表的渲染并进行过滤：

1. 获取当前工作者属性：在Flex初始化时获取当前登录工作者的自定义属性
2. 编写过滤逻辑：根据工作者属性筛选允许的活动
3. 替换默认组件：将过滤后的活动列表注入到账户菜单的活动选择面板中

import * as Flex from '@twilio/flex-ui';

// 监听Flex初始化事件
Flex.Actions.addListener('init', async () => {
  // 获取当前工作者实例并等待数据加载完成
  const worker = Flex.WorkerClient.getInstance();
  await worker.onReady();

  // 从工作者属性中读取允许的活动列表（示例属性名为allowed_activities）
  // 可根据实际需求替换为你的自定义属性，比如role、department等
  const allowedActivityIdentifiers = worker.attributes.allowed_activities || [];

  // 替换可用性面板的内容，实现活动过滤
  Flex.AvailabilityPanel.Content.replace(
    (props) => {
      // 过滤活动：匹配活动SID或名称（根据你的存储方式调整）
      const filteredActivities = props.activities.filter(activity => 
        allowedActivityIdentifiers.includes(activity.sid) || allowedActivityIdentifiers.includes(activity.friendlyName)
      );

      // 返回渲染过滤后的活动列表
      return <Flex.AvailabilityPanel.Content {...props} activities={filteredActivities} />;
    },
    { priority: 10 } // 设置优先级确保覆盖默认逻辑
  );
});

配置说明 #

• 工作者属性设置：在Twilio控制台的「TaskRouter > 工作者」页面，为目标工作者添加自定义属性（如allowed_activities，值为允许的活动SID或名称数组）
• 逻辑调整：可根据业务需求修改过滤规则，比如根据工作者的role属性，匹配预设的活动组（如客服仅能看到在线、离线、休息；管理员可看到所有活动）
• 插件部署：将代码打包为Flex插件，部署到你的Flex环境中生效

验证要点 #

• 使用不同属性的工作者账号登录Flex，检查账户菜单中的活动列表是否符合过滤规则
• 测试活动切换功能是否正常，确保过滤后的活动可正常选择

内容的提问来源于stack exchange，提问作者lucas simonini