24 2 beta api update (#3)

* V24.2 Beta API Update - IChatClient added - Blazor Chat API has been updated - WinForms example has been updated to use `AIChatControl` - NuGet Package references have been updated
DevExpress-Examples · Nov 22, 2024 · ee56f4b · ee56f4b
1 parent ecebc42
commit ee56f4b
Show file tree

Hide file tree

Showing 23 changed files with 167 additions and 304 deletions.
diff --git a/CS/DevExpress.AI.Samples.Blazor/Components/Pages/Chat-Assistant.razor b/CS/DevExpress.AI.Samples.Blazor/Components/Pages/Chat-Assistant.razor
@@ -3,18 +3,29 @@
 @using DevExpress.AIIntegration.Blazor.Chat
 @using AIIntegration.Services.Chat
 @using System.Reflection
+@using Markdig
 
-<DxAIChat CssClass="my-chat" Initialized="Initialized" />
+<DxAIChat CssClass="my-chat" Initialized="Initialized" ResponseContentFormat="ResponseContentFormat.Markdown">
+    <MessageContentTemplate>
+        <div class="my-chat-content">
+            @ToHtml(context.Content)
+        </div>
+    </MessageContentTemplate>
+</DxAIChat>
 
 @code {
     const string DocumentResourceName = "DevExpress.AI.Samples.Blazor.Data.Restaurant Menu.pdf";
     const string prompt = "You are an analytics assistant specialized in analyzing PDF files. Your role is to assist users by providing accurate answers to their questions about data contained within these files.\n \n### Tasks:\n- Perform various types of data analyses, including summaries, calculations, data filtering, and trend identification.\n- Clearly explain your analysis process to ensure users understand how you arrived at your answers.\n- Always provide precise and accurate information based on the Excel data.\n- If you cannot find an answer based on the provided data, explicitly state: \"The requested information cannot be found in the data provided.\"\n \n### Examples:\n1. **Summarization:**\n   - **User Question:** \"What is the average sales revenue for Q1?\"\n   - **Response:** \"The average sales revenue for Q1 is calculated as $45,000, based on the data in Sheet1, Column C.\"\n \n2. **Data Filtering:**\n   - **User Question:** \"Which products had sales over $10,000 in June?\"\n   - **Response:** \"The products with sales over $10,000 in June are listed in Sheet2, Column D, and they include Product A, Product B, and Product C.\"\n \n3. **Insufficient Data:**\n   - **User Question:** \"What is the market trend for Product Z over the past 5 years?\"\n   - **Response:** \"The requested information cannot be found in the data provided, as the dataset only includes data for the current year.\"\n \n### Additional Instructions:\n- Format your responses to clearly indicate which sheet and column the data was extracted from when necessary.\n- Avoid providing any answers if the data in the file is insufficient for a reliable response.\n- Ask clarifying questions if the user's query is ambiguous or lacks detail.\n \nRemember, your primary goal is to provide helpful, data-driven insights that directly answer the user's questions. Do not assume or infer information not present in the dataset.";
 
     async Task Initialized(IAIChat chat) {
-        await chat.UseAssistantAsync(new OpenAIAssistantOptions(
+        await chat.SetupAssistantAsync(new OpenAIAssistantOptions(
             $"{Guid.NewGuid().ToString("N")}.pdf",
             Assembly.GetExecutingAssembly().GetManifestResourceStream(DocumentResourceName),
             prompt)
         );
     }
+        MarkupString ToHtml(string text) {
+            return (MarkupString)Markdown.ToHtml(text);
+        }
+    }
 }
diff --git a/CS/DevExpress.AI.Samples.Blazor/Components/Pages/Chat-CustomMessage.razor b/CS/DevExpress.AI.Samples.Blazor/Components/Pages/Chat-CustomMessage.razor
@@ -6,18 +6,18 @@
     <MessageTemplate>
         <div class="@GetMessageClasses(context)">
             @if(context.Typing) {
-                <span>Loading...</span>
+            <span>Loading...</span>
             } else {
-                <div class="my-chat-content">
-                    @context.Content
-                </div>
+            <div class="my-chat-content">
+                @context.Content
+            </div>
             }
         </div>
     </MessageTemplate>
 </DxAIChat>
 
 @code {
-    string GetMessageClasses(ChatMessage message) {
+    string GetMessageClasses(BlazorChatMessage message) {
         if(message.Role == ChatMessageRole.Assistant) {
             return "my-chat-message my-assistant-message";
         } else if(message.Role == ChatMessageRole.User) {

diff --git a/CS/DevExpress.AI.Samples.Blazor/Components/Pages/Chat-Markdown.razor b/CS/DevExpress.AI.Samples.Blazor/Components/Pages/Chat-Markdown.razor
@@ -3,7 +3,7 @@
 @using DevExpress.AIIntegration.Blazor.Chat
 @using AIIntegration.Services.Chat;
 
-<DxAIChat CssClass="my-chat" RenderMode="AnswerRenderMode.Markdown">
+<DxAIChat CssClass="my-chat" ResponseContentFormat="ResponseContentFormat.Markdown">
     <MessageContentTemplate>
         <div class="my-chat-content">
             @ToHtml(context.Content)

diff --git a/CS/DevExpress.AI.Samples.Blazor/Components/Pages/Chat-MessageSent.razor b/CS/DevExpress.AI.Samples.Blazor/Components/Pages/Chat-MessageSent.razor
@@ -5,8 +5,7 @@
 <DxAIChat CssClass="my-chat" MessageSent="MessageSent" />
 
 @code {
-    void MessageSent(MessageSentEventArgs args) {
-        var message = new Message(MessageRole.Assistant, $"Processed: {args.Content}");
-        args.SendMessage(message);
+    async Task MessageSent(MessageSentEventArgs args) {
+        await args.Chat.SendMessage($"Processed: {args.Content}", Microsoft.Extensions.AI.ChatRole.Assistant);
     }
 }
diff --git a/CS/DevExpress.AI.Samples.Blazor/DevExpress.AI.Samples.Blazor.csproj b/CS/DevExpress.AI.Samples.Blazor/DevExpress.AI.Samples.Blazor.csproj
@@ -7,11 +7,13 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="DevExpress.AIIntegration.Azure.OpenAI" Version="24.2.1-alpha-24241" />
-    <PackageReference Include="DevExpress.AIIntegration.Blazor.Chat" Version="24.2.1-alpha-24241" />
-    <PackageReference Include="DevExpress.AIIntegration.Blazor.Common" Version="24.2.1-alpha-24241" />
-    <PackageReference Include="DevExpress.AIIntegration.Web" Version="24.2.1-alpha-24241" />
-    <PackageReference Include="Markdig" Version="0.37.0" />
+    <PackageReference Include="Azure.AI.OpenAI" Version="2.1.0-beta.1" />
+    <PackageReference Include="DevExpress.AIIntegration.Blazor" Version="24.2.1-alpha-24305" />
+    <PackageReference Include="DevExpress.AIIntegration.OpenAI" Version="24.2.1-alpha-24305" />
+    <PackageReference Include="Markdig" Version="0.38.0" />
+    <PackageReference Include="Microsoft.Extensions.AI" Version="9.0.0-preview.9.24556.5" />
+    <PackageReference Include="Microsoft.Extensions.AI.Abstractions" Version="9.0.0-preview.9.24556.5" />
+    <PackageReference Include="Microsoft.Extensions.AI.OpenAI" Version="9.0.0-preview.9.24556.5" />
     <EmbeddedResource Include="Data\Restaurant Menu.pdf" />
   </ItemGroup>
 </Project>
diff --git a/CS/DevExpress.AI.Samples.Blazor/Program.cs b/CS/DevExpress.AI.Samples.Blazor/Program.cs
@@ -1,7 +1,8 @@
-using Azure.AI.OpenAI;
-using Azure;
+using System.ClientModel;
+using Azure.AI.OpenAI;
 using DevExpress.AI.Samples.Blazor.Components;
 using DevExpress.AIIntegration;
+using Microsoft.Extensions.AI;
 
 var builder = WebApplication.CreateBuilder(args);
 
@@ -11,14 +12,19 @@
 
 string azureOpenAIEndpoint = Environment.GetEnvironmentVariable("AZURE_OPENAI_ENDPOINT");
 string azureOpenAIKey = Environment.GetEnvironmentVariable("AZURE_OPENAI_API_KEY");
+string deploymentName = string.Empty;
+
+var azureClient = new AzureOpenAIClient(
+    new Uri(azureOpenAIEndpoint),
+    new ApiKeyCredential(azureOpenAIKey));
 
 builder.Services.AddDevExpressBlazor();
+builder.Services.AddChatClient(cfg => 
+    cfg.Use(azureClient.AsChatClient((deploymentName)))
+);
 builder.Services.AddDevExpressAI((config) => {
-    var client = new AzureOpenAIClient(
-        new Uri(azureOpenAIEndpoint),
-        new AzureKeyCredential(azureOpenAIKey));
-    config.RegisterChatClientOpenAIService(client, "gpt4o");
-    config.RegisterOpenAIAssistants(client, "gpt4o");
+    //Reference the DevExpress.AIIntegration.OpenAI NuGet package to use Open AI Asisstants
+    config.RegisterOpenAIAssistants(azureClient, "gpt4o"); 
 });
 var app = builder.Build();
 

diff --git a/CS/DevExpress.AI.Samples.MAUIBlazor/DevExpress.AI.Samples.MAUIBlazor.csproj b/CS/DevExpress.AI.Samples.MAUIBlazor/DevExpress.AI.Samples.MAUIBlazor.csproj
@@ -43,17 +43,18 @@
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="DevExpress.Data" Version="24.2.1-alpha-24240" />
+        <PackageReference Include="DevExpress.Data" Version="24.2.1-alpha-24305" />
         <PackageReference Include="Microsoft.Maui.Controls" Version="$(MauiVersion)" />
         <PackageReference Include="Microsoft.Maui.Controls.Compatibility" Version="$(MauiVersion)" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebView.Maui" Version="$(MauiVersion)" />
         <PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="8.0.0" />
 
-        <PackageReference Include="DevExpress.AIIntegration.Azure.OpenAI" Version="24.2.1-alpha-24241" />
-        <PackageReference Include="DevExpress.AIIntegration.Blazor.Chat" Version="24.2.1-alpha-24241" />
-        <PackageReference Include="DevExpress.AIIntegration.Blazor.Common" Version="24.2.1-alpha-24241" />
-        <PackageReference Include="DevExpress.AIIntegration.Web" Version="24.2.1-alpha-24241" />
-        <PackageReference Include="DevExpress.Maui.Editors" Version="24.2.1-alpha-24239-25131" />
+        <PackageReference Include="Azure.AI.OpenAI" Version="2.0.0" />
+        <PackageReference Include="Microsoft.Extensions.AI.OpenAI" Version="9.0.0-preview.9.24525.1" />
+        <PackageReference Include="DevExpress.AIIntegration.Blazor.Chat" Version="24.2.1-alpha-24305" />
+        <PackageReference Include="DevExpress.AIIntegration.Blazor.Common" Version="24.2.1-alpha-24305" />
+        <PackageReference Include="DevExpress.AIIntegration.Web" Version="24.2.1-alpha-24305" />
+        <PackageReference Include="DevExpress.Maui.Editors" Version="24.2.*-*" />
     </ItemGroup>
 
 </Project>
diff --git a/CS/DevExpress.AI.Samples.MAUIBlazor/MainViewModel.cs b/CS/DevExpress.AI.Samples.MAUIBlazor/MainViewModel.cs
@@ -1,6 +1,6 @@
 using CommunityToolkit.Mvvm.ComponentModel;
 using CommunityToolkit.Mvvm.Input;
-
+using Microsoft.Extensions.AI;
 namespace DevExpress.AI.Samples.MAUIBlazor;
 
 partial class MainViewModel : ObservableObject {
@@ -11,10 +11,8 @@ partial class MainViewModel : ObservableObject {
     [RelayCommand(CanExecute = nameof(CanSendMessage))]
     async Task SendMessageAsync() {
         var service = DxChatEncapsulationService.Instance;
-        service.DxChatUI.CurrentMessage = Message!;
+        await service.DxChatUI?.SendMessage(Message, ChatRole.User);
         Message = null;
-        if (service.DxChatUI.SendButton != null)
-            await service.DxChatUI.SendButton.Click.InvokeAsync();
     }
 
     bool CanSendMessage() {

diff --git a/CS/DevExpress.AI.Samples.MAUIBlazor/MauiProgram.cs b/CS/DevExpress.AI.Samples.MAUIBlazor/MauiProgram.cs
@@ -1,8 +1,9 @@
-using Azure;
+using System.ClientModel;
+using Azure;
 using Azure.AI.OpenAI;
-using DevExpress.AIIntegration;
 using DevExpress.Maui;
 using DevExpress.Maui.Core;
+using Microsoft.Extensions.AI;
 using Microsoft.Extensions.Logging;
 
 namespace DevExpress.AI.Samples.MAUIBlazor;
@@ -24,13 +25,14 @@ public static MauiApp CreateMauiApp() {
         string azureOpenAIEndpoint = Environment.GetEnvironmentVariable("AZURE_OPENAI_ENDPOINT")!;
         string azureOpenAIKey = Environment.GetEnvironmentVariable("AZURE_OPENAI_API_KEY")!;
 
+        var chatClient = new AzureOpenAIClient(
+            new Uri(azureOpenAIEndpoint),
+            new ApiKeyCredential(azureOpenAIKey)).AsChatClient("gpt4o");
+
         builder.Services.AddMauiBlazorWebView();
         builder.Services.AddDevExpressBlazor();
         builder.Services.AddDevExpressAI((config) => {
-            config.RegisterChatClientOpenAIService(
-                new AzureOpenAIClient(
-                new Uri(azureOpenAIEndpoint),
-                new AzureKeyCredential(azureOpenAIKey)), "gpt4o");
+            config.RegisterChatClient(chatClient);
         });
         builder.Services.AddSingleton<ISelfEncapsulationService, DxChatEncapsulationService>();
 
@@ -41,4 +43,4 @@ public static MauiApp CreateMauiApp() {
 
         return builder.Build();
     }
-}
+}
diff --git a/CS/DevExpress.AI.Samples.MAUIBlazor/wwwroot/index.html b/CS/DevExpress.AI.Samples.MAUIBlazor/wwwroot/index.html
@@ -15,7 +15,12 @@
             min-height: 100vh;
             display: grid;
         }
-        .dxbl-chatui-root .dxbl-chatui-submitarea {
+
+        .dxbl-chatui-root {
+            min-height: 100vh;
+        }
+
+        .dxbl-chatui-root .dxbl-chatui .dxbl-chatui-submitarea {
             display: none;
         }
 

diff --git a/CS/DevExpress.AI.Samples.WPFBlazor/DevExpress.AI.Samples.WPFBlazor.csproj b/CS/DevExpress.AI.Samples.WPFBlazor/DevExpress.AI.Samples.WPFBlazor.csproj
@@ -6,16 +6,18 @@
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
     <UseWPF>true</UseWPF>
-	<RootNamespace>WPFBlazor</RootNamespace>
+    <RootNamespace>WPFBlazor</RootNamespace>
+    <EnableWindowsTargeting>true</EnableWindowsTargeting>
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="DevExpress.AIIntegration.Azure.OpenAI" Version="24.2.1-alpha-24241" />
-    <PackageReference Include="DevExpress.AIIntegration.Blazor.Chat" Version="24.2.1-alpha-24241" />
-    <PackageReference Include="DevExpress.AIIntegration.Blazor.Common" Version="24.2.1-alpha-24241" />
-    <PackageReference Include="DevExpress.AIIntegration.Web" Version="24.2.1-alpha-24241" />
-    <PackageReference Include="DevExpress.Wpf.Core" Version="24.2.1-alpha-24241" />
+    <PackageReference Include="Azure.AI.OpenAI" Version="2.0.0" />
+    <PackageReference Include="DevExpress.AIIntegration.Blazor.Chat" Version="24.2.1-alpha-24305" />
+    <PackageReference Include="DevExpress.AIIntegration.Blazor.Common" Version="24.2.1-alpha-24305" />
+    <PackageReference Include="DevExpress.AIIntegration.Web" Version="24.2.1-alpha-24305" />
+    <PackageReference Include="DevExpress.Wpf.Core" Version="24.2.1-alpha-24305" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebView.Wpf" Version="8.0.70" />
+    <PackageReference Include="Microsoft.Extensions.AI.OpenAI" Version="9.0.0-preview.9.24525.1" />
   </ItemGroup>
 
 </Project>
diff --git a/CS/DevExpress.AI.Samples.WPFBlazor/MainViewModel.cs b/CS/DevExpress.AI.Samples.WPFBlazor/MainViewModel.cs
@@ -4,6 +4,8 @@
 using Azure.AI.OpenAI;
 using DevExpress.Mvvm;
 using DevExpress.AIIntegration;
+using System.ClientModel;
+using Microsoft.Extensions.AI;
 
 namespace DevExpress.AI.Samples.WPFBlazor {
     class MainViewModel : BindableBase {
@@ -37,14 +39,15 @@ void Initialize()
             string azureOpenAIEndpoint = Environment.GetEnvironmentVariable("AZURE_OPENAI_ENDPOINT");
             string azureOpenAIKey = Environment.GetEnvironmentVariable("AZURE_OPENAI_API_KEY");
 
+            var chatClient = new AzureOpenAIClient(
+                    new Uri(azureOpenAIEndpoint),
+                    new ApiKeyCredential(azureOpenAIKey)).AsChatClient("gpt4o");
+
             services.AddWpfBlazorWebView();
             services.AddDevExpressBlazor();
             services.AddDevExpressAI((config) =>
             {
-                config.RegisterChatClientOpenAIService(
-                    new AzureOpenAIClient(
-                    new Uri(azureOpenAIEndpoint),
-                    new AzureKeyCredential(azureOpenAIKey)), "gpt4o");
+                config.RegisterChatClient(chatClient);
             });
             services.AddSingleton<ISelfEncapsulationService>(service);
 
@@ -53,9 +56,7 @@ void Initialize()
 
         void SendMesssage()
         {
-            service.DxChatUI.CurrentMessage = Message;
-            Message = null;
-            service.DxChatUI.SendButton?.Click.InvokeAsync();
+            service.DxChatUI?.SendMessage(Message, ChatRole.User);
         }
 
         bool CanSendMessage()

diff --git a/CS/DevExpress.AI.Samples.WPFBlazor/MainWindow.xaml b/CS/DevExpress.AI.Samples.WPFBlazor/MainWindow.xaml
@@ -20,11 +20,11 @@
     </dxmvvm:Interaction.Behaviors>
     <Grid>
         <Grid.RowDefinitions>
-            <RowDefinition Height="400"/>
+            <RowDefinition Height="410"/>
             <RowDefinition Height="*"/>
         </Grid.RowDefinitions>
         <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="8*"/>
+            <ColumnDefinition Width="3*"/>
             <ColumnDefinition Width="*"/>
         </Grid.ColumnDefinitions>
         <blazor:BlazorWebView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"

diff --git a/CS/DevExpress.AI.Samples.WPFBlazor/WpfChatUIWrapper.cs b/CS/DevExpress.AI.Samples.WPFBlazor/WpfChatUIWrapper.cs
@@ -12,7 +12,7 @@ public interface ISelfEncapsulationService
 
     class DxChatEncapsulationService : ISelfEncapsulationService
     {
-        public WpfChatUIWrapper DxChatUI { get; set; }
+        public WpfChatUIWrapper? DxChatUI { get; set; }
         public void Initialize(WpfChatUIWrapper dxChatUI)
         {
             this.DxChatUI = dxChatUI;
@@ -35,6 +35,7 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
         }
     }
 
-    public class MyDictionary : Dictionary<string, object> { 
+    public class MyDictionary : Dictionary<string, object>
+    {
     }
-}
+}
diff --git a/CS/DevExpress.AI.Samples.WPFBlazor/wwwroot/index.html b/CS/DevExpress.AI.Samples.WPFBlazor/wwwroot/index.html
@@ -11,7 +11,11 @@
             display: grid;
         }
 
-        .dxbl-chatui-root .dxbl-chatui .dxbl-chartui-submitarea {
+        .dxbl-chatui-root {
+            min-height: 100vh;
+        }
+
+        .dxbl-chatui-root .dxbl-chatui .dxbl-chatui-submitarea {
             display: none;
         }
     </style>
@@ -26,8 +30,8 @@
 </head>
 
 <body>
-    <div id="app">Loading...</div>
-    <script src="_framework/blazor.webview.js"></script>
+<div id="app">Loading...</div>
+<script src="_framework/blazor.webview.js"></script>
 </body>
 
 </html>
diff --git a/CS/DevExpress.AI.Samples.WinBlazor/DevExpress.AI.Samples.WinBlazor.csproj b/CS/DevExpress.AI.Samples.WinBlazor/DevExpress.AI.Samples.WinBlazor.csproj
@@ -7,19 +7,19 @@
     <UseWindowsForms>true</UseWindowsForms>
     <ImplicitUsings>enable</ImplicitUsings>
     <StartupObject>DevExpress.AI.Samples.WinBlazor.Program</StartupObject>
+    <EnableWindowsTargeting>true</EnableWindowsTargeting>
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="DevExpress.AIIntegration.Azure.OpenAI" Version="24.2.1-alpha-24241" />
-    <PackageReference Include="DevExpress.AIIntegration.Blazor.Chat" Version="24.2.1-alpha-24241" />
-    <PackageReference Include="DevExpress.AIIntegration.Blazor.Common" Version="24.2.1-alpha-24241" />
-    <PackageReference Include="DevExpress.AIIntegration.Desktop" Version="24.2.1-alpha-24241" />
-    <PackageReference Include="DevExpress.AIIntegration.Web" Version="24.2.1-alpha-24241" />
-    <PackageReference Include="DevExpress.Win.Design" Version="24.2.1-alpha-24241" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebView.WindowsForms" Version="8.0.70" />
+    <PackageReference Include="Azure.AI.OpenAI" Version="2.0.0" />
+    <PackageReference Include="DevExpress.AIIntegration.WinForms.Chat" Version="24.2.1-alpha-24305" />
+    <PackageReference Include="Markdig" Version="0.37.0" />
+    <PackageReference Include="Microsoft.Extensions.AI.Abstractions" Version="9.0.0-preview.9.24525.1" />
+    <PackageReference Include="Microsoft.Extensions.AI.OpenAI" Version="9.0.0-preview.9.24525.1" />
+    <PackageReference Include="DevExpress.Win.Design" Version="24.2.1-alpha-24305" />
   </ItemGroup>
 
   <ItemGroup>
-    <ProjectReference Include="..\DevExpress.AI.Samples.Blazor\DevExpress.AI.Samples.Blazor.csproj" />
+    <_ContentIncludedByDefault Remove="wwwroot\index.html" />
   </ItemGroup>
 </Project>