Message Template - CometChat Docs

AI Agent Component Spec

{
  "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
}

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.

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:

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

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

TypeScript
CSS

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()}
    />
  );
}

.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;
}

Custom bottom view with warning

TypeScript
CSS

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} />;
}

.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;
}

Replace entire bubble

TypeScript
CSS

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} />;
}

.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;
}

Custom action sheet options

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

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:

.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 */
}

Accessibility

Message templates render inside CometChatMessageList, which handles keyboard navigation and focus management. Custom views returned from template functions inherit the bubble’s focus and ARIA context. Ensure custom content includes appropriate aria-label attributes when visual-only indicators are used.

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.

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).

​What It Is

​Template Structure

​Fetching Existing Templates

​Common Patterns

​Custom header with status badge

​Custom content view for a custom message type

​Custom bottom view with warning

​Replace entire bubble

​Custom action sheet options

​New template for a custom message type

​Styling

​Accessibility

​Properties

​bubbleView

​bottomView

​category

​contentView

​footerView

​headerView

​options

​replyView

​statusInfoView

​type