BotFramework-WebChat用占位符替换聊天头像

Question

我想更改聊天头像和机器人的头像，但是设置backgroundImage不起作用

var styleSet = window.WebChat.createStyleSet({
    backgroundColor: '#f3f3f3',
    bubbleBackground: '#FFFFFF',
    bubbleBorderRadius: 5,
    bubbleTextColor: 'Black',
    bubbleFromUserBackground: '#3a8dde',
    bubbleFromUserBorderRadius: 5,
    bubbleFromUserTextColor: 'White',

});
styleSet.avatar = {
    alignItems: 'center',
    borderRadius: '50%',
    color: 'white',
    backgroundColor: 'gray',


    display: 'flex',
    height: "50px",
    justifyContent: 'center',
    overflow: 'hidden',
    width: "50px"
};

window.WebChat.renderWebChat({
    directLine: window.WebChat.createDirectLine({token: 'My.Secret.token'}),
    //styles
    styleSet: styleSet,
    botAvatarInitials: 'BF',
    userAvatarInitials: 'WC'

}, document.getElementById('webchat'));

Answer 1

目前尚无用于设置背景图像的解决方案，但是您可以使用一种独特的样式来解决该问题，该样式最初是在GitHub上共享的here。

import { createStyleSet } from 'botframework-webchat;

const styleSet = 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\')' }
    };
};

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

在JavaScript中，您可以执行以下操作：

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