Provide ability to modify adaptiveCardHostConfig

[EricDahlvang]

I'm trying to modify the actionsOrientation. I've tried providing just a subset:

    window.WebChat.renderWebChat({
        adaptiveCardHostConfig: {
            actions: {
                actionsOrientation: 'horizontal',
            }
        },
        styleOptions: {
            rootHeight: 500,
            rootWidth: 500,
  
        },
        directLine: dl,
        userID: '@Model.UserId',
        username: 'User',
        locale: 'en-US',
    }, document.getElementById('webchat'));

Result:

I also tried providing the entire adaptiveCardHostConfig:

    const accent = '#0063B1';
    const subtle = '#767676'; // With contrast 4.5:1 to white
    const PADDING_REGULAR = 10;
    const bubbleTextColor = 'Black';
    const cardEmphasisBackgroundColor = '#F0F0F0';
    function fontFamily(fonts) {
        return fonts.map(font => `'${font}'`).join(', ');
    }
    const primaryFont = fontFamily(['Calibri', 'Helvetica Neue', 'Arial', 'sans-serif']);

    const customHostConfig = {
        containerStyles: {
            default: {
                foregroundColors: {
                    default: {
                        default: bubbleTextColor,
                        subtle
                    },
                    accent: {
                        default: accent,
                        subtle: accent
                    }
                }
            },
            emphasis: {
                backgroundColor: cardEmphasisBackgroundColor,
                default: {
                    default: bubbleTextColor,
                    subtle
                }
            }
        },
        supportsInteractivity: true,
        fontFamily: primaryFont,
        imageSizes: {
            small: 40,
            medium: 80,
            large: 160
        },
        actions: {
            actionAlignment: 'stretch',
            actionsOrientation: 'horizontal',
            buttonSpacing: 8,
            maxActions: 100,
            showCard: {
                actionMode: 'inline',
                inlineTopMargin: 8
            },
            spacing: 'default'
        },
        adaptiveCard: {
            allowCustomStyle: false
        },
        imageSet: {
            imageSize: 'medium',
            maxImageHeight: 100
        },
        factSet: {
            title: {
                color: 'default',
                size: 'default',
                isSubtle: false,
                weight: 'bolder',
                wrap: true,
                maxWidth: 150
            },
            value: {
                color: 'default',
                size: 'default',
                isSubtle: false,
                weight: 'default',
                wrap: true
            },
            spacing: 8
        }
    };

    window.WebChat.renderWebChat({
        adaptiveCardHostConfig: customHostConfig,
        styleOptions: {
            rootHeight: 500,
            rootWidth: 500,
  
        },
        directLine: dl,
        userID: '@Model.UserId',
        username: 'User',
        locale: 'en-US',
        botAvatarInitials: 'WC',
        userAvatarInitials: 'User'
    }, document.getElementById('webchat'));

Result:

Version

https://cdn.botframework.com/botframework-webchat/latest/webchat.js

Describe the bug

Cannot figure out how to modify the Adaptive Card Host Config.

[Bug]

[corinagum]

I'll investigate this at the same time I'm working on updating our host config. #1964

[corinagum]

Currently we don't have a way to specify an adaptiveCardHostConfig separate from the one Web Chat provides. This is because defaultStyleOptions.js and adaptiveCardHostConfig.js share variables. For example, setting the default/branding color of Web Chat will also change the color scheming in Adaptive Cards. However, there are only 4 or 5 variables that the user may currently modify, and Adaptive Cards has around 100 props that need to be accounted for.

We have a couple of options that will need to be scoped out. The bottom line is that to bring parity with v3, we should be able to modify the adaptiveCardsHostConfig in v4. See below:

1. Separate adaptiveCardsHostConfig from defaultStyleOptions so that a user may freely provide their own config file. Unfortunately this would mean that styling Adaptive Cards to match Web Chat's brand styling will be manual. I don't think this is very friendly to the user.
2. Add all Adaptive Card variables / options to defaultStyleSetOptions. Overall I think this is my preference, but it also means that defaultStyleSetOptions would more than double in size, since there are so many variables for adaptiveCardHostConfig. Since Adaptive Cards is an actively maintained repo, this also means that we would need to monitor updates to the package more carefully. The benefits would be that the user can still manually assign values to the host config, but it is still possible to match Web Chat branding with Adaptive Cards styles.
3. Maintain defaultStyleOptions as is, where Web Chat only provides the ability to change a few, (kind of arbitrary) variables. This gives the user the least amount of customization power out of the three options.

I am assigning this to @compulim so that he can take a look and add his opinions next week. He was the main decision-maker behind deciding which variables were defined in defaultStyleSetOptions, so his input will be important.

Lol @tdurnford figured it out below

[corinagum]

@compulim What are the steps for providing a new host config?

[tdurnford]

I was able to change the AdaptiveCard button orientation, but I had to recreate the entire config to maintain the rest of Web Chat's styling options since Web Chat does not provide the ability to merge config settings. Here are the code snippets I used:

Custom Host Config

const adaptiveCardHostConfig = {
  "hostCapabilities": {
    "capabilities": null
  },
  "choiceSetInputValueSeparator": ",",
  "supportsInteractivity": true,
  "fontTypes": {
    "default": {
      "fontFamily": "Calibri, sans-serif",
      "fontSizes": {
        "small": 12,
        "default": 14,
        "medium": 17,
        "large": 21,
        "extraLarge": 26
      },
      "fontWeights": {
        "lighter": 200,
        "default": 400,
        "bolder": 600
      }
    },
    "monospace": {
      "fontFamily": "'Courier New', Courier, monospace",
      "fontSizes": {
        "small": 12,
        "default": 14,
        "medium": 17,
        "large": 21,
        "extraLarge": 26
      },
      "fontWeights": {
        "lighter": 200,
        "default": 400,
        "bolder": 600
      }
    }
  },
  "spacing": {
    "small": 3,
    "default": 8,
    "medium": 20,
    "large": 30,
    "extraLarge": 40,
    "padding": 10
  },
  "separator": {
    "lineThickness": 1,
    "lineColor": "#EEEEEE"
  },
  "imageSizes": {
    "small": 40,
    "medium": 80,
    "large": 160
  },
  "containerStyles": {
    "default": {
      "foregroundColors": {
        "default": {
          "default": "#000000",
          "subtle": "#767676",
          "highlightColors": {
            "default": "#22000000",
            "subtle": "#11000000"
          }
        },
        "dark": {
          "default": "#000000",
          "subtle": "#66000000",
          "highlightColors": {
            "default": "#22000000",
            "subtle": "#11000000"
          }
        },
        "light": {
          "default": "#FFFFFF",
          "subtle": "#33000000",
          "highlightColors": {
            "default": "#22000000",
            "subtle": "#11000000"
          }
        },
        "accent": {
          "default": "#0063B1",
          "subtle": "#0063B1",
          "highlightColors": {
            "default": "#22000000",
            "subtle": "#11000000"
          }
        },
        "good": {
          "default": "#54a254",
          "subtle": "#DD54a254",
          "highlightColors": {
            "default": "#22000000",
            "subtle": "#11000000"
          }
        },
        "warning": {
          "default": "#c3ab23",
          "subtle": "#DDc3ab23",
          "highlightColors": {
            "default": "#22000000",
            "subtle": "#11000000"
          }
        },
        "attention": {
          "default": "#FF0000",
          "subtle": "#DDFF0000",
          "highlightColors": {
            "default": "#22000000",
            "subtle": "#11000000"
          }
        }
      },
      "backgroundColor": "#FFFFFF"
    },
    "emphasis": {
      "foregroundColors": {
        "default": {
          "default": "#000000",
          "subtle": "#767676",
          "highlightColors": {
            "default": "#22000000",
            "subtle": "#11000000"
          }
        },
        "dark": {
          "default": "#000000",
          "subtle": "#66000000",
          "highlightColors": {
            "default": "#22000000",
            "subtle": "#11000000"
          }
        },
        "light": {
          "default": "#FFFFFF",
          "subtle": "#33000000",
          "highlightColors": {
            "default": "#22000000",
            "subtle": "#11000000"
          }
        },
        "accent": {
          "default": "#2E89FC",
          "subtle": "#882E89FC",
          "highlightColors": {
            "default": "#22000000",
            "subtle": "#11000000"
          }
        },
        "good": {
          "default": "#54a254",
          "subtle": "#DD54a254",
          "highlightColors": {
            "default": "#22000000",
            "subtle": "#11000000"
          }
        },
        "warning": {
          "default": "#c3ab23",
          "subtle": "#DDc3ab23",
          "highlightColors": {
            "default": "#22000000",
            "subtle": "#11000000"
          }
        },
        "attention": {
          "default": "#FF0000",
          "subtle": "#DDFF0000",
          "highlightColors": {
            "default": "#22000000",
            "subtle": "#11000000"
          }
        }
      },
      "backgroundColor": "#F0F0F0"
    }
  },
  "actions": {
    "maxActions": 100,
    "spacing": "Default",
    "buttonSpacing": 8,
    "showCard": {
      "actionMode": "Inline",
      "inlineTopMargin": 8,
      "style": "emphasis"
    },
    "preExpandSingleShowCardAction": false,
    "actionsOrientation": "horizontal",
    "actionAlignment": "Stretch",
    "wrap": true
  },
  "adaptiveCard": {
    "allowCustomStyle": false
  },
  "imageSet": {
    "maxImageHeight": 100
  },
  "media": {
    "allowInlinePlayback": true
  },
  "factSet": {
    "title": {
      "size": "Default",
      "color": "Default",
      "isSubtle": false,
      "weight": "Bolder",
      "wrap": true
    },
    "value": {
      "size": "Default",
      "color": "Default",
      "isSubtle": false,
      "weight": "Default",
      "wrap": true
    },
    "spacing": 8
  },
  "cssClassNamePrefix": null,
  "_legacyFontType": {
    "fontFamily": "Segoe UI,Segoe,Segoe WP,Helvetica Neue,Helvetica,sans-serif",
    "fontSizes": {
      "small": 12,
      "default": 14,
      "medium": 17,
      "large": 21,
      "extraLarge": 26
    },
    "fontWeights": {
      "lighter": 200,
      "default": 400,
      "bolder": 600
    }
  }
};

Web Chat

renderWebChat({
  adaptiveCardHostConfig,
  directLine
}, document.getElementById('webchat'));

Screenshot

[corinagum]

Awesome, thanks @tdurnford. We should document this. I'll reassign it to myself and add that to our root README.md

[mamhh]

@tdurnford @corinagum ..
I've copied your snippet for (adaptiveCardHostConfig ) and used as below to render WebChat .. the result is empty DIV for adaptive cards !!! i'm attaching snapshot of the issue ..
Example 1
window.WebChat.renderWebChat({ directLine: window.WebChat.createDirectLine({ token: '<>' }), webSpeechPonyfillFactory, styleOptions, adaptiveCardHostConfig }, document.getElementById('webchat')); document.querySelector('#webchat > *').focus();

Example 2
window.WebChat.renderWebChat( { directLine: window.WebChat.createDirectLine({ token: '<>' }), styleOptions, adaptiveCardHostConfig },

Example 1

Example 2

please explain this behavior .. or is there a bug/mistake somewhere ???

[tdurnford]

This bug has been fixed and will be available in our next release in July. If you need these changes immediately, please see our documentation on pointing to our MyGet feed for latest bits.

[mamhh]

This bug has been fixed and will be available in our next release in July. If you need these changes immediately, please see our documentation on pointing to our MyGet feed for latest bits.

Could you please specify a date ??

[tdurnford]

I don't believe there is a definite date at the moment, but it should be in the next few weeks. I will be sure to follow and let you know.