用户和机器人消息出现在聊天容器的同一侧

Question

我构建了一个 QnA Maker，并通过 Direct Line 将其集成到我的网站中，使用 BotFramework-WebChat 进行样式设置。

用户和机器人的消息出现在聊天容器的同一侧。我不明白为什么。

这是目前的样子：

这是我使用的代码：

<script>
  const styleSet = window.WebChat.createStyleSet({
    bubbleFromUserBackground: 'rgba(227, 227, 227, .1)',
    hideUploadButton: true,
    botAvatarInitials: 'WD',
    sendTypingIndicator: true,
    userAvatarInitials: 'you'
  });

  styleSet.textContent = Object.assign(
    {},
    styleSet.textContent,
    {
      fontFamily: '\'Lato\', sans-serif'
    }
  );
  window.WebChat.renderWebChat(
    {
      directLine: window.WebChat.createDirectLine({
        token: 'xxxxxx'
      }),
      styleSet,
      userID: 'qna-homepage-bot',
      username: 'Web Chat User',
      locale: 'en-US',
    },
    document.getElementById('webchat')
  );
  document.querySelector('#webchat > *').focus();
</script>

Answer 1

我无法重现这一点，但我怀疑您将用户 ID 设置为与机器人 ID 相同的值。当 Web Chat 收到 activity 时，它会根据 ID 在 activity 的 from 属性中设置角色属性（您可以查看源代码 here ).网络聊天然后使用该角色来确定 activity 的样式。如果 bot id 等于用户 id，网络聊天将混淆角色属性并应用错误的 CSS 样式。尝试将呈现 Web 聊天选项中的 userID 值更改为其他值。

注意，每个用户的userID值应该是唯一的；否则，每个会话都将共享相同的用户状态。

希望对您有所帮助！

用户和机器人消息出现在聊天容器的同一侧

User and Bot messages appear on same side of chat container

botframework

direct-line-botframework

azure-bot-service