Activity Status not being rendered when adding reactions as per sample

[nathanlindorff]

Adding reaction buttons as per https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/05.custom-components/d.reaction-buttons/ results in the Activity Status (eg "5 minutes ago") not being rendered. Running the demo page associated with the sample shows the same issue (See screenshot)

I came across the issue while upgrading an older webchat from version 4.5 to 4.10. In the debugging I did for that the renderActivityStatus and renderAvatar functions are not being passed through as properties to the StackedLayout.

I realised after that that the sample had also changed, but the updated sample also displays the same issue.

Screenshots

From https://microsoft.github.io/BotFramework-WebChat/05.custom-components/d.reaction-buttons/

Debug screenshots from the bot i'm upgrading:

Props from StackedLayout bot message without reactions

Props from StackedLayout bot message with reactions

I haven't had a chance to update the code to match the updated reaction sample, but as stated the outcome (the missing status) is the same on the demo page.

class ThumbActivity extends React.Component<any> {
   public handleDownvoteButton = () => this.props.postActivity({ type: 'messageReaction', reactionsAdded: [{ activityID: this.props.activityID, helpful: -1 }] })
   public handleUpvoteButton = () => this.props.postActivity({ type: 'messageReaction', reactionsAdded: [{ activityID: this.props.activityID, helpful: 1 }] })

   public render() {
      const { props } = this

      return (
         <div style={thumbActivityStyle}>
            <div style={childActivityStyle}>{props.children}</div>
            <ul style={thumbsButtonBarStyle}>
               <li style={thumbsButtonListItemStyle}>
                  <button style={thumbButtonStyle} onClick={this.handleUpvoteButton}>👍</button>
               </li>
               <li style={thumbsButtonListItemStyle}>
                  <button style={thumbButtonStyle} onClick={this.handleDownvoteButton}>👎</button>
               </li>
            </ul>
         </div>
      )
   }
}

const ConnectedThumbActivity = (window as any).WebChat.connectToWebChat(
   ({ postActivity }) => ({ postActivity })
)(props => <ThumbActivity {...props} />)

export const thumbsMiddleware = () => next => card => {
   const allowReaction: boolean = card.activity.channelData && card.activity.channelData.allowReaction
   if (card.activity.from.role === 'bot' && allowReaction) {
      return children => (
         <ConnectedThumbActivity activityID={card.activity.id}>
            {next(card)(children)}
         </ConnectedThumbActivity>
      )
   } else {
      return next(card)
   }
}

I will update the code to use the new recommended syntax, but it appears based on the new sample that it will still be an issue.

Version

Version: 4.10 (Upgrading from 4.5)
Using NPM package
Embeded in iFrame

Describe the bug

When adding middleware to add reactions, the Activity Status and Avatar are not rendered.

Steps to reproduce

1. See description and screenshots

Expected behavior

Expect message to render as per normal, with additional reaction elements.

[Bug]

[nathanlindorff]

I can confirm that after converting the React Component to use the new style the same issue occurs

[nathanlindorff]

Dropping back to 4.9.2 everything has started working as expected again. I suspect the issue may have something to do with the breaking changes mentioned in 4.10.0 release notes given the mention of StackedLayout, but our code makes no direct reference to them.

[corinagum]

Thanks for filing this issue, @nathanlindorff. I'm adding it to our Investigate list for R11, for which the planning meeting is happening today.