Overview
ThreadedMessages is a Composite Component that displays all replies made to a particular message in a conversation. By default, the parent message will be displayed at the top, the message composer will be at the bottom and between them a message list will contain all replies.
Component | Description |
---|---|
MessageList | CometChatMessageList is a component that displays a list of Messages |
MessageComposer | CometChatMessageComposer is a component that helps in writing and editing of messages and also sending attachments |
Usage
Integration
The following code snippet illustrates how you can directly incorporate the ThreadedMessages component into your Application.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. Example In this example, we are overriding theonClose
of the ThreadedMessage Component.
Filters
Filters allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK. ThreadedMessages does not have its own Filters. However, you can filter the messages list in ThreadedMessages Component using MessageListConfiguration. Example In this example, we are filtering messages based on the ParentMessageID and searching for messages that contain the keyword “hi”.Events
Events are emitted by aComponent
. 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 ThreadedMessages Component does not emit any events of its own.
Customization
To fit your app’s design requirements, you can customize the appearance of the conversation 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. threadedMessagesStyle
To modify the styling, you can apply the ThreadedMessageStyle to the ThreadedMessage Component using thethreadedMessagesStyle
property.
ThreadedMessagesStyle
:
Methods | Description | Type |
---|---|---|
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; |
titleFont | used to customise the font of the title in the app bar | titleFont?: string; |
titleColor | used to customise the color of the title in the app bar | titleColor?: string; |
closeIconTint | used to set the color of the close icon in the app bar | closeIconTint?: string; |
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.Property | Description | Code |
---|---|---|
parentMessage | Used to to set the message for which the replies need to be fetched | [parentMessage]="messageObject" |
Hide MessageComposer | Used to toggle visibility for CometChatMessageComposer, default false | [hideMessageComposer]="true" |
title | Used to set title in the app bar | [title]="title" |
closeIconURL | Used to set the icon to exit the widget | closeIconURL="your custom close icon url" |
Advanced
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.BubbleView
By usingbubbleView
, You can set parent message bubble view inside ThreadedMessage Component.
Example
Default


bubbleView
and apply custom styles on it.
MessageActionView
By utilizing themessageActionView
method, you can assign custom actions to the parent message bubble view inside the ThreadedMessage Component.
Example

MessageListView
You can set your custom message list view using themessageListView
property. But keep in mind, by using this you will override the default message ListView functionality.
Example
Default


MessageComposerView
You can set your custom Message Composer view using themessageComposerView
property. But keep in mind, by using this you will override the default message composer functionality.
Example
Default


Configuration
Configurations offer the ability to customize the properties of each individual component within a Composite Component. The ThreadedMessages is a Composite Component, and it has a distinct set of configurations for each of its components as follows.MessageList
If you want to customize the properties of the MessageList Component inside ThreadedMessages Component, you need use theMessageListConfiguration
object.
The MessageListConfiguration
provides access to all the Action, Filters, Styles, Functionality, and Advanced properties of the MessageList component.
Please note that the Properties marked with the 🛑 symbol are not accessible within the Configuration Object.Example

MessageListConfiguration
.
MessageComposer
If you want to customize the properties of the MessageComposer Component inside ThreadedMessages Component, you need use theMessageComposerConfiguration
object.
The MessageComposerConfiguration
provides access to all the Action, Filters, Styles, Functionality, and Advanced properties of the MessageComposer component.
Please note that the Properties marked with the 🛑 symbol are not accessible within the Configuration Object.Example

MessageComposerConfiguration
.