Message List - CometChat Docs

AI Agent Component Spec

{
  "component": "CometChatMessageList",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatMessageList } from \"@cometchat/chat-uikit-react\";",
  "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
  "description": "Scrollable list of sent and received messages with text, media, reactions, read receipts, threaded replies, and AI features.",
  "cssRootClass": ".cometchat-message-list",
  "primaryOutput": {
    "prop": "onThreadRepliesClick",
    "type": "(message: CometChat.BaseMessage) => void"
  },
  "props": {
    "data": {
      "user": { "type": "CometChat.User", "default": "undefined" },
      "group": { "type": "CometChat.Group", "default": "undefined" },
      "messagesRequestBuilder": { "type": "CometChat.MessagesRequestBuilder", "default": "SDK default" },
      "reactionsRequestBuilder": { "type": "CometChat.ReactionsRequestBuilder", "default": "undefined" },
      "parentMessageId": { "type": "number", "default": "undefined" },
      "templates": { "type": "CometChatMessageTemplate[]", "default": "SDK defaults" },
      "goToMessageId": { "type": "string", "default": "undefined" }
    },
    "callbacks": {
      "onThreadRepliesClick": "(message: CometChat.BaseMessage) => void",
      "onReactionClick": "(reaction: CometChat.ReactionCount, message: CometChat.BaseMessage) => void",
      "onReactionListItemClick": "(reaction: CometChat.Reaction, message: CometChat.BaseMessage) => void",
      "onError": "((error: CometChat.CometChatException) => void) | null"
    },
    "visibility": {
      "hideDateSeparator": { "type": "boolean", "default": false },
      "hideStickyDate": { "type": "boolean", "default": false },
      "hideReceipts": { "type": "boolean", "default": false },
      "hideError": { "type": "boolean", "default": false },
      "hideReplyInThreadOption": { "type": "boolean", "default": false },
      "hideReplyOption": { "type": "boolean", "default": false },
      "hideTranslateMessageOption": { "type": "boolean", "default": false },
      "hideEditMessageOption": { "type": "boolean", "default": false },
      "hideDeleteMessageOption": { "type": "boolean", "default": false },
      "hideReactionOption": { "type": "boolean", "default": false },
      "hideMessagePrivatelyOption": { "type": "boolean", "default": false },
      "hideCopyMessageOption": { "type": "boolean", "default": false },
      "hideMessageInfoOption": { "type": "boolean", "default": false },
      "hideAvatar": { "type": "boolean", "default": false },
      "hideGroupActionMessages": { "type": "boolean", "default": false },
      "hideModerationView": { "type": "boolean", "default": false },
      "hideFlagMessageOption": { "type": "boolean", "default": false },
      "hideFlagRemarkField": { "type": "boolean", "default": false },
      "showConversationStarters": { "type": "boolean", "default": false },
      "showSmartReplies": { "type": "boolean", "default": false },
      "showMarkAsUnreadOption": { "type": "boolean", "default": false },
      "showScrollbar": { "type": "boolean", "default": false }
    },
    "behavior": {
      "messageAlignment": { "type": "MessageListAlignment", "default": "MessageListAlignment.standard" },
      "scrollToBottomOnNewMessages": { "type": "boolean", "default": false },
      "quickOptionsCount": { "type": "number", "default": 3 },
      "startFromUnreadMessages": { "type": "boolean", "default": false },
      "isAgentChat": { "type": "boolean", "default": false },
      "loadLastAgentConversation": { "type": "boolean", "default": false }
    },
    "sound": {
      "disableSoundForMessages": { "type": "boolean", "default": true },
      "customSoundForMessages": { "type": "string", "default": "undefined" }
    },
    "ai": {
      "smartRepliesKeywords": { "type": "string[]", "default": "[\"what\",\"when\",\"why\",\"who\",\"where\",\"how\",\"?\"]" },
      "smartRepliesDelayDuration": { "type": "number", "default": 10000 }
    },
    "dateFormatting": {
      "separatorDateTimeFormat": "CalendarObject",
      "stickyDateTimeFormat": "CalendarObject",
      "messageSentAtDateTimeFormat": "CalendarObject",
      "messageInfoDateTimeFormat": "CalendarObject"
    },
    "viewSlots": {
      "headerView": "JSX.Element",
      "footerView": "JSX.Element",
      "loadingView": "JSX.Element",
      "emptyView": "JSX.Element",
      "errorView": "JSX.Element"
    },
    "formatting": {
      "textFormatters": { "type": "CometChatTextFormatter[]", "default": "default formatters" }
    }
  },
  "events": [
    { "name": "CometChatMessageEvents.ccMessageEdited", "payload": "IMessages" },
    { "name": "CometChatMessageEvents.ccMessageDeleted", "payload": "CometChat.BaseMessage" },
    { "name": "CometChatMessageEvents.ccMessageRead", "payload": "CometChat.BaseMessage" },
    { "name": "CometChatMessageEvents.ccReplyToMessage", "payload": "IMessages" },
    { "name": "CometChatUIEvents.ccOpenChat", "payload": "IOpenChat" },
    { "name": "CometChatUIEvents.ccActiveChatChanged", "payload": "IActiveChatChanged" }
  ],
  "sdkListeners": [
    "onTextMessageReceived", "onMediaMessageReceived", "onCustomMessageReceived",
    "onMessageEdited", "onMessageDeleted", "onMessageModerated",
    "onTypingStarted", "onTypingEnded",
    "onMessagesDelivered", "onMessagesRead", "onMessagesDeliveredToAll", "onMessagesReadByAll"
  ],
  "types": {
    "MessageListAlignment": { "left": 0, "standard": 1 },
    "CalendarObject": { "today": "string", "yesterday": "string", "lastWeek": "string", "otherDays": "string" }
  }
}

Where It Fits

CometChatMessageList renders a scrollable, real-time message feed for a user or group conversation. Wire it alongside CometChatMessageHeader and CometChatMessageComposer to build a standard chat view.

import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatMessageComposer,
} from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function ChatView() {
  const [chatUser, setChatUser] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("uid").then((user) => setChatUser(user));
  }, []);

  return chatUser ? (
    <div style={{ height: "100vh", display: "flex", flexDirection: "column" }}>
      <CometChatMessageHeader user={chatUser} />
      <CometChatMessageList user={chatUser} />
      <CometChatMessageComposer user={chatUser} />
    </div>
  ) : null;
}

Minimal Render

import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function MessageListDemo() {
  const [chatUser, setChatUser] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("uid").then((user) => setChatUser(user));
  }, []);

  return chatUser ? <CometChatMessageList user={chatUser} /> : null;
}

export default MessageListDemo;

Root CSS class: .cometchat-message-list

Filtering Messages

Pass a CometChat.MessagesRequestBuilder to messagesRequestBuilder. The UID/GUID parameters are always overridden internally based on the user/group prop.

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";

function FilteredMessageList() {
  return (
    <CometChatMessageList
      user={chatUser}
      messagesRequestBuilder={
        new CometChat.MessagesRequestBuilder().setLimit(5)
      }
    />
  );
}

Reactions Request Builder

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";

function ReactionsFilteredList() {
  return (
    <CometChatMessageList
      user={chatUser}
      reactionsRequestBuilder={
        new CometChat.ReactionsRequestBuilder().setLimit(5)
      }
    />
  );
}

Refer to MessagesRequestBuilder for the full builder API.

Actions and Events

Callback Props

onThreadRepliesClick

Fires when a threaded message reply count is clicked.

import { CometChatMessageList } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function MessageListWithThreads() {
  return (
    <CometChatMessageList
      user={chatUser}
      onThreadRepliesClick={(message: CometChat.BaseMessage) => {
        console.log("Thread:", message.getId());
      }}
    />
  );
}

onReactionClick

Fires when a reaction on a message bubble is clicked.

import { CometChatMessageList } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function MessageListWithReactions() {
  return (
    <CometChatMessageList
      user={chatUser}
      onReactionClick={(reaction: CometChat.ReactionCount, message: CometChat.BaseMessage) => {
        console.log("Reaction:", reaction, "on message:", message.getId());
      }}
    />
  );
}

onReactionListItemClick

Fires when a specific reaction in the reaction detail view is clicked.

import { CometChatMessageList } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function MessageListWithReactionDetail() {
  return (
    <CometChatMessageList
      user={chatUser}
      onReactionListItemClick={(reaction: CometChat.Reaction, message: CometChat.BaseMessage) => {
        console.log("Reaction detail:", reaction, message.getId());
      }}
    />
  );
}

onError

Fires on internal errors.

import { CometChatMessageList } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function MessageListWithError() {
  return (
    <CometChatMessageList
      user={chatUser}
      onError={(error: CometChat.CometChatException) => {
        console.error("MessageList error:", error);
      }}
    />
  );
}

Global UI Events

Event	Fires when	Payload
`CometChatMessageEvents.ccMessageEdited`	A message is edited	`IMessages`
`CometChatMessageEvents.ccMessageDeleted`	A message is deleted	`CometChat.BaseMessage`
`CometChatMessageEvents.ccMessageRead`	A message is read	`CometChat.BaseMessage`
`CometChatMessageEvents.ccReplyToMessage`	User replies to a message	`IMessages`
`CometChatUIEvents.ccOpenChat`	User opens a chat	`IOpenChat`
`CometChatUIEvents.ccActiveChatChanged`	Active chat changes	`IActiveChatChanged`

import { useEffect } from "react";
import { CometChatMessageEvents, CometChatUIEvents } from "@cometchat/chat-uikit-react";

function useMessageListEvents() {
  useEffect(() => {
    const editedSub = CometChatMessageEvents.ccMessageEdited.subscribe(
      (data) => console.log("Edited:", data)
    );
    const deletedSub = CometChatMessageEvents.ccMessageDeleted.subscribe(
      (msg) => console.log("Deleted:", msg)
    );

    return () => {
      editedSub?.unsubscribe();
      deletedSub?.unsubscribe();
    };
  }, []);
}

SDK Events (Real-Time, Automatic)

The component listens to these SDK events internally:

SDK Listener	Internal behavior
`onTextMessageReceived` / `onMediaMessageReceived` / `onCustomMessageReceived`	Appends new message to list
`onMessageEdited` / `onMessageDeleted`	Updates/removes message in list
`onTypingStarted` / `onTypingEnded`	Shows/hides typing indicator
`onMessagesDelivered` / `onMessagesRead` / `onMessagesDeliveredToAll` / `onMessagesReadByAll`	Updates receipt ticks
`onMessageModerated`	Updates moderated message state

Custom View Slots

Slot	Type	Replaces
`headerView`	`JSX.Element`	Area above the message list
`footerView`	`JSX.Element`	Area below the message list
`loadingView`	`JSX.Element`	Loading state
`emptyView`	`JSX.Element`	Empty state
`errorView`	`JSX.Element`	Error state
`templates`	`CometChatMessageTemplate[]`	Message bubble rendering
`textFormatters`	`CometChatTextFormatter[]`	Text formatting in messages

headerView

Custom view above the message list.

TypeScript
CSS

import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList, CometChatButton } from "@cometchat/chat-uikit-react";

function MessageListWithHeader() {
  const [chatUser, setChatUser] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("uid").then((user) => setChatUser(user));
  }, []);

  return chatUser ? (
    <CometChatMessageList
      user={chatUser}
      headerView={
        <div className="header-view">
          <CometChatButton text="Notes" />
          <CometChatButton text="Pinned Message" />
          <CometChatButton text="Saved Links" />
        </div>
      }
    />
  ) : null;
}

.header-view {
  display: flex;
  width: 100%;
  padding: 3px 16px;
  align-items: flex-start;
  gap: 5px;
  background: #edeafa;
}

.header-view .cometchat .cometchat-button {
  width: auto;
  height: 32px;
  border-radius: 1000px;
  border: 1px solid #e8e8e8;
  background: #fafafa;
}

.header-view .cometchat .cometchat-button__text {
  color: #6852d6;
  font: 400 12px/14.4px Roboto;
}

footerView

Custom view below the message list.

TypeScript
CSS

import { CometChatMessageList, CometChatButton } from "@cometchat/chat-uikit-react";

function MessageListWithFooter() {
  return (
    <CometChatMessageList
      user={chatUser}
      footerView={
        <div className="footer-view">
          <CometChatButton text="Ice Breakers" />
          <CometChatButton text="+1-212-456-7890" />
        </div>
      }
    />
  );
}

.footer-view {
  display: flex;
  width: 100%;
  padding: 3px 16px;
  align-items: flex-start;
  gap: 5px;
  background: #edeafa;
}

.footer-view .cometchat .cometchat-button {
  width: auto;
  height: 32px;
  border-radius: 1000px;
  border: 1px solid #e8e8e8;
  background: #fafafa;
}

.footer-view .cometchat .cometchat-button__text {
  color: #6852d6;
  font: 400 12px/14.4px Roboto;
}

templates

Custom message bubble templates via CometChatMessageTemplate.

import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatMessageList,
  ChatConfigurator,
  CometChatActionsIcon,
} from "@cometchat/chat-uikit-react";

function MessageListCustomTemplates() {
  const [chatUser, setChatUser] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("uid").then((user) => setChatUser(user));
  }, []);

  const getTemplates = () => {
    const templates = ChatConfigurator.getDataSource().getAllMessageTemplates();
    templates.map((data) => {
      data.options = (loggedInUser, message, group) => {
        const defaults = ChatConfigurator.getDataSource().getMessageOptions(
          loggedInUser, message, group
        );
        defaults.push(
          new CometChatActionsIcon({
            id: "custom",
            title: "Custom Action",
            onClick: () => console.log("custom action"),
          })
        );
        return defaults;
      };
    });
    return templates;
  };

  return chatUser ? (
    <CometChatMessageList user={chatUser} templates={getTemplates()} />
  ) : null;
}

Date Time Formatting

Customize timestamps using CalendarObject:

import { CometChatMessageList, CalendarObject } from "@cometchat/chat-uikit-react";

function MessageListCustomDates() {
  const dateFormat = new CalendarObject({
    today: "hh:mm A",
    yesterday: "[yesterday]",
    otherDays: "DD/MM/YYYY",
  });

  return (
    <CometChatMessageList
      user={chatUser}
      separatorDateTimeFormat={dateFormat}
      stickyDateTimeFormat={dateFormat}
      messageSentAtDateTimeFormat={dateFormat}
      messageInfoDateTimeFormat={dateFormat}
    />
  );
}

Common Patterns

Threaded message list

import { CometChatMessageList } from "@cometchat/chat-uikit-react";

function ThreadedMessageList() {
  return (
    <CometChatMessageList
      user={chatUser}
      parentMessageId={parentMessage.getId()}
    />
  );
}

Hide all chrome — minimal list

import { CometChatMessageList } from "@cometchat/chat-uikit-react";

function MinimalMessageList() {
  return (
    <CometChatMessageList
      user={chatUser}
      hideReceipts={true}
      hideAvatar={true}
      hideDateSeparator={true}
      hideStickyDate={true}
      hideGroupActionMessages={true}
    />
  );
}

Left-aligned messages

import { CometChatMessageList, MessageListAlignment } from "@cometchat/chat-uikit-react";

function LeftAlignedList() {
  return (
    <CometChatMessageList
      user={chatUser}
      messageAlignment={MessageListAlignment.left}
    />
  );
}

AI conversation starters and smart replies

import { CometChatMessageList } from "@cometchat/chat-uikit-react";

function AIMessageList() {
  return (
    <CometChatMessageList
      user={chatUser}
      showConversationStarters={true}
      showSmartReplies={true}
      smartRepliesKeywords={["what", "when", "why", "how", "?"]}
      smartRepliesDelayDuration={10000}
    />
  );
}

CSS Architecture

The component uses CSS custom properties (design tokens) defined in @cometchat/chat-uikit-react/css-variables.css. The cascade:

Global tokens set on the .cometchat root wrapper.
Component CSS (.cometchat-message-list) consumes these tokens via var().
Overrides target .cometchat-message-list descendant selectors.

Key Selectors

Target	Selector
Root	`.cometchat-message-list`
Error state	`.cometchat-message-list__error-state-view`
Footer smart replies	`.cometchat-message-list__footer-smart-replies`
Footer conversation starters	`.cometchat-message-list__footer-conversation-starter`
Outgoing message bubble	`.cometchat-message-bubble-outgoing`
Incoming message bubble	`.cometchat-message-bubble-incoming`
Message bubble status info	`.cometchat-message-bubble__status-info-view`
Thread view replies	`.cometchat-message-bubble__thread-view-replies`
Text bubble	`.cometchat-message-bubble .cometchat-text-bubble`
Date separator	`.cometchat-message-bubble__status-info-view .cometchat-date`

Customization Matrix

What to change	Where	Property/API	Example
Handle thread clicks	Component props	`onThreadRepliesClick`	`onThreadRepliesClick={(msg) => openThread(msg)}`
Filter messages	Component props	`messagesRequestBuilder`	`messagesRequestBuilder={builder}`
Toggle visibility	Component props	`hide<Feature>` boolean props	`hideReceipts={true}`
Custom message bubbles	Component props	`templates`	`templates={customTemplates}`
Add header/footer	Component props	`headerView` / `footerView`	`headerView={<div>...</div>}`
Change colors, fonts, spacing	Global CSS	Target `.cometchat-message-list` class	`.cometchat-message-bubble-outgoing { background: blue; }`

Accessibility

Message bubbles are rendered as semantic elements. Date separators provide temporal context. The list supports keyboard scrolling. Thread reply counts are interactive and keyboard-focusable. Reaction buttons activate on Enter/Space. Avatar images include the sender name as alt text.

Props

All props are optional. Sorted alphabetically.

customSoundForMessages

URL to a custom audio file for incoming message notifications.


Type	`string`
Default	`undefined`

disableSoundForMessages

Disables the notification sound for incoming messages.


Type	`boolean`
Default	`true`

emptyView

Custom component displayed when there are no messages.


Type	`JSX.Element`
Default	Built-in empty state

errorView

Custom component displayed when an error occurs.


Type	`JSX.Element`
Default	Built-in error state

footerView

Custom component displayed below the message list.


Type	`JSX.Element`
Default	`undefined`

goToMessageId

Scrolls to the specified message on initial load.


Type	`string`
Default	`undefined`

group

The group for group conversation messages.


Type	`CometChat.Group`
Default	`undefined`

headerView

Custom component displayed above the message list.


Type	`JSX.Element`
Default	`undefined`

hideAvatar

Hides avatars on messages.


Type	`boolean`
Default	`false`

hideCopyMessageOption

Hides the copy message option.


Type	`boolean`
Default	`false`

hideDateSeparator

Hides date separators between message groups.


Type	`boolean`
Default	`false`

hideDeleteMessageOption

Hides the delete message option.


Type	`boolean`
Default	`false`

hideEditMessageOption

Hides the edit message option.


Type	`boolean`
Default	`false`

hideError

Hides the default and custom error views.


Type	`boolean`
Default	`false`

hideFlagMessageOption

Hides the “Report Message” option.


Type	`boolean`
Default	`false`

hideFlagRemarkField

Hides the remark text area in the flag message dialog.


Type	`boolean`
Default	`false`

hideGroupActionMessages

Hides group action messages (join, leave, kick, etc.).


Type	`boolean`
Default	`false`

hideMessageInfoOption

Hides the message info option.


Type	`boolean`
Default	`false`

hideMessagePrivatelyOption

Hides the “Message Privately” option.


Type	`boolean`
Default	`false`

hideModerationView

Hides the moderation view below moderated messages.


Type	`boolean`
Default	`false`

hideReactionOption

Hides the reaction option.


Type	`boolean`
Default	`false`

hideReceipts

Hides read/delivery receipt indicators.


Type	`boolean`
Default	`false`

hideReplyInThreadOption

Hides the “Reply in Thread” option.


Type	`boolean`
Default	`false`

hideReplyOption

Hides the reply option.


Type	`boolean`
Default	`false`

hideStickyDate

Hides the sticky date header.


Type	`boolean`
Default	`false`

hideTranslateMessageOption

Hides the translate message option.


Type	`boolean`
Default	`false`

isAgentChat

Toggles AI Agent functionality for the message list.


Type	`boolean`
Default	`false`

loadingView

Custom component displayed during the loading state.


Type	`JSX.Element`
Default	Built-in shimmer

loadLastAgentConversation

Loads the most recent existing agent conversation on mount.


Type	`boolean`
Default	`false`

messageAlignment

Controls message alignment.


Type	`MessageListAlignment`
Default	`MessageListAlignment.standard`

enum MessageListAlignment {
  left,     // 0
  standard, // 1
}

messageInfoDateTimeFormat

Format for message info timestamps.


Type	`CalendarObject`
Default	Component default

messageSentAtDateTimeFormat

Format for message sent-at timestamps.


Type	`CalendarObject`
Default	Component default

messagesRequestBuilder

Controls which messages load and in what order.


Type	`CometChat.MessagesRequestBuilder`
Default	SDK default

UID/GUID are always overridden internally.

onError

Callback fired when the component encounters an error.


Type	`((error: CometChat.CometChatException) => void) \| null`
Default	`undefined`

onReactionClick

Callback fired when a reaction on a message is clicked.


Type	`(reaction: CometChat.ReactionCount, message: CometChat.BaseMessage) => void`
Default	`undefined`

onReactionListItemClick

Callback fired when a reaction list item is clicked.


Type	`(reaction: CometChat.Reaction, message: CometChat.BaseMessage) => void`
Default	`undefined`

onThreadRepliesClick

Callback fired when a threaded message reply count is clicked.


Type	`(message: CometChat.BaseMessage) => void`
Default	`undefined`

parentMessageId

Displays threaded conversation for the specified parent message.


Type	`number`
Default	`undefined`

quickOptionsCount

Number of message options visible in the main menu before overflow.


Type	`number`
Default	`3`

reactionsRequestBuilder

Controls how reactions are fetched for messages.


Type	`CometChat.ReactionsRequestBuilder`
Default	`undefined`

scrollToBottomOnNewMessages

Auto-scrolls to bottom when new messages arrive.


Type	`boolean`
Default	`false`

separatorDateTimeFormat

Format for date separator timestamps.


Type	`CalendarObject`
Default	Component default

showConversationStarters

Shows AI conversation starters.


Type	`boolean`
Default	`false`

showMarkAsUnreadOption

Shows “Mark Unread” option in message actions.


Type	`boolean`
Default	`false`

showScrollbar

Shows the scrollbar in the message list.


Type	`boolean`
Default	`false`

showSmartReplies

Shows AI smart replies.


Type	`boolean`
Default	`false`

smartRepliesDelayDuration

Delay in milliseconds before smart replies appear.


Type	`number`
Default	`10000`

smartRepliesKeywords

Keywords that trigger smart replies.


Type	`string[]`
Default	`["what", "when", "why", "who", "where", "how", "?"]`

startFromUnreadMessages

Loads from the first unread message if available.


Type	`boolean`
Default	`false`

stickyDateTimeFormat

Format for sticky date header timestamps.


Type	`CalendarObject`
Default	Component default

templates

Custom message bubble templates.


Type	`CometChatMessageTemplate[]`
Default	SDK defaults

See CometChatMessageTemplate.

textFormatters

Custom text formatters for message content.


Type	`CometChatTextFormatter[]`
Default	Default formatters from data source

See CometChatMentionsFormatter.

user

The user for 1-on-1 conversation messages.


Type	`CometChat.User`
Default	`undefined`

Events

Event	Payload	Fires when
`CometChatMessageEvents.ccMessageEdited`	`IMessages`	Message edited
`CometChatMessageEvents.ccMessageDeleted`	`CometChat.BaseMessage`	Message deleted
`CometChatMessageEvents.ccMessageRead`	`CometChat.BaseMessage`	Message read
`CometChatMessageEvents.ccReplyToMessage`	`IMessages`	User replies to message
`CometChatUIEvents.ccOpenChat`	`IOpenChat`	Chat opened
`CometChatUIEvents.ccActiveChatChanged`	`IActiveChatChanged`	Active chat changes

CSS Selectors

Target	Selector
Root	`.cometchat-message-list`
Error state	`.cometchat-message-list__error-state-view`
Footer smart replies	`.cometchat-message-list__footer-smart-replies`
Footer conversation starters	`.cometchat-message-list__footer-conversation-starter`
Outgoing bubble	`.cometchat-message-bubble-outgoing`
Incoming bubble	`.cometchat-message-bubble-incoming`
Status info view	`.cometchat-message-bubble__status-info-view`
Thread view replies	`.cometchat-message-bubble__thread-view-replies`
Text bubble	`.cometchat-message-bubble .cometchat-text-bubble`
Delete bubble	`.cometchat-message-bubble .cometchat-delete-bubble`

​Where It Fits

​Minimal Render

​Filtering Messages

​Reactions Request Builder

​Actions and Events

​Callback Props

​onThreadRepliesClick

​onReactionClick

​onReactionListItemClick

​onError

​Global UI Events

​SDK Events (Real-Time, Automatic)

​Custom View Slots

​headerView

​footerView

​templates

​Date Time Formatting

​Common Patterns

​Threaded message list

​Hide all chrome — minimal list

​Left-aligned messages

​AI conversation starters and smart replies

​CSS Architecture

​Key Selectors

​Customization Matrix

​Accessibility

​Props

​customSoundForMessages

​disableSoundForMessages

​emptyView

​errorView

​footerView

​goToMessageId

​group

​headerView

​hideAvatar

​hideCopyMessageOption

​hideDateSeparator

​hideDeleteMessageOption

​hideEditMessageOption

​hideError

​hideFlagMessageOption

​hideFlagRemarkField

​hideGroupActionMessages

​hideMessageInfoOption

​hideMessagePrivatelyOption

​hideModerationView

​hideReactionOption

​hideReceipts

​hideReplyInThreadOption

​hideReplyOption

​hideStickyDate

​hideTranslateMessageOption

​isAgentChat

​loadingView

​loadLastAgentConversation

​messageAlignment

​messageInfoDateTimeFormat

​messageSentAtDateTimeFormat

​messagesRequestBuilder

​onError

​onReactionClick

​onReactionListItemClick

​onThreadRepliesClick

​parentMessageId

​quickOptionsCount

​reactionsRequestBuilder

​scrollToBottomOnNewMessages

​separatorDateTimeFormat

​showConversationStarters

​showMarkAsUnreadOption

​showScrollbar

​showSmartReplies

​smartRepliesDelayDuration

​smartRepliesKeywords

​startFromUnreadMessages

​stickyDateTimeFormat

​templates

​textFormatters

​user

Where It Fits

Minimal Render

Filtering Messages

Reactions Request Builder

Actions and Events

Callback Props

onThreadRepliesClick

onReactionClick

onReactionListItemClick

onError

Global UI Events

SDK Events (Real-Time, Automatic)

Custom View Slots

headerView

footerView

templates

Date Time Formatting

Common Patterns

Threaded message list

Hide all chrome — minimal list

Left-aligned messages

AI conversation starters and smart replies

CSS Architecture

Key Selectors

Customization Matrix

Accessibility

Props

customSoundForMessages

disableSoundForMessages

emptyView

errorView

footerView

goToMessageId

group

headerView

hideAvatar

hideCopyMessageOption

hideDateSeparator

hideDeleteMessageOption

hideEditMessageOption

hideError

hideFlagMessageOption

hideFlagRemarkField

hideGroupActionMessages

hideMessageInfoOption

hideMessagePrivatelyOption

hideModerationView

hideReactionOption

hideReceipts

hideReplyInThreadOption

hideReplyOption

hideStickyDate

hideTranslateMessageOption

isAgentChat

loadingView

loadLastAgentConversation

messageAlignment

messageInfoDateTimeFormat

messageSentAtDateTimeFormat

messagesRequestBuilder

onError

onReactionClick

onReactionListItemClick

onThreadRepliesClick

parentMessageId

quickOptionsCount

reactionsRequestBuilder

scrollToBottomOnNewMessages

separatorDateTimeFormat

showConversationStarters

showMarkAsUnreadOption

showScrollbar

showSmartReplies

smartRepliesDelayDuration

smartRepliesKeywords

startFromUnreadMessages

stickyDateTimeFormat

templates

textFormatters

user