如何在网络聊天中添加聊天机器人 v4 头像图标？

Question

我必须为机器人响应添加一个头像，但我没有找到方法。

我曾尝试使用 botAvatarInitials 和 userAvatarInitials 在对话框中更改机器人的头像，但这并不是我想要的。

    window.WebChat.renderWebChat({
        directLine: botConnection,
        styleOptions: styleOptions,
        botAvatarInitials: 'BOT',
        userAvatarInitials: 'YOU'
    }, document.getElementById('webchat'));

有没有办法使用图像？ 或者至少改变头像气泡颜色？

Answer 1

是的，您可以使用本示例中概述的botAvatarImage属性设置图像。

它看起来像这样：

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: botConnection,
    styleOptions
 }, document.getElementById('webchat'));

要设置头像气泡的背景，您可以执行以下操作：

const styleOptions = {
    bubbleBackground: 'rgba(0, 0, 255, .1)',
    bubbleFromUserBackground: 'rgba(0, 255, 0, .1)'
};

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