Skip to main content
Version: v4

Conversations

Overview​

The Conversations is a Component, 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.

Image

Usage​

Integration​

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;

Actions​

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.

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;

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.

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;

3. OnError​

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

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;

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.

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
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;

Events​

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.

const ccConversationDeleted =
        CometChatConversationEvents.ccConversationDeleted.subscribe(
          (conversation: CometChat.Conversation) => {
            //Your Code
          }
        );
ccConversationDeleted?.unsubscribe();

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.

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;

List of properties exposed by ConversationStyle

NameDescription
widthSets the width of the component
heightSets the height of the component
borderSets the border of the component
borderRadiusSets the border radius of the component
backgroundSets all background style properties at once, such as color, image, origin and size, or repeat method. Reference link
boxShadowAdds shadow effects around the component.
titleTextFontSets all the different properties of font for the heading text. Reference link
titleTextColorSets the foreground color of heading text.
loadingIconTintSets the tint or color applied to the loading indicator icon of the component
emptyStateTextFontSets all the different properties of font for the placeholder text. Reference link
emptyStateTextColorSets the foreground color of placeholder text displayed in the component.
errorStateTextFontSets all the different properties of font for the error message. Reference link
errorStateTextColorSets the foreground color of error message displayed in the component.
lastMessageTextFontSets all the different properties of font for the last message. Reference link
lastMessageTextColorSets the foreground color of the last message.
typingIndictorTextFontSets all the different properties of font for the typing indicator text. Reference link
typingIndictorTextColorSets the foreground color of typing indicator text
threadIndicatorTextFontSets all the different properties of font for the thread indicator text. Reference link
threadIndicatorTextColorSets the foreground color of thread indicator text.
onlineStatusColorSets the color of the status indicator representing the user's online status
privateGroupIconBackgroundSets the background of the status indicator representing private groups.
passwordGroupIconBackgroundSets 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.

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;

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.

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;

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.

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;

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.


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

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.

const receiptStyle = new ReceiptStyle({
width: "100%",
height: "100%",
border: "1px solid blue",
readIconTint:"green",
sentIconTint:"red",
deliveredIconTint:"yellow"
});

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.

const backdropStyle = new BackdropStyle({
  width: "100%",
  height: "100%",
  border: "2px solid red",
  background: "blue",
  borderRadius: "20px",
});
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.


const deleteConversationDialogStyle = new ConfirmDialogStyle({
width: "100%",
height: "100%",
background:"blue",
borderRadius:"20px",
});

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.


 const listItemStyle = new ListItemStyle({
    width: "100%",
    height: "100%",
    border: "2px solid red",
  })

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.


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

Below is a list of customizations along with corresponding code snippets

PropertyDescriptionCode
TitleUsed to set custom title in the app bar.title="Your Custom Title"
EmptyState TextUsed to set a custom text response when fetching the conversations has returned an empty listemptyStateText="Your Custom Empty State text"
Selection ModeUsed to set a custom text response when fetching the conversations has returned an empty listselectionMode={SelectionMode.multiple}
PasswordGroup IconUsed to set icon shown in place of status indicator for password protected group passwordGroupIcon="https://icon.svg"
privateGroupIconUsed to set icon shown in place of status indicator for private group privateGroupIcon="https://icon.svg"
SentIconUsed to customize the receipt icon shown in the subtitle of the conversation item if disableReceipt is not true and if the status of the last message in the conversation is sentsentIcon="your custom sent icon"
Delivered IconUsed to customize the receipt icon shown in the subtitle of the conversation item if disableReceipt is not true and if the status of the last message in the conversation is delivereddeliveredIcon="your custom delivered icon"
Read IconUsed to customize the receipt icon shown in the subtitle of the conversation item if disableReceipt is not true and if the status of the last message in the conversation is read readIcon="your custom read icon"
errorIconAsset URL for the error state indicating that an error has occurred when the message was in transit. errorIcon="your custom error icon"
Hide ErrorUsed to hide error on fetching conversationshideError={true}
Hide SeparatorUsed to control visibility of Separators in the list viewhideSeparator={true}
Disable UsersPresenceUsed to control visibility of status indicator shown if user is onlinedisableUsersPresence={true}
Disable ReceiptUsed to disable read receipts shown in the subtitle of the conversation item and also disable the functionality of marking messages as read and delivereddisableReceipt={false}
Disable TypingUsed to toggle visibility of typing indicatordisableTyping={true}
Disable MentionsSets 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}
disableSoundForMessagesWhen set to true, the component will not produce sound for all incoming messages.indicatordisableSoundForMessages={true}
customSoundForMessagesmp3 file asset of your choice.customSoundForMessages="your custom sound for messages"
activeConversation report Used to set the active conversationactiveConversation={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.

const getListItemView = (conversation) => {
  // Your custom list item view
};

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

Example

Default

Image

Custom

Image

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

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>;
  }
};

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

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;

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


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

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

Example

Image

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


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>
);
};

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.

<CometChatConversations
 datePattern={DatePatterns.DateTime}
/>

Example

Default

Image

Custom

Image

SubtitleView​

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

const getSubtitleView = (conversation) =>{
//your custom subtitle view
}
<CometChatConversations
 subtitleView={getSubtitleView}
/>

Example

Default

Image

Custom

Image

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

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>;
  }
};

Options​

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

Structure of CometChatOption​
NameDescription
idUnique identifier for each option
titleHeading text for each option
titleFontSets all the different properties of font for the option text. Reference link
titleColorSets the foreground color of option text
iconURLSets the asset URL of the icon for each option
iconTintSets the tint or color applied to each option
backgroundColorSets the background color of each option
onClickMethod to be invoked when user clicks on each option

Example

Default

Image

Custom

Image

<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;
}}
/>

LoadingStateView​

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


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

<CometChatConversations
 loadingStateView={getLoadingStateView()}
/>

Example

Default

Image

Custom

Image

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

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>
  );
};

ErrorStateView​

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


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

}

<CometChatConversations
 errorStateView={getErrorStateView()}
/>

Example

Default

Image

Custom

Image

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

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>
  );
};