Merge branch 'development' into 983717-UG-docs-Ribbon-3

Author: premanandh2205

blazor-toc.html

@@ -682,7 +682,7 @@
 			<li>AI Integrations
 				<ul>
 					<li><a href="/blazor/ai-assistview/ai-integrations/gemini-integration">Integration with Google Gemini</a></li>
-					<li><a href="/blazor/ai-assistview/ai-integrations/openai-integration">Integration with Open AI</a></li>
+					<li><a href="/blazor/ai-assistview/ai-integrations/openai-integration">Integration with Azure Open AI</a></li>
 				</ul>
 			</li>
 			<li><a href="/blazor/ai-assistview/toolbar-items">Toolbar items</a></li>

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)

blazor/ai-assistview/ai-integrations/openai-integration.md

@@ -1,72 +1,80 @@
 ---
 layout: post
-title:  Open AI Integration with Blazor AI AssistView Component | Syncfusion
-description: Checkout and learn about Open AI integration with Blazor AI AssistView component in Blazor WebAssembly Application.
+title:  Azure Open AI with Blazor AI AssistView Component | Syncfusion
+description: Checkout and learn about Azure Open AI with Blazor AI AssistView component in Blazor WebAssembly Application.
 platform: Blazor
 control: AI AssistView
 documentation: ug
 ---
 
-# Integration of Open AI With Blazor AI AssistView component
+# Integration of Azure OpenAI With Blazor AI AssistView component
 
-The Syncfusion  AI AssistView supports integration with [OpenAI](https://platform.openai.com/docs/overview), enabling advanced conversational AI features in your applications.
+The Syncfusion AI AssistView supports integration with [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai), enabling advanced conversational AI features in your applications.
 
 ## Prerequisites
 
-* OpenAI account to generate an API key for accessing the `OpenAI` API
-* Syncfusion AI AssistView for Blazor `Syncfusion.Blazor.InteractiveChat` installed in your project. 
+-  An Azure account with access to `Azure Open AI` services and a generated API key.
+- Syncfusion AI AssistView for Blazor `Syncfusion.Blazor.InteractiveChat` installed in the project
 
 ## Getting Started with the AI AssistView Component
 
-Before integrating Open AI, ensure that the Syncfusion AI AssistView is correctly rendered in your application:
+Before integrating Azure OpenAI, ensure the Syncfusion AI AssistView component renders correctly in the application:
 
-[ 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 Open AI AI package in the application.
+Install the Markdown rendering package used to convert model responses to HTML.
 
 ```bash
 
-Install-Package OpenAI
+NuGet\Install-Package OpenAI
+NuGet\Install-Package Azure.AI.OpenAI
+NuGet\Install-Package Azure.Core
+Nuget\Install-Package Markdig
 
 ```
 
-## Generate API Key
+Note: The sample below uses HttpClient directly and does not require the Azure/OpenAI SDKs.
 
-1. Go to [Open AI](https://platform.openai.com/docs/overview) and sign in with your Google account. If you don’t have one, create a new account. 
+## Configure Azure Open AI
 
-2. Once logged in, click on your profile icon in the top-right corner and select `API Keys` from the dropdown menu.  
+1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure Open AI resource.
 
-3. Click the `+ Create new secret key` button. You’ll be prompted to name the key (optional). Confirm to generate the key. 
+2. Under Resource Management, select Keys and Endpoint to retrieve your API key and endpoint URL. 
 
-4. Your API key will be displayed once. Copy it and store it securely, as it won’t be shown again.
+3. Copy the API key, endpoint, and deployment name (e.g., gpt-4o-mini). Ensure the API version (e.g., 2024-07-01-preview) matches your resource configuration.
 
-> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production.
+4. Store these values securely, as they will be used in your application.
 
-##  Integration Open AI with AI AssistView
+> `Security Note`: expose your API key in client-side code for production applications. Use a server-side proxy or environment variables to manage sensitive information securely.
 
-* Add your generated `API Key` at the line 
+## Integration Azure OpenAI with AI AssistView
 
-```bash
+- Configure your Azure OpenAI endpoint, API key, and deployment name in your Program.cs (or using your preferred configuration mechanism).
 
-const string openaiApiKey  = 'Place your API key here';
+- Register the service for dependency injection.
 
-```
+- Inject and use the service in your Razor component.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight c# tabtitle="razor" %}
+
+@using AIAssistView_AzureAI.Components.Services
+@using Syncfusion.Blazor.InteractiveChat
+@using Syncfusion.Blazor.Navigations
+@inject AzureOpenAIService OpenAIService
 
-<div class="aiassist-container" style="height: 350px; width: 650px;">
-    <SfAIAssistView @ref="sfAIAssistView" ID="aiAssistView" PromptSuggestions="@promptSuggestions" PromptRequested="@OnPromptRequest">
+<div class="aiassist-container" style="height: 450px; width: 650px;">
+    <SfAIAssistView @ref="assistView" ID="aiAssistView" PromptSuggestions="@promptSuggestions" PromptRequested="@PromptRequest">
         <AssistViews>
             <AssistView>
                 <BannerTemplate>
@@ -86,47 +94,150 @@ const string openaiApiKey  = 'Place your API key here';
 </div>
 
 @code {
-    private SfAIAssistView sfAIAssistView = new SfAIAssistView();
+    private SfAIAssistView assistView;
+    private string finalResponse { get; set; }
     private List<string> promptSuggestions = new List<string>
     {
         "What are the best tools for organizing my tasks?",
         "How can I maintain work-life balance effectively?"
     };
-    private string openaiApiKey = "";
-    private async Task OnPromptRequest(AssistViewPromptRequestedEventArgs args)
+
+    private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
     {
+        // Reset the response for this prompt
+        var lastIdx = assistView.Prompts.Count - 1;
+        assistView.Prompts[lastIdx].Response = string.Empty;
+        finalResponse = string.Empty;
         try
         {
-            var openAiClient = new OpenAIClient(openaiApiKey);
-            var chatClient = openAiClient.GetChatClient("gpt-4o-mini");
-
-            OpenAI.Chat.ChatCompletion completion = await chatClient.CompleteChatAsync(args.Prompt);
-            string responseText = completion.Content[0].Text;
-            var pipeline = new MarkdownPipelineBuilder()
-                .UseAdvancedExtensions()
-                .UsePipeTables()
-                .UseTaskLists()
-                .Build();
-            // Add the response to the AIAssistView
-            await Task.Delay(1000); // Simulate delay as in original code
-            args.Response = Markdown.ToHtml(responseText, pipeline);
+            await foreach (var chunk in OpenAIService.GetChatResponseStreamAsync(args.Prompt))
+            {
+                await UpdateResponse(args, chunk);
+            }
+
+            args.Response = finalResponse;
         }
         catch (Exception ex)
         {
-            Console.WriteLine($"Error fetching Open AI response: {ex.Message}");
-            await Task.Delay(1000);
-            args.Response = "⚠️ Something went wrong while connecting to the AI service. Please check your API key or try again later.";
+            args.Response = $"Error: {ex.Message}";
         }
     }
 
+    private async Task UpdateResponse(AssistViewPromptRequestedEventArgs args, string response)
+    {
+        var lastIdx = assistView.Prompts.Count - 1;
+        await Task.Delay(10); // Small delay for UI updates
+        assistView.Prompts[lastIdx].Response += response.Replace("\n", "<br>");
+        finalResponse = assistView.Prompts[lastIdx].Response;
+        StateHasChanged();
+    }
+
     private void ToolbarItemClicked(AssistViewToolbarItemClickedEventArgs args)
     {
-        sfAIAssistView.Prompts.Clear();
+        assistView.Prompts.Clear();
         StateHasChanged();
     }
 }
 
+{% endhighlight %}
+{% highlight c# tabtitle="cs" %}
+
+using System.Text.Json;
+using Markdig;
+using System.Text.RegularExpressions;
+
+namespace AIAssistView_AzureAI.Components.Services
+{
+    public class AzureOpenAIService
+    {
+        private readonly HttpClient _httpClient;
+        private readonly string _endpoint;
+        private readonly string _apiKey;
+        private readonly string _deploymentName;
+
+        public AzureOpenAIService(HttpClient httpClient, string endpoint, string apiKey, string deploymentName)
+        {
+            _httpClient = httpClient;
+            _endpoint = endpoint;
+            _apiKey = apiKey;
+            _deploymentName = deploymentName;
+        }
+        
+        public async IAsyncEnumerable<string> GetChatResponseStreamAsync(string prompt)
+        {
+            var request = new
+            {
+                messages = new[] { new { role = "user", content = prompt } },
+                max_tokens = 500,
+            };
+
+            var url = $"{_endpoint}/openai/deployments/{_deploymentName}/chat/completions?api-version=2024-02-15-preview";
+            _httpClient.DefaultRequestHeaders.Add("api-key", _apiKey);
+
+            Stream responseStream = null;
+            List<string> results = new List<string>();
+
+            try
+            {
+                var response = await _httpClient.PostAsJsonAsync(url, request);
+
+                if (response.IsSuccessStatusCode)
+                {
+                    responseStream = await response.Content.ReadAsStreamAsync();
+                    using var jsonDocument = JsonDocument.Parse(responseStream);
+                    var choices = jsonDocument.RootElement.GetProperty("choices");
+                    if (choices.GetArrayLength() > 0)
+                    {
+                        var content = choices[0].GetProperty("message").GetProperty("content").GetString();
+                        var htmlContent = Markdown.ToHtml(content);
+                        htmlContent = Regex.Replace(htmlContent, @"\s+", " ").Trim();
+                        // Collect each character to the results list before yielding
+                        foreach (var chunk in htmlContent)
+                        {
+                            results.Add(chunk.ToString());
+                        }
+                    }
+                    else
+                    {
+                        results.Add("Error: No choices returned in the response.");
+                    }
+                }
+                else
+                {
+                    var error = await response.Content.ReadAsStringAsync();
+                    results.Add($"Error: {error}");
+                }
+            }
+            catch (Exception ex)
+            {
+                // Collect the error message to be yielded later
+                results.Add($"Error: {ex.Message}");
+            }
+            finally
+            {
+                if (responseStream != null)
+                {
+                    responseStream.Dispose();
+                }
+            }
+
+            // Now yield each collected result
+            foreach (var result in results)
+            {
+                yield return result;
+            }
+        }
+    }
+}
+
+{% endhighlight %}
+{% highlight c# tabtitle="Server(~/_Program.cs)" %}
+
+var endpoint = "https://azure-testresource.openai.azure.com";
+var apiKey = "<Your API Key>"; // Replace with your API key;
+var deploymentName = "gpt-4o-mini";
+
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor AI AssistView Open AI Integration](./images/openai-integration.png)
+![Blazor AI AssistView Azure Open AI Integration](./images/openai-integration.png)

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%`.