Suggested Actions

Conversational UI supports adding suggestions to the user. This can be done by adding SuggestedAction items to the SuggestedActions collection of RadChat.

Adding the SuggestedAction

Example 1 demonstrates how to add a TextMessage and populate the SuggestedActions collection of the RadChat.

Example 1: Adding SuggestedAction

private Author currentAuthor; 
private Author otherAuthor; 
 
public MainWindow() 
{ 
    InitializeComponent(); 
 
    currentAuthor = new Author("1") { Name = "Peter" }; 
    otherAuthor = new Author("2") { Name = "Steven" }; 
    this.chat.CurrentAuthor = currentAuthor; 
 
    var textMessage = new TextMessage(this.currentAuthor, "Hello", "sent"); 
    textMessage.InlineViewModel.StatusVisibility = Visibility.Visible; 
 
    this.chat.AddMessage(textMessage); 
 
    this.chat.SuggestedActions.Add(new SuggestedAction("Hi, there!")); 
} 
Adding the SuggestedAction will be visualized as shown in Figure 1.

Figure 1: Adding a SuggestedAction

Adding a SuggestedAction

By default the SuggestedActions will be visible. In case they need to be hidden, the SuggestedActionsVisibility of RadChat can be set to Collapsed.

Handling the SuggestedActionReported event

When the user selects a given suggestion, the SuggestedActionReported is raised. Through it the user input can be modified. Its arguments expose the following members.

  • CloseAfterReport: A boolean property that controls whether the message will be removed after it reports a result.
  • PostResultInline: A boolean property that determines whether the suggestion should be posted as an inline text message or not.
  • Text: The text result.

Example 2: Handling the SuggestedActionReported event

private void Chat_SuggestedActionReported(object sender, SuggestedActionsEventArgs e) 
{ 
    if (e.Text == "Hi, there!") 
    { 
        e.CloseAfterReport = false; 
        e.PostResultInline = false; 
 
        this.chat.AddMessage(this.otherAuthor, e.Text); 
    } 
} 

Figure 2: Handling the SuggestedActionReported event

Handling the SuggestedActionReported event

SuggestedActionsOrientation

Since the 2020.2.525 internal build version, you have the option of setting the orientation in which the suggested actions are displayed. The default orientation is Horizontal.

Example 3: Setting the SuggestedActionsOrientation

<telerik:RadChat x:Name="chat" SuggestedActionsOrientation="Vertical"/> 

Figure 3: SuggestedActions with Vertical orientation

SuggestedActions with Vertical orientation

See Also

In this article
Not finding the help you need? Improve this article