Angular Chat Attachments
The Chat component supports comprehensive message file attachments functionality, allowing users to easily attach files, images, text attachments, or other data to their messages and interact with received attachments.
This guide covers how to enable file selection, add file attachments to messages, and customize file actions in the Chat.
Message Attachments
Messages in the Chat can contain various attachment files like PDF documents, Word files, images, and more. By default, the component provides a download action for all attached files, but the available actions can be customized as needed.
The following example demonstrates the Chat message attachments and their actions.
To add attachments to a message, set the files property to an array of ChatFile objects:
public messages: Message[] = [
{
id: guid(),
text: 'Here are the documents you requested',
files: [
{
name: 'document.pdf',
size: 245760,
extension: 'pdf',
url: 'https://example.com/document.pdf'
},
]
}
];You can customize the available file actions by setting the fileActions property to a FileAction array. The download option is the default one that comes with the component. But you can define additional actions as needed.
public fileActions: FileAction[] = [
{ id: 'download', label: 'Download', svgIcon: downloadIcon },
{ id: 'share', label: 'Share', svgIcon: shareIcon },
{ id: 'delete', label: 'Delete', svgIcon: trashIcon }
];When users interact with file actions, the Chat emits the following events which you need to handle to process the selected action manually.
fileActionClick—Emitted when a file action is clicked. Returns aFileActionEventobject.download—Emitted specifically for download actions. Returns aFileDownloadEventobject.
Custom Attachments
In addition to file attachments, messages can include other types of attachments. In combination with AttachmentTemplate you can show text, images, videos, and rich media. These attachments are handled similarly to file attachments but support additional features like inline previews.
Use the attachments property to display the custom attachments within the message content.
The following example demonstrate text custom attachments.
Disabling File Selection
The Chat component provides built-in file selection capabilities that allow users to attach single or multiple files to their messages before sending them.
To disable file selection, set the enableFileSelect input to false.
<kendo-chat [enableFileSelect]="false"></kendo-chat>