The brand needs the Avatar of the Bot to be a square instead of a circle

Describe the suggestion or request in detail

The brand needs the Avatar of the Bot to be a square instead of a circle

Describe alternatives you have considered

Currently we are changing this style with jQuery command:

jQuery('#webchat').find('div').filter('.avatar').not('.from-user').css('border-radius', '0%')

But sometimes webchat is not rendering as we like and happens this:

and of course it is not efficient to do so

Additional context

I would like to use new styleOptions like: botAvatarShapeAsCircle (boolean) userAvatarShapeAsCircle (boolean)

const styleOptions = {
	...
	botAvatarImage: baseUrl.concat('/img/avatar_bot_squ.png'),
	botAvatarInitials: 'BOT',
	botAvatarBackgroundColor: 'white',
	botAvatarShapeAsCircle: false,
	userAvatarImage: webchatItem.userAvatar,
	userAvatarInitials: 'USER',
	userAvatarBackgroundColor: 'white',
	userAvatarShapeAsCircle: true,
	...
}

With an implementation similar to this on createAvatarStyle… :

export default function createAvatarStyle({
  accent,
  avatarSize,
  botAvatarBackgroundColor,
  botShapeAsCircle,
  primaryFont,
  userAvatarBackgroundColor
}) {
  var borderRadiusValue = '50%'
  if !botShapeAsCircle borderRadiusValue = 'inherit'
  
  return {
    alignItems: 'center',
    borderRadius: borderRadiusValue,
	...

[tdurnford]

@eduardmartos You can currently modify the style set to change the avatars border radius. Take a look at the code snippet below.

Screenshot

Web Chat v4.7.1

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'
};

const styleSet = window.WebChat.createStyleSet(styleOptions);

styleSet.avatar = {
  ...styleSet.avatar,
  borderRadius: 0
};

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

Additional Context

https://github.com/microsoft/BotFramework-WebChat/issues/1977

@corinagum @compulim Should we consider adding userAvatarBorderRadius and botAvatarBorderRadius to the default style options?

[corinagum]

@tdurnford my vote is yes 😃