Botframework-webchat: Add Typing Indicator background URL to defaultStyleOptions

[phale98]

I'd like to know if it is possible to change the typing indicator? If so can someone provide a code snippet or reference?

[corinagum]

Hi @phale98, unfortunately we don't have an option on defaultStyleOptions.js that allows you to switch out your own typing indicator. This (would be) the simplest way to update the typing indicator. For tracking I'm going to use this issue for implementing that ability.

We do of course have workarounds that allow for more control over Web Chat. Please take a look at 10.a.customization-card-components and 11.customization-redux-actions on how to incorporate middleware into Web Chat. You can create your own <TypingActivity> component using your own animation in place of <TypingAnimation>. (Take a look at createCoreMiddleware.js for hints on what that middleware will look like). This method will provide a lot more power to the Web Chat owner if you would rather use a CSS animation instead of an image file.

===
Notes for dev:

1. Add ability to provide URL and update backgroundImage of <TypingAnimation> to use defaultStyleSetOptions.
2. Also set options for height & width
3. Do we want to allow changes to backgroundRepeat?

[phale98]

Thank you for the quick reply. I will look at the pages you linked, and leave the issue open for your tracking purposes.

[mutanttech]

@corinagum Please also add a style set option to control the Avatar Initial Background color. Right now it is fixed and needs to controlled with CSS.

Also we need a way to customize the Send Text Box Placeholder Text and the Send Icon URL using the style set option.

I had been looking into this sample - 12.customization-minimizable-web-chat, I want to understand that for a developer how we have to approach including all the changes described in the sample.

One more thing, I am looking forward to add some header text which should be configurable from style set as well. Let me know what do you think.

[RonHouben]

It would be a great option to have the ability to change the typing indicator via the styleOptions.

@mutanttech, you can use the accent option to change the avatar background color. Although it will also color other things.
See the following page for all the styleOptions:
https://github.com/Microsoft/BotFramework-WebChat/blob/master/packages/component/src/Styles/defaultStyleSetOptions.js

if that isn't enough it's probably better to open a separate issue for the request of more customisability of the avatar background color.

[mutanttech]

@RonHouben, thanks for providing your suggestion. Although accent really changes colors to lot of things and I dont really want that. And I have mentioned other things that can be customized as well Send Text Box Placeholder Text and the Send Icon URL using the style set option. I think it would really make sense to open new issue.

By the way, can you help me with how to actually use the samples and customize the code of web chat. For example, using this sample 12.customization-minimizable-web-chat. I assume I have to clone the master for Web Chat v4 and then do all these changes in the src then do production build.

Let me know what do you think.

[naukhezolayee]

changing the typing indicator is possible in directline by simply adding below code in your webchat code,
** convert a gif to base64 format and replace "ConvertedCodeOfImageInbase64Format"

const styleSet = window.WebChat.createStyleSet({
typingAnimationBackgroundImage: "url('data:image/gif;base64,ConvertedCodeOfImageInbase64Format')"
});

Hope it helps anyone who requires..

[sw353552]

Is there a maximum size limit for the GIF file? I tried to change the animation but it didn't accept.

[corinagum]

@sw353552 was there an error message in the console or anything? As far as I know there isn't a size limit, but if there is we should document it. Thanks for bringing it up.

Also, did you link a gif or convert it to base64?

[sw353552]

@corinagum there was no error in the console, but Webchat only allows GIF files less than 4KB. Should this be the case?
If we want a better animation, is there a way that we can change the size limit?

I did convert it to base64.

[compulim]

@sw353552 what is the size of the GIF file you are using?

According to Stack Overflow, https://stackoverflow.com/questions/695151/data-protocol-url-size-limitations, for Chrome, the limit is 2 MB. For IE/Edge, it is 4 GB. Safari is 128 KB.

If your image is large, you can try converting it into blob URL by URL.createObjectURL and pass it to Web Chat.

[sw353552]

@compulim I am using a 2.7KB GIF, but now the indicator is not even displayed.

Will try URL.createObjectURL also.

[sw353552]

The issue was with the typingAnimationHeight and typingAnimationWidth.

@compulim Yes you were right, the size limit is 2 MB for Chrome.

Thnx!