> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Message Composer

## Overview

MessageComposer is a Component that enables users to write and send a variety of messages, including text, image, video, and custom messages.

Features such as **Attachments**, and **Message Editing** are also supported by it.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/kguwBmaySZvSdKIc/images/6c67574d-wGdWG0FDGDEYQAAAABJRU5ErkJggg.png?fit=max&auto=format&n=kguwBmaySZvSdKIc&q=85&s=2f6c045dd1afc8cc965bf363f40004dd" width="1004" height="90" data-path="images/6c67574d-wGdWG0FDGDEYQAAAABJRU5ErkJggg.png" />
</Frame>

## Usage

### Integration

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

<Tabs>
  <Tab title="MessageComposerDemo.tsx">
    ```tsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";

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

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

  <Tab title="App.tsx">
    ```tsx theme={null}
    import { MessageComposerDemo } from "./MessageComposerDemo";

    export default function App() {
      return (
        <div className="App">
          <div>
            <MessageComposerDemo />
          </div>
        </div>
      );
    }
    ```
  </Tab>
</Tabs>

### Actions

[Actions](/ui-kit/react/components-overview#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.

##### 1. OnSendButtonClick

The `OnSendButtonClick` event gets activated when the send message button is clicked. It has a predefined function of sending messages entered in the composer `EditText`. However, you can overide this action with the following code snippet.

<Tabs>
  <Tab title="MessageComposerDemo.tsx">
    ```tsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";

    export function MessageComposerDemo() {
      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 buttonclick action");
      }

      return chatUser ? (
        <div>
          <CometChatMessageComposer onSendButtonClick={handleSendButtonClick} />
        </div>
      ) : null;
    }
    ```
  </Tab>
</Tabs>

##### 2. onError

This action doesn't change the behavior of the component but rather listens for any errors that occur in the MessageList component.

<Tabs>
  <Tab title="MessageComposerDemo.tsx">
    ```tsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";

    export function MessageComposerDemo() {
      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>
          <CometChatMessageComposer user={chatUser} onError={handleError} />
        </div>
      ) : null;
    }
    ```
  </Tab>
</Tabs>

##### 3. onTextChange

This event is triggered as the user starts typing in the Message Composer.

<Tabs>
  <Tab title="MessageComposerDemo.tsx">
    ```tsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";

    export function MessageComposerDemo() {
      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>
          <CometChatMessageComposer
            user={chatUser}
            onTextChange={handleTextChange}
          />
        </div>
      ) : null;
    }
    ```
  </Tab>
</Tabs>

##### 4. Custom Mentions Request Builders

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

<Tabs>
  <Tab title="MessageComposerDemo.tsx">
    ```tsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";

    export function MessageComposerDemo() {
      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 */}
          <CometChatMessageComposer
            user={chatUser}
            mentionsUsersRequestBuilder={mentionsUsersRequestBuilder}
          />
          
          {/* For group chat with custom group members mentions */}
          {chatGroup && (
            <CometChatMessageComposer
              group={chatGroup}
              mentionsGroupMembersRequestBuilder={mentionsGroupMembersRequestBuilder}
            />
          )}
        </div>
      ) : null;
    }
    ```
  </Tab>
</Tabs>

***

### Filters

MessageComposer component does not have any available filters.

***

### Events

[Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.

The list of events emitted by the Messages component is as follows.

| Event                | Description                                                                                                                                           |
| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| **ccMessageEdited**  | Triggers whenever a loggedIn user edits any message from the list of messages .it will have three states such as: inProgress, success and error.      |
| **ccReplyToMessage** | Triggers whenever a loggedIn user replies to any message from the list of messages .it will have three states such as: inProgress, success and error. |
| **ccMessageSent**    | Triggers whenever a loggedIn user sends any message, it will have three states such as: inProgress, success and error.                                |

Adding `CometChatMessageEvents` Listener's

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    import { CometChatMessageEvents } from "@cometchat/chat-uikit-react";

    const ccMessageEdited = CometChatMessageEvents.ccMessageEdited.subscribe(() => {
      // Your Code
    });

    const ccReplyToMessage = CometChatMessageEvents.ccReplyToMessage.subscribe(() => {
      // Your Code
    });

    const ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe(() => {
      // Your Code
    });
    ```
  </Tab>
</Tabs>

***

Removing `CometChatMessageEvents` Listener's

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    ccMessageEdited?.unsubscribe();
    ccReplyToMessage?.unsubscribe();
    ccMessageSent?.unsubscribe();
    ```
  </Tab>
</Tabs>

***

## Customization

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

### Style

To modify the styling, you can customise the css of MessageComposer Component.

**Example**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/V0K7cPlfehMN11ku/images/2a451f61-D8U5WIgOyS2DAAAAABJRU5ErkJggg.png?fit=max&auto=format&n=V0K7cPlfehMN11ku&q=85&s=10bc25df6f0e583bf1806e598bfb8c6e" width="1004" height="90" data-path="images/2a451f61-D8U5WIgOyS2DAAAAABJRU5ErkJggg.png" />
</Frame>

<Tabs>
  <Tab title="MessageComposerDemo.tsx">
    ```tsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";

    <CometChatMessageComposer user={chatUser} />;
    ```
  </Tab>

  <Tab title="MessageComposerDemo.css">
    ```css theme={null}
    .cometchat-message-composer .cometchat-message-composer__input {
      font-family: "SF Pro";
    }

    .cometchat-message-composer .cometchat-button .cometchat-button__icon {
      background: #f19fa1;
    }

    .cometchat-message-composer .cometchat-message-composer__send-button {
      background: #e5484d;
    }
    ```
  </Tab>
</Tabs>

***

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

<Tabs>
  <Tab title="MessageComposerDemo.tsx">
    ```tsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";

    <CometChatMessageComposer user={chatUser} disableTypingEvents={true} />;
    ```
  </Tab>
</Tabs>

Below is a list of customizations along with corresponding code snippets

| Property                                   | Description                                                                                          | Code                                                              |
| ------------------------------------------ | ---------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
| **Initial Composer Text**                  | The initial text pre-filled in the message input when the component mounts.                          | `initialComposerText="Hello"`                                     |
| **Disable Typing Events**                  | Disables the typing indicator for the current message composer.                                      | `disableTypingEvents={true}`                                      |
| **Disable Mentions**                       | Disables the mentions functionality in the message composer.                                         | `disableMentions={true}`                                          |
| **Disable Mention All**                    | Controls whether group mentions like @all appear in suggestions.                                     | `disableMentionAll={true}`                                        |
| **Mention All Label**                      | Allows setting a custom alias label for group mentions (@channel, @everyone, etc.).                  | `mentionAllLabel="all"`                                           |
| **Mentions Users Request Builder**         | Provides a custom UsersRequestBuilder to control how the mentioned users list is fetched.            | `mentionsUsersRequestBuilder={usersRequestBuilder}`               |
| **Mentions Group Members Request Builder** | Provides a custom GroupMembersRequestBuilder to customize how mentioned group members are retrieved. | `mentionsGroupMembersRequestBuilder={groupMembersRequestBuilder}` |
| **Hide Image Attachment Option**           | Hides the image attachment option in the message composer.                                           | `hideImageAttachmentOption={true}`                                |
| **Hide Video Attachment Option**           | Hides the video attachment option in the message composer.                                           | `hideVideoAttachmentOption={true}`                                |
| **Hide Audio Attachment Option**           | Hides the audio attachment option in the message composer.                                           | `hideAudioAttachmentOption={true}`                                |
| **Hide File Attachment Option**            | Hides the file attachment option in the message composer.                                            | `hideFileAttachmentOption={true}`                                 |
| **Hide Polls Option**                      | Hides the polls option in the message composer.                                                      | `hidePollsOption={true}`                                          |
| **Hide Collaborative Document**            | Hides the collaborative document option in the message composer.                                     | `hideCollaborativeDocumentOption={true}`                          |
| **Hide Collaborative Whiteboard**          | Hides the collaborative whiteboard option in the message composer.                                   | `hideCollaborativeWhiteboardOption={true}`                        |
| **Hide Attachment Button**                 | Hides the attachment button in the message composer.                                                 | `hideAttachmentButton={true}`                                     |
| **Hide Voice Recording Button**            | Hides the voice recording button in the message composer.                                            | `hideVoiceRecordingButton={true}`                                 |
| **Hide Emoji Keyboard Button**             | Hides the emoji keyboard button in the message composer.                                             | `hideEmojiKeyboardButton={true}`                                  |
| **Hide Stickers Button**                   | Hides the stickers button in the message composer.                                                   | `hideStickersButton={true}`                                       |
| **Hide Send Button**                       | Hides the send button in the message composer.                                                       | `hideSendButton={true}`                                           |
| **Show Scrollbar**                         | Controls the visibility of the scrollbar in the composer.                                            | `showScrollbar={true}`                                            |
| **User**                                   | Specifies the recipient of the message (user object).                                                | `user={chatUser}`                                                 |
| **Group**                                  | Specifies the group to send messages to. Used if the `user` prop is not provided.                    | `group={chatGroup}`                                               |
| **Parent Message ID**                      | Specifies the ID of the parent message for threading or replying to a specific message.              | `parentMessageId={12345}`                                         |
| **Enter Key Behavior**                     | Determines the behavior of the Enter key (e.g., send message or add a new line).                     | `enterKeyBehavior={EnterKeyBehavior.SendMessage}`                 |
| **Disable Sound for Message**              | Disables sound for incoming messages.                                                                | `disableSoundForMessage={true}`                                   |
| **Custom Sound for Message**               | Specifies a custom audio sound for incoming messages.                                                | `customSoundForMessage="sound.mp3"`                               |

***

### 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 MessageComposer Component. This will override the existing list of `MessageComposerActions`.

Shown below is the default chat interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/tAD7jl57uaz-SCT_/images/3f1dac92-message_composer_default_attachment_options_web_screens-c569f237c006c80562e098b92692e7a4.png?fit=max&auto=format&n=tAD7jl57uaz-SCT_&q=85&s=eef18d08fe482b8d19a7e5f3f9db0393" width="1016" height="376" data-path="images/3f1dac92-message_composer_default_attachment_options_web_screens-c569f237c006c80562e098b92692e7a4.png" />
</Frame>

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/yj8hatI1RYHMwVPT/images/abb9806d-message_composer_custom_attachment_options_web_screens-104035717491a170e498d72a5a5591a2.png?fit=max&auto=format&n=yj8hatI1RYHMwVPT&q=85&s=11324315968c899b52f934405ebdc50d" width="1016" height="216" data-path="images/abb9806d-message_composer_custom_attachment_options_web_screens-104035717491a170e498d72a5a5591a2.png" />
</Frame>

Use the following code to achieve the customization shown above.

<Tabs>
  <Tab title="MessageComposerDemo.tsx">
    ```tsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import {
      CometChatMessageComposer,
      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",
        }),
      ];
    }

    <CometChatMessageComposer
      attachmentOptions={getAttachments()}
      user={userObj}
    />;
    ```
  </Tab>

  <Tab title="MessageComposerDemo.css">
    ```css theme={null}
    .cometchat-message-composer__secondary-button-view-attachment-button
      .cometchat-action-sheet {
      border: none;
      border-radius: inherit;
      background: transparent;
      box-shadow: none;
      width: 100%;
    }

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

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

    .cometchat-message-composer__secondary-button-view-attachment-button
      .cometchat-action-sheet__item-icon {
      background: #141414;
    }
    ```
  </Tab>
</Tabs>

***

#### AuxiliaryButtonView

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

Please note that the MessageComposer Component utilizes the AuxiliaryButton to provide sticker and AI functionality. Overriding the AuxiliaryButton will subsequently replace the sticker functionality.

Shown below is the default chat interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/j9rC5KDHdwR7G4nu/images/19628f99-VQ84WX37aSZJkiRJkorymMXgWVOKev5Hf8LQuqSmgq5ct0AAAAASUVORK5CYII.png?fit=max&auto=format&n=j9rC5KDHdwR7G4nu&q=85&s=7784ac828182a07b600784ee97ef0963" width="1004" height="90" data-path="images/19628f99-VQ84WX37aSZJkiRJkorymMXgWVOKev5Hf8LQuqSmgq5ct0AAAAASUVORK5CYII.png" />
</Frame>

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/zd9jYi4xvTDJ3vRH/images/b504b88f-AAAAAElFTkSuQmCC.png?fit=max&auto=format&n=zd9jYi4xvTDJ3vRH&q=85&s=d08813d685dc8da3aaef9fa1e0fd2650" width="1020" height="98" data-path="images/b504b88f-AAAAAElFTkSuQmCC.png" />
</Frame>

Use the following code to achieve the customization shown above.

<Tabs>
  <Tab title="MessageComposerDemo.tsx">
    ```tsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import {
      CometChatMessageComposer,
      IconStyle,
      CometChatButton,
    } from "@cometchat/chat-uikit-react";

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

    <CometChatMessageComposer
      auxiliaryButtonView={auxiliaryButtonView}
      user={userObj}
    />;
    ```
  </Tab>
</Tabs>

***

#### SendButtonView

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

Shown below is the default chat interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/kguwBmaySZvSdKIc/images/6c67574d-wGdWG0FDGDEYQAAAABJRU5ErkJggg.png?fit=max&auto=format&n=kguwBmaySZvSdKIc&q=85&s=2f6c045dd1afc8cc965bf363f40004dd" width="1004" height="90" data-path="images/6c67574d-wGdWG0FDGDEYQAAAABJRU5ErkJggg.png" />
</Frame>

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/IROXeajQRcMWx2uk/images/741cf254-B4D17HCxfO1pwAAAABJRU5ErkJggg.png?fit=max&auto=format&n=IROXeajQRcMWx2uk&q=85&s=eeb62464c7d7e0f9a17383443d82e482" width="1004" height="90" data-path="images/741cf254-B4D17HCxfO1pwAAAABJRU5ErkJggg.png" />
</Frame>

Use the following code to achieve the customization shown above.

<Tabs>
  <Tab title="MessageComposerDemo.tsx">
    ```tsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import {
      CometChatMessageComposer,
      CometChatButton,
    } from "@cometchat/chat-uikit-react";

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

    <CometChatMessageComposer sendButtonView={sendButtonView} user={userObj} />;
    ```
  </Tab>

  <Tab title="MessageComposerDemo.css">
    ```css theme={null}
    .cometchat-message-composer
      div:not([class])
      .message-composer__send-button
      .cometchat-button {
      background: #edeafa;
    }

    .cometchat-message-composer
      div:not([class])
      .message-composer__send-button
      .cometchat-button__icon {
      background: #6852d6;
    }
    ```
  </Tab>
</Tabs>

***

#### HeaderView

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

Shown below is the default chat interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/kguwBmaySZvSdKIc/images/6c67574d-wGdWG0FDGDEYQAAAABJRU5ErkJggg.png?fit=max&auto=format&n=kguwBmaySZvSdKIc&q=85&s=2f6c045dd1afc8cc965bf363f40004dd" width="1004" height="90" data-path="images/6c67574d-wGdWG0FDGDEYQAAAABJRU5ErkJggg.png" />
</Frame>

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/V0K7cPlfehMN11ku/images/2ac34d51-rm5qa5qXT6fkOAAAAAAAk5bAmg9f8chqyHi74f4n1Ek4tGvn6AAAAAElFTkSuQmCC.png?fit=max&auto=format&n=V0K7cPlfehMN11ku&q=85&s=8dc63b3dab738845714f122ef5fa49b2" width="1004" height="131" data-path="images/2ac34d51-rm5qa5qXT6fkOAAAAAAAk5bAmg9f8chqyHi74f4n1Ek4tGvn6AAAAAElFTkSuQmCC.png" />
</Frame>

Use the following code to achieve the customization shown above.

<Tabs>
  <Tab title="MessageComposerDemo.tsx">
    ```tsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";

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

    <CometChatMessageComposer user={chatUser} headerView={getHeaderView()} />;
    ```
  </Tab>

  <Tab title="MessageComposerDemo.css">
    ```css theme={null}
    .cometchat-message-composer .message-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-message-composer__header {
      background: #dcd7f6;
      border-radius: var(--cometchat-radius-ax, 1000px);
      padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-5, 20px);
    }

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

    .cometchat-message-composer
      .message-composer__header-view
      .message-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;
    }
    ```
  </Tab>
</Tabs>

***

#### 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](/ui-kit/react/mentions-formatter-guide)

<Tabs>
  <Tab title="ShortCutFormatter.ts">
    ```ts theme={null}
    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; // Track the currently open shortcut

      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) {
            // Close the currently open dialog, if any
            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(); // Use DialogHelper to close the dialog
        this.dialogIsOpen = false;
        this.currentShortcut = null;
      }

      handleButtonClick = (buttonText: string) => {
        if (this.currentCaretPosition && this.currentRange) {
          // Inserting the replacement text corresponding to the shortcut
          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;
    ```
  </Tab>

  <Tab title="Dialog.tsx">
    ```tsx theme={null}
    import React from "react";
    import ReactDOM from "react-dom";

    interface DialogProps {
      onClick: () => void;
      buttonText: string;
    }

    const Dialog: React.FC<DialogProps> = ({ onClick, buttonText }) => {
      return (
        <div
          style={{
            position: "fixed",
            left: "300px",
            top: "664px",
            width: "800px",
            height: "45px",
          }}
        >
          <button
            style={{
              width: "800px",
              height: "100%",
              cursor: "pointer",
              backgroundColor: "#f2e6ff",
              border: "2px solid #9b42f5",
              borderRadius: "12px",
              textAlign: "left",
              paddingLeft: "20px",
              font: "600 15px sans-serif, Inter",
            }}
            onClick={onClick}
          >
            {buttonText}
          </button>
        </div>
      );
    };

    export default class DialogHelper {
      private dialogContainer: HTMLDivElement | null = null;

      createDialog(onClick: () => void, buttonText: string) {
        this.dialogContainer = document.createElement("div");
        document.body.appendChild(this.dialogContainer);
        ReactDOM.render(
          <Dialog onClick={onClick} buttonText={buttonText} />,
          this.dialogContainer
        );
      }

      closeDialog() {
        if (this.dialogContainer) {
          ReactDOM.unmountComponentAtNode(this.dialogContainer);
          this.dialogContainer.remove();
          this.dialogContainer = null;
        }
      }
    }
    ```
  </Tab>

  <Tab title="MessageComposerDemo.tsx">
    ```tsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
    import ShortcutFormatter from "./ShortCutFormatter";

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

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

***