ChatUIModel

1 Oct 20256 minutes to read

Interface for a class ChatUI

Properties

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.

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.

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.

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.

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

enablePersistence boolean

Enable or disable persisting component’s state between page reloads.

enableRtl boolean

Enable or disable rendering component in right to left direction.

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.

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.

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.

headerToolbar ToolbarSettingsModel

Specifies the header toolbar settings for the Chat UI component.
Represents the configuration for toolbar items and actions within the component.

height string|number

Specifies the height of the Chat UI component.

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.

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

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.

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.

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.

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.

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.

placeholder string

Specifies the placeholder text for the message input textarea in the Chat UI component.

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.

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.

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.

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.

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.

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.

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.

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.

typingUsers UserModel[]

Specifies a list of users who are currently typing in the chat.
This property is updated to indicate active participants typing responses.

typingUsersTemplate string|function

Template for displaying users currently typing in the chat interface.
Accepts a string or function to customize the display format.

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.

width string|number

Specifies the width of the Chat UI component.