Merge pull request #6765 from syncfusion-content/983717-Azure-openai-integration-chatui

983717: Change the integration using the Azure openai

Author: IndrajithSrinivasan

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

@@ -32,7 +32,7 @@ Nuget\Install-Package Syncfusion.Blazor.InteractiveChat
 
 ```
 
-Install the Markdown rendering package used to convert model responses to HTML.
+Install the `Open AI` and `Markdig` nuget packages in the application.
 
 ```bash
 
@@ -59,7 +59,7 @@ Note: The sample below uses HttpClient directly and does not require the Azure/O
 
 ## Integration Azure OpenAI with AI AssistView
 
-- Configure your Azure OpenAI endpoint, API key, and deployment name in your Program.cs (or using your preferred configuration mechanism).
+- Configure your Azure OpenAI endpoint, API key, and deployment name in your **Program.cs** (or using your preferred configuration mechanism).
 
 - Register the service for dependency injection.
 

blazor/chat-ui/ai-integrations/gemini-integration.md

@@ -132,4 +132,4 @@ const string GeminiApiKey = 'Place your API key here';
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor Chat UI Gemini Integration](./images/gemini-integration.png)
+![Blazor Chat UI Gemini Integration](../images/gemini-integration.png)

blazor/chat-ui/ai-integrations/openai-integration.md

@@ -1,72 +1,80 @@
 ---
 layout: post
-title:  Open AI Integration with Blazor Chat UI Component | Syncfusion
-description: Checkout and learn about Open AI integration with Blazor Chat UI component in Blazor WebAssembly Application.
+title:  Azure Open AI with Blazor Chat UI Component | Syncfusion
+description: Checkout and learn about Azure Open AI with Blazor Chat UI component in Blazor WebAssembly Application.
 platform: Blazor
 control: Chat UI
 documentation: ug
 ---
 
-# Integration of Open AI With Blazor Chat UI component
+# Integration of Azure OpenAI With Blazor Chat UI component
 
-The Syncfusion Chat UI supports integration with [OpenAI](https://platform.openai.com/docs/overview), enabling advanced conversational AI features in your applications.
+The Syncfusion Chat UI 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 Chat UI 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 Chat UI for Blazor `Syncfusion.Blazor.InteractiveChat` installed in the project
 
 ## Getting Started with the Chat UI Component
 
-Before integrating Open AI, ensure that the Syncfusion Chat UI is correctly rendered in your application:
+Before integrating Azure OpenAI, ensure the Syncfusion Chat UI 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 `Open AI` and `Markdig` nuget packages in the application.
 
 ```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 Chat UI
+> `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 Chat UI
 
-```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 Blazor_ChatUI_AI.Components.Services
+@using Syncfusion.Blazor.InteractiveChat
+@using Syncfusion.Blazor.Navigations
+@inject AzureOpenAIService OpenAIService
 
-<div class="aiassist-container" style="height: 350px; width: 650px;">
-    <SfChatUI ID="chatUI" User="currentUser" HeaderText="Chat with OpenAI" HeaderIconCss="e-icons e-ai-chat" Messages="@Messages" MessageSend="OnMessageSend" TypingUsers="@typingUsers">
+<div class="chatui-container" style="height: 450px; width:450px;">
+    <SfChatUI ID="chatUser" HeaderText="Chat with OpenAI" HeaderIconCss="e-icons e-ai-chat" User="CurrentUserModel" Messages="ChatUserMessages" MessageSend="@MessageSend" TypingUsers="@typingUsers">
         <ChildContent>
             <HeaderToolbar ItemClicked="@ToolbarItemClicked">
                 <HeaderToolbarItem Type="ItemType.Spacer"></HeaderToolbarItem>
@@ -83,62 +91,111 @@ const string openaiApiKey  = 'Place your API key here';
 </div>
 
 @code {
-    private UserModel currentUser = new() { ID = "user1", User = "You" };
-    private UserModel aiUser = new() { ID = "ai", User = "Open AI" };
-    private List<ChatMessage> Messages { get; set; } = new();
+    private static UserModel CurrentUserModel = new UserModel() { ID = "User1", User = "You" };
+    private static UserModel OpenAIModel = new UserModel() { ID = "User2", User = "OpenAI" };
+
+    private List<ChatMessage> ChatUserMessages = new List<ChatMessage>();
     private List<UserModel> typingUsers = new();
-    private string openaiApiKey = "";
 
-    private async Task OnMessageSend(ChatMessageSendEventArgs args)
+    private async Task MessageSend(ChatMessageSendEventArgs args)
     {
-        // Indicate AI is typing
-        typingUsers = new List<UserModel> { aiUser };
-        await Task.Delay(500); // Simulate typing delay
-
-        try
+        typingUsers = new List<UserModel> { OpenAIModel };
+        string response = await OpenAIService.GetChatResponseAsync(args.Message.Text);
+        ChatUserMessages.Add(new ChatMessage()
         {
-            var openAiClient = new OpenAIClient(openaiApiKey);
-            var chatClient = openAiClient.GetChatClient("gpt-4o-mini");
-
-            OpenAI.Chat.ChatCompletion completion = await chatClient.CompleteChatAsync(args.Message.Text);
-            string responseText = completion.Content[0].Text;
-            var pipeline = new MarkdownPipelineBuilder()
-                .UseAdvancedExtensions()
-                .UsePipeTables()
-                .UseTaskLists()
-                .Build();
-            // Add AI response to messages
-            Messages.Add(new ChatMessage
-            {
-                Text = Markdown.ToHtml(responseText, pipeline),
-                Author = aiUser
-            });
-        }
-        catch (Exception ex)
-        {
-            Console.WriteLine($"Error fetching OpenAI response: {ex.Message}");
-            Messages.Add(new ChatMessage
-            {
-                Text = "Error generating response. Please try again.",
-                Author = aiUser
-            });
-            StateHasChanged();
-        }
-        finally
-        {
-            typingUsers.Clear();
-            StateHasChanged();
-        }
+            ID = Guid.NewGuid().ToString(),
+            Text = response,
+            Author = OpenAIModel
+        });
+        typingUsers.Clear();
     }
 
     private async Task ToolbarItemClicked()
     {
-        Messages.Clear();
+        ChatUserMessages.Clear();
         StateHasChanged();
     }
 }
 
+{% endhighlight %}
+{% highlight c# tabtitle="cs" %}
+
+using System.Net.Http.Json;
+using System.Text.Json;
+using Markdig;
+using System.Text.RegularExpressions;
+
+namespace Blazor_ChatUI_AI.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 Task<string> GetChatResponseAsync(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);
+
+            try
+            {
+                var response = await _httpClient.PostAsJsonAsync(url, request);
+
+                if (response.IsSuccessStatusCode)
+                {
+                    var responseContent = await response.Content.ReadAsStringAsync();
+                    using var jsonDocument = JsonDocument.Parse(responseContent);
+                    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();
+                        return htmlContent; // Return the full response
+                    }
+                    else
+                    {
+                        return "Error: No choices returned in the response.";
+                    }
+                }
+                else
+                {
+                    return $"Error: {await response.Content.ReadAsStringAsync()}";
+                }
+            }
+            catch (Exception ex)
+            {
+                return $"Error: {ex.Message}";
+            }
+        }
+    }
+}
+
+{% 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 Chat UI Open AI Integration](./images/openai-integration.png)
+![Blazor Chat UI Azure Open AI Integration](../images/openai-integration.png)