How to Connect Azure Bot Service to Xamarin.Forms Chat Control
Tags: xamarin, csharp, dotnet, android
Published: 2020-04-16 11:54:55

---
title: How to Connect Azure Bot Service to Xamarin.Forms Chat Control
published: true
date: 2020-04-09 10:00:37 UTC
tags: xamarin, csharp, dotnet, android
canonical_url: https://www.syncfusion.com/blogs/post/how-to-connect-azure-bot-service-to-xamarin-forms-chat-control.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2020/04/How-to-connect-Azure-bot-service-to-Xamarin.Forms-Chat-Control.jpg
---

This blog will help you connect with Azure Bot Service and configure it in your Xamarin.Forms application using Syncfusion’s [Chat control](https://www.syncfusion.com/xamarin-ui-controls/xamarin-chat), which you will then use to send and receive messages between the bot and the user.

Don’t have a bot service yet? Follow Microsoft’s documentation to [create a bot service](https://docs.microsoft.com/en-us/azure/bot-service/abs-quickstart?view=azure-bot-service-4.0) and [generate a direct line address](https://docs.microsoft.com/en-us/azure/bot-service/bot-service-channel-connect-directline?view=azure-bot-service-3.0) for it.

We have already created an Azure Bot Service named **ChatBot\_Testing\_Syncfusion** to demonstrate the Azure connectivity with our Chat control. This Azure Bot Service simulates a flight ticket booking service.

## Required packages

First, install the following NuGet packages from [nuget.org](https://www.nuget.org/) in your Xamarin.Forms application:

- [Bot.Connector](https://www.nuget.org/packages/Microsoft.Bot.Connector/)
- [Xamarin.SfChat](https://www.nuget.org/packages/Syncfusion.Xamarin.SfChat/18.1.0.36-beta)

## Setting up the Chat control

Create an instance of the Chat control and set up all the basic things like [binding a message collection](https://help.syncfusion.com/xamarin/chat/getting-started#binding-messages-to-sfchat), [setting up a current user for conversation](https://help.syncfusion.com/xamarin/chat/messages#setting-current-user-for-conversation), and [setting up the typing indicator](https://help.syncfusion.com/xamarin/chat/typing-indicator).

The following code example demonstrates the basic setup of an SfChat instance.

```xml
……
<sfChat:SfChat x:Name="sfChat"
            Messages="{Binding Messages}"
            TypingIndicator="{Binding TypingIndicator}"
            ShowTypingIndicator="{Binding ShowTypingIndicator}"
            CurrentUser="{Binding CurrentUser}" />
……
```

## Initializing connections

After setting up the Chat control, create a new class ( **BotService.cs** in our examples) that will be used to send and receive messages between the user and the bot. Messages between the bot and the client application can be exchanged using [HttpClient GetAsync ](https://docs.microsoft.com/en-us/dotnet/api/system.net.http.httpclient.getasync?view=netframework-4.8)and [Http PostAsync](https://docs.microsoft.com/en-us/dotnet/api/system.net.http.httpclient.postasync?view=netframework-4.8) requests or by using a [web socket](https://docs.microsoft.com/en-us/dotnet/api/system.net.websockets.websocket?view=netframework-4.8). Here, we have used [HttpClient](https://docs.microsoft.com/en-us/dotnet/api/system.net.http.httpclient?view=netframework-4.8) to establish the connection between the bot and the application.

A [direct line key](https://docs.microsoft.com/en-us/azure/bot-service/bot-service-channel-connect-directline?view=azure-bot-service-4.0#manage-secret-keys) is a unique secret key that enables your client application to communicate with your bot by using the Direct Line channel. This secret key will be provided when you create an Azure Bot Service. So, in this class, initialize the required HTTP connections with the proper direct line key of the Bot Service as shown below.

In the following code example, the **directLineKey** and **botBaseAddress** fields hold the corresponding values to establish the connection.

```xml
…..
/// <summary>
/// Direct line address to establish connection.
/// </summary>
private string botBaseAddress = "https://directline.botframework.com/v3/directline/conversations/";
 
/// <summary>
/// Direct line key to establish connection to syncfusion bot.
/// </summary>
private string directLineKey = "XYeLq1aytPw.4wbtMs2r7XEzdkG2_wyxGpP676wpfFS_hSaSJW8IjQg";
 
public BotService(FlightBookingViewModel viewModel)
{
    this.ViewModel = viewModel;
    InitializeHttpConnection();
}
 
private void InitializeHttpConnection()
{
    this.httpClient = new HttpClient();
    this.httpClient.BaseAddress = new Uri(this.botBaseAddress);
    this.httpClient.DefaultRequestHeaders.Accept.Clear();
    this.httpClient.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
    this.httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", this.directLineKey);
    this.httpClient.Timeout = Timeout.InfiniteTimeSpan;
 
    // Initializes a new conversation and gets the first message from the bot.
    if (CheckInternetConnection())
    {
    SetupConversation();
    }
}
………
```

You can initialize this **BotService.cs** class in the **ViewModel’s** constructor.

```xml
//FlightBookingViewModel.cs
 
public class FlightBookingViewModel : INotifyPropertyChanged
{
………..
public FlightBookingViewModel()
{
…….
    this.BotService = new BotService(this);
……
}
…………..
}
```

## Setting up a conversation

Once the connections are established, it’s time to send and receive messages to and from the bot. To get the first message from the bot, set up a conversation by adding an empty activity and add this activity to the Bot Service using the [httpClient.PostAsync](https://docs.microsoft.com/en-us/dotnet/api/system.net.http.httpclient.postasync?view=netframework-4.8)method.

```cs
//BotService.cs
 
private async void SetupConversation()
{
    HttpContent contentPost = new StringContent(JsonConvert.SerializeObject(new Conversation()), Encoding.UTF8, "application/json");
    try
    {
        HttpResponseMessage response = await this.httpClient.PostAsync("/v3/directline/conversations", contentPost);
        if (response.IsSuccessStatusCode)
        {
            string conversationInfo = await response.Content.ReadAsStringAsync();
            this.conversation = JsonConvert.DeserializeObject<Conversation>(conversationInfo);
            await Task.Delay(2000);
 
            Activity activity = new Activity();
            activity.From = new ChannelAccount()
            {
                Id = ViewModel.CurrentUser.Name,
                Name = ViewModel.CurrentUser.Name,
            };
 
            activity.Type = "add";
            activity.Action = "add";
            this.PostActvity(activity);
        }
    }
    catch(Exception ee) 
    {
                 
    }
}
```

All the bot conversations happen in the form of [Activities](https://docs.microsoft.com/en-us/dotnet/api/microsoft.bot.schema.activity?view=botbuilder-dotnet-stable): the bot receives messages in the form of an activity and sends its responses in the form of an activity. So, we convert the user message into an activity and send it to the bot for further processing as shown in the following code example.

```cs
//BotService.cs
 
private async void PostActvity(Activity activity)
{
    StringContent contentPost = new StringContent(JsonConvert.SerializeObject(activity), Encoding.UTF8, "application/json");
    string conversationUrl = this.BotBaseAddress + this.conversation.ConversationId + "/activities";
 
    try
    {
        // Calling this method posts the user message as an activity to the bot.
        await this.httpClient.PostAsync(conversationUrl, contentPost);
 
        // Calling this method gets the reply message from the bot, processes the reply, adds it to the message collection, and sends it to the user.
        await this.ReadMessageFromBot();
    }
    catch { }
}
```

![Bot in Action](https://www.syncfusion.com/blogs/wp-content/uploads/2020/04/Bot-in-Action-570x1024.jpg)<figcaption>Bot in Action</figcaption>

## Send and receive messages between the user and the bot

To send user responses to the bot and send bot responses to the user, first handle the collection change of the bound message collection using the **Messages.CollectionChanged** event. From this event handler, send the user response to the bot and change the visibility of the typing indicator while the bot responds to the user message as shown below.

We have triggered this event in the **FlightBookingBehavior** class file.

```cs
public class FlightBookingBehavior : Behavior<SampleView>
{
…..
protected override void OnAttachedTo(SampleView bindable)
{
    ……
    this.viewModel.Messages.CollectionChanged += OnMessagesCollectionChanged;
    ….
}
……..
private  async void Messages_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
    if (e.Action == NotifyCollectionChangedAction.Add)
    {
        foreach (var chatItem in e.NewItems)
        {
            TextMessage textMessage = chatItem as TextMessage;
            if (textMessage != null && textMessage.Author == this.viewModel.CurrentUser)
            {
                this.viewModel.ShowTypingIndicator = true;
                // Calling this method sends the user response to the bot.
                this.viewModel.BotService.SendMessageToBot(textMessage.Text);
            }
            else
            {
                await Task.Delay(50);
                this.sfChat.ScrollToMessage(chatItem);
            }
        }
    }
}
 
…….
}
```
```csharp
//BotService.cs
internal void SendMessageToBot(string text)
{
    Activity activity = new Activity()
    {
        From = new ChannelAccount()
        {
            Id = this.ViewModel.CurrentUser.Name
        },
 
        Text = text,
        Type = "message"
    };
 
    // Sends user message as activity to the bot.
    PostActvity(activity);
}
```
Once the user message is sent to the bot, the bot replies to the user message in a new activity. To read messages from the bot, deserialize the activity obtained from the Bot Service as shown in the following code example.

```csharp
internal async Task ReadMessageFromBot()
{
    try
    {
        string conversationUrl = this.BotBaseAddress + this.conversation.ConversationId + "/activities?watermark=" + this.watermark;
        using (HttpResponseMessage messagesReceived = await this.httpClient.GetAsync(conversationUrl, HttpCompletionOption.ResponseContentRead))
        {
            string messagesReceivedData = await messagesReceived.Content.ReadAsStringAsync();
            ActivitySet messagesRoot = JsonConvert.DeserializeObject<ActivitySet>(messagesReceivedData);
 
            if (messagesRoot != null)
            {
                this.watermark = messagesRoot.Watermark;
                Device.BeginInvokeOnMainThread(() =>
                {
                    foreach (Activity activity in messagesRoot.Activities)
                    {
                        if (activity.From.Id == "ChatBot_Testing_Syncfusion" && activity.Type == "message")
                        {
                            this.ProcessBotReplyAndAddMessage(activity);
                        }
                    }
                });
            }
        }
    }
    catch (Exception ex)
    {
        System.Diagnostics.Debug.WriteLine("Exception while reading Bot activity. exception message - {0}", ex.Message);
    }
 
    this.ViewModel.ShowTypingIndicator = false;
    this.ViewModel.ShowBusyIndicator = false;
}
```

After deserializing the bot’s reply message, add it to the message collection and send this to the user as shown in the following code example.

```csharp
private void ProcessBotReplyAndAddMessage(Activity activity)
{
    if (!string.IsNullOrEmpty(activity.Text))
    {
        if (activity.Text == "What else can I do for you?")
        {
            return;
        }
 
        if (activity.Text == "When are you planning to travel?" || activity.Text == "Oops! This doesn’t seem to be a valid date. Please select a valid date.")
        {
            this.AddCalendarMessage(activity.Text);
        }
        else
        {
            this.AddTextMessage(activity);
        }
    }
}
```

## Add message to chat and display suggested actions

Each bot activity will come with a [SuggestedActions](https://docs.microsoft.com/en-us/dotnet/api/microsoft.bot.schema.suggestedactions?view=botbuilder-dotnet-stable) property that provides the list of available options as a response to a user message. To display suggestions along with the messages in the Chat control, check for the bot’s **Activity.SuggestedActions** property and assign this to the [Message.Suggestions](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfChat.XForms~Syncfusion.XForms.Chat.MessageBase~Suggestions.html) property as shown below. You can find more details about showing suggestions in the Chat control [here](https://help.syncfusion.com/xamarin/chat/suggestions).

```csharp
private void AddTextMessage(Activity activity)
{
    TextMessage message = new TextMessage();
    message.Text = activity.Text;
    message.Author = this.ViewModel.Bot;
    message.DateTime = DateTime.Now;
 
    if (activity.SuggestedActions != null && activity.SuggestedActions.Actions.Count > 0)
    {
        ChatSuggestions suggestions = new ChatSuggestions();
        var suggestionItems = new ObservableCollection<ISuggestion>();
        foreach (CardAction action in activity.SuggestedActions.Actions)
        {
            var suggestion = new Suggestion();
            suggestion.Text = action.Title;
            suggestionItems.Add(suggestion);
        }
 
        suggestions.Items = suggestionItems;
        message.Suggestions = suggestions;
    }
 
    ViewModel.Messages.Add(message);
}
```

![Bot Communicating with User](https://www.syncfusion.com/blogs/wp-content/uploads/2020/04/Bot-Communicating-with-User-588x1024.jpg)<figcaption>Bot Communicating with User</figcaption>

## Conclusion

You can find the entire sample on [GitHub](https://github.com/SyncfusionExamples/Azure-bot-service-sample-using-Xamarin.Forms-chat-control) where we have used the [Chat](https://www.syncfusion.com/xamarin-ui-controls/xamarin-chat) control to configure an Azure Bot Service that simulates a flight ticket booking service. I hope you will now play around with the Chat control and Azure Bot Service yourself. These documentation links on the [Chat](https://help.syncfusion.com/xamarin/chat/getting-started) control and [DirectLine key concepts](https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-concepts?view=azure-bot-service-3.0) might come in handy, just in case you need them.

If you’re interested in a step-by-step video tutorial to set up Azure, integrate AI with it, and configure it in your Xamarin.Forms application with the Chat control, check out my video tutorial on [YouTube](https://youtu.be/ARiGtjjh5Z0).

I hope you found this blog interesting and exciting. Let me know your thoughts of the new Chat control in the comments section below.

As always, you can also contact us through our [support forum](https://www.syncfusion.com/forums), [Direct-Trac](https://www.syncfusion.com/support/directtrac/), or [feedback portal](https://www.syncfusion.com/feedback/). We’re happy to assist you.

The post [How to Connect Azure Bot Service to Xamarin.Forms Chat Control](https://www.syncfusion.com/blogs/post/how-to-connect-azure-bot-service-to-xamarin-forms-chat-control.aspx) appeared first on [Syncfusion Blogs](https://www.syncfusion.com/blogs).