Как использовать activitymiddleware, если действия типа event дважды отправляются BotFramework

Question

Чтобы иметь возможность скрыть sendBox в клиенте веб-чата, мой бот logi c отправляет событие, чтобы сообщить клиенту, чтобы он скрыл sendbox. В клиенте я использую промежуточное ПО, чтобы перехватить это событие и скрыть или показать sendBox. В консоли я вижу, что каждое событие, которое я отправил от бота, дважды обрабатывается промежуточным программным обеспечением, что приводит к неожиданному поведению. Кто-нибудь знает, как с этим справиться?

В моем боте-коде (диалог водопада)

DialogueStep 1.

const hideSendBox =
  {
     name: 'hideSendBox',
     type: 'event'
  };
await stepContext.context.sendActivity(hideSendBox);
return await stepContext.prompt(PROMPT_THAT_DOES_NOT_NEED_SENDBOX, '');

и DialogueStep 2.

const showSendBox =
  {
     name: 'showSendBox',
     type: 'event'
  };
await stepContext.context.sendActivity(showSendBox);
return await stepContext.prompt(PROMPT_THAT_DOES_NEED_SENDBOX, '');

и

DialogueStep 3.

return await stepContext.prompt(PROMPT_THAT_DOES_NEED_SENDBOX, '');

В моем коде веб-чата

const activityMiddleware = () => next => ({ activity, nextVisibleActivity, ...otherArgs }) => {
    const { name, type } = activity;
    if (type === 'event') {console.log(activity)};
    if (type === 'event' && name === 'hideSendBox') {
      document.getElementsByClassName('main')[0].style.visibility = "hidden";
      return () => <Component1 activity={activity} nextVisibleActivity={nextVisibleActivity} />;
    } else if (type === 'event' && name === 'showSendBox') {
      document.getElementsByClassName('main')[0].style.visibility = "visible";
      return () => <Component2 activity={activity} nextVisibleActivity={nextVisibleActivity} />;
    }
    else {
      return next({ activity, nextVisibleActivity, ...otherArgs });
    }
  };

Результат:

1. после отправки первого действия (hideSendbox) промежуточное ПО активности получает событие, а sendBox скрывается
2. после отправки второго действия (showSendbox) промежуточное ПО активности получает второе событие (будет отображаться sendBox), а затем , снова первое событие. В результате sendBox снова скрывается.
3. как только диалог продолжается и бот отправляет другие действия), промежуточное ПО снова получает второе событие и отображается окно sendbox.

Answer 1

activityMiddleware, согласно docs , предназначены для «добавления новых компонентов DOM в существующую в настоящее время DOM действий». Использование этого промежуточного программного обеспечения было бы неправильным для того, что вы пытаетесь сделать.

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

Обратите внимание: команда веб-чата настоятельно не рекомендует вносить прямые изменения в DOM, если это возможно. избегать. Изменяя DOM напрямую, вы открываете себя для возможных критических изменений, если компонент веб-чата будет пересмотрен в будущем.

const store = window.WebChat.createStore( {}, ({ dispatch }) => next => action => {
  if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
    const { activity } = action.payload;
    if (activity.type === 'event') {
      if (activity.name === 'hideSendBox') {
        document.getElementsByClassName('main')[0].style.visibility = "hidden";
      } else if (activity.name === 'showSendBox') {
        document.getElementsByClassName('main')[0].style.visibility = "visible";
      }
    }
  }
} );

Hope of помогите!