Optimizing the documentation for the customization of the webchat.

[MatthiasGwiozda]

Feature Request

Is your feature request related to a problem? Please describe.
The feature request is based on this question.

Describe the suggestion or request in detail
I find that there is some informations missing in this documentation at point 3:

Using business layers and some UI components: opting into our UI but replacing just a handful of components as needed.

To replace some of the components it is necessary to fork the repository. It would be nice if someone could add the following information to this sentence:

(Using business layers and some UI [...]) (Its necessary to fork the repository and pull our updates into your custom - WebChat).

[lzc850612]

@MatthiasGwiozda can you explain more on the user scenarios that you're trying to achieve? What specifically do you have to do today to achieve this? That'll help us understand more on what's missing on the docs. Thanks.

[compulim]

I think we cover a pretty wide range of stuff that you can customize without forking the repository.

You can customize it pretty wildly like one of our sample, https://microsoft.github.io/BotFramework-WebChat/06.recomposing-ui/c.smart-display/.

Customizing the timestamp message

There are two ways you can customize the timestamp message:

1. Override the localization strings
2. Customize using activityStatusMiddleware

Inline suggested actions

For the "inline suggested actions", it's possible through customizing activityMiddleware and then hiding the suggested action

Please vote on issue #3083.

Customizing the send box

You can look at this sample to recompose the UI.

• Use composition mode if:
  • Replacing the send box
  • Hiding the send box
• Fork the source code for send box if:
  • Adding a button to the send box
    • The content of our send box is not customizable right now, please vote this issue Design: Switching input mode #2211

We don't recommend forking the whole repository as you only need to customize a single component. Ideally, you should be able to copy the whole /SendBox/**/* and start customizing it.

ScrollToEnd button

Would love to understand what type of customization you would do over here. We recently reworked the button and found it is quite challenging to make it accessible.

One thing you could consider is using composition mode, disable the scroll to end button, and rebuilt your own.

[corinagum]

Added this thread to our FAQ

[MatthiasGwiozda]

@MatthiasGwiozda can you explain more on the user scenarios that you're trying to achieve? What specifically do you have to do today to achieve this? That'll help us understand more on what's missing on the docs. Thanks.

Here are some examples of what we tried to achieve: #3490 (comment)

I think we cover a pretty wide range of stuff that you can customize without forking the repository.

while this might be true, it is not possible to "replace just a handful of components as needed" with every possible scenario. @compulim im not doubting that you implemented many customization - possibilities. But the sentence suggests that it is possible to replace every component as needed:

Using business layers and some UI components: opting into our UI but replacing just a handful of components as needed.

In some scenarios this is not true so an alternative optimization of the documentation's sentence could be:

(Using business layers and some UI [...]) (In some cases it's necessary to fork the repository and pull our updates into your custom - WebChat).

There could be a link to this question to give an example.

[corinagum]

Reopening this issue since there's continued discussion.. it's an extremely low cost to update one sentence in our documentation if that clarity will help a little. I'll assign this to myself, but I might not get to it right away. Since it's in our FAQ, hopefully other people will also come across it if they need the info.