Quick Actions
The Chat component provides two types of suggestion systems that enhance user interaction by offering quick response options: Message Suggestions and Suggested Actions. These features help streamline conversations by reducing typing effort and providing contextually relevant response options.
Overview
The Chat component supports the following suggestion mechanisms:
- Message Suggestions—Global quick-reply options that appear above the message input.
- Suggested Actions—Contextual action buttons that appear with specific messages from bots or automated systems.
Both suggestion types help improve user experience by providing pre-defined response options that users can select instead of typing manual questions or responses.
Message Suggestions
Message suggestions are persistent quick-reply options that appear above the message input area. The suggestions remain visible throughout the conversation and provide users with commonly used responses or frequently asked questions.
Basic Configuration
Configure the desired message suggestions using the Suggestions()
configuration of the Chat component:
@(Html.Kendo().Chat()
.Name("chat")
.Suggestions(suggestions => {
suggestions.Add().Text("Yes, please");
suggestions.Add().Text("No, thanks");
suggestions.Add().Text("Tell me more");
suggestions.Add().Text("Need help");
})
)
Handling Suggestion Clicks
Subscribe to the SuggestionClick
client-side event to handle user interactions with message suggestions:
@(Html.Kendo().Chat()
.Name("chat")
.Suggestions(suggestions => {
suggestions.Add().Text("Yes, please");
suggestions.Add().Text("No, thanks");
suggestions.Add().Text("Tell me more");
suggestions.Add().Text("Need help");
})
.Events(ev =>
{
ev.SuggestionClick("onSuggestionClick");
})
)
Customizing Suggestions
You can customize the appearance of the defined suggestions by using the SuggestionsTemplate()
method.
The option has various overloads like SuggestionsTemplateHandler()
, SuggestionsTemplateId()
, and SuggestionsTemplate()
that accepts a Template component.
The following example demonstrates how to customize the default appearance of the suggestion messages.
@(Html.Kendo().Chat()
.Name("chat")
.Suggestions(suggestions => {
suggestions.Add().Text("Check Weather");
suggestions.Add().Text("Set Reminder");
suggestions.Add().Text("Play Music");
suggestions.Add().Text("Get News");
suggestions.Add().Text("Help");
})
.SuggestionsTemplateHandler("getSuggestionsTemplate")
)
Suggested Actions
Suggested actions are contextual buttons that appear with specific messages, typically from bots or automated systems. Unlike message suggestions, suggested actions are temporary and relate to the specific message they accompany.
Adding Suggested Actions to Messages
To include suggested actions when posting messages, you need to post the message programmatically by setting the desired suggestions using the suggestedActions
client-side property:
@(Html.Kendo().Chat()
.Name("chat")
.Events(ev =>
{
ev.SendMessage("onSendMessage"); // Handle the SendMessage event.
})
)
For a live example, visit the Person To Bot Demo of the Chat component.
Handling Suggested Action Clicks
Suggested actions automatically trigger the SendMessage
client-side event when clicked:
@(Html.Kendo().Chat()
.Name("chat")
.Events(ev =>
{
ev.SendMessage("onSendMessage"); // Handle the SendMessage event.
})
)
Customizing Suggested Actions
You can customize the appearance of suggested actions using the SuggestedActionsTemplate()
option that accepts a Template component. The k-suggestions
class must be applied to the individual suggestion element. The wrapping element must have the ref-chat-suggestion-group
attribute.
The template option provides overloads like SuggestedActionsTemplateHandler()
and SuggestedActionsTemplateId()
.
The following example demonstrates how to customize the default appearance of the suggested actions.
@(Html.Kendo().Chat()
.Name("chat")
.SuggestedActionsTemplateHandler("getActionTemplate")
)