Microsoft Bot Framework，从 Javascript 设置用户状态

Question

我正在尝试使用 Microsoft Bot Framework v4 和 Azure 来证明一个简单的支持和票务机器人的概念。我已经通过 Bot Framework Composer 成功创建了一个机器人，并使用 Web App Bot 将其部署到 Azure。我已经在我的测试站点上配置并安装了 BotFramework-WebChat 组件，并成功地将机器人连接到它。 BotFramework-WebChat 组件通过 cdn.botframework.com 安装。测试站点是一个单页应用程序，机器人与它并排放置，以便用户可以方便地访问它。

一切都按预期进行。但是，我想 post 根据当前浏览器状态向 Bot 提供某些上下文信息。例如，如果用户在与机器人交谈时正在查看产品 ABC，我希望机器人知道这一点。为了实现它，我想更新 bot 通道上的用户状态，最好是在主应用程序状态更改时通过 vanilla JavaScript。我想在后台无缝地执行此操作，并且我不想依赖其他框架，例如 React（Microsoft 文档大量引用 React，不幸的是我不了解特定产品，因此找到它 difficult/impossible关注）。

因此，我的问题分为两部分。以上是否可以使用 BotFramwork-WebChat 组件提供的 API，如果是这样，人们将如何去做？如果不可能的话，如果存在此类替代方法，我也将不胜感激任何有关替代方法的帮助。

Answer 1

如果您只想在用户呈现网络聊天会话时捕获信息，您可以通过发送自定义事件来实现，您还需要在机器人代码中处理该事件。如果您尝试创建跨多个页面持续存在的机器人的单个实例，并且您希望每次都发送页面详细信息，则此特定代码将不起作用，但相同的概念应该申请。此方法仅将初始连接的详细信息发送到 bot。

首先，您需要通过自定义商店从您的机器人渲染中发送一个事件。这是我的做法。

    var store = window.WebChat.createStore({}, function(dispatch) { return function(next) { return function(action) {
        if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
            dispatch.dispatch({
                type: 'WEB_CHAT/SEND_EVENT',
                payload: {
                    name: 'webchat/join',
                    value: {
                        browserLanguage: navigator.languages[0],
                        page: window.location.href,
                        language: getCookie("LANGUAGE"),
                        country: getCookie("COUNTRYNAME")
                    }
                }
            });
        }

        return next(action);
        
    }}});

现在还需要设置您的机器人来处理该事件。同样，我将相关详细信息存储在“值”中，但您可以根据需要以不同方式设计您的对象。我将其存储在 userData.siteContext 下的用户状态中，然后可以在整个机器人应用程序中使用这些信息。如果您想要基于此信息的独特欢迎消息，您还需要将其添加到 if 语句中，并添加一个条件，即 onMembersAdded 处理程序中的欢迎消息仅针对非直线频道。

if (context.activity.name && context.activity.name === 'webchat/join') {
    const userData = await this.userDialogStateAccessor.get(context, {});
    userData.siteContext = context.activity.value;

    // siteContext specific welcome message if desired

    await this.userState.saveChanges(context);
    await this.conversationState.saveChanges(context);
}

如果您在原始连接之外的其他时间需要此信息，您应该能够从您的页面创建另一个事件并在 bot 中设置适当的处理程序。

Answer 2

回答我自己的问题，这确实可以通过对用于 create/render 网络聊天组件的示例代码进行微小修改来实现。

首先，我对 DirectLine 客户端的创建进行了参数化。一旦设置了 WebChat 组件，此客户端是发布到频道的关键：

var dl = window.WebChat.createDirectLine({ token: '#yourtokenhere#' });

window.WebChat.renderWebChat(
  {
    directLine: dl,
    userID: '#yourid#',
    username: '#yourusername#',
    locale: 'en-US'
  },
    document.getElementById('#yourtargetelement')
);

然后我使用客户端使用 postActivity 方法将事件发布到频道：

dl.postActivity({
  from: { id: '#youruserid#', name: '#yourusername#' },
  type: 'event',
  name: '#youreventname#',
  value: {
    // Put your parameters here
  }
})

在 Composer 方面，我设置了一个触发器以在名称为#youreventname# 的“自定义事件”上激活。然后我可以从值属性中解析出参数并设置我的用户状态。

我个人发现 documentation for the Microsoft Direct Line JS protocol 比直接通过 WebChat 文档更容易使用。

感谢@billoverton 给予使用自定义事件的启发。

Microsoft Bot Framework，从 Javascript 设置用户状态

Microsoft Bot Framework, Set User State From Javascript

javascript

azure

botframework