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'));

    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'));