Skip to main content
Version: v4

Contacts

CometChatContacts is a standalone UI component specifically designed to facilitate the display and management of users and groups within chat applications. It streamlines the process of showcasing all app users and available chat groups in a user-friendly interface, making it easier for users to connect and communicate effectively.

Key Features:

  1. User List View: CometChatContacts presents a comprehensive list of all registered users within the application. This list allows users to quickly find and select specific individuals they wish to interact with.
  2. Group List View: The component also offers a dedicated view to showcase all the available chat groups. This simplifies the process of joining or creating new group conversations.
  3. Smart Search Functionality: Users can utilize the powerful search feature to quickly locate specific users or groups by typing names or keywords. This ensures seamless navigation, even in applications with a large user base.
  4. Selection Mode: CometChatContacts supports a selection mode, enabling users to pick multiple contacts or groups simultaneously. This feature proves useful for creating group chats or forwarding messages to multiple recipients.
  5. Customizable Tab Layout: Developers can easily customize the appearance of the tabs, including text colors, indicator color, and background, to match the app's branding and aesthetics.
  6. Selection Limit Control: Developers have the flexibility to set a selection limit, restricting the number of contacts or groups a user can select during the selection mode. This helps maintain messaging policies and optimize user experience.
  7. User-Friendly Close Button: The component provides a convenient close button feature, allowing users to exit the Contacts view and return to their previous screen or chat interface effortlessly.

Properties

Title

Heading text for the component

NameTypeDescription
title report stringHeading text for the component

Tabs

NameTypeDescription
tabsTabItem[]List of tabs to be displayed
usersTabTitle report stringHeading text for the user list
groupsTabTitle report stringHeading text for the group list
tabVisibilityTabsVisibilitySets which tabs needed to be visible or hidden

Selection

Allows user to choose individual or multiple items.

NameTypeDescription
selectionModeSelectionModeAllows user to select one or more users / groups from the contact list
selectionLimitnumberNumber of items user can select from the contact list

Submit

User action to send data to the server

NameTypeDescription
onSubmitButtonClick(users?:CometChat.User[], groups?:CometChat.Group[]) => voidOverride the method that is invoked when user clicks on the submit button
hideSubmitButtonbooleanWhen set to true, hides the submit button
submitButtonTextstringText appearing on the submit button

Callback

Functions that can be invoked by the user in response to a specific event or condition.

NameTypeDescription
onItemClick(user?:CometChat.User, group?:CometChat.Group) => voidOverride the method that is invoked when user clicks on a particular contact
onClose()=>voidOverride the method that is invoked when user clicks on the close icon

Assets

Custom asset URL used for graphical representation

NameTypeDescription
closeIconURLstringAsset URL for the close icon

Style

Styling properties and values of all the components

NameTypeDescription
contactsStyleContactsStyleStyling properties and values of the Contacts component

Configuration

Configurable properties of all the child components

NameTypeDescription
usersConfigurationUsersConfigurationProperties of the users component that are available for customisation via this component.
groupsConfigurationGroupsConfigurationProperties of the groups component that are available for customisation via this component.