Skip to main content
Version: v4

Message Information

The MessageInformation is a Component designed to display message-related information, such as delivery and read receipts. It serves as an integral part of the CometChat UI UI Kit, extending the List Item class, which provides the underlying infrastructure for CometChat UI components. With its rich set of methods and properties, developers can easily customize and tailor the appearance and behavior of the message information view to suit the specific requirements of their application.

Image

MessageInformation is comprised of the following Base Components:

Base ComponentsDescription
List ItemThis renders common components used across Conversations, Groups & Users.

Usage

Integration

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

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

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

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

The onClose event is typically triggered when the close button is clicked and it carries a default action. However, with the following code snippet, you can effortlessly override this default operation.

import { CometChat } from '@cometchat/chat-sdk-javascript';
import { Component, OnInit } from '@angular/core';
import { CometChatThemeService, CometChatUIKit, ListItemStyle } 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.getMessageDetails(messageId).then((message) => {
if (message instanceof CometChat.TextMessage) {
this.messageObject = message;
this.textMessageContent = this.messageObject.getText();
}
}).catch((error) => {
console.error('Error fetching message details:', error);
this.textMessageContent = '';
});
}

public messageObject!: CometChat.TextMessage;
public textMessageContent: string | undefined;
public handleOnClose = () => {
console.log("Your custom on close actions");
}
constructor(private themeService:CometChatThemeService) {
themeService.theme.palette.setMode("light")
themeService.theme.palette.setPrimary({ light: "#6851D6", dark: "#6851D6" })
}
listItemStyle: ListItemStyle = new ListItemStyle({
background: "transparent",
padding:"5px",
border:"1px solid #e9b8f5",
titleColor:"#8830f2",
borderRadius:"20px",
width:"100% !important"
});

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 MessageInformation component.

import { CometChat } from '@cometchat/chat-sdk-javascript';
import { Component, OnInit } from '@angular/core';
import { CometChatThemeService, CometChatUIKit, ListItemStyle } 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.getMessageDetails(messageId).then((message) => {
if (message instanceof CometChat.TextMessage) {
this.messageObject = message;
this.textMessageContent = this.messageObject.getText();
}
}).catch((error) => {
console.error('Error fetching message details:', error);
this.textMessageContent = '';
});
}

public messageObject!: CometChat.TextMessage;
public textMessageContent: string | undefined;
public handleOnError = (error: CometChat.CometChatException) => {
console.log("your custom on error action", error);
};
constructor(private themeService:CometChatThemeService) {
themeService.theme.palette.setMode("light")
themeService.theme.palette.setPrimary({ light: "#6851D6", dark: "#6851D6" })
}
listItemStyle: ListItemStyle = new ListItemStyle({
background: "transparent",
padding:"5px",
border:"1px solid #e9b8f5",
titleColor:"#8830f2",
borderRadius:"20px",
width:"100% !important"
});

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

Filters

MessageInformation component does not have any available filters.


Events

MessageInformation component does not have any available events.


Customization

To fit your app's design requirements, you can customize the appearance of the MessageInformation 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. MessageInformationStyle

To modify the styling, you can apply the MessageInformationStyle to the MessageInformation Component using the messageInformationStyle property.

import { CometChat } from '@cometchat/chat-sdk-javascript';
import { Component, OnInit } from '@angular/core';
import { CometChatThemeService, CometChatUIKit, ListItemStyle } from '@cometchat/chat-uikit-angular';
import { 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.getMessageDetails(messageId).then((message) => {
if (message instanceof CometChat.TextMessage) {
this.messageObject = message;
this.textMessageContent = this.messageObject.getText();
}
}).catch((error) => {
console.error('Error fetching message details:', error);
this.textMessageContent = '';
});
}

public messageObject!: CometChat.TextMessage;
public textMessageContent: string | undefined;
constructor(private themeService:CometChatThemeService) {
themeService.theme.palette.setMode("light")
themeService.theme.palette.setPrimary({ light: "#6851D6", dark: "#6851D6" })
}
listItemStyle: ListItemStyle = new ListItemStyle({
background: "transparent",
padding:"5px",
border:"1px solid #e9b8f5",
titleColor:"#8830f2",
borderRadius:"20px",
width:"100% !important"
});
messageInformationStyle = new MessageInformationStyle({
background:'#ffffff',
border:'2px solid #faf5ff',
borderRadius:'10px',
height:'500px',
width:'400px',
captionTextColor:"#630bba"
});

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

The following properties are exposed by MessageInformationStyle:

PropertyDescriptionCode
titleTextFontSets the font for the titletitleTextFont?: string;
titleTextColorSets the font for the titletitleTextColor?: string;
subtitleTextColorSets the text color for the subtitlesubtitleTextColor?: string;
subtitleTextFontSets the text font for the subtitlesubtitleTextFont?: string;
emptyStateTextColorSets the color for the empty state textemptyStateTextColor?: string;
emptyStateTextFontSets the font for the empty state textemptyStateTextFont?: string;
errorStateTextFontSets the text font for the error state texterrorStateTextFont?: string;
errorStateTextColorSets the text font for the error state texterrorStateTextColor
captionTextFontSets the text font for the captioncaptionTextFont?: string;
captionTextColorSets the text color for the captioncaptionTextColor?: string;
sendIconTintSets the icon color for the send IconsendIconTint?: string;
loadingIconTintSets the icon color for the loading IconloadingIconTint?: string;
readIconTintSets the icon color for the read IconreadIconTint?: string;
deliveredIconTintSets the icon color for the delivered IcondeliveredIconTint?: string;
dividerTintSets the icon color for the separatordividerTint?: string;
borderUsed to set borderborder?: string,
borderRadiusUsed to set border radiusborderRadius?: string;
backgroundUsed to set background colourbackground?: string;
heightUsed to set heightheight?: string;
widthUsed to set widthwidth?: string;

2. ListItemStyle

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

import { CometChat } from '@cometchat/chat-sdk-javascript';
import { Component, OnInit } from '@angular/core';
import { CometChatThemeService, CometChatUIKit, ListItemStyle } 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.getMessageDetails(messageId).then((message) => {
if (message instanceof CometChat.TextMessage) {
this.messageObject = message;
this.textMessageContent = this.messageObject.getText();
}
}).catch((error) => {
console.error('Error fetching message details:', error);
this.textMessageContent = '';
});
}

public messageObject!: CometChat.TextMessage;
public textMessageContent: string | undefined;
constructor(private themeService:CometChatThemeService) {
themeService.theme.palette.setMode("light")
themeService.theme.palette.setPrimary({ light: "#6851D6", dark: "#6851D6" })
}
listItemStyle: ListItemStyle = new ListItemStyle({
background: "transparent",
padding:"5px",
border:"1px solid #e9b8f5",
titleColor:"#8830f2",
borderRadius:"20px",
width:"100% !important"
});

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, ListItemStyle } 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.getMessageDetails(messageId).then((message) => {
if (message instanceof CometChat.TextMessage) {
this.messageObject = message;
this.textMessageContent = this.messageObject.getText();
}
}).catch((error) => {
console.error('Error fetching message details:', error);
this.textMessageContent = '';
});
}

public messageObject!: CometChat.TextMessage;
public textMessageContent: string | undefined;
title='Custom Title';
CloseICon='your custom close icon';

constructor(private themeService:CometChatThemeService) {
themeService.theme.palette.setMode("light")
themeService.theme.palette.setPrimary({ light: "#6851D6", dark: "#6851D6" })
}
listItemStyle: ListItemStyle = new ListItemStyle({
background: "transparent",
padding:"5px",
border:"1px solid #e9b8f5",
titleColor:"#8830f2",
borderRadius:"20px",
width:"100% !important"
});

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

PropertyDescriptionCode
messageSets the message to be displayed in the message information view.[message]="messageObject"
errorStateViewused to show the error state view in case of an error occurred[errorStateView]="getErrorStateView"
deliveredIconIt is used to pass user defined image in to the MessageReceipt, to change the icon When Message is delivered.deliveredIcon='your custom delivered icon'
readIconIt is used to pass user defined image in to the MessageReceipt, to change the icon When Message is read.readIcon='your custom read icon'
receiptDatePatternused to set the date pattern for delivered and read date time[receiptDatePattern]="getReceiptDatePattern"
emptyStateTextused to set a custom text response when fetching the users has returned an empty listemptyStateText='custom empty state text'

How to integrate CometChatMesssageInformation ?

Since CometChatMesssageInformation is a component, it can be added directly to your application.

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

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

Properties

propertytypeDescription
templateCometChatMessageTemplateSets a custom message template for the message information view.
messageBaseMessageSets the message to be displayed in the message information view.
titleStringSets the title that will be displayed at the top of the message information.
listItemViewTemplateRef<any>Sets a custom list item view for individual entries in the message information view.
subtitleViewTemplateRef<any>Sets a custom subtitle view for individual entries in the message information view.
receiptDatePattern((timestamp: number) => string)Sets a custom date pattern for formatting receipt dates in the message information view.
messageInformationStyleMessageInformationStyleSets the overall style and appearance for the message information view.
readIconstringSets the custom icon resource for read receipts in the message information view.
deliveredIconstringSets the custom icon resource for delivered receipts in the message information view.
listItemStyleListItemStyleSets the style for list items in the message information view.
onError((error: CometChatException) => void)Sets the error callback to handle any errors that may occur within the message information view.
emptyStateTextStringSets the text to be displayed in the empty state view of the message information view.
errorStateTextStringSets the error message to be displayed in the error state view of the message information view.
emptyStateViewTemplateRef<any>Sets the custom layout resource for the empty state view of the message information view.
errorStateViewTemplateRef<any>Sets the custom layout resource for the error state view of the message information view.
loadingStateViewTemplateRef<any>Sets the custom layout resource for the loading state view of the message information view.