Example for SuggestedActionsTemplate for Conversational UI

[Chris]

HI,

I'm really struggling with customizing the conversational UI, there does not seem to be an example for changing the SuggestedActionsItem.

I know i need to define a temple for the SuggestedActionsTemplate on the ChatItemTemplateSelector, but how am i supposed to know what values are available? or what i am targetting.

A simple example of changing the background of each action would be nice :)

thanks

[Yana]

Hello Chris,

Indeed the suggested actions can be customized through the ChatItemTemplateSelector, here is a quick example showing the default template (only TextColor and BackgroundColor properties are modified):

So, here is the custom ChatItemTemplateSelector:

 

public class CustomChatItemTemplateSelector : ChatItemTemplateSelector
{
    public DataTemplate MySuggestedActionsTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        SuggestedActionsItem suggestedActionsItem = item as SuggestedActionsItem;
        if (suggestedActionsItem != null)
        {
            return this.MySuggestedActionsTemplate;
        }
        return base.OnSelectTemplate(item, container);
    }
}

 

Add the template to the page's resources:

 

<Style x:Key="SuggestedActionItemStyle" TargetType="telerik:RadButton">
    <Setter Property="TextColor" Value="{AppThemeBinding Light=Black, Dark=White}" />
    <Setter Property="BackgroundColor" Value="Yellow" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="CornerRadius" Value="{OnPlatform Default=4, WinUI=2, iOS=8, Android=16}" />
    <Setter Property="Padding" Value="{OnPlatform Default='10, 1.5', WinUI='10, 8', iOS='8, 5.5', Android='16, 6.5'}" />
</Style>

<DataTemplate x:Key="MySuggestedActionsTemplate">
    <telerik:SuggestedActionsView
        ItemsSource="{Binding Actions}"
        SelectionMode="None"
        Orientation="Horizontal">
        <telerik:SuggestedActionsView.ItemsLayoutTemplate>
            <DataTemplate>
                <HorizontalStackLayout Padding="{OnPlatform Default='0, 10', WinUI=10, MacCatalyst='12, 10'}"
                            Spacing="4" />
            </DataTemplate>
        </telerik:SuggestedActionsView.ItemsLayoutTemplate>
        <telerik:SuggestedActionsView.ItemTemplate>
            <DataTemplate>
                <telerik:RadButton Text="{Binding Text}"
                                Command="{Binding Command}"
                                Style="{StaticResource SuggestedActionItemStyle}"  />
            </DataTemplate>
        </telerik:SuggestedActionsView.ItemTemplate>
    </telerik:SuggestedActionsView>
</DataTemplate>

<local:CustomChatItemTemplateSelector x:Key="CustomChatItemTemplateSelector"
                                      MySuggestedActionsTemplate="{StaticResource MySuggestedActionsTemplate}" />

 

And apply the custom ChatItemTemplateSelector to the Chat definition:

 

 <telerik:RadChat x:Name="chat"
              ItemTemplateSelector="{StaticResource CustomChatItemTemplateSelector}" />

I hope I was of help.

Regards,
Yana
Progress Telerik