Added icons to visualize model capabilities to the provider dropdown menu (#829)

Co-authored-by: Thorsten Sommer <SommerEngineering@users.noreply.github.com>

app/MindWork AI Studio/Components/ProviderSelection.razor

@@ -1,8 +1,23 @@
 @using AIStudio.Settings
 @inherits MSGComponentBase
 <MudSelect T="Provider" Value="@this.ProviderSettings" ValueChanged="@this.SelectionChanged" Validation="@this.ValidateProvider" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Apps" Margin="Margin.Dense" Label="@T("Provider")" Class="mb-3 rounded-lg" OuterClass="flex-grow-0" Variant="Variant.Outlined" Disabled="@this.Disabled">
-    @foreach (var provider in this.GetAvailableProviders())
+    @foreach (var providerItem in this.GetAvailableProviderSelectionItems())
     {
-        <MudSelectItem Value="@provider"/>
+        <MudSelectItem Value="@providerItem.Provider">
+            <MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Class="w-100" Wrap="Wrap.NoWrap">
+                <MudText Class="me-2">@providerItem.Provider</MudText>
+                @if (providerItem.CapabilityIcons.Count > 0)
+                {
+                    <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1" Wrap="Wrap.NoWrap" Class="flex-grow-0">
+                        @foreach (var capabilityIcon in providerItem.CapabilityIcons)
+                        {
+                            <MudTooltip Text="@capabilityIcon.Tooltip">
+                                <MudIcon Icon="@capabilityIcon.Icon" Size="Size.Small" Color="Color.Default" />
+                            </MudTooltip>
+                        }
+                    </MudStack>
+                }
+            </MudStack>
+        </MudSelectItem>
     }
 </MudSelect>

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

@@ -1,6 +1,7 @@
 using System.Diagnostics.CodeAnalysis;
 
 using AIStudio.Provider;
+using AIStudio.Settings;
 
 using Microsoft.AspNetCore.Components;
 
@@ -47,6 +48,40 @@ public partial class ProviderSelection : MSGComponentBase
         this.ProviderSettings = provider;
         await this.ProviderSettingsChanged.InvokeAsync(provider);
     }
+
+    private IEnumerable<ProviderSelectionItem> GetAvailableProviderSelectionItems()
+    {
+        foreach (var provider in this.GetAvailableProviders())
+            yield return new(provider, this.GetCapabilityIcons(provider));
+    }
+
+    private IReadOnlyList<CapabilityIcon> GetCapabilityIcons(AIStudio.Settings.Provider provider)
+    {
+        var capabilities = provider.GetModelCapabilities();
+        List<CapabilityIcon> capabilityIcons = [];
+
+        if (capabilities.Contains(Capability.AUDIO_INPUT))
+            capabilityIcons.Add(new(Icons.Material.Filled.GraphicEq, this.T("Audio input possible")));
+
+        if (capabilities.Contains(Capability.SINGLE_IMAGE_INPUT) || capabilities.Contains(Capability.MULTIPLE_IMAGE_INPUT))
+            capabilityIcons.Add(new(Icons.Material.Filled.Image, this.T("Image input possible")));
+
+        if (capabilities.Contains(Capability.SPEECH_INPUT))
+            capabilityIcons.Add(new(Icons.Material.Filled.Mic, this.T("Speech input possible")));
+
+        var reasoningIndicatorState = provider.GetReasoningIndicatorState();
+        if (reasoningIndicatorState is not ReasoningIndicatorState.NONE)
+            capabilityIcons.Add(new(Icons.Material.Filled.Psychology, this.GetReasoningTooltip(reasoningIndicatorState)));
+
+        return capabilityIcons;
+    }
+
+    private string GetReasoningTooltip(ReasoningIndicatorState reasoningIndicatorState) => reasoningIndicatorState switch
+    {
+        ReasoningIndicatorState.DEFAULT_ON => this.T("Uses reasoning (thinking) by default"),
+        ReasoningIndicatorState.CONFIGURED => this.T("Uses reasoning (thinking) configured by settings"),
+        _ => this.T("Uses reasoning (thinking)"),
+    };
     
     [SuppressMessage("Usage", "MWAIS0001:Direct access to `Providers` is not allowed")]
     private IEnumerable<AIStudio.Settings.Provider> GetAvailableProviders()
@@ -90,4 +125,8 @@ public partial class ProviderSelection : MSGComponentBase
     }
 
     #endregion
+
+    private readonly record struct CapabilityIcon(string Icon, string Tooltip);
+
+    private readonly record struct ProviderSelectionItem(AIStudio.Settings.Provider Provider, IReadOnlyList<CapabilityIcon> CapabilityIcons);
 }