How to send custom payload from React bf DIRECT_LINE/CONNECT_FULFILLED to onMembersAdded event

Question

I have been using React webchat to interact with the botframework. I need to send some custom payload to onMembersAdded event.

Reference link

Below is my code

if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
  dispatch({
    type: 'WEB_CHAT/SEND_EVENT',
    payload: {
      name: 'webchat/join',
      value: {
        language: window.navigator.language,
        key: "customdata",  // custom value
      }
    }
  });
}

My app service logic

this.onMembersAdded(async (context, next) => {
    console.log('Running onMembersAdded Activity.');
    console.log(`Processing onMembersAdded Activity :: ${JSON.stringify(context.activity)}`);
    
    await context.sendActivity('Welcome to the QnA Maker sample! Ask me a question and I will try to answer it.');

    // By calling next() you ensure that the next BotHandler is run.
    await next();
});

Log response

{
  "type": "conversationUpdate",
  "id": "Il5FyDXlgNn",
  "timestamp": "2022-03-23T12:36:21.930Z",
  "serviceUrl": "https://webchat.botframework.com/",
  "channelId": "webchat",
  "from": {
    "id": "9sdfs15-0b2a-43b1-9c7e-7d29ffa79f23"
  },
  "conversation": {
    "id": "KywsdfkRLNGDCxjBNQQsVn-in"
  },
  "recipient": {
    "id": "xxx_xxx@B6i2sd3Yvs4",
    "name": "xxx_xxx"
  },
  "membersAdded": [
    {
      "id": "xxx_xxx@B6i2sd3Yvs4",
      "name": "xxx_xxx"
    },
    {
      "id": "9sdfs15-0b2a-43b1-9c7e-7d29ffa79f23"
    }
  ],
  "locale": "en-US",
  "rawTimestamp": "2022-03-23T12:36:21.9302875Z",
  "callerId": "urn:botframework:azure"
}

Unable to see my custom payload in log response.

I could use onEvent event and check for (context.activity.name), but I'm curious to know how's its done with onMembersAdded event.

Answer 1

The issue might be raising because of the React JS version. As there are some glitches in handling Webchat with React V17.0.2 and it breaks the operation often. Try to downgrade the version of React to v16.8.6.

https://github.com/microsoft/BotFramework-WebChat/issues/4205

Answer 2

The issue is not tied to the React version or even React, at all.

Instead, it is a bit of a race condition. The ConversationUpdate activity occurs when the DirectLine object in your Web Chat client establishes a connection with the Azure Bot Service. The connector then issues the ConversationUpdate activity to the bot that, essentially, says 'Hey, I'm seeing some activity here. This "member" just joined.' This activity is automatic and cannot be affected by either the bot or the client (ie Web Chat).

Here's the problem: When you dispatch an event, message, etc., during DIRECT_LINE/CONNECT_FULFILLED , it can collide with the ConversationUpdate that also occurs. The result is the ConversationUpdate wins and the Web Chat activity is 'lost'.

Not to fear...there are two possible ways to overcome this.

One, wrap the Web Chat dispatch action in a setTimeout() with a delay of 100-200 ms.

Two, dispatch the action on DIRECT_LINE/CONNECT instead of DIRECT_LINE/CONNECT_FULFILLED .

In my testing, either of these options solves the problem and should solve it for you, as well.

Hope of help!