Bot Framework网络聊天中的Loader图标

时间:2019-05-28 05:31:59

标签: botframework direct-line-botframework

我正在使用Bot Framework网络聊天。我通过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秒或更长。我了解可以通过使用App Service的Always On功能并按比例扩大计划来稍微改善这一点。有什么方法可以等到反向频道欢迎消息出现并显示加载程序吗?

参考:https://github.com/microsoft/BotFramework-WebChat/pull/1866

1 个答案:

答案 0 :(得分:0)

不幸的是,连接状态显示依赖于从DirectLineJs接收到的事件,并且Web Chat目前不支持自定义其行为。话虽这么说,但是有一种通过分派伪DirectLine事件来完成您要完成的操作的简单方法。

以下是步骤:

  • 创建一个标志,指示机器人是否发送了欢迎消息-received_welcome_message

  • 当Web Chat调度连接已完成事件时,请检查该标志 以确保收到欢迎消息。如果机器人没有 发送了欢迎消息,将欢迎事件发送给机器人并重置了 连接状态为充实。

  • 网络聊天收到活动时 从漫游器中检查是否是欢迎消息。我会推荐 在漫游器端的邮件中添加名称属性以进行检查-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);
  }
);

编辑

一种不太灵活的方法是,在与机器人的连接完成后,调度活动后的未决事件,以模仿机器人发送欢迎消息的过程。请注意,该漫游器没有意识到模仿的活动。请参见下面的代码段。

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

希望这会有所帮助!