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

【问题标题】：Microsoft Bot Framework, Set User State From JavascriptMicrosoft Bot Framework，从 Javascript 设置用户状态
【发布时间】：2021-05-24 22:25:58
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript azure botframework

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

回答我自己的问题，这确实可以通过对用于创建/呈现网络聊天组件的示例代码稍作修改来实现。

首先我已经参数化了 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# 的“自定义事件”。然后我可以从 value 属性中解析出参数并设置我的用户状态。

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

感谢@billoverton 为您提供使用自定义事件的灵感。

【讨论】：