Repository navigation
Provide ability to modify adaptiveCardHostConfig #2034
Description
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
Describe the bug
Cannot figure out how to modify the Adaptive Card Host Config.
[Bug]
Reacted by Corina and Thomas Durnford
Activity
corinagum commentedon May 30, 2019
I'll investigate this at the same time I'm working on updating our host config. #1964
corinagum commentedon Jun 4, 2019
Currently we don't have a way to specify anadaptiveCardHostConfigseparate from the one Web Chat provides. This is becausedefaultStyleOptions.jsandadaptiveCardHostConfig.jsshare 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 theadaptiveCardsHostConfigin v4. See below:1. SeparateadaptiveCardsHostConfigfromdefaultStyleOptionsso 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 thatdefaultStyleSetOptionswould more than double in size, since there are so many variables foradaptiveCardHostConfig. 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
defaultStyleOptionsas 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 William Wong (@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 indefaultStyleSetOptions, so his input will be important.Lol Thomas Durnford (@tdurnford) figured it out below
corinagum commentedon Jun 10, 2019
William Wong (@compulim) What are the steps for providing a new host config?
tdurnford commentedon Jun 13, 2019
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
Web Chat
Screenshot
corinagum commentedon Jun 13, 2019
Awesome, thanks Thomas Durnford (@tdurnford). We should document this. I'll reassign it to myself and add that to our root README.md
mamhh commentedon Jul 2, 2019
Thomas Durnford (@tdurnford) Corina (@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 commentedon Jul 2, 2019
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 commentedon Jul 2, 2019
Could you please specify a date ??
tdurnford commentedon Jul 2, 2019
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.