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

# Conversations

> Conversations — CometChat documentation.

## Overview

The Conversations is a [Component](/ui-kit/react/v4/components-overview#components), That shows all conversations related to the currently logged-in user,

This component lists the most recent or latest conversations or contacts with whom you have exchanged messages. It provides a convenient way to quickly access and resume conversations with the people you have been in contact with recently.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/21UBnagXOw-XG0Sv/images/b138eab0-conversations_overview_web_screens-49c566a6d7ab615cfb0d074a9941bd01.png?fit=max&auto=format&n=21UBnagXOw-XG0Sv&q=85&s=4507284c62f9a460017d6665023fc2b9" width="3600" height="2400" data-path="images/b138eab0-conversations_overview_web_screens-49c566a6d7ab615cfb0d074a9941bd01.png" />
</Frame>

## Usage

### Integration

<Tabs>
  <Tab title="ConversationsDemo.tsx">
    ```typescript theme={null}
    import {
      CometChatConversations,
      TitleAlignment,
      ConversationsStyle,
    } from "@cometchat/chat-uikit-react";

    function ConversationsDemo() {
      const conversationsStyle = new ConversationsStyle({
        width: "100%",
        height: "100%",
        border: "1px solid #ee7752",
        background: "linear-gradient(#ee7752, #e73c7e, #23a6d5, #23d5ab)",
      });

      return (
        <div className="conversations" style={{ width: "100%", height: "100%" }}>
          <div>
            <CometChatConversations
              title="Your Custom Title"
              titleAlignment={TitleAlignment.center}
              conversationsStyle={conversationsStyle}
            />
          </div>
        </div>
      );
    }

    export default ConversationsDemo;
    ```
  </Tab>

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

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

### Actions

[Actions](/ui-kit/react/v4/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. OnItemClick

`OnItemClick` is triggered when you click on a ListItem of the Conversations component. The `OnItemClick` action doesn't have a predefined behavior. You can override this action using the following code snippet.

<Tabs>
  <Tab title="ConversationsDemo.tsx">
    ```typescript theme={null}
    import { CometChatConversations } from "@cometchat/chat-uikit-react";

    const getOnItemClick = (conversation: CometChat.Conversation) => {
    console.log("ItemClick:", conversation);
    //your custom action
    };

    function ConversationsDemo() {
    return (

    <div className="conversations" style={{ width: "100%", height: "100%" }}>
      <div>
          <CometChatConversations
            onItemClick={getOnItemClick}
          />
      </div>
    </div>
    );
    }

    export default ConversationsDemo;
    ```
  </Tab>
</Tabs>

***

#### 2. OnSelect

The `OnSelect` event is triggered upon the completion of a selection in `SelectionMode`. It does not have a default behavior. However, you can override its behavior using the following code snippet.

<Tabs>
  <Tab title="ConversationsDemo.tsx">
    ```typescript theme={null}
    import { CometChatConversations, SelectionMode } from "@cometchat/chat-uikit-react";

    const getOnSelect = (conversation: CometChat.Conversation, selected: boolean) => {
      console.log("Selected, ", conversation.getConversationId(), selected);
      //your custom action on select
    };

    function ConversationsDemo() {
    return (
    <div className="conversations" style={{ width: "100%", height: "100%" }}>
      <div>
          <CometChatConversations
            selectionMode={SelectionMode.multiple}
            onSelect={getOnSelect}
          />
      </div>
    </div>
    );
    }

    export default ConversationsDemo;
    ```
  </Tab>
</Tabs>

***

#### 3. OnError

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

<Tabs>
  <Tab title="ConversationsDemo.tsx">
    ```typescript theme={null}
    import { CometChatConversations } from "@cometchat/chat-uikit-react";

    const handleOnError = (error: CometChat.CometChatException) => {
    //your exception handling code
    };

    function ConversationsDemo() {
    return (

    <div className="conversations" style={{ width: "100%", height: "100%" }}>
      <div>
          <CometChatConversations
            onError={handleOnError}
          />
      </div>
    </div>
    );
    }

    export default ConversationsDemo;
    ```
  </Tab>
</Tabs>

***

### Filters

You can set `ConversationsRequestBuilder` in the Conversations Component to filter the conversation list. You can modify the builder as per your specific requirements with multiple options available to know more refer to [ConversationRequestBuilder](/sdk/javascript/retrieve-conversations).

You can set filters using the following parameters.

1. **Conversation Type:** Filters on type of Conversation, `User` or `Groups`
2. **Limit:** Number of conversations fetched in a single request.
3. **WithTags:** Filter on fetching conversations containing tags
4. **Tags:** Filters on specific `Tag`
5. **UserTags:** Filters on specific User `Tag`
6. **GroupTags:** Filters on specific Group `Tag`

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

    function ConversationsDemo() {
    return (

    <div className="conversations" style={{ width: "100%", height: "100%" }}>
      <div>
          <CometChatConversations
            conversationsRequestBuilder={new CometChat.ConversationsRequestBuilder().setLimit(10)}
          />
      </div>
    </div>
    );
    }

    export default ConversationsDemo;
    ```
  </Tab>
</Tabs>

***

### Events

[Events](/ui-kit/react/v4/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.

<Tabs>
  <Tab title="Add Listener">
    ```javascript theme={null}
    const ccConversationDeleted =
            CometChatConversationEvents.ccConversationDeleted.subscribe(
              (conversation: CometChat.Conversation) => {
                //Your Code
              }
            );
    ```
  </Tab>
</Tabs>

***

<Tabs>
  <Tab title="Remove Listener">
    ```javascript theme={null}
    ccConversationDeleted?.unsubscribe();
    ```
  </Tab>
</Tabs>

## Customization

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

### Style

Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component.

#### 1. Conversation Style

You can set the `ConversationsStyle` to the `Conversations` Component to customize the styling.

***

<Tabs>
  <Tab title="ConversationsDemo.tsx">
    ```typescript theme={null}
    import { CometChatConversations, ConversationsStyle } from "@cometchat/chat-uikit-react";

    function ConversationsDemo() {

    const conversationsStyle = new ConversationsStyle({
    width: "100%",
    height: "100%",
    border: "1px solid #ee7752",
    background: "linear-gradient(#ee7752, #e73c7e, #23a6d5, #23d5ab)",
    });

    return (

    <div className="conversations" style={{ width: "100%", height: "100%" }}>
      <div>
          <CometChatConversations
            conversationsStyle = {conversationsStyle}
          />
      </div>
    </div>
    );
    }

    export default ConversationsDemo;
    ```
  </Tab>
</Tabs>

List of properties exposed by ConversationStyle

| Name                        | Description                                                                                                                                                                          |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| width                       | Sets the width of the component                                                                                                                                                      |
| height                      | Sets the height of the component                                                                                                                                                     |
| border                      | Sets the border of the component                                                                                                                                                     |
| borderRadius                | Sets the border radius of the component                                                                                                                                              |
| background                  | Sets all background style properties at once, such as color, image, origin and size, or repeat method. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/background) |
| boxShadow                   | Adds shadow effects around the component.                                                                                                                                            |
| titleTextFont               | Sets all the different properties of font for the heading text. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font)                                              |
| titleTextColor              | Sets the foreground color of heading text.                                                                                                                                           |
| loadingIconTint             | Sets the tint or color applied to the loading indicator icon of the component                                                                                                        |
| emptyStateTextFont          | Sets all the different properties of font for the placeholder text. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font)                                          |
| emptyStateTextColor         | Sets the foreground color of placeholder text displayed in the component.                                                                                                            |
| errorStateTextFont          | Sets all the different properties of font for the error message. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font)                                             |
| errorStateTextColor         | Sets the foreground color of error message displayed in the component.                                                                                                               |
| lastMessageTextFont         | Sets all the different properties of font for the last message. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font)                                              |
| lastMessageTextColor        | Sets the foreground color of the last message.                                                                                                                                       |
| typingIndictorTextFont      | Sets all the different properties of font for the typing indicator text. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font)                                     |
| typingIndictorTextColor     | Sets the foreground color of typing indicator text                                                                                                                                   |
| threadIndicatorTextFont     | Sets all the different properties of font for the thread indicator text. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font)                                     |
| threadIndicatorTextColor    | Sets the foreground color of thread indicator text.                                                                                                                                  |
| onlineStatusColor           | Sets the color of the status indicator representing the user's online status                                                                                                         |
| privateGroupIconBackground  | Sets the background of the status indicator representing private groups.                                                                                                             |
| passwordGroupIconBackground | Sets the background of the status indicator representing password protected groups.                                                                                                  |

#### 2. Avatar Style

To apply customized styles to the `Avatar` component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Avatar Styles](/ui-kit/react/v4/avatar).

***

<Tabs>
  <Tab title="ConversationsDemo.tsx">
    ```typescript theme={null}
    import { CometChatConversations, AvatarStyle } from "@cometchat/chat-uikit-react";

    function ConversationsDemo() {

    const avatarStyle = new AvatarStyle({
    width: "100%",
    height: "100%",
    border: "1px solid blue",
    });

    return (

    <div className="conversations" style={{ width: "100%", height: "100%" }}>
      <div>
          <CometChatConversations
            avatarStyle={avatarStyle}
          />

      </div>
    </div>
    );
    }

    export default ConversationsDemo;
    ```
  </Tab>
</Tabs>

#### 3. StatusIndicator Style

To apply customized styles to the Status Indicator component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Status Indicator Styles](/ui-kit/react/v4/status-indicator).

***

<Tabs>
  <Tab title="ConversationsDemo.tsx">
    ```typescript theme={null}
    import { CometChatConversations } from "@cometchat/chat-uikit-react";

    function ConversationsDemo() {

    const statusIndicatorStyle = {
    color: 'red',
    height: '10px',
    width: '10px'
    };

    return (

    <div className="conversations" style={{ width: "100%", height: "100%" }}>
      <div>
          <CometChatConversations
            statusIndicatorStyle={statusIndicatorStyle}
          />

      </div>
    </div>
    );
    }

    export default ConversationsDemo;
    ```
  </Tab>
</Tabs>

#### 4. Date Style

To apply customized styles to the `Date` component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Date Styles](/ui-kit/react/v4/date).

***

<Tabs>
  <Tab title="ConversationsDemo.tsx">
    ```typescript theme={null}
    import { CometChatConversations, BadgeStyle } from "@cometchat/chat-uikit-react";

    function ConversationsDemo() {

    const dateStyle = new DateStyle({
    width: "100%",
    height: "100%",
    border: "1px solid pink",
    });

    return (

    <div className="conversations" style={{ width: "100%", height: "100%" }}>
      <div>
          <CometChatConversations
            dateStyle={dateStyle}
          />

      </div>
    </div>
    );
    }

    export default ConversationsDemo;
    ```
  </Tab>
</Tabs>

#### 5. Badge Style

To apply customized styles to the `Badge` component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Badge Styles](/ui-kit/react/v4/badge).

<Tabs>
  <Tab title="ConversationsDemo.tsx">
    ```typescript theme={null}

    const badgeStyle = new BadgeStyle({
    width: "100%",
    height: "100%",
    border: "1px solid pink",
    });
    ```
  </Tab>
</Tabs>

#### 6. Receipt Style

To apply customized styles to the `receipt` component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Receipts](/ui-kit/react/v4/receipt).

<Tabs>
  <Tab title="ConversationsDemo.tsx">
    ```typescript theme={null}
    const receiptStyle = new ReceiptStyle({
    width: "100%",
    height: "100%",
    border: "1px solid blue",
    readIconTint:"green",
    sentIconTint:"red",
    deliveredIconTint:"yellow"
    });
    ```
  </Tab>
</Tabs>

#### 7. Backdrop Style

To apply customized styles to the `Backdrop` component in the `Conversations` Component, you can use the following code snippet, you can use the following code snippet. For more information, visit [Backdrop Styles](/ui-kit/react/v4/backdrop).

<Tabs>
  <Tab title="ConversationsDemo.tsx">
    ```typescript theme={null}
    const backdropStyle = new BackdropStyle({
      width: "100%",
      height: "100%",
      border: "2px solid red",
      background: "blue",
      borderRadius: "20px",
    });
    ```
  </Tab>
</Tabs>

#### 8. Delete Conversation Dialog Style

To apply customized styles to the `delete dialog` component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Delete dialog Styles](/ui-kit/react/v4/confirm-dialog).

<Tabs>
  <Tab title="ConversationsDemo.tsx">
    ```typescript theme={null}

    const deleteConversationDialogStyle = new ConfirmDialogStyle({
    width: "100%",
    height: "100%",
    background:"blue",
    borderRadius:"20px",
    });
    ```
  </Tab>
</Tabs>

#### 9. LisItem Style

To apply customized styles to the `ListItemStyle` component in the `Conversations` Component, you can use the following code snippet. For more information, visit [List Item](/ui-kit/react/v4/list-item).

<Tabs>
  <Tab title="ConversationsDemo.tsx">
    ```typescript theme={null}

     const listItemStyle = new ListItemStyle({
        width: "100%",
        height: "100%",
        border: "2px solid red",
      })
    ```
  </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="ConversationsDemo.tsx">
    ```typescript theme={null}

     <div className="conversations" style={{ width: "100%", height: "100%" }}>
      <div>
          <CometChatConversations
            title="Your Custom Title"
            readIcon="custom read icon"
          />
      </div>
    </div>
    ```
  </Tab>
</Tabs>

Below is a list of customizations along with corresponding code snippets

| Property                          | Description                                                                                                                                                                                                                                     | Code                                                      |
| --------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
| Title                             | Used to set custom title in the app bar.                                                                                                                                                                                                        | `title="Your Custom Title"`                               |
| EmptyState Text                   | Used to set a custom text response when fetching the conversations has returned an empty list                                                                                                                                                   | `emptyStateText="Your Custom Empty State text"`           |
| Selection Mode                    | Used to set a custom text response when fetching the conversations has returned an empty list                                                                                                                                                   | `selectionMode={SelectionMode.multiple}`                  |
| PasswordGroup Icon                | Used to set icon shown in place of status indicator for password protected group                                                                                                                                                                | `passwordGroupIcon="https://icon.svg"`                    |
| privateGroupIcon                  | Used to set icon shown in place of status indicator for private group                                                                                                                                                                           | `privateGroupIcon="https://icon.svg"`                     |
| SentIcon                          | Used to customize the receipt icon shown in the subtitle of the conversation item if hideReceipt is false and if the status of the last message in the conversation is sent                                                                     | `sentIcon="your custom sent icon"`                        |
| Delivered Icon                    | Used to customize the receipt icon shown in the subtitle of the conversation item if hideReceipt is false and if the status of the last message in the conversation is delivered                                                                | `deliveredIcon="your custom delivered icon"`              |
| Read Icon                         | Used to customize the receipt icon shown in the subtitle of the conversation item if hideReceipt is false and if the status of the last message in the conversation is read                                                                     | `readIcon="your custom read icon"`                        |
| errorIcon                         | Asset URL for the error state indicating that an error has occurred when the message was in transit.                                                                                                                                            | `errorIcon="your custom error icon"`                      |
| Hide Error                        | Used to hide error on fetching conversations                                                                                                                                                                                                    | `hideError={true}`                                        |
| Hide Separator                    | Used to control visibility of Separators in the list view                                                                                                                                                                                       | `hideSeparator={true}`                                    |
| Disable UsersPresence             | Used to control visibility of status indicator shown if user is online                                                                                                                                                                          | `disableUsersPresence={true}`                             |
| Hide Receipt                      | Used to control the visibility of read receipts without affecting the functionality of marking messages as read and delivered                                                                                                                   | `hideReceipt={false}`                                     |
| Disable Typing                    | Used to toggle visibility of typing indicator                                                                                                                                                                                                   | `disableTyping={true}`                                    |
| Disable Mentions                  | Sets whether mentions in text should be disabled. Processes the text formatters If there are text formatters available and the disableMentions flag is set to true, it removes any formatters that are instances of CometChatMentionsFormatter. | `disableMentions={true}`                                  |
| disableSoundForMessages           | When set to true, the component will not produce sound for all incoming messages.indicator                                                                                                                                                      | `disableSoundForMessages={true}`                          |
| customSoundForMessages            | mp3 file asset of your choice.                                                                                                                                                                                                                  | `customSoundForMessages="your custom sound for messages"` |
| **activeConversation** [report]() | Used to set the active conversation                                                                                                                                                                                                             | `activeConversation={activeConversation}`                 |

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

***

#### ListItemView

With this function, you can assign a custom ListItem to the Conversations Component.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    const getListItemView = (conversation) => {
      // Your custom list item view
    };

    <CometChatConversations
      listItemView={getListItemView} // Custom list item view
    />;
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}
    const getListItemView = (conversation: Conversation) => {
      //your custom list item view
    };

    <CometChatConversations
      listItemView={getListItemView} //custom listitem view
    />;
    ```
  </Tab>
</Tabs>

**Example**

**Default**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/G6Puyz_3Zlaowa9R/images/c65d938c-list_item_view_default_web_screens-d33d2d49bab1cae76be044cbac4681c9.png?fit=max&auto=format&n=G6Puyz_3Zlaowa9R&q=85&s=47cba082b09c39e1ce01e5cfc644d0e2" width="3600" height="2400" data-path="images/c65d938c-list_item_view_default_web_screens-d33d2d49bab1cae76be044cbac4681c9.png" />
</Frame>

**Custom**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/mkn0UqPQ5BXljCV1/images/9719cb77-list_item_view_custom_web_screens-aa39fe212a9f2704807ce297efde8b29.png?fit=max&auto=format&n=mkn0UqPQ5BXljCV1&q=85&s=1ede6162eabb6fa67bd37e7ab3da0383" width="3600" height="2400" data-path="images/9719cb77-list_item_view_custom_web_screens-aa39fe212a9f2704807ce297efde8b29.png" />
</Frame>

You can customize the appearance of each list item by modifying the `getListItemView` function as follows:

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    const getListItemView = (conversation) => {
      const conversationWith = conversation.getConversationWith();
      console.log(conversationWith);

      if (conversationWith instanceof CometChat.User) {
        return (
          <div
            style={{
              display: "flex",
              alignItems: "left",
              padding: "10px",
              border: "1px solid black",
              background: "#E8EAE9",
            }}
          >
            <cometchat-avatar
              image={conversationWith.getAvatar()}
              name={conversationWith.getName()}
            />

            <div>
              <div style={{ fontWeight: "bold" }}>{conversationWith.getName()}</div>
              <div style={{ color: "#666" }}>{conversationWith.getStatus()}</div>
            </div>
          </div>
        );
      } else if (conversationWith instanceof CometChat.Group) {
        return (
          <div
            style={{
              display: "flex",
              alignItems: "left",
              padding: "10px",
              border: "1px solid black",
              background: "#E8EAE9",
            }}
          >
            <cometchat-avatar
              image={conversationWith.getIcon()}
              name={conversationWith.getName()}
            />
            <div>
              <div style={{ fontWeight: "bold" }}>{conversationWith.getName()}</div>
              <div style={{ color: "#888" }}>
                Members: {conversationWith.getMembersCount()}
              </div>
            </div>
          </div>
        );
      } else {
        return <div>Unknown conversation type</div>;
      }
    };
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}
    const getListItemView = (conversation: CometChat.Conversation) => {
      const conversationWith = conversation.getConversationWith();
      console.log(conversationWith);

      if (conversationWith instanceof CometChat.User) {
        return (
          <div
            style={{
              display: "flex",
              alignItems: "left",
              padding: "10px",
              border: "1px solid black",
              background: "#E8EAE9",
            }}
          >
            <cometchat-avatar
              image={conversationWith.getAvatar()}
              name={conversationWith.getName()}
            />

            <div>
              <div style={{ fontWeight: "bold" }}>{conversationWith.getName()}</div>
              <div style={{ color: "#666" }}>{conversationWith.getStatus()}</div>
            </div>
          </div>
        );
      } else if (conversationWith instanceof CometChat.Group) {
        return (
          <div
            style={{
              display: "flex",
              alignItems: "left",
              padding: "10px",
              border: "1px solid black",
              background: "#E8EAE9",
            }}
          >
            <cometchat-avatar
              image={conversationWith.getIcon()}
              name={conversationWith.getName()}
            />
            <div>
              <div style={{ fontWeight: "bold" }}>{conversationWith.getName()}</div>
              <div style={{ color: "#888" }}>
                Members: {conversationWith.getMembersCount()}
              </div>
            </div>
          </div>
        );
      } else {
        return <div>Unknown conversation type</div>;
      }
    };
    ```
  </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/v4/mentions-formatter-guide)

<Tabs>
  <Tab title="ShortCutFormatter.ts">
    ```typescript 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">
    ```typescript theme={null}
    import React from 'react';
    import ReactDOM from 'react-dom';

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

    const Dialog: React.FC<DialogProps> = ({ onClick, buttonText }) => {
        console.log("buttonText",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="ConversationDemo.tsx">
    ```typescript theme={null}
    import ShortcutFormatter from "./ShortCutFormatter";

    <CometChatConversations
      textFormatters={[new ShortcutFormatter()]}
    />
    ```
  </Tab>
</Tabs>

#### Menus

You can set the Custom Menu view to add more options to the Conversations component.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}

     const getMenus = () =>{
    //your custom menu
    }

    <CometChatConversations
    menus={getMenus()}
    />;
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}

     const getMenus = () =>{
    //your custom menu
    }

    <CometChatConversations
    menus={getMenus()}
    />;
    ```
  </Tab>
</Tabs>

**Example**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/7a4hqm7gLVRmX34O/images/0428820b-menu_custom_web_screens-980f2c7ed85ffd2722103706fbd6f14d.png?fit=max&auto=format&n=7a4hqm7gLVRmX34O&q=85&s=177f579c081eb7119df4cd71afb30af1" width="3600" height="2400" data-path="images/0428820b-menu_custom_web_screens-980f2c7ed85ffd2722103706fbd6f14d.png" />
</Frame>

You can customize the menu by modifying the `getMenus` function as follows:

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}

    const getMenus = () => {
    const handleReload = () => {
    window.location.reload();
    };
    const getButtonStyle =()=>{
    return{
    height: "20px",
    width: "20px",
    border: "none",
    borderRadius: "0",
    background: "transparent",
    buttonIconTint:"#7E57C2"
    }
    }
    return (
    <cometchat-button
        iconURL="https://cdn-icons-png.freepik.com/256/11019/11019959.png"
        buttonStyle={JSON.stringify(getButtonStyle())}
        onClick={handleReload}
      >
    {" "}
    </cometchat-button>
    );
    };
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}

    const getMenus = () => {
    const handleReload = () => {
    window.location.reload();
    };
    const getButtonStyle = (): { [key: string]: string } => {
    return {
    height: "20px",
    width: "20px",
    border: "none",
    borderRadius: "0",
    background: "transparent",
    buttonIconTint: "#7E57C2",
    };
    };
    }
    return (
    <cometchat-button
        iconURL="https://cdn-icons-png.freepik.com/256/11019/11019959.png"
        buttonStyle={JSON.stringify(getButtonStyle())}
        onClick={handleReload}
      >
    {" "}
    </cometchat-button>
    );
    };
    ```
  </Tab>
</Tabs>

***

#### DatePattern

You can modify the date pattern to your requirement using **DatePattern**. datePattern formats date and time values according to a predefined standard, enhancing consistency and clarity in their presentation.

DatePatterns describes a specific format or arrangement used to represent dates in a human-readable form.

| Name          | Description                                                                                                                                                                                              |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `time`        | Date format displayed in the format `hh:mm a`                                                                                                                                                            |
| `DayDate`     | Date format displayed as:<br />1) If timestamp \< 24hrs: “Today”<br />2) If timestamp \< 48hrs: “Yesterday”<br />3) If timestamp \< 7 days display “EEE” i.e , SUNDAY<br />4) else display “d MMM, yyyy” |
| `DayDateTime` | Date format displayed as:<br />1) If timestamp \< 24hrs: “hh:mm a”<br />2) If timestamp \< 48hrs: “Yesterday”<br />3) If timestamp \< 7 days display “EEE” i.e SUNDAY<br />4) else display “dd MM yyyy”  |

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    <CometChatConversations
     datePattern={DatePatterns.DateTime}
    />
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}
    <CometChatConversations
     datePattern={DatePatterns.DateTime}
    />
    ```
  </Tab>
</Tabs>

**Example**

**Default**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/NN4EdpOU3viwWMb_/images/0cae87f3-date_pattern_default_web_screens-31b7448ec36b3a45cd82bac22a027ca0.png?fit=max&auto=format&n=NN4EdpOU3viwWMb_&q=85&s=97303365ebecf3187876200db591db04" width="3600" height="2400" data-path="images/0cae87f3-date_pattern_default_web_screens-31b7448ec36b3a45cd82bac22a027ca0.png" />
</Frame>

**Custom**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/7emVxEQ5MCxvzC60/images/1cee8ad8-date_pattern_custom_web_screens-f09bf26f9c2bd1425e5da7273fda0467.png?fit=max&auto=format&n=7emVxEQ5MCxvzC60&q=85&s=d0293df0feaa9f767adab48a95ea707b" width="3600" height="2400" data-path="images/1cee8ad8-date_pattern_custom_web_screens-f09bf26f9c2bd1425e5da7273fda0467.png" />
</Frame>

#### SubtitleView

You can customize the subtitle view for each conversation item to meet your requirements

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    const getSubtitleView = (conversation) =>{
    //your custom subtitle view
    }
    <CometChatConversations
     subtitleView={getSubtitleView}
    />
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}
    const getSubtitleView = (conversation: Conversation) =>{
    //your custom subtitle view
    }
    <CometChatConversations
     subtitleView={getSubtitleView}
    />
    ```
  </Tab>
</Tabs>

**Example**

**Default**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/xIG5VBdyNJ5cYSqE/images/d6e3b2fd-subtitle_View_default_web_screens-545112687c261fda1e0deefe98d216a4.png?fit=max&auto=format&n=xIG5VBdyNJ5cYSqE&q=85&s=7c50f42c3917f702694ee74a4043b6f7" width="3600" height="2400" data-path="images/d6e3b2fd-subtitle_View_default_web_screens-545112687c261fda1e0deefe98d216a4.png" />
</Frame>

**Custom**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/21UBnagXOw-XG0Sv/images/ad34456d-subtitle_View_custom_web_screens-eb4c160e7646624e026e18a6dfd480b8.png?fit=max&auto=format&n=21UBnagXOw-XG0Sv&q=85&s=77718b35e287cc71d3070622b7b8f8fe" width="3600" height="2400" data-path="images/ad34456d-subtitle_View_custom_web_screens-eb4c160e7646624e026e18a6dfd480b8.png" />
</Frame>

You can customize the subtitle view by modifying the `getSubtitleView` function as follows:

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    const getSubtitleView = (conversation) => {
      const conversationWith = conversation.getConversationWith();

      function formatTime(timestamp) {
        const date = new Date(timestamp * 1000);
        return date.toLocaleString();
      }

      if (conversationWith instanceof CometChat.User) {
        return (
          <div
            style={{
              display: "flex",
              alignItems: "left",
              padding: "10px",
              fontSize: "10px",
            }}
          >
            <div style={{ color: "gray" }}>
              Last Active At: {formatTime(conversationWith.getLastActiveAt())}
            </div>
          </div>
        );
      } else if (conversationWith instanceof CometChat.Group) {
        return (
          <div
            style={{
              display: "flex",
              alignItems: "left",
              padding: "10px",
              fontSize: "10px",
            }}
          >
            <div style={{ color: "gray" }}>
              Created At: {formatTime(conversationWith.getCreatedAt())}
            </div>
          </div>
        );
      } else {
        return <div>Unknown conversation type</div>;
      }
    };
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}
    const getSubtitleView = (conversation: CometChat.Conversation) => {
      const conversationWith = conversation.getConversationWith();

      function formatTime(timestamp: number): string {
        const date = new Date(timestamp * 1000);
        return date.toLocaleString();
      }

      if (conversationWith instanceof CometChat.User) {
        return (
          <div
            style={{
              display: "flex",
              alignItems: "left",
              padding: "10px",
              fontSize: "10px",
            }}
          >
            <div style={{ color: "gray" }}>
              Last Active At: {formatTime(conversationWith.getLastActiveAt())}
            </div>
          </div>
        );
      } else if (conversationWith instanceof CometChat.Group) {
        return (
          <div
            style={{
              display: "flex",
              alignItems: "left",
              padding: "10px",
              fontSize: "10px",
            }}
          >
            <div style={{ color: "gray" }}>
              Created At: {formatTime(conversationWith.getCreatedAt())}
            </div>
          </div>
        );
      } else {
        return <div>Unknown conversation type</div>;
      }
    };
    ```
  </Tab>
</Tabs>

#### Options

User-defined actions which appears for each conversation on mouseover.

#### Structure of CometChatOption

| Name            | Description                                                                                                                            |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| id              | Unique identifier for each option                                                                                                      |
| title           | Heading text for each option                                                                                                           |
| titleFont       | Sets all the different properties of font for the option text. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font) |
| titleColor      | Sets the foreground color of option text                                                                                               |
| iconURL         | Sets the asset URL of the icon for each option                                                                                         |
| iconTint        | Sets the tint or color applied to each option                                                                                          |
| backgroundColor | Sets the background color of each option                                                                                               |
| onClick         | Method to be invoked when user clicks on each option                                                                                   |

**Example**

**Default**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/XgQ9DxAoWn0btB5m/images/5b568544-options_default_web_screens-891c88e86c9f142a89bd99af3378f85e.png?fit=max&auto=format&n=XgQ9DxAoWn0btB5m&q=85&s=026e3333252b8b6130103113518f5183" width="3600" height="2400" data-path="images/5b568544-options_default_web_screens-891c88e86c9f142a89bd99af3378f85e.png" />
</Frame>

**Custom**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/PaxBG9I1yMoeQmt2/images/3cbb9e89-options_custom_web_screens-e3534d8fa563430ae5d8443fbf707ec0.png?fit=max&auto=format&n=PaxBG9I1yMoeQmt2&q=85&s=50a812930b9371fca5acccbc6dab5e58" width="3600" height="2400" data-path="images/3cbb9e89-options_custom_web_screens-e3534d8fa563430ae5d8443fbf707ec0.png" />
</Frame>

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}

    <CometChatConversations
    options={(user) => {
    const customOptions = [
      new CometChatOption({
        id: "1",
        title: "Title",
        iconURL: "url",
        backgroundColor: "red",
        onClick: () => {
          console.log("Custom option clicked for user:", user);
        },
      }),
    ];
    return customOptions;
    }}
    />
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}

    <CometChatConversations
    options={(user: any) => {
    const customOptions: CometChatOption[] = [
      new CometChatOption({
        id: "1",
        title: "Title",
        iconURL: "url",
        backgroundColor: "red",
        onClick: () => {
          console.log("Custom option clicked for user:", user);
        },
      }),
    ];
    return customOptions;
    }}
    />
    ```
  </Tab>
</Tabs>

***

#### LoadingStateView

You can set a custom loader view using `loadingStateView` to match the loading view of your app.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}

    const getLoadingStateView = () =>{
      //your custom loading view
    }

    <CometChatConversations
     loadingStateView={getLoadingStateView()}
    />
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}

    const getLoadingStateView = () =>{
      //your custom loading view
    }

    <CometChatConversations
     loadingStateView={getLoadingStateView()}
    />
    ```
  </Tab>
</Tabs>

**Example**

**Default**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/2SVOPiSpm0QEqRoz/images/f0cf25d6-loading_state_view_default_web_screens-5bba0a12df998af3390c15904d9eda9d.png?fit=max&auto=format&n=2SVOPiSpm0QEqRoz&q=85&s=b6fbbc6f5bc36765a32ed78b8d32d719" width="3600" height="2400" data-path="images/f0cf25d6-loading_state_view_default_web_screens-5bba0a12df998af3390c15904d9eda9d.png" />
</Frame>

**Custom**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/PaxBG9I1yMoeQmt2/images/377d2dd0-loading_state_view_custom_web_screens-647acd3dfdc95e819debe1702195c08c.png?fit=max&auto=format&n=PaxBG9I1yMoeQmt2&q=85&s=510a0b96ff33bb84b6f79e72c01eab6b" width="3600" height="2400" data-path="images/377d2dd0-loading_state_view_custom_web_screens-647acd3dfdc95e819debe1702195c08c.png" />
</Frame>

You can customize the loading state view by modifying the `getLoadingStateView` function as follows:

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    const getLoadingStateView = () => {
      const getLoaderStyle = new LoaderStyle({
        iconTint: "red",
        background: "transparent",
        height: "20px",
        width: "20px",
        border: "none",
        borderRadius: "0",
      });

      return (
        <cometchat-loader
          iconURL="https://cdn.svgator.com/assets/landing-pages/static/css-loader/57579212-0-Loaders-2.svg"
          loaderStyle={JSON.stringify(getLoaderStyle)}
        ></cometchat-loader>
      );
    };
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}
    const getLoadingStateView = (): JSX.Element => {
      const getLoaderStyle: LoaderStyle = new LoaderStyle({
        iconTint: "red",
        background: "transparent",
        height: "20px",
        width: "20px",
        border: "none",
        borderRadius: "0",
      });

      return (
        <cometchat-loader
          iconURL="loading icon"
          loaderStyle={JSON.stringify(getLoaderStyle)}
        ></cometchat-loader>
      );
    };
    ```
  </Tab>
</Tabs>

#### ErrorStateView

You can set a custom `ErrorStateView` to match the error view of your app.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}

    const getErrorStateView = () =>{
      //your custom error state view

    }

    <CometChatConversations
     errorStateView={getErrorStateView()}
    />
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}

    const getErrorStateView = () =>{
      //your custom error state view

    }

    <CometChatConversations
     errorStateView={getErrorStateView()}
    />
    ```
  </Tab>
</Tabs>

**Example**

**Default**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/7emVxEQ5MCxvzC60/images/1f5b6302-error_state_view_default_web_screens-b82941bd3153d9d335cb7e01a5abb606.png?fit=max&auto=format&n=7emVxEQ5MCxvzC60&q=85&s=916b4403350a976ff45e6a55ddd23ee9" width="3600" height="2400" data-path="images/1f5b6302-error_state_view_default_web_screens-b82941bd3153d9d335cb7e01a5abb606.png" />
</Frame>

**Custom**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/fxK75AS6FzDL1Oqo/images/b36817cd-error_state_view_custom_web_screens-2a868ec201241738855651b1c6aaeecf.png?fit=max&auto=format&n=fxK75AS6FzDL1Oqo&q=85&s=396041f613ebefff660ccd4ce7a79382" width="3600" height="2400" data-path="images/b36817cd-error_state_view_custom_web_screens-2a868ec201241738855651b1c6aaeecf.png" />
</Frame>

You can customize the empty state view by modifying the `getErrorStateView` function as follows:

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    const getErrorStateView = () => {
      return (
        <div style={{ height: "100vh", width: "100vw" }}>
          <img
            src="https://cdn0.iconfinder.com/data/icons/shift-interfaces/32/Error-512.png"
            alt="error icon"
            style={{ height: "100px", width: "100px", justifyContent: "center" }}
          ></img>
        </div>
      );
    };
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}
    const getErrorStateView = (): JSX.Element => {
      return (
        <div style={{ height: "100vh", width: "100vw" }}>
          <img
            src="https://cdn0.iconfinder.com/data/icons/shift-interfaces/32/Error-512.png"
            alt="error icon"
            style={{ height: "100px", width: "100px", justifyContent: "center" }}
          ></img>
        </div>
      );
    };
    ```
  </Tab>
</Tabs>

```
```