Angular Chat Suggested Actions
The suggested actions appear as selectable options directly on specific messages. Use them to provide quick reply options or actions like opening external URLs.
Actions are hardcoded based on the user's input for demonstration purposes.
To add suggested actions to a message, set the suggestedActions property of the Message interface to an array of Action objects. Each action includes a value, optional title, and action type for different interaction behaviors.
The action types include:
reply—Inserts the action value into the message input area for quick sending.openUrl—Opens the specified URL in a new browser tab when clicked.call—Initiates a phone call to the specified number (on supported devices).
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 a user clicks a suggested action button, the component fires the executeAction event. The event returns an ExecuteActionEvent object as an argument. Handle the event to respond to each action as needed.
Actions Layout
By default, suggested actions are displayed in a horizontal layout below the message. If the number of actions exceeds the available width, you can scroll them using touchpad or Shift with Mouse Wheel.
You can change the actions layout behavior using the quickActionsLayout input property and choose between scrollbuttons and wrap options.
The following example demonstrates the available layout options for the suggested actions.