Improve the provider dialog (#420)

app/MindWork AI Studio/Dialogs/ProviderDialog.razor

@@ -30,6 +30,7 @@
                     AdornmentIcon="@Icons.Material.Filled.VpnKey"
                     AdornmentColor="Color.Info"
                     InputType="InputType.Password"
+                    Immediate="true"
                     Validation="@this.providerValidation.ValidatingAPIKey"/>
             }
 
@@ -61,7 +62,7 @@
 
             @if (this.DataLLMProvider.IsHFInstanceProviderNeeded())
             {
-                <MudSelect Disabled="@(!this.DataLLMProvider.IsHFInstanceProviderNeeded())" @bind-Value="@this.HFInferenceProviderId" Label="HF Inference Provider" Class="mb-3" OpenIcon="@Icons.Material.Filled.Dns" AdornmentColor="Color.Info" Adornment="Adornment.Start" Validation="@this.providerValidation.ValidatingHFInstanceProvider">
+                <MudSelect @bind-Value="@this.HFInferenceProviderId" Label="Hugging Face Inference Provider" Class="mb-3" OpenIcon="@Icons.Material.Filled.Dns" AdornmentColor="Color.Info" Adornment="Adornment.Start" Validation="@this.providerValidation.ValidatingHFInstanceProvider">
                     @foreach (HFInferenceProvider inferenceProvider in Enum.GetValues(typeof(HFInferenceProvider)))
                     {
                         <MudSelectItem Value="@inferenceProvider">
@@ -73,15 +74,17 @@
                 <MudJustifiedText Class="mb-3"> Please double-check if your model name matches the curl specifications provided by the inference provider. If it doesn't, you might get a <b>Not Found</b> error when trying to use the model. Here's a <MudLink Href="https://huggingface.co/meta-llama/Llama-3.1-8B-Instruct?inference_api=true&inference_provider=novita&language=sh" Target="_blank">curl example</MudLink>.</MudJustifiedText>
             }
 
-            <MudStack Row="@true" AlignItems="AlignItems.Center">
+            <MudField FullWidth="true" Label="Model selection" Variant="Variant.Outlined" Class="mb-3">
+                <MudStack Row="@true" AlignItems="AlignItems.Center" StretchItems="StretchItems.End">
                     @if (this.DataLLMProvider.IsLLMModelProvidedManually())
                     {
-                    <MudButton Variant="Variant.Filled" Size="Size.Small" StartIcon="@Icons.Material.Filled.OpenInBrowser" Href="@this.DataLLMProvider.GetModelsOverviewURL(this.HFInferenceProviderId)" Target="_blank">Show available models</MudButton>
+                        <MudButton Variant="Variant.Filled" Size="Size.Small" StartIcon="@Icons.Material.Filled.OpenInBrowser" Href="@this.DataLLMProvider.GetModelsOverviewURL(this.HFInferenceProviderId)" Target="_blank">
+                            Show available models
+                        </MudButton>
                         <MudTextField
                             T="string"
                             @bind-Text="@this.dataManuallyModel"
                             Label="Model"
-                        Class="mb-3"
                             Adornment="Adornment.Start"
                             AdornmentIcon="@Icons.Material.Filled.FaceRetouchingNatural"
                             AdornmentColor="Color.Info"
@@ -91,15 +94,29 @@
                     }
                     else
                     {
-                    <MudButton Disabled="@(!this.DataLLMProvider.CanLoadModels(this.DataHost, this.dataAPIKey))" Variant="Variant.Filled" Size="Size.Small" StartIcon="@Icons.Material.Filled.Refresh" OnClick="this.ReloadModels">Load</MudButton>
-                    <MudSelect Disabled="@this.IsNoneProvider" @bind-Value="@this.DataModel" Label="Model" Class="mb-3" OpenIcon="@Icons.Material.Filled.FaceRetouchingNatural" AdornmentColor="Color.Info" Adornment="Adornment.Start" Validation="@this.providerValidation.ValidatingModel">
+                        <MudButton Disabled="@(!this.DataLLMProvider.CanLoadModels(this.DataHost, this.dataAPIKey))" Variant="Variant.Filled" Size="Size.Small" StartIcon="@Icons.Material.Filled.Refresh" OnClick="this.ReloadModels">
+                            Load models
+                        </MudButton>
+                        @if(this.availableModels.Count is 0)
+                        {
+                            <MudText Typo="Typo.body1">
+                                No models loaded or available.
+                            </MudText>
+                        }
+                        else
+                        {
+                            <MudSelect @bind-Value="@this.DataModel"
+                                       OpenIcon="@Icons.Material.Filled.FaceRetouchingNatural" AdornmentColor="Color.Info"
+                                       Adornment="Adornment.Start" Validation="@this.providerValidation.ValidatingModel">
                                 @foreach (var model in this.availableModels)
                                 {
                                     <MudSelectItem Value="@model">@model</MudSelectItem>
                                 }
                             </MudSelect>
                         }
+                    }
                 </MudStack>
+            </MudField>
 
             @* ReSharper disable once CSharpWarnings::CS8974 *@
             <MudTextField

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

@@ -272,6 +272,4 @@ public partial class ProviderDialog : ComponentBase, ISecretId
         LLMProviders.SELF_HOSTED => "(Optional) API Key",
         _ => "API Key",
     };
-    
-    private bool IsNoneProvider => this.DataLLMProvider is LLMProviders.NONE;
 }

app/MindWork AI Studio/wwwroot/changelog/v0.9.41.md

@@ -3,4 +3,5 @@
 - Changed the terminology from "temporary chats" to "disappearing chats" in the UI. This makes it clearer to understand the purpose of these chats.
 - Improved the hot reloading of the plugin system to prevent overlapping reloads.
 - Improved the app behavior when the user system was waked up from sleep mode.
+- Improved the provider dialog with better input handling for API keys and an optimized model selection.
 - Fixed the color for the update notification button to match the color theme.