ChatSuggestions in template

[Davi Fabiano]

How do template with text and suggestion? 

I only found example with text and image.

[Karthikraja Kalaimani]

Hi Davi, 

We have prepared sample for your requirement "Template text with suggestions". Please refer to the below code snippets and attached sample for more details. 

Code snippets :

//IncomingMessage Template

<?xml version="1.0" encoding="UTF-8"?>

<ViewCell xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:avatar="clr-namespace:Syncfusion.XForms.AvatarView;assembly=Syncfusion.Core.XForms" xmlns:sfBorder="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms" xmlns:xforms="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms" xmlns:local="clr-namespace:GettingStarted"

          x:Class="GettingStarted.InComingMessage">

  <ViewCell.View>

        <Grid HorizontalOptions="StartAndExpand"  Padding="8">

            <Grid.RowDefinitions>

                <RowDefinition Height="Auto" />

                <RowDefinition Height="50"/>

            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="36" />

               

                <ColumnDefinition Width=".8*" />

                <ColumnDefinition Width=".2*" />

            </Grid.ColumnDefinitions>

            <avatar:SfAvatarView Grid.Row="0"

                      Grid.Column="0"

                                 WidthRequest="36"

                                 HeightRequest="36"

                                 CornerRadius="18"

                                 VerticalOptions="StartAndExpand"

                                 HorizontalOptions="CenterAndExpand"

                                 BorderColor="Transparent"

                      ContentType="Default"

                      IsVisible="{Binding ShowAvatar}"

                      ImageSource="{Binding Author.Avatar}" />

            <Frame Grid.Row="0" Grid.Column="1">

                <StackLayout BackgroundColor="#FFFFFF"  Spacing="4" Padding="16,8,16,8">

                    <Label

               HorizontalOptions="StartAndExpand"

               Text="{Binding Text}"

               LineBreakMode="WordWrap"

               TextColor="#212121"

               FontFamily="Roboto-Regular"

               FontSize="14"

               VerticalTextAlignment="Center" />

                </StackLayout>

            </Frame>

            <ContentView x:Name="suggestionListContainer"

               

                 Grid.Row="1"

                 Grid.Column="1"

                 BackgroundColor="Transparent"

                 VerticalOptions="Center">

                <sfBorder:SfBorder x:Name="suggestionViewBorder"

                       

                       VerticalOptions="Center"

                       BorderWidth="0"

                       CornerRadius="15"

                       BorderColor="Transparent"

                       BackgroundColor="Transparent" >

                    <xforms:SfListView  Orientation="Horizontal"

                                       x:Name="suggestionsList"

                              SelectionMode="None"

                     AutoFitMode="Height"

                     ItemSpacing="{Binding ., Converter={StaticResource SuggestionItemSpacingConverter}, ConverterParameter={x:Reference suggestionsList}}"

                     ItemsSource="{Binding Suggestions.Items}"

                               >

                        <xforms:SfListView.Resources>

                            <ResourceDictionary>

                                <local:SuggestionItemSpacingConverter x:Key="SuggestionItemSpacingConverter" />

                            </ResourceDictionary>

                        </xforms:SfListView.Resources>

                    </xforms:SfListView>

                </sfBorder:SfBorder>

            </ContentView>

        </Grid>

    </ViewCell.View>

</ViewCell>

//ViewModel.cs 
....
 chatSuggestions = new ChatSuggestions();

            suggestions = new ObservableCollection<ISuggestion>();

            suggestions.Add(new Suggestion() { Text = "Airways 1" });

            suggestions.Add(new Suggestion() { Text = "Airways 2" });

            suggestions.Add(new Suggestion() { Text = "Airways 3" });

            suggestions.Add(new Suggestion() { Text = "Airways 4" });

            suggestions.Add(new Suggestion() { Text = "Airways 5" });

            suggestions.Add(new Suggestion() { Text = "Airways 6" });

            chatSuggestions.Items = suggestions;
.....
 private void GenerateMessages()

        {

            this.messages.Add(new TextMessage()

            {

                Author = new Author() { Name = "Travel Bot", Avatar = "Aeroplane.png" },

                Text = "Select your preferred airline company.",

            });

            this.messages.Add(new TextMessage()

            {

                Author = currentUser,

                Text = "Air Canada $2700",

            });

            this.messages.Add(new TextMessage()

            {

                Author = new Author() { Name = "Travel Bot", Avatar = "Aeroplane.png" },

                Text = "Congratulations ! Your booking has been conformed. A conformation along with your ticket has been sent to your email",

            });

            this.messages.Add(new TextMessage()

            {

                Author = new Author() { Name = "Travel Bot", Avatar = "Aeroplane.png" },

                Text = "Bon Voyage",

            });

            this.messages.Add(new TextMessage()

            {

                Author = currentUser,

                Text = "Thank you",

            });

            this.messages.Add(new TextMessage()

            {

                Author = new Author() { Name = "Travel Bot", Avatar = "Aeroplane.png" },

                Suggestions = chatSuggestions,

                Text = "How would you rate your interaction with our travel bot?",

            });

        }

Sample link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfChat-1901966644.zip

Regards,
Karthik Raja

[Davi Fabiano]

It worked, but I have 1 problem!

How to get suggestion feedback?

I'm using this, but for custom it doesn't work!

/// <summary>

/// Raised when current user sends message to bot using Chat UI.

/// </summary>

/// <param name="sender"><see cref="SfChat"/> as sender.</param>

/// <param name="e"><see cref="SendMessageEventArgs"/> as parameter.</param>

private void SfChat_SendMessage(object sender, SendMessageEventArgs e)

Regards.

[Suja Venkatesan]

Hi Davi, 

We are unclear about the reported issue which you mentioned as “How to get suggestion feedback” in your last update. Can you please share more details about the issue with any illustration video or image. It will be more helpful for us to provide the prompt solution at earlier. 

Regards, 

Suja 

[Davi Fabiano]

Hi Suja,

I created a bot in the chat, when I click on the suggestion it returns the selected item.

I use this method:

private void SfChat_SendMessage(object sender, SendMessageEventArgs e)

But in the custom template the suggestion does not return the selected item.

Any way to get the item selected in the suggestion by the custom template?

Regards.

[Suja Venkatesan]

Hi Davi, 

We have attached a modified sample for returning the selecteditem in the suggestion of custom template in the below sample link. 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfChat-1509166699.zip 

Please have a look at this sample and let us know if you have any concern in it.  

Regards, 

Suja