We are happy to announce that a new Chat control (conversational UI) has been introduced to Syncfusion’s Xamarin.Forms suite in the 2019 Volume 4 release. The Chat control provides a modern, conversational chat experience. It is a flexible control that shows a conversation between two or more users in a fully customizable layout.
The Chat control provides compatibility with popular chatbot development frameworks such as Microsoft’s Bot Framework and Amazon Lex.
Let’s walk through the features available in the new Chat control.
The Chat control supports different message types in which users can display different controls as part of their messages. The following message types are supported:
Each message also includes an avatar view showing the image of the author, the author’s name, and the created date. You can add a message using the Messages property.
Let’s see how to add simple text messages.
XAML
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:sfChat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
xmlns:local="clr-namespace:GettingStarted"
x:Class="GettingStarted.MainPage">
<ContentPage.BindingContext>
<local:GettingStartedViewModel/>
</ContentPage.BindingContext>
<ContentPage.Content>
<sfChat:SfChat x:Name="sfChat"
Messages="{Binding Messages}"
CurrentUser="{Binding CurrentUser}" />
</ContentPage.Content>
</ContentPage>
ViewModel
public class ViewModel : INotifyPropertyChanged
{
…………………………..
public ViewModel()
{
this.Messages = new ObservableCollection<object>();
this.CurrentUser = new Author() { Name = "Nancy",Avatar = "Nancy.png" };
this.GenerateMessages();
}
public ObservableCollection<object> Messages
{
get
{
return this.messages;
}
set
{
this.messages = value;
}
}
…………………………….
private void GenerateMessages()
{
this.Messages.Add(new TextMessage()
{
Author = CurrentUser,
Text = "Hi guys, good morning! I'm very delighted to share with you the news that our team is going to launch a new mobile application.",
ShowAvatar = true,
});
this.Messages.Add(new TextMessage()
{
Author = new Author() { Name = "Andrea",Avatar = "Andrea.png" },
Text = "Oh! That's great.",
ShowAvatar = true,
});
this.Messages.Add(new TextMessage()
{
Author = new Author() { Name = "Harrison",Avatar = "Harrison.png" },
Text = "That is good news.",
ShowAvatar = true,
});
this.Messages.Add(new TextMessage()
{
Author = new Author() { Name = "Margaret",Avatar = "Margaret.png" },
Text = "What kind of application is it and when are we going to launch?",
ShowAvatar = true,
});
}
}
You can easily send a message to another user by using the editor available at the bottom of the Chat control.
The Chat control provides a convenient way to group messages based on the date and time the messages were created. So, users can easily identify the messages in the order they were created. You can use the ShowTimeBreak property to enable the time break mode.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:sfChat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
xmlns:local="clr-namespace:GettingStarted"
x:Class="GettingStarted.MainPage">
<ContentPage.BindingContext>
<local:GettingStartedViewModel/>
</ContentPage.BindingContext>
<ContentPage.Content>
<sfChat:SfChat x:Name="sfChat"
ShowTimeBreak="True"
Messages="{Binding Messages}"
CurrentUser="{Binding CurrentUser}" />
</ContentPage.Content>
</ContentPage>
Most chatbot applications will need to display a list of suggestions or options to ensure users choose from the available responses to a question. You can show the suggestions to choose from in a message or at the bottom of the Chat control.
The Suggestions property is available in every message and Chat control.
…………………………………………..
private void GenerateMessages()
{
………………………………………….
ChatSuggestions chatSuggestions = new ChatSuggestions();
ObservableCollection<ISuggestion> suggestions = new ObservableCollection<ISuggestion>();
suggestions.Add(new Suggestion("Airways 1", "Flight1.png"));
suggestions.Add(new Suggestion("Airways 2", "Flight2.png"));
suggestions.Add(new Suggestion("Airways 3", "Flight3.png"));
suggestions.Add(new Suggestion("Airways 4", "Flight4.png"));
suggestions.Add(new Suggestion("Airways 5", "Flight5.png"));
suggestions.Add(new Suggestion("Airways 6", "Flight6.png"));
chatSuggestions.Items = suggestions;
this.messages.Add(new TextMessage()
{
Author = new Author() { Avatar ="Aeroplane.png", Name = "Travel Bot" },
Text = "Here's my suggestion",
Suggestions = suggestions,
ShowAvatar = true,
});
}
You can easily set a typing indicator to show when users are currently typing for an interactive user experience. You can show the indicator by using ShowTypingIndicator and customize the avatar of indicator by using the TypingIndicator property.
XAML
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:sfChat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
xmlns:local="clr-namespace:GettingStarted"
x:Class="GettingStarted.MainPage">
<ContentPage.BindingContext>
<local:GettingStartedViewModel/>
</ContentPage.BindingContext>
<ContentPage.Content>
<sfChat:SfChat x:Name="sfChat"
Messages="{Binding Messages}"
TypingIndicator="{Binding TypingIndicator}"
ShowTypingIndicator="{Binding ShowTypingIndicator}"
CurrentUser="{Binding CurrentUser}" />
</ContentPage.Content>
</ContentPage>
ViewModel
public class ViewModel : INotifyPropertyChanged
{
…………………………..
public ViewModel()
{
this.TypingIndicator = new ChatTypingIndicator();
this.CurrentUser = new Author() { Name = "Nancy", Avatar = "Nancy.png" };
this.GenerateMessages();
}
…………………………….
private void GenerateMessages()
{
………….
this.Messages.Add(new TextMessage()
{
Author = new Author() { Name = "Michale", Avatar = " Michale.png" },
Text = "Can you please elaborate?",
});
this.TypingIndicator.Authors.Add(new Author() { Name = "Andrea", Avatar = "Andrea.png" }
this.TypingIndicator.AvatarViewType = AvatarViewType.Image;
this.TypingIndicator.Text = "Andrea is typing...";
ShowTypingIndicator = true;
}
}
In this post, we walked you through working with our Xamarin.Forms Chat control and its features. You can find complete documentation online for all these features on our website.
For existing customers, the new version is available for download from the license and downloads page. If you are not yet a customer, you can try our 30-day free trial to check out these new features. You can explore samples in our GitHub repository. You can also explore our Android, iOS and UWP demo apps.
If you have any questions, please let us know in the comments section. You can also contact us through our support forum, Direct-Trac, or feedback portal. As always, we are happy to assist you!
If you liked this article, we think you would also enjoy the following free ebook and blogs: