DevExpress-Examples · LanaDX · Nov 22, 2024 · Oct 31, 2024 · Oct 31, 2024 · Oct 31, 2024
diff --git a/CODEOWNERS b/CODEOWNERS
@@ -0,0 +1 @@
+*       @DevExpressExampleBot
diff --git a/...ress.AI.Samples.Blazor.Editors/Components/AdditionalItems/ShakespeareAIContextMenuItem.cs b/...ress.AI.Samples.Blazor.Editors/Components/AdditionalItems/ShakespeareAIContextMenuItem.cs
@@ -0,0 +1,17 @@
+using DevExpress.AIIntegration;
+using DevExpress.AIIntegration.Blazor.RichEdit;
+using DevExpress.AIIntegration.Extensions;
+using Microsoft.AspNetCore.Components;
+
+namespace DevExpress.AI.Samples.Blazor.Editors.Components.AdditionalItems {
+    public class ShakespeareAIContextMenuItem : BaseAIContextMenuItem {
+        [Inject] IAIExtensionsContainer? aIExtensionsContainer { get; set; }
+
+        protected override string DefaultItemText => "Rewrite like Shakespeare";
+
+        protected override Task<TextResponse> GetCommandTextResult(string text) {
+            var customExtension = aIExtensionsContainer.CreateCustomPromptExtension();
+            return customExtension.ExecuteAsync(new CustomPromptRequest("Rewrite the following text in William Shakespeare style.", text));
+        }
+    }
+}
diff --git a/...vExpress.AI.Samples.Blazor.Editors/Components/AdditionalItems/ShakespeareAIToolbarItem.cs b/...vExpress.AI.Samples.Blazor.Editors/Components/AdditionalItems/ShakespeareAIToolbarItem.cs
@@ -0,0 +1,17 @@
+using DevExpress.AIIntegration;
+using DevExpress.AIIntegration.Blazor.HtmlEditor;
+using DevExpress.AIIntegration.Extensions;
+using Microsoft.AspNetCore.Components;
+
+namespace DevExpress.AI.Samples.Blazor.Editors.Components.AdditionalItems {
+    public class ShakespeareAIToolbarItem: BaseAIToolbarItem {
+        [Inject] IAIExtensionsContainer? aIExtensionsContainer { get; set; }
+
+        protected override string DefaultItemText => "Rewrite like Shakespeare";
+
+        protected override Task<TextResponse> GetCommandTextResult(string text) {
+            var customExtension = aIExtensionsContainer.CreateCustomPromptExtension();
+            return customExtension.ExecuteAsync(new CustomPromptRequest("Rewrite the following text in William Shakespeare style.", text));
+        }
+    }
+}
diff --git a/CS/DevExpress.AI.Samples.Blazor.Editors/Components/App.razor b/CS/DevExpress.AI.Samples.Blazor.Editors/Components/App.razor
@@ -12,8 +12,8 @@
 </head>
 
 <body>
-    <Routes @rendermode="InteractiveServer" />
-    <script src="_framework/blazor.web.js"></script>
+<Routes @rendermode="InteractiveServer" />
+<script src="_framework/blazor.web.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/CS/DevExpress.AI.Samples.Blazor.Editors/Components/Pages/HtmlEditor.razor b/CS/DevExpress.AI.Samples.Blazor.Editors/Components/Pages/HtmlEditor.razor
@@ -1,73 +1,74 @@
-@page "/htmleditor"
-@using DevExpress.AIIntegration.Blazor.HtmlEditor
-@using System.Reflection
-
-<DxHtmlEditor @bind-Markup="Value" CssClass="my-editor" BindMarkupMode="HtmlEditorBindMarkupMode.OnLostFocus">
-    <AdditionalSettings>
-        <SummaryAISettings />
-        <ExplainAISettings />
-        <ProofreadAISettings />
-        <ExpandAISettings />
-        <ShortenAISettings />
-        <CustomAISettings />
-        <RewriteAISettings />
-        <ToneAISettings />
-        <TranslateAISettings Languages="@("German, French, Chinese")" />
-    </AdditionalSettings>
-</DxHtmlEditor>
-
-@code {
-    public string Value { get; set; } = @"<h2>
-                        HTML Editor
-                    </h2><br>
-                    <p>The HTML Editor component for Blazor is a WYSIWYG (what you see is what you get) text editor that allows users to format text and add graphics. The document can use HTML or Markdown format.</p>
-                    <p>Supported features:</p>
-                    <ul>
-                        <li>Inline formats:
-                            <ul>
-                                <li><strong>Bold</strong>, <em>italic</em>, <s>strikethrough</s> text formatting</li>
-                                <li>Font, size, color changes (HTML only)</li>
-                            </ul>
-                        </li>
-                        <li>Block formats:
-                            <ul>
-                                <li>Headings</li>
-                                <li>Text alignment</li>
-                                <li>Lists (bullet and numbered)</li>
-                                <li>Code blocks</li>
-                                <li>Quotes</li>
-                            </ul>
-                        </li>
-                        <li>HTML and Markdown support</li>
-                        <li>Variable support: produce documents based on templates</li>
-                        <li>Toolbar with adaptive layout support</li>
-                        <li>Insert images: specify a URL or upload from the local file system</li>
-                        <li>Table support</li>
-                    </ul>
-                    <p>Supported browsers:
-                    <table>
-                        <tbody>
-                            <tr>
-                                <td><strong>Google Chrome (including Android)</strong></td>
-                                <td>Latest</td>
-                            </tr>
-                            <tr>
-                                <td><strong>Apple Safari (including iOS)</strong></td>
-                                <td>Latest</td>
-                            </tr>
-                            <tr>
-                                <td><strong>Mozilla Firefox</strong></td>
-                                <td>Latest</td>
-                            </tr>
-                            <tr>
-                                <td><strong>Microsoft Edge</strong></td>
-                                <td>Latest</td>
-                            </tr>
-                            <tr>
-                                <td><strong><a href='https://support.microsoft.com/en-us/microsoft-edge/what-is-microsoft-edge-legacy-3e779e55-4c55-08e6-ecc8-2333768c0fb0' rel='noopener noreferrer' target='_blank'>Microsoft Edge Legacy</a></strong></td>
-                                <td>Not supported</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                    <br>";
+@page "/htmleditor"
+@using DevExpress.AI.Samples.Blazor.Editors.Components.AdditionalItems
+@using DevExpress.AIIntegration.Blazor.HtmlEditor
+
+<DxHtmlEditor @bind-Markup="Value" CssClass="my-editor" BindMarkupMode="HtmlEditorBindMarkupMode.OnLostFocus">
+    <AdditionalItems>
+        <ShakespeareAIToolbarItem />
+        <SummarizeAIToolbarItem />
+        <ExplainAIToolbarItem />
+        <ProofreadAIToolbarItem />
+        <ExpandAIToolbarItem />
+        <ShortenAIToolbarItem />
+        <AskAssistantAIToolbarItem />
+        <ChangeStyleAIToolbarItem />
+        <ChangeToneAIToolbarItem />
+        <TranslateAIToolbarItem Languages="@("German, French, Chinese")" />
+    </AdditionalItems>
+</DxHtmlEditor>
+
+@code {
+public string Value { get; set; } = @"<h2>
+            HTML Editor
+        </h2><br>
+        <p>The HTML Editor component for Blazor is a WYSIWYG (what you see is what you get) text editor that allows users to format text and add graphics. The document can use HTML or Markdown format.</p>
+        <p>Supported features:</p>
+        <ul>
+            <li>Inline formats:
+                <ul>
+                    <li><strong>Bold</strong>, <em>italic</em>, <s>strikethrough</s> text formatting</li>
+                    <li>Font, size, color changes (HTML only)</li>
+                </ul>
+            </li>
+            <li>Block formats:
+                <ul>
+                    <li>Headings</li>
+                    <li>Text alignment</li>
+                    <li>Lists (bullet and numbered)</li>
+                    <li>Code blocks</li>
+                    <li>Quotes</li>
+                </ul>
+            </li>
+            <li>HTML and Markdown support</li>
+            <li>Variable support: produce documents based on templates</li>
+            <li>Toolbar with adaptive layout support</li>
+            <li>Insert images: specify a URL or upload from the local file system</li>
+            <li>Table support</li>
+        </ul>
+        <p>Supported browsers:
+        <table>
+            <tbody>
+                <tr>
+                    <td><strong>Google Chrome (including Android)</strong></td>
+                    <td>Latest</td>
+                </tr>
+                <tr>
+                    <td><strong>Apple Safari (including iOS)</strong></td>
+                    <td>Latest</td>
+                </tr>
+                <tr>
+                    <td><strong>Mozilla Firefox</strong></td>
+                    <td>Latest</td>
+                </tr>
+                <tr>
+                    <td><strong>Microsoft Edge</strong></td>
+                    <td>Latest</td>
+                </tr>
+                <tr>
+                    <td><strong><a href='https://support.microsoft.com/en-us/microsoft-edge/what-is-microsoft-edge-legacy-3e779e55-4c55-08e6-ecc8-2333768c0fb0' rel='noopener noreferrer' target='_blank'>Microsoft Edge Legacy</a></strong></td>
+                    <td>Not supported</td>
+                </tr>
+            </tbody>
+        </table>
+        <br>";
 }
diff --git a/CS/DevExpress.AI.Samples.Blazor.Editors/Components/Pages/RichEdit.razor b/CS/DevExpress.AI.Samples.Blazor.Editors/Components/Pages/RichEdit.razor
@@ -1,31 +1,36 @@
 @page "/"
 @using DevExpress.AIIntegration.Blazor.RichEdit
+@using DevExpress.AI.Samples.Blazor.Editors.Components.AdditionalItems
 @using DevExpress.Blazor.RichEdit
 @using System.Reflection
 
 <DxRichEdit DocumentContent="DocumentContent" CssClass="my-editor">
-    <AdditionalSettings>
-        <SummaryAISettings />
-        <ExplainAISettings />
-        <ProofreadAISettings />
-        <ExpandAISettings />
-        <ShortenAISettings />
-        <CustomAISettings />
-        <RewriteAISettings />
-        <ToneAISettings />
-        <TranslateAISettings Languages="@("German, French, Chinese")" />
-    </AdditionalSettings>
+    <AdditionalItems>
+        <ShakespeareAIContextMenuItem />
+        <SummarizeAIContextMenuItem />
+        <ExplainAIContextMenuItem />
+        <ProofreadAIContextMenuItem />
+        <ExpandAIContextMenuItem />
+        <ShortenAIContextMenuItem />
+        <AskAssistantAIContextMenuItem />
+        <ChangeStyleAIContextMenuItem />
+        <ChangeToneAIContextMenuItem />
+        <TranslateAIContextMenuItem Languages="@("German, French, Chinese")" />
+    </AdditionalItems>
 </DxRichEdit>
 
 @code {
     const string DocumentResourceName = "DevExpress.AI.Samples.Blazor.Editors.Docs.Example.docx";
     byte[] DocumentContent { get; set; }
-    protected override void OnInitialized() {
-        using(MemoryStream ms = new MemoryStream()) {
+    protected override void OnInitialized()
+    {
+        using (var ms = new MemoryStream())
+        {
             var stream = Assembly.GetExecutingAssembly().GetManifestResourceStream(DocumentResourceName);
-            stream.CopyTo(ms);
+            stream?.CopyTo(ms);
             DocumentContent = ms.ToArray();
         }
+
         base.OnInitialized();
     }
 }
diff --git a/CS/DevExpress.AI.Samples.Blazor.Editors/Components/_Imports.razor b/CS/DevExpress.AI.Samples.Blazor.Editors/Components/_Imports.razor
@@ -9,4 +9,4 @@
 @using DevExpress.AI.Samples.Blazor.Editors
 @using DevExpress.AI.Samples.Blazor.Editors.Components
 @using DevExpress.Blazor
-@* @using DevExpress.AIIntegration.Blazor.Components.ChatUI.Models *@
+@using DevExpress.Blazor.Office
diff --git a/CS/DevExpress.AI.Samples.Blazor.Editors/DevExpress.AI.Samples.Blazor.Editors.csproj b/CS/DevExpress.AI.Samples.Blazor.Editors/DevExpress.AI.Samples.Blazor.Editors.csproj
@@ -6,19 +6,21 @@
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>
 
-  <ItemGroup>
-    <None Remove="Docs\Example.docx" />
+  <ItemGroup>
+    <None Remove="Docs\Example.docx" />
   </ItemGroup>
 
-  <ItemGroup>
-    <EmbeddedResource Include="Docs\Example.docx" />
+  <ItemGroup>
+    <EmbeddedResource Include="Docs\Example.docx" />
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="DevExpress.AIIntegration.Azure.OpenAI" Version="24.2.1-alpha-24246" />
-    <PackageReference Include="DevExpress.AIIntegration.Blazor.HtmlEditor" Version="24.2.1-alpha-24246" />
-    <PackageReference Include="DevExpress.AIIntegration.Blazor.RichEdit" Version="24.2.1-alpha-24246" />
-    <PackageReference Include="DevExpress.AIIntegration.Web" Version="24.2.1-alpha-24246" />
+    <PackageReference Include="Azure.AI.OpenAI" Version="2.1.0-beta.2" />
+    <PackageReference Include="Azure.Identity" Version="1.13.1" />
+    <PackageReference Include="DevExpress.AIIntegration.Blazor" Version="24.2.1-alpha-24319" />
+    <PackageReference Include="DevExpress.Blazor.RichEdit" Version="24.2.1-alpha-24319" />
     <PackageReference Include="Markdig" Version="0.37.0" />
+    <PackageReference Include="Microsoft.Extensions.AI" Version="9.0.0-preview.9.24556.5" />
+    <PackageReference Include="Microsoft.Extensions.AI.OpenAI" Version="9.0.0-preview.9.24556.5" />
   </ItemGroup>
 </Project>
diff --git a/CS/DevExpress.AI.Samples.Blazor.Editors/Program.cs b/CS/DevExpress.AI.Samples.Blazor.Editors/Program.cs
@@ -1,25 +1,25 @@
-using Azure.AI.OpenAI;
-using Azure;
+using Azure;
+using Azure.AI.OpenAI;
 using DevExpress.AI.Samples.Blazor.Editors.Components;
-using DevExpress.AIIntegration;
+using Microsoft.Extensions.AI;
 
 var builder = WebApplication.CreateBuilder(args);
 
 // Add services to the container.
 builder.Services.AddRazorComponents()
-.AddInteractiveServerComponents();
+    .AddInteractiveServerComponents();
 
-string azureOpenAIEndpoint = Environment.GetEnvironmentVariable("AZURE_OPENAI_ENDPOINT");
+string azureOpenAIEndpoint = Environment.GetEnvironmentVariable("AZURE_OPENAI_ENDPOINT");
 string azureOpenAIKey = Environment.GetEnvironmentVariable("AZURE_OPENAI_API_KEY");
+string deploymentName = string.Empty;
+
+IChatClient chatClient = new AzureOpenAIClient(
+    new Uri(azureOpenAIEndpoint),
+    new AzureKeyCredential(azureOpenAIKey)).AsChatClient(deploymentName);
 
 builder.Services.AddDevExpressBlazor();
-builder.Services.AddDevExpressAI((config) => {
-    var client = new AzureOpenAIClient(
-        new Uri(azureOpenAIEndpoint),
-        new AzureKeyCredential(azureOpenAIKey));
-    config.RegisterChatClientOpenAIService(client, "gpt4o");
-    config.RegisterOpenAIAssistants(client, "gpt4o");
-});
+builder.Services.AddChatClient(config => config.Use(chatClient));
+builder.Services.AddDevExpressAI();
 var app = builder.Build();
 
 // Configure the HTTP request pipeline.
@@ -37,4 +37,4 @@
 app.MapRazorComponents<App>()
     .AddInteractiveServerRenderMode();
 
-app.Run();
+app.Run();