Microsoft Botframework webchat. How to fix issue with activityMiddleware and showAvatarInGroup after update to 4.14

Question

Working from the minimizable webchat sample (react) a custom typing indicator is added that renders as soon as the bot sends an typingIndicator event:

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

In WebChat.js

import TypingIndicator from './TypingIndicator';


const activityMiddleware = () => next => ({ activity, nextVisibleActivity, ...otherArgs }) => {
    const { name } = activity;
    // first remove all existing typing indicators from the DOM
    let elements = document.getElementsByClassName('typing-indicator');
    for (var i = 0; i < elements.length; i++) {
      elements[i].style.display = 'none'
    }
    // if typing indicator event received from the bot, return one to be rendered
    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;  }
  }

This worked fine in 4.9. Afer updating to 4.14 it still works until I decided to only show one avatar for each group of activities:

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

As soon as I add this option to styleOptions, the Bot avatar is not shown anymore. As soon as I change the setting to something else, the botAvatar is shown again.

As soon as I remove the activityMiddleware, I am able to show one avatar per group of activities.

[Update] I did some additional digging and narrowed it down to my botcode.

.1 Installed webchat sample d.reaction-buttons .2 Added Styleoptions to show bot avatar .3 Added ShowAvatarInGroup: 'sender'

This works fine. The BotAvator is shown

But as soon as I replace the webchat-mockbot with my own bot, the problem returns:

ShowAvatarInGroup: 'sender' -> Not bot avatar ShowAvatarInGroup: '' -> bot avatar

In both cases the console is showing these error messages:

Not sure whats causing this. Was never a problem before. I will try and figure out what I am sending to webchat that's breaking the rendering of botAvatar

[Update2] According to webchats changelog, I need to rewrite the activity midleware to something like this:

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

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

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

I can't get this to work for my purpose however. My typingIndicator reactelement is not being rendered if I use it like this.

Any guidance on how to fix this, is much appreciated.