Значок загрузчика в Bot Framework Webchat - PullRequest
Новая
       29

Значок загрузчика в Bot Framework Webchat

0 голосов
/ 28 мая 2019

Я использую Bot Framework Webchat. Есть несколько пользовательских данных, которые я публикую с использованием активности обратного канала через опцию store, чтобы приветствовать пользователя. 

<ReactWebChat
  activityMiddleware={ activityMiddleware }
  directLine={ window.WebChat.createDirectLine( this.state.token ) }
  store = {this.handleGetStore()}
  styleOptions={styleOptions}
/>

handleGetStore возвращает данные магазина: 

handleGetStore(){
    const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
        if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
            dispatch({
                type: 'WEB_CHAT/SEND_EVENT',
                payload: {
                    name: 'userDetail',
                    value: this.state.userDetail
                }
            });
        }
        return next(action);
    });
    return store;
}

Когда соединение инициируется, появляется загрузчик.

enter image description here

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

enter image description here

Допускается небольшая задержка в 3 секунды, но довольно часто она составляет до 10 секунд и более. Я понимаю, что это можно немного улучшить, используя функцию Always On в Службе приложений и увеличив план. Можно ли как-нибудь дождаться появления приветственного сообщения обратного канала и показать загрузчик до этого момента?

Ссылка: https://github.com/microsoft/BotFramework-WebChat/pull/1866

1 Ответ

0 голосов
/ 29 мая 2019

К сожалению, отображение состояния подключения зависит от событий, полученных от DirectLineJs, и в настоящее время Web Chat не поддерживает настройку его поведения.При этом существует хакерский способ выполнить то, что вы пытаетесь сделать, отправив псевдо-события DirectLine.

Вот следующие шаги:

  • Создатьфлаг, который укажет, отправил ли бот приветственное сообщение - received_welcome_message.

  • Когда веб-чат отправляет событие выполненного подключения, установите флажок, чтобы убедиться, что приветственное сообщение было отправлено.получено.Если бот не отправил приветственное сообщение, отправьте ему приветственное событие и сбросьте статус подключения на выполнение.

  • Когда веб-чат получает активность от бота, проверьте, является ли это приветствием.Я бы порекомендовал добавить атрибут name к сообщению на стороне бота, чтобы проверить - await context.sendActivity({ text: 'Welcome', name: 'welcome'}).Если действие является приветственным сообщением, отправьте событие выполненного подключения и установите флаг в значение true.

Для получения более подробной информации ознакомьтесь с фрагментами кода ниже. 

let received_welcome_message = false;
const store = createStore(
  {},
  ({ dispatch}) => next => action => {

    if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {

      if (!received_welcome_message) {
        dispatch({
          type: 'DIRECT_LINE/CONNECT_FULFILLING'
        });
        dispatch({
          type: 'WEB_CHAT/SEND_EVENT',
          payload: { name: 'webchat/join' }
        });

        return
      }

    } else if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY' && action.payload.activity.name === 'welcome') {
      received_welcome_message = true;
      dispatch({
        type: 'DIRECT_LINE/CONNECT_FULFILLED',
      });
    }
    return next(action);
  }
);

Edit

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

const store = createStore(
  {},
  ({ dispatch}) => next => action => {
    console.log(action)
    if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
      dispatch({
        type: 'DIRECT_LINE/POST_ACTIVITY_PENDING',
        meta: { method: 'keyboard' },
        payload: {
          activity: {
            from: { role: "bot" },
            text: "Welcome Message",
            textFormat: "plain",
            timestamp: new Date().toString(),
            type: "message"
          }
        }
      })
    }
    return next(action);
  }

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

...