Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bot avatar image is not coming if latest webchat.js is used #3602

Closed
Monomoy88 opened this issue Nov 12, 2020 · 4 comments
Closed

Bot avatar image is not coming if latest webchat.js is used #3602

Monomoy88 opened this issue Nov 12, 2020 · 4 comments
Assignees
Labels
Bot Services Required for internal Azure reporting. Do not delete. Do not change color. bug Indicates an unexpected problem or an unintended behavior. customer-replied-to Required for internal reporting. Do not delete. customer-reported Required for internal Azure reporting. Do not delete.
Milestone

Comments

@Monomoy88
Copy link

Monomoy88 commented Nov 12, 2020

Bot avatar image used to appear till the version 4.11.0 is released.
Here is my code

const styleSet = window.WebChat.createStyleSet({
               botAvatarImage: <<some image path>>,
               botAvatarInitials: 'EO',
               userAvatarImage: <<some image path>>,
               userAvatarInitials: 'U',
               bubbleBackground: 'rgba(220,220,220, .3)',
               bubbleFromUserBackground: 'rgba(255, 255, 200,.3)',
           });

In my html I have referred below uri:
https://cdn.botframework.com/botframework-webchat/latest/webchat.js

If I change it to https://cdn.botframework.com/botframework-webchat/4.10.1/webchat.js then avatar image is coming but when I changed the version to 4.11.0 or latest then images are not coming.

@stevkan stevkan added Bot Services Required for internal Azure reporting. Do not delete. Do not change color. customer-reported Required for internal Azure reporting. Do not delete. labels Nov 12, 2020
@stevkan stevkan self-assigned this Nov 12, 2020
@stevkan stevkan added the bug Indicates an unexpected problem or an unintended behavior. label Nov 12, 2020
@stevkan
Copy link
Collaborator

stevkan commented Nov 12, 2020

@Monomoy88, it does appear that some regression was introduced with 4.11.0 as I am able to repro the issue when using createStyle().

That being said, the recommended (and supported) method for changing Web Chat's style is to use styleOptions (see below). You can read more about why in this doc section, Overriding createStyleSet.

const styleOptions = {
    botAvatarImage: <<some image path>>,
    botAvatarInitials: 'EO',
    userAvatarImage: <<some image path>>,
    userAvatarInitials: 'U',
    bubbleBackground: 'rgba(220,220,220, .3)',
    bubbleFromUserBackground: 'rgba(255, 255, 200,.3)'
};

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

@stevkan stevkan added the customer-replied-to Required for internal reporting. Do not delete. label Nov 12, 2020
@stevkan
Copy link
Collaborator

stevkan commented Nov 12, 2020

@corinagum - needing triage

@corinagum
Copy link
Contributor

As @stevkan pointed out, I also confirmed that this is some kind of behavioral regression from 4.10.1. However, we don't guarantee lack of breaking changes in createStyleSet, and I strongly recommend using styleOptions as shown above.

It looks like the regression happened in PR #3543 My natural assumption is that the break was unintentional, but since this is a not officially supported method, I can't be entirely sure. @compulim is unavailable for the next few weeks and I won't be able to confirm without speaking with him.

This issue is resolved with the recommended code provided. However, I will add the investigation label and assign to compulim to confirm whether this behavior is breaking or not. From there we can see if any fixes need to be made.

@corinagum corinagum assigned compulim and unassigned stevkan Nov 13, 2020
@corinagum corinagum added this to the R12 milestone Nov 13, 2020
@corinagum
Copy link
Contributor

corinagum commented Nov 30, 2020

I confirmed with @compulim that this is an intended breaking change. Previously, avatar images were set with css (background-image), but now are set in HTML with <img>. Please use styleOptions as indicated above.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bot Services Required for internal Azure reporting. Do not delete. Do not change color. bug Indicates an unexpected problem or an unintended behavior. customer-replied-to Required for internal reporting. Do not delete. customer-reported Required for internal Azure reporting. Do not delete.
Projects
None yet
Development

No branches or pull requests

4 participants