New to Kendo UI for Angular? Start a free 30-day trial

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 streamline conversations by reducing typing effort, ensuring consistent communication patterns, and improving overall user experience through intuitive interface elements.

Quick Actions—Appear as buttons directly on messages, enabling users to perform specific actions like replying with predefined text or opening external URLs.
Predefined Suggestions—Display as selectable options above the message input area, offering users quick access to frequently used phrases or responses.

Both features support dynamic configuration and event handling, allowing developers to create sophisticated conversational interfaces tailored to their application's needs.

Quick Actions

The quick actions are predefined clickable options which can be used as quick replies or suggestions that can be applied to specific messages. They intend to enhance user interaction and provide quick responses to common queries.

To define the actions for a message:

Set the suggestedActions property of the Message interface to an array of Action objects.
For each specific action set the value, title, and type.

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'
            }
        ]
    }
];

Upon clicking any of the quick action buttons, the executeAction event is emitted, returning the ExecuteActionEvent as an argument. This allows you to handle each action accordingly.

Change Theme

Theme

Loading ...

Predefined Suggestions

Predefined suggestions streamline user interactions by offering quick-select options for common responses or phrases. This feature significantly improves user experience by reducing typing effort and ensuring consistent communication patterns.

Suggestions are particularly effective 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, allowing users to instantly insert the text into their message or send it directly. Upon clicking a suggestion, the suggestionExecute event is emitted, returning the ChatSuggestion as an argument. This allows you to handle each suggestion accordingly.

html
<kendo-chat [suggestions]="suggestions"></kendo-chat>
ts
suggestions: ChatSuggestion[] = [
  {
    id: 'greeting',
    text: 'Hello! How can I help you today?',
    description: 'Standard greeting for new conversations',
    disabled: false
  },
  {
    id: 'order-status',
    text: 'I need to check my order status',
    description: 'Quick access to order tracking',
    disabled: false
  },
  {
    id: 'technical-support',
    text: 'I need technical support',
    description: 'Connect with technical assistance',
    disabled: this.isOutsideBusinessHours // Dynamic availability
  }
];

Angular Chat Actions and Suggestions

Quick Actions

Predefined Suggestions

Suggested Links