Merge pull request #1 from DevExpress-Examples/vl_review

Readme and fixes

Author: vl-albedo

CS/AiGrammarChecker.csproj

@@ -9,7 +9,7 @@
     <PackageReference Include="DevExpress.Blazor" Version="25.1.*-*" />
     <PackageReference Include="DevExpress.AIIntegration.Blazor" Version="25.1.*-*" />
     <PackageReference Include="Markdig" Version="0.41.3" />
-    
+    <PackageReference Include="HtmlSanitizer" Version="9.1.*-*" />
     <PackageReference Include="Microsoft.Extensions.AI" Version="9.5.0" />
     <PackageReference Include="Microsoft.Extensions.AI.OpenAI" Version="9.5.0-preview.1.25265.7" />
   </ItemGroup>

CS/Components/Pages/Index.razor

@@ -3,6 +3,8 @@
 @using Microsoft.Extensions.AI
 @using System.Text.RegularExpressions
 @using System.Text
+@using Markdig
+@using Ganss.Xss
 @rendermode InteractiveServer
 <PageTitle>Welcome</PageTitle>
 <DxDialogProvider />
@@ -40,7 +42,7 @@
                                           PositionTarget=".info-icon-btn"
                                           PreventCloseOnPositionTargetClick="true"
                                           Width="240">
-                                    Specifies the randomness of response text. Higher values result in a more random output, while lower values make the output more focused and deterministic. Available values are from 0 to 2.
+                                    Determines the randomness and creativity of responses. Low temperature makes the output predictable, factual, and consistent. High temperature makes the output more creative and diverse, but increases the chance of hallucinations. Range: 0–2.
                                 </DxFlyout>
                             </div>
                         </CaptionTemplate>
@@ -63,7 +65,7 @@
                                           PositionTarget=".info-icon-btn"
                                           PreventCloseOnPositionTargetClick="true"
                                           Width="240">
-                                    Language models process text by dividing it into tokens, which can be words or groups of characters. Use the MaxOutputTokens property to limit the maximum number of tokens generated in a single output of a GPT model.
+                                    Determines the maximum length of the model's response. Tokens represent words or pieces of words; approximately 750 words equal 1,000 tokens.
                                 </DxFlyout>
                             </div>
                         </CaptionTemplate>
@@ -74,7 +76,7 @@
 
                     <DxFormLayoutItem ColSpanMd="12">
                         <Template>
-                            <DxButton Text="Send example prompt"
+                            <DxButton Text="Send sample message"
                                       Click="@SendSampleMessage"
                                       CssClass="width-full" />
                         </Template>
@@ -111,9 +113,9 @@
 
 <DxPopup @bind-Visible="@IsSystemPromptVisible"
          ShowFooter="true"
-         HeaderText="Edit Contact">
+         HeaderText="Instructions">
     <BodyContentTemplate>
-        The system prompt is provided below. You may edit it, and any changes will take effect in the chat after you clear it.
+        Modify the system prompt below. Changes apply after you clear the current chat session.
         <DxMemo @bind-Text="SystemPrompt" CssClass="height-300" />
     </BodyContentTemplate>
 </DxPopup>
@@ -124,6 +126,7 @@
     [Inject] IChatClient ChatClient { get; set; } = default!;
     [Inject] IDialogService DialogService { get; set; }
     DxAIChat RefAiChat;
+    private readonly HtmlSanitizer sanitizer = new HtmlSanitizer();
     string SystemPrompt { get; set; }
     bool IsSystemPromptVisible { get; set; } = false;
     float? Temperature { get; set; } = 0;
@@ -147,6 +150,12 @@
             ChatRole.User);
     }
 
+    MarkupString ToHtml(string markdown) {
+        string html = Markdown.ToHtml(markdown);
+        html = sanitizer.Sanitize(html);
+        return new MarkupString(html);
+    }
+
     void ResetChat() {
 
         List<BlazorChatMessage> initialMessages = new(){