Add avatar image support

[compulim]

Fix #43, #882, #1456

Design considerations

• When avatar image cannot be loaded, it will fallback to initials (or kept as blank circle)
  • We use background-image for avatar image, and downscale/center benefit from background-size: cover
  • The image will be loaded by the browser on first load, thus, there will be a slight delay when switching from initials to image
• Avatar image is considered decorations, and thus, is tagged as aria-hidden element

Changelog

Added

• Added support of avatar image, thru styleOptions.botAvatarImage and styleOptions.userAvatarImage, in PR #1486

Changed

• Moved botAvatarImage and userAvatarImage to styleOptions.botAvatarImage and styleOptions.userAvatarImage respectively, in PR #1486

Removed

• botAvatarImage and userAvatarImage props, as they are moved inside styleOptions, in PR #1486

Samples

• UI: Avatar image, in #1486

How to use

window.WebChat.renderWebChat({
  directLine: window.WebChat.createDirectLine({ token }),
  styleOptions: {
    botAvatarImage: 'https://docs.microsoft.com/en-us/azure/bot-service/v4sdk/media/logo_bot.svg?view=azure-bot-service-4.0',
    botAvatarInitials: 'BF',
    userAvatarImage: 'https://github.com/compulim.png?size=64',
    userAvatarInitials: 'WC'
  }
}, document.getElementById('webchat'));

[coveralls]

Pull Request Test Coverage Report for Build 621

• 11 of 15 (73.33%) changed or added relevant lines in 3 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage increased (+0.2%) to 44.928%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
packages/component/src/Composer.js	5	9	55.56%

Totals
Change from base Build 620:	0.2%
Covered Lines:	723
Relevant Lines:	1437

---

💛 - Coveralls

[corinagum]

Approved pending nitpick update!

[tonyanziano]

[cwhitten]

I'm wondering if motivation for the fromUser prop is bit more brittle than it needs to be. Perhaps Avatar and Bubble could take a variant-like prop that would scale a bit better than a boolean option, or (and my preference) could we extract the business logic from Avatar and Bubble and have the callers provide the information they expect to be used like the labels or the image source.

Happy to discuss further.

[compulim]

@cwhitten please let me know if the fixes incorporated are good or not. Feel free to grab me to discuss about them. 😄

[msekkappan]

The release branch does not have this feature working, when is the next release?

[corinagum]

@msekkappan Please keep an eye out for a release today! Thank you for your patience. :)

[khmerforce]

@corinagum @compulim This is what I used to load my bot. I tried to add styleOptions but it is not working. How can I add the bot avatar using this way to implement? Thanks

          BotChat.App({
            directLine: { secret: 'DIRECTLINE_SECRET' },
styleOptions: {
    botAvatarImage: 'https://docs.microsoft.com/en-us/azure/bot-service/v4sdk/media/logo_bot.svg?view=azure-bot-service-4.0',
    botAvatarInitials: 'BF',
    userAvatarImage: 'https://github.com/compulim.png?size=64',
    userAvatarInitials: 'WC'
  }
            user: { id: 'You' },
            resize: 'detect'
          }, document.getElementById("bot"));
        </script>

[corinagum]

@khmerforce are you using v4 of Web Chat? What CDN or NPM version are you using?

[khmerforce]

@corinagum thank you for replying. https://blog.botframework.com/2017/10/11/customize-web-chat-websites/ this is what I use in order to customize the WebChat. I am trying to add your implementation in it but it is not working.

[corinagum]

@khmerforce it looks like you are using v3 of Web Chat from that article. In order to implement the style options made available in this PR, you will need to use Web Chat v4. Please feel free to look at our samples on this repo to learn about v4 and to decide if upgrading is realistic for your project. :) If you have further questions about v4 please feel free to file an issue!

[khmerforce]

@corinagum sorry but is there a way I can access the CSS file? like v3? "https://cdn.botframework.com/botframework-webchat/latest/botchat.css" Thanks. Because I want to put the chat header and change the button shape, etc.

[corinagum]

@khmerforce please see the comments in this issue: #1466 (comment)

[leolorenzoluis]

Thanks for this. I may not be trying hard to find how,but is there a way to customize the background color of the avatar instead of hacking it around?

[khmerforce]

Hi Corinagum, I'm using the master branch cdn and the avatar is not displaying. Is it displaying for you? Thanks

[corinagum]

@khmerforce they are working for me on this sample: https://microsoft.github.io/BotFramework-WebChat/04.b.display-user-bot-images-styling/
Are you getting any error messages?

[khmerforce]

@corinagum Thank you for the reply but yes I get a warning message. I use <script src="https://cdn.botframework.com/botframework-webchat/master/webchat.js"></script>
if I use, <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script> then it works but I want the master since it has the history.

Warning message:
Web Chat: "botAvatarInitials" is deprecated. Please use "styleOptions.botAvatarInitials" instead. "botAvatarInitials" will be removed on or after December 11 2019 .

[corinagum]

It sounds like you are using the old method for avatar initials. Please verify that your styleOptions object looks like the below:

const styleOptions = {
          botAvatarImage: 'https://docs.microsoft.com/en-us/azure/bot-service/v4sdk/media/logo_bot.svg?view=azure-bot-service-4.0',
          botAvatarInitials: 'BF',
          userAvatarImage: 'https://github.com/compulim.png?size=64',
          userAvatarInitials: 'WC'
        };

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

and that you are adding the object to the renderWebChat function in your index.html.

If you are still having this issue, please try a hard refresh on the browser.

[mutanttech]

@corinagum, If a developer does not wants to use an Avatar Image or Initial with new Web Chat 4 then the message boxes/bubbles look just blunt with no call out. Which was there in v3 and looked great even without avatar icon.

I would suggest we should allow something like this in v4, so in case we don't want to show Avatar Icon or Initial then there could be a style option to enable call out like Message Bubble.

[corinagum]

Hi @mutanttech, please see #1658 :) You can track the issue there and add input if you'd like.