Angular Chat Actions and Suggestions
The Kendo UI for Angular Chat component supports quick actions and predefined suggestions that enhance user interaction by providing clickable options for common responses or actions.
These features reduce typing effort, ensure consistent communication, and improve user experience with intuitive interface elements.
- Quick Actions—Appear as buttons directly on messages. Users can perform specific actions like replying with predefined text or opening external URLs.
- Predefined Suggestions—Display as selectable options above the message input area. Users get quick access to frequently used phrases or responses.
Both features support dynamic configuration and event handling. You can create sophisticated conversational interfaces tailored to your application's needs.
For message actions, available via the built-in context menu or the toolbar, see the Angular Chat Message article
Quick Actions
The quick actions are predefined clickable options. Use them as quick replies or suggestions that you can apply to specific messages. They enhance user interaction and provide quick responses to common queries.
The following example demonstrates how to implement quick actions for a specific Chat message.
To define the actions for a message:
- Set the
suggestedActionsproperty of theMessageinterface to an array ofActionobjects. - For each specific action, set the
value,title, andtype.
The following code creates a message with three quick actions: two reply actions and one action that opens a URL.
public messages: Message[] = [
{
id: guid(),
text: 'This is a test message?',
suggestedActions: [
{ value: 'Nice one!', type: 'reply' },
{ value: 'Thank you.', type: 'reply' },
{
value: 'https://www.telerik.com/kendo-angular-ui',
type: 'openUrl',
title: 'Kendo UI for Angular'
}
]
}
];When you click any of the quick action buttons, the component fires the executeAction event. The event returns the ExecuteActionEvent as an argument. This allows you to handle each action as needed.
Predefined Suggestions
Predefined suggestions streamline user interactions by offering quick-select options for common responses or phrases. This feature improves user experience by reducing typing effort and ensuring consistent communication patterns.
The following example demonstrates how to predefine suggestions in the Chat.
Suggestions work well in:
- Customer service scenarios with standard responses like "Thank you", "I need help with...", or "Please call me".
- E-commerce platforms for common inquiries such as "Track my order", "Return policy", or "Size guide".
- Educational tools providing template responses for assignments or discussions.
- Survey applications offering standardized answer options.
Configure suggestions using the suggestions input with an array of ChatSuggestion objects. Each suggestion includes an identifier, display text, optional description for context, and a disabled state for conditional availability.
Suggestions appear as clickable items above the message input. Users can instantly insert the text into their message or send it directly. When you click a suggestion, the component fires the suggestionExecute event. The event returns ChatSuggestion as an argument. This allows you to handle each suggestion as needed.
<kendo-chat [suggestions]="suggestions"></kendo-chat>