diff --git a/blazor-toc.html b/blazor-toc.html index 763469fff1..07f35e42a5 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -613,6 +613,7 @@
  • Custom views
  • Templates
  • Appearance
    • +
  • Accessibility
  • Methods
  • Events
  • diff --git a/blazor/ai-assistview/accessibility.md b/blazor/ai-assistview/accessibility.md new file mode 100644 index 0000000000..bdb9709fc5 --- /dev/null +++ b/blazor/ai-assistview/accessibility.md @@ -0,0 +1,75 @@ +--- +layout: post +title: Accessibility in Blazor AI AssistView Component | Syncfusion +description: Checkout and learn about Accessibility and Keyboard interaction with Blazor AI AssistView component and more details. +platform: Blazor +control: AI AssistView +documentation: ug +--- + +# Accessibility in 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 accessibility compliance for the Blazor AI AssistView component is outlined below. + +| Accessibility Criteria | Compatibility | +| -- | -- | +| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | Yes | +| [Section 508 Support](../common/accessibility#accessibility-standards) |Yes | +| [Screen Reader Support](../common/accessibility#screen-reader-support) | Yes | +| [Right-To-Left Support](../common/accessibility#right-to-left-support) | Yes | +| [Color Contrast](../common/accessibility#color-contrast) | Yes | +| [Mobile Device Support](../common/accessibility#mobile-device-support) | Yes | +| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | Yes | +| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | Yes | + + + +
    Yes - All features of the component meet the requirement.
    + +
    Intermediate - Some features of the component do not meet the requirement.
    + +
    No - The component does not meet the requirement.
    + +## WAI-ARIA attributes + +The following ARIA attributes are used in the AI AssistView component: + +| Attributes | Purpose | +| ------------ | ----------------------- | +| `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-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. | + +## Keyboard interaction + +The following keyboard shortcuts are supported by the AI AssistView component. + +| **Press** | **To do this** | +| --- | --- | +| Enter | Select the focused item. | +| Tab | Moves focus forward through the interactive elements. | +| Shift + Tab | Moves focus backward through the interactive elements. | +AI AssistView Toolbars|| +| Left Arrow | Focuses the previous toolbar element. | +| Right Arrow | Focuses the next toolbar element. | +| Enter / Space | Select the focused item or activate the selected option. | +| Home | Moves focus to the first toolbar element. | +| End | Moves 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 Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) diff --git a/blazor/ai-assistview/appearance.md b/blazor/ai-assistview/appearance.md index d72ac9043b..db5d769412 100644 --- a/blazor/ai-assistview/appearance.md +++ b/blazor/ai-assistview/appearance.md @@ -11,13 +11,13 @@ documentation: ug ## Setting width -You can use the `Width` property to set the width of the AI AssistView. +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%`. ```cshtml @using Syncfusion.Blazor.InteractiveChat -
    +
    @@ -36,15 +36,13 @@ You can use the `Width` property to set the width of the AI AssistView. ## Setting height -You can use the `Height` property to set the height of the AI AssistView. - -> By default, the component `Width` & `Height` will be inherited based on the parent dimensions. +You can use the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_Height) property to set the height of the AI AssistView. The default value is `100%`. ```cshtml @using Syncfusion.Blazor.InteractiveChat -
    +
    @@ -63,14 +61,14 @@ You can use the `Height` property to set the height of the AI AssistView. ## CssClass -You can customize the appearance of the AI AssistView component by using the `CssClass` property. +You can customize the appearance of the AI AssistView component by using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_CssClass) property. ```cshtml @using Syncfusion.Blazor.InteractiveChat
    - +
    @code { @@ -82,18 +80,18 @@ You can customize the appearance of the AI AssistView component by using the `Cs } } diff --git a/blazor/ai-assistview/assist-view.md b/blazor/ai-assistview/assist-view.md index 525801945d..2a67b45d02 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` property to define the prompt text for the AI AssistView component. +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. ```cshtml @@ -36,7 +36,7 @@ You can use the `Prompt` property to define the prompt text for the AI AssistVie ## Setting prompt placeholder -You can use the `PromptPlaceholder` property to set the placeholder text for the prompt textarea. The default value is `Type prompt for assistance...`. +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...`. ```cshtml @@ -61,7 +61,7 @@ You can use the `PromptPlaceholder` property to set the placeholder text for the ## Prompt-response collection -By using the `Prompts` property, you can specify the collection of prompts and responses, allowing you to load pre-defined pairs or individual entries ensuring the AI AssistView component is initialized with the configured data. +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. The `Prompts` collection stores all the prompts and responses generated. @@ -94,7 +94,7 @@ The `Prompts` collection stores all the prompts and responses generated. ## Adding prompt suggestions -By using the `PromptSuggestions` property, you can configure the list of suggested prompts in the AI AssistView. Users can choose from these suggestions to use as their prompts. +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. ```cshtml @@ -122,7 +122,7 @@ By using the `PromptSuggestions` property, you can configure the list of suggest ### Adding suggestion headers -You can use the `PromptSuggestionsHeader` property to set the header text for the prompt suggestions in the AI AssistView. +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. ```cshtml @@ -148,9 +148,9 @@ You can use the `PromptSuggestionsHeader` property to set the header text for th ![Blazor AI AssistView PromptSuggestionsHeader](./images/assistview-suggestion-header.png) -## Adding prompt iconCSS +## Adding prompt iconCss -You can customize the appearance of the prompter avatar by using the `PromptIconCss` property. +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. ```cshtml @@ -179,16 +179,16 @@ You can customize the appearance of the prompter avatar by using the `PromptIcon ![Blazor AI AssistView PromptIcon](./images/assistview-prompt-icon.png) -## Adding response iconCSS +## Adding response iconCss -You can use the `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. +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. ```cshtml @using Syncfusion.Blazor.InteractiveChat
    - +
    @code { diff --git a/blazor/ai-assistview/custom-view.md b/blazor/ai-assistview/custom-view.md index af845e42b4..21081a8c86 100644 --- a/blazor/ai-assistview/custom-view.md +++ b/blazor/ai-assistview/custom-view.md @@ -15,7 +15,7 @@ The Blazor AI AssistView allows you to add different views available for user in #### Setting view type -You can change the type of view by using the `AssistView` and `CustomView` tag directive. +You can set the type of view by using the [AssistView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html) and [CustomView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.CustomView.html) tag directive. ```cshtml @@ -25,7 +25,11 @@ You can change the type of view by using the `AssistView` and `CustomView` tag d - + + +
    Response view content
    +     +
    @@ -45,7 +49,7 @@ You can change the type of view by using the `AssistView` and `CustomView` tag d ### Setting name -You can use the `Header` property to specifies the header name of the `Assist` or `Custom` views in the AI AssistView. +You can use the [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_Header) property to specifies the header name of the `Assist` or `Custom` views in the AI AssistView. ```cshtml @@ -55,7 +59,11 @@ You can use the `Header` property to specifies the header name of the `Assist` o - + + +
    Response view content
    +     +
    @@ -73,9 +81,9 @@ You can use the `Header` property to specifies the header name of the `Assist` o ![Blazor AI AssistView type Header](./images/ai-assistview-type-header.png) -### Setting iconCSS +### Setting iconCss -You can customize the view icons by using the `IconCss` property. By default the `e-assistview-icon` class is added as built-in header icon for the AI AssistView. +You can customize the view icons by using the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_IconCss) property. By default the `e-assistview-icon` class is added as built-in header icon for the AI AssistView. ```cshtml @@ -85,7 +93,11 @@ You can customize the view icons by using the `IconCss` property. By default the - + + +
    Response view content
    +     +     @@ -105,7 +117,7 @@ You can customize the view icons by using the `IconCss` property. By default the ### Setting view template -You can use the `ViewTemplate` tag directive to add the view content of the multiple views added in the AI AssistView. +You can use the [ViewTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_ViewTemplate) tag directive to add the view content of the multiple views added in the AI AssistView. ```cshtml @@ -142,7 +154,7 @@ You can use the `ViewTemplate` tag directive to add the view content of the mult #### Show or hide clear button -You can use the `ShowClearButton` property using the `AssistView` tag directive to show or hide the clear button. By default, its value is `false`, when the clear button is clicked, the prompt text entered will be cleared. +You can use the [ShowClearButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_ShowClearButton) property using the `AssistView` tag directive to show or hide the clear button. By default, its value is `false`, when the clear button is clicked, the prompt text entered will be cleared. ```cshtml @@ -171,7 +183,7 @@ You can use the `ShowClearButton` property using the `AssistView` tag directive ## Setting active view -You can use the `ActiveView` property set the active view in the AI AssistView. By default, the value is `0`. +You can use the [ActiveView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_ActiveView) property set the active view in the AI AssistView. By default, the value is `0`. ```cshtml @@ -180,8 +192,12 @@ You can use the `ActiveView` property set the active view in the AI AssistView.
    - - + + + +
    Response view content
    +     +
    @@ -194,6 +210,14 @@ You can use the `ActiveView` property set the active view in the AI AssistView. args.Response = defaultResponse; } } + ``` diff --git a/blazor/ai-assistview/events.md b/blazor/ai-assistview/events.md index 4779525947..4f05fb3557 100644 --- a/blazor/ai-assistview/events.md +++ b/blazor/ai-assistview/events.md @@ -13,7 +13,7 @@ This section describes the AI AssistView events that will be triggered when appr ## Created -The AI AssistView component triggers the `Created` event when the component rendering is completed. +The AI AssistView component triggers the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_Created) event when the component rendering is completed. ```cshtml @using Syncfusion.Blazor.InteractiveChat @@ -38,7 +38,7 @@ The AI AssistView component triggers the `Created` event when the component rend ## PromptRequested -The `PromptRequested` event is triggered when the prompt request is made in the AI AssistView component. +The [PromptRequested](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptRequested) event is triggered when the prompt request is made in the AI AssistView component. ```cshtml @using Syncfusion.Blazor.InteractiveChat @@ -59,7 +59,7 @@ The `PromptRequested` event is triggered when the prompt request is made in the ## PromptChanged -The `PromptChanged` event is triggered when the prompt text is changed in the AI AssistView component. +The [PromptChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptChanged) event is triggered when the prompt text is changed in the AI AssistView component. ```cshtml @using Syncfusion.Blazor.InteractiveChat diff --git a/blazor/ai-assistview/getting-started-webapp.md b/blazor/ai-assistview/getting-started-webapp.md index 2e95877551..9dafc6e370 100644 --- a/blazor/ai-assistview/getting-started-webapp.md +++ b/blazor/ai-assistview/getting-started-webapp.md @@ -112,7 +112,7 @@ Add the Syncfusion Blazor AI AssistView component in the **~Pages/.razor** file. ## Configure suggestions and responses -You can use the `PromptSuggestions` property to add prompt suggestions and the `PromptRequested` event to add responses when the prompt matches the specified prompts data otherwise, the default response will be displayed. +You can use the [PromptSuggestions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptSuggestions) property to add prompt suggestions and the [PromptRequested](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptRequested) event to add responses when the prompt matches the specified prompts data otherwise, the default response will be displayed. {% tabs %} {% highlight razor %} diff --git a/blazor/ai-assistview/getting-started.md b/blazor/ai-assistview/getting-started.md index 162cb65c3f..e9034bfe58 100644 --- a/blazor/ai-assistview/getting-started.md +++ b/blazor/ai-assistview/getting-started.md @@ -125,7 +125,7 @@ Add the Syncfusion Blazor AI AssistView component in the **~/Pages/Index.razor** ## Configure suggestions and responses -You can use the `PromptSuggestions` property to add prompt suggestions and the `PromptRequested` event to add responses when the prompt matches the specified prompts data otherwise, the default response will be displayed. +You can use the [PromptSuggestions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptSuggestions) property to add prompt suggestions and the [PromptRequested](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptRequested) event to add responses when the prompt matches the specified prompts data otherwise, the default response will be displayed. {% tabs %} {% highlight razor %} diff --git a/blazor/ai-assistview/images/ai-assistview-activeview.png b/blazor/ai-assistview/images/ai-assistview-activeview.png index 0f15c9bc36..aa711989cb 100644 Binary files a/blazor/ai-assistview/images/ai-assistview-activeview.png and b/blazor/ai-assistview/images/ai-assistview-activeview.png differ diff --git a/blazor/ai-assistview/images/ai-assistview-banner-template.png b/blazor/ai-assistview/images/ai-assistview-banner-template.png index f4258aceef..d0ee6b2b08 100644 Binary files a/blazor/ai-assistview/images/ai-assistview-banner-template.png and b/blazor/ai-assistview/images/ai-assistview-banner-template.png differ diff --git a/blazor/ai-assistview/images/ai-assistview-response-item-template.png b/blazor/ai-assistview/images/ai-assistview-response-item-template.png index f43095ec25..68685a4c47 100644 Binary files a/blazor/ai-assistview/images/ai-assistview-response-item-template.png and b/blazor/ai-assistview/images/ai-assistview-response-item-template.png differ diff --git a/blazor/ai-assistview/images/ai-assistview-type-header.png b/blazor/ai-assistview/images/ai-assistview-type-header.png index 346a4806dc..7f14f0fa0c 100644 Binary files a/blazor/ai-assistview/images/ai-assistview-type-header.png and b/blazor/ai-assistview/images/ai-assistview-type-header.png differ diff --git a/blazor/ai-assistview/images/assistview-footer-template.png b/blazor/ai-assistview/images/assistview-footer-template.png index 526ff05ec6..a78cbf8672 100644 Binary files a/blazor/ai-assistview/images/assistview-footer-template.png and b/blazor/ai-assistview/images/assistview-footer-template.png differ diff --git a/blazor/ai-assistview/images/assistview-response-icon.png b/blazor/ai-assistview/images/assistview-response-icon.png index b9ceb3e604..f9d43967f7 100644 Binary files a/blazor/ai-assistview/images/assistview-response-icon.png and b/blazor/ai-assistview/images/assistview-response-icon.png differ diff --git a/blazor/ai-assistview/images/assistview-toolbar-item-css.png b/blazor/ai-assistview/images/assistview-toolbar-item-css.png index bc21d51eeb..b4b016749d 100644 Binary files a/blazor/ai-assistview/images/assistview-toolbar-item-css.png and b/blazor/ai-assistview/images/assistview-toolbar-item-css.png differ diff --git a/blazor/ai-assistview/images/assistview-toolbar-item-disable.png b/blazor/ai-assistview/images/assistview-toolbar-item-disable.png index 12d8e29294..b79d232683 100644 Binary files a/blazor/ai-assistview/images/assistview-toolbar-item-disable.png and b/blazor/ai-assistview/images/assistview-toolbar-item-disable.png differ diff --git a/blazor/ai-assistview/images/assistview-toolbar-item-template.png b/blazor/ai-assistview/images/assistview-toolbar-item-template.png index bff1a69591..3a0d5c6901 100644 Binary files a/blazor/ai-assistview/images/assistview-toolbar-item-template.png and b/blazor/ai-assistview/images/assistview-toolbar-item-template.png differ diff --git a/blazor/ai-assistview/images/assistview-toolbar-item-text.png b/blazor/ai-assistview/images/assistview-toolbar-item-text.png index 3ef2865d6d..503743d365 100644 Binary files a/blazor/ai-assistview/images/assistview-toolbar-item-text.png and b/blazor/ai-assistview/images/assistview-toolbar-item-text.png differ diff --git a/blazor/ai-assistview/images/assistview-toolbar-item-visible.png b/blazor/ai-assistview/images/assistview-toolbar-item-visible.png index d88cf4ab72..2dbce5538a 100644 Binary files a/blazor/ai-assistview/images/assistview-toolbar-item-visible.png and b/blazor/ai-assistview/images/assistview-toolbar-item-visible.png differ diff --git a/blazor/ai-assistview/methods.md b/blazor/ai-assistview/methods.md index 6216dbc66b..de81574535 100644 --- a/blazor/ai-assistview/methods.md +++ b/blazor/ai-assistview/methods.md @@ -11,7 +11,7 @@ documentation: ug ## Executing prompt -You can use the `ExecutePromptAsync` method to execute the prompts dynamically in the AI AssistView. It accepts prompts as string values, which triggers the `PromptRequested` event and update the response using the `Response` property in the event callback actions. +You can use the [ExecutePromptAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_ExecutePromptAsync_System_String_) method to execute the prompts dynamically in the AI AssistView. It accepts prompts as string values, which triggers the [PromptRequested](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptRequested) event and performs the callback actions. ```cshtml @using Syncfusion.Blazor.InteractiveChat diff --git a/blazor/ai-assistview/templates.md b/blazor/ai-assistview/templates.md index 3d18e4fd21..f449c2748d 100644 --- a/blazor/ai-assistview/templates.md +++ b/blazor/ai-assistview/templates.md @@ -13,7 +13,7 @@ The AI AssistView provides several template options to customize the banner, pro ## Banner template -You can use the `BannerTemplate` tag directive to customize the banner view in the AI AssistView. +You can use the [BannerTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_BannerTemplate) tag directive to display additional information, such as a welcome note, and more in the AI AssistView. This banner is positioned at the top of the prompt and response conversation area within the AI AssistView. ```cshtml @@ -24,7 +24,11 @@ You can use the `BannerTemplate` tag directive to customize the banner view in t - + @@ -40,6 +44,17 @@ You can use the `BannerTemplate` tag directive to customize the banner view in t } } ``` @@ -187,7 +209,7 @@ You can use the `ResponseItemTemplate` tag directive to customize response items ## Prompt suggestion item template -You can use the `PromptSuggestionItemTemplate` tag directive to customize the prompt suggestion items in the AI AssistView. The template context includes the `Index` and `PromptSuggestion`. +You can use the [PromptSuggestionItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_PromptSuggestionItemTemplate) tag directive to customize the prompt suggestion items in the AI AssistView. The template context includes the `Index` and `PromptSuggestion`. ```cshtml @using Syncfusion.Blazor.InteractiveChat @@ -249,7 +271,7 @@ You can use the `PromptSuggestionItemTemplate` tag directive to customize the pr ## Footer template -You can use the `FooterTemplate` tag directive to customize the footer items in the AI AssistView. +You can use the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_FooterTemplate) tag directive to customize the default footer area and manage prompt request actions in the AI AssistView. This allows users to create unique footers that meet their specific needs. ```cshtml @using Syncfusion.Blazor.InteractiveChat @@ -261,7 +283,7 @@ You can use the `FooterTemplate` tag directive to customize the footer items in
    - +
    @@ -291,7 +313,6 @@ You can use the `FooterTemplate` tag directive to customize the footer items in ``` diff --git a/blazor/ai-assistview/toolbar-items.md b/blazor/ai-assistview/toolbar-items.md index e259c36e4a..076c274947 100644 --- a/blazor/ai-assistview/toolbar-items.md +++ b/blazor/ai-assistview/toolbar-items.md @@ -9,19 +9,19 @@ documentation: ug # Toolbar items in Blazor AI AssistView component -You can render the AI AssistView toolbar items by using the `AssistViewToolbarItem`, `PromptToolbarItem` & `ResponseToolbarItem` tag directives. +You can render the AI AssistView toolbar items by using the [AssistViewToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html), [PromptToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.PromptToolbarItem.html) & [ResponseToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ResponseToolbarItem.html) tag directives. ## Adding header toolbar items -The AI AssistView component allows you to add header toolbar items using the `AssistViewToolbarItem` tag directive within the `AssistViewToolbar`. +The AI AssistView component allows you to add header toolbar items using the [AssistViewToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html) tag directive within the [AssistViewToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbar.html). ### Items Items can be constructed with the following built-in command types or item template. -#### Adding iconCSS +#### Adding iconCss -You can customize the toolbar icons by using the `IconCss` property. +You can customize the toolbar icons by using the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html#Syncfusion_Blazor_InteractiveChat_AssistViewToolbarItem_IconCss) property. ```cshtml @@ -52,7 +52,7 @@ You can customize the toolbar icons by using the `IconCss` property. #### Setting item type -You can change the toolbar item type by using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Type) property. The `Type` supports three types of items such as `Button`, `Separator`, `Spacer` and `Input`. By default, the type is `Button`. +You can change the toolbar item type by using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html#Syncfusion_Blazor_InteractiveChat_AssistViewToolbarItem_Type) property. The `Type` supports three types of items such as `Button`, `Separator`, `Spacer` and `Input`. By default, the type is `Button`. In the following example, toolbar item type is set as `Button`. @@ -86,7 +86,7 @@ In the following example, toolbar item type is set as `Button`. #### Setting text -You can use the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Text) property to set the text for the toolbar item. +You can use the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html#Syncfusion_Blazor_InteractiveChat_AssistViewToolbarItem_Text) property to set the text for the toolbar item. ```cshtml @@ -97,7 +97,7 @@ You can use the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.N - + @@ -117,7 +117,7 @@ You can use the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.N #### Show or hide toolbar item -You can use the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Visible) property to specify whether to show or hide the toolbar item. By default, its value is `true`. +You can use the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html#Syncfusion_Blazor_InteractiveChat_AssistViewToolbarItem_Visible) property to specify whether to show or hide the toolbar item. By default, its value is `true`. ```cshtml @@ -127,7 +127,9 @@ You can use the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo
    + +
    @@ -147,7 +149,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.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Disabled) property to disable the toolbar item. By default, its value is `false`. +You can use the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html#Syncfusion_Blazor_InteractiveChat_AssistViewToolbarItem_Disabled) property to disable the toolbar item. By default, its value is `false`. ```cshtml @@ -160,6 +162,7 @@ You can use the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz + @@ -179,7 +182,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.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_TooltipText) property to specify the tooltip text to be displayed on hovering the toolbar item. +You can use the [Tooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html#Syncfusion_Blazor_InteractiveChat_AssistViewToolbarItem_Tooltip) property to specify the tooltip text to be displayed on hovering the toolbar item. ```cshtml @@ -208,7 +211,7 @@ You can use the [Tooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo #### Setting cssClass -You can use the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_CssClass) property to customize the toolbar item. +You can use the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html#Syncfusion_Blazor_InteractiveChat_AssistViewToolbarItem_CssClass) property to customize the toolbar item. ```cshtml @@ -219,7 +222,7 @@ You can use the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz - + @@ -233,10 +236,14 @@ You can use the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz } } ``` @@ -245,7 +252,7 @@ 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.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_TabIndex) property of a 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. +You can use the [TabIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html#Syncfusion_Blazor_InteractiveChat_AssistViewToolbarItem_TabIndex) property of a 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. 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. @@ -289,12 +296,13 @@ If you set the `TabIndex` value to 0 for all Toolbar items, tab key navigation w #### Setting template -You can use the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Template) tag directive to add custom toolbar item in the AI AssistView component. Template property can be given as the `HTML element` or `RenderFragment`. +You can use the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html#Syncfusion_Blazor_InteractiveChat_AssistViewToolbarItem_Template) tag directive to add custom toolbar item in the AI AssistView component. Template property can be given as the `HTML element` or `RenderFragment`. ```cshtml @using Syncfusion.Blazor.InteractiveChat @using Syncfusion.Blazor.Navigations +@using Syncfusion.Blazor.SplitButtons
    @@ -302,7 +310,13 @@ You can use the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz @@ -318,10 +332,8 @@ You can use the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz } } @@ -331,7 +343,7 @@ You can use the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz ### Item clicked -You can define `ItemClicked` event in the `AssistViewToolbar` tag directive which will be triggered when the header toolbar item is clicked. +You can define [ItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbar.html#Syncfusion_Blazor_InteractiveChat_AssistViewToolbar_ItemClicked) event in the [AssistViewToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbar.html) tag directive which will be triggered when the header toolbar item is clicked. ```cshtml @@ -398,7 +410,7 @@ In the following example, AI AssistView component rendered with built-in toolbar #### Setting width -You can use the `Width` property using `PromptToolbar` tag directive to set the width of the prompt toolbar in the AI AssistView. +You can use the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.PromptToolbar.html#Syncfusion_Blazor_InteractiveChat_PromptToolbar_Width) property using [PromptToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.PromptToolbar.html) tag directive to set the width of the prompt toolbar in the AI AssistView. ```cshtml @@ -429,7 +441,7 @@ You can use the `Width` property using `PromptToolbar` tag directive to set the #### Item clicked -You can define `ItemClicked` event in the `PromptToolbar` tag directive which will be triggered when the prompt toolbar item is clicked. +You can define [ItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.PromptToolbar.html#Syncfusion_Blazor_InteractiveChat_PromptToolbar_ItemClicked) event in the [PromptToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.PromptToolbar.html) tag directive which will be triggered when the prompt toolbar item is clicked. ```cshtml @@ -497,7 +509,7 @@ In the following example, AI AssistView renders with built-in toolbar items. #### Setting width -You can use the `Width` property using `ResponseToolbar` tag directive to set the width of the response toolbar in the AI AssistView. +You can use the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ResponseToolbar.html#Syncfusion_Blazor_InteractiveChat_ResponseToolbar_Width) property using [ResponseToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ResponseToolbar.html) tag directive to set the width of the response toolbar in the AI AssistView. ```cshtml @@ -528,7 +540,7 @@ You can use the `Width` property using `ResponseToolbar` tag directive to set th #### Item clicked -You can define `ItemClicked` event in the `ResponseToolbar` tag directive which will be triggered when the response toolbar item is clicked. +You can define [ItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ResponseToolbar.html#Syncfusion_Blazor_InteractiveChat_ResponseToolbar_ItemClicked) event in the [ResponseToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ResponseToolbar.html) tag directive which will be triggered when the response toolbar item is clicked. ```cshtml @@ -563,11 +575,11 @@ You can define `ItemClicked` event in the `ResponseToolbar` tag directive which ## Adding custom toolbar items -You can also add custom toolbar items in the AI AssistView by using the `AssistViewToolbarItem`, `PromptToolbarItem` & `ResponseToolbarItem` tag directives. +You can also add custom toolbar items in the AI AssistView by using the [AssistViewToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html), [PromptToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.PromptToolbarItem.html) & [ResponseToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ResponseToolbarItem.html) tag directives. ### Prompt -You can use the `PromptToolbarItem` tag directive within the `PromptToolbar` to add custom items for the prompt toolbar in the AI AssistView. +You can use the [PromptToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.PromptToolbarItem.html) tag directive within the [PromptToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.PromptToolbar.html) to add custom items for the prompt toolbar in the AI AssistView. > To know more about the items, please refer to the [Items](./toolbar-items#items) section. @@ -604,7 +616,7 @@ You can use the `PromptToolbarItem` tag directive within the `PromptToolbar` to ### Response -You can use the `ResponseToolbarItem` tag directive within the `ResponseToolbar` to add custom response toolbar in the AI AssistView. +You can use the [ResponseToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ResponseToolbarItem.html) tag directive within the [ResponseToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ResponseToolbar.html) to add custom response toolbar in the AI AssistView. > To know more about the items, please refer to the [Items](./toolbar-items#items) section. @@ -644,4 +656,4 @@ You can use the `ResponseToolbarItem` tag directive within the `ResponseToolbar` #### Item clicked -The `itemClicked` event is triggered when a custom toolbar item is clicked. This event applies to both prompt and response toolbar items. +The [itemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.PromptToolbar.html#Syncfusion_Blazor_InteractiveChat_PromptToolbar_ItemClicked) event is triggered when a custom toolbar item is clicked. This event applies to both prompt and response toolbar items.