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

using System.Text.RegularExpressions;

using AIStudio.Provider;

using Microsoft.AspNetCore.Components;

namespace AIStudio.Settings;

/// <summary>
/// The provider settings dialog.
/// </summary>
public partial class ProviderDialog : ComponentBase
{
    [CascadingParameter]
    private MudDialogInstance MudDialog { get; set; } = null!;

    /// <summary>
    /// The provider's number in the list.
    /// </summary>
    [Parameter]
    public uint DataNum { get; set; }
    
    /// <summary>
    /// The provider's ID.
    /// </summary>
    [Parameter]
    public string DataId { get; set; } = Guid.NewGuid().ToString();
    
    /// <summary>
    /// The user chosen instance name.
    /// </summary>
    [Parameter]
    public string DataInstanceName { get; set; } = string.Empty;
    
    /// <summary>
    /// The chosen hostname for self-hosted providers.
    /// </summary>
    [Parameter]
    public string DataHostname { get; set; } = string.Empty;
    
    /// <summary>
    /// Is this provider self-hosted?
    /// </summary>
    [Parameter]
    public bool IsSelfHosted { get; set; }
    
    /// <summary>
    /// The provider to use.
    /// </summary>
    [Parameter]
    public Providers DataProvider { get; set; } = Providers.NONE;
    
    /// <summary>
    /// The LLM model to use, e.g., GPT-4o.
    /// </summary>
    [Parameter]
    public Model DataModel { get; set; }
    
    /// <summary>
    /// Should the dialog be in editing mode?
    /// </summary>
    [Parameter]
    public bool IsEditing { get; init; }
    
    [Inject]
    private SettingsManager SettingsManager { get; set; } = null!;
    
    [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>
    private List<string> UsedInstanceNames { get; set; } = [];
    
    private bool dataIsValid;
    private string[] dataIssues = [];
    private string dataAPIKey = string.Empty;
    private string dataAPIKeyStorageIssue = string.Empty;
    private string dataEditingPreviousInstanceName = string.Empty;
    
    // We get the form reference from Blazor code to validate it manually:
    private MudForm form = null!;
    
    private readonly List<Model> availableModels = new();

    #region Overrides of 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();
        
        // When editing, we need to load the data:
        if(this.IsEditing)
        {
            this.dataEditingPreviousInstanceName = this.DataInstanceName.ToLowerInvariant();
            var provider = this.DataProvider.CreateProvider(this.DataInstanceName);
            if(provider is NoProvider)
                return;
            
            // Load the API key:
            var requestedSecret = await this.SettingsManager.GetAPIKey(this.JsRuntime, provider);
            if(requestedSecret.Success)
            {
                this.dataAPIKey = requestedSecret.Secret;
                
                // Now, we try to load the list of available models:
                if(this.DataProvider is not Providers.SELF_HOSTED)
                    await this.ReloadModels();
            }
            else
            {
                this.dataAPIKeyStorageIssue = $"Failed to load the API key from the operating system. The message was: {requestedSecret.Issue}. You might ignore this message and provide the API key again.";
                await this.form.Validate();
            }
        }
        
        await base.OnInitializedAsync();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        // Reset the validation when not editing and on the first render.
        // We don't want to show validation errors when the user opens the dialog.
        if(!this.IsEditing && firstRender)
            this.form.ResetValidation();
        
        await base.OnAfterRenderAsync(firstRender);
    }

    #endregion
    
    private async Task Store()
    {
        await this.form.Validate();
        if (!string.IsNullOrWhiteSpace(this.dataAPIKeyStorageIssue))
            this.dataAPIKeyStorageIssue = string.Empty;
        
        // When the data is not valid, we don't store it:
        if (!this.dataIsValid)
            return;
        
        // Use the data model to store the provider.
        // We just return this data to the parent component:
        var addedProvider = new Provider
        {
            Num = this.DataNum,
            Id = this.DataId,
            InstanceName = this.DataInstanceName,
            UsedProvider = this.DataProvider,
            Model = this.DataModel,
            IsSelfHosted = this.DataProvider is Providers.SELF_HOSTED,
            Hostname = this.DataHostname,
        };
        
        // We need to instantiate the provider to store the API key:
        var provider = this.DataProvider.CreateProvider(this.DataInstanceName);
            
        // Store the API key in the OS secure storage:
        var storeResponse = await this.SettingsManager.SetAPIKey(this.JsRuntime, provider, this.dataAPIKey);
        if (!storeResponse.Success)
        {
            this.dataAPIKeyStorageIssue = $"Failed to store the API key in the operating system. The message was: {storeResponse.Issue}. Please try again.";
            await this.form.Validate();
            return;
        }
        
        this.MudDialog.Close(DialogResult.Ok(addedProvider));
    }
    
    private string? ValidatingProvider(Providers provider)
    {
        if (provider == Providers.NONE)
            return "Please select a provider.";
        
        return null;
    }
    
    private string? ValidatingModel(Model model)
    {
        if(this.DataProvider is Providers.SELF_HOSTED)
            return null;
        
        if (model == default)
            return "Please select a model.";
        
        return null;
    }
    
    [GeneratedRegex(@"^[a-zA-Z0-9\-_. ]+$")]
    private static partial Regex InstanceNameRegex();
    
    private static readonly string[] RESERVED_NAMES = { "CON", "PRN", "AUX", "NUL", "COM1", "COM2", "COM3", "COM4", "COM5", "COM6", "COM7", "COM8", "COM9", "LPT1", "LPT2", "LPT3", "LPT4", "LPT5", "LPT6", "LPT7", "LPT8", "LPT9" };
    
    private string? ValidatingInstanceName(string instanceName)
    {
        if (string.IsNullOrWhiteSpace(instanceName))
            return "Please enter an instance name.";
        
        if (instanceName.StartsWith(' ') || instanceName.StartsWith('.'))
            return "The instance name must not start with a space or a dot.";
        
        if (instanceName.EndsWith(' ') || instanceName.EndsWith('.'))
            return "The instance name must not end with a space or a dot.";
        
        if (instanceName.StartsWith('-') || instanceName.StartsWith('_'))
            return "The instance name must not start with a hyphen or an underscore.";
        
        if (instanceName.Length > 255)
            return "The instance name must not exceed 255 characters.";
        
        if (!InstanceNameRegex().IsMatch(instanceName))
            return "The instance name must only contain letters, numbers, spaces, hyphens, underscores, and dots.";
        
        if (instanceName.Contains("  "))
            return "The instance name must not contain consecutive spaces.";
        
        if (RESERVED_NAMES.Contains(instanceName.ToUpperInvariant()))
            return "This name is reserved and cannot be used.";
        
        if (instanceName.Any(c => Path.GetInvalidFileNameChars().Contains(c)))
            return "The instance name contains invalid characters.";
        
        // The instance name must be unique:
        var lowerInstanceName = instanceName.ToLowerInvariant();
        if (lowerInstanceName != this.dataEditingPreviousInstanceName && this.UsedInstanceNames.Contains(lowerInstanceName))
            return "The instance name must be unique; the chosen name is already in use.";
        
        return null;
    }
    
    private string? ValidatingAPIKey(string apiKey)
    {
        if(this.DataProvider is Providers.SELF_HOSTED)
            return null;
        
        if(!string.IsNullOrWhiteSpace(this.dataAPIKeyStorageIssue))
            return this.dataAPIKeyStorageIssue;

        if(string.IsNullOrWhiteSpace(apiKey))
            return "Please enter an API key.";
        
        return null;
    }

    private string? ValidatingHostname(string hostname)
    {
        if(this.DataProvider != Providers.SELF_HOSTED)
            return null;
        
        if(string.IsNullOrWhiteSpace(hostname))
            return "Please enter a hostname, e.g., http://localhost:1234";
        
        if(!hostname.StartsWith("http://", StringComparison.InvariantCultureIgnoreCase) && !hostname.StartsWith("https://", StringComparison.InvariantCultureIgnoreCase))
            return "The hostname must start with either http:// or https://";

        if(!Uri.TryCreate(hostname, UriKind.Absolute, out _))
            return "The hostname is not a valid HTTP(S) URL.";
        
        return null;
    }

    private void Cancel() => this.MudDialog.Cancel();
    
    private async Task ReloadModels()
    {
        var provider = this.DataProvider.CreateProvider("temp");
        if(provider is NoProvider)
            return;

        var models = await provider.GetTextModels(this.JsRuntime, this.SettingsManager, this.dataAPIKey);
        
        // Order descending by ID means that the newest models probably come first:
        var orderedModels = models.OrderByDescending(n => n.Id);
        
        this.availableModels.Clear();
        this.availableModels.AddRange(orderedModels);
    }
    
    private bool CanLoadModels => !string.IsNullOrWhiteSpace(this.dataAPIKey) && this.DataProvider != Providers.NONE && this.DataProvider != Providers.SELF_HOSTED;
    
    private bool IsCloudProvider => this.DataProvider is not Providers.SELF_HOSTED;
    
    private bool IsSelfHostedOrNone => this.DataProvider is Providers.SELF_HOSTED or Providers.NONE;

    private string GetProviderCreationURL() => this.DataProvider switch
    {
        Providers.OPEN_AI => "https://platform.openai.com/signup",
        Providers.MISTRAL => "https://console.mistral.ai/",
        Providers.ANTHROPIC => "https://console.anthropic.com/dashboard",
        
        _ => string.Empty,
    };
}