Support avatar image

[hemachowdary]

Hi,
I have developed a bot in sdk4 using nodejs. I wanted to change the default look and feel of the bot. So I am using webchat customization referring to the sample [here](https://github.com/Microsoft/BotFramework-WebChat/blob/master/SAMPLES.md). I am able to add initals to bot and user avatars using the below styling options. botAvatarInitials: 'BOT', userAvatarInitials: 'ME'. How can I add an image instead of having initials. Does bot supports only the stylings mentioned here as of now?
Also whenever you add some new functionality for styling please add comments.

[vmunnuru]

import { createStyleSet } from 'botframework-webchat;

const styleSet = createStyleSet({});
styleSet.avatar = {...styleSet.avatar,
  backgroundImage: `url(${imageUrl})`
};

<ReactWebChat
  botAvatarInitials= ' '
  userAvatarInitials= ' '
  styleSet={styleSet}`
/>

[edited by @corinagum for text formatting]

[hemachowdary]

@vmunnuru i am not usnig react js. I am following the way that is mentioned under "Change font or color" section here

[compulim]

@hemachowdary @vmunnuru We have prioritized this work and will implement this feature in the next release of Web Chat.

[compulim]

In the meanwhile, @vmunnuru solution is good. You might want to add background-size to cover/contain to make it auto downscale. Plus some accessibility fixes (aria-label for the image).

[compulim]

The work is done in PR #1486.

[corinagum]

In the meantime, for those who wish to have separate images for both avatars, please use the following:

const styleSet = window.WebChat.createStyleSet();
      styleSet.avatar = { 
          ...styleSet.avatar,
         '&.from-user': { 
             backgroundImage:'url(\'https://github.com/compulim.png?size=64\')' 
          },
         '&:not(.from-user)': {     
             backgroundImage:'url(\'https://docs.microsoft.com/en-us/azure/bot-service/v4sdk/media/logo_bot.svg?view=azure-bot-service-4.0\')' }
          };
 
      window.WebChat.renderWebChat({
         directLine: window.WebChat.createDirectLine({ token }),
         styleSet,
         botAvatarInitials: ' ',
         userAvatarInitials: ' '
    }, document.getElementById('webchat'));

[compulim]

The PR is being merged and it will be resolved by @4.2.1-master.d35a7ac and >= @4.2.1.