Contacts

CometChatContacts is a versatile Angular 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.

How to integrate CometChatContacts

app.module.ts

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CometChatContacts } from '@cometchat/chat-uikit-angular';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    CometChatContacts
  ],
  declarations: [AppComponent],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

app.component.ts

import { Component, OnInit } from '@angular/core';
import {  CometChatThemeService, CometChatUIKit } from '@cometchat/chat-uikit-angular';
import "@cometchat/uikit-elements";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  ngOnInit(): void {

  }

  title = 'CometChat Contacts';
  constructor(private themeService:CometChatThemeService) {
    themeService.theme.palette.setMode("light")
    themeService.theme.palette.setPrimary({ light: "#6851D6", dark: "#6851D6" })
  }

  onLogin(UID?: any) {
    CometChatUIKit.login({ uid: UID }).then(
      (user) => {
        setTimeout(() => {
          window.location.reload();
        }, 1000);
      },
      (error) => {
        console.log("Login failed with exception:", { error });
      }
    );
  }
}

app.component.html

<div class="fullwidth">
  <cometchat-contacts title="title"></cometchat-contacts>
</div>

Properties	Type	Description
title report	String	Sets the title that will be displayed at the top of the CometChatContacts view. This property allows you to customize the title to provide relevant information or context to the users.
closeIconURL	String	Sets the URL for the close icon that will be displayed as the close button in the CometChatContacts view.
contactsStyle	ContactsStyle	Sets various style configurations for the CometChatContacts view, including title appearance, font, color, background, border, tab colors, and more.
usersTabTitle report	String	Sets the title for the Users tab in the CometChatContacts view. This method allows you to customize the title displayed for the Users tab.
tabVisibility	TabsVisibility	Specifies the visibility of tabs within the CometChatContacts component. This configuration allows you to control which tabs are displayed and which are hidden based on your requirements.tab.
groupsTabTitle report	String	Sets the title for the Groups tab in the CometChatContacts view. This method allows you to customize the title displayed for the Groups tab.
onItemClick	(user?: CometChat.User, group?: CometChat.Group) => void	Sets the listener to handle item selection events in the CometChatContacts view. This method allows you to register a callback to be notified when a user or group is selected by the user in the Contacts view.
onClose	void	Registers a listener to handle the close event in the CometChatContacts component. This callback function enables you to define custom actions when the Contacts view is closed, such as resource cleanup or UI updates.
onError	((error: CometChat.CometChatException) => void)	Sets a listener to handle errors within the CometChatContacts component. This callback function, accepting a parameter of type CometChat.CometChatException, allows for custom error-handling logic. If no listener is provided, it can be set to null.
usersConfiguration	UsersConfiguration	Sets the configuration for the Users tab in the CometChatContacts view. This method allows you to customize various aspects of the Users tab, such as search functionality, appearance and more. By passing a valid UsersConfiguration object, you can control how the Users tab behaves and appears to the users.
groupsConfiguration	GroupsConfiguration	Sets the configuration for the Groups tab in the CometChatContacts view. This method allows you to customize various aspects of the Groups tab, such as search functionality, appearance and more. By passing a valid GroupsConfiguration object, you can control how the Groups tab behaves and appears to the users.

ContactsStyle

You can set the contactsStyle to the CometChatContacts Component to customize the styling.

List of properties exposed by ContactsStyle:

Name	Type	Description
width	string	Sets the width of the CometChatContacts component.
height	string	Sets the height of the CometChatContacts component.
border	string	Sets the border style of the CometChatContacts component.
borderRadius	string	Sets the border radius of the CometChatContacts component.
background	string	Sets the background color of the CometChatContacts component.
titleTextFont	string	Sets the font for the title text of the CometChatContacts component.
titleTextColor	string	Sets the text color for the title text of the CometChatContacts component.
closeIconTint	string	Sets the tint color for the close icon of the CometChatContacts component.
tabWidth	string	Sets the width of the tabs within the CometChatContacts component.
tabHeight	string	Sets the height of the tabs within the CometChatContacts component.
tabBorder	string	Sets the border color of the tabs within the CometChatContacts component.
tabBorderRadius	string	Sets the border radius of the tabs within the CometChatContacts component.
tabBackground	string	Sets the background color of the tabs within the CometChatContacts component.
tabTitleTextFont	string	Sets the font for the title text of the tabs within the CometChatContacts component.
tabTitleTextColor	string	Sets the text color for the title text of the tabs within the CometChatContacts component.
activeTabTitleTextColor	string	Sets the text color for the active title text of the tabs within the CometChatContacts component.
activeTabTitleTextFont	string	Sets the font for the active title text of the tabs within the CometChatContacts component.
activeTabBackground	string	Sets the background color for the active tabs within the CometChatContacts component.
activeTabBorder	string	Sets the border color for the active tabs within the CometChatContacts component.
selectionIconTint	string	Sets the tint color for the selection icon within the CometChatContacts component.
errorStateTextFont	string	Sets the font for displaying error messages within the CometChatContacts component.
errorStateTextColor	string	Sets the text color for displaying error messages within the CometChatContacts component.
boxShadow	string	Sets the shadow appearance for the CometChatContacts component.
submitButtonBackground	string	Sets the background color of the submit button within the CometChatContacts component.
submitButtonTextColor	string	Sets the text color of the submit button within the CometChatContacts component.
submitButtonTextFont	string	Sets the font for the submit button text within the CometChatContacts component.
padding	string	Sets the padding for the CometChatContacts component.

JavaScript/TypeScript

 contactsStyle:ConversationsStyle = new ContactsStyle({
    width: "100vw",
    height: "100vh",
    border: "1px solid #ccc",
    borderRadius: "8px",
    background: "#f0f0f0",
    titleTextFont: "14px Arial, sans-serif",
    titleTextColor: "#333",
    closeIconTint: "blue",
})