Merge branch '50-bug-spell-checking' into 'main'

Resolve "Bug: Spell Checking"

Closes #50

See merge request products/mindwork-ai-studio!13

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

@@ -22,6 +22,6 @@
     </div>
 
     <MudPaper Style="flex: 0 0 auto;">
-        <MudTextField T="string" @ref="@this.inputField" @bind-Text="@this.userInput" Variant="Variant.Outlined" AutoGrow="@true" Lines="3" MaxLines="12" Label="@this.InputLabel" Placeholder="@this.ProviderPlaceholder" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Send" OnAdornmentClick="() => this.SendMessage()" ReadOnly="!this.IsProviderSelected || this.isStreaming" Immediate="@true" OnKeyUp="this.InputKeyEvent"/>
+        <MudTextField T="string" @ref="@this.inputField" @bind-Text="@this.userInput" Variant="Variant.Outlined" AutoGrow="@true" Lines="3" MaxLines="12" Label="@this.InputLabel" Placeholder="@this.ProviderPlaceholder" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Send" OnAdornmentClick="() => this.SendMessage()" ReadOnly="!this.IsProviderSelected || this.isStreaming" Immediate="@true" OnKeyUp="this.InputKeyEvent" UserAttributes="@USER_INPUT_ATTRIBUTES"/>
     </MudPaper>
 </div>

app/MindWork AI Studio/Components/Pages/Chat.razor.cs

@@ -21,6 +21,8 @@ public partial class Chat : ComponentBase
     [Inject]
     public Random RNG { get; set; } = null!;
 
+    private static readonly Dictionary<string, object?> USER_INPUT_ATTRIBUTES = new();
+    
     private AIStudio.Settings.Provider selectedProvider;
     private ChatThread? chatThread;
     private bool isStreaming;
@@ -38,6 +40,9 @@ public partial class Chat : ComponentBase
         // Ensure that the settings are loaded:
         await this.SettingsManager.LoadSettings();
         
+        // Configure the spellchecking for the user input:
+        this.SettingsManager.InjectSpellchecking(USER_INPUT_ATTRIBUTES);
+        
         // For now, we just create a new chat thread.
         // Later we want the chats to be persisted
         // across page loads and organize them in

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

@@ -51,6 +51,7 @@
 
             <MudText Typo="Typo.h4" Class="mb-3">Options</MudText>
             <ConfigurationOption OptionDescription="Save energy?" LabelOn="Energy saving is enabled" LabelOff="Energy saving is disabled" State="@(() => this.SettingsManager.ConfigurationData.IsSavingEnergy)" StateUpdate="@(updatedState => this.SettingsManager.ConfigurationData.IsSavingEnergy = updatedState)" OptionHelp="When enabled, streamed content from the AI is updated once every third second. When disabled, streamed content will be updated as soon as it is available."/>
+            <ConfigurationOption OptionDescription="Enable spellchecking?" LabelOn="Spellchecking is enabled" LabelOff="Spellchecking is disabled" State="@(() => this.SettingsManager.ConfigurationData.EnableSpellchecking)" StateUpdate="@(updatedState => this.SettingsManager.ConfigurationData.EnableSpellchecking = updatedState)" OptionHelp="When enabled, spellchecking will be active in all input fields. Depending on your operating system, errors may not be visually highlighted, but right-clicking may still offer possible corrections." />
             <ConfigurationSelect OptionDescription="Shortcut to send input" SelectedValue="@(() => this.SettingsManager.ConfigurationData.ShortcutSendBehavior)" Data="@ConfigurationSelectDataFactory.GetSendBehaviorData()" SelectionUpdate="@(selectedValue => this.SettingsManager.ConfigurationData.ShortcutSendBehavior = selectedValue)" OptionHelp="Do you want to use any shortcut to send your input?"/>
         </MudPaper>
     </div>

app/MindWork AI Studio/Settings/Data.cs

@@ -31,4 +31,9 @@ public sealed class Data
     /// Shortcuts to send the input to the AI.
     /// </summary>
     public SendBehavior ShortcutSendBehavior { get; set; } = SendBehavior.MODIFER_ENTER_IS_SENDING;
+    
+    /// <summary>
+    /// Should we enable spellchecking for all input fields?
+    /// </summary>
+    public bool EnableSpellchecking { get; set; }
 }

app/MindWork AI Studio/Settings/ProviderDialog.razor

@@ -14,6 +14,7 @@
                 AdornmentIcon="@Icons.Material.Filled.Lightbulb"
                 AdornmentColor="Color.Info"
                 Validation="@this.ValidatingInstanceName"
+                UserAttributes="@INSTANCE_NAME_ATTRIBUTES"
             />
             
             @* ReSharper disable once CSharpWarnings::CS8974 *@

app/MindWork AI Studio/Settings/ProviderDialog.razor.cs

@@ -56,6 +56,8 @@ public partial class ProviderDialog : ComponentBase
     [Inject]
     private IJSRuntime JsRuntime { get; set; } = null!;
 
+    private static readonly Dictionary<string, object?> INSTANCE_NAME_ATTRIBUTES = new();
+    
     /// <summary>
     /// The list of used instance names. We need this to check for uniqueness.
     /// </summary>
@@ -76,6 +78,9 @@ public partial class ProviderDialog : ComponentBase
 
     protected override async Task OnInitializedAsync()
     {
+        // Configure the spellchecking for the instance name input:
+        this.SettingsManager.InjectSpellchecking(INSTANCE_NAME_ATTRIBUTES);
+        
         // Load the used instance names:
         this.UsedInstanceNames = this.SettingsManager.ConfigurationData.Providers.Select(x => x.InstanceName.ToLowerInvariant()).ToList();
         

app/MindWork AI Studio/Settings/SettingsManager.cs

@@ -121,4 +121,6 @@ public sealed class SettingsManager
         var settingsJson = JsonSerializer.Serialize(this.ConfigurationData);
         await File.WriteAllTextAsync(settingsPath, settingsJson);
     }
+    
+    public void InjectSpellchecking(Dictionary<string, object?> attributes) => attributes["spellcheck"] = this.ConfigurationData.EnableSpellchecking ? "true" : "false";
 }