Merge pull request #6682 from syncfusion-content/983717-Ug-docs-chatui-3

983717: Enhanced the blazor documentation for chat ui

Author: IndrajithSrinivasan

blazor/chat-ui/globalization.md

@@ -9,10 +9,13 @@ documentation: ug
 
 # Globalization in Blazor Chat UI Component
 
+The Syncfusion Blazor Chat component supports globalization features like `Localization` and `Right-to-Left (RTL)` alignment, enabling it to be adapted for different cultures and languages.
+
 ## Localization
 
-`Blazor Chat UI` component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
+The `Localization` feature allows for the translation of static text elements within the Chat component to a specific language.
+To localize the Chat UI component, refer to the guidance provided in the main [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
 
-## RTL
+## Right-to-Left (RTL)
 
-RTL provides an option to switch the text direction and layout of the Chat UI component from right to left. Refer to [Blazor RTL](https://blazor.syncfusion.com/documentation/common/right-to-left) topic to provide RTL support for the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
+The Right-to-Left (RTL) feature reverses the component's layout and text direction to support languages that are read from right to left, such as Arabic or Hebrew. Refer to [Blazor RTL](https://blazor.syncfusion.com/documentation/common/right-to-left) topic to provide RTL support for the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.

blazor/chat-ui/header.md

@@ -7,11 +7,11 @@ control: Chat UI
 documentation: ug
 ---
 
-# Header in Blazor Chat UI component
+# Header in Blazor Chat UI Component
 
 ## Show or hide header
 
-You can use [ShowHeader](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_ShowHeader) property to enable or disable the chat header. It contains the following options [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_HeaderText) and [HeaderIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_HeaderIconCss).
+The [ShowHeader](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_ShowHeader) property allows you to control the visibility of the chat header. When enabled, the header can display text and an icon, which are configured using the [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_HeaderText) and [HeaderIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_HeaderIconCss) properties, respectively.
 
 ```cshtml
 
@@ -39,7 +39,7 @@ You can use [ShowHeader](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
 
 ### Setting header text
 
-You can use the [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_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.
+Use the [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_HeaderText) property to set the text that appears in the header. This typically displays the current username or group name to provide context for the conversation.
 
 ```cshtml
 
@@ -67,7 +67,7 @@ You can use the [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl
 
 ### Setting header icon CSS
 
-You can use the [HeaderIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_HeaderIconCss) property to customize the styling of the header icon.
+The [HeaderIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_HeaderIconCss) property allows you to customize the styling of the header icon.allows customization of the header icon's styling in the Blazor Chat UI component by applying custom CSS classes.
 
 ```cshtml
 
@@ -95,15 +95,15 @@ You can use the [HeaderIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion
 
 ## Toolbar
 
-You can render the Chat UI toolbar items by using the [HeaderToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.HeaderToolbar.html), [HeaderToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.HeaderToolbarItem.html) tag directives.
+Items can be rendered in the Chat UI header's toolbar using the [HeaderToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.HeaderToolbar.html) and [HeaderToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.HeaderToolbarItem.html) tag directives.
 
 ### Setting items
 
-Items can be constructed with the following built-in command types or item template.
+Items can be configured using built-in command types or a custom item template, as detailed in the following sections.
 
 #### Adding icon CSS
 
-You can customize the header toolbar icons by using the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.HeaderToolbarItem.html#Syncfusion_Blazor_InteractiveChat_HeaderToolbarItem_IconCss) property.
+Customize the header toolbar icons by using the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.HeaderToolbarItem.html#Syncfusion_Blazor_InteractiveChat_HeaderToolbarItem_IconCss) property.
 
 ```cshtml
 
@@ -137,9 +137,9 @@ You can customize the header toolbar icons by using the [IconCss](https://help.s
 
 #### Setting item type
 
-You can change the header toolbar item type by using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.HeaderToolbarItem.html#Syncfusion_Blazor_InteractiveChat_HeaderToolbarItem_Type) property. The `Type` supports four types of items such as `Button`, `Separator`, `Spacer` and `Input`. By default, the type is `Button`.
+To change the header toolbar item type, use the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.HeaderToolbarItem.html#Syncfusion_Blazor_InteractiveChat_HeaderToolbarItem_Type) property. The `Type` property supports four item types: `Button`, `Separator`, `Spacer`, and `Input`. The default type is `Button`.
 
-In the following example, header toolbar item type is set as `Button`.
+In the following example, a header toolbar item type is set to `Button`.
 
 ```cshtml
 
@@ -173,7 +173,7 @@ In the following example, header toolbar item type is set as `Button`.
 
 #### Setting text
 
-You can use the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.HeaderToolbarItem.html#Syncfusion_Blazor_InteractiveChat_HeaderToolbarItem_Text) property to set the text for the header toolbar item.
+The [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.HeaderToolbarItem.html#Syncfusion_Blazor_InteractiveChat_HeaderToolbarItem_Text) property sets the display text for a header toolbar item.
 
 ```cshtml
 
@@ -207,7 +207,7 @@ You can use the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.I
 
 #### Show or hide toolbar item
 
-You can use the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.HeaderToolbarItem.html#Syncfusion_Blazor_InteractiveChat_HeaderToolbarItem_Visible) property to specify whether to show or hide the header toolbar item. By default, its value is `true`.
+Use the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.HeaderToolbarItem.html#Syncfusion_Blazor_InteractiveChat_HeaderToolbarItem_Visible) property to specify whether a header toolbar item is shown or hidden. Its default value is `true`.
 
 ```cshtml
 
@@ -242,7 +242,7 @@ You can use the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo
 
 #### Setting disabled
 
-You can use the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.HeaderToolbarItem.html#Syncfusion_Blazor_InteractiveChat_HeaderToolbarItem_Disabled) property to disable the header toolbar item. By default, its value is `false`.
+The [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.HeaderToolbarItem.html#Syncfusion_Blazor_InteractiveChat_HeaderToolbarItem_Disabled) property is used to disable a header toolbar item in the Blazor Chat UI component. Its default value is `false`.
 
 ```cshtml
 
@@ -277,7 +277,7 @@ You can use the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz
 
 #### Setting tooltip text
 
-You can use the [Tooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.HeaderToolbarItem.html#Syncfusion_Blazor_InteractiveChat_HeaderToolbarItem_Tooltip) property to specify the tooltip text to be displayed on hovering the header toolbar item.
+Use the [Tooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.HeaderToolbarItem.html#Syncfusion_Blazor_InteractiveChat_HeaderToolbarItem_Tooltip) property to specify the tooltip text that displays when hovering over a header toolbar item.
 
 ```cshtml
 
@@ -311,7 +311,7 @@ You can use the [Tooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo
 
 #### Setting CSS Class
 
-You can use the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.HeaderToolbarItem.html#Syncfusion_Blazor_InteractiveChat_HeaderToolbarItem_CssClass) property to customize the header toolbar item.
+The [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.HeaderToolbarItem.html#Syncfusion_Blazor_InteractiveChat_HeaderToolbarItem_CssClass) property allows applying a custom CSS class to a header toolbar item for styling purposes.
 
 ```cshtml
 
@@ -356,11 +356,11 @@ You can use the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz
 
 #### Enabling tab key navigation in toolbar
 
-You can use the [TabIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.HeaderToolbarItem.html#Syncfusion_Blazor_InteractiveChat_HeaderToolbarItem_TabIndex) property of a header toolbar item to enable tab key navigation for the item. By default, the user can switch between items using the arrow keys, but the `TabIndex` property allows you to switch between items using the `Tab` and `Shift+Tab` keys as well.
+Set the [TabIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.HeaderToolbarItem.html#Syncfusion_Blazor_InteractiveChat_HeaderToolbarItem_TabIndex) property of a header toolbar item to enable tab key navigation. By default, navigation between items is handled using arrow keys, but the TabIndex property allows switching between items using the `Tab` and `Shift+Tab` keys.
 
 To use the `TabIndex` property, set it for each Toolbar item which you want to enable tab key navigation. The `TabIndex` property should be set to a positive integer value. A value of `0` or a negative value will disable tab key navigation for the item.
 
-For example, to enable tab key navigation for two Toolbar items you can use the following code:
+To enable `Tab` key navigation for two toolbar items, use the following code:
 
 ```cshtml
 
@@ -378,9 +378,9 @@ For example, to enable tab key navigation for two Toolbar items you can use the
 
 ```
 
-With the above code, the user can switch between the two Toolbar items using the Tab and Shift+Tab keys, in addition to using the arrow keys. The items will be navigated in the order specified by the `TabIndex` values.
+With the above configuration, the user can switch between the two toolbar items using the `Tab` and `Shift+Tab` keys, and the items will be navigated in the order specified by their `TabIndex` values.
 
-If you set the `TabIndex` value to 0 for all Toolbar items, tab key navigation will be based on the element order rather than the `TabIndex` values. For example:
+If the `TabIndex` is set to 0 for all toolbar items, tab key navigation will be based on the element order in the DOM.
 
 ```cshtml
 
@@ -398,11 +398,11 @@ If you set the `TabIndex` value to 0 for all Toolbar items, tab key navigation w
 
 ```
 
-In this case, the user can switch between the two Toolbar items using the Tab and Shift+Tab keys, and the items will be navigated in the order in which they appear in the DOM.
+In this case, the user can navigate between the two items using the `Tab` and `Shift+Tab` keys in the order they appear in the DOM.
 
 #### Setting template
 
-You can use the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.HeaderToolbarItem.html#Syncfusion_Blazor_InteractiveChat_HeaderToolbarItem_Template) tag directive to add custom header toolbar item in the Chat UI component. Template property can be given as the `HTML element` or `RenderFragment`.
+Use the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.HeaderToolbarItem.html#Syncfusion_Blazor_InteractiveChat_HeaderToolbarItem_Template) tag directive to render a custom component or HTML element as a header toolbar item. Template property can be given as the `HTML element` or `RenderFragment`.
 
 ```cshtml
 
@@ -454,7 +454,7 @@ You can use the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz
 
 ### Item clicked
 
-You can define [ItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.HeaderToolbar.html#Syncfusion_Blazor_InteractiveChat_HeaderToolbar_ItemClicked) event in the [HeaderToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.HeaderToolbar.html) tag directive which will be triggered when the header toolbar item is clicked.
+Define the [ItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.HeaderToolbar.html#Syncfusion_Blazor_InteractiveChat_HeaderToolbar_ItemClicked) event handle for the [HeaderToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.HeaderToolbar.html) tag directive which will be triggered when the header toolbar item is clicked.
 
 ```cshtml
 
@@ -477,4 +477,4 @@ You can define [ItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl
     }
 }
 
-```
+```

blazor/chat-ui/load-on-demand.md

@@ -7,7 +7,7 @@ control: Chat UI
 documentation: ug
 ---
 
-# Load on-demand in Blazor Chat UI component
+# Load on-demand in Blazor Chat UI Component
 
 You can use the [LoadOnDemand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_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. 
 

blazor/chat-ui/mention.md

@@ -9,11 +9,11 @@ documentation: ug
 
 # Mention Integration in Blazor Chat UI component
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> ChatUI allows users to mention others in messages using the `@` character, with an dropdown for selecting users. The following sections explain how to configure mentions
+The Syncfusion<sup style="font-size:70%">&reg;</sup> Chat UI allows users to mention others in messages using the `@` character, which displays a dropdown for selecting users. The following sections explain how to configure mentions.
 
 ## Configure Mention Users
 
-You can use the [MentionUsers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_MentionUsers) property to define an array of users for the mention suggestion popup.
+Use the [MentionUsers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_MentionUsers) property to define a list of users for the mention suggestion popup.
 
 ```cshtml
 @using Syncfusion.Blazor.InteractiveChat
@@ -46,7 +46,7 @@ You can use the [MentionUsers](https://help.syncfusion.com/cr/blazor/Syncfusion.
 
 ## Customize the Mention trigger character
 
-You can use the [MentionChar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_MentionChar) property to customize the character which triggers the mention popup. The default value is `@`.
+Use the [MentionChar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_MentionChar) property to customize the character that triggers the mention popup. The default value is `@`.
 
 ```cshtml
 
@@ -78,11 +78,11 @@ You can use the [MentionChar](https://help.syncfusion.com/cr/blazor/Syncfusion.B
 
 ![Blazor Chat UI MentionCharacter](./images/MentionCharacter.png)
 
-## Predefine Mentions with messages
+## Predefined Mentions in Messages
 
-You can use the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ChatMessage.html#Syncfusion_Blazor_InteractiveChat_ChatMessage_Text) property in the [ChatMessage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ChatMessage.html#Syncfusion_Blazor_InteractiveChat_ChatMessage) to include predefined mentions in chat messages. The mentions field stores the selected users for each message.
+Use the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ChatMessage.html#Syncfusion_Blazor_InteractiveChat_ChatMessage_Text) property in the [ChatMessage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ChatMessage.html#Syncfusion_Blazor_InteractiveChat_ChatMessage) to include predefined mentions in chat messages. The mentions logic maps placeholders like `{0}` and `{1}` to users listed in the message's `MentionUsers` property.
 
-> The `MentionUsers` property in a message contains a list of users, mapped by their order where the placeholder {0} is replaced by the first user, {1} by the second, and so on, automatically generating mentions in the user interface. If a placeholder's index is negative or exceeds the bounds of the mentionUsers array (e.g., using {5} with only two users), the mapping for that placeholder fails, and the placeholder text itself (e.g., {5}) is displayed in the final message.
+> The `MentionUsers` property in a message contains a list of users, mapped by their order where `{0}` is replaced by the first user, `{1}` by the second, and so on. If a placeholder's index is out of bounds (e.g., using `{5}` with only two users), the placeholder text itself (e.g., `{5}`) is displayed.
 
 ```cshtml
 
@@ -114,7 +114,7 @@ You can use the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.I
 
 ## Configure mentionSelect
 
-You can use the [ValueSelecting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_ValueSelecting) event which triggers when a user selects an item from the mention dropdown, providing access to the selected user’s details for custom handling.
+Use the [ValueSelecting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_ValueSelecting) event to execute custom logic when a user is selected from the mention dropdown. The event provides access to the selected user’s details.
 
 ```cshtml
 
@@ -141,4 +141,4 @@ You can use the [ValueSelecting](https://help.syncfusion.com/cr/blazor/Syncfusio
     }
 }
 
-```
+```