ChatUIModel API in React Chat Ui API component

Interface for a class ChatUI

Properties

created

EmitType<Object>

Event triggers when the component is created.

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 | JSX.Element

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.

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 | JSX.Element

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

messageTemplate

string | function | JSX.Element

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.

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 | JSX.Element

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 | JSX.Element

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 | JSX.Element

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.