BotFramework-WebChat icon indicating copy to clipboard operation
BotFramework-WebChat copied to clipboard

Web Chat UI fails to render action in overflow menu when mode property is set to `secondary`

Open stevkan opened this issue 1 year ago • 0 comments

Is your feature request related to a problem?

Reference IcM #430453809.

As described in the Adaptive Cards schema documentation, starting with schema version 1.5, every action can include an optional mode property. By default, this property is set to primary which tells the adaptive card to render the action as a button. If mode is set to secondary, then the action should be rendered as an overflow menu.

However, in Web Chat, when an adaptive card (example below) is sent by the bot that includes an action where the mode property is set to "secondary", Web Chat is unable to render the overflow menu. Instead, the overflow menu is rendered as basic HTML on the page. The functionality of the action appears to be undisturbed, so the issue is only with regard to the correct rendering of elements in the UI.

{

  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.5",
  "body": [
    {
      "type": "ActionSet",
      "actions": [
        {
          "type": "Action.Submit",
          "title": "Log a Ticket",
          "id": "LogTicket",
          "data": {
            "value": "Log a Ticket"
          }
        },
        {
          "type": "Action.Submit",
          "title": "View Ticket Status",
          "id": "ViewTicketStatus",
          "data": {
            "value": "View Ticket Status"
          }
        },
        {
          "type": "Action.Submit",
          "title": "Create DL",
          "id": "CreateDL",
          "mode": "secondary",
          "data": {
            "value": "Create DL"
          }
        },
        {
          "type": "Action.Submit",
          "title": "View DL Details",
          "id": "ViewDLDetails",
          "mode": "secondary",
          "data": {
            "value": "View DL Details"
          }
        }  
      ]
    }
  ]
}

Describe the suggestion or request in detail

Web Chat should support adaptive cards actions where the mode property has a set value of secondary so it can properly display the action as an overflow menu.

Describe alternatives you have considered

The only other option is to render the action as a simple button.

Additional context

Adaptive Cards Designer image

Test in Web Chat demo - End result is the same when using Web Chat in an HTML page. adaptiveCardSecondaryButton

stevkan avatar Nov 30 '23 18:11 stevkan