How to not render an attachment

Question

I am using botframework-webchat in a react app which is connected to a skillbot from which I send custom card attachments and render custom components.

I want to build a component that executes some code but does not render any visual box on screen.

const attachmentMiddleware = (properties) => () => next => card => {
  return (
          switch(card.attachment.contentType) {
              case 'application/vnd.microsoft.card.adaptive.addUserDetails':  
                return false;
              case 'application/vnd.microsoft.card.adaptive.locationpicker':  
                return  <LocationPicker/> 
  default: return next(card);
}
  )
}

My expectation is that when I return false the component will not render. Well the component does not render but the out speech box does render an empty box. Bad

How can I implement this so that the outer speech box does not render at all as in the picture below when I return false from the attachmentMiddleware? Good

Answer 1

The better place to do this is just thru Web Chat's store.

This is because the store receives the activities first and then any middleware acts second. So, because the activity has the attachment, the attachmentMiddleware will necessarily render something even if you pass in false or null.

Therefore, if you want to not render anything at all for an adaptive card, you should filter for it in the store returning false or null at that point. Then, the middleware won't even register its presense and nothing will be rendered.

const store = window.WebChat.createStore( {}, ( { dispatch } ) => next => async action => {
  if ( action.type === 'DIRECT_LINE/INCOMING_ACTIVITY' ) {
    const { activity } = action.payload;
    console.log('INCOMING ACTIVITY ', activity);
    if (activity.attachments && activity.attachments[0].contentType === 'application/vnd.microsoft.card.adaptive') {
      return false;
    }
  }
  return next(action);
} );

[ ... ]

window.WebChat.renderWebChat( {
  directLine: directLine,
  store: store
}, document.getElementById('webchat') );