【问题标题】：Loader icon in Bot Framework WebchatBot Framework 网络聊天中的加载程序图标
【发布时间】：2019-05-30 07:11:17
【问题描述】：

我正在使用 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;
}

当连接启动时，加载器出现。

在那之后，欢迎消息出现之前大约有 3-5 秒的延迟，与此同时，网络聊天似乎已经为用户准备好了。

3 秒的轻微延迟是可以接受的，但通常延迟高达 10 秒或更长。我知道这可以通过使用应用服务的Always On 功能并扩大计划来略微改善。有没有一种方法可以等待后台频道欢迎消息出现并在此之前显示加载程序？

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

【问题讨论】：

您可以添加用于发送欢迎活动的代码吗？
@tdurnford 添加了handleGetStore的实现
所以您的问题是正在发送欢迎事件，并且机器人在连接微调器仍在显示时响应欢迎消息，即使您在连接完成后发送欢迎事件商店的中间件？
@tdurnford 不。微调器熄灭，但接收欢迎消息有延迟。我在上面附加的第二张快照显示微调器已消失，欢迎消息尚未出现。

标签： botframework direct-line-botframework

【解决方案1】：

不幸的是，连接状态显示依赖于从 DirectLineJs 接收到的事件，而网络聊天目前不支持自定义其行为。话虽如此，通过调度伪 DirectLine 事件，有一种 hacky 方法可以完成您想要做的事情。

以下是以下步骤：

创建一个标志，指示机器人是否已发送欢迎消息 - received_welcome_message。
当网络聊天调度一个连接完成事件时，检查标志以确保已收到欢迎消息。如果机器人没有发送欢迎消息，将欢迎事件发送给机器人并重置连接状态完成。
当网络聊天收到活动时来自机器人，检查它是否是欢迎消息。我会推荐在机器人端向消息添加名称属性以检查 - await context.sendActivity({ text: 'Welcome', name: 'welcome'})。如果 activity 是欢迎消息，发送连接完成事件并将标志设置为 true。

更多细节请看下面的代码sn-ps。

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

编辑

一种不那么老套的方法是在与机器人的连接完成时发送一个发布活动挂起事件，以模仿机器人发送欢迎消息。请注意，机器人不知道被模仿的活动。请参阅下面的代码 sn-p。

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

希望这会有所帮助！

【讨论】：