Skip to content

982891: Updated the Blazor UG contents for Ai Assistview #6665

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Sep 28, 2025
Merged

982891: Updated the Blazor UG contents for Ai Assistview #6665

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
610c2c0
982891: Updated the Blazor UG contents
premanandh2205 Sep 23, 2025
6259c26
Merge branch 'development' into 982891-Blazor-UG-Updation-2
premanandh2205 Sep 23, 2025
f437d11
Merge branch 'development' into 982891-Blazor-UG-Updation-2
premanandh2205 Sep 24, 2025
1bd9297
Merge branch 'development' into 982891-Blazor-UG-Updation-2
premanandh2205 Sep 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions blazor/ai-assistview/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
| -- | -- |
Expand Down Expand Up @@ -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. |
Expand All @@ -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)
2 changes: 2 additions & 0 deletions blazor/ai-assistview/appearance.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%`.
Expand Down
16 changes: 8 additions & 8 deletions blazor/ai-assistview/assist-view.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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

Expand All @@ -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

Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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

Expand Down