ChatUI
23 Sep 202510 minutes to read
Properties
autoScrollToBottom boolean
Specifies whether the UI should automatically scroll to the bottom when a new message is added to the Chat UI component.
When set to true, the chat will automatically scroll to display the latest message, ensuring that users can see new messages without manual intervention.
Defaults to false
cssClass string
Specifies custom CSS classes for the Chat UI component.
This property enables the application of additional styling options to customize the visual appearance of the chat interface.
Defaults to ’’
emptyChatTemplate string|Function
Specifies the template for rendering the empty state of the Chat UI component.
This property can accept either a string or a function to customize the appearance when there are no messages to display in the chat.
Defaults to ’’
enableCompactMode boolean
Enables the compact mode layout in the Chat UI component.
When enabled, all messages are aligned to the left side regardless of the sender, creating a simplified chat view.
This mode is useful for dense group conversations or compact displays (e.g., mobile,embedded).
Example: compactMode: true
Defaults to false
enablePersistence boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
enableRtl boolean
Enable or disable rendering component in right to left direction.
Defaults to false
footerTemplate string|Function
Specifies the template for the footer area in the Chat UI component.
Defines the content or layout used to render the footer, which can be provided as a string or a function.
Defaults to ’’
headerIconCss string
Specifies the CSS class for the header icon in the Chat UI component.
This property allows for custom styling of the header icon.
Defaults to ’’
headerText string
Specifies the header text to be displayed in the Chat UI component.
This property defines the text that appears in the header, which can indicate the current participant’s username or the group name, providing context for the conversation.
Defaults to ‘Chat’
headerToolbar ToolbarSettingsModel
Specifies the header toolbar settings for the Chat UI component.
Represents the configuration for toolbar items and actions within the component.
Defaults to null
height string|number
Specifies the height of the Chat UI component.
Defaults to ‘100%’
loadOnDemand boolean
Enables on-demand loading of messages, typically triggered as the user scrolls through the chat history.
When set to true, older messages will load progressively, improving performance for large message histories by avoiding initial loading of all messages.
Defaults to false
locale string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ’’
mentionTriggerChar string
Specifies the character that triggers the @mention suggestion popup in the chat input.
The trigger character must be a single character, such as ‘@’ or ‘#’, and is case-sensitive in the input.
Defaults to ’@’
mentionUsers UserModel[]
Specifies the list of users available for mention in the chat UI.
This property defines an array of user objects that populate the @mention suggestion popup when the mention trigger character is typed.
When typing the mentionTriggerChar (e.g., ‘@’) followed by characters filters this list to show matching users.
Defaults to null
messageTemplate string|Function
Specifies the template for rendering individual messages in the Chat UI component.
This property can accept either a string or a function to customize the appearance of messages. The template context includes message and index.
Defaults to ’’
messageToolbarSettings MessageToolbarSettingsModel
Specifies the settings for the message toolbar in the Chat UI component.
Configures the toolbar options associated with each message such as Reply, Forward, Copy, Pin, and Delete.
If ‘items’ is not provided, default toolbar actions [‘Copy’, ‘Reply’, ‘Pin’, ‘Delete’] will be rendered.
Defaults to []
messages MessageModel[]
Specifies a collection of messages within the Chat UI component.
Each message is represented by a MessageModel object, containing properties such as text, author, timestamp, and status.
Defaults to null
placeholder string
Specifies the placeholder text for the message input textarea in the Chat UI component.
Defaults to ‘Type your message…’
showFooter boolean
Specifies whether to show or hide footer in the Chat UI component.
When set to true, the footer will be visible in the Chat UI component. If false, the footer will be hidden.
Defaults to true
showHeader boolean
Specifies whether the header is displayed in the Chat UI component.
This property controls the visibility of the header, allowing users to show or hide it as needed.
When set to false, the header will be hidden from view.
Defaults to true
showTimeBreak boolean
Specifies whether time breaks are enabled for grouping chat messages by date.
When set to true, messages will be grouped based on their timestamp, creating date-wise separators within the chat.
Defaults to false
showTimeStamp boolean
Specifies whether timestamps are displayed alongside each message in the Chat UI component.
When set to true, timestamps will appear with each message, helping users track the timing of conversations.
Defaults to true
suggestionTemplate string|Function
Specifies the template for rendering suggestion items in the Chat UI component.
Defines the content or layout used to render suggestion items, and can be either a string or a function.
The template context includes the index and suggestion text.
Defaults to ’’
suggestions string[]
Specifies the list of message suggestions displayed above the input textarea in the Chat UI component.
This property represents an array of suggestions that can assist the user in composing messages, providing quick replies.
Defaults to null
timeBreakTemplate string|Function
Defines a custom template for rendering time breaks in the Chat UI component.
Accepts a string or function that formats the appearance of date-based separators, allowing customization of how messages are visually grouped by date.
Defaults to ’’
timeStampFormat string
Specifies the format of the value that to be displayed in component.
By default, the format will be set based on the culture. You can set the format to “format:’dd/MM/yyyy hh:mm a’” in string.
Defaults to ‘dd/MM/yyyy hh:mm a’
typingUsers UserModel[]
Specifies a list of users who are currently typing in the chat.
This property is updated to indicate active participants typing responses.
Defaults to null
typingUsersTemplate string|Function
Template for displaying users currently typing in the chat interface.
Accepts a string or function to customize the display format.
Defaults to ’’
user UserModel
Represents the current user interacting with the Chat UI.
Uses the UserModel object, which contains current user information.
Messages from the current user are displayed on the right side of the Chat UI for differentiation from other participants.
Defaults to null
width string|number
Specifies the width of the Chat UI component.
Defaults to ‘100%’
Methods
addEventListener
Adds the handler to the given event listener.
| Parameter | Type | Description |
|---|---|---|
| eventName | string |
A String that specifies the name of the event |
| handler | Function |
Specifies the call to run when the event occurs. |
Returns void
addMessage
Appends a new message to the end of the Chat UI conversation area.
This method adds the specified message as the latest entry in the chat:
| Parameter | Type | Description |
|---|---|---|
| message |
string | MessageModel
|
The message to be added to the conversation. Accepts either a plain text string or a MessageModel object.- If message is a string, a MessageModel will be automatically created with the current user’s details, and the message will be appended.- If message is an instance of MessageModel, it can represent a message from either the current user or another participant and will be appended directly. |
Returns void
appendTo
Appends the control within the given HTML element
| Parameter | Type | Description |
|---|---|---|
| selector (optional) |
string | HTMLElement
|
Target element where control needs to be appended |
Returns void
attachUnloadEvent
Adding unload event to persist data when enable persistence true
Returns void
dataBind
When invoked, applies the pending property changes immediately to the component.
Returns void
detachUnloadEvent
Removing unload event to persist data when enable persistence true
Returns void
focus
Sets focus for the input textarea in the Chat UI component.
Ensures that user input is directed to the chat input field.
Returns void
getLocalData
Returns the persistence data for component
Returns any
getRootElement
Returns the route element of the component
Returns HTMLElement
handleUnload
Handling unload event to persist data when enable persistence true
Returns void
refresh
Applies all the pending property changes and render the component again.
Returns void
removeEventListener
Removes the handler from the given event listener.
| Parameter | Type | Description |
|---|---|---|
| eventName | string |
A String that specifies the name of the event to remove |
| handler | Function |
Specifies the function to remove |
Returns void
scrollToBottom
Scrolls to the last message in the conversation area of the Chat UI component.
This method allows programmatic control to ensure the chat view is scrolled to the bottom, typically used when new messages are added or to refocus on the most recent conversation.
Returns void
scrollToMessage
Scrolls to a specific message in the Chat UI component based on the provided message ID.
Locates the message with the specified ID and scrolls it to the view.
| Parameter | Type | Description |
|---|---|---|
| messageId | string |
The unique identifier of the message to navigate to the corresponding message rendered in the chat UI. |
Returns void
updateMessage
Updates an existing message in the Chat UI component.
This method allows for modifying a message that has already been added to the conversation.
It requires the unique identifier of the message to be updated and the new message content as a MessageModel.
| Parameter | Type | Description |
|---|---|---|
| message | MessageModel |
The updated message content represented as a MessageModel. |
| msgId | string |
The unique identifier of the message to be updated. |
Returns void
Inject
Dynamically injects the required modules to the component.
| Parameter | Type | Description |
|---|---|---|
| moduleList | Function[] |
? |
Returns void
Events
created EmitType<Object>
Event triggers when the component is created.
mentionSelect EmitType<MentionSelectEventArgs>
Triggered when a user selects a mention from the suggestion popup in the chat UI.
This event provides details about the selected user and the current message text, allowing developers to handle mention-related logic, such as custom notifications or validation.
The cancel property in the event arguments can be set to true to prevent the default behavior of inserting the mention into the input field.
messageSend EmitType<MessageSendEventArgs>
Event triggered when a message is about to be sent in the Chat UI component.
This event allows for cancelling the send action if needed.
userTyping EmitType<TypingEventArgs>
Event triggered when the user is typing a message in the Chat UI component.
This event provides updates on the user’s typing status.