Compact Message Composer

A compact, single-line message input component with rich text formatting, attachments, mentions, and voice recording support.

AI Integration Quick Reference

{
  "component": "CometChatCompactMessageComposer",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatCompactMessageComposer } from \"@cometchat/chat-uikit-react\";",
  "description": "Compact single-line message input with optional rich text formatting (bold, italic, underline, strikethrough, code, links, lists, blockquotes), attachments, mentions, voice recording, and message editing support.",
  "primaryOutput": {
    "prop": "onSendButtonClick",
    "type": "(message: CometChat.BaseMessage) => void"
  },
  "props": {
    "data": {
      "user": { "type": "CometChat.User", "default": "undefined" },
      "group": { "type": "CometChat.Group", "default": "undefined" },
      "parentMessageId": { "type": "number", "default": "undefined" },
      "initialComposerText": { "type": "string", "default": "\"\"" },
      "placeholderText": { "type": "string", "default": "\"Type a message...\"" }
    },
    "callbacks": {
      "onSendButtonClick": "(message: CometChat.BaseMessage) => void",
      "onTextChange": "(text: string) => void",
      "onError": "(error: CometChat.CometChatException) => void"
    },
    "visibility": {
      "hideImageAttachmentOption": { "type": "boolean", "default": false },
      "hideVideoAttachmentOption": { "type": "boolean", "default": false },
      "hideAudioAttachmentOption": { "type": "boolean", "default": false },
      "hideFileAttachmentOption": { "type": "boolean", "default": false },
      "hidePollsOption": { "type": "boolean", "default": false },
      "hideCollaborativeDocumentOption": { "type": "boolean", "default": false },
      "hideCollaborativeWhiteboardOption": { "type": "boolean", "default": false },
      "hideAttachmentButton": { "type": "boolean", "default": false },
      "hideVoiceRecordingButton": { "type": "boolean", "default": false },
      "hideEmojiKeyboardButton": { "type": "boolean", "default": false },
      "hideStickersButton": { "type": "boolean", "default": false },
      "hideSendButton": { "type": "boolean", "default": false }
    },
    "richText": {
      "enableRichTextEditor": { "type": "boolean", "default": false },
      "hideRichTextFormattingOptions": { "type": "boolean", "default": false },
      "showToolbarOnSelection": { "type": "boolean", "default": false },
      "enterKeyBehavior": { "type": "EnterKeyBehavior", "default": "EnterKeyBehavior.SendMessage" }
    },
    "behavior": {
      "disableTypingEvents": { "type": "boolean", "default": false },
      "disableMentions": { "type": "boolean", "default": false },
      "disableMentionAll": { "type": "boolean", "default": false },
      "mentionAllLabel": { "type": "string", "default": "\"all\"" },
      "disableSoundForMessage": { "type": "boolean", "default": false },
      "showScrollbar": { "type": "boolean", "default": false }
    },
    "viewSlots": {
      "headerView": "JSX.Element",
      "auxiliaryButtonView": "JSX.Element",
      "sendButtonView": "JSX.Element"
    },
    "formatting": {
      "textFormatters": {
        "type": "CometChatTextFormatter[]",
        "default": "default formatters from data source"
      },
      "attachmentOptions": {
        "type": "CometChatMessageComposerAction[]",
        "note": "Custom attachment options list (replaces defaults)"
      }
    }
  },
  "events": [
    {
      "name": "ccMessageSent",
      "payload": "{ message: CometChat.BaseMessage, status: string }",
      "description": "Triggers when a message is sent with status: inProgress, success, or error"
    },
    {
      "name": "ccMessageEdited",
      "payload": "{ message: CometChat.BaseMessage, status: string }",
      "description": "Triggers when a message is edited with status: inProgress, success, or error"
    },
    {
      "name": "ccReplyToMessage",
      "payload": "{ message: CometChat.BaseMessage, status: string }",
      "description": "Triggers when a user replies to a message with status: inProgress, success, or error"
    }
  ],
  "compositionExample": {
    "description": "Compact message composer wired with message header and list for complete chat view",
    "components": [
      "CometChatMessageHeader",
      "CometChatMessageList",
      "CometChatCompactMessageComposer"
    ],
    "flow": "Pass user or group prop to composer -> onSendButtonClick fires with CometChat.BaseMessage -> message appears in MessageList"
  }
}

Overview

CometChatCompactMessageComposer is a Component that provides a compact, single-line message input with optional rich text formatting capabilities. It supports bold, italic, underline, strikethrough, code, links, lists, and blockquotes.

This is a compact variant of CometChatMessageComposer. It shares a similar props API but provides a streamlined, single-line interface with rich text formatting controls.

Wire it alongside CometChatMessageHeader and CometChatMessageList to build a standard chat view.

Features such as Rich Text Formatting, Attachments, Message Editing, Mentions, Link Previews, and Voice Recording are supported.

Before using this component: Ensure CometChatUIKit.init(UIKitSettings) has completed and the user is logged in via CometChatUIKit.login("UID"). See React.js Integration.

Available via: UI Kits | SDK

---

Minimal Render

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

function CompactComposerDemo() {
  return <CometChatCompactMessageComposer user={chatUser} />;
}

export default CompactComposerDemo;

---

Usage

Integration

The following code snippet illustrates how you can directly incorporate the CompactMessageComposer component into your app.

TypeScript

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

export function CompactComposerDemo() {
  const [chatUser, setChatUser] = React.useState<CometChat.User>();
  React.useEffect(() => {
    CometChat.getUser("uid").then((user) => {
      setChatUser(user);
    });
  }, []);

  return chatUser ? (
    <div>
      <CometChatCompactMessageComposer user={chatUser} />
    </div>
  ) : null;
}

JavaScript

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

export function CompactComposerDemo() {
  const [chatUser, setChatUser] = React.useState(null);
  React.useEffect(() => {
    CometChat.getUser("uid").then((user) => {
      setChatUser(user);
    });
  }, []);

  return chatUser ? (
    <div>
      <CometChatCompactMessageComposer user={chatUser} />
    </div>
  ) : null;
}

Expected result:

• The CometChatCompactMessageComposer component renders a compact, single-line message input
• The input supports typing, sending messages, attachments, emoji, stickers, and voice recording
• Clicking the send button dispatches the message to the specified user

---

Actions and Events

Callback Props

Actions dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.

onSendButtonClick

Fires when the send message button is clicked. Overrides the default send behavior.

onSendButtonClick?: (message: CometChat.BaseMessage) => void

TypeScript

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

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

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

  function handleSendButtonClick(message: CometChat.BaseMessage): void {
    console.log("your custom on send button click action");
  }

  return chatUser ? (
    <div>
      <CometChatCompactMessageComposer
        user={chatUser}
        onSendButtonClick={handleSendButtonClick}
      />
    </div>
  ) : null;
}

JavaScript

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

export function CompactComposerDemo() {
  const [chatUser, setChatUser] = React.useState(null);

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

  function handleSendButtonClick(message) {
    console.log("your custom on send button click action");
  }

  return chatUser ? (
    <div>
      <CometChatCompactMessageComposer
        user={chatUser}
        onSendButtonClick={handleSendButtonClick}
      />
    </div>
  ) : null;
}

onError

Fires on internal errors (network failure, auth issue, SDK exception). This action doesn’t change the behavior of the component but rather listens for any errors that occur in the CompactMessageComposer component.

onError?: (error: CometChat.CometChatException) => void

TypeScript

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

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

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

  function handleError(error: CometChat.CometChatException) {
    throw new Error("your custom error action");
  }

  return chatUser ? (
    <div>
      <CometChatCompactMessageComposer user={chatUser} onError={handleError} />
    </div>
  ) : null;
}

JavaScript

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

export function CompactComposerDemo() {
  const [chatUser, setChatUser] = React.useState(null);

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

  function handleError(error) {
    throw new Error("your custom error action");
  }

  return chatUser ? (
    <div>
      <CometChatCompactMessageComposer user={chatUser} onError={handleError} />
    </div>
  ) : null;
}

onTextChange

Fires as the user types in the composer input.

onTextChange?: (text: string) => void

TypeScript

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

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

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

  function handleTextChange(text: string) {
    console.log("onTextChange", text);
  }

  return chatUser ? (
    <div>
      <CometChatCompactMessageComposer
        user={chatUser}
        onTextChange={handleTextChange}
      />
    </div>
  ) : null;
}

JavaScript

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

export function CompactComposerDemo() {
  const [chatUser, setChatUser] = React.useState(null);

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

  function handleTextChange(text) {
    console.log("onTextChange", text);
  }

  return chatUser ? (
    <div>
      <CometChatCompactMessageComposer
        user={chatUser}
        onTextChange={handleTextChange}
      />
    </div>
  ) : null;
}

Custom Mentions Request Builders

You can customize how mentioned users and group members are fetched by providing custom request builders.

TypeScript

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

export function CompactComposerDemo() {
  const [chatUser, setChatUser] = React.useState<CometChat.User>();
  const [chatGroup, setChatGroup] = React.useState<CometChat.Group>();

  React.useEffect(() => {
    CometChat.getUser("uid").then((user) => {
      setChatUser(user);
    });
    CometChat.getGroup("guid").then((group) => {
      setChatGroup(group);
    });
  }, []);

  // Custom Users Request Builder for mentions
  const mentionsUsersRequestBuilder = new CometChat.UsersRequestBuilder()
    .setLimit(10)
    .setSearchKeyword("")
    .setRoles(["default", "moderator"]);

  // Custom Group Members Request Builder for group mentions
  const mentionsGroupMembersRequestBuilder = new CometChat.GroupMembersRequestBuilder("guid")
    .setLimit(15)
    .setSearchKeyword("")
    .setScopes(["admin", "moderator", "participant"]);

  return chatUser ? (
    <div>
      {/* For user chat with custom users mentions */}
      <CometChatCompactMessageComposer
        user={chatUser}
        mentionsUsersRequestBuilder={mentionsUsersRequestBuilder}
      />

      {/* For group chat with custom group members mentions */}
      {chatGroup && (
        <CometChatCompactMessageComposer
          group={chatGroup}
          mentionsGroupMembersRequestBuilder={mentionsGroupMembersRequestBuilder}
        />
      )}
    </div>
  ) : null;
}

JavaScript

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

export function CompactComposerDemo() {
  const [chatUser, setChatUser] = React.useState(null);
  const [chatGroup, setChatGroup] = React.useState(null);

  React.useEffect(() => {
    CometChat.getUser("uid").then((user) => {
      setChatUser(user);
    });
    CometChat.getGroup("guid").then((group) => {
      setChatGroup(group);
    });
  }, []);

  // Custom Users Request Builder for mentions
  const mentionsUsersRequestBuilder = new CometChat.UsersRequestBuilder()
    .setLimit(10)
    .setSearchKeyword("")
    .setRoles(["default", "moderator"]);

  // Custom Group Members Request Builder for group mentions
  const mentionsGroupMembersRequestBuilder = new CometChat.GroupMembersRequestBuilder("guid")
    .setLimit(15)
    .setSearchKeyword("")
    .setScopes(["admin", "moderator", "participant"]);

  return chatUser ? (
    <div>
      {/* For user chat with custom users mentions */}
      <CometChatCompactMessageComposer
        user={chatUser}
        mentionsUsersRequestBuilder={mentionsUsersRequestBuilder}
      />

      {/* For group chat with custom group members mentions */}
      {chatGroup && (
        <CometChatCompactMessageComposer
          group={chatGroup}
          mentionsGroupMembersRequestBuilder={mentionsGroupMembersRequestBuilder}
        />
      )}
    </div>
  ) : null;
}

---

Filters

CompactMessageComposer component does not have any available filters.

---

Global UI Events

Events are emitted by a Component. By using events you can extend existing functionality. Being global events, they can be applied in multiple locations and are capable of being added or removed.

CometChatMessageEvents emits events subscribable from anywhere in the application. Add listeners and remove them on cleanup.

Event	Fires when	Payload
ccMessageSent	A message is sent	{ message: CometChat.BaseMessage, status: string }
ccMessageEdited	A message is edited	{ message: CometChat.BaseMessage, status: string }
ccReplyToMessage	A user replies to a message	{ message: CometChat.BaseMessage, status: string }

Each event has three states: inProgress, success, and error.

When to use: sync external UI with message state changes. For example, update a notification badge when messages are sent, or trigger analytics when a message is edited.

TypeScript

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

function useCompactComposerEvents() {
  useEffect(() => {
    const ccMessageEdited = CometChatMessageEvents.ccMessageEdited.subscribe(
      (item) => {
        console.log("Message edited:", item);
      }
    );

    const ccReplyToMessage = CometChatMessageEvents.ccReplyToMessage.subscribe(
      (item) => {
        console.log("Reply to message:", item);
      }
    );

    const ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe(
      (item) => {
        console.log("Message sent:", item);
      }
    );

    // Cleanup on unmount
    return () => {
      ccMessageEdited?.unsubscribe();
      ccReplyToMessage?.unsubscribe();
      ccMessageSent?.unsubscribe();
    };
  }, []);
}

JavaScript

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

function useCompactComposerEvents() {
  useEffect(() => {
    const ccMessageEdited = CometChatMessageEvents.ccMessageEdited.subscribe(
      (item) => {
        console.log("Message edited:", item);
      }
    );

    const ccReplyToMessage = CometChatMessageEvents.ccReplyToMessage.subscribe(
      (item) => {
        console.log("Reply to message:", item);
      }
    );

    const ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe(
      (item) => {
        console.log("Message sent:", item);
      }
    );

    // Cleanup on unmount
    return () => {
      ccMessageEdited?.unsubscribe();
      ccReplyToMessage?.unsubscribe();
      ccMessageSent?.unsubscribe();
    };
  }, []);
}

In React 18 StrictMode, useEffect runs twice on mount in development. The component handles listener cleanup internally, but any additional listeners added alongside the component need cleanup in the useEffect return function to avoid duplicate event handling.

---

Customization

To fit your app’s design requirements, you can customize the appearance of the CompactMessageComposer component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.

---

Functionality

These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.

TypeScript

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

<CometChatCompactMessageComposer user={chatUser} disableTypingEvents={true} />;

Below is a list of customizations along with corresponding code snippets

Property	Type	Default	Description	Code
user	CometChat.User	undefined	Specifies the recipient of the message (user object).	user={chatUser}
group	CometChat.Group	undefined	Specifies the group to send messages to. Used if the user prop is not provided.	group={chatGroup}
parentMessageId	number	undefined	Specifies the ID of the parent message for threading or replying to a specific message.	parentMessageId={12345}
initialComposerText	string	""	The initial text pre-filled in the message input when the component mounts.	initialComposerText="Hello"
placeholderText	string	"Type a message..."	The placeholder text displayed in the message input when it is empty.	placeholderText="Type a message..."
disableTypingEvents	boolean	false	Disables the typing indicator for the current message composer.	disableTypingEvents={true}
disableMentions	boolean	false	Disables the mentions functionality in the message composer.	disableMentions={true}
disableMentionAll	boolean	false	Controls whether group mentions like @all appear in suggestions.	disableMentionAll={true}
mentionAllLabel	string	"all"	Allows setting a custom alias label for group mentions (@channel, @everyone, etc.).	mentionAllLabel="all"
mentionsUsersRequestBuilder	CometChat.UsersRequestBuilder	undefined	Provides a custom UsersRequestBuilder to control how the mentioned users list is fetched.	mentionsUsersRequestBuilder={usersRequestBuilder}
mentionsGroupMembersRequestBuilder	CometChat.GroupMembersRequestBuilder	undefined	Provides a custom GroupMembersRequestBuilder to customize how mentioned group members are retrieved.	mentionsGroupMembersRequestBuilder={groupMembersRequestBuilder}
enableRichTextEditor	boolean	false	Master switch to enable rich text formatting. When false, the composer works as plain text only.	enableRichTextEditor={true}
showToolbarOnSelection	boolean	false	Shows a floating toolbar when text is selected. Ignored on mobile devices.	showToolbarOnSelection={true}
hideRichTextFormattingOptions	boolean	false	Hides the rich text formatting toolbar. Keyboard shortcuts still work.	hideRichTextFormattingOptions={true}
hideImageAttachmentOption	boolean	false	Hides the image attachment option in the message composer.	hideImageAttachmentOption={true}
hideVideoAttachmentOption	boolean	false	Hides the video attachment option in the message composer.	hideVideoAttachmentOption={true}
hideAudioAttachmentOption	boolean	false	Hides the audio attachment option in the message composer.	hideAudioAttachmentOption={true}
hideFileAttachmentOption	boolean	false	Hides the file attachment option in the message composer.	hideFileAttachmentOption={true}
hidePollsOption	boolean	false	Hides the polls option in the message composer.	hidePollsOption={true}
hideCollaborativeDocumentOption	boolean	false	Hides the collaborative document option in the message composer.	hideCollaborativeDocumentOption={true}
hideCollaborativeWhiteboardOption	boolean	false	Hides the collaborative whiteboard option in the message composer.	hideCollaborativeWhiteboardOption={true}
hideAttachmentButton	boolean	false	Hides the attachment button in the message composer.	hideAttachmentButton={true}
hideVoiceRecordingButton	boolean	false	Hides the voice recording button in the message composer.	hideVoiceRecordingButton={true}
hideEmojiKeyboardButton	boolean	false	Hides the emoji keyboard button in the message composer.	hideEmojiKeyboardButton={true}
hideStickersButton	boolean	false	Hides the stickers button in the message composer.	hideStickersButton={true}
hideSendButton	boolean	false	Hides the send button in the message composer.	hideSendButton={true}
showScrollbar	boolean	false	Controls the visibility of the scrollbar in the composer.	showScrollbar={true}
enterKeyBehavior	EnterKeyBehavior	EnterKeyBehavior.SendMessage	Determines the behavior of the Enter key (e.g., send message or add a new line).	enterKeyBehavior={EnterKeyBehavior.SendMessage}
disableSoundForMessage	boolean	false	Disables sound for incoming messages.	disableSoundForMessage={true}
customSoundForMessage	string	undefined	Specifies a custom audio sound for incoming messages.	customSoundForMessage="sound.mp3"

---

Rich Text Formatting

The CompactMessageComposer includes a built-in rich text editor. Rich text must be explicitly enabled via enableRichTextEditor={true} (defaults to false).

Formatting Toolbar

The toolbar provides the following formatting tools in a fixed order:

Tool	Icon	Shortcut	Description
Bold	B	Cmd/Ctrl+B	Bold text
Italic	I	Cmd/Ctrl+I	Italic text
Underline	U	Cmd/Ctrl+U	Underline text
Strikethrough	S	Cmd/Ctrl+Shift+S	Strikethrough text
Inline Code	</>	Cmd/Ctrl+E	Inline code
Code Block	```	Cmd/Ctrl+Shift+C	Multi-line code block
Link	🔗	Cmd/Ctrl+K	Add/edit hyperlink
Bullet List	•	Cmd/Ctrl+Shift+8	Unordered list
Ordered List	1.	Cmd/Ctrl+Shift+7	Numbered list
Blockquote	❝	Cmd/Ctrl+Shift+9	Quote block

Toolbar Visibility Modes

The toolbar supports multiple display modes controlled via props. When multiple props are set, they follow this priority order:

1. enableRichTextEditor={false} — Highest priority, disables all rich text features (plain text only)
2. hideRichTextFormattingOptions={true} — Toolbar visible by default above input
3. showToolbarOnSelection={true} — Floating toolbar appears on text selection (desktop only)

If none of the toolbar props are enabled, the toolbar is hidden but keyboard shortcuts still work.

Behavior Matrix

enableRichTextEditor	hideRichTextFormattingOptions	showToolbarOnSelection	Result
false	-	-	Plain text, no formatting UI
true	false	true	Floating toolbar appears on text selection (desktop)
true	true	false	Toolbar visible by default above input
true	false	false	No toolbar UI, only keyboard shortcuts work

Mobile Behavior

On mobile devices, only the fixed toolbar is supported. The floating selection toolbar is disabled for better touch UX.

Props	Mobile Behavior
showToolbarOnSelection={true}	Ignored on mobile — Falls back to fixed toolbar
hideRichTextFormattingOptions={true}	Fixed toolbar visible by default above input

Toolbar Configuration Examples

Selection Toolbar

// Floating toolbar appears on text selection (desktop only)
<CometChatCompactMessageComposer
  user={chatUser}
  enableRichTextEditor={true}
  showToolbarOnSelection={true}
/>

Toolbar Always Visible

// Toolbar visible by default above input
<CometChatCompactMessageComposer
  user={chatUser}
  enableRichTextEditor={true}
  hideRichTextFormattingOptions={true}
/>

Keyboard Shortcuts Only

// Rich text enabled but no toolbar (keyboard shortcuts only)
<CometChatCompactMessageComposer
  user={chatUser}
  enableRichTextEditor={true}
/>

Combined Modes

// Selection toolbar + always-visible toolbar
<CometChatCompactMessageComposer
  user={chatUser}
  enableRichTextEditor={true}
  showToolbarOnSelection={true}
  hideRichTextFormattingOptions={true}
/>

---

Custom View Slots

Each slot replaces a section of the default UI. Slots that accept parameters receive the relevant data for customization.

Slot	Type	Replaces
headerView	JSX.Element	Area above the composer input
auxiliaryButtonView	JSX.Element	Sticker and AI button area
sendButtonView	JSX.Element	Send button
attachmentOptions	CometChatMessageComposerAction[]	Default attachment options list (replaces defaults)
textFormatters	CometChatTextFormatter[]	Text formatting in composer

Advanced

For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.

---

AttachmentOptions

By using attachmentOptions, you can set a list of custom MessageComposerActions for the CompactMessageComposer Component. This will override the existing list of MessageComposerActions.

Use the following code to achieve the customization shown above.

TypeScript

import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatCompactMessageComposer,
  CometChatMessageComposerAction,
} from "@cometchat/chat-uikit-react";

function getAttachments() {
  return [
    new CometChatMessageComposerAction({
      id: "custom1",
      title: "Custom Option 1",
      iconURL: "Icon URL",
    }),
    new CometChatMessageComposerAction({
      id: "custom2",
      title: "Custom Option 2",
      iconURL: "Icon URL",
    }),
    new CometChatMessageComposerAction({
      id: "custom3",
      title: "Custom Option 3",
      iconURL: "Icon URL",
    }),
    new CometChatMessageComposerAction({
      id: "custom4",
      title: "Custom Option 4",
      iconURL: "Icon URL",
    }),
  ];
}

<CometChatCompactMessageComposer
  attachmentOptions={getAttachments()}
  user={userObj}
/>;

css

.cometchat-compact-message-composer__secondary-button-view-attachment-button
  .cometchat-action-sheet {
  border: none;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
  width: 100%;
}

.cometchat-compact-message-composer__secondary-button-view-attachment-button
  .cometchat-popover__content
  > .cometchat {
  border-radius: inherit;
}

.cometchat-compact-message-composer__secondary-button-view-attachment-button
  .cometchat-popover__content {
  height: 240px;
}

.cometchat-compact-message-composer__secondary-button-view-attachment-button
  .cometchat-action-sheet__item-icon {
  background: #141414;
}

Expected result: The default attachment options (image, video, audio, file, polls, etc.) are replaced with four custom options. The action sheet styling is customized with transparent background and custom icon colors.

---

AuxiliaryButtonView

You can insert a custom view into the CompactMessageComposer component to add additional functionality using the following method.

The CompactMessageComposer Component utilizes the AuxiliaryButton to provide sticker and AI functionality. Overriding the AuxiliaryButton will subsequently replace the sticker functionality.

TypeScript

import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatCompactMessageComposer,
  CometChatButton,
} from "@cometchat/chat-uikit-react";

const auxiliaryButtonView = (
  <CometChatButton
    iconURL="Icon URL"
    onClick={() => {
      // logic here
    }}
  />
);

<CometChatCompactMessageComposer
  auxiliaryButtonView={auxiliaryButtonView}
  user={userObj}
/>;

---

SendButtonView

You can set a custom view in place of the already existing send button view.

TypeScript

import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatCompactMessageComposer,
  CometChatButton,
} from "@cometchat/chat-uikit-react";

const sendButtonView = (
  <CometChatButton
    iconURL="Icon URL"
    onClick={() => {
      // logic here
    }}
  />
);

<CometChatCompactMessageComposer sendButtonView={sendButtonView} user={userObj} />;

css

.cometchat-compact-message-composer
  div:not([class])
  .cometchat-compact-message-composer__send-button
  .cometchat-button {
  background: #edeafa;
}

.cometchat-compact-message-composer
  div:not([class])
  .cometchat-compact-message-composer__send-button
  .cometchat-button__icon {
  background: #6852d6;
}

Expected result: The default send button is replaced with a custom button. The CSS overrides give the button a light purple background (#edeafa) with a purple icon (#6852d6).

---

HeaderView

You can set custom headerView to the CompactMessageComposer component using the following method.

TypeScript

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

const getHeaderView = () => {
  return (
    <div className="compact-composer__header-view">
      <div className="compact-composer__header-view-icon"></div>
      <div className="compact-composer__header-view-text">
        User has paused their notifications
      </div>
    </div>
  );
};

<CometChatCompactMessageComposer user={chatUser} headerView={getHeaderView()} />;

css

.cometchat-compact-message-composer .compact-composer__header-view {
  display: flex;
  align-items: center;
  align-content: center;
  gap: 8px var(--cometchat-padding-2, 8px);
  align-self: stretch;
  flex-wrap: wrap;
  width: 100%;
}

.cometchat-compact-message-composer__header {
  background: #dcd7f6;
  border-radius: var(--cometchat-radius-max, 1000px);
  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-5, 20px);
}

.cometchat-compact-message-composer
  .compact-composer__header-view
  .compact-composer__header-view-text {
  overflow: hidden;
  color: var(--cometchat-text-color-primary, #141414);
  text-overflow: ellipsis;
  font: var(--cometchat-font-body-regular);
}

.cometchat-compact-message-composer
  .compact-composer__header-view
  .compact-composer__header-view-icon {
  display: flex;
  width: 24px;
  height: 24px;
  justify-content: center;
  align-items: center;
  background: var(--cometchat-primary-color);
  -webkit-mask: url("icon url") center center no-repeat;
  -webkit-mask-size: contain;
  mask: url("icon url") center center no-repeat;
  mask-size: contain;
}

Expected result: A custom header bar appears above the composer input with an icon and notification text (“User has paused their notifications”), styled with a light purple background and rounded corners.

---

TextFormatters

Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel check out CometChatMentionsFormatter

ShortCutFormatter.ts

import { CometChatTextFormatter } from "@cometchat/chat-uikit-react";
import DialogHelper from "./Dialog";
import { CometChat } from "@cometchat/chat-sdk-javascript";

class ShortcutFormatter extends CometChatTextFormatter {
  private shortcuts: { [key: string]: string } = {};
  private dialogIsOpen: boolean = false;
  private dialogHelper = new DialogHelper();
  private currentShortcut: string | null = null;

  constructor() {
    super();
    this.setTrackingCharacter("!");
    CometChat.callExtension("message-shortcuts", "GET", "v1/fetch", undefined)
      .then((data: any) => {
        if (data && data.shortcuts) {
          this.shortcuts = data.shortcuts;
        }
      })
      .catch((error) => console.log("error fetching shortcuts", error));
  }

  onKeyDown(event: KeyboardEvent) {
    const caretPosition =
      this.currentCaretPosition instanceof Selection
        ? this.currentCaretPosition.anchorOffset
        : 0;
    const textBeforeCaret = this.getTextBeforeCaret(caretPosition);

    const match = textBeforeCaret.match(/!([a-zA-Z]+)$/);
    if (match) {
      const shortcut = match[0];
      const replacement = this.shortcuts[shortcut];
      if (replacement) {
        if (this.dialogIsOpen && this.currentShortcut !== shortcut) {
          this.closeDialog();
        }
        this.openDialog(replacement, shortcut);
      }
    }
  }

  getCaretPosition() {
    if (!this.currentCaretPosition?.rangeCount) return { x: 0, y: 0 };
    const range = this.currentCaretPosition?.getRangeAt(0);
    const rect = range.getBoundingClientRect();
    return {
      x: rect.left,
      y: rect.top,
    };
  }

  openDialog(buttonText: string, shortcut: string) {
    this.dialogHelper.createDialog(
      () => this.handleButtonClick(buttonText),
      buttonText
    );
    this.dialogIsOpen = true;
    this.currentShortcut = shortcut;
  }

  closeDialog() {
    this.dialogHelper.closeDialog();
    this.dialogIsOpen = false;
    this.currentShortcut = null;
  }

  handleButtonClick = (buttonText: string) => {
    if (this.currentCaretPosition && this.currentRange) {
      const shortcut = Object.keys(this.shortcuts).find(
        (key) => this.shortcuts[key] === buttonText
      );
      if (shortcut) {
        const replacement = this.shortcuts[shortcut];
        this.addAtCaretPosition(
          replacement,
          this.currentCaretPosition,
          this.currentRange
        );
      }
    }
    if (this.dialogIsOpen) {
      this.closeDialog();
    }
  };

  getFormattedText(text: string): string {
    return text;
  }

  private getTextBeforeCaret(caretPosition: number): string {
    if (
      this.currentRange &&
      this.currentRange.startContainer &&
      typeof this.currentRange.startContainer.textContent === "string"
    ) {
      const textContent = this.currentRange.startContainer.textContent;
      if (textContent.length >= caretPosition) {
        return textContent.substring(0, caretPosition);
      }
    }
    return "";
  }
}

export default ShortcutFormatter;

TypeScript

import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react";
import ShortcutFormatter from "./ShortCutFormatter";

export function CompactComposerDemo() {
  const [chatUser, setChatUser] = React.useState<CometChat.User>();
  React.useEffect(() => {
    CometChat.getUser("uid").then((user) => {
      setChatUser(user);
    });
  }, []);

  return chatUser ? (
    <div>
      <CometChatCompactMessageComposer
        user={chatUser}
        textFormatters={[new ShortcutFormatter()]}
      />
    </div>
  ) : null;
}

---

---

Next Steps

Message Composer

Full-featured multi-line message composer component.

Message List

Display messages with real-time updates.

Mentions Formatter

Implement @mentions in your chat application.

Theme Customization

Customize colors, fonts, and styling.