Integrated latest changes at 12-17-2024 4:31:26 PM

Author: SyncfusionBuild

ej2-react-toc.html

@@ -546,6 +546,7 @@
         <li><a href="/ej2-react/chat-ui/accessibility">Accessibility</a></li>
         <li><a href="/ej2-react/chat-ui/methods">Methods</a></li>
         <li><a href="/ej2-react/chat-ui/events">Events</a></li>
+        <li><a href="https://ej2.syncfusion.com/react/documentation/api/chat-ui">API Reference</a></li>
     </ul>
 </li><li>
 Check box

ej2-react/chat-ui/appearance.md

@@ -12,7 +12,7 @@ domainurl: ##DomainURL##
 
 ## Setting placeholder
 
-You can use the `placeholder` property to display the placeholder text that appears in the message input field to guide users on what to type. The default is `Type your message…`.
+You can use the [placeholder](../api/chat-ui#placeholder) property to display the placeholder text that appears in the message input field to guide users on what to type. The default is `Type your message…`.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
@@ -27,7 +27,7 @@ You can use the `placeholder` property to display the placeholder text that appe
 
 ## Setting width
 
-You can use the `width` property to specify the dimensions of the Chat UI within the application layout. By default, the value is `100%`.
+You can use the [width](../api/chat-ui#width) property to specify the dimensions of the Chat UI within the application layout. By default, the value is `100%`.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
@@ -42,7 +42,7 @@ You can use the `width` property to specify the dimensions of the Chat UI within
 
 ## Setting height
 
-You can use the `height` property to specify the dimensions of the Chat UI within the application layout. By default, the value is `100%`.
+You can use the [height](../api/chat-ui#height) property to specify the dimensions of the Chat UI within the application layout. By default, the value is `100%`.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
@@ -57,7 +57,7 @@ You can use the `height` property to specify the dimensions of the Chat UI withi
 
 ## CSS Class
 
-You can use the `cssClass` property to customize the appearance of the chat UI component.
+You can use the [cssClass](../api/chat-ui#cssclass) property to customize the appearance of the chat UI component.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}

ej2-react/chat-ui/events.md

@@ -14,7 +14,7 @@ This section describes the Chat UI events that will be triggered when appropriat
 
 ## Created
 
-The Chat UI component triggers the `created` event when the component rendering is completed.
+The Chat UI component triggers the [created](../api/chat-ui#created) event when the component rendering is completed.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
@@ -27,7 +27,7 @@ The Chat UI component triggers the `created` event when the component rendering
 
 ## Sending message
 
-The `messageSend` event is triggered before sending a message in the Chat UI component.
+The [messageSend](../api/chat-ui#messagesend) event is triggered before sending a message in the Chat UI component.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
@@ -40,7 +40,7 @@ The `messageSend` event is triggered before sending a message in the Chat UI com
 
 ## User typing
 
-The `userTyping` event is triggered when the user is typing a message in the Chat UI component.
+The [userTyping](../api/chat-ui#usertyping) event is triggered when the user is typing a message in the Chat UI component.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}

ej2-react/chat-ui/footer.md

@@ -12,7 +12,7 @@ domainurl: ##DomainURL##
 
 ## Show or hide footer
 
-You can use showFooter property to enable or disable the chat footer.
+You can use [showFooter](../api/chat-ui#showfooter) property to enable or disable the chat footer.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}

ej2-react/chat-ui/getting-started.md

@@ -145,7 +145,7 @@ npm start
 
 ## Configure messages and user
 
-You can use the `MessagesDirective` tag to group all the messages and `MessageDirective` tag to define each message and the `user` property to configure the current user for the chat.
+You can use the `MessagesDirective` tag to group all the messages and `MessageDirective` tag to define each message and the [user](../api/chat-ui#user) property to configure the current user for the chat.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}

ej2-react/chat-ui/globalization.md

@@ -34,7 +34,7 @@ The Chat UI can be localized to any culture by defining the text of the Chat UI
 
 ## RTL
 
-RTL provides an option to switch the text direction and layout of the Chat UI component from right to left by setting the `enableRtl` property to `true`.
+RTL provides an option to switch the text direction and layout of the Chat UI component from right to left by setting the [enableRtl](../api/chat-ui#enablertl) property to `true`.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}

ej2-react/chat-ui/header.md

@@ -12,7 +12,7 @@ domainurl: ##DomainURL##
 
 ## Show or hide header
 
-You can use `showHeader` property to enable or disable the chat header. It contains the following options `headerText` and `headerIconCss`. 
+You can use [showHeader](../api/chat-ui#showheader) property to enable or disable the chat header. It contains the following options `headerText` and `headerIconCss`. 
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
@@ -27,7 +27,7 @@ You can use `showHeader` property to enable or disable the chat header. It conta
 
 ### Setting header text
 
-You can use the `headerText` property to display the text that appears in the header, which indicates the current username or the group name providing the context for the conversation.
+You can use the [headerText](../api/chat-ui#headertext) property to display the text that appears in the header, which indicates the current username or the group name providing the context for the conversation.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
@@ -42,7 +42,7 @@ You can use the `headerText` property to display the text that appears in the he
 
 ### Setting header icon CSS
 
-You can use the `headerIconCss` property to customize the styling of the header icon.
+You can use the [headerIconCss](../api/chat-ui#headericoncss) property to customize the styling of the header icon.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
@@ -57,7 +57,7 @@ You can use the `headerIconCss` property to customize the styling of the header
 
 ## Toolbar
 
-You can render the Chat UI toolbar items by using the items property in the headerToolbar.
+You can render the Chat UI toolbar items by using the items property in the [headerToolbar](../api/chat-ui#headertoolbar).
 
 ### Setting items
 

ej2-react/chat-ui/load-on-demand.md

@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
 
 # Load on-demand in React Chat UI component
 
-You can use the `loadOnDemand` property to load messages dynamically when the scroll reaches the top of the message list improving performance and reducing load times, particularly in long conversations. This ensures a smooth user experience by only fetching messages as needed rather than loading the entire conversation at once.
+You can use the [loadOnDemand](../api/chat-ui#loadondemand) property to load messages dynamically when the scroll reaches the top of the message list improving performance and reducing load times, particularly in long conversations. This ensures a smooth user experience by only fetching messages as needed rather than loading the entire conversation at once.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}

ej2-react/chat-ui/messages.md

@@ -14,7 +14,7 @@ The Chat UI allows to add messages using the `MessagesDirective` tag. The mess
 
 ## Configure messages
 
-You can use the `text` property to add message content for the user.  Each message can be configured with options such as id, text, author, timestamp, and more.
+You can use the [text](../api/chat-ui/messageModel/#text) property to add message content for the user.  Each message can be configured with options such as id, text, author, timestamp, and more.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
@@ -29,9 +29,9 @@ You can use the `text` property to add message content for the user.  Each messa
 
 ### Define current user
 
-You can use the `author` property to identify the current user of the chat. Each user can be configured with options such as id, user, avatarUrl, and more.
+You can use the [author](../api/chat-ui/messageModel/#author) property to identify the current user of the chat. Each user can be configured with options such as id, user, avatarUrl, and more.
 
-> You can use the `user` property to display the user name and `id` property is necessary to differentiate between the multiple users.
+> You can use the [user](../api/chat-ui/userModel/#user) property to display the user name and [id](../api/chat-ui/userModel/#id) property is necessary to differentiate between the multiple users.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
@@ -46,7 +46,7 @@ You can use the `author` property to identify the current user of the chat. Each
 
 #### Setting avatar URL
 
-You can use the `avatarUrl` property to define the image URL’s for the user avatar. If no URL is provided, fallback initials of the first and last name from the user’s name will be used.
+You can use the [avatarUrl](../api/chat-ui/userModel/#avatarurl) property to define the image URL’s for the user avatar. If no URL is provided, fallback initials of the first and last name from the user’s name will be used.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
@@ -61,7 +61,7 @@ You can use the `avatarUrl` property to define the image URL’s for the user av
 
 #### Setting avatar background color
 
-You can use `avatarBgColor` property to set a specific background color for user avatars using hexadecimal values. If no color is set, a custom background color is set based on specified theme.
+You can use [avatarBgColor](../api/chat-ui/userModel/#avatarbgcolor) property to set a specific background color for user avatars using hexadecimal values. If no color is set, a custom background color is set based on specified theme.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
@@ -76,7 +76,7 @@ You can use `avatarBgColor` property to set a specific background color for user
 
 #### Setting CSS class
 
-You can use the cssClass property to customize the appearance of the chat user.
+You can use the [cssClass](../api/chat-ui/userModel/#cssclass) property to customize the appearance of the chat user.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
@@ -91,7 +91,7 @@ You can use the cssClass property to customize the appearance of the chat user.
 
 ## Define timestamp
 
-You can use the `timeStamp` property to indicate the date and time of each message being sent. By default it is set to the current date and time when the message is sent.
+You can use the [timeStamp](../api/chat-ui/messageModel/#timestamp) property to indicate the date and time of each message being sent. By default it is set to the current date and time when the message is sent.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
@@ -106,7 +106,7 @@ You can use the `timeStamp` property to indicate the date and time of each messa
 
 ### Setting timestamp format
 
-You can use the `timeStampFormat` to display specific time format for the timestamp. The default format is `dd/MM/yyyy hh:mm a`, but this can be customized to meet different localization and display needs.
+You can use the [timeStampFormat](../api/chat-ui/messageModel/#timestampformat) to display specific time format for the timestamp. The default format is `dd/MM/yyyy hh:mm a`, but this can be customized to meet different localization and display needs.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
@@ -121,11 +121,11 @@ You can use the `timeStampFormat` to display specific time format for the timest
 
 ## Define message status
 
-You can use the `status` property to update the status for the message(e.g., sent, received, read). It helps in managing message delivery and read receipts within the chat interface.
+You can use the [status](../api/chat-ui/messageModel/#status) property to update the status for the message(e.g., sent, received, read). It helps in managing message delivery and read receipts within the chat interface.
 
 ### Setting icon CSS
 
-You can use the `iconCss` property to update the styling of status icons associated with messages, aiding visual differentiation between statuses.
+You can use the [iconCss](../api/chat-ui/messageStatusModel/#iconcss) property to update the styling of status icons associated with messages, aiding visual differentiation between statuses.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
@@ -140,7 +140,7 @@ You can use the `iconCss` property to update the styling of status icons associa
 
 ### Setting text
 
-You can use the `text` property to provide information about the messages through descriptive text, providing users with the context of the message.
+You can use the [text](../api/chat-ui/messageStatusModel/#text) property to provide information about the messages through descriptive text, providing users with the context of the message.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
@@ -155,7 +155,7 @@ You can use the `text` property to provide information about the messages throug
 
 ### Setting tooltip
 
-You can use the `tooltip` property to provide information about the messages by tooltips while hovering the status icon, providing users with additional data upon hovering.
+You can use the [tooltip](../api/chat-ui/messageStatusModel/#tooltip) property to provide information about the messages by tooltips while hovering the status icon, providing users with additional data upon hovering.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
@@ -170,7 +170,7 @@ You can use the `tooltip` property to provide information about the messages by
 
 ## Setting auto scroll
 
-You can use the `autoScrollToBottom` property to automatically scroll the chats when a new message is received in a conversation. By default, the value is false, requires manual scrolling or the FAB button to quick access to the bottom of the view.
+You can use the [autoScrollToBottom](../api/chat-ui#autoscrolltobottom) property to automatically scroll the chats when a new message is received in a conversation. By default, the value is false, requires manual scrolling or the FAB button to quick access to the bottom of the view.
 
 - By default, it scrolls to bottom for each message being sent or when the scroll is maintained at the bottom in the chat, in order to prevent the automatic scroll for different user messages you can use the `autoScrollToBottom` property.
 
@@ -187,7 +187,7 @@ You can use the `autoScrollToBottom` property to automatically scroll the chats
 
 ## Setting suggestions
 
-You can use the `suggestions` property, to add the suggestions in both initial and on-demand which help users to quick-reply options above the input field.
+You can use the [suggestions](../api/chat-ui#suggestions) property, to add the suggestions in both initial and on-demand which help users to quick-reply options above the input field.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}

ej2-react/chat-ui/methods.md

@@ -12,7 +12,7 @@ domainurl: ##DomainURL##
 
 ## Adding message
 
-You can use the `addMessage` public method to add the messages in the Chat UI. You can add it either as a string or MessageModel collection. It programmatically adds a new message to the chat.
+You can use the [addMessage](../api/chat-ui#addmessage) public method to add the messages in the Chat UI. You can add it either as a string or MessageModel collection. It programmatically adds a new message to the chat.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
@@ -38,7 +38,7 @@ You can use the `addMessage` public method to add the messages in the Chat UI. Y
 
 ## Edit message
 
-You can use the `updateMessage` public method to update the messages in the ChatUI to modify an existing message within the chat, useful for editing or correcting sent messages.
+You can use the [updateMessage](../api/chat-ui#updatemessage) public method to update the messages in the ChatUI to modify an existing message within the chat, useful for editing or correcting sent messages.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
@@ -53,7 +53,7 @@ You can use the `updateMessage` public method to update the messages in the Chat
 
 ## Scroll to bottom
 
-You can use the `scrollToBottom` public method to scroll the chat view to the latest message, ensuring users see the new content updated.
+You can use the [scrollToBottom](../api/chat-ui#scrolltobottom) public method to scroll the chat view to the latest message, ensuring users see the new content updated.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}