Conversations
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:
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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| Name | Type | Description |
|---|---|---|
| title | string | Heading text for the component |
Tabs
| Name | Type | Description |
|---|---|---|
| tabs | TabItem[] | List of tabs to be displayed |
| usersTabTitle | string | Heading text for the user list |
| groupsTabTitle | string | Heading text for the group list |
| tabVisibility | TabsVisibility | Sets which tabs needed to be visible or hidden |
Selection
Allows user to choose individual or multiple items.| Name | Type | Description |
|---|---|---|
| selectionMode | SelectionMode | Allows user to select one or more users / groups from the contact list |
| selectionLimit | number | Number of items user can select from the contact list |
Submit
User action to send data to the server| Name | Type | Description |
|---|---|---|
| onSubmitButtonClick | (users?:CometChat.User[], groups?:CometChat.Group[]) => void | Override the method that is invoked when user clicks on the submit button |
| hideSubmitButton | boolean | When set to true, hides the submit button |
| submitButtonText | string | Text appearing on the submit button |
Callback
Functions that can be invoked by the user in response to a specific event or condition.| Name | Type | Description |
|---|---|---|
| onItemClick | (user?:CometChat.User, group?:CometChat.Group) => void | Override the method that is invoked when user clicks on a particular contact |
| onClose | ()=>void | Override the method that is invoked when user clicks on the close icon |
Assets
Custom asset URL used for graphical representation| Name | Type | Description |
|---|---|---|
| closeIconURL | string | Asset URL for the close icon |
Style
Styling properties and values of all the components| Name | Type | Description |
|---|---|---|
| contactsStyle | ContactsStyle | Styling properties and values of the Contacts component |
Configuration
Configurable properties of all the child components| Name | Type | Description |
|---|---|---|
| usersConfiguration | UsersConfiguration | Properties of the users component that are available for customisation via this component. |
| groupsConfiguration | GroupsConfiguration | Properties of the groups component that are available for customisation via this component. |