# Angular Chat Templates

You can use the available Chat templates to customize every aspect of the chat interface.

<Row>
  <Column count={[24,24,12]}>
    <Component className="tile pd-b" href="#chat-layout-templates">
      <ComponentTitle>Chat Layout Templates</ComponentTitle>
      <ComponentDescription>Templates for the persistent header and the empty state shown when there are no messages.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,12]}>
    <Component className="tile pd-b" href="#message-templates">
      <ComponentTitle>Message Templates</ComponentTitle>
      <ComponentDescription>Templates that control how individual messages render, from full message structure to text content only, with generic and user-specific variants.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,12]}>
    <Component className="tile pd-b" href="#status-and-timestamp-templates">
      <ComponentTitle>Status and Timestamp Templates</ComponentTitle>
      <ComponentDescription>Templates that customize the timestamps, message status indicators, and user status badges displayed alongside messages.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,12]}>
    <Component className="tile pd-b" href="#message-box-templates">
      <ComponentTitle>Message Box Templates</ComponentTitle>
      <ComponentDescription>Templates that replace or extend the message composition area, including suggestions and affix positions for extra controls.</ComponentDescription>
    </Component>
  </Column>
</Row>

## Chat Layout Templates

### Header Template

With the custom header template, you can add a persistent header section at the top of the chat interface. Use this template to display chat information, participant details, or action buttons.

To implement a custom header template, nest an `<ng-template>` tag with the [`ChatHeaderTemplateDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/chatheadertemplatedirective) directive inside the `<kendo-chat>` tag.

The following example demonstrates a customized Chat header.

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

### No Data Template

The Chat no data template lets you customize the Chat appearance when there are no messages.

To implement a custom no data template, nest an `<ng-template>` tag with the [`NoDataTemplateDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/nodatatemplatedirective) directive inside the `<kendo-chat>` tag.

The following example demonstrates the Chat interface with a custom no data view.

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

## Message Templates

### Full Message Template

With the message template you can fully customize the appearance and structure of each chat message. This includes the ability to modify the layout, add extra elements, and apply custom styles to match your application's design.

To implement a custom message template, nest an `<ng-template>` tag with the [`MessageTemplateDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/messagetemplatedirective) directive inside the `<kendo-chat>` tag.

The following example demonstrates how to apply custom look and feel to the Chat messages.

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

### User-Specific Message Template

The Chat user-specific message template lets you fully customize the appearance and structure of each chat message based on the user.

To customize the author and receiver messages separately, nest an `<ng-template>` tag with the [`ReceiverMessageTemplateDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/receivermessagetemplatedirective) and [`AuthorMessageTemplateDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/authormessagetemplatedirective) directives inside the `<kendo-chat>` tag.

The following example demonstrates how to apply custom look and feel to the Chat messages based on their author.

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

### Message Content Template

The Chat message content template lets you customize the chat messages text appearance only. This template gives you the flexibility to define how message text renders, including styling, formatting, and extra content. To customize the entire message appearance, refer to [Full Message Template](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/chat/message-templates#full-message-template) instead.

To customize the text, nest an `<ng-template>` tag with the [`MessageContentTemplateDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/messagecontenttemplatedirective) directive inside the `<kendo-chat>` tag.

The following example shows how to customize the typography of the Chat message text.

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

### User-Specific Message Content Template

The Chat user-specific message content template lets you customize the chat messages text appearance based on the message author. The templates give you the flexibility to define how message text renders for different users, including styling, formatting, and extra content.

To customize the author and receiver messages separately, nest an `<ng-template>` tag with the [`ReceiverMessageContentTemplateDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/receivermessagecontenttemplatedirective) and [`AuthorMessageContentTemplateDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/authormessagecontenttemplatedirective) directives inside the `<kendo-chat>` tag.

The following example customizes the messages text appearance in the Chat based on the user.

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

### Attachment Template

Along with the [custom attachments](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/chat/attachments#embedding-other-attachment-types) feature, the [`AttachmentTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/attachmenttemplatedirective) lets you customize and display different types of attachments within the message. You can show images, videos, and any other type of content.

The following example demonstrates how to attach images to a message in the Chat.

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

## Status and Timestamp Templates

### Timestamp Template

The Chat timestamp template lets you customize how message timestamps display throughout the chat. By default, the Chat component shows timestamps in a standard format, but you can override this to match your application's design requirements or localization needs.

To customize timestamp display, use an `<ng-template>` tag with the [`TimestampTemplateDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/chattimestamptemplatedirective) directive inside the `<kendo-chat>` tag.

The following demo shows how to apply custom timestamp format to the Chat.

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

### Message Status Template

The Chat status template lets you customize the appearance and behavior of the status indicators that display for messages when you click them. Use this template to create visually appealing and informative status messages that match your application's design.

To implement a custom status template, nest an `<ng-template>` tag with the [`ChatStatusTemplateDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/chatstatustemplatedirective) directive inside the `<kendo-chat>` tag.

The following example demonstrates customized status messages containing both text and icons.

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

### User Status Template

The Chat user status template lets you customize the user status indicator that displays at the bottom right corner of the avatar.

To implement a custom user status template, nest an `<ng-template>` tag with the [`ChatUserStatusTemplateDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/chatuserstatustemplatedirective) directive inside the `<kendo-chat>` tag.

The following example demonstrates the user status template of the Chat in action.

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

## Message Box Templates

### Suggestion Template

The suggestion template lets you customize the appearance and behavior of the suggestions that display above the message box of the Chat. Use this template to create visually appealing and interactive suggestion buttons that match your application's design.

To implement a custom suggestion template, nest an `<ng-template>` tag with the [`ChatSuggestionTemplateDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/chatsuggestiontemplatedirective) directive inside the `<kendo-chat>` tag.

The following example demonstrates the suggestion template of the Chat in action.

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

### Message Box Template

The message box template provides complete control over the message composition area, allowing you to replace the default input field and send button with a fully customized interface.

To implement a custom message box template, nest an `<ng-template>` tag with the [`ChatMessageBoxTemplateDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/chatmessageboxtemplatedirective) directive inside the `<kendo-chat>` tag.

When you use a custom message box template, implement message submission logic programmatically using the Chat component's API methods to handle user interactions and send messages to the chat.

The following example demonstrates the message box template of the Chat in action.

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

### Message Box Affix Templates

The affix templates let you extend the built-in message box with extra controls without replacing the default UI. The Chat provides three affix positions, each mapped to a dedicated template directive:

* [`kendoChatMessageBoxStartAffixTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/chatmessageboxstartaffixtemplatedirective)— renders content at the start of the message box, to the right of the file select button.
* [`kendoChatMessageBoxEndAffixTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/chatmessageboxendaffixtemplatedirective)— renders content at the end of the message box, to the left of the speech-to-text button.
* [`kendoChatMessageBoxTopAffixTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/chatmessageboxtopaffixtemplatedirective)— renders content above the text input area. Only visible in `multi` mode.

The following example demonstrates all three affix positions. Use the configurator to toggle each affix on or off and switch between message box modes.

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

## Suggested Links

* [Attachments](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/chat/attachments)
* [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)