How to use custom React components or modify existing WebChat components?

[cozimacode]

Hi there,

I was able to make many modifications to the webchat client by following the detailed samples available on repository. The only thing which I feel that the samples don't make is how to modify existing WebChat components or use our own components in place of them.

For example, the upload button...

We have an option to hide the upload button in SendBox from StyleOptions but what if we want to use a different component in the same place (say a menu with predefined options or messages) instead of the upload button?

This sample says that ..

To see what components are available for customization, please take a look at the components directory of the Web Chat repo. You are welcome to import any one of these into your app and make modifications, or build an entirely new component from scratch.

But it isn't clear on how we could pass our custom component to use in place of the default component.

Please help me understand the missing piece here.

[jwiley84]

The bot framework team prefers that How-To questions be asked on Stack Overflow using the 'botframework' tag. I'm going to close this issue, please reopen on Stack Overflowl

[cozimacode]

Done. Here's the link: https://stackoverflow.com/questions/64077866/how-to-use-custom-react-components-or-modify-existing-webchat-components

[anshumankmr]

Hey @cozimacode do you have a solution for this?