> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Message Template

> Data structure for customizing CometChat React UI Kit message bubbles, including content, header, footer, reply, and status views.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "component": "CometChatMessageTemplate",
    "kind": "model-class",
    "package": "@cometchat/chat-uikit-react",
    "import": "import { CometChatMessageTemplate } from \"@cometchat/chat-uikit-react\";",
    "description": "Data structure defining how message bubbles render in CometChatMessageList. Each template maps a type+category pair to view functions.",
    "usage": "Pass an array of CometChatMessageTemplate instances to CometChatMessageList via the templates prop.",
    "properties": {
      "type": { "type": "string", "required": true, "description": "CometChat message type" },
      "category": { "type": "string", "default": "\"\"", "description": "CometChat message category" },
      "headerView": { "type": "function | null", "default": "null", "description": "Custom header view function" },
      "contentView": { "type": "function | null", "default": "null", "description": "Custom content view function" },
      "footerView": { "type": "function | null", "default": "null", "description": "Custom footer view function" },
      "bottomView": { "type": "function | null", "default": "null", "description": "Custom bottom view function" },
      "bubbleView": { "type": "function | null", "default": "null", "description": "Replaces entire bubble" },
      "statusInfoView": { "type": "function | null", "default": "null", "description": "Custom status info view function" },
      "replyView": { "type": "function | null", "default": "null", "description": "Custom reply preview function" },
      "options": { "type": "function", "description": "Returns action sheet items for long-press" }
    },
    "relatedComponents": ["CometChatMessageList"],
    "cssRootClass": null,
    "events": null
  }
  ```
</Accordion>

## What It Is

`CometChatMessageTemplate` is a model class, not a rendered component. Each instance maps a message `type` + `category` pair to a set of view functions that control how that message renders inside `CometChatMessageList`. Pass an array of templates to the `templates` prop on `CometChatMessageList`.

```tsx lines theme={null}
import { useState, useEffect } from "react";
import {
  CometChatMessageList,
  CometChatMessageTemplate,
  CometChatUIKit,
  CometChatUIKitConstants,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function CustomTemplateDemo() {
  const [chatGroup, setChatGroup] = useState<CometChat.Group>();
  const [templates, setTemplates] = useState<CometChatMessageTemplate[]>([]);

  useEffect(() => {
    CometChat.getGroup("guid").then((group) => setChatGroup(group));

    const allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates();
    const modified = allTemplates.map((t) => {
      if (
        t.type === CometChatUIKitConstants.MessageTypes.text &&
        t.category === CometChatUIKitConstants.MessageCategory.message
      ) {
        t.headerView = (message: CometChat.BaseMessage) => (
          <>{message.getSender().getName()} • 🗓️ In meeting</>
        );
      }
      return t;
    });
    setTemplates(modified);
  }, []);

  if (!chatGroup) return null;

  return <CometChatMessageList group={chatGroup} templates={templates} />;
}
```

***

## Template Structure

A message bubble is composed of these view slots, each overridable per template:

| View             | Default rendering                          | Signature                                                                                                                                                                                           |
| ---------------- | ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `headerView`     | Sender name                                | `(message: CometChat.BaseMessage, alignment: MessageBubbleAlignment, textFormatters?: CometChatTextFormatter[]) => JSX.Element \| null`                                                             |
| `contentView`    | Text / image / video / audio / file bubble | `(message: CometChat.BaseMessage, alignment: MessageBubbleAlignment, textFormatters?: CometChatTextFormatter[]) => JSX.Element \| null`                                                             |
| `footerView`     | Reactions                                  | `(message: CometChat.BaseMessage, alignment: MessageBubbleAlignment) => JSX.Element \| null`                                                                                                        |
| `bottomView`     | Link previews, "load more"                 | `(message: CometChat.BaseMessage, alignment: MessageBubbleAlignment) => JSX.Element \| null`                                                                                                        |
| `statusInfoView` | Receipt + timestamp                        | `(message: CometChat.BaseMessage, alignment: MessageBubbleAlignment, hideReceipts?: boolean, messageSentAtDateTimeFormat?: CalendarObject, showError?: boolean) => JSX.Element \| null`             |
| `replyView`      | Reply preview                              | `(message: CometChat.BaseMessage, alignment?: MessageBubbleAlignment, onReplyViewClicked?: (msg: CometChat.BaseMessage) => void, textFormatters?: CometChatTextFormatter[]) => JSX.Element \| null` |
| `bubbleView`     | Entire bubble (overrides all above)        | `(message: CometChat.BaseMessage, alignment: MessageBubbleAlignment) => JSX.Element \| null`                                                                                                        |
| `options`        | Long-press action sheet                    | `(loggedInUser: CometChat.User, message: CometChat.BaseMessage, group?: CometChat.Group) => CometChatMessageOption[]`                                                                               |

***

## Fetching Existing Templates

Retrieve the built-in templates and modify specific ones:

```tsx lines theme={null}
import {
  CometChatUIKit,
  CometChatUIKitConstants,
  CometChatMessageTemplate,
} from "@cometchat/chat-uikit-react";

const allTemplates: CometChatMessageTemplate[] =
  CometChatUIKit.getDataSource().getAllMessageTemplates();

for (let i = 0; i < allTemplates.length; i++) {
  if (allTemplates[i].type === CometChatUIKitConstants.MessageTypes.text) {
    // customize allTemplates[i]
  }
}
```

***

## Common Patterns

### Custom header with status badge

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/7-hZ4AEh99NJJtEC/images/99068f5d-message_template_header_view_custom_web_screens-93fe3690136f32d0e0de4ac84189b13e.png?fit=max&auto=format&n=7-hZ4AEh99NJJtEC&q=85&s=724f69b941e9e4a7af6bc7129439ab61" width="1280" height="330" data-path="images/99068f5d-message_template_header_view_custom_web_screens-93fe3690136f32d0e0de4ac84189b13e.png" />
</Frame>

```tsx lines theme={null}
import { useState, useEffect } from "react";
import {
  CometChatMessageList,
  CometChatUIKit,
  CometChatUIKitConstants,
  CometChatMessageTemplate,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function HeaderViewDemo() {
  const [chatGroup, setChatGroup] = useState<CometChat.Group>();
  const [templates, setTemplates] = useState<CometChatMessageTemplate[]>([]);

  useEffect(() => {
    CometChat.getGroup("guid").then((group) => setChatGroup(group));

    const definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates();
    const modified = definedTemplates.map((t) => {
      if (
        t.type === CometChatUIKitConstants.MessageTypes.text &&
        t.category === CometChatUIKitConstants.MessageCategory.message
      ) {
        t.headerView = (message: CometChat.BaseMessage) => (
          <>{message.getSender().getName()} • 🗓️ In meeting</>
        );
      }
      return t;
    });
    setTemplates(modified);
  }, []);

  if (!chatGroup) return null;

  return <CometChatMessageList group={chatGroup} templates={templates} />;
}
```

### Custom content view for a custom message type

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/GrDbzzq1LLfv-sgw/images/876ac67e-message_template_content_view_custom_web_screens-eddc842a74bf136fd6c899256b8c7c4d.png?fit=max&auto=format&n=GrDbzzq1LLfv-sgw&q=85&s=ed457138e495ee3f686a68510bfef0dc" width="1282" height="700" data-path="images/876ac67e-message_template_content_view_custom_web_screens-eddc842a74bf136fd6c899256b8c7c4d.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx lines theme={null}
    import { useState, useEffect } from "react";
    import {
      CometChatMessageList,
      CometChatUIKit,
      CometChatUIKitConstants,
      CometChatMessageTemplate,
    } from "@cometchat/chat-uikit-react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";

    function ContentViewDemo() {
      const [chatGroup, setChatGroup] = useState<CometChat.Group>();
      const [templates, setTemplates] = useState<CometChatMessageTemplate[]>([]);

      useEffect(() => {
        CometChat.getGroup("guid").then((group) => setChatGroup(group));

        const definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates();
        const CUSTOM_MESSAGE_TYPE = "customType";
        const customTemplate = new CometChatMessageTemplate({
          type: CUSTOM_MESSAGE_TYPE,
          category: CometChatUIKitConstants.MessageCategory.custom,
          contentView: (message: CometChat.BaseMessage) => (
            <div className="content-view">
              <div className="content-view__body">
                <div className="content-view__body-title">Blazer Casual</div>
                <div className="content-view__body-description">
                  Men's Tailored Regular Fit Blazer
                </div>
                <div className="content-view__body-price">
                  $37.99 <span className="content-view__body-price-old">$74.00</span>
                </div>
              </div>
              <div className="content-footer">Buy now</div>
            </div>
          ),
        });
        definedTemplates.push(customTemplate);
        setTemplates(definedTemplates);
      }, []);

      const getMessageRequestBuilder = () => {
        const CUSTOM_MESSAGE_TYPE = "customType";
        const categories = CometChatUIKit.getDataSource().getAllMessageCategories();
        categories.push(CometChatUIKitConstants.MessageCategory.custom);
        const types = CometChatUIKit.getDataSource().getAllMessageTypes();
        types.push(CUSTOM_MESSAGE_TYPE);
        return new CometChat.MessagesRequestBuilder()
          .setCategories(categories)
          .setTypes(types)
          .hideReplies(true)
          .setLimit(30);
      };

      if (!chatGroup) return null;

      return (
        <CometChatMessageList
          group={chatGroup}
          templates={templates}
          messagesRequestBuilder={getMessageRequestBuilder()}
        />
      );
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css lines theme={null}
    .content-view__body {
      height: 105px;
      display: flex;
      padding: 12px 4px;
      flex-direction: column;
      text-align: left;
      gap: 16px;
    }

    .content-view__body-title {
      color: #141414;
      font: 700 16px/1.2 Roboto;
    }

    .content-view__body-description {
      color: #727272;
      font: 400 14px/1.2 Roboto;
    }

    .content-view__body-price {
      color: #6852d6;
      font: 700 16px/1.2 Roboto;
    }

    .content-view__body-price-old {
      color: #727272;
      font: 400 14px/1.2 Roboto;
      text-decoration: line-through;
    }

    .content-footer {
      display: flex;
      height: 40px;
      padding: 8px 20px;
      justify-content: center;
      align-items: center;
      border-top: 1px solid #dcdcdc;
      color: #6852d6;
      font: 500 14px/1.2 Roboto;
    }
    ```
  </Tab>
</Tabs>

### Custom bottom view with warning

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/THlknidvlbNx5AzI/images/aac6b2ed-message_template_bottom_view_custom_web_screens-2988018c35e631d0222f78849c3b4946.png?fit=max&auto=format&n=THlknidvlbNx5AzI&q=85&s=bca1418ad4fcacc148c50e59ac43379f" width="1280" height="328" data-path="images/aac6b2ed-message_template_bottom_view_custom_web_screens-2988018c35e631d0222f78849c3b4946.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx lines theme={null}
    import { useState, useEffect } from "react";
    import {
      CometChatMessageList,
      CometChatUIKit,
      CometChatUIKitConstants,
      CometChatMessageTemplate,
    } from "@cometchat/chat-uikit-react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";

    function BottomViewDemo() {
      const [chatGroup, setChatGroup] = useState<CometChat.Group>();
      const [templates, setTemplates] = useState<CometChatMessageTemplate[]>([]);

      useEffect(() => {
        CometChat.getGroup("guid").then((group) => setChatGroup(group));

        const definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates();
        const modified = definedTemplates.map((t) => {
          if (
            t.type === CometChatUIKitConstants.MessageTypes.text &&
            t.category === CometChatUIKitConstants.MessageCategory.message
          ) {
            t.bottomView = (message: CometChat.BaseMessage) => (
              <div className="bottom-view">
                <span className="error-icon"> </span> According to guidelines you cannot share contact
              </div>
            );
          }
          return t;
        });
        setTemplates(modified);
      }, []);

      if (!chatGroup) return null;

      return <CometChatMessageList group={chatGroup} templates={templates} />;
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css lines theme={null}
    .cometchat .cometchat-message-bubble__body {
      border-radius: 12px 12px 0px 0px;
    }

    .bottom-view {
      display: flex;
      height: 19px;
      align-items: center;
      gap: 4px;
      color: #f44649;
      font: 400 12px/120% Roboto;
      border-radius: 0px 0px 12px 12px;
      background: linear-gradient(
          0deg,
          rgba(244, 70, 73, 0.2) 0%,
          rgba(244, 70, 73, 0.2) 100%
        ),
        #fff;
      padding: 0px 8px 0px 5px;
    }
    ```
  </Tab>
</Tabs>

### Replace entire bubble

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/v4EbHQCGZ54oJcmr/images/592e9d71-T29n553rx5WwZu8P8BHoqMKp4hNo8AAAAASUVORK5CYII.png?fit=max&auto=format&n=v4EbHQCGZ54oJcmr&q=85&s=94e2c03c2ac6cf7d47a2dc7a96416541" width="1280" height="324" data-path="images/592e9d71-T29n553rx5WwZu8P8BHoqMKp4hNo8AAAAASUVORK5CYII.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx lines theme={null}
    import { useState, useEffect } from "react";
    import {
      CometChatMessageList,
      CometChatUIKit,
      CometChatUIKitConstants,
      CometChatMessageTemplate,
      MessageBubbleAlignment,
      CometChatUIKitLoginListener,
      MessageReceiptUtils,
      Receipts,
      isMessageSentByMe,
    } from "@cometchat/chat-uikit-react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";

    function BubbleViewDemo() {
      const [chatGroup, setChatGroup] = useState<CometChat.Group>();
      const [templates, setTemplates] = useState<CometChatMessageTemplate[]>([]);

      useEffect(() => {
        CometChat.getGroup("guid").then((group) => setChatGroup(group));

        const definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates();
        const modified = definedTemplates.map((t) => {
          if (
            t.type === CometChatUIKitConstants.MessageTypes.text &&
            t.category === CometChatUIKitConstants.MessageCategory.message
          ) {
            t.bubbleView = (
              message: CometChat.BaseMessage,
              alignment: MessageBubbleAlignment
            ) => {
              const isSentByMe = isMessageSentByMe(
                message,
                CometChatUIKitLoginListener.getLoggedInUser()!
              );
              let textMessage = "";
              if (message instanceof CometChat.TextMessage) {
                textMessage = message.getText();
              }
              return (
                <div className={`bubble-view ${isSentByMe ? "bubble-view__outgoing" : "bubble-view__incoming"}`}>
                  <div className="bubble-view__content">
                    <div className="bubble-view__content__text">{textMessage}</div>
                  </div>
                </div>
              );
            };
          }
          return t;
        });
        setTemplates(modified);
      }, []);

      if (!chatGroup) return null;

      return <CometChatMessageList group={chatGroup} templates={templates} />;
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css lines theme={null}
    .bubble-view {
      display: flex;
      flex-direction: column;
      width: 100%;
      padding: 20px;
      gap: 12px;
    }

    .bubble-view__outgoing {
      align-items: flex-end;
    }

    .bubble-view__incoming {
      align-items: flex-start;
    }

    .bubble-view__content {
      max-width: 60%;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    .bubble-view__content__text {
      width: fit-content;
      padding: 4px;
      border-radius: 2px 2px 0px 2px;
      background: #6852d6;
      color: white;
    }

    .bubble-view__incoming .bubble-view__content__text {
      background-color: #e8e8e8;
      color: #141414;
    }
    ```
  </Tab>
</Tabs>

### Custom action sheet options

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/GrDbzzq1LLfv-sgw/images/83fea471-message_template_options_web_screens-d29342818123fb8738cec024208016fe.png?fit=max&auto=format&n=GrDbzzq1LLfv-sgw&q=85&s=859a539c03a64306e454f8a4c8e411bf" width="1280" height="782" data-path="images/83fea471-message_template_options_web_screens-d29342818123fb8738cec024208016fe.png" />
</Frame>

```tsx lines theme={null}
import { useState, useEffect } from "react";
import {
  CometChatMessageList,
  CometChatUIKit,
  CometChatUIKitConstants,
  CometChatMessageTemplate,
  CometChatActionsIcon,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function OptionsDemo() {
  const [chatGroup, setChatGroup] = useState<CometChat.Group>();
  const [templates, setTemplates] = useState<CometChatMessageTemplate[]>([]);

  useEffect(() => {
    CometChat.getGroup("guid").then((group) => setChatGroup(group));

    const definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates();
    const modified = definedTemplates.map((t) => {
      if (
        t.type === CometChatUIKitConstants.MessageTypes.text &&
        t.category === CometChatUIKitConstants.MessageCategory.message
      ) {
        t.options = (
          loggedInUser: CometChat.User,
          message: CometChat.BaseMessage,
          group?: CometChat.Group
        ) => {
          const defaultOptions: any =
            CometChatUIKit.getDataSource().getMessageOptions(loggedInUser, message, group);
          const myView: any = new CometChatActionsIcon({
            id: "refresh",
            title: "Refresh",
            iconURL: "",
            onClick: () => { /* custom logic */ },
          });
          defaultOptions.splice(1, 0, myView);
          return defaultOptions;
        };
      }
      return t;
    });
    setTemplates(modified);
  }, []);

  if (!chatGroup) return null;

  return <CometChatMessageList group={chatGroup} templates={templates} />;
}
```

### New template for a custom message type

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/HFXOvmhiLRb5ClID/images/92e8ec15-message_template_new_template_web_screens-d68718c22425cd73f6330942deea8cc0.png?fit=max&auto=format&n=HFXOvmhiLRb5ClID&q=85&s=9f69bbd1a8136d9023b9848da0f93608" width="1280" height="733" data-path="images/92e8ec15-message_template_new_template_web_screens-d68718c22425cd73f6330942deea8cc0.png" />
</Frame>

```tsx lines theme={null}
import { useState, useEffect } from "react";
import {
  CometChatMessageList,
  CometChatUIKit,
  CometChatUIKitConstants,
  CometChatMessageTemplate,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function NewTemplateDemo() {
  const [chatGroup, setChatGroup] = useState<CometChat.Group>();
  const [templates, setTemplates] = useState<CometChatMessageTemplate[]>([]);

  useEffect(() => {
    CometChat.getGroup("guid").then((group) => setChatGroup(group));

    const definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates();
    const CUSTOM_MESSAGE_TYPE = "customType";
    const customTemplate = new CometChatMessageTemplate({
      type: CUSTOM_MESSAGE_TYPE,
      category: CometChatUIKitConstants.MessageCategory.custom,
      contentView: (message: CometChat.BaseMessage) => (
        <div style={{ padding: 8 }}>Custom: {JSON.stringify(message.getData())}</div>
      ),
    });
    definedTemplates.push(customTemplate);
    setTemplates(definedTemplates);
  }, []);

  const getMessageRequestBuilder = () => {
    const CUSTOM_MESSAGE_TYPE = "customType";
    const categories = CometChatUIKit.getDataSource().getAllMessageCategories();
    categories.push(CometChatUIKitConstants.MessageCategory.custom);
    const types = CometChatUIKit.getDataSource().getAllMessageTypes();
    types.push(CUSTOM_MESSAGE_TYPE);
    return new CometChat.MessagesRequestBuilder()
      .setCategories(categories)
      .setTypes(types)
      .hideReplies(true)
      .setLimit(30);
  };

  if (!chatGroup) return null;

  return (
    <CometChatMessageList
      group={chatGroup}
      templates={templates}
      messagesRequestBuilder={getMessageRequestBuilder()}
    />
  );
}
```

***

## Styling

`CometChatMessageTemplate` renders inside `.cometchat-message-bubble`. Style individual bubble sections using CSS:

```css lines theme={null}
.cometchat .cometchat-message-bubble__body {
  /* content area overrides */
}

.cometchat .cometchat-message-bubble__body-footer-view {
  /* footer area overrides */
}

.cometchat .cometchat-message-bubble__body-header-view {
  /* header area overrides */
}
```

***

## Properties

### bubbleView

| Key     | Value                                                                                                             |
| ------- | ----------------------------------------------------------------------------------------------------------------- |
| Type    | `((message: CometChat.BaseMessage, alignment: MessageBubbleAlignment) => Element \| JSX.Element \| null) \| null` |
| Default | `null`                                                                                                            |

Replaces the entire message bubble. When set, `headerView`, `contentView`, `footerView`, `bottomView`, `statusInfoView`, and `replyView` are ignored for that template.

***

### bottomView

| Key     | Value                                                                                                             |
| ------- | ----------------------------------------------------------------------------------------------------------------- |
| Type    | `((message: CometChat.BaseMessage, alignment: MessageBubbleAlignment) => Element \| JSX.Element \| null) \| null` |
| Default | `null`                                                                                                            |

Custom bottom section below the content area. Default renders link previews or "load more" for long messages.

***

### category

| Key     | Value    |
| ------- | -------- |
| Type    | `string` |
| Default | `""`     |

Maps the template to a CometChat message category (e.g., `CometChatUIKitConstants.MessageCategory.message`, `CometChatUIKitConstants.MessageCategory.custom`).

***

### contentView

| Key     | Value                                                                                                                                                        |
| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Type    | `((message: CometChat.BaseMessage, alignment: MessageBubbleAlignment, textFormatters?: CometChatTextFormatter[]) => Element \| JSX.Element \| null) \| null` |
| Default | `null`                                                                                                                                                       |

Custom content area. Default renders text, image, video, audio, or file bubble based on message type.

***

### footerView

| Key     | Value                                                                                                             |
| ------- | ----------------------------------------------------------------------------------------------------------------- |
| Type    | `((message: CometChat.BaseMessage, alignment: MessageBubbleAlignment) => Element \| JSX.Element \| null) \| null` |
| Default | `null`                                                                                                            |

Custom footer below the content area. Default renders reactions.

***

### headerView

| Key     | Value                                                                                                             |
| ------- | ----------------------------------------------------------------------------------------------------------------- |
| Type    | `((message: CometChat.BaseMessage, alignment: MessageBubbleAlignment) => Element \| JSX.Element \| null) \| null` |
| Default | `null`                                                                                                            |

Custom header above the content area. Default renders sender name.

***

### options

| Key     | Value                                                                                                                 |
| ------- | --------------------------------------------------------------------------------------------------------------------- |
| Type    | `(loggedInUser: CometChat.User, message: CometChat.BaseMessage, group?: CometChat.Group) => CometChatMessageOption[]` |
| Default | SDK default options                                                                                                   |

Returns the list of action sheet items for long-press on a message bubble.

***

### replyView

| Key     | Value                                                                                                                                                                                                                    |
| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Type    | `((message: CometChat.BaseMessage, alignment?: MessageBubbleAlignment, onReplyViewClicked?: (msg: CometChat.BaseMessage) => void, textFormatters?: CometChatTextFormatter[]) => Element \| JSX.Element \| null) \| null` |
| Default | `null`                                                                                                                                                                                                                   |

Custom reply preview above the content area.

***

### statusInfoView

| Key     | Value                                                                                                                                                                                                        |
| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Type    | `((message: CometChat.BaseMessage, alignment: MessageBubbleAlignment, hideReceipts?: boolean, messageSentAtDateTimeFormat?: CalendarObject, showError?: boolean) => Element \| JSX.Element \| null) \| null` |
| Default | `null`                                                                                                                                                                                                       |

Custom status info area. Default renders receipt icon and timestamp.

***

### type

| Key     | Value        |
| ------- | ------------ |
| Type    | `string`     |
| Default | — (required) |

Maps the template to a CometChat message type (e.g., `CometChatUIKitConstants.MessageTypes.text`, `CometChatUIKitConstants.MessageTypes.image`).

***