The Microsoft Bot Framework makes it pretty easy to get started creating Chat Bots. If you haven’t gotten started yet, I recommend checking out this site: Bot Framework.

For a recent Bot that I created, we had the need for the Bot to expand. What I mean is, I want my bot chat UI to start out collapsed like a search box but then expand once a user starts talking to my bot.

7F9021F8-69F8-40A0-A26B-8EEC0CD32A1B

 

There are lots of examples for getting started with the Bot Framework. For this post, I will assume you already know how to do that. Hopefully you already know how to hook up the Web Chat control to communicate with your bot – here are some details about that.

I’ll start with the client-side code for this feature

For this feature, we will utilize the Web Chat’s backchannel using the DirectLine connection to the Bot. Then we can respond to events sent to the Web Chat from the bot. Here is the JavaScript needed to do this.

First, create a connection to the Bot with DirectLine:

        var directLine = new BotChat.DirectLine({ secret: "YOUR KEY GOES HERE" })

Next, subscribe to the event. All I am doing is listening for the event named “init” and when it occurs, add a class “fullSize” to the HTML element that hosts the bot.

        directLine.activity$
            .filter(isInitEvent)
            .subscribe(changeSize);

        function isInitEvent(activity) {
            return activity.type === "event" && activity.name === "init";
        }

        function changeSize(activity) {
            console.log("here")
            var container = document.getElementById("bot-chat-container");
            container.classList.add("fullSize");
        }

Lastly, create the Web Chat:

        BotChat.App({
            botConnection: this.directLine,
            user: { id: 'user' },
            bot: { id: 'bot' },
        }, document.getElementById("bot-chat-container"));

I’m just using a little CSS to hide and show the rest of the Web Chat UI. Feel free to enhance this part a little, it could be better. Hopefully you get the idea.

        #bot-chat-container {
            border: 1px solid #333;
            height: 50px;
        }

        #bot-chat-container.fullSize {
            height: 300px;
        }

        .wc-header {
            display: none;
        }

        .fullSize .wc-header {
            display: block;
        }

        .wc-console svg {
            fill: black;
            margin: 11px;
        }

        /* These styles are used to hide the upload button...*/

        .wc-console label {
            display: none;
        }

        .wc-console .wc-textbox {
            left: 10px;
        }

All that is left to show of the UI is this DIV. But this isn’t too exciting:

<div id="bot-chat-container" />

Here is the Server-Side Code

This whole thing is based on an event coming to the Web Chat UI from the Bot on the server. I’m using C# and it is pretty simple stuff. When you create a Bot, the MessagesController is stubbed out for you to handle various Activity Types. In this case, I am concerned with ActivityType.ConversationUpdate. Check to see if the a new member is added to the conversation and if so, send event named “init”.

private async Task&lt;Activity&gt; HandleSystemMessage(Activity message)
        {
            if (message.Type == ActivityTypes.DeleteUserData)
            {
		// ...
            }
            else if (message.Type == ActivityTypes.ConversationUpdate)
            {
                using (var scope = Microsoft.Bot.Builder.Dialogs.Internals.DialogModule.BeginLifetimeScope(Conversation.Container, message))
                {
                    var client = scope.Resolve&lt;IConnectorClient&gt;();
                    if (message.MembersAdded.Any())
                    {
                        foreach (var newMember in message.MembersAdded)
                        {
                            if (newMember.Id != message.Recipient.Id)
                            {
                                var reply = message.CreateReply();
                                reply.Type = ActivityTypes.Event;
                                reply.Name = &quot;init&quot;;
                                await client.Conversations.ReplyToActivityAsync(reply);

                            }
                        }
                    }
                }
            }
		// ... etc. etc.

That’s all.

2 thoughts on “An Expanding Web Chat Control with Bot Framework and C#

  1. Hi Schwammy, this is a great article. Would appreciate if you could share the complete project on how you have wired up the server code with botchat UI?

    Thanks in advance.

    Cheers,
    Shaf

    Reply
  2. Pingback: Dew Drop - January 29, 2018 (#2653) - Morning Dew

Leave a reply

required

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>