Чтобы показать информацию на веб-странице, которая зависит от результата разговора, вам нужно настроить бота на отправку действий, содержащих channelData с результатом, и добавить прослушиватель для действий, которые содержат результат, в ваш компонент WebChat.
Во-первых, в вашем боте, когда вы дойдете до конца потока бесед и получите результат, отправьте действие пользователю с атрибутом name и channelData, который содержит результат. Атрибут name будет использоваться для фильтрации всех входящих действий на стороне разговора. Код в вашем боте должен выглядеть так:
await turnContext.sendActivity({
name: 'result',
channelData: {
payload: {
result: turnContext.activity.text
}
}
});
Теперь мы собираемся добавить специальное промежуточное программное обеспечение в наш компонент WebChat для обработки входящих действий. Когда действия получены, мы можем отфильтровать их по атрибуту name и затем выполнить правильное действие на основе значения результата из channelData. Ваш веб-чат должен выглядеть следующим образом:
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<div id="webchat" role="main"></div>
<script>
(async function () {
// To talk to your bot, you should use the token exchanged using your Direct Line secret.
// You should never put the Direct Line secret in the browser or client app.
// It is being included here only for simplicity
// https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication
const res = await fetch('https://directline.botframework.com/v3/directline/tokens/generate', {
method: 'POST',
headers: {
'Authorization': 'Bearer ' + secret
},
json: true
});
const { token } = await res.json();
// We are adding a new middleware to customize the behavior of DIRECT_LINE/INCOMING_ACTIVITY.
const store = window.WebChat.createStore(
{},
({ dispatch }) => next => action => {
if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
// Get activity from action
const { activity } = action.payload;
// Check if the name attribute in the activity is `result`
if (activity.name === 'result'){
// Get result from channel data
const { result } = activity.channelData.payload;
switch (result) {
case 'result1':
alert(result)
// TODO: Action 1
break;
case 'result2':
// TODO: Action 2
break;
default:
// TODO: Default Action
}
}
}
return next(action);
}
);
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({ token }),
// We will use a custom version of Redux store, which we added middleware to handle backchannel messages.
store
}, document.getElementById('webchat'));
document.querySelector('#webchat > *').focus();
})().catch(err => console.error(err));
</script>
Обратите внимание, что вы не должны хранить секрет Direct Line в браузере или клиентском приложении. Это включено здесь только для простоты. Я также рекомендовал бы посмотреть BotFramework-WebChat Samples - в частности, образец номер 15 .
Надеюсь, это поможет!