> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Message Composer

> Rich text input with attachments, emoji, voice recording, mentions, and formatting for sending messages.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "component": "CometChatMessageComposer",
    "package": "@cometchat/chat-uikit-react",
    "import": "import { CometChatMessageComposer } from \"@cometchat/chat-uikit-react\";",
    "description": "Rich text input with attachments, emoji, voice recording, mentions, and formatting for sending messages.",
    "cssRootClass": ".cometchat-message-composer",
    "primaryOutput": {
      "prop": "onSendButtonClick",
      "type": "(message: CometChat.BaseMessage, mode?: 'send' | 'edit') => void"
    },
    "props": {
      "entity": {
        "user": { "type": "CometChat.User", "default": "undefined" },
        "group": { "type": "CometChat.Group", "default": "undefined" },
        "parentMessageId": { "type": "number", "default": "undefined" }
      },
      "layout": {
        "layout": {
          "type": "CometChatMessageComposerLayout",
          "values": ["'compact'", "'multiline'"],
          "default": "'compact'"
        }
      },
      "textInput": {
        "initialText": { "type": "string", "default": "undefined" },
        "text": { "type": "string", "default": "undefined", "note": "Controlled mode — consumer owns state" },
        "placeholder": { "type": "string", "default": "'Type a message...'" },
        "enterKeyBehavior": {
          "type": "'send' | 'newline' | 'none'",
          "default": "'send'"
        },
        "maxInputHeight": { "type": "number", "default": "200" }
      },
      "richText": {
        "enableRichTextEditor": { "type": "boolean", "default": false },
        "hideRichTextFormattingOptions": { "type": "boolean", "default": false },
        "showBubbleMenuOnSelection": { "type": "boolean", "default": false }
      },
      "editReply": {
        "messageToEdit": { "type": "CometChat.TextMessage | null", "default": "null" },
        "messageToReply": { "type": "CometChat.BaseMessage | null", "default": "null" }
      },
      "attachments": {
        "attachmentOptions": { "type": "CometChatComposerAttachmentOption[]", "default": "undefined" },
        "hideAttachmentOptions": { "type": "CometChatAttachmentHideOptions", "default": "undefined" },
        "showAttachmentPreview": { "type": "boolean", "default": true },
        "maxAttachments": { "type": "number", "default": 10 },
        "allowedFileTypes": { "type": "string[]", "default": "undefined" },
        "maxFileSize": { "type": "number", "default": "undefined" }
      },
      "hideButtons": {
        "hideAttachmentButton": { "type": "boolean", "default": false },
        "hideEmojiKeyboardButton": { "type": "boolean", "default": false },
        "hideVoiceRecordingButton": { "type": "boolean", "default": false },
        "hideStickersButton": { "type": "boolean", "default": false },
        "hideAIButton": { "type": "boolean", "default": true },
        "hideLiveReaction": { "type": "boolean", "default": false },
        "hideSendButton": { "type": "boolean", "default": false },
        "hideError": { "type": "boolean", "default": false }
      },
      "mentions": {
        "textFormatters": { "type": "CometChatTextFormatter[]", "default": "undefined" },
        "disableMentions": { "type": "boolean", "default": false },
        "disableMentionAll": { "type": "boolean", "default": false },
        "mentionAllLabel": { "type": "string", "default": "'all'" },
        "mentionsUsersRequestBuilder": { "type": "CometChat.UsersRequestBuilder", "default": "undefined" },
        "mentionsGroupMembersRequestBuilder": { "type": "CometChat.GroupMembersRequestBuilder", "default": "undefined" }
      },
      "sound": {
        "disableTypingEvents": { "type": "boolean", "default": false },
        "disableSoundForMessage": { "type": "boolean", "default": false },
        "customSoundForMessage": { "type": "string", "default": "undefined" }
      },
      "misc": {
        "disableAutoFocusOnMobile": { "type": "boolean", "default": true },
        "liveReactionIcon": { "type": "string", "default": "undefined" },
        "showScrollbar": { "type": "boolean", "default": false }
      },
      "customViews": {
        "attachmentButtonIconView": "ReactNode",
        "voiceRecordingButtonIconView": "ReactNode",
        "emojiButtonIconView": "ReactNode",
        "sendButtonView": "ReactNode",
        "auxiliaryButtonView": "ReactNode",
        "headerView": "ReactNode"
      },
      "callbacks": {
        "onTextChange": "(text: string) => void",
        "onSendButtonClick": "(message: CometChat.BaseMessage, mode?: 'send' | 'edit') => void",
        "sendTextMessageOverride": "(text: string, richTextHtml?: string) => string",
        "onError": "(error: unknown) => void",
        "onClosePreview": "() => void",
        "onAttachmentAdded": "(file: File) => void",
        "onAttachmentRemoved": "(file: File) => void",
        "onMentionSelected": "(user: CometChat.User | CometChat.GroupMember) => void"
      }
    },
    "events": {
      "emitted": [
        { "name": "ui:message/sent", "payload": "{ message, status }", "description": "Message sent (inprogress → success/error)" },
        { "name": "ui:compose/edit", "payload": "{ message, status }", "description": "Message edit (inprogress → success/error/cancelled)" },
        { "name": "ui:compose/reply", "payload": "{ message, status }", "description": "Reply context set/cleared" },
        { "name": "ui:compose/recording-started", "payload": "{ composerInstanceId }", "description": "Voice recording started (stops other instances)" }
      ],
      "received": [
        { "name": "ui:compose/edit", "payload": "{ message, status: 'inprogress' }", "description": "Enters edit mode for the message" },
        { "name": "ui:compose/reply", "payload": "{ message, status: 'inprogress' }", "description": "Sets reply-to message" },
        { "name": "ui:compose/text", "payload": "{ text }", "description": "Sets the composer text programmatically" },
        { "name": "ui:compose/recording-started", "payload": "{ composerInstanceId }", "description": "Stops own recording if another instance started" }
      ]
    },
    "sdkListeners": [],
    "types": {
      "CometChatMessageComposerLayout": "'compact' | 'multiline'",
      "CometChatAttachmentHideOptions": {
        "image": "boolean | undefined",
        "video": "boolean | undefined",
        "audio": "boolean | undefined",
        "file": "boolean | undefined",
        "polls": "boolean | undefined",
        "collaborativeDocument": "boolean | undefined",
        "collaborativeWhiteboard": "boolean | undefined"
      }
    }
  }
  ```
</Accordion>

## Overview

`CometChatMessageComposer` is a rich text input component for sending messages. It supports attachments, emoji, voice recording, mentions, rich text formatting, and reply/edit previews. Wire it alongside `CometChatMessageList` and `CometChatMessageHeader` to build a complete messaging experience.

<Info>
  **Live Preview** — interact with the default message composer.

  [Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-messages-cometchat-message-composer--default)
</Info>

<iframe src="https://storybook.cometchat.io/react/iframe.html?id=components-messages-cometchat-message-composer--default&viewMode=story&shortcuts=false&singleStory=true" className="w-full rounded-xl" loading="lazy" style={{height: "150px", border: "1px solid #e0e0e0"}} title="CometChat Message Composer — Default" allow="clipboard-write" />

The component handles:

* Text input with placeholder and auto-resize
* Rich text formatting (bold, italic, links, code, lists)
* File attachments with preview thumbnails
* Emoji keyboard
* Voice recording
* @mentions with user/group member search
* Edit and reply mode with preview banners
* Typing indicator events
* Live reactions

***

## Usage

### Flat API

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

function ChatPanel({ user }: { user: CometChat.User }) {
  return (
    <CometChatMessageComposer
      user={user}
      onSendButtonClick={(message, mode) => {
        console.log(`Message ${mode}:`, message);
      }}
    />
  );
}
```

### Compound Composition

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

function ChatPanel({ user }: { user: CometChat.User }) {
  return (
    <CometChatMessageComposer.Root user={user}>
      <CometChatMessageComposer.Header />
      <CometChatMessageComposer.EditPreview />
      <CometChatMessageComposer.ReplyPreview />
      <CometChatMessageComposer.Input />
      <CometChatMessageComposer.AuxiliaryButtons />
      <CometChatMessageComposer.AttachmentButton />
      <CometChatMessageComposer.EmojiButton />
      <CometChatMessageComposer.VoiceButton />
      <CometChatMessageComposer.AIButton />
      <CometChatMessageComposer.SendButton />
      <CometChatMessageComposer.Footer />
    </CometChatMessageComposer.Root>
  );
}
```

### Full Layout Example

```tsx theme={null}
import { useState } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatConversations,
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatMessageComposer,
} from "@cometchat/chat-uikit-react";

function ChatApp() {
  const [user, setUser] = useState<CometChat.User | undefined>();
  const [group, setGroup] = useState<CometChat.Group | undefined>();

  const handleConversationClick = (conversation: CometChat.Conversation) => {
    const entity = conversation.getConversationWith();
    if (conversation.getConversationType() === "user") {
      setUser(entity as CometChat.User);
      setGroup(undefined);
    } else {
      setGroup(entity as CometChat.Group);
      setUser(undefined);
    }
  };

  return (
    <div style={{ display: "flex", height: "100vh" }}>
      <div style={{ width: 360 }}>
        <CometChatConversations onItemClick={handleConversationClick} />
      </div>
      <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
        <CometChatMessageHeader user={user} group={group} />
        <CometChatMessageList user={user} group={group} />
        <CometChatMessageComposer user={user} group={group} />
      </div>
    </div>
  );
}
```

***

## Actions and Events

### Callback Props

| Prop                  | Signature                                                           | Fires when                             |
| --------------------- | ------------------------------------------------------------------- | -------------------------------------- |
| `onSendButtonClick`   | `(message: CometChat.BaseMessage, mode?: 'send' \| 'edit') => void` | Message is sent or edited              |
| `onTextChange`        | `(text: string) => void`                                            | Text content changes                   |
| `onError`             | `(error: unknown) => void`                                          | An error occurs                        |
| `onClosePreview`      | `() => void`                                                        | Reply/edit preview is closed           |
| `onAttachmentAdded`   | `(file: File) => void`                                              | File attachment is added               |
| `onAttachmentRemoved` | `(file: File) => void`                                              | File attachment is removed             |
| `onMentionSelected`   | `(user: CometChat.User \| CometChat.GroupMember) => void`           | A mention is selected from suggestions |

### Events Emitted

UI events this component publishes:

| Event                          | Payload                  | Fires when                                          |
| ------------------------------ | ------------------------ | --------------------------------------------------- |
| `ui:message/sent`              | `{ message, status }`    | Message sent (inprogress → success/error)           |
| `ui:compose/edit`              | `{ message, status }`    | Message edit (inprogress → success/error/cancelled) |
| `ui:compose/reply`             | `{ message, status }`    | Reply context set/cleared                           |
| `ui:compose/recording-started` | `{ composerInstanceId }` | Voice recording started (stops other instances)     |

### Events Received

UI events this component subscribes to (published by other components):

| Event                          | Payload                             | Behavior                                        |
| ------------------------------ | ----------------------------------- | ----------------------------------------------- |
| `ui:compose/edit`              | `{ message, status: 'inprogress' }` | Enters edit mode for the message                |
| `ui:compose/reply`             | `{ message, status: 'inprogress' }` | Sets reply-to message                           |
| `ui:compose/text`              | `{ text }`                          | Sets the composer text programmatically         |
| `ui:compose/recording-started` | `{ composerInstanceId }`            | Stops own recording if another instance started |

### SDK Listeners (Automatic)

The composer does not subscribe to SDK listeners directly. It relies on typing indicator events emitted via the SDK when `disableTypingEvents` is `false`.

***

## Customization

### View Props

Use view props to replace sections of the default UI while keeping the component's behavior intact:

```tsx theme={null}
<CometChatMessageComposer
  user={user}
  headerView={<MyCustomHeader />}
  sendButtonView={<MyCustomSendButton />}
  attachmentButtonIconView={<PaperclipIcon />}
  emojiButtonIconView={<SmileyIcon />}
  voiceRecordingButtonIconView={<MicIcon />}
  auxiliaryButtonView={<GifButton />}
/>
```

| Slot                           | Type        | Replaces                               |
| ------------------------------ | ----------- | -------------------------------------- |
| `attachmentButtonIconView`     | `ReactNode` | Icon inside the attachment button      |
| `voiceRecordingButtonIconView` | `ReactNode` | Icon inside the voice recording button |
| `emojiButtonIconView`          | `ReactNode` | Icon inside the emoji button           |
| `sendButtonView`               | `ReactNode` | Content inside the send button         |
| `auxiliaryButtonView`          | `ReactNode` | Additional buttons in the actions area |
| `headerView`                   | `ReactNode` | Header area above the input            |

#### attachmentOptions

Override the default attachment options.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/21UBnagXOw-XG0Sv/images/abb9806d-message_composer_custom_attachment_options_web_screens-104035717491a170e498d72a5a5591a2.png?fit=max&auto=format&n=21UBnagXOw-XG0Sv&q=85&s=49f998adb5ae7b29c45f9018514152d9" width="1016" height="216" data-path="images/abb9806d-message_composer_custom_attachment_options_web_screens-104035717491a170e498d72a5a5591a2.png" />
</Frame>

```tsx theme={null}
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";

function ComposerCustomAttachments({ chatUser }: { chatUser: CometChat.User }) {
  return (
    <CometChatMessageComposer
      user={chatUser}
      attachmentOptions={[
        { id: "image", title: "Photo", iconURL: photoIcon, onClick: () => openPhotoPicker() },
        { id: "file", title: "Document", iconURL: fileIcon, onClick: () => openFilePicker() },
      ]}
    />
  );
}
```

#### auxiliaryButtonView

Replace the auxiliary button area.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/fxK75AS6FzDL1Oqo/images/b504b88f-AAAAAElFTkSuQmCC.png?fit=max&auto=format&n=fxK75AS6FzDL1Oqo&q=85&s=d192f9c22275e896cabdf3cdbbf07f6a" width="1020" height="98" data-path="images/b504b88f-AAAAAElFTkSuQmCC.png" />
</Frame>

```tsx theme={null}
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageComposer, CometChatButton } from "@cometchat/chat-uikit-react";

function ComposerCustomAuxiliary({ chatUser }: { chatUser: CometChat.User }) {
  return (
    <CometChatMessageComposer
      user={chatUser}
      auxiliaryButtonView={
        <CometChatButton.Root onClick={() => {}}>
          <CometChatButton.Icon />
        </CometChatButton.Root>
      }
    />
  );
}
```

#### sendButtonView

Replace the send button.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/3EDM5JvI4mnAULac/images/741cf254-B4D17HCxfO1pwAAAABJRU5ErkJggg.png?fit=max&auto=format&n=3EDM5JvI4mnAULac&q=85&s=3eaab559eef262ffc65b4bc3c3b64c60" width="1004" height="90" data-path="images/741cf254-B4D17HCxfO1pwAAAABJRU5ErkJggg.png" />
</Frame>

```tsx theme={null}
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageComposer, CometChatButton } from "@cometchat/chat-uikit-react";

function ComposerCustomSend({ chatUser }: { chatUser: CometChat.User }) {
  return (
    <CometChatMessageComposer
      user={chatUser}
      sendButtonView={
        <CometChatButton.Root onClick={() => {}}>
          <CometChatButton.Icon />
        </CometChatButton.Root>
      }
    />
  );
}
```

### Compound Composition

For full layout control, use sub-components. Omit any sub-component to hide it:

```tsx theme={null}
<CometChatMessageComposer.Root user={user}>
  {/* No Header, EditPreview, or ReplyPreview — they won't render */}
  <CometChatMessageComposer.Input />
  <CometChatMessageComposer.SendButton />
</CometChatMessageComposer.Root>
```

Available sub-components:

| Sub-component      | Description                    | Props                       | Flat API equivalent            |
| ------------------ | ------------------------------ | --------------------------- | ------------------------------ |
| `Root`             | Context provider and container | All Root props + `children` | —                              |
| `Input`            | Text input area                | `className`                 | —                              |
| `SendButton`       | Send/edit button               | `children`, `className`     | `sendButtonView` (as children) |
| `AttachmentButton` | Attachment picker              | `hideOptions`, `className`  | `attachmentButtonIconView`     |
| `EmojiButton`      | Emoji keyboard toggle          | `className`                 | `emojiButtonIconView`          |
| `VoiceButton`      | Voice recording toggle         | `className`                 | `voiceRecordingButtonIconView` |
| `EditPreview`      | Edit mode preview banner       | `className`                 | —                              |
| `ReplyPreview`     | Reply mode preview banner      | `className`                 | —                              |
| `AuxiliaryButtons` | Custom auxiliary buttons       | `children`, `className`     | `auxiliaryButtonView`          |
| `AIButton`         | AI features toggle             | `className`                 | —                              |
| `Header`           | Header area                    | `children`, `className`     | `headerView`                   |
| `Footer`           | Footer area                    | `children`, `className`     | —                              |

### CSS Styling

Override design tokens on the component selector:

```css theme={null}
.cometchat-message-composer {
  --cometchat-background-color-01: #1a1a2e;
  --cometchat-text-color-primary: #ffffff;
}

.cometchat-message-composer__input-area {
  border-radius: 12px;
}
```

***

## Props

All props are optional unless noted.

<Note>
  View slot props (`headerView`, `sendButtonView`, `auxiliaryButtonView`, `attachmentButtonIconView`, `voiceRecordingButtonIconView`, `emojiButtonIconView`) are convenience props available only on the flat API. In compound composition mode, use the corresponding sub-components directly or pass children to them.
</Note>

***

### Entity

***

#### user

User for 1:1 conversations.

|         |                  |
| ------- | ---------------- |
| Type    | `CometChat.User` |
| Default | `undefined`      |

***

#### group

Group for group conversations.

|         |                   |
| ------- | ----------------- |
| Type    | `CometChat.Group` |
| Default | `undefined`       |

***

#### parentMessageId

Parent message ID for threaded replies.

|         |             |
| ------- | ----------- |
| Type    | `number`    |
| Default | `undefined` |

***

### Layout

***

#### layout

Layout mode for the composer. `compact` keeps everything on one line; `multiline` expands the input area.

|         |                            |
| ------- | -------------------------- |
| Type    | `'compact' \| 'multiline'` |
| Default | `'compact'`                |

***

### Text Input

***

#### initialText

Initial text to pre-fill the input (uncontrolled).

|         |             |
| ------- | ----------- |
| Type    | `string`    |
| Default | `undefined` |

***

#### text

Controlled text value. When provided, the consumer owns the text state and must update it via `onTextChange`.

|         |             |
| ------- | ----------- |
| Type    | `string`    |
| Default | `undefined` |

***

#### placeholder

Placeholder text shown when the input is empty.

|         |                       |
| ------- | --------------------- |
| Type    | `string`              |
| Default | `'Type a message...'` |

***

#### enterKeyBehavior

What happens when the user presses Enter.

|         |                                 |
| ------- | ------------------------------- |
| Type    | `'send' \| 'newline' \| 'none'` |
| Default | `'send'`                        |

***

#### maxInputHeight

Maximum height for the input area in pixels before it scrolls.

|         |          |
| ------- | -------- |
| Type    | `number` |
| Default | `200`    |

***

### Rich Text

***

#### enableRichTextEditor

Enable rich text formatting (toolbar, keyboard shortcuts, markdown auto-conversion).

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

#### hideRichTextFormattingOptions

Hide the rich text formatting toolbar (shortcuts still work).

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

#### showBubbleMenuOnSelection

Show a floating bubble menu near selected text with formatting options (desktop only).

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### Edit / Reply

***

#### messageToEdit

Message to edit (triggers edit mode).

|         |                                 |
| ------- | ------------------------------- |
| Type    | `CometChat.TextMessage \| null` |
| Default | `null`                          |

***

#### messageToReply

Message to reply to (triggers reply mode with preview).

|         |                                 |
| ------- | ------------------------------- |
| Type    | `CometChat.BaseMessage \| null` |
| Default | `null`                          |

***

### Attachments

***

#### attachmentOptions

Custom attachment options (overrides plugin-provided ones).

|         |                                       |
| ------- | ------------------------------------- |
| Type    | `CometChatComposerAttachmentOption[]` |
| Default | `undefined`                           |

***

#### hideAttachmentOptions

Hide specific attachment options in the default layout.

|         |                                  |
| ------- | -------------------------------- |
| Type    | `CometChatAttachmentHideOptions` |
| Default | `undefined`                      |

```tsx theme={null}
<CometChatMessageComposer
  user={user}
  hideAttachmentOptions={{ polls: true, collaborativeWhiteboard: true }}
/>
```

***

#### showAttachmentPreview

Whether to show attachment preview thumbnails before sending.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `true`    |

***

#### maxAttachments

Maximum number of attachments allowed.

|         |          |
| ------- | -------- |
| Type    | `number` |
| Default | `10`     |

***

#### allowedFileTypes

Allowed file MIME types for attachments.

|         |                                 |
| ------- | ------------------------------- |
| Type    | `string[]`                      |
| Default | `undefined` (all types allowed) |

***

#### maxFileSize

Maximum file size in bytes.

|         |                        |
| ------- | ---------------------- |
| Type    | `number`               |
| Default | `undefined` (no limit) |

***

### Hide Buttons

***

#### hideAttachmentButton

Hide the attachment ("+") button entirely.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

#### hideEmojiKeyboardButton

Hide the emoji keyboard button.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

#### hideVoiceRecordingButton

Hide the voice recording button.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

#### hideStickersButton

Hide the stickers button.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

#### hideAIButton

Hide the AI button.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `true`    |

***

#### hideLiveReaction

Hide the live reaction button.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

#### hideSendButton

Hide the send button.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

#### hideError

Hide the error state UI.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### Mentions

***

#### textFormatters

Text formatters pipeline for custom text processing.

|         |                            |
| ------- | -------------------------- |
| Type    | `CometChatTextFormatter[]` |
| Default | `undefined`                |

***

#### disableMentions

Disable @mentions entirely.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

#### disableMentionAll

Disable the @all mention option in groups.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

#### mentionAllLabel

Label for the @all mention option.

|         |          |
| ------- | -------- |
| Type    | `string` |
| Default | `'all'`  |

***

#### mentionsUsersRequestBuilder

Custom request builder for mention user search.

|         |                                 |
| ------- | ------------------------------- |
| Type    | `CometChat.UsersRequestBuilder` |
| Default | `undefined`                     |

***

#### mentionsGroupMembersRequestBuilder

Custom request builder for mention group member search.

|         |                                        |
| ------- | -------------------------------------- |
| Type    | `CometChat.GroupMembersRequestBuilder` |
| Default | `undefined`                            |

***

### Sound

***

#### disableTypingEvents

Disable typing indicator events.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

#### disableSoundForMessage

Disable sound on message send.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

#### customSoundForMessage

Custom sound URL for message send.

|         |             |
| ------- | ----------- |
| Type    | `string`    |
| Default | `undefined` |

***

### Misc

***

#### disableAutoFocusOnMobile

Disable auto-focus on mobile devices to prevent the keyboard from automatically opening on load.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `true`    |

***

#### liveReactionIcon

Custom icon URL for the live reaction button.

|         |             |
| ------- | ----------- |
| Type    | `string`    |
| Default | `undefined` |

***

#### showScrollbar

Show the native scrollbar on the input area.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### Custom Views

***

#### attachmentButtonIconView

Custom ReactNode to replace the content inside the attachment button (keeps action wired).

|         |             |
| ------- | ----------- |
| Type    | `ReactNode` |
| Default | `undefined` |

***

#### voiceRecordingButtonIconView

Custom ReactNode to replace the content inside the voice recording button (keeps action wired).

|         |             |
| ------- | ----------- |
| Type    | `ReactNode` |
| Default | `undefined` |

***

#### emojiButtonIconView

Custom ReactNode to replace the content inside the emoji button (keeps action wired).

|         |             |
| ------- | ----------- |
| Type    | `ReactNode` |
| Default | `undefined` |

***

#### sendButtonView

Custom ReactNode to replace the content inside the send button (keeps send/edit action wired).

|         |             |
| ------- | ----------- |
| Type    | `ReactNode` |
| Default | `undefined` |

***

#### auxiliaryButtonView

Custom ReactNode for additional buttons rendered in the actions area before the send button.

|         |             |
| ------- | ----------- |
| Type    | `ReactNode` |
| Default | `undefined` |

***

#### headerView

Custom ReactNode for the header area above the input (replaces edit/reply preview + validation).

|         |             |
| ------- | ----------- |
| Type    | `ReactNode` |
| Default | `undefined` |

***

### Callbacks

***

#### onTextChange

Called when text changes.

|         |                          |
| ------- | ------------------------ |
| Type    | `(text: string) => void` |
| Default | `undefined`              |

***

#### onSendButtonClick

Called when a message is sent or edited.

|         |                                                                     |
| ------- | ------------------------------------------------------------------- |
| Type    | `(message: CometChat.BaseMessage, mode?: 'send' \| 'edit') => void` |
| Default | `undefined`                                                         |

***

#### sendTextMessageOverride

Override the internal SDK sendTextMessage call for optimistic updates. When provided, called instead of `CometChat.sendMessage()`.

|         |                                                   |
| ------- | ------------------------------------------------- |
| Type    | `(text: string, richTextHtml?: string) => string` |
| Default | `undefined`                                       |

***

#### onError

Called when an error occurs.

|         |                            |
| ------- | -------------------------- |
| Type    | `(error: unknown) => void` |
| Default | `undefined`                |

***

#### onClosePreview

Called when reply/edit preview is closed.

|         |              |
| ------- | ------------ |
| Type    | `() => void` |
| Default | `undefined`  |

***

#### onAttachmentAdded

Called when a file attachment is added.

|         |                        |
| ------- | ---------------------- |
| Type    | `(file: File) => void` |
| Default | `undefined`            |

***

#### onAttachmentRemoved

Called when a file attachment is removed.

|         |                        |
| ------- | ---------------------- |
| Type    | `(file: File) => void` |
| Default | `undefined`            |

***

#### onMentionSelected

Called when a mention is selected from the suggestions list.

|         |                                                           |
| ------- | --------------------------------------------------------- |
| Type    | `(user: CometChat.User \| CometChat.GroupMember) => void` |
| Default | `undefined`                                               |

***

## CSS Selectors

| Target            | Selector                                                 |
| ----------------- | -------------------------------------------------------- |
| Root container    | `.cometchat-message-composer`                            |
| Body wrapper      | `.cometchat-message-composer__body`                      |
| Input area        | `.cometchat-message-composer__input-area`                |
| Actions bar       | `.cometchat-message-composer__actions`                   |
| Attachment button | `.cometchat-message-composer__attachment-button-wrapper` |
| Emoji button      | `.cometchat-message-composer__emoji-button-wrapper`      |
| Voice button      | `.cometchat-message-composer__voice-button-wrapper`      |
| Send button       | `.cometchat-message-composer__send-button-wrapper`       |
| Sticker button    | `.cometchat-message-composer__sticker-button-wrapper`    |
| AI button         | `.cometchat-message-composer__ai-button-wrapper`         |

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Message List" icon="comments" href="/ui-kit/react/components/message-list">
    Display messages for the selected conversation
  </Card>

  <Card title="Thread Header" icon="code-branch" href="/ui-kit/react/components/thread-header">
    Show threaded replies for a parent message
  </Card>

  <Card title="Theming" icon="paintbrush" href="/ui-kit/react/theming">
    Customize colors, fonts, and spacing
  </Card>
</CardGroup>