Merge pull request #6665 from syncfusion-content/982891-Blazor-UG-Updation-2

IndrajithSrinivasan · web-flow · commit b186dc81e270 · 2025-09-28T17:52:36.000+05:30
982891: Updated the Blazor UG contents for Ai Assistview
diff --git a/blazor/ai-assistview/accessibility.md b/blazor/ai-assistview/accessibility.md
@@ -7,11 +7,11 @@ control: AI AssistView
 documentation: ug
 ---
 
-# Accessibility in Blazor AI AssistView component
+# Accessibility in the Blazor AI AssistView component
 
-The Blazor AI AssistView component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The Blazor AI AssistView component follows established accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
 
-The accessibility compliance for the Blazor AI AssistView component is outlined below.
+The component’s accessibility compliance is summarized below.
 
 | Accessibility Criteria | Compatibility |
 | -- | -- |
@@ -45,7 +45,7 @@ The following ARIA attributes are used in the AI AssistView component:
 | ------------ | ----------------------- |
 | `role=button` | Indicates that the element is clickable and triggers an action when activated by the user. |
 | `role=toolbar` | Specifies that the element is a toolbar. |
-| `aria-label` | Defines a string value that labels an interactive element for accessibility. |
+| `aria-label` | Provides an accessible name for interactive elements (for example, buttons, toolbar, or prompt input). |
 | `aria-orientation` | Specifies the orientation of the toolbar. |
 | `aria-disabled` | Indicates whether the toolbar or element is currently disabled and not interactive. |
 | `aria-multiline` | Indicates that a textbox accepts multiple lines of input or only a single line. |
@@ -57,19 +57,19 @@ The following keyboard shortcuts are supported by the AI AssistView component.
 | Windows | Mac | Actions |
 | --- | --- | --- |
 | <kbd>Enter</kbd> | <kbd>Enter</kbd> | Select the focused item. |
-| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Moves focus forward through the interactive elements. |
-| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Moves focus backward through the interactive elements. |
-<b>AI AssistView Toolbars</b>|||
-| <kbd>←</kbd> | <kbd>←</kbd> | Focuses the previous toolbar element.  |
-| <kbd>→</kbd> | <kbd>→</kbd> | Focuses the next toolbar element. |
+| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Move focus forward through interactive elements. |
+| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Move focus backward through interactive elements. |
+<b>AI AssistView toolbar</b>|||
+| <kbd>←</kbd> | <kbd>←</kbd> | Move focus to the previous toolbar element.  |
+| <kbd>→</kbd> | <kbd>→</kbd> | Move focus to the next toolbar element. |
 | <kbd>Enter</kbd> / <kbd>Space</kbd> | <kbd>Enter</kbd> / <kbd>Space</kbd> | Select the focused item or activate the selected option. |
-| <kbd>Home</kbd> | <kbd>Home</kbd> | Moves focus to the first toolbar element. |
-| <kbd>End</kbd> | <kbd>End</kbd> | Moves focus to the last toolbar element. |
+| <kbd>Home</kbd> | <kbd>Home</kbd> | Move focus to the first toolbar element. |
+| <kbd>End</kbd> | <kbd>End</kbd> | Move focus to the last toolbar element. |
 
 ## Ensuring accessibility
 
 The Blazor AI AssistView component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
 
 ## See also
 
-* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
+* Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components (https://blazor.syncfusion.com/documentation/common/accessibility)
diff --git a/blazor/ai-assistview/appearance.md b/blazor/ai-assistview/appearance.md
@@ -9,6 +9,8 @@ documentation: ug
 
 # Appearance in Blazor AI AssistView component
 
+Customize the AI AssistView appearance by configuring width and height and by applying custom styles through the CssClass property.
+
 ## Setting width
 
 You can use the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_Width) property to set the width of the AI AssistView. The default value is `100%`.
diff --git a/blazor/ai-assistview/assist-view.md b/blazor/ai-assistview/assist-view.md
@@ -11,7 +11,7 @@ documentation: ug
 
 ## Setting prompt text
 
-You can use the [Prompt](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_Prompt) property to define the prompt text for the AI AssistView component.
+Use the [Prompt](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_Prompt) property to define the initial prompt text displayed in the AI AssistView component. This value is sent when the prompt is requested and can be processed to generate a response.
 
 ```cshtml
 
@@ -36,7 +36,7 @@ You can use the [Prompt](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
 
 ## Setting prompt placeholder
 
-You can use the [PromptPlaceholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptPlaceholder) property to set the placeholder text for the prompt textarea. The default value is `Type prompt for assistance...`.
+Use the [PromptPlaceholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptPlaceholder) property to set the placeholder text in the prompt text area. The default placeholder is displayed when the text area is empty. The default value is `Type prompt for assistance...`.
 
 ```cshtml
 
@@ -61,9 +61,9 @@ You can use the [PromptPlaceholder](https://help.syncfusion.com/cr/blazor/Syncfu
 
 ## Prompt-response collection
 
-You can use the [Prompts](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_Prompts) property to initialize the component with the configured data as a collection of prompts and responses or individual entries.
+Use the [Prompts](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_Prompts) property to initialize the component with a predefined collection of prompts and responses, or with individual entries.
 
-The `Prompts` collection stores all the prompts and responses generated.
+The `Prompts` collection stores all prompts and responses generated during the session.
 
 ```cshtml
 
@@ -93,7 +93,7 @@ The `Prompts` collection stores all the prompts and responses generated.
 
 ## Adding prompt suggestions
 
-You can use the [PromptSuggestions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptSuggestions) property, to add the suggestions in both initial and on-demand which help users to refine their prompts. Additionally, custom header can be set for suggestions further enhancing the user experience.
+Use the [PromptSuggestions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptSuggestions) property to provide suggested prompts on initial load and on demand, helping users refine their input. Additionally, a custom header can be set for suggestions to enhance usability.
 
 ```cshtml
 
@@ -121,7 +121,7 @@ You can use the [PromptSuggestions](https://help.syncfusion.com/cr/blazor/Syncfu
 
 ### Adding suggestion headers
 
-You can use the [PromptSuggestionsHeader](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptSuggestionsHeader) property to set the header text for the prompt suggestions in the AI AssistView.
+Use the [PromptSuggestionsHeader](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptSuggestionsHeader) property to set the header text for the prompt suggestions displayed in the AI AssistView.
 
 ```cshtml
 
@@ -149,7 +149,7 @@ You can use the [PromptSuggestionsHeader](https://help.syncfusion.com/cr/blazor/
 
 ## Adding prompt iconCss
 
-You can customize the appearance of the prompter avatar by using the [PromptIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptIconCss) property.
+Customize the appearance of the prompter avatar using the [PromptIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptIconCss) property.
 
 ```cshtml
 
@@ -179,7 +179,7 @@ You can customize the appearance of the prompter avatar by using the [PromptIcon
 
 ## Adding response iconCss
 
-You can use the [ResponseIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_ResponseIconCss) property to customize the appearance of the responder avatar. By default, the `e-assistview-icon` class is added as the built-in AI AssistView response icon.
+Use the [ResponseIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_ResponseIconCss) property to customize the appearance of the responder avatar. By default, the `e-assistview-icon` class is applied as the built-in AI AssistView response icon.
 
 ```cshtml
 
