Add a grammar and spell checker assistant (#72)

app/MindWork AI Studio/Components/App.razor

@@ -13,6 +13,7 @@
     <link href="system/MudBlazor.Markdown/MudBlazor.Markdown.min.css" rel="stylesheet" />
     <link href="app.css" rel="stylesheet" />
     <HeadOutlet/>
+    <script src="diff.js"></script>
 </head>
 
 <body style="overflow: hidden;">

app/MindWork AI Studio/Components/AssistantBase.razor

@@ -16,10 +16,44 @@
             }
         </MudForm>
         <Issues IssuesData="@this.inputIssues"/>
-        
-        @if (this.resultingContentBlock is not null)
+
+        @if (this.isProcessing)
         {
-            <ContentBlockComponent Role="@this.resultingContentBlock.Role" Type="@this.resultingContentBlock.ContentType" Time="@this.resultingContentBlock.Time" Content="@this.resultingContentBlock.Content" Class="mr-2"/>
+            <MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="mb-6" />
+        }
+        <div id="@ASSISTANT_RESULT_DIV_ID" class="mr-2 mt-3">
+            @if (this.ShowResult && this.resultingContentBlock is not null)
+            {
+                <ContentBlockComponent Role="@this.resultingContentBlock.Role" Type="@this.resultingContentBlock.ContentType" Time="@this.resultingContentBlock.Time" Content="@this.resultingContentBlock.Content"/>
+            }
+        </div>
+        
+        <div id="@AFTER_RESULT_DIV_ID" class="mt-3">
+        </div>
+        
+        @if (this.FooterButtons.Count > 0)
+        {
+            <MudStack Row="@true" Wrap="Wrap.Wrap" Class="mt-3 mr-2">
+                @foreach (var buttonData in this.FooterButtons)
+                {
+                    switch (buttonData)
+                    {
+                        case var _ when !string.IsNullOrWhiteSpace(buttonData.Tooltip):
+                            <MudTooltip Text="@buttonData.Tooltip">
+                                <MudButton Variant="Variant.Filled" Color="@buttonData.Color" StartIcon="@GetButtonIcon(buttonData.Icon)" OnClick="async () => await buttonData.AsyncAction()">
+                                    @buttonData.Text
+                                </MudButton>
+                            </MudTooltip>
+                            break;
+
+                        default:
+                            <MudButton Variant="Variant.Filled" Color="@buttonData.Color" StartIcon="@GetButtonIcon(buttonData.Icon)" OnClick="async () => await buttonData.AsyncAction()">
+                                @buttonData.Text
+                            </MudButton>
+                            break;
+                    }
+                }
+            </MudStack>
         }
     </ChildContent>
 </InnerScrolling>

app/MindWork AI Studio/Components/AssistantBase.razor.cs

@@ -18,6 +18,15 @@ public abstract partial class AssistantBase : ComponentBase
     [Inject]
     protected ThreadSafeRandom RNG { get; init; } = null!;
     
+    [Inject]
+    protected ISnackbar Snackbar { get; init; } = null!;
+    
+    [Inject]
+    protected Rust Rust { get; init; } = null!;
+    
+    internal const string AFTER_RESULT_DIV_ID = "afterAssistantResult";
+    internal const string ASSISTANT_RESULT_DIV_ID = "assistantResult";
+    
     protected abstract string Title { get; }
     
     protected abstract string Description { get; }
@@ -26,6 +35,10 @@ public abstract partial class AssistantBase : ComponentBase
     
     private protected virtual RenderFragment? Body => null;
 
+    protected virtual bool ShowResult => true;
+
+    protected virtual IReadOnlyList<ButtonData> FooterButtons => [];
+
     protected static readonly Dictionary<string, object?> USER_INPUT_ATTRIBUTES = new();
     
     protected AIStudio.Settings.Provider providerSettings;
@@ -35,6 +48,7 @@ public abstract partial class AssistantBase : ComponentBase
     private ChatThread? chatThread;
     private ContentBlock? resultingContentBlock;
     private string[] inputIssues = [];
+    private bool isProcessing;
     
     #region Overrides of ComponentBase
 
@@ -96,7 +110,7 @@ public abstract partial class AssistantBase : ComponentBase
         return time;
     }
 
-    protected async Task AddAIResponseAsync(DateTimeOffset time)
+    protected async Task<string> AddAIResponseAsync(DateTimeOffset time)
     {
         var aiText = new ContentText
         {
@@ -114,10 +128,26 @@ public abstract partial class AssistantBase : ComponentBase
         };
         
         this.chatThread?.Blocks.Add(this.resultingContentBlock);
+        this.isProcessing = true;
+        this.StateHasChanged();
         
         // Use the selected provider to get the AI response.
         // By awaiting this line, we wait for the entire
         // content to be streamed.
         await aiText.CreateFromProviderAsync(this.providerSettings.CreateProvider(), this.JsRuntime, this.SettingsManager, this.providerSettings.Model, this.chatThread);
+        
+        this.isProcessing = false;
+        this.StateHasChanged();
+        
+        // Return the AI response:
+        return aiText.Text;
+    }
+    
+    private static string? GetButtonIcon(string icon)
+    {
+        if(string.IsNullOrWhiteSpace(icon))
+            return null;
+        
+        return icon;
     }
 }

app/MindWork AI Studio/Components/AssistantBaseCore.cs

@@ -4,7 +4,7 @@ using Microsoft.AspNetCore.Components.Rendering;
 namespace AIStudio.Components;
 
 //
-// See https://stackoverflow.com/a/77300384/2258393 for why this class is needed
+// See https://stackoverflow.com/a/77300384/2258393 for why this class is necessary
 //
 
 public abstract class AssistantBaseCore : AssistantBase

app/MindWork AI Studio/Components/Pages/About.razor

@@ -49,6 +49,7 @@
                 <ThirdPartyComponent Name="flexi_logger" Developer="emabee & Open Source Community" LicenseName="MIT & Apache-2.0" LicenseUrl="https://github.com/emabee/flexi_logger" RepositoryUrl="https://github.com/emabee/flexi_logger" UseCase="This Rust library is used to output the app's messages to the terminal. This is helpful during development and troubleshooting. This feature is initially invisible; when the app is started via the terminal, the messages become visible."/>
                 <ThirdPartyComponent Name="HtmlAgilityPack" Developer="ZZZ Projects & Open Source Community" LicenseName="MIT" LicenseUrl="https://github.com/zzzprojects/html-agility-pack/blob/master/LICENSE" RepositoryUrl="https://github.com/zzzprojects/html-agility-pack" UseCase="We use the HtmlAgilityPack to extract content from the web. This is necessary, e.g., when you provide a URL as input for an assistant."/>
                 <ThirdPartyComponent Name="ReverseMarkdown" Developer="Babu Annamalai & Open Source Community" LicenseName="MIT" LicenseUrl="https://github.com/mysticmind/reversemarkdown-net/blob/master/LICENSE" RepositoryUrl="https://github.com/mysticmind/reversemarkdown-net" UseCase="This library is used to convert HTML to Markdown. This is necessary, e.g., when you provide a URL as input for an assistant."/>
+                <ThirdPartyComponent Name="wikEd diff" Developer="Cacycle & Open Source Community" LicenseName="None (public domain)" LicenseUrl="https://en.wikipedia.org/wiki/User:Cacycle/diff#License" RepositoryUrl="https://en.wikipedia.org/wiki/User:Cacycle/diff" UseCase="This library is used to display the differences between two texts. This is necessary, e.g., for the grammar and spelling assistant."/>
             </MudGrid>
         </ExpansionPanel>
         <ExpansionPanel HeaderIcon="@Icons.Material.Filled.Verified" HeaderText="License: FSL-1.1-MIT">

app/MindWork AI Studio/Components/Pages/Assistants.razor

@@ -12,6 +12,7 @@
     <MudStack Row="@true" Wrap="@Wrap.Wrap" Class="mb-3">
         <AssistantBlock Name="Text Summarizer" Description="Using a LLM to summarize a given text." Icon="@Icons.Material.Filled.TextSnippet" Link="/assistant/summarizer"/>
         <AssistantBlock Name="Translation" Description="Translate text into another language." Icon="@Icons.Material.Filled.Translate" Link="/assistant/translation"/>
+        <AssistantBlock Name="Grammar & Spelling" Description="Check grammar and spelling of a given text." Icon="@Icons.Material.Filled.Edit" Link="/assistant/grammar-spelling"/>
     </MudStack>
 
     <MudText Typo="Typo.h4" Class="mb-2 mr-3 mt-6">

app/MindWork AI Studio/Components/Pages/GrammarSpelling/AssistantGrammarSpelling.razor

@@ -0,0 +1,11 @@
+@using AIStudio.Tools
+@page "/assistant/grammar-spelling"
+@inherits AssistantBaseCore
+
+<MudTextField T="string" @bind-Text="@this.inputText" Validation="@this.ValidateText" AdornmentIcon="@Icons.Material.Filled.DocumentScanner" Adornment="Adornment.Start" Label="Your input to check" Variant="Variant.Outlined" Lines="6" AutoGrow="@true" MaxLines="12" Class="mb-3" UserAttributes="@USER_INPUT_ATTRIBUTES"/>
+<EnumSelection T="CommonLanguages" NameFunc="@(language => language.NameSelectingOptional())" @bind-Value="@this.selectedTargetLanguage" Icon="@Icons.Material.Filled.Translate" Label="Language" AllowOther="@true" OtherValue="CommonLanguages.OTHER" @bind-OtherInput="@this.customTargetLanguage" ValidateOther="@this.ValidateCustomLanguage" LabelOther="Custom language" />
+<ProviderSelection @bind-ProviderSettings="@this.providerSettings" ValidateProvider="@this.ValidatingProvider"/>
+
+<MudButton Variant="Variant.Filled" Class="mb-3" OnClick="() => this.ProofreadText()">
+    Proofread
+</MudButton>

app/MindWork AI Studio/Components/Pages/GrammarSpelling/AssistantGrammarSpelling.razor.cs

@@ -0,0 +1,84 @@
+using AIStudio.Tools;
+
+namespace AIStudio.Components.Pages.GrammarSpelling;
+
+public partial class AssistantGrammarSpelling : AssistantBaseCore
+{
+    protected override string Title => "Grammar and Spelling Checker";
+    
+    protected override string Description =>
+        """
+        Check the grammar and spelling of a text.
+        """;
+    
+    protected override string SystemPrompt => 
+        $"""
+        You are an expert in languages and their rules. For example, you know how US and UK English or German in
+        Germany and German in Austria differ. You receive text as input. You check the spelling and grammar of
+        this text according to the rules of {this.SystemPromptLanguage()}. You never add information. You
+        never ask the user for additional information. You do not attempt to improve the wording of the text.
+        Your response includes only the corrected text. Do not explain your changes. If no changes are needed,
+        you return the text unchanged.
+        """;
+
+    protected override bool ShowResult => false;
+    
+    protected override IReadOnlyList<ButtonData> FooterButtons => new[]
+    {
+        new ButtonData("Copy corrected text", Icons.Material.Filled.ContentCopy, Color.Default, string.Empty, this.CopyToClipboard),
+    };
+
+    private string inputText = string.Empty;
+    private CommonLanguages selectedTargetLanguage;
+    private string customTargetLanguage = string.Empty;
+    private string correctedText = string.Empty;
+
+    private string? ValidateText(string text)
+    {
+        if(string.IsNullOrWhiteSpace(text))
+            return "Please provide a text as input. You might copy the desired text from a document or a website.";
+        
+        return null;
+    }
+    
+    private string? ValidateCustomLanguage(string language)
+    {
+        if(this.selectedTargetLanguage == CommonLanguages.OTHER && string.IsNullOrWhiteSpace(language))
+            return "Please provide a custom language.";
+        
+        return null;
+    }
+    
+    private string SystemPromptLanguage()
+    {
+        var lang = this.selectedTargetLanguage switch
+        {
+            CommonLanguages.AS_IS => "the source language",
+            CommonLanguages.OTHER => this.customTargetLanguage,
+            
+            _ => $"{this.selectedTargetLanguage.Name()}",
+        };
+
+        if (string.IsNullOrWhiteSpace(lang))
+            return "the source language";
+
+        return lang;
+    }
+
+    private async Task ProofreadText()
+    {
+        if (!this.inputIsValid)
+            return;
+        
+        this.CreateChatThread();
+        var time = this.AddUserRequest(this.inputText);
+        
+        this.correctedText = await this.AddAIResponseAsync(time);
+        await this.JsRuntime.GenerateAndShowDiff(this.inputText, this.correctedText);
+    }
+    
+    private async Task CopyToClipboard()
+    {
+        await this.Rust.CopyText2Clipboard(this.JsRuntime, this.Snackbar, this.correctedText);
+    }
+}