> ## 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 List

> Scrollable list of sent and received messages with text, media, reactions, read receipts, threaded replies, and AI features.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "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" }
    }
  }
  ```
</Accordion>

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

```tsx lines theme={null}
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;
}
```

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/-ESEkh1kVWNrvtT0/images/6612965e-message_list_overview_web_screens-26a01662c72f3b38c4b5d66f020f5d07.png?fit=max&auto=format&n=-ESEkh1kVWNrvtT0&q=85&s=a439b2e88b71c0f742e0bec799fe46f0" width="1280" height="1006" data-path="images/6612965e-message_list_overview_web_screens-26a01662c72f3b38c4b5d66f020f5d07.png" />
</Frame>

***

## Minimal Render

```tsx lines theme={null}
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.

```tsx lines theme={null}
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

```tsx lines theme={null}
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](/sdk/javascript/message-filtering) for the full builder API.

***

## Actions and Events

### Callback Props

#### onThreadRepliesClick

Fires when a threaded message reply count is clicked.

```tsx lines theme={null}
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.

```tsx lines theme={null}
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.

```tsx lines theme={null}
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.

```tsx lines theme={null}
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`    |

```tsx lines theme={null}
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.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/KQU96uDrdF-ESW1d/images/3096c772-message_list_headerview_web_screens-c088625ffa7a992eeac85df186c320ec.png?fit=max&auto=format&n=KQU96uDrdF-ESW1d&q=85&s=3b6eaad1ff51cd21c220299d73c2cc97" width="1282" height="802" data-path="images/3096c772-message_list_headerview_web_screens-c088625ffa7a992eeac85df186c320ec.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx lines theme={null}
    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;
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css lines theme={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;
    }
    ```
  </Tab>
</Tabs>

### footerView

Custom view below the message list.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/NuY3hD_g_g_X-fwH/images/82f25a7d-message_list_footerview_web_screens-c277b86d74f0cdeb81c6ce7a7251383a.png?fit=max&auto=format&n=NuY3hD_g_g_X-fwH&q=85&s=7e9ba1bbbb368a48cd821e6a48aece6b" width="1282" height="802" data-path="images/82f25a7d-message_list_footerview_web_screens-c277b86d74f0cdeb81c6ce7a7251383a.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx lines theme={null}
    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>
          }
        />
      );
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css lines theme={null}
    .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;
    }
    ```
  </Tab>
</Tabs>

### templates

Custom message bubble templates via [CometChatMessageTemplate](/ui-kit/react/message-template).

```tsx lines theme={null}
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`:

```tsx lines theme={null}
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

```tsx lines theme={null}
import { CometChatMessageList } from "@cometchat/chat-uikit-react";

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

### Hide all chrome — minimal list

```tsx lines theme={null}
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

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

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

### AI conversation starters and smart replies

```tsx lines theme={null}
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:

1. Global tokens set on the `.cometchat` root wrapper.
2. Component CSS (`.cometchat-message-list`) consumes these tokens via `var()`.
3. 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; }` |

***

## 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` |

```ts lines theme={null}
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](/ui-kit/react/message-template).

***

### textFormatters

Custom text formatters for message content.

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

See [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide).

***

### 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`   |