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

@using AIStudio.Provider
@using AIStudio.Settings
@inherits SettingsPanelProviderBase

<ExpansionPanel HeaderIcon="@Icons.Material.Filled.Layers" HeaderText="@T("Configure LLM Providers")">
    <MudText Typo="Typo.h4" Class="mb-3">
        @T("Configured LLM Providers")
    </MudText>
    <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" GroupBy="@GROUP_CONFIG" Class="border-dashed border rounded-lg">
        <ColGroup>
            <col style="width: 12em;"/>
            <col/>
            <col style="width: 22em;"/>
        </ColGroup>
        <HeaderContent>
            <MudTh>@T("Instance Name")</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.InstanceName</MudTd>
            <MudTd>@this.GetLLMProviderModelName(context)</MudTd>
            <MudTd>
                <MudStack Row="true" Class="mb-2 mt-2" Spacing="1" Wrap="Wrap.Wrap">
                    @if (context.IsTrustedForDataSourceSecurityChecks(this.SettingsManager))
                    {
                        <MudTooltip Text="@(context.IsSelfHosted ? T("This self-hosted provider is trusted for data source security checks.") : T("This provider is trusted by your organization for data source security checks."))">
                            <MudIconButton Color="Color.Success" Icon="@Icons.Material.Filled.VerifiedUser" Disabled="true"/>
                        </MudTooltip>
                    }
                    @if (context.IsEnterpriseConfiguration && !context.AllowUserProvidedAPIKey)
                    {
                        <MudTooltip Text="@T("This provider is managed by your organization.")">
                            <MudIconButton Color="Color.Info" Icon="@Icons.Material.Filled.Business" Disabled="true"/>
                        </MudTooltip>
                    }
                    else if (context.IsEnterpriseConfiguration && context.AllowUserProvidedAPIKey)
                    {
                        <MudTooltip Text="@T("This provider is managed by your organization. You can set your own API key.")">
                            <MudIconButton Color="Color.Info" Icon="@Icons.Material.Filled.Key" OnClick="@(() => this.EditLLMProvider(context))"/>
                        </MudTooltip>
                    }
                    else
                    {
                        <MudTooltip Text="@T("Open Dashboard")">
                            <MudIconButton Color="Color.Info" Icon="@Icons.Material.Filled.OpenInBrowser" Href="@context.UsedLLMProvider.GetDashboardURL()" Target="_blank" Disabled="@(!context.UsedLLMProvider.HasDashboard())"/>
                        </MudTooltip>
                        <MudTooltip Text="@T("Edit")">
                            <MudIconButton Color="Color.Info" Icon="@Icons.Material.Filled.Edit" OnClick="@(() => this.EditLLMProvider(context))"/>
                        </MudTooltip>
                        @if (this.SettingsManager.ConfigurationData.App.ShowAdminSettings)
                        {
                            <MudTooltip Text="@T("Export configuration")">
                                <MudIconButton Color="Color.Info" Icon="@Icons.Material.Filled.Dataset" OnClick="@(() => this.ExportLLMProvider(context))"/>
                            </MudTooltip>
                        }
                        <MudTooltip Text="@T("Delete")">
                            <MudIconButton Color="Color.Error" Icon="@Icons.Material.Filled.Delete" OnClick="@(() => this.DeleteLLMProvider(context))"/>
                        </MudTooltip>
                    }
                </MudStack>
            </MudTd>
        </RowTemplate>
    </MudTable>

    @if(this.SettingsManager.GetAllProviders().Count == 0)
    {
        <MudText Typo="Typo.h6" Class="mt-3">
            @T("No providers configured yet.")
        </MudText>
    }
    
    <LockableButton Text="@T("Add Provider")" IsLocked="@(() => !this.SettingsManager.ConfigurationData.App.AllowUserToAddProvider)" Icon="@Icons.Material.Filled.AddRoad" OnClickAsync="@this.AddLLMProvider" Class="mt-3" />
</ExpansionPanel>