Angular Chat Predefined Suggestions
The predefined suggestions appear as selectable options above the message input area. Use them to provide quick access to frequently used phrases or responses.
The following example demonstrates how to predefine suggestions in the Chat.
To add predefined suggestions to the Chat, set the suggestions input property with an array of ChatSuggestion objects. Each suggestion includes an identifier, display text, an optional description for context, and a disabled state for conditional availability.
<kendo-chat [suggestions]="suggestions"></kendo-chat>When a user selects a suggestion, the component fires the suggestionExecute event. The event returns a ChatSuggestion object as an argument. Handle the event to respond to each suggestion as needed.
Disappearing Suggestions
The disappearing suggestions improve user experience by removing options that the user already selected. This keeps the interface clean and relevant.
To make suggestions disappear after selection, handle the suggestionExecute event and remove the selected suggestion from the array.
The following example demonstrates how to remove a suggestion after selection:
Suggestions Layout
By default suggestions are displayed in a horizontal layout above the message input area. If the number of suggestions exceeds the available width, you can scroll them using touchpad or Shift with Mouse Wheel.
You can change the suggestions layout behavior using the suggestionsLayout input property and choose between scrollbuttons and wrap options.
The following example demonstrates the available layout options for the suggestions.