Azure Web Chat - 消息显示在聊天的同一侧 Window

Question

我有 2 个 HTML，里面有 WebChat。当尝试从一个 WebChat 聊天到另一个 WebChat 时，消息出现在与此类似的同一侧：

我了解到您必须在 WebChat 中输入 userID，但这并没有帮助。有人对如何修复它有建议吗？

这是一个网络聊天：

    <div id="WebChatWindowTest" role="main">
      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
      <script>
         const styleOptions = {
            rootHeight: '450px',
            rootWidth: '100%',
            bubbleBackground: 'rgba(0, 0, 255, .1)',
            bubbleFromUserBackground: 'rgba(0, 255, 0, .1)',
            hideUploadButton: true,

         };

         window.WebChat.renderWebChat(
            {
               directLine: window.WebChat.createDirectLine({

                  token: '' + loginToken
               }),
        userID: 'MyOtherID',
        username: 'MyOtherName',



               styleOptions
            },
            document.getElementById('WebChatWindowTest')
         );

      </script>
</div>

这是第二个网络聊天：

        <div id="WebChatWindow" role="main">
      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
      <script>
         const styleOptions = {
            rootHeight: '450px',
            rootWidth: '100%',
            bubbleBackground: 'rgba(0, 0, 255, .1)',
            bubbleFromUserBackground: 'rgba(0, 255, 0, .1)',
            hideUploadButton: true
         };


         window.WebChat.renderWebChat(
            {
               directLine: window.WebChat.createDirectLine({
                  secret: token
               }),
        userID: 'MyID',
        username: 'MyName',

               styleOptions
            },
            document.getElementById('WebChatWindow')
         );
      </script>
</div>

两个 HTML 的令牌是相同的。

Answer 1

由于两个对话共享同一个令牌，网络聊天会将来自两个用户的所有消息显示为一个用户。我建议您使用两个不同的令牌创建两个对话，而不是使用单个令牌。然后您可以 link 这两个对话并管理来自机器人的对话流。

网络聊天 v4

生成两个不同的令牌 - 每个响应都有一个令牌和一个对话 ID。然后创建两个自定义存储中间件，将另一个对话的 ID 添加到每个传出 activity 的通道数据中。该 id 将在 bot 中用于查找对话引用以将消息转发给其他用户。

查看 Piggyback Data on Every Outgoing Activity 网络聊天示例，了解有关添加自定义频道数据的更多详细信息。

const res1 = await fetch('/directline/token', { method: 'POST' });
const { token: token1, conversationId: conversationId1 } = await res1.json();

const res2 = await fetch('/directline/token', { method: 'POST' });
const { token: token2, conversationId: conversationId2 } = await res2.json();

const store1 = window.WebChat.createStore(
  {},
  () => next => action => {
    if (action.type === 'DIRECT_LINE/POST_ACTIVITY') {
      action = window.simpleUpdateIn(action, ['payload', 'activity', 'channelData', 'conversationId'], () => conversationId2);
    }
    return next(action);
  }
);

const store2 = window.WebChat.createStore(
  {},
  () => next => action => {
    if (action.type === 'DIRECT_LINE/POST_ACTIVITY') {
      action = window.simpleUpdateIn(action, ['payload', 'activity', 'channelData', 'conversationId'], () => conversationId1);
    }
    return next(action);
  }
);

window.WebChat.renderWebChat({
    directLine: window.WebChat.createDirectLine({ token: token1 }),
    store: store1
  },
  document.getElementById('webchat1')
);

window.WebChat.renderWebChat({
    directLine: window.WebChat.createDirectLine({ token: token2 }),
    store: store2
  },
  document.getElementById('webchat2')
);

BotFramework SDK v4（节点）

Direct Line 会在为每个用户创建对话时向机器人发送对话更新事件。此事件将触发 onMemberAdded activity 处理程序，您可以在其中捕获对话引用。请注意，您应该在生成 Direct Line 令牌时向请求添加用户 ID，以便在用户向机器人发送消息之前触发 onMembersAdded 处理程序。查看此 GitHub Issue 了解更多详情。

来自每个用户的传入消息将触发 onMessage 处理程序。在处理程序中，从在客户端添加的频道数据中检索对话 ID。使用 id 检索对话引用并将消息作为主动消息发送到其他对话。

为简单起见，此示例将引用保存在字典中；但是，您应该在生产环境中管理持久存储中的对话引用。

const { ActivityHandler, TurnContext } = require('botbuilder');

class EchoBot extends ActivityHandler {
    constructor() {
        super();

        // For simplicity, we are just saving the conversation references in an object.
        // In production, they should be maintained and managed in a persistent database structure.
        this.conversationReferences = {};

        // See https://aka.ms/about-bot-activity-message to learn more about the message and other activity types.
        this.onMessage(async (context, next) => {
          const { activity: { channelData: { conversationId }, text }} = context;
          const reference = this.conversationReferences[conversationId];

          if (reference) {
            context.adapter.continueConversation(reference, context => {
              context.sendActivity(text);
            });
          }
          await next();
        });

        this.onMembersAdded(async (context, next) => {

            const membersAdded = context.activity.membersAdded;
            for (let cnt = 0; cnt < membersAdded.length; ++cnt) {
                if (membersAdded[cnt].id !== context.activity.recipient.id) {
                  // Save the conversation reference when a new user is added.
                  const reference = TurnContext.getConversationReference(context.activity);
                  const { conversation: { id } } = reference;
                  this.conversationReferences[id] = reference;
                }
            }
            await next();
        });
    }
}

屏幕截图

希望对您有所帮助

Azure Web Chat - 消息显示在聊天的同一侧 Window

Azure Web Chat - Messages appear on same side in Chat Window

azure

web-chat

botframework

direct-line-botframework

azure-bot-service

网络聊天 v4

BotFramework SDK v4（节点）

屏幕截图