Как определить конец диалога в Webchat / DirectLine?

Question

Я создал простого чат-бота с botbuilder в Node.js.Из-за данной среды я включил чат-бота через пользовательский iframe.Веб-интерфейс - это веб-чат с DirectLine.Как определить конец диалогового окна в родительском окне?

Я не смог найти правильный способ определения конца диалогового окна в WebChat / DirectLine.

Отображениемой чат со следующим кодом внутри iframe:

const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
 if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
  dispatch({
   type: 'WEB_CHAT/SEND_EVENT',
   payload: {
    name: 'webchat/join',
    value: { language: window.navigator.language }
   }
 });
}
 return next(action);
});

 window.WebChat.renderWebChat({
   directLine: window.WebChat.createDirectLine({ token: "thisismytoken" }),
   store,
   userID: '1',
   username: username,
   styleOptions: {
    botAvatarImage: "https://mylink.azurewebsites.net/avatar_user_1.png",
    userAvatarImage: "https://mylink.azurewebsites.net/avatar_user_1.png"
   }
 }, document.getElementById('webchat'));

В Node.JS я заканчиваю разговор следующим кодом:

            return await step.endDialog();

Как только запускается endDialog, я хочупредставить родителя iFrame.Кто-нибудь может дать мне руководство?

Answer 1

Для этого требуется всего несколько модификаций в вашем коде.

Сначала, в вашем боте, отправьте активность перед вызовом step.endDialog().Это действие будет событием и отправит данные со статусом, который будет выбран вашей страницей.

В этом примере я включаю данные пользователя, чтобы видеть, кто вышел.Я также использую метод sendActivities (), чтобы поблагодарить пользователя при одновременной отправке события.Конечно, вы можете просто использовать sendActivity () для отправки отдельного события.

  async finalStep(step) {
    const user = stepContext.context.activity.from;
    const data = { user: user, dialogStatus: 'complete' };

    await stepContext.context.sendActivities([
      { text: 'Thank you for visiting my bot!', type: 'message' },
      { name: 'data', type: 'event', channelData: { 'data': data } }
    ]);
    return await stepContext.endDialog();
  }

Далее на своей странице используйте метод createStore() и проверьте наличие action.type из DIRECT_LINE/INCOMING_ACTIVITY.При любом входящем действии вы создадите новое Событие, называемое «входящая активность», которое будет принимать полученную полезную нагрузку от бота.

Вы также добавите window.addEventListener с тем же именем, «входящая активность», которая будетперехватите входящие данные и при необходимости проанализируйте их.

Наконец, как вы уже сделали в своем коде, передайте store в компонент renderWebChat.

const store = window.WebChat.createStore( {}, ( { dispatch } ) => next => action => {
  if ( action.type === 'DIRECT_LINE/INCOMING_ACTIVITY' ) {
    const event = new Event('incomingActivity');

    event.data = action.payload.activity;
    window.dispatchEvent(event);
  }

  return next( action );
} );

window.addEventListener('incomingActivity', ({ data }) => {
  const type = data.type;
  if (type === 'event' && data.channelData.data.dialogStatus) {
    const status = data.channelData.data.dialogStatus;
    const user = data.channelData.data.user;
    console.log(`User '${user.name}', with an id of '${user.id}', reached the end of the dialog`);
  }
})

Окно веб-чата:

протоколирование стенограммы консоли бота:

Разработчик браузераконсоль:

Я использую что-то вроде этого довольно регулярно, поэтому должно работать на вас.

Надеюсьпомощи!