Как создать боковое окно или iframe, в котором отображаются данные, собранные веб-чатом, на одной веб-странице?
Я создаю чат-бот через платформу ботов Microsoft и недавно развернул его как веб-чат на веб-странице. На моей веб-странице важно, чтобы у меня было боковое поле, в котором отображаются данные, собранные и рассчитанные ботом.
Может ли кто-нибудь помочь мне создать это? Прямо сейчас я не знаю, как создать это окно/окно/iframe.
Мой чат-бот ведет переговоры с пользователем. Я хочу показать пользовательские данные, такие как элементы, которые доступны для переговоров, в своего рода информационном окне. Он должен иметь возможность обновить его после события, которое происходит во время чата. До сих пор я реализовал веб-чат внутри html-кода веб-страницы, как это описано в документах Microsoft для веб-чата.
Спасибо за ваш комментарий. На самом деле, я не знаю, как к этому подступиться. Я не знаком с React или Angular. Должно ли это помочь в моей проблеме? Я проверил образцы веб-чата на github, но не смог найти подходящий образец. Чтобы уточнить: у меня есть html-страница. В левой части страницы должен быть запущен веб-чат, а в правой — контейнер/бокс, в котором отображаются данные от чат-бота. Бот написан на js node. Поскольку ему нужны данные от чат-бота, ему необходимо в любом случае общаться с ботом. не знаю как построить..
Ответы 1
Самый простой способ отобразить информацию, собранную из чата, — отправить события обратного канала от бота с данными, а затем перехватить сообщение с помощью специального промежуточного программного обеспечения активности в WebChat. Затем вы можете обрабатывать данные на веб-странице по своему усмотрению.
Бот — NodeJs SDK v4
В боте мы собираемся отправлять события обратного канала в WebChat с данными, которые мы собрали в чате. По сути, вам просто нужно отправить действие со свойством типа, установленным на «событие», и атрибутом имени, установленным на какое-то строковое значение — в этом случае мы собираемся использовать данные. Данные разговора будут инкапсулированы в данные канала активности.
await step.context.sendActivity({name: 'data', type: 'event', channelData: data});
WebChat — Пользовательское ПО промежуточного слоя
В WebChat мы собираемся реализовать специальное промежуточное ПО, которое будет проверять входящие действия на предмет значений типа и имени, которые мы указали ранее. Когда мы сталкиваемся с событием обратного канала, мы можем обрабатывать входящие данные и обновлять веб-страницу.
const store = createStore(
{},
({ dispatch }) => next => action => {
if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
let { channelData, name, type } = action.payload.activity;
channelData || (channelData = {});
if (type === 'event' && name === 'data') {
this.props.handleData(channelData);
}
}
return next(action);
});
Снимок экрана
Поскольку WebChat построен с помощью React, я настоятельно рекомендую создать эту веб-страницу также с помощью React. Уже есть пример — настройка-выбираемая-активность — который разбивает страницу на два столбца с веб-чатом в одном столбце и инспектором активности в другом. Вы можете легко изменить этот образец в соответствии со своими требованиями, добавив в него пользовательское ПО промежуточного слоя в WebChat и изменив представление инспектора на таблицу данных.
Запрос токена веб-чата
Обратите внимание: для простоты начала работы вы можете получить токен DirectLine со стороны клиента; однако рекомендуется создать серверный REST API для создания токенов и управления ими.
const res = await fetch('https://directline.botframework.com/v3/directline/tokens/generate',
{
method: 'POST',
headers: {
'Authorization': `Bearer <SECRET>`,
'Content-Type': 'application/json'
},
});
const { token } = await res.json();
Надеюсь это поможет.
Спасибо за комментарий. Да, это помогает, но я все еще пытаюсь отобразить данные, когда я получил событие от бота. Я попытался перестроить предложенный образец, но веб-страница не позволила мне увидеть какой-либо контент (я полагаю, потому что файл index.html находится в «общедоступной» папке). Надеюсь, если бы я смог запустить образец с моим ботом, мне было бы легче понять, что я могу изменить для своей задачи. Однако для этого образца нет документации, и это сложно понять.
чтобы быть более конкретным: у вас есть простая идея для функции handleData сверху для отображения данных в таблице данных?
Чтобы подключить образец к вашему боту, вам нужно передать токен для бота в файле WebChat.js — в настоящее время он получает токен от MockBot. Функция handleData должна быть передана в качестве реквизита от родителя WebChat и вызываться в промежуточном программном обеспечении. По сути, он должен просто добавить данные в родительское состояние, а затем реагировать, чтобы обновить представление данных, если вы передали элементы состояния в качестве реквизита для представления данных.
большое спасибо @tdurnford. До сих пор я помещал секрет прямо в код, потому что я не знаю, как сгенерировать токен для своего бота. Мне непонятно, где я должен поместить код для http-запроса. Может быть, вы также можете помочь мне с этим? Я попробовал это в Webchat.js вместо MockBot-Line (ln 21): const res = await fetch('directline.botframework.com/v3/directline/tokens/geneрейт', {method: 'POST', header: 'Bearer' + 'SECRET'}); но это не работает .. в качестве альтернативы: есть ли другое решение, в котором я просто помещаю секрет в код вместо использования токенов?
Я только что обновил свой ответ, указав, как создать токен WebChat. Обратите внимание, вы можете сделать это со стороны клиента; однако рекомендуется создать серверную службу для создания токенов и управления ими.
Не могли бы вы добавить несколько фрагментов кода или добавить некоторые сведения о различных подходах, которые вы пробовали? Вы пытаетесь построить один из примеров WebChat или используете фреймворк, такой как React или Angular?