Using backchannel with React Client - Bot framework

Question

I am using NodeJS to build a bot based on MS bot framework. I want to build the client with TypeScript + React, however, I want to be able to send messages once the user is logged in. By searching online, I figured I am able to do this using backchannel, as described in this page.

However, I want to use it in React app, as described here

I could make the React app work in my application, however I need to integrate the backchannel as well.

I don't understand why in every sample we're using something different. For example, in the React app, we're using BotChat.Chat .. but in the backchannel, we're using BotChat.App .. what's the difference between these two?

Also, I am going to use the backchannel in my React app, I would need to declare BotChannel and pass it to BotChat.App, how would this work in React where we're using BotChat.Chat?

Any example or clear documentation on these differences and how to implement backchannel with React will be much appreciated.

Thanks.

Answer 1

In order to reference the chat later on you initialize your chat div something like this:

<div>
   <Chat ref={(chat) => {this._chat = chat;}} directLine={{ secret: "<secret>" }} user={{ id: 'user_id', name: 'user_name' }} />
</div>

The important part here is that you include a definition for ref like so:

ref={(chat) => {this._chat = chat;}}

After this is initialized you can access the botConnection later on via this._chat.botConnection and make .postActivity() calls like this:

this._chat.botConnection
    .postActivity({ type: "message", value: "hi", from: { id: "me" } })
    .subscribe(id => console.log("success"));

With regard to the difference between App and Chat, the quick way to put it is that App is a full modal while chat is broken down a little more for easier customization. App extends chat.