Represents the Essential JS 2 Angular ChatUI Component.
<ejs-chatui></ejs-chatui> 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
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 ”
string | object
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 ”
boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
boolean
Enable or disable rendering component in right to left direction.
Defaults to false
string | object
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 ”
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 ”
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’
Specifies the header toolbar settings for the Chat UI component. Represents the configuration for toolbar items and actions within the component.
Defaults to null
string | number
Specifies the height of the Chat UI component.
Defaults to ‘100%’
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
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ”
string | object
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 ”
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
string
Specifies the placeholder text for the message input textarea in the Chat UI component.
Defaults to ‘Type your message…’
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
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
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
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
string | object
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 ”
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
string | object
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 ”
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’
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
string | object
Template for displaying users currently typing in the chat interface. Accepts a string or function to customize the display format.
Defaults to ”
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
string | number
Specifies the width of the Chat UI component.
Defaults to ‘100%’
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
Sets focus for the input textarea in the Chat UI component. Ensures that user input is directed to the chat input field.
Returns void
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
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
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
EmitType<Object>
Event triggers when the component is created.
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.
Event triggered when the user is typing a message in the Chat UI component. This event provides updates on the user’s typing status.