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,33 +74,49 @@
                 <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">
-                @if (this.DataLLMProvider.IsLLMModelProvidedManually())
+                <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>
+                    {
-                    <MudTextField
+                        <MudButton Variant="Variant.Filled" Size="Size.Small" StartIcon="@Icons.Material.Filled.OpenInBrowser" Href="@this.DataLLMProvider.GetModelsOverviewURL(this.HFInferenceProviderId)" Target="_blank">
-                        T="string"
+                            Show available models
-                        @bind-Text="@this.dataManuallyModel"
+                        </MudButton>
-                        Label="Model"
+                        <MudTextField
-                        Class="mb-3"
+                            T="string"
-                        Adornment="Adornment.Start"
+                            @bind-Text="@this.dataManuallyModel"
-                        AdornmentIcon="@Icons.Material.Filled.FaceRetouchingNatural"
+                            Label="Model"
-                        AdornmentColor="Color.Info"
+                            Adornment="Adornment.Start"
-                        Validation="@this.ValidateManuallyModel"
+                            AdornmentIcon="@Icons.Material.Filled.FaceRetouchingNatural"
-                        UserAttributes="@SPELLCHECK_ATTRIBUTES"
+                            AdornmentColor="Color.Info"
-                    />
+                            Validation="@this.ValidateManuallyModel"
-                }
+                            UserAttributes="@SPELLCHECK_ATTRIBUTES"
-                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>
+                    else
-                    <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">
+                    {
-                        @foreach (var model in this.availableModels)
+                        <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)
                         {
-                            <MudSelectItem Value="@model">@model</MudSelectItem>
+                            <MudText Typo="Typo.body1">
+                                No models loaded or available.
+                            </MudText>
                         }
-                    </MudSelect>
+                        else
-                }
+                        {
-            </MudStack>
+                            <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.