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.

Sign up for GitHub

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

Jump to bottom

Adaptive card are not showing in webchat where as showing in MS Teams #4503

Closed
1 of 2 tasks
Aiswarya1794 opened this issue Nov 14, 2022 · 5 comments
Closed
1 of 2 tasks

Adaptive card are not showing in webchat where as showing in MS Teams #4503

Aiswarya1794 opened this issue Nov 14, 2022 · 5 comments
Assignees
@ramfattah
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.

Comments

@Aiswarya1794
Copy link

Aiswarya1794 commented Nov 14, 2022 •
edited by ramfattah

Is it an issue related to Adaptive Cards?

  • Yes, this is an Adaptive Card issue but it is specific to Web Chat.

Do you have any screenshots?

Adaptive card version : 2.7.3

Adaptive card in Teams

FeedbackCardInTeams

Adaptive card in Webchat

FeedbackCardInWebchat

What version of Web Chat are you using?

Latest production

Which distribution are you using Web Chat from?

Bundle (webchat.js)

Which hosting environment does this issue primarily affect?

Web apps

Which browsers and platforms do the issue happened?

Browser: Edge (latest), Browser: Chrome (latest)

Which area does this issue affect?

Attachment: Adaptive Card

Is this an accessibility issue?

  • Yes, this is an accessibility issue.

Please describe the bug

We are using the below code to display the adaptive card in Webchat and Teams.
Its working correctly in Teams and in Webchat its displaying as a line.

public static Attachment GetUserRatingAndFeedbackCard(string agentName)
{
    var cardBody = new List<AdaptiveElement>()
    {
        new AdaptiveChoiceSetInput
        {
            Style = AdaptiveChoiceInputStyle.Expanded,
            Wrap = true,
            Id = "Rating",
            Type = AdaptiveChoiceSetInput.TypeName,
            IsMultiSelect = false,
            Label = $"Hoe was de chatervaring met {agentName}",
            Choices =  new List<AdaptiveChoice>()
            {
                new AdaptiveChoice() { Title = "😀  Uitstekend" , Value = "Rating : Excellent" },
                new AdaptiveChoice() { Title = "🙂  Goed" , Value = "Rating : Good" },
                new AdaptiveChoice() { Title = "😐  Ok" , Value = "Rating : Ok" },
                new AdaptiveChoice() { Title = "🙁  Arm" , Value = "Rating : Poor" },
                new AdaptiveChoice() { Title = "🙁  Heel slecht" , Value = "Rating : VeryBad" },
            }
        },
        new AdaptiveActionSet()
        {
            Actions = new List<AdaptiveAction>()
            {
                
                new AdaptiveShowCardAction()
                {
                    Title = "Aanvullende feedback toevoegen",
                    Card = GetUserRatingAndFeedbackAdaptiveCard()
                }
            }
        }
    };

    return GetAttachment(AdaptiveCard.ContentType, GetAdaptiveCard(cardBody));
}

public static AdaptiveCard GetUserRatingAndFeedbackAdaptiveCard()
{
    var cardBody = new List<AdaptiveElement>()
    {
        new AdaptiveTextInput()
        {
            IsMultiline= true,
            Placeholder=ResourceString.PlaceholderText,
            Type=AdaptiveTextInput.TypeName,
            IsRequired = false,
            MaxLength = 250,
            Id= $"comment"
        },
        new AdaptiveActionSet()
        {
            Actions = new List<AdaptiveAction>()
            {
                new AdaptiveSubmitAction()
                {
                    Title = ResourceString.SubmitButtonText,
                    Data = new JObject
                    {
                        {"msteams",new JObject
                            {
                                { "type", "messageBack"},
                                { "displayText", "Einreichen" },
                                { "text", "Einreichen" }
                            }
                        }
                    }
                }
            }
        }

    };

    return GetAdaptiveCard(cardBody);
}

Do you see any errors in console log?

No response

How to reproduce the issue?

  1. Call the adaptive card from Bot project

What is the expected and actual behavior?

Expected: Adaptive card should be displayed same as how it works in Teams

Actual: Webchat displays adaptive card as white line

Adaptive Card JSON

No response

Additional context

No response
@Aiswarya1794 Aiswarya1794 added Bot Services Required for internal Azure reporting. Do not delete. Do not change color. bug Indicates an unexpected problem or an unintended behavior. customer-reported Required for internal Azure reporting. Do not delete. labels Nov 14, 2022
@ramfattah
Copy link
Contributor

Thanks @Aiswarya1794, we are investigating.

@ramfattah
Copy link
Contributor

Hi @Aiswarya1794,

I was able to reproduce using Adaptive Card version 1.6:
image

Reverting back to 1.5 solved the issue:

Could you please try to set the Adaptive Card Schema Version less than 1.6 to see if that addresses this issue:

 AdaptiveCard card = new AdaptiveCard(new AdaptiveSchemaVersion(1,5));

@Aiswarya1794
Copy link
Author

@ramfattah ,

I have updated the code as below,

image

Still in webchat , its not displaying the full adaptive card

@johnataylor johnataylor added the customer-replied-to Required for internal reporting. Do not delete. label Nov 16, 2022
@ramfattah
Copy link
Contributor

Hi @Aiswarya1794,

Using the following code, the adaptive card seems to work in WebChat from my end:

        private static Attachment CreateAdaptiveCardAttachment()
        {
            AdaptiveCard adaptiveCard = new AdaptiveCard(new AdaptiveSchemaVersion(1, 5));

            adaptiveCard.Speak = "This is sample speak";
            var cardBody = new List<AdaptiveElement>()
            {
                new AdaptiveChoiceSetInput
                {
                    Style = AdaptiveChoiceInputStyle.Expanded,
                    Wrap = true,
                    Id = "Rating",
                    Type = AdaptiveChoiceSetInput.TypeName,
                    IsMultiSelect = false,
                    Label = $"Hoe was de chatervaring met Ram",
                    Choices =  new List<AdaptiveChoice>()
                    {
                        new AdaptiveChoice() { Title = "😀  Uitstekend" , Value = "Rating : Excellent" },
                        new AdaptiveChoice() { Title = "🙂  Goed" , Value = "Rating : Good" },
                        new AdaptiveChoice() { Title = "😐  Ok" , Value = "Rating : Ok" },
                        new AdaptiveChoice() { Title = "🙁  Arm" , Value = "Rating : Poor" },
                        new AdaptiveChoice() { Title = "🙁  Heel slecht" , Value = "Rating : VeryBad" },
                    }
                }
            };

            adaptiveCard.Body.Add(cardBody[0]);

            Attachment adaptiveCardAttachment = new Attachment()
            {
                ContentType = AdaptiveCard.ContentType,
                Content = adaptiveCard
            };

            return adaptiveCardAttachment; 
        }
        protected override async Task OnMessageActivityAsync(ITurnContext<IMessageActivity> turnContext, CancellationToken cancellationToken)
        {
            var cardAttachment = CreateAdaptiveCardAttachment();

            await turnContext.SendActivityAsync(MessageFactory.Attachment(cardAttachment), cancellationToken);
        }

WebChat screenshot:
image

Let me know if this helps. Thanks.

@tracyboehrer
Copy link
Member

Closing to inactivity after work-around.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ramfattah ramfattah

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
Milestone
No milestone
Development

No branches or pull requests
4 participants
@tracyboehrer @johnataylor @ramfattah @Aiswarya1794