Activity Status not being rendered when adding reactions as per sample

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]

[corinagum]

@nathanlindorff thanks for the info!

You’re right, since my last update I figured out that this is a quick sample update from when our middleware format changed. I definitely plan on getting the fix in R12. In the meantime, check out the middleware design change for more info: https://github.com/microsoft/BotFramework-WebChat/blob/master/CHANGELOG.md#breaking-changes-1 Hope that helps you out, and sorry I haven’t gotten the fix in yet.

[corinagum]

Quick update: I’m still investigating the cause of this issue. My initial assumption was that it would be a sample fix, but that is incorrect. This most likely won’t make the R11 release.

Note that this also affects the user highlighting sample.