Как создать боковое окно или фрейм, который отображает данные, собранные с помощью веб-чата на одной веб-странице? - PullRequest
Новая
       17

Как создать боковое окно или фрейм, который отображает данные, собранные с помощью веб-чата на одной веб-странице?

0 голосов
/ 09 апреля 2019

Я создаю чат-бота через среду ботов Microsoft и недавно развернул его как веб-чат на веб-странице.На моей веб-странице важно, чтобы у меня была боковая панель, в которой отображаются данные, которые собираются и рассчитываются с помощью бота.

Может кто-нибудь помочь мне создать это?Прямо сейчас я не знаю, как создать это окно / окно / iframe.

Мой чат-бот ведет переговоры с пользователем.Я хочу показать пользовательские данные, такие как элементы, которые доступны для переговоров, в виде информационного окна.Он должен быть в состоянии обновить его после события, которое происходит во время чата.До сих пор я реализовал веб-чат с HTML-кодом веб-страницы, как описано в документации Microsoft для веб-чата.

1 Ответ

1 голос
/ 10 апреля 2019

Самый простой способ отобразить информацию, собранную из чата, - это отправить назад события канала от бота с данными, а затем перехватить сообщение с помощью специального промежуточного программного обеспечения активности в WebChat.Затем вы можете обрабатывать данные на веб-странице так, как вам нравится.

Bot - NodeJs SDK v4

В боте мы собираемся отправлять события канала назадна веб-чат с данными, которые мы собрали в чате.По сути, вам просто нужно отправить действие со свойством type, для которого установлено значение «event», а для атрибута name установлено некоторое строковое значение - в этом случае мы будем использовать данные.Данные разговора будут инкапсулированы в данные канала активности. 

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);
  });

Снимок экрана

enter image description here

Поскольку WebChat создан с использованием React, я настоятельно рекомендую также создать эту веб-страницу с помощью React.Уже есть пример - customization-selectable-Activity - который разбивает страницу на два столбца, в одном из которых содержится веб-чат, а в другом - инспектор действий.Вы можете легко изменить этот образец, чтобы он соответствовал вашим требованиям, добавив пользовательское промежуточное программное обеспечение в WebChat в этом примере и изменив представление инспектора на таблицу данных.

Запрос токена 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();

Надеюсь, это поможет.

...