Sort and group model lists by provider (#916)

app/MindWork AI Studio/Components/Settings/SettingsPanelApp.razor.cs

@@ -91,7 +91,7 @@ public partial class SettingsPanelApp : SettingsPanelBase
         yield return new(T("Disable dictation and transcription"), string.Empty);
 
         var minimumLevel = this.SettingsManager.GetMinimumConfidenceLevel(Tools.Components.APP_SETTINGS);
-        foreach (var provider in this.SettingsManager.ConfigurationData.TranscriptionProviders)
+        foreach (var provider in this.SettingsManager.GetAllTranscriptionProviders())
         {
             if (provider.UsedLLMProvider.GetConfidence(this.SettingsManager).Level >= minimumLevel)
                 yield return new(provider.Name, provider.Id);

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

@@ -17,25 +17,24 @@
         <MudJustifiedText Typo="Typo.body1" Class="mb-3">
             @T("This helps AI Studio understand and compare things in a way that's similar to how humans do. When you're working on something, AI Studio can automatically identify related documents and data by comparing their digital fingerprints. For instance, if you're writing about customer service, AI Studio can instantly find other documents in your data that discuss similar topics or experiences, even if they use different words.")
         </MudJustifiedText>
-        <MudTable Items="@this.SettingsManager.ConfigurationData.EmbeddingProviders" Hover="@true" Class="border-dashed border rounded-lg">
+        <MudTable Items="@this.SettingsManager.GetAllEmbeddingProviders()" Hover="@true" GroupBy="@GROUP_CONFIG" Class="border-dashed border rounded-lg">
             <ColGroup>
-                <col style="width: 3em;"/>
-                <col style="width: 12em;"/>
                 <col style="width: 12em;"/>
                 <col/>
                 <col style="width: 22em;"/>
             </ColGroup>
             <HeaderContent>
-                <MudTh>#</MudTh>
                 <MudTh>@T("Name")</MudTh>
-                <MudTh>@T("Provider")</MudTh>
                 <MudTh>@T("Model")</MudTh>
                 <MudTh>@T("Actions")</MudTh>
             </HeaderContent>
+            <GroupHeaderTemplate>
+                <MudTh Class="provider-group-header" colspan="4">
+                    @context.Key
+                </MudTh>
+            </GroupHeaderTemplate>
             <RowTemplate>
-                <MudTd>@context.Num</MudTd>
                 <MudTd>@context.Name</MudTd>
-                <MudTd>@context.UsedLLMProvider.ToName()</MudTd>
                 <MudTd>@this.GetEmbeddingProviderModelName(context)</MudTd>
 
                 <MudTd>

app/MindWork AI Studio/Components/Settings/SettingsPanelEmbeddings.razor.cs

@@ -11,6 +11,17 @@ namespace AIStudio.Components.Settings;
 
 public partial class SettingsPanelEmbeddings : SettingsPanelProviderBase
 {
+    /// <summary>
+    /// Groups the table by the used LLM provider. The embedding provider list is already sorted by
+    /// that provider, so all instances of one LLM provider form a single, coherent group.
+    /// </summary>
+    private static readonly TableGroupDefinition<EmbeddingProvider> GROUP_CONFIG = new()
+    {
+        Expandable = true,
+        IsInitiallyExpanded = false,
+        Selector = provider => provider.UsedLLMProvider.ToName(),
+    };
+
     [Parameter]
     public List<ConfigurationSelectData<string>> AvailableEmbeddingProviders { get; set; } = new();
     
@@ -131,7 +142,7 @@ public partial class SettingsPanelEmbeddings : SettingsPanelProviderBase
     private async Task UpdateEmbeddingProviders()
     {
         this.AvailableEmbeddingProviders.Clear();
-        foreach (var provider in this.SettingsManager.ConfigurationData.EmbeddingProviders)
+        foreach (var provider in this.SettingsManager.GetAllEmbeddingProviders())
             this.AvailableEmbeddingProviders.Add(new (provider.Name, provider.Id));
         
         await this.AvailableEmbeddingProvidersChanged.InvokeAsync(this.AvailableEmbeddingProviders);

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

@@ -9,25 +9,24 @@
     <MudJustifiedText Typo="Typo.body1" Class="mb-3">
         @T("What we call a provider is the combination of an LLM provider such as OpenAI and a model like GPT-4o. You can configure as many providers as you want. This way, you can use the appropriate model for each task. As an LLM provider, you can also choose local providers. However, to use this app, you must configure at least one provider.")
     </MudJustifiedText>
-    <MudTable Items="@this.SettingsManager.GetAllProviders()" Hover="@true" Class="border-dashed border rounded-lg">
+    <MudTable Items="@this.SettingsManager.GetAllProviders()" Hover="@true" GroupBy="@GROUP_CONFIG" Class="border-dashed border rounded-lg">
         <ColGroup>
-            <col style="width: 3em;"/>
-            <col style="width: 12em;"/>
             <col style="width: 12em;"/>
             <col/>
             <col style="width: 22em;"/>
         </ColGroup>
         <HeaderContent>
-            <MudTh>#</MudTh>
             <MudTh>@T("Instance Name")</MudTh>
-            <MudTh>@T("Provider")</MudTh>
             <MudTh>@T("Model")</MudTh>
             <MudTh>@T("Actions")</MudTh>
         </HeaderContent>
+        <GroupHeaderTemplate>
+            <MudTh Class="provider-group-header" colspan="4">
+                @context.Key
+            </MudTh>
+        </GroupHeaderTemplate>
         <RowTemplate>
-            <MudTd>@context.Num</MudTd>
             <MudTd>@context.InstanceName</MudTd>
-            <MudTd>@context.UsedLLMProvider.ToName()</MudTd>
             <MudTd>@this.GetLLMProviderModelName(context)</MudTd>
             <MudTd>
                 <MudStack Row="true" Class="mb-2 mt-2" Spacing="1" Wrap="Wrap.Wrap">

app/MindWork AI Studio/Components/Settings/SettingsPanelProviders.razor.cs

@@ -1,6 +1,7 @@
 using System.Diagnostics.CodeAnalysis;
 
 using AIStudio.Dialogs;
+using AIStudio.Provider;
 using AIStudio.Settings;
 
 using Microsoft.AspNetCore.Components;
@@ -11,6 +12,17 @@ namespace AIStudio.Components.Settings;
 
 public partial class SettingsPanelProviders : SettingsPanelProviderBase
 {
+    /// <summary>
+    /// Groups the table by the used LLM provider. The provider list is already sorted by that
+    /// provider, so all instances of one LLM provider form a single, coherent group.
+    /// </summary>
+    private static readonly TableGroupDefinition<AIStudio.Settings.Provider> GROUP_CONFIG = new()
+    {
+        Expandable = true,
+        IsInitiallyExpanded = false,
+        Selector = provider => provider.UsedLLMProvider.ToName(),
+    };
+
     [Parameter]
     public List<ConfigurationSelectData<string>> AvailableLLMProviders { get; set; } = new();
     

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

@@ -13,25 +13,24 @@
             @T("With the support of transcription models, MindWork AI Studio can convert human speech into text. This is useful, for example, when you need to dictate text. You can choose from dedicated transcription models, but not multimodal LLMs (large language models) that can handle both speech and text. The configuration of multimodal models is done in the 'Configure providers' section.")
         </MudJustifiedText>
         
-        <MudTable Items="@this.SettingsManager.ConfigurationData.TranscriptionProviders" Hover="@true" Class="border-dashed border rounded-lg">
+        <MudTable Items="@this.SettingsManager.GetAllTranscriptionProviders()" Hover="@true" GroupBy="@GROUP_CONFIG" Class="border-dashed border rounded-lg">
             <ColGroup>
-                <col style="width: 3em;"/>
-                <col style="width: 12em;"/>
                 <col style="width: 12em;"/>
                 <col/>
                 <col style="width: 22em;"/>
             </ColGroup>
             <HeaderContent>
-                <MudTh>#</MudTh>
                 <MudTh>@T("Name")</MudTh>
-                <MudTh>@T("Provider")</MudTh>
                 <MudTh>@T("Model")</MudTh>
                 <MudTh>@T("Actions")</MudTh>
             </HeaderContent>
+            <GroupHeaderTemplate>
+                <MudTh Class="provider-group-header" colspan="4">
+                    @context.Key
+                </MudTh>
+            </GroupHeaderTemplate>
             <RowTemplate>
-                <MudTd>@context.Num</MudTd>
                 <MudTd>@context.Name</MudTd>
-                <MudTd>@context.UsedLLMProvider.ToName()</MudTd>
                 <MudTd>@this.GetTranscriptionProviderModelName(context)</MudTd>
 
                 <MudTd>

app/MindWork AI Studio/Components/Settings/SettingsPanelTranscription.razor.cs

@@ -1,4 +1,5 @@
 using AIStudio.Dialogs;
+using AIStudio.Provider;
 using AIStudio.Settings;
 
 using Microsoft.AspNetCore.Components;
@@ -9,6 +10,17 @@ namespace AIStudio.Components.Settings;
 
 public partial class SettingsPanelTranscription : SettingsPanelProviderBase
 {
+    /// <summary>
+    /// Groups the table by the used LLM provider. The transcription provider list is already sorted by
+    /// that provider, so all instances of one LLM provider form a single, coherent group.
+    /// </summary>
+    private static readonly TableGroupDefinition<TranscriptionProvider> GROUP_CONFIG = new()
+    {
+        Expandable = true,
+        IsInitiallyExpanded = false,
+        Selector = provider => provider.UsedLLMProvider.ToName(),
+    };
+
     [Parameter]
     public List<ConfigurationSelectData<string>> AvailableTranscriptionProviders { get; set; } = new();
     
@@ -129,7 +141,7 @@ public partial class SettingsPanelTranscription : SettingsPanelProviderBase
     private async Task UpdateTranscriptionProviders()
     {
         this.AvailableTranscriptionProviders.Clear();
-        foreach (var provider in this.SettingsManager.ConfigurationData.TranscriptionProviders)
+        foreach (var provider in this.SettingsManager.GetAllTranscriptionProviders())
             this.AvailableTranscriptionProviders.Add(new (provider.Name, provider.Id));
         
         await this.AvailableTranscriptionProvidersChanged.InvokeAsync(this.AvailableTranscriptionProviders);