BotChat | pkg update pkg upgrade pkg install python2 git git clone

It isn't documented anywhere, but best practice is what is demonstrated via the samples, by use of the Web Chat redux store and its list of available actions.

Essentially, Web Chat v4 is built on top of BotFramework-DirectlineJS which does use observables. Web Chat then translates the Direct Line observables into its own methods for consumption internally and by the user.

As you noted, it is possible to use the Direct Line observables in Web Chat but it is neither the best method nor the best practice to do so. Primarily, because Web Chat wasn't specifically designed around their use, except internally. It can work, but it opens you up to potentially curious behavior.

From Cilent Side

Your issue looks related to the name of the event. The WebChat is sending an event named requestWelcomeDialog, where your bot code is looking for an event named webchat/join. If you change one of them, it should work.

There are two possibilities for handling welcome messages.

1. Conversation Update. DirectLine broadcasts a conversation update event by default, however this is not preferred. This event will end up in OnMembersAddedAsync.

2. Custom Event. Send a custom event using WebChat v4, as described in this sample. This event will end up in OnEventActivityAsync.

My advice would be to upgrade to the new WebChat (v4) and to have a look at this sample. The ConversationUpdate has limitations and you are more flexible by sending a custom event.

The first problem is that you're using Bot Chat. Bot Chat is Web Chat v3 and it's deprecated. You should be using Web Chat v4 according to the instructions in the repo.

The second problem is that you're trying to respond to a custom event using OnMembersAddedAsync which is only triggered by conversation update activities. You can see how to send and respond to welcome events by following the instructions in this issue and this sample. The C# equivalent would look like this:

If you're debugging in Visual Studio, you can click on "View Details" to see the whole exception object.

For an ErrorResponseException, you can see the actual error message that was returned in the HTTP response. In this case it says "Invalid activities" which makes it clear that something is wrong with the activities you're trying to send.

It turns out you're not specifying the recipient of your activities. If you specify a recipient then you should get past your "BadRequest" exception.

However: There are a few more gotchas you might run into. Even if you don't get an exception, there are some things that can make SendConversationHistory fail without error while providing no feedback for why your activities aren't showing up in the chat.

Your strategy for populating the ID property is risky because your bot might send a message to the conversation before calling SendConversationHistory. If your bot had sent a message to the user during that same turn, it will have the same activity ID that you're trying to assign to the activity in the conversation history. This will cause a conflict and you won't see the activity show up. I recommend formatting the ID in some unique way that doesn't resemble the ID values that Direct Line automatically generates.

I was able to send your activities successfully by modifying the code like this:

Unfortunately, the development team removed the bot name from the timestamp in Web Chat v4; however, you can use some of Web Chat's middlewares - the Redux Store and Activity middlewares - to add the bot name above each message set. I put together a sample to illustrate how to do this. Basically, in the store middleware, we are labeling which activities should display the bot name by checking the last message in the transcript and adding the showDisplayName to the activities' channel data which is true if the last message was not from the bot and false otherwise. Then in the Activity middleware, we are adding the bot name to the activity in a div if the showDisplayName value is true.

Web Chat v4 - Display Bot Name Sample

Looking at the above posted code, it looks like you are passing the token as a secret. I would recommend you just pass one not both.

Also, I would recommend you to upgrade to web chat v4 as it provides more support when it comes to customization. This sample provides a detailed guide on how to migrate from Web Chat v3 to v4.

According to this issue Here

We omitted the chat title in Web Chat v4 (compare to v3) because:

It is one of the most popular customization

It can be easily done in HTML by appending HTML code just before Web Chat DOM element

It is more intuitive to do it in plain HTML than "customizing" in Web Chat, feel over-engineered if we do it that way

In this way, the user can customize the title as much as they want, for example, adding buttons to the chat title easily.

Check this Answer here if it has what you need using Javascript

Arrow functions in IE11 are not supported, so you store middleware is causing the problem. Take a look at the code snippet below.