Botframework-webchat: BOT Avatar has a blue circle background

[vikramdadwal]

The avatar image is not taking full background and showing blue circle line around. Not looking good. Though the image is having all white background.

Screenshots

Version

Describe the bug

To Reproduce

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

Additional context

[Bug]

[tdurnford]

The avatar background color is set to the accent color, so I don't think there is a simple way to change the outline color to white without directly modifying the styleSet. Should we consider adding botAvatarBackgroundColor and userAvatarBackgroundColor to the default style options, set their default value to null, and then set the avatar background color to botAvatarBackgroundColor or userAvatarBackgroundColor respectively if the developer provides it; otherwise, set it to the accent color?

Default Style Options

{  
...
  // Avatar
  avatarSize: 40,
+ botAvatarBackgroundColor: null,
  botAvatarImage: '',
  botAvatarInitials: '',
+ userAvatarBackgroundColor: null,
  userAvatarImage: '',
  userAvatarInitials: '',
...
}

Avatar Style Set

export default function createAvatarStyle({ accent, avatarSize, botAvatarBackgroundColor primaryFont, userAvatarBackgroundColor}) {
  return {
    alignItems: 'center',
-   backgroundColor: accent,
    borderRadius: '50%',
    color: 'White',
    display: 'flex',
    fontFamily: primaryFont,
    height: avatarSize,
    justifyContent: 'center',
    overflow: 'hidden',
    position: 'relative',
    width: avatarSize,
+   '&.from-user': {
+     backgroundColor: userAvatarBackgroundColor || accent
+   },
+   '&:not(.from-user)': {
+     backgroundColor: botAvatarBackgroundColor || accent
+   },
    '& > .image': {
      left: 0,
      position: 'absolute',
      top: 0
    }
  };
}

@compulim @corinagum Thoughts?

[corinagum]

Seems fine to me. My only hesitation is about the potential conflict with accent, but I figure as long as we document it thoroughly it shouldn't be a problem.

[stevkan]

Here is a workaround I have been using. This should suffice until the next release. This demos a blue background in web chat with a black background for the avatars and green/red text overlay (if you are including initials, for example) depending on the user.

let styleSet = createStyleSet({
    backgroundColor: '#19194d',

    botAvatarInitials: 'BB',
    userAvatarInitials: 'NB',
    });

styleSet.avatar = {
    ...styleSet.avatar,
    '.from-user': {
        'color': 'Green',
        'background-color': 'black'
    },
    ':not(from-user)': {
        'color': 'Red',
        'background-color': 'black'
        }
}

[vikramdadwal]

@corinagum : When is the next release ?

[corinagum]

Next release is end of October. :)

If you need these changes immediately, please see our documentation on pointing to our MyGet feed for latest bits.