User and Bot messages appear on same side of chat container

问题

I built a QnA Maker and integrated it via Direct Line in my Website using BotFramework-WebChat for styling.

Messages of the user and the bot are appearing at the same side of the chat container. I can't figure why.

This is how it currently looks like:

This is the code I'm using:

<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>

回答1:

I wasn't able to reproduce this, but I suspect you are setting your user ID to the same value as the bot ID. When Web Chat receives an activity, it sets the role property in the activity's from attribute based on the ID (you can take a look at the source code here). Web Chat then uses the role to determine how the activity is styled. If the bot id equals the user id, Web Chat will confuse the role attribute and apply the wrong CSS stylings. Try changing the userID value in the render Web Chat options to something else.

Note, the userID value should be unique for each user; otherwise, every conversation will share the same user state.

Hope this helps!

来源：https://stackoverflow.com/questions/57491330/user-and-bot-messages-appear-on-same-side-of-chat-container