title: Webchat: unable to render new elements using activitymiddleware in combication with grouping of avatars
body: <p>I am not able to add new elements to webchat using activitymiddleware since the update to 4.14. As an example I added some code I use for typing indicators. As soon as I do that, the grouping of my avatar does not work anymore.</p>
  <ol>
  <li>Without activitymiddleware and showAvatarInGroup: 'sender' -&gt; normal behavior. Avatar is shown once per group of messages as well as the timestamp.</li>
  <li>With activitymiddleware and showAvatarInGroup: 'sender' -&gt; typing indicators are rendered as expected, timestamps are shown (but not grouped) and the Avatar is not shown at all.</li>
  <li>With activitymiddleware and showAvatarInGroup : 'group' -&gt; typing indicators are rendered as expected and the Avatar as well as the timestamps are shown. But not grouped.</li>
  </ol>
  <p>Botcode (Node)
  The bot sends an event to ask the webchat client to render an element. In this case a typing indicator but it could also be a new inputform.</p>
  <p><code>await context.sendActivity({ name: 'typingIndicator', type: 'event' });</code></p>
  <p>The webchat code (React) has an activitymiddleware to render this typing indicator as soon as the event is in:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useEffect, useMemo } from 'react';
  import ReactWebChat, { createDirectLine } from 'botframework-webchat';
  import TypingIndicator from './TypingIndicator';
  
  const WebChat = ({ className, onFetchToken, store, token }) =&gt; {
    const directLine = useMemo(() =&gt; createDirectLine({ token }), [token]);
  
    const activityMiddleware = () =&gt; next =&gt; ({ activity, nextVisibleActivity, ...otherArgs }) =&gt; {
      const { name, type } = activity;
      // first remove all existing typing indicators
      let elements = document.getElementsByClassName('typing-indicator');
        for (let i = 0; i &lt; elements.length; i++) {
          elements[i].style.display = 'none'
        }
      // if we reveive a typing event, render a typing Indicator
      if (type === 'event' &amp;&amp; name === 'typingIndicator') {
        return () =&gt; &lt;TypingIndicator activity={activity} nextVisibleActivity={nextVisibleActivity} /&gt;;
      } else {
        return next({ activity, nextVisibleActivity, ...otherArgs });
      }
    }
  
    const styleOptions = {
      botAvatarInitials: 'Max',
      showAvatarInGroup: 'sender', // group works ok
      botAvatarImage: `${process.env.REACT_APP_AVATAR_URL}`,
    }
  
    useEffect(() =&gt; {
      onFetchToken();
    }, [onFetchToken]);
  
    return token ? (
      &lt;ReactWebChat className={`${className || ''} web-chat`} directLine={directLine} activityMiddleware={activityMiddleware} store={store} styleOptions={styleOptions}/&gt;
    ) : (
      &lt;div className={`${className || ''} connect-spinner`}&gt;
        &lt;div className="content"&gt;
          &lt;div className="icon"&gt;
            &lt;span className="ms-Icon ms-Icon--Robot" /&gt;
          &lt;/div&gt;
          &lt;p&gt;Connecting.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  export default WebChat;</code></pre>
  </div>
  </div>
  </p>
  <p>The typing indicator</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import './TypingIndicator.css';
  import React from 'react';
  
  const {
    hooks: { useRenderActivityStatus }
  } = window.WebChat;
  
  const TypingIndicator = ({ activity, nextVisibleActivity }) =&gt; {
    const renderActivityStatus = useRenderActivityStatus({ activity, nextVisibleActivity });
    return (
      &lt;div&gt;
        &lt;div className="typing-indicator"&gt;
          &lt;span&gt;&lt;/span&gt;
          &lt;span&gt;&lt;/span&gt;
          &lt;span&gt;&lt;/span&gt;
        &lt;/div&gt;
        {renderActivityStatus()}
      &lt;/div&gt;
    );
  };
  export default TypingIndicator</code></pre>
  </div>
  </div>
  </p>
  <p>And its styling</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.typing-indicator {
      background-color: transparent;
      height: 35px;
      width: 60px!important;
      border-radius: 20px;
      padding:10px;
      margin-left: 65px;
  }
  
   .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%!important;
      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;  }
    }</code></pre>
  </div>
  </div>
  </p>
  <pre><code>&quot;dependencies&quot;: {
      &quot;botframework-webchat&quot;: &quot;^4.14.0&quot;,
      &quot;react&quot;: &quot;16.12.0&quot;,
      &quot;react-dom&quot;: &quot;16.12.0&quot;,
      &quot;react-scripts&quot;: &quot;^3.4.1&quot;,
    },
  </code></pre>