Вы можете отправить событие обратного канала в WebChat от бота, когда пользователь нажимает на карту AdaptiveCard, чтобы вызвать событие на веб-странице.
Простая AdaptiveCard с выбором действия
Сначала создайте AdaptiveCard с selectAction. Обратите внимание, что вы можете добавить selectAction ко всей карте или к другим компонентам на карте, например к изображению или столбцу. Когда пользователь нажимает на часть карты с selectAction, он отправляет боту бот, содержащий атрибут данных, из действия, которое мы можем использовать, чтобы определить, какое действие было инициировано на стороне бота.
Обязательно установите атрибут title, поле data и значение type, которое должно быть Action.Submit.
{
"type": "AdaptiveCard",
"selectAction": {
"type": "Action.Submit",
"id": "tap",
"title": "tap",
"data": { "tap": "Play again"}
},
"body": [
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"size": "Medium",
"weight": "Bolder",
"text": "Click Me!"
},
{
"type": "Image",
"url": "https://usercontent2.hubstatic.com/13896379.jpg"
}],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}
Bot Code - Node Js
1020 * Constructor *
const TAP_PROMPT = 'tap_prompt';
constructor(conversationState, userState) {
...
// Add prompts that will be used by the main dialogs.
this.dialogs.add(new TextPrompt(TAP_PROMPT, () => true));
// Create a dialog that asks the user for their name.
this.dialogs.add(new WaterfallDialog(WHO_ARE_YOU, [
this.promptForTap.bind(this),
this.captureTap.bind(this)
]));
}
Подсказка AdaptiveCard
На одном из шагов вашего Водопада вы можете создать объект ответа, у которого есть AdaptiveCard в качестве вложения. Затем вы можете передать этот ответ на приглашение. Я бы порекомендовал использовать TextPrompt для этого шага.
// This step in the dialog sends the user an adaptive card with a selectAction
async promptForTap(step) {
const reply = {
attachments: [CardFactory.adaptiveCard(Card)]
}
return await step.prompt(TAP_PROMPT, { prompt: reply });
}
Выбор захвата AdaptiveCard
На следующем шаге Водопада вы можете получить атрибут данных, отправленный с AdaptiveCard, открыв step.value. Здесь отправьте активность боту с типом и свойством name. Эти два атрибута будут использоваться для фильтрации входящих действий в веб-чате и запуска соответствующего события.
// This step captures the tap and sends a back channel event to WebChat
async captureTap(step) {
// Edited from original answer
await step.context.sendActivity(`You selected ${step.context.activity.value.tap}`);
// Send Back Channel Event
await step.context.sendActivity({type: 'event', name: 'tapEvent'});
return await step.endDialog();
}
Промежуточное программное обеспечение WebChat
В WebChat мы собираемся создать собственное промежуточное ПО для проверки входящих действий. Когда мы сталкиваемся с действием, которое имеет имя и тип, который мы узнаем, запустите ваше событие на веб-странице В приведенном ниже примере я только предупредил об использовании, которое они нажали на AdaptiveCard.
const store = window.WebChat.createStore(
{},
({ dispatch }) => next => action => {
if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
const { name, type } = action.payload.activity;
if (type === 'event' && name === 'tapEvent') {
alert("You tapped on the AdaptiveCard.");
}
}
return next(action);
}
);
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({ token }),
store,
}, document.getElementById('webchat'));
Для получения более подробной информации о событиях в обратном канале и создании собственного промежуточного программного обеспечения в WebChat, проверьте этот образец в репо WebChat.
Надеюсь, это поможет!