My goal is to dynamically assign CSS class names based on the card type to the corresponding HTML element.
I've achieved this by utilizing the [AdaptiveCard.customCssSelector] 1 attribute.
For example, you can simply include
builder.card.customCssSelector = "ac-thumbnail";class="ac-container ac-thumbnail"However, I want to avoid relying on Botframework-Webchat updates and instead integrate this logic into a middleware. As per the BotFramework-Webchat documentation, it's feasible to add attachmentMiddleware to the renderWebChat function to manipulate HTML elements.
Although I'm able to retrieve activities and attachments, I face difficulty in altering HTML blocks or adding a CSS selector.
Below is my middleware code:
export const cardCssSelector = ({ dispatch }) => next => action => {
if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
const { activity } = action.payload;
for (var index in activity.attachments) {
const card = activity.attachments[index].content;
if(card.tap && card.tap.value){
card.customCssSelector = 'tap';
}
}
}
console.log(action);
return next(action);
};
Unfortunately, this approach doesn't work as the attachments lack the customCssSelector attribute.