Merge branch 'development' into 983838-ChartFeatures1

Author: Gowrimathi

blazor-toc.html

@@ -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)

blazor/ai-assistview/accessibility.md

@@ -7,54 +7,55 @@ control: AI AssistView
 documentation: ug
 ---
 
-# Integration of Gemini AI With Blazor AI AssistView component
+# Gemini AI With Blazor AI AssistView component
 
-The Syncfusion  AI AssistView supports integration with [Gemini](https://ai.google.dev/gemini-api/docs/quickstart), enabling advanced conversational AI features in your applications.
+The Syncfusion AI AssistView supports integration with [Gemini](https://ai.google.dev/gemini-api/docs/quickstart), enabling advanced conversational AI features in applications.
 
 ## Prerequisites
 
-* Google account to generate API key on accessing `Gemini AI`
-* Syncfusion AI AssistView for Blazor `Syncfusion.Blazor.InteractiveChat` installed in your project. 
+* Google account to generate an API key for accessing [Gemini AI](https://ai.google.dev/gemini-api/docs/quickstart)
+* Syncfusion AI AssistView for Blazor package [Syncfusion.Blazor.InteractiveChat](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) installed in the project.
+* [Markdig](https://www.nuget.org/packages/Markdig) package available in the project for Markdown-to-HTML conversion (required by the sample code).
 
 ## Getting Started with the AI AssistView Component
 
-Before integrating Gemini AI, ensure that the Syncfusion AI AssistView is correctly rendered in your application:
+Before integrating Gemini AI, ensure that the Syncfusion AI AssistView renders correctly in the application and that prerequisites are met:
 
-[ Blazor Getting Started Guide](../getting-started)
+[Blazor Getting Started Guide](../getting-started)
 
 ## Install Dependencies
 
 Install the Syncfusion Blazor package in the application.
 
 ```bash
 
-Install-Package Syncfusion.Blazor.InteractiveChat
+Nuget\Install-Package Syncfusion.Blazor.InteractiveChat
 
 ```
 
 Install the Gemini AI package in the application.
 
 ```bash
 
-Install-Package Mscc.GenerativeAI
+Nuget\Install-Package Mscc.GenerativeAI
 
 ```
 
 ## Generate API Key
 
-1. Go to [Google AI Studio](https://aistudio.google.com/app/apikey) and sign in with your Google account. If you don’t have one, create a new account.
+1. Go to [Google AI Studio](https://aistudio.google.com/app/api-keys) and sign in with a google account. Create a new account if needed.
 
-2. Once logged in, click on `Get API Key` from the left-hand menu or the top-right corner of the dashboard.
+2. Select `Get API key` from the left menu or the top-right of the dashboard.
 
-3. Click the `Create API Key` button. You’ll be prompted to either select an existing Google Cloud project or create a new one. Choose the appropriate option and proceed. 
+3. Choose `Create API key`. Select an existing google cloud project or create a new one, then proceed.
 
-4. After selecting or creating a project, your API key will be generated and displayed. Copy the key and store it securely, as it will only be shown once.
+4. After creating or selecting a project, an API key is generated and displayed. Copy the key and store it securely, as it may be shown only once.
 
-> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production.
+> Security note: Do not commit API keys to version control. Use environment variables, a secret manager, or a server-side proxy in production.
 
-##  Integration Gemini AI with AI AssistView
+## Gemini AI with AI AssistView
 
-* Add your generated `API Key` at the line 
+* Add the generated API key in the following line.
 
 ```bash
 
@@ -65,6 +66,11 @@ const string GeminiApiKey = 'Place your API key here';
 {% tabs %}
 {% highlight razor %}
 
+@using Syncfusion.Blazor.InteractiveChat
+@using Syncfusion.Blazor.Navigations
+@using Mscc.GenerativeAI
+@using Markdig
+
 <div class="aiassist-container" style="height: 350px; width: 650px;">
     <SfAIAssistView @ref="sfAIAssistView" ID="aiAssistView" PromptSuggestions="@promptSuggestions" PromptRequested="@OnPromptRequest">
         <AssistViews>
@@ -128,4 +134,4 @@ const string GeminiApiKey = 'Place your API key here';
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor AI AssistView Gemini Integration](./images/gemini-integration.png)
+![Blazor AI AssistView Gemini Integration](../images/gemini-integration.png)