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

Question

I have 2 HTML's with an WebChat in it. When trying to chat from one WebChat to another the messages appear on the same side similar to this:

I read that you have to enter a userID to the WebChat but that didn't help. Does anyone have an advice on how to fix it?

This is one WebChat:

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

and this is the second WebChat:

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

The Token for both HTML's is the same.

Answer 1

Since both conversations are sharing the same token, Web Chat will display all of the messages from both users as a single user. I recommend that you create two conversation with two different tokens instead of using a single token. Then you can link the two conversation and manage the conversation flow from the bot.

Web Chat v4

Generate two different tokens - each response has a token and a conversation id. Then create two custom store middlewares that adds the other conversation's id to each outgoing activity's channel data. This id will be used in the bot to look up the conversation reference to forward the message to the other user.

Take a look at the Piggyback Data on Every Outgoing Activity Web Chat Sample for more details on adding custom channel data.

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 (Node)

Direct Line will send a conversation update event to the bot when the conversation is created for each user. This event will trigger the onMemberAdded activity handler where you can capture the conversation reference. Note, you should add a user id to the request when you generate a Direct Line token so the onMembersAdded handler is triggered before the user messages the bot. Take a look at this GitHub Issue for more details.

Incoming messages from each user will trigger the onMessage handler. In the handler, retrieve the conversation id from the channel data that was added on the client side. Use the id to retrieve the conversation reference and send the message as a proactive message to the other conversation.

This sample saves the reference in a dictionary for simplicity; however, you should manage the conversation references in persistent storage in production.

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

Screen Capture

Hope this helps