Integrated latest changes at 12-18-2024 4:31:12 AM

Author: SyncfusionBuild

ej2-vue-toc.html

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

ej2-vue/chart/advanced-accessibility-configuration.md

@@ -24,14 +24,14 @@ The chart control has a number of characteristics that enable accessibility feat
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/chart/accessibility/pie-chart/app-composition.vue %}
+{% include code-snippet/chart/accessibility/line-chart/app-composition.vue %}
 {% endhighlight %}
 {% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/chart/accessibility/pie-chart/app.vue %}
+{% include code-snippet/chart/accessibility/line-chart/app.vue %}
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/code-snippet/chart/accessibility/pie-chart" %}
+{% previewsample "page.domainurl/code-snippet/chart/accessibility/line-chart" %}
 
 ## Series
 
@@ -45,14 +45,14 @@ The `series` supports the customization of accessibility for data points, allowi
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/chart/accessibility/line-chart/app-composition.vue %}
+{% include code-snippet/chart/accessibility/column-series/app-composition.vue %}
 {% endhighlight %}
 {% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/chart/accessibility/line-chart/app.vue %}
+{% include code-snippet/chart/accessibility/column-series/app.vue %}
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/code-snippet/chart/accessibility/line-chart" %}
+{% previewsample "page.domainurl/code-snippet/chart/accessibility/column-series" %}
 
 ## Title and subtitle
 
@@ -145,14 +145,14 @@ The `indicators` property allows you to analyze the trends and patterns in the d
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/chart/accessibility/trendline/app-composition.vue %}
+{% include code-snippet/chart/accessibility/indicator/app-composition.vue %}
 {% endhighlight %}
 {% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/chart/accessibility/trendline/app.vue %}
+{% include code-snippet/chart/accessibility/indicator/app.vue %}
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/code-snippet/chart/accessibility/trendline" %}
+{% previewsample "page.domainurl/code-snippet/chart/accessibility/indicator" %}
 
 ## Legend
 

ej2-vue/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/chatUIModel/#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 html tabtitle="Composition API (~/src/App.vue)" %}
@@ -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/chatUIModel/#width) property to specify the dimensions of the Chat UI within the application layout. By default, the value is `100%`.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -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/chatUIModel/#height) property to specify the dimensions of the Chat UI within the application layout. By default, the value is `100%`.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -57,7 +57,7 @@ You can use the `height` property to specify the dimensions of the Chat UI withi
 
 ## CssClass
 
-You can use the `cssClass` property to customize the appearance of the chat UI component.
+You can use the [cssClass](../api/chat-ui/chatUIModel/#cssclass) property to customize the appearance of the chat UI component.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}

ej2-vue/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/chatUIModel/#created) event when the component rendering is completed.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -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/chatUIModel/#messagesend) event is triggered before sending a message in the Chat UI component.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -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/chatUIModel/#usertyping) event is triggered when the user is typing a message in the Chat UI component.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}

ej2-vue/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/chatUIModel/#showfooter) property to enable or disable the chat footer.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -22,7 +22,7 @@ You can use showFooter property to enable or disable the chat footer.
 {% include code-snippet/chat-ui/footer/app.vue %}
 {% endhighlight %}
 {% endtabs %}
-  
+
 {% previewsample "page.domainurl/code-snippet/chat-ui/footer" %}
 
 ## Footer template

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

@@ -145,7 +145,7 @@ yarn run serve
 
 ## Configure messages and user
 
-You can use the `<e-messages>` tag directive to group all the messages and `<e-message>` tag to define each message and the `user` property to configure the current user for the chat.
+You can use the `<e-messages>` tag directive to group all the messages and `<e-message>` tag to define each message and the [user](../api/chat-ui/user) property to configure the current user for the chat.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}

ej2-vue/chat-ui/globalization.md

@@ -13,7 +13,7 @@ domainurl: ##DomainURL##
 ## Localization
 
 The Chat UI can be localized to any culture by defining the text of the Chat UI in the corresponding culture. The default locale of the Chat UI is `en` (English). The following table represents the default text of the Chat UI in `en` culture.
- 
+
 |KEY|Text|
 |----|----|
 |oneUserTyping|{0} is typing|
@@ -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/chatUIModel/#enablertl) property to `true`.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}

ej2-vue/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/chatUIModel/#showheader) property to enable or disable the chat header. It contains the following options headerText and headerIconCss. 
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -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/chatUIModel/#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 html tabtitle="Composition API (~/src/App.vue)" %}
@@ -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/chatUIModel/#headericoncss) property to customize the styling of the header icon.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -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/chatUIModel/#headertoolbar).
 
 ### Setting Items
 

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

@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
 
 # Load on-demand in Vue 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/chatUIModel/#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 html tabtitle="Composition API (~/src/App.vue)" %}

ej2-vue/chat-ui/messages.md

@@ -14,7 +14,7 @@ The Chat UI allows to add messages using the `e-message` tag directive. The me
 
 ## Configuring 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 html tabtitle="Composition API (~/src/App.vue)" %}
@@ -29,9 +29,9 @@ You can use the `text` property to add message content for the user.  Each messa
 
 ### Defining 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 html tabtitle="Composition API (~/src/App.vue)" %}
@@ -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 html tabtitle="Composition API (~/src/App.vue)" %}
@@ -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 the `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 the [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 html tabtitle="Composition API (~/src/App.vue)" %}
@@ -76,7 +76,7 @@ You can use the `avatarBgColor` property to set a specific background color for
 
 #### 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 html tabtitle="Composition API (~/src/App.vue)" %}
@@ -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 html tabtitle="Composition API (~/src/App.vue)" %}
@@ -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 html tabtitle="Composition API (~/src/App.vue)" %}
@@ -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 html tabtitle="Composition API (~/src/App.vue)" %}
@@ -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 html tabtitle="Composition API (~/src/App.vue)" %}
@@ -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 html tabtitle="Composition API (~/src/App.vue)" %}
@@ -170,7 +170,7 @@ You can use the `tooltip` property to provide information about the messages by
 
 ## Setting autoscroll
 
-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/chatUIModel/#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/chatUIModel/#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 html tabtitle="Composition API (~/src/App.vue)" %}