diff --git a/blazor/ai-assistview/accessibility.md b/blazor/ai-assistview/accessibility.md index 62c66c5b97..521742f697 100644 --- 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,14 +57,14 @@ The following keyboard shortcuts are supported by the AI AssistView component. | Windows | Mac | Actions | | --- | --- | --- | | Enter | Enter | Select the focused item. | -| Tab | Tab | Moves focus forward through the interactive elements. | -| Shift + Tab | ⇧ + Tab | Moves focus backward through the interactive elements. | -AI AssistView Toolbars||| -| ← | ← | Focuses the previous toolbar element. | -| → | → | Focuses the next toolbar element. | +| Tab | Tab | Move focus forward through interactive elements. | +| Shift + Tab | ⇧ + Tab | Move focus backward through interactive elements. | +AI AssistView toolbar||| +| ← | ← | Move focus to the previous toolbar element. | +| → | → | Move focus to the next toolbar element. | | Enter / Space | Enter / Space | Select the focused item or activate the selected option. | -| Home | Home | Moves focus to the first toolbar element. | -| End | End | Moves focus to the last toolbar element. | +| Home | Home | Move focus to the first toolbar element. | +| End | End | Move focus to the last toolbar element. | ## Ensuring accessibility @@ -72,4 +72,4 @@ The Blazor AI AssistView component's accessibility levels are ensured through an ## See also -* [Accessibility in Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) +* Accessibility in Syncfusion® Blazor components (https://blazor.syncfusion.com/documentation/common/accessibility) \ No newline at end of file diff --git a/blazor/ai-assistview/appearance.md b/blazor/ai-assistview/appearance.md index db5d769412..606098dcbf 100644 --- 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 index e7c6d00932..b62dd131e1 100644 --- 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