Botframework-webchat: Support for bot avatar

[JobaDiniz]

Is there a way to show bot avatar like any other chat, example:

[compulim]

Sorry, currently it is not supported. But as a workaround, you should be able to hack into our CSS to add the avatar icon.

To enable avatar icon broadly, Direct Line might need to be updated to retrieve avatar icon from various sources (e.g. Skype, Slack, Facebook). And it also implies that we might want to support multi-party conversations.

[MichaelBartlettGitHub]

Can someone leave some code for hacking the css in the IFRAME? I have tried everything and I cannot get this to work. I am trying to inject the style.

[bauhaux]

This basic UI feature seems to be sorely missing from the bot framework. There's also no direction on how, if possible, this is done in directline.

[compulim]

This is coming as a customization feature.

We talked about avatar long time ago, there are multiple things we need to handle:

• Direct Line API does not have a way to retrieve bot icon you saved on the bot channel registration
• Multi channel/user support means Web Chat may need to ask Skype for icons for some users
• If no icon is loaded, we need to use the user initial to generate an avatar icon, but then it may lack of customizability

We aimed big, but these issues are not easy to solve (e.g. multi channels). Now we are backtracking and just allow dev to put any icons.

Anyway, it's coming.

[diegobcunha]

Hey, I resolved this issue doing the follow hack at botchat.scss.

`.wc-message-from-bot .wc-message-content {
background-color: $c_messageFromThem;
color: #44555f;

    &:after {
        float: left;
        content: "";
        background-color: black;
        width: 23.5px;
        height: 23.5px;
        margin-right: 2px;
        margin-top: -20px;
        margin-left: -50px;
    }

}`

For any questions let me know and I'll try help you :D

[peltemm]

i found this place a good alternative
.format-markdown{
background-image: url(../../src/assets/img/svg/myAvatar.svg);
background-repeat: no-repeat;
background-position: left top;
background-size: 30px 30px;
}
.format-markdown>p {
margin-bottom: 0px;
padding: 30px;
}

[Chitma]

I tried to change botchat.js and botchat.css, It works but the same image is being shown for user and bot. I just wanted it for bot. Since, minified botchat.js is tough to debug and modify, can anyone please guide me how do I add bot icon only for each bot message in webchat using Directline. bot image is constant and will be only hosted on webchat.
@compulim

[corinagum]

Please refer to #882 for tracking.