Microsoft BotFramework WebChat4.14升级后activityMiddleware与showAvatarInGroup冲突如何修复

功能实现说明 #

我在可最小化的React版WebChat示例基础上添加了自定义输入指示器，机器人发送typingIndicator事件时就会渲染该组件，机器人侧触发代码如下：

await context.sendActivity({ name: 'typingIndicator', type: 'event' });

WebChat.js代码 #

import TypingIndicator from './TypingIndicator';


const activityMiddleware = () => next => ({ activity, nextVisibleActivity, ...otherArgs }) => {
    const { name } = activity;
    // 首先移除DOM中所有已存在的输入指示器
    let elements = document.getElementsByClassName('typing-indicator');
    for (var i = 0; i < elements.length; i++) {
      elements[i].style.display = 'none'
    }
    // 如果接收到机器人发送的输入指示器事件，返回待渲染的组件
    if (name === 'typingIndicator') {
      return () => <TypingIndicator activity={activity} nextVisibleActivity={nextVisibleActivity} />;
    }
    else {
      return next({ activity, nextVisibleActivity, ...otherArgs });
    }
  };

TypingIndicator.js代码 #

import React from 'react';
import './TypingIndicator.css';

const TypingIndicator = () => {
    return (
      <div className="typing-indicator">
      <span></span>
      <span></span>
      <span></span>
      </div>
    );
  };
  export default TypingIndicator

TypingIndicator.css代码 #

.typing-indicator {
    background-color: transparent;
    height: 35px;
    width: 60px!important;
    border-radius: 20px;
    padding:10px;
    margin-left: 70px;
}

.typing-indicator span {
    line-height: 35px;
    display:inline-block;
    vertical-align: middle;
    height: 10px;
    width: 10px;
    margin: 0 1px;
    background-color: #9E9EA1;
    border-radius: 50%;
    opacity: 0.4;
    animation: bounce 0.7s linear infinite;
}

.typing-indicator span:nth-child(1)
{
    animation-delay: 0.1s;
}

.typing-indicator span:nth-child(2)
{
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3)
{
    animation-delay: 0.1s;
}
@keyframes bounce {
    30% { transform: translateY(-4px); }
    60% { transform: translateY(0px); }
    80% { transform: translateY(4px); }
    100% { transform: translateY(0px); opacity: 0.5;  }
  }

问题描述 #

上述功能在4.9版本运行正常，升级到4.14版本后原本也可正常运行，直到配置了每组消息仅显示一个头像的参数：

const styleOptions = {
    showAvatarInGroup: 'sender',
    ...
  }

添加该styleOptions配置后，机器人头像就不再显示了，修改该配置为其他值后机器人头像恢复显示；如果移除activityMiddleware配置，也可以正常实现每组消息显示一个头像的效果。

[更新]
进一步排查后将问题范围缩小到自定义机器人代码：

• 安装WebChat示例d.reaction-buttons
• 配置显示机器人头像的Styleoptions
• 添加ShowAvatarInGroup: 'sender'配置

上述配置运行正常，机器人头像可正常显示；但只要将webchat-mockbot替换为自定义机器人，问题就会复现：ShowAvatarInGroup配置为sender时无机器人头像，配置为空时显示机器人头像。
两种情况下控制台都会报如下错误：

目前不确定问题根源，此前版本从未出现该问题，正在排查发送给WebChat的内容中哪部分破坏了botAvatar的渲染逻辑。

[更新2]
根据WebChat官方更新日志，需要将activityMiddleware重写为如下格式：

() => next => (...setupArgs) => {
  const render = next(...setupArgs);

  return render && (...renderArgs) => {
    const element = render(...renderArgs);

    return element && <div>{element}</div>;
  };
}

但按此格式改造后无法适配业务场景，typingIndicator React组件无法正常渲染。
恳请各位提供修复该问题的指导，非常感谢。

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