# Angular Chat Attachments

The Chat component lets users attach files, images, text attachments, or other data to their messages and interact with any 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. You can customize the available actions as needed.

The following example demonstrates the Chat message attachments and the applicable actions.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/conversational-ui/chat/attachments/source.txt)

To add attachments to a message, set the [`files`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/message#files) property to an array of [`ChatFile`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/message#files) objects.

```TS
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`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/chatcomponent#fileactions) property to a [`FileAction`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/fileaction) array. The download option is the default one that comes with the component, but you can define extra actions as needed.

```TS
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. Handle these events to process the selected action manually.

* [`fileActionClick`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/chatcomponent#fileactionclick)—Fires when you click a file action. Returns a [`FileActionEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/fileactionevent) object.
* [`download`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/chatcomponent#download)—Fires specifically for download actions. Returns a [`FileDownloadEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/filedownloadevent) object.

## Disabling File Attachments

To disable file selection, set the [`fileSelectButton`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/chatcomponent#fileselectbutton) input to `false`. When you disable file selection, users cannot select new files. However, messages can still display file attachments that you add programmatically or that come from other sources.

```html
<kendo-chat [fileSelectButton]="false"></kendo-chat>
```

## Embedding Other Attachment Types

In addition to file attachments, messages can include other types of attachments. In combination with [`AttachmentTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/chat/message-templates#attachment-template), you can show text, images, videos, and rich media. The component handles these attachments similarly to file attachments but supports extra features like inline previews.

Use the [`attachments`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/message#attachments) property to display the custom attachments within the message content.

The following example demonstrates custom text attachments.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/conversational-ui/chat/attachments/custom/source.txt)

## Suggested Links

* [Message Actions](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/chat/message)
* [Message Templates](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/chat/message-templates)
* [Keyboard Navigation](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/chat/keyboard-navigation)
* [API Reference of the Chat](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api)