Message List - CometChat Docs

Overview

MessageList is a Composite Component that displays a list of messages and effectively manages real-time operations. It includes various types of messages such as Text Messages, Media Messages, Stickers, and more. MessageList is primarily a list of the base component MessageBubble. The MessageBubble Component is utilized to create different types of chat bubbles depending on the message type.

Usage

Integration

The following code snippet illustrates how you can directly incorporate the MessageList component into your Application.

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

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

To fetch messages for a specific entity, you need to supplement it with User or Group Object.

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

onThreadRepliesClick is triggered when you click on the threaded message bubble. The onThreadRepliesClick action doesn’t have a predefined behavior. You can override this action using the following code snippet.

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 {
    CometChat.getUser("uid").then((user:CometChat.User)=>{
      this.userObject=user;
    });
  }

  public userObject!: CometChat.User;

  constructor(private themeService:CometChatThemeService) {
    themeService.theme.palette.setMode("light")
    themeService.theme.palette.setPrimary({ light: "#6851D6", dark: "#6851D6" })
  }

  public handleOnThreadRepliesClick = ()=>{
    console.log("your custom on thread replies click");
  };

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

2. onError

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

import { CometChat } from '@cometchat/chat-sdk-javascript';
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 {
    CometChat.getUser("uid").then((user:CometChat.User)=>{
      this.userObject=user;
    });
  }

  public userObject!: CometChat.User;

  constructor(private themeService:CometChatThemeService) {
    themeService.theme.palette.setMode("light")
    themeService.theme.palette.setPrimary({ light: "#6851D6", dark: "#6851D6" })
  }

  public handleOnError = (error: CometChat.CometChatException) => {
    console.log("your custom on error action", error);
  };

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

Filters

You can adjust the MessagesRequestBuilder in the MessageList Component to customize your message list. Numerous options are available to alter the builder to meet your specific needs. For additional details on MessagesRequestBuilder, please visit MessagesRequestBuilder. In the example below, we are applying a filter to the messages based on a search substring and for a specific user. This means that only messages that contain the search term and are associated with the specified user will be displayed

import { CometChat } from '@cometchat/chat-sdk-javascript';
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 {
    CometChat.getUser("uid").then((user:CometChat.User)=>{
      this.userObject=user;
    });
  }

  public userObject!: CometChat.User;

  constructor(private themeService:CometChatThemeService) {
    themeService.theme.palette.setMode("light")
    themeService.theme.palette.setPrimary({ light: "#6851D6", dark: "#6851D6" })
  }

  messagesRequestBuilder = new CometChat.MessagesRequestBuilder().setLimit(5);

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

The following parameters in messageRequestBuilder will always be altered inside the message list

UID
GUID

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. The list of events emitted by the Message List component is as follows.

Event	Description
ccOpenChat	this event alerts the listeners if the logged-in user has opened a user or a group chat
ccMessageEdited	Triggers whenever a loggedIn user edits any message from the list of messages .it will have three states such as: inProgress, success and error
ccMessageDeleted	Triggers whenever a loggedIn user deletes any message from the list of messages
ccActiveChatChanged	This event is triggered when the user navigates to a particular chat window.
ccMessageRead	Triggers whenever a loggedIn user reads any message.
ccLiveReaction	Triggers whenever a loggedIn clicks on live reaction

Adding CometChatMessageEvents Listener’s

import {CometChatMessageEvents} from "@cometchat/chat-uikit-angular";

this.ccOpenChat = CometChatMessageEvents.ccOpenChat.subscribe(
 () => {
        // Your Code
  }
);

this.ccMessageEdited = CometChatMessageEvents.ccMessageEdited.subscribe(
  () => {
        // Your Code
  }
);

this.ccMessageDeleted = CometChatMessageEvents.ccMessageDeleted.subscribe(
  () => {
        // Your Code
  }
);

this.ccActiveChatChanged = CometChatMessageEvents.ccActiveChatChanged.subscribe(
  () => {
        // Your Code
  }
);

this.ccMessageRead = CometChatMessageEvents.ccMessageRead.subscribe(
  () => {
        // Your Code
  }
);

this.ccLiveReaction = CometChatMessageEvents.ccLiveReaction.subscribe(
  () => {
        // Your Code
  }
);

Removing CometChatMessageEvents Listener’s

this.ccMessageEdited.unsubscribe();
this.ccActiveChatChanged.unsubscribe();

Customization

To fit your app’s design requirements, you can customize the appearance of the Message List component. We provide exposed properties 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. MessageList Style

You can set the MessageListStyle to the MessageList Component Component to customize the styling.

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

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

  ngOnInit(): void {
    CometChat.getUser("uid").then((user:CometChat.User)=>{
      this.userObject=user;
    });
  }

  public userObject!: CometChat.User;

  constructor(private themeService:CometChatThemeService) {
    themeService.theme.palette.setMode("light")
    themeService.theme.palette.setPrimary({ light: "#6851D6", dark: "#6851D6" })
  }

  messageListStyle = new MessageListStyle({
    background: "#fdf2ff",
    border: "1px solid #d608ff",
    borderRadius: "20px",
    loadingIconTint: "red",
    nameTextColor: "pink",
    threadReplyTextColor: "green"
  });

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

List of properties exposed by MessageListStyle

Property	Description	Code
border	Used to set border	`border?: string,`
borderRadius	Used to set border radius	`borderRadius?: string;`
background	Used to set background colour	`background?: string;`
height	Used to set height	`height?: string;`
width	Used to set width	`width?: string;`
loadingIconTint	used to set loading icon tint	`loadingIconTint?: string;`
emptyStateTextFont	used to set empty state text font	`emptyStateTextFont?: string;`
errorStateTextFont	used to set error state text font	`errorStateTextFont?: string;`
emptyStateTextColor	used to set empty state text color	`emptyStateTextColor?: string;`
errorStateTextColor	used to set error state text color	`errorStateTextColor?: string;`
nameTextColor	used to set sender/receiver name text color on a message bubble.	`nameTextColor?: string;`
nameTextFont	used to set sender/receiver name text font on a message bubble	`nameTextFont?: string;`
TimestampTextColor	used to set time stamp text color	`TimestampTextColor?: string;`
TimestampTextFont	used to set time stamp text font	`TimestampTextFont?: string;`
threadReplyTextColor	used to set thread reply text color	`threadReplyTextColor?: string;`
threadReplyTextFont	used to set thread reply text font	`threadReplyTextFont?: string;`
threadReplyIconTint	used to set thread reply icon tint	`threadReplyIconTint?: string;`
threadReplyUnreadTextColor	used to set thread reply unread text color	`threadReplyUnreadTextColor?: string;`
threadReplyUnreadTextFont	used to set thread reply unread text font	`threadReplyUnreadTextFont?: string;`
threadReplyUnreadBackground	used to set thread reply unread background	`threadReplyUnreadBackground?: string;`

2. Avatar Style

To apply customized styles to the Avatar component in the Message List Component, you can use the following code snippet. For further insights on Avatar Styles refer

import { CometChat } from '@cometchat/chat-sdk-javascript';
import { Component, OnInit } from '@angular/core';
import {  CometChatThemeService, CometChatUIKit, AvatarStyle } 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 {
    CometChat.getUser("uid").then((user:CometChat.User)=>{
      this.userObject=user;
    });
  }

  public userObject!: CometChat.User;

  constructor(private themeService:CometChatThemeService) {
    themeService.theme.palette.setMode("light")
    themeService.theme.palette.setPrimary({ light: "#6851D6", dark: "#6851D6" })
  }

  avatarStyle = new AvatarStyle({
    backgroundColor:"#cdc2ff",
    border:"2px solid #6745ff",
    borderRadius:"10px",
    outerViewBorderColor:"#ca45ff",
    outerViewBorderRadius:"5px",
    nameTextColor:"#4554ff"
  });

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

3. DateSeparator Style

To apply customized styles to the DateSeparator in the Message list Component, you can use the following code snippet.

import { CometChat } from '@cometchat/chat-sdk-javascript';
import { Component, OnInit } from '@angular/core';
import {  CometChatThemeService, CometChatUIKit, DateStyle } 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 {
    CometChat.getUser("uid").then((user:CometChat.User)=>{
      this.userObject=user;
    });
  }

  public userObject!: CometChat.User;

  constructor(private themeService:CometChatThemeService) {
    themeService.theme.palette.setMode("light")
    themeService.theme.palette.setPrimary({ light: "#6851D6", dark: "#6851D6" })
  }

  dateSeparatorStyle = new DateStyle({
    background:'red',
    border:'2px solid green',
    borderRadius:'15px'
  });

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

4. EmojiKeyboard Style

To apply customized styles to the EmojiKeyBoard in the Message list Component, you can use the following code snippet.

import { CometChat } from '@cometchat/chat-sdk-javascript';
import { Component, OnInit } from '@angular/core';
import {  CometChatThemeService, CometChatUIKit, EmojiKeyboardStyle } 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 {
    CometChat.getUser("uid").then((user:CometChat.User)=>{
      this.userObject=user;
    });
  }

  public userObject!: CometChat.User;

  constructor(private themeService:CometChatThemeService) {
    themeService.theme.palette.setMode("light")
    themeService.theme.palette.setPrimary({ light: "#6851D6", dark: "#6851D6" })
  }

  emojiKeyboardStyle = new EmojiKeyboardStyle({
    background:'red',
    border:'2px solid green',
    borderRadius:'15px',
    activeIconTint:'yellow',
    textColor:'#8830f2'
  });

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

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.

import { CometChat } from '@cometchat/chat-sdk-javascript';
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 {
    CometChat.getUser("uid").then((user:CometChat.User)=>{
      this.userObject=user;
    });
  }

  public userObject!: CometChat.User;

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

Below is a list of customizations along with corresponding code snippets

Property	Description	Code
user	Used to pass user object of which header specific details will be shown	`[user]="userObject"`
group	Used to pass group object of which header specific details will be shown	`[group]="groupObject"`
alignment	used to set the alignmet of messages in CometChatMessageList. It can be either left or standard	`MessageListAlignment.left`
emptyStateText	used to set text which will be visible when no messages are available	`emptyStateText="Your Custom Empty State text"`
errorStateText	used to set text which will be visible when error in messages retrieval	`errorStateText="Your Custom Error State text"`
hideError	used to toggle visibility of error in MessageList	`[hideError]="true"`
disableSoundForMessages	used to enable/disable sound for incoming/outgoing messages , default false	`[disableSoundForMessages]="true"`
customSoundForMessages	used to set custom sound for outgoing message	`customSoundForMessages="your custom sound for messages"`
readIcon	used to set custom read icon visible at read receipt	`readIcon="your custom read icon"`
deliveredIcon	used to set custom delivered icon visible at read receipt	`deliveredIcon="your custom delivered icon"`
sentIcon	used to set custom sent icon visible at read receipt	`sentIcon="your custom sent icon "`
waitIcon	used to set custom wait icon visible at read receipt	`waitIcon="your custom wait icon"`
showAvatar	used to toggle visibility for avatar	`[showAvatar]="true"`
hideDateSeparator	used to toggle visibility of date separator	`[hideDateSeparator]="true"`
timestampAlignment	used to set receipt’s time stamp alignment .It can be either top or bottom	`timestampAlignment=TimestampAlignment.top`
newMessageIndicatorText	used to set new message indicator text	`newMessageIndicatorText="Custom Indicator text"`
scrollToBottomOnNewMessage	should scroll to bottom on new message? , by default false	`[scrollToBottomOnNewMessages]="true"`
hideReceipt	Used to control the visibility of read receipts without affecting the functionality of marking messages as read and delivered.	`[hideReceipt]="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"`
Disable Reactions	Sets A boolean value indicating whether to disable reactions.Pass `true` to disable reactions, `false` to enable them.	`[disableReactions]="true"`

Advance

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.

Templates

CometChatMessageTemplate is a pre-defined structure for creating message views that can be used as a starting point or blueprint for creating message views often known as message bubbles. For more information, you can refer to CometChatMessageTemplate. You can set message Templates to MessageList by using the following code snippet

DateSeparatorPattern

You can customize the date pattern of the message list separator using the DateSeparatorPattern prop. Choose from predefined options like time, DayDate, DayDateTime, or DateTime. Example Default

Custom

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

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

  ngOnInit(): void {
    CometChat.getUser("uid").then((user:CometChat.User)=>{
      this.userObject=user;
    });
  }

  public userObject!: CometChat.User;

  constructor(private themeService:CometChatThemeService) {
    themeService.theme.palette.setMode("light")
    themeService.theme.palette.setPrimary({ light: "#6851D6", dark: "#6851D6" })
  }

  DateSeparatorPattern = DatePatterns.DateTime;

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

DatePattern

You can modify the date pattern to your requirement using DatePattern. Choose from predefined options like time, DayDate, DayDateTime, or DateTime. 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 in the following format. 1. If timestamp < 24hrs display “Today” 2. If timestamp < 48hrs display “Yesterday” 3. If timestamp < 7days display “EEE” i.e , SUNDAY 4. else display “d MMM, yyyy”
DayDateTime	Date format displayed in the following format. 1. If timestamp < 24hrs display “hh:mm a” 2. If timestamp < 48hrs display “Yesterday” 3. If timestamp < 7days display “EEE” i.e SUNDAY 4. else display “dd MM yyyy”

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

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

  ngOnInit(): void {
    CometChat.getUser("uid").then((user:CometChat.User)=>{
      this.userObject=user;
    });
  }

  public userObject!: CometChat.User;

  constructor(private themeService:CometChatThemeService) {
    themeService.theme.palette.setMode("light")
    themeService.theme.palette.setPrimary({ light: "#6851D6", dark: "#6851D6" })
  }

  DatePattern = DatePatterns.DateTime;

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

Headerview

You can set custom headerView to the Message List component using the following method. Example

import { CometChat } from '@cometchat/chat-sdk-javascript';
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 {
    CometChat.getUser("uid").then((user:CometChat.User)=>{
      this.userObject=user;
    });
  }

  public userObject!: CometChat.User;

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

FooterView

You can set custom footerview to the Message List component using the following method. Example

import { CometChat } from '@cometchat/chat-sdk-javascript';
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 {
    CometChat.getUser("uid").then((user:CometChat.User)=>{
      this.userObject=user;
    });
  }

  public userObject!: CometChat.User;

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

ErrorStateView

You can set a custom errorStateView to match the error view of your app. Example Default

Custom

import { CometChat } from '@cometchat/chat-sdk-javascript';
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 {
    CometChat.getUser("uid").then((user:CometChat.User)=>{
      this.userObject=user;
    });
  }

  public userObject!: CometChat.User;

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

EmptyStateView

The emptyStateView method provides the ability to set a custom empty state view in your app. An empty state view is displayed when there are no messages for a particular user. Example

import { CometChat } from '@cometchat/chat-sdk-javascript';
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 {
    CometChat.getUser("uid").then((user:CometChat.User)=>{
      this.userObject=user;
    });
  }

  public userObject!: CometChat.User;

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

LoadingStateView

The loadingStateView property allows you to set a custom loading view in your app. This feature enables you to maintain a consistent look and feel throughout your application, Example Default

Custom

import { CometChat } from '@cometchat/chat-sdk-javascript';
import { Component, OnInit } from '@angular/core';
import {  CometChatThemeService, CometChatUIKit, LoaderStyle } 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 {
    CometChat.getUser("uid").then((user:CometChat.User)=>{
      this.userObject=user;
    });
  }

  public userObject!: CometChat.User;

  constructor(private themeService:CometChatThemeService) {
    themeService.theme.palette.setMode("light")
    themeService.theme.palette.setPrimary({ light: "#6851D6", dark: "#6851D6" })
  }

  getLoaderStyle: LoaderStyle = new LoaderStyle({
    iconTint: "red",
    background: "transparent",
    height: "20px",
    width: "20px",
    border: "none",
    borderRadius: "0",
  });

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

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 { CometChat } from '@cometchat/chat-sdk-javascript';
import { Component, OnInit } from '@angular/core';
import {  CometChatThemeService, CometChatUIKit } from '@cometchat/chat-uikit-angular';
import "@cometchat/uikit-elements";
import HashTagTextFormatter from '../HashTagTextFormatter';


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

  ngOnInit(): void {
    CometChat.getUser("uid").then((user:CometChat.User)=>{
      this.userObject=user;
    });
  }

  public userObject!: CometChat.User;
  public textFormatters = [new HashTagTextFormatter];

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

Configuration

Configurations offer the ability to customize the properties of each component within a Composite Component.

MessageInformation

From the MessageList, you can navigate to the MesssageInformation component as shown in the image.

If you wish to modify the properties of the MesssageInformation Component, you can use the MessageInformationConfiguration object.

import { CometChat } from '@cometchat/chat-sdk-javascript';
import { Component, OnInit } from '@angular/core';
import {  CometChatThemeService, CometChatUIKit } from '@cometchat/chat-uikit-angular';
import { MessageInformationConfiguration, MessageInformationStyle } from '@cometchat/uikit-shared';

import "@cometchat/uikit-elements";

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

  ngOnInit(): void {
    CometChat.getUser("uid").then((user:CometChat.User)=>{
      this.userObject=user;
    });
  }

  public userObject!: CometChat.User;

  constructor(private themeService:CometChatThemeService) {
    themeService.theme.palette.setMode("light")
    themeService.theme.palette.setPrimary({ light: "#6851D6", dark: "#6851D6" })
  }

  public messageInformationConfiguration = new MessageInformationConfiguration({
    messageInformationStyle: new MessageInformationStyle({
      background: "#f7f2fa",
      border: "2px solid #d895fc",
      borderRadius: "20px",
      captionTextColor: "#8629e3",
      titleTextColor: "#908deb",
    })
  });

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

The MessageInformationConfiguration indeed provides access to all the Action, Filters, Styles, Functionality, and Advanced properties of the MesssageInformation component. Please note that the Properties marked with the 🛑 symbol are not accessible within the Configuration Object. Example Default

Custom

In the above example, we are styling a few properties of the MesssageInformation component using MessageInformationConfiguration.

Reaction

If you wish to modify the properties of the Reaction Component, you can use the reactionsConfiguration object.

import { CometChat } from '@cometchat/chat-sdk-javascript';
import { Component, OnInit } from '@angular/core';
import {  CometChatThemeService, CometChatUIKit } from '@cometchat/chat-uikit-angular';
import { ReactionsConfiguration, ReactionsStyle } from '@cometchat/uikit-shared';

import "@cometchat/uikit-elements";

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

  ngOnInit(): void {
    CometChat.getUser("uid").then((user:CometChat.User)=>{
      this.userObject=user;
    });
  }

  public userObject!: CometChat.User;

  constructor(private themeService:CometChatThemeService) {
    themeService.theme.palette.setMode("light")
    themeService.theme.palette.setPrimary({ light: "#6851D6", dark: "#6851D6" })
  }

  public reactionsConfiguration = new ReactionsConfiguration({
    reactionsStyle: new ReactionsStyle({
      border:'2px solid #8742f5',
      activeReactionBackground:'#b88cff',
      background:'#7b34ed',
      baseReactionBackground:'#ebe3ff',
      borderRadius:'20px'
    })
    //properties of reactions
  });

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

​Overview

​Usage

​Integration

​Actions

1. onThreadRepliesClick

2. onError

​Filters

​Events

​Customization

​Style

1. MessageList Style

2. Avatar Style

3. DateSeparator Style

4. EmojiKeyboard Style

​Functionality

​Advance

​Templates

​DateSeparatorPattern

​DatePattern

​Headerview

​FooterView

​ErrorStateView

​EmptyStateView

​LoadingStateView

​TextFormatters

​Configuration

​MessageInformation

​Reaction

Overview

Usage

Integration

Actions

Filters

Events

Customization

Style

Functionality

Advance

Templates

DateSeparatorPattern

DatePattern

Headerview

FooterView

ErrorStateView

EmptyStateView

LoadingStateView

TextFormatters

Configuration

MessageInformation

Reaction