Botframework-webchat: Add dispatch event to update style options

[abishekreddy]

Feature Request

Describe the suggestion or request in detail

If webchat is being rendered in a native javascript application, there seems to be no straightforward way to update style options after the webchat has been initialized. Adding a new dispatch event would make it easy - Something like 'WEB_CHAT\UPDATE_STYLE' with the new styleOptions object.

[Enhancement]

[tdurnford]

Web Chat's conversation state is maintained in a Redux Store while the components state - things like the styleSet - is stored in a React Context. All of the actions that are dispatched flow through the Redux Store and not the React Context. So to add a dispatch action to modify the styleSet, we would have to move the styleSet into the Redux Store which I don't believe fits with our current design.

If you want to dynamically change the styles, you can wrap Web Chat in a React Component, store the styleOptions or styleSet in state, pass the styleOptions or styleSet as a prop to ReactWebChat, and update styleOptions or styleSet whenever/however you deem necessary.

Related to https://github.com/microsoft/BotFramework-WebChat/issues/2361

Hope this helps!

[compulim]

Agree on @tdurnford, having a dispatch function that modify a prop is weird. The prop's content should be owned by the parent, unless it is named "initialStyleOptions".

If you prefer dispatch, you can consider using a Redux store outside of Web Chat (ancestor of Web Chat), to control what styleOptions passed to Web Chat. Web Chat don't collide with your Redux store because we partitioned and hid it. 😉

[abishekreddy]

@compulim @corinagum How do we approach this if we were rendering the webchat in an application that doesnt use React? We can pass the initial style options object as part of the renderWebChat call, but if we had to update the styles after the conversation has started, how should it be done?

[MatthiasGwiozda]

@tdurnford while your solution works, it has some flaws:

When using adaptive - cards with input - fields, the user - inputs gets deleted in the moment when we update the styleOptions (In this case we update the styleOptions exactly in the moment when the adaptive - card was submitted):

I guess this happens because the webchat gets re-rendered.