Suggestions

The RadAIPrompt control allows you to define suggestions for the user prior to initiating a request. To do so, set the AreSuggestionsVisible property to True of RadAIPrompt and add entries of the type of string to its Suggestions collection. The Suggestions property expects a collection that implements the IEnumerable interface.

Showing Suggestions in the RadAIPrompt

C#

    <telerik:RadAIPrompt x:Name="aiPrompt" AreSuggestionsVisible="True">
        <telerik:RadAIPromptInputItem />
        <telerik:RadAIPrompt.Suggestions>
            <x:Array Type="sys:String"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:sys="clr-namespace:System;assembly=mscorlib">
                <sys:String>What is the weather in New York?</sys:String>
                <sys:String>What is the weather in Tokyo?</sys:String>
                <sys:String>What is the weather in Seoul?</sys:String>
                <sys:String>What is the weather in London?</sys:String>
            </x:Array>
        </telerik:RadAIPrompt.Suggestions>
    </telerik:RadAIPrompt>

RadAIPrompt with suggestions

Customizing the Appearance of the Suggestions

RadAIPrompt control exposes properties that will allow you to customize the appearance of each suggestion. They are as follows:

• SuggestionItemTemplate—Allows you to set a custom DataTemplate that will be applied to each suggestion.
• SuggestionHeaderContent—Provides the functionality to specify a header for the element that displays the suggestions.
• SuggestionHeaderContentTemplate—Allows you to specify a custom DataTemplate for the header of the element that visualizes the suggestions.
• SuggestionsExpanderStyle—This property lets you set a custom Style for the RadExpander element that displays the suggestions.

The following example showscases the RadAIPrompt when the above properties are used:

Defining a sample model and a view model

C#

    public class SuggestionItem
    {
        public string SuggestionItemName { get; set; }
    }

    public class SuggestionsViewModel
    {
        public SuggestionsViewModel()
        {
    		this.SuggestionItems = new ObservableCollection<SuggestionItem>()
    		{
    			new SuggestionItem(){ SuggestionItemName = "Hello" },
    			new SuggestionItem(){ SuggestionItemName = "World" },
    		};
        }

        public ObservableCollection<SuggestionItem> SuggestionItems { get; set; }
    }

Defining the RadAIPrompt and its properties

XAML

    <Grid>
        <Grid.DataContext>
            <local:SuggestionsViewModel/>
        </Grid.DataContext>
        <telerik:RadAIPrompt x:Name="aiPrompt" 
                             Suggestions="{Binding SuggestionItems}" 
                             SuggestionsHeaderContent="Choose a suggestion" 
                             AreSuggestionsVisible="True">
            <telerik:RadAIPromptInputItem />
            <telerik:RadAIPrompt.SuggestionItemTemplate>
                <DataTemplate>
                    <telerik:RadButton Content="{Binding SuggestionItemName}"
                                       Command="{Binding SuggestionClickedCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=telerik:RadAIPrompt}}"
                                       CommandParameter="{Binding SuggestionItemName}"
                                       FontWeight="Thin"
                                       Background="White"
                                       Foreground="Red"/>
                </DataTemplate>
            </telerik:RadAIPrompt.SuggestionItemTemplate>
            <telerik:RadAIPrompt.SuggestionsHeaderContentTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding}" FontWeight="Thin" FontStyle="Italic" Foreground="White"/>
                </DataTemplate>
            </telerik:RadAIPrompt.SuggestionsHeaderContentTemplate>
            <telerik:RadAIPrompt.SuggestionsExpanderStyle>
                <!-- If you use NoXaml dlls set the BasedOn property of the Style: BasedOn="{StaticResource SuggestionsExpanderStyle}" -->
                <Style TargetType="telerik:RadExpander">
                    <Setter Property="Background" Value="Orange"/>
                </Style>
            </telerik:RadAIPrompt.SuggestionsExpanderStyle>
        </telerik:RadAIPrompt>
    </Grid>

RadAIPrompt suggestions with custom appearance

See Also

• Views
• Events
• RadAIPromptButon
• Commands
• Paging