Provide ability to modify adaptiveCardHostConfig

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]

~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

[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.